/* ══ Inventory Stock Pulse ══════════════════════════════════════════════════
   A port of `_reference/Inventory_stock_pulse/stock_pulse_dashboard_20.html`'s own stylesheet,
   generated rather than retyped so no size or colour drifts (the generator is kept beside the
   report as a record of what was taken: it drops the page frame — body, header, tab bar, panel —
   which this host already owns, and prefixes every remaining selector with `.iv-scope`).

   **Scoped, and that is load-bearing.** The reference names tokens `--text-primary`, `--border`,
   `--plane`; this host names its own `--text`, `--border`, `--card`. Defining the reference's set
   on `.iv-scope` rather than `:root` keeps the two apart, so the ported charts render in the
   reference's palette while everything around them stays in the host's theme.

   The dark variant comes across too, driven by the host's own `[data-theme="dark"]` — the report
   follows the six themes to the extent of light vs dark, and keeps the reference's series colours
   in both, because those colours carry meaning (ABC sequence, risk tints) and must not be themed. */

.iv-scope {
  color-scheme: light;
  --surface-1:      #fcfcfb;
  --plane:          #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.10);
  --card-shadow:    0 1px 2px rgba(11,11,11,0.04), 0 1px 1px rgba(11,11,11,0.03);
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-7: #4a3aa7;
  --seq-100: #cde2fb;
  --seq-200: #9ec5f4;
  --seq-350: #5598e7;
  --seq-500: #256abf;
  --seq-650: #104281;
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #d03b3b;
  --success-text: #006300;
}

/* The host's dark themes, by name — "slate" and "forest" are light ones and stay on the block
   above. applyTheme() stamps the name on <html> for exactly this. */
:root[data-theme="midnight"] .iv-scope,
:root[data-theme="ocean"] .iv-scope,
:root[data-theme="aurora"] .iv-scope {
  color-scheme: dark;
  --surface-1: #1a1a19;
  --plane: #0d0d0d;
  --text-primary: #ffffff;
  --text-secondary: #c3c2b7;
  --text-muted: #898781;
  --gridline: #2c2c2a;
  --baseline: #383835;
  --border: rgba(255,255,255,0.10);
  --card-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 1px rgba(0,0,0,0.2);
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-7: #9085e9;
  --seq-100: #184f95;
  --seq-200: #184f95;
  --seq-350: #2a78d6;
  --seq-500: #6da7ec;
  --seq-650: #b7d3f6;
  --good: #0ca30c;
  --warning: #fab219;
  --serious: #ec835a;
  --critical: #e66767;
  --success-text: #0ca30c;
}

/* The panel itself is the scope, and it carries the reference's own layout for a tab body. */
.iv-scope { display:flex; flex-direction:column; gap:22px; color:var(--text-primary); }
.iv-scope .mono { font-family:ui-monospace,Menlo,Consolas,monospace; font-variant-numeric:tabular-nums; }

/* ── the two additions this project asked for ──────────────────────────────
   Both borrow the reference's own component classes — .pager and .dd-btn — so the pager bars
   added to its tables and the dialog opened from its bars look like the rest of the report
   rather than like something bolted on. */

.iv-scope .iv-pager { margin-top:10px; }

/* "จำนวน" while the overview is showing. It keeps the reference's disabled look, but it is a live
   button now so that pressing it can say why — see edit 10 in tools/gen-inventory-js.js. */
.iv-scope .seg-toggle button[aria-disabled="true"] { opacity:0.45; cursor:help; }

/* A .seg-toggle carries margin-bottom:14px for the standalone case, and inside a .filters row that
   is align-items:center the margin is centred along with the box — so the pair sat about 7px above
   the search field and the button beside it. Measured, not guessed. */
.iv-scope .filters > .seg-toggle { margin-bottom:0; }

.iv-modal {
  position:fixed; inset:0; z-index:1600; display:flex; align-items:center; justify-content:center;
  background:rgba(11,11,11,0.45); padding:24px;
}
.iv-modal[hidden] { display:none !important; }
/* Above #mailModal and the video dialog at 1500 — this one is opened from inside a panel, so it
   has to sit over anything already on screen. */
.iv-modal .iv-modal-card {
  background:var(--surface-1); border:1px solid var(--border); border-radius:12px;
  box-shadow:0 10px 40px rgba(11,11,11,0.25);
  width:min(1100px, 100%); max-height:88vh; display:flex; flex-direction:column; padding:18px 20px;
}
.iv-modal .iv-modal-head {
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding-bottom:12px; border-bottom:1px solid var(--border);
}
.iv-modal .iv-modal-title { font-size:1.05rem; font-weight:700; }
.iv-modal .iv-modal-sub { font-size:0.82rem; color:var(--text-secondary); margin-top:3px; }
.iv-modal .iv-modal-body { overflow:auto; padding-top:12px; }

