/* Stock Report.

   The table is the shared .master-content-table1 .plain-data-table, so its borders, padding and
   hover still come from SaleAccount.css / OpeningStock.css. This file adds the three things this
   report needs that no other master table does:

     - a two-row header, where the top row names a section (Opening / Purchase / Sale / Closing)
       over the columns beneath it, and both rows have to stay put while the body scrolls;
     - a frozen first column, so the product name stays readable across a table that can run to
       forty-odd numeric columns;
     - a frozen total row.

   .plain-data-table deliberately 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
   .stock-report-table on every selector. This file is loaded after OpeningStock.css. */


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

   .plain-data-table gives columns 1-3 and the last 300px each. That is right for a handful of
   text columns and wrong here: with More Details on, a level-5 report is forty-plus numeric
   columns and 300px apiece would put the closing balance a screen and a half away. Numbers get
   what a number needs, names get enough to read. */

/* 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 is free to ignore — and it does ignore it for
   any column whose content can wrap, which collapsed Product Name to about 50px and broke
   "PRODUCT NAME" across two lines against the QTY header beside it. Under auto layout min-width
   is a hard floor, so that is what actually reserves the space. */
.master-content-table1.plain-data-table.stock-report-table th,
.master-content-table1.plain-data-table.stock-report-table td {
    width: 110px;
    min-width: 110px;
    text-align: right;
    white-space: nowrap;
}

/* Every numeric cell — header, body, group subtotal and grand total — carries .num-col, so the
   alignment does not depend on which column index it happens to land in. The shared table pins
   text-align:left onto cells 1, 2, 3 and last-child from selectors carrying three classes, and
   with More Details on, which columns those are changes every time a checkbox is ticked; four
   classes here settles it once for all of them.

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

.master-content-table1.plain-data-table.stock-report-table th.identity-col,
.master-content-table1.plain-data-table.stock-report-table td.identity-col {
    width: 180px;
    min-width: 180px;
    text-align: left;
}

/* Header labels never wrap. A wrapped "PRODUCT NAME" makes the header rows taller than the 28px
   the second row is offset by, and the two rows then sit on top of each other. */
.master-content-table1.plain-data-table.stock-report-table th.identity-col {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Body cells may wrap — product names are long and there is no header row to knock out of line. */
.master-content-table1.plain-data-table.stock-report-table td.identity-col {
    white-space: normal;
    word-wrap: break-word;
}


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

   Column 1 is whichever identity field survived the group pickers — normally Product Name, and a
   blank indent cell when every field has been grouped on. Backgrounds must be opaque: a sticky
   cell scrolls over the cells beside it, and a transparent one would show them through. */

/* 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 identity cell at all —
   the Product Name th above it carries rowspan="2" and covers both rows. So :nth-child(1) of
   that row is the first *numeric* leaf (Opening Qty), and a blanket rule froze it at left:0,
   parking "Qty" on top of the product name as soon as the table scrolled. */
.master-content-table1.plain-data-table.stock-report-table thead tr:first-child th:nth-child(1),
.master-content-table1.plain-data-table.stock-report-table tbody td:nth-child(1),
.master-content-table1.plain-data-table.stock-report-table tfoot td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 2;
    background: #ffffff;
    box-shadow: 1px 0 0 #e5e9f0;
}

/* Belt and braces: the second header row's first cell scrolls with its section. It keeps the
   vertical stickiness every thead cell has, and gives up the horizontal pin. */
.master-content-table1.plain-data-table.stock-report-table thead tr:nth-child(2) th:nth-child(1) {
    left: auto;
    box-shadow: none;
}

/* A group header's first cell spans the identity columns and carries the group's own tint, so it
   has to keep that rather than the white above. */
.master-content-table1.stock-report-table tbody tr.group-row > 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.stock-report-table thead th {
    padding: 5px 12px;
    line-height: 18px;
    background: #eef2f7;
    border-bottom: 1px solid #d5dce6;
    z-index: 3;
}

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

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

