/* ═══════════════════════════════════════════════════════════════════
   SDL Sales Intelligence — V37 Director Premium
   Font: Outfit (display/UI) + Space Grotesk (labels) + JetBrains Mono (numbers)
   Square Denims Ltd. · Fabric Unit · Powered by FabricIQ · Built for Square Denims Ltd.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─── DESIGN TOKENS ─────────────────────────────────────────────── */
:root {
  --gold:      #c8893a;
  --gold2:     #e8aa5c;
  --gold3:     #f5cc88;
  --gold4:     #fde9c0;
  --gold-a05:  rgba(200,137,58,.05);
  --gold-a10:  rgba(200,137,58,.10);
  --gold-a18:  rgba(200,137,58,.18);
  --gold-a30:  rgba(200,137,58,.30);
  --gold-a50:  rgba(200,137,58,.50);

  --bg:  #050d18;
  --s1:  #091422;
  --s2:  #0d1d30;
  --s3:  #112538;
  --s4:  #172f46;
  --s5:  #1d3a58;
  --s6:  #254569;

  --g1: rgba(255,255,255,.03);
  --g2: rgba(255,255,255,.06);
  --g3: rgba(255,255,255,.10);

  --b0: rgba(255,255,255,.04);
  --b1: rgba(255,255,255,.08);
  --b2: rgba(255,255,255,.14);
  --b3: rgba(255,255,255,.22);

  --t0: #eef6ff;
  --t1: #93b8d4;
  --t2: #6090b0;
  --t3: #406882;
  --t4: #1a3348;

  --green:  #1ec882;
  --cyan:   #28bef0;
  --red:    #f04866;
  --amber:  #f0aa28;
  --purple: #9068f0;
  --orange: #f07040;

  --ta: #28bef0;
  --tb: #f07040;
  --tc: #1ec882;
  --td: #9068f0;

  --sh0: 0 1px 4px rgba(0,0,0,.3);
  --sh1: 0 4px 18px rgba(0,0,0,.4);
  --sh2: 0 8px 36px rgba(0,0,0,.5);
  --sh3: 0 20px 60px rgba(0,0,0,.6);

  --nav-w:   256px;
  --nav-wc:  64px;
  --top-h:   60px;
  --ease:    cubic-bezier(.4,0,.2,1);

  --r6:  6px;  --r8:  8px;  --r10: 10px;
  --r12: 12px; --r14: 14px; --r16: 16px;
  --r20: 20px; --r24: 24px;

  --ui:  'Outfit', system-ui, sans-serif;
  --hd:  'Outfit', sans-serif;
  --lb:  'Space Grotesk', sans-serif;
  --nm:  'JetBrains Mono', 'SFMono-Regular', monospace;
}

/* ─── RESET ─────────────────────────────────────────────────────── */
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;font-size:14px;line-height:1.5}
/* Mobile: unlock body so the page can scroll naturally */
@media(max-width:900px){
  html,body{overflow:auto;overflow-x:hidden;height:auto;min-height:100%}
}
body{
  font-family:var(--ui);background:var(--bg);color:var(--t0);
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse 70% 50% at 80% -10%,rgba(200,137,58,.055),transparent 60%),
    radial-gradient(ellipse 50% 40% at 10% 110%,rgba(40,190,240,.035),transparent 55%);
  background-attachment:fixed;
}
button,select,input{font-family:inherit;cursor:pointer}
svg{display:block}

/* ─── LOADER ────────────────────────────────────────────────────── */
#loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .7s var(--ease),visibility .7s}
#loader.out{opacity:0;visibility:hidden;pointer-events:none}
.ld-logo{width:92px;height:92px;border-radius:24px;margin-bottom:26px;background:var(--s2);padding:11px;object-fit:contain;border:1px solid var(--gold-a30);box-shadow:0 0 0 8px var(--gold-a05),0 0 40px rgba(200,137,58,.15);animation:ldPop 3s ease-in-out infinite}
@keyframes ldPop{0%,100%{transform:translateY(0);box-shadow:0 0 0 8px var(--gold-a05)}50%{transform:translateY(-5px);box-shadow:0 0 0 14px rgba(200,137,58,.02),0 12px 36px rgba(200,137,58,.12)}}
.ld-brand{font-family:var(--lb);font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--t3);margin-bottom:7px}
.ld-title{font-family:var(--hd);font-size:22px;font-weight:800;background:linear-gradient(90deg,var(--gold2),var(--t0) 45%,var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:6px;text-align:center}
.ld-sub{font-size:11px;color:var(--t3);margin-bottom:34px;letter-spacing:.06em}
.ld-bar{width:240px;height:2px;background:var(--s4);border-radius:1px;overflow:hidden;margin-bottom:12px}
.ld-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold3),var(--cyan));width:0;transition:width 2s var(--ease)}
.ld-msg{font-size:10px;color:var(--t3);font-family:var(--nm);letter-spacing:.06em}

/* ─── APP SHELL ─────────────────────────────────────────────────── */
#app{display:flex;height:100vh;overflow:hidden}

/* ─── SIDEBAR ───────────────────────────────────────────────────── */
#sidebar{width:var(--nav-w);flex-shrink:0;background:var(--s1);border-right:1px solid var(--b1);display:flex;flex-direction:column;overflow:hidden;transition:width .3s var(--ease);position:relative;box-shadow:2px 0 20px rgba(0,0,0,.25)}
#sidebar::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-a30),transparent)}
#sidebar.collapsed{width:var(--nav-wc)}
#sidebar.collapsed .nl,#sidebar.collapsed .ng,#sidebar.collapsed .ntag{display:none}
#sidebar.collapsed .nbtn{justify-content:center;padding:0 16px}
#sidebar.collapsed .sb-brand{padding:14px;justify-content:center}
#sidebar.collapsed .sb-collapse,.sb-collapsed .sb-text{display:none}
#sidebar.collapsed .sb-text{display:none}
.sb-brand{display:flex;align-items:center;gap:11px;padding:17px 15px 14px;border-bottom:1px solid var(--b0);position:relative;flex-shrink:0;background:linear-gradient(180deg,rgba(200,137,58,.04),transparent)}
.sb-logo{width:38px;height:38px;border-radius:12px;flex-shrink:0;background:var(--s3);padding:4px;border:1px solid rgba(200,137,58,.18);object-fit:contain}
.sb-text{min-width:0}
.sb-name{font-family:var(--hd);font-size:13px;font-weight:800;letter-spacing:.02em;color:var(--gold3);white-space:nowrap}
.sb-ver{font-size:9px;color:var(--t3);letter-spacing:.07em;margin-top:2px;font-family:var(--lb)}
.sb-collapse{position:absolute;right:11px;top:50%;transform:translateY(-50%);background:var(--s3);border:1px solid var(--b1);color:var(--t2);width:24px;height:24px;border-radius:8px;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all .2s}
.sb-collapse:hover{color:var(--gold2);border-color:var(--gold-a30)}
.sb-nav{flex:1;overflow-y:auto;padding:8px 9px;scrollbar-width:thin;scrollbar-color:var(--s5) transparent}
.ng{font-size:8px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--t4);padding:13px 10px 5px;display:flex;align-items:center;gap:8px;font-family:var(--lb)}
.ng::after{content:'';flex:1;height:1px;background:var(--b0)}
.nbtn{width:100%;display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r10);background:none;border:none;color:var(--t2);font-size:13px;font-weight:500;text-align:left;transition:all .18s;margin-bottom:2px;position:relative}
.nbtn:hover{background:var(--g1);color:var(--t0)}
.nbtn.active{background:linear-gradient(90deg,rgba(200,137,58,.14),rgba(40,190,240,.05));color:var(--gold3);border:1px solid rgba(200,137,58,.2)}
.ni{font-size:15px;width:20px;text-align:center;flex-shrink:0;opacity:.8}
.nbtn.active .ni{opacity:1}
.nl{flex:1}
.ntag{font-size:8px;font-weight:700;letter-spacing:.06em;padding:2px 7px;border-radius:20px;white-space:nowrap;font-family:var(--lb)}
.ntag-live{background:var(--gold);color:#1a0800}
.ntag-alert{background:rgba(240,72,102,.15);color:var(--red);border:1px solid rgba(240,72,102,.2)}
.ntag-info{background:var(--s4);color:var(--t2)}
.sb-foot{padding:11px 14px 15px;border-top:1px solid var(--b0);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.sb-clock{font-size:10px;color:var(--t3);font-family:var(--nm)}
.sb-refresh{background:none;border:1px solid var(--b1);color:var(--t3);width:28px;height:28px;border-radius:9px;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all .3s}
.sb-refresh:hover{color:var(--gold2);border-color:var(--gold-a30);transform:rotate(200deg)}
.sb-overlay{display:none;position:fixed;inset:0;z-index:199;background:rgba(0,0,0,.55);backdrop-filter:blur(2px)}
.sb-overlay.active{display:block}

/* ─── TOPBAR ────────────────────────────────────────────────────── */
#topbar{height:var(--top-h);flex-shrink:0;background:rgba(5,13,24,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--b1);display:flex;align-items:center;padding:0 18px;gap:11px;position:sticky;top:0;z-index:90}
#topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-a18),transparent);pointer-events:none}
.tb-menu{display:none;background:none;border:none;color:var(--t1);font-size:20px;padding:4px;border-radius:8px;transition:color .2s}
.tb-menu:hover{color:var(--gold2)}
.tb-logo{width:32px;height:32px;border-radius:10px;background:var(--s3);padding:4px;border:1px solid rgba(200,137,58,.18);object-fit:contain;flex-shrink:0}
.tb-info{flex:1;min-width:0}
.tb-page{font-family:var(--hd);font-size:16px;font-weight:800;color:var(--t0);letter-spacing:-.01em;line-height:1.2}
.tb-meta{font-size:9.5px;color:var(--t3);font-family:var(--nm);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-live{display:flex;flex-direction:column;align-items:flex-end;border-left:1px solid var(--b1);padding-left:13px;min-width:110px}
.tb-clock{font-family:var(--nm);font-size:18px;font-weight:600;color:var(--gold2);line-height:1;letter-spacing:.02em}
.tb-date{font-size:9.5px;color:var(--t3);white-space:nowrap;margin-top:1px}
.tb-right{display:flex;align-items:center;gap:7px;flex-shrink:0}
.tb-btn{background:var(--g1);border:1px solid var(--b1);color:var(--t1);border-radius:var(--r8);padding:6px 12px;font-size:11.5px;font-weight:600;transition:all .2s;white-space:nowrap}
.tb-btn:hover{border-color:var(--b2);color:var(--t0);background:var(--g2)}
.tb-btn-gold{background:rgba(200,137,58,.14);border-color:var(--gold-a30);color:var(--gold3)}
.tb-btn-gold:hover{background:rgba(200,137,58,.24)}

/* ═══════════════════════════════════════════════════════════════════
   SDL SMART FILTER BAR v2
   Layout: [Year pills] | [Month pills multi-select] | [Team pills] [Search][⋯][✕]
           [Buyer dropdown] [Concern dropdown] [Active chips]  ← expands on ⋯
   ═══════════════════════════════════════════════════════════════════ */
.sdl-filter{
  position:sticky;top:0;z-index:88;
  background:rgba(5,11,20,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--b1);
  padding:8px 18px 6px;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.sdl-filter::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-a18),transparent);pointer-events:none}

/* section = label + pills/select group */
.sf-section{display:flex;align-items:center;gap:6px;flex-shrink:0}
.sf-lbl{font-family:var(--lb);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
.sf-divider{width:1px;height:20px;background:var(--b1);flex-shrink:0;margin:0 2px}

/* Pills row */
.sf-pills{display:flex;gap:4px;flex-wrap:nowrap}
.sf-pills-scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:calc(100vw - 560px)}
.sf-pills-scroll::-webkit-scrollbar{display:none}

/* Individual pill */
.sf-pill{
  background:var(--g1);border:1px solid var(--b1);color:var(--t2);
  border-radius:999px;padding:4px 11px;font-size:12px;font-weight:600;
  white-space:nowrap;transition:all .16s;cursor:pointer;flex-shrink:0;
  font-family:var(--ui);
}
.sf-pill:hover{border-color:var(--b2);color:var(--t0);background:var(--g2)}
/* ACTIVE — gold for year/month */
.sf-pill.sf-active{
  background:linear-gradient(135deg,rgba(200,137,58,.2),rgba(200,137,58,.08));
  border-color:var(--gold-a30);color:var(--gold3);
  box-shadow:0 0 8px rgba(200,137,58,.08);
}
/* Month pill — slightly smaller */
.sf-pill.sf-month{font-size:11.5px;padding:3px 9px}
/* ALL preset pill */
.sf-pill.sf-preset{font-size:11px;padding:4px 10px;border-style:dashed}
.sf-pill.sf-preset.sf-active{border-style:solid}

/* Team-colored active */
.sf-team-a.sf-active{background:rgba(40,190,240,.12);border-color:rgba(40,190,240,.3);color:var(--ta)}
.sf-team-b.sf-active{background:rgba(240,112,64,.12);border-color:rgba(240,112,64,.3);color:var(--tb)}
.sf-team-c.sf-active{background:rgba(30,200,130,.12);border-color:rgba(30,200,130,.3);color:var(--tc)}
.sf-team-d.sf-active{background:rgba(144,104,240,.12);border-color:rgba(144,104,240,.3);color:var(--td)}

/* Right side: search + more + reset */
.sf-right{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.sf-search-wrap{position:relative}
.sf-search-ico{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--t3);pointer-events:none;line-height:1}
.sf-search{
  width:200px;height:32px;padding:0 10px 0 30px;
  background:rgba(255,255,255,.045);border:1px solid var(--b1);
  border-radius:999px;color:var(--t0);font-size:12px;outline:none;
  transition:border-color .18s,background .18s;
}
.sf-search::placeholder{color:var(--t3)}
.sf-search:focus{border-color:var(--gold-a30);background:rgba(255,255,255,.065);width:240px}
.sf-more-btn{
  position:relative;width:32px;height:32px;border-radius:999px;
  background:var(--g1);border:1px solid var(--b1);color:var(--t2);
  display:flex;align-items:center;justify-content:center;
  transition:all .18s;flex-shrink:0;
}
.sf-more-btn:hover{border-color:var(--gold-a30);color:var(--gold2);background:var(--gold-a05)}
.sf-more-badge{
  position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;
  border-radius:999px;background:var(--gold);color:#1a0800;
  font-size:9px;font-weight:800;display:flex;align-items:center;justify-content:center;padding:0 3px;
}
.sf-more-badge.hidden{display:none!important}
.sf-reset{
  width:32px;height:32px;border-radius:999px;background:none;
  border:1px solid var(--b1);color:var(--t3);font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;transition:all .18s;
}
.sf-reset:hover{border-color:rgba(240,72,102,.4);color:var(--red);background:rgba(240,72,102,.06)}

/* Expanded more row */
.sf-more-row{
  width:100%;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding-top:7px;margin-top:2px;border-top:1px solid var(--b0);
  animation:sfExpand .18s var(--ease) both;
}
.sf-more-row.hidden{display:none!important}
@keyframes sfExpand{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.sf-select{
  height:30px;background:rgba(255,255,255,.045);border:1px solid var(--b1);
  color:var(--t0);border-radius:var(--r8);padding:0 10px;font-size:12px;
  font-family:var(--ui);outline:none;min-width:150px;max-width:200px;
  transition:border-color .18s;
}
.sf-select:focus,.sf-select:hover{border-color:var(--gold-a30)}
.sf-select option{background:var(--s2);color:var(--t0)}

/* Active chips */
.sf-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;flex:1}
.filter-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--g1);
  border:1px solid var(--b1);color:var(--t1);border-radius:999px;
  padding:4px 8px 4px 10px;font-size:11px;white-space:nowrap;cursor:pointer;transition:all .15s;
}
.filter-chip:hover{border-color:rgba(240,72,102,.3);color:var(--red)}
.filter-chip b{color:var(--t3);font-size:12px}
.filter-empty{font-size:10px;color:var(--t4);font-family:var(--nm)}

