/* ══════════════════════════════════════════════
   DESIGN TOKENS — BPP Premium Light
   Product & Design Book v1.0
══════════════════════════════════════════════ */
:root {
  /* ── Elevation ── */
  --bg:           #F7F8FA;   /* page background — warm white */
  --surface:      #FFFFFF;   /* cards, panels, modals */
  --card-alt:     #F7F8FA;   /* nested elements inside surface */
  --border:       #E5E7EB;   /* standard borders */
  --border-light: #F0F1F3;   /* subtle separators */

  /* ── Text ── */
  --text:         #111827;   /* primary — near black */
  --text-sec:     #374151;   /* secondary labels, values */
  --muted:        #6B7280;   /* labels, metadata */
  --muted-light:  #9CA3AF;   /* placeholders, disabled */

  /* ── Brand ── */
  --navy:         #1E3A5F;   /* primary action colour */
  --navy-light:   #2C4F7C;   /* navy hover */
  --gold:         #B8860B;   /* OCM, logo, premium accents only */
  --gold-bg:      rgba(184,134,11,.08);

  /* ── Status ── */
  --green:        #059669;
  --green-bg:     rgba(5,150,105,.08);
  --amber:        #D97706;
  --amber-bg:     rgba(217,119,6,.08);
  --red:          #DC2626;
  --red-bg:       rgba(220,38,38,.08);
  --blue:         #2563EB;
  --blue-bg:      rgba(37,99,235,.08);
  --purple:       #7C3AED;
  --purple-bg:    rgba(124,58,237,.08);

  /* ── Spacing scale (4px base) ── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ── System ── */
  --font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --radius:    8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:    0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 20px 40px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums; /* financial values align at decimal */
}

/* ══════════════════════════════════════════════
   SCENARIO BAR (Context bar below app bar)
══════════════════════════════════════════════ */
.header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-2) var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  position: sticky;
  top: 40px; /* height of app-bar */
  z-index: 100;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}
.logo { display: none; } /* logo now lives in app-bar */
.scenario-bar { display: flex; gap: 7px; flex: 1; flex-wrap: wrap; align-items: flex-end; }
.sg{display:flex;flex-direction:column;gap:3px;min-width:130px;}
.sg label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:500;}
.sg select,.sg input[type="text"],.sg input[type="number"]{background:var(--bg);border:1px solid var(--border);color:var(--text);font-size:12px;padding:5px 9px;border-radius:6px;outline:none;width:100%;font-family:var(--font);transition:border-color .15s;}
.sg select:focus,.sg input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,58,95,.08);}
.sg select option{background:#fff;color:var(--text);}
.fx-live{display:flex;flex-direction:column;gap:3px;}
.fx-live label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);font-weight:500;}
.fx-row{display:flex;align-items:center;gap:5px;}
.btn-fx{background:var(--surface);border:1px solid var(--border);color:var(--text-sec);font-size:11px;font-weight:500;padding:4px 10px;border-radius:6px;cursor:pointer;white-space:nowrap;font-family:var(--font);transition:all .15s;box-shadow:var(--shadow-sm);}
.btn-fx:hover{border-color:var(--navy);color:var(--navy);background:var(--bg);}
.fx-status{font-size:10px;color:var(--muted-light);margin-top:2px;}
.fx-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--muted-light);margin-right:3px;}
.fx-dot.live{background:var(--green);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ══════════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════════ */
.main { display: grid; grid-template-columns: 1fr 288px; min-height: calc(100vh - 92px); }
.sidebar {
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  overflow-y: auto;
  max-height: calc(100vh - 92px);
  position: sticky;
  top: 92px;
}
.content {
  padding: var(--sp-4) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  overflow-y: auto;
  max-height: calc(100vh - 92px);
  background: var(--bg);
}

/* Section headers */
.sh{display:flex;align-items:center;gap:6px;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-light);}
.sh h2{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-weight:600;}
.dot{width:5px;height:5px;border-radius:50%;background:var(--gold-light);flex-shrink:0;}

/* ══════════════════════════════════════════════
   SUPPLY CHAIN BAR
══════════════════════════════════════════════ */
.chain{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.cs{flex:1;padding:10px 6px;text-align:center;border-right:1px solid var(--border-light);}
.cs:last-child{border-right:none;}
.cs-label{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:4px;font-weight:500;}
.cs-val{font-size:14px;font-weight:700;color:var(--text);}
.cs-sub{font-size:9px;color:var(--muted-light);margin-top:2px;}

/* ══════════════════════════════════════════════
   KPI CARDS
══════════════════════════════════════════════ */
.kpi-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;position:relative;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s;}
.kpi:hover{box-shadow:var(--shadow);}
.kpi::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--navy);}
.kpi-label{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);margin-bottom:6px;font-weight:500;}
.kpi-val{font-size:22px;font-weight:700;color:var(--text);line-height:1;margin-bottom:3px;}
.kpi-sub{font-size:10px;color:var(--muted);}
.badge{display:inline-block;font-size:9px;font-weight:600;padding:2px 7px;border-radius:100px;margin-top:4px;letter-spacing:.3px;}
.bg{background:var(--green-bg);color:var(--green);}
.ba{background:var(--amber-bg);color:var(--amber);}
.br{background:var(--red-bg);color:var(--red);}

