/* ==================================================================
   MIG Invoice Automation
   Sistem desain : DESIGN-miro.md
   Struktur      : wireframe needmcp "dashboard-sidebar-overview"
   Penyimpangan  : Miro berbasis kuning (#ffd02f). Permintaan klien
                   dominan hijau, jadi keluarga hijau milik Miro
                   (success-accent / brand-teal / moss-dark) dinaikkan
                   ke posisi dominan. Kuning turun jadi aksen kecil.
   Font          : Roobert PRO proprietary → Plus Jakarta Sans.
                   Bukan Inter — Inter adalah font default yang bikin
                   antarmuka terasa generik.
   ================================================================== */

:root{
  /* hijau — dominan */
  --brand:#00b473;
  --brand-deep:#00915d;
  --brand-moss:#187574;
  --brand-teal:#0fbcb0;
  --brand-light:#c3faf5;
  --brand-wash:#e9faf3;

  /* aksen sekunder Miro, dipakai hemat */
  --yellow:#ffd02f;
  --yellow-soft:#fff8e0;
  --blue:#4262ff;
  --coral-soft:#ffc6c6;
  --orange-soft:#ffe6cd;
  --red-soft:#fbd4d4;

  /* tinta */
  --ink-deep:#050038;
  --ink:#1c1c1e;
  --charcoal:#2c2c34;
  --slate:#555a6a;
  --steel:#6b6f7e;
  --stone:#8e91a0;
  --muted:#a5a8b5;

  /* permukaan */
  --canvas:#ffffff;
  --surface:#f7f8fa;
  --surface-soft:#fafbfc;
  --hairline:#e0e2e8;
  --hairline-soft:#eef0f3;
  --hairline-strong:#c7cad5;

  --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-xl:16px; --r-full:9999px;

  --s-xxs:4px; --s-xs:8px; --s-sm:12px; --s-md:16px; --s-lg:20px;
  --s-xl:24px; --s-xxl:32px; --s-xxxl:40px; --s-section:64px;

  --font:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;

  --sidebar-w:256px;
  --topbar-h:64px;
  --t:.16s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--surface);color:var(--slate);
  font-family:var(--font);font-size:14px;font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
ul{margin:0;padding:0;list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* ---------- tipografi ---------- */
.t-h2{font-size:36px;font-weight:600;line-height:1.2;letter-spacing:-.5px;color:var(--ink-deep)}
.t-h3{font-size:28px;font-weight:600;line-height:1.25;letter-spacing:-.4px;color:var(--ink-deep)}
.t-h4{font-size:22px;font-weight:600;line-height:1.3;color:var(--ink-deep)}
.t-h5{font-size:18px;font-weight:600;line-height:1.4;color:var(--ink-deep)}
.t-sub{font-size:18px;color:var(--steel)}
.t-body{font-size:16px}
.t-sm{font-size:14px}
.t-sm-med{font-size:14px;font-weight:500}
.t-cap{font-size:13px;color:var(--steel)}
.t-micro{font-size:12px;font-weight:500}
.t-upper{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--stone)}
.mono{font-family:var(--mono)}
.muted{color:var(--steel)}
.stone{color:var(--stone)}

/* ================= shell ================= */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}

.sidebar{
  background:var(--canvas);border-right:1px solid var(--hairline);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;
}
.sb-brand{display:flex;align-items:center;gap:10px;padding:var(--s-lg) var(--s-md)}
.sb-mark{
  width:36px;height:36px;border-radius:var(--r-md);flex:none;
  background:var(--brand);color:#fff;display:grid;place-items:center;
  font-size:15px;font-weight:700;letter-spacing:-.4px;
}
.sb-eyebrow{display:block;font-size:11px;color:var(--stone);line-height:1.3}
.sb-team{display:block;font-size:14px;font-weight:600;color:var(--ink-deep);line-height:1.35}

.sb-nav{padding:var(--s-xs) var(--s-sm) var(--s-md);flex:1}
.nav-group{margin-top:var(--s-md)}
.nav-group:first-child{margin-top:0}
.nav-label{padding:0 var(--s-sm) var(--s-xs);font-size:11px;font-weight:600;
  letter-spacing:.5px;text-transform:uppercase;color:var(--stone)}
.nav-item{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:9px var(--s-sm);border-radius:var(--r-md);
  color:var(--slate);font-size:14px;font-weight:500;text-align:left;
  transition:background-color var(--t),color var(--t);
}
.nav-item:hover{background:var(--surface);color:var(--ink-deep)}
.nav-item.active{background:var(--brand-wash);color:var(--brand-deep);font-weight:600}
.nav-item .ico{width:18px;height:18px;flex:none;opacity:.85}
.nav-item.active .ico{opacity:1}
.nav-count{margin-left:auto;font-size:11px;font-weight:600;
  background:var(--surface);color:var(--steel);padding:2px 7px;border-radius:var(--r-full)}