/* months section gets more flexible */
.sf-months{flex:1;min-width:0;overflow:hidden}
.sf-months .sf-pills-scroll{max-width:none}

/* Hidden native selects */
.native-selects.hidden{display:none!important}

/* ─── MAIN CONTENT ──────────────────────────────────────────────── */
#main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
#content{flex:1;overflow-y:auto;padding:18px 20px;scroll-behavior:smooth}
#content::-webkit-scrollbar{width:3px}
#content::-webkit-scrollbar-thumb{background:var(--s5);border-radius:2px}
#content::-webkit-scrollbar-thumb:hover{background:var(--gold-a30)}
.page{display:none;animation:pgIn .22s var(--ease) both}
.page.active{display:block}
@keyframes pgIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* ─── CARD ──────────────────────────────────────────────────────── */
.card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r16);margin-bottom:14px;overflow:hidden;box-shadow:var(--sh0);transition:box-shadow .2s}
.card:hover{box-shadow:var(--sh1)}
.card-hd{display:flex;align-items:center;justify-content:space-between;padding:12px 17px;border-bottom:1px solid var(--b0);background:linear-gradient(180deg,var(--g1),transparent)}
.card-title{font-size:13.5px;font-weight:700;color:var(--t0);font-family:var(--ui)}
.card-badge{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:20px;background:var(--s4);color:var(--t2);font-family:var(--lb)}
.card-body{padding:14px 17px}

/* ─── KPI GRID ──────────────────────────────────────────────────── */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.kpi{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r14);padding:14px 15px;transition:transform .2s,box-shadow .2s;position:relative;overflow:hidden}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:2px 2px 0 0}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh1)}
.kpi-gold{border-color:rgba(200,137,58,.2)}.kpi-gold::before{background:var(--gold)}
.kpi-cyan{border-color:rgba(40,190,240,.16)}.kpi-cyan::before{background:var(--cyan)}
.kpi-green{border-color:rgba(30,200,130,.16)}.kpi-green::before{background:var(--green)}
.kpi-red{border-color:rgba(240,72,102,.18)}.kpi-red::before{background:var(--red)}
.kpi-amber{border-color:rgba(240,170,40,.16)}.kpi-amber::before{background:var(--amber)}
.kpi-dim{opacity:.65}
.kpi-lbl{font-family:var(--lb);font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t2);margin-bottom:5px}
.kpi-val{font-family:var(--nm);font-size:22px;font-weight:600;letter-spacing:-.01em;line-height:1.1;color:var(--t0)}
.kv-gold{color:var(--gold2)}.kv-cyan{color:var(--cyan)}.kv-green{color:var(--green)}.kv-red{color:var(--red)}.kv-amber{color:var(--amber)}
.kpi-sub{font-size:11px;color:var(--t2);margin-top:4px}

/* ─── EXECUTIVE HERO ────────────────────────────────────────────── */
.exec-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(290px,.7fr);grid-template-rows:auto auto;gap:13px;margin-bottom:15px}
.hero-trend-card{grid-column:1/3;grid-row:1/2;min-height:285px;background:linear-gradient(155deg,rgba(13,29,48,.98),rgba(5,11,20,.98));border:1px solid rgba(40,190,240,.16);border-radius:var(--r20);padding:19px 21px;position:relative;overflow:hidden;box-shadow:0 14px 44px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.05)}
.hero-trend-card::before{content:'';position:absolute;inset:-1px -1px auto -1px;height:1px;background:linear-gradient(90deg,transparent,rgba(40,190,240,.4),transparent)}
.hero-trend-card::after{content:'';position:absolute;right:-80px;bottom:-80px;width:280px;height:280px;background:radial-gradient(circle,rgba(40,190,240,.08),transparent 70%);pointer-events:none}
.trend-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.trend-kicker{font-family:var(--lb);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--cyan)}
.trend-title{font-family:var(--hd);font-size:16px;font-weight:800;color:var(--t0);margin-top:4px}
.trend-pill{border:1px solid rgba(30,200,130,.3);background:rgba(30,200,130,.08);color:var(--green);font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:5px 11px;white-space:nowrap;flex-shrink:0;font-family:var(--lb)}
.trend-canvas-wrap{height:165px;margin-top:4px}
.trend-mini-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:11px}
.trend-mini-row>div{background:var(--g1);border:1px solid rgba(160,195,230,.1);border-radius:var(--r12);padding:9px 10px}
.trend-mini-row span{display:block;font-family:var(--lb);font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--t3);margin-bottom:4px}
.trend-mini-row b{font-family:var(--nm);font-size:15px;color:var(--t0)}
.trend-mini-row b.green{color:var(--green)}.trend-mini-row b.amber{color:var(--amber)}.trend-mini-row b.red{color:var(--red)}.trend-mini-row b.gold{color:var(--gold2)}.trend-mini-row b.cyan{color:var(--cyan)}

.hero-ach{background:var(--s1);border-radius:var(--r20);padding:19px 21px;border:1px solid var(--b1);position:relative;overflow:hidden}
.hero-ach.finance{grid-column:1/2;grid-row:2/3;border-top:3px solid var(--gold)}
.hero-ach.planning{grid-column:2/3;grid-row:2/3;border-top:3px solid var(--cyan)}
.hero-ach.finance::after{content:'';position:absolute;right:-30px;bottom:-30px;width:130px;height:130px;background:radial-gradient(circle,rgba(200,137,58,.07),transparent 70%);pointer-events:none}
.hero-ach.planning::after{content:'';position:absolute;right:-30px;bottom:-30px;width:130px;height:130px;background:radial-gradient(circle,rgba(40,190,240,.06),transparent 70%);pointer-events:none}
.hero-status{grid-column:3/4;grid-row:1/3;background:var(--s1);border-radius:var(--r20);padding:19px;border:1px solid var(--b1);display:flex;flex-direction:column;gap:9px}
.hero-kpi-row{grid-column:1/4;display:grid;grid-template-columns:repeat(6,1fr);gap:10px}

.ach-pct-hero{font-family:var(--nm);font-size:50px;font-weight:700;line-height:1;letter-spacing:-.03em;margin-bottom:4px}
.ach-pct-hero.gold{color:var(--gold2)}.ach-pct-hero.cyan{color:var(--cyan)}.ach-pct-hero.green{color:var(--green)}.ach-pct-hero.red{color:var(--red)}.ach-pct-hero.amber{color:var(--amber)}
.ach-row{display:flex;gap:15px;margin-top:11px;flex-wrap:wrap}
.ach-metric2{display:flex;flex-direction:column;gap:3px}
.ach-metric2-lbl{font-family:var(--lb);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.ach-metric2-val{font-family:var(--nm);font-size:13px;font-weight:600;color:var(--t0)}
.ach-metric2-val.gold{color:var(--gold2)}.ach-metric2-val.cyan{color:var(--cyan)}.ach-metric2-val.green{color:var(--green)}.ach-metric2-val.red{color:var(--red)}

.status-title{font-family:var(--lb);font-size:9px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--t3);margin-bottom:5px}
.status-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:var(--r10);margin-bottom:4px}
.status-item.si-green{background:rgba(30,200,130,.07);border:1px solid rgba(30,200,130,.14)}
.status-item.si-amber{background:rgba(240,170,40,.07);border:1px solid rgba(240,170,40,.14)}
.status-item.si-red{background:rgba(240,72,102,.07);border:1px solid rgba(240,72,102,.14)}
.si-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.si-green .si-dot{background:var(--green);box-shadow:0 0 5px var(--green)}
.si-amber .si-dot{background:var(--amber);box-shadow:0 0 5px var(--amber)}
.si-red .si-dot{background:var(--red);box-shadow:0 0 5px var(--red)}
.si-text{font-size:11.5px;font-weight:600;flex:1}
.si-green .si-text{color:var(--green)}.si-amber .si-text{color:var(--amber)}.si-red .si-text{color:var(--red)}
.si-val{font-family:var(--nm);font-size:11px;color:var(--t2)}

.fcst-box{background:linear-gradient(135deg,rgba(200,137,58,.1),rgba(40,190,240,.06));border:1px solid rgba(200,137,58,.2);border-radius:var(--r12);padding:11px 13px;margin-top:auto}
.fcst-box.pending{border-color:rgba(240,170,40,.28);background:rgba(240,170,40,.07)}
.fcst-box.pending .fcst-box-val{font-size:19px;color:var(--amber)}
.fcst-box-lbl{font-family:var(--lb);font-size:8.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--t3);margin-bottom:4px}
.fcst-box-val{font-family:var(--nm);font-size:23px;font-weight:700;color:var(--gold2);letter-spacing:-.02em}
.fcst-box-sub{font-size:10px;color:var(--t2);margin-top:3px}

/* ─── REPORT BANNER ─────────────────────────────────────────────── */
.report-banner{background:linear-gradient(90deg,rgba(200,137,58,.07),rgba(40,190,240,.04));border:1px solid rgba(200,137,58,.16);border-radius:var(--r10);padding:8px 15px;display:flex;align-items:center;gap:9px;margin-bottom:13px;font-size:11.5px;color:var(--t1)}
.report-banner-icon{font-size:14px;color:var(--gold2);flex-shrink:0}
.report-banner strong{color:var(--gold2)}

/* ─── TEAM CARDS ────────────────────────────────────────────────── */
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.team-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r16);padding:15px;position:relative;overflow:hidden;transition:transform .2s,box-shadow .2s}
.team-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.tc-a::after{background:linear-gradient(90deg,var(--ta),transparent 75%)}.tc-b::after{background:linear-gradient(90deg,var(--tb),transparent 75%)}.tc-c::after{background:linear-gradient(90deg,var(--tc),transparent 75%)}.tc-d::after{background:linear-gradient(90deg,var(--td),transparent 75%)}
.team-card.tc-highlight{border-color:rgba(30,200,130,.27)}
.team-card:hover{transform:translateY(-3px);box-shadow:var(--sh1)}
.tc-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:9px}
.tc-name{font-family:var(--lb);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t2)}
.tc-rank{font-family:var(--nm);font-size:10px;color:var(--t3)}
.tc-val{font-family:var(--nm);font-size:20px;font-weight:600;margin-bottom:3px;letter-spacing:-.01em}
.tc-qty{font-size:10px;color:var(--t2);margin-bottom:8px}
.tc-bar{height:3px;background:var(--s4);border-radius:2px;overflow:hidden;margin-bottom:7px}
.tc-fill{height:100%;border-radius:2px;transition:width .8s var(--ease)}
.tc-footer{display:flex;justify-content:space-between;font-size:9.5px;color:var(--t3)}
.tc-ok{color:var(--green)}.tc-warn{color:var(--amber)}.tc-bad{color:var(--red)}

/* ─── CHARTS ────────────────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:14px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px;margin-bottom:14px}
.two-col .card,.three-col .card{margin-bottom:0}
.card canvas{display:block;padding:13px;max-width:100%;box-sizing:border-box;}
/* ch-wrap: explicit-height container so Chart.js responsive sizing has a concrete measurement target */
.ch-wrap{position:relative;overflow:hidden;}
.ch-wrap>canvas{display:block;padding:0!important;max-width:none!important;}

