/* Sale Proforma Register.

   Deliberately self-contained: every selector here is scoped to .sale-proforma-register-table or to the
   .sale-proforma-register-* toolbar classes, and nothing is shared with StockReport.css. The two reports
   look alike today, but they are separate pages with separate stylesheets so restyling one can
   never move the other.

   The table itself is still the shared .master-content-table1 .plain-data-table, so borders,
   padding, hover and the sticky-header machinery come from SaleAccount.css / OpeningStock.css.
   What this file adds is what a register needs on top of that:

     - a two-row header, where the top row names a section (Invoice / Taxable / Tax / Total) over
       the columns beneath it, and both rows stay put while the body scrolls;
     - a frozen first column, so the date stays readable across a wide row;
     - a frozen total row.

   .plain-data-table unpins columns 1-3 and the last one (it was written for tables that scroll
   freely), so the freeze rules below have to out-specify it — hence the extra .sale-proforma-register-table
   on every selector. This file is loaded after OpeningStock.css. */


/* ---- column widths --------------------------------------------------------------------------

   min-width, not width alone. .plain-data-table puts this table on table-layout:auto, where a
   cell's `width` is only a suggestion the browser may ignore — and it does ignore it for any
   column whose content can wrap, collapsing the column to whatever the longest unbreakable word
   needs. Under auto layout min-width is a hard floor, so that is what reserves the space. */
.master-content-table1.plain-data-table.sale-proforma-register-table th,
.master-content-table1.plain-data-table.sale-proforma-register-table td {
    width: 110px;
    min-width: 110px;
    text-align: right;
    white-space: nowrap;
    border-right: 1px solid #eef0f3;
}

/* Every numeric cell carries .spr-num, so alignment never depends on which column index a cell
   lands in — with More Details on, which columns are first/second/last changes as soon as a
   checkbox is ticked, and the shared table pins text-align:left onto exactly those.

   tabular-nums makes every digit the same width, so decimal points line up down a column. */
.master-content-table1.plain-data-table.sale-proforma-register-table th.spr-num,
.master-content-table1.plain-data-table.sale-proforma-register-table td.spr-num {
    width: 110px;
    min-width: 110px;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Text columns — date, invoice number, party, type. */
.master-content-table1.plain-data-table.sale-proforma-register-table th.spr-text,
.master-content-table1.plain-data-table.sale-proforma-register-table td.spr-text {
    width: 160px;
    min-width: 160px;
    text-align: left;
}

/* The party name is the one column worth extra room. */
.master-content-table1.plain-data-table.sale-proforma-register-table th.spr-wide,
.master-content-table1.plain-data-table.sale-proforma-register-table td.spr-wide {
    width: 240px;
    min-width: 240px;
    text-align: left;
}

/* Header labels never wrap: a wrapped label makes the first header row taller than the offset the
   second row is pinned at, and the two rows then sit on top of each other. */
.master-content-table1.plain-data-table.sale-proforma-register-table thead th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Body text cells may wrap — party names are long and there is no header row to knock out of line. */
.master-content-table1.plain-data-table.sale-proforma-register-table td.spr-text,
.master-content-table1.plain-data-table.sale-proforma-register-table td.spr-wide {
    white-space: normal;
    word-wrap: break-word;
}

/* A party cell holds the name and, with Address Details on, the rest of the record stacked under
   it as newline-separated lines. pre-line is what makes those newlines real breaks while still
   wrapping anything too long for the column; `normal` above would collapse them into one run of
   text. Rows grow taller when it is on, which is the point. */
.master-content-table1.plain-data-table.sale-proforma-register-table td.spr-party {
    white-space: pre-line;
    word-wrap: break-word;
    line-height: 1.45;
    vertical-align: top;
}

.master-content-table1.plain-data-table.sale-proforma-register-table th:last-child,
.master-content-table1.plain-data-table.sale-proforma-register-table td:last-child {
    border-right: none;
}


/* ---- frozen first column --------------------------------------------------------------------

   Scoped per section, NOT a bare th/td:nth-child(1). nth-child counts within its own row, and the
   second header row has no first-column cell at all — the header above it carries rowspan="2" and
   covers both rows. So :nth-child(1) of that row is the first numeric leaf, and a blanket rule
   would freeze that at left:0, parking a number on top of the date column.

   Backgrounds must be opaque: a sticky cell scrolls over the cells beside it, and a transparent
   one would show them through. The divider is a box-shadow rather than a border, because
   border-collapse:collapse drops borders on sticky cells. */
.master-content-table1.plain-data-table.sale-proforma-register-table thead tr:first-child th:nth-child(1),
.master-content-table1.plain-data-table.sale-proforma-register-table tbody td:nth-child(1),
.master-content-table1.plain-data-table.sale-proforma-register-table tfoot td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ffffff;
    box-shadow: 1px 0 0 #e5e9f0;
    border-right: none;
}