/* ══════════════════════════════════════════════
   P&L GRID
══════════════════════════════════════════════ */
.pl-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px;}
.plc{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.plc-head{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg);border-bottom:1px solid var(--border);}
.plc-title{font-size:12px;font-weight:600;color:var(--navy);}
.plc-pct{font-size:24px;font-weight:700;line-height:1;}
.plc-pct-label{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;text-align:right;}
.plr{display:flex;justify-content:space-between;align-items:center;padding:6px 14px;border-bottom:1px solid var(--border-light);}
.plr:last-child{border-bottom:none;}
.plr-l{font-size:11px;color:var(--muted);}
.plr-v{font-size:12px;font-weight:600;color:var(--text);}
.plr-v.neg{color:var(--red);}
.plr.tot{border-top:1px solid var(--border);padding-top:8px;background:var(--bg);}
.plr.tot .plr-l{font-weight:600;color:var(--text);font-size:12px;}
.plr.tot .plr-v{font-size:15px;font-weight:700;}

/* ══════════════════════════════════════════════
   TABLES (Airtable/Notion style)
══════════════════════════════════════════════ */
.ytable{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.ytable th{background:var(--bg);padding:9px 13px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);border-bottom:1px solid var(--border);font-weight:600;}
.ytable th:not(:first-child){text-align:right;}
.ytable td{padding:9px 13px;border-bottom:1px solid var(--border-light);font-size:12px;color:var(--text);}
.ytable td:not(:first-child){text-align:right;font-weight:500;}
.ytable tr:last-child td{border-bottom:none;}
.ytable tr:hover td{background:var(--bg);}
.ytable .rl{color:var(--muted);font-size:11px;font-weight:400;}
.ytable .yg{color:var(--green);font-weight:600;}
.ytable .yr{color:var(--red);font-weight:600;}
.ytable .yh{color:var(--gold);font-weight:600;}
.ytable .yb{color:var(--blue);font-weight:600;}
.ytable .yp{color:var(--purple);font-weight:600;}
.ytable .sect{background:var(--bg);font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--navy);font-weight:700;border-top:1px solid var(--border);}

/* ══════════════════════════════════════════════
   PROMO TABLE
══════════════════════════════════════════════ */
.promo-budget-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.pbc-item{display:flex;flex-direction:column;gap:2px;}
.pbc-label{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:500;}
.pbc-val{font-size:16px;font-weight:700;color:var(--text);}
.pbc-val.gold{color:var(--gold);}
.promo-alloc-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:12px;}
.promo-alloc-fill{height:100%;border-radius:2px;transition:width .3s;}
.ptable{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.ptable th{background:var(--bg);padding:8px 12px;text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);border-bottom:1px solid var(--border);font-weight:600;}
.ptable td{padding:9px 12px;border-bottom:1px solid var(--border-light);vertical-align:top;}
.ptable tr:last-child td{border-bottom:none;}
.ptable tr:hover td{background:var(--bg);}
.ptable tr.disabled{opacity:.4;}
.ptable .action-name{font-size:12px;font-weight:600;color:var(--text);margin-bottom:2px;}
.ptable .action-desc{font-size:10px;color:var(--muted);line-height:1.4;}
.ptype{display:inline-block;font-size:9px;font-weight:600;padding:1px 6px;border-radius:4px;letter-spacing:.3px;}
.pt-com{background:var(--gold-bg);color:var(--gold);}
.pt-trade{background:var(--blue-bg);color:var(--blue);}
.pt-con{background:var(--green-bg);color:var(--green);}
.pt-dig{background:var(--red-bg);color:var(--red);}
.pct-input{width:48px;background:var(--bg);border:1px solid var(--border);color:var(--text);font-size:12px;font-weight:600;padding:2px 5px;border-radius:4px;text-align:right;outline:none;}
.pct-input:focus{border-color:var(--navy);}
.promo-toggle{width:14px;height:14px;accent-color:var(--navy);cursor:pointer;}
.ptable .eur-val{font-size:12px;font-weight:600;color:var(--text);text-align:right;}
.ptable .tot-row td{background:var(--bg);border-top:1px solid var(--border);}
.ptable .tot-row .rl{font-weight:700;color:var(--text);}
.ptable .tot-row .eur-val{font-size:14px;color:var(--navy);font-weight:700;}

