@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  /* Validated categorical palette (dataviz skill reference instance) -- fixed
     order, never cycled/reassigned per filter. */
  --c-blue:#2a78d6; --c-aqua:#1baf7a; --c-yellow:#eda100; --c-green:#008300;
  --c-violet:#4a3aa7; --c-red:#e34948; --c-magenta:#e87ba4; --c-orange:#eb6834;
  /* status palette (fixed, never reused for series identity) */
  --s-good:#0ca30c; --s-warning:#c8860a; --s-serious:#ec835a; --s-critical:#d03b3b;
  /* ordinal ramp (funnel stages, ageing buckets) -- one hue, light to dark */
  --ord-1:#9ec5f4; --ord-2:#5598e7; --ord-3:#256abf; --ord-4:#184f95;

  --brand-yellow:#f6c945;
  --sidebar-bg:#171c26; --sidebar-txt:#9aa3b2; --sidebar-active:#ffffff;
  --bg:#f4f6f9; --card:#ffffff; --border:#e6e9ee;
  --txt:#1a2130; --mut:#71809a; --mut-soft:#a3aab5;
  --green-bg:#e6f6ee; --red-bg:#fce9e9; --amber-bg:#fdf3dc; --blue-bg:#e9eefb; --violet-bg:#efecfb;
  --shadow-sm:0 1px 2px rgba(23,28,38,.06), 0 1px 3px rgba(23,28,38,.05);
  --shadow-md:0 10px 30px rgba(23,28,38,.10);
  --radius:14px;
  --sidebar-w:232px;
}
*{box-sizing:border-box; margin:0; padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg); color:var(--txt); font-size:13.5px; line-height:1.55;
}
button, select, input{font-family:inherit; font-size:inherit}
.num{font-variant-numeric:tabular-nums}

/* ---------- layout shell ---------- */
#shell{display:flex; min-height:100vh}

#sidebar{
  width:var(--sidebar-w); flex-shrink:0; background:var(--sidebar-bg);
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; z-index:50;
}
#sidebar .brand{display:flex; align-items:center; gap:11px; padding:22px 18px 18px}
#sidebar .brand .mark{
  width:36px; height:36px; border-radius:10px; background:var(--brand-yellow);
  display:flex; align-items:center; justify-content:center; font-weight:800;
  color:#3a2e00; font-size:16px; flex-shrink:0; box-shadow:0 4px 12px rgba(246,201,69,.35);
}
#sidebar .brand .name{font-weight:700; font-size:14.5px; color:#fff; letter-spacing:.1px}
#sidebar .brand .sub{font-size:10.8px; color:var(--sidebar-txt); margin-top:1px}

#navList{list-style:none; padding:8px 12px; flex:1; overflow-y:auto}
#navList li{margin-bottom:3px}
#navList button{
  width:100%; display:flex; align-items:center; gap:11px; text-align:left;
  border:none; background:none; padding:9px 12px; border-radius:9px;
  font-size:13px; font-weight:600; color:var(--sidebar-txt); cursor:pointer;
  transition:background .12s, color .12s;
}
#navList button svg{width:17px; height:17px; flex-shrink:0; stroke:currentColor}
#navList button:hover{background:rgba(255,255,255,.06); color:#e6eaf0}
#navList button.on{
  background:linear-gradient(90deg, rgba(246,201,69,.16), rgba(246,201,69,.05));
  color:var(--brand-yellow); box-shadow:inset 3px 0 0 var(--brand-yellow);
}

#sidebar .foot{padding:14px 18px; font-size:10.6px; color:#5d6675; border-top:1px solid rgba(255,255,255,.07)}
#sidebar .foot b{color:var(--sidebar-txt)}

#main{flex:1; min-width:0; display:flex; flex-direction:column}

/* ---------- topbar / filters ---------- */
#topbar{
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.88);
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border);
  padding:12px 24px 10px; box-shadow:0 1px 2px rgba(23,28,38,.04);
}
#topbar .row{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
#topbar h2{font-size:17px; font-weight:750; letter-spacing:-.2px}
#topbar .sub{font-size:11.3px; color:var(--mut); margin-top:1px}

/* Single-row filter bar: labels live INSIDE the pills and each control has a
   hard width cap so the whole strip fits ~1360px content width. */