/* The second header row's first cell scrolls with its section: vertical stickiness stays, the
   horizontal pin goes. */
.master-content-table1.plain-data-table.sale-proforma-register-table thead tr:nth-child(2) th:nth-child(1) {
    left: auto;
    box-shadow: none;
}

/* A group header's first cell carries the group's own tint rather than the white above. */
.master-content-table1.sale-proforma-register-table tbody tr.spr-group > td:nth-child(1) {
    background: #eef3f9;
}


/* ---- sticky header --------------------------------------------------------------------------

   The base file makes every thead th sticky at top:0, which is right for a one-row header and
   stacks both rows on top of each other here. Row 2 is pushed down by exactly row 1's height:
   5px + 18px line + 5px + the 1px border = 29px, and 28px is used so the rows overlap by a pixel
   rather than risk a hairline gap showing scrolled content between them. */
.master-content-table1.sale-proforma-register-table thead th {
    padding: 5px 12px;
    line-height: 18px;
    background: #eef2f7;
    border-bottom: 1px solid #d5dce6;
    border-right: 1px solid #dbe2ec;
    z-index: 3;
}

.master-content-table1.sale-proforma-register-table thead tr:nth-child(2) th {
    top: 28px;
}

/* The header's own first column is sticky in both directions at once, so it outranks both the
   sticky row it sits in and the sticky column it heads. */
.master-content-table1.plain-data-table.sale-proforma-register-table thead tr:first-child th:nth-child(1) {
    z-index: 4;
    background: #eef2f7;
}

/* Section spans: without a divider the two header rows read as one block of text and it stops
   being obvious which columns a span covers. */
.master-content-table1.sale-proforma-register-table thead th.spr-section {
    text-align: center;
    background: #e2e9f2;
    border-left: 1px solid #c7d0dd;
    border-right: 1px solid #c7d0dd;
    color: #46505f;
}


/* ---- frozen total row -----------------------------------------------------------------------

   .plain-data-table forces position:static on cells 1, 2, 3 and last-child. Those selectors carry
   three classes, so a footer rule needs three of its own or the Total row sticks only in the
   middle while its outer cells scroll away.

   The base table also pins column 2 at left:50px, column 3 at left:150px and the last column at
   right:0. Those offsets are inert while those cells are static — but turning stickiness back on
   here wakes them up again, so both axes are cleared and only td:nth-child(1) asks for a pin. */
.master-content-table1.plain-data-table.sale-proforma-register-table tfoot td {
    position: sticky;
    bottom: 0;
    left: auto;
    right: auto;
    z-index: 5;
    background: #e8eef6;
    border-top: 2px solid #c7d0dd;
    font-weight: 600;
    color: #26303d;
    width: 110px;
    text-align: right;
}

.master-content-table1.plain-data-table.sale-proforma-register-table tfoot td:nth-child(1) {
    left: 0;
    z-index: 6;
    background: #e8eef6;
    width: 160px;
    text-align: left;
}