/* ══════════════════════════════════════════════
   INSIGHTS
══════════════════════════════════════════════ */
.ins-list{display:flex;flex-direction:column;gap:6px;}
.ins{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;font-size:12px;display:flex;gap:8px;align-items:flex-start;line-height:1.5;color:var(--text-sec);box-shadow:var(--shadow-sm);}

/* ══════════════════════════════════════════════
   TABS
══════════════════════════════════════════════ */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:12px;}
.tab{padding:7px 14px;font-size:12px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--font);font-weight:500;transition:color .15s;}
.tab:hover{color:var(--text-sec);}
.tab.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:600;}
.tc{display:none;}
.tc.active{display:block;}

/* ══════════════════════════════════════════════
   MARKET BOX (Sidebar)
══════════════════════════════════════════════ */
.mkt-box{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.mi{display:flex;flex-direction:column;gap:2px;}
.mi-l{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:500;}
.mi-v{font-size:12px;font-weight:600;color:var(--text);}
.mi-n{font-size:10px;color:var(--gold);}

/* ══════════════════════════════════════════════
   SIDEBAR CONTROLS
══════════════════════════════════════════════ */
.ctrl-group{display:flex;flex-direction:column;gap:10px;}
.ci{display:flex;flex-direction:column;gap:3px;}
.ci-head{display:flex;justify-content:space-between;align-items:baseline;}
.ci-label{font-size:10px;color:var(--muted);font-weight:500;}
.ci-val{font-size:13px;font-weight:700;color:var(--text);}
.ci-row{display:flex;align-items:center;gap:6px;}
input[type="range"]{-webkit-appearance:none;flex:1;height:3px;background:var(--border);border-radius:2px;outline:none;cursor:pointer;}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--navy);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.2);}
input[type="number"]{width:62px;background:var(--bg);border:1px solid var(--border);color:var(--text);font-size:11px;padding:3px 6px;border-radius:5px;text-align:right;outline:none;font-family:var(--font);}
input[type="number"]:focus{border-color:var(--navy);box-shadow:0 0 0 2px rgba(30,58,95,.08);}
.ci-divider{border-top:1px solid var(--border-light);margin:3px 0;}
.ci-group-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--navy);margin-bottom:2px;font-weight:600;}
.vol-link{font-size:10px;color:var(--muted);cursor:pointer;user-select:none;display:flex;align-items:center;gap:4px;font-weight:500;}
.vol-link input[type="checkbox"]{accent-color:var(--navy);width:11px;height:11px;}

/* ══════════════════════════════════════════════
   TOOLTIP
══════════════════════════════════════════════ */
.sku-tooltip-wrap{position:relative;}
.sku-tooltip-wrap:hover .sku-tooltip{display:block;}
.sku-tooltip{display:none;position:absolute;left:0;top:100%;z-index:200;background:var(--text);border-radius:8px;padding:10px 13px;min-width:260px;font-size:11px;line-height:1.7;color:#fff;box-shadow:var(--shadow-lg);white-space:nowrap;}
.sku-tooltip .tt-row{display:flex;justify-content:space-between;gap:16px;}
.sku-tooltip .tt-label{color:rgba(255,255,255,.6);}
.sku-tooltip .tt-val{font-weight:600;color:#fff;}

/* ══════════════════════════════════════════════
   PRODUCT SEARCH
══════════════════════════════════════════════ */
.prod-search-wrap{position:relative;min-width:200px;}
.prod-search-wrap label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);display:block;margin-bottom:3px;font-weight:500;}
#prod-search{background:var(--bg);border:1px solid var(--border);color:var(--text);font-size:12px;padding:5px 9px;border-radius:6px;outline:none;width:100%;font-family:var(--font);transition:border-color .15s;}
#prod-search:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,58,95,.08);}
#prod-dropdown{display:none;position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);max-height:220px;overflow-y:auto;z-index:300;box-shadow:var(--shadow-lg);}
#prod-dropdown.open{display:block;}
#prod-dropdown .pd-item{padding:7px 11px;font-size:12px;cursor:pointer;color:var(--text);border-bottom:1px solid var(--border-light);}
#prod-dropdown .pd-item:hover{background:var(--bg);color:var(--navy);}
#prod-dropdown .pd-item:last-child{border-bottom:none;}
#prod-dropdown .pd-item mark{background:rgba(30,58,95,.1);color:var(--navy);border-radius:2px;}

/* ══════════════════════════════════════════════
   VOL UNIT TOGGLE
══════════════════════════════════════════════ */
.vol-unit-toggle{display:flex;gap:3px;margin-bottom:4px;}
.vut-btn{font-size:10px;font-weight:500;padding:3px 9px;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-family:var(--font);transition:all .15s;}
.vut-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;}