/* ─── TRAFFIC LIGHTS ────────────────────────────────────────────── */
.tlight-row{display:flex;gap:8px;margin-bottom:13px;flex-wrap:wrap}
.tlight{display:flex;align-items:center;gap:8px;background:var(--s1);border:1px solid var(--b1);border-radius:var(--r10);padding:7px 13px;font-size:12px;font-weight:600;transition:border-color .2s}
.tl-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.tl-green{border-color:rgba(30,200,130,.2);color:var(--green)}.tl-green .tl-dot{background:var(--green);box-shadow:0 0 6px var(--green)}
.tl-amber{border-color:rgba(240,170,40,.2);color:var(--amber)}.tl-amber .tl-dot{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.tl-red{border-color:rgba(240,72,102,.22);color:var(--red)}.tl-red .tl-dot{background:var(--red);box-shadow:0 0 6px var(--red)}
.tl-sub{font-size:10px;color:var(--t2);font-weight:400}

/* ─── TARGET METER ──────────────────────────────────────────────── */
.target-meter{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r14);padding:15px 17px;margin-bottom:13px}
.tm-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}
.tm-title{font-size:12.5px;font-weight:600;color:var(--t0)}
.tm-gen{font-size:9.5px;color:var(--t2);font-family:var(--nm)}
.tm-bar-outer{height:8px;background:var(--s4);border-radius:4px;overflow:hidden;position:relative;margin-bottom:5px}
.tm-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold3),var(--cyan));border-radius:4px;transition:width .9s var(--ease)}
.tm-mark{position:absolute;top:0;bottom:0;width:1px}
.tm-marks-row{display:flex;justify-content:space-between;font-size:9px;color:var(--t3);font-family:var(--nm);margin-bottom:11px}
.tm-stats{display:flex;gap:16px;flex-wrap:wrap}
.tm-stat{display:flex;flex-direction:column;gap:2px}
.tm-stat-lbl{font-family:var(--lb);font-size:8.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--t3)}
.tm-stat-val{font-family:var(--nm);font-size:12.5px;font-weight:600;color:var(--t0)}
.tmv-gold{color:var(--gold2)}.tmv-cyan{color:var(--cyan)}.tmv-green{color:var(--green)}.tmv-red{color:var(--red)}

/* ─── AI CARDS ──────────────────────────────────────────────────── */
.ai-card,.ai-v2{background:linear-gradient(135deg,rgba(200,137,58,.07),rgba(40,190,240,.04));border:1px solid rgba(200,137,58,.18);border-radius:var(--r16);padding:17px;margin-bottom:13px}
.ai-header,.ai-v2-header{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.ai-badge,.ai-v2-badge{background:linear-gradient(90deg,var(--gold),#b87535);color:#1a0800;font-size:8px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:3px 10px;border-radius:20px;flex-shrink:0;font-family:var(--lb)}
.ai-title,.ai-v2-title{font-size:13px;font-weight:600;color:var(--t0)}
.ai-body{font-size:12.5px;color:var(--t1);line-height:1.75;display:grid;grid-template-columns:1fr 1fr;gap:15px}
.ai-item{display:flex;gap:8px;align-items:flex-start}
.ai-dot{width:5px;height:5px;border-radius:50%;background:var(--gold2);flex-shrink:0;margin-top:6px}
.ai-forecast-box{margin-top:11px;background:var(--s2);border-radius:var(--r10);padding:10px 14px;display:flex;align-items:center;gap:13px;border:1px solid var(--b1)}
.ai-forecast-val{font-family:var(--nm);font-size:23px;font-weight:700;color:var(--gold2)}
.ai-forecast-lbl{font-size:11px;color:var(--t1)}
.ai-v2-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.ai-point{background:var(--s2);border-radius:var(--r10);padding:11px 12px;border-left:3px solid transparent}
.ai-point.ai-ok{border-color:var(--green)}.ai-point.ai-warn{border-color:var(--amber)}.ai-point.ai-risk{border-color:var(--red)}.ai-point.ai-action{border-color:var(--gold)}
.ai-point-lbl{font-family:var(--lb);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:4px}
.ai-point-val{font-size:12px;color:var(--t1);line-height:1.55}
.ai-point-val strong{color:var(--t0)}
.ai-cta{margin-top:11px;background:var(--s2);border-radius:var(--r10);padding:10px 14px;display:flex;align-items:center;gap:10px;border:1px solid var(--b1)}
.ai-cta-icon{font-size:16px;flex-shrink:0}
.ai-cta-text{font-size:12px;color:var(--t1)}
.ai-cta-text strong{color:var(--gold2)}

/* ─── TABLES ────────────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap::-webkit-scrollbar{height:3px}
.tbl-wrap::-webkit-scrollbar-thumb{background:var(--s5);border-radius:2px}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{background:var(--s2);color:var(--t2);font-family:var(--lb);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:9px 12px;text-align:left;border-bottom:1px solid var(--b1);white-space:nowrap;position:sticky;top:0;z-index:1}
table.tbl td{padding:8px 12px;border-bottom:1px solid var(--b0);color:var(--t1);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tr:hover td{background:var(--g1)}
.tv{color:var(--t0);font-weight:600}.tm{font-family:var(--nm);font-size:12.5px;color:var(--t0);font-weight:500}.tg{color:var(--gold2);font-family:var(--nm);font-size:12.5px;font-weight:600}
.tcn{color:var(--cyan)}.tgr{color:var(--green)}.tre{color:var(--red)}.tam{color:var(--amber)}.tmt{color:var(--t2);font-size:11.5px}
.bar-cell{display:flex;align-items:center;gap:7px}
.bar-cell .bk{flex:1;height:3px;background:var(--s4);border-radius:2px;overflow:hidden;min-width:50px}
.bar-cell .bf{height:100%;border-radius:2px}
.row-num{color:var(--t4);font-size:11px}

/* ─── TAGS & CHIPS ──────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;letter-spacing:.04em;white-space:nowrap;font-family:var(--lb)}
.tag-bulk{background:rgba(40,190,240,.12);color:var(--cyan)}.tag-sample{background:rgba(240,170,40,.12);color:var(--amber)}.tag-sto{background:rgba(144,104,240,.12);color:var(--purple)}.tag-ret{background:rgba(240,72,102,.12);color:var(--red)}.tag-comp{background:rgba(240,112,64,.12);color:var(--orange)}.tag-bgrade{background:rgba(200,137,58,.12);color:var(--gold2)}.tag-ok{background:rgba(30,200,130,.12);color:var(--green)}.tag-risk{background:rgba(240,72,102,.12);color:var(--red)}.tag-warn{background:rgba(240,170,40,.12);color:var(--amber)}.tag-info{background:var(--s4);color:var(--t2)}
.chip{display:inline-block;padding:2px 8px;border-radius:8px;font-size:10px;font-weight:600;background:var(--s4);color:var(--t1);border:1px solid var(--b1)}

/* ─── SEARCH ROW ────────────────────────────────────────────────── */
.search-row{display:flex;align-items:center;gap:8px;padding:9px 15px;border-bottom:1px solid var(--b0);flex-wrap:wrap}
.search-in{flex:1;min-width:160px;background:var(--g1);border:1px solid var(--b1);color:var(--t0);border-radius:var(--r10);padding:6px 12px;font-size:12px;outline:none;transition:border-color .2s}
.search-in::placeholder{color:var(--t3)}
.search-in:focus{border-color:var(--gold-a30);background:var(--g2)}
.rc{font-size:10px;color:var(--t2);white-space:nowrap}
.isel{background:var(--g1);border:1px solid var(--b1);color:var(--t1);border-radius:var(--r8);padding:5px 9px;font-size:11.5px;outline:none;transition:border-color .18s}
.isel:focus{border-color:var(--gold-a30)}

/* ─── PPS BADGES ────────────────────────────────────────────────── */
.mbadge{display:inline-block;padding:2px 7px;border-radius:8px;font-size:10px;font-weight:700;font-family:var(--lb)}
.mbadge-ok{background:rgba(30,200,130,.1);color:var(--green);border:1px solid rgba(30,200,130,.15)}
.mbadge-cur{background:rgba(40,190,240,.1);color:var(--cyan);border:1px solid rgba(40,190,240,.15)}
.mbadge-late{background:rgba(240,72,102,.1);color:var(--red);border:1px solid rgba(240,72,102,.2)}

/* ─── EMPTY STATE ───────────────────────────────────────────────── */
.empty-state{text-align:center;padding:52px 20px}
.es-icon{font-size:50px;margin-bottom:14px;opacity:.25}
.es-title{font-family:var(--hd);font-size:17px;font-weight:800;color:var(--t1);margin-bottom:7px}
.es-desc{font-size:12.5px;color:var(--t2);line-height:1.72;max-width:380px;margin:0 auto 18px}
.es-note{display:inline-block;background:var(--gold-a05);border:1px solid var(--gold-a30);color:var(--gold2);border-radius:var(--r10);padding:8px 17px;font-size:12px}

/* ─── HISTORY ───────────────────────────────────────────────────── */
.hist-hero{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:14px}
.hist-hero-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r14);padding:15px;text-align:center;transition:transform .2s}
.hist-hero-card:hover{transform:translateY(-2px)}
.hhc-year{font-family:var(--nm);font-size:26px;font-weight:700;color:var(--gold2);margin-bottom:3px}
.hhc-val{font-size:11.5px;color:var(--t1);margin-bottom:4px}
.hhc-badge{display:inline-block;font-size:9px;font-weight:700;padding:2px 8px;border-radius:20px;font-family:var(--lb)}
.yr-row{display:flex;align-items:center;gap:10px;padding:6px 0}
.yr-lbl{font-size:11px;color:var(--t1);width:36px;flex-shrink:0}
.yr-out{flex:1;height:5px;background:var(--s4);border-radius:3px;overflow:hidden}
.yr-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--gold),var(--gold3),var(--cyan));transition:width .9s var(--ease)}
.yr-val{font-family:var(--nm);font-size:11px;color:var(--t1);width:78px;text-align:right;flex-shrink:0}
.yr-yoy{font-size:10px;width:42px;text-align:right;flex-shrink:0}
.arrow-up{color:var(--green);font-size:11px}.arrow-down{color:var(--red);font-size:11px}.arrow-flat{color:var(--amber);font-size:11px}

/* ─── UPLOAD ENGINE ─────────────────────────────────────────────── */
.upload-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(135deg,rgba(200,137,58,.12),rgba(40,190,240,.06));border:1px solid var(--gold-a30);border-radius:var(--r20);padding:19px;margin-bottom:15px}
.upload-title{font-family:var(--hd);font-size:21px;font-weight:800;color:var(--gold2);margin-bottom:4px}
.upload-sub{color:var(--t1);line-height:1.65;max-width:900px;font-size:13px}
.upload-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:15px}
.upload-card{display:flex;flex-direction:column;gap:8px;background:var(--s1);border:1px solid var(--b1);border-radius:var(--r16);padding:15px;cursor:pointer;min-height:168px;transition:all .2s}
.upload-card:hover{border-color:var(--gold-a30);transform:translateY(-2px);box-shadow:var(--sh1)}
.upload-card span{width:29px;height:29px;border-radius:9px;background:var(--gold-a05);border:1px solid var(--gold-a30);display:flex;align-items:center;justify-content:center;color:var(--gold2);font-weight:800}
.upload-card strong{font-size:14.5px;color:var(--t0)}
.upload-card em{font-size:12px;line-height:1.6;color:var(--t2);font-style:normal;flex:1}
.upload-card input{font-size:11px;color:var(--t1);max-width:100%}
.upload-status{padding:13px;color:var(--t1);font-size:13px;line-height:1.7}
.rules-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;padding:13px}
.rules-grid>div{background:var(--s2);border:1px solid var(--b0);border-radius:var(--r12);padding:12px;color:var(--t1);font-size:13px;line-height:1.65}
.rules-grid b{color:var(--gold2)}

/* ─── MARGIN / IMPACT ───────────────────────────────────────────── */
.impact-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px;margin-bottom:14px}
.impact-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r14);padding:13px}
.impact-card .lbl{font-family:var(--lb);font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);font-weight:700;margin-bottom:5px}
.impact-card .val{font-family:var(--nm);font-size:21px;font-weight:700;color:var(--t0)}
.impact-card .sub{font-size:11px;color:var(--t2);margin-top:3px}
.impact-card.warn{border-color:rgba(240,128,80,.4)}.impact-card.warn .val{color:var(--amber)}
.impact-card.loss{border-color:rgba(240,72,102,.4)}.impact-card.loss .val{color:var(--red)}

.margin-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:14px}
.margin-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r20);padding:21px 23px;position:relative;overflow:hidden;min-height:104px}
.margin-card::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--cyan)}
.margin-card .m-lbl{font-size:13px;color:var(--t1);font-weight:700;margin-bottom:11px}
.margin-card .m-val{font-family:var(--nm);font-size:26px;font-weight:700;color:var(--t0);letter-spacing:-.03em}
.margin-card .m-sub{font-size:12px;color:var(--t3);margin-top:6px}
.margin-card.m-ok{border-color:rgba(30,200,130,.3)}.margin-card.m-ok::before{background:var(--green)}
.margin-card.m-gold{border-color:rgba(200,137,58,.3)}.margin-card.m-gold::before{background:var(--gold2)}
.margin-card.m-warn{border-color:rgba(240,128,80,.3)}.margin-card.m-warn::before{background:var(--amber)}
.margin-card.m-risk{border-color:rgba(240,72,102,.3)}.margin-card.m-risk::before{background:var(--red)}

.sales-performance-block{margin:14px 0}
.section-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:9px 0 15px;border-top:1px solid var(--b1);padding-top:18px}
.section-title-row h2{font-family:var(--hd);font-size:18px;font-weight:800;margin:0;color:var(--t0)}
.section-title-row p{margin:6px 0 0;color:var(--t2);font-size:13px}