@media (max-width: 991.98px) {
  .iv-modal { padding:0; }
  .iv-modal .iv-modal-card { width:100%; height:100%; max-height:100%; border-radius:0; }
}

.iv-scope .mono {font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums;}
.iv-scope .card { background:var(--surface-1); border:1px solid var(--border); border-radius:12px;
    padding:18px 20px; box-shadow:var(--card-shadow); }
.iv-scope .section-title {font-size:1.05rem; font-weight:700; margin-bottom:4px;}
.iv-scope .section-desc {color:var(--text-secondary); font-size:0.85rem; margin-bottom:14px; max-width:76ch;}
.iv-scope .kpi-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(190px,1fr)); gap:12px;}
.iv-scope .kpi { background:var(--surface-1); border:1px solid var(--border); border-radius:12px;
    padding:14px 16px; box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:6px; }
.iv-scope .kpi .label {font-size:0.74rem; color:var(--text-secondary); font-weight:600;}
.iv-scope .kpi .value {font-size:1.5rem; font-weight:700; font-family:"JetBrains Mono",monospace; letter-spacing:-0.01em;}
.iv-scope .kpi .sub {font-size:0.72rem; color:var(--text-muted);}
.iv-scope .kpi.tone-critical .value {color:var(--critical);}
.iv-scope .kpi.tone-warning .value {color:#a86a00;}
@media (prefers-color-scheme:dark) {
  .iv-scope .kpi.tone-warning .value {color:var(--warning);}
}
.iv-scope .kpi.tone-good .value {color:var(--success-text);}
.iv-scope .callout-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px;}
.iv-scope .callout { border-radius:10px; padding:14px 16px; border:1px solid var(--border);
    display:flex; gap:10px; align-items:flex-start; background:var(--surface-1); }