/* ══════════════════════════════════════════════
   PVP STACKED
══════════════════════════════════════════════ */
.pvp-stack{display:flex;flex-direction:column;gap:1px;text-align:right;}
.pvp-off{font-size:12px;font-weight:600;color:var(--text);}
.pvp-promo{font-size:10px;font-weight:500;color:var(--amber);}

/* ══════════════════════════════════════════════
   TOGGLE SWITCH
══════════════════════════════════════════════ */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:6px;}
.toggle-label{font-size:10px;color:var(--muted);}
.toggle-switch{position:relative;display:inline-block;width:32px;height:17px;flex-shrink:0;}
.toggle-switch input{opacity:0;width:0;height:0;}
.toggle-slider{position:absolute;cursor:pointer;inset:0;background:var(--border);border-radius:17px;transition:.2s;}
.toggle-slider:before{content:'';position:absolute;height:11px;width:11px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.15);}
.toggle-switch input:checked+.toggle-slider{background:var(--navy);}
.toggle-switch input:checked+.toggle-slider:before{transform:translateX(15px);}

/* ══════════════════════════════════════════════
   OVERHEAD MODE
══════════════════════════════════════════════ */
.oh-mode{display:flex;gap:3px;margin-bottom:4px;}
.oh-btn{flex:1;padding:3px 0;font-size:10px;font-weight:500;border-radius:4px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-family:var(--font);transition:all .15s;}
.oh-btn.active{background:var(--navy);border-color:var(--navy);color:#fff;}

/* ABV field */
.abv-row{display:none;}
.abv-row.visible{display:flex;}

/* Traffic lights */
.tl{display:flex;flex-direction:column;gap:5px;}
.tli{display:flex;align-items:center;gap:6px;}
.tld{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.tlt{font-size:11px;color:var(--muted);}

/* Contribution Margin badge */
.cm-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;padding:2px 7px;border-radius:100px;background:var(--purple-bg);color:var(--purple);font-weight:600;margin-top:2px;}

/* ══════════════════════════════════════════════
   OCM BANNER
══════════════════════════════════════════════ */
.ocm-banner{display:flex;align-items:center;gap:10px;background:var(--green-bg);border:1px solid rgba(5,150,105,.2);border-radius:var(--radius);padding:10px 14px;margin-bottom:8px;flex-wrap:wrap;}
.ocm-banner.inactive{background:var(--bg);border-color:var(--border);}
.ocm-pill{font-size:10px;font-weight:700;padding:3px 10px;border-radius:100px;background:rgba(5,150,105,.15);color:var(--green);letter-spacing:.3px;white-space:nowrap;}
.ocm-pill.inactive{background:var(--border-light);color:var(--muted);}
.ocm-fig{font-size:18px;font-weight:700;color:var(--green);}
.ocm-fig.inactive{color:var(--muted);}
.ocm-sub{font-size:10px;color:var(--muted);}
.ocm-ctrl{display:flex;flex-direction:column;gap:3px;margin-left:auto;}
.ocm-ctrl label{font-size:9px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);}
.ocm-ctrl-row{display:flex;align-items:center;gap:5px;}
.ocm-input{width:52px;background:var(--bg);border:1px solid rgba(5,150,105,.3);color:var(--green);font-size:13px;font-weight:700;padding:3px 6px;border-radius:5px;text-align:right;outline:none;}
.ocm-input:focus{border-color:var(--green);}
.ocm-input.inactive{border-color:var(--border);color:var(--muted);}
.plr-ocm{background:var(--green-bg);border-left:2px solid var(--green);}
.plr-ocm .plr-l{color:var(--green);font-weight:600;}
.plr-ocm .plr-v{color:var(--green);font-weight:700;}
.ytable .yocm{color:var(--green);font-weight:700;}
.ocm-note{font-size:10px;color:var(--green);opacity:.8;}

