/* app-custom.css
   All of our own CSS. One file. Theme files in wwwroot/vendor and wwwroot/css
   (core.css, demo.css, site.css) are never edited - override them here.
   See docs/01-stack.md and docs/02-ui-pattern.md. */

/* The app is light-only by decision: both layouts hard-set class="light-style"
   and data-bs-theme="light". Do not add per-page dark-mode CSS. */

/* Body typeface. Inter is loaded by both layouts; apply it over the theme
   default so the font that is downloaded is the font that is used. */
:root {
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Bengali (bn) typeface. Self-hosted - NO Google Fonts / CDN. The .woff2 lives
   in wwwroot/fonts/ (see wwwroot/fonts/README.md for the exact file to drop in).
   @font-face alone triggers no download; the file is fetched only when an
   element actually uses the family, i.e. on a bn page. Latin runs on a bn page
   still fall back to Inter. docs/10-localization.md. */
@font-face {
    font-family: 'Noto Sans Bengali';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/NotoSansBengali-Variable.woff2') format('woff2');
}
:lang(bn) {
    --bs-body-font-family: 'Noto Sans Bengali', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Validation error styling, once for the whole site. docs/05-validation.md. */
.input-validation-error { border-color: #dc3545; }
.field-validation-error { color: #dc3545; }

/* Page header - title on the left, one optional action/slot on the right.
   Replaces the hand-rolled d-flex/justify-between blocks that were drifting
   apart page to page. docs/02-ui-pattern.md. */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.page-header > :is(h1, h2, h3, h4, h5, h6) { margin-bottom: 0; }

/* Below the sm breakpoint the header is a single full-width stack: the title
   block (title + its description) on its own line, then the right-hand slot
   (filters, Export, primary action) full width beneath it. The slot's own
   flex-column / align-items-stretch then stacks its controls. At sm and up it
   is one row again. docs/02-ui-pattern.md "Mobile". */
@media (max-width: 575.98px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Status indicator - one shape for every screen: a coloured dot + a plain-text
   label. Use instead of ad hoc badges / coloured words for record state. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--bs-heading-color);
    white-space: nowrap;
}
.status::before {
    content: "";
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--bs-secondary);
}
.status.status-success::before { background: var(--bs-success); }
.status.status-warning::before { background: var(--bs-warning); }
.status.status-danger::before  { background: var(--bs-danger); }
.status.status-info::before    { background: var(--bs-info); }
.status.status-muted::before   { background: var(--bs-secondary); }

/* Preformatted message preview (copy-this-text panels). Wraps long lines and
   scrolls rather than pushing the layout wide. */
.msg-preview {
    white-space: pre-wrap;
    overflow-x: auto;
    font-size: 0.8125rem;
    margin-bottom: 0;
}

/* Icon-only buttons (row actions, dropdown triggers) must clear a ~40px tap
   target on touch screens. docs/02-ui-pattern.md. */
.btn-icon {
    min-width: 2.5rem;
    min-height: 2.5rem;
}

/* Wider auth card for multi-field pre-login pages (Register). Opt in with
   ViewData["AuthWide"] = "auth-wide" so the layout adds the class. */
.auth-wide.authentication-inner,
.auth-wide .authentication-inner {
    max-width: 560px;
}

/* Auth eyebrow - small accent kicker set above a pre-login page title, for a
   clear three-level hierarchy (eyebrow / title / body). docs/02-ui-pattern.md. */
.auth-eyebrow {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--bs-primary);
}

/* Segmented one-time-code entry - one cell per digit. Used by account
   verification (and any future 2FA screen); the page script auto-advances,
   walks back on Backspace and spreads a pasted code across the cells.
   Reusable - never restyle this per page. */
.otp-group {
    display: flex;
    gap: 0.5rem;
}
.otp-group .otp-cell {
    flex: 1 1 0;
    min-width: 0;
    height: 3.25rem;
    padding: 0;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--bs-heading-color);
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.otp-group .otp-cell:focus {
    outline: 0;
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.15rem rgba(140, 87, 255, 0.15);
}
.otp-group .otp-cell.is-filled {
    border-color: var(--bs-primary);
}

/* ===========================================================================
   Print shell (docs/17-reports.md ruling 15, R2 P11a). Every report and
   document print renders through Views/Shared/_PrintLayout.cshtml, its own
   tab, its own A4 sheet - no side menu, navbar, footer or filter card. The
   sheet is WYSIWYG: what shows on screen (inside .print-sheet) is exactly
   what prints, just sat on a grey desk with a toolbar above it - so nothing
   here needs a screen/print visibility split the way the old .print-header
   did. Greys + black only (15.3 - a black-and-white laser printer), Inter /
   Noto Sans Bengali (ruling 10), tabular figures, right-aligned amounts. */

.print-desk {
    min-height: 100vh;
    padding: 2rem 1rem 3rem;
    background: #e7e8eb;
    display: flex;
    justify-content: center;
}
/* Toolbar (P11a polish, 7.3.114). Sticky slim bar lined up with the sheet -
   width: 210mm/max-width:100% mirrors .print-sheet's own rule exactly, and
   margin: 0 auto centers it the same way .print-desk centers the sheet, so
   the two share the same left/right edges at any viewport width with no JS
   needed for the default (unscaled) case. The narrow-viewport case, where
   the sheet is transform-scaled, is handled by app-custom.js reading the
   sheet's live rendered rect and mirroring it onto this element (transform
   would visually shrink the toolbar's text/icons too, which is not wanted -
   a real width/margin match keeps text full-size and just reflows). */
.print-toolbar {
    position: sticky;
    top: 0;
    z-index: 5;
    box-sizing: border-box;
    width: 210mm;
    max-width: 100%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid #dfe1e3;
}
.print-toolbar-info { display: flex; align-items: center; gap: 0.6rem; min-width: 0; overflow: hidden; }
.print-toolbar-doc-icon { font-size: 1.125rem; color: #55595e; flex-shrink: 0; }
.print-toolbar-text { min-width: 0; overflow: hidden; }
.print-toolbar-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1a1a1a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.print-toolbar-context {
    font-size: 0.75rem;
    color: #6a6e73;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.print-toolbar-actions { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }
.print-toolbar-hint { font-size: 0.75rem; color: #6a6e73; }
.print-toolbar-btn { display: inline-flex; align-items: center; }
.print-toolbar-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(105, 108, 255, 0.35);
}
#printToolbarDismiss.btn-outline-secondary { color: #1a1a1a; border-color: #adb1b7; }
#printToolbarDismiss.btn-outline-secondary:hover,
#printToolbarDismiss.btn-outline-secondary:focus-visible { color: #1a1a1a; background: #f2f3f4; }

@media (max-width: 767.98px) {
    .print-toolbar-context { display: none; }
    .print-toolbar-btn { min-width: 2.5rem; min-height: 2.5rem; padding: 0.5rem; justify-content: center; }
    .print-toolbar-btn-label,
    .print-toolbar-hint { display: none; }
}

/* The sheet itself - 210mm wide, matches the @page size below exactly so
   the screen preview is a true rehearsal of the printed page. transform is
   set by app.fitPrintSheet() (app-custom.js) only when the viewport is
   narrower than the sheet - top-left origin so the shrunk sheet still
   starts flush with the toolbar above it. */
.print-sheet {
    width: 210mm;
    max-width: 210mm;
    min-height: 297mm;
    padding: 12mm;
    flex: 0 0 auto;
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
    font-size: 0.8125rem;
    line-height: 1.45;
    transform-origin: top center;
}
/* Landscape sheet (ruling 15.10) - set by _PrintLayout from
   ViewData["PrintLandscape"]; the @page size comes from the layout's own
   inline style. Same shrink-to-fit and toolbar mirroring as portrait
   (app-custom.js reads the live width, nothing hardcoded). */
.print-sheet.print-landscape {
    width: 297mm;
    max-width: 297mm;
    min-height: 210mm;
}
/* POS receipt (docs/17-reports.md DG-44 R4, D44-P2) - set by _PrintLayout from
   ViewData["PrintPos"]; the 80mm @page comes from the layout's own inline style.
   Black and white (15.3). Geometry is screen-only: on paper the shared print
   block already makes the sheet auto width and the @page margin does the padding. */
@media screen {
    .print-sheet.print-pos { width: 80mm; max-width: 80mm; min-height: 0; padding: 3mm; }
}
/* The toolbar mirrors the narrow POS sheet, so it takes the compact (icon-only) form at every
   width; the labels do not fit in 302px from 768px up (D47-P2 G6). */
@media screen {
    .print-toolbar:has(~ .print-desk .print-sheet.print-pos) .print-toolbar-context,
    .print-toolbar:has(~ .print-desk .print-sheet.print-pos) .print-toolbar-btn-label,
    .print-toolbar:has(~ .print-desk .print-sheet.print-pos) .print-toolbar-hint { display: none; }
    .print-toolbar:has(~ .print-desk .print-sheet.print-pos) .print-toolbar-btn { min-width: 2.5rem; min-height: 2.5rem; padding: 0.5rem; justify-content: center; }
}
.print-sheet.print-pos { font-size: 0.75rem; line-height: 1.35; color: #000; }
.print-pos .print-band { display: block; text-align: center; padding-bottom: 0.4rem; margin-bottom: 0.5rem; border-bottom: 1px dashed #000; }
.print-pos .print-band-company { display: block; }
.print-pos .print-band-company-name { font-size: 1rem; }
.print-pos .print-band-company-sub { color: #000; font-size: 0.7rem; }
.print-pos .print-pos-title { font-weight: 700; font-size: 0.9rem; text-align: center; }
.print-pos .print-pos-meta { text-align: center; margin-bottom: 0.35rem; }
.print-pos .print-pos-cust { padding-bottom: 0.35rem; border-bottom: 1px dashed #000; overflow-wrap: anywhere; }
.print-pos .print-pos-lines { padding: 0.35rem 0; border-bottom: 1px dashed #000; }
.print-pos .print-pos-item { font-weight: 600; overflow-wrap: anywhere; break-after: avoid; }
.print-pos .print-pos-row { display: flex; justify-content: space-between; gap: 0.5rem; break-inside: avoid; }
.print-pos .print-pos-lines .print-pos-row { margin-bottom: 0.25rem; }
.print-pos .print-pos-totals { padding: 0.35rem 0; border-bottom: 1px dashed #000; }
.print-pos .print-pos-net { font-weight: 700; font-size: 0.85rem; border-top: 1px solid #000; margin-top: 0.15rem; padding-top: 0.15rem; }
.print-pos .print-footer { flex-direction: column; gap: 0.1rem; margin-top: 0.6rem; border-top: 0; padding-top: 0; color: #000; text-align: center; }

/* Item labels (docs/17-reports.md DG-47, D47-P1) - set by _PrintLayout from ViewData["PrintLabels"];
   the A4 @page with no margin comes from the layout's own inline style. One .label-page is one A4
   sticker sheet, 24-up: 3 columns x 8 rows of 63.5 x 33.9 mm labels, side margin 7.2mm, top margin
   13.1mm, column gap 2.5mm, row gap 0 (assumed geometry; a real sheet may differ). Black and white.
   The page is 296mm tall, not 297, so a whole page never spills one blank page onto paper. */
.print-sheet.print-labels { min-height: 0; padding: 0; background: transparent; box-shadow: none; color: #000; }
.print-labels .label-page {
    box-sizing: border-box;
    width: 210mm;
    height: 296mm;
    padding: 13.1mm 0 0 7.2mm;
    margin-bottom: 1rem;
    background: #fff;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.18);
    display: grid;
    grid-template-columns: repeat(3, 63.5mm);
    grid-auto-rows: 33.9mm;
    column-gap: 2.5mm;
    align-content: start;
    overflow: hidden;
}
.print-labels .label-cell {
    box-sizing: border-box;
    width: 63.5mm;
    height: 33.9mm;
    padding: 2mm 2.25mm;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1mm;
    overflow: hidden;
    text-align: center;
    break-inside: avoid;
}
.print-labels .label-name {
    width: 100%;
    min-height: 2.4em;
    font-size: 8.5pt;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
.print-labels .label-bc { display: block; flex: 0 0 auto; }
.print-labels .label-text { width: 100%; font-size: 8pt; line-height: 1.1; white-space: pre-wrap; overflow-wrap: anywhere; letter-spacing: 0.04em; }
@media print {
    .print-labels .label-page { margin: 0; box-shadow: none; break-after: page; }
    .print-labels .label-page:last-child { break-after: auto; }
}

/* Outer frame so the band repeats at the top of every printed page
   (Chrome only repeats a real <thead>, ruling 15.4) - band in <thead>,
   RenderBody() + footer in <tbody>, no borders/padding of its own so the
   on-screen sheet is unchanged. */
.print-frame { width: 100%; border-collapse: collapse; }
.print-frame > thead > tr > td,
.print-frame > tbody > tr > td { padding: 0; border: 0; }

.print-band {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #1a1a1a;
    margin-bottom: 1rem;
}
.print-band-company { display: flex; align-items: center; gap: 0.75rem; }
.print-band-logo { max-height: 18mm; max-width: 42mm; object-fit: contain; }
.print-band-company-name { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }
.print-band-company-sub { font-size: 0.75rem; color: #55595e; line-height: 1.35; }
.print-band-right { text-align: right; flex-shrink: 0; }
.print-band-title { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; }
.print-band-sub { font-size: 0.8125rem; color: #55595e; margin-top: 0.125rem; }

/* Numeric cells everywhere on a print sheet: right-aligned, tabular, never
   wrap (ruling 15.5's own no-wrap rule for narrow columns). */
.print-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Date / Reference / Code - narrow columns that must never wrap either;
   the text column (Particulars/Ledger/Head of accounts) is the only one
   that wraps, taking the remaining width. */
.print-nowrap { white-space: nowrap; }

/* Base table. .print-table-doc = full cell grid (a document - voucher now,
   GRR/PR/Stock Adjustment later, ruling 15.5). .print-table-report = outer
   box + thin row lines + light header + a heavier rule above the total
   rows (a statement/report). Either way: header repeats per page, a row
   never splits, print-color-adjust so a header fill survives to paper. */
.print-table { width: 100%; border-collapse: collapse; }
.print-table th, .print-table td { padding: 0.4rem 0.55rem; vertical-align: top; }
.print-table thead { display: table-header-group; }
.print-table tbody tr { break-inside: avoid; page-break-inside: avoid; }
.print-table .print-narration-sub { display: block; font-size: 0.75rem; color: #6a6e73; margin-top: 0.1rem; }

.print-table-doc { border: 1px solid #1a1a1a; }
.print-table-doc th, .print-table-doc td { border: 1px solid #55595e; }
.print-table-doc thead th {
    background: #eceef0;
    font-weight: 700;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}

.print-table-report { border: 1px solid #55595e; }
.print-table-report thead th {
    background: #f2f3f4;
    font-weight: 700;
    border-bottom: 1px solid #55595e;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}
.print-table-report tbody td { border-bottom: 1px solid #dfe1e3; }
.print-table-report tbody tr.print-row-strong td { border-top: 1px solid #55595e; font-weight: 600; }
.print-table-report tfoot td, .print-table-report tr.print-total-row td {
    border-top: 2px solid #1a1a1a;
    font-weight: 700;
}
/* Sales Register with item lines (R3 P9c): one tbody per document - a grey band row,
   its item lines, and an optional bold Document total row. Screen and print share it;
   greys only (ruling 15.3). A document never splits across a printed page. */
.reg-band td {
    background: #eceef0;
    border-bottom: 1px solid #adb1b7;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}
.reg-band-flex { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 1rem; }
.reg-band-left { font-weight: 600; }
.reg-doc-total td { font-weight: 700; border-top: 1px solid #55595e; }
.print-table-reg th, .print-table-reg td { padding-left: 0.35rem; padding-right: 0.35rem; }
.table > .reg-doc { border-top: 1px solid #adb1b7; }
@media print {
    .reg-doc { break-inside: avoid; page-break-inside: avoid; }
}

/* A document's single narration line (voucher, 1-narration case) and a
   report's Dr/Cr explainer line (ruling 15.6, Party Statement only). */
.print-narration-box {
    margin-top: 0.85rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid #55595e;
    font-size: 0.8125rem;
}
.print-narration-box .print-narration-label { font-weight: 700; margin-right: 0.35rem; }
.print-note { margin-top: 0.5rem; font-size: 0.75rem; color: #55595e; }

/* Signature strip (voucher, ruling 9's new 4 labels) - one non-wrapping
   row that never splits across a page break. WYSIWYG now, so no print-only
   gate is needed - what shows in the preview is what prints. */
.print-signatures {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    margin-top: 3rem;
    break-inside: avoid;
    page-break-inside: avoid;
}
.print-signatures > div { flex: 1 1 0; }
.print-signature-name {
    height: 2.5rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 0.8125rem;
    text-align: center;
}
.print-signature-line { margin-top: 0.5rem; border-top: 1px solid #1a1a1a; }
.print-signature-label { margin-top: 0.25rem; font-size: 0.75rem; color: #55595e; text-align: center; }
/* Print language (AGR-UX-2a): the agreement print body can be Bangla or English whatever the page language is, so the wrapper
   re-applies the font. :lang(bn) sets --bs-body-font-family but body already resolved it. */
.print-lang:lang(bn) { font-family: var(--bs-body-font-family); }
.print-lang:lang(en) { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

.print-footer {
    margin-top: 2rem;
    padding-top: 0.5rem;
    border-top: 1px solid #dfe1e3;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.7rem;
    color: #6a6e73;
}

@media print {
    .no-print { display: none !important; }
    @page { size: A4 portrait; margin: 12mm 12mm 14mm; }
    html, body { background: #fff !important; }
    .print-desk { min-height: 0; padding: 0; display: block; background: #fff; }
    .print-sheet,
    .print-sheet.print-landscape {
        width: auto;
        max-width: none;
        min-height: 0;
        padding: 0;
        box-shadow: none;
        transform: none !important;
    }
    .print-sheet tfoot { display: table-row-group; }
    /* Print tails (R3 P12-2). The Purchases / Returns / Net block has no thead and
       stays whole; the footer gap after a report table is 0.5rem so the footer
       does not spill alone onto a page of band + footer. (Chrome ignores
       break-before: avoid between table row groups, so a Total row can still
       land alone under the band.) */
    .print-table:not(:has(> thead)) { break-inside: avoid; }
    .print-table-report ~ .print-footer { margin-top: 0.5rem; }
}

/* Wide admin tables collapse to stacked cards below lg instead of forcing a
   horizontal scroll. Add class="table-cards" to the <table>, data-label="..."
   to each <td>, and class="cell-actions" to the actions <td>. */
@media (max-width: 991.98px) {
    .table-cards { display: block; }
    .table-cards thead,
    .table-cards colgroup { display: none; }
    .table-cards tbody,
    .table-cards tr,
    .table-cards td { display: block; width: 100%; }
    .table-cards tr {
        border: 1px solid var(--bs-border-color);
        border-radius: var(--bs-border-radius);
        padding: 0.75rem 1rem;
        margin-bottom: 0.75rem;
    }
    .table-cards td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        padding: 0.35rem 0;
        border: 0;
        text-align: end;
        overflow-wrap: anywhere;
    }
    .table-cards td::before {
        content: attr(data-label);
        flex: 0 0 42%;
        font-weight: 500;
        text-align: start;
        color: var(--bs-heading-color);
    }
    .table-cards td.cell-actions {
        display: block;
        text-align: start;
        padding-top: 0.6rem;
    }
    .table-cards td.cell-actions::before { display: none; }
    /* A Total row (tfoot) is not a card: it stays a wide nowrap table row. The table box
       scrolls it sideways instead of the page (DT-FIX2). */
    .table-cards:has(> tfoot) { overflow-x: auto; }
}

/* From lg up a .table-cards grid keeps its table layout. When its nowrap columns
   are wider than the card, the grid scrolls inside the card, not the page. */
@media (min-width: 992px) {
    div.dt-container div.dt-layout-table > div:has(> table.table-cards) { overflow-x: auto; }
}

/* Tab strips wrap onto a second row instead of scrolling the modal sideways.
   Materio's `.nav { flex-wrap: inherit }` (core.css) inherits nowrap from a
   .modal-body, so the strip stays on one line however narrow the dialog. */
.nav-tabs { flex-wrap: wrap; }

/* ===========================================================================
   Shared grid / CRUD stack skin. Written once here, reused by every list
   screen - never restyled per page. Covers DataTables (bs5), its Buttons and
   Responsive add-ons, and Select2 so they sit inside Materio's look and the
   design language in docs/02 ("Design language"). */

/* Grid card: header row bold + slightly muted, hover on every data row, one
   flat border, one radius - matches the rest of the app's tables. */
#funcTableList thead th {
    font-weight: 600;
    color: var(--bs-heading-color);
    text-transform: none;
    white-space: nowrap;
}
#funcTableList tbody tr:hover > * {
    background-color: var(--bs-tertiary-bg);
}
#funcTableList td { vertical-align: middle; }

/* Toolbar: search + length + export buttons. Space them out and let the row
   wrap on a phone instead of overflowing. */
.dataTables_wrapper .row:first-child {
    row-gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
}
.dataTables_wrapper .dt-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dataTables_wrapper .dt-buttons .btn { --bs-btn-padding-y: 0.375rem; }
.dataTables_wrapper .dataTables_info { color: var(--bs-secondary-color); }

/* Grid empty state - icon + one line, never a bare white table (docs/02). Put
   <div class="grid-empty">...</div> in a full-width cell from the page script.
   DataTables (autoWidth) sizes an empty table to its <thead> text, overriding
   the inline width:100%, so the single dt-empty cell - and the message in it -
   is only header-wide and wraps a word per line. Force the table to fill its
   card while the empty / zero-records row is the only row; cap the message so
   the line length stays readable on a wide card. */
#funcTableList:has(> tbody > tr > td.dt-empty) { width: 100% !important; }
.grid-empty {
    max-width: 34rem;
    margin-inline: auto;
    padding: 2.5rem 1rem;
    text-align: center;
    color: var(--bs-secondary-color);
}
.grid-empty i { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; opacity: 0.6; }

/* Row action buttons in a grid cell - right-aligned, 40px tap target (docs/02). */
.cell-actions .hstack { justify-content: flex-end; }

/* Select2 single-select: match Bootstrap's .form-select (Materio skin) EXACTLY,
   so a picker never looks shorter, lighter-bordered or differently-rounded than
   the .form-select / .form-control beside it. Written once here - no page grows
   its own Select2 CSS (KNOWN-ISSUES A#23). All logical properties: the app is
   ltr today, ar is planned. docs/02 "CSS" + "Design language".

   The numbers below are lifted from wwwroot/vendor/css/core.css .form-select:
   border  1px solid color-mix(sRGB, base-color 22%, paper-bg)
   radius  var(--bs-border-radius)
   pad     block calc(.8555rem - 1px) / inline-start calc(1rem - 1px)
   text    .9375rem / line-height 1.375 / weight 400 / heading colour
   focus   2px primary border, NO ring (box-shadow: none), pad trims another 1px
   disabled  secondary-colour text, base-color 6% fill, --bs-border-color border
   The border-box padding subtracts the border width so the baseline holds when
   the border grows on focus - same trick the theme uses. */

.select2-container { width: 100% !important; }

.select2-container--default .select2-selection--single {
    height: auto;
    padding: 0;
    background-color: transparent;
    border: 1px solid color-mix(in sRGB, var(--bs-base-color) 22%, var(--bs-paper-bg));
    border-radius: var(--bs-border-radius);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-block: calc(0.8555rem - 1px);
    padding-inline-start: calc(1rem - 1px);
    padding-inline-end: calc(2rem - 1px);          /* room for the caret */
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.375;
    color: var(--bs-heading-color);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--bs-gray-400);                     /* == .form-control::placeholder */
}

/* Caret: sit where .form-select's SVG sits - inline-end edge 1rem in, centred -
   by anchoring a 22px box with inset-inline-end and filling it. The theme's
   custom props do not reach .select2-*, so the SVG is inlined (heading-colour
   fill at 0.9 alpha, from core.css). */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    inset-block-start: 0;
    inset-inline-end: 1rem;
    block-size: 100%;
    inline-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    position: static;
    inline-size: 22px;
    block-size: 24px;
    margin: 0;
    border: 0;
    background: center / 22px 24px no-repeat
        url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"%3e%3cpath d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="%232e263d" fill-opacity="0.9"/%3e%3c/svg%3e');
}

/* allowClear "x" (USER_MGMT filter, company pickers): keep it clear of the caret. */
.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-inline-end: 1.75rem;
    color: var(--bs-secondary-color);
}

/* Focus / open: primary border, no ring. A focused .form-select has
   box-shadow: none and a 2px border, trimming one more px off the padding so the
   control does not grow. */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-width: 2px;
    border-color: var(--bs-primary);
    box-shadow: none;
}
.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered,
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered {
    padding-block: calc(0.8555rem - 2px);
    padding-inline-start: calc(1rem - 2px);
    padding-inline-end: calc(2rem - 2px);
}
.select2-container--default.select2-container--focus .select2-selection--single .select2-selection__arrow,
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    inset-inline-end: calc(1rem - 1px);
}

/* Disabled: same muted text / tinted fill / lighter border + caret as
   .form-select:disabled. */
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: color-mix(in sRGB, var(--bs-base-color) 6%, var(--bs-paper-bg));
    border-color: var(--bs-border-color);
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--bs-secondary-color);
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow b {
    background-image:
        url('data:image/svg+xml,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 22" fill="none"%3e%3cpath d="M10.9999 12.0743L15.5374 7.53676L16.8336 8.83292L10.9999 14.6666L5.16626 8.83292L6.46243 7.53676L10.9999 12.0743Z" fill="%23aba8b1" fill-opacity="0.9"/%3e%3c/svg%3e');
}

/* jQuery Validate flags the underlying (visually hidden) <select>; carry the
   error border onto the visible container and hold it through focus - same as
   .form-select.is-invalid. Colour matches .input-validation-error above. */
select.select2-hidden-accessible.input-validation-error + .select2-container .select2-selection--single,
select.select2-hidden-accessible.input-validation-error + .select2-container--focus .select2-selection--single,
select.select2-hidden-accessible.input-validation-error + .select2-container--open .select2-selection--single {
    border-color: #dc3545;
}

/* Dropdown: theme border + radius, and above the modal (Materio
   --bs-modal-zindex is 1090; the toast layer is 1095). */
.select2-dropdown {
    border-color: var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    z-index: 1092;
}
.select2-container--open { z-index: 1092; }

/* SweetAlert2 alert above an open modal (vendor z-index is 1060, Materio modal 1090;
   F9). 1100 sits over the Select2 / flatpickr 1092, toast 1095 and tooltip 1099 layers. */
.swal2-container { z-index: 1100; }

/* The dropdown's search box: .form-control metrics. */
.select2-container--default .select2-search--dropdown { padding: 0.5rem; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    padding-block: calc(0.8555rem - 1px);       /* border-box: subtract the border, like .form-control */
    padding-inline: calc(1rem - 1px);
    font-size: 0.9375rem;
    line-height: 1.375;
    color: var(--bs-heading-color);
    background-color: transparent;
    border: 1px solid color-mix(in sRGB, var(--bs-base-color) 22%, var(--bs-paper-bg));
    border-radius: var(--bs-border-radius);
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: 0;
    border-color: var(--bs-primary);
}

/* Checkbox list for many-to-many pickers (e.g. a user's roles) inside a modal.
   Scrolls past ~6 rows instead of pushing the modal tall. Reusable. */
.check-list {
    max-height: 12.5rem;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: 0.5rem 0.75rem;
}
.check-list .form-check { margin-bottom: 0.25rem; }

/* Profile photo - the large circular avatar on the My Profile screen. Its own
   component, not Materio's .avatar: that one is sized for the navbar and stacks
   its initial layer with absolute positioning, which spills a big initial over
   the text beneath it. Fixed box, clipped to a circle, image covers. Reusable
   anywhere a screen needs a large avatar. */
.profile-photo {
    inline-size: 6.5rem;
    block-size: 6.5rem;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid var(--bs-border-color);
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary);
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
}
.profile-photo img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/* Company logo preview (docs/17-reports.md ruling 3). A rectangle, not a
   circle like .profile-photo - a logo is not a face and keeps its own aspect
   ratio (object-fit: contain), no fixed inline-size so a wide or a tall logo
   both fit without cropping. */
.logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    max-inline-size: 20rem;
    block-size: 8.75rem;
    padding: 0.75rem;
    margin-inline: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
}
.logo-preview img {
    max-inline-size: 100%;
    max-block-size: 100%;
    object-fit: contain;
}
.logo-preview .logo-placeholder {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

/* Grid export buttons (DataTables Buttons). The stock skin is flat grey for all
   four - give each format its own confident colour so they read at a glance.
   Applies to every grid that renders them. */
.dt-buttons .btn { border: 0; color: #fff; font-weight: 500; }
.dt-buttons .btn + .btn { margin-inline-start: 0.375rem; }
.dt-buttons .buttons-copy  { background-color: var(--bs-secondary); }
.dt-buttons .buttons-csv   { background-color: var(--bs-info); }
.dt-buttons .buttons-excel { background-color: var(--bs-success); }
.dt-buttons .buttons-print { background-color: var(--bs-primary); }
.dt-buttons .btn:hover,
.dt-buttons .btn:focus-visible { color: #fff; filter: brightness(0.92); }
.check-list .form-check:last-child { margin-bottom: 0; }

/* ===========================================================================
   Density standard (docs/02 "Density and spacing standard"), 7.3.70/71 on
   full entry pages (.entry-compact), 7.3.72 extends it to grid+modal screens
   (.modal-compact). One token declaration, two scopes, no duplicated values.
   Field-level rules (label, field-group, hint row, card heading) apply to
   both - a modal gets its own field spacing too. Structural rules that only
   make sense on a full page - .card margin, .card-body padding, .entry-title,
   .entry-actions - stay .entry-compact only: a modal's spacing already comes
   from Bootstrap's own .modal-body / .modal-footer, and a modal does not
   stack a card inside a card. .modal-compact goes on .modal-content. */
.entry-compact, .modal-compact {
    --sp-1: .25rem;   /* 4px  */
    --sp-2: .5rem;    /* 8px  */
    --sp-3: .75rem;   /* 12px */
    --sp-4: 1rem;     /* 16px */
    --sp-5: 1.5rem;   /* 24px */

    --gap-label:   var(--sp-1);   /* a label to its own field */
    --gap-help:    var(--sp-1);   /* a field to its helper text below it */
    --gap-field:   var(--sp-3);   /* one field group to the next, inside a card */
    --gap-card:    var(--sp-4);   /* one card to the next */
    --gap-section: var(--sp-5);   /* the last card to the action bar */
    --card-pad:    var(--sp-4);   /* card-body padding */

    --fs-title:   1.25rem;   --fw-title:   700;  /* page title - level 1 */
    --fs-heading: .9375rem;  --fw-heading: 700;  /* card heading - level 2 */
    --fs-body:    .875rem;   --fw-body:    400;  /* body / label - level 3 */
}
.entry-compact .entry-title { font-size: var(--fs-title); font-weight: var(--fw-title); }
.entry-compact .card { margin-bottom: var(--gap-card); }
.entry-compact .card:last-of-type { margin-bottom: 0; }
.entry-compact .card-body { padding: var(--card-pad); }
.entry-compact .card-header { padding-block: var(--sp-3); padding-inline: var(--card-pad); }
.entry-compact .entry-actions { margin-top: var(--gap-section); }
/* Entry-line numeric inputs carry no browser spinner arrows (quantity, rate, amount).
   One shared rule for every entry page's .line-row; the older pages' own
   @section Styles blocks still say the same thing and go in a later cleanup. */
.entry-compact .line-row input[type=number] { -moz-appearance: textfield; appearance: textfield; }
.entry-compact .line-row input[type=number]::-webkit-outer-spin-button,
.entry-compact .line-row input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; display: none; }

.entry-compact .card-heading, .modal-compact .card-heading {
    margin-bottom: 0;
    font-size: var(--fs-heading);
    font-weight: var(--fw-heading);
    color: var(--bs-heading-color);
}
.entry-compact .field-group, .modal-compact .field-group { margin-bottom: var(--gap-field); }
.entry-compact .field-group:last-child, .modal-compact .field-group:last-child { margin-bottom: 0; }
/* The :last-child reset above is for a field stacked vertically (the last one
   before a card ends) - it wrongly zeroes the LAST COLUMN of a horizontal
   filter row (Bootstrap .row, align-items-end), leaving its margin-bottom at
   0 while every sibling column keeps --gap-field, so that one column's
   bottom edge sits --gap-field lower than the rest (TrialBalance / Ledger
   Statement "Run" button, this session's fix). Restore it for a row column. */
.entry-compact .row > .field-group:last-child,
.modal-compact .row > .field-group:last-child { margin-bottom: var(--gap-field); }
/* Every label row - plain or with a hint icon - is the same height, so a
   field next to one with a hint does not start lower (7.3.70 alignment fix:
   the hint button used to occupy its full 32px tap area in flow, making its
   label row taller than a plain one). */
.entry-compact .form-label, .modal-compact .form-label {
    display: flex;
    align-items: center;
    min-height: 1.25rem;
    margin-bottom: var(--gap-label);
    font-size: var(--fs-body);
    font-weight: var(--fw-body);
}
.entry-compact .field-help, .modal-compact .field-help { margin-top: var(--gap-help); }
.entry-compact .label-with-hint, .modal-compact .label-with-hint {
    display: flex;
    align-items: center;
    min-height: 1.25rem;
    gap: var(--sp-1);
    margin-bottom: var(--gap-label);
}
.entry-compact .label-with-hint .form-label, .modal-compact .label-with-hint .form-label { margin-bottom: 0; min-height: 0; }
.entry-compact .row-header, .modal-compact .row-header { margin-bottom: var(--gap-label); }

/* Hint ("i") pattern - docs/02 ruling R9. A real button, never a <span>/<a>.
   16px icon padded to a ~32px box - the one named exception to the 40px tap
   target rule; every other control on the page still gets 40px. Tooltip is
   Bootstrap's own (data-bs-trigger="hover focus", container: body), lazily
   instantiated on first hover/focus so one delegated listener here covers
   every hint button on every page - no per-screen init call. */
.hint-icon {
    display: inline-flex;
    position: relative;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--bs-secondary-color);
}
/* The 32px tap target lives here, out of flow, so the button itself never
   grows its label row's height (7.3.70 alignment fix). */
.hint-icon::after {
    content: '';
    position: absolute;
    inset: -8px;
}
.hint-icon i { font-size: 1rem; line-height: 1; }
.hint-icon:hover,
.hint-icon:focus-visible {
    background: var(--bs-tertiary-bg);
    color: var(--bs-heading-color);
}
.hint-icon:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }

/* flatpickr skin - the input keeps .form-control (untouched, so it already
   matches every other text field); only the popup calendar needs dressing to
   sit inside the app's look, the same job done for Select2's dropdown above.
   docs/02 ruling R10 - display dd-MMM-yyyy, no locale file, English month
   names in both languages. */
.flatpickr-calendar {
    font-family: var(--bs-body-font-family);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.12);
    z-index: 1092;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { display: none; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.today.selected {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
}
.flatpickr-day.today { border-color: var(--bs-primary); }
.flatpickr-day:hover { background: var(--bs-tertiary-bg); }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekdays { background: var(--bs-tertiary-bg); }
.flatpickr-current-month input.cur-year { color: var(--bs-heading-color); }

/* ---- Goods Receipt entry (pilot) --------------------------------------- */
.gr-totals-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-4);
}
.gr-tot-item {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    min-width: 6rem;
}
.gr-tot-label {
    font-size: 0.75rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}
.gr-tot-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--bs-heading-color);
}
.gr-tot-item.gr-tot-net .gr-tot-label { font-weight: 600; color: var(--bs-heading-color); }
.gr-tot-item.gr-tot-net .gr-tot-value { font-size: 1.375rem; font-weight: 700; color: var(--bs-primary); }
#chargeEmpty { padding: 1.5rem 1rem; }
#chargeEmpty i { font-size: 2rem; }

/* ---- Party entry (pilot) ------------------------------------------------ */
/* One inline group, left-aligned, fixed gap - not three switches spread
   across col-md-4 thirds (7.3.70 alignment fix, defect 3.1). Stacks to one
   column below sm, same as every other field row. */
.party-switch-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-5);
}
@media (max-width: 575.98px) {
    .party-switch-group { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
}
.party-ledger-strip dt {
    margin-bottom: var(--gap-label);
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--bs-secondary-color);
}
.party-ledger-strip dd {
    font-weight: 500;
    color: var(--bs-heading-color);
}
@media (max-width: 767.98px) {
    .party-ledger-strip > div + div { margin-top: var(--sp-3); }
}

/* Dashboards (U2) */
.dash-grid {
    --dash-gap: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--dash-gap);
}
.dash-grid > * { min-width: 0; }
@media (min-width: 768px) {
    .dash-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .dash-span-3,
    .dash-span-4 { grid-column: span 3; }
    .dash-span-6,
    .dash-span-8,
    .dash-span-12 { grid-column: span 6; }
}
@media (min-width: 992px) {
    .dash-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .dash-span-3 { grid-column: span 3; }
    .dash-span-4 { grid-column: span 4; }
    .dash-span-6 { grid-column: span 6; }
    .dash-span-8 { grid-column: span 8; }
    .dash-span-12 { grid-column: span 12; }
}

/* Card: same surface as the theme .card (paper, radius, box-shadow, no border). */
.dash-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px;
    color: var(--bs-body-color);
    background-color: var(--bs-paper-bg);
    border-radius: var(--bs-card-border-radius, 0.375rem);
    box-shadow: var(--bs-box-shadow);
}
.dash-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.dash-card-head > div:first-child { min-width: 0; }
.dash-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bs-heading-color);
}
.dash-sub {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--bs-secondary-color);
}
.dash-card-slot { flex: 0 0 auto; max-width: 50%; white-space: nowrap; }

/* Hero KPI */
.dash-hero { min-height: 132px; }
.dash-hero-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.dash-hero-value {
    margin-top: 6px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--bs-heading-color);
}
.dash-hero-note {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--bs-secondary-color);
}
.dash-spark {
    position: absolute;
    right: 20px;
    bottom: 16px;
    width: 104px;
    height: 36px;
}
.dash-hero-dark { background-color: var(--bs-heading-color); }
.dash-hero-dark .dash-hero-label,
.dash-hero-dark .dash-hero-note { color: color-mix(in srgb, var(--bs-paper-bg) 72%, transparent); }
.dash-hero-dark .dash-hero-value,
.dash-hero-dark .dash-title { color: var(--bs-paper-bg); }

/* Delta chip: always one line. */
.dash-delta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}
.dash-delta-good  { color: color-mix(in srgb, var(--bs-success) 75%, var(--bs-heading-color)); background-color: color-mix(in srgb, var(--bs-success) 14%, transparent); }
.dash-delta-bad   { color: color-mix(in srgb, var(--bs-danger) 80%, var(--bs-heading-color));  background-color: color-mix(in srgb, var(--bs-danger) 14%, transparent); }
.dash-delta-warn  { color: color-mix(in srgb, var(--bs-warning) 55%, var(--bs-heading-color)); background-color: color-mix(in srgb, var(--bs-warning) 18%, transparent); }
.dash-delta-muted { color: var(--bs-secondary-color); background-color: color-mix(in srgb, #D3CEDC 40%, transparent); }

/* Compact strip: 1px dividers come from the container showing through a 1px gap. */
.dash-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
    background-color: var(--bs-border-color);
    border-radius: var(--bs-card-border-radius, 0.375rem);
    box-shadow: var(--bs-box-shadow);
}
.dash-strip-cell {
    min-width: 0;
    padding: 14px 16px;
    background-color: var(--bs-paper-bg);
}
.dash-strip-label { font-size: 11px; font-weight: 600; color: var(--bs-secondary-color); }
.dash-strip-value {
    margin-top: 2px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    color: var(--bs-heading-color);
}
.dash-strip-note { margin-top: 2px; font-size: 12px; color: var(--bs-secondary-color); }
@media (min-width: 768px) {
    .dash-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .dash-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Summary bar */
.dash-summary {
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--bs-body-color);
    background-color: color-mix(in srgb, var(--bs-primary) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-primary) 22%, transparent);
    border-radius: var(--bs-card-border-radius, 0.375rem);
}
.dash-summary > p { margin: 0; }
.dash-summary > * + * { margin-top: 4px; }

/* Attention list */
.dash-attn { margin: 0; padding: 0; list-style: none; }
.dash-attn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 8px 4px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid var(--bs-border-color);
}
.dash-attn > :last-child .dash-attn-row,
.dash-attn-row:last-child { border-bottom: 0; }
.dash-attn-row:hover { background-color: color-mix(in srgb, var(--bs-primary) 5%, transparent); }
.dash-attn-row:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: -2px; }
.dash-attn-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background-color: var(--bs-secondary); }
.dash-attn-danger  .dash-attn-dot { background-color: var(--bs-danger); }
.dash-attn-warning .dash-attn-dot { background-color: var(--bs-warning); }
.dash-attn-info    .dash-attn-dot { background-color: var(--bs-info); }
.dash-attn-success .dash-attn-dot { background-color: var(--bs-success); }
.dash-attn-body { flex: 1 1 auto; min-width: 0; }
.dash-attn-title { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--bs-heading-color); }
.dash-attn-detail { font-size: 12px; line-height: 1.4; color: var(--bs-secondary-color); }
.dash-attn-chev { flex: 0 0 auto; color: var(--bs-secondary-color); }

/* Composition */
.dash-comp-bar {
    display: flex;
    height: 12px;
    overflow: hidden;
    background-color: color-mix(in srgb, #D3CEDC 40%, transparent);
    border-radius: 6px;
}
.dash-comp-bar > * { min-width: 2px; height: 100%; }
.dash-comp-legend { margin: 12px 0 0; padding: 0; list-style: none; }
.dash-comp-legend > li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.dash-comp-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }
.dash-comp-legend .dash-comp-label { flex: 1 1 auto; min-width: 0; color: var(--bs-body-color); }
.dash-comp-legend .dash-comp-val { color: var(--bs-secondary-color); }

/* Ranking */
.dash-rank-row {
    display: grid;
    grid-template-columns: 20px minmax(0, 1.4fr) minmax(48px, 1fr) auto 44px;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--bs-border-color);
    font-variant-numeric: tabular-nums;
}
.dash-rank-row:last-child { border-bottom: 0; }
.dash-rank-no { font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); }
.dash-rank-name { min-width: 0; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: var(--bs-heading-color); }
.dash-rank-bar { height: 6px; overflow: hidden; background-color: color-mix(in srgb, #D3CEDC 40%, transparent); border-radius: 3px; }
.dash-rank-bar > span { display: block; height: 100%; background-color: var(--bs-primary); }
.dash-rank-amt { font-weight: 600; text-align: right; color: var(--bs-heading-color); }
.dash-rank-share { font-size: 12px; text-align: right; color: var(--bs-secondary-color); }

/* Compact table */
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th {
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}
.dash-table td { padding: 8px; border-bottom: 1px solid var(--bs-border-color); }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-table .dash-num,
.dash-table th.dash-num { text-align: right; font-variant-numeric: tabular-nums; }
.dash-mbar {
    display: inline-block;
    width: 56px;
    height: 6px;
    vertical-align: middle;
    background-color: var(--bs-success);
    border-radius: 3px;
}
.dash-mbar-ok { background-color: var(--bs-success); }
.dash-mbar-warn { background-color: var(--bs-warning); }

/* Heatmap */
.dash-heat { display: grid; grid-template-columns: auto repeat(12, minmax(0, 1fr)); gap: 3px; align-items: center; }
.dash-heat > span { display: block; min-width: 0; aspect-ratio: 1 / 1; border-radius: 3px; }
.dash-heat-1 { background-color: color-mix(in srgb, var(--bs-primary) 14%, transparent); }
.dash-heat-2 { background-color: color-mix(in srgb, var(--bs-primary) 32%, transparent); }
.dash-heat-3 { background-color: color-mix(in srgb, var(--bs-primary) 52%, transparent); }
.dash-heat-4 { background-color: color-mix(in srgb, var(--bs-primary) 76%, transparent); }
.dash-heat-5 { background-color: var(--bs-primary); }
.dash-heat-off { background-color: color-mix(in srgb, #D3CEDC 30%, transparent); }

/* States */
.dash-skel {
    min-height: 16px;
    background-color: color-mix(in srgb, #D3CEDC 50%, transparent);
    border-radius: 4px;
    animation: dash-pulse 1.4s ease-in-out infinite;
}
@keyframes dash-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
    .dash-skel { animation: none; }
}
.dash-empty,
.dash-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    font-size: 13px;
    text-align: center;
    color: var(--bs-secondary-color);
}
.dash-empty i { font-size: 32px; }
.dash-error { color: var(--bs-danger); }
.dash-error-retry { display: inline-flex; }

/* Header row: every control 40px, wraps below md, date range takes its own row below md. */
.dash-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.dash-head-title { flex: 1 1 auto; min-width: 0; margin-right: auto; }
.dash-head .form-control,
.dash-head .form-select,
.dash-head .btn,
.dash-head .select2-container .select2-selection--single { min-height: 40px; height: 40px; }
.dash-head-range { flex: 1 1 100%; }
@media (min-width: 768px) {
    .dash-head-range { flex: 0 1 280px; }
}
/* Date-range dropdown footer: the compare range, on its own line above the buttons. */
.dash-range-cmp {
    margin-bottom: 8px;
    font-size: 12px;
    text-align: left;
    color: var(--bs-secondary-color);
}

/* Hero and strip card parts (P4e). The note line leaves room for the sparkline. */
.dash-hero .dash-hero-note {
    min-height: 36px;
    padding-right: 116px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.dash-hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 8px; }
.dash-hero-vs { font-size: 12px; color: var(--bs-secondary-color); }
.dash-hero-dark .dash-hero-vs { color: color-mix(in srgb, var(--bs-paper-bg) 72%, transparent); }
.dash-hero-dark .dash-delta { background-color: color-mix(in srgb, var(--bs-paper-bg) 92%, transparent); }
.dash-note-warn { color: color-mix(in srgb, var(--bs-warning) 55%, var(--bs-heading-color)); }
.dash-skel-val { min-height: 32px; }
/* Fills the last strip row when the user sees fewer than six cells. On a phone (two columns) an odd
   last cell takes the whole row instead, so the divider colour never shows through as a grey hole. */
.dash-strip-fill { display: none; background-color: var(--bs-paper-bg); }
@media (max-width: 767.98px) {
    .dash-strip-last:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
    .dash-strip-fill { display: block; }
}

/* My Business notice bar (P4i): the SuperAdmin verification queue, one line, one link. */
.dash-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 40px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bs-heading-color);
    text-decoration: none;
    background-color: color-mix(in srgb, var(--bs-warning) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-warning) 45%, transparent);
    border-radius: var(--bs-card-border-radius, 0.375rem);
}
.dash-notice:hover { color: var(--bs-heading-color); background-color: color-mix(in srgb, var(--bs-warning) 18%, transparent); }
.dash-notice:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.dash-notice-text { flex: 1 1 auto; min-width: 0; }
.dash-notice-go { flex: 0 0 auto; font-weight: 600; color: var(--bs-primary); }

/* Wide widgets on My Business (P4g): trend chart, aging legend columns, donut, cash split. */
.dash-chart { min-height: 320px; }
.dash-comp-legend .dash-comp-pct { flex: 0 0 auto; min-width: 48px; text-align: right; }
.dash-comp-legend .dash-comp-amt { flex: 0 0 auto; min-width: 72px; font-weight: 600; text-align: right; color: var(--bs-heading-color); }
.dash-donut { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.dash-donut-chart { flex: 0 0 168px; min-height: 168px; }
.dash-donut .dash-comp-legend { flex: 1 1 140px; min-width: 0; margin-top: 0; }
.dash-flow-row + .dash-flow-row { margin-top: 16px; }
.dash-flow-line { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--bs-heading-color); }
.dash-flow-bar { height: 10px; margin: 6px 0; overflow: hidden; background-color: color-mix(in srgb, #D3CEDC 40%, transparent); border-radius: 5px; }
.dash-flow-bar > span { display: block; height: 100%; border-radius: 5px; }
.dash-flow-in { background-color: var(--bs-success); }
.dash-flow-out { background-color: var(--bs-danger); }
.dash-flow-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.dash-flow-tile { padding: 12px; background-color: color-mix(in srgb, #D3CEDC 22%, transparent); border-radius: 8px; }
.dash-flow-tile-warn { background-color: color-mix(in srgb, var(--bs-warning) 14%, transparent); }
.dash-flow-val { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bs-heading-color); }

/* My Business ranking, table, health, share-vs-margin, mix and heatmap parts (P4h). */
.dash-rank-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dash-rank-who .dash-rank-name { flex: 0 1 auto; }
.dash-rank-who .status { flex: 0 0 auto; font-size: 12px; }
@media (max-width: 575.98px) {
    .dash-rank-row { grid-template-columns: 20px minmax(0, 1fr) auto 44px; }
    .dash-rank-bar { display: none; }
}
/* Ranking inside a span-4 card (P5b: warehouse, region): a narrower name and bar column so a short name is not cut. */
.dash-span-4 .dash-rank-row { grid-template-columns: 16px minmax(0, 1.5fr) minmax(24px, 0.7fr) auto 44px; gap: 8px; }
@media (max-width: 575.98px) {
    .dash-span-4 .dash-rank-row { grid-template-columns: 16px minmax(0, 1fr) auto 44px; }
}
/* A phone: the item tables (top items, margin watch) fit the card without sideways scrolling. */
@media (max-width: 575.98px) {
    .dash-table th, .dash-table td { padding-inline: 4px; }
    .dash-table td.dash-cell-name { max-width: 104px; }
    .dash-table .dash-mbar { width: 20px !important; }
    .dash-table .dash-mcell { gap: 4px; }
}
.dash-table-wrap { overflow-x: auto; }
.dash-table .dash-cell-name { max-width: 220px; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: var(--bs-heading-color); }
.dash-mcell { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; white-space: nowrap; }
.dash-chart-sm { min-height: 260px; }
.dash-sm-key { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 8px; font-size: 12px; color: var(--bs-secondary-color); }
.dash-sm-swatch { display: inline-block; width: 8px; height: 8px; margin-inline-end: 6px; border-radius: 2px; }
.dash-sm-row { padding: 8px 0; border-bottom: 1px solid var(--bs-border-color); }
.dash-sm-row:last-child { border-bottom: 0; }
.dash-sm-name { margin-bottom: 4px; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; color: var(--bs-heading-color); }
.dash-sm-line { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.dash-sm-track { flex: 1 1 auto; min-width: 0; height: 6px; overflow: hidden; background-color: color-mix(in srgb, #D3CEDC 40%, transparent); border-radius: 3px; }
.dash-sm-fill { display: block; height: 100%; border-radius: 3px; }
.dash-sm-share { background-color: var(--bs-primary); }
.dash-sm-margin { background-color: var(--bs-heading-color); }
.dash-sm-margin.dash-sm-warn { background-color: var(--bs-warning); }
.dash-sm-val { flex: 0 0 auto; min-width: 48px; font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: var(--bs-body-color); }
.dash-heat-wrap { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.dash-heat-main { flex: 1 1 420px; min-width: 0; }
.dash-heat-take { flex: 0 1 260px; min-width: 200px; font-size: 13px; line-height: 1.5; color: var(--bs-heading-color); }
.dash-heat-take p { margin: 0 0 8px; }
.dash-heat > .dash-heat-lbl { padding-inline-end: 6px; font-size: 11px; white-space: nowrap; color: var(--bs-secondary-color); aspect-ratio: auto; border-radius: 0; }
.dash-heat-legend { display: flex; align-items: center; gap: 4px; margin-top: 12px; font-size: 11px; color: var(--bs-secondary-color); }
.dash-heat-legend > i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.dash-heat-legend > span:first-child { margin-inline-end: 4px; }
.dash-heat-legend > span:last-child { margin-inline-start: 4px; }

/* Inventory page (P7a): a net stock loss on IN_ADJ reads red. */
.dash-hero-value.dash-neg { color: var(--bs-danger); }
/* Customize panel close button: a 40 x 40 tap target (the Bootstrap default is about 30). The switch inputs are untouched. */
#dashPanel .btn-close { box-sizing: border-box; width: 40px; height: 40px; }
/* Customize rows: the whole row text is the tap target (40px tall), not just the 20px label line. */
#dashPanelList .form-check { flex: 1 1 auto; display: flex; align-items: center; min-height: 40px; }
#dashPanelList .form-check-label { flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; cursor: pointer; }
/* Inventory item tables: a quantity with its unit, a taka figure and a days figure never wrap inside their cell; a table wider than a phone card scrolls inside its own box. */
.dash-table-stock .dash-num { white-space: nowrap; }

/* Customers segmentation (P9b, CU_SEG): a flat 2 x 2 of the dash-flow-tile surface. Left column = invoice count at or above the median,
   top row = sales at or above the median; the key tile (Loyal & big) is tinted primary, At risk amber. */
.dash-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dash-seg-tile { min-width: 0; padding: 14px 12px; background-color: color-mix(in srgb, #D3CEDC 22%, transparent); border-radius: 8px; }
.dash-seg-tile-key { background-color: color-mix(in srgb, #8C57FF 12%, transparent); }
.dash-seg-tile-warn { background-color: color-mix(in srgb, var(--bs-warning) 14%, transparent); }
.dash-seg-val { font-size: 24px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bs-heading-color); }
.dash-seg-name { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); overflow-wrap: anywhere; }

/* ===========================================================================
   List workspace (docs/26, U3 P2b) - the Voucher List is the first page; Sales
   and Goods Receipt copy it, and the shared parts move to app.list at P4 (L-7).
   Every selector starts with .list-. Look copied from the U2 dashboard
   header / strip / Customize offcanvas (docs/21 section 15), not shared with it. */

/* Page-header right slot: range, Export, New - one 40px row, stacked on a phone. */
.list-head-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.list-head-slot .form-control,
.list-head-slot .btn { min-height: 40px; }
.list-range { flex: 1 1 100%; }
@media (min-width: 768px) {
    .list-range { flex: 0 1 270px; }
}

/* Summary strip of the CURRENT filter: 1px dividers come from the container
   showing through a 1px gap, same recipe as the dashboard strip. */
.list-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-bottom: 16px;
    overflow: hidden;
    background-color: var(--bs-border-color);
    border-radius: var(--bs-card-border-radius, 0.375rem);
    box-shadow: var(--bs-box-shadow);
}
.list-strip-cell { min-width: 0; padding: 14px 16px; background-color: var(--bs-paper-bg); }
.list-strip-label { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--bs-secondary-color); }
.list-strip-value {
    margin-top: 2px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    color: var(--bs-heading-color);
    overflow-wrap: anywhere;
}
.list-strip-value.list-neg { color: var(--bs-danger); }
.list-strip-note { margin-top: 2px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.list-strip-note:empty { display: none; }
.list-strip-skel { display: block; width: 60%; height: 22px; margin-top: 4px; border-radius: 4px; background-color: color-mix(in srgb, #D3CEDC 40%, transparent); }
@media (max-width: 767.98px) {
    .list-strip-cell:last-child { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
    .list-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .list-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* A five-cell strip (Sales, docs/26 L-29): five columns on a desktop and a
   last cell that fills the row on a tablet, so no empty cell shows the divider
   colour. Below 768px the base rule already spans the last cell. */
@media (min-width: 768px) {
    .list-strip-5 .list-strip-cell:last-child { grid-column: span 2; }
}
@media (min-width: 992px) {
    .list-strip-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .list-strip-5 .list-strip-cell:last-child { grid-column: auto; }
}
/* A three-cell strip (Sales Return, docs/26 section 3.2): three columns from 768px up, so the
   desktop six-column rule leaves no empty cell showing the divider colour. */
@media (min-width: 992px) {
    .list-strip-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* A four-cell strip (Party, docs/26 L-41): two columns below 768px with the last cell no longer
   spanning (no empty cell shows the divider colour), four columns from 768px up. */
@media (max-width: 767.98px) {
    .list-strip-4 .list-strip-cell:last-child { grid-column: auto; }
}
@media (min-width: 768px) {
    .list-strip-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* A six-cell strip (Subscriptions, SUB-P9): the base rule spans the last cell below 768px for an odd
   count; six cells fill two columns exactly, so the last cell must not span. */
@media (max-width: 767.98px) {
    .list-strip-6 .list-strip-cell:last-child { grid-column: auto; }
}

/* Filter bar and chips. */
.list-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.list-filters .form-control,
.list-filters .form-select,
.list-filters .btn { min-height: 40px; }
.list-filter-type { flex: 1 1 100%; }
.list-search { position: relative; flex: 1 1 100%; }
.list-search > i { position: absolute; inset-block-start: 50%; inset-inline-start: 12px; transform: translateY(-50%); pointer-events: none; color: var(--bs-secondary-color); }
.list-search .form-control { padding-inline-start: 38px; }
@media (min-width: 768px) {
    .list-filter-type { flex: 0 1 220px; }
    .list-search { flex: 1 1 280px; max-width: 420px; }
}
.list-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.list-chips:empty { display: none; }
.list-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 2px 4px 2px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bs-heading-color);
    background-color: color-mix(in srgb, #8C57FF 10%, transparent);
    border: 1px solid color-mix(in srgb, #8C57FF 35%, transparent);
    border-radius: 4px;
}
.list-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-chip-x {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 0;
    border-radius: 50%;
}
.list-chip-x::after { content: ''; position: absolute; inset: -10px; }
.list-chip-x:hover, .list-chip-x:focus-visible { color: var(--bs-heading-color); background-color: color-mix(in srgb, #8C57FF 18%, transparent); }
.list-chip-x:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 1px; }

/* The grid: 42px rows on a wide screen (R17), numbers tabular, a quiet doc-no link,
   one narration line cut with an ellipsis. Below lg the .table-cards card layout owns the row. */
.list-grid .list-docno { font-weight: 500; white-space: nowrap; }
.list-grid .list-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 992px) {
    .list-grid > tbody > tr > td { height: 42px; padding-block: 0; }
    .list-grid .list-narr { display: block; max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
.list-grid > tbody > tr.list-row-selected > * {
    --bs-table-bg-state: color-mix(in srgb, #8C57FF 9%, var(--bs-paper-bg));
    --bs-table-bg-type: color-mix(in srgb, #8C57FF 9%, var(--bs-paper-bg));
    background-color: color-mix(in srgb, #8C57FF 9%, var(--bs-paper-bg));
}
.list-grid > tbody > tr.list-row-selected > *:first-child { box-shadow: inset 3px 0 0 var(--bs-primary); }
.list-menu { display: inline-block; }
.list-menu .dropdown-item { display: flex; align-items: center; gap: 8px; min-height: 40px; }

/* Footer: Showing a-b of n, the filter total, rows per page, pager. */
.list-wrap .dt-layout-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.list-wrap .dt-layout-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.list-wrap .dt-info { padding-top: 0; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.list-foot-total { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-heading-color); }
.list-foot-total.list-foot-hint { font-weight: 400; color: var(--bs-secondary-color); }

/* Quick-view drawer (R16): no backdrop, 460px, a phone gets the full width. */
.list-drawer { --bs-offcanvas-width: 460px; }
.list-drawer-no { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); }
.list-drawer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin: 0 0 16px; }
.list-drawer-grid dt { font-size: 11px; font-weight: 600; color: var(--bs-secondary-color); }
.list-drawer-grid dd { margin: 2px 0 0; overflow-wrap: anywhere; color: var(--bs-heading-color); }
.list-drawer-amt { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.list-drawer-lines { width: 100%; font-size: 13px; }
.list-drawer-lines th { font-size: 11px; font-weight: 600; color: var(--bs-secondary-color); border-bottom: 1px solid var(--bs-border-color); }
.list-drawer-lines td, .list-drawer-lines th { padding: 6px 4px; vertical-align: top; }
.list-drawer-lines td.list-num, .list-drawer-lines th.list-num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list-drawer-lines tfoot td { font-weight: 700; border-top: 1px solid var(--bs-border-color); }
.list-drawer-narr { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; color: var(--bs-heading-color); }
.list-drawer-h { margin: 16px 0 6px; font-size: 11px; font-weight: 600; color: var(--bs-secondary-color); }
.list-drawer-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--bs-border-color); }
.list-drawer-foot .btn { min-height: 40px; }
.list-drawer-state { padding: 32px 0; text-align: center; color: var(--bs-secondary-color); }

/* Columns offcanvas rows (L-16): the whole row text is a 40px tap target. */
.list-cols .btn-close { box-sizing: border-box; width: 40px; height: 40px; }
.list-cols-row { display: flex; align-items: center; min-height: 40px; }
.list-cols-row .form-check { flex: 1 1 auto; display: flex; align-items: center; min-height: 40px; margin-bottom: 0; }
.list-cols-row .form-check-label { flex: 1 1 auto; align-self: stretch; display: flex; align-items: center; cursor: pointer; }

/* List page-header slot (U3 P3b, docs/26 L-35): from 576px up the right slot
   (range picker, Export, New) is ONE row that never wraps inside itself. If it
   does not fit beside the title block, the whole slot drops under the title,
   still one row. Below 576px the stacked rule above stays. */
@media (min-width: 576px) {
    .page-header:has(> .list-head-slot) { flex-wrap: wrap; }
    .page-header:has(> .list-head-slot) > :first-child { flex: 1 1 22rem; min-width: 0; }
    .page-header > .list-head-slot { flex-wrap: nowrap; flex: 0 1 auto; }
    .list-head-slot .list-range { flex: 0 1 270px; }
}

/* Same page-header slot: the picker is exactly as tall as the 40px buttons so
   the three controls share one top edge; below 576px each control is full
   width and they stack. */
.list-head-slot .form-control { height: 40px; }
@media (max-width: 575.98px) {
    .list-head-slot > .dropdown,
    .list-head-slot > .btn { flex: 1 1 100%; }
}

/* Side menu (R3 P3a, Imran 2026-10-03): a nested row that carries an icon does not also
   carry the theme's circle (core.css .menu .menu-sub > .menu-item > .menu-link::before).
   Rows without an icon keep the dot. */
.menu-vertical .menu-sub .menu-link:has(> .menu-icon)::before { display: none; }
/* Depth 2 (the Reports sub-groups, UX-P1): the child rows carry no icon, sit indented under the
   parent's label behind a 1px guide line, one step smaller and lighter; the label may wrap to a
   second line instead of an ellipsis. The parent row is the theme's own. */
.menu-vertical .menu-sub .menu-sub .menu-link > .menu-icon { display: none; }
.layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner > .menu-item .menu-sub .menu-sub {
    margin-inline-start: 3.45rem;
    border-inline-start: 1px solid var(--bs-border-color);
}
.layout-wrapper:not(.layout-horizontal) .menu-vertical .menu-inner > .menu-item .menu-sub .menu-sub .menu-link {
    padding-inline-start: 1.875rem;
    font-size: 0.8125rem;
    font-weight: 400;
}
.menu-vertical .menu-sub .menu-sub .menu-link > div { white-space: normal; overflow: visible; line-height: 1.25; }

/* Menu tier divider (UX-P1): a hairline with a tiny muted caption (Daily / Setup / Yearly) where the
   tier changes between two direct items of a group. Display only; LayoutFilter / _Layout decide where. */
.menu-vertical .menu-sub > .menu-tier {
    display: flex; align-items: center; gap: 0.5rem;
    padding-block: 0.625rem 0.125rem; padding-inline: 3.325rem 1rem; /* start = the sub item icon's left edge (53.2px, UX-P2) */
    font-size: 0.6875rem; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.menu-vertical .menu-sub > .menu-tier::after { content: ""; flex: 1 1 auto; border-block-start: 1px solid var(--bs-border-color); }

/* Menu links are min-block-size 38px in the theme (core.css); the drawer and small screens need a 40px
   tap target (docs/17 ruling 17). The desktop sidebar keeps the theme height. */
@media (max-width: 1199.98px) {
    .menu-vertical .menu-item .menu-link { min-block-size: 40px; }
}

/* ---- Subscription top bar (SUB-P5, docs/24 5.3) ------------------------------
   A slim, one-line bar under the navbar, shown at 90% of the monthly sales
   limit or more. Yellow from 90%, red from 100%. Solid-soft, no gradient. */
.sub-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: .5rem .875rem;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--bs-border-radius);
  font-size: .8125rem;
  line-height: 1.4;
}
.sub-bar .sub-bar-text { flex: 1 1 14rem; font-weight: 600; }
.sub-bar .sub-bar-link { font-weight: 600; text-decoration: underline; white-space: nowrap; color: inherit; }
.sub-bar-warning { background: var(--bs-warning-bg-subtle); border-color: var(--bs-warning); color: var(--bs-warning-text-emphasis); }
.sub-bar-danger  { background: var(--bs-danger-bg-subtle);  border-color: var(--bs-danger);  color: var(--bs-danger-text-emphasis); }

/* Daily Brief panel (docs/28 A46): one end-side offcanvas in _Layout, full width at 575px and below. The evidence rows reuse .dash-attn;
   the countdown banner reuses .sub-bar. */
.ai-panel { --bs-offcanvas-width: 440px; }
@media (max-width: 575.98px) { .ai-panel { --bs-offcanvas-width: 100vw; } }
.ai-panel .offcanvas-header { align-items: flex-start; border-bottom: 1px solid var(--bs-border-color); gap: .75rem; }
.ai-panel-chip { font-size: 12px; font-weight: 600; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.ai-panel .sub-bar { margin-bottom: 1rem; }
.ai-panel .sub-bar-sub { flex: 1 1 100%; font-size: 12px; font-weight: 400; }
.ai-sec { margin-bottom: 1.25rem; }
.ai-sec-title { font-size: 13px; font-weight: 700; color: var(--bs-heading-color); margin-bottom: .375rem; }
.ai-sec p { margin-bottom: .5rem; line-height: 1.5; }
.ai-reason { font-size: 12px; color: var(--bs-secondary-color); margin-bottom: 1rem; }
/* Brief wait (docs/28-ai.md A82). CSS 3D only, the panel's own colours; the brand tokens are for the Ask AI page (A81.4). */
.ai-wait { display: flex; flex-direction: column; align-items: center; gap: .75rem; padding: 1.5rem .25rem; font-size: 14px; color: var(--bs-secondary-color); text-align: center; }
.ai-wait-n { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--bs-heading-color); }
.ai-wait-stage { position: relative; flex: 0 0 auto; width: 72px; height: 72px; perspective: 360px; display: flex; align-items: center; justify-content: center; }
.ai-wait-ring { position: absolute; inset: 0; border: 1.5px solid rgba(var(--bs-primary-rgb), .4); border-radius: 50%; }
.ai-wait-ring-x { transform: rotateX(68deg); }
.ai-wait-ring-y { transform: rotateY(68deg); }
.ai-wait-ring b { position: absolute; top: -4px; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: var(--bs-primary); }
.ai-wait-icon { position: relative; font-size: 22px; line-height: 1; color: var(--bs-primary); }
@keyframes ai-wait-orbit-x { from { transform: rotateX(68deg) rotateZ(0deg); } to { transform: rotateX(68deg) rotateZ(360deg); } }
@keyframes ai-wait-orbit-y { from { transform: rotateY(68deg) rotateZ(0deg); } to { transform: rotateY(68deg) rotateZ(-360deg); } }
@keyframes ai-wait-breathe { 0%, 100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) { .ai-wait-ring-x { animation: ai-wait-orbit-x 3s linear infinite; } .ai-wait-ring-y { animation: ai-wait-orbit-y 4.2s linear infinite; } .ai-wait-icon { animation: ai-wait-breathe 2.4s ease-in-out infinite; } }
@media (prefers-reduced-motion: reduce) { .ai-wait-ring, .ai-wait-icon { animation: none; } }
.ai-fb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; border-top: 1px solid var(--bs-border-color); padding-top: 1rem; }
.ai-fb .ai-fb-ask { flex: 1 1 100%; font-size: 12px; color: var(--bs-secondary-color); }
.ai-fb [data-fb] { min-height: 40px; }
.ai-fb-form { flex: 1 1 100%; }
.ai-fb-form #aiFbCancel, .ai-fb-form #aiFbSend { min-height: 40px; }
.ai-fb-form .form-check { min-height: 40px; display: flex; align-items: center; gap: .5rem; }
/* Daily Brief 2.0 (docs/28 A67 / A68 7): headline band, focus cards, Good / Watch strips, Do-this-first box, figures fold. Flat, one border. */
.ai-band { padding: .75rem .875rem; margin-bottom: 1rem; border: 1px solid var(--bs-border-color); border-top: 4px solid var(--bs-heading-color); border-radius: var(--bs-border-radius); }
.ai-band-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem .75rem; }
.ai-band-title { font-weight: 700; color: var(--bs-heading-color); }
.ai-band-day, .ai-band-range { font-size: 12px; color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }
.ai-band-head { margin: .5rem 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--bs-heading-color); }
.ai-card { padding: .5rem .875rem .625rem; margin-bottom: .75rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
.ai-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 40px; color: inherit; text-decoration: none; }
.ai-card .status { white-space: normal; align-items: flex-start; font-weight: 600; font-size: .875rem; }
.ai-card .status::before { margin-top: .4rem; }
.ai-card-why, .ai-card-do, .ai-first p { margin: 0 0 .375rem; font-size: 13px; line-height: 1.5; }
.ai-first { padding: .625rem .875rem; margin-bottom: 1rem; border: 1px solid var(--bs-border-color); border-left: 4px solid var(--bs-primary); border-radius: var(--bs-border-radius); }
.ai-first-title { font-size: 13px; font-weight: 700; color: var(--bs-heading-color); margin-bottom: .25rem; }
.sub-bar-success { background: var(--bs-success-bg-subtle); border-color: var(--bs-success); color: var(--bs-success-text-emphasis); }
.ai-figs { margin-bottom: 1rem; }
.ai-figs > summary { min-height: 40px; display: flex; align-items: center; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--bs-heading-color); }
.ai-panel .ai-view { max-width: 12rem; }
.ai-panel #aiViewBox { margin-bottom: 1.25rem; }

/* ==== AI-CH2: Automan brand tokens + the Ask AI page (docs/28-ai.md section 14, docs/02 "Brand (Imran, 2026-10-23)") ====
   The tokens are defined once here. They are used ONLY by the Ask AI page (.aipg) until Imran accepts the sample; BRAND-1 then rolls
   them to the shell. Light-only app: one set, no dark override. Gold is a fill or an accent, never text on a light surface; text on
   gold is navy; gold text only on navy; white text never on gold. Three radii: 8 (buttons, pills, small boxes), 12 (cards, chips),
   14 (the input box). One border style, no shadows, no gradient except the sparkle. */
:root {
    --brand-navy: #00315E;
    --brand-gold: #F2B901;
    --brand-gold-dark: #BE8D1F;
    --brand-ivory: #FFFFF8;
    --brand-gold-tint: #FFF6D6;
    --brand-gold-tint-2: #FFF1BF;
    --brand-next-border: #F2D77A;
    --brand-grey: #3F4F63;
    --brand-grey-2: #4A5B6E;
    --brand-line: #DDD9C4;
    --brand-line-2: #E8E4CC;
    --brand-line-3: #ECE8D2;
    --brand-track: #F1EEDC;
    --brand-disabled: #EDEADB;
    --brand-disabled-text: #6B7685;
}

/* Host Grotesk (SIL OFL 1.1, wwwroot/fonts/HostGrotesk-OFL.txt): Latin letters and digits only. The unicode-range keeps Bengali
   letters on Noto Sans Bengali, which comes next in the page stack. */
@font-face {
    font-family: 'Host Grotesk';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('/fonts/HostGrotesk-Variable.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.aipg {
    --aipg-list-w: 280px;
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    color: var(--brand-navy);
    background: var(--brand-ivory);
    font-family: 'Host Grotesk', 'Noto Sans Bengali', 'Inter', sans-serif;
    font-size: 15px;
    line-height: 1.45;
}
.aipg button, .aipg textarea { font-family: inherit; }

/* Focus mode (A81.24): while this page is open the ERP shell is hidden, by CSS only, and the page fills the screen in the same tab.
   Hidden: the side menu, the top bar, the subscription notice bars (direct .container-xxl children of .layout-page), the footer, the
   menu overlay, the swipe target and the content backdrop. #aiPanel (the Brief drawer), the toast container and the modal root are
   direct children of body outside .layout-wrapper, so nothing below hides them or an ancestor of them. */
body:has(.aipg) .layout-menu,
body:has(.aipg) .layout-navbar,
body:has(.aipg) .layout-page > .container-xxl,
body:has(.aipg) .content-footer,
body:has(.aipg) .layout-overlay,
body:has(.aipg) .drag-target,
body:has(.aipg) .content-backdrop { display: none !important; }
body:has(.aipg) .layout-page { padding: 0 !important; }
body:has(.aipg) .content-wrapper > .container-xxl { max-width: none; padding: 0 !important; }
.aipg-amt { font-variant-numeric: tabular-nums; }
.aipg :focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.aipg-side :focus-visible { outline-color: var(--brand-gold); }

/* The chat list: a 280 px column from 992 px (Bootstrap offcanvas-lg), a drawer below. */
.aipg-side { --bs-offcanvas-width: min(320px, 88vw); --bs-offcanvas-bg: var(--brand-navy); --bs-offcanvas-color: #fff; }
.aipg .aipg-side .offcanvas-body { flex-grow: 1; padding: 0; overflow: hidden; }
.aipg-nav { display: flex; flex-direction: column; gap: 12px; width: 100%; height: 100%; padding: 16px 12px; color: #fff; background: var(--brand-navy); }
.aipg-back {
    display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 8px; color: #fff; font-size: 14px; font-weight: 600;
    text-decoration: none; border-radius: 8px;
}
.aipg-back:hover, .aipg-back:focus { color: #fff; text-decoration: underline; background: rgba(255, 255, 255, .1); }
.aipg-nav-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.aipg-nav-title { margin: 0; font-size: 16px; font-weight: 700; color: #fff; }
.aipg-x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; background: transparent; border: 0; border-radius: 8px; }
.aipg-new {
    display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 0 12px;
    color: var(--brand-navy); font-size: 15px; font-weight: 700; background: var(--brand-gold); border: 0; border-radius: 8px;
}
.aipg-new:disabled { color: var(--brand-disabled-text); background: var(--brand-disabled); }
.aipg-chats { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.aipg-group { margin: 14px 8px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.aipg-chat { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; border-left: 3px solid transparent; border-radius: 8px; }
.aipg-chat.is-open { background: rgba(255, 255, 255, .1); border-left-color: var(--brand-gold); }
.aipg-chat-main {
    flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 6px 8px; color: #fff; font-size: 14px; text-align: start;
    background: transparent; border: 0; border-radius: 8px; overflow-wrap: anywhere;
}
.aipg-chat-main:disabled { color: rgba(255, 255, 255, .72); cursor: default; }
.aipg-chat-sub { display: block; font-size: 12px; color: rgba(255, 255, 255, .72); }
.aipg-chat-rm { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 44px; color: #fff; background: transparent; border: 0; border-radius: 8px; }
.aipg-more { width: 100%; min-height: 44px; margin-top: 8px; color: #fff; background: transparent; border: 1px solid rgba(255, 255, 255, .72); border-radius: 8px; }
.aipg-empty { margin: 16px 8px; color: rgba(255, 255, 255, .72); font-size: 14px; }

/* The main column. */
.aipg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--brand-ivory); }
.aipg-bar { display: flex; align-items: center; gap: 8px; height: 60px; padding: 0 8px; color: #fff; background: var(--brand-navy); }
.aipg-bar-title { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 16px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aipg-bar-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: #fff; background: transparent; border: 0; border-radius: 8px; }
.aipg-bar-btn.is-gold { color: var(--brand-navy); background: var(--brand-gold); }
.aipg-head { align-items: center; gap: 12px; height: 76px; padding: 0 20px; border-bottom: 1px solid var(--brand-line-2); }
.aipg-tile { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--brand-navy); border-radius: 12px; }
.aipg-spark { display: block; width: 24px; height: 24px; }
.aipg-head-t { flex: 1 1 auto; min-width: 0; }
.aipg-title { margin: 0; font-size: 18px; font-weight: 700; color: var(--brand-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aipg-qn { display: block; font-size: 13px; color: var(--brand-grey); }
.aipg-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.aipg-pill { display: inline-block; padding: 4px 10px; font-size: 13px; font-weight: 600; color: var(--brand-navy); background: #fff; border: 1px solid var(--brand-navy); border-radius: 8px; font-variant-numeric: tabular-nums; }
.aipg-strip { padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--brand-line-2); }

.aipg-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px 20px; }
.aipg-col { max-width: 840px; margin: 0 auto; }
.aipg-greet { margin: 8px 0 16px; font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--brand-navy); }
.aipg-help { margin: 8px 2px 20px; font-size: 13px; color: var(--brand-grey); }
.aipg-chips { display: grid; grid-template-columns: 1fr; gap: 12px; }
.aipg-chip {
    display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 12px; text-align: start; color: var(--brand-navy);
    background: #fff; border: 1px solid var(--brand-line); border-radius: 12px;
}
.aipg-chip.is-brief { background: var(--brand-gold-tint); border-color: var(--brand-gold); }
.aipg-chip:disabled { color: var(--brand-disabled-text); background: var(--brand-disabled); }
.aipg-chip-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 20px; color: var(--brand-navy); background: var(--brand-gold-tint); border-radius: 8px; }
.aipg-chip.is-brief .aipg-chip-ico { background: var(--brand-gold-tint-2); }
.aipg-chip-t { display: block; font-size: 16px; font-weight: 700; }
.aipg-chip-h { display: block; font-size: 13px; color: var(--brand-grey); }
.aipg-trust { margin: 20px 2px 0; font-size: 13px; color: var(--brand-grey); }
.aipg-chips-inline { margin-top: 12px; }

/* The input box (A81.7: white, 1.5 px navy border, radius 14). It sits under the greeting, then docks at the bottom after the first question. */
.aipg-dock { padding: 12px 20px 16px; background: var(--brand-ivory); border-top: 1px solid var(--brand-line-2); }
.aipg-box { padding: 12px; background: #fff; border: 1.5px solid var(--brand-navy); border-radius: 14px; }
.aipg-box textarea { display: block; width: 100%; min-height: 56px; padding: 0; resize: none; color: var(--brand-navy); font-size: 16px; background: transparent; border: 0; outline: 0; }
.aipg-box textarea::placeholder { color: var(--brand-grey-2); }
.aipg-box textarea:disabled { color: var(--brand-disabled-text); }
.aipg-box:focus-within { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.aipg-box-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.aipg-count { font-size: 13px; color: var(--brand-grey); font-variant-numeric: tabular-nums; }
.aipg-send {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 88px; min-height: 44px; padding: 0 16px;
    color: var(--brand-navy); font-size: 15px; font-weight: 700; background: var(--brand-gold); border: 0; border-radius: 8px;
}
.aipg-send:disabled { color: var(--brand-disabled-text); background: var(--brand-disabled); }
.aipg-note { margin: 8px 2px 0; font-size: 13px; color: var(--brand-grey); }

/* The thread. */
.aipg-q { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.aipg-q p { max-width: 85%; margin: 0; padding: 10px 14px; color: #fff; background: var(--brand-navy); border-radius: 12px; overflow-wrap: anywhere; }
.aipg-ans { margin: 0 0 20px; padding: 20px; background: #fff; border: 1px solid var(--brand-line); border-top: 4px solid var(--brand-gold); border-radius: 12px; overflow-wrap: anywhere; }
.aipg-ans-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.aipg-ans-lbl { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-navy); }
.aipg-ans-date { font-size: 13px; color: var(--brand-grey); }
.aipg-hero { margin: 8px 0 4px; font-size: 40px; font-weight: 700; line-height: 1.1; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.aipg-hero-l { margin: 0 0 8px; font-size: 14px; color: var(--brand-grey); }
.aipg-text { margin: 8px 0 0; color: var(--brand-grey); }
.aipg-sec { margin-top: 16px; }
.aipg-sec-h { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-navy); }
.aipg-ev { margin: 0; padding: 0; list-style: none; }
.aipg-ev li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 36px; padding: 6px 0; border-bottom: 1px solid var(--brand-line-3); }
.aipg-ev-name { color: var(--brand-navy); }
.aipg-ev-bar { display: block; height: 8px; background: var(--brand-track); border-radius: 8px; overflow: hidden; }
.aipg-ev-bar i { display: block; height: 100%; background: var(--brand-gold); border-radius: 8px; }
.aipg-ev-n { font-weight: 600; color: var(--brand-navy); text-align: end; font-variant-numeric: tabular-nums; }
.aipg-ev-total { border-bottom: 0; font-weight: 700; }
.aipg-ev-total .aipg-ev-n { font-weight: 700; }
.aipg-ev-total .aipg-ev-bar { visibility: hidden; }
.aipg-ev li.is-cur .aipg-ev-bar i { background: var(--brand-navy); }
.aipg-bad { color: #9F1D1D; font-weight: 700; }
.aipg-fb-ask { font-size: 13px; color: var(--brand-grey); }
.aipg-acts-strip { margin: 0 0 12px; }
.aipg-next { margin-top: 16px; padding: 12px 14px; background: var(--brand-gold-tint); border: 1px solid var(--brand-next-border); border-radius: 8px; }
.aipg-next-h { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-navy); }
.aipg-next p { margin: 0; color: var(--brand-navy); }
.aipg-det { margin-top: 16px; font-size: 13px; color: var(--brand-grey); }
.aipg-det summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--brand-navy); cursor: pointer; }
.aipg-det dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; }
.aipg-det dt { font-weight: 600; }
.aipg-det dd { margin: 0; font-variant-numeric: tabular-nums; }
.aipg-cost { margin: 12px 0 0; font-size: 13px; color: var(--brand-grey); }
.aipg-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.aipg-acts-r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aipg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px; font-size: 14px; font-weight: 600;
    color: var(--brand-navy); text-decoration: none; background: #fff; border: 1px solid var(--brand-navy); border-radius: 8px;
}
.aipg-btn:hover { color: var(--brand-navy); background: var(--brand-gold-tint); }
.aipg-btn.is-neutral { border-color: var(--brand-line); }
.aipg-btn[aria-pressed="true"] { background: var(--brand-gold-tint); border-color: var(--brand-navy); }
.aipg-btn.is-gold { background: var(--brand-gold); border-color: var(--brand-gold); }
.aipg-btn:disabled { color: var(--brand-disabled-text); background: var(--brand-disabled); border-color: var(--brand-disabled); }
.aipg-reason { margin: 8px 0 0; color: var(--brand-navy); }
.aipg-cand { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; margin-top: 8px; padding: 0 12px; color: var(--brand-navy); text-align: start; background: #fff; border: 1px solid var(--brand-line); border-radius: 8px; }
.aipg-nounits { margin-top: 12px; padding: 12px 14px; color: var(--brand-navy); background: var(--brand-gold-tint); border: 1px solid var(--brand-next-border); border-radius: 8px; }
.aipg-nounits p { margin: 0 0 4px; }
.aipg-nounits p:last-child { margin-bottom: 0; }
.aipg-fbform { margin-top: 12px; padding: 12px; border: 1px solid var(--brand-line); border-radius: 8px; }
.aipg-fbform label { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.aipg-fbform textarea { width: 100%; padding: 8px; color: var(--brand-navy); background: #fff; border: 1px solid var(--brand-line); border-radius: 8px; }
.aipg-why-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 8px 0; border-bottom: 1px solid var(--brand-line-3); }
.aipg-why-sub { display: block; font-size: 13px; color: var(--brand-grey); }
.aipg-why-total { font-weight: 700; border-bottom: 0; }
.aipg-ro { margin: 0 0 12px; padding: 8px 12px; font-size: 13px; color: var(--brand-navy); background: var(--brand-gold-tint); border: 1px solid var(--brand-next-border); border-radius: 8px; }
.aipg-turn { margin: 0 0 16px; }
.aipg-turn-a { margin: 0; padding: 12px 14px; color: var(--brand-grey); background: #fff; border: 1px solid var(--brand-line); border-top: 4px solid var(--brand-gold); border-radius: 12px; overflow-wrap: anywhere; }
.aipg-skel { margin: 0 0 20px; padding: 20px; background: #fff; border: 1px solid var(--brand-line); border-top: 4px solid var(--brand-gold); border-radius: 12px; }
.aipg-skel i { display: block; height: 14px; margin-bottom: 10px; background: var(--brand-track); border-radius: 8px; }
.aipg-skel i:nth-child(2) { width: 70%; }
.aipg-skel i:nth-child(3) { width: 45%; margin-bottom: 0; }
.aipg-off { max-width: 520px; margin: 48px auto; text-align: center; color: var(--brand-navy); }
.aipg-off i { display: block; margin-bottom: 8px; font-size: 48px; }

@media (min-width: 576px) {
    .aipg-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
    .aipg .aipg-side { flex: 0 0 var(--aipg-list-w); width: var(--aipg-list-w) !important; display: flex; flex-direction: column; }
    .aipg-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .aipg-chat-main, .aipg-chat-rm, .aipg-new, .aipg-btn, .aipg-send { min-height: 40px; }
}
@media (max-width: 991.98px) {
    .aipg-greet { font-size: 26px; }
    .aipg-hero { font-size: 32px; }
    .aipg-scroll { padding: 16px 12px; }
    .aipg-dock { padding: 8px 12px 12px; }
    .aipg-ev li { grid-template-columns: minmax(0, 1fr) auto; }
    .aipg-ev-bar { grid-column: 1 / -1; grid-row: 2; }
}
@media (prefers-reduced-motion: no-preference) {
    .aipg-skel i { animation: aipg-pulse 1.2s ease-in-out infinite; }
    @keyframes aipg-pulse { 50% { opacity: .5; } }
}

/* ---------------------------------------------------------------------------
   Barcode Labels (ITEM_LABELS, docs/17 D47-P3). The basket beside the item list: one line per
   item (name and barcode, a copies stepper, a remove button), a total line, a fixed bottom bar
   below lg. Every tap target is at least 40px. Everything else is the shared list-* classes. */
.lbl-basket-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lbl-basket .btn { min-height: 40px; }
.lbl-lines { margin: 0; padding: 0; list-style: none; max-height: 60vh; overflow-y: auto; }
.lbl-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 8px; padding: 8px 0; border-bottom: 1px solid var(--bs-border-color); }
.lbl-line-text { grid-column: 1 / -1; min-width: 0; }
.lbl-line-name { font-weight: 600; color: var(--bs-heading-color); overflow-wrap: anywhere; }
.lbl-line-bc { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.lbl-step { grid-column: 1; display: inline-flex; align-items: center; gap: 4px; }
.lbl-step .btn-icon { min-width: 40px; min-height: 40px; }
.lbl-copies { width: 5rem; min-height: 40px; text-align: center; font-variant-numeric: tabular-nums; }
.lbl-del { grid-column: 3; }
.lbl-empty { padding: 24px 0; text-align: center; color: var(--bs-secondary-color); }
.lbl-empty i { display: block; margin-bottom: 8px; font-size: 2.5rem; opacity: 0.6; }
.lbl-total { margin-top: 12px; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-heading-color); }
.lbl-limit { margin-top: 8px; font-size: 13px; color: var(--bs-danger); }
.lbl-limit[hidden], .lbl-bar[hidden] { display: none; }
.lbl-why { margin-top: 2px; font-size: 12px; color: var(--bs-secondary-color); }
.lbl-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 1030; padding: 10px 16px; background-color: var(--bs-paper-bg); border-top: 1px solid var(--bs-border-color); }
.lbl-bar .btn { min-height: 44px; }
body.lbl-has-bar { padding-bottom: 72px; }
@media (min-width: 992px) {
    .lbl-basket { position: sticky; inset-block-start: 5.5rem; }
    /* The Add cell stays in view when the table is wider than its card. */
    .lbl-page .list-grid > :is(thead, tbody) > tr > :last-child { position: sticky; inset-inline-end: 0; background-color: var(--bs-paper-bg); }
    .lbl-bar { display: none; }
    body.lbl-has-bar { padding-bottom: 0; }
}

/* ==== AI-BF4: Daily Brief panel, premium look (docs/28 A106, AI-UNFENCE-84, docs/02 Brand bullet) ====
   The brand tokens (:root above) apply to the Brief panel here too (A91.3 amended for this panel only). Gradients, soft shadows and motion are allowed.
   Text is navy on ivory or white, or white on navy; gold is a fill or an accent, never text on a light surface; gold is never a status colour.
   Status colours stay Bootstrap (.status dot plus a word). Every class and id of this block starts with brief-.
   AI-BF5 (A107, AI-UNFENCE-85): 2x2 figures at any width, delta chip with an arrow, Follow-ups card, a gradient ramp per ranking bar. */
.brief-panel {
    --bs-offcanvas-width: 460px;
    --bs-offcanvas-bg: var(--brand-ivory);
    --brief-navy-2: #0B4378;
    --brief-card: #FFFFFF;
    --brief-shadow: 0 1px 2px rgba(0, 49, 94, .06), 0 6px 18px rgba(0, 49, 94, .07);
    color: var(--brand-navy);
    font-family: 'Host Grotesk', 'Noto Sans Bengali', 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1.45;
}
@media (max-width: 575.98px) { .brief-panel { --bs-offcanvas-width: 100vw; } }
.brief-panel .brief-body { padding: 1rem; background: var(--brand-ivory); }
.brief-head { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; color: #fff; background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brief-navy-2) 100%); border-bottom: 3px solid var(--brand-gold); }
.brief-tile { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 22px; color: var(--brand-navy); background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-dark)); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.brief-head-text { flex: 1 1 auto; min-width: 0; }
.brief-title { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: .01em; color: #fff; }
.brief-meta { display: flex; flex-wrap: wrap; gap: 0 .625rem; font-size: 12px; color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums; }
.brief-company { font-weight: 600; overflow-wrap: anywhere; }
.brief-iconbtn { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 10px; font-size: 20px; color: #fff; background: rgba(255, 255, 255, .12); transition: background-color .15s ease; }
.brief-iconbtn:hover, .brief-iconbtn:focus-visible { background: rgba(255, 255, 255, .24); color: #fff; }
.brief-iconbtn:disabled { opacity: .5; }
.brief-chip { padding: .3125rem 1rem; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, .82); background: var(--brand-navy); font-variant-numeric: tabular-nums; }
.brief-chip:empty { display: none; }
.brief-view { display: flex; align-items: center; gap: .625rem; margin-bottom: 1rem; }
.brief-view-label { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand-grey); }
.brief-select { max-width: 12rem; color: var(--brand-navy); background-color: var(--brief-card); border-color: var(--brand-line); }
.brief-panel .sub-bar { margin-bottom: 1rem; }
.brief-panel .sub-bar-sub { flex: 1 1 100%; font-size: 12px; font-weight: 400; }

.brief-sec { margin-bottom: 1rem; }
.brief-sec > summary { list-style: none; display: flex; align-items: center; gap: .375rem; min-height: 40px; cursor: pointer; }
.brief-sec > summary::-webkit-details-marker { display: none; }
.brief-sec-title { margin: 0; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-navy); }
.brief-sec-chev { font-size: 20px; color: var(--brand-grey); transition: transform .2s ease; }
.brief-sec[open] > summary .brief-sec-chev { transform: rotate(180deg); }
.brief-heroes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
.brief-hero { min-width: 0; padding: .75rem .875rem; cursor: pointer; border: 1px solid var(--brand-line-2); border-radius: 12px; background: linear-gradient(160deg, #FFFFFF 0%, var(--brand-gold-tint) 260%); box-shadow: var(--brief-shadow); }
.brief-hero-label { font-size: 12px; font-weight: 600; color: var(--brand-grey); }
.brief-hero-val { margin: .125rem 0 .25rem; font-size: clamp(1.125rem, 5vw, 1.4rem); font-weight: 700; line-height: 1.2; color: var(--brand-navy); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.brief-hero:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.brief-hero-sub { font-size: 12px; line-height: 1.35; }
.brief-delta { display: inline-flex; align-items: center; gap: .125rem; font-size: 12px; font-weight: 700; color: var(--brand-navy); font-variant-numeric: tabular-nums; }
.brief-delta i { font-size: 16px; }
.brief-delta-success i { color: #2E7D32; }
.brief-delta-danger i { color: #C62828; }
.brief-delta-muted i { color: var(--brand-grey); }
.brief-hero-x { margin-top: .375rem; padding-top: .375rem; border-top: 1px dashed var(--brand-line); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.brief-hero-x span { color: var(--brand-grey); font-weight: 600; }
.brief-hero-x[hidden] { display: none; }

.brief-card { margin-bottom: 1rem; padding: .875rem 1rem; border: 1px solid var(--brand-line-2); border-radius: 12px; background: var(--brief-card); box-shadow: var(--brief-shadow); }
.brief-card-title { margin: 0 0 .625rem; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-navy); }
.brief-card p { margin: 0 0 .375rem; font-size: 13px; line-height: 1.5; }
.brief-note { font-size: 12px; color: var(--brand-grey); }
.brief-attn { list-style: none; margin: 0; padding: 0; }
.brief-attn li + li { border-top: 1px solid var(--brand-line-3); }
.brief-attn-row { display: flex; align-items: flex-start; gap: .5rem; min-height: 44px; padding: .5rem 0; color: inherit; text-decoration: none; }
a.brief-attn-row:hover .brief-attn-body .status { text-decoration: underline; }
.brief-attn-body { flex: 1 1 auto; min-width: 0; }
.brief-attn-body .status { white-space: normal; align-items: flex-start; font-weight: 600; font-size: .875rem; color: var(--brand-navy); }
.brief-attn-body .status::before { margin-top: .4rem; }
.brief-attn-do { display: block; margin: .125rem 0 0 1.125rem; font-size: 12px; color: var(--brand-grey); }
.brief-attn-chev { flex: 0 0 auto; align-self: center; font-size: 20px; color: var(--brand-grey); }
.brief-strip { margin-top: .625rem; padding-top: .5rem; border-top: 1px dashed var(--brand-line); }
.brief-strip .status { display: flex; white-space: normal; align-items: flex-start; font-size: 12px; margin-bottom: .25rem; color: var(--brand-navy); }
.brief-strip .status::before { margin-top: .35rem; }

.brief-row { margin-bottom: .625rem; }
.brief-row:last-child { margin-bottom: 0; }
.brief-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.brief-row-name { min-width: 0; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.brief-row-amt { flex: 0 0 auto; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.brief-dot { display: inline-block; width: 10px; height: 10px; margin-right: .4rem; border-radius: 50%; background: var(--brand-navy); }
.brief-dot-2 { background: var(--brand-gold); }
.brief-track { height: 8px; margin-top: .25rem; border-radius: 99px; background: var(--brand-track); overflow: hidden; }
.brief-fill { display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: linear-gradient(90deg, var(--brand-navy), var(--brief-navy-2)); transform-origin: left center; }
.brief-fill-2 { background: linear-gradient(90deg, var(--brand-gold-dark), var(--brand-gold)); }
.brief-fill-soft { background: linear-gradient(90deg, #8A96A3, #C9DDF2); }
.brief-ramp-0 { background: linear-gradient(90deg, #00315E, #2F7FD0); }
.brief-ramp-1 { background: linear-gradient(90deg, #0B6E99, #3BB0D6); }
.brief-ramp-2 { background: linear-gradient(90deg, #3D5A80, #8FA9C9); }
.brief-ramp-3 { background: linear-gradient(90deg, #0F766E, #34B3A0); }
.brief-ramp-4 { background: linear-gradient(90deg, #BE8D1F, #F2B901); }
.brief-ramp-5 { background: linear-gradient(90deg, #6B5B95, #A99BD1); }
.brief-fu-amt { align-self: center; }
.brief-calm { margin: 0; }
.brief-calm .status { white-space: normal; align-items: flex-start; font-size: 13px; font-weight: 600; color: var(--brand-navy); }
.brief-calm .status::before { margin-top: .4rem; }
.brief-fill-neg { background: linear-gradient(90deg, var(--bs-danger), #ff7a7a); }
.brief-has-chart .brief-track { display: none; }
.brief-chart:empty { display: none; }
.brief-pair-meta { margin: .125rem 0 .5rem; font-size: 12px; }
.brief-pair-meta .status { white-space: normal; align-items: flex-start; font-size: 12px; font-weight: 600; color: var(--brand-navy); }
.brief-pair-meta .status::before { margin-top: .35rem; }
.brief-pair-k { font-size: 12px; font-weight: 600; color: var(--brand-grey); }

.brief-od { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .875rem; }
.brief-od-col { min-width: 0; padding: .625rem .75rem; border: 1px solid var(--brand-line-3); border-radius: 10px; background: var(--brand-ivory); }
.brief-od-h { margin: 0 0 .125rem; font-size: 12px; font-weight: 700; color: var(--brand-grey); }
.brief-od-t { margin: 0; font-size: 1.0625rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.brief-od-n { margin: 0 0 .5rem; font-size: 12px; color: var(--brand-grey); }
.brief-od-note { display: flex; gap: .375rem; align-items: flex-start; margin-top: .75rem; font-size: 12px; color: var(--brand-grey); }
.brief-od-note i { font-size: 16px; color: var(--brand-navy); }
.brief-tile-amt { margin: 0; font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.brief-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .5rem; }
.brief-chips-k { flex: 1 1 100%; font-size: 12px; font-weight: 600; color: var(--brand-grey); }
.brief-pill { display: inline-flex; align-items: center; max-width: 100%; padding: .1875rem .625rem; border: 1px solid var(--brand-line-2); border-radius: 99px; font-size: 12px; background: var(--brand-ivory); }
.brief-pill .status { white-space: normal; font-size: 12px; font-weight: 600; color: var(--brand-navy); }

.brief-ai { margin-bottom: 1rem; padding: .875rem 1rem; border: 1px dashed var(--brand-next-border); border-radius: 12px; background: linear-gradient(160deg, var(--brand-gold-tint) 0%, var(--brand-ivory) 100%); }
.brief-ai-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.brief-ai-ico { font-size: 20px; color: var(--brand-gold-dark); }
.brief-ai-title { margin: 0; flex: 1 1 auto; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-navy); }
.brief-ai-tag { padding: .125rem .5rem; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; background: var(--brand-navy); }
.brief-ai-line { margin: 0 0 .5rem; font-size: 14px; font-weight: 600; line-height: 1.45; }
.brief-ai p { margin: 0 0 .375rem; font-size: 13px; line-height: 1.5; }
.brief-ai-item { margin-bottom: .625rem; padding-left: .625rem; border-left: 3px solid var(--brand-gold); }
.brief-ai .status { white-space: normal; align-items: flex-start; font-weight: 600; color: var(--brand-navy); }
.brief-ai .status::before { margin-top: .4rem; }
.brief-fb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--brand-line); }
.brief-fb-ask { flex: 1 1 100%; font-size: 12px; color: var(--brand-grey); }
.brief-fb .btn, .brief-fb-form .btn { min-height: 40px; }
.brief-fb-form { flex: 1 1 100%; }
.brief-fb-form .form-check { min-height: 40px; display: flex; align-items: center; gap: .5rem; }
.brief-reason { margin: 0 0 1rem; font-size: 12px; color: var(--brand-grey); }
.brief-foot { display: flex; align-items: center; gap: .375rem; padding-top: .5rem; font-size: 12px; color: var(--brand-grey); font-variant-numeric: tabular-nums; }
.brief-empty { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 2.5rem 1rem; text-align: center; color: var(--brand-grey); }
.brief-empty i { font-size: 48px; color: var(--brand-gold-dark); }
.brief-empty strong { color: var(--brand-navy); font-size: 1rem; }
.brief-off { padding: 1rem 0; }

.brief-skel { display: block; border-radius: 10px; background: linear-gradient(90deg, var(--brand-track) 25%, #FBF9EA 50%, var(--brand-track) 75%); background-size: 200% 100%; }
.brief-skel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-bottom: 1rem; }
.brief-skel-tile { height: 84px; }
.brief-skel-line { height: 14px; margin-bottom: .625rem; }
.brief-skel-card { height: 120px; margin-bottom: 1rem; }
.brief-wait { margin: 0; font-size: 12px; color: var(--brand-grey); }
.brief-wait-n { font-weight: 700; color: var(--brand-navy); font-variant-numeric: tabular-nums; }

@keyframes brief-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes brief-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes brief-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
    .brief-skel { animation: brief-shimmer 1.6s linear infinite; }
    .brief-root:not(.brief-still) .brief-fill { animation: brief-grow .8s cubic-bezier(.2, .7, .2, 1) both; }
    .brief-root:not(.brief-still) .brief-hero, .brief-root:not(.brief-still) .brief-card, .brief-root:not(.brief-still) .brief-ai { animation: brief-rise .45s ease-out both; }
}
@media (prefers-reduced-motion: reduce) {
    .brief-skel, .brief-fill, .brief-hero, .brief-card, .brief-ai { animation: none; }
    .brief-sec-chev, .brief-iconbtn { transition: none; }
}

/* AGR-UX-1 (docs/31): the agreement entry summary card sticks to the bottom edge on a phone only. It sits above the Save row in the page flow, so it never covers Save. */
@media (max-width: 767.98px) {
  .entry-compact .agr-summary { position: sticky; bottom: 0; z-index: 1020; }
}

/* DEMO-D7a / D8 / D8b (docs/23 sections 19, 19.2, 19.3): the AI Showcase on the demo site: prepared sample answers, live figures, no model call.
   D8 R3 + D8b S7 (Imran, 2026-11-06): the page wears the brand tokens above (navy, ivory, gold, dark gold), Host Grotesk for Latin, Noto Sans
   Bengali for Bangla. Showcase only: gradients, soft shadows and motion allowed here, every animation and transition inside the
   prefers-reduced-motion: no-preference block at the end. Gold is a fill or an accent, never text on a light surface and never a status colour;
   text is navy, or ivory on navy. Status stays red / amber / green with a word (.status). A bar never carries meaning alone: its amount is written. */
.showcase-root { font-family: 'Host Grotesk', 'Noto Sans Bengali', 'Inter', sans-serif; color: var(--brand-navy); }
.showcase-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 1rem; padding: 1.25rem 1.5rem; margin-bottom: 1rem; border-radius: 16px; border-bottom: 4px solid var(--brand-gold);
    background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-grey) 100%); color: var(--brand-ivory);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-navy) 24%, transparent); isolation: isolate; }
.showcase-hero::before { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
    background: radial-gradient(40% 40% at 25% 35%, color-mix(in srgb, var(--brand-gold) 34%, transparent), transparent 70%),
                radial-gradient(35% 35% at 75% 60%, color-mix(in srgb, var(--brand-ivory) 18%, transparent), transparent 70%); }
.showcase-hero h4 { color: var(--brand-ivory); font-weight: 700; }
.showcase-hero p { color: var(--brand-ivory); }
.showcase-hero-text { flex: 1 1 14rem; min-width: 0; }
.showcase-logo { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; }
.showcase-tile { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 22px; color: var(--brand-navy);
    background: linear-gradient(135deg, var(--brand-gold), var(--brand-gold-dark)); box-shadow: 0 4px 12px color-mix(in srgb, var(--brand-navy) 35%, transparent); }
.showcase-spark { position: absolute; color: var(--brand-gold); font-size: 18px; pointer-events: none; opacity: .85; }
.showcase-spark-1 { top: 14px; inset-inline-end: 22px; }
.showcase-spark-2 { bottom: 16px; inset-inline-end: 64px; font-size: 12px; }
.showcase-tag { display: inline-block; padding: .125rem .625rem; border-radius: 99px; border: 1px solid var(--brand-gold-dark); background: var(--brand-gold-tint); color: var(--brand-navy);
    font-size: .75rem; font-weight: 700; line-height: 1.5; letter-spacing: .02em; }
.showcase-tag-hero { background: var(--brand-gold); border-color: var(--brand-gold); }
/* D9a T1 (DM-18): the gold tile and the logo are ONE row at every width, never stacked; the tag sits at the far end and only it may wrap. */
.showcase-marks { flex: 1 1 100%; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 1rem; min-width: 0; }
.showcase-marks .showcase-tag { margin-inline-start: auto; min-width: 0; text-align: center; }
.showcase-trust { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.showcase-trust li { display: inline-flex; align-items: center; gap: .375rem; padding: .25rem .75rem; border-radius: 99px; font-size: .8125rem; font-weight: 600;
    color: var(--brand-ivory); background: color-mix(in srgb, var(--brand-navy) 55%, transparent); border: 1px solid color-mix(in srgb, var(--brand-ivory) 28%, transparent); }
.showcase-brief { margin-bottom: 1rem; padding: 1rem; border-radius: 16px; background: var(--brand-ivory); border: 1px solid var(--brand-line); border-top: 4px solid var(--brand-gold);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-navy) 10%, transparent); }
.showcase-brief-head { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; margin-bottom: .75rem; color: var(--brand-navy); }
.showcase-brief-head .showcase-tag { margin-inline-start: auto; }
.showcase-brief-nums { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: .75rem; }
.showcase-brief-num { min-width: 0; padding: .625rem .875rem; border-radius: 12px; background: var(--brand-gold-tint); border: 1px solid var(--brand-next-border); }
.showcase-brief-fig { font-size: 1.5rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--brand-navy); }
.showcase-brief-lab { font-size: .8125rem; font-weight: 600; color: var(--brand-grey); }
.showcase-brief-sub, .showcase-sub-title { font-size: .8125rem; font-weight: 700; letter-spacing: .02em; color: var(--brand-grey); margin-bottom: .375rem; }
.showcase-brief-needs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.showcase-brief-needs li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; color: var(--brand-navy); }
.showcase-card { position: relative; background: var(--brand-ivory); color: var(--brand-navy); border: 1px solid var(--brand-line); border-inline-start: 4px solid var(--bs-secondary); border-radius: 16px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-navy) 10%, transparent); }
.showcase-card.is-danger  { border-inline-start-color: var(--bs-danger); }
.showcase-card.is-warning { border-inline-start-color: var(--bs-warning); }
.showcase-card.is-success { border-inline-start-color: var(--bs-success); }
.showcase-card-top { margin-bottom: .5rem; }
.showcase-q { display: flex; align-items: flex-start; gap: .5rem; font-size: 1rem; font-weight: 600; line-height: 1.35; margin-bottom: .75rem; padding: .625rem .875rem; border-radius: 14px 14px 14px 4px;
    color: var(--brand-ivory); background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-grey) 100%); }
.showcase-q i { flex: 0 0 auto; margin-top: .125rem; color: var(--brand-gold); }
.showcase-q span { min-width: 0; overflow-wrap: anywhere; }
.showcase-think { display: none; }
.showcase-big { font-size: 1.75rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; color: var(--brand-navy); overflow-wrap: anywhere; margin-bottom: .25rem; }
.showcase-card .status { color: var(--brand-navy); font-weight: 600; }
.showcase-lead { font-weight: 600; color: var(--brand-navy); }
.showcase-chips { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .75rem; }
.showcase-rows { list-style: none; margin: 0 0 .75rem; padding: 0; display: grid; gap: .5rem; }
.showcase-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .75rem; row-gap: .25rem; align-items: baseline; }
.showcase-row-label { grid-column: 1; min-width: 0; overflow-wrap: anywhere; color: var(--brand-navy); }
.showcase-row-amt { grid-column: 2; grid-row: 1; font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; color: var(--brand-navy); }
.showcase-bar { grid-column: 1 / -1; grid-row: 2; display: block; height: 8px; border-radius: 99px; background: var(--brand-track); overflow: hidden; }
.showcase-bar::after { content: ""; display: block; height: 100%; width: var(--w, 0%); border-radius: 99px; background: linear-gradient(90deg, var(--brand-navy), var(--brand-grey)); transform-origin: left center; }
.showcase-acts { margin: 0 0 .75rem; padding-inline-start: 1.25rem; color: var(--brand-navy); }
.showcase-acts li { margin-bottom: .25rem; }
.showcase-sub-title i { margin-inline-end: .375rem; color: var(--brand-navy); }
.showcase-why { margin-bottom: .75rem; padding: .5rem .75rem; border-radius: 12px; background: var(--brand-gold-tint); border: 1px solid var(--brand-next-border); }
.showcase-why summary { cursor: pointer; font-weight: 700; color: var(--brand-navy); min-height: 24px; }
.showcase-why summary i { margin-inline-end: .375rem; color: var(--brand-navy); }
.showcase-why p { margin: .5rem 0; color: var(--brand-grey); }
.showcase-evidence { display: flex; flex-direction: column; gap: .125rem; margin-bottom: 1rem; padding-top: .75rem; border-top: 1px solid var(--brand-line); font-size: .8125rem; color: var(--brand-grey); overflow-wrap: anywhere; }
.showcase-ev-label { font-weight: 700; color: var(--brand-navy); }
.showcase-ev-exact { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--brand-navy); }
.showcase-see { background: var(--brand-navy); color: var(--brand-ivory); border: 2px solid var(--brand-navy); border-radius: 8px; font-weight: 600; }
.showcase-see:hover, .showcase-see:focus-visible { background: var(--brand-gold); color: var(--brand-navy); border-color: var(--brand-gold); }
.showcase-see:focus-visible { outline: 2px solid var(--brand-navy); outline-offset: 2px; }
.showcase-band { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; padding: 1.25rem 1.5rem; border-radius: 16px; border-bottom: 4px solid var(--brand-gold);
    color: var(--brand-ivory); background: linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-grey) 100%); box-shadow: 0 10px 28px color-mix(in srgb, var(--brand-navy) 24%, transparent); }
.showcase-band > div { flex: 1 1 14rem; min-width: 0; }
.showcase-band h5, .showcase-band p { color: var(--brand-ivory); }
.showcase-contact { background: var(--brand-gold); color: var(--brand-navy); border: 2px solid var(--brand-gold); border-radius: 8px; font-weight: 700; }
.showcase-contact:hover, .showcase-contact:focus-visible { background: var(--brand-ivory); color: var(--brand-navy); border-color: var(--brand-ivory); }
.showcase-contact:focus-visible { outline: 2px solid var(--brand-ivory); outline-offset: 2px; }
@media (min-width: 768px) { .showcase-big { font-size: 2rem; } .showcase-brief-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .showcase-hero { padding: 1rem; } .showcase-logo { width: 44px; height: 44px; } }
/* Motion: nothing below runs with reduced motion; without script no state class is added, so every card shows its final content at once. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes showcase-aurora { from { transform: translate3d(-3%, -2%, 0) rotate(0deg); } to { transform: translate3d(3%, 2%, 0) rotate(8deg); } }
    @keyframes showcase-twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
    @keyframes showcase-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
    @keyframes showcase-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
    .showcase-hero::before { animation: showcase-aurora 18s ease-in-out infinite alternate; }
    .showcase-spark { animation: showcase-twinkle 2.6s ease-in-out infinite; }
    .showcase-spark-2 { animation-delay: 1.1s; }
    .showcase-root.js-motion .showcase-card { opacity: 0; transform: translateY(12px); transition: opacity .5s ease-out, transform .5s ease-out, box-shadow .25s ease-out; }
    .showcase-root.js-motion .showcase-card.is-in { opacity: 1; transform: none; }
    .showcase-card.is-thinking .showcase-answer { display: none !important; }
    .showcase-card.is-thinking .showcase-think { display: grid; gap: .5rem; margin-bottom: 1rem; }
    .showcase-think i { display: block; height: 14px; border-radius: 99px; background: linear-gradient(90deg, var(--brand-track) 25%, var(--brand-gold-tint) 50%, var(--brand-track) 75%); background-size: 200% 100%;
        animation: showcase-shimmer 1.2s linear infinite; }
    .showcase-think i:nth-child(1) { width: 55%; height: 28px; }
    .showcase-think i:nth-child(2) { width: 90%; }
    .showcase-think i:nth-child(3) { width: 70%; }
    .showcase-card.is-done .showcase-bar::after { animation: showcase-grow .7s ease-out both; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
    .showcase-root .showcase-card:hover, .showcase-root.js-motion .showcase-card.is-in:hover { transform: translateY(-4px); box-shadow: 0 14px 30px color-mix(in srgb, var(--brand-navy) 18%, transparent); }
}