/* ─── PPS CHANGE ────────────────────────────────────────────────── */
.pps-rel{display:flex;align-items:center;gap:19px;padding:17px;color:var(--t1)}
.pps-rel-score{width:94px;height:94px;border-radius:28px;display:flex;align-items:center;justify-content:center;font-family:var(--nm);font-size:29px;font-weight:700;border:1px solid var(--b1);background:var(--s2)}
.pps-rel-score.good{color:var(--green);border-color:rgba(30,200,130,.3)}.pps-rel-score.warn{color:var(--amber);border-color:rgba(240,128,80,.3)}.pps-rel-score.bad{color:var(--red);border-color:rgba(240,72,102,.3)}
.pps-rel p{margin:6px 0 10px;color:var(--t2);font-size:13px;line-height:1.6}

/* ─── HEALTH SCORE ──────────────────────────────────────────────── */
.health-score-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r16);padding:17px;display:flex;align-items:center;gap:21px;margin-bottom:13px}
.hs-ring{position:relative;width:82px;height:82px;flex-shrink:0}
.hs-ring svg{width:82px;height:82px}
.hs-ring circle{fill:none;stroke-width:6;stroke-linecap:round}
.hs-track{stroke:var(--s4)}.hs-fill{transition:stroke-dashoffset .9s var(--ease)}
.hs-label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hs-num{font-family:var(--nm);font-size:19px;font-weight:700;line-height:1}
.hs-lbl{font-family:var(--lb);font-size:8.5px;color:var(--t3);letter-spacing:.07em;text-transform:uppercase}
.hs-info h4{font-size:13.5px;font-weight:700;color:var(--t0);margin-bottom:6px}
.hs-info p{font-size:12px;color:var(--t1);line-height:1.65}
.hs-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* ─── BUYER INSIGHT CARDS ───────────────────────────────────────── */
.buyer-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin-bottom:13px}
.buyer-insight-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r14);padding:15px;transition:transform .2s}
.buyer-insight-card:hover{transform:translateY(-2px)}
.bic-type{font-family:var(--lb);font-size:8.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-bottom:6px}
.bic-name{font-size:13px;font-weight:700;color:var(--t0);margin-bottom:3px}
.bic-val{font-family:var(--nm);font-size:13px;font-weight:600;color:var(--gold2)}
.bic-meta{font-size:10px;color:var(--t2);margin-top:4px}
.bic-badge{display:inline-block;padding:2px 7px;border-radius:8px;font-size:9px;font-weight:700;margin-top:6px;font-family:var(--lb)}
.bic-top{background:rgba(200,137,58,.15);color:var(--gold2);border:1px solid rgba(200,137,58,.25)}.bic-growth{background:rgba(30,200,130,.12);color:var(--green);border:1px solid rgba(30,200,130,.2)}.bic-risk{background:rgba(240,72,102,.12);color:var(--red);border:1px solid rgba(240,72,102,.2)}.bic-contrib{background:rgba(40,190,240,.12);color:var(--cyan);border:1px solid rgba(40,190,240,.2)}

/* ─── BOARDROOM TV ──────────────────────────────────────────────── */
.boardroom-tv{position:fixed;inset:0;z-index:1000;background:var(--bg);display:flex;flex-direction:column;padding:16px;gap:11px;overflow:hidden;background-image:radial-gradient(ellipse 70% 50% at 80% 10%,rgba(200,137,58,.06),transparent 60%),radial-gradient(ellipse 50% 40% at 20% 90%,rgba(40,190,240,.04),transparent 50%)}
.boardroom-tv.hidden{display:none}
.brtv-header{display:flex;align-items:center;justify-content:space-between;background:var(--s1);border-radius:var(--r16);padding:14px 20px;border:1px solid rgba(200,137,58,.18);flex-shrink:0;box-shadow:0 0 28px rgba(200,137,58,.12)}
.brtv-logo{width:46px;height:46px;border-radius:13px;background:var(--s3);padding:5px;object-fit:contain;border:1px solid rgba(200,137,58,.2)}
.brtv-brand{font-family:var(--hd);font-size:21px;font-weight:800;color:var(--gold3)}
.brtv-sub{font-size:10px;color:var(--t3);font-family:var(--nm);margin-top:2px}
.brtv-clock{font-family:var(--nm);font-size:36px;font-weight:700;color:var(--t0);text-align:right;letter-spacing:-.02em}
.brtv-date{font-size:11px;color:var(--t2);font-family:var(--nm);text-align:right}
.brtv-close{background:var(--s3);border:1px solid var(--b1);color:var(--t2);width:36px;height:36px;border-radius:11px;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;margin-left:13px}
.brtv-close:hover{color:var(--gold2);border-color:var(--gold-a30)}

/* Boardroom Filter Bar */
.brtv-filter{display:flex;align-items:center;gap:12px;background:var(--s1);border-radius:var(--r12);padding:10px 16px;border:1px solid var(--b1);flex-shrink:0;flex-wrap:wrap}
.brtv-fgroup{display:flex;align-items:center;gap:7px}
.brtv-flbl{font-family:var(--lb);font-size:9px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--t3);white-space:nowrap}
.brtv-fsel{height:30px;background:rgba(255,255,255,.06);border:1px solid var(--b1);color:var(--t0);border-radius:var(--r8);padding:0 9px;font-size:12px;font-family:var(--ui);outline:none;min-width:120px;transition:border-color .18s}
.brtv-fsel:focus,.brtv-fsel:hover{border-color:var(--gold-a30)}
.brtv-fsel option{background:var(--s2);color:var(--t0)}
.brtv-finfo{font-family:var(--nm);font-size:10px;color:var(--gold2);margin-left:auto;white-space:nowrap}
.brtv-freset{background:none;border:1px solid var(--b1);color:var(--t3);border-radius:999px;padding:4px 11px;font-size:11px;font-weight:600;transition:all .2s}
.brtv-freset:hover{border-color:rgba(240,72,102,.4);color:var(--red)}

.brtv-ach-row{display:grid;grid-template-columns:1fr 1fr;gap:11px;flex-shrink:0}
.brtv-ach{background:var(--s1);border-radius:var(--r14);padding:14px 18px}
.brtv-ach.fin{border-top:4px solid var(--gold)}.brtv-ach.pln{border-top:4px solid var(--cyan)}
.brtv-ach-title{font-family:var(--hd);font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:10px}
.brtv-ach-title.fin{color:var(--gold2)}.brtv-ach-title.pln{color:var(--cyan)}
.brtv-ach-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
.brtv-metric-lbl{font-family:var(--lb);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--t3);margin-bottom:3px}
.brtv-metric-val{font-family:var(--nm);font-size:20px;font-weight:700;letter-spacing:-.01em}

.brtv-main{flex:1;display:grid;grid-template-columns:2fr 1fr;gap:11px;min-height:0}
.brtv-teams{background:var(--s1);border-radius:var(--r16);padding:15px;border:1px solid var(--b1)}
.brtv-right{display:flex;flex-direction:column;gap:11px;min-height:0;overflow:hidden}
.brtv-mini{background:var(--s1);border-radius:var(--r14);padding:13px;border:1px solid var(--b1);flex:1;min-height:0;overflow:hidden}
.brtv-sec-title{font-family:var(--lb);font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);margin-bottom:11px}
.brtv-team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;height:calc(100% - 28px)}
.brtv-team-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:var(--s2);border-radius:var(--r12);padding:12px 9px;border-top:4px solid transparent}
.brtv-t-name{font-family:var(--lb);font-size:10px;color:var(--t2);text-transform:uppercase;letter-spacing:.1em}
.brtv-t-val{font-family:var(--nm);font-size:26px;font-weight:700;letter-spacing:-.02em}
.brtv-t-qty{font-size:11px;color:var(--t2)}
.brtv-t-ach{font-size:14px;font-weight:700}
.brtv-t-bar{width:100%;height:4px;background:var(--s4);border-radius:2px;overflow:hidden}
.brtv-t-bar-fill{height:100%;border-radius:2px;transition:width .8s}
.brtv-buyer-item{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--b0);font-size:12px}
.brtv-progress-row{display:flex;align-items:center;gap:10px;margin-top:11px}
.brtv-prog-out{flex:1;height:8px;background:var(--s4);border-radius:4px;overflow:hidden}
.brtv-prog-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--gold3),var(--cyan));border-radius:4px;transition:width .8s}
.brtv-ai{background:linear-gradient(135deg,rgba(200,137,58,.1),rgba(40,190,240,.04));border:1px solid rgba(200,137,58,.2);border-radius:var(--r14);padding:13px;font-size:12.5px;color:var(--t1);line-height:1.7}
.brtv-foot{display:flex;justify-content:space-between;font-size:9px;color:var(--t4);font-family:var(--nm);flex-shrink:0;padding-top:3px}

/* ─── TOAST ─────────────────────────────────────────────────────── */
#toast{position:fixed;bottom:18px;right:18px;z-index:99999;background:var(--s2);border:1px solid var(--b2);color:var(--t0);border-radius:var(--r12);padding:10px 17px;font-size:12.5px;opacity:0;transform:translateY(8px);transition:all .26s var(--ease);pointer-events:none;box-shadow:var(--sh2);max-width:320px}
#toast.show{opacity:1;transform:none}
#toast.ok{border-color:rgba(30,200,130,.4);color:var(--green)}
#toast.err{border-color:rgba(240,72,102,.4);color:var(--red)}

/* ─── SCROLLBAR ─────────────────────────────────────────────────── */
::-webkit-scrollbar{width:3px;height:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--s6);border-radius:2px}::-webkit-scrollbar-thumb:hover{background:var(--gold-a30)}