#filters{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:10px}
#filters > label{font-size:10.2px; font-weight:700; color:var(--mut); text-transform:uppercase; letter-spacing:.4px}
.fitem{display:flex; align-items:center; gap:4px; background:var(--card); border:1px solid var(--border); border-radius:9px; padding:4px 8px; box-shadow:var(--shadow-sm)}
.fitem .flabel{font-size:9.8px; font-weight:700; color:var(--mut-soft); text-transform:uppercase; letter-spacing:.4px; margin-right:2px}
#fSummary{font-size:11.3px; color:var(--s-good); font-weight:700; margin-left:auto; white-space:nowrap}

#periodChips{display:flex; gap:3px}
#periodChips button{border:1px solid var(--border); background:var(--card); border-radius:8px; padding:5px 9px; font-size:11.2px; font-weight:650; color:var(--mut); cursor:pointer}
#periodChips button.on{background:var(--txt); color:var(--brand-yellow); border-color:var(--txt)}
#periodChips button:hover:not(.on){background:#f2f3f6}

select, input[type=date], input[type=text], input[type=search]{
  border:none; background:transparent; color:var(--txt); font-size:12.4px; outline:none; cursor:pointer;
}
#fFrom, #fTo{width:104px}
#fCat{max-width:126px}
#fSku{max-width:148px}
#fCity{max-width:112px}
input[type=search], input[type=text]{min-width:170px; cursor:text}
.card select, .card input[type=date], .card input[type=text], .card input[type=search]{
  border:1px solid var(--border); border-radius:8px; background:var(--card); padding:6px 10px;
}