/* ══════════════════════════════════════════════
   AI MODAL
══════════════════════════════════════════════ */
.btn-ai{background:var(--navy);border:none;color:#fff;font-size:11px;font-weight:600;padding:6px 13px;border-radius:6px;cursor:pointer;white-space:nowrap;font-family:var(--font);letter-spacing:.2px;display:flex;align-items:center;gap:5px;transition:all .15s;box-shadow:var(--shadow-sm);}
.btn-ai:hover{background:var(--navy-light);}
.btn-ai .ai-icon{font-size:12px;}
.ai-overlay{display:none;position:fixed;inset:0;background:rgba(17,24,39,.6);backdrop-filter:blur(4px);z-index:999;align-items:center;justify-content:center;}
.ai-overlay.open{display:flex;}
.ai-modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;width:min(780px,96vw);max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);}
.ai-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--bg);}
.ai-modal-title{font-size:14px;font-weight:700;color:var(--navy);}
.ai-modal-sub{font-size:11px;color:var(--muted);margin-top:2px;}
.ai-close{background:none;border:1px solid var(--border);color:var(--muted);font-size:16px;cursor:pointer;line-height:1;padding:3px 8px;border-radius:5px;transition:all .15s;}
.ai-close:hover{color:var(--text);border-color:var(--text);}
.ai-tabs{display:flex;gap:0;padding:10px 20px 0;border-bottom:1px solid var(--border);}
.ai-tab{padding:5px 12px;font-size:11px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;background:none;border-top:none;border-left:none;border-right:none;font-family:var(--font);font-weight:500;}
.ai-tab.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:600;}
.ai-body{padding:16px 20px;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px;}
.ai-tc{display:none;}
.ai-tc.active{display:flex;flex-direction:column;gap:8px;}
.ai-ctx{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;font-size:11px;color:var(--muted);font-family:'SF Mono','Fira Code','Courier New',monospace;white-space:pre-wrap;line-height:1.6;max-height:320px;overflow-y:auto;}
.ai-section-hd{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--navy);font-weight:700;margin-bottom:3px;}
.ai-prompts{display:flex;flex-direction:column;gap:4px;}
.ai-prompt-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-sec);font-size:11px;padding:8px 12px;border-radius:var(--radius);cursor:pointer;text-align:left;font-family:var(--font);line-height:1.4;transition:all .15s;}
.ai-prompt-btn:hover{border-color:var(--navy);background:var(--bg);}
.ai-prompt-btn .prompt-tag{font-size:9px;font-weight:600;padding:1px 6px;border-radius:3px;margin-right:7px;letter-spacing:.3px;}
.tag-risk{background:var(--red-bg);color:var(--red);}
.tag-opp{background:var(--green-bg);color:var(--green);}
.tag-price{background:var(--gold-bg);color:var(--gold);}
.tag-promo{background:var(--blue-bg);color:var(--blue);}
.tag-str{background:var(--purple-bg);color:var(--purple);}
.ai-footer{display:flex;gap:8px;padding:12px 20px;border-top:1px solid var(--border);align-items:center;flex-wrap:wrap;background:var(--bg);}
.ai-footer-note{font-size:10px;color:var(--muted);flex:1;}
.btn-copy-all{background:var(--navy);border:none;color:#fff;font-size:11px;font-weight:600;padding:7px 16px;border-radius:6px;cursor:pointer;font-family:var(--font);}
.btn-copy-all:hover{background:var(--navy-light);}
.copy-module-btn{background:var(--bg);border:1px solid var(--border);color:var(--text-sec);font-size:10px;font-weight:500;padding:3px 9px;border-radius:4px;cursor:pointer;font-family:var(--font);}
.copy-module-btn:hover{border-color:var(--navy);color:var(--navy);}
.ai-module-row{display:flex;align-items:flex-start;gap:8px;}
.ai-module-row .ai-ctx{flex:1;}

/* ══════════════════════════════════════════════
   LOGIN SCREEN
══════════════════════════════════════════════ */
#login-screen{position:fixed;inset:0;background:linear-gradient(135deg,#F7F8FA 0%,#EEF2F7 100%);z-index:9999;display:flex;align-items:center;justify-content:center;}
.login-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:44px 48px;width:100%;max-width:420px;display:flex;flex-direction:column;gap:22px;box-shadow:var(--shadow-lg);}
.login-logo{text-align:center;}
.login-logo-mark{font-size:28px;font-weight:700;color:var(--navy);letter-spacing:-1px;margin-bottom:4px;}
.login-logo-sub{font-size:11px;color:var(--muted);letter-spacing:.5px;}
.login-divider{height:1px;background:var(--border);margin:0;}
.login-title{font-size:18px;font-weight:700;color:var(--text);text-align:center;letter-spacing:-.3px;}
.login-field{display:flex;flex-direction:column;gap:6px;}
.login-field label{font-size:11px;font-weight:600;color:var(--text-sec);}
.login-field input{background:var(--bg);border:1px solid var(--border);color:var(--text);font-size:14px;padding:10px 14px;border-radius:8px;outline:none;width:100%;font-family:var(--font);transition:all .15s;}
.login-field input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,58,95,.1);background:#fff;}
.login-btn{background:var(--navy);color:#fff;font-size:14px;font-weight:600;padding:12px;border:none;border-radius:8px;cursor:pointer;font-family:var(--font);letter-spacing:.1px;transition:all .15s;box-shadow:var(--shadow-sm);}
.login-btn:hover{background:var(--navy-light);box-shadow:var(--shadow);}
.login-error{font-size:12px;color:var(--red);text-align:center;min-height:16px;background:var(--red-bg);border-radius:6px;padding:0;transition:padding .15s;}
.login-error:not(:empty){padding:7px 12px;}
.login-footer{font-size:10px;color:var(--muted-light);text-align:center;}

/* ══════════════════════════════════════════════
   DASHBOARD SCREEN
══════════════════════════════════════════════ */
#dashboard-screen{position:fixed;inset:0;background:var(--bg);z-index:9998;display:none;flex-direction:column;}
.dash-header{background:var(--navy);padding:0 var(--sp-7,28px);display:flex;align-items:center;justify-content:space-between;height:56px;}
.dash-logo{font-size:14px;font-weight:700;color:#fff;letter-spacing:.3px;text-transform:uppercase;}
.dash-logo span{font-size:10px;font-weight:400;color:rgba(255,255,255,.55);margin-left:8px;letter-spacing:.5px;text-transform:uppercase;}
.dash-user{display:flex;align-items:center;gap:10px;font-size:12px;color:rgba(255,255,255,.6);}
.dash-user strong{color:#fff;font-weight:600;}
.dash-logout{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.8);font-size:11px;padding:5px 12px;border-radius:6px;cursor:pointer;font-family:var(--font);transition:all .15s;}
.dash-logout:hover{background:rgba(255,255,255,.18);color:#fff;}
.dash-body{flex:1;overflow-y:auto;padding:var(--sp-10) 48px;display:flex;flex-direction:column;gap:var(--sp-8);max-width:1100px;width:100%;margin:0 auto;box-sizing:border-box;}
.dash-welcome{display:flex;flex-direction:column;gap:var(--sp-1);}
.dash-welcome-title{font-size:24px;font-weight:700;color:var(--text);letter-spacing:-.4px;}
.dash-welcome-sub{font-size:14px;color:var(--muted);}
.dash-section-title{font-size:11px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted);font-weight:600;margin-bottom:var(--sp-3);}
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;}
.dash-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;cursor:pointer;transition:all .2s;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);}
.dash-card:hover{border-color:var(--navy);box-shadow:var(--shadow);transform:translateY(-1px);}
.dash-card.disabled{opacity:.4;cursor:not-allowed;pointer-events:none;}
.dash-card-icon{font-size:20px;width:40px;height:40px;background:var(--bg);border-radius:10px;display:flex;align-items:center;justify-content:center;}
.dash-card-title{font-size:13px;font-weight:600;color:var(--text);}
.dash-card-sub{font-size:11px;color:var(--muted);line-height:1.4;}
.dash-projects{display:flex;flex-direction:column;gap:8px;}
.proj-item{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 18px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;transition:all .15s;box-shadow:var(--shadow-sm);}
.proj-item:hover{border-color:var(--navy);box-shadow:var(--shadow);}
.proj-item-info{display:flex;flex-direction:column;gap:3px;}
.proj-item-name{font-size:13px;font-weight:600;color:var(--text);}
.proj-item-meta{font-size:11px;color:var(--muted);}
.proj-item-actions{display:flex;gap:7px;}
.proj-btn{background:transparent;border:1px solid var(--border);color:var(--muted);font-size:11px;padding:4px 10px;border-radius:5px;cursor:pointer;font-family:var(--font);transition:all .15s;}
.proj-btn:hover{border-color:var(--navy);color:var(--navy);}
.proj-btn.del:hover{border-color:var(--red);color:var(--red);}
.dash-empty{font-size:12px;color:var(--muted);padding:20px;text-align:center;background:var(--surface);border:1px dashed var(--border);border-radius:10px;}