/* ─── PRINT ─────────────────────────────────────────────────────── */
@media print{#sidebar,#topbar,#filterbar,.sdl-filter,#boardroomTV,#toast{display:none!important}#main-wrap,#content{overflow:visible}.page.active{display:block!important}body{background:#fff;color:#000}.card,.hero-ach,.kpi{border:1px solid #ddd;background:#fff}.kpi-val,.ach-pct-hero,.tc-val{color:#000!important}canvas{max-width:100%}}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   ═══════════════════════════════════════════════════════════════════ */

/* Tablet-large */
@media(max-width:1280px){
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .three-col{grid-template-columns:1fr 1fr}
  .margin-card-grid{grid-template-columns:repeat(2,1fr)}
  .impact-grid{grid-template-columns:repeat(2,1fr)}
  .rules-grid{grid-template-columns:1fr 1fr}
  .exec-hero{grid-template-columns:1fr 1fr}
  .hero-trend-card{grid-column:1/3;grid-row:auto}
  .hero-ach.finance{grid-column:1/2;grid-row:auto}
  .hero-ach.planning{grid-column:2/3;grid-row:auto}
  .hero-status{grid-column:1/3;grid-row:auto}
  .hero-kpi-row{grid-column:1/3;grid-template-columns:repeat(3,1fr)}
  .brtv-team-grid{grid-template-columns:repeat(2,1fr)}
  .brtv-ach-grid{grid-template-columns:repeat(2,1fr)}
  .ai-v2-grid{grid-template-columns:repeat(2,1fr)}
  .buyer-cards{grid-template-columns:repeat(2,1fr)}
}

/* Tablet */
@media(max-width:1024px){
  :root{--nav-w:240px}
  .two-col{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
  .sf-pills-scroll{max-width:240px}
  .sf-search{width:160px}
}

/* Mobile large */
@media(max-width:900px){
  #content{padding:12px 13px!important}
  .team-grid{grid-template-columns:1fr 1fr!important}
  .kpi-row{grid-template-columns:repeat(2,1fr)!important}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sdl-filter{padding:7px 12px 6px;gap:5px}
  .sf-lbl{display:none}
  .sf-divider{display:none}
  .sf-section{gap:4px}
  .sf-months{flex:1;overflow:hidden}
  .sf-pills-scroll{max-width:none;flex:1}
  .sf-search{width:140px}
  .sf-search:focus{width:160px}
}

/* Mobile */
@media(max-width:768px){
  #sidebar{position:fixed;z-index:200;left:-100%;transition:left .3s var(--ease);width:var(--nav-w)!important}
  #sidebar.mobile-open{left:0}
  .tb-menu{display:block}
  #content{padding:10px!important}
  .team-grid{grid-template-columns:1fr 1fr!important}
  .kpi-row{grid-template-columns:repeat(2,1fr)!important}
  .two-col,.three-col{grid-template-columns:1fr}
  .exec-hero{grid-template-columns:1fr}
  .hero-ach.finance,.hero-ach.planning,.hero-status,.hero-kpi-row{grid-column:1}
  .hero-kpi-row{grid-template-columns:repeat(2,1fr)}
  .buyer-cards{grid-template-columns:repeat(2,1fr)}
  .hist-hero{grid-template-columns:repeat(2,1fr)}
  .ai-v2-grid{grid-template-columns:1fr}
  .upload-grid{grid-template-columns:repeat(2,1fr)}
  .rules-grid{grid-template-columns:1fr}
  .impact-grid{grid-template-columns:repeat(2,1fr)}
  .hero-trend-card{min-height:250px;padding:14px}
  .trend-mini-row{grid-template-columns:repeat(2,1fr)}
  .trend-canvas-wrap{height:145px}
  .ach-pct-hero{font-size:42px!important}
  .brtv-team-grid{grid-template-columns:repeat(2,1fr)}
  .pps-rel{flex-direction:column;align-items:flex-start}
  .section-title-row{align-items:flex-start;flex-direction:column}
  .margin-card-grid{grid-template-columns:1fr;gap:10px}
  .margin-card{padding:15px}.margin-card .m-val{font-size:22px}
  .brtv-main{grid-template-columns:1fr;grid-template-rows:auto auto}
  .brtv-right{flex-direction:row;flex-wrap:wrap}
  .brtv-mini{flex:1;min-width:140px}
  .brtv-filter{gap:8px}
  .tb-right .tb-btn:not(.tb-btn-gold){display:none}
  .tb-live{min-width:88px;padding-left:8px}
  .tb-clock{font-size:15px}
  .tb-date{font-size:9px}
  .sdl-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sdl-filter::-webkit-scrollbar{display:none}
  .sf-section{flex-shrink:0}
  .sf-more-row{flex-wrap:wrap}
}

/* Small mobile */
@media(max-width:520px){
  :root{--top-h:54px}
  .tb-page{font-size:14px!important}
  .tb-meta{display:none}
  .tb-live{display:none}
  .tb-right{gap:5px}
  .tb-btn{padding:5px 9px;font-size:10.5px!important}
  .team-grid{grid-template-columns:1fr!important}
  .buyer-cards{grid-template-columns:1fr!important}
  .hist-hero{grid-template-columns:1fr 1fr}
  .upload-grid{grid-template-columns:1fr}
  #content{padding:8px!important}
  .card-hd{padding:10px 13px}
  table.tbl{font-size:12px!important}
  table.tbl th{font-size:8.5px!important;padding:7px 8px}
  table.tbl td{padding:7px 8px;font-size:12px!important}
  .ach-pct-hero{font-size:36px!important}
  .brtv-filter{gap:6px}
  .brtv-fsel{min-width:100px;font-size:11px}
  .brtv-ach-row{grid-template-columns:1fr}
  .kpi-row{grid-template-columns:1fr 1fr!important}
}

/* Font stack — global override */
body,button,select,input,table{font-family:var(--ui)!important}
.ng,.sf-lbl,.brtv-flbl,.brtv-sec-title,.bic-type,.kpi-lbl,.tc-name,.tm-stat-lbl,.card-badge,.ntag,.trend-kicker,.ach-metric2-lbl,.status-title,.fcst-box-lbl,.hs-lbl,.mbadge,.tag,.ai-point-lbl,.ai-badge,.ai-v2-badge{font-family:var(--lb)!important}
.tm,.tg,.kpi-val,.tc-val,.ach-pct,.ach-pct-hero,.tm-stat-val,.fcst-box-val,.hs-num,.tb-clock,.sb-clock,.tb-meta,.brtv-clock,.brtv-metric-val,.brtv-t-val,.brtv-date,.brtv-sub,.brtv-foot,.yr-val,.ach-metric2-val,.brtv-buyer-item span:last-child{font-family:var(--nm)!important}
.ld-title,.tb-page,.trend-title,.upload-title,.es-title,.section-title-row h2,.brtv-brand,.sb-name{font-family:var(--hd)!important;font-weight:800!important}
.nbtn{font-size:13px!important}
.tb-page{font-size:16px!important}
.card-title{font-size:13.5px!important;font-weight:700!important}
.kpi-val{font-size:22px!important}
.tc-val{font-size:20px!important}
.ach-pct-hero{font-size:50px!important;line-height:1!important}
table.tbl{font-size:13px!important}
table.tbl th{font-size:9px!important}

/* V37.1 Production Filter + Goal Upgrade */
.sf-presets .sf-pill{font-size:10.5px}
.sf-goals .sf-goal.sf-active{background:rgba(34,212,142,.12);border-color:rgba(34,212,142,.35);color:var(--green)}
.sf-presets{max-width:100%;}
@media(max-width:980px){.sf-presets,.sf-goals{width:100%;overflow-x:auto}.sf-presets .sf-pills,.sf-goals{flex-wrap:nowrap}}


/* V37.2 — Director Mobile + Advanced Multi-Select Patch */
.sf-presets{display:none!important}
.sf-multi{min-width:220px;max-width:280px;min-height:92px;padding:8px;border-radius:14px;background:rgba(255,255,255,.04)}
.sf-multi option{padding:7px 9px;border-radius:8px;margin:2px 0}
.sf-multi option:checked{font-weight:800}
.sf-section .sf-lbl{white-space:nowrap}
.sf-pills{gap:6px}.sf-pill{touch-action:manipulation;user-select:none}
#filterbar.sdl-filter{align-items:flex-start}
.sf-more-row{align-items:flex-start}

@media(max-width:1180px){
  .two-col,.exec-grid,.team-grid,.buyer-grid,.profit-grid,.quality-grid,.archive-grid,.dataq-grid{grid-template-columns:1fr!important}
  .exec-hero{grid-template-columns:1fr!important;gap:12px!important}
  .card,.kpi-card,.glass-card{min-width:0!important}
}
@media(max-width:900px){
  /* ── Unlock the scroll chain ── */
  #app{display:block!important;min-width:0!important;height:auto!important;overflow:visible!important}
  #main-wrap{width:100%!important;margin-left:0!important;min-width:0!important;overflow:visible!important;height:auto!important;display:block!important}
  #content{overflow:visible!important;height:auto!important;padding:10px!important;padding-bottom:80px!important}
  .page{padding:0!important}
  .card{padding:12px!important;border-radius:16px!important;margin-bottom:10px!important}

  /* ── Topbar: sticky at top ── */
  #topbar{position:sticky;top:0;z-index:80;display:grid!important;grid-template-columns:auto 34px 1fr auto;gap:8px;padding:8px 10px!important;min-height:auto!important}
  .tb-logo{width:30px!important;height:30px!important}.tb-page{font-size:14px!important;line-height:1.15}.tb-meta{font-size:10px!important}
  .tb-live{grid-column:1/-1;display:flex!important;justify-content:space-between!important;padding:7px 10px;border-radius:12px;background:rgba(255,255,255,.04)}
  .tb-right{grid-column:1/-1;display:flex!important;gap:6px;overflow-x:auto;padding-bottom:2px}.tb-btn{min-height:38px;white-space:nowrap}

  /* ── Old filter bar (if still used) ── */
  #filterbar.sdl-filter{position:sticky;top:92px;z-index:70;display:flex!important;flex-direction:column!important;gap:10px!important;padding:10px!important;border-radius:0 0 18px 18px!important;max-height:58vh;overflow:auto;-webkit-overflow-scrolling:touch}
  .sf-divider{display:none!important}.sf-section{width:100%!important;display:block!important}.sf-lbl{display:block;margin-bottom:6px!important}
  .sf-pills,.sf-pills-scroll{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important;gap:7px!important;padding-bottom:5px!important;-webkit-overflow-scrolling:touch}
  .sf-pill{min-height:38px!important;padding:8px 13px!important;font-size:12px!important;white-space:nowrap!important;flex:0 0 auto!important}
  .sf-right{width:100%!important;display:grid!important;grid-template-columns:1fr auto auto;gap:8px!important}.sf-search-wrap{min-width:0!important;width:100%!important}.sf-search{height:40px!important}
  .sf-more-row{width:100%!important;display:grid!important;grid-template-columns:1fr!important;gap:10px!important}.sf-more-row.hidden{display:none!important}
  .sf-select,.sf-multi{width:100%!important;max-width:none!important;min-height:112px!important}
  .sf-chips{display:flex!important;overflow-x:auto!important;gap:6px!important}.filter-chip{flex:0 0 auto!important}

  /* ── Grids ── */
  .kpi-row,.kpi-grid,.mini-kpi-grid{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  canvas{max-width:100%!important}
  .tbl-wrap{overflow-x:auto!important;-webkit-overflow-scrolling:touch;border-radius:14px}.tbl{min-width:760px!important;font-size:12px!important}.tbl th,.tbl td{padding:8px!important}
  .upload-grid,.upload-cards{grid-template-columns:1fr!important}.upload-card{min-height:120px}.upload-card button,.upload-btn{min-height:44px!important;width:100%!important}

  /* ── Sidebar: slide-over ── */
  #sidebar{position:fixed!important;left:0;top:0;bottom:0;transform:translateX(-105%);transition:.25s ease;z-index:120;width:280px!important}
  .mobile-open#sidebar,#sidebar.mobile-open{transform:translateX(0)!important}
  .sb-overlay.active{display:block!important;position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:110}

  /* ── Boardroom ── */
  .boardroom,.brtv,.boardroom-tv{overflow:auto!important}.brtv-slide{padding:14px!important}.brtv-grid{grid-template-columns:1fr!important}
}
@media(max-width:520px){
  #topbar{grid-template-columns:auto 28px 1fr}.tb-btn{font-size:11px!important;padding:8px 10px!important}.tb-clock{font-size:16px!important}.tb-date{font-size:11px!important}
  #filterbar.sdl-filter{top:88px;max-height:62vh}.sf-pill{font-size:11px!important;padding:8px 11px!important}
  .card-title{font-size:13px!important}.card-badge{font-size:10px!important}.tbl{min-width:680px!important}
}

/* ── Mobile topbar clean-up (≤600px): single title row + button strip ── */
@media(max-width:600px){
  /* Two-column topbar: [hamburger] [info+clock flex-row] */
  #topbar{grid-template-columns:40px 1fr!important;gap:0 6px!important;padding:6px 10px 4px!important;align-items:center}
  .tb-logo{display:none!important}
  .tb-meta{display:none!important}
  /* tb-info: title left, clock right, single line */
  .tb-info{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:6px!important;overflow:hidden;min-width:0}
  .tb-page{font-size:13px!important;font-weight:700!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0;line-height:1.2}
  /* Clock block: compact column on right */
  .tb-live{display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:0!important;padding:0!important;background:none!important;border-radius:0!important;flex-shrink:0}
  .tb-clock{font-size:13px!important;line-height:1.2}
  .tb-date{font-size:10px!important;color:var(--t3);line-height:1.2}
  /* Button strip: full width, scrollable, compact */
  .tb-right{grid-column:1/-1!important;display:flex!important;gap:5px!important;padding:4px 0 2px!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tb-right::-webkit-scrollbar{display:none}
  .tb-btn{font-size:11px!important;padding:7px 10px!important;min-height:34px!important;white-space:nowrap!important}
  /* Hide non-essential buttons: theme toggle (keep all else) */
  .tb-btn-theme{display:none!important}
  /* Filters always first */
  .tb-filter-toggle{order:-1!important}
}
/* Ultra-small (≤400px): show only Filters + Boardroom */
@media(max-width:400px){
  .tb-right .tb-btn:not(.tb-filter-toggle):not(.tb-btn-gold){display:none!important}
  .tb-btn-gold{padding:7px 8px!important;font-size:11px!important}
}


/* ═══════════════════════════════════════════════════════════════════
   V37.3 Excel-Style Filters + Dark/Light Theme
   ═══════════════════════════════════════════════════════════════════ */
:root[data-theme="light"]{
  --bg:#f4f7fb;--s1:#ffffff;--s2:#ffffff;--s3:#eef4fb;--s4:#e4edf7;--s5:#d8e6f3;--s6:#c7d9eb;
  --g1:rgba(8,26,45,.03);--g2:rgba(8,26,45,.06);--g3:rgba(8,26,45,.10);
  --b0:rgba(8,26,45,.06);--b1:rgba(8,26,45,.10);--b2:rgba(8,26,45,.16);--b3:rgba(8,26,45,.24);
  --t0:#10253a;--t1:#31506b;--t2:#5c7891;--t3:#8ba0b3;--t4:#b8c6d4;
  --sh0:0 1px 4px rgba(30,50,70,.10);--sh1:0 4px 18px rgba(30,50,70,.12);--sh2:0 8px 36px rgba(30,50,70,.14);--sh3:0 20px 60px rgba(30,50,70,.16);
}
:root[data-theme="light"] body{background:var(--bg);color:var(--t0)}
:root[data-theme="light"] #sidebar,:root[data-theme="light"] #topbar,:root[data-theme="light"] .excel-filterbar{background:rgba(255,255,255,.92)!important;border-color:var(--b1)!important}
:root[data-theme="light"] .card,:root[data-theme="light"] .hero-ach,:root[data-theme="light"] .status-panel,:root[data-theme="light"] .kpi,:root[data-theme="light"] .tbl-wrap{background:#fff!important;border-color:var(--b1)!important;color:var(--t0)!important}
:root[data-theme="light"] canvas{filter:none!important}
:root[data-theme="light"] .tb-btn,:root[data-theme="light"] .xf-btn,:root[data-theme="light"] .xf-goal,:root[data-theme="light"] .xf-reset{background:#fff!important;color:var(--t0)!important;border-color:var(--b1)!important}
.theme-toggle{min-width:82px}
.excel-filterbar{position:sticky;top:var(--top-h);z-index:85;background:rgba(7,16,29,.96);backdrop-filter:blur(16px);border-bottom:1px solid var(--b1);padding:10px 20px;box-shadow:var(--sh0)}
.xf-row{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:wrap}.xf-label,.xf-small{font-family:var(--lb);font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--t2);white-space:nowrap}.xf-group{display:flex;align-items:center;gap:6px}.xf-goal{height:30px;padding:0 12px;border:1px solid var(--b1);border-radius:999px;background:var(--g1);color:var(--t1);font-weight:800;cursor:pointer}.xf-goal.active{background:rgba(34,212,142,.14)!important;border-color:rgba(34,212,142,.38)!important;color:var(--green)!important}.xf-dd{position:relative}.xf-btn{height:34px;min-width:124px;border:1px solid var(--b1);border-radius:12px;background:var(--g1);color:var(--t0);display:flex;align-items:center;gap:8px;justify-content:space-between;padding:0 10px;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}.xf-btn span{font-family:var(--lb);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--t2)}.xf-btn b{font-size:12px;font-weight:800;max-width:82px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.xf-btn i{font-style:normal;color:var(--gold2)}.xf-wide .xf-btn{min-width:160px}.xf-menu{display:none;position:absolute;top:40px;left:0;width:260px;max-width:calc(100vw - 20px);background:var(--s2);border:1px solid var(--b2);border-radius:16px;box-shadow:var(--sh2);padding:10px;z-index:500}.xf-menu.open{display:block}.xf-search input{width:100%;height:34px;border:1px solid var(--b1);border-radius:10px;background:var(--g1);color:var(--t0);padding:0 10px;outline:0}.xf-actions{display:flex;gap:6px;margin:8px 0}.xf-actions button{flex:1;height:28px;border:1px solid var(--b1);border-radius:8px;background:var(--g1);color:var(--t1);font-weight:700;cursor:pointer}.xf-list{max-height:240px;overflow:auto;display:grid;gap:4px;padding-right:3px}.xf-check{display:flex;align-items:center;gap:8px;min-height:30px;border-radius:8px;padding:4px 6px;cursor:pointer;color:var(--t1);font-weight:700}.xf-check:hover{background:var(--g2);color:var(--t0)}.xf-check input{accent-color:var(--gold);width:15px;height:15px}.xf-empty{font-size:12px;color:var(--t3);padding:10px}.xf-search-global{height:36px;min-width:240px;max-width:380px;flex:1;display:flex;align-items:center;gap:8px;border:1px solid var(--b1);border-radius:14px;background:var(--g1);padding:0 10px}.xf-search-global span{color:var(--t3)}.xf-search-global input{border:0;outline:0;background:transparent;color:var(--t0);width:100%;font:inherit}.xf-reset{height:34px;border:1px solid var(--b1);border-radius:12px;background:var(--g1);color:var(--t1);padding:0 12px;font-weight:800;cursor:pointer}.xf-reset:hover{border-color:rgba(240,72,102,.38);color:var(--red)}.xf-summary{margin-top:8px;font-family:var(--nm);font-size:11px;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.native-selects.hidden{display:none!important}
/* Hide old chip filter controls if any remain */
.sdl-filter{display:none!important}
@media(max-width:980px){.excel-filterbar{top:var(--top-h);padding:10px 12px;max-height:52vh;overflow:auto}.xf-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}.xf-label{grid-column:1/-1}.xf-group.goal-group{grid-column:1/-1;overflow-x:auto;padding-bottom:2px}.xf-dd,.xf-btn,.xf-search-global,.xf-reset{width:100%;min-width:0}.xf-wide .xf-btn{min-width:0}.xf-menu{position:fixed;left:12px!important;right:12px!important;top:132px;width:auto;max-width:none;max-height:60vh;overflow:auto}.xf-list{max-height:42vh}.xf-search-global{grid-column:1/-1;max-width:none}.xf-reset{grid-column:1/-1}.xf-summary{white-space:normal;line-height:1.35}}
@media(max-width:560px){.xf-row{grid-template-columns:1fr}.xf-menu{top:126px}.xf-goal{padding:0 10px}.theme-toggle{display:inline-flex!important}.tb-right{gap:5px}.tb-btn{padding:0 9px!important}}

/* ─────────────────────────────────────────────
   V37.4 Premium Performance Patch
   ───────────────────────────────────────────── */
.target-pop{display:none;position:fixed;right:190px;top:62px;z-index:130;background:rgba(8,17,31,.98);border:1px solid var(--b1);border-radius:16px;padding:12px;box-shadow:var(--sh1);min-width:220px;gap:8px;flex-wrap:wrap}
.target-pop.open{display:flex}
.target-pop-title{width:100%;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--gold2);text-transform:uppercase;margin-bottom:2px}.target-toggle b{font-family:'JetBrains Mono',monospace;color:var(--gold2)}
.xf-hint{color:var(--gold2)!important;background:rgba(212,151,62,.08);border-top:1px solid var(--b1)}
.tb-filter-toggle{display:none!important}.xf-dd[data-filter="parent"],.xf-dd[data-filter="article"]{min-width:150px}.xf-dd[data-filter="article"] .xf-menu{min-width:300px}
@media(max-width:980px){
  .tb-filter-toggle{display:inline-flex!important}
  .excel-filterbar{display:none;position:fixed!important;left:10px;right:10px;top:76px;z-index:140;border:1px solid var(--b1);border-radius:18px;max-height:calc(100vh - 92px);overflow:auto;padding:12px!important;box-shadow:0 22px 80px rgba(0,0,0,.45)}
  .excel-filterbar.mobile-open{display:block}
  .xf-row{display:grid!important;grid-template-columns:1fr 1fr!important;gap:9px!important}.xf-label{grid-column:1/-1}.xf-dd,.xf-search-global,.xf-reset{width:100%!important;min-width:0!important}.xf-btn{min-width:0!important;width:100%!important;height:42px!important}.xf-search-global{grid-column:1/-1}.xf-reset{grid-column:1/-1;height:42px}.xf-summary{font-size:11px;line-height:1.45;white-space:normal!important}
  .xf-menu{position:fixed!important;left:16px!important;right:16px!important;top:132px!important;width:auto!important;min-width:0!important;max-height:54vh!important;overflow:auto!important}.xf-list{max-height:40vh!important}.target-pop{right:10px;left:10px;top:68px;min-width:0}.tb-right{gap:5px;overflow-x:auto;max-width:65vw}.tb-btn{white-space:nowrap}.tb-btn:not(.tb-filter-toggle):not(.target-toggle):not(.theme-toggle):not(.tb-btn-gold){display:none!important}
}
@media(max-width:560px){
  #topbar{padding:8px 10px!important}.tb-info{min-width:0}.tb-page{font-size:13px!important}.tb-meta{font-size:10px!important}.tb-logo{width:28px;height:28px}.tb-live{display:none!important}.tb-right{max-width:72vw}.target-toggle{font-size:11px!important;padding:0 8px!important}.theme-toggle{font-size:0!important;min-width:38px!important}.theme-toggle::after{content:'☾';font-size:14px}.xf-row{grid-template-columns:1fr!important}.excel-filterbar{top:58px!important}.xf-menu{top:116px!important}.target-pop{top:56px!important}.card,.hero-ach,.status-panel,.kpi{border-radius:16px!important}.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.tbl{min-width:720px}.brtv-filter{flex-wrap:wrap}.brtv-card{min-width:0!important}
  .tb-btn-gold{font-size:0!important;min-width:34px!important;padding:5px 6px!important}.tb-btn-gold::before{content:'▣';font-size:14px}
}
:root[data-theme="light"] .target-pop{background:#fff!important;border-color:var(--b1)!important;color:var(--t0)!important}

/* ═══════════════════════════════════════════════════════════════════
   V37.5 Smart Filter Bar — Page-Aware · Premium · Mobile-First
   ═══════════════════════════════════════════════════════════════════ */

/* ── Filter bar base ── */
.excel-filterbar {
  position: sticky;
  top: var(--top-h);
  z-index: 85;
  background: rgba(6,14,26,.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--b1);
  padding: 10px 18px 8px;
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
  transition: box-shadow .2s;
}

/* ── Rows ── */
.xf-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.xf-primary-row { gap: 8px; }
.xf-secondary-row { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--b0); }
/* Secondary row hidden on exec by default — JS toggles .xf-secondary-hidden */
.xf-secondary-row.xf-hidden { display: none !important; }

/* ── Label ── */
.xf-label {
  font-family: var(--lb);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t3);
  white-space: nowrap;
  padding-right: 2px;
}
.xf-label-more { color: var(--gold); opacity: .7; }

/* ── Primary filter buttons ── */
.xf-dd { position: relative; flex-shrink: 0; }
.xf-primary .xf-btn { min-width: 130px; }

.xf-btn {
  height: 38px;
  min-width: 120px;
  border: 1px solid var(--b2);
  border-radius: 14px;
  background: var(--g2);
  color: var(--t0);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  cursor: pointer;
  font-family: var(--ui);
  transition: border-color .15s, background .15s, box-shadow .15s;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  position: relative;
  overflow: hidden;
}
.xf-btn:hover {
  border-color: var(--gold-a30);
  background: var(--g3);
  box-shadow: 0 0 0 2px var(--gold-a10), inset 0 1px 0 rgba(255,255,255,.06);
}
.xf-btn:active { transform: scale(.98); }
.xf-btn-icon { font-size: 14px; flex-shrink: 0; }
.xf-btn-lbl {
  font-family: var(--lb);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--t2);
  flex-shrink: 0;
}
.xf-btn b {
  font-size: 12px;
  font-weight: 800;
  color: var(--t0);
  flex: 1;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
}
.xf-caret { font-style: normal; font-size: 11px; color: var(--gold2); flex-shrink: 0; transition: transform .2s; }
/* Old span fallback */
.xf-btn > span:not(.xf-btn-icon):not(.xf-btn-lbl) {
  font-family: var(--lb); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--t2); flex-shrink: 0;
}
.xf-btn > i { font-style: normal; color: var(--gold2); font-size: 11px; flex-shrink: 0; }

/* Active state when a filter has selections */
.xf-dd.has-value .xf-btn {
  border-color: var(--gold-a50);
  background: linear-gradient(135deg, rgba(200,137,58,.12), rgba(200,137,58,.06));
  box-shadow: 0 0 0 1px var(--gold-a18), inset 0 1px 0 rgba(255,255,255,.05);
}
.xf-dd.has-value .xf-btn b { color: var(--gold2); }

/* Goal button special */
.xf-goal-btn { border-color: rgba(34,212,142,.28) !important; background: rgba(34,212,142,.06) !important; }
.xf-goal-btn b { color: var(--green) !important; }

/* ── Dropdown menus ── */
.xf-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 260px;
  max-width: calc(100vw - 24px);
  background: var(--s1);
  border: 1px solid var(--b2);
  border-radius: 18px;
  box-shadow: 0 16px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.3);
  padding: 12px;
  z-index: 600;
  animation: xfSlideIn .15s var(--ease);
}
@keyframes xfSlideIn { from { opacity:0; transform:translateY(-6px) scale(.97); } to { opacity:1; transform:none; } }
.xf-menu.open { display: block; }
.xf-menu-wide { width: 300px; }

