:root{
  --crimson:#8C1515; --crimson-d:#6b0f0f; --ivory:#F7F4EF; --charcoal:#2A2A28;
  --gold:#B08D3C; --line:#E4DDD1; --paper:#FFFFFF; --muted:#7A7268;
  --green:#2E7D46; --amber:#B7791F; --red:#B4232C;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--ivory);color:var(--charcoal);font-family:Georgia,'Times New Roman',serif;line-height:1.5}
.wrap{display:flex;min-height:100vh}
.side{width:210px;background:var(--charcoal);color:var(--ivory);flex:none;padding:0 0 20px}
.side .brand{padding:18px 20px;border-bottom:1px solid #444;font-size:15px;letter-spacing:.5px}
.side .brand b{color:var(--gold)}
.side nav a{display:block;padding:11px 20px;color:#D9D2C7;text-decoration:none;font-size:14px;border-left:3px solid transparent}
.side nav a:hover{background:#33322f;color:#fff}
.side nav a.on{background:#3a1010;color:#fff;border-left-color:var(--gold)}
.side .foot{padding:16px 20px;font-size:11px;color:#8a8378;margin-top:20px}
.main{flex:1;padding:0 0 40px;min-width:0}
.top{background:var(--crimson);color:var(--ivory);padding:14px 28px;display:flex;justify-content:space-between;align-items:center}
.top h1{font-size:19px;font-weight:normal;letter-spacing:.5px}
.top .who{font-size:12px;opacity:.85}
.top a{color:var(--ivory);text-decoration:underline;font-size:12px}
.cont{padding:24px 28px;max-width:1200px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.kpi{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--crimson);border-radius:6px;padding:14px 16px}
.kpi .lbl{font-size:11px;letter-spacing:.6px;color:var(--muted);text-transform:uppercase;font-family:Arial,sans-serif}
.kpi .n{font-size:30px;font-weight:bold;line-height:1.2;margin-top:4px}
.kpi.gold{border-top-color:var(--gold)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:16px 18px;margin-bottom:18px}
.card h2{font-size:13px;letter-spacing:.6px;text-transform:uppercase;color:var(--crimson);font-family:Arial,sans-serif;margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:8px}
.cmd{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #F0EBE1;font-size:14px}
.cmd:last-child{border:none}
.cmd .pri{font-family:Arial,sans-serif;font-size:10px;padding:2px 8px;border-radius:10px;color:#fff;flex:none}
.pri.Tinggi{background:var(--red)} .pri.Sedang{background:var(--amber)} .pri.Rendah{background:var(--muted)}
.cmd .t{flex:none;font-weight:bold;min-width:220px}
.cmd .d{color:var(--muted);flex:1}
.cmd .n{font-weight:bold;font-size:18px;color:var(--crimson)}
.cmd a{color:var(--crimson);font-size:12px;font-family:Arial,sans-serif}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{font-family:Arial,sans-serif;font-size:11px;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
tr:hover td{background:#FBF8F2}
.tag{font-family:Arial,sans-serif;font-size:10px;padding:2px 7px;border-radius:4px;background:#EFE9DD;color:var(--charcoal)}
.tag.dnc{background:#F6DADA;color:var(--red)} .tag.rev{background:#FBECCB;color:var(--amber)}
.btn{background:var(--crimson);color:#fff;border:none;padding:8px 16px;border-radius:5px;font-family:Arial,sans-serif;font-size:13px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{background:var(--crimson-d)} .btn.ghost{background:#fff;color:var(--crimson);border:1px solid var(--crimson)}
.btn.gold{background:var(--gold)} .btn.sm{padding:4px 10px;font-size:12px}
.row{display:flex;gap:14px;flex-wrap:wrap} .row>*{flex:1;min-width:180px}
label{font-family:Arial,sans-serif;font-size:12px;color:var(--muted);display:block;margin-bottom:4px}
input,select{width:100%;padding:8px;border:1px solid var(--line);border-radius:5px;font-family:Arial,sans-serif;font-size:13px;background:#fff}
.muted{color:var(--muted);font-size:12px}
.pill{display:inline-block;padding:2px 8px;border-radius:10px;font-family:Arial,sans-serif;font-size:11px}
.ok{background:#DEF0E2;color:var(--green)} .warn{background:#FBECCB;color:var(--amber)} .bad{background:#F6DADA;color:var(--red)}
.stat-row{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0}
.stat-row .s{background:#FBF8F2;border:1px solid var(--line);border-radius:5px;padding:8px 14px;font-family:Arial,sans-serif;font-size:13px}
.stat-row .s b{font-size:20px;display:block;color:var(--crimson)}
.login{max-width:360px;margin:8vh auto;background:#fff;border:1px solid var(--line);border-top:4px solid var(--crimson);border-radius:8px;padding:28px}
.login h1{color:var(--crimson);font-size:20px;margin-bottom:4px}
.err{background:#F6DADA;color:var(--red);padding:8px 12px;border-radius:5px;font-family:Arial,sans-serif;font-size:13px;margin:10px 0}
code{font-family:Consolas,monospace;font-size:12px;background:#F0EBE1;padding:1px 5px;border-radius:3px}
@media(max-width:820px){.kpis{grid-template-columns:1fr 1fr}.side{width:64px}.side .brand,.side nav a span,.side .foot{display:none}}

/* nav groups + halaman bisnis (19 Agu 2026) */
.side nav .ngrp{padding:12px 20px 4px;font-family:Arial,sans-serif;font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:#7d766b}
.side nav .ngrp:first-child{padding-top:8px}
.pill.hot,.pill.merah{background:#F6DADA;color:#8C1515}
.pill.warm,.pill.kuning{background:#F6ECCF;color:#8a6d1c}
.pill.cold,.pill.biru{background:#D9E6F2;color:#1f4e79}
.pill.hijau,.pill.ok{background:#DDEEE1;color:#2E7D46}
.pill.abu{background:#ECE7DE;color:#7A7268}
.pill.bad{background:#F6DADA;color:#8C1515}
.pill.warn{background:#F6ECCF;color:#8a6d1c}
.bar{height:9px;background:#EEE8DC;border-radius:5px;overflow:hidden;margin-top:5px}
.bar > i{display:block;height:100%;background:var(--green)}
.bar > i.over{background:var(--gold)}
.bar > i.low{background:var(--amber)}
.reco{background:#FBF8F2;border-left:3px solid var(--gold);padding:8px 12px;font-size:13px;margin-top:6px;font-family:Arial,sans-serif}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tag{font-family:Arial,sans-serif;font-size:11px;color:var(--muted)}
.big{font-size:26px;font-weight:bold;color:var(--crimson)}
.mini{font-family:Arial,sans-serif;font-size:12px}
.chk{display:inline-flex;gap:6px;align-items:center;font-family:Arial,sans-serif;font-size:13px;margin:3px 0}
label{display:block;font-family:Arial,sans-serif;font-size:12px;color:var(--muted);margin-bottom:3px;margin-top:8px}
.result{background:#FBF8F2;border:1px solid var(--line);border-radius:6px;padding:14px 16px}
.result table td{border-bottom:1px dashed var(--line)}
@media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}}

/* ===== Restrukturisasi 5 halaman (19 Agu 2026) ===== */
.side nav a{padding:12px 18px}
.side nav a span{display:block;font-size:14px}
.side nav a em{display:block;font-style:normal;font-family:Arial,sans-serif;font-size:10.5px;
  color:#8a8378;margin-top:2px;line-height:1.35}
.side nav a.on em{color:#c9b98f}

/* tab bar dalam halaman */
.tabbar{background:#fff;border-bottom:1px solid var(--line);padding:0 28px;display:flex;gap:2px;overflow-x:auto}
.tabbar a{padding:11px 16px;font-family:Arial,sans-serif;font-size:13px;color:var(--muted);
  text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.tabbar a:hover{color:var(--charcoal);background:#FBF8F2}
.tabbar a.on{color:var(--crimson);border-bottom-color:var(--crimson);font-weight:bold}

/* antrean kerja di Command */
.antre{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid #F0EBE1}
.antre:last-child{border:none}
.antre .dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:6px}
.antre .dot.merah{background:var(--red)} .antre .dot.kuning{background:var(--amber)}
.antre .dot.hijau{background:var(--green)} .antre .dot.abu{background:var(--muted)}
.antre .isi{flex:1;min-width:0}
.antre .jd{font-size:14px;font-weight:bold}
.antre .dt{font-family:Arial,sans-serif;font-size:12px;color:var(--muted);margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.antre .knp{font-family:Arial,sans-serif;font-size:10px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);background:#F0EBE1;padding:2px 7px;border-radius:3px;flex:none}
.antre .act{flex:none}

/* Lead workspace */
.ws{display:grid;grid-template-columns:1.15fr 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.ws{grid-template-columns:1fr}}
.ws-next{background:#FBF8F2;border-left:4px solid var(--crimson);padding:12px 16px;margin-bottom:16px;border-radius:0 6px 6px 0}
.ws-next.merah{border-left-color:var(--red);background:#FDF3F3}
.ws-next.kuning{border-left-color:var(--amber);background:#FEFAF0}
.ws-next.hijau{border-left-color:var(--green);background:#F4FAF6}
.ws-next .lbl{font-family:Arial,sans-serif;font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.ws-next .aksi{font-size:17px;font-weight:bold;margin-top:3px}
.chat{max-height:340px;overflow-y:auto;padding:6px 2px;background:#FBF8F2;border-radius:6px}
.bub{max-width:78%;padding:8px 12px;border-radius:12px;margin:6px 8px;font-size:13px;
  font-family:Arial,sans-serif;line-height:1.45;word-wrap:break-word}
.bub.in{background:#fff;border:1px solid var(--line);border-bottom-left-radius:3px}
.bub.out{background:#DDEEE1;margin-left:auto;border-bottom-right-radius:3px}
.bub .w{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.jalur{display:flex;gap:3px;margin:10px 0 14px;font-family:Arial,sans-serif;font-size:9.5px}
.jalur i{flex:1;text-align:center;padding:5px 2px;background:#EEE8DC;color:var(--muted);
  font-style:normal;border-radius:3px;letter-spacing:.2px}
.jalur i.done{background:#D8E6DC;color:var(--green)}
.jalur i.now{background:var(--crimson);color:#fff;font-weight:bold}
textarea{width:100%;padding:9px;border:1px solid var(--line);border-radius:5px;
  font-family:Arial,sans-serif;font-size:13px;background:#fff;line-height:1.5;resize:vertical}
.needs{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0}
.sev{font-family:Arial,sans-serif;font-size:10px;padding:2px 7px;border-radius:3px;flex:none}
.sev.tinggi{background:#F6DADA;color:#8C1515} .sev.sedang{background:#F6ECCF;color:#8a6d1c}
.sev.info{background:#E4EAF0;color:#37536e} .sev.baik{background:#DDEEE1;color:#2E7D46}
.funnel{display:flex;gap:6px;margin:10px 0;font-family:Arial,sans-serif;font-size:11px;flex-wrap:wrap}
.funnel div{background:#FBF8F2;border:1px solid var(--line);border-radius:5px;padding:7px 11px;flex:1;min-width:78px}
.funnel b{display:block;font-size:17px;color:var(--crimson)}
.funnel .drop{color:var(--red);font-size:10px}
.warnbox{background:#FDF3F3;border-left:4px solid var(--red);padding:11px 15px;margin:10px 0;
  font-family:Arial,sans-serif;font-size:13px;border-radius:0 5px 5px 0}
.okbox{background:#F4FAF6;border-left:4px solid var(--green);padding:11px 15px;margin:10px 0;
  font-family:Arial,sans-serif;font-size:13px;border-radius:0 5px 5px 0}
.infobox{background:#F5F7FA;border-left:4px solid #5b7c9d;padding:11px 15px;margin:10px 0;
  font-family:Arial,sans-serif;font-size:13px;border-radius:0 5px 5px 0}

/* ---------- Monitor Mentor ---------- */
.avatar{width:38px;height:38px;flex:none;border-radius:50%;background:var(--crimson);
  color:var(--ivory);display:flex;align-items:center;justify-content:center;
  font-family:Arial,sans-serif;font-size:14px;letter-spacing:.5px;font-weight:bold}

/* Layar 375px: tabel lebar (daftar klien, KPI 11 kolom) tidak boleh memaksa
   seluruh halaman menggulir ke samping — yang menggulir cukup tabelnya. */
@media(max-width:640px){
  .card table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .stat-row{flex-wrap:wrap}
  .stat-row .s{min-width:calc(50% - 8px)}
  #modalIns .card{max-height:96vh}
  .tabbar{overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
}

/* Aturan lama menyembunyikan `.side nav a span` — padahal span itu JUDUL menunya,
   sedangkan keterangan panjang ada di <em>. Akibatnya di layar sempit yang
   tersisa justru kalimat panjangnya, terjepit di rel 64px. Dibalik ke yang benar. */
@media(max-width:820px){
  .side nav a span{display:inline}
  .side nav a em{display:none}
}

/* Di bawah 640px rel samping tidak lagi masuk akal: menu dijadikan bilah atas
   yang bisa digeser, supaya lebar layar sepenuhnya milik isi halaman. */
@media(max-width:640px){
  .wrap{flex-direction:column}
  .side{width:100%;padding:0}
  .side .brand{display:block;padding:11px 14px;font-size:13px;border-bottom:1px solid #444}
  .side nav{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .side nav a{white-space:nowrap;padding:10px 14px;border-left:none;
    border-bottom:3px solid transparent}
  .side nav a.on{border-left-color:transparent;border-bottom-color:var(--gold)}
  .side nav .ngrp,.side .foot{display:none}
  .main{width:100%;min-width:0}
}

/* ===== Elon Lean Patch 24 Agu 2026 ===== */
/* Tombol AIRA ungu di row leads */
.btn-aira-row{background:#7B5EA7;color:#fff;border:none;padding:3px 8px;border-radius:4px;
  font-size:11px;font-weight:700;cursor:pointer}
.btn-aira-row:hover{background:#6b4e97}

/* Unified Lead shell — one visual system for dashboard and lead workspace. */
.unified-shell{--crimson:#175cd3;--crimson-d:#134aa5;--ivory:#f6f7f9;--charcoal:#17202a;
  --gold:#175cd3;--line:#e3e7ec;--paper:#fff;--muted:#66717f;--green:#067647;
  --amber:#b54708;--red:#b42318;background:#f6f7f9!important;color:#17202a!important;
  font-family:Inter,"Segoe UI",Arial,sans-serif;margin:0}
.u-top{height:58px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;padding:0 max(18px,calc((100% - 1120px)/2))}
.u-brand{display:flex;align-items:center;gap:8px;color:#17202a;text-decoration:none}.u-brand b{background:#175cd3;
  color:#fff;padding:5px 8px;border-radius:7px;font-size:12px;letter-spacing:.08em}.u-brand span{font-weight:750}
.u-state{display:flex;align-items:center;gap:16px;color:#66717f;font-size:12px}.u-state a{color:#175cd3}
.u-nav{height:48px;background:#fff;border-bottom:1px solid var(--line);display:flex;gap:4px;overflow:auto;
  padding:0 max(10px,calc((100% - 1120px)/2));position:sticky;top:0;z-index:5}
.u-nav a{display:flex;align-items:center;padding:0 14px;color:#66717f;text-decoration:none;font-weight:650;
  white-space:nowrap;border-bottom:3px solid transparent}.u-nav a.on{color:#175cd3;border-bottom-color:#175cd3}
.u-main{max-width:1120px;margin:0 auto;padding:24px 20px 64px}.u-pagehead{display:flex;justify-content:space-between;
  align-items:center;margin:0 0 14px}.u-pagehead h1{font:750 24px/1.2 Inter,"Segoe UI",Arial,sans-serif;margin:0}
.u-pagehead>a{font-size:12px;color:#175cd3}.unified-shell .cont{padding:0;max-width:none}
.unified-shell .card{border-radius:12px;border-color:#e3e7ec;box-shadow:0 1px 2px rgba(16,24,40,.05);padding:16px}
.unified-shell .card h2{color:#344054;font-size:12px;border-color:#e3e7ec}
.unified-shell .ws-next{background:#fff;border:1px solid #b2ccff;border-left:5px solid #175cd3;border-radius:12px;
  padding:16px 18px}.unified-shell .ws-next.merah{border-left-color:#b42318;background:#fef3f2}
.unified-shell .ws-next.kuning{border-left-color:#b54708;background:#fffaeb}.unified-shell .ws-next.hijau{border-left-color:#067647;background:#ecfdf3}
.unified-shell .jalur i{background:#f2f4f7;color:#66717f;border-radius:6px}.unified-shell .jalur i.done{background:#ecfdf3;color:#067647}
.unified-shell .jalur i.now{background:#175cd3;color:#fff}.unified-shell .stat-row .s{background:#fff;border-color:#e3e7ec;border-radius:9px}
.unified-shell .stat-row .s b{color:#17202a}.unified-shell .btn{background:#175cd3;border-radius:8px;font-family:Inter,"Segoe UI",Arial,sans-serif}
.unified-shell .btn:hover{background:#134aa5}.unified-shell .btn.ghost{background:#fff;color:#175cd3;border-color:#b2ccff}
.unified-shell input,.unified-shell select,.unified-shell textarea{border-color:#d0d5dd;border-radius:8px;font-family:Inter,"Segoe UI",Arial,sans-serif}
.unified-shell .chat{background:#f8fafc}.unified-shell .bub{font-family:Inter,"Segoe UI",Arial,sans-serif}.unified-shell .bub.out{background:#eaf2ff}
.unified-shell .reco,.unified-shell .result{background:#f8fafc}.unified-shell .big{color:#175cd3}
@media(max-width:760px){.u-state span{display:none}.u-top{padding:0 14px}.u-nav{padding:0 4px}.u-nav a{padding:0 11px}
  .u-main{padding:18px 12px 48px}.u-pagehead{align-items:flex-start}.u-pagehead h1{font-size:20px}.unified-shell .ws{grid-template-columns:1fr}}
/* Card h2 collapsible: cursor pointer sudah inline */
/* r2: submenu Sales di HQ */
.u-nav .u-sublabel{display:inline-flex;align-items:center;padding:0 6px 0 10px;color:#a51c30;font-size:11px;font-weight:800;letter-spacing:.08em;white-space:nowrap}

/* r2c: submenu Sales di bawah nav HQ */
.u-nav.u-sub{background:#faf6f1;font-size:13px}.u-nav.u-sub a{font-weight:600;padding-top:8px;padding-bottom:8px}
/* r2c: workspace lead di layar sempit — jangan melebarkan viewport */
@media(max-width:760px){html,body{max-width:100vw;overflow-x:hidden}.u-main{max-width:100vw;overflow-x:hidden}.jalur{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}.jalur>*{flex:0 0 auto}.chat .bub{max-width:88%}.u-main table{display:block;overflow-x:auto;max-width:100%}.u-main pre,.u-main textarea{max-width:100%}}