/* GENERATED — do not edit.
 *
 * Produced by tools/gen-poout.js from the reference dashboard. Change the generator and
 * re-run; an edit made here is lost on the next run and, worse, makes the port disagree
 * with the file it is supposed to be a copy of.
 *
 * The reference's own stylesheet, with the page frame dropped (body, .wrap, its header and
 * its buttons — this host has all four) and every remaining selector prefixed with .po-scope.
 * 
 * Its variable names are this host's own, so the token block goes on the scope rather than on
 * :root: inside the report the reference's palette wins and everywhere else the host's does.
 * The dark variant is driven by the host's own data-theme, which applyTheme stamps on <html>.
 */
.po-scope {
  --surface-1:#fcfcfb;
  --page-plane:#f9f9f7;
  --card-border: rgba(11,11,11,0.10);
  --text-primary:#0b0b0b;
  --text-secondary:#52514e;
  --text-muted:#898781;
  --gridline:#e1e0d9;
  --baseline:#c3c2b7;
  --series-blue:#2a78d6;
  --series-orange:#eb6834;
  --series-aqua:#1baf7a;
  --series-yellow:#eda100;
  --series-magenta:#e87ba4;
  --series-green:#008300;
  --series-violet:#4a3aa7;
  --series-red:#e34948;
  --status-good:#0ca30c;
  --status-warning:#fab219;
  --status-serious:#ec835a;
  --status-critical:#d03b3b;
  --success-text:#006300;
  --danger-text:#c0342f;
  --row-hover: rgba(42,120,214,0.06);
  --chip-bg: #f0efec;
}

:root[data-theme="dark"] .po-scope,
:root[data-theme="midnight"] .po-scope,
:root[data-theme="ocean"] .po-scope,
:root[data-theme="aurora"] .po-scope {
  --surface-1:#1a1a19;
  --page-plane:#0d0d0d;
  --card-border: rgba(255,255,255,0.10);
  --text-primary:#ffffff;
  --text-secondary:#c3c2b7;
  --text-muted:#898781;
  --gridline:#2c2c2a;
  --baseline:#383835;
  --series-blue:#3987e5;
  --series-orange:#d95926;
  --series-aqua:#199e70;
  --series-yellow:#c98500;
  --series-magenta:#d55181;
  --series-green:#008300;
  --series-violet:#9085e9;
  --series-red:#e66767;
  --status-good:#0ca30c;
  --status-warning:#fab219;
  --status-serious:#ec835a;
  --status-critical:#d03b3b;
  --success-text:#0ca30c;
  --danger-text:#e66767;
  --row-hover: rgba(57,135,229,0.10);
  --chip-bg:#262623;
}

/* The panel body is what stacks the cards — the reference's .wrap, which does not come across. */
.po-scope .tp-inner { display:flex; flex-direction:column; gap:16px; }
.po-scope { color:var(--text-primary); }

.po-scope .card {
    background: var(--surface-1);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    padding: 22px 24px;
  }
.po-scope .header-actions { display:flex; gap:8px; flex-wrap:wrap; }
.po-scope .kpi-grid {
    display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
  }
.po-scope .kpi-card {
    background: var(--surface-1); border:1px solid var(--card-border); border-radius:14px;
    padding:18px 20px;
  }
.po-scope .kpi-label { color:var(--text-secondary); font-size:12.5px; margin-bottom:10px; }
.po-scope .kpi-value { font-size:28px; font-weight:700; letter-spacing:-0.01em; }
.po-scope .kpi-delta { margin-top:8px; font-size:12.5px; color:var(--text-muted); }
.po-scope .kpi-delta.up { color:var(--danger-text); }
.po-scope .kpi-delta.down { color:var(--success-text); }
.po-scope .section-title { font-size:16px; font-weight:700; margin:0 0 2px 0; }
.po-scope .section-sub { color:var(--text-secondary); font-size:12.5px; margin:0 0 14px 0; }
.po-scope .card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.po-scope .seg { display:flex; border:1px solid var(--card-border); border-radius:9px; overflow:hidden; }
.po-scope .seg button {
    background:transparent; border:none; color:var(--text-secondary); font-size:12.5px;
    padding:7px 14px; cursor:pointer; font-family:inherit; border-right:1px solid var(--card-border);
  }