.xf-menu-header {
  font-family: var(--lb);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold2);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--b1);
}

/* Search input inside menu */
.xf-search input {
  width: 100%;
  height: 36px;
  border: 1px solid var(--b1);
  border-radius: 10px;
  background: var(--g1);
  color: var(--t0);
  padding: 0 12px;
  outline: 0;
  font: inherit;
  font-size: 13px;
  transition: border-color .15s;
}
.xf-search input:focus { border-color: var(--gold-a30); background: var(--g2); }
.xf-search { margin-bottom: 8px; }

/* Actions (All / Clear) */
.xf-actions { display: flex; gap: 6px; margin-bottom: 8px; }
.xf-actions button {
  flex: 1;
  height: 30px;
  border: 1px solid var(--b1);
  border-radius: 8px;
  background: var(--g1);
  color: var(--t1);
  font-family: var(--lb);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .06em;
  transition: background .12s, color .12s;
}
.xf-actions button:hover { background: var(--g3); color: var(--t0); }

/* Quick month buttons */
.xf-quick-months { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.xf-quick-months button {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--b1);
  border-radius: 999px;
  background: transparent;
  color: var(--t2);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all .12s;
  white-space: nowrap;
}
.xf-quick-months button:hover { border-color: var(--gold-a30); color: var(--gold2); background: var(--gold-a05); }

/* Checkbox list */
.xf-list {
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  display: grid;
  gap: 2px;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--b2) transparent;
}
.xf-list::-webkit-scrollbar { width: 4px; }
.xf-list::-webkit-scrollbar-track { background: transparent; }
.xf-list::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 99px; }

.xf-list-team { max-height: 160px; }

.xf-check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  border-radius: 10px;
  padding: 5px 8px;
  cursor: pointer;
  color: var(--t1);
  font-size: 13px;
  font-weight: 600;
  transition: background .1s, color .1s;
  -webkit-tap-highlight-color: transparent;
}
.xf-check:hover { background: var(--g2); color: var(--t0); }
.xf-check input {
  accent-color: var(--gold);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.xf-check span { line-height: 1.3; word-break: break-word; }
.xf-check:has(input:checked) { color: var(--t0); background: rgba(200,137,58,.08); }

.xf-empty { font-size: 12px; color: var(--t3); padding: 12px 6px; text-align: center; }
.xf-hint { font-size: 11px; color: var(--gold2) !important; background: rgba(200,137,58,.07); border-top: 1px solid var(--b1); border-radius: 0 0 8px 8px; padding: 8px; margin-top: 4px; }

/* ── Goal dropdown ── */
.xf-goal-menu { width: 220px; }
.xf-goal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; }
.xf-goal-opt {
  height: 44px;
  border: 1px solid var(--b1);
  border-radius: 12px;
  background: var(--g1);
  color: var(--t1);
  font-family: var(--nm);
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all .15s;
}
.xf-goal-opt:hover { border-color: var(--gold-a30); color: var(--gold2); background: var(--gold-a05); }
.xf-goal-opt.active { background: rgba(34,212,142,.12) !important; border-color: rgba(34,212,142,.4) !important; color: var(--green) !important; }
.xf-goal-custom { grid-column: 1 / -1; height: 36px; font-size: 13px; }