/* The 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.stock-report-table thead th.section-head {
    text-align: center;
    background: #e2e9f2;
    border-left: 1px solid #c7d0dd;
    border-right: 1px solid #c7d0dd;
    color: #46505f;
}


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

   tfoot has no styling of its own in the shared files, so all of this is new. Same z-index story
   as the header, one layer higher, because the totals sit above everything including the frozen
   column. */

/* .plain-data-table forces position:static on cells 1, 2, 3 and last-child — it was written for
   tables that scroll freely in both directions. Those selectors carry three classes, so a footer
   rule has to carry three of its own or the Total row sticks only in the middle and the outer
   cells scroll away. Hence .plain-data-table in the selector rather than the shorter form. */
.master-content-table1.plain-data-table.stock-report-table tfoot td {
    position: sticky;
    bottom: 0;

    /* The base table pins column 2 at left:50px, column 3 at left:150px and the last column at
       right:0. Those offsets are inert while .plain-data-table holds those cells at
       position:static — but the rule above puts every footer cell back to sticky, which wakes
       them up again and freezes the footer's last cell against the right edge and its second and
       third against the left. The footer is meant to stick vertically and nothing else, so both
       axes are cleared here; only td:nth-child(1) below asks for a horizontal pin. */
    left: auto;
    right: auto;

    z-index: 5;
    background: #e8eef6;
    border-top: 2px solid #c7d0dd;
    font-weight: 600;
    color: #26303d;
    width: 110px;
    text-align: right;
}

/* The Total label is sticky in both directions at once, so it outranks both the row it sits in
   and the column it heads. */
.master-content-table1.plain-data-table.stock-report-table tfoot td:nth-child(1) {
    left: 0;              /* the one horizontal pin the footer wants, restated after the reset above */
    z-index: 6;
    background: #e8eef6;
    width: 200px;
    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
   products 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 down to the bottom
   edge; once the rows do overflow, the filler collapses and the stickiness takes over. */
.master-content-table1.stock-report-table {
    height: 100%;
}

.master-content-table1.stock-report-table tbody tr.filler-row {
    height: 100%;
}

.master-content-table1.plain-data-table.stock-report-table tbody tr.filler-row > 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 need to read as headings
   rather than as 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.stock-report-table tbody tr.group-row > td {
    background: #eef3f9;
    border-bottom: 1px solid #d8dee6;
    color: #26303d;
}

.master-content-table1.stock-report-table tbody tr.group-row:hover > td {
    background: #e3eaf4;
}

/* The label sits in the frozen first column, so it has that column's width to work with and is
   clipped rather than allowed to spill — anything that overflowed would be painted over the
   scrolled columns beside it, which is the whole reason the colspan was dropped. Deep nesting
   eats into it 22px at a time, so a level-4 group has ~110px of name to play with. */
.master-content-table1.stock-report-table tbody tr.group-row > td.group-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

/* The leaf count trailing a group name — context, not a number to read. */
.master-content-table1.stock-report-table tbody tr.group-row > td.group-label span {
    color: #6b7482;
    font-weight: normal;
}


/* ---- vertical rules -------------------------------------------------------------------------

   The shared table draws horizontal borders only. With forty-odd numeric columns a row becomes
   hard to track across, so every cell gets a right-hand rule. It goes on the right rather than
   the left so the frozen first column keeps its own box-shadow edge as the divider and does not
   end up with two lines.

   Section heads are excluded rather than left to the cascade: they already carry heavier
   left/right borders, and their rule sits earlier in this file at the same specificity as the
   thead rule below, so without :not() this one would quietly win and flatten them. */
.master-content-table1.plain-data-table.stock-report-table th,
.master-content-table1.plain-data-table.stock-report-table td {
    border-right: 1px solid #eef0f3;
}

.master-content-table1.plain-data-table.stock-report-table thead th:not(.section-head) {
    border-right: 1px solid #dbe2ec;
}

/* The last column has nothing to its right to separate it from. */
.master-content-table1.plain-data-table.stock-report-table th:last-child,
.master-content-table1.plain-data-table.stock-report-table td:last-child {
    border-right: none;
}

/* The frozen column's divider is its shadow, which floats above the scrolled cells; a border here
   as well would double up while scrolling. */
.master-content-table1.plain-data-table.stock-report-table thead tr:first-child th:nth-child(1),
.master-content-table1.plain-data-table.stock-report-table tbody td:nth-child(1),
.master-content-table1.plain-data-table.stock-report-table tfoot td:nth-child(1) {
    border-right: none;
}

/* The filler row is empty space, not a row of cells to rule off. */
.master-content-table1.plain-data-table.stock-report-table tbody tr.filler-row > td {
    border-right: none;
}


/* ---- export / pdf / print -------------------------------------------------------------------

   Centred in the toolbar row: margin:auto on both sides takes whatever space is left after the
   checkboxes, which keeps the group in the middle of the row rather than drifting with the
   checkbox labels' width. */
.top-btns-container.toolbar-stacked .report-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: auto;
}