.iv-scope .callout .bar {width:4px; align-self:stretch; border-radius:4px; flex:0 0 auto;}
.iv-scope .callout.critical .bar {background:var(--critical);}
.iv-scope .callout.warning .bar {background:var(--warning);}
.iv-scope .callout.info .bar {background:var(--series-1);}
.iv-scope .callout.good .bar {background:var(--good);}
.iv-scope .callout .txt b {display:block; font-size:0.95rem; margin-bottom:3px;}
.iv-scope .callout .txt span {font-size:0.8rem; color:var(--text-secondary);}
.iv-scope .hbar-row {display:grid; grid-template-columns:minmax(130px,220px) 1fr auto; gap:10px; align-items:center; padding-block:5px;}
.iv-scope .hbar-label {font-size:0.8rem; color:var(--text-secondary); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.iv-scope .hbar-track {position:relative; height:20px; background:var(--gridline); border-radius:4px; overflow:hidden;}
.iv-scope .hbar-fill {position:absolute; inset-block:0; left:0; border-radius:4px; transition:width .5s ease;}
.iv-scope .hbar-val {font-size:0.78rem; font-family:"JetBrains Mono",monospace; color:var(--text-primary); min-width:64px; text-align:left;}
.iv-scope .legend {display:flex; gap:14px; flex-wrap:wrap; margin-bottom:12px; font-size:0.78rem; color:var(--text-secondary);}
.iv-scope .legend .sw {display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:-1px;}
.iv-scope table {border-collapse:collapse; width:100%; font-size:0.82rem;}
.iv-scope th, .iv-scope td {text-align:left; padding:7px 10px; border-bottom:1px solid var(--gridline); white-space:nowrap;}
.iv-scope th {color:var(--text-muted); font-weight:600; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em;}
.iv-scope td.num, .iv-scope th.num {text-align:right; font-family:"JetBrains Mono",monospace;}
.iv-scope .table-scroll {overflow-x:auto; border-radius:8px;}
.iv-scope tbody tr:hover {background:var(--plane);}
.iv-scope .badge {display:inline-block; font-size:0.68rem; font-weight:700; padding:2px 7px; border-radius:5px; color:#fff;}
.iv-scope .seg-toggle {display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:14px;}
.iv-scope .seg-toggle button { appearance:none; border:none; background:var(--surface-1); color:var(--text-secondary);
    font-family:inherit; font-size:0.8rem; font-weight:600; padding:7px 14px; cursor:pointer; }
.iv-scope .seg-toggle button[aria-pressed="true"] {background:var(--series-1); color:#fff;}
.iv-scope .filters {display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.iv-scope .filters input, .iv-scope .filters select { font-family:inherit; font-size:0.82rem; padding:7px 10px; border-radius:8px;
    border:1px solid var(--border); background:var(--surface-1); color:var(--text-primary); }
.iv-scope .filters input:focus, .iv-scope .filters select:focus, .iv-scope button:focus-visible {outline:2px solid var(--series-1); outline-offset:1px;}
.iv-scope #matSearch {flex:1 1 220px; min-width:160px;}
.iv-scope .pager {display:flex; align-items:center; gap:10px; margin-top:10px; font-size:0.8rem; color:var(--text-secondary);}
.iv-scope .pager button { font-family:inherit; border:1px solid var(--border); background:var(--surface-1); color:var(--text-primary);
    border-radius:6px; padding:5px 10px; cursor:pointer; font-size:0.8rem; }
.iv-scope .pager button:disabled {opacity:0.4; cursor:default;}
.iv-scope th.sortable {cursor:pointer; user-select:none;}
.iv-scope th.sortable:after {content:" ⇅"; opacity:0.4; font-size:0.65rem;}
.iv-scope .chart-wrap {position:relative;}
.iv-scope #trendTip, .iv-scope #lineTip {
    position:absolute; pointer-events:none; background:var(--text-primary); color:var(--surface-1);
    font-size:0.72rem; padding:5px 8px; border-radius:6px; transform:translate(-50%,-115%);
    white-space:nowrap; opacity:0; transition:opacity .1s ease; font-family:"JetBrains Mono",monospace; z-index:5;
  }
.iv-scope .matrix-grid {display:grid; grid-template-columns:90px repeat(3, 1fr); gap:6px; margin-top:6px;}
.iv-scope .matrix-cell { border-radius:8px; padding:10px 8px; text-align:center; border:1px solid var(--border);
    cursor:pointer; transition:box-shadow .12s ease, transform .12s ease; }
.iv-scope .matrix-cell:hover { box-shadow:0 0 0 2px var(--series-1) inset; }
.iv-scope .matrix-cell:active { transform:scale(0.98); }
.iv-scope .matrix-cell:focus-visible { outline:2px solid var(--series-1); outline-offset:2px; }
.iv-scope .matrix-cell.selected { box-shadow:0 0 0 2px var(--text-primary) inset; }
.iv-scope .matrix-cell[aria-disabled="true"] { cursor:default; opacity:0.55; }
.iv-scope .matrix-cell[aria-disabled="true"]:hover { box-shadow:none; }
.iv-scope .matrix-head { font-size:0.72rem; font-weight:700; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; }
.iv-scope .matrix-rowhead { font-size:0.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.iv-scope .matrix-cell .cnt {font-family:"JetBrains Mono",monospace; font-weight:700; font-size:1.05rem;}
.iv-scope .matrix-cell .qty {font-size:0.68rem; color:var(--text-secondary); margin-top:2px;}
.iv-scope .matrix-cell .tag {font-size:0.62rem; font-weight:700; letter-spacing:0.03em; opacity:0.75;}
.iv-scope .drilldown { margin-top:18px; padding-top:16px; border-top:1px dashed var(--border); }
.iv-scope .drilldown-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.iv-scope .dd-title {display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.iv-scope .dd-tag { display:inline-block; font-family:"JetBrains Mono",monospace; font-weight:700; font-size:0.88rem;
    padding:3px 11px; border-radius:6px; border:1px solid var(--border); color:var(--text-primary); }
.iv-scope .dd-count { font-size:0.82rem; color:var(--text-secondary); }
.iv-scope .dd-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.iv-scope .dd-actions input { font-family:inherit; font-size:0.8rem; padding:6px 10px; border-radius:8px;
    border:1px solid var(--border); background:var(--surface-1); color:var(--text-primary); min-width:170px; }
.iv-scope .dd-actions input:focus, .iv-scope .dd-btn:focus-visible { outline:2px solid var(--series-1); outline-offset:1px; }
.iv-scope .dd-btn { font-family:inherit; font-size:0.78rem; font-weight:600; padding:6px 12px; border-radius:8px;
    border:1px solid var(--border); background:var(--surface-1); color:var(--text-primary); cursor:pointer; white-space:nowrap; }
.iv-scope .dd-btn:hover { background:var(--plane); }
.iv-scope .dd-hint { font-size:0.78rem; color:var(--text-muted); margin-top:8px; }
.iv-scope td.dd-clickable, .iv-scope tr.dd-clickable { cursor:pointer; }
.iv-scope td.dd-clickable { text-decoration:underline; text-decoration-style:dotted; text-decoration-color:var(--border); }
.iv-scope td.dd-clickable:hover { background:var(--plane); color:var(--series-1); text-decoration-color:var(--series-1); }
.iv-scope tr.dd-clickable:hover td { background:var(--plane); }
.iv-scope .ledger-suggest { position:absolute; z-index:10; top:100%; left:0; right:0; background:var(--surface-1);
    border:1px solid var(--border); border-radius:8px; margin-top:4px; max-height:260px; overflow-y:auto; box-shadow:var(--card-shadow); }
.iv-scope .ledger-suggest .opt { padding:8px 12px; font-size:0.82rem; cursor:pointer; display:flex; justify-content:space-between; gap:10px; align-items:center; }
.iv-scope .ledger-suggest .opt:hover { background:var(--plane); }
.iv-scope .ledger-suggest .opt .code { font-family:"JetBrains Mono",monospace; font-weight:600; white-space:nowrap; }
.iv-scope .ledger-suggest .opt .grp { color:var(--text-secondary); font-size:0.75rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.iv-scope .ledger-table-scroll { max-height:480px; overflow-y:auto; }
.iv-scope .ledger-table-scroll table thead th { position:sticky; top:0; background:var(--surface-1); z-index:1; }
.iv-scope tr.ledger-move td { background:rgba(42,120,214,0.07); font-weight:600; }
.iv-scope tr.ledger-move:hover td { background:rgba(42,120,214,0.13); }
.iv-scope tr.ledger-marker-row td { font-style:italic; color:var(--text-secondary); background:var(--plane); }
.iv-scope tr.ledger-marker-row td:first-child { text-align:center; }
.iv-scope td.num-mismatch { color:var(--critical); font-weight:700; background:rgba(230,103,103,0.12); }
.iv-scope tr.ledger-mismatch td { box-shadow:inset 0 0 0 9999px rgba(230,103,103,0.04); }
.iv-scope .ledger-legend { display:flex; flex-wrap:wrap; gap:14px; font-size:0.78rem; color:var(--text-secondary); margin:6px 0 2px; }
.iv-scope .ledger-legend .swatch { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:5px; vertical-align:middle; }
.iv-scope .prose {font-size:0.88rem; line-height:1.7; color:var(--text-secondary); max-width:78ch;}
.iv-scope .prose h3 {color:var(--text-primary); font-size:0.95rem; margin-top:18px; margin-bottom:6px;}
.iv-scope .prose h3:first-child {margin-top:0;}
.iv-scope .prose code {background:var(--gridline); padding:1px 5px; border-radius:4px; font-family:"JetBrains Mono",monospace; font-size:0.82em; color:var(--text-primary);}
.iv-scope .prose ul {padding-left:20px; margin:6px 0;}
.iv-scope .prose li {margin-bottom:4px;}
.iv-scope .group-head { display:flex; flex-direction:column; gap:3px; padding-top:16px; margin-top:2px; border-top:1px solid var(--border); }
.iv-scope .group-head:first-child { border-top:none; padding-top:0; margin-top:0; }
.iv-scope .group-head .gh-title { font-size:1.08rem; font-weight:800; color:var(--text-primary); display:flex; align-items:center; gap:8px; }
.iv-scope .group-head .gh-title .gh-num { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:6px;
    background:var(--series-1); color:#fff; font-size:0.72rem; font-weight:800; flex:0 0 auto; }
.iv-scope .group-head .gh-desc { font-size:0.82rem; color:var(--text-secondary); max-width:76ch; }
.iv-scope .loading {color:var(--text-muted); font-size:0.85rem; padding:30px; text-align:center;}
.iv-scope .foot-note {font-size:0.72rem; color:var(--text-muted); margin-top:6px;}
.iv-scope .badge-outline { display:inline-block; font-size:0.68rem; font-weight:700; padding:2px 8px; border-radius:5px;
    border:1px solid var(--border); color:var(--text-secondary); }
@media (max-width:640px) {
  .iv-scope .hbar-row {grid-template-columns:90px 1fr auto;}
  .iv-scope .matrix-grid {grid-template-columns:60px repeat(3,1fr); font-size:0.85rem;}
}