/* ── Summary + reset inline ── */
.xf-primary-right { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.xf-summary-inline {
  flex: 1;
  font-family: var(--nm);
  font-size: 11px;
  color: var(--t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.xf-reset {
  height: 36px;
  border: 1px solid var(--b1);
  border-radius: 12px;
  background: var(--g1);
  color: var(--t2);
  padding: 0 14px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, color .15s;
  flex-shrink: 0;
}
.xf-reset:hover { border-color: rgba(240,72,102,.4); color: var(--red); }

/* ── Secondary row filters ── */
.xf-wide .xf-btn { min-width: 140px; }
.xf-search-global {
  height: 36px;
  min-width: 200px;
  max-width: 360px;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--b1);
  border-radius: 12px;
  background: var(--g1);
  padding: 0 12px;
  transition: border-color .15s;
}
.xf-search-global:focus-within { border-color: var(--gold-a30); }
.xf-search-global span { color: var(--t3); font-size: 15px; }
.xf-search-global input { border: 0; outline: 0; background: transparent; color: var(--t0); width: 100%; font: inherit; font-size: 13px; }

/* ── Light theme overrides ── */
:root[data-theme="light"] .excel-filterbar { background: rgba(255,255,255,.95) !important; border-color: var(--b1) !important; }
:root[data-theme="light"] .xf-btn { background: #fff !important; color: var(--t0) !important; border-color: var(--b2) !important; }
:root[data-theme="light"] .xf-menu { background: #fff !important; border-color: var(--b2) !important; }
:root[data-theme="light"] .xf-actions button, :root[data-theme="light"] .xf-reset, :root[data-theme="light"] .xf-search input { background: var(--s3) !important; color: var(--t0) !important; border-color: var(--b1) !important; }
:root[data-theme="light"] .xf-check:hover { background: var(--g2) !important; }
:root[data-theme="light"] .xf-goal-opt { background: var(--s3) !important; }

/* ── Goal popup (topbar) — kept for backward compat ── */
.target-pop { display: none; position: fixed; right: 190px; top: 62px; z-index: 200; background: rgba(7,15,28,.99); border: 1px solid var(--b2); border-radius: 18px; padding: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.5); min-width: 200px; gap: 8px; flex-wrap: wrap; }
.target-pop.open { display: flex; }
.target-pop-title { width: 100%; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--gold2); text-transform: uppercase; margin-bottom: 4px; }
.target-toggle b { font-family: 'JetBrains Mono', monospace; color: var(--gold2); }
.xf-goal { height: 32px; padding: 0 14px; border: 1px solid var(--b1); border-radius: 999px; background: var(--g1); color: var(--t1); font-weight: 800; cursor: pointer; transition: all .15s; }
.xf-goal.active { background: rgba(34,212,142,.12) !important; border-color: rgba(34,212,142,.4) !important; color: var(--green) !important; }
:root[data-theme="light"] .target-pop { background: #fff !important; }

/* Hide old filter system */
.sdl-filter { display: none !important; }
.native-selects.hidden { display: none !important; }

/* ── Mobile: ≤ 980px ── */
@media (max-width: 980px) {
  .tb-filter-toggle { display: inline-flex !important; }
  .excel-filterbar {
    display: none;
    position: fixed !important;
    left: 8px; right: 8px;
    top: 68px;
    z-index: 200;
    border: 1px solid var(--b2);
    border-radius: 20px;
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    padding: 14px !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.55);
    -webkit-overflow-scrolling: touch;
  }
  .excel-filterbar.mobile-open { display: block; }

  /* Both rows stack as grids */
  .xf-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 9px !important; }
  .xf-label { grid-column: 1 / -1; }
  .xf-primary-right { grid-column: 1 / -1; flex-direction: row; }
  .xf-summary-inline { display: none; }
  .xf-reset { width: 100%; justify-content: center; height: 42px; font-size: 13px; }
  .xf-dd, .xf-search-global { width: 100% !important; min-width: 0 !important; }
  .xf-btn { min-width: 0 !important; width: 100% !important; height: 44px !important; border-radius: 12px !important; }
  .xf-search-global { grid-column: 1 / -1; max-width: none; height: 44px; }
  .xf-secondary-row { margin-top: 10px; padding-top: 10px; }

  /* Menus go full-width fixed */
  .xf-menu {
    position: fixed !important;
    left: 12px !important; right: 12px !important;
    top: auto !important;
    bottom: 20px !important;
    width: auto !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    border-radius: 20px !important;
    -webkit-overflow-scrolling: touch;
    animation: xfSlideUp .18s var(--ease);
  }
  @keyframes xfSlideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
  .xf-list { max-height: 42vh !important; }
  .xf-check { min-height: 40px !important; font-size: 14px !important; }
  .xf-goal-opt { height: 50px !important; font-size: 18px !important; }

  /* Topbar: hide non-essential buttons */
  .tb-right { gap: 5px; overflow-x: auto; max-width: 68vw; }
  .tb-btn:not(.tb-filter-toggle):not(.target-toggle):not(.theme-toggle):not(.tb-btn-gold) { display: none !important; }
  .target-pop { right: 8px; left: 8px; top: 62px; min-width: 0; }
}

/* ── Mobile: ≤ 560px ── */
@media (max-width: 560px) {
  #topbar { padding: 8px 10px !important; }
  .tb-page { font-size: 13px !important; }
  .tb-meta { font-size: 10px !important; }
  .tb-logo { width: 28px; height: 28px; }
  .tb-live { display: none !important; }
  .tb-right { max-width: 74vw; }
  .theme-toggle { font-size: 0 !important; min-width: 38px !important; }
  .theme-toggle::after { content: '☾'; font-size: 14px; }
  .excel-filterbar { top: 56px !important; }
  .xf-row { grid-template-columns: 1fr !important; }
  .target-pop { top: 54px !important; }
}


/* ═══════════════════════════════════════════════════════════════
   V38.1 ADDITIONS
═══════════════════════════════════════════════════════════════ */

/* PPS Diagnostics */
.pps-diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px,1fr));
  gap: 10px;
  padding: 12px 16px;
}

/* Backend bar pulse animation */
@keyframes pulse {
  0%,100%{ opacity:1; }
  50%{ opacity:.4; }
}

/* Heatmap table */
#heatmapContainer table td:hover,
#heatmapContainer table th:hover { opacity: .85; }
#heatmapContainer::-webkit-scrollbar { height: 5px; }
#heatmapContainer::-webkit-scrollbar-thumb { background: var(--bg4); border-radius: 3px; }

/* Article trend card */
#articleTrendCard {
  margin-bottom: var(--gap);
}

/* Quality intelligence */
#qualYearDiag table td,
#qualYearDiag table th { border-bottom: 1px solid var(--border); }

/* PPS change page */
#ppsDiagContent {
  padding: 12px 16px;
}
#ppsReliabilityBox {
  background: var(--card-bg);
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  padding: 16px;
}

/* Safety banner overrides */
#reportBanner {
  display: block;
}

/* ═══════════════════════════════════════════════════════════════
   V39 CSS COMPATIBILITY ALIASES
   ═══════════════════════════════════════════════════════════════ */
:root {
  --border: rgba(255,255,255,.08);   /* alias for --b1 */
  --bg2:    #0d1d30;                  /* alias for --s2 */
  --bg3:    #112538;                  /* alias for --s3 */
  --mono:   'JetBrains Mono',monospace; /* alias for --nm */
  --gap:    12px;
}

/* ─── HEATMAP TABLE ──────────────────────────────────────────── */
#heatmapContainer table th {
  position: sticky;
  top: 0;
  z-index: 2;
}
#heatmapContainer {
  max-height: 520px;
  overflow-y: auto;
  overflow-x: auto;
  border-radius: var(--r8);
  border: 1px solid var(--b1);
}
#heatmapContainer::-webkit-scrollbar { width: 4px; height: 4px; }
#heatmapContainer::-webkit-scrollbar-thumb { background: var(--s5); border-radius: 2px; }

/* ─── HIST HERO GRID ─────────────────────────────────────────── */
.hist-hero {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

/* ─── ARTICLE TREND CARD ─────────────────────────────────────── */
#articleTrendCard {
  animation: pageIn .2s var(--ease);
}

/* ═══════════════════════════════════════════════════════════════════
   SDL V40 — New Components CSS
   ═══════════════════════════════════════════════════════════════════ */

/* ─── PWA INSTALL BANNER ─────────────────────────────────────────── */
.pwa-banner{
  position:fixed;bottom:16px;left:50%;transform:translateX(-50%);
  background:var(--s1);border:1px solid var(--gold-a30);border-radius:var(--r12);
  padding:10px 14px;display:flex;align-items:center;gap:10px;
  z-index:9000;box-shadow:var(--sh2);min-width:300px;max-width:480px;
  animation:slideUp .3s var(--ease);
}
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.pwa-icon{width:32px;height:32px;border-radius:8px;object-fit:contain;flex-shrink:0}
.pwa-text{flex:1;min-width:0}
.pwa-text strong{display:block;font-size:12px;color:var(--t0);font-weight:700}
.pwa-text span{font-size:11px;color:var(--t2)}
.pwa-btn{background:var(--gold);color:#000;border:none;border-radius:var(--r8);padding:6px 14px;font-size:12px;font-weight:700;cursor:pointer;flex-shrink:0}
.pwa-dismiss{background:none;border:none;color:var(--t2);cursor:pointer;padding:4px 6px;font-size:16px;flex-shrink:0}

/* ─── INSTALL BANNER + OFFLINE BAR — hidden state ───────────────── */
.pwa-banner.hidden{display:none!important}
.offline-bar.hidden{display:none!important}
.sb-offline.hidden{display:none!important}

/* ─── OFFLINE BAR ────────────────────────────────────────────────── */
.offline-bar{
  position:fixed;top:0;left:0;right:0;z-index:8999;
  background:rgba(240,184,64,.9);color:#000;font-size:12px;font-weight:600;
  text-align:center;padding:5px;backdrop-filter:blur(4px);
}
.sb-offline{
  font-size:8px;font-weight:700;letter-spacing:.1em;color:var(--amber);
  background:rgba(240,184,64,.15);border:1px solid rgba(240,184,64,.3);
  border-radius:4px;padding:1px 5px;
}

/* ─── CONCERN GRID ───────────────────────────────────────────────── */
.concern-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:9px;margin-bottom:12px;
}
.concern-card{
  background:var(--s1);border:1px solid var(--b1);border-radius:var(--r12);
  padding:12px 14px;transition:transform .18s;
}
.concern-card:hover{transform:translateY(-2px);box-shadow:var(--sh1)}
.cc-rank{font-size:14px;margin-bottom:4px}
.cc-name{font-size:13px;font-weight:700;color:var(--t0);margin-bottom:2px}
.cc-team{font-size:10px;font-weight:600;margin-bottom:6px;letter-spacing:.05em}
.cc-val{font-family:var(--nm);font-size:15px;font-weight:700;color:var(--gold2);margin-bottom:1px}
.cc-qty{font-size:10px;color:var(--t2);margin-bottom:6px}
.cc-bar-outer{height:3px;background:var(--s3);border-radius:2px;overflow:hidden;margin-bottom:4px}
.cc-bar-fill{height:100%;border-radius:2px;transition:width .8s}
.cc-share{font-size:10px;color:var(--t3);font-family:var(--nm)}

/* ─── ANNUAL TRACKER ─────────────────────────────────────────────── */
.annual-ring-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px;
}
.ann-ring-card{
  background:var(--s1);border:1px solid var(--b1);border-radius:var(--r12);
  padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;
}
.arc-info{text-align:center}
.arc-team{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.arc-ach{font-family:var(--hd);font-size:18px;font-weight:800;color:var(--t0);margin:2px 0}
.arc-vals{font-size:10px;color:var(--t2);font-family:var(--nm)}

/* Annual strip on exec page */
.annual-strip{
  background:linear-gradient(90deg,rgba(200,137,58,.08),rgba(40,190,240,.05));
  border:1px solid rgba(200,137,58,.18);border-radius:var(--r10);
  padding:10px 14px;margin-bottom:12px;
}
.annual-strip-inner{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.as-label{font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);white-space:nowrap;flex-shrink:0}
.as-bar-outer{flex:1;height:6px;background:var(--s3);border-radius:3px;overflow:hidden;min-width:80px}
.as-bar-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--cyan));border-radius:3px;transition:width .9s var(--ease)}
.as-pct{font-size:12px;font-weight:700;color:var(--gold2);flex-shrink:0}
.as-val{font-size:10.5px;color:var(--t2);flex-shrink:0}
.as-link{background:none;border:1px solid var(--gold-a18);color:var(--gold2);border-radius:var(--r8);padding:3px 10px;font-size:11px;cursor:pointer;transition:all .2s;flex-shrink:0;white-space:nowrap}
.as-link:hover{background:var(--gold-a10)}

/* ─── SAP HUB ────────────────────────────────────────────────────── */
.sap-hero{
  background:linear-gradient(135deg,rgba(200,137,58,.1),rgba(40,190,240,.06));
  border:1px solid var(--gold-a18);border-radius:var(--r16);
  padding:24px;display:flex;align-items:center;gap:16px;margin-bottom:14px;
}
.sap-hero-icon{font-size:36px;flex-shrink:0}
.sap-hero-text h2{font-family:var(--hd);font-size:18px;font-weight:800;color:var(--gold2);margin-bottom:4px}
.sap-hero-text p{font-size:12.5px;color:var(--t1);line-height:1.6}
.sap-status-badge{
  margin-left:auto;padding:6px 14px;border-radius:var(--r8);
  background:rgba(34,212,142,.12);border:1px solid rgba(34,212,142,.25);
  color:var(--green);font-size:10px;font-weight:700;letter-spacing:.1em;
  white-space:nowrap;flex-shrink:0;
}
.sap-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.sap-module{
  background:var(--s1);border-radius:var(--r12);padding:16px;border:1px solid var(--b1);
}
.sap-module.ready{border-color:rgba(34,212,142,.2)}
.sap-module.planned{border-color:rgba(62,200,245,.15)}
.sap-mod-icon{font-size:24px;margin-bottom:8px}
.sap-mod-title{font-family:var(--hd);font-size:13px;font-weight:700;color:var(--t0);margin-bottom:6px}
.sap-mod-desc{font-size:11.5px;color:var(--t1);line-height:1.6;margin-bottom:10px}
.sap-mod-fields{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}
.sap-field{background:var(--s3);color:var(--t1);font-size:9.5px;font-family:var(--nm);padding:2px 7px;border-radius:6px;border:1px solid var(--b1)}
.sap-mod-status{font-size:10px;font-weight:700;letter-spacing:.05em}
.ready-status{color:var(--green)}
.planned-status{color:var(--cyan)}

