/* StockPlan - a dense, calm working surface for buyers and production planners.
   One family (IBM Plex Sans) with tabular figures; colour is reserved for stock health. */
:root {
    --sp-ink: #1F2A33;
    --sp-ink-soft: #52616D;
    --sp-paper: #F4F6F5;
    --sp-panel: #FFFFFF;
    --sp-rule: #D9DEE2;
    --sp-accent: #1F5F8B;
    --sp-accent-soft: #E3EEF6;
    --sp-short: #B3261E;
    --sp-short-soft: #FBE9E7;
    --sp-low: #9A6700;
    --sp-low-soft: #FFF4D6;
    --sp-ok: #2E7D4F;
    --sp-ok-soft: #E4F3EA;
    /* colours some later sections used with built-in fallbacks - named here so the dark theme can change them */
    --sp-surface: #FFFFFF;
    --sp-line: #DEE2E6;
    --sp-hover: #F1F3F5;
    --sp-select: #E7F1FF;
    --sp-panel-bg: #FFFFFF;
    --bs-body-font-family: "IBM Plex Sans", system-ui, sans-serif;
    --bs-body-color: var(--sp-ink);
    --bs-primary: var(--sp-accent);
    --bs-primary-rgb: 31, 95, 139;
}

html, body { background: var(--sp-paper); color: var(--sp-ink); font-size: 14px; }
.num, td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
h1 { font-size: 1.45rem; font-weight: 600; margin: 0 0 .25rem; letter-spacing: -0.01em; }
h2 { font-size: 1.1rem; font-weight: 600; margin: 1.25rem 0 .5rem; }
.sp-lead { color: var(--sp-ink-soft); margin-bottom: 1rem; max-width: 72ch; }
a { color: var(--sp-accent); }
.btn-primary { --bs-btn-bg: var(--sp-accent); --bs-btn-border-color: var(--sp-accent); --bs-btn-hover-bg: #174A6C; --bs-btn-hover-border-color: #174A6C; }
:focus-visible { outline: 2px solid var(--sp-accent); outline-offset: 2px; }

/* shell */
.sp-shell { display: flex; min-height: 100vh; }
.sp-nav { width: 232px; flex: 0 0 232px; background: var(--sp-ink); color: #C9D3DA; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.sp-brand { display: flex; align-items: center; gap: .6rem; padding: 1.1rem 1.1rem .9rem; color: #fff; font-weight: 600; font-size: 1.1rem; }
.sp-mark { width: 18px; height: 18px; border-radius: 3px; background: linear-gradient(90deg, var(--sp-ok) 0 55%, #E0A72B 55% 80%, var(--sp-short) 80%); }
.sp-menu { display: flex; flex-direction: column; padding-bottom: 1.5rem; }
.sp-group { padding: 1rem 1.1rem .3rem; font-size: .78rem; color: #8797A3; }
.sp-link { display: flex; gap: .6rem; align-items: center; padding: .38rem 1.1rem; color: #C9D3DA; text-decoration: none; border-left: 3px solid transparent; }
.sp-link:hover { color: #fff; background: rgba(255,255,255,.05); }
.sp-link.active { color: #fff; border-left-color: #6FB1DE; background: rgba(255,255,255,.07); }
.sp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sp-topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .55rem 1.5rem; background: var(--sp-panel); border-bottom: 1px solid var(--sp-rule); position: sticky; top: 0; z-index: 20; }
.sp-context { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.sp-context label { display: flex; align-items: center; gap: .5rem; color: var(--sp-ink-soft); margin: 0; }
.sp-context select, .sp-context input { width: auto; }
.sp-user { color: var(--sp-ink-soft); }
.sp-content { padding: 1.25rem 1.5rem 3rem; }

/* panels and toolbars */
.sp-panel { background: var(--sp-panel); border: 1px solid var(--sp-rule); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.sp-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.sp-toolbar .spacer { flex: 1; }
.sp-facts { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--sp-rule); border-radius: 6px; background: var(--sp-panel); margin-bottom: 1rem; }
.sp-fact { padding: .6rem 1rem; border-right: 1px solid var(--sp-rule); min-width: 120px; }
.sp-fact:last-child { border-right: 0; }
.sp-fact .k { color: var(--sp-ink-soft); font-size: .82rem; }
.sp-fact .v { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* data grids */
.sp-grid-wrap { background: var(--sp-panel); border: 1px solid var(--sp-rule); border-radius: 6px; overflow: auto; max-height: calc(100vh - 230px); }
table.sp-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.sp-grid th { position: sticky; top: 0; z-index: 2; background: #EEF1F3; color: var(--sp-ink-soft); font-weight: 500; text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--sp-rule); white-space: nowrap; cursor: default; }
.sp-grid th.sortable { cursor: pointer; }
.sp-grid th.sortable:hover { color: var(--sp-ink); }
.sp-grid td { padding: .38rem .6rem; border-bottom: 1px solid #EDF0F2; vertical-align: middle; }
.sp-grid tbody tr:hover td { background: #F7FAFC; }
.sp-grid tr.selected td { background: var(--sp-accent-soft); }
.sp-grid td.code a { font-weight: 500; text-decoration: none; }
.sp-grid input.form-control-sm, .sp-grid select.form-select-sm { min-width: 80px; }
.sp-grid .rowhead { position: sticky; left: 0; background: #FAFBFB; font-weight: 500; z-index: 1; white-space: nowrap; }
.sp-grid th.rowhead { z-index: 3; background: #EEF1F3; }

.cell-short { color: var(--sp-short); font-weight: 600; }
.cell-low { color: var(--sp-low); }
.cell-ok { color: var(--sp-ok); }
.bg-short td { background: var(--sp-short-soft) !important; }
.tag { display: inline-block; padding: .05rem .45rem; border-radius: 3px; font-size: .78rem; background: #EEF1F3; color: var(--sp-ink-soft); }
.tag-man { background: var(--sp-low-soft); color: var(--sp-low); }
.tag-bom { background: var(--sp-accent-soft); color: var(--sp-accent); }

/* the runway: how many days of stock remain against the item's lead time */
.runway { position: relative; width: 140px; height: 10px; background: #E9EDF0; border-radius: 2px; overflow: hidden; }
.runway > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.runway > i { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--sp-ink); opacity: .55; }
.runway.short > span { background: var(--sp-short); }
.runway.low > span { background: #E0A72B; }
.runway.ok > span { background: var(--sp-ok); }

/* plan chart */
.sp-chart { width: 100%; height: 220px; display: block; }
.sp-chart .axis { stroke: var(--sp-rule); }
.sp-chart text { fill: var(--sp-ink-soft); font-size: 11px; font-family: inherit; }
.legend { display: flex; gap: 1rem; color: var(--sp-ink-soft); font-size: .85rem; margin-top: .25rem; }
.legend span::before { content: ""; display: inline-block; width: 14px; height: 3px; vertical-align: middle; margin-right: .35rem; background: currentColor; }
.legend .avail { color: var(--sp-accent); }
.legend .min { color: var(--sp-short); }
.legend .max { color: var(--sp-ok); }

.nav-tabs .nav-link { color: var(--sp-ink-soft); }
.nav-tabs .nav-link.active { color: var(--sp-ink); font-weight: 500; }
.sp-busy { color: var(--sp-ink-soft); padding: 2rem 0; }
.sp-empty { color: var(--sp-ink-soft); padding: 2rem 1rem; text-align: center; }

#blazor-error-ui { background: var(--sp-short-soft); bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); display: none; left: 0; padding: .6rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }

@media (max-width: 860px) {
    .sp-shell { flex-direction: column; }
    .sp-nav { width: 100%; flex-basis: auto; height: auto; position: static; }
    .sp-content { padding: 1rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---- dialogs and drop-down menus (works orders batch) ---- */
.sp-dialog-backdrop { position: fixed; inset: 0; background: rgba(20, 32, 42, .45); z-index: 1050; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 1rem; overflow: auto; }
.sp-dialog { background: var(--sp-panel); border-radius: 8px; box-shadow: 0 12px 40px rgba(0,0,0,.25); width: 100%; max-width: 640px; }
.sp-dialog.wide { max-width: 960px; }
.sp-dialog-head { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--sp-rule); font-weight: 600; }
.sp-dialog-body { padding: 1rem; }
/* label / value tables (e.g. Stored plans) */
.sp-kv th { font-weight: 500; color: var(--sp-ink-soft); padding: .25rem 1.25rem .25rem 0; vertical-align: top; white-space: nowrap; }
.sp-kv td { padding: .25rem 0; }
/* movable windows: no dimming, the page behind stays usable; drag by the title bar, resize from the corner */
.sp-dialog-backdrop.movable { background: transparent; pointer-events: none; }
.sp-dialog.movable { pointer-events: auto; max-height: 86vh; display: flex; flex-direction: column; resize: both; overflow: hidden; min-width: 320px; min-height: 160px; box-shadow: 0 12px 40px rgba(0,0,0,.35); }
.sp-dialog.movable .sp-dialog-head { cursor: move; user-select: none; flex: none; }
.sp-dialog.movable .sp-dialog-body { overflow: auto; flex: 1 1 auto; }
.sp-dialog.movable .sp-dialog-foot { flex: none; }
.sp-dialog-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1rem; border-top: 1px solid var(--sp-rule); }
.sp-dropwrap { position: relative; display: inline-block; }
.sp-dropdown-backdrop { position: fixed; inset: 0; z-index: 40; }
.sp-dropdown { position: absolute; top: calc(100% + 2px); left: 0; z-index: 41; min-width: 210px; background: var(--sp-panel); border: 1px solid var(--sp-rule); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: .25rem 0; }
.sp-dropdown button, .sp-dropdown a { display: block; width: 100%; text-align: left; background: none; border: 0; padding: .4rem .9rem; color: var(--sp-ink); text-decoration: none; white-space: nowrap; }
.sp-dropdown button:hover, .sp-dropdown a:hover { background: var(--sp-accent-soft); }
.sp-dropdown button:disabled { color: #9AA6AF; background: none; }
.sp-dropdown hr { margin: .25rem 0; }

/* works order component grid: sub-assembly lines indented, BOM lines underlined, shortages coloured as in StockPlan */
.sp-grid tr.clickable td { cursor: pointer; }
.sp-grid td.lev-2 { padding-left: 1.7rem; }
.sp-grid td.lev-3 { padding-left: 2.8rem; }
.sp-grid td.lev-4, .sp-grid td.lev-5, .sp-grid td.lev-6 { padding-left: 3.9rem; }
.wop-bom td.code, .wop-bom td.code a { text-decoration: underline; }
.wop-stockshort td { font-weight: 600; }
.wop-short-ok td { color: var(--sp-ok); }
.wop-short-bad td { color: var(--sp-short); }
.sp-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem 1rem; }
.sp-form-grid .wide2 { grid-column: span 2; }
.sp-form-grid .form-label { margin-bottom: .15rem; font-size: .85rem; color: var(--sp-ink-soft); }
.sp-ro { padding: .25rem .5rem; background: #F3F5F7; border-radius: 4px; min-height: 31px; font-variant-numeric: tabular-nums; }
.sp-log { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; }
.sp-tree-row td:first-child { white-space: nowrap; }
.sp-tree-toggle { display: inline-block; width: 1.2rem; text-align: center; cursor: pointer; color: var(--sp-ink-soft); }
.tag-tag { background: #FFF1D6; color: #8A5A00; }
.sp-banner { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .6rem .9rem; border-radius: 6px; margin-bottom: .75rem; background: var(--sp-low-soft); border: 1px solid #EBD9A8; }

/* plan grid: periods down the side, figures across (as the VB6 plan screen) */
.sp-plan-grid th { white-space: normal; vertical-align: bottom; min-width: 72px; line-height: 1.2; }
.sp-plan-grid th.rowhead { min-width: 110px; }

/* ---- Planning options (OptionFields / default option sets) ---- */
.sp-optlabel { display: flex; align-items: center; margin-bottom: .2rem; }
.sp-optflag { accent-color: #0d6efd; outline: 1px solid #0d6efd55; outline-offset: 1px; }
.sp-optfield { border: 0; padding: 0; margin: 0; min-width: 0; }
.sp-optfield:disabled .form-control, .sp-optfield:disabled .form-select { background-color: #f1f3f5; color: #8a939c; }
.sp-log div { border-bottom: 1px dotted var(--sp-rule); padding: 1px 0; }

/* ---- SpGrid: user-chosen columns, order and widths ---- */
.sp-grid-tools { display: flex; align-items: center; gap: .5rem; margin-bottom: .25rem; font-size: .85rem; }
.sp-grid-tools .spacer { flex: 1; }
.sp-grid th { position: sticky; }
.sp-grid th .sp-col-resize { position: absolute; top: 0; right: 0; width: 6px; height: 100%; cursor: col-resize; user-select: none; }
.sp-grid th .sp-col-resize:hover { background: var(--sp-rule); }
.sp-grid.sp-sized th, .sp-grid.sp-sized td { overflow: hidden; text-overflow: ellipsis; }
body.sp-resizing, body.sp-resizing * { cursor: col-resize !important; user-select: none !important; }
.sp-grid tr.sp-group-row td { background: #F7F9FA; font-weight: 600; }
.sp-col-list { max-height: 360px; overflow: auto; border: 1px solid var(--sp-rule); border-radius: 4px; padding: .25rem .5rem; }
.sp-col-item { display: flex; align-items: center; gap: .5rem; padding: .2rem 0; border-bottom: 1px dotted var(--sp-rule); }
.sp-col-item:last-child { border-bottom: 0; }

/* ---- Plan grid: the TrueDBGrid look of StockPlan for Windows, tidied up ---- */
.sp-plan-wrap { border: 1px solid #9AA4AC; border-radius: 3px; background: #fff; }
table.sp-grid.sp-plan-grid { font-size: .85rem; font-variant-numeric: tabular-nums; border-collapse: separate; border-spacing: 0; }
.sp-plan-grid th {
    background: linear-gradient(#F7F8F9, #E1E5E8); color: #2B3640; font-weight: 600;
    border-right: 1px solid #B9C1C7; border-bottom: 1px solid #9AA4AC; padding: .35rem .5rem; text-align: center;
}
.sp-plan-grid th.num { text-align: center; }
.sp-plan-grid td { border-right: 1px solid #E1E5E8; border-bottom: 1px solid #E1E5E8; padding: .22rem .5rem; height: 1.7rem; }
.sp-plan-grid td.num { text-align: right; }
.sp-plan-grid td.rowhead { background: linear-gradient(90deg, #F2F4F5, #E8ECEE); border-right: 1px solid #B9C1C7; color: #2B3640; }
.sp-plan-grid tr.pc-alt td { background: #FAFBFC; }
.sp-plan-grid tr.pc-alt td.rowhead { background: linear-gradient(90deg, #EEF1F2, #E4E8EA); }
.sp-plan-grid tr.pc-bfwd td { background: #ECEEEF; font-style: italic; color: #4A5560; border-bottom: 2px solid #B9C1C7; }
.sp-plan-grid tr.pc-bfwd td.rowhead { background: #C0C0C0; color: #1E262D; font-style: normal; }
.sp-plan-grid tbody tr:hover td { background: #EAF3FB; }
.sp-plan-grid tr.pc-selected td { background: #D6E8F8 !important; border-top: 1px solid #3A7BC8; border-bottom: 1px solid #3A7BC8; }
.sp-plan-grid tr.pc-selected td.rowhead { background: #3A7BC8 !important; color: #fff; }
.sp-plan-grid td.pc-below-min { background: #FFD6D6 !important; color: #8A1C1C; font-weight: 600; }
.sp-plan-grid td.pc-above-max { background: #D2F7FA !important; color: #0B5E66; font-weight: 600; }
.sp-plan-grid td.pc-negative { color: #B00020; }
.sp-plan-grid td.pc-mandem { background: #FFE3C2 !important; color: #8A4B00; }
.sp-plan-grid td.pc-planord { color: #0B57A4; font-weight: 700; }
.sp-plan-grid td.pc-required { color: #B00020; font-weight: 600; }
.sp-plan-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; margin-top: .5rem; font-size: .8rem; }
.sp-plan-legend .pc-key { display: inline-block; width: .9rem; height: .9rem; border: 1px solid #9AA4AC; border-radius: 2px; margin-right: .35rem; vertical-align: -2px; }
.sp-plan-legend .pc-key.pc-below-min { background: #FFD6D6; }
.sp-plan-legend .pc-key.pc-above-max { background: #D2F7FA; }
.sp-plan-legend .pc-key.pc-mandem { background: #FFE3C2; }
.sp-plan-legend .pc-key.pc-planord { background: #fff; border-color: #0B57A4; box-shadow: inset 0 0 0 2px #0B57A4; }
.sp-plan-legend .pc-key.pc-required { background: #fff; border-color: #B00020; box-shadow: inset 0 0 0 2px #B00020; }
.sp-grid td.sp-drill { cursor: zoom-in; }
.sp-grid td.sp-drill:hover { text-decoration: underline dotted; text-underline-offset: 3px; }

/* ---- Plan screen: what-if bar and list navigation ---- */
.sp-whatif { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; padding: .45rem .75rem; margin: .25rem 0 .75rem; background: #F7F9FA; border: 1px solid var(--sp-rule); border-radius: 6px; font-size: .85rem; }
.sp-whatif.active { background: #FFF8E6; border-color: #F0C36D; }
.sp-whatif-group { display: flex; flex-wrap: wrap; gap: .25rem .9rem; align-items: center; }
.sp-whatif-group label { display: inline-flex; align-items: center; gap: .3rem; margin: 0; white-space: nowrap; }
.sp-whatif-label { font-weight: 600; color: var(--sp-ink-soft); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
.sp-nav-pos { min-width: 5.5rem; }

/* ---- Shutdown calendar ---- */
.sd-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .8rem; }
.sd-key { display: inline-block; width: .9rem; height: .9rem; border: 1px solid #9AA4AC; border-radius: 2px; margin-right: .35rem; vertical-align: -2px; }
.sd-months { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.sd-month { border: 1px solid var(--sp-rule); border-radius: 6px; padding: .5rem; background: #fff; }
.sd-title { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }
.sd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; font-size: .78rem; text-align: center; }
.sd-head { color: var(--sp-ink-soft); font-weight: 600; }
.sd-day { padding: .15rem 0; border-radius: 3px; }
.sd-ord, .sd-key.sd-ord { background: #FFD6D6; color: #8A1C1C; }
.sd-del, .sd-key.sd-del { background: #FFE3C2; color: #8A4B00; }
.sd-both, .sd-key.sd-both { background: #E3D2F5; color: #4B2380; font-weight: 600; }
.sd-weekend, .sd-key.sd-weekend { background: #EEF1F3; color: #6B7680; }
.sd-today, .sd-key.sd-today { outline: 2px solid #1F5F8B; outline-offset: -2px; }
.sd-past { opacity: .45; }

/* ---- History tab ---- */
.sp-grid tr.hist-omitted td { background: #FFF1E0 !important; color: #7A5A2E; }
.sp-grid tr.hist-omitted.selected td { background: #F7DDBA !important; }
.sp-grid td.hist-reason { color: #8A4B00; font-size: .82rem; }
.hist-key { display: inline-block; width: .9rem; height: .9rem; background: #FFF1E0; border: 1px solid #E0B97A; border-radius: 2px; margin-right: .3rem; vertical-align: -2px; }
.sp-hist-chart { width: 100%; height: auto; display: block; }

/* the drill cursor: a small drill for cells you can double-click to see how a figure is made up */
.sp-grid td.sp-drill {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'><g stroke='%23202A33' stroke-width='1.2' stroke-linejoin='round'><path d='M2 2 L9 4 L7 7 Z' fill='%23C9D3DB'/><rect x='7' y='4.5' width='6' height='4' transform='rotate(45 10 6.5)' fill='%23E8A33D'/><rect x='10.5' y='9' width='12' height='8' rx='1.5' transform='rotate(45 16.5 13)' fill='%231F5F8B'/><path d='M19 20 L24 25' stroke-width='2.5' stroke-linecap='round'/></g></svg>") 2 2, zoom-in;
}

/* Purchase order creation (grdOrdList FetchRowStyle / FetchCellStyle) */
.sp-grid tr.poc-created td { background: var(--sp-ok-soft); }
.sp-grid tr.poc-failed td, .sp-grid tr.poc-notready td { background: var(--sp-short-soft); }
.sp-grid tr.poc-notready td { color: var(--sp-ink-soft); }
.sp-grid tr.poc-recalc td { background: var(--sp-low-soft); }
.sp-grid td.poc-changed { background: #FFF1A8 !important; }
.sp-grid td.poc-sugg { background: var(--sp-ok-soft); }
.sp-grid td.poc-rushed { background: #F7D9D6 !important; }
.poc-totals { gap: 1.25rem; font-variant-numeric: tabular-nums; }
.poc-totals > span .text-secondary { margin-right: .3rem; }

/* The selected row, like the VB6 TrueDBGrid MarqueeStyle = Highlight Row: a solid bar that shows over the
   warning colours (short / below min cover) and over hover. */
.sp-grid tr.sp-marquee td,
.sp-grid tbody tr.sp-marquee:hover td { background: #1F5F8B !important; color: #fff !important; border-bottom-color: #174A6C; }
.sp-grid tr.sp-marquee td a,
.sp-grid tr.sp-marquee td .cell-short,
.sp-grid tr.sp-marquee td .cell-low,
.sp-grid tr.sp-marquee td.cell-short,
.sp-grid tr.sp-marquee td.cell-low,
.sp-grid tr.sp-marquee td .num { color: #fff !important; }
.sp-grid tr.sp-marquee td:first-child { box-shadow: inset 4px 0 0 #E0A72B; }

/* Options sub-tabs (frmOptions tabs) and the save bar fixed to the bottom of the screen */
.sp-subtabs .nav-link { padding: .35rem .9rem; font-size: .9rem; }
.sp-subtabs .nav-link.sp-tab-error { color: var(--sp-short); }
.sp-subtabs .nav-link.sp-tab-error.active { border-bottom-color: var(--sp-short); }
.sp-dirty-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #E0A72B; margin-left: .35rem; vertical-align: middle; }
.sp-savebar { position: sticky; bottom: 0; z-index: 15; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-top: 1rem; padding: .55rem 1rem; background: var(--sp-panel); border: 1px solid var(--sp-rule); border-radius: 6px;
    box-shadow: 0 -4px 14px rgba(31, 42, 51, .08); }
.sp-savebar .spacer { flex: 1 1 auto; }

/* BOM / Used in trees */
.sp-bomtree .bt-indent { display: inline-block; }
.sp-bomtree .bt-caret { display: inline-block; width: 18px; text-align: center; color: var(--sp-ink-soft); text-decoration: none; }
.sp-bomtree tr.bt-top td { font-weight: 500; }
.tag-prod { background: #EEF1F3; color: var(--sp-ink-soft); }

/* Saved filters box and the "filter active" line above filtered lists */
.sp-savedfilter-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .4rem; padding: .4rem .6rem; background: var(--sp-accent-soft); border-radius: 4px; }
.sp-filter-active { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .6rem; padding: .4rem .75rem; border: 1px solid var(--sp-accent); border-left-width: 4px; border-radius: 4px; background: var(--sp-accent-soft); color: var(--sp-ink); font-size: .9rem; }
.sp-filter-active .bi-funnel-fill { color: var(--sp-accent); }

/* Left menu groups that fold away */
.sp-group-toggle { display: flex; gap: .6rem; align-items: center; width: 100%; margin-top: .35rem; padding: .45rem 1.1rem; background: none; border: 0; border-left: 3px solid transparent; color: #AEBBC5; font-size: .9rem; text-align: left; cursor: pointer; }
.sp-group-toggle:hover { color: #fff; background: rgba(255,255,255,.05); }
.sp-group-toggle .sp-chev { margin-left: auto; font-size: .75rem; transition: transform .15s ease; }
.sp-group-toggle.open .sp-chev { transform: rotate(90deg); }
.sp-group-toggle.has-current:not(.open) { color: #fff; border-left-color: #6FB1DE; }
.sp-sub .sp-link { padding-left: 2.3rem; font-size: .9rem; }
.sp-link.sp-disabled { color: #6F808C; cursor: default; }
.sp-link.sp-disabled:hover { background: none; color: #6F808C; }
.sp-soon { margin-left: auto; padding: 0 .4rem; border-radius: 3px; background: rgba(255,255,255,.08); font-size: .7rem; }

/* Plan list criteria summary next to the Criteria button */
.sp-criteria { max-width: 70ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-criteria .bi-funnel-fill { color: var(--sp-accent); }

/* Accounts data page: day-to-day tables first, the less used lists lighter underneath */
.sp-subhead { font-size: 1.05rem; font-weight: 600; margin: 1rem 0 .2rem; }
.sp-subhead-minor { font-size: .95rem; font-weight: 500; color: var(--sp-ink-soft); margin: 1.4rem 0 .2rem; }
.sp-grid-minor td { font-size: .85rem; padding-top: .25rem; padding-bottom: .25rem; }
.sp-grid-minor td:first-child { color: var(--sp-ink-soft); }

/* Explain planned orders */
.sp-explain { border: 1px solid var(--sp-rule); border-left: 4px solid var(--sp-accent); border-radius: 6px; padding: .75rem 1rem; margin-bottom: .9rem; background: var(--sp-panel); }
.sp-explain h3 { font-size: 1rem; font-weight: 600; margin: 0 0 .4rem; }
.sp-explain details summary { cursor: pointer; color: var(--sp-accent); font-size: .9rem; }
.sp-explain-head { font-weight: 600; font-size: .9rem; margin-top: .6rem; }
.sp-explain-lines { margin: .2rem 0 0; padding-left: 1.2rem; font-size: .88rem; }
.sp-explain-lines li.sub { list-style: none; margin-left: 1rem; color: var(--sp-ink-soft); }

/* ---------- printed documents (works orders, component lists) ---------- */
.sp-print-root { background: #e9ecef; min-height: 100vh; }
.sp-print-bar { position: sticky; top: 0; z-index: 10; display: flex; gap: .75rem; align-items: center; padding: .6rem 1rem; background: #fff; border-bottom: 1px solid #dee2e6; }
.sp-print-bar .spacer { flex: 1; }
.sp-print-pages { padding: 1.5rem 0 3rem; }
.sp-doc { background: #fff; color: #000; width: var(--sp-doc-w, 210mm); max-width: calc(100% - 2rem); margin: 0 auto 1.5rem; padding: var(--sp-doc-pad, 12mm); box-shadow: 0 2px 10px rgba(0,0,0,.15); font-family: Arial, Helvetica, sans-serif; line-height: 1.3; }
.sp-doc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .8em; }
.sp-doc-title h1 { font-size: 1.9em; font-weight: 700; margin: 0; color: #000; }
.sp-doc-brand { text-align: right; }
.sp-doc-brand img { max-height: 22mm; max-width: 60mm; display: block; margin-left: auto; }
.sp-doc-company { font-size: .9em; margin-top: .3em; }
.sp-doc-head { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2em; border-top: 2px solid #000; border-bottom: 1px solid #000; padding: .5em 0; margin-bottom: .8em; }
.sp-doc-fields { width: 100%; border-collapse: collapse; }
.sp-doc-fields th { font-weight: 600; text-align: left; padding: .12em .8em .12em 0; white-space: nowrap; vertical-align: top; width: 1%; }
.sp-doc-fields td { padding: .12em 0; vertical-align: top; }
.sp-doc-fields tr.em td { font-size: 1.25em; font-weight: 700; }
.sp-doc-note { margin: 0 0 .8em; padding: .4em .6em; border: 1px solid #999; }
.sp-doc-lines { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sp-doc-lines th { border-bottom: 1.5px solid #000; font-weight: 700; padding: .3em .35em; vertical-align: bottom; }
.sp-doc-lines td { padding: .28em .35em; border-bottom: 1px solid #ccc; vertical-align: top; overflow-wrap: anywhere; }
.sp-doc-lines.stripes tbody tr:nth-child(even) td { background: #f3f3f3; }
.sp-doc-lines tr.bom td { font-weight: 600; }
.sp-doc-lines tr.desc td { font-style: italic; color: #333; }
.sp-doc-lines tfoot td { border-top: 1.5px solid #000; border-bottom: none; font-weight: 700; }
.sp-doc-lines thead { display: table-header-group; }
.sp-doc-lines tr { break-inside: avoid; }
.sp-doc-empty { text-align: center; color: #666; padding: 1em; }
.sp-doc-footer { margin-top: 1.4em; break-inside: avoid; }
.sp-doc-printed { margin-top: 1.2em; font-size: .8em; color: #555; }
@media print {
    html, body, .sp-print-root { background: #fff !important; }
    .no-print { display: none !important; }
    .sp-print-pages { padding: 0; }
    .sp-doc { width: auto; max-width: none; margin: 0; padding: 0; box-shadow: none; }
    .sp-doc.sp-doc-newpage + .sp-doc.sp-doc-newpage { break-before: page; }
    .sp-doc-lines.stripes tbody tr:nth-child(even) td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- layout editor ---------- */
.sp-layout-editor { display: grid; grid-template-columns: minmax(380px, 470px) 1fr; gap: 1rem; align-items: start; }
.sp-layout-settings { max-height: calc(100vh - 170px); overflow: auto; padding-right: .25rem; }
.sp-layout-settings details { background: var(--sp-surface, #fff); border: 1px solid var(--sp-line, #dee2e6); border-radius: 6px; padding: .5rem .75rem; margin-bottom: .6rem; }
.sp-layout-settings summary { font-weight: 600; cursor: pointer; margin-bottom: .4rem; }
.sp-le-grid { display: grid; grid-template-columns: 120px 1fr; gap: .3rem .5rem; align-items: center; margin-bottom: .4rem; }
.sp-le-grid label { font-size: .85rem; color: var(--sp-ink-soft); margin: 0; }
.sp-le-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.sp-le-table th { font-weight: 600; color: var(--sp-ink-soft); padding: .15rem .25rem; white-space: nowrap; }
.sp-le-table td { padding: .15rem .25rem; vertical-align: middle; }
.sp-le-btns { white-space: nowrap; }
.sp-le-btns .btn { margin-left: .2rem; }
.sp-le-keys { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .75rem; max-height: 180px; overflow: auto; margin: .3rem 0; }
.sp-layout-preview { position: sticky; top: .5rem; }
.sp-le-paper { background: #e9ecef; border-radius: 6px; padding: 1rem .5rem; max-height: calc(100vh - 210px); overflow: auto; }
.sp-le-paper .sp-doc { zoom: .8; margin-bottom: 0; }
@media (max-width: 1100px) { .sp-layout-editor { grid-template-columns: 1fr; } .sp-layout-settings, .sp-le-paper { max-height: none; } }
/* boxes and grids on printed documents */
.sp-doc-block { margin: .9em 0; }
.sp-doc-block.keep { break-inside: avoid; }
.sp-doc-block-title { font-weight: 700; margin-bottom: .25em; }
.sp-doc-box { border: 1px solid #000; padding: .4em .5em; }
.sp-doc-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sp-doc-grid th, .sp-doc-grid td { border: 1px solid #000; padding: .2em .35em; vertical-align: top; }
.sp-doc-grid thead th { font-weight: 700; text-align: left; background: #f0f0f0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sp-doc-grid tbody th { font-weight: 600; text-align: left; }
/* formula fields in the layout editor */
.sp-le-formula { font-family: ui-monospace, Consolas, monospace; font-size: .8rem; }
.sp-le-sub td { padding-top: 0; }
.sp-le-calc { border: 1px solid var(--sp-line, #dee2e6); border-radius: 6px; padding: .4rem .5rem; margin-bottom: .4rem; }
.sp-doc-grid td.shaded { font-weight: 700; background: #f0f0f0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* grid cell editor */
.sp-grid-edit { border-collapse: collapse; }
.sp-grid-edit td { border: 1px solid var(--sp-line, #ced4da); padding: 0; position: relative; vertical-align: top; min-width: 90px; }
.sp-grid-edit td.shaded { background: #eceff1; }
.sp-grid-edit td.shaded textarea { font-weight: 700; }
.sp-grid-edit textarea { border: 0; width: 100%; min-height: 2.4rem; resize: vertical; padding: .25rem 1.4rem .25rem .35rem; font-size: .85rem; background: transparent; display: block; }
.sp-grid-edit textarea:focus { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: -2px; }
.sp-grid-edit .shade { position: absolute; top: 3px; right: 3px; margin: 0; }
.sp-grid-edit th { font-weight: 500; font-size: .75rem; color: var(--sp-ink-soft); padding: .15rem .25rem; text-align: center; white-space: nowrap; }
.sp-grid-edit input.w { width: 56px; display: inline-block; }
.sp-grid-edit .celltools { position: absolute; bottom: 1px; right: 2px; display: flex; gap: 1px; opacity: .35; }
.sp-grid-edit td:hover .celltools, .sp-grid-edit td:focus-within .celltools { opacity: 1; }
.sp-grid-edit .celltools button { border: 0; background: transparent; padding: 0 2px; font-size: .75rem; line-height: 1; color: var(--sp-ink-soft); }
.sp-grid-edit .celltools button:hover { color: var(--bs-primary, #0d6efd); }
.sp-grid-edit .rowtools { white-space: nowrap; padding-left: .3rem; vertical-align: middle; }

/* ---------- reports ---------- */
.sp-rep-page { display: grid; grid-template-columns: minmax(220px, 280px) 1fr; gap: 1rem; align-items: start; }
.sp-rep-list { padding: .4rem; display: flex; flex-direction: column; gap: .2rem; position: sticky; top: .5rem; }
.sp-rep-pick { text-align: left; border: 1px solid transparent; background: transparent; border-radius: 6px; padding: .45rem .6rem; display: flex; flex-direction: column; gap: .1rem; color: inherit; }
.sp-rep-pick span { font-size: .78rem; color: var(--sp-ink-soft); line-height: 1.25; }
.sp-rep-pick:hover { background: var(--sp-hover, #f1f3f5); }
.sp-rep-pick.on { background: var(--sp-select, #e7f1ff); border-color: var(--bs-primary, #0d6efd); }
.sp-rep-main { min-width: 0; display: flex; flex-direction: column; gap: .8rem; }
.sp-rep-main > .sp-panel { margin: 0; }
.sp-rep-grid { display: grid; grid-template-columns: 220px 1fr; gap: .45rem .75rem; align-items: center; }
.sp-rep-grid > label { margin: 0; color: var(--sp-ink-soft); font-size: .9rem; }
.sp-rep-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .3rem; }
.sp-rep-paper { background: #e9ecef; border-radius: 6px; padding: 1rem .5rem; max-height: 75vh; overflow: auto; }
@media (max-width: 1000px) { .sp-rep-page { grid-template-columns: 1fr; } .sp-rep-list { position: static; } .sp-rep-grid { grid-template-columns: 1fr; } }

/* a printed report (Reports page preview, print view and layout editor) */
.sp-rep { background: #fff; color: #000; width: var(--sp-doc-w, 210mm); max-width: calc(100% - 2rem); margin: 0 auto 1.5rem; padding: var(--sp-doc-pad, 10mm);
    box-shadow: 0 2px 10px rgba(0,0,0,.15); font-family: Arial, Helvetica, sans-serif; line-height: 1.25; }
.sp-rep-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: .7em; border-bottom: 2px solid #000; padding-bottom: .4em; }
.sp-rep-top h1 { font-size: 1.6em; font-weight: 700; margin: 0; color: #000; }
.sp-rep-sub { font-size: 1.1em; margin-top: .15em; }
.sp-rep-crit { font-size: .85em; color: #444; }
.sp-rep-company { text-align: right; font-size: .9em; }
.sp-rep-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sp-rep-table thead { display: table-header-group; }
.sp-rep-table th { border-bottom: 1.5px solid #000; font-weight: 700; padding: .25em .3em; vertical-align: bottom; overflow-wrap: anywhere; }
.sp-rep-table td { padding: .18em .3em; border-bottom: 1px solid #ddd; vertical-align: top; overflow-wrap: anywhere; }
.sp-rep-table tr { break-inside: avoid; }
.sp-rep-table.stripes tbody tr:not(.sp-rep-grp):not(.sp-rep-tot):nth-child(even) td { background: #f4f4f4; }
.sp-rep-table tr.sp-rep-grp td { font-weight: 700; background: #e9e9e9; border-top: 1px solid #999; padding-top: .35em; }
.sp-rep-table tr.sp-rep-tot td { font-weight: 700; border-top: 1px solid #000; border-bottom: none; }
.sp-rep-table tr.sp-rep-sum td { border-bottom: 1px solid #ddd; }
.sp-rep-table tbody.sp-rep-grand td { font-weight: 700; border-top: 2px solid #000; border-bottom: none; padding-top: .35em; }
.sp-rep-table tr.sp-rep-gap td { border: none; height: .8em; background: transparent !important; }
.sp-rep-table tr.b td { font-weight: 700; }
.sp-rep-table tr.sh td { background: #eee; }
.sp-rep-table tr.red td { color: #c00; }
.sp-rep-table tr.blue td { color: #0040c0; }
.sp-rep-table tr.txt td { font-size: .88em; font-style: italic; color: #333; }
.sp-rep-table tbody.sp-rep-keep { break-inside: avoid; }
.sp-rep-table tbody.sp-rep-newpage + tbody.sp-rep-newpage { break-before: page; }
.sp-rep-empty, .sp-rep-more { text-align: center; color: #666; padding: 1em; }
.sp-rep-footer { margin-top: 1em; break-inside: avoid; }
.sp-le-paper .sp-rep { zoom: .8; margin-bottom: 0; }
@media print {
    .sp-rep { width: auto; max-width: none; margin: 0; padding: 0; box-shadow: none; }
    .sp-rep-table.stripes tbody tr td, .sp-rep-table tr.sp-rep-grp td, .sp-rep-table tr.sh td { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.sp-rep-group { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sp-ink-soft); padding: .55rem .6rem .15rem; }
.sp-rep-group:first-child { padding-top: .2rem; }
.sp-rep-company img { max-height: 20mm; max-width: 60mm; display: block; margin: 0 0 .3em auto; }
.sp-rep .sp-doc-block { margin-top: .8em; }
.sp-rep-trailer { display: flex; justify-content: space-between; gap: 1em; margin-top: 1.2em; font-size: .78em; color: #555; }
.sp-rep-produced { font-style: italic; color: #888; }
.sp-dialog.huge { max-width: min(1500px, 96vw); }
.sp-dialog.huge.movable { height: 88vh; max-height: 92vh; }
.sp-dialog.huge .sp-rep-paper { max-height: none; }
/* report list: search, recently run, collapsible headings */
.sp-rep-list { max-height: calc(100vh - 7rem); overflow-y: auto; }
.sp-rep-find { display: flex; align-items: center; gap: .4rem; padding: .2rem .3rem .5rem; position: sticky; top: -.4rem; background: var(--sp-panel-bg, #fff); z-index: 1; }
.sp-rep-find > i { color: var(--sp-ink-soft); }
.sp-rep-recent { padding: .1rem .3rem .5rem; border-bottom: 1px solid var(--sp-line, #e5e7eb); margin-bottom: .3rem; }
.sp-rep-recent-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--sp-ink-soft); margin-bottom: .3rem; }
.sp-rep-chip { border: 1px solid var(--sp-line, #dee2e6); background: transparent; border-radius: 999px; padding: .1rem .55rem; font-size: .8rem; margin: 0 .25rem .25rem 0; color: inherit; }
.sp-rep-chip:hover { background: var(--sp-hover, #f1f3f5); }
.sp-rep-chip.on { border-color: var(--bs-primary, #0d6efd); background: var(--sp-select, #e7f1ff); }
.sp-rep-grouphead { width: 100%; display: flex; align-items: center; gap: .45rem; border: 0; background: transparent; padding: .5rem .45rem; border-radius: 6px;
    font-weight: 600; color: inherit; text-align: left; }
.sp-rep-grouphead:hover { background: var(--sp-hover, #f1f3f5); }
.sp-rep-grouphead > i { transition: transform .15s; font-size: .8rem; color: var(--sp-ink-soft); }
.sp-rep-grouphead.open > i { transform: rotate(90deg); }
.sp-rep-grouphead > span:first-of-type { flex: 1; }
.sp-rep-groupbody { padding: 0 0 .3rem .9rem; display: flex; flex-direction: column; gap: .15rem; }
.sp-rep-pick em { font-style: normal; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: var(--sp-ink-soft); }

.sp-dropdown.end { left: auto; right: 0; }

/* =====================================================================================================
   Dark theme - on when the page has data-bs-theme="dark" (Theme: Dark, or Match my device on a dark device).
   Bootstrap's own controls switch themselves; these are StockPlan's colours. Printed documents and report
   previews stay as paper (white), and printing is always light.
   ===================================================================================================== */
[data-bs-theme=dark] {
    --sp-ink: #DCE3E8;
    --sp-ink-soft: #9AA8B3;
    --sp-paper: #12181D;
    --sp-panel: #1A2128;
    --sp-rule: #2F3A44;
    --sp-accent: #6CB0E0;
    --sp-accent-soft: #1D3447;
    --sp-short: #F2786D;
    --sp-short-soft: #3B201E;
    --sp-low: #E2B24C;
    --sp-low-soft: #382E16;
    --sp-ok: #5DC48B;
    --sp-ok-soft: #173329;
    --sp-surface: #1A2128;
    --sp-line: #2F3A44;
    --sp-hover: #222B33;
    --sp-select: #1D3447;
    --sp-panel-bg: #1A2128;
    --bs-primary-rgb: 108, 176, 224;
    --bs-body-bg: var(--sp-paper);
    color-scheme: dark;
}
[data-bs-theme=dark] .btn-primary { --bs-btn-bg: #2E73A6; --bs-btn-border-color: #2E73A6; --bs-btn-hover-bg: #3A86BF; --bs-btn-hover-border-color: #3A86BF;
    --bs-btn-active-bg: #3A86BF; --bs-btn-disabled-bg: #2E73A6; --bs-btn-disabled-border-color: #2E73A6; --bs-btn-color: #fff; }
[data-bs-theme=dark] .btn-outline-primary { --bs-btn-color: var(--sp-accent); --bs-btn-border-color: var(--sp-accent); --bs-btn-hover-bg: #2E73A6; --bs-btn-hover-border-color: #2E73A6; }

/* menu down the left stays dark in both themes */
[data-bs-theme=dark] .sp-nav { background: #0C1115; border-right: 1px solid var(--sp-rule); }

/* grids */
[data-bs-theme=dark] .sp-grid th,
[data-bs-theme=dark] .sp-grid th.rowhead { background: #222A32; }
[data-bs-theme=dark] .sp-grid td { border-bottom-color: #26303A; }
[data-bs-theme=dark] .sp-grid tbody tr:hover td { background: #212A33; }
[data-bs-theme=dark] .sp-grid .rowhead { background: #1D252C; }
[data-bs-theme=dark] .sp-grid tr.sp-group-row td { background: #222A32; }
[data-bs-theme=dark] .sp-grid tr.sp-marquee td,
[data-bs-theme=dark] .sp-grid tbody tr.sp-marquee:hover td { background: #2E73A6 !important; border-bottom-color: #245C86; }
[data-bs-theme=dark] .tag, [data-bs-theme=dark] .tag-prod { background: #26303A; }
[data-bs-theme=dark] .tag-tag { background: #3A2F15; color: #E2B24C; }
[data-bs-theme=dark] .runway { background: #2A343D; }
[data-bs-theme=dark] .runway.low > span, [data-bs-theme=dark] .sp-dirty-dot { background: #E2B24C; }
[data-bs-theme=dark] .sp-dropdown { box-shadow: 0 8px 24px rgba(0,0,0,.5); }
[data-bs-theme=dark] .sp-dropdown button:disabled { color: #5F6C77; }
[data-bs-theme=dark] .sp-ro { background: #222A32; }
[data-bs-theme=dark] .sp-banner { border-color: #5A4A22; }
[data-bs-theme=dark] .sp-optflag { accent-color: #6CB0E0; outline-color: #6CB0E066; }
[data-bs-theme=dark] .sp-optfield:disabled .form-control,
[data-bs-theme=dark] .sp-optfield:disabled .form-select { background-color: #1E252C; color: #6F7C87; }
[data-bs-theme=dark] .sp-dialog-backdrop:not(.movable) { background: rgba(0, 0, 0, .6); }
[data-bs-theme=dark] .sp-dialog { box-shadow: 0 12px 40px rgba(0,0,0,.6); border: 1px solid var(--sp-rule); }
[data-bs-theme=dark] .sp-savebar { box-shadow: 0 -4px 14px rgba(0,0,0,.4); }
[data-bs-theme=dark] #blazor-error-ui { color: var(--sp-ink); }

/* plan grid */
[data-bs-theme=dark] .sp-plan-wrap { background: var(--sp-panel); border-color: #3A4652; }
[data-bs-theme=dark] .sp-plan-grid th { background: linear-gradient(#2A333C, #222A32); color: #C9D3DA; border-right-color: #3A4652; border-bottom-color: #46525E; }
[data-bs-theme=dark] .sp-plan-grid td { border-right-color: #29323B; border-bottom-color: #29323B; }
[data-bs-theme=dark] .sp-plan-grid td.rowhead { background: linear-gradient(90deg, #232B33, #1F272E); border-right-color: #3A4652; color: #C9D3DA; }
[data-bs-theme=dark] .sp-plan-grid tr.pc-alt td { background: #1D242B; }
[data-bs-theme=dark] .sp-plan-grid tr.pc-alt td.rowhead { background: linear-gradient(90deg, #212930, #1D252C); }
[data-bs-theme=dark] .sp-plan-grid tr.pc-bfwd td { background: #232B33; color: #AAB5BE; border-bottom-color: #46525E; }
[data-bs-theme=dark] .sp-plan-grid tr.pc-bfwd td.rowhead { background: #3A4550; color: #E6ECF0; }
[data-bs-theme=dark] .sp-plan-grid tbody tr:hover td { background: #22303C; }
[data-bs-theme=dark] .sp-plan-grid tr.pc-selected td { background: #1E3A52 !important; border-top-color: #4D94D1; border-bottom-color: #4D94D1; }
[data-bs-theme=dark] .sp-plan-grid tr.pc-selected td.rowhead { background: #2E73A6 !important; color: #fff; }
[data-bs-theme=dark] .sp-plan-grid td.pc-below-min,
[data-bs-theme=dark] .sp-plan-legend .pc-key.pc-below-min { background: #4A2224 !important; color: #FF9C94; }
[data-bs-theme=dark] .sp-plan-grid td.pc-above-max,
[data-bs-theme=dark] .sp-plan-legend .pc-key.pc-above-max { background: #163D42 !important; color: #7FDCE4; }
[data-bs-theme=dark] .sp-plan-grid td.pc-mandem,
[data-bs-theme=dark] .sp-plan-legend .pc-key.pc-mandem { background: #45301A !important; color: #F2B66E; }
[data-bs-theme=dark] .sp-plan-grid td.pc-negative,
[data-bs-theme=dark] .sp-plan-grid td.pc-required { color: #FF8A80; }
[data-bs-theme=dark] .sp-plan-grid td.pc-planord { color: #7DBBF0; }
[data-bs-theme=dark] .sp-plan-legend .pc-key,
[data-bs-theme=dark] .sd-key { border-color: #46525E; }
[data-bs-theme=dark] .sp-plan-legend .pc-key.pc-planord { background: transparent; border-color: #7DBBF0; box-shadow: inset 0 0 0 2px #7DBBF0; }
[data-bs-theme=dark] .sp-plan-legend .pc-key.pc-required { background: transparent; border-color: #FF8A80; box-shadow: inset 0 0 0 2px #FF8A80; }

/* plan screen what-if bar, charts */
[data-bs-theme=dark] .sp-whatif { background: #1D242B; }
[data-bs-theme=dark] .sp-whatif.active { background: #382E16; border-color: #7A6025; }
[data-bs-theme=dark] .sp-chart text, [data-bs-theme=dark] .sp-hist-chart text { fill: var(--sp-ink-soft); }
[data-bs-theme=dark] .sp-hist-chart line { stroke: #4A5662; }

/* shutdown calendar */
[data-bs-theme=dark] .sd-month { background: var(--sp-panel); }
[data-bs-theme=dark] .sd-ord, [data-bs-theme=dark] .sd-key.sd-ord { background: #4A2224; color: #FF9C94; }
[data-bs-theme=dark] .sd-del, [data-bs-theme=dark] .sd-key.sd-del { background: #45301A; color: #F2B66E; }
[data-bs-theme=dark] .sd-both, [data-bs-theme=dark] .sd-key.sd-both { background: #35264A; color: #CDAEF2; }
[data-bs-theme=dark] .sd-weekend, [data-bs-theme=dark] .sd-key.sd-weekend { background: #222A32; color: #7F8B95; }
[data-bs-theme=dark] .sd-today, [data-bs-theme=dark] .sd-key.sd-today { outline-color: #6CB0E0; }

/* history tab */
[data-bs-theme=dark] .sp-grid tr.hist-omitted td { background: #3A2B19 !important; color: #E3B87A; }
[data-bs-theme=dark] .sp-grid tr.hist-omitted.selected td { background: #4A3820 !important; }
[data-bs-theme=dark] .sp-grid td.hist-reason { color: #F2B66E; }
[data-bs-theme=dark] .hist-key { background: #3A2B19; border-color: #7A5A2E; }

/* purchase order creation cell colours */
[data-bs-theme=dark] .sp-grid td.poc-changed { background: #4A4214 !important; }
[data-bs-theme=dark] .sp-grid td.poc-rushed { background: #4A2224 !important; }

/* block (grid) editor */
[data-bs-theme=dark] .sp-grid-edit td.shaded { background: #2A333C; }
[data-bs-theme=dark] .sp-grid-edit textarea { color: var(--sp-ink); }

/* the grey desk around report and document previews, and the print page's bar */
[data-bs-theme=dark] .sp-rep-paper,
[data-bs-theme=dark] .sp-le-paper,
[data-bs-theme=dark] .sp-print-root { background: #0E1317; }
[data-bs-theme=dark] .sp-print-bar { background: var(--sp-panel); border-bottom-color: var(--sp-rule); color: var(--sp-ink); }

/* paper stays paper: documents and reports keep their light colours whatever the theme */
[data-bs-theme=dark] .sp-doc,
[data-bs-theme=dark] .sp-rep {
    --sp-ink: #1F2A33; --sp-ink-soft: #52616D; --sp-panel: #FFFFFF; --sp-rule: #D9DEE2; --sp-accent: #1F5F8B; --sp-accent-soft: #E3EEF6;
    --sp-short: #B3261E; --sp-short-soft: #FBE9E7; --sp-low: #9A6700; --sp-low-soft: #FFF4D6; --sp-ok: #2E7D4F; --sp-ok-soft: #E4F3EA;
    --sp-line: #DEE2E6; --bs-body-color: #000; --bs-body-bg: #fff; color-scheme: light;
}
[data-bs-theme=dark] .sp-doc { box-shadow: 0 2px 14px rgba(0,0,0,.6); }
[data-bs-theme=dark] .sp-rep { box-shadow: 0 2px 14px rgba(0,0,0,.6); }

@media print {
    [data-bs-theme=dark] html, [data-bs-theme=dark] body, html[data-bs-theme=dark], html[data-bs-theme=dark] body { background: #fff !important; color: #000 !important; }
    [data-bs-theme=dark] .sp-print-root { background: #fff !important; }
}
[data-bs-theme=dark] .sp-panel .table, [data-bs-theme=dark] .sp-dialog .table { --bs-table-bg: transparent; }

/* ---------- sign-in pages and the user menu ---------- */
.sp-account { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 2rem; background: var(--sp-paper); }
.sp-account-card { width: 100%; max-width: 400px; background: var(--sp-panel); border: 1px solid var(--sp-rule); border-radius: 8px; padding: 1.5rem 1.5rem 1.25rem; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.sp-account-brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: 1.15rem; margin-bottom: 1.1rem; }
.sp-company { display: flex; align-items: center; gap: .4rem; font-weight: 500; color: var(--sp-ink); }
.sp-context label .bi-building { color: var(--sp-ink-soft); }
.sp-user .sp-dropwrap > .btn { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-dropdown .sp-menu-note { padding: .4rem .9rem; font-size: .82rem; line-height: 1.35; white-space: nowrap; }
.sp-dropdown form { margin: 0; }
/* two-step sign-in set-up */
.sp-qr { display: flex; justify-content: center; margin: .5rem 0 .4rem; }
.sp-qr img, .sp-qr canvas { padding: 8px; background: #fff; border-radius: 6px; }
.sp-key { letter-spacing: .05em; }
.sp-codes { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem .75rem; font-size: 1rem; }

/* start page shortcuts */
.sp-start-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .75rem; }
.sp-start-tile { display: grid; grid-template-columns: auto 1fr; column-gap: .7rem; align-items: start; padding: .85rem 1rem;
    border: 1px solid var(--sp-rule); border-radius: 6px; background: var(--sp-panel); color: inherit; text-decoration: none; }
.sp-start-tile:hover, .sp-start-tile:focus-visible { border-color: var(--bs-primary); color: inherit; }
.sp-start-tile i { grid-row: span 2; font-size: 1.4rem; color: var(--bs-primary); line-height: 1.2; }
.sp-start-tile .t { font-weight: 600; }
.sp-start-tile .n { color: var(--sp-ink-soft); font-size: .82rem; }