/* Holding the bottom when the rows do not fill the container. position:sticky only pins something
   that would otherwise scroll past, so with a handful of invoices the Total row would sit halfway
   up the panel. Stretching the table to the scroll box's full height and giving the filler row
   all the slack pushes the footer to the bottom edge; once the rows overflow, the filler collapses
   and the stickiness takes over. */
.master-content-table1.sale-proforma-register-table {
    height: 100%;
}

.master-content-table1.sale-proforma-register-table tbody tr.spr-filler {
    height: 100%;
}

.master-content-table1.plain-data-table.sale-proforma-register-table tbody tr.spr-filler > td {
    position: static;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
}


/* ---- group rows -----------------------------------------------------------------------------

   Group rows carry subtotals for everything folded under them, so they read as headings rather
   than another line of data. Indentation per level is set inline on the row's first cell — the
   depth is only known at render time. */
.master-content-table1.sale-proforma-register-table tbody tr.spr-group > td {
    background: #eef3f9;
    border-bottom: 1px solid #d8dee6;
    color: #26303d;
}

.master-content-table1.sale-proforma-register-table tbody tr.spr-group:hover > td {
    background: #e3eaf4;
}

/* The label sits in the frozen first column, so it has that column's width and is clipped rather
   than allowed to spill — anything overflowing would be painted over the scrolled columns. */
.master-content-table1.sale-proforma-register-table tbody tr.spr-group > td.spr-group-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
    cursor: pointer;
}

/* The field name and the leaf count trailing a group name — context, not values to read. */
.master-content-table1.sale-proforma-register-table tbody tr.spr-group > td.spr-group-label span {
    color: #6b7482;
    font-weight: normal;
}


/* ---- toolbar --------------------------------------------------------------------------------

   Own class names rather than the Stock Report's, so the two toolbars are independent. */

.top-btns-container.toolbar-stacked .sale-proforma-register-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 34px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}

/* Round rather than square, sized to sit level with the 34px controls beside them.
   appearance:none is what allows the shape to be redrawn; the tick is a rotated two-sided
   border, the usual trick for one without an icon font. */
.top-btns-container.toolbar-stacked .sale-proforma-register-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #b6bfcc;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.top-btns-container.toolbar-stacked .sale-proforma-register-check input[type="checkbox"]:hover {
    border-color: #7d93b2;
}

.top-btns-container.toolbar-stacked .sale-proforma-register-check input[type="checkbox"]:checked {
    background: #2563eb;
    border-color: #2563eb;
}

.top-btns-container.toolbar-stacked .sale-proforma-register-check input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5.5px;
    top: 2px;
    width: 4px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Pushed to the right end of the row, not centred.
   Centring needs slack on both sides, and with six checkboxes there is none: the auto margins
   collapse to zero and the buttons run off the edge of the card. margin-left:auto alone asks for
   no width of its own, so the group sits flush right and stays inside. */
.top-btns-container.toolbar-stacked .sale-proforma-register-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 0;
}

/* The shared toolbar uses a 14px gap, which across nine items on one row is 112px this register
   cannot spare. Scoped to this page so no other toolbar tightens up. */
.top-btns-container.sale-proforma-register-toolbar .top-btns-row {
    column-gap: 10px;
}

.top-btns-container.toolbar-stacked .sale-proforma-register-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #ffffff;
    color: #26303d;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease;
}

.top-btns-container.toolbar-stacked .sale-proforma-register-action-btn:hover:not(:disabled) {
    background: #eef2f7;
    border-color: #7d93b2;
}

.top-btns-container.toolbar-stacked .sale-proforma-register-action-btn:disabled {
    opacity: .55;
    cursor: default;
}

.top-btns-container.toolbar-stacked .sale-proforma-register-action-btn svg {
    fill: currentColor;
    flex: 0 0 auto;
}


/* Below this width the six checkboxes and three labelled buttons stop fitting on one line. The
   toolbar card is a fixed three rows tall (.table-below-3rows pins the table under it), so letting
   the row wrap would push the buttons out of the card and over the table — dropping the labels and
   keeping the icons is what holds everything inside. The title attribute still names each one. */
