/* ─── Password Modal (Espresso palette) ─── */
dialog.pw-modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);border:none;border-radius:12px;padding:0;background:transparent;box-shadow:none;max-width:380px;width:90%;z-index:9999;}
dialog.pw-modal::backdrop{background:rgba(14,10,8,0.92);backdrop-filter:blur(6px);}
.pw-box{background:#2a221d;border-radius:12px;padding:36px;border:1px solid #1a1411;}
.pw-box .pw-brand{font-family:'Geist',-apple-system,sans-serif;font-size:22px;font-weight:700;color:#efe6d8;letter-spacing:0;margin-bottom:4px;}
.pw-box .pw-sub{font-size:11px;color:#d4a23e;margin-bottom:22px;line-height:1.5;text-transform:uppercase;letter-spacing:.08em;font-family:'Geist Mono',monospace;}
.pw-box input{width:100%;padding:10px 13px;border-radius:6px;border:1px solid #1a1411;background:#0e0a08;color:#f4ecdd;font-size:13px;outline:none;margin-bottom:12px;font-family:'Geist',sans-serif;}
.pw-box input:focus{border-color:#d4a23e;}
.pw-box button{width:100%;padding:10px;border-radius:6px;border:none;background:#d4a23e;color:#2a1d08;font-size:13px;font-weight:700;cursor:pointer;transition:background .15s;font-family:'Geist',sans-serif;}
.pw-box button:hover:not(:disabled){background:#b88a2f;}
.pw-box button:disabled{opacity:0.5;cursor:not-allowed;}
.pw-err{color:#e57373;font-size:11px;margin-bottom:10px;min-height:1.3em;font-family:'Geist Mono',monospace;}

/* ─── Light Main Panel + Dark Sidebar ─── */
:root{
  --bg-page:#f4f7fb;
  --bg-card:#ffffff;
  --bg-header:#ffffff;
  --text-primary:#0f172a;
  --text-secondary:#334155;
  --text-muted:#64748b;
  --brand-primary:#8f6418;
  --brand-accent:#0f766e;
  --border-color:#dbe3ed;
  --border-radius:10px;
  --color-up:#15803d;
  --color-down:#b91c1c;
  --color-neutral:#64748b;
  --shadow-card:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.055);
  --bg:var(--bg-page);
  --bg-2:#f8fafc;
  --surface:#ffffff;
  --panel:#ffffff;
  --border:var(--border-color);
  --border-soft:#f1f5f9;
  --rule:#e2e8f0;
  --ink:var(--text-primary);
  --ink-2:var(--text-secondary);
  --ink-dim:#475569;
  --ink-mute:var(--text-muted);
  --gold:var(--brand-primary);
  --gold-soft:rgba(143,100,24,0.1);
  --gold-dim:#a67421;
  --danger:var(--color-down);
  --danger-soft:rgba(220,38,38,0.1);
  --accent:var(--color-up);
  --accent-soft:rgba(22,163,74,0.1);
  --shadow:0 1px 3px rgba(0,0,0,.08);
  --shadow-lg:0 4px 20px rgba(0,0,0,.12);
  --radius:var(--border-radius);
  --serif:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{background:var(--bg);color:var(--ink);font-family:'Geist',-apple-system,sans-serif;font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;}
.mono{font-family:'Geist Mono',monospace;}
.serif{font-family:var(--serif);}

/* ─── Layout ─── */
.app{display:grid;grid-template-columns:220px 1fr;min-height:100vh;transition:grid-template-columns .22s ease;}
.app.sb-collapsed{grid-template-columns:0 1fr;}

/* ─── Sidebar ─── */
.sb{background:#0f1117;border-right:1px solid rgba(255,255,255,0.07);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden;transition:opacity .18s ease,min-width .22s ease;min-width:220px;}
.app.sb-collapsed .sb{opacity:0;pointer-events:none;min-width:0;}
.sb-head{padding:20px 20px 16px;border-bottom:1px solid rgba(255,255,255,0.07);}
.sb-glyph{display:inline-flex;align-items:center;gap:10px;margin-bottom:8px;}
.sb-icon{height:28px;width:auto;}
.sb-brand{font-family:var(--serif);font-size:17px;font-weight:700;color:#f1f5f9;letter-spacing:0;}
.sb-sub{font-size:10px;color:var(--gold);text-transform:uppercase;letter-spacing:.1em;font-family:'Geist Mono',monospace;margin-top:2px;}
.sb-date{font-size:10px;color:#4b5563;font-family:'Geist Mono',monospace;margin-top:10px;}

.sb-nav{flex:1;overflow-y:auto;padding:12px 10px;}
.sb-section{padding:12px 10px 4px;font-size:9.5px;color:#4b5563;text-transform:uppercase;letter-spacing:.12em;font-weight:600;font-family:'Geist Mono',monospace;}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;color:#6b7280;border-radius:6px;cursor:pointer;font-size:13.5px;font-weight:500;margin-bottom:2px;user-select:none;transition:background .12s,color .12s;border:1px solid transparent;position:relative;}
.nav-item:hover{background:rgba(255,255,255,0.05);color:#e2e8f0;}
.nav-item.on{background:rgba(212,162,62,0.12);border-color:rgba(212,162,62,0.2);color:#f1f5f9;font-weight:600;}
.nav-item.on::before{content:'';position:absolute;left:0;top:20%;height:60%;width:3px;background:var(--gold);border-radius:0 2px 2px 0;}
.nav-glyph{width:18px;text-align:center;font-size:11px;color:#4b5563;font-family:'Geist Mono',monospace;font-weight:600;}
.nav-item:hover .nav-glyph{color:#94a3b8;}
.nav-item.on .nav-glyph{color:var(--gold);}
.bottom-nav{display:none;}
.bottom-nav-item{border:0;background:transparent;font-family:'Geist',-apple-system,sans-serif;}

.sb-foot{padding:12px 20px;border-top:1px solid rgba(255,255,255,0.06);font-size:10px;color:#4b5563;}
.sb-foot .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:5px;vertical-align:middle;}

/* ─── Sidebar keeps its own dark token overrides ─── */
.sb{
  --ink:#e2e8f0;
  --ink-2:#cbd5e1;
  --ink-dim:#6b7280;
  --ink-mute:#4b5563;
  --surface:rgba(255,255,255,0.06);
  --border:rgba(255,255,255,0.08);
  --border-soft:rgba(255,255,255,0.04);
  --gold:#d4a23e;
  --gold-soft:rgba(212,162,62,0.15);
}

/* ─── Sidebar toggle button ─── */
.sb-toggle-btn{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--ink-dim);font-size:14px;cursor:pointer;transition:color .12s,border-color .12s,background .12s;flex-shrink:0;}
.sb-toggle-btn:hover{color:var(--gold);border-color:var(--gold);background:var(--gold-soft);}
.tb-left{display:flex;align-items:center;gap:12px;}

/* ─── Main Content ─── */
.main{min-width:0;display:flex;flex-direction:column;background:
  radial-gradient(circle at top left,rgba(143,100,24,.055),transparent 300px),
  linear-gradient(180deg,#f9fbfd 0%,var(--bg) 360px);}

.topbar{background:rgba(255,255,255,.92);border-bottom:1px solid var(--border);padding:12px 22px 12px 16px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:10;gap:12px;box-shadow:0 1px 12px rgba(15,23,42,.07);backdrop-filter:blur(14px);}
.tb-title{font-family:var(--serif);font-size:19px;font-weight:700;color:var(--ink);letter-spacing:0;}
.tb-right{display:flex;gap:8px;align-items:center;}
.tb-badge{font-size:9.5px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--gold-soft);color:var(--gold);border:1px solid var(--gold-dim);text-transform:uppercase;letter-spacing:.06em;font-family:'Geist Mono',monospace;}
.numfmt-control{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--border);border-radius:7px;background:#f8fafc;}
.numfmt-label{padding:0 6px;font-family:'Geist Mono',monospace;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-mute);}
.numfmt-option{min-height:28px;padding:4px 9px;border:0;border-radius:5px;background:transparent;color:var(--ink-dim);font-family:'Geist Mono',monospace;font-size:10px;font-weight:700;cursor:pointer;}
.numfmt-option.on{background:#111827;color:#fff;box-shadow:0 1px 3px rgba(15,23,42,.18);}
.numfmt-option:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

.pad{padding:22px 24px 36px;display:flex;flex-direction:column;gap:20px;max-width:1560px;width:100%;margin:0 auto;}

/* ─── Page sections ─── */
.page-section{display:none;}
.page-section.on{display:flex;flex-direction:column;gap:20px;}
/* Compact vertical rhythm for the dashboard pages. */
#page-1.on,#page-2.on,#page-3.on,#page-4.on{gap:14px;}
#page-1 .card-head,#page-2 .card-head,#page-3 .card-head,#page-4 .card-head{margin-bottom:8px;padding-bottom:8px;}

/* ─── Filter bar ─── */
.fbar{padding:14px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-card);}
.fbar label{font-size:11px;color:var(--ink-dim);display:flex;align-items:center;gap:5px;font-weight:500;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.06em;}
.fbar select{background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-size:12px;color:var(--ink);font-family:'Geist',sans-serif;outline:none;min-height:24px;}
.fbar select:focus{border-color:var(--gold);}
.fbar .reset-btn{margin-left:auto;padding:4px 12px;border-radius:6px;border:1px solid var(--border);background:#fff;color:var(--ink-dim);font-size:11px;font-family:'Geist',sans-serif;cursor:pointer;transition:all .12s;min-height:24px;}
.fbar .reset-btn:hover{border-color:var(--gold);color:var(--gold);}
.mobile-filter-toggle{display:none;}
.filter-mobile-body{display:contents;}
#filter-bar,#comp-global-fbar{align-items:stretch;flex-direction:column;gap:5px;}
#filter-bar .filter-row,#comp-global-fbar .filter-row{display:flex;align-items:flex-end;gap:6px;width:100%;flex-wrap:wrap;}
#filter-bar .filter-row-primary .year-filter,#comp-global-fbar .filter-row-primary .year-filter{flex:0 0 auto;}
#filter-bar .filter-row-primary .mall-filter,#comp-global-fbar .filter-row-primary .mall-filter{flex:0 0 auto;margin-left:auto;}
#filter-bar .filter-row-secondary,#comp-global-fbar .filter-row-secondary{padding-top:5px;border-top:1px solid var(--border-soft);}
#filter-bar .filter-row-secondary label,#comp-global-fbar .filter-row-secondary label{flex:1 1 140px;}
#filter-bar .filter-row-secondary .month-filter,#comp-global-fbar .filter-row-secondary .month-filter{flex:0 0 auto;}

/* ─── KPI Cards ─── */
.kpi-row{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.kpi-card{background:#fff;border:1px solid #d8e0ea;border-radius:var(--radius);padding:17px 18px;box-shadow:0 6px 16px rgba(15,23,42,.035);position:relative;overflow:hidden;}
.kpi-card::before{display:none;}
.kpi-lbl{font-size:10.5px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em;font-weight:600;font-family:'Geist Mono',monospace;margin-bottom:7px;}
.kpi-val{font-family:'Geist Mono',monospace;font-size:27px;font-weight:700;color:#0f172a;letter-spacing:0;line-height:1.05;font-variant-numeric:tabular-nums;}
.kpi-sub{font-size:11.5px;color:var(--ink-mute);margin-top:6px;font-family:'Geist Mono',monospace;line-height:1.4;}

/* ─── Grid layouts ─── */
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.cols-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
.cols-21{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;}
.cols-12{display:grid;grid-template-columns:1fr 1.7fr;gap:16px;}

/* ─── Cards ─── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-card);}
.card-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:14px;gap:12px;border-bottom:1px solid var(--border-soft);padding-bottom:10px;}
.card-title{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--ink);letter-spacing:0;}
.card-sub{font-size:11.5px;color:var(--ink-dim);margin-top:4px;line-height:1.45;}
.card-meta{font-size:10.5px;color:var(--ink-mute);font-family:'Geist Mono',monospace;letter-spacing:.04em;text-transform:uppercase;}
.card-meta-warn{font-size:10.5px;font-weight:700;color:#b07d20;font-family:'Geist Mono',monospace;letter-spacing:.04em;text-transform:uppercase;background:rgba(212,162,62,0.14);border:1px solid rgba(212,162,62,0.4);border-radius:4px;padding:3px 8px;white-space:nowrap;}

/* ─── Chart wrappers ─── */
.chart-h{position:relative;height:280px;min-height:0;}
.chart-monthly-performance{height:360px;}
.chart-h-tall{position:relative;height:360px;min-height:0;}
.chart-h-short{position:relative;height:210px;min-height:0;}
.overview-chart-grid .chart-annual,.overview-chart-grid .chart-monthly-performance{height:360px;}
.comp-chart-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:14px;}
.comp-chart-h{height:280px;}

/* ─── Year pill buttons ─── */
.year-btns{display:flex;gap:6px;flex-wrap:wrap;}
.year-btn{padding:4px 12px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--ink-dim);font-size:11px;font-weight:600;cursor:pointer;font-family:'Geist Mono',monospace;transition:all .12s;}
.year-btn:hover{border-color:var(--gold);color:var(--gold);}
.year-btn.on{background:var(--gold);border-color:var(--gold);color:#fff;}
/* ─── Section-head tabs (text + underline, not pills) ─── */
.sec-tabs{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.sec-tab{background:none;border:none;border-bottom:2px solid transparent;padding:2px 1px 4px;font-size:13px;font-weight:600;color:var(--ink-dim);cursor:pointer;font-family:'Geist Mono',monospace;transition:all .12s;}
.sec-tab:hover{color:var(--gold);}
.sec-tab.on{color:var(--gold);border-bottom-color:var(--gold);}
.sec-tab-sep{color:var(--border);font-size:13px;user-select:none;}

/* ─── Tables ─── */
.tbl-wrap{overflow-x:auto;border-radius:7px;border:1px solid var(--border-soft);}
.scroll-340{max-height:340px;overflow-y:auto;border-radius:7px;border:1px solid var(--border-soft);}
.tbl{width:100%;border-collapse:collapse;font-size:12.5px;line-height:1.45;}
.tbl thead th{padding:10px 12px;text-align:left;font-weight:700;color:#475569;background:#eef2f7;border-bottom:1px solid var(--border);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;font-family:'Geist Mono',monospace;cursor:pointer;user-select:none;white-space:nowrap;position:sticky;top:0;z-index:3;}
.tbl thead th:hover{color:var(--gold);}
.tbl tbody td{padding:10px 12px;color:var(--ink-2);border-bottom:1px solid var(--border-soft);vertical-align:middle;}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr:nth-child(even){background:#fbfdff;}
.tbl tbody tr:hover{background:rgba(212,162,62,0.06);}
.tbl td.r,.tbl th.r{text-align:right;font-family:'Geist Mono',monospace;}
.tbl td.num{font-family:'Geist Mono',monospace;color:var(--ink);}
.tbl tfoot td{padding:9px 12px;border-top:2px solid var(--border);background:var(--bg-2);font-weight:600;color:var(--gold);font-size:12px;font-family:'Geist Mono',monospace;position:sticky;bottom:0;z-index:2;}
#comp-detail-tbl th,#comp-detail-tbl td{padding:7px 8px;text-align:center;white-space:nowrap;}
#comp-detail-tbl th:nth-child(2),#comp-detail-tbl td:nth-child(2){text-align:left;}
#comp-detail-tbl th:nth-child(7),#comp-detail-tbl td:nth-child(7){text-align:left;}
#comp-sku-summary-tbl th,#comp-sku-summary-tbl td{padding:7px 8px;text-align:center;white-space:nowrap;}
#comp-sku-summary-tbl th:nth-child(2),#comp-sku-summary-tbl td:nth-child(2){text-align:left;}
#tblStoreBrandSku th,#tblStoreBrandSku td{padding:7px 8px;text-align:center;white-space:nowrap;}
#tblStoreBrandSku th:nth-child(1),#tblStoreBrandSku td:nth-child(1),
#tblStoreBrandSku th:nth-child(4),#tblStoreBrandSku td:nth-child(4){text-align:left;}
#tblStoreRankings th,#tblStoreRankings td{padding:7px 8px;text-align:center;white-space:nowrap;}
#tblStoreRankings th:nth-child(2),#tblStoreRankings td:nth-child(2){text-align:left;}
#tblStoreRankOv th,#tblStoreRankOv td{padding:7px 8px;text-align:center;white-space:nowrap;}
#tblStoreRankOv th:nth-child(2),#tblStoreRankOv td:nth-child(2){text-align:left;}
#tblBrandRank th,#tblBrandRank td{padding:7px 8px;text-align:center;white-space:nowrap;}
#tblBrandRank th:nth-child(2),#tblBrandRank td:nth-child(2){text-align:left;}
/* Keep the three ranking tables compact and give the composition column the
   space it needs. Fixed layouts prevent one long store / brand name from
   creating an unnecessary horizontal scrollbar. */
#tblStoreRankOv,#tblBrandRank,#tblStoreRankings{width:100%;table-layout:fixed;}
#tblStoreRankOv th:nth-child(1),#tblStoreRankOv td:nth-child(1){width:40px;}
#tblStoreRankOv th:nth-child(2),#tblStoreRankOv td:nth-child(2){width:18%;overflow:hidden;text-overflow:ellipsis;}
#tblStoreRankOv th:nth-child(3),#tblStoreRankOv td:nth-child(3){width:78px;overflow:hidden;}
#tblStoreRankOv th:nth-child(4),#tblStoreRankOv td:nth-child(4){width:92px;}
#tblStoreRankOv th:nth-child(5),#tblStoreRankOv td:nth-child(5){width:76px;}
#tblStoreRankOv th:nth-child(6),#tblStoreRankOv td:nth-child(6){width:112px;}
#tblStoreRankOv th:nth-child(7),#tblStoreRankOv td:nth-child(7){width:90px;}
#tblStoreRankOv th:nth-child(8),#tblStoreRankOv td:nth-child(8){width:70px;}
#tblBrandRank th:nth-child(1),#tblBrandRank td:nth-child(1){width:40px;}
#tblBrandRank th:nth-child(2),#tblBrandRank td:nth-child(2){width:150px;overflow:hidden;text-overflow:ellipsis;}
#tblBrandRank th:nth-child(3),#tblBrandRank td:nth-child(3){width:140px;}
#tblBrandRank th:nth-child(4),#tblBrandRank td:nth-child(4){width:140px;}
#tblBrandRank th:nth-child(5),#tblBrandRank td:nth-child(5){width:100px;}
#tblBrandRank th:nth-child(6),#tblBrandRank td:nth-child(6){width:90px;}
#tblStoreRankings th:nth-child(1),#tblStoreRankings td:nth-child(1){width:44px;}
#tblStoreRankings th:nth-child(2),#tblStoreRankings td:nth-child(2){width:160px;overflow:hidden;text-overflow:ellipsis;}
#tblStoreRankings th:nth-child(3),#tblStoreRankings td:nth-child(3){width:88px;overflow:hidden;}
#tblStoreRankings th:nth-child(4),#tblStoreRankings td:nth-child(4){width:105px;}
#tblStoreRankings th:nth-child(5),#tblStoreRankings td:nth-child(5){width:95px;}
#tblStoreRankings th:nth-child(6),#tblStoreRankings td:nth-child(6){width:110px;}
#tblStoreRankings th:nth-child(7),#tblStoreRankings td:nth-child(7){width:82px;}
#tblStoreRankings .store-rank-name{min-width:0;}
#tblStoreRankings .store-rank-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#tblBrandMall th,#tblBrandMall td{padding:7px 8px;text-align:center;white-space:nowrap;}
#tblBrandMall th:nth-child(1),#tblBrandMall td:nth-child(1){text-align:center;min-width:150px;}
#tblSkuRank th,#tblSkuRank td{padding:7px 8px;text-align:center;white-space:nowrap;}
#tblSkuRank th:nth-child(4),#tblSkuRank td:nth-child(4){text-align:left;}
#tblSkuRank{min-width:1020px;table-layout:fixed;}
#tblSkuRank th:nth-child(1),#tblSkuRank td:nth-child(1){width:38px;}
#tblSkuRank th:nth-child(2),#tblSkuRank td:nth-child(2){width:100px;}
#tblSkuRank th:nth-child(3),#tblSkuRank td:nth-child(3){width:118px;}
#tblSkuRank th:nth-child(4),#tblSkuRank td:nth-child(4){width:210px;}
#tblSkuRank th:nth-child(5),#tblSkuRank td:nth-child(5){width:72px;}
#tblSkuRank th:nth-child(6),#tblSkuRank td:nth-child(6){width:108px;}
#tblSkuRank th:nth-child(7),#tblSkuRank td:nth-child(7){width:82px;}
#tblSkuRank th:nth-child(8),#tblSkuRank td:nth-child(8){width:88px;}
#tblSkuRank th:nth-child(9),#tblSkuRank td:nth-child(9){width:88px;}
#tblSkuRank th:nth-child(10),#tblSkuRank td:nth-child(10){width:110px;}
#sku-panel-summary .scroll-340,#sku-panel-detail .scroll-340{max-height:560px;}

/* ─── Tags / badges ─── */
.tag{display:inline-flex;align-items:center;padding:1px 7px;border-radius:3px;font-size:10px;font-weight:600;font-family:'Geist Mono',monospace;}
.tag-gold{background:var(--gold-soft);color:var(--gold);}
.tag-green{background:var(--accent-soft);color:var(--accent);}
.tag-red{background:var(--danger-soft);color:var(--danger);}

/* ─── Rank pill ─── */
.rank-pill{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--border);color:var(--ink-dim);font-family:'Geist Mono',monospace;font-size:11px;font-weight:700;}
.rank-pill.top3{background:var(--gold-soft);color:var(--gold);}

/* ─── Brand dropdown ─── */
.brand-sel-wrap{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--ink-dim);}
.brand-sel-wrap select{background:var(--bg-2);border:1px solid var(--border);border-radius:5px;padding:5px 9px;font-size:11.5px;color:var(--ink);font-family:'Geist',sans-serif;outline:none;}
.brand-sel-wrap select:focus{border-color:var(--gold);}

/* ─── Scrollbars ─── */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px;}
::-webkit-scrollbar-track{background:transparent;}

/* ─── Loading overlay ─── */
#loading-overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:100;flex-direction:column;gap:14px;}
#loading-overlay .spin{width:30px;height:30px;border:2px solid #e2e8f0;border-top-color:#b07d20;border-radius:50%;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}
#loading-overlay .msg{font-family:var(--serif);font-size:16px;color:var(--ink-dim);}

/* ─── Divider heading ─── */
.page-meta{padding:2px 2px 0;}
.page-meta .sh-meta{font-size:10px;color:var(--ink-mute);font-family:'Geist Mono',monospace;letter-spacing:.06em;text-transform:uppercase;}

/* ─── Collapse toggle ─── */
.collapse-toggle{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--gold);cursor:pointer;font-family:'Geist Mono',monospace;padding:4px 0;user-select:none;}
.collapse-toggle:hover{text-decoration:underline;}

/* ─── Legend row ─── */
.legend{display:flex;gap:12px;font-size:10.5px;color:var(--ink-dim);align-items:center;flex-wrap:wrap;}
.legend .lg{display:inline-flex;align-items:center;gap:4px;font-family:'Geist Mono',monospace;text-transform:uppercase;letter-spacing:.04em;}
.legend .sw{width:8px;height:8px;border-radius:50%;}

/* ─── Direct year / month selectors ─── */
.period-filter{display:flex;flex-direction:column;gap:3px;}
.period-picker{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;}
.period-chip{height:24px;min-width:32px;padding:0 7px;border:1px solid var(--border);border-radius:6px;background:var(--bg-2);color:var(--ink-dim);font-family:'Geist Mono',monospace;font-size:10px;font-weight:700;text-transform:uppercase;cursor:pointer;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;white-space:nowrap;}
.period-chip:hover{border-color:var(--gold);color:#8a6116;background:#fffaf0;}
.period-chip:focus-visible{outline:2px solid rgba(176,125,32,.35);outline-offset:2px;}
.period-chip.on{border-color:var(--gold);background:var(--gold);color:#fff;box-shadow:0 3px 8px rgba(143,100,24,.2);}
.month-picker .period-chip{min-width:27px;padding:0 5px;font-size:9.5px;}

/* ─── Brand multi-select dropdown ─── */
.flt-ms{position:relative;display:inline-block;}
.flt-ms-trigger{background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:4px 7px;font-size:10.5px;color:var(--ink);cursor:pointer;min-width:120px;max-width:200px;min-height:24px;display:flex;justify-content:space-between;gap:6px;align-items:center;outline:none;user-select:none;}
.flt-ms-trigger.open,.flt-ms-trigger:focus{border-color:var(--gold);}
#comp-global-fbar .flt-ms-sm .flt-ms-trigger{min-width:70px;max-width:100px;}
#comp-global-fbar .filter-row-secondary label.flt-label-sm{flex:0 1 100px;}
/* M-16 Revise2: Q label had no flex constraint (fell back to the generic 1 1 140px
   rule below) and grew to fill leftover row space, pushing Brand away from it with
   a large visual gutter — same fix pattern already used for .month-filter. */
#comp-global-fbar .filter-row-secondary label.q-filter{flex:0 0 auto;}
/* Keep every Compensation selector on row 2 without creating a desktop scroll
   container. Narrow/mobile layouts get their scroll fallback in the responsive
   rules below. Product receives more room than the compact dropdowns. */
#comp-global-fbar .filter-row-secondary{gap:3px;flex-wrap:nowrap;overflow:visible;padding-bottom:2px;}
#comp-global-fbar .filter-row-secondary #comp-product-search{width:100%;min-width:0;max-width:none;box-sizing:border-box;padding:4px 7px;min-height:24px;}
#comp-global-fbar .filter-row-secondary .reset-btn{margin-left:auto;}
/* M-16 Revise2: trigger label span had no white-space/overflow rule, so a long
   selected value (e.g. a long brand name) wrapped to 2 lines inside the
   width-capped trigger instead of truncating. Applies to every .flt-ms-trigger
   (global + local Compensation bar) since it's the same shared component. */
.flt-ms-trigger>span:not(.ms-arrow){white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto;}
.flt-ms-trigger .ms-arrow{font-size:8px;color:var(--ink-mute);flex-shrink:0;transition:transform .15s;}
.flt-ms-trigger.open .ms-arrow{transform:rotate(180deg);}
.flt-ms-panel{display:none;position:absolute;top:calc(100% + 3px);left:0;min-width:170px;background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:var(--shadow-lg);z-index:200;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px) scale(.98);transform-origin:top left;transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;}
.flt-ms-panel.open{display:block;opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0) scale(1);transition-delay:0s;}
.ms-scroll{max-height:180px;overflow-y:auto;padding:4px 0;}
.ms-opt{display:flex;align-items:center;gap:7px;padding:6px 10px;font-size:11.5px;color:var(--ink);cursor:pointer;font-family:'Geist',sans-serif;}
.ms-opt:hover{background:var(--gold-soft);}
.ms-opt-all{border-bottom:1px solid var(--border-soft);font-weight:700;color:var(--ink-dim);position:sticky;top:0;background:var(--surface);z-index:1;}
.ms-opt-all:hover{background:#fff8e8;color:var(--ink);}
.ms-opt input[type=checkbox]{accent-color:var(--gold);cursor:pointer;flex-shrink:0;width:13px;height:13px;}
.ms-opt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px;}
.ms-opt-active{background:var(--gold-soft);font-weight:700;color:var(--ink);}
/* sticky ALL row must stay fully opaque or scrolled options show through it */
.ms-opt-all.ms-opt-active{background-color:var(--surface);background-image:linear-gradient(var(--gold-soft),var(--gold-soft));}
.ms-search{padding:6px 8px 4px;position:sticky;top:0;background:var(--surface);z-index:2;}
.ms-search input{width:100%;padding:5px 8px;font-size:11px;border:1px solid var(--border);border-radius:5px;outline:none;box-sizing:border-box;background:var(--bg-2);color:var(--ink);font-family:'Geist',sans-serif;}
.ms-search input:focus{border-color:var(--gold);}
/* ─── Mall logo picker ─── */
.mall-picker{display:flex;gap:5px;flex-wrap:wrap;align-items:center;}
.mall-btn{background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:3px 7px;cursor:pointer;transition:border-color .12s,box-shadow .12s,background .12s;height:28px;min-width:40px;max-width:104px;display:flex;align-items:center;justify-content:center;font-family:'Geist',sans-serif;font-size:11px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mall-btn img{height:17px;max-width:58px;object-fit:contain;filter:grayscale(30%);transition:filter .12s;}
.mall-btn:hover{border-color:#94a3b8;}
.mall-btn.active{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold);background:#fffaf0;}
.mall-btn.active img{filter:none;}

/* Desktop filter compaction (G-1). Mobile rules below remain unchanged. */
@media (min-width:769px){
  .fbar{gap:4px;padding:7px 9px;}
  .fbar label{flex:1 1 86px;min-width:80px;gap:2px;font-size:9.5px;letter-spacing:.03em;flex-direction:column;align-items:flex-start;}
  .fbar label.mall-filter{flex:0 0 auto;}
  .fbar select{width:100%;min-width:80px;padding:4px 6px;min-height:24px;}
  .fbar .flt-ms{display:block;width:100%;min-width:80px;}
  .fbar .flt-ms-trigger{width:100%;min-width:80px;max-width:none;padding:4px 6px;}
  .fbar .mall-picker{gap:3px;flex-wrap:nowrap;}
  .fbar .reset-btn{flex:0 0 auto;margin-left:0;padding:4px 8px;align-self:flex-end;}
  #filter-bar,#comp-global-fbar{gap:5px;}
  #filter-bar .filter-row,#comp-global-fbar .filter-row{gap:5px;}
  #filter-bar .filter-row-primary .year-filter,#comp-global-fbar .filter-row-primary .year-filter{flex:0 0 auto;}
  #filter-bar .filter-row-secondary .month-filter,#comp-global-fbar .filter-row-secondary .month-filter{flex:0 0 auto;}
  #comp-global-fbar .filter-row-secondary label.comp-product-filter{flex:0 0 clamp(150px,12vw,200px);min-width:150px;}
  /* Row 1 only (Year + Mall): label sits to the left of the pickers, not stacked above —
     row 2 keeps the label-above layout untouched. */
  #filter-bar .filter-row-primary label,#comp-global-fbar .filter-row-primary label{flex-direction:row;align-items:center;gap:7px;flex:0 0 auto;min-width:0;}
}

/* ─── Page 4 — subheadings & brand cards ─── */
.p4-subhead{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em;padding-bottom:4px;border-bottom:1px solid var(--border-soft);margin-top:4px;}
.qty-mo-note{font-size:10px;color:var(--ink-mute);font-family:'Geist Mono',monospace;padding:6px 4px 2px;}
/* M-16 Revise2 (Part 2): was flex-wrap, which re-pairs items into different rows
   at every container width — reads as "messy"/inconsistent even though DOM order
   never changed. One-per-line removes the width-dependent reflow; source order is
   unchanged (formulas, then scaling note, then gold → ฿ → Unknown, which already
   matches the badge priority _badgeRank uses). Tightened gap/line-height per the
   "compact, closer-set list" request.
   M-26: merged the six items into two fixed spans to shrink card height —
   still column-stacked, same flex strategy, just fewer items. */
.qty-mo-legend{display:flex;flex-direction:column;gap:1px;}
.qty-mo-legend-item{white-space:normal;line-height:1.35;}
.p4-brand-kpi-row{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px;}
.p4-bk-card{flex:1 1 185px;min-width:150px;background:linear-gradient(145deg,#fff 35%,var(--brand-wash,#f8fafc) 145%);border:1px solid var(--border);border-radius:8px;padding:10px 12px;box-shadow:0 5px 14px rgba(15,23,42,.04);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.p4-bk-card:hover{transform:translateY(-1px);border-color:#cbd5e1;box-shadow:0 10px 24px rgba(15,23,42,.07);}
.p4-bk-brand{display:flex;align-items:center;gap:7px;font-family:var(--serif);font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.p4-bk-dot{width:8px;height:8px;border-radius:50%;background:var(--brand-color);box-shadow:0 0 0 3px var(--brand-wash);flex:0 0 auto;}
.brand-id{display:inline-flex;align-items:center;gap:7px;min-width:0;max-width:100%;color:inherit;}
.brand-id.center{justify-content:center;}
.brand-id-name{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-logo-shell{position:relative;display:inline-grid;place-items:center;width:38px;height:26px;flex:0 0 38px;border:1px solid var(--brand-border,var(--border));border-radius:5px;background:#fff;overflow:hidden;}
.brand-logo-shell.sm{width:28px;height:20px;flex-basis:28px;border-radius:4px;}
.brand-logo-shell.lg{width:50px;height:32px;flex-basis:50px;border-radius:6px;}
.brand-logo-shell.wide{width:50px;flex-basis:50px;}
.brand-logo-shell.sm.wide{width:38px;flex-basis:38px;}
.brand-logo-shell.lg.wide{width:66px;flex-basis:66px;}
.brand-logo-fallback{font-family:'Geist Mono',monospace;font-size:8px;font-weight:800;color:var(--brand-color,var(--ink-dim));letter-spacing:.02em;}
.brand-logo-shell img{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);object-fit:contain;background:#fff;}
.brand-tag{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:2px 7px 2px 3px;border-radius:4px;font-size:10.5px;font-weight:700;}
.brand-tag.center{justify-content:center;margin:0 auto;}
.brand-table-name{color:var(--brand-color);}
.brand-tag-text{padding:2px 7px;}
.brand-tag .brand-logo-shell{border:0;background:rgba(255,255,255,.88);}
.p4-bk-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding-top:8px;border-top:1px solid var(--border-soft);}
.p4-bk-metric{display:flex;flex-direction:column;gap:2px;min-width:0;}
.p4-bk-malls{display:flex;align-items:center;gap:7px;margin-top:8px;padding-top:7px;border-top:1px solid var(--border-soft);min-width:0;}
.p4-bk-malls-lbl{font-family:'Geist Mono',monospace;font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute);flex:0 0 auto;}
.p4-bk-mall-list{display:flex;align-items:center;gap:4px;min-width:0;overflow-x:auto;padding-bottom:1px;}
.p4-bk-mall{display:inline-flex;flex:0 0 auto;}
.p4-bk-mall-logo,.p4-bk-mall-placeholder{width:32px;height:22px;border:1px solid var(--border);border-radius:4px;background:#fff;object-fit:contain;padding:2px;}
.p4-bk-mall-placeholder{display:grid;place-items:center;background:#f8fafc;color:var(--ink-dim);font-family:'Geist Mono',monospace;font-size:8px;font-weight:700;padding:0;}
.mall-logo-shell{position:relative;display:inline-grid;place-items:center;overflow:hidden;padding:0!important;box-sizing:border-box;flex-shrink:0;}
.mall-logo-shell img{position:absolute;inset:1px;width:calc(100% - 2px);height:calc(100% - 2px);object-fit:contain;background:#fff;}
.mall-logo-fallback{font-family:'Geist Mono',monospace;font-size:8px;font-weight:800;color:var(--ink-dim);letter-spacing:0;}
.mall-logo-empty{background:#f8fafc;}
.vendor-badge{display:inline-flex;align-items:center;gap:5px;max-width:100%;padding:2px 7px 2px 3px;border:1px solid;border-radius:4px;font-family:'Geist Mono',monospace;font-size:10px;font-weight:600;line-height:1.2;white-space:nowrap;}
.vendor-logo,.vendor-logo-placeholder{width:30px;height:20px;border:1px solid currentColor;border-radius:3px;background:#fff;flex:0 0 30px;}
.vendor-badge-text{min-width:0;overflow:hidden;text-overflow:ellipsis;}

/* ─── Side-by-Side Comparison ─── */
.cmp-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:start;}
.cmp-side{border-radius:10px;padding:14px;}
.cmp-side-a{background:rgba(107,158,212,0.09);border:1px solid rgba(107,158,212,0.3);}
.cmp-side-b{background:rgba(212,162,62,0.09);border:1px solid rgba(212,162,62,0.3);}
.cmp-side-title{font-family:var(--serif);font-weight:700;font-size:13.5px;margin-bottom:10px;}
.cmp-side-a .cmp-side-title{color:#3f6ea5;}
.cmp-side-b .cmp-side-title{color:#b07d20;}
.cmp-side-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.cmp-side-filters label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--ink-dim);}
.cmp-side-filters select{padding:5px 7px;border:1px solid var(--border);border-radius:5px;background:var(--surface);color:var(--ink);font-size:11.5px;}
.cmp-side-stats{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:center;}
.cmp-stat-label{font-size:10.5px;color:var(--ink-mute);}
.cmp-stat-val{font-size:19px;font-weight:700;font-family:'Geist Mono',monospace;}
.cmp-side-a .cmp-stat-val{color:#3f6ea5;}
.cmp-side-b .cmp-stat-val{color:#b07d20;}
.cmp-vs{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 6px;}
.cmp-winner{padding:4px 12px;border-radius:14px;font-weight:700;font-size:11px;background:var(--bg-2);color:var(--ink-dim);white-space:nowrap;}
.cmp-vs-label{font-size:17px;font-weight:800;color:var(--ink-mute);}
.cmp-vs-detail{font-size:10px;color:var(--ink-mute);text-align:center;line-height:1.5;}
.cmp-clear-btn{padding:6px 16px;border-radius:6px;border:1px solid var(--border);background:var(--bg-2);color:var(--ink-dim);font-size:11px;font-family:'Geist',sans-serif;cursor:pointer;transition:all .12s;}
.cmp-clear-btn:hover{border-color:var(--gold);color:var(--gold);}
@media (max-width:820px){.cmp-grid{grid-template-columns:1fr;}.cmp-vs{flex-direction:row;flex-wrap:wrap;padding:8px 0;}}
.p4-bk-val{font-family:'Geist Mono',monospace;font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}

.filter-summary{font-size:10px;color:var(--ink-mute);font-family:'Geist Mono',monospace;padding:4px 0;}
.fbar input[type=text]{background:var(--bg-2);border:1px solid var(--border);border-radius:6px;padding:5px 9px;font-size:10.5px;color:var(--ink);font-family:'Geist',sans-serif;outline:none;width:180px;min-height:30px;box-sizing:border-box;}
.fbar input[type=text]:focus{border-color:var(--gold);}
.fbar-count{margin-left:auto;font-size:11px;color:var(--ink-mute);font-family:'Geist Mono',monospace;}
.tbl thead th.sort-asc::after{content:' ▲';}
.tbl thead th.sort-desc::after{content:' ▼';}
/* Insight strip — Step 1 */
.insight-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:6px 0 14px;background:var(--surface);border:1px solid var(--border);border-radius:7px;overflow:hidden;}
.insight-chip{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--gold);border-radius:6px;padding:8px 14px;flex:1 1 180px;min-width:160px;}
.insight-chip .ic-lbl{font-size:10px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.08em;font-family:'Geist Mono',monospace;margin-bottom:2px;}
.insight-chip .ic-val{font-family:'Geist Mono',monospace;font-size:16px;font-weight:700;color:var(--ink);line-height:1.2;font-variant-numeric:tabular-nums;}
.insight-chip .ic-val.ic-brand-val{font-family:inherit;font-size:14px;}
.insight-chip .ic-brand-val .brand-id{gap:6px;max-width:100%;}
.insight-chip .ic-brand-val .brand-logo-shell{width:28px;height:20px;flex-basis:28px;}
.insight-chip .ic-brand-val .brand-id-name{overflow:hidden;text-overflow:ellipsis;}
.insight-chip .ic-sub{font-size:10.5px;color:var(--ink-dim);font-family:'Geist Mono',monospace;margin-top:2px;}
.insight-chip .ic-val.up{color:#15803d;}
.insight-chip .ic-val.down{color:#dc2626;}
.insight-chip .ic-val.na{color:var(--ink-dim);}
.insight-strip>.insight-chip{min-width:0;background:transparent;border:0;border-left:1px solid var(--border);border-radius:0;padding:11px 14px;box-shadow:none;}
.insight-strip>.insight-chip:first-child{border-left:0;}
/* Overview impact command center */
.ov-impact{display:grid;grid-template-columns:minmax(300px,1.16fr) minmax(420px,1.84fr);gap:14px;align-items:stretch;}
.ov-impact-main{position:relative;overflow:hidden;margin-top:27px;border:1px solid #111827;border-radius:var(--radius);padding:15px 18px;background:linear-gradient(135deg,#111827 0%,#1f2937 100%);box-shadow:0 14px 30px rgba(15,23,42,.16);color:#f8fafc;}
.ov-impact-main::after{display:none;}
.ov-impact-main > *{position:relative;z-index:1;}
.ov-eyebrow{font-family:'Geist Mono',monospace;font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:#d4a23e;margin-bottom:6px;}
.ov-impact-title{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:0;line-height:1.2;margin-bottom:0;}
.ov-impact-value{font-family:'Geist Mono',monospace;font-size:38px;font-weight:700;letter-spacing:0;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums;}
.ov-impact-note{font-family:'Geist Mono',monospace;font-size:11px;color:#a9b6c7;margin-top:6px;}
.ov-impact-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px;}
.ov-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:#e2e8f0;border-radius:999px;padding:6px 10px;font-family:'Geist Mono',monospace;font-size:11px;}
.ov-pill strong{color:#fff;font-weight:700;}
.ov-impact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.ov-impact-card{background:#fff;border:1px solid #d8e0ea;border-radius:var(--radius);padding:18px 20px;box-shadow:0 6px 16px rgba(15,23,42,.035);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.ov-impact-card::before{display:none;}
.ov-impact-card.accent-green::before,.ov-impact-card.accent-blue::before,.ov-impact-card.accent-red::before{display:none;}
.ov-impact-lbl{font-family:'Geist Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-mute);margin-bottom:8px;font-weight:600;}
.ov-impact-name{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink);letter-spacing:0;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ov-impact-rank-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;min-width:0;}
.ov-rank-item{display:grid;grid-template-columns:16px 44px minmax(0,1fr);grid-template-areas:'rank logo details';gap:7px;align-items:start;min-width:0;padding:3px 8px;border-left:1px solid var(--border-soft);}
.ov-rank-item:first-child{border-left:0;}
.ov-rank-item.store{grid-template-columns:16px minmax(0,1fr);grid-template-areas:'rank details';}
.ov-rank-number{font-family:'Geist Mono',monospace;font-size:10px;font-weight:700;color:var(--ink-mute);text-align:center;}
.ov-rank-number{grid-area:rank;align-self:start;padding-top:2px;line-height:1;}
.ov-rank-logo{grid-area:logo;display:flex;align-items:flex-start;}
.ov-rank-logo .brand-logo-shell{width:44px;height:32px;flex-basis:44px;}
.ov-rank-details{grid-area:details;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding-top:1px;}
.ov-rank-name,.ov-rank-store-name{font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.ov-rank-sales{font-family:'Geist Mono',monospace;font-size:11px;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:6px;}
.ov-rank-share{font-family:'Geist Mono',monospace;font-size:10px;color:var(--ink-dim);font-variant-numeric:tabular-nums;white-space:nowrap;margin-top:2px;}
.ov-rank-empty{font-size:11px;color:var(--ink-dim);}
.ov-impact-metric{font-family:'Geist Mono',monospace;font-size:18px;line-height:1.2;font-weight:700;color:var(--ink);margin-top:10px;font-variant-numeric:tabular-nums;}
.ov-impact-sub{font-size:11.5px;color:var(--ink-dim);margin-top:5px;line-height:1.35;}
.ov-impact-trend.up .ov-impact-metric{color:var(--accent);}
.ov-impact-trend.down .ov-impact-metric{color:var(--danger);}
.ov-impact-trend.flat .ov-impact-metric{color:var(--ink-dim);}
/* Current + Latest Month KPI pairing (mirrors Sales Detail hero's hh-kpi-pair) */
.ov-kpi-pair{display:grid;grid-template-columns:minmax(0,1.15fr) 1px minmax(0,.95fr);gap:20px;align-items:stretch;margin-top:10px;}
.ov-kpi-block{display:flex;min-width:0;flex-direction:column;justify-content:center;}
.ov-kpi-label{font-family:'Geist Mono',monospace;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#94a3b8;margin-bottom:7px;}
.ov-kpi-value{font-family:var(--serif);font-size:28px;font-weight:700;letter-spacing:0;line-height:1.05;color:#d4a23e;font-variant-numeric:tabular-nums;}
.ov-kpi-meta{font-family:'Geist Mono',monospace;font-size:10.5px;color:#94a3b8;margin-top:6px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.ov-kpi-divider{width:1px;background:rgba(255,255,255,.18);border-radius:999px;}
.ov-kpi-sep{color:rgba(255,255,255,.34);}
/* Badges for MoM / YoY deltas on the dark hero background */
.ov-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-family:'Geist Mono',monospace;font-size:9.5px;font-weight:600;letter-spacing:.02em;}
.ov-badge.up{background:rgba(74,222,128,.18);color:#4ade80;}
.ov-badge.dn{background:rgba(248,113,113,.18);color:#f87171;}
.ov-badge.nu{background:rgba(255,255,255,.08);color:#94a3b8;}
/* Stat rows beneath the KPI pair (MOMENTUM / FILTERED SCOPE) — mirrors hh-context */
.ov-context{display:flex;align-items:center;flex-wrap:wrap;margin-top:10px;padding-top:9px;border-top:1px solid rgba(255,255,255,.12);font-family:'Geist Mono',monospace;font-size:10px;color:#94a3b8;}
.ov-context-item{display:inline-flex;align-items:center;gap:6px;padding:0 13px;}
.ov-context-item:first-child{padding-left:0;}
.ov-context-item+.ov-context-item{border-left:1px solid rgba(255,255,255,.16);}
.ov-context-item strong{color:#fff;font-size:11px;}
.ov-context+.ov-context{margin-top:5px;padding-top:7px;}
.ov-context-tag{display:inline-flex;align-items:center;padding-right:13px;color:#d4a23e;font-weight:600;letter-spacing:.06em;}
.ov-context-tag+.ov-context-item{border-left:1px solid rgba(255,255,255,.16);}
/* Performance Highlights grid wrapper + label */
.ov-impact-grid-wrap{display:flex;flex-direction:column;gap:10px;min-width:0;}
.ov-impact-grid-label{font-family:'Geist Mono',monospace;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-mute);}
.ov-logo-head{display:flex;align-items:center;gap:10px;min-width:0;}
.ov-logo{width:42px;height:28px;border:1px solid var(--border);border-radius:6px;background:#fff;object-fit:contain;padding:3px;flex-shrink:0;}
.ov-logo-placeholder{width:42px;height:28px;border:1px solid var(--border);border-radius:6px;background:#f8fafc;color:var(--ink-dim);display:grid;place-items:center;font-family:'Geist Mono',monospace;font-size:10px;font-weight:700;flex-shrink:0;}
.mall-avg-card{padding:14px 16px;}
.mall-avg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.mall-avg-title{font-family:var(--serif);font-size:16px;font-weight:700;color:var(--ink);}
.mall-avg-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:8px;}
.mall-avg-tool{appearance:none;border:1px solid var(--border);border-radius:5px;background:#fff;color:var(--ink-mute);padding:5px 9px;font-family:'Geist Mono',monospace;font-size:10px;font-weight:600;cursor:pointer;}
.mall-avg-tool:hover{color:var(--ink);border-color:#aebdce;}
.mall-avg-grid{overflow-x:auto;border:1px solid #d8e0ea;border-radius:7px;background:#fff;}
.mall-summary-head,.mall-summary-row,.mall-summary-detail{display:grid;grid-template-columns:minmax(165px,1.45fr) repeat(4,minmax(96px,.8fr)) 32px;min-width:610px;align-items:center;}
.mall-summary-head{min-height:27px;background:#f3f6f9;border-bottom:1px solid var(--border);color:var(--ink-mute);font-family:'Geist Mono',monospace;font-size:8.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.mall-summary-row{min-height:40px;border-bottom:1px solid var(--border-soft);}
.mall-summary-row:last-child{border-bottom:0;}
.mall-summary-cell{min-width:0;padding:4px 8px;}
.mall-summary-cell.num{text-align:right;font-family:'Geist Mono',monospace;font-size:11.5px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.mall-summary-cell.mall{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;color:var(--ink);}
.mall-summary-cell.mall span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mall-summary-logo{width:28px;height:20px;border:1px solid var(--border);border-radius:4px;background:#fff;object-fit:contain;padding:2px;flex-shrink:0;}
.mall-summary-placeholder{width:28px;height:20px;border:1px solid var(--border);border-radius:4px;background:#f8fafc;color:var(--ink-dim);display:grid;place-items:center;font-family:'Geist Mono',monospace;font-size:7px;font-weight:700;flex-shrink:0;}
.mall-summary-badge{display:inline-block;min-width:44px;padding:2px 4px;border:1px solid var(--border);border-radius:999px;background:#f8fafc;font-size:9.5px;line-height:1.05;text-align:center;}
.mall-summary-badge.up{color:#15803d;border-color:#b6d8c0;background:#f2fbf4;}
.mall-summary-badge.down{color:var(--danger);border-color:#efc4c4;background:#fff6f6;}
.mall-diff-bar{justify-content:flex-end;gap:5px;}
.mall-diff-bar .share-bar-fill{max-width:48px;}
.mall-diff-bar span{font-size:9.5px;color:var(--ink);}
.mall-diff-bar span.up{color:#15803d;}
.mall-diff-bar span.down{color:var(--danger);}
.mall-summary-na{color:var(--ink-mute);font-size:9.5px;font-weight:500;}
.mall-summary-expand-cell{padding-left:0;padding-right:5px;text-align:center;}
.mall-summary-expand{width:26px;height:26px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ink-mute);font-size:14px;line-height:1;cursor:pointer;}
.mall-summary-expand:hover,.mall-summary-expand:focus-visible{border-color:var(--border);background:#f3f6f9;color:var(--ink);outline:none;}
.mall-summary-detail{background:#fbfcfd;border-bottom:1px solid var(--border-soft);}
.mall-summary-detail .mall-summary-cell{padding-top:5px;padding-bottom:6px;color:var(--ink-mute);font-family:'Geist Mono',monospace;font-size:9px;}
.mall-summary-detail b{display:block;margin-top:1px;color:var(--ink);font-size:10.5px;font-variant-numeric:tabular-nums;}
.mall-summary-empty{padding:16px;color:var(--ink-mute);font-size:12px;text-align:center;}
.impact-strip{display:grid;grid-template-columns:minmax(280px,1.08fr) repeat(3,minmax(150px,.64fr));gap:12px;align-items:stretch;}
.impact-hero{grid-row:span 2;position:relative;overflow:hidden;border:1px solid #111827;border-radius:var(--radius);padding:18px 20px;background:linear-gradient(135deg,#111827 0%,#1f2937 100%);box-shadow:0 14px 30px rgba(15,23,42,.14);color:#f8fafc;}
.impact-hero::after{display:none;}
.impact-hero>*{position:relative;z-index:1;}
.impact-eyebrow{font-family:'Geist Mono',monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#d4a23e;margin-bottom:7px;}
.impact-title{font-family:var(--serif);font-size:21px;font-weight:700;letter-spacing:0;line-height:1.2;margin-bottom:7px;}
.impact-copy{font-size:12px;color:#cbd5e1;line-height:1.5;max-width:520px;margin-bottom:14px;}
.impact-value{font-family:'Geist Mono',monospace;font-size:34px;font-weight:700;line-height:1.05;color:#fff;font-variant-numeric:tabular-nums;}
.impact-note{font-family:'Geist Mono',monospace;font-size:10.5px;color:#a9b6c7;margin-top:8px;}
.impact-card{background:#fff;border:1px solid #d8e0ea;border-radius:var(--radius);padding:16px;box-shadow:0 6px 16px rgba(15,23,42,.035);overflow:hidden;display:flex;flex-direction:column;justify-content:center;}
.impact-lbl{font-family:'Geist Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px;font-weight:600;}
.impact-name-row{display:flex;align-items:center;gap:8px;min-width:0;}
.impact-name-row .brand-logo-shell{width:34px;height:24px;flex-basis:34px;}
.impact-name{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--ink);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.impact-metric{font-family:'Geist Mono',monospace;font-size:15px;font-weight:700;color:var(--ink-2);margin-top:8px;font-variant-numeric:tabular-nums;}
.impact-trend.up .impact-metric{color:var(--accent);}
.impact-trend.down .impact-metric{color:var(--danger);}
.impact-trend.flat .impact-metric{color:var(--ink-dim);}
.impact-sub{font-size:11px;color:var(--ink-dim);margin-top:4px;line-height:1.35;}
.impact-bar{height:5px;border-radius:999px;background:#eef2f7;margin-top:10px;overflow:hidden;}
.impact-fill{height:100%;border-radius:999px;background:var(--gold);width:0%;}
.impact-insight-strip{grid-column:2/-1;margin:0;align-self:stretch;}
.brand-impact-list{display:flex;flex-direction:column;gap:7px;margin-bottom:0;min-width:0;width:100%;justify-content:center;}
.brand-impact-row{display:grid;grid-template-columns:minmax(0,118px) 78px 78px max-content;align-items:center;justify-content:start;gap:7px;min-width:0;min-height:24px;}
.brand-impact-name{display:flex;align-items:center;gap:9px;min-width:0;font-size:12.5px;font-weight:700;color:var(--ink);}
.brand-impact-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.brand-impact-name span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-impact-main{display:inline;white-space:nowrap;}
.brand-impact-subval{display:inline;white-space:nowrap;font-family:'Geist Mono',monospace;font-size:10px;font-weight:500;color:var(--ink-mute);}
.brand-impact-subval::before{content:'· ';}
.brand-impact-detail{font-family:'Geist Mono',monospace;font-size:9px;font-weight:500;color:var(--ink-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.brand-impact-val{font-family:'Geist Mono',monospace;font-size:11.5px;font-weight:700;color:var(--ink-2);white-space:nowrap;flex:0 0 auto;}
.brand-impact-metric{display:flex;align-items:center;gap:5px;font-family:'Geist Mono',monospace;font-size:10.5px;color:var(--ink-dim);white-space:nowrap;flex:0 0 auto;}
.brand-impact-mall-logo,.brand-impact-mall-logo-placeholder{width:28px;height:20px;border:1px solid var(--border);border-radius:4px;background:#fff;flex-shrink:0;}
.brand-overview-grid{display:grid;grid-template-columns:minmax(500px,560px) minmax(430px,1fr);gap:16px;align-items:stretch;}
.brand-mix-body{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;align-items:center;align-content:center;justify-content:center;min-width:0;width:100%;min-height:280px;margin:0;} /* keep in sync with .chart-h (280px) so the adjacent monthly chart card matches 1:1 */
.brand-mix-donut{position:relative;width:120px;height:120px;min-width:0;justify-self:center;align-self:center;}
.chart-scroll-x{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;}
.chart-scroll-x canvas{max-width:none!important;}
.overview-chart-grid{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(420px,1.1fr);gap:16px;}
.metric-toggle{display:inline-flex;border:1px solid var(--border);border-radius:999px;background:#f8fafc;padding:2px;gap:2px;}
.metric-toggle button{border:0;background:transparent;border-radius:999px;padding:4px 10px;font-family:'Geist Mono',monospace;font-size:10px;font-weight:700;color:var(--ink-dim);cursor:pointer;}
.metric-toggle button.on{background:#111827;color:#fff;}
.ov-mall-grid{grid-template-columns:minmax(260px,.78fr) minmax(560px,1.22fr);}
.ov-mall-share-card{display:flex;flex-direction:column;}
.ov-mall-share-card .chart-h{margin:auto 0;}
.ov-store-rank-card .tbl-wrap{overflow-x:hidden;}
.ov-store-rank-wrap{max-height:390px;overflow-y:auto;}
.rank-split{display:flex;align-items:center;flex-wrap:nowrap;gap:5px;min-width:0;max-width:100%;overflow:hidden;}
#tblBrandRank .rank-split,#tblStoreRankings .rank-split{max-width:none;width:100%;}
.rank-split-entity{display:inline-flex;align-items:center;gap:4px;min-width:0;max-width:100%;padding:3px 6px 3px 3px;border:1px solid var(--border);border-radius:999px;background:var(--bg-2);color:var(--ink-2);font:700 10px/1.2 'Geist Mono',monospace;cursor:pointer;flex:0 1 auto;}
.rank-split-entity:hover{border-color:var(--gold);background:var(--gold-soft);}
.rank-split-entity:focus-visible{position:relative;z-index:1;outline:2px solid var(--ink);outline-offset:2px;}
.rank-split-entity .brand-logo-shell{width:24px;height:18px;flex-basis:24px;}
.rank-split-entity .mall-logo-shell{width:24px;height:18px;flex:0 0 24px;border-radius:4px;}
.rank-split-entity-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:105px;}
.rank-split-entity.has-visual-logo .rank-split-entity-name{display:none;}
.rank-split-entity-pct{color:var(--gold);white-space:nowrap;}
.rank-split-entity.other{border-style:dashed;background:#f8fafc;}
.rank-split-empty{color:var(--ink-mute);font-family:'Geist Mono',monospace;font-size:11px;}
.rank-split-note{margin-top:8px;font-family:'Geist Mono',monospace;font-size:10px;line-height:1.35;color:var(--ink-mute);}
/* Page 3 - Sales by Store impact dashboard */
.store-dashboard-grid{display:grid;grid-template-columns:minmax(360px,.92fr) minmax(520px,1.08fr);gap:16px;align-items:stretch;}
.store-bar-card .chart-h-tall{height:372px;}
.store-monthly-card .chart-h{height:372px;}
.store-rank-name{display:flex;flex-direction:column;gap:3px;min-width:160px;}
.store-rank-title{font-weight:700;color:var(--ink);}
.store-rank-malls{font-size:10.5px;color:var(--ink-dim);}

/* M-1 visual polish */
.page-section > .card:first-child,
.page-section > .cols-2:first-child .card,
.page-section > .cols-3:first-child .card{border-color:#d8e0ea;}
.card-flush{padding:0;overflow:hidden;}
.card-flush .tbl-wrap,.card-flush .scroll-340{border-left:0;border-right:0;border-bottom:0;border-radius:0;}

/* Compensation has no insight strip under the summary cards, so its hero must
   stay in the same single row rather than spanning an empty second grid row. */
#page-4 .impact-hero{grid-row:auto;display:flex;flex-direction:column;justify-content:center;}
#page-4 .impact-title{margin-bottom:10px;}

/* Keep the Top Accounts ranking dense and consistently one-line. */
#comp-customers-tbl thead th,
#comp-customers-tbl tbody td,
#comp-customers-tbl tfoot td{padding:6px 9px;line-height:1.25;}
#comp-customers-tbl .vendor-badge{padding:1px 6px 1px 2px;gap:4px;font-size:9.5px;}
#comp-customers-tbl .vendor-logo,
#comp-customers-tbl .vendor-logo-placeholder{width:30px;height:20px;flex-basis:30px;}
.year-btn{background:#fff;}
.year-btn.on{box-shadow:0 4px 10px rgba(176,125,32,.18);}
.tag{border:1px solid rgba(15,23,42,.04);}
.rank-pill{box-shadow:inset 0 0 0 1px rgba(15,23,42,.04);}
#filter-bar{position:sticky;top:56px;z-index:11;}
#comp-global-fbar{position:sticky!important;top:56px!important;z-index:10;}
#comp-ov-body{overflow:auto!important;-webkit-overflow-scrolling:touch;}

/* ─── Comp overview: mall-mode account cards (equal-height, borderless table) ─── */
.comp-ov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;align-items:stretch;}
.comp-ov-card{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;}
.comp-ov-card-head{display:flex;align-items:center;gap:8px;padding:8px 12px;}
.comp-ov-head-dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0;}
.comp-ov-cust{font-size:11px;font-weight:700;font-family:'Geist Mono',monospace;letter-spacing:.04em;}
.comp-ov-count{margin-left:auto;font-size:9px;color:var(--ink-mute);font-family:'Geist Mono',monospace;white-space:nowrap;}
.comp-ov-card-body{flex:1;display:flex;flex-direction:column;min-height:0;}
.comp-ov-tbl-wrap{flex:1;max-height:230px;overflow-y:auto;min-height:0;}
.comp-ov-tbl{width:100%;border-collapse:collapse;font-size:11px;table-layout:fixed;}
.comp-ov-tbl th{position:sticky;top:0;background:var(--surface);text-align:right;font-weight:600;color:var(--ink-mute);font-family:'Geist Mono',monospace;font-size:9px;text-transform:uppercase;letter-spacing:.05em;padding:5px 12px 6px;white-space:normal;line-height:1.3;z-index:1;}
.comp-ov-tbl th:first-child{text-align:left;}
.comp-ov-tbl th:nth-child(1),.comp-ov-tbl td:nth-child(1){width:44%;}
.comp-ov-tbl th:nth-child(2),.comp-ov-tbl td:nth-child(2){width:28%;}
.comp-ov-tbl th:nth-child(3),.comp-ov-tbl td:nth-child(3){width:28%;}
.comp-ov-tbl td{padding:6px 12px;vertical-align:middle;border-top:1px solid var(--border-soft);}
.comp-ov-tbl tr:first-child td{border-top:0;}
.comp-ov-tbl td.r{text-align:right;white-space:nowrap;}
.comp-ov-row-brand{display:flex;align-items:center;gap:5px;margin-bottom:3px;}
.comp-ov-bar-track{height:4px;background:var(--border-soft);border-radius:3px;overflow:hidden;}
.comp-ov-bar-fill{height:100%;border-radius:3px;}
.comp-ov-comp{font-family:'Geist Mono',monospace;font-size:11px;font-weight:600;color:var(--ink);}
.comp-ov-qty-total{font-family:'Geist Mono',monospace;font-size:11px;color:var(--ink-2);}
.comp-ov-qty-avg{font-family:'Geist Mono',monospace;font-size:9.5px;color:var(--ink-mute);margin-top:1px;}

/* ─── SKU × Promotion Category Matrix (Compensation → SKU tab, M-10) ───
   Named classes only (no further inline styles) so this block is self-contained
   and could be lifted into another page as-is.
   Both sticky axes are pinned to the SAME scrolling ancestor, #comp-ov-body
   (bounded to max-height:70vh in JS so it actually has something to scroll —
   an unbounded box never scrolls, so "sticky" would have nothing to stick
   against). That's why .skumx-wrap below is overflow:visible, NOT
   overflow-x:auto: giving each category's own wrapper a horizontal scrollbar
   would make IT the nearest scrolling ancestor for anything sticky inside —
   per the CSS overflow spec, setting overflow-x to a non-visible value forces
   overflow-y to compute as auto too (there's no way to scroll one axis on an
   element while staying transparent to sticky on the other), which silently
   breaks position:sticky;top for the thead. Leaving .skumx-wrap fully
   overflow:visible means its child <table> (width:max-content, wider than the
   page) overflows the wrap, and that overflow bubbles up through the
   category-label div (also overflow:visible) to #comp-ov-body, which is what
   actually grows a horizontal scrollbar — the intended and only scroll
   container for the whole matrix, both axes at once:
     - .skumx-th (+ .skumx-corner): position:sticky;top:0 → pinned to
       #comp-ov-body's top edge as you scroll down through category sections.
     - .skumx-rowhd (+ .skumx-corner): position:sticky;left:0 → pinned to
       #comp-ov-body's left edge as you scroll right through promo columns.
   .skumx-corner is both at once (the top-left "SKU" header cell), so it needs
   the highest z-index of the three. */
.skumx-wrap{overflow:visible;border-radius:7px;border:1px solid var(--border-soft);}
.skumx-tbl{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;table-layout:fixed;}
.skumx-th{position:sticky;top:0;z-index:3;padding:7px 10px;font-size:10px;font-family:'Geist Mono',monospace;font-weight:600;background:#eef2f7;text-align:left;white-space:nowrap;}
.skumx-corner{position:sticky;left:0;top:0;z-index:4;min-width:170px;background:#eef2f7;}
.skumx-rowhd{position:sticky;left:0;z-index:2;min-width:170px;font-size:11px;color:var(--ink);font-family:'Geist Mono',monospace;white-space:nowrap;font-weight:600;padding:7px 8px;border-bottom:1px solid var(--border-soft);background:var(--surface);}
.skumx-td{padding:7px 8px;min-width:200px;border-bottom:1px solid var(--border-soft);border-left:2px solid var(--border);background:var(--surface);}
/* Cross-reference hover — JS (_wireSkuMatrix in mall_compute.js) toggles these
   classes on mouseover/mouseout; CSS only supplies the tint, so the trigger logic
   can change without touching this block. */
.skumx-tbl tr.skumx-hl-row>td{background:var(--gold-soft);}
.skumx-tbl td.skumx-hl-col{background:var(--gold-soft);}
/* Hold-over: hovered cell has no data for this SKU x column pairing — dim the row/col highlight instead of full gold */
.skumx-tbl tr.skumx-hl-row.skumx-hl-dim>td{background:rgba(176,125,32,0.04);}
.skumx-tbl td.skumx-hl-col.skumx-hl-dim{background:rgba(176,125,32,0.04);}
.skumx-bar-track{width:100%;max-width:150px;height:6px;background:var(--border-soft);border-radius:2px;overflow:hidden;margin-bottom:4px;}
.skumx-bar-fill{height:100%;border-radius:2px;}
.skumx-cell-head{display:flex;flex-wrap:wrap;column-gap:6px;}
.skumx-cell-sub{font-size:10px;color:var(--ink-mute);margin-top:2px;}
.skumx-cell-vendors{font-size:10px;color:var(--ink-dim);margin-top:1px;}
/* Detail trigger — replaces the old "+ details" text link (M-7/M-10). A small pill
   button reads as clickable UI (not body text); white-space:nowrap plus its own
   flex-wrap parent (.skumx-cell-head etc. above) keeps the label from breaking
   mid-phrase in a narrow matrix column — carrying the M-7 fix forward onto this
   new element, same cell-width problem as before. */
.skumx-detail-btn{display:inline-flex;align-items:center;gap:3px;margin-top:4px;padding:1px 7px;font-size:10px;color:var(--gold);background:var(--gold-soft);border:1px solid transparent;border-radius:10px;cursor:pointer;font-family:'Geist Mono',monospace;white-space:nowrap;}
.skumx-detail-btn::after{content:'▾';font-size:8px;}
.skumx-detail-btn:hover{border-color:var(--gold-dim);}
.skumx-detail-btn.on{background:var(--gold);color:#fff;}
.skumx-detail-btn.on::after{content:'▴';}
.skumx-detail-src{display:none;} /* holds this cell's detail HTML; read by JS into the popover, never shown in place */
/* Floating popover — one shared element (created lazily in _wireSkuMatrix),
   position:fixed + JS-computed left/top so it is never clipped by the matrix's
   own overflow-x:auto wrap. */
.skumx-popover{position:fixed;z-index:200;max-width:380px;max-height:280px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:8px;box-shadow:0 12px 32px rgba(15,23,42,.18);padding:10px 12px;font-size:11px;color:var(--ink-mute);line-height:1.4;display:none;}
.skumx-popover.on{display:block;}
.skumx-popover-title{font-size:10px;font-weight:700;color:var(--ink);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px;font-family:'Geist Mono',monospace;}

/* ─── Responsive ─── */
@media (max-width:900px){
  .insight-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .insight-strip>.insight-chip:nth-child(odd){border-left:0;}
  .insight-strip>.insight-chip:nth-child(n+3){border-top:1px solid var(--border);}
  .ov-impact{grid-template-columns:minmax(0,1fr);}
  .impact-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .impact-hero{grid-column:1/-1;grid-row:auto;}
  .impact-insight-strip{grid-column:1/-1;}
  .ov-impact-main{margin-top:0;padding:18px;}
  .ov-impact-value{font-size:32px;}
  .ov-kpi-pair{grid-template-columns:minmax(0,1fr);gap:14px;}
  .ov-kpi-divider{width:100%;height:1px;}
  .overview-chart-grid{grid-template-columns:minmax(0,1fr);}
  .ov-mall-grid{grid-template-columns:minmax(0,1fr);}
  .brand-overview-grid{grid-template-columns:minmax(0,1fr);}
  .brand-mix-body{grid-template-columns:156px minmax(0,1fr);gap:18px;max-width:none;min-height:0;}
  .brand-mix-donut{width:156px;height:156px;}
  .store-dashboard-grid{grid-template-columns:minmax(0,1fr);}
  .comp-chart-grid{grid-template-columns:minmax(0,1fr);}
  .kpi-row{grid-template-columns:repeat(3,1fr);}
  .cols-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cols-21,.cols-12{grid-template-columns:minmax(0,1fr);}
}
@media (max-width:768px){
  /* Sidebar off-canvas overlay on mobile */
  .app{display:block;}
  .sb{
    position:fixed;left:0;top:0;z-index:300;height:100vh;
    transform:translateX(-100%);transition:transform .22s ease,opacity .18s ease;
    opacity:1;pointer-events:auto;min-width:220px;
  }
  .app.sb-collapsed .sb{transform:translateX(-100%);opacity:0;pointer-events:none;}
  .app:not(.sb-collapsed) .sb{transform:translateX(0);}
  .sb-backdrop{display:none;position:fixed;inset:0;z-index:299;background:rgba(0,0,0,.45);}
  .sb-backdrop.on{display:block;}
  .ov-impact-grid{grid-template-columns:minmax(0,1fr);}
  .impact-strip{grid-template-columns:minmax(0,1fr);}
  .kpi-row{grid-template-columns:repeat(2,1fr);}
  #kpi-row[style], #page-4 .kpi-row[style]{grid-template-columns:repeat(2,1fr)!important;}
  .cols-2,.cols-3,.cols-21,.cols-12{grid-template-columns:minmax(0,1fr);}
  /* Grid/flex children may otherwise keep chart/table min-content widths and
     leak beyond the viewport.  Scroll remains opt-in on the named wrappers. */
  .page-section,.page-section>*,.card,.card>*,
  .cols-2>*,.cols-3>*,.cols-21>*,.cols-12>*,
  .overview-chart-grid>*,.ov-mall-grid>*,.brand-overview-grid>*,
  .store-dashboard-grid>*,.comp-chart-grid>*,.ov-impact-grid>*,.impact-strip>*{
    min-width:0;max-width:100%;box-sizing:border-box;
  }
  .chart-h,.chart-h-tall,.chart-h-short,.comp-chart-h,.chart-scroll-x,.tbl-wrap,#comp-ov-body{
    min-width:0;max-width:100%;box-sizing:border-box;
  }
  .chart-h canvas,.chart-h-tall canvas,.chart-h-short canvas,.comp-chart-h canvas{max-width:100%!important;}
  .chart-scroll-x canvas{max-width:none!important;}
  .cmp-grid,.cmp-grid>*,.cmp-side-filters,.cmp-side-filters>*{min-width:0;max-width:100%;box-sizing:border-box;}
  .cmp-side-filters{grid-template-columns:repeat(2,minmax(0,1fr));}
  .cmp-side-filters select{width:100%;min-width:0;box-sizing:border-box;}
  .topbar{align-items:flex-start;flex-wrap:wrap;padding:10px 14px;}
  .tb-right{width:100%;justify-content:flex-start;flex-wrap:wrap;}
  .numfmt-control{min-height:36px;}
  .numfmt-option{min-height:32px;padding-inline:12px;}
  /* Filters must remain part of the document flow on touch screens.  The old
     sticky bars used a fixed 56/66px offset even when the wrapping topbar was
     taller, and each filter row added another horizontal scroller inside the
     bar.  That trapped swipe gestures and let an open picker cover the nav. */
  .fbar{align-items:stretch;}
  #filter-bar,#comp-global-fbar{
    position:static!important;top:auto!important;z-index:auto;overflow:visible;
    padding:6px 8px!important;gap:0!important;
  }
  .mobile-filter-toggle{
    width:100%;min-height:44px;border:0;background:transparent;color:var(--ink);
    padding:2px 4px;display:flex;align-items:center;justify-content:space-between;gap:12px;
    text-align:left;cursor:pointer;
  }
  .mobile-filter-toggle-copy{display:flex;align-items:baseline;gap:9px;min-width:0;}
  .mobile-filter-toggle-copy strong{font-size:12px;line-height:1.2;}
  .mobile-filter-toggle-copy span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 9.5px/1.2 'Geist Mono',monospace;color:var(--ink-mute);}
  .mobile-filter-toggle-icon{font-size:17px;line-height:1;color:var(--gold);transition:transform .16s ease;}
  .fbar.mobile-expanded .mobile-filter-toggle-icon{transform:rotate(180deg);}
  .filter-mobile-body{display:none;}
  .fbar.mobile-expanded .filter-mobile-body{display:flex;flex-direction:column;gap:8px;padding:7px 2px 3px;border-top:1px solid var(--border-soft);}
  #filter-bar .filter-row,#comp-global-fbar .filter-row{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;
    gap:8px;width:100%;overflow:visible;padding-bottom:0;
  }
  #filter-bar .filter-row-primary .year-filter,#comp-global-fbar .filter-row-primary .year-filter{
    width:auto;flex:none;
  }
  #filter-bar .filter-row-primary .mall-filter,#comp-global-fbar .filter-row-primary .mall-filter{
    grid-column:1/-1;width:auto;flex:none;margin-left:0;
  }
  #filter-bar .filter-row-secondary .month-filter,#comp-global-fbar .filter-row-secondary .month-filter{
    grid-column:1/-1;width:auto;flex:none;
  }
  #filter-bar .filter-row-secondary label,#comp-global-fbar .filter-row-secondary label{
    width:auto;min-width:0;flex:none;
  }
  .fbar label{min-width:0;align-items:flex-start;flex-direction:column;gap:4px;}
  .fbar select,.fbar input[type=text],.flt-ms,.flt-ms-trigger,.brand-sel-wrap,.brand-sel-wrap select{width:100%;max-width:none;}
  .fbar select,.fbar input[type=text],.flt-ms-trigger,.period-chip,.mall-btn,.fbar .reset-btn{min-height:44px;box-sizing:border-box;}
  .period-chip,.month-picker .period-chip,.mall-btn{height:44px;min-width:44px;}
  .flt-ms-panel .ms-search input,#page-4 .fbar #comp-product-search,#comp-global-fbar .ms-search input{height:48px;min-height:48px!important;}
  .period-picker,.mall-picker{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
  .period-picker{justify-content:flex-start;}
  .mall-picker{flex-wrap:nowrap;}
  .mall-btn{flex:0 0 auto;}
  /* A picker is a bounded sheet above the page, never an unbounded popup over
     the fixed bottom navigation.  Only its option list scrolls. */
  .flt-ms-panel{
    position:fixed;left:12px;right:12px;top:max(12px,env(safe-area-inset-top));
    bottom:calc(74px + env(safe-area-inset-bottom));min-width:0;max-height:none;
    overflow:hidden;z-index:500;display:flex;flex-direction:column;
  }
  .flt-ms-panel:not(.open){display:none;}
  .flt-ms-panel.open{display:flex;}
  .flt-ms-panel .ms-search{flex:0 0 auto;}
  .flt-ms-panel .ms-scroll{max-height:none;flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;}
  .ms-opt{min-height:44px;box-sizing:border-box;}
  .card{padding:14px;}
  .card-head{align-items:flex-start;flex-direction:column;}
  .metric-toggle{width:100%;}
  .metric-toggle button{flex:1;min-height:36px;}
  .mall-avg-head{align-items:flex-start;flex-direction:column;}
  #page-4 .fbar label{min-width:0;}
  #page-4 .fbar select,#page-4 .fbar input[type=text]{min-height:44px;width:100%!important;}
  .card-flush .card-head{padding:12px 14px!important;}
  #comp-customers-tbl th:nth-child(3),#comp-customers-tbl td:nth-child(3),
  #comp-customers-tbl th:nth-child(7),#comp-customers-tbl td:nth-child(7),
  #comp-customers-tbl th:nth-child(8),#comp-customers-tbl td:nth-child(8){display:none;}
  .tbl-wrap,#comp-ov-body{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
  .tbl{width:max-content;min-width:100%;font-size:11.5px;}
  .tbl thead th,.tbl tbody td,.tbl tfoot td{padding:7px 8px;}
  .comp-chart-grid{grid-template-columns:1fr;}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom));}
  .bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:260;
    display:flex;gap:4px;overflow-x:auto;padding:6px 8px calc(7px + env(safe-area-inset-bottom));
    background:#0f1117;border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -10px 24px -18px rgba(0,0,0,.65);
    -webkit-overflow-scrolling:touch;
  }
  .bottom-nav-item{
    flex:1 1 0;min-width:52px;min-height:48px;padding:5px 4px;border-radius:8px;
    color:#6b7280;font-size:9px;font-weight:600;text-align:center;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;white-space:nowrap;
  }
  .bottom-nav-item .bi{font-family:'Geist Mono',monospace;font-size:12px;line-height:1;}
  .bottom-nav-item.on{color:#f1f5f9;background:rgba(212,162,62,.14);}
}
@media (max-width:480px){
  .insight-strip{grid-template-columns:minmax(0,1fr);}
  .insight-strip>.insight-chip{border-left:0;}
  .insight-strip>.insight-chip+.insight-chip{border-top:1px solid var(--border);}
  .ov-impact-rank-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;}
  .ov-rank-item,.ov-rank-item.store{grid-template-columns:26px minmax(0,1fr);grid-template-areas:'logo details';gap:5px;padding:2px 6px;}
  .ov-rank-item.store{grid-template-columns:minmax(0,1fr);grid-template-areas:'details';}
  .ov-rank-number{display:none;}
  .ov-rank-logo .brand-logo-shell{width:26px;height:19px;flex-basis:26px;}
  .ov-rank-details{padding-top:0;}
  .ov-rank-name,.ov-rank-store-name{font-size:10.5px;}
  .ov-rank-sales{font-size:9.5px;margin-top:3px;}
  .ov-rank-share{font-size:8.5px;margin-top:1px;}
  .topbar{padding:9px 12px;gap:8px;}
  .tb-left{gap:8px;min-width:0;}
  .tb-title{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tb-right{gap:6px;}
  .tb-badge{font-size:8.5px;padding:3px 7px;}
  .numfmt-option{min-height:44px;padding-inline:11px;}
  .pad{padding:12px 12px 34px;gap:14px;}
  .page-section.on{gap:14px;}
  .ov-impact{gap:10px;}
  .impact-strip{grid-template-columns:1fr;gap:10px;}
  .impact-title{font-size:19px;}
  .impact-value{font-size:29px;}
  .brand-impact-row{gap:6px 10px;min-height:0;}
  .ov-impact-main{padding:16px;border-radius:9px;}
  .ov-impact-title{font-size:19px;}
  .ov-impact-value{font-size:29px;}
  .ov-kpi-value{font-size:22px;}
  .ov-context{font-size:9px;}
  .ov-context-item{padding:0 9px;}
  .ov-impact-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;}
  .ov-impact-card{padding:10px 11px;border-radius:8px;min-height:0;}
  .ov-impact-card:nth-child(n+3){grid-column:1/-1;}
  .ov-impact-lbl{font-size:8.5px;margin-bottom:5px;letter-spacing:.05em;}
  .ov-impact-name{font-size:15px;}
  .ov-impact-metric{font-size:13px;margin-top:6px;}
  .ov-impact-sub{font-size:9.5px;margin-top:3px;}
  .ov-logo-head{gap:6px;}
  .ov-logo,.ov-logo-placeholder{width:30px;height:22px;}
  .store-dashboard-grid{gap:10px;}
  .store-bar-card .chart-h-tall{height:300px;}
  .store-monthly-card .chart-h{height:300px;}
  .fbar{flex-wrap:wrap;align-items:stretch;overflow:visible;gap:8px;border-radius:9px;}
  .fbar label,#page-4 .fbar label{width:100%;min-width:0;flex:none;gap:5px;}
  .fbar label.mall-filter{grid-column:auto;}
  .fbar .reset-btn{margin-left:0;min-height:44px;align-self:stretch;}
  .fbar-count{margin-left:0;min-height:44px;display:flex;align-items:center;}
  #kpi-row[style],#page-4 .kpi-row[style],.kpi-row{
    display:flex!important;grid-template-columns:none!important;overflow-x:auto;gap:8px;
    padding-bottom:2px;-webkit-overflow-scrolling:touch;
  }
  .kpi-card{flex:0 0 158px;padding:13px;border-radius:9px;}
  .kpi-lbl{font-size:9.5px;margin-bottom:6px;}
  .kpi-val{font-size:23px;}
  .kpi-sub{font-size:10.5px;}
  #kpi-mall-avg{display:grid;}
  .mall-summary-head,.mall-summary-row,.mall-summary-detail{min-width:590px;}
  .card{padding:12px;border-radius:9px;}
  .card-head{gap:8px;margin-bottom:10px;padding-bottom:8px;}
  .card-title{font-size:14px;}
  .card-sub{font-size:10px;line-height:1.35;}
  .chart-h{height:250px;}
  .chart-monthly-performance,.overview-chart-grid .chart-monthly-performance,.overview-chart-grid .chart-annual{height:300px;}
  .chart-h-tall{height:300px;}
  .chart-h-short{height:200px;}
  .brand-mix-body{grid-template-columns:minmax(0,1fr);gap:9px;max-width:none;min-height:0;}
  .brand-mix-donut{width:92px;height:92px;}
  .brand-impact-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;align-items:start;}
  .brand-impact-row{grid-template-columns:minmax(0,1fr) max-content;grid-template-areas:'name value' 'name share';gap:1px 6px;min-height:30px;padding:3px 0;border-bottom:1px solid var(--border-soft);}
  .brand-impact-name{grid-area:name;gap:5px;font-size:10.5px;}
  .brand-impact-name .brand-logo-shell{width:24px;height:18px;flex-basis:24px;}
  .brand-impact-val{grid-area:value;font-size:9.5px;}
  .brand-impact-detail{display:none;}
  .brand-impact-metric{grid-area:share;font-size:9px;justify-content:flex-end;}
  .brand-impact-list .brand-impact-subval{display:none;}
  .brand-impact-list .brand-impact-mall-logo,.brand-impact-list .brand-impact-mall-logo-placeholder{display:none;}
  .comp-chart-h{height:260px;}
  .scroll-340{max-height:280px;}
  #page-4 .fbar{flex-wrap:wrap;overflow:visible;}
  #comp-customers-tbl th:nth-child(5),#comp-customers-tbl td:nth-child(5){display:none;}
  #comp-customers-tbl th:nth-child(2),#comp-customers-tbl td:nth-child(2){min-width:130px;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #comp-sku-summary-tbl th:nth-child(4),#comp-sku-summary-tbl td:nth-child(4),
  #comp-sku-summary-tbl th:nth-child(5),#comp-sku-summary-tbl td:nth-child(5),
  #comp-detail-tbl th:nth-child(4),#comp-detail-tbl td:nth-child(4),
  #comp-detail-tbl th:nth-child(5),#comp-detail-tbl td:nth-child(5),
  #comp-detail-tbl th:nth-child(6),#comp-detail-tbl td:nth-child(6),
  #comp-detail-tbl th:nth-child(7),#comp-detail-tbl td:nth-child(7),
  #comp-detail-tbl th:nth-child(12),#comp-detail-tbl td:nth-child(12),
  #comp-detail-tbl th:nth-child(13),#comp-detail-tbl td:nth-child(13){display:none;}
  .ov-mall-grid{gap:10px;}
  .ov-mall-share-card .chart-h{height:170px;}
  .ov-mall-share-card canvas{width:100%!important;height:100%!important;}
  .ov-store-rank-card .tbl-wrap{max-height:220px!important;}
  #tblStoreRankOv{font-size:10.5px;}
  #tblStoreRankOv th,#tblStoreRankOv td{padding:6px 7px;}
  #tblStoreRankOv th:nth-child(3),#tblStoreRankOv td:nth-child(3),
  #tblStoreRankOv th:nth-child(5),#tblStoreRankOv td:nth-child(5),
  #tblStoreRankOv th:nth-child(7),#tblStoreRankOv td:nth-child(7){display:none;}
  #tblStoreRankOv th:nth-child(1),#tblStoreRankOv td:nth-child(1){width:34px!important;}
  #tblStoreRankOv th:nth-child(2),#tblStoreRankOv td:nth-child(2){min-width:118px;max-width:148px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  #tblStoreRankOv th:nth-child(4),#tblStoreRankOv td:nth-child(4){min-width:82px;}
  #tblStoreRankOv th:nth-child(6),#tblStoreRankOv td:nth-child(6){min-width:82px;}
  #tblStoreRankOv th:nth-child(8),#tblStoreRankOv td:nth-child(8){min-width:58px;}
  #tblBrandRank th:nth-child(4),#tblBrandRank td:nth-child(4),
  #tblBrandRank th:nth-child(5),#tblBrandRank td:nth-child(5),
  #tblBrandRank th:nth-child(7),#tblBrandRank td:nth-child(7){display:none;}
  .brand-rank-wrap{max-height:none!important;overflow-y:visible!important;}
  #tblBrandRank{width:100%;min-width:0;table-layout:fixed;}
  #tblBrandRank th,#tblBrandRank td{padding:7px 5px;}
  #tblBrandRank th:nth-child(1),#tblBrandRank td:nth-child(1){width:34px;}
  #tblBrandRank th:nth-child(2),#tblBrandRank td:nth-child(2){width:auto;}
  #tblBrandRank th:nth-child(3),#tblBrandRank td:nth-child(3){width:86px;}
  #tblBrandRank th:nth-child(6),#tblBrandRank td:nth-child(6){width:58px;}
  #tblBrandRank .brand-tag{display:flex;width:100%;padding:2px 4px;box-sizing:border-box;}
  #tblStoreBrandSku th:nth-child(3),#tblStoreBrandSku td:nth-child(3),
  #tblStoreBrandSku th:nth-child(6),#tblStoreBrandSku td:nth-child(6){display:none;}
  #tblStoreBrandSku th:nth-child(1),#tblStoreBrandSku td:nth-child(1){min-width:130px;max-width:165px;overflow:hidden;text-overflow:ellipsis;}
  #tblStoreBrandSku th:nth-child(4),#tblStoreBrandSku td:nth-child(4){min-width:180px;max-width:220px;}
  #tblBrandMall th:first-child,#tblBrandMall td:first-child{position:sticky;left:0;z-index:2;background:#fff;box-shadow:1px 0 0 var(--border);}
  #tblBrandMall thead th:first-child{z-index:4;background:#eef2f7;}
  .bottom-nav{max-width:100vw;box-sizing:border-box;contain:paint;}
  .bottom-nav-item{flex:1 1 0;min-width:52px;min-height:46px;}
  .pw-box input{min-height:44px;}
  .pw-box button{min-height:44px;}
}

/* A tablet still has the desktop sidebar, so its usable content width is much
   narrower than its viewport. Keep chart and comparison layouts single-column
   until the full desktop breakpoint, rather than letting their min-content
   widths push the filter bar or document sideways. */
@media (min-width:769px) and (max-width:1199px){
  .overview-chart-grid,.ov-mall-grid,.brand-overview-grid,.store-dashboard-grid,.comp-chart-grid{
    grid-template-columns:minmax(0,1fr);
  }
  .cmp-grid{grid-template-columns:minmax(0,1fr);}
  .cmp-vs{flex-direction:row;flex-wrap:wrap;padding:8px 0;}
  #comp-global-fbar .filter-row{flex-wrap:wrap;}
  #comp-global-fbar .filter-row-secondary{flex-wrap:wrap;overflow:visible;}
  #comp-global-fbar .filter-row-primary .year-filter{flex:0 1 100%;max-width:100%;}
  #comp-global-fbar .filter-row-primary .year-filter .period-picker{max-width:100%;overflow-x:auto;overflow-y:hidden;}
  #comp-global-fbar .filter-row-primary .mall-filter{margin-left:0;}
  #comp-global-fbar .filter-row-secondary label.comp-product-filter{flex:1 1 180px;min-width:0;}
  #filter-bar .flt-ms-panel,#comp-global-fbar .flt-ms-panel{left:auto;right:0;max-width:calc(100vw - 24px);}
}

/* Desktop still needs min-content containment when the sidebar is open at the
   narrower desktop widths.  This preserves the desktop sticky layout without
   allowing a chart or a dense filter row to widen the document. */
@media (min-width:769px){
  .page-section,.page-section>*,.card,.card>*,
  .cols-2>*,.cols-3>*,.cols-21>*,.cols-12>*,
  .overview-chart-grid>*,.ov-mall-grid>*,.brand-overview-grid>*,
  .store-dashboard-grid>*,.comp-chart-grid>*,.ov-impact-grid>*,.impact-strip>*{
    min-width:0;max-width:100%;box-sizing:border-box;
  }
  #filter-bar .filter-row,#comp-global-fbar .filter-row,
  #filter-bar .filter-row label,#comp-global-fbar .filter-row label{
    min-width:0;
  }
  #filter-bar .filter-row-secondary>label{flex:1 1 90px;min-width:0;}
  #filter-bar .filter-row-secondary .flt-ms,#filter-bar .filter-row-secondary .flt-ms-trigger{min-width:0;}
  .chart-h canvas,.chart-h-tall canvas,.chart-h-short canvas,.comp-chart-h canvas{max-width:100%!important;}
  .chart-scroll-x canvas{max-width:none!important;}
}

/* ─── M-6: truncate long Product Name cells (mirrors sales.css .trunc) ─── */
.trunc { max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }

/* ─── M-7: Compensation "Top Accounts" inline share bars ─── */
.share-bar{display:flex;align-items:center;gap:6px;}
.share-bar-fill{height:6px;border-radius:3px;flex-shrink:0;}
.share-in-bar{justify-content:center;}
.note-details{display:block;margin-top:3px;color:var(--ink-mute);}
.note-details summary{display:inline-block;cursor:pointer;color:var(--gold);font-weight:700;}
.note-details[open] summary{margin-bottom:3px;}

/* Tables deliberately show a useful first screen of rows while keeping one
   scroll owner, sticky headers/footers, and a reachable final row. */
.brand-rank-wrap{max-height:min(54vh,480px);overflow-y:auto;}
#tblBrandMall,.tbl-wrap:has(#tblSkuRank),.tbl-wrap:has(#tblStoreRankings),.tbl-wrap:has(#tblStoreBrandSku){min-height:0;}
.tbl-wrap:has(#tblSkuRank){max-height:min(54vh,440px)!important;overflow-y:auto!important;}
.tbl-wrap:has(#tblBrandMall){max-height:min(52vh,420px)!important;overflow-y:auto!important;}
.tbl-wrap:has(#tblStoreRankings),.tbl-wrap:has(#tblStoreBrandSku){max-height:min(56vh,460px)!important;overflow-y:auto!important;}
@media (max-width:768px){
  .rank-split{min-width:180px;gap:4px;}
  .rank-split-entity{min-height:32px;padding:3px 6px 3px 3px;}
  .rank-split-entity-name{max-width:82px;}
  .brand-rank-wrap{max-height:none!important;overflow-y:visible!important;}
  .tbl-wrap:has(#tblSkuRank),.tbl-wrap:has(#tblBrandMall),.tbl-wrap:has(#tblStoreRankings),.tbl-wrap:has(#tblStoreBrandSku){max-height:min(52vh,360px)!important;}
  .note-details summary{min-height:32px;padding-top:4px;}
}

/* ─── M-5: Best Promotions list — row shrunk (progress bar dropped), scroll
   affordance made visible (thin gold scrollbar) instead of hidden default. ─── */
.comp-promo-highlight-grid{grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);align-items:stretch;}
.comp-promo-highlight-grid>.card{min-height:430px;}
.best-promo-list{overflow-y:auto;max-height:320px;padding:0 4px;scrollbar-width:thin;scrollbar-color:var(--gold-dim) var(--border-soft);}
.best-promo-list::-webkit-scrollbar{width:6px;}
.best-promo-list::-webkit-scrollbar-thumb{background:var(--gold-dim);border-radius:3px;}
.comp-best-period-card{display:flex;flex-direction:column;}
.comp-best-period-chart-wrap{position:relative;flex:1 1 auto;min-height:260px;}
.best-promo-row{display:grid;grid-template-columns:26px minmax(0,1fr) max-content;align-items:center;gap:10px;padding:6px 10px;border-radius:6px;background:var(--best-promo-bg,transparent);margin-bottom:1px;}
.best-promo-rank{width:26px;text-align:center;}
.best-promo-main{min-width:0;}
.best-promo-meta,.best-promo-title-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.best-promo-meta{margin-bottom:2px;}
.best-promo-period{font-size:10px;color:var(--ink-mute);font-family:'Geist Mono',monospace;margin-top:1px;line-height:1.3;}
.best-promo-stats{flex-shrink:0;text-align:right;}

:where(button,select,input,[tabindex]):focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}}

@media (max-width:900px){
  .comp-promo-highlight-grid{grid-template-columns:minmax(0,1fr);}
}

@media (max-width:768px){
  #comp-customers-tbl thead th,#comp-customers-tbl tbody td,#comp-customers-tbl tfoot td{padding:5px 7px;}
}

@media (max-width:480px){
  .comp-promo-highlight-grid>.card{min-height:0;}
  .best-promo-list{max-height:360px;}
  .comp-best-period-chart-wrap{min-height:260px;}
  .best-promo-row{grid-template-columns:24px minmax(0,1fr);align-items:start;gap:7px;padding:7px 5px;}
  .best-promo-rank{width:24px;}
  .best-promo-stats{grid-column:2;text-align:left;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
}

/* ─── M-9: Peek panel (right-side slide-in SKU detail) ───
   Reuses the same component structure/behavior as Sales' S-2 peek panel
   (sales.css), re-themed to Mall's espresso/gold palette via Mall's own
   CSS variables instead of Sales' --text/--line/--surface-2 tokens. */
.peek-backdrop { display:none; position:fixed; inset:0; z-index:400; background:rgba(11,17,32,.5); backdrop-filter:blur(2px); }
.peek-backdrop.on { display:block; }
.peek-panel {
  position:fixed; top:0; right:0; bottom:0; z-index:401;
  width:420px; max-width:92vw;
  background:var(--surface); border-left:1px solid var(--border);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.4);
  transform:translateX(100%); transition:transform .22s ease;
  display:flex; flex-direction:column; overflow:hidden;
}
.peek-panel.on { transform:translateX(0); }
.peek-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding:20px 20px 14px; border-bottom:1px solid var(--border-soft); flex-shrink:0; }
.peek-title { font-family:var(--serif); font-size:17px; font-weight:700; color:var(--ink); line-height:1.3; }
.peek-sub { font-size:11px; color:var(--ink-mute); margin-top:4px; font-family:'Geist Mono',monospace; }
.peek-close {
  flex-shrink:0; width:28px; height:28px; border-radius:6px; border:1px solid var(--border);
  background:var(--bg-2); color:var(--ink-mute); font-size:14px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; transition:all .12s;
}
.peek-close:hover { color:var(--ink); border-color:var(--gold); background:var(--gold-soft); }
.peek-body { flex:1; overflow-y:auto; padding:18px 20px 28px; display:flex; flex-direction:column; gap:16px; }
.peek-kpi-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.peek-kpi { background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:11px 13px; }
.peek-kpi-lbl { font-size:9.5px; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.08em; font-family:'Geist Mono',monospace; margin-bottom:5px; }
.peek-kpi-val { font-family:'Geist Mono',monospace; font-size:17px; font-weight:700; color:var(--ink); }
.peek-section-title { font-size:11px; font-weight:700; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.06em; margin-bottom:8px; }
.peek-chart-wrap { position:relative; height:150px; }
.peek-mini-tbl { width:100%; border-collapse:collapse; font-size:11.5px; }
.peek-mini-tbl th { text-align:left; padding:6px 4px; font-size:9.5px; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border-soft); font-family:'Geist Mono',monospace; }
.peek-mini-tbl th.r, .peek-mini-tbl td.r { text-align:right; }
.peek-mini-tbl td { padding:6px 4px; border-bottom:1px solid var(--border-soft); color:var(--ink); }
.peek-mini-tbl tr:last-child td { border-bottom:none; }
.peek-row { cursor:pointer; }
.peek-row:hover td { background:var(--gold-soft); }
@media (max-width:480px) {
  .peek-panel { width:100vw; max-width:100vw; }
}