/* ══════════════════════════════════════════════
   USERS PANEL
══════════════════════════════════════════════ */
#users-panel{position:fixed;inset:0;background:rgba(17,24,39,.5);backdrop-filter:blur(4px);z-index:9999;display:none;align-items:center;justify-content:center;}
#users-panel.open{display:flex;}
.users-modal{background:var(--surface);border:1px solid var(--border);border-radius:14px;width:100%;max-width:580px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);}
.users-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border);background:var(--bg);}
.users-head h2{font-size:14px;font-weight:700;color:var(--text);}
.users-close{background:none;border:1px solid var(--border);color:var(--muted);font-size:16px;cursor:pointer;line-height:1;padding:3px 8px;border-radius:5px;}
.users-body{flex:1;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:8px;}
.user-row{display:flex;align-items:center;justify-content:space-between;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:11px 14px;}
.user-row-info{display:flex;flex-direction:column;gap:2px;}
.user-row-name{font-size:13px;font-weight:600;color:var(--text);}
.user-row-meta{font-size:10px;color:var(--muted);}
.user-row-actions{display:flex;gap:6px;align-items:center;}
.ubadge{font-size:9px;font-weight:600;padding:2px 8px;border-radius:100px;letter-spacing:.3px;}
.ubadge.admin{background:var(--gold-bg);color:var(--gold);}
.ubadge.active{background:var(--green-bg);color:var(--green);}
.ubadge.inactive{background:var(--red-bg);color:var(--red);}
.users-add{border-top:1px solid var(--border);padding:16px 22px;display:flex;flex-direction:column;gap:10px;background:var(--bg);}
.users-add-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-weight:600;}
.users-add-row{display:flex;gap:7px;}
.users-add-row input,.users-add-row select{flex:1;background:var(--surface);border:1px solid var(--border);color:var(--text);font-size:12px;padding:7px 10px;border-radius:6px;outline:none;font-family:var(--font);}
.users-add-row input:focus,.users-add-row select:focus{border-color:var(--navy);}
.users-add-row select option{background:#fff;}

/* ══════════════════════════════════════════════
   APP BAR — Platform Shell
══════════════════════════════════════════════ */
#app-bar {
  display: none;
  background: var(--navy);
  padding: 0 var(--sp-5);
  align-items: center;
  justify-content: space-between;
  height: 40px;
  position: sticky;
  top: 0;
  z-index: 200;
}
#app-bar.visible { display: flex; }
.app-bar-brand {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .9;
}
.app-bar-sep { color: rgba(255,255,255,.3); margin: 0 var(--sp-2); font-size: 14px; }
.app-bar-proj {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
}
.app-bar-left { display: flex; align-items: center; }
.app-bar-right { display: flex; gap: var(--sp-2); align-items: center; }
.app-bar-btn {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-family: var(--font);
  transition: all .15s;
}
.app-bar-btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.35); color: #fff; }
.app-bar-btn.ghost { background: transparent; border-color: transparent; color: rgba(255,255,255,.55); }
.app-bar-btn.ghost:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); border-color: transparent; }