.po-scope .seg button:last-child { border-right:none; }
.po-scope .seg button.active { background: var(--series-blue); color:#fff; }
.po-scope .two-col { display:grid; grid-template-columns: 1fr 1fr; gap:16px; }
@media (max-width: 900px) {
  .po-scope .two-col { grid-template-columns: 1fr; }
  .po-scope .kpi-grid { grid-template-columns: repeat(2,1fr); }
}
.po-scope table { width:100%; border-collapse:collapse; font-size:13px; }
.po-scope thead th {
    text-align:right; color:var(--text-secondary); font-weight:600; font-size:12px;
    padding:10px 12px; border-bottom:1px solid var(--gridline); cursor:pointer; white-space:nowrap;
    user-select:none;
  }
.po-scope thead th:first-child,
.po-scope td:first-child { text-align:left; }
.po-scope thead th.sorted::after { content:" " attr(data-arrow); }
.po-scope tbody td { padding:10px 12px; border-bottom:1px solid var(--gridline); text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }
.po-scope tbody tr:hover { background: var(--row-hover); }
.po-scope tbody td.strong { font-weight:700; }
.po-scope .table-scroll { overflow-x:auto; }
.po-scope .table-scroll-v { overflow-x:auto; overflow-y:auto; max-height:520px; border:1px solid var(--gridline); border-radius:10px; }
.po-scope .table-scroll-v table { margin:0; }
.po-scope .table-scroll-v thead th { position:sticky; top:0; background:var(--surface-1); z-index:2; box-shadow: 0 1px 0 var(--gridline); }
.po-scope .muted { color:var(--text-muted); }
.po-scope .mono { font-variant-numeric: tabular-nums; }
.po-scope .bar-row { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.po-scope .bar-row:last-child { margin-bottom:0; }
.po-scope .bar-label { width:110px; flex-shrink:0; font-size:13px; color:var(--text-primary); }
.po-scope .bar-track { flex:1; height:14px; background: var(--gridline); border-radius:7px; overflow:hidden; position:relative; }
.po-scope .bar-fill { height:100%; border-radius:7px; }
.po-scope .bar-value { width:190px; flex-shrink:0; text-align:right; font-size:13px; font-variant-numeric: tabular-nums; }
.po-scope .bar-value .cnt { color:var(--text-muted); font-size:12px; }
.po-scope .hbar-item { margin-bottom:12px; }
.po-scope .hbar-item:last-child { margin-bottom:0; }
.po-scope .hbar-top { display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; }
.po-scope .hbar-top .name { color:var(--text-primary); }
.po-scope .hbar-top .val { font-variant-numeric: tabular-nums; font-weight:600; }
.po-scope .hbar-track { height:10px; background: var(--gridline); border-radius:5px; overflow:hidden; }
.po-scope .hbar-fill { height:100%; border-radius:5px; background: var(--series-blue); }
.po-scope .legend { display:flex; gap:18px; align-items:center; font-size:12.5px; color:var(--text-secondary); margin-bottom:10px; }
.po-scope .legend .item { display:flex; align-items:center; gap:6px; }
.po-scope .legend .dot { width:10px; height:10px; border-radius:3px; display:inline-block; }
.po-scope .chart-tooltip {
    position:absolute; pointer-events:none; background:var(--surface-1); border:1px solid var(--card-border);
    border-radius:8px; padding:8px 10px; font-size:12px; box-shadow:0 4px 16px rgba(0,0,0,0.12);
    opacity:0; transition:opacity .1s; white-space:nowrap; z-index:5;
  }
.po-scope .chart-tooltip .t-date { color:var(--text-secondary); margin-bottom:3px; }
.po-scope .chart-tooltip .t-row { display:flex; justify-content:space-between; gap:14px; }
.po-scope .chart-wrap { position:relative; }
.po-scope input.search-box {
    background:var(--surface-1); border:1px solid var(--card-border); border-radius:9px;
    padding:9px 12px; font-size:13px; color:var(--text-primary); font-family:inherit; width:280px;
  }
.po-scope input.search-box:focus { outline:2px solid var(--series-blue); outline-offset:-1px; }
.po-scope .drill-row { cursor:pointer; }
.po-scope .drill-row td:first-child { display:flex; align-items:center; gap:8px; text-align:left; }
.po-scope .chev { display:inline-block; width:10px; height:10px; border-right:2px solid var(--text-muted); border-bottom:2px solid var(--text-muted); transform:rotate(-45deg); transition:transform .15s; flex-shrink:0; }
.po-scope .drill-row.expanded .chev { transform:rotate(45deg); }
.po-scope .drill-detail { background: var(--page-plane); }
.po-scope .drill-detail td { padding:0; }
.po-scope .drill-detail-inner { padding:14px 20px; max-height:420px; overflow-y:auto; }
.po-scope .movement-table th,
.po-scope .movement-table td { font-size:12.5px; padding:7px 10px; }
.po-scope .badge { display:inline-block; padding:2px 8px; border-radius:6px; font-size:11.5px; font-weight:600; }
.po-scope .badge.new { background: rgba(27,175,122,0.15); color: var(--series-aqua); }
.po-scope .badge.gr { background: rgba(235,104,52,0.15); color: var(--series-orange); }
.po-scope .code-cell { font-weight:600; }
.po-scope .name-cell { color:var(--text-secondary); font-size:12px; }
.po-scope .footer-note {
    margin-top:18px; padding-top:16px; border-top:1px solid var(--gridline);
    font-size:12px; color:var(--text-secondary); line-height:1.7;
  }
.po-scope .footer-note b { color:var(--text-primary); }
.po-scope .empty-hint { color:var(--text-muted); font-size:13px; padding:20px; text-align:center; }

/* The reference sizes its charts from the card it sits in; inside a scroll box on a phone that
   is the min-width, exactly as every canvas in this app already works. */
@media (max-width: 991.98px) {
  .po-scope .chart-wrap { overflow-x:auto; }
  .po-scope .chart-wrap > svg { min-width: 560px; }
  .po-scope .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}