.top-btns-container.toolbar-stacked .report-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 .report-action-btn:hover:not(:disabled) {
    background: #eef2f7;
    border-color: #7d93b2;
}

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

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


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

   Round rather than square, and sized to sit level with the 34px controls beside them instead of
   on the browser's default checkbox baseline. appearance:none is what lets the shape be redrawn
   at all; the tick is a rotated two-sided border, the usual trick for one without an icon font. */

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

.top-btns-container.toolbar-stacked .report-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 .report-check input[type="checkbox"]:hover {
    border-color: #7d93b2;
}

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

.top-btns-container.toolbar-stacked .report-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);
}


/* ---- 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 (see the media query there). This
   block only handles what is specific to this report: 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
   130px column leaves a usable window to scroll the numbers through, and losing sight of which
   product a row belongs to is worse on a phone than on a desktop, not better. */
@media (max-width: 700px) {

    /* Each toolbar row becomes a wrapping strip instead of a single line that overflows. */
    .top-btns-container.toolbar-stacked .top-btns-row {
        flex-wrap: wrap;
        row-gap: 8px;
        column-gap: 10px;
    }

    /* Controls share the width two-up rather than each taking a full row — a phone showing six
       stacked selects pushes the table off the screen entirely. */
    .top-btns-container.toolbar-stacked .form-item {
        flex: 1 1 calc(50% - 5px);
        min-width: 130px;
    }

    /* The title and the Refresh button keep their own line at the top. */
    .top-btns-container.toolbar-stacked .top-btns-header {
        flex: 1 1 100%;
        font-size: 15px;
    }

    /* Centring is a desktop nicety; on a phone the row is full width and the buttons should just
       spread across it. */
    .top-btns-container.toolbar-stacked .report-actions {
        flex: 1 1 100%;
        margin: 0;
        justify-content: space-between;
    }

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

    /* Expand/Collapse All sit under the group pickers rather than beside them. */
    .top-btns-container.toolbar-stacked .top-btns-add-btn {
        flex: 0 0 auto;
    }

    /* Narrower columns: the desktop 180/110 would put the closing balance several swipes away. */
    .master-content-table1.plain-data-table.stock-report-table th,
    .master-content-table1.plain-data-table.stock-report-table td,
    .master-content-table1.plain-data-table.stock-report-table th.num-col,
    .master-content-table1.plain-data-table.stock-report-table td.num-col {
        width: 88px;
        min-width: 88px;
        padding: 6px 8px;
    }

    .master-content-table1.plain-data-table.stock-report-table th.identity-col,
    .master-content-table1.plain-data-table.stock-report-table td.identity-col {
        width: 130px;
        min-width: 130px;
    }

    /* The second header row is pinned below the first, and both rows are shorter here because of
       the reduced padding — 6px + 18px line + 6px + 1px border. Restated so the two rows do not
       drift apart from the 28px the desktop rule assumes. */
    .master-content-table1.stock-report-table thead th {
        padding: 6px 8px;
    }

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

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

    /* Group labels have less room, so the indent per level shrinks with the column. */
    .master-content-table1.stock-report-table tbody tr.group-row > td.group-label {
        font-size: 11px;
    }
}