@media (max-width: 1600px) {

    .top-btns-container.sale-proforma-register-toolbar .sale-proforma-register-action-btn span {
        display: none;
    }

    .top-btns-container.sale-proforma-register-toolbar .sale-proforma-register-action-btn {
        padding: 0 10px;
    }
}


/* ---- mobile ---------------------------------------------------------------------------------

   SaleAccount.css already drops .top-btns-container and .master-table-container out of
   position:fixed below 700px and caps the scroll box at 70vh. This block handles what is specific
   to this register: a three-row toolbar that has to wrap into a phone's width, and a table wide
   enough that the desktop column sizes would leave no room to scroll through.

   The frozen first column is kept, unlike the shared tables — those pin three columns plus an
   action column, which together exceed a narrow viewport and cover everything between them. One
   120px column leaves a usable window, and losing sight of which invoice a row belongs to is
   worse on a phone, not better. */
@media (max-width: 700px) {

    .top-btns-container.toolbar-stacked .top-btns-row {
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 10px;
    }

    .top-btns-container.toolbar-stacked .form-item {
        flex: 1 1 calc(50% - 5px);
        min-width: 130px;
    }

    .top-btns-container.toolbar-stacked .top-btns-header {
        flex: 1 1 100%;
        font-size: 15px;
    }

    .top-btns-container.toolbar-stacked .sale-proforma-register-actions {
        flex: 1 1 100%;
        margin: 0;
        justify-content: space-between;
    }

    .top-btns-container.toolbar-stacked .sale-proforma-register-action-btn {
        flex: 1 1 0;
        justify-content: center;
        padding: 0 8px;
    }

    /* The labels come back here. The rule above hides them because the desktop row is one fixed
       line; on a phone the actions have a full row to themselves, and three unlabelled icons
       stretched across it would read worse than the words. */
    .top-btns-container.sale-proforma-register-toolbar .sale-proforma-register-action-btn span {
        display: inline;
    }

    .master-content-table1.plain-data-table.sale-proforma-register-table th,
    .master-content-table1.plain-data-table.sale-proforma-register-table td,
    .master-content-table1.plain-data-table.sale-proforma-register-table th.spr-num,
    .master-content-table1.plain-data-table.sale-proforma-register-table td.spr-num {
        width: 88px;
        min-width: 88px;
        padding: 6px 8px;
    }

    .master-content-table1.plain-data-table.sale-proforma-register-table th.spr-text,
    .master-content-table1.plain-data-table.sale-proforma-register-table td.spr-text {
        width: 120px;
        min-width: 120px;
    }

    .master-content-table1.plain-data-table.sale-proforma-register-table th.spr-wide,
    .master-content-table1.plain-data-table.sale-proforma-register-table td.spr-wide {
        width: 150px;
        min-width: 150px;
    }

    /* Rows are shorter here because of the reduced padding — 6 + 18 + 6 + 1 — so the second
       header row's offset moves with them. */
    .master-content-table1.sale-proforma-register-table thead th {
        padding: 6px 8px;
    }

    .master-content-table1.sale-proforma-register-table thead tr:nth-child(2) th {
        top: 30px;
    }

    /* The shared mobile rules unfreeze columns 1-3 for every master table; this register wants its
       first column to stay put, so the pin is restated after them. */
    .master-content-table1.plain-data-table.sale-proforma-register-table thead tr:first-child th:nth-child(1),
    .master-content-table1.plain-data-table.sale-proforma-register-table tbody td:nth-child(1),
    .master-content-table1.plain-data-table.sale-proforma-register-table tfoot td:nth-child(1) {
        position: sticky;
        left: 0;
        width: 120px;
        min-width: 120px;
    }

    .master-content-table1.sale-proforma-register-table tbody tr.spr-group > td.spr-group-label {
        font-size: 11px;
    }
}