.nav-item.active .nav-count{background:var(--brand);color:#fff}
.nav-count.hot{background:var(--red-soft);color:#b42318}

.sb-user{display:flex;align-items:center;gap:10px;margin:var(--s-sm);padding:10px;
  border-radius:var(--r-lg);background:var(--surface)}
.sb-user .who{flex:1;min-width:0}
.sb-user .nm{display:block;font-size:13px;font-weight:600;color:var(--ink-deep);line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-user .rl{display:block;font-size:11px;color:var(--stone)}
.sb-user .chev{color:var(--stone);flex:none;font-size:11px}

/* ---------- header ---------- */
.main{display:flex;flex-direction:column;min-width:0;background:var(--surface)}
.topbar{height:var(--topbar-h);display:flex;align-items:center;gap:var(--s-md);
  padding:0 var(--s-xl);background:var(--canvas);border-bottom:1px solid var(--hairline);
  position:sticky;top:0;z-index:8}
.crumb{font-size:14px;color:var(--stone);display:flex;align-items:center;gap:7px}
.crumb b{color:var(--ink-deep);font-weight:600}
.crumb .sep{color:var(--hairline-strong)}

.search-pill{margin-left:auto;display:flex;align-items:center;gap:9px;
  height:38px;padding:0 var(--s-md);min-width:230px;
  background:var(--surface);border:1px solid transparent;border-radius:var(--r-md);
  color:var(--stone);transition:border-color var(--t),background-color var(--t)}
.search-pill:focus-within{background:var(--canvas);border-color:var(--brand)}
.search-pill input{border:0;background:none;outline:none;font:inherit;font-size:14px;color:var(--ink);width:100%}
.search-pill kbd{font-family:var(--mono);font-size:11px;color:var(--stone);
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-xs);padding:2px 5px}
.icon-btn{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;
  color:var(--steel);transition:background-color var(--t),color var(--t);position:relative}
.icon-btn:hover{background:var(--surface);color:var(--ink-deep)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;
  background:var(--brand);border:2px solid var(--canvas)}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 20px;border-radius:var(--r-md);border:1px solid transparent;
  font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap;
  transition:background-color var(--t),color var(--t),border-color var(--t)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:var(--charcoal)}
.btn-green{background:var(--brand);color:#fff}
.btn-green:hover{background:var(--brand-deep)}
.btn-secondary{background:var(--canvas);color:var(--ink-deep);border-color:var(--hairline)}
.btn-secondary:hover{background:var(--surface)}
.btn-ghost{color:var(--slate);padding:9px 12px}
.btn-ghost:hover{background:var(--surface)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-danger{background:var(--canvas);color:#b42318;border-color:var(--red-soft)}
.btn-danger:hover{background:#fef3f2}

/* ---------- halaman ---------- */
.page{padding:var(--s-xl) var(--s-xl) var(--s-section);max-width:1600px;width:100%;
  animation:rise .3s cubic-bezier(.4,0,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.welcome{display:flex;align-items:center;gap:var(--s-md);flex-wrap:wrap;margin-bottom:var(--s-lg)}
.welcome .grow{flex:1;min-width:240px}
.welcome h1{font-size:28px;font-weight:600;letter-spacing:-.5px;color:var(--ink-deep);line-height:1.25}
.welcome p{margin-top:4px;font-size:14px;color:var(--steel)}
.filter-actions{display:flex;align-items:center;gap:var(--s-xs);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);
  font-size:13px;font-weight:500;color:var(--ink-deep);
  transition:border-color var(--t),background-color var(--t)}
.chip:hover{border-color:var(--hairline-strong)}
.chip .cv{color:var(--stone);font-size:10px}

/* ---------- kartu ---------- */
.card{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xl);padding:var(--s-xl)}
.card-tight{padding:var(--s-md)}
.card-head{display:flex;align-items:center;gap:var(--s-sm);margin-bottom:var(--s-md)}
.card-head h3{font-size:15px;font-weight:600;color:var(--ink-deep)}
.card-head .more{margin-left:auto;font-size:13px;color:var(--steel);font-weight:500}

.grid{display:grid;gap:var(--s-md)}
.g-2{grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.g-main{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);align-items:start}
@media (max-width:1180px){.g-main{grid-template-columns:1fr}}

/* ---------- stat cards 4-up ---------- */
.stat-cards{display:grid;gap:var(--s-md);
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));margin-bottom:var(--s-md)}
.stat-card{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xl);
  padding:var(--s-lg);display:flex;flex-direction:column;transition:border-color var(--t)}
.stat-card:hover{border-color:var(--hairline)}
.sc-top{display:flex;align-items:flex-start;gap:var(--s-sm)}
.sc-label{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--stone);flex:1}
.sc-spark{display:flex;align-items:flex-end;gap:2px;height:26px;flex:none}
.sc-spark i{width:3px;border-radius:1px;background:var(--hairline-strong);display:block}
.sc-spark i.on{background:var(--ink-deep)}
.sc-value{font-size:26px;font-weight:600;letter-spacing:-.6px;color:var(--ink-deep);line-height:1.2;margin-top:8px}
.sc-value small{font-size:13px;font-weight:500;color:var(--steel);margin-left:5px;letter-spacing:0}
.sc-foot{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12px}
.sc-change{display:inline-flex;align-items:center;gap:3px;font-weight:600}
.sc-change.up{color:var(--brand)}
.sc-change.down{color:#d33}
.sc-note{color:var(--stone)}

/* ---------- chart ---------- */
.chart-head{display:flex;align-items:center;gap:var(--s-sm);flex-wrap:wrap;margin-bottom:var(--s-md)}
.chart-head h3{font-size:15px;font-weight:600;color:var(--ink-deep);margin-right:auto}
.legend{display:flex;gap:var(--s-md);font-size:12px;color:var(--steel)}
.legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.seg{display:inline-flex;background:var(--surface);border-radius:var(--r-md);padding:3px}
.seg button{padding:6px 12px;border-radius:var(--r-sm);font-size:12px;font-weight:600;color:var(--steel);
  transition:background-color var(--t),color var(--t)}
.seg button.on{background:var(--canvas);color:var(--ink-deep);box-shadow:0 1px 2px rgba(5,0,56,.08)}

.chart-total{font-size:13px;color:var(--steel);margin-bottom:var(--s-sm)}
.chart-total b{font-size:20px;font-weight:600;color:var(--ink-deep);letter-spacing:-.4px}

.bars{display:flex;align-items:flex-end;gap:5px;height:200px}
.bars .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.bars .stack{border-radius:3px 3px 0 0;transition:height .6s cubic-bezier(.4,0,.2,1)}
.bars .stack.a{background:var(--brand)}
.bars .stack.b{background:var(--brand-light)}
.bars .lbl{font-size:10px;color:var(--stone);text-align:center;margin-top:8px;font-weight:500}
.bars .col.hi .stack.a{background:var(--ink-deep)}

.vbars{display:flex;flex-direction:column;gap:10px;margin-top:var(--s-md)}
.vbar{display:flex;align-items:center;gap:10px;font-size:12px}
.vbar .nm{width:96px;flex:none;color:var(--steel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vbar .tr{flex:1;height:8px;border-radius:var(--r-full);background:var(--surface);overflow:hidden}
.vbar .tr i{display:block;height:100%;border-radius:inherit;background:var(--brand);
  transition:width .6s cubic-bezier(.4,0,.2,1)}
.vbar .vl{width:60px;text-align:right;font-family:var(--mono);font-size:11px;color:var(--ink-deep);font-weight:500}

.ai-banner{display:flex;align-items:center;gap:10px;margin-top:var(--s-md);
  padding:12px 14px;border-radius:var(--r-lg);background:var(--brand-wash);color:var(--brand-deep);
  font-size:13px;font-weight:600}
.ai-banner .plus{margin-left:auto;font-size:16px;opacity:.6}

/* ---------- tabel ---------- */
.table-wrap{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xl);overflow:hidden}
.tbl-toolbar{display:flex;align-items:center;gap:var(--s-xs);flex-wrap:wrap;padding:var(--s-lg) var(--s-lg) var(--s-md)}
.tbl-toolbar h3{font-size:15px;font-weight:600;color:var(--ink-deep);margin-right:auto}
.tbl-search{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;min-width:200px;
  background:var(--surface);border:1px solid transparent;border-radius:var(--r-md);color:var(--stone);
  transition:border-color var(--t),background-color var(--t)}
.tbl-search:focus-within{background:var(--canvas);border-color:var(--brand)}
.tbl-search input{border:0;background:none;outline:none;font:inherit;font-size:13px;color:var(--ink);width:100%}
.table-scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
thead th{text-align:left;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;
  color:var(--stone);padding:11px var(--s-lg);background:var(--surface-soft);
  border-block:1px solid var(--hairline-soft);white-space:nowrap}
thead th .srt{margin-left:5px;opacity:.4;font-size:9px}
tbody td{padding:14px var(--s-lg);border-bottom:1px solid var(--hairline-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background-color var(--t)}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover{background:var(--surface-soft)}
td.num{font-family:var(--mono);text-align:right;white-space:nowrap;color:var(--ink-deep)}
td.mono-cell{font-family:var(--mono);font-size:13px;white-space:nowrap}
.cell-main{display:block;font-weight:600;color:var(--ink-deep);line-height:1.35}
.cell-sub{display:block;font-size:12px;color:var(--stone);margin-top:2px;line-height:1.35}
.tick{width:16px;height:16px;border:1.5px solid var(--hairline-strong);border-radius:var(--r-xs);display:block}
.row-act{color:var(--stone);font-size:16px;letter-spacing:1px}

/* ---------- badge ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-full);
  font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.b-green{background:var(--brand-wash);color:var(--brand-deep)}
.b-blue{background:#eef1ff;color:var(--blue)}
.b-warn{background:var(--orange-soft);color:#9a5b00}
.b-error{background:var(--red-soft);color:#b42318}
.b-grey{background:var(--surface);color:var(--steel)}
.b-ink{background:var(--ink);color:#fff}
.badge-type{font-family:var(--mono);font-size:11px;background:var(--surface);color:var(--steel);
  border-radius:var(--r-sm);padding:3px 7px;font-weight:500}
.badge-req{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  background:var(--coral-soft);color:#8a1c1c;border-radius:var(--r-sm);padding:3px 6px}

/* ---------- meter ---------- */
.meter{height:6px;border-radius:var(--r-full);background:var(--surface);overflow:hidden}
.meter i{display:block;height:100%;border-radius:inherit;background:var(--ink-deep);
  transition:width .5s cubic-bezier(.4,0,.2,1)}
.meter.green i{background:var(--brand)}
.meter.blue i{background:var(--brand-teal)}
.meter.warn i{background:#e8912a}
.meter.error i{background:#e5484d}
.meter-sm{height:5px}
.delta{font-size:12px;font-weight:600}
.delta.up{color:var(--brand)}
.delta.down{color:#d33}

/* ---------- pill tab ---------- */
.filters{display:flex;flex-wrap:wrap;gap:var(--s-xs);align-items:center;margin-bottom:var(--s-md)}
.pill-tab{padding:8px 15px;border-radius:var(--r-full);border:1px solid var(--hairline);
  background:var(--canvas);color:var(--steel);font-size:13px;font-weight:600;
  transition:background-color var(--t),color var(--t),border-color var(--t)}
.pill-tab:hover{background:var(--surface);color:var(--ink-deep)}
.pill-tab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.pill-tab .n{font-size:11px;opacity:.6;margin-left:5px}

/* ---------- review OCR ---------- */
.review{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-md);align-items:start}
@media (max-width:1180px){.review{grid-template-columns:1fr}}
.doc-frame{background:var(--canvas);border:1px solid var(--hairline-soft);border-radius:var(--r-xl);
  padding:var(--s-md);position:sticky;top:calc(var(--topbar-h) + 16px)}
.doc-toolbar{display:flex;align-items:center;gap:var(--s-xs);margin-bottom:var(--s-sm)}
.doc-toolbar .name{font-family:var(--mono);font-size:12px;color:var(--steel);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.doc-page{background:var(--surface-soft);border:1px solid var(--hairline-soft);border-radius:var(--r-lg);
  padding:26px 28px;font-size:12px;color:var(--slate);position:relative;overflow:hidden}
.doc-page .doc-h{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:18px}
.doc-page .doc-vendor{font-size:14px;font-weight:600;color:var(--ink-deep)}
.doc-page .doc-title{font-size:20px;font-weight:600;letter-spacing:-.4px;color:var(--ink-deep)}
.doc-page table{font-size:11px}
.doc-page thead th{background:transparent;padding:6px 0;font-size:10px;border:0;
  border-bottom:1px solid var(--hairline-soft)}
.doc-page tbody td{padding:6px 0;border-color:var(--hairline-soft)}
.doc-row{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.doc-sep{height:1px;background:var(--hairline-soft);margin:14px 0}
.hl{background:rgba(0,180,115,.16);box-shadow:0 0 0 2px rgba(0,180,115,.35);border-radius:3px}
.hl.warn{background:rgba(255,208,47,.32);box-shadow:0 0 0 2px rgba(255,208,47,.65)}
.doc-stamp{position:absolute;right:22px;bottom:20px;transform:rotate(-11deg);
  border:2px solid rgba(180,35,24,.45);color:rgba(180,35,24,.6);border-radius:var(--r-md);
  padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:1px}

.field-list{display:flex;flex-direction:column}
.field{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s-md);
  padding:var(--s-sm) 0;border-bottom:1px solid var(--hairline-soft);align-items:start}
.field:last-child{border-bottom:0}
.field .k{display:flex;flex-direction:column;gap:4px}
.field .k .name{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--ink-deep)}
.field .v{display:flex;flex-direction:column;gap:6px}
.field input{width:100%;height:38px;padding:9px 12px;font:inherit;font-size:14px;
  border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--canvas);color:var(--ink);
  transition:border-color var(--t),box-shadow var(--t)}
.field input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,180,115,.15)}
.field input.low{border-color:#e8912a;background:#fffaf3}
.conf{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--stone);font-family:var(--mono)}
.conf .meter{flex:1;max-width:110px}
.review-actions{display:flex;gap:var(--s-xs);flex-wrap:wrap;padding-top:var(--s-md);
  margin-top:var(--s-xs);border-top:1px solid var(--hairline-soft)}

/* ---------- timeline ---------- */
.timeline{position:relative;padding-left:24px}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--hairline-soft)}
.tl-item{position:relative;padding-bottom:var(--s-md)}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{content:"";position:absolute;left:-23px;top:4px;width:14px;height:14px;border-radius:50%;
  background:var(--canvas);border:2px solid var(--hairline-strong)}
.tl-item.done::before{background:var(--brand);border-color:var(--brand)}
.tl-item.now::before{background:var(--ink-deep);border-color:var(--ink-deep);box-shadow:0 0 0 4px rgba(5,0,56,.1)}
.tl-item .t{font-size:13px;font-weight:600;color:var(--ink-deep)}
.tl-item .d{font-size:12px;color:var(--stone);margin-top:1px}

/* ---------- alert ---------- */
.alert{display:flex;gap:var(--s-sm);padding:var(--s-sm) 0;border-bottom:1px solid var(--hairline-soft)}
.alert:last-child{border-bottom:0}
.alert .sev{width:3px;border-radius:var(--r-full);flex:none;background:var(--hairline-strong)}
.alert.critical .sev{background:#e5484d}
.alert.high .sev{background:#e8912a}
.alert.medium .sev{background:var(--brand-teal)}
.alert .body{flex:1;min-width:0}
.alert .t{font-size:13px;font-weight:600;color:var(--ink-deep)}
.alert .m{font-size:12px;color:var(--steel);margin-top:3px;line-height:1.55}
.alert .meta{font-size:11px;color:var(--stone);font-family:var(--mono);margin-top:5px}

/* ---------- recap ---------- */
.recap{background:var(--ink-deep);color:#fff;border-radius:var(--r-xl);padding:var(--s-xl)}
.recap .eyebrow{font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--brand-light)}
.recap h3{font-size:18px;font-weight:600;margin-top:6px}
.recap p{font-size:14px;line-height:1.6;color:rgba(255,255,255,.72);margin-top:var(--s-sm)}
.recap .stats{display:flex;flex-wrap:wrap;gap:var(--s-lg);margin-top:var(--s-md);
  padding-top:var(--s-md);border-top:1px solid rgba(255,255,255,.14)}
.recap .stat .n{font-size:22px;font-weight:600;letter-spacing:-.4px}
.recap .stat .l{font-size:11px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.4px}

/* ---------- vendor ---------- */
.notif{display:flex;gap:var(--s-sm);padding:var(--s-sm) 0;border-bottom:1px solid var(--hairline-soft)}
.notif:last-child{border-bottom:0}
.notif .dot{width:8px;height:8px;border-radius:50%;margin-top:6px;flex:none;background:var(--stone)}
.notif.warn .dot{background:#e8912a}
.notif.error .dot{background:#e5484d}
.notif.green .dot{background:var(--brand)}
.notif .b{flex:1;min-width:0}
.notif .b b{display:block;font-size:13px;font-weight:600;color:var(--ink-deep)}
.notif .b p{font-size:12px;color:var(--steel);margin-top:3px;line-height:1.55}
.notif .b span{font-size:11px;color:var(--stone);font-family:var(--mono)}

.thread{display:flex;flex-direction:column;gap:var(--s-sm)}
.msg{padding:12px 16px;border-radius:var(--r-lg);max-width:88%}
.msg.vendor{background:var(--surface);align-self:flex-start;border-bottom-left-radius:var(--r-xs)}
.msg.internal{background:var(--ink-deep);color:#fff;align-self:flex-end;border-bottom-right-radius:var(--r-xs)}
.msg .hd{display:flex;gap:8px;align-items:baseline;margin-bottom:4px}
.msg .hd b{font-size:12px;font-weight:600}
.msg .hd span{font-size:11px;opacity:.6;font-family:var(--mono)}
.msg p{font-size:13px;line-height:1.55}
.msg.internal p{color:rgba(255,255,255,.78)}
.reply{display:flex;gap:var(--s-xs);margin-top:var(--s-md);padding-top:var(--s-md);
  border-top:1px solid var(--hairline-soft)}
.reply input{flex:1;height:38px;padding:9px 12px;font:inherit;font-size:14px;
  border:1px solid var(--hairline);border-radius:var(--r-md);background:var(--canvas);color:var(--ink)}
.reply input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,180,115,.15)}

.stepline{display:flex;gap:5px;margin:var(--s-xs) 0}
.stepline i{flex:1;height:4px;border-radius:var(--r-full);background:var(--hairline)}
.stepline i.on{background:var(--brand)}
.stepline i.now{background:var(--ink-deep)}

/* ---------- unggah ---------- */
.dropzone{border:2px dashed var(--hairline);border-radius:var(--r-xl);background:var(--canvas);
  padding:var(--s-section) var(--s-xl);text-align:center;
  transition:border-color var(--t),background-color var(--t)}
.dropzone.hot{border-color:var(--brand);background:var(--brand-wash)}
.dropzone.terisi{border-style:solid;border-color:var(--brand);background:var(--brand-wash)}
.dropzone .ic{width:48px;height:48px;margin:0 auto var(--s-sm);border-radius:var(--r-lg);
  background:var(--brand-wash);color:var(--brand-deep);display:grid;place-items:center}
.dropzone h3{font-size:16px;font-weight:600;color:var(--ink-deep)}
.dropzone p{font-size:13px;color:var(--steel);margin-top:4px}
.dropzone .actions{margin-top:var(--s-md);display:flex;gap:var(--s-xs);justify-content:center;flex-wrap:wrap}
.dz-err{margin-top:14px;padding:9px 14px;border-radius:var(--r-md);background:#fef3f2;
  border:1px solid var(--red-soft);color:#b42318;font-size:13px;font-weight:500}

.file-row{display:flex;gap:16px;align-items:center}
.file-thumb{width:76px;height:76px;flex:none;border:1px solid var(--hairline-soft);border-radius:var(--r-lg);
  background:var(--surface);display:grid;place-items:center;overflow:hidden}
.file-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.file-thumb .pdf-tag{font-size:11px;font-weight:700;letter-spacing:.5px;color:#fff;
  background:var(--brand);padding:4px 9px;border-radius:var(--r-sm)}
.file-meta{min-width:0}
.file-meta .nm{font-size:15px;font-weight:600;color:var(--ink-deep);word-break:break-all;line-height:1.35}
.file-meta .mt{font-size:12px;color:var(--stone);margin-top:3px}
.demo-note{margin-top:14px;padding:11px 13px;border-radius:var(--r-lg);background:var(--yellow-soft);
  border-left:3px solid var(--yellow);font-size:13px;line-height:1.55;color:#6b5200}

.pipe{display:flex;flex-direction:column}
.pipe-step{display:flex;align-items:flex-start;gap:var(--s-sm);padding:var(--s-sm) 0;
  border-bottom:1px solid var(--hairline-soft);opacity:.42;transition:opacity .3s}
.pipe-step:last-child{border-bottom:0}
.pipe-step.active,.pipe-step.done{opacity:1}
.pipe-step .mark{width:22px;height:22px;border-radius:50%;flex:none;margin-top:1px;
  border:2px solid var(--hairline);background:var(--canvas);display:grid;place-items:center;
  font-size:11px;color:transparent;transition:background-color .3s,border-color .3s}
.pipe-step.active .mark{border-color:var(--ink-deep);border-top-color:transparent;animation:spin .7s linear infinite}
.pipe-step.done .mark{background:var(--brand);border-color:var(--brand);color:#fff;
  border-top-color:var(--brand);animation:none}
@keyframes spin{to{transform:rotate(360deg)}}
.pipe-step .tx{flex:1;min-width:0}
.pipe-step .tx b{display:block;font-size:14px;font-weight:600;color:var(--ink-deep)}
.pipe-step .tx span{display:block;font-size:12px;color:var(--stone);margin-top:2px}
.pipe-step .ms{font-family:var(--mono);font-size:11px;color:var(--stone);flex:none}
.pipe-bar{height:4px;background:var(--surface);border-radius:var(--r-full);overflow:hidden;margin-top:var(--s-md)}
.pipe-bar i{display:block;height:100%;background:var(--brand);width:0;transition:width .4s linear}

.extract-row{display:flex;align-items:center;gap:var(--s-sm);padding:10px 0;
  border-bottom:1px solid var(--hairline-soft);animation:pop .35s cubic-bezier(.4,0,.2,1) both}
.extract-row:last-child{border-bottom:0}
@keyframes pop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.extract-row .lb{font-size:13px;color:var(--steel);width:130px;flex:none}
.extract-row .vl{font-family:var(--mono);font-size:13px;color:var(--ink-deep);flex:1;min-width:0;word-break:break-all}
.extract-row .cf{font-family:var(--mono);font-size:11px;flex:none;width:78px;text-align:right;font-weight:600}

/* ---------- login ---------- */
.auth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);min-height:100vh;background:var(--canvas)}
.auth-form{display:flex;flex-direction:column;justify-content:center;padding:var(--s-section) clamp(24px,6vw,88px)}
.auth h1{font-size:40px;font-weight:600;letter-spacing:-1px;line-height:1.15;color:var(--ink-deep)}
.auth .lead{margin-top:var(--s-sm);color:var(--steel);font-size:16px;max-width:46ch}
.role-list{display:flex;flex-direction:column;gap:var(--s-sm);margin-top:var(--s-xl)}
.role{display:flex;align-items:center;gap:var(--s-md);width:100%;text-align:left;padding:var(--s-md);
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-lg);
  transition:border-color var(--t),background-color var(--t)}
.role:hover{border-color:var(--brand);background:var(--brand-wash)}
.role .ic{width:42px;height:42px;border-radius:var(--r-md);flex:none;display:grid;place-items:center;
  background:var(--surface);color:var(--ink-deep)}
.role.green .ic{background:var(--brand-wash);color:var(--brand-deep)}
.role .tx{flex:1;min-width:0}
.role .tx b{display:block;font-size:15px;font-weight:600;color:var(--ink-deep)}
.role .tx span{display:block;font-size:13px;color:var(--steel);margin-top:2px}
.role .go{color:var(--stone);flex:none}
.auth-note{margin-top:var(--s-xl);padding:var(--s-md);border-radius:var(--r-lg);background:var(--surface);
  font-size:13px;color:var(--steel);line-height:1.6}
.auth-foot{margin-top:var(--s-xxl);font-size:12px;color:var(--stone)}
.auth-side{background:var(--ink-deep);color:#fff;padding:var(--s-section) clamp(24px,4vw,56px);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s-xl);position:relative;overflow:hidden}
.auth-side::after{content:"";position:absolute;width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,180,115,.3),transparent 68%);right:-140px;top:-100px}
.auth-side h2{font-size:30px;font-weight:600;line-height:1.25;max-width:20ch;position:relative;letter-spacing:-.5px}
.auth-side p{color:rgba(255,255,255,.72);font-size:15px;max-width:44ch;position:relative}
.auth-metrics{display:flex;flex-wrap:wrap;gap:var(--s-xl);position:relative}
.auth-metrics .m .n{font-size:28px;font-weight:600;color:var(--brand-light);letter-spacing:-.5px}
.auth-metrics .m .l{font-size:12px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.4px}
.auth-flow{position:relative;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:var(--s-md);display:flex;flex-direction:column;gap:11px}
.auth-flow .step{display:flex;align-items:center;gap:11px;font-size:13px;color:rgba(255,255,255,.75)}
.auth-flow .step i{width:20px;height:20px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center;
  background:rgba(0,180,115,.25);color:var(--brand-light);font-size:10px;font-style:normal;font-weight:600}

/* ---------- lain-lain ---------- */
.empty{padding:var(--s-section) var(--s-xl);text-align:center;color:var(--stone)}
.empty h4{font-size:16px;font-weight:600;color:var(--slate);margin-bottom:4px}
.avatar{width:32px;height:32px;border-radius:var(--r-full);flex:none;background:var(--brand-wash);
  border:1px solid var(--hairline-soft);display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--brand-deep)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
  background:var(--ink-deep);color:#fff;padding:12px 20px;border-radius:var(--r-full);
  font-size:14px;font-weight:500;opacity:0;pointer-events:none;
  transition:opacity var(--t),transform var(--t);z-index:60;box-shadow:0 8px 24px rgba(5,0,56,.18)}
.toast.show{opacity:1;transform:translate(-50%,0)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-xs)}
.mobile-bar,.tabbar{display:none}

