/* Sale Invoice page.

   The toolbar and table now use the shared look defined in SaleAccount.css
   (.top-btns-container / .master-table-container / .master-table-scroll /
   .master-content-table1), so none of that is repeated here.

   This file previously also redefined .filter-icon, .edit-icon, .delete-icon and
   .tooltip-panel. Because every stylesheet is loaded globally in index.html and this
   one comes after SaleAccount.css, those copies were silently overriding the shared
   versions on *every* page, not just this one. They are deliberately gone.

   What remains is only what is specific to this page: the invoice table's own column
   sizing, and the e-way bill / e-invoice status icons. */

/*======================================== Table columns ================================================*/
/* Scoped to .sale-invoice-table so these widths can't leak onto the other pages that
   share .master-content-table1.

   Every width here is a real length, deliberately. The shared table is table-layout:fixed
   with width:max-content (SaleAccount.css), and under fixed layout a column whose width is
   auto / max-content / fit-content has no intrinsic contribution at all: it does not widen
   the table, it just divides up whatever space is left once the columns that *do* have
   lengths have taken theirs. With the table sized to max-content there is nothing left, so
   Invoice Number, Invoice Name and Invoice Amount collapsed to zero — invisible on a phone
   and unreachable however far you scrolled sideways, because the scroll range is computed
   from that same (too small) max-content width. */

.sale-invoice-table th:nth-child(1),
.sale-invoice-table td:nth-child(1) {
    text-align: center;
}

.sale-invoice-table th:nth-child(2),
.sale-invoice-table td:nth-child(2) {
    text-align: left;
}

/* Invoice Date — dd-MM-yyyy. */
.sale-invoice-table th:nth-child(3),
.sale-invoice-table td:nth-child(3) {
    width: 120px;
    text-align: left;
}

/* Invoice Number — formats are configurable (InvoiceNumberFormat), so leave room. */
.sale-invoice-table th:nth-child(4),
.sale-invoice-table td:nth-child(4) {
    width: auto;
    text-align: left;
}

/* Invoice Name — party names are the longest thing in the row, so it gets the most room. */
.sale-invoice-table th:nth-child(5),
.sale-invoice-table td:nth-child(5) {
    width: 240px;
    text-align: left;
}

/* Invoice Amount reads as a figure, so right-align it. */
.sale-invoice-table th:nth-child(6),
.sale-invoice-table td:nth-child(6) {
    width: 90px;
    text-align: right;
}

/* E-Way Bill / E-Invoice. Both columns are conditional on company settings, so their
   position shifts — targeting them by class instead of :nth-child keeps the sizing
   correct whichever combination is switched on. */
.sale-invoice-table th.status-col,
.sale-invoice-table td.status-col {
    width: 110px;
    text-align: center;
}

/*======================================== Status icons ================================================*/
.complete-icon,
.pending-icon,
.norequired-icon {
    width: 23px;
    height: 23px;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.complete-icon {
    fill: #00b050;
}

.pending-icon {
    fill: #ffc000;
}

/* Not applicable for this company — muted, and not interactive. */
.norequired-icon {
    fill: #ccc;
    cursor: default;
}

.complete-icon:hover,
.pending-icon:hover {
    transform: scale(1.1);
}

/*======================================== Filter panels ================================================*/
/* The generic .tooltip-panel rules live in SaleAccount.css; only this page's own
   column panels are listed here. */
.tooltip-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 999;
}

.cashdebit-tooltip-panel :not(:last-child) {
    border-bottom: 1px solid #ccc;
}

.invoicename-tooltip-panel :not(:first-child):not(:last-child),
.invoiceamount-tooltip-panel :not(:first-child):not(:last-child) {
    border-bottom: 1px solid #ccc;
}

.cashdebit-tooltip-panel,
.invoicename-tooltip-panel,
.invoiceamount-tooltip-panel,
.invoicedate-tooltip-panel,
.invoicenumber-tooltip-panel,
.ewaybill-tooltip-panel,
.einvoice-tooltip-panel {
    overflow-x: hidden;
    overflow-y: auto;
    display: grid;
    grid-auto-rows: min-content; /* prevent extra stretching */
    gap: 6px 12px;
    position: absolute;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    padding: 10px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.15);
    height: 200px;
    width: 250px;
    z-index: 5;
    font-weight: 400;
    font-size: 15px;
    scrollbar-width: auto; /* auto | thin | none */
    scrollbar-color: #99c2ff #f1f1f1; /* thumb color | track color */
}