.btn{
  border:1px solid var(--border); background:var(--card); border-radius:9px;
  padding:6px 12px; font-size:12.2px; font-weight:600; cursor:pointer; color:var(--txt);
  box-shadow:var(--shadow-sm);
}
.btn:hover{background:#f2f3f6; border-color:#d8dce2}
.btn.warn{border-color:#f3c1c1; color:var(--s-critical)}
.btn.primary{background:var(--txt); color:var(--brand-yellow); border-color:var(--txt)}

.seg{display:inline-flex; border:1px solid var(--border); border-radius:9px; overflow:hidden; background:var(--card); box-shadow:var(--shadow-sm)}
.seg button{border:none; background:none; padding:6px 13px; font-size:12.2px; font-weight:600; color:var(--mut); cursor:pointer}
.seg button.on{background:var(--txt); color:var(--brand-yellow)}

/* ---------- main content ---------- */
main{padding:20px 24px 60px; max-width:1680px; width:100%; margin:0 auto}
.tab{display:none}
.tab.on{display:block}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:14px; margin-bottom:18px}
.kpi{
  background:linear-gradient(135deg, var(--card) 55%, var(--kpi-accent-bg, var(--blue-bg)));
  border:1px solid var(--border); border-left:3px solid var(--kpi-accent, var(--c-blue));
  border-radius:var(--radius); padding:15px 17px; box-shadow:var(--shadow-sm);
  display:flex; align-items:flex-start; gap:12px;
  transition:transform .12s, box-shadow .12s;
}
.kpi:hover{transform:translateY(-2px); box-shadow:var(--shadow-md)}
.kpi .ic{width:36px; height:36px; border-radius:10px; background:var(--kpi-accent-bg,var(--blue-bg)); color:var(--kpi-accent,var(--c-blue)); display:flex; align-items:center; justify-content:center; flex-shrink:0}
.kpi .ic svg{width:18px; height:18px}
.kpi .l{font-size:10.6px; color:var(--mut); font-weight:700; text-transform:uppercase; letter-spacing:.5px}
.kpi .v{font-size:24px; font-weight:800; margin-top:3px; letter-spacing:-.4px}
.kpi .s{font-size:11.3px; color:var(--mut); margin-top:3px}
.kpi .s b.up{color:var(--s-good)} .kpi .s b.dn{color:var(--s-critical)}

.grid{display:grid; gap:16px; margin-bottom:16px}
.g2{grid-template-columns:1fr 1fr}
.g32{grid-template-columns:3fr 2fr}
.g23{grid-template-columns:2fr 3fr}
@media(max-width:1050px){.g2,.g32,.g23{grid-template-columns:1fr}}

.card{
  background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px 19px; box-shadow:var(--shadow-sm);
}
.card h3{font-size:13.8px; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; letter-spacing:-.1px}
.card h3::before{content:""; width:4px; height:15px; border-radius:2px; background:var(--brand-yellow)}
.card h3 .hint{font-weight:500; color:var(--mut); font-size:11.2px}
.ch{position:relative; height:290px}
.ch.sm{height:235px}
.ch.xs{height:190px}

.ctl{display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin-bottom:13px}
.ctl label{font-size:11.6px; font-weight:600; color:var(--mut)}

/* ---------- tables ---------- */
.tblwrap{overflow:auto; max-height:620px; border:1px solid var(--border); border-radius:11px}
table{border-collapse:separate; border-spacing:0; width:100%; font-size:12.3px}
thead th{
  background:#f7f8fa; color:var(--mut); padding:9px 11px; text-align:right;
  position:sticky; top:0; z-index:5; font-weight:700; white-space:nowrap;
  border-bottom:1px solid var(--border); text-transform:uppercase; font-size:10.3px; letter-spacing:.4px;
}
thead th:first-child{text-align:left}
tbody td{padding:8px 11px; border-bottom:1px solid #f1f3f6; text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
tbody td:first-child{text-align:left}
/* long SKU / warehouse names must never push numeric columns out of view */
tbody td:first-child{max-width:270px; overflow:hidden; text-overflow:ellipsis}
tbody tr[data-clickable]{cursor:pointer}
tbody tr:hover td{background:#fbf8ee}
tr.catrow td{background:#faf6e9; font-weight:700; cursor:pointer}
tr.catrow:hover td{background:#f5eed6}
tr.totrow td{background:var(--txt); color:var(--brand-yellow); font-weight:750; position:sticky; bottom:0}
.stick1 thead th:first-child, .stick1 tbody td:first-child{
  position:sticky; left:0; z-index:6; background:var(--card); border-right:1px solid var(--border);
  max-width:280px; overflow:hidden; text-overflow:ellipsis;
}
.stick1 thead th:first-child{background:#f7f8fa; z-index:7}
.stick1 tr.catrow td:first-child{background:#faf6e9}
.stick1 tr.totrow td:first-child{background:var(--txt)}
.stick1 tbody tr:hover td:first-child{background:#fbf8ee}

/* highlighted (latest-day) column on This Month matrix */
td.hl, th.hl{background:#fdf4d7 !important; font-weight:700}
tbody tr:hover td.hl{background:#f9edc2 !important}

/* zero-stock cell in the warehouse x SKU matrix */
td.zero{background:#fdeaea; color:var(--s-critical); font-weight:700}
tbody tr:hover td.zero{background:#fadcdc}

.badge{display:inline-flex; align-items:center; gap:4px; padding:2.5px 10px; border-radius:20px; font-size:11px; font-weight:700}
.badge svg{width:11px; height:11px}
.b-g{background:var(--green-bg); color:var(--s-good)}
.b-r{background:var(--red-bg); color:var(--s-critical)}
.b-a{background:var(--amber-bg); color:var(--s-warning)}
.b-b{background:var(--blue-bg); color:var(--c-blue)}
.b-x{background:#eef0f3; color:var(--mut)}

.barbg{display:inline-block; width:66px; height:7px; border-radius:4px; background:#eceef1; vertical-align:middle; margin-right:7px; position:relative; overflow:hidden}
.barbg i{position:absolute; left:0; top:0; bottom:0; background:var(--s-good); border-radius:4px}

.insight{display:flex; gap:11px; padding:10px 0; border-bottom:1px dashed var(--border); font-size:12.7px; align-items:flex-start}
.insight:last-child{border:none}
.insight .ic{width:27px; height:27px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#fbf3d9; color:#8a6d1a}
.insight .ic svg{width:14px; height:14px}
#insightsSource, .src-line{font-size:10.6px; color:var(--mut-soft); margin-top:10px; font-style:italic}

.newsku{background:var(--brand-yellow); color:#3a2e00; font-size:9.6px; font-weight:800; border-radius:4px; padding:1px 5px; margin-left:6px; vertical-align:middle}
.note{font-size:11.4px; color:var(--mut); margin-top:8px; line-height:1.55}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin:9px 0 0}
.chip{background:#eef0f3; border-radius:16px; padding:4px 12px; font-size:11.6px; font-weight:600; cursor:pointer; border:1px solid transparent; opacity:.45}
.chip.on{background:#fff; border-color:var(--border); opacity:1; box-shadow:var(--shadow-sm)}

#cityDetail{display:none}
.clickhint{font-size:10.8px; color:var(--mut-soft); font-style:italic}

/* ---------- drill modal ---------- */
#modal{display:none; position:fixed; inset:0; background:rgba(16,20,28,.55); z-index:200; align-items:center; justify-content:center; padding:26px; backdrop-filter:blur(2px)}
#modal.on{display:flex}
#modalCard{background:var(--card); border-radius:16px; max-width:1250px; width:100%; max-height:88vh; display:flex; flex-direction:column; box-shadow:0 24px 70px rgba(0,0,0,.4)}
#modalHead{display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border)}
#modalHead h3{font-size:14.8px}
#modalSub{font-size:11.8px; color:var(--mut)}
#modalHead .x{margin-left:auto; display:flex; gap:8px; align-items:center}
#modalBody{overflow:auto; padding:0}
#modalBody table{font-size:12.1px}
#modalBody td:first-child{max-width:none}
#modalFoot{padding:10px 20px; border-top:1px solid var(--border); font-size:11.8px; color:var(--mut)}
.closebtn{border:none; background:#eef0f3; border-radius:9px; width:31px; height:31px; font-size:15px; cursor:pointer; font-weight:700}
.closebtn:hover{background:var(--red-bg); color:var(--s-critical)}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg)}
.login-card{background:var(--card); border:1px solid var(--border); border-radius:18px; padding:38px 36px; width:100%; max-width:380px; box-shadow:var(--shadow-md)}
.login-card .mark{width:44px; height:44px; border-radius:12px; background:var(--brand-yellow); display:flex; align-items:center; justify-content:center; font-weight:800; color:#3a2e00; font-size:19px; margin-bottom:18px; box-shadow:0 4px 12px rgba(246,201,69,.35)}
.login-card h1{font-size:19px; font-weight:750; letter-spacing:-.2px}
.login-card p.sub{font-size:12.4px; color:var(--mut); margin-top:4px; margin-bottom:24px}
.login-card label{display:block; font-size:10.8px; font-weight:700; color:var(--mut); text-transform:uppercase; letter-spacing:.4px; margin:16px 0 6px}
.login-card input{width:100%; border:1px solid var(--border); border-radius:9px; padding:10px 12px; font-size:13.6px; background:var(--bg)}
.login-card input:focus{outline:2px solid var(--brand-yellow); outline-offset:-1px; background:var(--card)}
.login-card button{width:100%; margin-top:22px; padding:11px; border-radius:9px; background:var(--txt); color:var(--brand-yellow); border:none; font-weight:700; font-size:13.6px; cursor:pointer}
.login-card button:hover{background:#242c3d}
.login-card .err{background:var(--red-bg); color:var(--s-critical); padding:9px 12px; border-radius:8px; font-size:12px; margin-top:16px}

/* ---------- sidebar account block ---------- */
#sidebarAccount{padding:12px 18px; border-top:1px solid rgba(255,255,255,.07); display:flex; align-items:center; gap:9px}
#sidebarAccount .who{flex:1; min-width:0}
#sidebarAccount .who .name{font-size:12px; font-weight:650; color:#e6eaf0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#sidebarAccount .who .email{font-size:10.3px; color:var(--sidebar-txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#sidebarAccount form{flex-shrink:0}
#sidebarAccount button{background:rgba(255,255,255,.07); border:none; border-radius:8px; width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--sidebar-txt); cursor:pointer}
#sidebarAccount button:hover{background:rgba(255,255,255,.14); color:#fff}
#sidebarAccount button svg{width:15px; height:15px}

@media(max-width:880px){
  #sidebar{position:fixed; left:-232px; transition:left .15s; box-shadow:var(--shadow-md)}
  #sidebar.open{left:0}
  #main{width:100%}
}