/* ══ DQ TABS (Step 3) ══ */
.dq-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--b1);padding-bottom:6px}
.dq-tab{background:transparent;border:1px solid var(--b1);border-radius:6px 6px 0 0;padding:5px 11px;font-size:.72rem;font-weight:600;color:var(--t2);cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}
.dq-tab:hover{background:var(--s2);color:var(--t0)}
.dq-tab-active{background:var(--s3)!important;color:var(--gold2)!important;border-color:var(--b2)!important;border-bottom-color:var(--s3)!important}
.dq-tab-badge{display:inline-block;margin-left:5px;padding:0 5px;border-radius:10px;font-size:.6rem;background:rgba(240,80,112,.18);color:var(--red);font-weight:700;vertical-align:middle}
.dq-tc{padding:4px 0}
.dq-controls{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.dq-search{background:var(--s2);border:1px solid var(--b1);border-radius:6px;padding:5px 10px;font-size:.76rem;color:var(--t0);min-width:160px;flex:1}
.dq-search:focus{outline:none;border-color:var(--gold2)}
.dq-export{background:transparent;border:1px solid var(--b1);border-radius:6px;padding:4px 10px;font-size:.72rem;color:var(--t2);cursor:pointer;white-space:nowrap}
.dq-export:hover{background:var(--s2);color:var(--t0)}
/* ══ DATA HEALTH (Step 2) ══ */
.dq-health-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;flex:1}
.dq-health-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--s1);border:1px solid var(--b1);border-radius:8px}
.dq-health-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dq-health-lbl{font-size:.75rem;color:var(--t1);line-height:1.3}
.dq-health-pct{font-size:.68rem;font-weight:700;color:var(--t2);margin-top:1px}
@media(max-width:768px){
  .dq-tabs{gap:3px}
  .dq-tab{padding:4px 8px;font-size:.68rem}
  .dq-health-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
}

/* ══════════════════════════════════════════════════════════════════
   V42 FINAL PRODUCTION — Mobile Polish + Light Theme Corporate BI
   ══════════════════════════════════════════════════════════════════ */

/* ── Global: prevent horizontal overflow on all devices ── */
html,body{max-width:100%;overflow-x:hidden}
.page-content,.main-content,#main,#content{overflow-x:hidden;max-width:100%}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.kpi-row{flex-wrap:wrap}

/* ── Safe-area padding for iPhone notch/home bar ── */
#topbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
#sidebar{padding-left:max(0px,env(safe-area-inset-left));padding-bottom:max(0px,env(safe-area-inset-bottom))}
@supports(padding:max(0px)){
  #topbar{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}
}

/* ── Landscape mobile (height ≤ 500px) ── */
@media(max-height:500px) and (orientation:landscape){
  #topbar{padding-top:2px!important;padding-bottom:2px!important;min-height:40px}
  .tb-btn{min-height:28px!important;padding:4px 8px!important}
  .excel-filterbar{top:44px!important}
  #sidebar{padding-top:44px!important}
}

/* ── 430px (large iPhone Pro Max) ── */
@media(max-width:430px){
  .kpi{min-width:calc(50% - 6px)!important;max-width:calc(50% - 6px)!important}
  .hero-ach{padding:14px!important}
  .ach-pct-hero{font-size:40px!important}
  canvas{max-height:180px}
}

/* ── 390px (standard iPhone) ── */
@media(max-width:390px){
  .kpi{min-width:100%!important}
  .hero-ach,.hero-status{padding:12px!important}
  .trend-mini-row{gap:6px!important;flex-wrap:wrap}
  .ach-row{grid-template-columns:1fr 1fr!important}
  .card,.section-card{padding:12px!important}
  h1,h2{font-size:1rem!important}
  .section-title{font-size:.85rem!important}
  table.tbl{font-size:.68rem}
  table.tbl th,table.tbl td{padding:4px 6px!important}
}

/* ── Light Theme — Corporate BI (Power BI / SAP Analytics style) ── */
:root[data-theme="light"]{
  --bg:#f0f2f5;
  --s1:#ffffff;--s2:#fafbfc;--s3:#f0f3f7;--s4:#e5eaf2;--s5:#d8e0ec;--s6:#c8d4e6;
  --g1:rgba(15,30,55,.03);--g2:rgba(15,30,55,.055);--g3:rgba(15,30,55,.09);
  --b0:rgba(15,30,55,.05);--b1:rgba(15,30,55,.09);--b2:rgba(15,30,55,.14);--b3:rgba(15,30,55,.22);
  --t0:#0d1f36;--t1:#2d4460;--t2:#5a7491;--t3:#90a8be;--t4:#bdd0de;
  --sh0:0 1px 3px rgba(15,30,55,.06);--sh1:0 3px 12px rgba(15,30,55,.09);--sh2:0 6px 24px rgba(15,30,55,.11);--sh3:0 12px 40px rgba(15,30,55,.13);
  /* Muted accent colors for charts/badges */
  --gold:#b58a30;--gold2:#a07828;--green:#1d9e6a;--cyan:#1a8fa8;--red:#c94060;--amber:#c07820;
}
:root[data-theme="light"] body{background:var(--bg);color:var(--t0)}
:root[data-theme="light"] #sidebar{background:rgba(255,255,255,.96)!important;border-right-color:var(--b1)!important;box-shadow:2px 0 12px rgba(15,30,55,.07)!important}
:root[data-theme="light"] #topbar{background:rgba(255,255,255,.97)!important;border-bottom-color:var(--b1)!important;box-shadow:0 2px 8px rgba(15,30,55,.07)!important}
:root[data-theme="light"] .excel-filterbar{background:rgba(248,250,252,.97)!important;border-color:var(--b1)!important;box-shadow:var(--sh1)!important}
:root[data-theme="light"] .card{background:#fff!important;border-color:var(--b1)!important;box-shadow:var(--sh0)!important}
:root[data-theme="light"] .hero-ach{background:#fff!important;border-color:var(--b1)!important;box-shadow:var(--sh0)!important}
:root[data-theme="light"] .kpi{background:#fff!important;border-color:var(--b1)!important;box-shadow:var(--sh0)!important}
:root[data-theme="light"] .tbl-wrap{background:#fff!important;border-color:var(--b1)!important}
:root[data-theme="light"] table.tbl thead tr{background:rgba(15,30,55,.04)!important}
:root[data-theme="light"] table.tbl tbody tr:nth-child(even){background:rgba(15,30,55,.02)!important}
:root[data-theme="light"] table.tbl tbody tr:hover{background:rgba(15,30,55,.05)!important}
:root[data-theme="light"] .tb-btn{background:#fff!important;color:var(--t0)!important;border-color:var(--b2)!important;box-shadow:var(--sh0)!important}
:root[data-theme="light"] .tb-btn:hover{background:var(--s3)!important}
:root[data-theme="light"] canvas{filter:none!important;opacity:.9}
:root[data-theme="light"] .status-panel,.dq-tab-active:root[data-theme="light"]{background:var(--s2)!important}
:root[data-theme="light"] .xf-btn{background:#fff!important;color:var(--t0)!important;border-color:var(--b2)!important;box-shadow:var(--sh0)!important}
:root[data-theme="light"] .xf-menu{background:#fff!important;border-color:var(--b1)!important;box-shadow:var(--sh2)!important}
:root[data-theme="light"] .target-pop{background:#fff!important;border-color:var(--b1)!important;box-shadow:var(--sh2)!important}
:root[data-theme="light"] .boardroomTV{background:#f0f2f5!important}
:root[data-theme="light"] .tag{opacity:.85}
/* Reduce glow in light mode */
:root[data-theme="light"] .kpi-val,.kpi-gold .kpi-val,.kpi-cyan .kpi-val{text-shadow:none!important}
:root[data-theme="light"] .ach-pct-hero{text-shadow:none!important}
:root[data-theme="light"] .hero-ach::before{display:none!important}

.sap-arch{
  background:var(--s1);border:1px solid var(--b1);border-radius:var(--r12);padding:20px;margin-bottom:12px;
}
.sap-arch-title{font-size:12px;font-weight:700;color:var(--t0);margin-bottom:14px;letter-spacing:.05em;text-transform:uppercase}
.sap-arch-flow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.saf-step{background:var(--s2);border:1px solid var(--b1);border-radius:var(--r8);padding:10px 14px;text-align:center;flex:1;min-width:90px}
.saf-step.saf-highlight{background:rgba(200,137,58,.1);border-color:var(--gold-a30)}
.saf-icon{font-size:18px;margin-bottom:4px}
.saf-lbl{font-size:11px;color:var(--t1);font-weight:600;line-height:1.4}
.saf-lbl small{color:var(--t3);font-weight:400;display:block}
.saf-arrow{color:var(--t3);font-size:18px;flex-shrink:0}
.sap-arch-note{font-size:12px;color:var(--t1);line-height:1.6;background:var(--s2);border-radius:var(--r8);padding:10px 14px;border-left:3px solid var(--gold)}

.sap-config-card{background:var(--s1);border:1px solid var(--b1);border-radius:var(--r12);padding:16px}
.sap-config-title{font-size:12px;font-weight:700;color:var(--t0);margin-bottom:10px}
.be-status{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:12px;color:var(--t1)}
.be-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.be-dot-ok{background:var(--green);box-shadow:0 0 6px var(--green)}
.be-dot-warn{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.be-dot-bad{background:var(--red)}
.sap-config-url{font-size:11px;color:var(--t3)}
.sap-config-url code{font-family:var(--nm);color:var(--t2);word-break:break-all}

/* ─── RESPONSIVE NEW PAGES ───────────────────────────────────────── */
@media(max-width:900px){
  .annual-ring-row{grid-template-columns:repeat(2,1fr)}
  .sap-grid{grid-template-columns:1fr}
  .concern-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .annual-ring-row{grid-template-columns:1fr 1fr}
  .sap-arch-flow{flex-direction:column}
  .saf-arrow{transform:rotate(90deg)}
}

/* ─── LIGHT THEME NEW COMPONENTS ─────────────────────────────────── */
:root[data-theme="light"] .pwa-banner,
:root[data-theme="light"] .sap-module,
:root[data-theme="light"] .sap-arch,
:root[data-theme="light"] .sap-config-card,
:root[data-theme="light"] .concern-card,
:root[data-theme="light"] .ann-ring-card{background:#fff!important;border-color:var(--b1)!important}
:root[data-theme="light"] .saf-step{background:#f5f5f5!important}
:root[data-theme="light"] .annual-strip{background:rgba(200,137,58,.06)!important}

/* ═══════════════════════════════════════════════════════════════
   SDL V41 — PROFITABILITY ENGINE CSS
   ═══════════════════════════════════════════════════════════════ */

/* PQI Hero */
.pqi-hero {
  background: linear-gradient(135deg, rgba(34,212,142,.06), rgba(212,151,62,.04));
  border: 1px solid rgba(34,212,142,.18);
  border-radius: var(--r16); padding: 20px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 20px;
}
.pqi-ring-wrap { position: relative; width: 100px; height: 100px; flex-shrink: 0; }
.pqi-ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pqi-score { font-family: var(--hd); font-size: 26px; font-weight: 800; color: var(--t0); }
.pqi-label { font-size: 9px; color: var(--t3); text-transform: uppercase; letter-spacing: .1em; }
.pqi-title { font-family: var(--hd); font-size: 14px; font-weight: 700; color: var(--t0); margin-bottom: 4px; }
.pqi-desc  { font-size: 11.5px; color: var(--t1); margin-bottom: 6px; }
.pqi-meta  { font-size: 12px; color: var(--t1); margin-bottom: 8px; }
.pqi-tags  { display: flex; flex-wrap: wrap; gap: 5px; }
.pqi-cat-tag {
  font-size: 10px; font-weight: 700; padding: 3px 9px;
  border-radius: 8px; border: 1px solid transparent;
}
.pqi-cat-tag small { font-weight: 400; opacity: .7; }

/* EJA Tabs */
.eja-tabs {
  display: flex; gap: 4px; margin-bottom: 10px;
  background: var(--s1); border-radius: var(--r8);
  padding: 4px; border: 1px solid var(--b1);
}
.eja-tab {
  flex: 1; padding: 7px 10px; border: none; border-radius: 6px;
  background: none; color: var(--t2); font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .2s;
}
.eja-tab.active { background: var(--gold-a10); color: var(--gold2); border: 1px solid var(--gold-a30); }
.eja-tab:hover:not(.active) { color: var(--t0); }
.eja-section { display: block; }
.eja-section.hidden { display: none; }

/* ============================================================
   V42 DESKTOP LAYOUT OPTIMIZATION  (min-width: 981px only)
   Rules: no JS changes, no HTML changes, no KPI changes,
   no filter logic changes, mobile <=980px untouched.
   ============================================================ */

/* Collapse empty report banner so exec hero sits flush */
.report-banner:empty { display: none; }

@media (min-width: 981px) {

  /* Tighter content top-padding — closes gap between filter bar and KPIs */
  #content { padding: 12px 20px; }

  /* Make filterbar a single flex row */
  .excel-filterbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 7px 18px 6px;
  }

  /* Dissolve the main-row wrapper — its children become direct flex items */
  .xf-main-row { display: contents; }

  /* Always show the more-row on desktop; override hidden class */
  #sfMoreRow,
  #sfMoreRow.hidden { display: contents !important; }

  /* Hide MORE toggle button on desktop */
  #sfMoreBtn { display: none !important; }

  /* Search field styling when it's a direct flex child */
  .xf-search-field {
    flex: 1;
    min-width: 180px;
    max-width: 360px;
    height: 34px;
    display: flex;
    align-items: center;
    border: 1px solid var(--b1);
    border-radius: 12px;
    background: var(--g1);
    padding: 0 10px;
    gap: 8px;
  }

  .xf-search-field input {
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--t0);
    width: 100%;
    font: inherit;
    font-size: 13px;
  }

  .xf-search-field input::placeholder { color: var(--t3); }

}