/* ---------- responsif ---------- */
@media (max-width:1024px){
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;inset:0 auto 0 0;width:270px;z-index:40;transform:translateX(-100%);
    transition:transform var(--t)}
  .sidebar.open{transform:none;box-shadow:0 0 0 100vmax rgba(5,0,56,.4)}
  .mobile-bar{display:flex;align-items:center;gap:var(--s-sm);height:56px;padding:0 var(--s-md);
    background:var(--canvas);border-bottom:1px solid var(--hairline);position:sticky;top:0;z-index:20}
  .topbar{display:none}
  .page{padding:var(--s-md) var(--s-md) 96px}
  .welcome h1{font-size:24px}
  .tabbar{display:flex;position:fixed;inset:auto 0 0 0;z-index:50;background:var(--canvas);
    border-top:1px solid var(--hairline);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 2px;
    border-radius:var(--r-md);font-size:10px;font-weight:600;color:var(--stone);
    transition:color var(--t),background-color var(--t)}
  .tabbar a.active{color:var(--brand-deep);background:var(--brand-wash)}
  .tabbar a .ico{width:19px;height:19px}
  .review,.g-main{grid-template-columns:1fr}
  .doc-frame{position:static}
  .field{grid-template-columns:1fr;gap:var(--s-xs)}
  .auth{grid-template-columns:1fr}
  .auth-side{display:none}
}

