/* Indobox shared theme — token warna dari /tokens.css (sumber: shared/ui/tokens.css) */
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg-grad,var(--bg));color:var(--text);min-height:100vh}
a{color:var(--gold);text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:24px}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px;border-bottom:1px solid var(--line);background:rgba(20,22,28,.7);backdrop-filter:blur(8px);
  position:sticky;top:0;z-index:10}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.3px}
.muted{color:var(--muted)}
.small{font-size:13px}

/* cards / panels */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.pad{padding:22px}
h1{font-size:22px;margin:.2em 0}
h2{font-size:17px;margin:.2em 0}
h3{font-size:14px;margin:.2em 0;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
label{display:block;font-size:13px;color:var(--muted);margin:12px 0 6px}
input,select,textarea{width:100%;padding:11px 12px;background:var(--panel-2);border:1px solid var(--line);
  border-radius:10px;color:var(--text);font-size:14px;outline:none}
input:focus,select:focus,textarea:focus{border-color:var(--gold)}
textarea{min-height:74px;resize:vertical}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:11px 16px;border-radius:10px;
  border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-weight:600;cursor:pointer;font-size:14px}
.btn:hover{border-color:var(--gold)}
.btn.primary{background:linear-gradient(180deg,var(--gold),var(--gold-d));border:none;color:#231a05}
.btn.danger{background:transparent;border-color:var(--red);color:#ff9a9d}
.btn.ghost{background:transparent}
.btn.block{width:100%}
.btn.small{padding:7px 12px;font-size:13px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.4px}
tr:hover td{background:rgba(255,255,255,.02)}

/* badges */
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px}
.b-baru{background:#2a2e3a;color:#c7ccd9}
.b-screening{background:#1d2a3a;color:#8fd0ff}
.b-presentasi{background:#2a2340;color:#c9b8ff}
.b-booking{background:#3a2f12;color:var(--gold)}
.b-survey{background:#0f2e33;color:#7adfd0}
.b-deal{background:#11331c;color:#7ee0a0}
.b-batal{background:#3a1416;color:#ff9a9d}
.b-go{background:#11331c;color:#7ee0a0}
.b-hold{background:#3a2f12;color:var(--gold)}
.b-nogo{background:#3a1416;color:#ff9a9d}
.b-paid{background:#11331c;color:#7ee0a0}
.b-unpaid{background:#2a2e3a;color:#c7ccd9}
.b-late{background:#3a1416;color:#ff9a9d}

.row{display:flex;gap:12px;flex-wrap:wrap}
.row>*{flex:1;min-width:160px}
.err{color:#ff9a9d;font-size:13px;margin-top:10px;min-height:18px}
.ok{color:#7ee0a0}
.sp{height:14px}
.right{text-align:right}
.subtitle{margin-top:-6px;margin-bottom:8px}
hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.kpi .card{padding:16px}
.kpi .v{font-size:22px;font-weight:800}
.kpi .l{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.4px}

/* ── kanban board ─────────────────────────────────────────────────────────── */
.board{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px;align-items:flex-start;
  scroll-snap-type:x proximity}
.col{flex:0 0 250px;scroll-snap-align:start;background:rgba(255,255,255,.02);
  border:1px solid var(--line);border-radius:var(--radius);padding:10px;min-height:120px}
.col .col-h{display:flex;justify-content:space-between;align-items:center;padding:4px 6px 10px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}
.col .col-h .n{background:var(--panel-2);border-radius:999px;padding:2px 8px;font-size:11px}
.col.won{border-color:#1e4a2b}
.lead-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px;
  margin-bottom:10px;cursor:pointer;transition:.12s}
.lead-card:hover{border-color:var(--gold);transform:translateY(-1px)}
.lead-card .nm{font-weight:700;font-size:14px}
.lead-card .co{color:var(--muted);font-size:12px;margin-top:2px}
.lead-card .meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}
.lead-card .val{font-size:12px;font-weight:700;color:var(--gold)}
.lead-card .fu{font-size:11px;color:var(--muted)}
.lead-card .fu.late{color:#ff9a9d;font-weight:700}
.col-total{font-size:12px;font-weight:700;color:var(--gold);padding:0 6px 10px;
  font-variant-numeric:tabular-nums}

/* stage progress bar di detail lead (pola monday: segmen panah) */
.stagebar{display:flex;gap:3px;margin:14px 0 4px;overflow-x:auto}
.stagebar .seg{flex:1;min-width:70px;text-align:center;font-size:11px;font-weight:700;
  padding:7px 4px;background:var(--panel-2);color:var(--muted);white-space:nowrap;
  clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%, 8px 50%)}
.stagebar .seg:first-child{clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 0 100%)}
.stagebar .seg.done{background:#2c4a2f;color:#9fe0ae}
.stagebar .seg.now{background:linear-gradient(180deg,var(--gold),var(--gold-d));color:#231a05}
.stagebar.lost .seg{background:#3a1416;color:#ff9a9d;clip-path:none;border-radius:8px}

/* timeline aktivitas */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.tl li:last-child{border-bottom:none}
.tl .ic{flex:none;width:32px;height:32px;border-radius:50%;background:var(--panel-2);
  display:grid;place-items:center;font-size:15px}
.tl .bd{flex:1;min-width:0}
.tl .who{font-size:12px;color:var(--muted)}

/* checklist dokumen */
.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.doc{border:1px dashed var(--line);border-radius:10px;padding:12px;text-align:center;font-size:13px}
.doc.have{border-style:solid;border-color:#1e4a2b}
.doc .st{display:block;font-size:11px;margin-top:4px;color:var(--muted)}
.doc.have .st{color:#7ee0a0}

/* modal */
#modal:empty{display:none}
#modal{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:50;display:grid;place-items:center;padding:16px}
#modal .box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);width:100%;max-width:460px;max-height:90vh;overflow:auto;padding:22px}

/* funnel bar dashboard */
.funnel .frow{display:flex;align-items:center;gap:10px;margin:6px 0}
.funnel .fl{flex:0 0 110px;font-size:12px;color:var(--muted);text-align:right}
.funnel .fb{height:22px;border-radius:6px;background:linear-gradient(180deg,var(--gold),var(--gold-d));min-width:4px}
.funnel .fn{font-size:12px;font-weight:700}

/* ── mobile (≤640px) — pola .t-stack reimburse ───────────────────────────── */
@media (max-width:640px){
  .wrap{padding:14px}
  h1{font-size:20px}
  .btn{min-height:44px}
  input,select,textarea{min-height:44px}
  .topbar{padding:12px 14px}
  .topbar #who{display:none}
  .row > h1{flex-basis:100% !important}
  .row > .btn{flex:0 0 auto !important;min-width:0}
  .subtitle{margin-top:4px}
  .kpi{grid-template-columns:1fr 1fr}
  .col{flex:0 0 82vw}

  .card.t-wrap{background:transparent;border:none;box-shadow:none;overflow:visible;padding:0}
  table.t-stack thead{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0)}
  table.t-stack tr{display:block;background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px;padding:4px 14px}
  table.t-stack td{display:flex;justify-content:space-between;align-items:center;gap:16px;
    border:none;border-bottom:1px solid var(--line);padding:11px 0;text-align:right;min-height:44px;font-size:14px}
  table.t-stack tr td:last-child{border-bottom:none}
  table.t-stack td::before{content:attr(data-label);color:var(--muted);font-size:11px;font-weight:600;
    text-transform:uppercase;letter-spacing:.4px;text-align:left;flex:none;align-self:center}
  table.t-stack td:empty{display:none}
  table.t-stack .t-hide{display:none}
}