/* ══════════════════════════════════════════════
   PROJECTS MODAL
══════════════════════════════════════════════ */
#projects-modal{position:fixed;inset:0;background:rgba(17,24,39,.5);backdrop-filter:blur(4px);z-index:9999;display:none;align-items:center;justify-content:center;}
#projects-modal.open{display:flex;}
.proj-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:620px;max-height:80vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);}
.proj-modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border);background:var(--bg);}
.proj-modal-head h2{font-size:14px;font-weight:700;color:var(--text);}
.proj-modal-close{background:none;border:1px solid var(--border);color:var(--muted);font-size:16px;cursor:pointer;line-height:1;padding:3px 8px;border-radius:5px;transition:all .15s;font-family:var(--font);}
.proj-modal-close:hover{color:var(--text);border-color:var(--text);}
.proj-modal-body{flex:1;overflow-y:auto;padding:16px 22px;display:flex;flex-direction:column;gap:8px;}
.proj-modal-footer{padding:12px 22px;border-top:1px solid var(--border);background:var(--bg);display:flex;justify-content:flex-end;}
.proj-modal-empty{font-size:13px;color:var(--muted);text-align:center;padding:32px 16px;}
@media(max-width:1100px){
  .main { grid-template-columns: 1fr 260px; }
}
@media(max-width:960px){
  .main { grid-template-columns: 1fr; }
  .kpi-strip { grid-template-columns: repeat(3,1fr); }
  .pl-grid { grid-template-columns: 1fr 1fr; }
  .sidebar { border-left: none; border-top: 1px solid var(--border); max-height: none; position: static; }
  .dash-body { padding: var(--sp-6) var(--sp-5); }
  .proj-overview { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   v8.2 — PROJECT WORKSPACE
══════════════════════════════════════════════ */
.status-pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;padding:3px 9px;border-radius:100px;letter-spacing:.3px;white-space:nowrap;}
.status-idea{background:var(--blue-bg);color:var(--blue);}
.status-negotiation{background:var(--amber-bg);color:var(--amber);}
.status-won{background:var(--green-bg);color:var(--green);}
.status-lost{background:var(--red-bg);color:var(--red);}
.status-dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
#new-project-modal{position:fixed;inset:0;background:rgba(17,24,39,.5);backdrop-filter:blur(4px);z-index:9999;display:none;align-items:center;justify-content:center;}
#new-project-modal.open{display:flex;}
.np-modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);width:100%;max-width:580px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--shadow-lg);}
.np-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border);background:var(--bg);}
.np-modal-head h2{font-size:14px;font-weight:700;color:var(--text);}
.np-modal-body{flex:1;overflow-y:auto;padding:18px 22px;display:flex;flex-direction:column;gap:14px;}
.np-modal-footer{padding:12px 22px;border-top:1px solid var(--border);background:var(--bg);display:flex;justify-content:flex-end;gap:8px;}
.np-field{display:flex;flex-direction:column;gap:5px;}
.np-label{font-size:11px;font-weight:600;color:var(--text-sec);}
.np-label span{font-size:10px;font-weight:400;color:var(--muted-light);margin-left:4px;}
.np-input{background:var(--bg);border:1px solid var(--border);color:var(--text);font-size:13px;padding:8px 11px;border-radius:6px;outline:none;width:100%;font-family:var(--font);transition:border-color .15s;}
.np-input:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(30,58,95,.08);}
.np-input option{background:#fff;}
.np-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.np-section-label{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--navy);font-weight:600;padding-bottom:6px;border-bottom:1px solid var(--border-light);}
.proj-overview{display:grid;grid-template-columns:1fr 296px;gap:14px;}
.proj-overview-main{display:flex;flex-direction:column;gap:12px;}
.proj-overview-side{display:flex;flex-direction:column;gap:12px;}
.overview-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.overview-card-head{display:flex;align-items:center;justify-content:space-between;padding:9px 14px;background:var(--bg);border-bottom:1px solid var(--border);}
.overview-card-title{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.7px;}
.overview-card-body{padding:10px 14px;display:flex;flex-direction:column;gap:0;}
.meta-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border-light);}
.meta-row:last-child{border-bottom:none;}
.meta-label{font-size:11px;color:var(--muted);}
.meta-value{font-size:12px;font-weight:600;color:var(--text);}
.meta-edit{background:none;border:none;color:var(--muted-light);font-size:11px;cursor:pointer;padding:0 4px;}
.meta-edit:hover{color:var(--navy);}
.overview-kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px;}
.overview-kpi{background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:10px 12px;}
.overview-kpi-label{font-size:9px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin-bottom:4px;font-weight:500;}
.overview-kpi-val{font-size:18px;font-weight:700;color:var(--text);}
.overview-kpi-sub{font-size:10px;color:var(--muted);margin-top:2px;}
.prob-bar-wrap{padding:10px 14px;border-top:1px solid var(--border-light);}
.prob-bar-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin-bottom:5px;}
.prob-bar-track{height:5px;background:var(--border);border-radius:3px;overflow:hidden;}
.prob-bar-fill{height:100%;border-radius:3px;background:var(--navy);transition:width .4s;}
.notes-area{display:flex;flex-direction:column;gap:10px;}
.notes-composer{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.notes-composer-head{padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.notes-composer-label{font-size:10px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:600;}
.notes-textarea{width:100%;background:var(--surface);border:none;color:var(--text);font-size:13px;padding:12px 14px;font-family:var(--font);resize:vertical;min-height:80px;outline:none;line-height:1.6;}
.notes-composer-footer{padding:8px 12px;border-top:1px solid var(--border);background:var(--bg);display:flex;justify-content:flex-end;}
.note-entry{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;}
.note-entry-head{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;background:var(--bg);border-bottom:1px solid var(--border-light);}
.note-date{font-size:11px;font-weight:600;color:var(--navy);}
.note-author{font-size:10px;color:var(--muted);}
.note-del{background:none;border:none;color:var(--muted-light);font-size:13px;cursor:pointer;padding:0 3px;font-family:var(--font);line-height:1;}
.note-del:hover{color:var(--red);}
.note-body{padding:10px 14px;font-size:13px;color:var(--text-sec);line-height:1.6;white-space:pre-wrap;}
.notes-empty{font-size:13px;color:var(--muted);text-align:center;padding:28px;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);}
.docs-area{display:flex;flex-direction:column;gap:12px;}
.doc-add-row{display:flex;gap:8px;align-items:flex-end;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow-sm);}
.doc-add-row .np-input{flex:1;}
.doc-list{display:flex;flex-direction:column;gap:6px;}
.doc-item{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;display:flex;align-items:center;justify-content:space-between;box-shadow:var(--shadow-sm);}
.doc-item-left{display:flex;align-items:center;gap:10px;}
.doc-icon{font-size:15px;width:24px;text-align:center;color:var(--muted);}
.doc-name{font-size:13px;font-weight:500;color:var(--text);}
.doc-type-badge{font-size:9px;font-weight:600;padding:1px 6px;border-radius:4px;background:var(--blue-bg);color:var(--blue);margin-left:6px;letter-spacing:.3px;}
.doc-actions{display:flex;gap:6px;}
.docs-empty{font-size:13px;color:var(--muted);text-align:center;padding:28px;background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius);}
.app-bar-status{font-size:10px;padding:2px 7px;border-radius:100px;font-weight:600;margin-left:6px;}
.abs-idea{background:rgba(37,99,235,.25);color:#93C5FD;}
.abs-negotiation{background:rgba(217,119,6,.25);color:#FCD34D;}
.abs-won{background:rgba(5,150,105,.25);color:#6EE7B7;}
.abs-lost{background:rgba(220,38,38,.25);color:#FCA5A5;}