/* ---------- modal ---------- */
.modal-wrap{
  position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:var(--s-md);
  background:rgba(5,0,56,.42);backdrop-filter:blur(3px);
  animation:fadeIn .16s ease-out both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-card{
  width:100%;max-width:460px;max-height:88vh;overflow:auto;
  background:var(--canvas);border-radius:var(--r-xl);
  box-shadow:0 20px 60px rgba(5,0,56,.24);
  animation:popIn .2s cubic-bezier(.4,0,.2,1) both;
}
@keyframes popIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:flex-start;gap:var(--s-md);padding:var(--s-lg) var(--s-lg) var(--s-sm)}
.modal-head h3{font-size:17px;font-weight:600;color:var(--ink-deep)}
.modal-head p{font-size:13px;color:var(--stone);margin-top:3px;font-family:var(--mono)}
.modal-head .icon-btn{margin-left:auto;flex:none;font-size:15px}
.modal-body{padding:0 var(--s-lg) var(--s-md);display:flex;flex-direction:column;gap:var(--s-sm)}
.modal-body > p{white-space:pre-line}
.modal-foot{display:flex;gap:var(--s-xs);justify-content:flex-end;
  padding:var(--s-md) var(--s-lg) var(--s-lg);border-top:1px solid var(--hairline-soft);margin-top:var(--s-xs)}

