:root {
    --accent: #2563eb;
    --border: #e3e3e3;
    --muted: #6b7280;
    --bg: #f7f7f8;
}

* { box-sizing: border-box; }

/* Cashflow pivot: compact cells, fixed layout so the month columns align */
table.cashflow { font-size: .8rem; white-space: nowrap; table-layout: fixed;
    border-collapse: separate; border-spacing: 0; }
table.cashflow th, table.cashflow td {
    height: 30px; padding: .2rem .5rem; line-height: 20px;
    border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
}
/* Clip overflow on BODY cells only — overflow on a sticky <th> breaks position:sticky. */
table.cashflow td { overflow: hidden; text-overflow: ellipsis; }
/* The merged cashflow table scrolls with the whole PAGE (no inner scroll box), and its
   header rows + label columns are sticky relative to the viewport — the most reliable freeze. */
.cf-scroll { overflow: visible; border: 1px solid var(--border); }
/* Multi-row sticky header: Cashflow Total + IN + OUT + month header, each row 31px tall.
   The base .grid sets overflow:hidden (rounded corners), which silently disables sticky for
   every cell inside — the table must stay overflow:visible for the freeze to work. */
table.cashflow.merged { overflow: visible; border-radius: 0; }
table.cashflow.merged thead th { position: sticky; background: #fff; z-index: 2; }
table.cashflow.merged thead tr:nth-child(1) th { top: 0; }
table.cashflow.merged thead tr:nth-child(2) th { top: 30px; }
table.cashflow.merged thead tr:nth-child(3) th { top: 60px; }
table.cashflow.merged thead tr:nth-child(4) th { top: 90px; font-style: italic; }
/* Sticky-left label columns so they stay while scrolling sideways. */
table.cashflow.merged tbody td:nth-child(1) { position: sticky; left: 0; background: #fff; z-index: 1; }
table.cashflow.merged tbody td:nth-child(2) { position: sticky; left: 260px; background: #fff; z-index: 1; }
table.cashflow.merged thead th:nth-child(1) { left: 0; z-index: 4; }
table.cashflow.merged thead th:nth-child(2) { left: 260px; z-index: 4; }

/* Scroll box whose .grid header stays frozen (border-collapse must be separate for sticky to work). */
.scroll-head { max-height: 60vh; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.scroll-head .grid { border: none; border-radius: 0; overflow: visible; border-collapse: separate; border-spacing: 0; }
.scroll-head .grid thead th { position: sticky; top: 0; z-index: 2; background: #fafafa; }
/* Keep rows on one line (no awkward 3-line wrapping); long text ellipsises, box scrolls sideways. */
.scroll-head .grid th, .scroll-head .grid td { white-space: nowrap; }
.scroll-head .grid td { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }

/* Top-nav dropdown (groups reference pages under Settings) */
.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-label { cursor: default; color: #374151; padding: .25rem 0; }
.nav-dropdown:hover .nav-dropdown-label { color: var(--accent); }
.nav-dropdown-menu {
    display: none; position: absolute; left: 0; top: 100%; min-width: 11rem;
    background: #fff; border: 1px solid var(--border); border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0,0,0,.1); padding: .35rem 0; z-index: 50;
}
.nav-dropdown:hover .nav-dropdown-menu { display: block; }
.nav-dropdown.right .nav-dropdown-menu { left: auto; right: 0; }
.nav-dropdown-menu a { display: block; padding: .4rem 1rem; color: #1f2330; }
.nav-dropdown-menu a:hover { background: #f0f4ff; color: var(--accent); text-decoration: none; }
.nav-dropdown-menu a.active { color: var(--accent); font-weight: 600; }

/* Process-flow bar (Offer -> Client PO -> RFQ -> Supplier PO -> Finance) */
.process-flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; margin: .45rem 0 .55rem; }
.flow-step {
    display: inline-flex; flex-direction: column; gap: .1rem; justify-content: center;
    padding: .45rem 1rem; min-width: 7.5rem; border: 1px solid var(--border);
    background: #fff; color: #1f2330; text-decoration: none; position: relative;
}
.flow-step:not(:first-child) { border-left: none; }
.flow-step:hover { background: #f0f4ff; text-decoration: none; }
.flow-step .fs-label { font-weight: 600; font-size: .9rem; }
.flow-step .fs-sub { font-size: .72rem; color: var(--muted); }
.flow-step.current { background: var(--accent); color: #fff; }
.flow-step.current .fs-sub { color: #dbe6ff; }
.flow-step::after {
    content: ""; position: absolute; right: -10px; top: 50%; transform: translateY(-50%);
    border-top: 10px solid transparent; border-bottom: 10px solid transparent;
    border-left: 10px solid var(--border); z-index: 1;
}
.flow-step::before {
    content: ""; position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
    border-top: 9px solid transparent; border-bottom: 9px solid transparent;
    border-left: 9px solid #fff; z-index: 2;
}
.flow-step.current::before { border-left-color: var(--accent); }
.flow-step:last-child::after, .flow-step:last-child::before { display: none; }

/* Derived lifecycle state on each step (read-only; see ProjectLifecycleService). */
.flow-step.st-pending:not(.current) { opacity: .5; }
/* Every step reserves a constant-width marker slot, so the ✓ / – glyphs appearing (after the
   async lifecycle load, or when the current tab changes) swap INSIDE the fixed box and never
   reflow the strip — this is what stops the tab bar jittering on navigation. */
.flow-step .fs-label::before {
    content: ""; display: inline-block; width: 1.05em; margin-right: .15rem; text-align: center;
    font-weight: 700;
}
.flow-step.st-done .fs-label::before { content: "✓"; color: #2e7d32; }
.flow-step.st-skipped .fs-label::before { content: "–"; color: #b07d2b; }
.flow-step.st-active:not(.current) .fs-label { color: var(--accent); }
.flow-step.current .fs-label::before { color: #fff; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #1f2330;
    background: var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.page { min-height: 100vh; display: flex; flex-direction: column; }

/* Dark top bar (deep slate-navy, same blue undertone as the accent): anchors the page and
   gives the chrome clear contrast against the light content. Blossom/sakura and dark mode
   re-skin it in their own theme blocks below. */
.topbar {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0 1.5rem;
    height: 56px;
    background: #1c2434;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.brand { font-weight: 700; font-size: 1.1rem; color: #fff; }
.brand:hover { text-decoration: none; }
.nav-links { display: flex; gap: 1rem; align-items: center; }
.nav-links a { color: #b6c2d4; padding: .25rem 0; }
.nav-links a:hover { color: #fff; text-decoration: none; }
.nav-links a.active { color: #fff; font-weight: 600; text-decoration: underline 2px var(--accent); text-underline-offset: 7px; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.user { color: var(--muted); font-size: .9rem; }
.link-muted { color: var(--muted); font-size: .9rem; }
/* Chrome that sits ON the dark bar re-inks for it (the .user/.link-muted defaults above
   also serve page content, so they keep the muted gray and get scoped overrides here). */
.topbar .user { color: #9fb0c7; }
.topbar .link-muted { color: #9fb0c7; }
.topbar .link-muted:hover { color: #fff; }
.topbar .theme-toggle { color: #b6c2d4; }
.topbar .theme-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.topbar .nav-dropdown-label { color: #b6c2d4; }
.topbar .nav-dropdown:hover .nav-dropdown-label { color: #fff; }

.content { padding: 1.25rem 2rem 1rem; flex: 1; max-width: 1500px; width: 100%; margin: 0 auto; }

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
.lead { color: var(--muted); margin-top: 0; }
.muted { color: var(--muted); }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.card {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
    color: inherit;
}
.card:hover { border-color: var(--accent); text-decoration: none; }
.card h3 { margin: 0 0 .4rem; }
.card p { margin: 0; color: var(--muted); font-size: .9rem; }

/* Line-item pipeline: one color per stage — used by BOTH the legend chips and the Current-stage
   badges, so the legend doubles as the color key. Self-contained pills (light tint + own dark ink)
   that read fine on light and dark themes. */
.pstatus-badge.stg-0 { background: #e2e8f0; color: #334155; } /* RFQ sent */
.pstatus-badge.stg-1 { background: #ede9fe; color: #6d28d9; } /* Quotation */
.pstatus-badge.stg-2 { background: #fef3c7; color: #b45309; } /* Client PO — the commitment gate */
.pstatus-badge.stg-3 { background: #dbeafe; color: #1d4ed8; } /* Supplier PO */
.pstatus-badge.stg-4 { background: #ccfbf1; color: #0f766e; } /* Supplier invoice */
.pstatus-badge.stg-5 { background: #e0e7ff; color: #4338ca; } /* Order tracking */
.pstatus-badge.stg-6 { background: #fce7f3; color: #be185d; } /* Material release */
.pstatus-badge.stg-7 { background: #dcfce7; color: #15803d; } /* Delivery note */

/* Line-item pipeline: workflow legend chip — same structure as the KPI chips (content on top,
   grey label underneath), so the row reads as one family. */
.ip-legend { flex: 1 1 22rem; align-items: center; justify-content: center; text-align: center; }
.ip-legend .ichip-flow { font-size: .86rem; font-weight: 600; color: var(--text, #1f2330); white-space: normal; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem; }

/* Line-item pipeline grid: cap the text columns (Item / Project / Supplier) so the stage-date
   columns stay on screen; long values ellipsise with the full text on hover via title. */
.ip-grid td:nth-child(2), .ip-grid td:nth-child(3), .ip-grid td:nth-child(4) {
    max-width: 14rem; overflow: hidden; text-overflow: ellipsis;
}
.ip-grid td:nth-child(4) { max-width: 11rem; }

/* Toolbars wrap BETWEEN controls, never inside them: buttons/labels keep one line and full size. */
.toolbar { display: flex; align-items: center; gap: .5rem .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.toolbar label { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; flex-shrink: 0; }
.toolbar .btn { flex-shrink: 0; }
/* Inline monochrome SVG icons in buttons/actions: align to the text baseline. */
.link-muted svg, .rowactions svg { vertical-align: -2px; }
.search { flex: 1; max-width: 420px; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: 6px; }
.check { display: flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .9rem; }
/* Form controls inherit the app font (native controls otherwise use the OS default). */
button, input, select, textarea { font-family: inherit; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem 1rem; background: var(--accent); color: #fff; border: none; border-radius: 6px; cursor: pointer; font: inherit; line-height: 1.2; white-space: nowrap; }
.btn:hover { filter: brightness(.95); }
.btn:disabled { opacity: .55; cursor: default; filter: none; }

.grid { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.grid th, .grid td { text-align: left; padding: .6rem .9rem; border-bottom: 1px solid var(--border); font-size: .9rem; }
.grid th { background: #fafafa; color: #374151; font-weight: 600; }
.grid tbody tr:last-child td { border-bottom: none; }
.grid tbody tr:hover { background: #f9fafb; }
.grid th.num, .grid td.num { text-align: right; font-variant-numeric: tabular-nums; }

.detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-top: 0; }
.pdetail-page > a.link-muted { display: inline-block; margin: .25rem 0 .35rem; }
.detail-head h1 { margin: 0 0 .2rem; font-size: 1.7rem; }
.detail-head .lead { margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.proj-code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .9rem; color: #6b7280; letter-spacing: .01em; }
.proj-client { background: #eef2ff; color: #3730a3; font-weight: 600; font-size: .82rem; padding: .12rem .5rem; border-radius: 999px; }
.pdetail-page > .link-muted, .pdetail-page .detail-head { flex: 0 0 auto; }
.meta { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: .75rem 0 1.5rem; color: #374151; font-size: .9rem; }
.meta .k { color: var(--muted); margin-right: .35rem; }
h2 { font-size: 1.15rem; margin: 1.5rem 0 .6rem; }

/* Two-column detail: tall list on the left, collapsible panels on the right */
/* Fill to near the viewport bottom: topbar 57px + content padding (top 20px / bottom 16px) ≈ 93px;
   the small extra keeps the page itself from ever developing a scrollbar. */
.pdetail-page { position: relative; display: flex; flex-direction: column; height: calc(100vh - 100px); min-height: 360px; overflow: hidden; }
.pdetail-page .detail-head { flex: 0 0 auto; }
/* Reserve room on the right for the detail panel, which is pinned to the top-right. */
.pd-body { flex: 1 1 auto; min-height: 0; display: flex; gap: 1rem; padding-right: 336px; }
.pd-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.pd-side { position: absolute; top: 0; right: 0; bottom: 0; width: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; }

/* Stacked layout: panel drops below the item list (forced "below", or auto on narrow). */
[data-panel="below"] .pdetail-page { height: auto; overflow: visible; }
[data-panel="below"] .pd-body { flex-direction: column; padding-right: 0; }
[data-panel="below"] .pd-side { position: static; width: auto; inset: auto; margin-top: 1rem; }
@media (max-width: 1200px) {
    html:not([data-panel="side"]) .pdetail-page { height: auto; overflow: visible; }
    html:not([data-panel="side"]) .pd-body { flex-direction: column; padding-right: 0; }
    html:not([data-panel="side"]) .pd-side { position: static; width: auto; inset: auto; margin-top: 1rem; }
}
.pdetail-page .tabs { flex: 0 0 auto; margin-bottom: .5rem; }
.pdetail-page .tabs .tab { padding-top: .35rem; padding-bottom: .35rem; }
.pd-main .items-head { flex: 0 0 auto; }
.items-scroll { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 8px; outline: none; }
.tab-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
.tab-body.vbody { display: flex; flex-direction: column; overflow: hidden; }
/* Delivery Note phase page (standalone, page scrolls). */
.dn-panel { margin-top: .5rem; }
.dn-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }
.dn-scroll { overflow-x: auto; }

/* Delivery note generator modal */
.dn-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem 1rem; margin: .5rem 0; }
.dn-form label, .dn-desc { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--muted); }
.dn-form input, .dn-desc textarea { font: inherit; }
.dn-desc { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.dn-items-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .4rem 0; }
.dn-items-actions { margin-left: auto; display: inline-flex; gap: .4rem; }
.dn-items th.num, .dn-items td.num { text-align: right; }
.dn-items .dn-qty { width: 5rem; text-align: right; font: inherit; }
.dn-items .dn-thumb { width: 48px; }
.dn-items .dn-thumb img { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; background: #fff; }
.dn-search { font: inherit; padding: .25rem .5rem; border: 1px solid var(--border); border-radius: 6px; min-width: 12rem; }
.dn-items .dn-kind, .dn-coverage-table .dn-kind { font-size: .7rem; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 .25rem; margin-left: .35rem; }
.dn-items tr.dn-done td, .dn-coverage-table tr.dn-done td { color: var(--muted); }

/* Delivery coverage (per-item delivered vs ordered on the project surface) + completion banner */
.dn-complete { margin: .6rem 0; border: 1px solid #bfe3c8; background: #e6f4ea; color: #1a7a3a; border-radius: 8px; padding: .5rem .75rem; font-weight: 600; }
.dn-coverage { margin: .6rem 0; border: 1px solid var(--border); border-radius: 8px; padding: .4rem .7rem; }
.dn-coverage summary { cursor: pointer; font-weight: 600; }
.dn-coverage-table { margin-top: .5rem; }
.dn-coverage-table th.num, .dn-coverage-table td.num { text-align: right; }
/* Non-blocking over-delivery warning in the generator (amber — the red style is the blocking MR gate) */
.dn-warn { color: #b45309; font-weight: 600; }

/* Delivery note PDF preview */
.dn-preview { width: 92vw; height: 92vh; background: #fff; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.dn-preview-bar { display: flex; justify-content: space-between; align-items: center; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.dn-preview iframe { flex: 1; width: 100%; border: 0; }

/* Delivery note email log */
.dn-email { border: 1px solid var(--border); border-radius: 8px; padding: .5rem .6rem; margin-bottom: .5rem; }
.dn-email-head { display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; font-size: .85rem; }
.dn-email-dir { font-weight: 700; }
.dn-email.in .dn-email-dir { color: var(--accent); }
.dn-email-date { margin-left: auto; }
.dn-email-subj { font-weight: 600; margin: .25rem 0; }
.dn-email-body { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .82rem; background: rgba(127,127,127,.08); border-radius: 6px; padding: .4rem .5rem; margin: .25rem 0; max-height: 200px; overflow: auto; }
.dn-email-att { display: flex; align-items: center; gap: .5rem; font-size: .82rem; margin-top: .25rem; }

/* Material Release (pre-shipping QC) */
.mr-mfrs { margin: .6rem 0; border: 1px solid var(--border); border-radius: 8px; padding: .4rem .7rem; }
.mr-mfrs summary { cursor: pointer; font-weight: 600; }
.mr-mfr-table { margin-top: .5rem; }
.mr-mfr-table th.num, .mr-mfr-table td.num { text-align: right; }
.mr-summary { margin: .6rem 0; font-size: .95rem; }
.mr-summary .mr-fail { color: #b00020; font-weight: 600; }
.mr-summary .mr-cleared { color: #1a7a3a; font-weight: 600; }
.mr-scroll { overflow-x: auto; }
.mr-items th.num, .mr-items td.num { text-align: right; }
.mr-items .mr-thumb { width: 48px; }
.mr-items .mr-thumb img { width: 40px; height: 40px; object-fit: contain; border-radius: 4px; background: #fff; }
.mr-verifier { font-size: .72rem; }
.mr-reason { font-size: .75rem; color: #b00020; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-qc-choice { display: flex; gap: 1.25rem; margin: .5rem 0; }
.mr-qc-choice label { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.pstatus-badge.ps-failed { background: #fde8e8; color: #b00020; }

/* Tabs */
.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: .75rem; }
.tabs .tab { background: none; border: none; padding: .5rem .9rem; cursor: pointer; color: var(--muted); font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs .tab:hover { color: #1f2330; }
.tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.items-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; min-height: 34px; }
.items-head .hint { margin-left: auto; font-size: .8rem; }
.items-head .filter-field { padding: .25rem .4rem; border: 1px solid var(--border); border-radius: 4px; font-size: .82rem; }
.items-head .filter-text { padding: .3rem .5rem; border: 1px solid var(--border); border-radius: 4px; font-size: .82rem; width: 180px; }
/* Uniform 32px height for all items toolbar controls so they align with Grid/Cards */
.items-head .btn.sm { display: inline-flex; align-items: center; height: 32px; padding: 0 .7rem; font-size: .82rem; margin-right: 0; box-sizing: border-box; }
.items-head .filter-field, .items-head .filter-text { height: 32px; box-sizing: border-box; }
.items-head .view-toggle { height: 32px; box-sizing: border-box; }
.items-head .view-toggle button { height: 100%; }

/* Collapsible side panels */
.panel { border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.panel-head { display: flex; align-items: center; gap: .45rem; padding: .55rem .8rem; cursor: pointer; font-weight: 600; user-select: none; }
.panel-head:hover { background: #fafafa; }
.panel-head .chev { color: var(--accent); font-size: 1.05rem; line-height: 1; }
.panel-body { padding: .5rem .8rem .8rem; border-top: 1px solid var(--border); }
.panel .photo { position: relative; border: 1px solid var(--border); border-radius: 6px; display: flex; align-items: center; justify-content: center; padding: .4rem; min-height: 140px; background: #fff; }
.panel .photo .img-nav { position: absolute; bottom: .4rem; right: .4rem; background: rgba(255,255,255,.9); border: 1px solid var(--border); border-radius: 4px; color: var(--accent); font-weight: 600; cursor: pointer; padding: .15rem .5rem; font-size: .8rem; }
.panel .photo .img-nav:hover { background: #fff; }
.panel .photo .img-clean { position: absolute; top: .4rem; right: .4rem; width: 26px; height: 26px; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 4px; color: var(--accent); cursor: pointer; font-size: .85rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.panel .photo .img-clean:hover { background: #fff; border-color: var(--accent); }
.panel .photo .img-clean:disabled { opacity: .6; cursor: default; }
.panel .photo .img-undo { position: absolute; top: .4rem; right: 2.4rem; width: 26px; height: 26px; background: rgba(255,255,255,.92); border: 1px solid var(--border); border-radius: 4px; color: #b45309; cursor: pointer; font-size: .95rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.panel .photo .img-undo:hover { background: #fff; border-color: #b45309; }
.panel .photo img { max-width: 100%; max-height: 220px; object-fit: contain; }
.panel .photo .noimg { color: var(--muted); font-size: .85rem; }
.panel h3 { margin: .6rem 0 .3rem; color: var(--accent); font-size: 1rem; }
.panel .specs { margin: .2rem 0; color: #374151; font-size: .85rem; }
.panel .desc { font-size: .82rem; }
.panel .price { margin-top: .5rem; color: var(--accent); font-size: .9rem; }
.panel label { display: block; font-size: .82rem; color: #374151; margin-bottom: .45rem; }
.panel label input { display: block; width: 100%; padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 4px; margin-top: .15rem; }
.panel .ls-total { text-align: right; margin: .45rem 0; }

dl.totals { display: grid; grid-template-columns: 1fr auto; gap: .25rem .5rem; margin: 0; font-size: .85rem; }
dl.totals dt { color: var(--muted); }
dl.totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
dl.totals .hr { border-top: 1px solid var(--border); padding-top: .3rem; margin-top: .2rem; font-weight: 600; color: #1f2330; }
table.kv { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.kv th { text-align: left; color: var(--muted); font-weight: 500; padding: .25rem .5rem .25rem 0; vertical-align: top; white-space: nowrap; width: 42%; }
table.kv td { padding: .25rem 0; vertical-align: top; word-break: break-word; }
table.kv tr + tr th, table.kv tr + tr td { border-top: 1px solid #f1f1f1; }
.grid th.iname, .grid td.iname { max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
.grid tr.editing td { background: #fffdf2; }
.grid td .vedit { width: 70px; padding: .2rem .3rem; border: 1px solid var(--border); border-radius: 4px; text-align: right; }
.grid td .vedit.cur { width: 60px; text-align: left; }
.grid td.vactions { white-space: nowrap; }
.grid td.vactions .link-muted { padding: .1rem .35rem; }
/* ONE canonical small button: no baked-in margins (parents space with flex gap). */
.btn.sm { padding: .3rem .7rem; font-size: .82rem; }
.zoomable { cursor: zoom-in; }
.img-modal { position: fixed; inset: 0; background: rgba(0,0,0,.72); display: flex; align-items: center; justify-content: center; z-index: 1000; cursor: zoom-out; padding: 2rem; }
.img-modal img { max-width: 92vw; max-height: 92vh; object-fit: contain; background: #fff; border-radius: 4px; }
/* Enlarge overlay must sit above the edit modals (which also use .img-modal) */
.img-modal-top { z-index: 1200; }

/* Context menu */
.menu-overlay { position: fixed; inset: 0; z-index: 1100; background: transparent; }
.ctx-menu { position: fixed; z-index: 1101; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: .25rem; min-width: 170px; }
.ctx-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: .4rem .7rem; cursor: pointer; font-size: .88rem; border-radius: 4px; color: #1f2330; }
.ctx-menu button:hover:not(:disabled) { background: #f0f4ff; color: var(--accent); }
.ctx-menu button:disabled { color: #b0b0b0; cursor: default; }
.ctx-menu .sep { height: 1px; background: var(--border); margin: .25rem .3rem; }
/* Anchor menu items (e.g. "open the record file" — a real link so target=_blank works) match buttons. */
.ctx-menu a { display: block; padding: .4rem .7rem; font-size: .88rem; border-radius: 4px; color: #1f2330; text-decoration: none; }
.ctx-menu a:hover { background: #f0f4ff; color: var(--accent); text-decoration: none; }
[data-theme="dark"] .ctx-menu a { color: var(--text); }
.ctx-menu button.danger { color: #d92d20; }
.ctx-menu button.danger:hover:not(:disabled) { background: #fdeceb; color: #d92d20; }

/* Edit card */
.edit-card { background: #fff; border-radius: 8px; padding: 1.25rem; width: 420px; max-width: 92vw; max-height: 90vh; overflow-y: auto; cursor: default; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.edit-card h3 { margin: 0 0 .8rem; }
.edit-card label { display: block; font-size: .85rem; color: #374151; margin-bottom: .6rem; }
.edit-card label.hl input { outline: 2px solid var(--accent); }
.edit-card input, .edit-card textarea { display: block; width: 100%; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 4px; margin-top: .15rem; font-family: inherit; }
.edit-actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1rem; }

/* Add item from database */
.additem-card { background: #fff; border-radius: 8px; padding: 1.25rem; width: 760px; max-width: 95vw; max-height: 92vh; overflow-y: auto; cursor: default; box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.additem-card h3 { margin: 0 0 .8rem; }
.asearch { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.asearch input[type=text], .asearch input:not([type]) { flex: 1 1 140px; min-width: 120px; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 4px; }
.asearch .check { display: flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--muted); }
.asearch select.as-type { flex: 1 1 140px; min-width: 120px; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 4px; background: #fff; font-family: inherit; }
.aload-more { display: flex; justify-content: center; padding: .6rem 0; }
.aresults { max-height: 48vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.aresult { display: flex; gap: 1rem; padding: .7rem .8rem; border-bottom: 1px solid #f1f1f1; cursor: pointer; align-items: flex-start; }
.aresult:hover { background: #f9fafb; }
.aresult.sel { background: #fff7d6; }
.aresult .athumb { flex: 0 0 120px; width: 120px; height: 120px; border: 1px solid var(--border); border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.aresult .athumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.aresult .athumb .noimg { color: var(--muted); font-size: .75rem; }
.aresult .ainfo { min-width: 0; }
.aresult .asupp { font-size: .72rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.aresult .aname { font-size: 1rem; font-weight: 600; color: var(--accent); margin: .1rem 0 .35rem; }
.aresult .aspecs { font-size: .82rem; color: #374151; }
.aresult .aspecs div { margin-bottom: .05rem; }
.aresult .aprice { margin-top: .4rem; font-size: .9rem; color: var(--accent); }

/* Card/List view toggle for asset search */
.aview { display: flex; align-items: center; justify-content: space-between; margin: .1rem 0 .4rem; }
.aview-btns { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.aview-btns button { border: none; background: #fff; cursor: pointer; padding: .3rem .7rem; font-size: .82rem; color: #374151; border-left: 1px solid var(--border); }
.aview-btns button:first-child { border-left: none; }
.aview-btns button.on { background: var(--accent); color: #fff; }
.aview-btns button:not(.on):hover { background: #f3f4f6; }

/* Cards view: 3 compact cards per row */
.aresults-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; padding: .6rem; }
.acard { border: 1px solid var(--border); border-radius: 6px; padding: .5rem; cursor: pointer; background: #fff; display: flex; flex-direction: column; }
.acard:hover { border-color: var(--accent); }
.acard.sel { background: #fff7d6; border-color: var(--accent); }
.acard .acard-thumb { width: 100%; height: 130px; border: 1px solid var(--border); border-radius: 4px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: .4rem; }
.acard .acard-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.acard .acard-thumb .noimg { color: var(--muted); font-size: .72rem; }
.acard .acard-supp { font-size: .68rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); }
.acard .acard-name { font-size: .9rem; font-weight: 600; color: var(--accent); margin: .1rem 0 .2rem; line-height: 1.2; }
.acard .acard-type { font-size: .78rem; color: #374151; }
.acard .acard-price { margin-top: auto; padding-top: .35rem; font-size: .85rem; color: var(--accent); }

/* Reference-data pages (Variables/Rates/Clients/Suppliers/Settings) */
.grid .rowactions { white-space: nowrap; text-align: right; }
.grid .rowactions .link-muted { cursor: pointer; background: none; border: none; padding: .1rem .4rem; font-size: .95rem; }
/* Keep solid + ghost row-action buttons the same height (ghost has a 1px border). */
.grid .rowactions .btn:not(.ghost) { border: 1px solid transparent; }
.link-muted.danger { color: #d92d20; }
.grid tr.sel td { background: #ffe9a8; color: #1f2330; }
.grid tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.edit-card select { display: block; width: 100%; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 4px; margin-top: .15rem; font-family: inherit; background: #fff; }
.edit-card h4 { margin: .2rem 0 .5rem; font-size: .9rem; color: #374151; }
.form-cols { display: flex; gap: 1.25rem; }
.form-cols > div { flex: 1 1 0; min-width: 0; }
.tabbar { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.tabbar .tab { background: none; border: none; padding: .5rem .9rem; cursor: pointer; color: var(--muted); font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabbar .tab:hover { color: #1f2330; }
.tabbar .tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.settings-list { max-width: 480px; }
.settings-list tbody tr { cursor: pointer; }

/* Items: grid/cards view toggle + card grid */
.view-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.view-toggle button { border: none; background: #fff; cursor: pointer; padding: .3rem .6rem; font-size: .82rem; color: #374151; border-left: 1px solid var(--border); }
.view-toggle button:first-child { border-left: none; }
.view-toggle button.on { background: var(--accent); color: #fff; }
.view-toggle button:not(.on):hover { background: #f3f4f6; }
.card-scroll { overflow-y: auto; padding: .25rem; }
.card-grid { display: grid; grid-template-columns: repeat(var(--cards-per-row, 4), 1fr); gap: .8rem; margin-bottom: 1rem; }
@media (max-width: 1200px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
.card-group-head { font-weight: 600; color: #374151; margin: .6rem .1rem .4rem; padding-bottom: .25rem; border-bottom: 1px solid var(--border); }
.grid tr.grp-head td { background: #eef2f7; font-weight: 600; color: #374151; padding: .35rem .6rem; border-top: 2px solid var(--border); }

/* Documents tab */
.docs-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .8rem; }
.docs-head .panel-title { margin: 0; }
.docs-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.docs-layout .docs-packages { flex: 0 0 360px; }
.docs-layout .docs-files { flex: 1 1 0; min-width: 0; }

/* Template manager */
.file-btn { position: relative; overflow: hidden; display: inline-block; cursor: pointer; }
.file-btn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tmpl-images { display: flex; flex-wrap: wrap; gap: 1rem; padding: .5rem 0; }
.tmpl-img { display: flex; flex-direction: column; align-items: center; gap: .35rem; border: 1px solid var(--border); border-radius: 6px; padding: .5rem; background: #fff; }
.tmpl-img img { max-width: 170px; max-height: 120px; object-fit: contain; }
.grid tr.img-row > td { background: #f8fafc; }
.small { font-size: .78rem; }
.icard { border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; overflow: hidden; display: flex; flex-direction: column; }
.icard:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.icard.sel { border-color: var(--accent); background: #fff7d6; }
.icard-thumb { position: relative; height: 160px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--border); }
.icard.parent { border-color: #c7d2fe; }
.card-children { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; padding: .6rem; margin: -.3rem 0 .3rem; background: #f8fafc; border: 1px solid var(--border); border-radius: 8px; }
.card-children .icard-thumb { height: 95px; }
.card-children .icard-name { font-size: .82rem; }
.card-children .icard-sub { font-size: .7rem; }
.card-children .icard-price { font-size: .62rem; }
.card-children .icard-qtynum { font-size: .95rem; }
.card-children .icard-body { padding: .4rem .5rem; padding-right: 2.4rem; }
.icard-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.icard-thumb .noimg { color: var(--muted); font-size: .78rem; }
.icard-thumb .icard-flag { position: absolute; top: .35rem; right: .45rem; color: #d92d20; font-size: 1rem; }
.icard-body { padding: .5rem .6rem; position: relative; padding-right: 3rem; }
.icard-name { font-weight: 600; font-size: .9rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icard-sub { font-size: .78rem; color: #6b7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icard-price { font-size: .82rem; color: var(--accent); margin-top: .25rem; }
.icard-qtynum { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); font-size: 1.05rem; font-weight: 700; color: #111827; line-height: 1; }

/* Outer project tabs (Project / Documents / Suppliers) */
.ptabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin: .35rem 0 .5rem; flex: 0 0 auto; }
.ptabs .ptab { background: none; border: none; padding: .45rem 1rem; cursor: pointer; color: var(--muted); font-size: .95rem; border-bottom: 2px solid transparent; margin-bottom: -1px; text-transform: uppercase; letter-spacing: .03em; }
.ptabs .ptab:hover { color: #1f2330; }
.ptabs .ptab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.panel-block { flex: 1 1 auto; min-height: 0; overflow: auto; }
.panel-block .panel-title { margin: .2rem 0 .8rem; font-size: 1.1rem; }
/* Pie above grid */
.suppliers-panel { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; }
.suppliers-panel .sp-chart h3 { margin: 0 0 .4rem; font-size: 1rem; }
.suppliers-panel .pie { width: 100%; max-width: 620px; height: auto; display: block; }
.suppliers-panel .sp-grid { overflow-x: auto; }
.pie-slice { cursor: pointer; transition: opacity .1s; }
.pie-slice:hover { opacity: .85; }
.pie-label { font-size: 12px; fill: #374151; cursor: pointer; }
.pie-label.sel { font-weight: 700; fill: #111827; }
.grid .sw-col, .grid .sw-cell { width: 18px; padding-left: .5rem; padding-right: 0; }
.grid .sw-cell .swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.grid.clickable tbody tr { cursor: pointer; }
.avars { margin-top: .8rem; }
.avars-title { font-size: .82rem; color: var(--muted); margin-bottom: .3rem; }
.avars-scroll { max-height: 300px; overflow-y: auto; border: 1px solid var(--border); border-radius: 6px; }
.avars-scroll table.grid { border: none; }
.avars-scroll .grid th, .avars-scroll .grid td { padding: .3rem .6rem; font-size: .82rem; }
.avars-scroll thead th { position: sticky; top: 0; background: #fafafa; }
.avars-scroll td.cthumb { width: 94px; padding: .3rem .4rem; }
.avars-scroll td.cthumb img { width: 84px; height: 84px; object-fit: contain; border: 1px solid var(--border); border-radius: 4px; background: #fff; cursor: zoom-in; }
.aadd { display: flex; gap: .75rem; margin-top: .9rem; }
.aadd label { flex: 1 1 0; font-size: .85rem; color: #374151; }
.aadd input { display: block; width: 100%; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 4px; margin-top: .15rem; }
.edit-card .two-col { display: flex; gap: .75rem; }
.edit-card .two-col label { flex: 1 1 0; }

/* Shared CatalogItemEditor (Shared/CatalogItemEditor.razor): self-contained form layout so the editor
   renders identically inside the catalog modal (.edit-card) and the project add-item modal
   (.additem-card, which doesn't carry the .edit-card input/two-col styling). */
.cat-editor .two-col { display: flex; gap: .75rem; flex-wrap: wrap; }
.cat-editor .two-col > label { flex: 1 1 0; min-width: 12rem; }
/* The modal card is always light, so labels use a fixed dark ink (like .edit-card/.aadd labels)
   rather than inheriting --text, which flips light in dark theme and would vanish on the white card. */
.cat-editor label { color: #374151; font-size: .85rem; }
.cat-editor > label { display: block; }
.cat-editor input:not([type=checkbox]):not([type=file]),
.cat-editor select,
.cat-editor textarea {
    display: block; width: 100%; margin-top: .15rem;
    padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 4px;
    font-family: inherit; box-sizing: border-box;
}
.cat-editor label.check { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.cat-editor label.check > input { width: auto; margin: 0; }
/* Order-tracking panel: fills the expanded row so the per-item columns aren't cut off */
.edit-card.order-track { width: 100%; max-width: none; }
.order-track .ot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .55rem .8rem; align-items: end; max-width: 860px; }
.order-track .ot-grid label { margin-bottom: 0; }
.order-track .ot-lines td input, .order-track .ot-lines td select { padding: .2rem .3rem; font-size: .8rem; margin: 0; }
.order-track .ot-lines td input.ot-num { width: 58px; }
.order-track .ot-lines td input[type=date] { width: 128px; }
.order-track .ot-lines td select { min-width: 110px; }
.order-track .ot-lines th { white-space: nowrap; }
/* checkbox row inside an edit-card (override the full-width block input) */
.edit-card label.chk { display: flex; align-items: center; gap: .45rem; }
.edit-card label.chk input { display: inline-block; width: auto; margin: 0; }
/* Order collaboration: comments + attachments */
.collab-add { display: flex; gap: .4rem; align-items: flex-start; margin: .3rem 0; }
.collab-add textarea { flex: 1 1 auto; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; resize: vertical; }
.collab-list { list-style: none; margin: .2rem 0 0; padding: 0; }
.collab-list li { border-top: 1px solid var(--border); padding: .35rem 0; }
.collab-list .c-meta { display: flex; gap: .35rem; align-items: center; font-size: .76rem; color: var(--muted); }
.collab-list .c-meta .link-muted { margin-left: auto; }
.collab-list .c-text { white-space: pre-wrap; font-size: .9rem; color: #1f2937; }
.filelink { background: none; border: none; padding: 0; color: #2563eb; cursor: pointer; text-decoration: underline; font: inherit; text-align: left; }
/* Order board */
.board-summary { display: flex; gap: .5rem; flex-wrap: wrap; margin: .6rem 0; }
.board-summary .chip { border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: .3rem .8rem; font-size: .85rem; cursor: pointer; font-weight: 600; }
.board-summary .chip.on { outline: 2px solid var(--accent); }
.board-summary .chip-red { color: #b91c1c; border-color: #fca5a5; }
.board-summary .chip-amber { color: #b45309; border-color: #fcd34d; }
.board-summary .chip-green { color: #15803d; border-color: #86efac; }
.board-summary .chip-late { color: #7c3aed; border-color: #c4b5fd; }
.late-badge { margin-left: .4rem; background: #ede9fe; color: #6d28d9; border-radius: 3px; padding: .02rem .3rem; font-size: .72rem; font-weight: 600; }
.ontime-badge { margin-left: .4rem; color: var(--muted); font-size: .72rem; }
/* Inline edit affordance + editor on the order board */
.board-edit-btn { background: none; border: none; cursor: pointer; color: var(--muted); font-size: .85rem; margin-left: .35rem; padding: .05rem .3rem; border-radius: 4px; }
.board-edit-btn:hover { color: var(--accent); background: rgba(127,127,127,.14); }
.board-edit-card { width: 660px; }
/* Flex columns whose inputs bottom-align even when a label wraps to two lines. */
.board-edit-card .form-cols > label { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.board-edit-card .form-cols > label > input, .board-edit-card .form-cols > label > select { margin-top: auto; }
.board-edit-card .form-cols-3 { gap: .8rem; }
.order-collab { border-top: 1px solid var(--border); margin-top: .7rem; padding-top: .6rem; }
/* Modal header with the item photo on the right (legacy Edit-Order layout). */
.order-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.order-photo { flex: 0 0 auto; display: block; }
.order-photo img { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: #f1f5f9; }
.order-photo:hover img { border-color: var(--accent); }
[data-theme="dark"] .order-photo img { background: var(--surface-3); }
/* Thumbnail column on the order board */
.board-grid th.thumb-col, .board-grid td.thumb-col { width: 44px; padding: .25rem .4rem; text-align: center; }
.board-preview { display: flex; gap: 1.1rem; flex-wrap: wrap; margin: .3rem 0 .2rem; padding: .5rem .75rem; background: var(--surface-2, #f1f5f9); border-radius: 6px; font-size: .85rem; font-variant-numeric: tabular-nums; }
.board-preview strong { color: var(--text, #1f2330); }
[data-theme="dark"] .board-preview { background: var(--surface-3); }
/* Project deadline editor (project detail header) */
.pd-deadline { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 8px; padding: .5rem .7rem; background: #fff; }
.pd-deadline > label { display: block; font-size: .78rem; color: var(--muted); margin-bottom: .25rem; }
.pd-deadline-row { display: flex; gap: .4rem; align-items: center; }
.pd-deadline-row input { padding: .35rem .5rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; }
.pd-deadline .dl-note { display: block; margin-top: .3rem; font-size: .72rem; }
.detail-head .ph-right { flex: 0 0 auto; }

/* ---- GUI consistency pass: control sizing, unified radius, heading rhythm ---- */
/* Filter/search inputs & selects in a toolbar match the button height (exclude checkboxes/radios). */
.toolbar input:not([type=checkbox]):not([type=radio]), .toolbar select {
    padding: .5rem .75rem; border: 1px solid var(--border);
}
/* All standard form controls share the 6px control radius (tiny inline grid editors stay 4px). */
.edit-card input, .edit-card textarea, .edit-card select,
.board-filters input, .board-filters select,
.collab-add textarea, .pd-deadline-row input,
.toolbar input, .toolbar select { border-radius: 6px; }
/* Group a page's intro line with its heading. */
h1 + p.muted { margin-top: -.5rem; }

/* Semantic money/status inks — ALWAYS use these instead of inline hex so dark mode works.
   amt-pos = money in / good; amt-neg = money out / bad; overdue-date = past-due date. */
.amt-pos { color: #1a7a3a; }
.amt-neg { color: #b00020; }
.overdue-date { color: #dc2626; }
[data-theme="dark"] .amt-pos { color: #4ade80; }
[data-theme="dark"] .amt-neg, [data-theme="dark"] .overdue-date { color: #ff7a7a; }
/* Dark inks for the Material Release status texts (light-theme rules live with .mr-summary). */
[data-theme="dark"] .mr-summary .mr-fail, [data-theme="dark"] .mr-reason { color: #ff7a7a; }
[data-theme="dark"] .mr-summary .mr-cleared { color: #4ade80; }

/* Finance side panels (account balances / validation) */
.fin-panels { display: flex; gap: 1.5rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.fin-panel { flex: 0 1 auto; min-width: 280px; }
.fin-panel table.grid { max-width: 360px; }

/* Finance hub: headline stat strip (verification-grade figures, tabular digits) */
.fin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: .5rem; margin: .75rem 0 0; max-width: 1100px; }
.fin-stat { border: 1px solid var(--border); border-radius: 10px; padding: .5rem .75rem; background: var(--surface, #fff);
    display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.fin-stat .fs-l { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-stat .fs-v { font-size: 1.02rem; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Finance hub: modules grouped by task, one row per module with a live-workload badge */
.fin-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: .75rem; margin: 1rem 0 1.25rem; max-width: 1100px; }
.fin-nav-group { border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fff); padding: .3rem; }
.fin-nav-group > h4 { margin: .3rem .55rem .15rem; font-size: .78rem; color: var(--muted); font-weight: 600; }
.fin-link { display: flex; align-items: baseline; gap: .5rem; padding: .38rem .55rem; border-radius: 7px; color: inherit; text-decoration: none; }
.fin-link:hover { background: rgba(59, 130, 246, .07); text-decoration: none; }
.fin-link:hover .fin-link-name { text-decoration: underline; }
.fin-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The name carries the app's link color so the row reads as clickable, not as a label. */
.fin-link-name { font-weight: 600; font-size: .875rem; white-space: nowrap; color: var(--accent); }
.fin-link-desc { color: var(--muted); font-size: .74rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-badge { font-size: .7rem; font-weight: 600; padding: .05rem .5rem; border-radius: 999px; background: #eef2f7; color: #475569;
    white-space: nowrap; font-variant-numeric: tabular-nums; }
.fin-badge.warn { background: #fee2e2; color: #b91c1c; }
.fin-badge.ok { background: #dcfce7; color: #15803d; }
[data-theme="dark"] .fin-stat, [data-theme="dark"] .fin-nav-group { background: var(--surface); }
[data-theme="dark"] .fin-link:hover { background: rgba(96, 165, 250, .12); }
[data-theme="dark"] .fin-badge { background: #1f2937; color: #9ca3af; }
[data-theme="dark"] .fin-badge.warn { background: #3f1d1d; color: #fca5a5; }
[data-theme="dark"] .fin-badge.ok { background: #14261b; color: #86efac; }

/* Theme toggle button in the top bar */
.theme-toggle { background: none; border: none; cursor: pointer; line-height: 1; padding: .25rem .35rem; border-radius: 6px; color: var(--muted); display: inline-flex; align-items: center; }
.theme-toggle:hover { background: rgba(127,127,127,.15); color: var(--text, #1f2330); }

/* ===================== Dark theme ===================== */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0f1115;
    --border: #343b46;
    --muted: #9aa3b2;
    --accent: #5b8cff;
    --surface: #181b21;
    --surface-2: #20242c;
    --surface-3: #262b34;
    --text: #e6e8ec;
}

/* ---- Cherry Blossom: soft light theme. Two backdrops: petals (blossom) and corner sprays (sakura) ---- */
:root[data-theme="blossom"], :root[data-theme="sakura"] {
    color-scheme: light;
    --bg: #fff5f8;
    --border: #f1d5e0;
    --muted: #9c8791;
    --accent: #d4699a;
    --surface: #ffffff;
    --surface-2: #fdeef4;
    --surface-3: #fbe2ec;
    --text: #4a3a42;
}
:root[data-theme="blossom"] body {
    color: #4a3a42;
    background: var(--bg) url("../img/blossom-bg.svg?v=2") repeat fixed;
    background-size: 360px 360px;
}
:root[data-theme="sakura"] body {
    color: #4a3a42;
    background: var(--bg) url("../img/blossom-corners.svg?v=1") center / cover no-repeat fixed;
}
:root[data-theme="blossom"] .topbar,
:root[data-theme="sakura"] .topbar { background: #fff0f6; border-bottom: 1px solid var(--border); }
:root[data-theme="blossom"] .brand,
:root[data-theme="sakura"] .brand { color: #5a3a48; }
:root[data-theme="blossom"] .nav-links a,
:root[data-theme="sakura"] .nav-links a { color: #6b4a57; }
:root[data-theme="blossom"] .nav-links a:hover,
:root[data-theme="sakura"] .nav-links a:hover { color: var(--accent); }
:root[data-theme="blossom"] .nav-links a.active,
:root[data-theme="sakura"] .nav-links a.active { color: var(--accent); }
/* The dark-bar re-inks (light slate) would wash out on the pink bar — restore plum chrome. */
:root[data-theme="blossom"] .topbar .user, :root[data-theme="sakura"] .topbar .user,
:root[data-theme="blossom"] .topbar .link-muted, :root[data-theme="sakura"] .topbar .link-muted,
:root[data-theme="blossom"] .topbar .theme-toggle, :root[data-theme="sakura"] .topbar .theme-toggle,
:root[data-theme="blossom"] .topbar .nav-dropdown-label, :root[data-theme="sakura"] .topbar .nav-dropdown-label { color: #6b4a57; }
:root[data-theme="blossom"] .topbar .link-muted:hover, :root[data-theme="sakura"] .topbar .link-muted:hover,
:root[data-theme="blossom"] .topbar .nav-dropdown:hover .nav-dropdown-label, :root[data-theme="sakura"] .topbar .nav-dropdown:hover .nav-dropdown-label { color: var(--accent); }
:root[data-theme="blossom"] .topbar .theme-toggle:hover, :root[data-theme="sakura"] .topbar .theme-toggle:hover { background: rgba(127,127,127,.15); color: #5a3a48; }

/* ---- Project status badge (Active / Approved / Archived) ---- */
.pstatus { display: flex; align-items: center; gap: .5rem; }
.pstatus-badge { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.ps-active { background: #e6f4ea; color: #1a7a3a; }
.ps-approved { background: #e7effd; color: #2354b8; }
.ps-archived { background: #ececf0; color: #6b7280; }
.ps-other { background: #fff4e5; color: #b45309; }
.approval-panel { background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.25rem; margin-top: .75rem; max-width: 760px; }
.approval-link { display: inline-block; word-break: break-all; font-size: .85em; background: var(--chip-bg, #f1f3f5); color: var(--text); padding: .2rem .45rem; border-radius: 4px; }
.pdf-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.pdf-card { background: var(--surface, #fff); width: 92vw; height: 92vh; border-radius: 8px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 12px 48px rgba(0,0,0,.35); }
.pdf-head { display: flex; align-items: center; gap: .4rem; padding: .5rem .75rem; border-bottom: 1px solid var(--border); }
.pdf-head .pdf-spacer { flex: 1; }
.pdf-frame { flex: 1; width: 100%; border: 0; background: #525659; }

/* Datasheets tab (per-item) */
/* The panel fills the fixed-height .pdetail-page container (which clips overflow) and scrolls/fits
   its contents internally, so nothing is ever clipped — the list scrolls, the preview fits. */
.ds-panel { margin-top: .25rem; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ds-layout { display: grid; grid-template-columns: 320px 1fr; grid-template-rows: minmax(0, 1fr); gap: 1rem; flex: 1; min-height: 0; }
.ds-list { border: 1px solid var(--border); border-radius: 8px; min-height: 160px; overflow-y: auto; background: var(--surface, #fff); }
.ds-list-head { padding: .5rem .75rem; font-weight: 600; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface, #fff); z-index: 1; }
.ds-item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; background: none; border: none; border-bottom: 1px solid var(--border); padding: .5rem .75rem; cursor: pointer; color: var(--text); }
.ds-item:hover { background: rgba(127, 127, 127, .10); }
.ds-item.on { background: rgba(31, 111, 235, .14); }
.ds-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ds-item-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-item-sub { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-thumb { width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--border); border-radius: 6px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ds-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ds-noimg { color: var(--muted); font-size: 1rem; }
.ds-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ds-list:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ds-hint { font-weight: 400; font-size: .74rem; }
.ds-detail { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ds-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ds-detail-title { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ds-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.ds-note { background: #fff4e5; color: #b45309; border-radius: 6px; padding: .4rem .6rem; margin: .2rem 0 .5rem; }
/* The preview box fills the space left in the detail column; the image is centered inside it via
   object-fit so it's always whole and never grows with window width or runs off the bottom. */
.ds-frame { flex: 1 1 0; min-height: 240px; width: 100%; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.ds-img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* Stacked / auto-height mode (narrow <=1200px when not pinned "side", or forced "below"):
   .pdetail-page scrolls instead of clipping, so the panel can't flex-fill a fixed height — it would
   collapse to the min heights. Give the list and preview explicit viewport heights and let it scroll. */
[data-panel="below"] .ds-layout { grid-template-rows: auto; }
[data-panel="below"] .ds-list { height: 68vh; }
[data-panel="below"] .ds-frame { height: 68vh; }
@media (max-width: 1200px) {
    html:not([data-panel="side"]) .ds-layout { grid-template-rows: auto; }
    html:not([data-panel="side"]) .ds-list { height: 68vh; }
    html:not([data-panel="side"]) .ds-frame { height: 68vh; }
}
.ds-edit-modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; }
.ds-edit-card { background: var(--surface, #fff); color: var(--text); width: 560px; max-width: 96vw; max-height: 90vh; overflow-y: auto; border-radius: 8px; padding: 1.1rem 1.25rem; box-shadow: 0 12px 48px rgba(0,0,0,.35); }
.ds-edit-card label { display: block; font-size: .82rem; color: var(--muted); margin-top: .7rem; }
.ds-edit-card input, .ds-edit-card textarea { display: block; width: 100%; margin-top: .15rem; box-sizing: border-box; }
.ds-toolbar { flex: 0 0 auto; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.ds-allok { color: #16a34a; font-weight: 600; }
.ds-approve { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.ds-approve-note { flex: 1 1 240px; min-width: 200px; }
.ds-frame-msg { display: flex; align-items: center; justify-content: center; gap: .6rem; color: var(--muted); background: var(--surface, #fff); }
.ds-spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: ds-spin .8s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ds-spinner { animation-duration: 2.4s; } }
@media (max-width: 900px) { .ds-layout { grid-template-columns: 1fr; } }

/* ---- RFQ document preview (in-app view of the pack content; white 'paper' in any theme) ---- */
.rfq-doc { background: #fff; color: #1f2330; padding: 1.5rem 1.75rem; border-radius: 6px; font-size: .9rem; line-height: 1.4; color-scheme: light; }
.rfq-doc-head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: flex-start; border-bottom: 2px solid #1f2330; padding-bottom: .75rem; margin-bottom: 1rem; }
.rfq-doc-co { font-size: 1.5rem; font-weight: 800; letter-spacing: .08em; }
.rfq-doc-kind { color: #777; font-size: .9rem; letter-spacing: .05em; text-transform: uppercase; margin-top: .15rem; }
.rfq-doc-meta { border-collapse: collapse; font-size: .85rem; }
.rfq-doc-meta td { color: #888; padding: .12rem .7rem .12rem 0; white-space: nowrap; vertical-align: top; }
.rfq-doc-meta th { text-align: left; padding: .12rem 0; font-weight: 600; color: #1f2330; }
.rfq-doc-remarks { background: #f6f7f9; border-left: 3px solid #c9ced6; padding: .5rem .8rem; margin-bottom: 1rem; white-space: pre-line; color: #333; }
.rfq-doc-intro { margin: 0 0 1rem; color: #555; }
.rfq-line { display: grid; grid-template-columns: 2rem 150px 1fr; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid #e7e9ee; align-items: start; }
.rfq-line:last-of-type { border-bottom: none; }
.rfq-line-no { font-weight: 700; color: #b3b8c2; font-size: 1.05rem; }
.rfq-line-photo { width: 150px; height: 120px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #ececf0; border-radius: 4px; overflow: hidden; }
.rfq-line-photo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rfq-line-noimg { color: #c2c2c2; font-size: .78rem; }
.rfq-line-code { font-weight: 700; font-size: .85rem; color: #2563eb; }
.rfq-line-name { font-weight: 600; font-size: 1.05rem; margin: .1rem 0 .35rem; }
.rfq-line-qty { font-size: .85rem; margin-bottom: .35rem; }
/* Per-parent quantity breakdown + subtotal (RFQ doc is always white paper). */
.rfq-line-breakdown { margin: .2rem 0 .4rem; border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; max-width: 340px; }
.rfq-bd-row { display: flex; justify-content: space-between; gap: 1rem; padding: .22rem .55rem; font-size: .82rem; color: #374151; }
.rfq-bd-row + .rfq-bd-row { border-top: 1px solid #f1f5f9; }
.rfq-bd-sub { font-weight: 700; color: #111827; background: #f8fafc; border-top: 1px solid #e5e7eb; }
.rfq-line-req { margin: .25rem 0 0; padding-left: 1.1rem; color: #444; font-size: .85rem; }
.rfq-line-req li { margin: .12rem 0; }
.rfq-doc-foot { margin-top: 1.25rem; padding-top: .6rem; border-top: 1px solid #e7e9ee; color: #aaa; font-size: .78rem; text-align: center; }

/* RFQ viewer in edit mode — keep inputs light on the white sheet, in every theme */
.rfq-doc input, .rfq-doc textarea { background: #fff; color: #1f2330; border: 1px solid #ccd2da; border-radius: 4px; padding: .25rem .4rem; font: inherit; margin: .1rem 0; box-sizing: border-box; }
.rfq-doc textarea { resize: vertical; }
.rfq-doc .rfq-edit-code { width: 9rem; font-weight: 700; color: #2563eb; }
.rfq-doc .rfq-edit-name { width: 100%; font-weight: 600; font-size: 1rem; }
.rfq-doc .rfq-edit-qty { width: 6rem; }
.rfq-doc .rfq-edit-req { width: 100%; }
.rfq-doc .rfq-edit-date { width: 11rem; }
.rfq-doc-edit-field { margin-bottom: 1rem; }
.rfq-doc-edit-field label { display: block; font-size: .72rem; color: #888; margin-bottom: .15rem; text-transform: uppercase; letter-spacing: .04em; }
.rfq-doc-edit-field textarea { width: 100%; }
[data-theme="dark"] .rfq-doc input, [data-theme="dark"] .rfq-doc textarea { background: #fff; color: #1f2330; border-color: #ccd2da; }

@media print {
    body * { visibility: hidden !important; }
    .rfq-print, .rfq-print * { visibility: visible !important; }
    .rfq-print { position: absolute !important; left: 0; top: 0; width: 100%; }
    .no-print { display: none !important; }
    .rfq-line { break-inside: avoid; }
}

/* ---- Supplier portal (anonymous magic-link page) ---- */
.portal-page { min-height: 100vh; background: #eee6e9; padding: 1.5rem; color-scheme: light; color: #1f2330; }
.portal-container { max-width: 1000px; margin: 0 auto; }
.portal-form, .portal-thanks, .portal-msg { background: #fff; color: #1f2330; border-radius: 6px; padding: 1.25rem 1.5rem; margin-top: 1rem; }
.portal-msg h2 { margin-top: 0; }
.portal-thanks h3 { color: #1a7a3a; margin-top: 0; }
.portal-form h3 { margin-top: 0; }
.portal-fields { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.portal-fields label, .portal-remarks { display: flex; flex-direction: column; font-size: .8rem; color: #666; gap: .2rem; }
.portal-fields input, .portal-remarks textarea, .portal-lines input, .portal-summary input { border: 1px solid #ccd2da; border-radius: 4px; padding: .3rem .45rem; font: inherit; background: #fff; color: #1f2330; }
.portal-lines { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.portal-lines th, .portal-lines td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid #eceef2; font-size: .85rem; vertical-align: middle; }
.portal-lines th.num, .portal-lines td.num { text-align: right; }
.portal-lines input { width: 100%; box-sizing: border-box; }
.portal-summary { display: flex; gap: 1.5rem; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-bottom: 1rem; }
.portal-summary label { display: flex; flex-direction: column; font-size: .8rem; color: #666; gap: .2rem; }
.portal-total { font-size: .95rem; }
.portal-remarks { margin-bottom: 1rem; }
.portal-error { color: #b00020; font-weight: 600; }

/* Supplier-link modal (in-app) */
.link-row { display: flex; gap: .5rem; margin: .5rem 0; }
.link-row input { flex: 1; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 4px; font: inherit; }

[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .topbar { background: var(--surface); }
[data-theme="dark"] .brand { color: var(--text); }
[data-theme="dark"] .nav-links a, [data-theme="dark"] .nav-dropdown-label { color: var(--muted); }
[data-theme="dark"] .nav-dropdown-menu { background: var(--surface); }
[data-theme="dark"] .nav-dropdown-menu a { color: var(--text); }
[data-theme="dark"] .nav-dropdown-menu a:hover { background: var(--surface-3); color: var(--accent); }

[data-theme="dark"] .grid { background: var(--surface); }
[data-theme="dark"] .grid th { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .grid tbody tr:hover { background: var(--surface-3); }
[data-theme="dark"] .grid tr.sel td { background: #34507a; color: #ffffff; }
[data-theme="dark"] .pie-label { fill: #cbd2db; }
[data-theme="dark"] .pie-label.sel { fill: #ffffff; }
[data-theme="dark"] .grid tr.grp-head td { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .grid tr.img-row > td { background: var(--surface-2); }
[data-theme="dark"] .grid tr.editing td { background: #2b2a1a; }
/* Item cards: dark body + light text in dark mode (image area stays white); blue selection like the grid. */
[data-theme="dark"] .icard { background: var(--surface); }
[data-theme="dark"] .icard-name, [data-theme="dark"] .icard-qtynum { color: var(--text); }
[data-theme="dark"] .icard-sub { color: var(--muted); }
[data-theme="dark"] .icard.sel { background: #34507a; border-color: var(--accent); }
[data-theme="dark"] .icard.sel .icard-name,
[data-theme="dark"] .icard.sel .icard-sub,
[data-theme="dark"] .icard.sel .icard-price,
[data-theme="dark"] .icard.sel .icard-qtynum { color: #ffffff; }

/* Catalog cards: same dark treatment as the project item cards (.icard). */
[data-theme="dark"] .cat-card { background: var(--surface); }
[data-theme="dark"] .cat-card-name { color: var(--text); }
/* Child-item tray: a muted blue-grey well bordered in the selection blue, so it reads
   as belonging to the selected (blue) parent above it — not a bright white slab. */
[data-theme="dark"] .card-children { background: #1c2a3f; border-color: #34507a; }

[data-theme="dark"] .scroll-head { background: var(--surface); }
[data-theme="dark"] .scroll-head .grid thead th { background: var(--surface-2); }
[data-theme="dark"] table.cashflow.merged thead th,
[data-theme="dark"] table.cashflow.merged tbody td:nth-child(1),
[data-theme="dark"] table.cashflow.merged tbody td:nth-child(2) { background: var(--surface); }

[data-theme="dark"] .card, [data-theme="dark"] .edit-card, [data-theme="dark"] .panel,
[data-theme="dark"] .fin-panel, [data-theme="dark"] .pd-deadline, [data-theme="dark"] .panel-body,
[data-theme="dark"] .additem-card { background: var(--surface); color: var(--text); }

/* Modals in dark mode: labels use --text (the fixed #374151 ink is only legible on the light card),
   and the #fff sub-surfaces (the view toggle + catalog search-result cards) go dark too. Fixes the
   add-item modal + inline catalog editor, plus the same latent issue on the catalog .edit-card labels. */
[data-theme="dark"] .edit-card label, [data-theme="dark"] .additem-card label,
[data-theme="dark"] .cat-editor label, [data-theme="dark"] .aadd label,
[data-theme="dark"] .panel label { color: var(--text); }
[data-theme="dark"] .aview-btns button { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .aview-btns button.on { background: var(--accent); color: #fff; }
[data-theme="dark"] .aview-btns button:not(.on):hover { background: var(--surface-3); }
[data-theme="dark"] .acard { background: var(--surface-2); color: var(--text); border-color: var(--border); }
/* The type filter hard-codes background:#fff at high specificity; beat it so it isn't a white box. */
[data-theme="dark"] .asearch select.as-type { background: var(--surface-2); color: var(--text); border-color: var(--border); }
/* Document/offer generator cards (fieldsets) + composite-item cards were white in dark mode too. */
[data-theme="dark"] .form-grid fieldset { background: var(--surface); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .form-grid legend, [data-theme="dark"] .form-grid label { color: var(--text); }
[data-theme="dark"] .comp-card { background: var(--surface-2); color: var(--text); border-color: var(--border); }

/* --- Dark-mode surface sweep: the remaining containers/controls that hard-coded #fff. Left
   intentionally light: photo/thumbnail backgrounds, the printed-paper document previews (rfq-doc,
   portal, ds-frame, cat-ds-preview, dn-preview, img-modal), and the toggle-switch knob. --- */
/* Pricing summary strip in the item editor: the light #f8fafc strip clashed with the global
   dark-mode strong rule (light values on a light strip) — darken the strip itself. */
[data-theme="dark"] .parent-totals { background: var(--surface-2); color: var(--text); border-color: var(--border); }

/* --- Second dark sweep: remaining tinted-light (#f8fafc-family) surfaces that carry text. Badges/
   pills (ps-*, fin-kind, proj-client, late-badge) keep their light tint + own dark ink on purpose,
   as do the printed-paper portal/doc surfaces and photo stages. --- */
[data-theme="dark"] .aresult:hover { background: var(--surface-3); }
[data-theme="dark"] .panel-head:hover { background: var(--surface-2); }
[data-theme="dark"] .grid.clickable tbody tr.child td { background: var(--surface-2); }
[data-theme="dark"] .cc-varrow > td { background: var(--surface-2); }
[data-theme="dark"] .cat-newchild { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .cat-childedit { background: var(--surface-2); }
[data-theme="dark"] .cat-photo-empty { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .settings-section { background: var(--surface); }
[data-theme="dark"] .gen-type { color: var(--text); }
[data-theme="dark"] .edit-card .clear-x:hover, [data-theme="dark"] .img-gallery .ig-clear:hover { background: #3a2226; }
[data-theme="dark"] .pipe-col { background: var(--surface-2); }
[data-theme="dark"] .pipe-col.drop-target { border-color: var(--accent); background: rgba(96, 165, 250, .1); }
[data-theme="dark"] .pipe-card { background: var(--surface); }
[data-theme="dark"] .ctx-menu { background: var(--surface); color: var(--text); border-color: var(--border); }
/* Menu items hard-code near-black ink for the light menu; re-ink for the dark surface. */
[data-theme="dark"] .ctx-menu button { color: var(--text); }
[data-theme="dark"] .ctx-menu button:disabled { color: #667084; }
[data-theme="dark"] .ctx-menu button.danger { color: #ff8d85; }
[data-theme="dark"] .ctx-menu button.danger:hover:not(:disabled) { background: #3a2226; color: #ff8d85; }
[data-theme="dark"] .ctx-menu button:hover:not(:disabled):not(.danger), [data-theme="dark"] .ctx-menu a:hover { background: var(--surface-3); color: var(--accent); }
[data-theme="dark"] .view-toggle button { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .view-toggle button.on, [data-theme="dark"] .view-toggle button.active { background: var(--accent); color: #fff; }
[data-theme="dark"] .view-toggle button:not(.on):not(.active):hover { background: var(--surface-3); }
[data-theme="dark"] .tmpl-img { background: var(--surface-2); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .si-var .si-var-head select { background: var(--surface-2); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .cc-varedit, [data-theme="dark"] .img-gallery .ig-nav button,
[data-theme="dark"] .img-gallery .ig-droprow { background: var(--surface-2); color: var(--text); border-color: var(--border); }
[data-theme="dark"] .edit-card .clear-x { background: var(--surface-2); border-color: var(--border); }
[data-theme="dark"] .dn-complete { background: #16301f; border-color: #2c5a3a; color: #7ddc98; }
[data-theme="dark"] .dn-warn { color: #f0b35f; }

[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea,
[data-theme="dark"] .search, [data-theme="dark"] .edit-card input, [data-theme="dark"] .edit-card select,
[data-theme="dark"] .edit-card textarea, [data-theme="dark"] .toolbar input, [data-theme="dark"] .toolbar select,
[data-theme="dark"] .grid td .vedit {
    background: var(--surface-2); color: var(--text); border-color: var(--border);
}

[data-theme="dark"] .board-summary .chip { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .board-grid tr.board-row:hover { background: var(--surface-3); }
[data-theme="dark"] .board-grid tr.board-detail > td { background: var(--surface-2); }

[data-theme="dark"] .flow-step { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .flow-step:hover { background: var(--surface-3); }
[data-theme="dark"] .flow-step::before { border-left-color: var(--surface-2); }
[data-theme="dark"] .flow-step.current { background: var(--accent); color: #fff; }
[data-theme="dark"] .flow-step.current::before { border-left-color: var(--accent); }

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4,
[data-theme="dark"] strong, [data-theme="dark"] .c-text, [data-theme="dark"] .card-group-head,
[data-theme="dark"] .ptabs .ptab:hover { color: var(--text); }
[data-theme="dark"] .btn.ghost { background: transparent; color: var(--accent); border-color: var(--border); }
[data-theme="dark"] code { background: var(--surface-2); color: var(--text); }
[data-theme="dark"] .img-modal { background: rgba(0,0,0,.6); }
[data-theme="dark"] ::placeholder { color: #8b93a1; opacity: 1; }
/* Native dropdown option list: force a dark, legible popup in dark mode. */
[data-theme="dark"] option, [data-theme="dark"] optgroup { background-color: #20242c; color: #e6e8ec; }
/* Beat the toolbar/consistency input rules so dark inputs aren't white. */
[data-theme="dark"] .toolbar input:not([type=checkbox]):not([type=radio]),
[data-theme="dark"] .toolbar select,
[data-theme="dark"] .board-filters input, [data-theme="dark"] .board-filters select {
    background: var(--surface-2); color: var(--text); border-color: var(--border);
}

/* Finance Project Details — forecast/provision vs actual, and awaiting-payment,
   differentiated without the legacy light-blue background. */
.fin-kind { display: inline-block; border-radius: 999px; padding: .03rem .5rem; font-size: .68rem; font-weight: 700; }
.fin-kind.actual { background: #dcfce7; color: #166534; }
.fin-kind.forecast { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.grid tr.forecast-row td { color: #6b7280; font-style: italic; }
.grid tr.forecast-row td:first-child { box-shadow: inset 3px 0 0 #fb923c; }   /* amber left accent */
.fin-flag { display: inline-block; margin-left: .4rem; border: 1px solid #fb923c; color: #c2410c; background: #fff; border-radius: 999px; padding: .02rem .45rem; font-size: .66rem; font-weight: 600; white-space: nowrap; }
.board-filters { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin: .4rem 0 .8rem; }
.board-filters input, .board-filters select { padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; }
.board-filters input { min-width: 280px; }
.board-grid tr.board-row { cursor: pointer; }
.board-grid tr.board-row:hover { background: #f8fafc; }
.board-caret { display: inline-block; width: 1em; color: var(--muted); }
.board-grid tr.board-detail > td { background: #f8fafc; padding: .35rem .6rem; }
.edit-card .img-row { display: flex; gap: .4rem; align-items: center; }
.edit-card .img-row input { flex: 1 1 auto; min-width: 0; }
.edit-card .edit-thumb { flex: 0 0 auto; width: 44px; height: 44px; object-fit: cover; border: 1px solid var(--border); border-radius: 4px; cursor: zoom-in; background: #fff; }
.edit-card .clear-x { flex: 0 0 auto; border: 1px solid var(--border); background: #fff; color: #d92d20; border-radius: 4px; cursor: pointer; padding: .35rem .55rem; line-height: 1; }
.edit-card .clear-x:hover { background: #fdeceb; }

/* Enhanced custom-item editor */
.edit-card-wide { width: 820px; }
.custom-children { margin: .4rem 0 .8rem; border-top: 1px solid var(--border); padding-top: .7rem; }
.custom-children .cc-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .4rem; }
.custom-children .cc-total { font-size: .9rem; color: #374151; }
.parent-totals { display: flex; justify-content: flex-end; gap: 1.5rem; margin: .4rem 0 1rem; padding: .5rem 1rem; background: #f8fafc; border: 1px solid var(--border); border-radius: 6px; font-size: .9rem; color: #374151; }
.cc-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.cc-table th, .cc-table td { padding: .35rem .5rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.cc-table th { color: #6b7280; font-weight: 600; }
.cc-table td.num, .cc-table th.num { text-align: right; }
.cc-table select { width: 100%; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: .82rem; }
.cc-table .cc-thumbcol { width: 56px; padding-right: .3rem; }
.cc-table .cc-thumb { width: 48px; height: 48px; object-fit: cover; border: 1px solid var(--border); border-radius: 4px; cursor: zoom-in; background: #fff; display: block; }
.cc-varedit { border: 1px solid var(--border); background: #fff; border-radius: 4px; cursor: pointer; padding: .25rem .5rem; font-size: .78rem; white-space: nowrap; color: #374151; }
.cc-varedit:hover { border-color: var(--accent); color: var(--accent); }
.cc-varrow > td { background: #f8fafc; }
.cc-vareditor { padding: .5rem .25rem; }
.cc-vareditor > strong { display: block; margin-bottom: .4rem; font-size: .85rem; }
.cc-varfields { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem .75rem; }
.cc-varfields label { display: block; font-size: .78rem; color: #6b7280; }
.cc-varfields input { display: block; width: 100%; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: 4px; margin-top: .15rem; font-family: inherit; }
.cc-varactions { display: flex; align-items: center; gap: .6rem; margin-top: .6rem; }
.cc-varactions .muted { font-size: .75rem; }

/* Single-item supplier-variable editor */
.si-var { border-top: 1px solid var(--border); margin-top: .6rem; padding-top: .6rem; }
.si-var .si-var-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; font-size: .85rem; color: #374151; }
.si-var .si-var-label { color: #6b7280; }
.si-var .si-var-head select { padding: .3rem .4rem; border: 1px solid var(--border); border-radius: 4px; font-family: inherit; font-size: .85rem; min-width: 160px; background: #fff; }

/* Image gallery (both edit modals) */
.img-gallery { margin-bottom: .7rem; }
.img-gallery .ig-stage { position: relative; width: 100%; height: 240px; border: 1px solid var(--border); border-radius: 6px; background: #f8fafc; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.img-gallery .ig-img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
.img-gallery .ig-empty { color: #9ca3af; font-size: .9rem; }
.img-gallery .ig-clear { position: absolute; top: .4rem; right: .4rem; border: 1px solid var(--border); background: rgba(255,255,255,.92); color: #d92d20; border-radius: 4px; cursor: pointer; padding: .25rem .5rem; line-height: 1; }
.img-gallery .ig-clear:hover { background: #fdeceb; }
.img-gallery .ig-nav { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: .4rem 0; }
.img-gallery .ig-nav button { border: 1px solid var(--border); background: #fff; border-radius: 4px; cursor: pointer; width: 30px; height: 28px; font-size: 1.1rem; line-height: 1; }
.img-gallery .ig-nav button:hover { border-color: var(--accent); color: var(--accent); }
.img-gallery .ig-count { font-size: .82rem; color: #374151; min-width: 84px; text-align: center; }
.img-gallery .ig-droprow { position: relative; border: 1px dashed var(--border); border-radius: 6px; padding: .6rem .8rem; text-align: center; background: #fff; }
.img-gallery .ig-droprow:hover { border-color: var(--accent); }
.img-gallery .ig-drop { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.img-gallery .ig-droplabel { font-size: .82rem; color: #6b7280; pointer-events: none; }
.field-label { display: block; font-size: .85rem; color: #374151; margin-bottom: .25rem; }

/* Photos beside description (saves vertical space, wider description) */
.edit-card-med { width: 600px; }
.photo-desc { display: flex; gap: 1rem; align-items: stretch; margin-bottom: .6rem; }
.photo-desc .pd-photo { flex: 0 0 280px; }
.photo-desc .pd-photo .img-gallery { margin-bottom: 0; }
.photo-desc .pd-desc { flex: 1 1 auto; display: flex; flex-direction: column; font-size: .85rem; color: #374151; margin-bottom: 0; }
.photo-desc .pd-desc textarea { flex: 1 1 auto; margin-top: .15rem; resize: vertical; }

.grid th.srt { cursor: pointer; user-select: none; white-space: nowrap; }
.grid th.srt:hover { color: var(--accent); }
.items-scroll table.grid { border: none; border-radius: 0; overflow: visible; }
.items-scroll thead th { position: sticky; top: 0; z-index: 2; background: #fafafa; box-shadow: inset 0 -1px 0 var(--border); }
.grid.clickable tbody tr { cursor: pointer; }
.grid.clickable tbody tr.sel td { background: #ffe9a8 !important; color: #1f2330 !important; }
[data-theme="dark"] .grid.clickable tbody tr.sel td { background: #34507a !important; color: #ffffff !important; }
.grid.clickable tbody tr.child td { color: var(--muted); background: #fafafa; }
[data-theme="dark"] .grid.clickable tbody tr.child td { color: var(--muted); background: var(--surface-2); }
.grid th.exp, .grid td.exp { width: 2rem; text-align: center; }
.grid td.exp .toggle { cursor: pointer; user-select: none; color: var(--accent); font-size: 1.15rem; line-height: 1; display: inline-block; padding: 0 .15rem; }
.grid td.exp .toggle:hover { color: #1746b8; }
.grid th.flagcol, .grid td.flagcol { width: 1.4rem; text-align: center; padding-left: 0; padding-right: 0; }
.grid td.flagcol .flag { cursor: pointer; color: #d0d0d0; user-select: none; }
.grid td.flagcol .flag:hover { color: #f0a0a0; }
.grid td.flagcol .flag.on { color: #d92d20; }

/* Comments */
.add-comment { display: flex; gap: .4rem; margin-bottom: .6rem; }
.add-comment input { flex: 1 1 auto; min-width: 0; padding: .35rem .45rem; border: 1px solid var(--border); border-radius: 4px; }
.add-comment .btn { padding: .35rem .7rem; }
ul.comments { list-style: none; margin: 0; padding: 0; }
ul.comments li { padding: .4rem 0; border-top: 1px solid #f1f1f1; }
ul.comments .c-text { font-size: .85rem; color: #1f2330; }
ul.comments .c-meta { font-size: .72rem; color: var(--muted); margin-top: .1rem; }
.grid.wide th, .grid.wide td { padding: .35rem .55rem; font-size: .82rem; white-space: nowrap; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.form-grid fieldset { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: 1rem; }
.form-grid legend { font-weight: 600; padding: 0 .4rem; }
.form-grid label { display: block; margin-bottom: .6rem; font-size: .85rem; color: #374151; }
.form-grid input { display: block; width: 100%; padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 4px; margin-top: .2rem; }
.form-grid .row { display: flex; gap: .75rem; }
.form-grid label.check { display: flex; align-items: center; gap: .4rem; }
.form-grid label.check input { width: auto; margin-top: 0; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: #fde047;
    color: #1f2330; /* banner stays yellow in dark mode, so pin dark ink */
    padding: .75rem 1.25rem;
    box-shadow: 0 -1px 4px rgba(0,0,0,.2);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .75rem; }

/* Admin offer settings block on the Settings page */
.settings-section {
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    padding: .75rem 1rem;
    margin: .5rem 0 1rem;
    background: #fafafa;
}
.settings-section h3 { margin: 0 0 .5rem; }
.settings-section label { margin-right: .75rem; }
.settings-section select { margin-left: .4rem; }

/* Finance pipeline (kanban) board — classes replace the old inline styles so dark mode can restyle. */
.pipe-col { min-width: 230px; flex: 0 0 230px; background: #f0f2f6; border-radius: 8px; padding: .5rem; border: 2px solid transparent; transition: border-color .15s ease, background .15s ease; }
.pipe-col.drop-target { border-color: var(--accent); background: rgba(59, 130, 246, .07); }
.pipe-cards { max-height: 62vh; overflow-y: auto; }
.pipe-card { background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: .4rem; margin-bottom: .4rem; }
.pipe-card.draggable { cursor: grab; }
.pipe-card.draggable:active { cursor: grabbing; }
.pipe-card.pipe-proj { padding: .3rem .4rem; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .pipe-col { transition: none; } }

/* Sort selector beside the DataSheet PPT button */
.ds-sort { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; }
.ds-sort select { margin-left: .25rem; }

/* ---- Embedded "Generate documents" panel (Documents tab) ---- */
.gen-panel { margin-bottom: .5rem; }
.gen-controls { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.gen-type { display: inline-flex; flex-direction: column; font-size: .85rem; color: #444; gap: .2rem; }
.gen-type select { min-width: 200px; }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }
.gen-msg { margin: .5rem 0 0; }
.gen-form { margin-top: .75rem; }

/* Indeterminate progress bar shown while a document is being generated */
.gen-progress {
    position: relative;
    height: 6px;
    margin-top: .75rem;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.gen-progress > span {
    position: absolute;
    left: -40%;
    width: 40%;
    height: 100%;
    border-radius: 3px;
    background: #2563eb;
    animation: gen-progress-slide 1.1s ease-in-out infinite;
}
@keyframes gen-progress-slide {
    0%   { left: -40%; }
    50%  { left: 30%; }
    100% { left: 100%; }
}

/* Documents tab: stack packages + generate naturally and scroll as one area
   (overrides the equal-height split that the flex panel-blocks otherwise get). */
.docs-tab { flex: 1 1 auto; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 1.25rem; }
.docs-tab > .panel-block { flex: 0 0 auto; overflow: visible; }

/* ---- Catalog editor ---- */
.edit-card.wide { max-width: 820px; width: 92vw; max-height: 88vh; overflow: auto; }
.cat-photos h4, .cat-bom h4 { margin: 1rem 0 .5rem; }
.cat-photo-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.cat-photo { width: 180px; display: flex; flex-direction: column; gap: .35rem; }
.cat-photo img { width: 180px; height: 140px; object-fit: contain; background: #fff; border: 1px solid #e5e7eb; border-radius: 6px; display: block; }
.cat-photo-empty { width: 180px; height: 140px; display: flex; align-items: center; justify-content: center; color: #9ca3af; background: #f8fafc; border: 1px dashed #d1d5db; border-radius: 6px; font-size: .85rem; }
/* Transparent file input overlaying the slot so a dropped file (or click) uploads */
.cat-photo-drop { position: relative; width: 180px; height: 140px; }
.cat-photo-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cat-datasheet { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.cat-datasheet h4 { margin: 0 0 .35rem; }
.cat-datasheet > .muted { margin: 0 0 .75rem; }
.cat-ds-preview { border: 1px solid var(--border); border-radius: 8px; background: #fff; padding: .5rem; margin: 0 0 .75rem; max-width: 560px; }
.cat-ds-preview img { display: block; width: 100%; height: auto; }
/* Datasheet action row: one consistent button size, even spacing; Delete set apart on the right. */
.cat-ds-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0; }
/* Re-assert the button look for every item incl. the <label> Upload (which else inherits .edit-card
   label's dark colour + bottom margin), so they share colour, font and vertical alignment. */
.cat-ds-actions .btn { display: inline-flex; align-items: center; justify-content: center; color: #fff; margin: 0; }
.cat-ds-actions .ds-del { margin-left: auto; display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .8rem; font-size: .82rem; background: transparent; color: #d92d20; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; line-height: 1.2; }
.cat-ds-actions .ds-del:hover { background: rgba(217, 45, 32, .08); border-color: #d92d20; }
.cat-ds-actions .ds-del:disabled { opacity: .5; cursor: default; }
[data-theme="dark"] .cat-ds-actions .ds-del { color: #ff6b5e; }
.cat-photo-drop:hover { outline: 2px solid #93c5fd; outline-offset: 2px; border-radius: 6px; }
.cat-photo-cap { font-size: .8rem; color: #2563eb; }
.cat-bom .qty { width: 80px; }
.cat-bom-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.comp-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: .5rem 0; }
.comp-card { border: 1px solid #e5e7eb; border-radius: 6px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.comp-card-img { height: 72px; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid #f1f5f9; }
.comp-card-img img { max-width: 100%; max-height: 72px; object-fit: contain; }
.comp-card-img .muted { font-size: .72rem; }
.comp-card-body { padding: .35rem .45rem; display: flex; flex-direction: column; gap: .1rem; }
.comp-card-name { font-weight: 600; font-size: .78rem; line-height: 1.15; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.comp-card-meta { font-size: .7rem; color: #6b7280; }
.comp-card-qty { font-size: .72rem; display: flex; align-items: center; gap: .3rem; margin-top: .15rem; }
.comp-card-qty .qty { width: 56px; }
.comp-card-actions { display: flex; gap: .5rem; margin-top: .2rem; font-size: .78rem; }
@media (max-width: 900px) { .comp-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .comp-cards { grid-template-columns: repeat(2, 1fr); } }

/* Catalog thumbnails + inline new-child form */
.cat-thumb { width: 48px; height: 48px; object-fit: contain; background: #fff; border: 1px solid #e5e7eb; border-radius: 4px; }
.cat-newchild { border: 1px solid #e5e7eb; border-radius: 8px; padding: .75rem 1rem; margin: .5rem 0 .75rem; background: #fafafa; }
.cat-newchild h5 { margin: 0 0 .5rem; }
.cat-childedit { border: 1px solid #7c3aed; border-radius: 8px; padding: .75rem 1rem; margin: 0 0 1rem; background: #faf5ff; }
.cat-childedit-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.cat-childedit-head > div { display: flex; align-items: center; gap: .75rem; }

/* Toggle switch (component / product) */
.switch-field { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 .75rem; }
.switch-label { color: #444; font-size: .9rem; }
.switch { position: relative; display: inline-block; width: 42px; height: 22px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider { position: absolute; inset: 0; cursor: pointer; background: #cbd5e1; border-radius: 22px; transition: .15s; }
.switch .slider::before { content: ""; position: absolute; height: 16px; width: 16px; left: 3px; bottom: 3px; background: #fff; border-radius: 50%; transition: .15s; }
.switch input:checked + .slider { background: #2563eb; }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch-state { font-size: .9rem; font-weight: 600; color: #374151; }

/* Catalog cards view */
.cat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: .5rem; }
.cat-card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.cat-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.cat-card-img { position: relative; height: 150px; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid var(--border); }
.cat-card.is-composite { border-color: #7c3aed; box-shadow: 0 0 0 1px #7c3aed; }
.cat-badge { position: absolute; top: 6px; left: 6px; background: #7c3aed; color: #fff; font-size: .7rem; font-weight: 600; padding: .12rem .4rem; border-radius: 4px; letter-spacing: .02em; }
.cat-badge-inline { background: #7c3aed; color: #fff; font-size: .72rem; font-weight: 600; padding: .1rem .4rem; border-radius: 4px; }
.role-tag { font-size: .72rem; font-weight: 600; padding: .08rem .4rem; border-radius: 4px; white-space: nowrap; }
.role-tag.product { background: #dcfce7; color: #166534; }
.role-tag.part { background: #fef3c7; color: #92400e; }
.cat-card-img img { max-width: 100%; max-height: 150px; object-fit: contain; }
.cat-card-body { padding: .6rem .7rem; display: flex; flex-direction: column; gap: .2rem; }
.cat-card-name { font-weight: 600; font-size: .9rem; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.2em; }
.cat-card-meta { font-size: .8rem; color: var(--muted); }
.cat-card-price { font-weight: 600; margin-top: .15rem; color: var(--accent); }
.cat-card-actions { display: flex; gap: .25rem; margin-top: .5rem; }
.cat-card-actions .link-muted { background: none; border: none; cursor: pointer; font-size: .82rem; padding: .25rem .5rem; border-radius: 5px; color: var(--muted); transition: background .12s ease, color .12s ease; }
.cat-card-actions .link-muted:hover { background: rgba(127, 127, 127, .14); color: var(--text); }
.cat-card-actions .link-muted.danger { color: var(--muted); }
.cat-card-actions .link-muted.danger:hover { background: rgba(217, 45, 32, .14); color: #ff6b5e; }
@media (max-width: 1100px) { .cat-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 800px) { .cat-cards { grid-template-columns: repeat(2, 1fr); } }

/* ---- Line-item pipeline dashboard (/dashboard/items) ----
   Scoped under .items-dash (scoped .razor.css does not work in this app). Amber #b45309 and
   red #b00020 match the day-count colors used elsewhere; dark theme lightens them below. */
.items-dash h1 { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.items-dash .ichips { display: flex; gap: .75rem; flex-wrap: wrap; margin: .75rem 0 1rem; }
.items-dash .ichip { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .9rem; min-width: 7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fbfbfd); }
.items-dash .ichip-num { font-size: 1.4rem; font-weight: 700; line-height: 1.1; color: var(--text, #1f2430); font-variant-numeric: tabular-nums; }
.items-dash .ichip-lbl { font-size: .74rem; color: var(--muted); white-space: nowrap; }
.items-dash .ichip.amber .ichip-num { color: #b45309; }
.items-dash .ichip.red .ichip-num { color: #b00020; }
.items-dash .grid th.dt, .items-dash .grid td.dt { text-align: center; padding: .45rem .5rem; font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.items-dash .grid td.dt.todo { color: #c2c5cc; }
.items-dash .grid td.days { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.items-dash .grid td.days.amber { color: #b45309; }
.items-dash .grid td.days.red { color: #b00020; font-weight: 700; }
[data-theme="dark"] .items-dash .grid td.dt.todo { color: #4b5563; }
[data-theme="dark"] .items-dash .ichip.amber .ichip-num,
[data-theme="dark"] .items-dash .grid td.days.amber { color: #f0a24b; }
[data-theme="dark"] .items-dash .ichip.red .ichip-num,
[data-theme="dark"] .items-dash .grid td.days.red { color: #ff7a7a; }

/* Deliverable rollup rows: clickable (modal breakdown), a child-count badge on composite
   parents, and a "+N more" hint when the children span several suppliers. */
.items-dash .ip-grid tbody tr { cursor: pointer; }
.items-dash .par-badge { display: inline-block; margin-left: .25rem; padding: .05rem .4rem; border-radius: 999px; background: var(--surface-2, #eef1f5); color: var(--muted); font-size: .72rem; font-weight: 700; white-space: nowrap; }
.items-dash .sup-more { color: var(--muted); font-size: .78rem; white-space: nowrap; }

/* Click-through deliverable detail modal — the whole child set as ONE aligned matrix.
   Stage dates + the gap chain between reached stages; amber/red match the grid. */
.ipd-card { width: 1000px; max-width: 96vw; }
/* Detail modal as ONE matrix: the stage labels are the header row (the legend, shown once, with
   arrows), and each child is an identity row + a dates row + a gaps row underneath — columns line
   up with the header so the reader scans straight down. Borders are suppressed inside a child group
   and drawn only ABOVE each child head to separate deliverables. */
.ipd-matrix { table-layout: auto; }
.ipd-matrix thead th.dt { background: transparent; padding: .25rem .35rem .5rem; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--border); }
.ipd-matrix thead .pstatus-badge { font-size: .7rem; padding: .1rem .45rem; }
.ipd-matrix .ipd-arrow { color: var(--muted); margin-left: .3rem; font-weight: 400; }
.ipd-matrix td { border-bottom: none; }
.ipd-matrix tbody tr:hover { background: transparent; }
.ipd-matrix .ipd-child-dates td.dt { padding: .2rem .35rem .35rem; }
.ipd-matrix .ipd-child-head td { border-top: 1px solid var(--border); padding: .7rem .3rem .1rem; }
.ipd-matrix tbody tr.ipd-child-head:first-child td { border-top: none; padding-top: .3rem; }
/* Detail-modal hero: big product photo + item info, sitting above the aligned stage strip. */
.ipd-hero { display: flex; gap: 1.1rem; align-items: flex-start; padding: .35rem 0 .6rem; }
.ipd-hero-img { flex: 0 0 auto; width: 190px; height: 190px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); background: #f1f5f9; display: block; }
.ipd-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ipd-hero-img.none { background: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(0,0,0,.045) 8px, rgba(0,0,0,.045) 9px); }
.ipd-hero-img[href]:hover { border-color: var(--accent); }
.ipd-hero-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .45rem; padding-top: .15rem; }
.ipd-hero-title { font-size: 1.1rem; line-height: 1.25; }
.ipd-hero-title strong { font-weight: 700; }
.ipd-hero-title .iname { margin-left: .45rem; color: var(--text); overflow-wrap: anywhere; }
.ipd-hero-meta { font-size: .9rem; color: var(--muted); }
.ipd-hero-status { display: flex; align-items: center; gap: .7rem; margin-top: .15rem; flex-wrap: wrap; }
.ipd-hero-status .days { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ipd-hero-status .days.amber { color: #b45309; }
.ipd-hero-status .days.red { color: #b00020; }
[data-theme="dark"] .ipd-hero-img { background: var(--surface-3); }
[data-theme="dark"] .ipd-hero-img.none { background: repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(255,255,255,.05) 8px, rgba(255,255,255,.05) 9px); }
[data-theme="dark"] .ipd-hero-status .days.amber { color: #f0a24b; }
[data-theme="dark"] .ipd-hero-status .days.red { color: #ff7a7a; }

/* ---- Finance / Pipeline list view (legacy PIPELINE tab replica) ---- */
.seg { display: inline-flex; gap: .25rem; }
.pl-summary { width: auto; min-width: 34rem; margin: .2rem 0 1rem; }
.pl-summary th, .pl-summary td { padding: .4rem .85rem; }
.pl-summary tbody td:first-child { font-weight: 600; }
.pl-scroll { max-height: 64vh; }
.pl-grid th.ctr, .pl-grid td.ctr { text-align: center; }
.pl-grid th.num, .pl-grid td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pl-grid td.pl-name { max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-grid th.pl-mark, .pl-grid td.pl-mark { width: 1.5rem; padding-left: .3rem; padding-right: 0; text-align: center; }
.pl-ico { display: inline-flex; vertical-align: -2px; }
.pl-ico-deal { color: #b45309; }   /* pipeline deal (manual) — funnel */
.pl-ico-proj { color: #16a34a; }   /* awarded project — check */
[data-theme="dark"] .pl-ico-deal { color: #f0a24b; }
[data-theme="dark"] .pl-ico-proj { color: #4ade80; }

/* Top line: summary box + status donut side by side */
.pl-topline { display: flex; gap: 1.5rem; align-items: flex-start; flex-wrap: wrap; margin: .2rem 0 1rem; }
.pl-status { display: flex; align-items: center; gap: 1rem; border: 1px solid var(--border); border-radius: 10px; padding: .6rem 1rem; background: var(--surface, #fff); }
.pl-donut { color: var(--text, #1f2330); flex: 0 0 auto; }
.pl-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.pl-legend li { display: flex; align-items: baseline; gap: .5rem; font-size: .88rem; white-space: nowrap; }
.pl-legend .sw { flex: 0 0 auto; width: .7rem; height: .7rem; border-radius: 2px; align-self: center; }
.pl-legend .l { flex: 1 1 auto; min-width: 5rem; }
.pl-legend strong { font-variant-numeric: tabular-nums; }
.pl-legend .g { font-size: .78rem; }
[data-theme="dark"] .pl-status { background: var(--surface-2); }

/* Project-size coloured text — applies to both the Gross Profit and Size cells */
.pl-medium { color: #1a7a33; font-weight: 700; }
.pl-large { color: #0b63c4; font-weight: 700; }
.pl-negative { color: #b00020; font-weight: 700; }
[data-theme="dark"] .pl-medium { color: #4ade80; }
[data-theme="dark"] .pl-large { color: #6fb0ff; }
[data-theme="dark"] .pl-negative { color: #ff7a7a; }

/* Stage pills — pale-yellow to green as the deal advances (legacy gradient); light bg + dark ink both themes */
.pl-stage { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; color: #1f2937; white-space: nowrap; }
.pl-stage.stg-newopp    { background: rgb(254,255,230); }
.pl-stage.stg-proposal  { background: rgb(228,247,143); }
.pl-stage.stg-strategic { background: rgb(191,239,136); }
.pl-stage.stg-closing   { background: rgb(151,228,126); }
.pl-stage.stg-preorder  { background: rgb(121,220,120); }
.pl-stage.stg-won       { background: rgb(107,216,107); }
.pl-stage.stg-lost      { background: #e5e7eb; color: #6b7280; }

/* Kanban board wrapper (secondary view) */
.pl-board { display: flex; gap: .75rem; overflow-x: auto; align-items: flex-start; }

/* Receivables/payables combined summary modal (charts) */
.tabs .rsum-btn { margin-left: auto; align-self: center; margin-bottom: .3rem; }
.rsum-card { width: 1080px; max-width: 96vw; max-height: 92vh; overflow-y: auto; }
.rsum-card h4 { margin: 1.1rem 0 .45rem; }
.rsum-charts { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.rsum-chart { color: var(--text); }
.rsum-chart.wide { overflow-x: auto; }
.rsum-chart svg { display: block; max-width: 100%; height: auto; }
.rsum-chart.wide svg { max-width: none; }
/* Accounting-style statement header: in, out, rule, net — plus aged mini-cards beside it. */
.rsum-head { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: stretch; margin: .25rem 0 .4rem; }
.rsum-stmt { flex: 0 1 30rem; border: 1px solid var(--border); border-radius: 12px; padding: .8rem 1.15rem .9rem; background: var(--surface, #fbfbfd); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.rsum-stmt .row { display: flex; justify-content: space-between; align-items: baseline; gap: 2.5rem; padding: .3rem 0; font-size: .95rem; }
.rsum-stmt .row .val { font-variant-numeric: tabular-nums; font-weight: 600; }
.rsum-stmt .row.net { border-top: 2px solid var(--border); margin-top: .35rem; padding-top: .55rem; font-weight: 700; font-size: 1.02rem; }
.rsum-stmt .row.net .val { font-size: 1.3rem; font-weight: 800; }
.rsum-stmt .val.in { color: #1a7a3a; }
.rsum-stmt .val.out { color: #b00020; }
.rsum-aside { display: flex; flex-direction: column; gap: .6rem; justify-content: center; }
.rsum-mini { border: 1px solid var(--border); border-radius: 10px; padding: .5rem .95rem; display: flex; flex-direction: column; gap: .05rem; background: var(--surface, #fbfbfd); box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.rsum-mini .n { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.rsum-mini .l { font-size: .74rem; color: var(--muted); }
[data-theme="dark"] .rsum-stmt, [data-theme="dark"] .rsum-mini { background: var(--surface-2); box-shadow: none; }
[data-theme="dark"] .rsum-stmt .val.in { color: #4ade80; }
[data-theme="dark"] .rsum-stmt .val.out { color: #ff7a7a; }

/* Pipeline list rows open the SHARED .ctx-menu (defined with the other overlays) on right-click. */
.pl-grid tr.pl-manual { cursor: context-menu; }

/* ---- Document-lineage trace board (/projects/{id}/trace) ---- */
/* Viewport-bounded: tall graphs scroll INSIDE the box, so the horizontal scrollbar
   stays on-screen instead of sitting below thousands of pixels of item rows. */
.trace-wrap { overflow: auto; max-height: calc(100vh - 240px); min-height: 220px; overscroll-behavior: contain;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface, #fff); padding: .25rem; }
.trace-svg { font-family: inherit; display: block; }
.tr-lane { font-size: 12px; font-weight: 700; fill: currentColor; opacity: .65; }
.tr-sep { stroke: currentColor; opacity: .07; }
.tr-edge { fill: none; stroke: #94a3b8; stroke-width: 1.3; opacity: .5; transition: opacity .15s ease, stroke .15s ease; }
.tr-edge.lit { stroke: var(--accent); stroke-width: 2.2; opacity: 1; }
.tr-edge.dim { opacity: .07; }
.tr-node { cursor: pointer; transition: opacity .15s ease; }
.tr-node rect { stroke: rgba(0,0,0,.08); stroke-width: 1; }
.tr-node:hover rect { filter: brightness(.96); }
.tr-node.dim { opacity: .16; }
.tr-node.sel rect { stroke: var(--accent); stroke-width: 2.5; }
.tr-l1 { font-size: 12px; font-weight: 700; }
.tr-l2 { font-size: 10px; opacity: .8; }
/* Self-contained lane tints (light bg + own ink) — legible in every theme, matching the stage pills. */
.tn-0 rect { fill: #ececf0; } .tn-0 text { fill: #3f3f46; }   /* offer */
.tn-1 rect { fill: #f1f5f9; } .tn-1 text { fill: #0f172a; }   /* items */
.tn-2 rect { fill: #e2e8f0; } .tn-2 text { fill: #334155; }   /* rfq */
.tn-3 rect { fill: #ede9fe; } .tn-3 text { fill: #6d28d9; }   /* quotation */
.tn-4 rect { fill: #dbeafe; } .tn-4 text { fill: #1d4ed8; }   /* supplier po */
.tn-5 rect { fill: #ccfbf1; } .tn-5 text { fill: #0f766e; }   /* supplier invoice */
.tn-6 rect { fill: #fef3c7; } .tn-6 text { fill: #b45309; }   /* client po */
.tn-7 rect { fill: #dcfce7; } .tn-7 text { fill: #15803d; }   /* client invoice */
.tn-8 rect { fill: #e0e7ff; } .tn-8 text { fill: #4338ca; }   /* ledger */
.tn-9 rect { fill: #fce7f3; } .tn-9 text { fill: #be185d; }   /* bank */
@media (prefers-reduced-motion: reduce) { .tr-edge, .tr-node { transition: none; } }
.ipd-matrix .ipd-gaps-row td { padding: 0 .3rem .3rem; }
[data-theme="dark"] .ipd-matrix .chead .days.amber { color: #f0a24b; }
[data-theme="dark"] .ipd-matrix .chead .days.red { color: #ff7a7a; }
.ipd-gaps { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .15rem .5rem; font-size: .8rem; color: var(--muted); }
.ipd-gaps .gap-seg strong { color: var(--text); font-variant-numeric: tabular-nums; }
.ipd-gaps .gap-cur { font-weight: 700; font-variant-numeric: tabular-nums; }
.ipd-gaps .gap-cur.amber { color: #b45309; }
.ipd-gaps .gap-cur.red { color: #b00020; }
[data-theme="dark"] .items-dash .par-badge { background: var(--surface-2); }
[data-theme="dark"] .ipd-gaps .gap-cur.amber { color: #f0a24b; }
[data-theme="dark"] .ipd-gaps .gap-cur.red { color: #ff7a7a; }

/* Grouped grid: the group-header subtitle (count + worst day-gap) and the row camera indicator. */
.items-dash .grp-count { font-weight: 400; color: var(--muted); font-size: .82rem; margin-left: .4rem; }
.items-dash .cam-badge { font-size: .8rem; margin-left: .15rem; }
/* Collapsible group headers: whole row toggles; chevron shows open/closed. */
.items-dash .grid tr.grp-head { cursor: pointer; user-select: none; }
.items-dash .grid tr.grp-head:hover td { background: #e4e9f1; }
.items-dash .grp-toggle { display: inline-block; width: 1.1em; color: var(--muted); font-size: .78rem; }
[data-theme="dark"] .items-dash .grid tr.grp-head:hover td { background: var(--surface-3); }

/* Leading item-photo thumbnail column — identify a line by picture, not just text. */
.items-dash .grid th.thumb-col, .items-dash .grid td.thumb-col { width: 44px; padding: .25rem .35rem; text-align: center; }
.ip-thumb { width: 34px; height: 34px; object-fit: cover; border-radius: 5px; display: inline-block; vertical-align: middle; background: #f1f5f9; border: 1px solid var(--border); }
.ip-thumb-none { background: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(0,0,0,.04) 5px, rgba(0,0,0,.04) 6px); }
[data-theme="dark"] .ip-thumb { background: var(--surface-3); }
[data-theme="dark"] .ip-thumb-none { background: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,255,255,.05) 5px, rgba(255,255,255,.05) 6px); }

/* Product photo leading each child block in the detail modal (opens full size). */

/* QC photo thumbnails in the detail modal — one strip per child, opens full size in a new tab. */
.ipd-matrix .ipd-photo-row td { padding: .1rem .3rem .55rem; }
.ipd-photos { display: flex; flex-wrap: wrap; gap: .5rem; }
.ipd-photo { display: inline-flex; flex-direction: column; align-items: center; gap: .2rem; width: 94px; padding: .3rem; text-decoration: none; border: 1px solid var(--border); border-radius: 7px; background: var(--surface, #fff); transition: border-color .15s ease; }
.ipd-photo:hover { border-color: var(--accent); }
.ipd-photo img { width: 84px; height: 84px; object-fit: cover; border-radius: 4px; display: block; background: #f1f5f9; }
.ipd-photo-cap { font-size: .68rem; color: var(--muted); text-align: center; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ipd-photo.fail { border-color: #f0a3a3; }
.ipd-photo.fail .ipd-photo-cap { color: #b00020; font-weight: 600; }
.ipd-photo.pass { border-color: #a7e3bf; }
[data-theme="dark"] .ipd-photo { background: var(--surface-2); }
[data-theme="dark"] .ipd-photo img { background: var(--surface-3); }
[data-theme="dark"] .ipd-photo.fail .ipd-photo-cap { color: #ff7a7a; }

/* ============================ Finance reporting (/finance/reports) ========= */
.rep-lede { max-width: 74ch; color: var(--muted); font-size: .92rem; line-height: 1.5; margin: .1rem 0 1rem; }
.rep-lede strong { color: var(--text, #1f2330); }
.rep-error { border: 1px solid #f0c2c2; background: #fdf1f1; color: #8a2020; border-radius: 10px;
    padding: .7rem 1rem; margin: .5rem 0 1rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
[data-theme="dark"] .rep-error { background: #2a1618; border-color: #5a2b2b; color: #ff9c9c; }

/* Section tab bar (mirrors .tabbar but self-scoped) */
.rep-tabs { display: flex; gap: .1rem; border-bottom: 1px solid var(--border); margin: 0 0 1.1rem; flex-wrap: wrap; }
.rep-tabs .tab { background: none; border: none; padding: .5rem .95rem; cursor: pointer; color: var(--muted);
    font-size: .92rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.rep-tabs .tab:hover { color: #1f2330; }
.rep-tabs .tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.rep-tabs .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
[data-theme="dark"] .rep-tabs .tab:hover { color: #e6e9ef; }

/* Forecast/pipeline rows: shown but flagged as not summed into the realised totals. */
.rep-grid tr.rep-forecast td { background: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(0,0,0,.025) 6px, rgba(0,0,0,.025) 7px); }
[data-theme="dark"] .rep-grid tr.rep-forecast td { background: repeating-linear-gradient(-45deg, transparent, transparent 6px, rgba(255,255,255,.04) 6px, rgba(255,255,255,.04) 7px); }
.rep-tag { display: inline-block; margin-left: .4rem; padding: .05rem .4rem; font-size: .68rem; font-weight: 600;
    letter-spacing: .02em; text-transform: uppercase; color: #b45309; background: #fef3c7; border-radius: 999px; vertical-align: middle; }
[data-theme="dark"] .rep-tag { color: #fbbf24; background: rgba(251,191,36,.14); }

/* VAT filing (lock/unlock a quarter) */
.vat-filing { display: flex; align-items: center; gap: .5rem; font-size: .85rem; flex-wrap: wrap; }
.vat-lock { font-weight: 600; color: var(--muted); }
.vat-lock.on { color: #1a7a3a; }
[data-theme="dark"] .vat-lock.on { color: #4ade80; }
.vat-lock-msg { max-width: 74ch; margin: .3rem 0 .7rem; font-size: .85rem; color: #1a7a3a;
    background: #f0fbf4; border: 1px solid #cbead6; border-radius: 8px; padding: .45rem .8rem; }
[data-theme="dark"] .vat-lock-msg { color: #4ade80; background: #12241a; border-color: #1f3a2a; }

/* VAT per-transaction review (lock each line) */
.vat-review { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 .8rem; font-size: .85rem; }
.vat-review-count { color: var(--muted); white-space: nowrap; }
.vat-review-count strong { color: #1a7a3a; }
[data-theme="dark"] .vat-review-count strong { color: #4ade80; }
.vat-review-bar { flex: 1 1 180px; max-width: 320px; height: 8px; border-radius: 999px; background: rgba(0,0,0,.08); overflow: hidden; }
.vat-review-bar span { display: block; height: 100%; background: #1a7a3a; border-radius: 999px; transition: width .25s ease; }
[data-theme="dark"] .vat-review-bar { background: rgba(255,255,255,.1); }
[data-theme="dark"] .vat-review-bar span { background: #4ade80; }
.vat-lockcell { white-space: nowrap; }
.vat-lockbtn { cursor: pointer; font-size: .74rem; font-weight: 600; padding: .18rem .5rem; border-radius: 999px;
    border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.vat-lockbtn:hover { filter: brightness(1.05); }
.vat-lockbtn.on { background: #f0fbf4; color: #1a7a3a; border-color: #a7e3bf; }
.vat-lockbtn:disabled { opacity: .5; cursor: default; }
.rep-grid tr.vat-txn-locked td { background: #f5fbf7; }
[data-theme="dark"] .vat-lockbtn.on { background: #12241a; color: #4ade80; border-color: #1f3a2a; }
[data-theme="dark"] .rep-grid tr.vat-txn-locked td { background: #101e16; }

/* Section heading inside an expanded RFQ ("Requested items" above the quotations) */
.rfq-section-h { margin: .6rem 0 .3rem; font-size: 1rem; }

/* Supplier picker in the "send RFQ to more suppliers" dialog */
.dup-sup-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: .35rem .6rem; margin: .4rem 0; }
.dup-sup-list label.check { display: block; margin: .18rem 0; }

/* Quote line editor: give number inputs a sane fixed width (browser default is needlessly wide) */
.quote-lines input[type="number"] { width: 5.5rem; }

/* Quotation editor: optional side-by-side PDF viewer (line entry left, supplier quote right) */
.quote-editor.with-viewer { display: flex; gap: 1rem; align-items: flex-start; }
.quote-editor.with-viewer .quote-lines { flex: 1 1 50%; min-width: 0; overflow-x: auto; }
.quote-editor .quote-viewer { flex: 1 1 50%; min-width: 360px; position: sticky; top: .5rem; }
.quote-editor .quote-viewer iframe { width: 100%; height: 80vh; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
/* In viewer mode, tighten the line table so it fits without horizontal scroll and the PDF gets the space */
.quote-editor.with-viewer .quote-lines { font-size: .84rem; }
.quote-editor.with-viewer .quote-lines th,
.quote-editor.with-viewer .quote-lines td { padding: .2rem .3rem; }
.quote-editor.with-viewer .quote-lines input { padding: .15rem .3rem; }
.quote-editor.with-viewer .quote-lines input[type="number"] { width: 4.2rem; }
.quote-editor.with-viewer .quote-lines td:last-child input { min-width: 5rem; }
@media (max-width: 900px) { .quote-editor.with-viewer { flex-direction: column; } .quote-editor .quote-viewer iframe { height: 60vh; } }

.rep-sec { margin-bottom: 1.5rem; }
.rep-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-bottom: .7rem; }
.rep-sec-head h2 { margin: 0; font-size: 1.15rem; }
.rep-h3 { font-size: 1rem; margin: 1.3rem 0 .5rem; }
.rep-yr { font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: .4rem; }
.rep-yr select { padding: .25rem .5rem; }

.rep-chart { border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff);
    padding: .9rem 1.1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); overflow-x: auto; }
[data-theme="dark"] .rep-chart { background: var(--surface-2); box-shadow: none; }

.rep-scroll { overflow-x: auto; }
.rep-grid { font-variant-numeric: tabular-nums; }
.rep-grid.rep-narrow { max-width: 34rem; }
.rep-grid td, .rep-grid th { padding: .45rem .8rem; }
.rep-grid tfoot td { background: #f4f6fa; border-top: 2px solid var(--border); border-bottom: none; }
[data-theme="dark"] .rep-grid tfoot td { background: var(--surface-2); }

/* Two-basis grouped headers: fiscal (sky) vs finance (emerald) column bands */
.rep-grouped th.grp { text-align: center; font-size: .82rem; letter-spacing: .01em; }
.rep-grid .grp-fis { background: rgba(56,189,248,.07); }
.rep-grid .grp-fin { background: rgba(52,211,153,.07); }
.rep-grid th.grp-fis, .rep-grouped th.grp.grp-fis { box-shadow: inset 0 -2px 0 rgba(56,189,248,.55); }
.rep-grid th.grp-fin, .rep-grouped th.grp.grp-fin { box-shadow: inset 0 -2px 0 rgba(52,211,153,.55); }
[data-theme="dark"] .rep-grid .grp-fis { background: rgba(56,189,248,.10); }
[data-theme="dark"] .rep-grid .grp-fin { background: rgba(52,211,153,.10); }

.rep-grand { font-weight: 600; color: #374151; }
[data-theme="dark"] .rep-grand { color: #e6e9ef; }
.rep-grid tr.rep-subtotal td { background: #f7f9fc; border-bottom: 1px solid var(--border); color: var(--muted); }
[data-theme="dark"] .rep-grid tr.rep-subtotal td { background: var(--surface-2); }

.rep-grid tr.rep-balanced td { color: #1a7a3a; font-weight: 600; background: #f0fbf4; }
.rep-grid tr.rep-unbalanced td { color: #b00020; font-weight: 600; background: #fdf1f1; }
[data-theme="dark"] .rep-grid tr.rep-balanced td { color: #4ade80; background: #12241a; }
[data-theme="dark"] .rep-grid tr.rep-unbalanced td { color: #ff7a7a; background: #2a1618; }

.rep-cards { display: flex; gap: 1rem; flex-wrap: wrap; margin: .3rem 0 .5rem; }
.rep-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface, #fff);
    padding: .85rem 1.3rem; min-width: 12rem; box-shadow: 0 1px 3px rgba(0,0,0,.05);
    display: flex; flex-direction: column; gap: .1rem; }
[data-theme="dark"] .rep-card { background: var(--surface-2); box-shadow: none; }
.rep-card-label { font-size: .78rem; color: var(--muted); text-transform: none; }
.rep-card-val { font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.rep-card-sub { font-size: .72rem; color: var(--muted); }

.rep-note { max-width: 74ch; font-size: .82rem; line-height: 1.45; margin-top: .6rem; }