.mf{display:flex;flex-direction:column;gap:6px}
.mf > span{font-size:12px;font-weight:600;color:var(--slate)}
.mf input,.mf select,.mf textarea{
  width:100%;padding:10px 12px;font:inherit;font-size:14px;color:var(--ink);
  background:var(--canvas);border:1px solid var(--hairline);border-radius:var(--r-md);
  transition:border-color var(--t),box-shadow var(--t);resize:vertical;
}
.mf input:focus,.mf select:focus,.mf textarea:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(0,180,115,.15);
}
.mf-err{padding:9px 12px;border-radius:var(--r-md);background:#fef3f2;
  border:1px solid var(--red-soft);color:#b42318;font-size:13px;font-weight:500}

/* ---------- kerapatan tombol ---------- */
.filter-actions{gap:10px}
.topbar{gap:var(--s-sm)}
.topbar .search-pill{margin-right:var(--s-xxs)}
.review-actions{gap:10px;row-gap:10px}
.tbl-toolbar{gap:10px}
.dropzone .actions{gap:10px}
.welcome{gap:var(--s-lg)}
.page-head{gap:12px;row-gap:12px}
.card-head{gap:10px}
.chart-head{gap:12px;row-gap:10px}
.filters{gap:10px}
.modal-foot{gap:10px}
.bulk-bar .btn + .btn{margin-left:2px}

/* ---------- bar aksi massal ---------- */
.bulk-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px var(--s-lg);background:var(--brand-wash);
  border-bottom:1px solid var(--hairline-soft);
}
.bulk-bar .n{font-size:13px;font-weight:600;color:var(--brand-deep);margin-right:auto}
.tick.on{background:var(--brand);border-color:var(--brand);position:relative}
.tick.on::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;
  color:#fff;font-size:11px;font-weight:700}
th .tick,td .tick{cursor:pointer}
thead th.srt-col{cursor:pointer;user-select:none}
thead th.srt-col:hover{color:var(--ink-deep)}
thead th.srt-col.on .srt{opacity:1;color:var(--brand)}

/* ---------- ilustrasi kebun sawit di login ---------- */
.auth-side{position:relative;overflow:hidden;padding:0}
.auth-side::after{display:none}
.sawit{position:absolute;inset:0;width:100%;height:100%;display:block}
.auth-side-in{
  position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;
  gap:var(--s-lg);height:100%;padding:var(--s-section) clamp(24px,4vw,56px);
  /* overlay hanya di sepertiga bawah — sebelumnya menutupi seluruh
     ilustrasi sehingga kebun sawitnya nyaris tidak terlihat */
  background:linear-gradient(to top,
    rgba(4,26,20,.9) 0%, rgba(4,26,20,.72) 34%,
    rgba(4,26,20,.28) 62%, rgba(4,26,20,0) 82%);
}
.auth-side-in h2{font-size:30px;font-weight:600;line-height:1.25;max-width:20ch;letter-spacing:-.5px;color:#fff}
.auth-side-in p{color:rgba(255,255,255,.78);font-size:15px;max-width:44ch}
.auth-flow{background:rgba(4,26,20,.5);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(8px)}