/* =====================================================================
   components.css — SEMUA komponen UI Bisnisku (master plan C1-C2, C4)
   Sumber visual: diskusi/bisnisku-app-mockup.html
   Aturan keras:
     - Halaman TIDAK boleh punya CSS sendiri (tanpa <style> blok / style="")
     - Inline style hanya untuk nilai dinamis dari data (mis. width progress)
     - Komponen baru wajib didaftarkan di dev/styleguide.php dulu
     - Icon: Lucide, stroke currentColor — tanpa emoji di UI produksi
   ===================================================================== */

/* == RESET & BASE ===================================================== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--ff);background:var(--canvas);color:var(--tx);font-size:var(--fs-md)}
a{color:var(--ac-dk);text-decoration:none}
button{font-family:inherit}
/* Fokus keyboard terlihat (a11y) — hanya muncul saat navigasi keyboard,
   tak mengganggu klik mouse. Input/select sudah punya ring sendiri. */
a:focus-visible,button:focus-visible,[role=button]:focus-visible,
.chip:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ac);outline-offset:2px;border-radius:3px}

/* icon Lucide — warna ikut teks (currentColor) */
.icon{width:16px;height:16px;flex:none;vertical-align:-3px}
.icon-sm{width:14px;height:14px}
.icon-lg{width:20px;height:20px}

/* == LAYOUT APP (mobile-first) ======================================= */
/* <body class="app" data-module="..."> — MOBILE: 1 kolom, sidebar = drawer
   off-canvas (lihat == SIDEBAR). DESKTOP (≥1024px): grid sidebar + konten,
   ditambah di blok @media(min-width:1024px) bagian == SHELL DESKTOP. */
body.app{min-height:100vh}
#shell{display:flex;flex-direction:column}
.wrap{display:flex;flex-direction:column;min-width:0;min-height:100vh}
.view{padding:14px;display:flex;flex-direction:column;gap:var(--sp-4)}

/* == SIDEBAR (mobile = off-canvas drawer) ============================ */
/* MOBILE: drawer fixed di kiri, tersembunyi (translateX), dibuka via
   body.nav-open (tombol hamburger di topbar). DESKTOP: jadi kolom statik
   (lihat blok SHELL DESKTOP). */
.side{background:var(--side-g,var(--side,var(--navy)));color:#fff;display:flex;flex-direction:column;
  position:fixed;top:0;left:0;height:100vh;height:100dvh;width:var(--side-w);max-width:86vw;z-index:70;
  transform:translateX(-100%);transition:transform .24s cubic-bezier(.4,0,.2,1);will-change:transform}
body.nav-open .side{transform:translateX(0);box-shadow:var(--sh-pop)}
/* backdrop gelap di belakang drawer (mobile) */
.side-backdrop{position:fixed;inset:0;background:rgba(15,26,48,.5);z-index:60;
  opacity:0;visibility:hidden;transition:opacity .24s ease,visibility .24s ease}
body.nav-open .side-backdrop{opacity:1;visibility:visible}
.slogo{display:flex;align-items:center;gap:8px;padding:0 10px;min-height:var(--top-h);transition:padding .22s cubic-bezier(.4,0,.2,1)}
.slogo .mark{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:none}
.slogo .mark{color:var(--amber)}  /* logomark E = amber (tanda tangan brand) */
.slogo .mark svg{width:100%;height:auto;display:block;filter:var(--acc-glow);transition:filter .2s}
/* Brand block — link ke home; hover halus. */
.slogo-brand{display:flex;align-items:center;gap:9px;flex:1;min-width:0;cursor:pointer;text-align:left;
  padding:7px 9px;border-radius:11px;background:transparent;border:none;
  color:#fff;font:inherit;text-decoration:none;transition:background .15s}
.slogo-brand:hover{background:rgba(255,255,255,.08)}
.slogo-brand:hover .mark svg{filter:var(--acc-glow-h)}
.slogo-tx{display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden}
.slogo .nm{font-size:14px;font-weight:700;line-height:1.15}
.slogo .tag{font-size:8.5px;opacity:.6;letter-spacing:.9px;text-transform:uppercase;margin-top:1px}
.snav{flex:1;overflow-y:auto;padding:12px 10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.snav::-webkit-scrollbar{width:3px}
.snav::-webkit-scrollbar-track{background:transparent}
.snav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:2px}
.snav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.32)}
.nv{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.74);cursor:pointer;border-radius:9px;margin-bottom:2px;font-weight:600;transition:background .15s ease,color .15s ease}
.nv .icon{color:rgba(255,255,255,.55)}
.nv:hover{background:rgba(255,255,255,.06);color:#fff}
/* state aktif = PUTIH via luminance (revisi 3 Jul) — amber HANYA logo/VERA.
   Warna via --acc-d agar bisa ditimpa pemilih tema (survey). */
.nv.act{background:rgba(255,255,255,.16);color:#fff}
.nv.act .icon{color:var(--acc-d,#fff)}
.nv .ct{margin-left:auto;font-size:9.5px;background:var(--ac-g,var(--ac));color:var(--ac-tx);font-weight:700;padding:1.5px 7px;border-radius:var(--r-pill)}
/* grup MODUL (sidebar terpadu): header collapsible + seksi modul di dalamnya.
   Multi-buka; grup modul halaman aktif dibuka server-side (default cerdas);
   state per-user di localStorage. Lihat _sidebar.php & app.js. */
.nv-grp{margin-bottom:2px}
.nv-parent{width:100%;border:none;background:transparent;text-align:left;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.nv-parent>.icon{color:rgba(255,255,255,.6)}
.nv-caret{margin-left:auto;display:flex;align-items:center;color:rgba(255,255,255,.4);transition:transform .2s,opacity .16s ease}
.nv-caret .icon{width:16px;height:16px}
.nv-grp.open>.nv-parent .nv-caret{transform:rotate(180deg)}
.nv-grp.open>.nv-parent{color:#fff}
.nv-grp[data-active]>.nv-parent{color:#fff}
.nv-grp[data-active]>.nv-parent>.icon{color:var(--acc-d,#fff)}
.nv-grp-flash>.nv-parent{background:rgba(245,158,11,.22)}
/* seksi (anak grup) menjorok → hierarki modul → seksi */
.snav-sub{display:none;margin:0 0 6px}
.nv-grp.open>.snav-sub{display:block}
.snav-sub>.nv{padding-left:34px;font-weight:500}
.snav-sub>.nv.act{font-weight:600}
.snav-sub>.snav-sect{padding-left:22px}
.nv-sub{padding:7.5px 12px 7.5px 42px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.6);position:relative}
.nv-sub::before{content:"";position:absolute;left:22px;top:50%;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.28);transform:translateY(-50%)}
.nv-sub:hover{color:#fff}
.nv-sub.act{background:rgba(255,255,255,.13);color:#fff;font-weight:600}
.nv-sub.act::before{background:var(--acc-d,#fff)}
/* submenu seksi AKTIF di drawer (mobile, auto-expand, tanpa toggle).
   Disembunyikan ≥1024px → desktop tetap flat (sub-tab hidup di topbar). */
.nv-msub{display:block;margin:1px 0 6px}
.nv-msub .nv-sub{display:block;border-radius:9px;margin-bottom:1px}
@media(min-width:1024px){.nv-msub{display:none}}
/* seksi "Tambahan" (add-on tipe link) — paling bawah nav, label kecil + ikon eksternal */
.snav-sect{margin:12px 12px 4px;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:rgba(255,255,255,.38)}
.nv-ext{margin-left:auto;color:rgba(255,255,255,.32)}
.nv:hover .nv-ext{color:rgba(255,255,255,.6)}

/* footer sidebar: Panduan (persisten semua modul; profil cukup di topbar) */
.sfoot{padding:8px 10px 12px;border-top:1px solid rgba(255,255,255,.08)}

/* label sidebar: tak boleh wrap (drawer & mini sama-sama butuh) */
.nv-lb,.slogo-tx{white-space:nowrap;transition:opacity .16s ease}

/* == SHELL DESKTOP (≥1024px) — Nav-1: rail opsional + sidebar sub-modul ==
   Tiga level nav (pola Atlassian): modul (rail) → sub-modul (.subside) →
   seksi (tab topbar). Sidebar navy terpadu (.side) = MOBILE DRAWER SAJA.
   Grid kolom per state (body class, dipasang anti-flicker di _layout.php):
     rail mati              : sub-w | 1fr        (+ side-mini → 64px | 1fr)
     rail nyala (rail-on)   : rail-w | sub-w | 1fr
     rail nyala + side-hidden: rail-w | 1fr      (flyout hover di ikon rail)
   CIUT ADAPTIF (dikunci 4 Jul): rail nyala → ciut = sembunyi penuh;
   rail mati → ciut = ikon-mini 64px + hover-peek. DILARANG dua strip ikon. */
@media(min-width:1024px){
  #shell{display:grid;grid-template-columns:var(--sub-w) 1fr;
    transition:grid-template-columns .22s cubic-bezier(.4,0,.2,1)}
  body.side-mini #shell{grid-template-columns:var(--side-w-mini) 1fr}
  body.rail-on #shell{grid-template-columns:var(--rail-w) var(--sub-w) 1fr}
  body.rail-on.side-hidden #shell{grid-template-columns:var(--rail-w) 1fr}
  .view{padding:var(--sp-5) var(--sp-4)}
  /* sidebar navy terpadu = drawer mobile — di desktop diganti rail+subside */
  .side,.side-backdrop{display:none}
}

/* == RAIL MODUL (desktop, opsional per-user) ========================== */
/* Navy gelap (zona brand): logo emas = tombol Beranda, ikon modul ber-label,
   aktif = highlight putih tipis + ikon emas (pola .nv.act — BUKAN blok emas). */
.rail{display:none}
@media(min-width:1024px){
  body.rail-on .rail{display:flex;position:sticky;top:0;height:100vh;z-index:41;
    flex-direction:column;align-items:center;padding:9px 0;gap:3px;
    background:var(--rail-g,var(--rail,var(--navy)));border-right:1px solid #132152;
    overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
  .rail::-webkit-scrollbar{width:0}
}
.rail-logo{width:40px;height:40px;border:0;padding:0;background:none;color:var(--amber);cursor:pointer;
  display:flex;align-items:center;justify-content:center;margin-bottom:8px;flex:none;
  filter:var(--acc-glow);transition:filter .2s}
.rail-logo:hover{filter:var(--acc-glow-h)}
.rail-logo svg{width:27px;height:27px;display:block}
.rail-it{width:52px;padding:8px 0 6px;border-radius:var(--r-ctl);border:0;background:none;
  color:rgba(255,255,255,.74);cursor:pointer;flex:none;
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:9px;font-weight:600;line-height:1;text-align:center;transition:background .14s,color .14s}
.rail-it .icon{width:20px;height:20px;color:rgba(255,255,255,.55)}
.rail-it:hover{background:rgba(255,255,255,.06);color:#fff}
.rail-it:hover .icon{color:#fff}
.rail-it.act{background:rgba(255,255,255,.16);color:#fff}
.rail-it.act .icon{color:var(--acc-d)}
.rail-it.act .rail-lb{font-weight:700}
.rail-lb{max-width:56px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* == SIDEBAR SUB-MODUL (.subside — desktop, terang) =================== */
/* Isi modul AKTIF saja (nav lokal). Header = teks tebal nama modul (tanpa
   ikon — rail sudah menjawab "modul apa"). Logo ECOS tampil di puncak HANYA
   saat rail mati (keputusan 10 Jul: logo selalu kiri-atas kolom nav terkiri,
   logo = tombol Beranda; ⊞ topbar dihapus). */
.subside{display:none}
@media(min-width:1024px){
  .subside{display:flex;position:sticky;top:0;height:100vh;z-index:40;
    background:var(--card);border-right:1px solid var(--bdr);color:var(--tx);
    flex-direction:column;padding:0 8px 10px;
    transition:width .22s cubic-bezier(.4,0,.2,1)}
  body.rail-on.side-hidden .subside{display:none}
  /* mode mini (HANYA rail mati): 64px ikon-only + hover = overlay peek.
     Track grid tetap 64px → peek tidak menggeser konten (pola lama). */
  body.side-mini .subside{width:var(--side-w-mini);overflow:hidden}
  body.side-mini .subside:hover{width:var(--sub-w);overflow:visible;z-index:60;box-shadow:var(--sh-pop)}
  body.side-mini .subside:not(:hover) .ss-lb,
  body.side-mini .subside:not(:hover) .ss-mod,
  body.side-mini .subside:not(:hover) .slogo-tx{opacity:0}
  body.side-mini .subside:not(:hover) .sv{justify-content:center;padding-left:0;padding-right:0}
  body.side-mini .subside:not(:hover) .ss-nav{overflow:hidden}
}
.ss-logo{display:flex;align-items:center;min-height:var(--top-h);border-bottom:1px solid var(--bdr);margin:0 -8px 8px;padding:0 10px}
body.rail-on .ss-logo{display:none}
.ss-logo .slogo-brand{color:var(--navy)}
.ss-logo .slogo-brand:hover{background:var(--bg)}
.ss-logo .tag{opacity:1;color:var(--tx3)}
.ss-mod{font-weight:700;color:var(--navy);padding:12px 10px 10px;font-size:13.5px;white-space:nowrap;overflow:hidden;transition:opacity .16s ease}
body.rail-on .ss-mod{padding-top:14px}
.ss-nav{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(27,42,74,.15) transparent}
.sv{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--tx);
  font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;overflow:hidden;margin-bottom:1px}
.sv .icon{width:16px;height:16px;flex:none;color:var(--tx3)}
.sv:hover{background:var(--bg)}
.sv.act{background:var(--ac-soft);color:var(--ac-dk);font-weight:600}
.sv.act .icon{color:var(--ac-dk)}
.ss-lb{white-space:nowrap;transition:opacity .16s ease}
.ss-sect{margin:12px 10px 4px;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--tx3)}
.ss-foot{padding-top:8px;border-top:1px solid var(--bdr)}

/* == FLYOUT MENU RAIL (hover ikon rail saat sidebar tersembunyi) ====== */
.fly{position:fixed;left:calc(var(--rail-w) + 2px);background:var(--card);border:1px solid var(--bdr);
  border-radius:var(--r-md);box-shadow:var(--sh-pop);padding:6px;z-index:80;width:210px;font-size:13px;display:none}
.fly.open{display:block}
.fly-t{font-weight:700;color:var(--navy);padding:8px 10px 5px;font-size:12px}
.fly a{display:flex;gap:9px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--tx)}
.fly a:hover{background:var(--bg)}
.fly a .icon{color:var(--tx3);width:15px;height:15px}

/* toggle buka/tutup sidebar — SATU rumah di slot kiri topbar (desktop),
   permanen dua-arah, ikon berbalik sesuai state (keputusan 4 Jul).
   Selector .ic-btn.top-collapse agar menang dari .ic-btn (dideklarasikan
   belakangan dengan spesifisitas sama). */
.ic-btn.top-collapse{display:none}
@media(min-width:1024px){.ic-btn.top-collapse{display:flex;margin-left:-6px}}

/* ikon toggle berbalik sesuai state (satu tombol, dua arah) */
.top-collapse .tc-open{display:none}
body.side-hidden .top-collapse .tc-close,body.side-mini .top-collapse .tc-close{display:none}
body.side-hidden .top-collapse .tc-open,body.side-mini .top-collapse .tc-open{display:block}

/* saklar kecil (menu avatar: "Bar pintasan modul") */
.usw{margin-left:auto;width:30px;height:17px;border-radius:var(--r-pill);background:var(--bdr-ctl);position:relative;flex:none;transition:background .15s}
.usw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:left .15s}
.usw.on{background:var(--ac)}
.usw.on::after{left:15px}
/* item menu avatar berbentuk <button> + item khusus desktop (saklar rail) */
button.uitem{width:100%;border:none;background:transparent;text-align:left;cursor:pointer;font:inherit}
.umenu .uitem.uitem-desktop{display:none}
@media(min-width:1024px){.umenu .uitem.uitem-desktop{display:flex}}

/* == PEMILIH TEMA WARNA (survey — menu avatar) ======================== */
/* 4 preset + Custom; preferensi per-user (localStorage bisnisku_theme),
   engine apply = window.ecosApplyTheme (inline _layout.php, pre-paint).
   TODO server-side: angkat ke bis_settings `theme` (Lapis 3) bila hasil
   survey mau dikunci per-company. */
.uth .uth-sw{display:inline-flex;align-items:center;flex:none}
.uth .uth-sw i{width:15px;height:15px;border-radius:50%;border:2px solid var(--card);box-shadow:0 0 0 1px var(--bdr)}
.uth .uth-sw i+i{margin-left:-5px}
.uth.on{color:var(--ac-dk);background:var(--ac-soft)}
.sw-navy{background:#1b2a4a}
.sw-gold{background:#e0a82e}
.sw-white{background:#fff}
.sw-royal{background:#1E3A8A}
.sw-amber{background:#F59E0B}
.sw-multi{background:conic-gradient(#3B82F6,#14B8A6,#F59E0B,#F43F5E,#8B5CF6,#3B82F6)}
.uth-custom{padding:4px 14px 10px;display:flex;flex-direction:column;gap:7px}
.uth-custom label{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;font-weight:600;color:var(--tx2)}
.uth-custom input[type=color]{width:38px;height:24px;border:1px solid var(--bdr);border-radius:6px;padding:1px;background:var(--card);cursor:pointer}
/* pesan koreksi kontras otomatis (T80, fixContrast) — bukan error, jadi warna
   --warn (sama seperti .hol-hint), bukan --bad */
.uth-msg{margin:0;font-size:11px;line-height:1.4;color:var(--warn)}

/* == TOPBAR =========================================================== */
.top{background:var(--card);border-bottom:1px solid var(--bdr);padding:0 14px;height:var(--top-h);display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30}
/* tombol hamburger — pemicu drawer (mobile); disembunyikan di desktop */
.top-burger{flex:none;width:40px;height:40px;margin-left:-6px;border:none;background:transparent;border-radius:10px;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center}
.top-burger:hover{background:var(--bg)}
/* nav kiri = tab seksi aktif (renderTopbar) atau judul halaman.
   overflow-x:auto + scrollbar disembunyikan; indikator fade via .fade-l/.fade-r
   (di-toggle app.js saat bisa scroll) — sinyal "ada tab lagi" di HP. */
.top-nav{flex:1;min-width:0;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.top-nav::-webkit-scrollbar{height:0;width:0}
.top-nav.fade-r{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 30px),transparent)}
.top-nav.fade-l{-webkit-mask-image:linear-gradient(to left,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(to left,#000 calc(100% - 30px),transparent)}
.top-nav.fade-l.fade-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 30px,#000 calc(100% - 30px),transparent);mask-image:linear-gradient(to right,transparent,#000 30px,#000 calc(100% - 30px),transparent)}
.top-title{display:flex;align-items:center;font-size:15px;font-weight:700;color:var(--navy)}
.top-right{display:flex;align-items:center;gap:3px;flex:none}
@media(min-width:1024px){.top{padding:0 var(--sp-5);gap:12px}.top-burger{display:none}}
/* tab di dalam topbar: penuh tinggi, indikator garis bawah.
   flex:none + width:max-content → .wtabs jaga lebar intrinsik agar MELUAP
   dari .top-nav (scroll-x), bukan menyusut; syarat indikator fade berfungsi. */
.top .wtabs{border-bottom:none;margin:0;gap:0;height:var(--top-h);align-items:center;flex:none;width:max-content}
.top .wtab{box-sizing:border-box;height:var(--top-h);padding:0 15px;border-bottom:2px solid transparent;margin-bottom:0}
.top .wtab.act{color:var(--ac-dk);border-bottom-color:var(--ac)}
.ic-btn{width:38px;height:38px;border-radius:10px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;flex:none;color:var(--navy)}
.ic-btn:hover{background:var(--bg)}
.ic-btn .dot{position:absolute;top:8px;right:9px;width:7px;height:7px;border-radius:50%;background:var(--bad);border:1.5px solid var(--card)}
.ic-badge{position:absolute;top:4px;right:4px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;font-size:9px;font-weight:700;line-height:1;color:#fff;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--card);pointer-events:none}
.ic-badge.off{display:none}
.ic-badge-red{background:var(--bad)}
.ic-badge-amber{background:var(--gold)}
.av2{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:none;cursor:pointer;border:none}

/* == MENU USER (dropdown avatar topbar) =============================== */
.uwrap{position:relative;flex:none}
.umenu{position:absolute;top:calc(100% + 10px);right:0;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);box-shadow:var(--sh-pop);width:232px;display:none;z-index:60;overflow:hidden}
.umenu.open{display:block}
.umenu .uhead{padding:12px 14px;border-bottom:1px solid var(--bdr)}
.umenu .uhead .un{font-size:12.5px;font-weight:700;color:var(--tx)}
.umenu .uhead .ue{font-size:10.5px;color:var(--tx2);margin-top:2px}
.umenu .uitem{display:flex;align-items:center;gap:9px;padding:11px 14px;font-size:12px;font-weight:700;color:var(--tx)}
.umenu .uitem:hover{background:var(--bg)}
.umenu .uitem .icon{color:var(--tx2)}
.umenu .uitem.u-danger{color:var(--bad)}
.umenu .uitem.u-danger .icon{color:var(--bad)}


.umenu .usect{padding:9px 14px 5px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--tx3)}
.umenu .usep{height:1px;background:var(--bdr);margin:5px 0}

/* == PANEL AKTIVITAS (dropdown topbar) ================================ */
.awrap{position:relative;flex:none}
.amenu{position:absolute;top:calc(100% + 10px);right:0;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);box-shadow:var(--sh-pop);width:300px;display:none;z-index:60;overflow:hidden;max-height:420px;overflow-y:auto}
.amenu.open{display:block}
.amenu-head{padding:10px 14px;border-bottom:1px solid var(--bdr);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--tx3);position:sticky;top:0;background:var(--card)}
.alog-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid var(--bdr)}
.alog-item:last-child{border-bottom:none}
.alog-ic{flex:none;width:28px;height:28px;border-radius:var(--r-sm);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--tx2)}
.alog-body{min-width:0;flex:1}
.alog-desc{font-size:12px;color:var(--tx);line-height:1.4;word-break:break-word}
.alog-ctx{color:var(--tx3);font-weight:400}
.alog-meta{font-size:10.5px;color:var(--tx3);margin-top:3px}
.alog-empty{padding:28px 14px;text-align:center;font-size:12px;color:var(--tx3)}
.alog-empty .icon{display:block;margin:0 auto 8px;color:var(--tx3)}
/* header panel notifikasi: judul + aksi "tandai semua" */
.amenu-head-flex{display:flex;align-items:center;justify-content:space-between;gap:8px}
.amenu-action{border:none;background:transparent;cursor:pointer;font:inherit;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--ac-dk);padding:0;line-height:1}
.amenu-action:hover{text-decoration:underline}
.amenu-action.off{display:none}
/* item notifikasi: .alog-item yang juga link → reset gaya tautan + status unread */
.notif-item{position:relative;text-decoration:none;color:inherit;transition:background .12s}
a.notif-item{cursor:pointer}
a.notif-item:hover{background:var(--bg)}
.notif-item.is-unread .alog-desc{font-weight:600}
.notif-dot{position:absolute;top:13px;right:12px;width:7px;height:7px;border-radius:50%;background:var(--bad);flex:none}
/* command palette (cari menu) — panel lebih lebar, input sticky + hasil scroll */
.cmdk{width:360px;max-height:460px;padding:0}
.cmdk-input{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--bdr);position:sticky;top:0;background:var(--card);z-index:1}
.cmdk-input .icon{color:var(--tx3);flex:none}
.cmdk-input input{flex:1;border:none;outline:none;background:transparent;font:inherit;font-size:13px;color:var(--tx);padding:0}
.cmdk-input input::placeholder{color:var(--tx3)}
.cmdk-kbd{flex:none;font-size:9.5px;font-weight:600;color:var(--tx3);background:var(--bg);border:1px solid var(--bdr);border-radius:5px;padding:1px 5px;line-height:1.4}
.cmdk-results{max-height:400px;overflow-y:auto;padding:5px}
.cmdk-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);text-decoration:none;color:var(--tx);cursor:pointer}
.cmdk-item[hidden]{display:none}
.cmdk-item.is-active,.cmdk-item:hover{background:var(--bg)}
.cmdk-ic{flex:none;width:26px;height:26px;border-radius:var(--r-sm);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--tx2)}
.cmdk-item.is-active .cmdk-ic{background:var(--card)}
.cmdk-tx{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.3}
.cmdk-lb{font-size:12.5px;font-weight:600;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-ct{font-size:10.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmdk-empty{padding:24px 14px;text-align:center;font-size:12px;color:var(--tx3)}

/* == JUDUL HALAMAN ==================================================== */
.vhead{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vhead h1{font-size:var(--fs-xl);color:var(--navy);letter-spacing:-.4px}
.vhead .eyebrow{font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ac-dk);margin-bottom:1px}
.vhead .vsub{font-size:12px;color:var(--tx2);margin-top:3px}
.vhead .vact{display:flex;gap:9px;align-items:center}
/* alias vhead — pola semantik untuk halaman modul baru */
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.page-title{font-size:var(--fs-xl);font-weight:700;color:var(--navy);letter-spacing:-.4px}
.page-sub{font-size:12px;color:var(--tx2);margin-top:3px}
.page-actions{display:flex;gap:9px;align-items:center}
/* panel section header (title + sub + optional actions) */
.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.panel-title{font-size:13.5px;font-weight:700;color:var(--navy)}
.panel-sub{font-size:11.5px;color:var(--tx2);margin-top:2px}

/* == TOMBOL =========================================================== */
/* Tombol — tinggi & font SERAGAM lintas varian. Solid pakai border 1.5px
   transparan agar kotaknya identik dgn outline → tinggi/lebar tak meleset. */
.btn-p{border:1.5px solid transparent;cursor:pointer;font-size:13px;font-weight:700;padding:9px 18px;border-radius:var(--r-ctl);background:var(--ac-g,var(--ac));color:var(--ac-tx);box-shadow:var(--sh-btn);display:inline-flex;align-items:center;gap:7px;justify-content:center}
.btn-p:hover{filter:brightness(1.06)}
.btn-o,.btn-s,.btn-sec{border:1.5px solid var(--ac-bd);cursor:pointer;font-size:13px;font-weight:700;padding:9px 18px;border-radius:var(--r-ctl);background:var(--card);color:var(--ac-dk);display:inline-flex;align-items:center;gap:7px;justify-content:center;text-decoration:none}
.btn-o:hover,.btn-s:hover,.btn-sec:hover{background:var(--ac-soft)}
.btn-danger{border:1.5px solid transparent;cursor:pointer;font-size:13px;font-weight:700;padding:9px 18px;border-radius:var(--r-ctl);background:var(--bad);color:#fff;display:inline-flex;align-items:center;gap:7px;justify-content:center}
.btn-danger:hover{filter:brightness(1.08)}
.btn-ghost{border:1.5px solid transparent;cursor:pointer;font-size:13px;font-weight:700;padding:9px 18px;border-radius:var(--r-ctl);background:transparent;color:var(--tx2)}
.btn-ghost:hover{background:var(--bg);color:var(--tx)}
/* .btn-nav — tombol NETRAL low-emphasis utk Kembali/Batal: ghost + garis
   pinggir sejuk, teks gelap (jelas batasnya tanpa bersaing dgn aksi biru). */
.btn-nav{border:1.5px solid var(--bdr-ctl);cursor:pointer;font-size:13px;font-weight:700;padding:9px 18px;border-radius:var(--r-ctl);background:var(--card);color:var(--tx);display:inline-flex;align-items:center;gap:7px;justify-content:center}
.btn-nav:hover{background:var(--bg);border-color:var(--tx3);color:var(--tx)}
.btn-sm{padding:5px 12px;font-size:12px;border-radius:var(--r-ctl-sm)}
.btn-block{width:100%}
.btn-p:disabled,.btn-o:disabled,.btn-s:disabled,.btn-sec:disabled,.btn-danger:disabled{opacity:.5;cursor:default;filter:none}
/* split button ("draft email"): aksi utama + caret dropdown menyatu */
.btn-split{display:inline-flex;align-items:stretch}
.btn-split>.btn-split-main{border-top-right-radius:0;border-bottom-right-radius:0}
.btn-split>.btn-split-caret{padding:9px 9px;border-top-left-radius:0;border-bottom-left-radius:0;position:relative}
.btn-split>.btn-split-caret::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:rgba(255,255,255,.35)}
.btn-split>.btn-split-caret .icon{margin:0}
/* alias semantik — .btn sebagai base + modifier */
.btn{display:inline-flex;align-items:center;gap:7px;justify-content:center;cursor:pointer;font:inherit;font-weight:700;text-decoration:none;border-radius:var(--r-ctl);border:1.5px solid transparent}
.btn.btn-primary,.btn-primary{font-size:13px;padding:9px 18px;background:var(--ac-g,var(--ac));color:var(--ac-tx);box-shadow:var(--sh-btn)}
.btn.btn-primary:hover,.btn-primary:hover{filter:brightness(1.06)}
.btn.btn-ghost:hover{background:var(--bg);color:var(--tx)}
/* height modifiers untuk btn */
.btn-h36,.btn.btn-h36{height:36px;padding:0 16px;font-size:13px}
.btn-h32,.btn.btn-h32{height:32px;padding:0 12px;font-size:12px;border-radius:var(--r-ctl-sm)}

/* == FORM ============================================================= */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-size:11px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.4px}
.field label .req{color:var(--bad)}
.form-label{font-size:11px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:5px}
.inp{border:1px solid var(--bdr);border-radius:var(--r-ctl);padding:9px 12px;font:inherit;font-size:13px;background:var(--card);color:var(--tx);width:100%}
/* alias .input/.select/.textarea → sama seperti .inp */
.input,.select{border:1px solid var(--bdr);border-radius:var(--r-ctl);padding:9px 12px;font:inherit;font-size:13px;background:var(--card);color:var(--tx);width:100%}
.input:focus,.select:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.input::placeholder,.select::placeholder{color:var(--tx3)}
.input:disabled,.select:disabled{background:var(--bg);color:var(--tx3)}
textarea.input{resize:vertical;min-height:72px}
.inp:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.inp::placeholder{color:var(--tx3)}
.inp:disabled{background:var(--bg);color:var(--tx3)}
.inp.err{border-color:var(--bad)}
.inp.err:focus{box-shadow:0 0 0 3px var(--bad-bg)}
textarea.inp{resize:vertical;min-height:72px}
/* input + tombol aksi sebaris (mis. No Dokumen editable: field + ✏️) */
.inp-group{display:flex;gap:6px;align-items:stretch}
.inp-group .inp{flex:1;min-width:0}
.inp-group>.btn-o,.inp-group>.btn-p,.inp-group>.btn-nav{flex:0 0 auto;display:inline-flex;align-items:center}
.f-help{font-size:10.5px;color:var(--tx2)}
.f-help:empty{display:none}
.f-err{font-size:10.5px;color:var(--bad);font-weight:600}
/* tooltip info (i) — keterangan field on-hover, tak makan ruang */
.tip{display:inline-flex;vertical-align:middle;margin-left:4px;color:var(--tx3);cursor:help;position:relative}
.tip:hover,.tip:focus{color:var(--ac);outline:none}
.tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);
  background:var(--navy);color:#fff;font-size:11px;font-weight:400;line-height:1.45;letter-spacing:0;text-transform:none;
  padding:6px 9px;border-radius:6px;white-space:normal;width:max-content;max-width:210px;text-align:left;
  opacity:0;visibility:hidden;transition:opacity .12s;pointer-events:none;box-shadow:var(--sh-pop);z-index:60}
.tip::before{content:"";position:absolute;left:50%;bottom:calc(100% + 2px);transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--navy);opacity:0;visibility:hidden;transition:opacity .12s;z-index:60}
.tip:hover::after,.tip:focus::after,.tip:hover::before,.tip:focus::before{opacity:1;visibility:visible}
/* action bar rata kanan (tombol simpan) */
.vact-end{display:flex;justify-content:flex-end;align-items:center;gap:9px}
.check{display:flex;align-items:center;gap:8px;font-size:12.5px;cursor:pointer}
.check input{width:15px;height:15px;accent-color:var(--ac-dk)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row-3{grid-template-columns:1fr 1fr auto}

/* == HERO (sapaan / target) =========================================== */
.hero{background:var(--side-g,var(--side,var(--navy)));border-radius:15px;padding:20px 24px;display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;color:#fff}
.hero h2{font-size:19px;letter-spacing:-.3px}
.hero h2 b{color:var(--ac)}
.hero p{font-size:12.5px;color:rgba(255,255,255,.62);margin-top:5px;max-width:440px;line-height:1.5}
.hero .tgt{margin-left:auto;min-width:240px}
.hero .tlb{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.62);margin-bottom:6px}
.hero .tlb b{color:#fff}

/* progress bar — width persentase di-set inline dari data (dinamis, boleh) */
.track{height:9px;background:rgba(255,255,255,.16);border-radius:var(--r-pill);overflow:hidden}
.panel .track{background:var(--bg);border:1px solid var(--bdr)}
.fill{height:100%;background:var(--ac-g,var(--ac));border-radius:var(--r-pill)}

/* == KARTU STATISTIK (ui_stat) ======================================== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.stats-mb{margin-bottom:16px}
/* Garis atas bawaan = SLOT 1 (jangkar biru --info). Sengaja `--info`, BUKAN
   `--ac`: hex-nya kebetulan sama hari ini, tapi `--ac` ikut berubah kalau
   tenant menemakan aksennya (LAPIS 3 tokens.css) — jangkar KPI tidak boleh
   ikut bergeser. Perubahan dari navy ke biru ini menyentuh SELURUH halaman
   ber-KPI yang belum disapu; itu disengaja (T41, keputusan Fery 28 Jul 2026). */
.stat{background:var(--card);border:1px solid var(--bdr);border-top:3px solid var(--info);border-radius:var(--r-md);padding:13px 15px}
/* Nada KPI = MAKNA + KEGAWATAN (doktrin T41 — includes/ui/ui_stat.php).
   Urutan slot kiri→kanan: 1 biru jangkar · 2 hijau baik · 3 amber perhatian ·
   4 merah bahaya. Merah SELALU paling kanan. */
.stat.s-red{border-top-color:var(--bad)}
.stat.s-amber{border-top-color:var(--warn)}
.stat.s-green{border-top-color:var(--ok)}
/* SLOT 1 / jangkar (D2). Biru TETAP HIDUP di kartu KPI — maknanya yang
   berubah: dari "salah satu warna kategori" jadi "kartu ini tidak pernah
   menilai apa pun". Sama dengan bawaan .stat; ditulis eksplisit supaya
   pemanggil boleh menyatakan slot 1 secara sengaja.
   Yang TETAP DILARANG: biru sebagai TINGKAT ALARM (mis. "Sedang diproses"
   biru sejajar hijau/amber/merah). Palet KPI adalah skala peringatan, bukan
   palet kategori. Kalau bukan slot 1, dia netral/padam. */
.stat.s-blue{border-top-color:var(--info)}
/* PADAM (D3): kartu punya alarm tapi sedang aman (n=0). SATU abu — label &
   angka ikut meredup, bukan cuma garis atasnya: garis 3px terlalu halus untuk
   memikul makna "aman" sendirian. Padam TIDAK BOLEH biru — biru sudah slot 1. */
.stat.s-off{border-top-color:var(--bdr)}
.stat.s-off .lb,.stat.s-off .vl{color:var(--tx3)}
/* PENSIUN dari kartu KPI (D1, revisi Fery 28 Jul 2026): --navy #16295F terlalu
   gelap & nyaris tanpa saturasi — berdampingan dengan hijau/amber/merah dia
   terbaca sebagai batang hitam, bukan anggota keempat. Kelas ditahan hidup
   karena ~8 halaman masih mengirim tone 'navy' dan belum disapu; DILARANG
   untuk KPI baru, hapus baris ini setelah pemakai terakhirnya hilang di T42. */
.stat.s-navy{border-top-color:var(--navy)}

/* Palet yang SAMA untuk KPI sekunder (.hm-bk band beranda · .doc-4stat strip
   dalam kartu) — D4: ketiga komponen diselaraskan, BUKAN dilebur. Nama kelas
   `s-*` identik; wujudnya beda karena bentuknya beda: .stat punya garis atas,
   dua ini tidak, jadi tone-nya dibawa oleh WARNA NILAI. Tanpa kelas = biru
   jangkar (slot 1), sama seperti .stat. */
.hm-bk.s-blue  .hm-bk-v,.doc-4stat-cell.s-blue  .doc-4stat-val{color:var(--info)}
.hm-bk.s-green .hm-bk-v,.doc-4stat-cell.s-green .doc-4stat-val{color:var(--ok)}
.hm-bk.s-amber .hm-bk-v,.doc-4stat-cell.s-amber .doc-4stat-val{color:var(--warn)}
.hm-bk.s-red   .hm-bk-v,.doc-4stat-cell.s-red   .doc-4stat-val{color:var(--bad)}
/* Padam: nilai DAN label meredup, sejajar .stat.s-off */
.hm-bk.s-off   .hm-bk-v,.doc-4stat-cell.s-off   .doc-4stat-val{color:var(--tx3)}
.hm-bk.s-off   .hm-bk-l,.doc-4stat-cell.s-off   .doc-4stat-lbl{color:var(--tx3)}
/* PENSIUN — ikut .stat.s-navy di atas, alasan & jadwal hapus sama. */
.hm-bk.s-navy  .hm-bk-v,.doc-4stat-cell.s-navy  .doc-4stat-val{color:var(--navy)}

.stat .lb{font-size:var(--fs-xs);color:var(--tx2);text-transform:uppercase;letter-spacing:.5px}
.stat .vl{font-size:21px;font-weight:700;margin-top:3px}
.stat .dl{font-size:10.5px;font-weight:700;margin-top:2px;color:var(--ok)}
.stat .dl.dn{color:var(--bad)}
.stat .dl.nt{color:var(--tx2);font-weight:600}

/* == PANEL ============================================================ */
.cols2{display:grid;grid-template-columns:1.55fr 1fr;gap:14px;align-items:start}
.colstack{display:flex;flex-direction:column;gap:14px}
.panel{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);padding:16px 18px}
.panel h3{font-size:13.5px;color:var(--navy);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.panel h3 a{font-size:11px;color:var(--ac-dk);font-weight:700;cursor:pointer}
.panel-hint{font-size:12px;color:var(--tx2);margin-bottom:14px}
/* rhythm antar-panel yang ditumpuk langsung di dalam form (cegah border nempel).
   scope ke form> agar tak mengganggu panel sejajar di grid (.modcards/.cols2).
   margin block collapse → aman dgn mb-* / margin-top action-bar yang sudah ada. */
form>.panel+.panel{margin-top:14px}

/* == TABEL (ui_table) ================================================= */
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px}
th{text-align:left;padding:9px 14px;background:var(--bg);color:var(--tx2);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;border-bottom:1px solid var(--bdr)}
/* tabel full-bleed dalam panel (.panel.flush) — header & baris membentang
   ke tepi kartu (pola akunku); toolbar tetap ber-padding. */
.panel.flush{overflow:hidden}
.panel.flush .tbl-wrap{margin:8px -18px 0}
/* status bertumpuk (utama + indikator lewat tempo di bawahnya) */
.cell-status{display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px}
/* footer paginasi full-bleed dalam panel */
.list-pager{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:0 -18px -16px;padding:11px 18px;border-top:1px solid var(--bdr);font-size:12px;color:var(--tx2)}
.list-pager .pg-nav{display:flex;align-items:center;gap:4px}
.list-pager .pg{min-width:30px;height:30px;padding:0 8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--bdr);border-radius:8px;font-size:12px;font-weight:600;color:var(--tx2);background:var(--card)}
.list-pager a.pg:hover{border-color:var(--ac-bd);color:var(--ac-dk)}
.list-pager .pg.cur{background:var(--ac);border-color:var(--ac);color:#fff}
.list-pager .pg.off{opacity:.4;pointer-events:none}
td{padding:10px 14px;border-bottom:1px solid var(--bdr)}
tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--ac-soft)}
.t-num{text-align:right;font-variant-numeric:tabular-nums}
.t-center{text-align:center}
.t-bad{color:var(--bad)}
.t-ok{color:var(--ok)}
.t-warn{color:var(--warn)}
.t-empty{text-align:center;color:var(--tx2);padding:28px 10px;font-size:12px}
/* == TABEL → KARTU (mobile, opt-in .tbl-wrap.cards) ==================== */
/* MOBILE-FIRST: tabel ber-kelas .cards (otomatis dari ui_table) tampil
   sebagai daftar kartu — tiap baris satu kartu, label kolom dari data-label.
   ≥768px kembali jadi tabel. Tabel kompleks/interaktif TIDAK pakai .cards
   → tetap scroll-x. Pola sama dgn rich-list mobile yang sudah ada (CRM). */
.tbl-wrap.cards table,.tbl-wrap.cards tbody,.tbl-wrap.cards tr,.tbl-wrap.cards td{display:block;width:auto}
.tbl-wrap.cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tbl-wrap.cards tr{border:1px solid var(--bdr);border-radius:11px;background:var(--card);padding:4px 13px;margin-bottom:10px}
.tbl-wrap.cards tr:last-child{margin-bottom:0}
.tbl-wrap.cards td{border:none;padding:8px 0;display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-align:right;font-size:12.5px}
.tbl-wrap.cards td+td{border-top:1px solid var(--bdr)}
.tbl-wrap.cards td::before{content:attr(data-label);text-align:left;color:var(--tx2);font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;flex:none}
.tbl-wrap.cards td:empty{display:none}
.tbl-wrap.cards td.t-empty{display:block;text-align:center;padding:28px 10px}
.tbl-wrap.cards td.t-empty::before{content:none}
/* ≥768px: kembalikan ke TABEL biasa. WAJIB reset tiap selektor kartu dgn
   spesifisitas yang sama (atau lebih) — kalau tidak, aturan kartu bocor ke
   desktop (mis. td.t-empty/td:empty/td+td lebih spesifik dari `td` polos). */
@media(min-width:768px){
  .tbl-wrap.cards table{display:table;width:100%}
  .tbl-wrap.cards thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:table-header-group}
  .tbl-wrap.cards tbody{display:table-row-group}
  .tbl-wrap.cards tr{display:table-row;border:none;border-radius:0;background:none;padding:0;margin:0}
  .tbl-wrap.cards td{display:table-cell;border:none;border-bottom:1px solid var(--bdr);padding:10px 14px;text-align:left;font-size:12px}
  .tbl-wrap.cards td+td{border-top:0}
  .tbl-wrap.cards td::before{content:none}
  .tbl-wrap.cards td:empty{display:table-cell}
  .tbl-wrap.cards td.t-empty{display:table-cell;text-align:center;padding:28px 10px}
  .tbl-wrap.cards tr:last-child td{border-bottom:none}
  .tbl-wrap.cards td.t-num{text-align:right}
}
/* header sortable */
.th-sort{display:inline-flex;align-items:center;gap:5px;color:inherit;cursor:pointer;text-decoration:none;user-select:none}
.th-sort:hover{color:var(--tx)}
.th-sort.on{color:var(--ac-dk)}
.sort-ic{font-size:9px;color:rgba(0,0,0,.2)}
.th-sort.on .sort-ic{color:var(--ac-dk)}

/* == WORKSPACE TABS (ui_tabs) ======================================== */
.wtabs{display:flex;gap:1px;align-items:center;border-bottom:1px solid var(--bdr);margin-bottom:16px;overflow-x:auto}
.wtab{padding:11px 15px;font-size:13px;font-weight:600;color:var(--tx2);white-space:nowrap;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:7px;margin-bottom:-1px}
.wtab .icon{width:15px;height:15px;flex:none;opacity:.85}
.wtab.act .icon{opacity:1}
.wtab:hover{color:var(--tx)}
.wtab.act{color:var(--ac-dk);border-bottom-color:var(--ac)}
.wtab-n{font-size:11px;font-weight:700;background:var(--bg);color:var(--tx2);padding:1px 7px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums}
.wtab-n.on{background:var(--ac-soft);color:var(--ac-dk)}

/* == SEGMENTED (filter status) ======================================= */
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--bdr);border-radius:9px;padding:2px;gap:2px;flex-wrap:nowrap;flex:none}
.seg a{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--tx2);padding:5px 11px;border-radius:7px;white-space:nowrap}
.seg a:hover{color:var(--tx)}
.seg a.on{background:var(--card);color:var(--ac-dk);box-shadow:0 1px 2px rgba(0,0,0,.07)}
.seg a .cnt{font-weight:700;color:var(--tx3)}
.seg a.on .cnt{color:var(--ac-dk)}
/* Varian tombol (toggle JS, mis. picker "Ambil Data") — bukan link navigasi */
.seg button{font:inherit;font-size:12px;font-weight:600;color:var(--tx2);padding:5px 11px;border:none;border-radius:7px;background:none;white-space:nowrap;cursor:pointer}
.seg button:hover{color:var(--tx)}
.seg button.on{background:var(--card);color:var(--ac-dk);box-shadow:0 1px 2px rgba(0,0,0,.07)}

/* == CHIP (filter/toggle kanonik) ==================================== */
/* Komponen tunggal pengganti vc-chip/act-type-chip/crm-*-chip/dst.
   Base = squared (radius kontrol). Untuk filter STATUS pakai data-tone +
   .chips-status → warna aktif = MAKNA (hijau/kuning/merah). */
.chips{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap;flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border:1px solid var(--bdr);border-radius:var(--r-ctl);font-size:12.5px;font-weight:600;color:var(--tx2);background:var(--card);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .12s,color .12s,border-color .12s}
.chip:hover{background:var(--bg);color:var(--tx)}
.chip.on{background:var(--ac-soft);color:var(--ac-dk);border-color:var(--ac);box-shadow:inset 0 0 0 1px var(--ac)}
.chip .chip-n{font-size:11px;font-weight:700;color:var(--tx3);font-variant-numeric:tabular-nums}
.chip.on .chip-n{color:var(--ac-dk)}
.chip .chip-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;opacity:.85}
/* tinted status — warna aktif mengikuti makna (data-tone) */
.chips-status .chip.on[data-tone=ok]  {background:var(--ok-bg);  color:var(--ok);  border-color:#a7e3c8;box-shadow:inset 0 0 0 1px #a7e3c8}
.chips-status .chip.on[data-tone=warn]{background:var(--warn-bg);color:var(--warn);border-color:#f3dfb3;box-shadow:inset 0 0 0 1px #f3dfb3}
.chips-status .chip.on[data-tone=bad] {background:var(--bad-bg); color:var(--bad); border-color:#f3b0b0;box-shadow:inset 0 0 0 1px #f3b0b0}
.chips-status .chip.on[data-tone=mut] {background:var(--bg);     color:var(--tx);  border-color:var(--tx3);box-shadow:inset 0 0 0 1px var(--tx3)}

/* == ROW ACTION DROPDOWN ============================================= */
/* posisi fixed (di-set JS) supaya tidak terpotong overflow .tbl-wrap */
.rowmenu{position:fixed;min-width:158px;background:var(--card);border:1px solid var(--bdr);border-radius:9px;box-shadow:var(--sh-pop);padding:5px;display:none;z-index:60}
.rowmenu.open{display:block}
.rowmenu a,.rowmenu button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;font-size:12.5px;font-weight:600;color:var(--tx);border:none;background:none;cursor:pointer;border-radius:6px;text-align:left;font-family:inherit;text-decoration:none}
.rowmenu a:hover,.rowmenu button:hover{background:var(--bg)}
.rowmenu .icon{color:var(--tx2)}
.rowmenu .danger,.rowmenu .danger .icon{color:var(--bad)}
.rowmenu-sep{height:1px;background:var(--bdr);margin:4px 0}

/* == TOOLBAR DAFTAR (segmented + search + filter) — satu baris ======== */
.list-toolbar{display:flex;gap:10px 12px;align-items:center;flex-wrap:nowrap;margin-bottom:14px}
.list-filters{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;flex:1 1 auto;min-width:0;justify-content:flex-end}
/* hanya search yang menyusut agar toolbar tetap 1 baris */
.search-box{display:flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--bdr);border-radius:9px;padding:0 11px;height:34px;flex:1 1 60px;min-width:0}
@media (max-width:820px){.list-toolbar,.list-filters{flex-wrap:wrap}.search-box{flex-basis:160px}}
/* catatan info ringkas (callout di dalam .panel) */
.info-note{display:flex;align-items:flex-start;gap:9px;font-size:12.5px;color:var(--tx2);line-height:1.55}
.info-note .icon{color:var(--info);flex:none;margin-top:1px}
.info-note strong{color:var(--tx);font-weight:600}

/* Peringatan tenggat di hari libur (T40) — informatif, bukan blokir. Amber
   (--warn), sama seperti penanda libur T38 — DILARANG pakai --bad (merah
   khusus milik "Terlambat", lihat T36). */
.hol-hint{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--warn);margin-top:5px}
.hol-hint .icon{color:var(--warn);flex:none}
.hol-mark{color:var(--warn);margin-left:5px;display:inline-flex;vertical-align:middle;cursor:default}
.search-box .icon{color:var(--tx3);flex:none}
.search-box input{border:none;background:none;outline:none;font:inherit;font-size:12.5px;color:var(--tx);width:100%;min-width:0}
/* override .inp width:100% — kontrol filter inline, lebar tetap */
.inp-sm{height:34px;padding:0 10px;font-size:12.5px;width:auto}
.list-filters select.inp-sm{width:160px}
.list-filters input.inp-sm{width:142px}
/* == PILIH-MASSAL (action bar + kolom checkbox) ====================== */
/* .bulk-bar: muncul saat ≥1 baris terpilih (kelas .on via JS). Sticky di
   atas tabel dalam .panel; kolom checkbox .col-cb di tepi kiri tabel.
   Tombol aksi forward-compatible — tinggal tambah di .bulk-actions. */
.bulk-bar{display:none;position:sticky;top:0;z-index:6;align-items:center;gap:12px;
  margin:0 -18px;padding:9px 18px;background:var(--ac-soft);border-bottom:1px solid var(--ac-bd)}
.bulk-bar.on{display:flex}
.bulk-bar .bulk-count{font-size:12.5px;font-weight:700;color:var(--ac-dk);flex:none}
.bulk-bar .bulk-actions{display:flex;gap:8px;align-items:center;margin-left:auto;flex-wrap:wrap}
.col-cb{width:38px;text-align:center;padding-left:14px;padding-right:0}
.col-cb input{width:15px;height:15px;cursor:pointer;vertical-align:middle;margin:0}
.tbl-wrap.cards td.col-cb::before{content:none}
@media (max-width:767px){.tbl-wrap.cards td.col-cb{justify-content:flex-start}}
.t-link{color:var(--ac);font-weight:600}
.t-link:hover{text-decoration:underline}
/* t-link on a <button>: strip native button chrome so it reads as a link */
button.t-link{background:none;border:0;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;text-align:inherit;cursor:pointer}

/* == BADGE (ui_badge) ================================================= */
/* Badge tabel — KOMPAK. Ukuran ini didedikasikan untuk label status di
   sel tabel/kartu. Banner status (.iv-bnr) punya ukuran sendiri (lihat
   bawah) — JANGAN samakan; ubah salah satu tak boleh menyeret yang lain. */
.bdg{display:inline-block;font-size:10px;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.2px;line-height:1.45;border:1px solid transparent}
.b-ok{background:var(--ok-bg);color:var(--ok);border-color:#b9e8d4}
.b-ok-solid{background:#16a34a;color:#fff}
.b-warn{background:var(--warn-bg);color:var(--warn);border-color:#f3dfb3}
.b-bad{background:var(--bad-bg);color:var(--bad);border-color:#f3bcbc}
.b-br{background:var(--ac-soft);color:var(--ac-dk);border-color:var(--ac-bd)}
.b-mut{background:var(--bg);color:var(--tx2);border-color:var(--bdr)}
.b-info{background:var(--info-bg);color:var(--info);border-color:#bcd6ff}

/* == KARTU MODUL (beranda) ============================================ */
.modcards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}
.mc{display:block;background:var(--card);border:1px solid var(--bdr);border-radius:13px;padding:15px 17px;cursor:pointer}
.mc:hover{box-shadow:var(--sh-card)}
.mc .mhd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mc .mic{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;color:#fff;flex:none}
.mc .mnm{font-size:13.5px;font-weight:700;color:var(--navy)}
.mc .mst{font-size:10px;color:var(--tx2)}
.mc .mrow{display:flex;justify-content:space-between;font-size:11.5px;color:var(--tx2);padding:4px 0}
.mc .mrow b{color:var(--tx)}
.mc .go{font-size:11px;font-weight:700;margin-top:8px;display:inline-block}
/* warna per modul = peta palet data --dv (HANDOFF-token-warna §5, ala Zoho):
   Penjualan biru · Keuangan teal · Produksi oranye · SDM violet · Asisten indigo.
   Markup pakai kelas, bukan style="". */
.mc-accounting .mic{background:var(--dv-2)} .mc-accounting .go{color:#0D9488}
.mc-crm .mic{background:var(--dv-1)} .mc-crm .go{color:var(--ac-dk)}
.mc-hr .mic{background:var(--dv-3)} .mc-hr .go{color:#7C3AED}
.mc-produksi .mic{background:var(--dv-7)} .mc-produksi .go{color:#EA580C}
.mc-home .mic{background:var(--dv-8)} .mc-home .go{color:#4F46E5}

/* == FEED AKTIVITAS =================================================== */
.feed{display:flex;flex-direction:column;gap:12px}
.ev{display:flex;gap:10px;font-size:11.5px;line-height:1.45}
.ev .edot{width:9px;height:9px;border-radius:50%;margin-top:4px;flex:none;background:var(--tx3)}
.ev b{display:block}
.ev span{color:var(--tx2);font-size:10.5px}
/* warna dot per sumber/status — kelas, bukan style="" (peta modul --dv) */
.edot.e-accounting{background:var(--dv-2)}
.edot.e-crm{background:var(--dv-1)}
.edot.e-hr{background:var(--dv-3)}
.edot.e-produksi{background:var(--dv-7)}
.edot.e-ok{background:var(--ok)}
.edot.e-warn{background:var(--warn)}
.edot.e-bad{background:var(--bad)}

/* == KARTU BILLING ==================================================== */
.bill-card{background:var(--side-g,var(--side,var(--navy)));border-radius:13px;padding:16px 18px;color:#fff}
.bill-card .bp{font-size:14px;font-weight:700}
.bill-card .bd{font-size:11px;color:rgba(255,255,255,.6);margin-top:3px}
.bill-card .brow{display:flex;justify-content:space-between;font-size:11.5px;margin-top:10px;padding-top:10px;border-top:1px solid rgba(255,255,255,.14)}

/* == CHART BATANG ===================================================== */
/* tinggi bar di-set inline dari data (dinamis, boleh) */
.chart{display:flex;align-items:flex-end;gap:10px;height:130px;padding-top:6px}
.cb{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.cb .bar{width:100%;background:var(--ac-g,var(--ac));border-radius:5px 5px 0 0;min-height:4px}
.cb .bar.mut{background:var(--ac-bd)}
.cb .cl{font-size:9.5px;color:var(--tx2)}
.chart-note{font-size:10.5px;color:var(--tx2);margin-top:10px}
.chart-note b{color:var(--tx)}

/* == KANBAN PIPELINE ================================================== */
.kanban{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.kcol{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);padding:11px;display:flex;flex-direction:column;gap:8px}
.kh{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;font-weight:700;padding-bottom:8px;border-bottom:2px solid var(--ac)}
.kh .kc{font-size:9.5px;background:var(--ac-soft);color:var(--ac-dk);padding:2px 8px;border-radius:var(--r-pill);font-weight:700}
.deal{background:var(--bg);border:1px solid var(--bdr);border-radius:9px;padding:9px 11px;cursor:pointer}
.deal:hover{border-color:var(--ac-bd)}
.deal .dn{font-size:11.5px;font-weight:700}
.deal .dv{font-size:12px;font-weight:700;color:var(--ac-dk);margin-top:2px}
.deal .dm{font-size:9.5px;color:var(--tx2);margin-top:2px;display:flex;justify-content:space-between}

/* == DAFTAR APPROVAL ================================================== */
.apr{display:flex;flex-direction:column;gap:10px}
.ap{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--bdr);border-radius:10px;padding:10px 12px}
.ap .aav{width:30px;height:30px;border-radius:50%;background:var(--ac-soft);color:var(--ac-dk);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.ap .an{font-size:11.5px;font-weight:700}
.ap .ad{font-size:10px;color:var(--tx2)}
.ap .ok-b{margin-left:auto;border:none;background:var(--ok-bg);color:var(--ok);font-size:10px;font-weight:700;padding:6px 12px;border-radius:7px;cursor:pointer}
.ap .ok-b:hover{filter:brightness(.96)}

/* == MODAL KONFIRMASI (ui_modal — standar C4) ========================= */
/* pengganti confirm()/alert() browser. Fokus default di tombol Batal.   */
.modal-overlay{position:fixed;inset:0;background:rgba(27,42,74,.45);display:none;align-items:center;justify-content:center;z-index:100;padding:16px}
.modal-overlay.open{display:flex}
/* form-wrapper (ui_modal action) transparan agar .modal jadi anak flex langsung —
   tanpa ini width% modal dihitung ke <form> shrink-to-fit, bukan overlay */
.modal-overlay>form{display:contents}
.modal{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-pop);width:100%;max-width:440px;padding:22px 24px}
.modal .m-title{font-size:15px;font-weight:700;color:var(--navy);display:flex;align-items:center;gap:9px}
/* warna ikon judul = tone modal (derive dari confirm_class di ui_modal).
   Default INFO (biru) untuk aksi non-destruktif; danger (merah) hanya untuk
   tombol konfirmasi .btn-danger. */
.modal .m-title .icon{color:var(--info)}
.modal[data-tone="danger"] .m-title .icon{color:var(--bad)}
.modal[data-tone="warn"]   .m-title .icon{color:var(--warn)}
.modal[data-tone="ok"]     .m-title .icon{color:var(--ok)}
.modal .m-body{font-size:12.5px;color:var(--tx2);line-height:1.55;margin-top:9px}
.modal .m-body b{color:var(--tx)}
.modal .m-body .m-list{margin:.5rem 0 0 1.2rem}
/* aksi sangat destruktif: ketik ulang nama untuk konfirmasi */
.modal .m-verify{margin-top:12px}
.modal .m-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}

/* modal size variants */
.modal--lg{max-width:680px;width:95%}
.modal--md{max-width:460px}

/* picker dokumen dalam modal ("Ambil dari Penawaran") */
.docpick{display:flex;flex-direction:column;max-height:82vh}
.docpick-sub{font-size:12px;color:var(--tx3);margin:6px 0 12px}
.docpick .seg{margin-bottom:10px}
.docpick-filters{margin-bottom:10px}
.docpick-list{flex:1;min-height:200px;max-height:48vh;overflow-y:auto;border:1px solid var(--bdr);border-radius:var(--r-md)}
.docpick-row{display:grid;grid-template-columns:minmax(90px,auto) 1fr auto auto;align-items:center;gap:14px;width:100%;text-align:left;padding:10px 14px;border:none;border-bottom:1px solid var(--bdr);background:none;font:inherit;color:var(--tx);cursor:pointer}
.docpick-row:last-child{border-bottom:none}
.docpick-row:hover{background:var(--bg)}
.docpick-no{font-weight:700;font-family:monospace;color:var(--navy)}
.docpick-cust{color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docpick-date{color:var(--tx3);font-size:12px}
.docpick-total{font-weight:600;text-align:right;white-space:nowrap}
.docpick-empty{padding:40px;text-align:center;color:var(--tx3);font-size:13px}
.docpick-note{padding:8px 14px;font-size:11.5px;color:var(--tx3);background:var(--bg);border-top:1px solid var(--bdr)}
/* scrollable modal body */
.m-body--scroll{overflow-y:auto;max-height:calc(90vh - 130px);padding:16px 20px}
/* grid layout inside modal form */
.m-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.m-form-grid .form-row{margin:0}
.m-form-grid .field{margin:0}
.m-form-grid .span2{grid-column:1/-1}
/* subjudul seksi & baris checkbox dalam form modal panjang */
.m-subhead{font-weight:700;color:var(--navy);font-size:12px;letter-spacing:.02em;margin:16px 0 6px;padding-top:10px;border-top:1px solid var(--bdr)}
.m-check{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--tx);margin:8px 0;cursor:pointer}
/* utility text */
.tx-ok{color:var(--ok)}
.tx-bad{color:var(--bad)}
.tx-muted{color:var(--tx3)}
.tx-sm{font-size:11px}
.tx-xs{font-size:10px;color:var(--ac)}
.tx-ac{color:var(--ac)}
/* approval cell (dual-approve status) */
.apv-cell{font-size:11px;line-height:1.6}
.apv-ok{color:var(--ok)}
.apv-no{color:var(--tx3)}
/* document number cell */
.no-mono{font-weight:600;font-family:monospace;font-size:12px}
/* employee name + dept cell */
.emp-cell-dept{font-size:11px;color:var(--tx3)}
/* inline action button in table */
.btn-inline{font-size:11px;padding:4px 6px;border:1px solid var(--bdr);border-radius:6px;background:var(--card);cursor:pointer}
.btn-inline:hover{background:var(--bg)}
/* link-copy banner (overtime confirm link) */
.ot-link-banner{position:fixed;bottom:20px;right:20px;z-index:9999;max-width:460px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);box-shadow:var(--sh-pop);padding:14px 16px}
.ot-link-banner-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.ot-link-banner-title{font-size:13px;font-weight:700}
.ot-link-banner-body{font-size:11.5px;color:var(--tx2);margin:0 0 10px;line-height:1.5}
.ot-link-row{display:flex;gap:6px}
.ot-link-input{flex:1;padding:7px 10px;border:1px solid var(--bdr);border-radius:5px;font-size:11px;font-family:monospace;background:var(--bg)}
.ot-link-copy{padding:7px 12px;background:var(--ac);color:var(--ac-tx,#fff);border:none;border-radius:5px;font-size:11.5px;font-weight:600;cursor:pointer}
.ot-link-note{font-size:10px;color:var(--tx3);margin:6px 0 0}

/* == CS SUPPORT (T20) — entri sidebar (rail/subside/drawer) ke WhatsApp =
   BUKAN bubble mengambang: ikut alur & style item modul APA ADANYA (identik
   .rail-it/.sv/.nv, tanpa pembeda warna — keputusan Fery 25 Jul), cuma diberi
   garis pemisah tipis supaya tetap kebaca sebagai entri terakhir/terpisah.
   Resolver null → tak dirender (csSupportContact() di includes/_layout.php). */
.rail-cs{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.nv-cs{border-top:1px solid rgba(255,255,255,.1);margin-top:6px;padding-top:12px}
/* rail nyala → subside sudah "dampingan" rail (sama pola .ss-logo di atas):
   CS Support jangan dobel, cukup versi rail yang tampil. */
body.rail-on .sv-cs{display:none}

/* lisan modal info box */
.ot-info-box{padding:10px 12px;background:var(--bg);border-radius:6px;font-size:12.5px;margin-bottom:12px}
.ot-info-sub{color:var(--tx2);margin-top:4px}
.ot-warn-box{padding:8px 10px;background:var(--warn-soft,#fef3c7);border:1px solid var(--warn,#d97706);border-radius:6px;font-size:11.5px;color:var(--warn-dk,#92580a);margin-bottom:12px}
/* detail panel dl rows (JS-generated) */
.det-dl{padding:14px 18px}
.det-row{display:flex;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--bdr)}
.det-lbl{font-size:11px;color:var(--tx3);min-width:110px;flex-shrink:0}
.det-val{font-size:13px}
.det-total{font-size:15px;color:var(--ok)}
.det-box{margin-top:10px;padding:10px 12px;background:var(--bg);border-radius:6px;font-size:12.5px;white-space:pre-wrap}
.det-reject{margin-top:10px;padding:10px 12px;border-radius:6px;border-left:3px solid var(--bad);font-size:12px;color:var(--bad)}
/* close-x button */
.btn-x{background:none;border:none;cursor:pointer;font-size:18px;color:var(--tx3);padding:0 4px}
/* modal body readonly input */
.input-ro{background:var(--bg);font-weight:600}
/* monospace number input */
.input-mono{font-family:monospace}
/* amount highlight input */
.input-amount{background:var(--ac-soft,var(--bg));font-weight:700;font-family:monospace;color:var(--ac-dk,var(--ac))}
/* spacing utility */
.mb-12{margin-bottom:12px}
/* change-notes label accent */
.label-ac{color:var(--ac)}

/* == TOAST (ui_toast — standar C4) ==================================== */
/* kanan ATAS di bawah topbar (kanan bawah di-reserve widget VERA).
   Auto-hilang via animasi countdown --t-dur (default 4.5s); JS menutup
   saat animasi .t-bar selesai. Error TIDAK auto-hilang (tanpa .t-bar).
   Maks 3 bertumpuk, terbaru di atas — JS yang menegakkan.              */
.toasts{position:fixed;top:calc(var(--top-h) + 12px);right:16px;display:flex;flex-direction:column;gap:10px;z-index:120;width:340px;max-width:calc(100vw - 32px)}
.toast{--t-dur:2.5s;background:var(--card);border:1px solid var(--bdr);border-left:4px solid var(--tx3);border-radius:var(--r-md);box-shadow:var(--sh-pop);padding:12px 14px;display:flex;align-items:flex-start;gap:10px;position:relative;overflow:hidden;animation:toast-in .22s ease-out}
.toast .t-ic{flex:none;margin-top:1px}
.toast .t-msg{font-size:12px;line-height:1.45;flex:1}
.toast .t-msg b{display:block;font-size:12.5px}
.toast .t-msg span{color:var(--tx2);font-size:11px}
.toast .t-undo{border:none;background:none;cursor:pointer;font-size:11.5px;font-weight:700;color:var(--ac-dk);padding:0;text-decoration:underline}
.toast .t-close{border:none;background:none;cursor:pointer;color:var(--tx3);flex:none;padding:2px;border-radius:5px;line-height:0}
.toast .t-close:hover{background:var(--bg);color:var(--tx)}
.toast .t-bar{position:absolute;bottom:0;left:0;height:3px;width:100%;animation:toast-bar var(--t-dur) linear forwards}
.toast:hover .t-bar{animation-play-state:paused}
.t-success{border-left-color:var(--ok)}   .t-success .t-ic,.t-success .t-bar{color:var(--ok);background:var(--ok)}
.t-error{border-left-color:var(--bad)}    .t-error .t-ic{color:var(--bad)}
.t-warning{border-left-color:var(--warn)} .t-warning .t-ic,.t-warning .t-bar{color:var(--warn);background:var(--warn)}
.t-info{border-left-color:var(--info)}    .t-info .t-ic,.t-info .t-bar{color:var(--info);background:var(--info)}
.t-success .t-ic,.t-error .t-ic,.t-warning .t-ic,.t-info .t-ic{background:none}
@keyframes toast-in{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes toast-bar{from{width:100%}to{width:0}}

/* == EMPTY STATE ====================================================== */
.empty{text-align:center;padding:38px 16px;color:var(--tx2)}
.empty .icon{width:34px;height:34px;color:var(--tx3);margin-bottom:8px}
.empty .e-t{font-size:13.5px;font-weight:700;color:var(--tx)}
.empty .e-d{font-size:11.5px;margin-top:4px}
.empty .btn-p,.empty .btn-o{margin-top:14px}

/* == AUTH (login / lockout — halaman pra-login, tanpa sidebar) ======== */
/* <body class="auth"> — backdrop navy gradient + kartu tengah           */
body.auth{background:var(--side-g,var(--side,var(--navy)));min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 20px}
.auth-wrap{width:100%;max-width:400px}
.auth-card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-pop);padding:36px 32px 28px}
.auth-logo{display:flex;align-items:center;gap:11px;margin-bottom:26px}
.auth-logo-mark{width:38px;height:38px;border-radius:10px;background:var(--ac-g,var(--ac));color:var(--ac-tx);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:none}
.auth-logo-name{font-size:19px;font-weight:700;color:var(--tx);letter-spacing:-.3px;line-height:1.1}
.auth-logo-sub{font-size:9.5px;color:var(--tx3);letter-spacing:.8px;font-weight:700;margin-top:3px;text-transform:uppercase}
.auth-title{font-size:16px;font-weight:700;color:var(--tx);margin-bottom:4px}
.auth-sub{font-size:12.5px;color:var(--tx2);margin-bottom:22px}
/* alert */
.auth-err{background:var(--bad-bg);border:1px solid var(--bad);color:var(--bad);border-radius:var(--r-sm);padding:11px 14px;font-size:12.5px;margin-bottom:16px;display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.auth-alert-warn{background:var(--warn-bg);border:1px solid var(--warn);color:var(--warn);border-radius:var(--r-sm);padding:11px 14px;font-size:12.5px;display:flex;align-items:flex-start;gap:8px;line-height:1.5;margin-top:16px}
.auth-ok{background:var(--ok-bg);border:1px solid var(--ok);color:var(--ok);border-radius:var(--r-sm);padding:11px 14px;font-size:12.5px;margin-bottom:16px;display:flex;align-items:flex-start;gap:8px;line-height:1.5}
.auth-err .icon,.auth-alert-warn .icon,.auth-ok .icon{margin-top:1px;flex:none}
/* bar percobaan gagal */
.auth-bar{margin-bottom:16px}
.auth-bar-meta{display:flex;justify-content:space-between;font-size:var(--fs-sm);margin-bottom:4px}
.auth-bar-meta span:first-child{color:var(--tx3)}
.auth-bar-meta span:last-child{color:var(--bad);font-weight:700}
.auth-bar-track{height:3px;background:var(--bg);border-radius:2px;overflow:hidden}
.auth-bar-fill{height:100%;background:var(--bad);border-radius:2px;transition:width .3s}
/* form */
.auth-field{margin-bottom:16px}
.auth-field label{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--tx2);margin-bottom:6px}
.auth-label-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.auth-label-row label{margin-bottom:6px}
.auth-forgot{font-size:11.5px;font-weight:700;color:var(--ac);text-decoration:none}
.auth-forgot:hover{text-decoration:underline}
.auth-field input{width:100%;height:44px;padding:0 14px;border:1.5px solid var(--bdr);border-radius:9px;font-family:var(--ff);font-size:14px;color:var(--tx);background:var(--card);outline:none;transition:border-color .15s,box-shadow .15s}
.auth-field input:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.auth-inp-wrap{position:relative}
.auth-inp-wrap input{padding-right:44px}
.auth-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--tx3);padding:4px;line-height:0}
.auth-eye:hover{color:var(--tx2)}
.auth-captcha{display:flex;justify-content:center;margin-bottom:14px}
.auth-submit{width:100%;height:46px;background:var(--ac-g,var(--ac));color:var(--ac-tx);border:none;border-radius:9px;font-family:var(--ff);font-size:14px;font-weight:700;cursor:pointer;transition:filter .15s;margin-top:4px}
.auth-submit:hover{filter:brightness(.92)}
.auth-submit-link{display:flex;align-items:center;justify-content:center;text-decoration:none}
/* divider + google */
.auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--bdr)}
.auth-divider span{font-size:var(--fs-sm);color:var(--tx3);font-weight:500}
.auth-google{width:100%;height:46px;background:var(--card);color:var(--tx);border:1.5px solid var(--bdr);border-radius:9px;font-size:13.5px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;transition:background .15s,border-color .15s}
.auth-google:hover{background:var(--bg);border-color:var(--tx3)}
.auth-google svg{width:18px;height:18px;flex:none}
.auth-google-off{width:100%;height:46px;background:var(--bg);color:var(--tx3);border:1.5px dashed var(--bdr);border-radius:9px;font-size:12.5px;display:flex;align-items:center;justify-content:center}
/* onboarding: select industri + teks bantu + footer tautan */
.auth-field select{width:100%;height:44px;padding:0 14px;border:1.5px solid var(--bdr);border-radius:9px;font-family:var(--ff);font-size:14px;color:var(--tx);background:var(--card);outline:none;transition:border-color .15s,box-shadow .15s;cursor:pointer}
.auth-field select:focus{border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.auth-opt{font-weight:500;color:var(--tx3);text-transform:none;letter-spacing:0}
.auth-hint{display:block;font-size:11px;color:var(--tx3);margin-top:6px;line-height:1.4}
.auth-foot{text-align:center;font-size:12.5px;color:var(--tx2);margin-top:16px}
.auth-foot a{color:var(--ac);font-weight:700;text-decoration:none}
.auth-foot a:hover{text-decoration:underline}
.auth-back{text-align:center;margin-top:16px;font-size:13px}
.auth-back a{color:rgba(255,255,255,.5);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:color .15s,transform .15s}
.auth-back a:hover{color:rgba(255,255,255,.85);transform:translateX(-2px)}
/* lockout */
.auth-lockout{text-align:center;padding:6px 0 10px}
.auth-lockout-label{font-size:var(--fs-sm);font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.8px;margin-bottom:8px}
.auth-lockout-timer{font-size:40px;font-weight:700;color:var(--bad);font-family:monospace;letter-spacing:3px;line-height:1;margin-bottom:4px}
.auth-lockout-sub{font-size:var(--fs-xs);color:var(--tx3)}

/* == FILTER BAR & AKSI BARIS TABEL ==================================== */
.filter-bar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:14px}
.filter-select--auto{width:auto}
.filter-bar .field{margin-bottom:0;min-width:160px}
.filter-bar .btn-o{height:38px}
/* komponen search box dalam filter-bar */
.filter-search{position:relative;flex:1;min-width:180px}
.filter-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--tx3);pointer-events:none;display:flex;width:16px;height:16px}
.filter-input{padding-left:34px !important;height:36px}
/* select/input di filter-bar — ukuran compact, lebar auto */
.filter-select{height:36px;padding:0 10px;font-size:12.5px;border:1px solid var(--bdr);border-radius:9px;background:var(--card);color:var(--tx);font:inherit;cursor:pointer}
.filter-select:focus{outline:none;border-color:var(--ac);box-shadow:0 0 0 3px var(--ac-soft)}
.row-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;white-space:nowrap}
.inline-form{display:inline}

/* sel jangkar add-on (modules/home/tambahan.php): ikon + label/desc/meta stacked */
.ad-cell{display:flex;gap:11px;align-items:flex-start}
.ad-ic{flex:none;display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:9px;background:var(--ac-soft);color:var(--ac-dk)}
.ad-ic .icon{width:18px;height:18px}
.ad-tx{display:flex;flex-direction:column;gap:1px;min-width:0}
.ad-nm{font-weight:700;color:var(--tx)}
.ad-ds{font-size:12px;color:var(--tx2);line-height:1.45}
.ad-mt{font-size:11px;color:var(--tx3);margin-top:1px}
.t-right{text-align:right}

/* == BAGAN AKUN (modul accounting) ==================================== */
/* indentasi hierarki per kedalaman; header = akun induk, tidak menerima jurnal */
.coa-name{display:inline-flex;align-items:center;gap:6px}
.coa-d1{padding-left:20px}
.coa-d2{padding-left:40px}
.coa-d3{padding-left:60px}
.coa-head{font-weight:700;color:var(--navy)}
.coa-muted{color:var(--tx3)}
.coa-lock{color:var(--tx3)}

/* == FORM JURNAL (baris dinamis + indikator balance) ================== */
.jlines{display:flex;flex-direction:column;gap:8px}
.jline{display:grid;grid-template-columns:minmax(190px,1.3fr) 1fr 138px 138px 34px;gap:8px;align-items:center}
.jline-head{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2);font-weight:700;margin-bottom:8px}
.jline .j-del{padding:6px;justify-content:center}
.jfoot{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:14px;padding-top:13px;border-top:1px solid var(--bdr);flex-wrap:wrap}
.jfoot-add{justify-content:flex-start}
/* footer faktur: catatan (tercetak) + memo (internal) kiri · total kanan */
.inv-foot{display:flex;gap:24px;align-items:flex-start;margin-top:14px;flex-wrap:wrap}
.inv-notes-box{flex:1;min-width:280px;display:grid;grid-template-columns:1fr 1fr;gap:14px;align-content:start}
@media(max-width:760px){.inv-notes-box{grid-template-columns:1fr}}
.note-tag{font-size:9.5px;font-weight:600;text-transform:none;letter-spacing:0;padding:1.5px 7px;border-radius:var(--r-pill);margin-left:6px;vertical-align:middle}
.note-print{background:var(--ac-soft);color:var(--ac-dk)}
.note-internal{background:var(--bg);color:var(--tx2);border:1px solid var(--bdr)}
.jsum{display:flex;gap:20px;align-items:center;font-size:12.5px;color:var(--tx2)}
.jsum .jt{color:var(--tx);font-weight:700;font-variant-numeric:tabular-nums;margin-left:5px}
.jbal{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.4px;padding:4px 11px;border-radius:var(--r-pill)}
.jbal.ok{background:var(--ok-bg);color:var(--ok)}
.jbal.bad{background:var(--bad-bg);color:var(--bad)}

/* == FORM FAKTUR: tabel item satu baris (gaya akunku) ================= */
.ilines{display:flex;flex-direction:column;gap:8px}
.item-card{border:1px solid var(--bdr);border-radius:var(--r-md);padding:8px 10px;background:var(--bg)}
/* grid: del · kode · nama · [keterangan] · ref · qty · sat · harga · disc · jumlah */
.itbl-head,.irow{display:grid;gap:11px;align-items:center}
.itbl.has-ket .itbl-head,.itbl.has-ket .irow{grid-template-columns:26px 90px minmax(112px,1.5fr) minmax(90px,1fr) 74px 54px 52px 98px 48px 88px}
.itbl.no-ket .itbl-head,.itbl.no-ket .irow{grid-template-columns:26px 90px minmax(112px,1.7fr) 74px 54px 52px 98px 48px 88px}
.itbl-head{padding:8px 10px;margin-bottom:6px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-md);font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--tx2);font-weight:700}
.irow .inp{height:32px;font-size:12.5px;padding:0 8px;width:100%;box-sizing:border-box}
/* field terkunci sampai kode produk dipilih — abu muda, tak bisa diedit */
.irow .inp:disabled,.ispec .inp:disabled{background:var(--bg);color:var(--tx3);cursor:not-allowed}
.irow .i-del{padding:5px;justify-content:center;color:var(--tx2)}
.irow .i-amount{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
/* hint kosong + tombol sejajar field (Pengaturan) */
.empty-hint{color:var(--tx2);font-size:13px;padding:6px 0}
.field-btn{display:flex;align-items:flex-end}
.sales-add{margin-top:6px;border-top:1px dashed var(--bdr);padding-top:12px}
/* action bar bawah form (simpan) — standalone (bandingkan: .vhead .vact di atas) */
.vact,.form-act{display:flex;gap:9px;align-items:center;margin-top:10px}
/* field melebar penuh dalam .form-row 2-kolom */
.field-wide{grid-column:1/-1}
/* label pemisah seksi dalam form panjang (mis. modal karyawan) */
.form-sec{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--tx2);margin:16px 0 10px}
.form-sec:first-child,.m-body>.form-sec:first-of-type{margin-top:0}
/* Logo perusahaan (home/settings) */
.logo-preview{display:flex;align-items:center;gap:16px;margin-bottom:16px;padding:14px 16px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-md)}
.logo-preview img{max-height:80px;max-width:220px;object-fit:contain;border-radius:var(--r-sm);background:#fff}
.logo-preview .logo-remove-form{margin-left:auto}
.logo-empty{display:flex;align-items:center;gap:10px;padding:16px;background:var(--bg);border:2px dashed var(--bdr);border-radius:var(--r-md);color:var(--tx3);font-size:13px;margin-bottom:16px}
.logo-empty .icon{width:28px;height:28px;flex-shrink:0}
.logo-upload-form{margin-top:4px}
/* header faktur: grid 3 kolom padat (pihak+alamat | jadwal | dokumen) — gaya akunku */
.inv-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:0 22px;align-items:start}
.inv-col{display:flex;flex-direction:column;min-width:0}
.inv-notes{margin-top:2px}
/* memo = catatan internal (tak tercetak) → dibedakan lebih redup dari Catatan */
.inv-notes--memo{color:var(--tx2)}
@media(max-width:920px){.inv-grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.inv-grid{grid-template-columns:1fr}}
/* kartu info pelanggan (telp + PIC) di form faktur jual */
.ccard{display:flex;flex-wrap:wrap;gap:8px 18px;margin:-2px 0 12px;padding:8px 12px;background:var(--ac-soft);border:1px solid var(--ac-bd);border-radius:var(--r-md);font-size:12.5px;color:var(--ac-dk)}
.ccard[hidden]{display:none}
.ccard span{display:inline-flex;align-items:center;gap:6px}
.ccard span:empty{display:none}
.ccard .icon{color:var(--ac)}
/* checkbox "Berbeda" sejajar label alamat pengiriman */
.ship-diff{float:right;font-weight:400;font-size:12px;color:var(--tx2);text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;gap:5px}
/* toggle Detail GLOBAL — satu tombol di atas tabel, buka/tutup semua baris */
.itbl-bar{display:flex;justify-content:flex-end;margin-bottom:6px}
.i-detail-all{color:var(--tx2)}
.i-detail-all.open{color:var(--ac)}
/* baris spesifikasi item — label dari settings item_spec_labels */
.ispec{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--bdr)}
.ispec[hidden]{display:none}
/* detail terkunci sampai produk dipilih */
.ispec-lock{grid-column:1/-1;font-size:11px;color:var(--tx3);margin:-2px 0 2px}
.ispec:not(.locked) .ispec-lock{display:none}
.ispec.locked .inp:disabled{background:var(--bg);color:var(--tx3);cursor:not-allowed}
.ispec-f{display:flex;flex-direction:column;gap:3px}
.ispec-f span{font-size:9.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.4px}
.ispec-f .inp{padding:6px 10px;font-size:12px}
/* ringkasan total faktur (form & view) */
.inv-totals{display:flex;flex-direction:column;gap:7px;min-width:280px;margin-left:auto}
.inv-trow{display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:12.5px;color:var(--tx2)}
.inv-trow label{font-size:12.5px;color:var(--tx2)}
.inv-trow .jt{font-size:13px}
.inv-trow .inv-disc{width:120px}
/* baris diskon: label kiri · toggle %/Rp · input kanan */
.inv-trow-disc{flex-wrap:wrap}
.inv-trow-disc label{margin-right:auto}
/* mode % → nilai rupiah hasil diskon, baris sendiri di bawah input */
.disc-rp{flex-basis:100%;text-align:right;font-size:11.5px;color:var(--tx2)}
.disc-seg{display:inline-flex;border:1px solid var(--bdr);border-radius:var(--r-sm);overflow:hidden}
.disc-seg .disc-mode{border:none;background:var(--card);color:var(--tx2);font:inherit;font-size:11px;font-weight:600;padding:3px 9px;cursor:pointer;line-height:1.6}
.disc-seg .disc-mode+.disc-mode{border-left:1px solid var(--bdr)}
.disc-seg .disc-mode.active{background:var(--ac);color:var(--ac-tx)}
/* masa berlaku penawaran: pintasan +7/+14/+30 hari */
.valid-quick{display:inline-flex;gap:5px;margin-top:5px}
.valid-quick .vq{border:1px solid var(--bdr);background:var(--card);color:var(--tx2);font:inherit;font-size:11px;font-weight:600;padding:2px 8px;border-radius:var(--r-sm);cursor:pointer;line-height:1.6}
.valid-quick .vq:hover{background:var(--ac);color:var(--ac-tx);border-color:var(--ac)}
/* pemisah header ↔ item dalam satu panel (gaya akunku) */
.inv-sep{border-top:1px solid var(--bdr);margin:6px 0 16px}
/* alamat pengiriman saat "Berbeda" tidak dicentang: strip ringkas muted */
.ship-ghost{padding:9px 11px;border:1px dashed var(--bdr);border-radius:var(--r-md);background:var(--bg);color:var(--tx3);font-size:12.5px}
.ship-ghost[hidden]{display:none}
.inv-grand{border-top:1px solid var(--bdr);padding-top:8px;font-weight:700;color:var(--tx)}
.inv-grand .jt{font-size:15px}
.inv-totals-view{margin-top:12px}

/* == DOKUMEN VIEW (faktur, penawaran, SJ — mode tampil) ================ */
/* .panel.panel-bleed: kartu tanpa padding sendiri — anak kelola padding-nya */
.panel.panel-bleed{padding:0}
/* nomor dokumen di h1 — warna aksen, tabular nums */
.doc-num-soft{color:var(--ac-dk);font-variant-numeric:tabular-nums}
/* Banner status */
.iv-bnr{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r-md);border:1.5px solid;flex-wrap:wrap}
.iv-bnr-ok{background:var(--ok-bg);border-color:var(--ok)}
.iv-bnr-warn{background:var(--warn-bg);border-color:var(--warn)}
.iv-bnr-bad{background:var(--bad-bg);border-color:var(--bad)}
.iv-bnr-mut{background:var(--bg);border-color:var(--bdr)}
.iv-bnr-br{background:var(--ac-soft);border-color:var(--ac-bd)}
.iv-bnr-desc{font-size:12.5px;color:var(--tx2)}
/* Badge DI DALAM banner status = ukuran sendiri (lebih besar dari badge
   tabel, sepadan dgn teks banner 12.5px). Independen dari .bdg tabel. */
.iv-bnr .bdg{font-size:11px;padding:4px 12px;letter-spacing:.3px}
/* header 3-kolom mirip form layout */
.iv-hdr{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-bottom:1px solid var(--bdr)}
.iv-col{padding:16px 18px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--bdr)}
.iv-col:last-child{border-right:none}
.iv-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2);margin-bottom:2px}
.iv-val{font-size:13px;color:var(--tx);font-weight:500;line-height:1.4}
.iv-val.bold{font-weight:700}
.iv-val.overdue{color:var(--bad);font-weight:700}
.iv-val-num{font-size:17px;font-weight:800;color:var(--ac-dk);font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.iv-addr{font-size:12px;color:var(--tx2);line-height:1.5}
/* footer 3-col: catatan | memo | total */
.iv-foot{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;padding:14px 18px;border-top:1px solid var(--bdr)}
.iv-note-box{background:var(--bg);border-radius:var(--r-md);padding:10px 12px;font-size:12px;line-height:1.5;color:var(--tx2)}
.iv-tot{background:var(--bg);border-radius:var(--r-md);padding:13px}
.iv-tot .inv-grand{color:var(--ac-dk)}
.iv-tot .inv-grand .jt{font-size:16px;font-weight:800}
@media(max-width:900px){.iv-hdr,.iv-foot{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.iv-hdr,.iv-foot{grid-template-columns:1fr}}

/* == PICKER PRODUK: kolom "Kode" (dropdown absolut di bawah sel) ====== */
.iprod{position:relative;min-width:0}
.iprod .i-prod-search{width:100%}
.prod-ac-drop{position:absolute;top:100%;left:0;min-width:340px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);box-shadow:var(--sh-pop);z-index:40;max-height:240px;overflow-y:auto;margin-top:2px}
/* picker pelanggan/vendor (header faktur) — dropdown selebar field */
.cust-pick{position:relative}
.cust-pick .c-search{width:100%}
.cust-drop{min-width:0;right:0}
.prod-ac-add{padding:8px 12px;font-size:12.5px;font-weight:600;color:var(--ac-dk);cursor:pointer;border-bottom:1px solid var(--bdr)}
.prod-ac-add:hover{background:var(--ac-soft)}
.prod-ac-item{display:flex;gap:10px;align-items:center;padding:8px 12px;cursor:pointer;font-size:13px}
.prod-ac-item:hover,.prod-ac-item.ac-active{background:var(--ac-soft)}
.prod-ac-code{font-size:11px;color:var(--tx2);flex:none;min-width:54px}
.prod-ac-name{flex:1}
.prod-ac-price{font-size:11px;color:var(--tx3);flex:none}
.prod-badge{display:inline-flex;align-items:center;gap:3px;background:var(--ac-soft);color:var(--ac);border-radius:var(--r-sm);padding:1px 6px;font-size:10.5px;font-weight:600;vertical-align:middle;text-decoration:none;white-space:nowrap}
.prod-badge:hover{background:var(--ac-bd);color:var(--ac)}

/* == BERANDA LINTAS MODUL (Fase 4) ==================================== */

/* Grid utama: mobile = 1-col stacked (side dulu karena DOM order);
   desktop = row dengan feed di kiri (via order) + tindakan di kanan. */
.hm-grid{display:flex;flex-direction:column;gap:14px}
@media(min-width:1024px){
  .hm-grid{flex-direction:row;align-items:flex-start}
  .hm-main{flex:1.55;min-width:0;order:1}
  .hm-side{flex:1;min-width:0;order:2;display:flex;flex-direction:column;gap:14px}
}

/* Badge jumlah di header panel */
.hm-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--bad);color:#fff;font-size:10px;font-weight:700;line-height:1;margin-left:6px}

/* Panel "semua beres" */
.hm-all-clear{display:flex;align-items:center;gap:12px}
.hm-all-clear .icon{width:22px;height:22px;color:var(--ok);flex:none}
.hm-ac-title{font-size:13px;font-weight:700;color:var(--tx)}
.hm-ac-sub{font-size:11.5px;color:var(--tx2);margin-top:2px}

/* Daftar item perlu tindakan */
.action-list{display:flex;flex-direction:column;gap:6px}
.action-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;border:1px solid var(--bdr);border-left-width:3px;background:var(--bg);text-decoration:none;color:var(--tx);font-size:12.5px;font-weight:600;transition:background .12s,border-color .12s;min-height:44px}
.action-item:hover{background:var(--card)}
.action-item .ai-dot{width:8px;height:8px;border-radius:50%;flex:none}
.action-item .ai-text{flex:1;line-height:1.4}
.action-item .icon{color:var(--tx3);flex:none}
.action-item:hover .icon{color:var(--tx2)}
/* severity — kiri border + warna dot */
.ai-bad{border-left-color:var(--bad)}
.ai-bad .ai-dot{background:var(--bad)}
.ai-bad:hover{border-left-color:var(--bad)}
.ai-warn{border-left-color:var(--warn)}
.ai-warn .ai-dot{background:var(--warn)}
.ai-info{border-left-color:var(--info)}
.ai-info .ai-dot{background:var(--info)}

/* Quick nav modul (di panel side) */
.hm-modnav{display:flex;flex-direction:column;gap:4px}
.hm-modnav-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;text-decoration:none;color:var(--tx);font-size:12.5px;min-height:44px;transition:background .12s}
.hm-modnav-item:hover{background:var(--bg)}
.hm-modnav-ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#fff;flex:none}
.hm-modnav-nm{font-weight:700;line-height:1.2}
.hm-modnav-st{font-size:10.5px;color:var(--tx2);margin-top:1px}
.hm-modnav-item .icon{color:var(--tx3);margin-left:auto;flex:none}
/* warna ikon per modul (peta modul --dv) */
.hm-modnav-accounting .hm-modnav-ic{background:var(--dv-2)}
.hm-modnav-crm .hm-modnav-ic{background:var(--dv-1)}
.hm-modnav-hr .hm-modnav-ic{background:var(--dv-3)}
.hm-modnav-produksi .hm-modnav-ic{background:var(--dv-7)}

/* Feed aktivitas (dalam panel.flush) */
.hm-feed-head{display:flex;align-items:center;gap:8px;padding:12px 18px 0;font-size:13px;color:var(--navy);border-bottom:1px solid var(--bdr);padding-bottom:12px}
.hm-feed-head .icon{color:var(--ac);flex:none}
.hm-feed-head strong{flex:1}
.hm-feed-sub{font-size:10.5px;color:var(--tx2);font-weight:400}
.hm-feed{padding:14px 18px;gap:14px}
.hm-feed-empty{display:flex;align-items:center;gap:10px;padding:28px 18px;color:var(--tx2);font-size:12.5px}
.hm-feed-empty .icon{width:22px;height:22px;color:var(--tx3);flex:none}

/* Kartu masa uji (dashboard Beranda) */
.hm-trial{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--warn-bg);border:1px solid #fcd34d;border-radius:var(--r-md);margin-bottom:4px}
.hm-trial .icon{color:var(--warn);flex:none;width:18px;height:18px}
.hm-trial-body{flex:1;min-width:0}
.hm-trial-body strong{display:block;font-size:12.5px;font-weight:700;color:var(--warn)}
.hm-trial-body span{font-size:11.5px;color:var(--tx2);display:block;margin-top:1px}
@media(max-width:599px){.hm-trial{flex-wrap:wrap}.hm-trial-cta{align-self:flex-start}}

/* ── Asisten command center (Chat landing): briefing + composer + KPI head ── */
.hm-brief{margin-bottom:14px}
.hm-brief-head{display:flex;align-items:center;gap:8px;color:var(--navy);font-size:13.5px;margin-bottom:9px}
.hm-brief-head .icon{color:var(--ac);flex:none}
.hm-brief-head strong{flex:1;font-weight:700}
.hm-brief-when{font-size:11px;color:var(--tx2);font-weight:500}
.hm-brief-lead{font-size:14px;color:var(--tx);font-weight:600;line-height:1.5;margin:0 0 10px}
.hm-brief-pts{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:6px}
.hm-brief-pts li{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--tx2)}
.hm-brief-pts li .icon{color:var(--ac);flex:none}
/* composer "Tanya" (stub) */
.hm-ask{display:flex;align-items:center;gap:8px;border:1px solid var(--bdr);border-radius:var(--r-md);background:var(--bg);padding:5px 5px 5px 12px;transition:border-color .12s}
.hm-ask:focus-within{border-color:var(--ac)}
.hm-ask-ic{color:var(--tx3);flex:none}
.hm-ask-in{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--tx);padding:9px 0;outline:none}
.hm-ask-in::placeholder{color:var(--tx3)}
.hm-ask-send{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:9px;background:var(--ac);color:#fff;cursor:pointer;transition:opacity .12s}
.hm-ask-send:hover{opacity:.9}
.hm-ask-send .icon{flex:none}
.hm-ask-hint{font-size:11px;color:var(--tx3);margin-top:8px}
/* heading KPI lintas modul (di atas ui_stats) */
.hm-kpi-head{display:flex;align-items:center;gap:8px;margin:4px 0 10px;font-size:13px;color:var(--navy)}
.hm-kpi-head .icon{color:var(--ac);flex:none}
.hm-kpi-head strong{font-weight:700}
.hm-kpi-head span{font-size:11px;color:var(--tx2);font-weight:500;margin-left:auto}

/* ── Beranda redesign: strip "perlu perhatian" + band per modul ───────────── */
/* Strip atas (seam VERA): item bad/warn lintas modul, diurut severity */
.hm-pulse{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);padding:12px 16px 8px;margin-bottom:14px}
.hm-pulse-head{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--navy);margin-bottom:8px}
.hm-pulse-head .icon{color:var(--ac);flex:none}
.hm-pulse-head strong{font-weight:700;flex:1}
.hm-pulse-head span{font-size:11px;color:var(--tx2);font-weight:500}
.hm-pulse-list{display:flex;flex-direction:column}
.hm-pulse-item{display:flex;align-items:center;gap:9px;padding:8px 0;font-size:12.5px;color:var(--tx);text-decoration:none;border-top:1px solid var(--bdr);min-height:40px}
.hm-pulse-item:first-child{border-top:none}
.hm-pulse-item:hover{color:var(--navy)}
.hm-pulse-t{flex:1;line-height:1.4;font-weight:600}
.hm-pulse-item .icon{color:var(--tx3);flex:none}
.hm-pulse-item:hover .icon{color:var(--ac)}
.hm-pulse-clear{display:flex;align-items:center;gap:9px;padding:6px 0 10px;font-size:12.5px;color:var(--ok)}
.hm-pulse-clear .icon{color:var(--ok);flex:none;width:18px;height:18px}

/* Grid band: mobile 1-col, desktop 2-col */
.hm-bands{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:880px){.hm-bands{grid-template-columns:1fr 1fr}}

.hm-band{background:var(--card);border:1px solid var(--bdr);border-left:3px solid var(--bc,var(--ac));border-radius:0 var(--r-md) var(--r-md) 0;padding:14px 16px;display:flex;flex-direction:column}
.hm-band-head{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.hm-band-ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;flex:none;background:var(--bc,var(--ac))}
.hm-band-ic .icon{width:16px;height:16px}
.hm-band-nm{font-size:14px;font-weight:700;color:var(--navy)}
.hm-band-go{margin-left:auto;font-size:11.5px;color:var(--tx2);font-weight:600;display:inline-flex;align-items:center;gap:3px;text-decoration:none}
.hm-band-go:hover{color:var(--navy)}
.hm-band-go .icon{color:var(--tx3)}

/* KPI: hero full-width (+chart di kanan), 2 pendukung 2-kolom */
.hm-band-kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:4px}
.hm-bk{background:var(--bg);border-radius:var(--r-sm);padding:9px 11px}
.hm-bk.hero{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.hm-bk-main{min-width:0}
.hm-bk-l{font-size:10.5px;color:var(--tx2);font-weight:600;line-height:1.3}
/* KPI SEKUNDER (D4): nilai 17px — satu tingkat di bawah .stat (21px).
   Warna bawaan = slot 1 jangkar `--info`, sejajar garis atas bawaan .stat. */
.hm-bk-v{font-size:17px;font-weight:700;color:var(--info);margin-top:2px;line-height:1.15}
/* PENGECUALIAN RESMI (D4, dicatat di styleguide §7): hero band lebih besar
   karena dia satu-satunya KPI full-width dengan sparkline di sampingnya. */
.hm-bk.hero .hm-bk-v{font-size:22px}
.hm-bk-d{font-size:10.5px;margin-top:2px;font-weight:600}
.hm-bk-d.up{color:var(--ok)}
.hm-bk-d.dn{color:var(--bad)}
.hm-bk-d.nt{color:var(--tx3)}
.hm-bk-chart{flex:none}

/* Mini bar-chart (SVG sparkline) + stacked bar (produksi) */
.hm-spark{width:132px;height:40px;display:block}
.hm-stack{display:flex;height:9px;border-radius:var(--r-pill);overflow:hidden;background:var(--bdr);width:132px}
.hm-stack i{display:block;height:100%}
.hm-stack-leg{display:flex;gap:10px;margin-top:5px;font-size:9.5px;color:var(--tx2);font-weight:600}
.hm-stack-leg span{display:inline-flex;align-items:center;gap:3px}
.hm-stack-leg i{width:7px;height:7px;border-radius:2px;display:inline-block}

/* Label zona dalam band */
.hm-zt{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--tx3);font-weight:700;margin:12px 0 4px}

/* Reminder per band */
.hm-band-rem{display:flex;flex-direction:column}
.hm-rem{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tx);padding:7px 0;border-top:1px solid var(--bdr);text-decoration:none;min-height:36px}
.hm-band-rem .hm-rem:first-child{border-top:none}
.hm-rem:hover{color:var(--navy)}
.hm-rem-t{flex:1;line-height:1.35;font-weight:600}
.hm-rem .icon{color:var(--tx3);flex:none}
.hm-rem:hover .icon{color:var(--ac)}
.hm-rem-dot{width:7px;height:7px;border-radius:50%;flex:none}
.hm-rem-dot.bad{background:var(--bad)}
.hm-rem-dot.warn{background:var(--warn)}
.hm-rem-dot.info{background:var(--info)}
.hm-band-ok{font-size:11.5px;color:var(--ok);display:flex;align-items:center;gap:6px;padding:4px 0}
.hm-band-ok .icon{color:var(--ok);flex:none}

/* Aktivitas terakhir per band */
.hm-band-act{font-size:11.5px;color:var(--tx2);padding:4px 0;line-height:1.45}
.hm-band-act b{color:var(--tx);font-weight:600}
.hm-band-act-t{display:block;color:var(--tx3);font-size:10.5px;margin-top:1px}
.hm-band-act-empty{color:var(--tx3)}

/* Aksen per modul (border kiri + chip ikon) — peta modul --dv */
.hm-band-crm{--bc:var(--dv-1)}
.hm-band-crm .hm-band-ic{background:var(--dv-1)}
.hm-band-accounting{--bc:var(--dv-2)}
.hm-band-produksi{--bc:var(--dv-7)}
.hm-band-hr{--bc:var(--dv-3)}

/* ── Halaman Chat teaser (modules/home/chat.php) ── */
.vc-wrap{display:flex;flex-direction:column;gap:0}
.vc-msgs{display:flex;flex-direction:column;gap:12px;padding-bottom:130px}
/* Bubble pesan Vera */
.vc-msg{display:flex;gap:10px;align-items:flex-start}
.vc-msg-av{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex:none}
.vc-msg-body{flex:1;min-width:0}
.vc-msg-name{font-size:11px;font-weight:700;color:var(--tx2);margin-bottom:5px;letter-spacing:.2px}
.vc-msg-bubble{background:var(--bg);border:1px solid var(--bdr);border-radius:0 12px 12px 12px;padding:12px 15px;font-size:13.5px;line-height:1.6;color:var(--tx)}
.vc-msg-lead{font-weight:600;color:var(--navy);margin-bottom:8px}
.vc-msg-pts{margin:6px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.vc-msg-pts li{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--tx2)}
.vc-msg-pts li .icon{color:var(--ac);flex:none;width:14px;height:14px}
/* Chips contoh pertanyaan */
.vc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}
.vc-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border:1px solid var(--bdr);border-radius:var(--r-pill);background:var(--card);color:var(--tx);font:inherit;font-size:12.5px;cursor:pointer;transition:background .12s,border-color .12s;text-align:left;line-height:1.4}
.vc-chip:hover{background:var(--bg);border-color:var(--ac-bd)}
.vc-pro{display:inline-flex;align-items:center;gap:2px;font-size:10px;font-weight:700;color:#92400e;background:#fef3c7;border:1px solid #fde68a;border-radius:var(--r-pill);padding:1px 6px;white-space:nowrap;flex:none}
/* Footer sticky: input composer */
.vc-footer{position:sticky;bottom:14px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);box-shadow:0 4px 20px rgba(27,42,74,.12);display:flex;align-items:flex-end;gap:8px;padding:6px 6px 6px 14px}
.vc-in{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--tx);padding:9px 0;outline:none;resize:none;min-height:38px;max-height:110px;overflow-y:auto;line-height:1.5}
.vc-in::placeholder{color:var(--tx3)}
.vc-send{flex:none;display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border:0;border-radius:9px;background:var(--ac);color:#fff;cursor:pointer;transition:opacity .12s}
.vc-send:hover{opacity:.85}
.vc-send .icon{flex:none}
.vc-hint{font-size:11px;color:var(--tx3);text-align:center;padding:6px 0 0}
/* Hero layout (centered empty state) */
.vc-hero{display:flex;flex-direction:column;align-items:center;padding:40px 48px 32px;max-width:680px;margin:0 auto;width:100%}
.vc-av{width:50px;height:50px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;color:#fff;flex:none;margin-bottom:10px}
.vc-av .icon{width:22px;height:22px}
.vc-greet{font-size:18px;font-weight:600;color:var(--tx);margin-bottom:4px;text-align:center}
.vc-greet-sub{font-size:13.5px;color:var(--tx2);margin-bottom:20px;text-align:center;line-height:1.5}
.vc-brief-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-lg);padding:12px 16px;width:100%;margin:0 0 18px;list-style:none}
.vc-brief-card li{display:flex;align-items:flex-start;gap:7px;padding:4px 0;font-size:13px;color:var(--tx2)}
.vc-brief-card li .icon{width:14px;height:14px;flex:none;color:var(--ac);margin-top:2px}
.vc-brief-warn .icon{color:#dc2626!important}
.vc-chips-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-bottom:14px}
.vc-composer{width:100%;background:var(--card);border:1.5px solid var(--bdr);border-radius:12px;display:flex;align-items:flex-end;gap:6px;padding:6px 6px 6px 16px;margin-bottom:10px;transition:border-color .15s}
.vc-composer:focus-within{border-color:var(--ac-bd)}
@media(max-width:767px){.vc-footer{bottom:10px}.vc-chip{font-size:12px;padding:6px 12px}.vc-hero{padding:24px 16px 20px}.vc-chips-grid{grid-template-columns:1fr 1fr}}

/* == NOTICE BAR (full-width, di atas #shell) ================================= */
/* Non-sticky: notice scroll menghilang, .top sticky top:0 pin normal — nol risiko ketutup.
   z-index < .side-backdrop (z-60) agar drawer mobile menutup notice saat dibuka. */
.notice-bar{display:flex;flex-direction:column;width:100%;z-index:10}
.notice-item{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:9px 16px;font-size:12.5px;font-weight:500;position:relative}
.notice-msg{display:flex;align-items:center;gap:7px;flex:1;min-width:0}
.notice-icon{flex:none;width:15px;height:15px}
.notice-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.notice-form{margin:0}
.notice-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12px;font-weight:600;line-height:1;cursor:pointer;padding:8px 14px;border-radius:8px;border:1px solid transparent;text-decoration:none;white-space:nowrap}
.notice-dismiss{background:transparent;border:none;cursor:pointer;padding:4px;border-radius:6px;color:inherit;opacity:.55;display:flex;align-items:center;justify-content:center;flex:none}
.notice-dismiss:hover{opacity:1;background:rgba(0,0,0,.1)}
.notice-dismiss .icon{width:14px;height:14px}
/* Tones */
.notice-mode{background:var(--navy);color:#fff;border-bottom:2px solid var(--gold)}
.notice-mode .notice-icon{color:var(--gold)}
.notice-mode .notice-btn{border-color:rgba(255,255,255,.45);background:transparent;color:#fff}
.notice-mode .notice-btn:hover{background:rgba(255,255,255,.14)}
.notice-warn{background:var(--warn-bg);border-bottom:1px solid #fcd34d;color:var(--warn)}
.notice-warn .notice-btn{background:var(--warn);color:#fff}
.notice-warn .notice-btn:hover{opacity:.88}
.notice-info{background:var(--ac-soft);border-bottom:1px solid var(--ac-bd);color:var(--info)}
.notice-info .notice-btn{background:var(--ac);color:var(--ac-tx)}
.notice-info .notice-btn:hover{background:var(--ac-dk)}
.notice-danger{background:#fef2f2;border-bottom:1px solid #fca5a5;color:#b91c1c}
.notice-danger .notice-btn{background:#ef4444;color:#fff}
.notice-danger .notice-btn:hover{background:#dc2626}
@media(min-width:768px){
  .notice-item{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;padding:9px 20px}
  .notice-dismiss{margin-left:4px}
}

/* ── Pengaturan Asisten (modules/home/asisten-settings.php) ── */
/* Quota banner */
.asst-quota-panel{background:var(--ac-bg,#eff6ff)}
.asst-quota-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.asst-quota-ic{flex:none;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--ac);color:#fff;border-radius:10px}
.asst-quota-ic .icon{width:20px;height:20px}
.asst-quota-info{flex:1;min-width:180px}
.asst-quota-title{font-size:12px;font-weight:600;color:var(--tx2);margin-bottom:5px;text-transform:uppercase;letter-spacing:.04em}
.asst-quota-bar-wrap{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.asst-quota-bar{flex:1;height:6px;background:var(--bdr);border-radius:99px;overflow:hidden}
.asst-quota-fill{height:100%;background:var(--ac);border-radius:99px;transition:width .3s}
.asst-quota-fill.warn{background:var(--warn,#d97706)}
.asst-quota-num{font-size:13px;font-weight:600;color:var(--tx);white-space:nowrap}
.asst-quota-pct{color:var(--tx3);font-weight:400}
.asst-quota-sub{font-size:12px;color:var(--tx3)}
.asst-quota-sub a{color:var(--ac);text-decoration:underline}

/* Akses role */
.asst-role-list{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.asst-role-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--bdr);border-radius:var(--r-sm);cursor:pointer;transition:border-color .12s,background .12s}
.asst-role-item:hover:not(.locked){border-color:var(--ac);background:var(--ac-bg,#eff6ff)}
.asst-role-item.locked{cursor:default;opacity:.85}
.asst-role-item input[type=checkbox]{flex:none;width:16px;height:16px;accent-color:var(--ac)}
.asst-role-tx{flex:1;min-width:0}
.asst-role-nm{display:block;font-size:13.5px;font-weight:600;color:var(--tx)}
.asst-role-desc{display:block;font-size:12px;color:var(--tx3)}

/* Limit tipe */
.asst-limit-type{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.asst-lt-opt{flex:1;min-width:180px;display:block;cursor:pointer}
.asst-lt-opt input[type=radio]{position:absolute;opacity:0;pointer-events:none}
.asst-lt-lbl{display:flex;align-items:center;gap:10px;padding:12px 14px;border:2px solid var(--bdr);border-radius:var(--r-sm);transition:border-color .12s,background .12s}
.asst-lt-opt input:checked + .asst-lt-lbl{border-color:var(--ac);background:var(--ac-bg,#eff6ff)}
.asst-lt-lbl .icon{flex:none;color:var(--ac)}
.asst-lt-lbl strong{display:block;font-size:13.5px;color:var(--tx)}
.asst-lt-lbl small{display:block;font-size:11.5px;color:var(--tx3)}

/* Konteks data */
.asst-ctx-list{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.asst-ctx-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border:1px solid var(--bdr);border-radius:var(--r-sm);cursor:pointer;transition:border-color .12s,background .12s}
.asst-ctx-item:hover:not(.disabled){border-color:var(--ac);background:var(--ac-bg,#eff6ff)}
.asst-ctx-item.disabled{cursor:not-allowed;opacity:.55}
.asst-ctx-item input[type=checkbox]{flex:none;width:16px;height:16px;accent-color:var(--ac)}
.asst-ctx-ic{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:var(--bg2,#f1f5f9);border-radius:8px;color:var(--ac)}
.asst-ctx-ic .icon{width:16px;height:16px}
.asst-ctx-tx{flex:1;min-width:0}
.asst-ctx-nm{display:block;font-size:13.5px;font-weight:600;color:var(--tx)}
.asst-ctx-desc{display:block;font-size:12px;color:var(--tx3)}

/* Toggle label briefing */
.asst-tog-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;font-weight:500;color:var(--tx);padding-top:6px}
.asst-tog-label input{width:15px;height:15px;accent-color:var(--ac)}
.field-center{display:flex;flex-direction:column;justify-content:center}
@media(max-width:767px){.asst-limit-type{flex-direction:column}.asst-quota-row{flex-direction:column;align-items:flex-start}}


/* == RESPONSIVE (reflow konten halaman) =============================== */
/* Shell (sidebar/topbar/grid) sudah mobile-first di blok atas. Aturan di sini
   khusus REFLOW KONTEN halaman tertentu (dashboard, form, baris item) — masih
   max-width sampai migrasi rich-list (responsive-strategy.md §4). */
@media (max-width:1020px){
  .stats,.kanban,.modcards{grid-template-columns:1fr 1fr}
  .cols2,.form-row{grid-template-columns:1fr}
  .gsearch{display:none}
  .jline{grid-template-columns:1fr 1fr 34px}
  .jline select{grid-column:span 3}
  .jline input[name="line_notes[]"]{grid-column:span 3}
  .jline-head{display:none}
  .itbl.has-ket .irow,.itbl.no-ket .irow{grid-template-columns:1fr 1fr;gap:6px}
  .irow .iprod,.irow .i-name{grid-column:1/-1}
  .itbl-head{display:none}
  .inv-totals{min-width:0;width:100%}
}
@media (max-width:560px){
  .stats,.kanban,.modcards{grid-template-columns:1fr}
  .view{padding:14px}
  .auth-card{padding:28px 22px 22px}
}

/* ── Laporan keuangan (modules/accounting/reports.php) ─────────────────── */
/* Tab pemilih laporan */
.rtabs{display:flex;gap:7px;flex-wrap:wrap}
.rtabs a{padding:8px 14px;border-radius:9px;font-size:12.5px;font-weight:700;color:var(--tx2);background:var(--bg);border:1px solid var(--bdr);text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.rtabs a:hover{color:var(--tx)}
.rtabs a.act{background:var(--ac-soft);color:var(--ac-dk);border-color:var(--ac-bd)}
/* Kerangka laporan */
.rpt{background:var(--card);border:1px solid var(--bdr);border-radius:13px;overflow:hidden}
.rpt-head{padding:16px 20px;text-align:center;border-bottom:2px solid var(--navy);background:var(--bg)}
.rpt-head .co{font-size:13px;font-weight:700;color:var(--navy)}
.rpt-head h2{font-size:15px;font-weight:700;color:var(--tx);letter-spacing:.3px;margin-top:2px}
.rpt-head .per{font-size:11.5px;color:var(--tx2);margin-top:3px;font-variant-numeric:tabular-nums}
.rpt-empty{padding:44px 20px;text-align:center;color:var(--tx2);font-size:13px}
.rpt-empty .icon{width:30px;height:30px;color:var(--tx3);margin-bottom:8px}
.rpt-note{padding:13px 4px;font-size:11.5px;color:var(--tx2);line-height:1.6}
.rpt-cost-total{overflow-x:auto;border-top:2px solid var(--navy);margin-top:-1px}
/* Tabel laporan: grup → akun → subtotal → total → grand */
.rpt-table{width:100%;border-collapse:collapse;font-size:13px}
.rpt-table td{padding:7px 18px;vertical-align:middle}
.rpt-table td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.rpt-table td.neg{color:var(--bad)}
.rpt-table tr.acct td.lbl{padding-left:38px;color:var(--tx2);font-size:12.5px}
.rpt-table tr.acct td.lbl .code{color:var(--tx3);font-size:11px;margin-right:7px;font-variant-numeric:tabular-nums}
.rpt-table tr.acct.kontra td.lbl{font-style:italic;color:var(--tx3)}
.rpt-table tr.grp td{padding-top:14px;padding-bottom:5px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--tx2);border-top:1px solid var(--bdr)}
.rpt-table tr.sub td{border-top:1px solid var(--bdr);font-weight:700;background:var(--bg);color:var(--tx)}
.rpt-table tr.sub td.lbl{padding-left:20px}
.rpt-table tr.tot td{border-top:2px solid var(--navy);border-bottom:2px solid var(--navy);font-weight:700;background:var(--bg)}
.rpt-table tr.accent td{background:var(--ac-soft);color:var(--ac-dk);font-weight:700;border-top:1px solid var(--ac-bd);border-bottom:1px solid var(--ac-bd)}
.rpt-table tr.grand td{background:var(--navy);color:#fff;font-weight:700;font-size:14px;padding:12px 18px}
.rpt-table tr.grand.bad td{background:var(--bad)}
/* Neraca dua kolom */
.rpt-2col{display:grid;grid-template-columns:1fr 1fr}
.rpt-2col>div+div{border-left:1px solid var(--bdr)}
.rpt-table tr.sisi td{background:var(--navy);color:#fff;text-align:center;font-size:10.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;padding:11px}
@media (max-width:820px){
  .rpt-2col{grid-template-columns:1fr}
  .rpt-2col>div+div{border-left:none;border-top:1px solid var(--bdr)}
}
/* Checkbox pembanding pada filter Laba-Rugi */
.rpt-check{display:flex;align-items:center;gap:7px;height:38px;padding:0 12px;border:1px solid var(--bdr);border-radius:9px;background:var(--card);font-size:12.5px;font-weight:600;color:var(--tx2);text-transform:none;letter-spacing:0;cursor:pointer}
.rpt-check input{cursor:pointer}
/* Banner balance/sanity */
.rpt-alert{padding:10px 14px;border-radius:9px;font-size:12.5px;margin-bottom:14px;display:flex;align-items:center;gap:9px}
.rpt-alert .icon{width:17px;height:17px;flex:none}
.rpt-alert.ok{background:var(--ok-bg);color:var(--ok)}
.rpt-alert.bad{background:var(--bad-bg);color:var(--bad)}
.rpt-alert.info{background:var(--ac-soft);color:var(--ac-dk)}
/* ── Opening balance ──────────────────────────────────────── */
.ob-table-wrap{overflow-x:auto;margin-top:12px}
.ob-table{width:100%;border-collapse:collapse;font-size:13px}
.ob-table th{background:var(--navy);color:#fff;padding:9px 12px;text-align:left;font-weight:600;font-size:12px}
.ob-table th.t-right{text-align:right}
.ob-table .ob-code{width:90px;white-space:nowrap}
.ob-table .ob-name{min-width:200px}
.ob-table .ob-amt{width:160px}
.ob-table .ob-section td{background:var(--ac-soft);color:var(--ac-dk);font-weight:700;font-size:12px;padding:7px 12px;letter-spacing:.4px;border-top:2px solid var(--ac-bd)}
.ob-table .ob-section-rare td{background:var(--bg);color:var(--tx2);border-top:1px solid var(--bdr)}
.ob-table .ob-row td{padding:4px 8px;border-bottom:1px solid var(--bdr)}
.ob-table .ob-row:hover td{background:var(--ac-soft)}
.ob-table .ob-row input.inp{height:30px;font-size:12.5px;padding:0 8px;width:100%;box-sizing:border-box}
.ob-table tfoot td{padding:10px 12px;font-size:13px;border-top:2px solid var(--navy)}
.ob-table .ob-total td{background:var(--bg)}
.ob-table .ob-diff td{background:var(--bg);color:var(--tx2)}
.ob-table .ob-diff.ob-diff-ok td{color:var(--ok);font-weight:700}
.ob-table .ob-diff.ob-diff-bad td{color:var(--bad);font-weight:700}

/* ─── Tabel rekening bank (Pengaturan) ─────────────────────────────── */
.bank-table-wrap{overflow-x:auto;margin-top:12px}
.bank-table{width:100%;border-collapse:collapse;font-size:13px}
.bank-table th{background:var(--navy);color:#fff;padding:9px 12px;text-align:left;font-weight:600;font-size:12px;white-space:nowrap}
.bank-table th.t-center{text-align:center}
.bank-table td{padding:6px 10px;border-bottom:1px solid var(--bdr);vertical-align:middle}
.bank-table td.t-center{text-align:center}
.bank-table tbody tr:hover td{background:var(--ac-soft)}
.bank-table .bank-acc{white-space:nowrap}
.bank-table .bank-code{font-family:var(--mono,monospace);color:var(--tx3);font-size:12px}
.bank-table .bank-none td{background:var(--bg)}
.bank-table .bank-none:hover td{background:var(--bg)}
.bank-table input.inp{height:30px;font-size:12.5px;padding:0 8px;width:100%;min-width:120px;box-sizing:border-box}

/* ─── Rekap Kehadiran (hr/attendance) ──────────────────────────────── */
.att-qe-grid{display:grid;grid-template-columns:2fr 90px 90px 90px 110px 130px auto;gap:10px;align-items:end}
.att-hadir-preview{background:var(--ok-bg);border:1.5px solid var(--ok);color:var(--ok);height:36px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-weight:700;font-size:14px;font-family:var(--mono,monospace)}
.att-hadir-preview.warn{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.att-hadir-formula{font-size:10px;color:var(--tx2);text-align:center;margin-top:2px;font-family:var(--mono,monospace)}
.att-unfilled td{background:var(--bg);opacity:.75}
.att-auto-label{font-size:9px;font-weight:600;display:block;margin-top:1px}
.att-auto-label.auto{color:var(--ok)}
.att-auto-label.manual{color:var(--warn)}

/* == HR MODULE ============================================================ */

/* utility */
.ml-auto{margin-left:auto}
.fw-7{font-weight:700}
.tx2{color:var(--tx2)}
.nowrap{white-space:nowrap}
.pre-wrap{white-space:pre-wrap}
.ml-8{margin-left:8px}
.mt-8{margin-top:8px}
.mt-10{margin-top:10px}
.tx-12{font-size:12px}
.tx-14{font-size:14px}
.fw-6{font-weight:600}
.jc-end{justify-content:flex-end}
.field-2{flex:2}
.doc-sec-top{border-top:1px solid var(--bdr);margin-top:12px;padding-top:12px}
.td-score{font-size:1.1em}
.td-mono{font-family:var(--mono,monospace)}
.vact-form{display:flex;gap:8px;align-items:center}
.inp-date{width:160px}
.pr-num-sm{font-family:var(--mono,monospace);font-weight:600;font-size:12px}
.emp-sub{color:var(--tx2);font-size:11px;font-family:var(--mono,monospace)}
.panel.flush>h3{padding:12px 18px}
.flush-panel-h3-note{color:var(--tx2);font-size:12px;font-weight:400}
.panel-card{padding:0;overflow:hidden}
.col-act{width:48px}
.col-act-lg{width:60px}
.col-w96{width:96px}

/* HR: employees list */
.emp-cell{display:flex;align-items:center;gap:10px}
.emp-avatar{width:34px;height:34px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.emp-nick{color:var(--tx2);font-size:11px}
.emp-code{font-size:10.5px;color:var(--tx2);font-family:var(--mono,monospace);margin-top:1px}
.emp-dept-lbl{font-size:12.5px}
.emp-pos-lbl{font-size:11px;color:var(--tx2)}

/* HR: employee side panel */
.emp-panel{display:none;position:fixed;top:0;right:0;width:340px;height:100vh;background:var(--card);border-left:1px solid var(--bdr);box-shadow:-4px 0 20px rgba(0,0,0,.1);z-index:40;overflow-y:auto}
.emp-panel-hdr{display:flex;justify-content:space-between;align-items:center;padding:14px}
.emp-panel-ttl{font-size:12px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px}
.emp-kop{background:var(--navy);padding:16px}
.emp-kop-inner{display:flex;align-items:center;gap:12px}
.emp-kop-info{flex:1;min-width:0}
.emp-kop-name{font-size:14px;font-weight:700;color:#fff;line-height:1.2}
.emp-kop-full{font-size:11px;color:rgba(255,255,255,.6);margin-top:2px}
.emp-kop-code{font-size:10px;color:rgba(255,255,255,.4);font-family:var(--mono,monospace);margin-top:1px}
.emp-kop-tags{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.emp-tag{display:inline-flex;align-items:center;font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);background:rgba(255,255,255,.1)}
.emp-tag-dim{color:rgba(255,255,255,.6);background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.15)}
.emp-tag-ok{background:#16a34a;border-color:#16a34a;color:#fff}
.emp-tag-off{background:#6b7280;border-color:#6b7280;color:#fff}
.emp-mini-stats{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--bdr)}
.emp-mini-stat{padding:10px 14px;text-align:center}
.emp-mini-stat+.emp-mini-stat{border-left:1px solid var(--bdr)}
.emp-mini-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx2);margin-bottom:3px}
.emp-mini-vl{font-size:15px;font-weight:700;color:var(--ok);font-family:var(--mono,monospace)}
.emp-mini-vl-sm{font-size:11px;font-weight:700}
.emp-dtabs{display:flex;border-bottom:1px solid var(--bdr);padding:0 14px}
.emp-dtab{padding:9px 12px;border:none;background:none;cursor:pointer;font-size:12px;font-weight:600;color:var(--tx2);border-bottom:2px solid transparent;margin-bottom:-1px}
.emp-dtab.act{color:var(--ac);border-bottom-color:var(--ac)}
.emp-dp{padding:8px 14px 14px}
.emp-kv{display:flex;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--bdr)}
.emp-kv-lbl{font-size:10.5px;color:var(--tx2);min-width:110px;flex-shrink:0;text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.emp-kv-val{font-size:12.5px;color:var(--tx);font-weight:500;flex:1}
.emp-kv-sec{padding:8px 0 2px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx2)}
.emp-avatar-lg{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0;border:2px solid rgba(255,255,255,.2)}

/* HR: leave type selector table */
.lt-row{cursor:pointer}
.lt-row.lt-off{cursor:default;opacity:.6}
.lt-sel td{background:var(--ac-soft)}
.lt-sel td:first-child,.lt-sel td:last-child{background:var(--ac-soft)}
.lt-wrap{border:1px solid var(--bdr);border-radius:8px;overflow:hidden}
.lt-title{font-size:11.5px;font-weight:700;margin-bottom:8px}
.lt-table{font-size:11px}
.lt-radio-th{width:28px;padding:7px 8px}
.lt-radio-td{padding:6px 8px;text-align:center}
.lt-label{font-size:11px;font-weight:500}
.lt-label.fw-7{font-weight:700}
.lt-auto-badge{font-size:9px;margin-left:3px}
.lt-flag{font-size:10.5px}
.lt-flag-bad{color:var(--bad);font-weight:600}
.lt-flag-mut{color:var(--tx3);font-weight:400}
.lt-note{font-size:10.5px;line-height:1.4}

/* HR: leave view */
.lv-hero{padding:16px 20px;border-bottom:1px solid var(--bdr);display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.lv-stat-bar{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--bdr)}
.lv-stat-cell{padding:11px 14px;text-align:center}
.lv-stat-cell+.lv-stat-cell{border-left:1px solid var(--bdr)}
.lv-stat-lbl{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx2);margin-bottom:3px}
.lv-stat-val{font-size:13px;font-weight:700}
.lv-rows{padding:0 20px}
.lv-kv{display:flex;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--bdr)}
.lv-kv-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--tx2);min-width:140px;flex-shrink:0}
.lv-kv-val{font-size:13px;flex:1}
.lv-saldo{margin:0 20px 16px;padding:12px 16px;background:var(--bg);border-radius:var(--r-md);border:1px solid var(--bdr)}
.lv-saldo-ttl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx2);margin-bottom:10px}
.lv-saldo-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13px}
.lv-saldo-total{display:flex;justify-content:space-between;margin-top:6px;padding-top:8px;border-top:1px solid var(--bdr)}
.lv-no-saldo{margin:0 20px 16px;padding:10px 14px;background:var(--ok-bg);border-radius:var(--r-md);border:1px solid var(--ok);font-size:12px;color:var(--ok)}
.lv-action-bar{padding:12px 20px;border-top:1px solid var(--bdr);background:var(--bg);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lv-emp-info{margin-top:8px;font-size:13px}
.lv-period-date{font-size:16px;font-weight:800}
.lv-period-till{font-size:12px}
.lv-saldo-note{text-transform:none;font-weight:400}
.lv-saldo-remain{font-size:17px;font-weight:800}
.lv-form-col{display:flex;flex-direction:column;gap:12px}
.pr-num-ac{color:var(--ac-dk)}
.lv-saldo-head{padding:12px 18px;border-bottom:1px solid var(--bdr)}
.lv-saldo-head-title{font-size:13px;font-weight:700}
.lv-saldo-head-sub{font-size:11px;color:var(--tx2);margin-top:2px}
.lv-saldo-empno{font-size:11px;color:var(--tx2);font-family:var(--mono,monospace)}
.lv-progress-cell{min-width:160px}
.lv-pct-hint{font-size:10px;color:var(--tx2);margin-top:2px}
.lv-saldo-foot{padding:12px 18px;background:var(--bg);font-size:11.5px;color:var(--tx2);line-height:1.5;border-top:1px solid var(--bdr)}
.unpaid-flag{font-size:9.5px;margin-left:3px}

/* HR: attendance settings */
.att-h3-toggle{cursor:pointer}
.att-flex-row{display:flex;align-items:center;gap:8px}
.att-num-inp{width:100px;font-family:var(--mono,monospace);text-align:center;font-weight:700;font-size:18px}
.att-settings-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.att-field-nb{margin-bottom:0}
.att-field-flex{flex:1;min-width:200px}

/* HR: payroll */
.pr-action-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pr-num{font-family:var(--mono,monospace);font-weight:600}

/* HR: kasbon view (doc card) */
.doc-hero-bar{padding:16px 20px;border-bottom:1px solid var(--bdr)}
.doc-hero-inner{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px}
.doc-hero-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx2)}
.doc-hero-amt{font-size:24px;font-weight:800;font-family:var(--mono,monospace)}
.doc-status-sub{margin-top:8px;font-size:13px;color:var(--tx2)}
.doc-progress-bar{padding:14px 20px;border-bottom:1px solid var(--bdr);background:var(--bg)}
.doc-progress-meta{display:flex;justify-content:space-between;margin-bottom:6px;font-size:12px}
.doc-progress-track{height:7px;border-radius:4px;background:var(--bdr);overflow:hidden}
.doc-progress-fill{height:100%;background:var(--ok);border-radius:4px}
.doc-progress-pct{font-size:11px;color:var(--tx2);margin-top:3px;text-align:right}
.doc-body{padding:0 20px}
.doc-4stat{display:grid;grid-template-columns:repeat(4,1fr)}
.doc-4stat-cell{padding:12px 16px;text-align:center}
.doc-4stat-cell+.doc-4stat-cell{border-left:1px solid var(--bdr)}
.doc-4stat-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx2);margin-bottom:4px}
/* KPI SEKUNDER (D4): 17px sans — monospace 13px dibuang, tipografi KPI hanya
   punya DUA tingkat (utama 21px .stat · sekunder 17px .doc-4stat/.hm-bk). */
.doc-4stat-val{font-size:17px;font-weight:700;color:var(--info);line-height:1.2}
.doc-kv{display:flex;align-items:baseline;padding:8px 0;border-bottom:1px solid var(--bdr)}
.doc-kv-lbl{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--tx2);min-width:130px;flex-shrink:0}
.doc-kv-val{font-size:13px;font-weight:500;flex:1}
.doc-action-bar{padding:12px 20px;border-top:1px solid var(--bdr);background:var(--bg);display:flex;gap:8px;flex-wrap:wrap}
.doc-reject-box{display:none;padding:14px 20px;border-top:1px solid var(--bad);background:var(--bad-bg)}
.doc-reject-lbl{font-size:12px;font-weight:700;color:var(--bad);display:block;margin-bottom:6px}
.doc-pay-box{display:none;padding:14px 20px;border-top:1px solid var(--bdr);background:var(--bg)}
.doc-pay-ttl{font-size:13px;font-weight:700;margin-bottom:12px}
.doc-pay-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:10px}

/* HR: komponen gaji */
.comp-row-pending td{background:var(--ac-soft)}

/* HR: attendance quick-entry + table */
.att-qe-inp{font-family:var(--mono,monospace);text-align:center;font-weight:700}
.att-empty-cell{color:var(--tx2);font-size:12px;font-style:italic}
.bdg-num{font-family:var(--mono,monospace);font-weight:700;font-size:13px}
.t-ok{color:var(--ok)}
.mb-12{margin-bottom:12px}
.mb-14{margin-bottom:14px}
.mb-20{margin-bottom:20px}
.mt-2{margin-top:2px}
.d-block{display:block}
.col-w56{width:56px}
.bdg-inline{vertical-align:middle;margin-left:6px}
.m-0{margin:0}
.stat-click{cursor:pointer}
.iv-bnr-info{background:var(--bg);border-color:var(--bdr);color:var(--tx)}

/* panel-card header + mini progress + pagination */
.panel-card .panel-header{padding:12px 16px;border-bottom:1px solid var(--bdr);margin-bottom:0}
.panel-card .rpt-empty{border-top:1px solid var(--bdr)}
.ksb-mini-track{height:3px;background:var(--bdr);border-radius:2px;margin-top:3px;overflow:hidden;width:70px;margin-left:auto}
.ksb-mini-fill{height:100%;background:var(--ok);border-radius:2px}

/* HR: employee-docs (dokumen karyawan) */
.kdoc-anchor{display:block}
.kdoc-emp-name{font-size:13px;font-weight:600;color:var(--tx)}
.kdoc-emp-pos{font-size:11px;color:var(--tx2);font-weight:400}
.kdoc-title{font-size:12px;color:var(--ac-dk);display:block;margin-top:2px}
.kdoc-file-meta{font-size:11px;color:var(--tx2);display:inline-flex;align-items:center;gap:4px;font-family:var(--mono,monospace)}
.kdoc-expiry-warn{color:var(--warn);font-weight:600}
.kdoc-expiry-bad{color:var(--bad);font-weight:600}
.kdoc-existing-file{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx2);padding:8px 10px;background:var(--bg);border-radius:var(--r-sm);border:1px solid var(--bdr);margin-bottom:6px}
.kdoc-file-hint{color:var(--tx2);font-size:11px;margin-left:auto}

/* HR: approval inbox */
.apv-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.apv-type-lbl{font-size:11px;color:var(--tx2);margin-top:2px}
.apv-empty-hint{font-size:12px;color:var(--tx2);margin-top:4px}

/* HR: document-templates */
.dtpl-group{margin-bottom:16px}
.dtpl-group-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tx2);padding:10px 16px;border-bottom:1px solid var(--bdr)}
.dtpl-cnt{background:var(--bdr2);color:var(--tx3);font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px}
.dtpl-row{display:flex;align-items:center;gap:10px;padding:11px 16px;border-bottom:1px solid var(--bdr)}
.dtpl-row:last-child{border-bottom:none}
.dtpl-inactive{opacity:.5}
.dtpl-star{width:64px;flex-shrink:0}
.dtpl-meta{flex:1;min-width:0}
.dtpl-name{font-weight:600;color:var(--tx);font-size:13px}
.dtpl-preview{font-size:11px;color:var(--tx2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dtpl-status{flex-shrink:0;width:72px}
.dtpl-actions{display:flex;gap:6px;flex-shrink:0}
.dtpl-editor{font-family:var(--mono,monospace);font-size:12px;line-height:1.6;min-height:320px}
.dtpl-vars{margin-top:8px}
.dtpl-vars-label{font-size:11px;color:var(--tx2);display:block;margin-bottom:6px}
.vars-list{display:flex;flex-wrap:wrap;gap:6px}
.vars-list code{background:var(--bg);border:1px solid var(--bdr);border-radius:4px;padding:2px 7px;font-size:11px;color:var(--ac-dk,var(--ac));font-family:var(--mono,monospace);cursor:pointer;user-select:none}
.vars-list code:hover{background:var(--ac-soft);border-color:var(--ac-bd)}

/* HR: document-generate */
.dgen-layout{display:grid;grid-template-columns:1fr 280px;gap:16px;align-items:start}
.dgen-preview-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}
.dgen-preview-title{font-size:15px;font-weight:700;color:var(--tx);flex:1}
.dgen-preview-actions{flex-shrink:0}
.dgen-preview-body{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:20px 24px;min-height:120px;font-size:13px;line-height:1.7}
.dgen-var-row{display:flex;align-items:baseline;gap:8px;padding:4px 0;border-bottom:1px solid var(--bdr);font-size:12px}
.dgen-var-row:last-child{border-bottom:none}
.dgen-var-row code{font-size:11px;background:var(--bg);padding:1px 5px;border-radius:3px;font-family:var(--mono,monospace);color:var(--ac-dk,var(--ac));white-space:nowrap;flex-shrink:0}
.dgen-var-row span{color:var(--tx2)}
.dgen-aside{display:flex;flex-direction:column;gap:16px}

.tbl-pager{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-top:1px solid var(--bdr);font-size:12px;color:var(--tx2)}
.tbl-pager-btns{display:flex;gap:4px}
.pg-act{background:var(--ac);color:#fff}

/* HR: Dasbor — bar departemen */
.dept-list{display:flex;flex-direction:column;gap:7px}
.dept-row{display:flex;align-items:center;gap:10px;font-size:13px}
.dept-name{flex:0 0 120px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tx)}
.dept-bar-wrap{flex:1;background:var(--ac-soft);border-radius:4px;height:8px;overflow:hidden}
.dept-bar-fill{height:100%;background:var(--ac-g,var(--ac));border-radius:4px;min-width:4px}
.dept-cnt{flex:0 0 28px;text-align:right;font-size:12px;font-weight:700;color:var(--navy)}

/* HR: kalender hari libur (settings-holidays) */
.hl-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hl-nav-period{display:flex;align-items:center;gap:4px}
.hl-view-sw{display:inline-flex;background:var(--bg);border:1px solid var(--bdr);border-radius:8px;padding:3px;gap:2px}
.hl-vs-btn{padding:5px 13px;font-size:12px;font-weight:600;color:var(--tx2);text-decoration:none;border-radius:5px;transition:background .1s,color .1s}
.hl-vs-btn.active{background:var(--card);color:var(--tx);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.hl-cal-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;table-layout:fixed}
.hl-cal-dow{padding:9px 6px;text-align:center;font-size:10.5px;font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--bdr);background:var(--bg)}
.hl-cal-dow.hl-wknd{color:#b45309}
.hl-cell{height:80px;vertical-align:top;padding:5px 7px;border-right:1px solid var(--bdr);border-bottom:1px solid var(--bdr);cursor:default;transition:background .1s}
.hl-cell:last-child{border-right:none}
.hl-cell.hl-work:hover{background:rgba(0,0,0,.025);cursor:pointer}
.hl-cell.hl-empty{background:var(--bg)}
.hl-day-num{font-size:13px;font-weight:600;color:var(--tx);font-family:var(--mono,monospace)}
.hl-cell.hl-wknd .hl-day-num{color:#b45309}
.hl-cell.hl-today{outline:2px solid var(--ac);outline-offset:-2px}
.hl-cell.hl-today .hl-day-num{color:var(--ac)}
.hl-hlabel{font-size:9.5px;font-weight:600;line-height:1.3;margin-top:3px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
/* Holiday type backgrounds */
.hl-cell.hl-national{background:#FEF2F2}
.hl-cell.hl-national .hl-day-num{color:#991B1B}
.hl-cell.hl-national .hl-hlabel{color:#991B1B}
.hl-cell.hl-cuti-bersama{background:#FDF3E3}
.hl-cell.hl-cuti-bersama .hl-day-num{color:#92580A}
.hl-cell.hl-cuti-bersama .hl-hlabel{color:#92580A}
.hl-cell.hl-company{background:#EAF0F9}
.hl-cell.hl-company .hl-day-num{color:#1A4A8B}
.hl-cell.hl-company .hl-hlabel{color:#1A4A8B}
.hl-cell.hl-inactive{opacity:.4}
.hl-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--tx2);background:var(--bg);padding:10px 14px;border-radius:var(--r-sm)}
.hl-legend-item{display:flex;align-items:center;gap:6px}
.hl-legend-dot{width:13px;height:13px;border-radius:3px;flex-shrink:0}
/* HR: settings-payroll sections */
.hr-sett-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.hr-sett-section{font-size:11.5px;font-weight:700;color:var(--navy);letter-spacing:.02em;padding-bottom:8px;border-bottom:1px solid var(--bdr);margin-bottom:12px}

/* ── CRM: Pipeline Kanban ──────────────────────────────────────────────────── */
/* Mobile-first: stages = vertical sections; @min-width:768px = kanban horizontal */
.crm-pipeline{display:flex;flex-direction:column;gap:14px}
/* Kolom = kotak tersendiri (border+header bar+body ber-padding), pola dari board produksi */
.crm-stage-col{min-width:0;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-md);overflow:hidden}
.crm-col-closed{min-width:0}
.crm-stage-hd{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--bdr);background:var(--card)}
.crm-stage-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.crm-stage-name{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--tx)}
.crm-stage-cnt{font-size:11px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-pill);padding:1px 7px;font-weight:700;color:var(--tx2)}
.crm-stage-val{margin-left:auto;font-size:11px;color:var(--tx2)}
.crm-deal-card{display:block;text-decoration:none;color:inherit;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);padding:11px 13px;transition:box-shadow .15s,border-color .15s;cursor:grab;user-select:none}
.crm-deal-card:hover{box-shadow:0 2px 10px rgba(0,0,0,.09);border-color:var(--ac-bd)}
.crm-deal-card.priority{border-left:3px solid var(--warn)}
.crm-deal-title{font-size:13px;font-weight:600;color:var(--tx);line-height:1.35}
.crm-deal-sub{font-size:11.5px;color:var(--tx2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crm-deal-ft{display:flex;justify-content:space-between;align-items:center;margin-top:7px}
.crm-deal-value{font-size:12.5px;font-weight:700;color:var(--ac-dk)}
.crm-deal-prob{font-size:11px;color:var(--tx3)}
.crm-deal-date{font-size:10.5px;color:var(--tx3);border-top:1px solid var(--bdr);margin-top:7px;padding-top:6px;display:flex;align-items:center;gap:5px}
.crm-deal-date.overdue{color:var(--bad)}
.crm-deal-empty{font-size:12px;color:var(--tx3);padding:8px 2px;font-style:italic}
.crm-deal-star{width:13px;height:13px;color:var(--warn);vertical-align:-2px;flex:none}
.crm-deal-owner{display:flex;align-items:center;gap:5px;margin-top:7px;font-size:10.5px;color:var(--tx3)}
.crm-deal-owico{width:12px;height:12px;flex:none}
.crm-deal-closed{opacity:.8;cursor:default}
.crm-deal-cards{display:flex;flex-direction:column;gap:7px;min-height:60px;padding:10px}
/* SortableJS DnD states */
.crm-deal-card.sortable-ghost{opacity:.35;border:2px dashed var(--ac);background:var(--bg)}
.crm-deal-card.sortable-chosen{box-shadow:0 8px 24px rgba(0,0,0,.15);transform:rotate(1deg);cursor:grabbing}
.crm-deal-card.sortable-drag{opacity:0}
.crm-deal-cards.sortable-over{background:color-mix(in srgb,var(--ac) 8%,transparent);outline:2px dashed var(--ac);outline-offset:-2px;border-radius:var(--r-sm)}
/* Desktop kanban — kolom TUMBUH-SUSUT (T31): mengisi lebar, menyusut sampai
   min-width sebelum overflow-x:auto ambil alih. Stage konfigurabel per tenant
   (bisa >6 aktif) — TIDAK dijanjikan selalu 1 baris, lihat docs/handoff. */
@media(min-width:768px){
  .crm-pipeline{flex-direction:row;overflow-x:auto;padding-bottom:12px;align-items:flex-start;gap:12px}
  .crm-stage-col{flex:1 1 0;min-width:170px}
  .crm-deal-cards{max-height:calc(100vh - 300px);overflow-y:auto}
}
/* Kolom Menang/Gagal — TETAP di baris kanban (T31: strip terpisah DIBATALKAN).
   Drop ke sini = gestur niat, ditangani di JS (deal.php); guard server tetap
   di dnd_stage. Gagal diredupkan, Menang tidak. */
.crm-col-lost{opacity:.75}
.crm-deal-more{display:block;text-align:center;font-size:11.5px;font-weight:600;color:var(--ac-dk);text-decoration:none;padding:8px 2px}
.crm-deal-more:hover{text-decoration:underline}
/* Toolbar papan Deal: chip sales (kiri) + toggle "tampilkan tutup" & Kanban/List (kanan) */
.crm-filter-toggle-form{margin-left:auto;display:flex;align-items:center}
.crm-closed-toggle{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tx2);cursor:pointer;white-space:nowrap}
/* Toggle Kanban ⇄ List — CSS-only, kedua view dirender server-side */
.crm-list-view{display:none}
.crm-board.view-list .crm-pipeline{display:none}
.crm-board.view-list .crm-list-view{display:block}
/* CRM: view detail 2-col */
.crm-view-grid{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:768px){.crm-view-grid{grid-template-columns:2fr 1fr}}
/* CRM: leads list — mobile kartu, desktop tabel */
.crm-lead-list{display:flex;flex-direction:column;gap:8px}
.crm-lead-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);padding:12px 14px}
.crm-lead-link{display:block;text-decoration:none;color:inherit}
.crm-lead-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.crm-lead-name{font-size:13.5px;font-weight:600;color:var(--tx);line-height:1.35}
.crm-lead-sub{display:flex;align-items:center;gap:6px;margin-top:5px;flex-wrap:wrap}
.crm-lead-table{display:none}
@media(min-width:768px){
  .crm-lead-list{display:none}
  .crm-lead-table{display:block}
}
/* CRM: temperature dot */
.crm-temp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0}
/* CRM: mobile quick-actions */
.crm-lead-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.crm-quick-act{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:var(--r-sm);font-size:11.5px;font-weight:600;border:1px solid var(--bdr);background:var(--card);color:var(--tx2);text-decoration:none;transition:background .1s}
.crm-quick-act:hover{background:var(--bg);color:var(--tx)}
.crm-quick-act.wa{color:#059669;border-color:#a7f3d0;background:#f0fdf4}
.crm-quick-act.wa:hover{background:#dcfce7}

/* ── CRM Aktivitas ─────────────────────────────────────────────────────────── */
/* Mobile-first. Desktop enhancements via min-width. */

/* Timeline */
.act-timeline{display:flex;flex-direction:column;gap:8px}
.act-entry{display:flex;gap:12px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);padding:12px 14px}
.act-icon{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff}
.act-icon svg{width:15px;height:15px;flex-shrink:0}
.act-cnt{flex:1;min-width:0}
.act-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;flex-wrap:wrap}
.act-subject{font-size:13.5px;font-weight:600;color:var(--tx);line-height:1.35}
.act-date{font-size:11px;color:var(--tx3);white-space:nowrap;flex-shrink:0}
.act-body{font-size:13px;color:var(--tx2);margin-top:5px;line-height:1.5}
.act-outcome{font-size:12px;color:var(--ok);margin-top:5px;display:flex;align-items:center;gap:5px}
.act-outcome svg{width:13px;height:13px}
.act-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--tx3);margin-top:8px;align-items:center}
.act-meta a{color:var(--ac-dk);text-decoration:none}
.act-meta a:hover{text-decoration:underline}
.act-meta svg{width:12px;height:12px;display:inline;vertical-align:middle}
.act-actions{display:inline-flex;gap:4px;margin-left:auto}
.act-action-link{background:none;border:none;padding:2px 5px;cursor:pointer;color:var(--tx3);font-size:12px;border-radius:4px;display:inline-flex;align-items:center}
.act-action-link:hover{background:var(--bg);color:var(--tx)}
.act-action-link svg{width:13px;height:13px}
.act-empty{text-align:center;padding:24px;color:var(--tx2);font-size:13px}
.act-empty svg{width:28px;height:28px;color:var(--tx3)}
.act-empty p{margin-top:8px}
.act-more{margin-top:10px;font-size:12.5px}
.act-more a{color:var(--ac-dk);text-decoration:none}
.act-more a:hover{text-decoration:underline}

/* Type chips (form select) */
.act-type-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.act-type-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 13px;border:1px solid var(--bdr);border-radius:var(--r-pill);cursor:pointer;font-size:12.5px;font-weight:600;background:var(--card);color:var(--tx2);transition:background .12s,color .12s,border-color .12s;user-select:none}
.act-type-chip:hover{background:var(--bg);color:var(--tx)}
.act-type-chip.selected{background:var(--ac-soft);color:var(--ac-dk);border-color:var(--ac-bd)}
.act-type-chip svg{width:14px;height:14px;flex-shrink:0}

/* Quick-log inline */
.act-quick-trigger{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.act-quick-form{margin-top:14px;border-top:1px solid var(--bdr);padding-top:14px}
.act-quick-form .act-type-chips{margin-bottom:10px}

/* GPS lokasi aktivitas */
.act-location-row{display:flex;gap:6px;align-items:center}
.act-location-row .inp{flex:1;min-width:0}
.act-gps-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.act-gps-btn svg{width:14px;height:14px}
.act-gps-status{font-size:12px;margin-top:5px;padding:4px 8px;border-radius:var(--r-sm)}
.act-gps-status a{color:var(--ac-dk);text-decoration:none}
.act-gps-loading{color:var(--tx2);background:var(--bg)}
.act-gps-ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.act-gps-error{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.act-gps-saved{font-size:12px;color:var(--tx3);margin-top:5px;display:flex;align-items:center;gap:4px}
.act-gps-saved svg{width:12px;height:12px;color:var(--ac-dk)}
.act-gps-saved a{color:var(--ac-dk);text-decoration:none}
.act-gps-saved a:hover{text-decoration:underline}
.act-map-link{display:inline-flex;align-items:center;gap:3px;color:var(--ac-dk) !important;text-decoration:none}
.act-map-link svg{width:12px;height:12px}


/* ─── CRM: Commission & Target (Fase 3) ──────────────────────────────────── */

/* ── Komisi kartu (mobile-first) ─────────────────────────────────────────── */
.crm-comm-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.crm-comm-card{background:var(--bg1);border:1px solid var(--bdr);border-radius:10px;padding:14px}
.crm-comm-hd{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.crm-comm-info{display:flex;flex-direction:column;gap:1px}
.crm-comm-name{font-size:14px;font-weight:600;color:var(--tx1);line-height:1.2}
.crm-comm-role{font-size:11px;color:var(--tx3)}
.crm-comm-rank{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:11px;font-weight:700;background:var(--bg2);color:var(--tx2);flex-shrink:0}
.crm-comm-rank.r1{background:#f59e0b;color:#fff}
.crm-comm-rank.r2{background:#94a3b8;color:#fff}
.crm-comm-rank.r3{background:#c87941;color:#fff}
.crm-comm-meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:10px;font-size:12px;color:var(--tx2)}
.crm-comm-meta strong{color:var(--tx1)}
.crm-comm-amount{font-size:20px;font-weight:700;color:var(--ac);letter-spacing:-.5px}
.crm-comm-target{font-size:11.5px;color:var(--tx3);margin-top:6px}

/* Desktop: sembunyikan kartu, tampilkan tabel */
.crm-comm-table{display:none}
@media(min-width:768px){
  .crm-comm-list{display:none}
  .crm-comm-table{display:block;margin-top:16px}
}

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.crm-prog-track{height:5px;background:var(--bg3);border-radius:3px;overflow:hidden;margin-top:5px}
.crm-prog-fill{height:100%;background:var(--ac);border-radius:3px;transition:width .3s ease;min-width:2px}
.crm-prog-fill.over{background:#16a34a}

/* ── Target kartu (mobile-first) ─────────────────────────────────────────── */
.crm-target-list{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.crm-target-card{background:var(--bg1);border:1px solid var(--bdr);border-radius:10px;padding:14px}
.crm-target-metric{margin-top:10px}
.crm-target-metric-lbl{font-size:11px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.crm-target-metric-val{font-size:13px;color:var(--tx1)}
.crm-target-of{color:var(--tx3);font-size:12px}
.crm-target-pct{font-size:11.5px;color:var(--tx2);margin-top:2px}

/* Desktop: sembunyikan kartu target, tampilkan tabel */
.crm-target-table{display:none}
@media(min-width:768px){
  .crm-target-list{display:none}
  .crm-target-table{display:block}
}

/* ── CRM Contacts (mobile-first) ─────────────────────────────────────────── */
.crm-contact-list{display:flex;flex-direction:column;gap:8px}
.crm-contact-card{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);padding:12px 14px;transition:border-color .12s}
.crm-contact-card:hover{border-color:var(--ac-bd)}
.crm-contact-card.crm-contact-inactive{opacity:.65}
.crm-contact-link{display:block;text-decoration:none;color:inherit;-webkit-tap-highlight-color:transparent}
.crm-contact-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.crm-contact-name{font-size:13.5px;font-weight:600;color:var(--tx);line-height:1.35}
.crm-contact-sub{display:flex;align-items:center;gap:8px;margin-top:5px;flex-wrap:wrap;font-size:12px;color:var(--tx2)}
.crm-contact-sub .icon{width:13px;height:13px}
.crm-contact-meta{font-size:11px;color:var(--tx3);margin-top:4px;display:flex;align-items:center;gap:4px}
.crm-contact-meta .icon{width:12px;height:12px}
.crm-contact-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
/* desktop table: caché derrière mobile-first */
.crm-contact-table{display:none}
@media(min-width:768px){
  .crm-contact-list{display:none}
  .crm-contact-table{display:block}
}

/* Deal chip — badge jumlah deal aktif di kolom 1 */
.crm-deal-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:var(--r-pill);font-size:11px;font-weight:700;background:var(--ac-soft);color:var(--ac-dk);border:1px solid var(--ac-bd);flex-shrink:0}
.crm-deal-chip.none{background:var(--bg);color:var(--tx3);border-color:var(--bdr);font-weight:400}
.crm-deal-chip .icon{width:11px;height:11px}

/* Deal link list — di contact view (daftar deal terhubung) */
.crm-deal-link-list{display:flex;flex-direction:column;gap:6px}
.crm-deal-link-row{display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid var(--bdr);border-radius:var(--r-sm);text-decoration:none;color:inherit;transition:background .1s,border-color .1s;min-width:0}
.crm-deal-link-row:hover{background:var(--bg);border-color:var(--ac-bd)}
.crm-deal-stage-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.crm-deal-link-title{font-size:13px;font-weight:600;color:var(--tx);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-deal-link-val{font-size:12px;font-weight:700;color:var(--ac-dk);flex-shrink:0}
.crm-deal-link-status{flex-shrink:0}

/* KV table — tabel key-value di detail view */
.kv-table{width:100%;font-size:13.5px;border-collapse:collapse}
.kv-table td{padding:6px 0;vertical-align:top}
.kv-table td:first-child{color:var(--tx2);width:130px;padding-right:12px;white-space:nowrap}

/* Subtle link (tabel tbl-link-subtle) */
.tbl-link-subtle{color:inherit;text-decoration:none}
.tbl-link-subtle:hover{text-decoration:underline}

/* ─── Utility: spacing & layout ─────────────────────────────────────────── */
.mt3{margin-top:14px}.mt4{margin-top:16px}.ml-auto{margin-left:auto}.d-inline{display:inline}

/* ─── Two-line cell (name bold + sub muted) ─────────────────────────────── */
.cell-name{font-weight:600}.cell-sub{font-size:11px;color:var(--tx3);margin-top:1px}

/* ─── Panel extensions ───────────────────────────────────────────────────── */
.panel-section{border-top:1px solid var(--bdr);padding:16px}
.panel-empty{padding:28px 20px;text-align:center;color:var(--tx2);font-size:13px}
.panel-empty p{margin-top:8px}
.panel-hero{padding:40px 20px;text-align:center}
.panel-hero p{margin-top:12px;color:var(--tx2)}
.panel-total{padding:10px 16px 14px;border-top:1px solid var(--bdr);text-align:right;font-size:13px}

/* ─── Table utilities ────────────────────────────────────────────────────── */
.tbl-act{display:flex;gap:6px;justify-content:flex-end}
.row-total{font-weight:700}
.btn-xs{padding:4px 9px;font-size:11px;border-radius:6px}
.btn-del{color:var(--bad);border-color:var(--bad)}

/* ─── Progress meta text ─────────────────────────────────────────────────── */
.prog-meta{font-size:11.5px;color:var(--tx2);margin-bottom:3px}
.prog-pct{font-size:11px;color:var(--tx2);margin-top:2px}

/* ─── Text utilities ─────────────────────────────────────────────────────── */
.tx-na{color:var(--tx3);font-size:12px}
.tx-ac{color:var(--ac-dk)}

/* ─── Modal utilities ────────────────────────────────────────────────────── */
.modal-note{margin-bottom:12px;font-size:13px;color:var(--tx2)}
.modal .field+.field{margin-top:8px}
.modal .field:last-of-type{margin-bottom:14px}
.back-btn{display:inline-flex;margin-bottom:14px}

/* ═══════════════════════════════════════════════════════════════════════════
   SalesHub / CRM Settings — Pengaturan Pipeline & Komisi
   Mobile-first: base = mobile (375px), desktop via min-width:768px
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Icon-button (naik/turun/hapus baris) ───────────────────────────────── */
.btn-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;
  border:1px solid var(--bdr);border-radius:6px;
  background:none;color:var(--tx2);cursor:pointer;flex-shrink:0;
  transition:background .15s,color .15s,border-color .15s;
}
.btn-icon:hover{background:var(--bg2);color:var(--tx1);border-color:var(--bdr2)}
.btn-icon.danger{color:var(--bad)}
.btn-icon.danger:hover{background:color-mix(in srgb,var(--bad) 10%,transparent);border-color:var(--bad)}
.btn-icon.disabled{opacity:.35;cursor:default;pointer-events:none}

/* ─── Stage list — mobile ────────────────────────────────────────────────── */
.sh-stage-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}

.sh-stage-row{
  display:grid;
  grid-template-columns:36px 1fr auto auto;
  align-items:center;
  gap:8px;
  padding:10px 8px;
  border:1px solid var(--bdr);border-radius:8px;
  background:var(--bg1);
}
.sh-stage-row.won{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 6%,var(--bg1))}
.sh-stage-row.lost{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 6%,var(--bg1))}

/* Color picker overlay */
.sh-stage-pick-wrap{
  position:relative;width:32px;height:32px;border-radius:50%;overflow:visible;cursor:pointer;
}
.sh-stage-color-dot{
  display:block;width:28px;height:28px;border-radius:50%;
  border:2px solid rgba(0,0,0,.12);pointer-events:none;
}
.sh-stage-color-inp{
  position:absolute;inset:0;width:100%;height:100%;
  opacity:0;cursor:pointer;border:none;padding:0;
}

/* Stage name + probability in 2-column sub-grid */
.sh-stage-fields{display:flex;flex-direction:column;gap:4px;min-width:0}
.sh-stage-name-inp{width:100%;min-width:80px}
.sh-stage-prob-wrap{display:flex;align-items:center;gap:4px;width:80px}
.sh-stage-prob-inp{width:54px;text-align:right}
.sh-stage-prob-unit{font-size:12px;color:var(--tx2);flex-shrink:0}
.sh-stage-name-ro{font-weight:500;font-size:14px;color:var(--tx1)}
.sh-stage-prob-ro{font-size:12px;color:var(--tx2)}

/* Stage badges */
.sh-stage-badges{display:flex;align-items:center;gap:4px}
.sh-stage-deal-cnt{font-size:11px;color:var(--tx2);white-space:nowrap}

/* Action buttons column */
.sh-stage-actions{display:flex;align-items:center;gap:4px}

/* ─── Stage list — desktop ───────────────────────────────────────────────── */
@media(min-width:768px){
  .sh-stage-row{
    grid-template-columns:36px 1fr 160px auto;
    padding:10px 12px;
  }
  .sh-stage-fields{flex-direction:row;align-items:center;gap:8px}
  .sh-stage-name-inp{flex:1}
}

/* ─── Sub-sections within panel ─────────────────────────────────────────── */
.sh-sub-section{
  margin-top:24px;padding-top:20px;
  border-top:1px solid var(--bdr);
}
.sh-sub-section h4{margin-bottom:6px;font-size:14px;font-weight:600;color:var(--tx1)}

/* ─── Full-width color input (tambah tahap) ──────────────────────────────── */
.sh-color-full{width:48px;height:38px;padding:2px;border:1px solid var(--bdr);border-radius:6px;cursor:pointer}

/* ─── Commission: default block ─────────────────────────────────────────── */
.sh-comm-default{margin-bottom:24px}
.sh-comm-default h4{margin-bottom:8px;font-size:14px;font-weight:600}

/* ─── Commission: overrides ──────────────────────────────────────────────── */
.sh-comm-overrides h4{margin-bottom:8px;font-size:14px;font-weight:600}

/* Mobile kartu: tampil; tabel: sembunyi */
.sh-comm-rule-list{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.sh-comm-rule-card{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;border:1px solid var(--bdr);border-radius:8px;background:var(--bg1);gap:8px;
}
.sh-comm-rule-user{font-weight:500;font-size:14px;color:var(--tx1);margin-bottom:2px}
.sh-comm-rule-detail{font-size:12px;color:var(--tx2)}
.sh-comm-rule-table{display:none}

@media(min-width:768px){
  .sh-comm-rule-list{display:none}
  .sh-comm-rule-table{display:block}
}

/* ─── Add rule form ──────────────────────────────────────────────────────── */
.sh-add-rule-form{
  margin-top:16px;padding-top:16px;
  border-top:1px dashed var(--bdr);
}
.sh-add-rule-form h5{margin-bottom:8px;font-size:13px;font-weight:600;color:var(--tx2)}

/* ─── Empty hint ─────────────────────────────────────────────────────────── */
.empty-hint{font-size:13px;color:var(--tx2);padding:12px 0}

/* ─── Form helper text ───────────────────────────────────────────────────── */
.f-help{font-size:12px;color:var(--tx2);display:block;margin-top:4px}

/* ─── field-narrow (warna+persen dalam form row) ────────────────────────── */
.field-narrow{flex:0 0 auto}
@media(min-width:768px){.field-narrow{min-width:90px}}

/* ─── Color utilities ────────────────────────────────────────────────────── */
.c-ok{color:var(--ok)}
.c-warn{color:var(--warn)}
.c-bad{color:var(--bad)}
.c-tx2{color:var(--tx2)}
.c-tx3{color:var(--tx3)}

/* ─── CRM Laporan: filter & header ──────────────────────────────────────── */
.crm-rpt-period{font-size:12px;color:var(--tx2);margin-top:2px}

/* ─── CRM Funnel ─────────────────────────────────────────────────────────── */
/* Mobile: stacked list */
.crm-funnel{display:flex;flex-direction:column;gap:10px;margin:16px 0}

.crm-funnel-stage{
  border:1px solid var(--bdr);border-radius:10px;
  background:var(--card);padding:14px 16px;
}
.crm-funnel-stage-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:8px}
.crm-funnel-name{font-weight:600;font-size:14px;color:var(--tx);display:flex;align-items:center;gap:6px}
.crm-funnel-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.crm-funnel-count{font-size:13px;font-weight:600;color:var(--tx);white-space:nowrap}
.crm-funnel-value{font-size:12px;color:var(--tx2);margin-top:2px}
.crm-funnel-bar-track{height:6px;background:var(--canvas);border-radius:3px;overflow:hidden}
.crm-funnel-bar-fill{height:6px;border-radius:3px;transition:width .3s}
.crm-funnel-weighted{font-size:11px;color:var(--tx3);margin-top:4px}

/* Outcome cards (won/lost) */
.crm-funnel-outcomes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.crm-funnel-outcome{
  padding:14px 16px;border-radius:10px;text-align:center;
}
.crm-funnel-outcome.won{background:var(--ok-bg);border:1px solid #a7f3d0}
.crm-funnel-outcome.lost{background:var(--bad-bg);border:1px solid #fecaca}
.crm-funnel-outcome-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2);margin-bottom:4px}
.crm-funnel-outcome-count{font-size:20px;font-weight:700}
.crm-funnel-outcome.won .crm-funnel-outcome-count{color:var(--ok)}
.crm-funnel-outcome.lost .crm-funnel-outcome-count{color:var(--bad)}
.crm-funnel-outcome-value{font-size:12px;color:var(--tx2);margin-top:2px}

/* Desktop: visual funnel blocks with narrowing width */
@media(min-width:768px){
  .crm-funnel{gap:4px}
  .crm-funnel-stage{
    border-radius:6px;transition:opacity .2s;
    display:flex;align-items:center;gap:16px;padding:12px 20px;
  }
  .crm-funnel-stage:hover{opacity:.9}
  .crm-funnel-stage-hd{flex:1;margin-bottom:0}
  .crm-funnel-bar-track{display:none}
  .crm-funnel-meta{text-align:right;white-space:nowrap}
  .crm-funnel-outcomes{grid-template-columns:1fr 1fr;max-width:480px;margin-top:24px}
}

/* ─── CRM Konversi ───────────────────────────────────────────────────────── */
.crm-conv-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
@media(min-width:640px){.crm-conv-grid{grid-template-columns:repeat(4,1fr)}}

.crm-conv-card{
  border:1px solid var(--bdr);border-radius:10px;
  background:var(--card);padding:16px;text-align:center;
}
.crm-conv-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--tx2);margin-bottom:6px}
.crm-conv-value{font-size:24px;font-weight:700;color:var(--tx);line-height:1}
.crm-conv-sub{font-size:12px;color:var(--tx3);margin-top:4px}

/* Pipeline: leads → deals flow */
.crm-conv-flow{display:flex;flex-direction:column;gap:0;margin:16px 0}
.crm-conv-flow-step{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border:1px solid var(--bdr);
  background:var(--card);position:relative;
}
.crm-conv-flow-step:first-child{border-radius:10px 10px 0 0}
.crm-conv-flow-step:last-child{border-radius:0 0 10px 10px}
.crm-conv-flow-step+.crm-conv-flow-step{border-top:none}
.crm-conv-flow-icon{width:36px;height:36px;border-radius:8px;background:var(--ac-soft);display:flex;align-items:center;justify-content:center;color:var(--ac);flex-shrink:0}
.crm-conv-flow-label{font-size:13px;color:var(--tx2);flex:1}
.crm-conv-flow-val{font-size:16px;font-weight:700;color:var(--tx)}
.crm-conv-flow-rate{font-size:12px;color:var(--tx3)}

/* Lost reasons */
.crm-lost-list{display:flex;flex-direction:column;gap:8px;margin:12px 0}
.crm-lost-item{display:flex;align-items:center;gap:10px}
.crm-lost-label{flex:1;font-size:13px;color:var(--tx);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-lost-bar-track{width:120px;height:8px;background:var(--canvas);border-radius:4px;overflow:hidden;flex-shrink:0}
.crm-lost-bar-fill{height:8px;background:var(--bad);border-radius:4px}
.crm-lost-count{font-size:12px;font-weight:600;color:var(--tx2);min-width:28px;text-align:right}
@media(min-width:768px){.crm-lost-bar-track{width:200px}}

/* ═══════════════════════════════════════════════════════════════════════════
   CRM Dasbor — mobile-first (base = 375px; desktop via min-width:768px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grid kiri+kanan dasbor — 1 col di mobile, 2 col di desktop */
.db-cols{display:grid;gap:14px}
@media(min-width:768px){.db-cols{grid-template-columns:1.55fr 1fr;align-items:start}}

/* ─── Funnel per-stage (panel kiri bawah) ──────────────────────────────── */
.db-funnel{display:flex;flex-direction:column;gap:7px;margin:4px 0}
.db-funnel-row{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center}
.db-funnel-label{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--tx)}
.db-stage-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex-shrink:0}
.db-funnel-track{grid-column:1/-1;height:7px;background:var(--bg);border-radius:4px;overflow:hidden;border:1px solid var(--bdr)}
.db-funnel-fill{height:100%;border-radius:4px;transition:width .3s}
.db-funnel-meta{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.db-funnel-cnt{font-size:13px;font-weight:700;color:var(--tx)}
.db-funnel-val{font-size:10.5px;color:var(--tx2)}
.db-funnel-total{font-size:12px;color:var(--tx2);margin-top:10px;padding-top:10px;border-top:1px solid var(--bdr)}
.db-funnel-total b{color:var(--tx)}
/* Desktop: label|track|meta dalam 1 baris */
@media(min-width:640px){
  .db-funnel-row{grid-template-columns:140px 1fr 80px}
  .db-funnel-track{grid-column:auto}
  .db-funnel-meta{flex-direction:row;gap:8px;align-items:center;white-space:nowrap}
}

/* ─── Deal closing soon (panel kanan atas) ─────────────────────────────── */
.db-deal-list{display:flex;flex-direction:column;gap:6px}
.db-deal-item{
  display:flex;justify-content:space-between;gap:10px;
  padding:10px 12px;border:1px solid var(--bdr);border-radius:var(--r-md);
  text-decoration:none;color:inherit;
  transition:background .12s,border-color .12s;
  -webkit-tap-highlight-color:transparent;
}
.db-deal-item:hover{background:var(--bg);border-color:var(--ac-bd)}
.db-deal-main{flex:1;min-width:0}
.db-deal-title{font-size:13px;font-weight:600;color:var(--tx);line-height:1.3;display:flex;align-items:center;gap:5px}
.db-deal-star{color:var(--warn)}
.db-deal-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.db-deal-owner{font-size:11px;color:var(--tx3)}
.db-deal-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.db-deal-val{font-size:12.5px;font-weight:700;color:var(--ac-dk)}

/* ─── Leads terbaru (panel kanan bawah) ────────────────────────────────── */
.db-lead-list{display:flex;flex-direction:column;gap:6px}
.db-lead-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;border:1px solid var(--bdr);border-radius:var(--r-md);
  text-decoration:none;color:inherit;
  transition:background .12s,border-color .12s;
  -webkit-tap-highlight-color:transparent;
}
.db-lead-item:hover{background:var(--bg);border-color:var(--ac-bd)}
.db-lead-temp{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.db-lead-body{flex:1;min-width:0}
.db-lead-name{font-size:13px;font-weight:600;color:var(--tx);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.db-lead-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:3px}
.db-lead-ago{font-size:11px;color:var(--tx3)}

/* ===================================================================== */
/* Langganan & Tagihan (modules/home billing) — MOBILE-FIRST             */
/* base = HP 1 kolom; desktop lewat min-width. Aksen biru = home --ac.   */
/* ===================================================================== */

/* Kartu pilihan modul/paket */
.sub-cards{display:grid;grid-template-columns:1fr;gap:12px;margin-top:6px}
@media(min-width:600px){.sub-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.sub-cards{grid-template-columns:repeat(4,1fr)}}

.sub-card{display:flex;flex-direction:column;gap:8px;border:1px solid var(--bdr);border-radius:var(--r-md);padding:14px 15px;background:#fff}
.sub-card.on{border-color:var(--ac-bd);background:var(--ac-soft)}
.sub-card-bundle{border-style:dashed}
.sub-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sub-card-name{font-size:14px;font-weight:700;color:var(--tx)}
.sub-card-price{font-size:18px;font-weight:800;color:var(--ac-dk)}
.sub-card-price span{font-size:12px;font-weight:600;color:var(--tx3)}
.sub-card-meta{font-size:11.5px;color:var(--tx2);line-height:1.5;flex:1}
.sub-card-act{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.sub-danger{color:var(--bad)}

/* Ringkasan biaya (pakai .kv-table) */
.sub-summary td{padding:7px 0}
.sub-summary td.t-num{font-variant-numeric:tabular-nums}
.sub-strike{color:var(--tx3);text-decoration:line-through;margin-right:6px;font-size:12px}
.sub-disc td{color:var(--ok)}
.sub-total td{border-top:2px solid var(--bdr);padding-top:10px;font-size:15px;font-weight:800;color:var(--tx)}
.sub-invoice-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--bdr)}

/* Detail tagihan: mobile 1 kolom → desktop (rincian | pembayaran) */
.sub-view-grid{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@media(min-width:880px){.sub-view-grid{grid-template-columns:1.6fr 1fr}}
.sub-lines{margin:14px 0}
.sub-totals{margin-top:8px}
.sub-bank td{padding:7px 0}
.sub-bank-todo{color:var(--tx2);font-size:12.5px;font-style:italic}
.sub-pay-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--bdr)}

/* ===================================================================== */
/* Panel Platform Admin (backoffice) — MOBILE-FIRST                      */
/* Reuse penuh komponen tenant (panel/stat/tbl/sub-card). Aksen biru =   */
/* home --ac. base = HP 1 kolom; desktop ikut .sub-view-grid (min-880).  */
/* ===================================================================== */

/* Kolom kanan detail company = tumpukan panel (1 sel grid, isi banyak panel) */
.padmin-side{display:flex;flex-direction:column;gap:14px;min-width:0}

/* Checkbox+label sebaris (modal/plan) */
.padmin-check{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--tx2);cursor:pointer;text-transform:none;letter-spacing:0}
.padmin-check input{cursor:pointer}

/* Form mini di dalam modal kelola pengguna + pemisah antar-form */
.padmin-mform{margin-top:4px}
.padmin-mform .field{margin-bottom:8px}
.padmin-mdiv{height:1px;background:var(--bdr);margin:14px 0}
.padmin-muted-p{font-size:12px;margin-bottom:12px}
.padmin-status-form{margin-top:14px;padding-top:14px;border-top:1px solid var(--bdr)}

/* Pager aktivitas — kiri/tengah/kanan */
.padmin-pager{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid var(--bdr)}
.padmin-pager .coa-muted{font-size:12px}

/* ===================================================================== */
/* Operasi SOP (operasi.php / operasi-run.php) — MOBILE-FIRST            */
/* base = HP 1 kolom; desktop via min-width.                             */
/* ===================================================================== */

/* Panel header SOP (icon + judul + sub + aksi di kanan) */
.ph{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--bdr);font-size:13px;color:var(--tx)}
.ph .icon{color:var(--ac);flex:none}
.ph strong{flex:none}
.ph-sub{font-size:11px;color:var(--tx2);flex:1}
.ph-act{font-size:11px;font-weight:700;color:var(--ac-dk);margin-left:auto;white-space:nowrap}

/* Progress bar mini (dalam tabel run) */
.sop-prog{height:5px;border-radius:3px;background:var(--bdr);overflow:hidden;min-width:60px;margin-bottom:3px}
.sop-bar{height:100%;border-radius:3px;background:var(--ac-g,var(--ac))}
.sop-bar.full{background:var(--ok)}

/* Run header: persen + progress bar besar + tombol selesai */
.sop-run-header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--bdr)}
.sop-run-pct-wrap{display:flex;flex-direction:column;align-items:center;flex:none}
.sop-run-pct{font-size:26px;font-weight:800;color:var(--tx);line-height:1}
.sop-run-pct-sub{font-size:10px;color:var(--tx2);text-align:center}
.sop-run-big-prog{height:8px;border-radius:4px;background:var(--bdr);overflow:hidden;flex:1;min-width:80px}
.sop-run-big-bar{height:100%;border-radius:4px;background:var(--ac-g,var(--ac));transition:width .3s}
.sop-run-big-bar.full{background:var(--ok)}
.sop-run-done-note{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--tx2);margin-bottom:12px}
.sop-run-done-note .icon{color:var(--ok);flex:none;width:15px;height:15px}

/* Checklist langkah */
.sop-checklist{display:flex;flex-direction:column;gap:6px}
.sop-step{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:10px;border:1px solid var(--bdr);background:var(--card);min-height:48px;transition:background .12s,border-color .12s}
.sop-step.is-done{background:var(--ok-bg,#ecfdf5);border-color:#6ee7b7}
.sop-step-body{flex:1;min-width:0}
.sop-step-title{font-size:13px;font-weight:600;line-height:1.4;color:var(--tx)}
.sop-step.is-done .sop-step-title{text-decoration:line-through;color:var(--tx3)}
.sop-step-notes{font-size:11px;color:var(--tx2);font-style:italic;margin-top:2px}
.sop-step-meta{font-size:10.5px;color:var(--tx2);margin-top:3px}

/* Form toggle langkah (display:contents agar tidak merusak flex) */
.sop-chk-form{display:contents}
/* Tombol checkbox visual */
.sop-step-chk{appearance:none;width:22px;height:22px;min-width:22px;border-radius:6px;border:2px solid var(--bdr);cursor:pointer;flex:none;margin-top:1px;display:flex;align-items:center;justify-content:center;background:var(--card);color:transparent;transition:background .12s,border-color .12s,color .12s;padding:0}
.sop-step-chk:hover{border-color:var(--ac-bd)}
.sop-step.is-done .sop-step-chk{background:var(--ok);border-color:var(--ok);color:#fff}
span.sop-step-chk{cursor:default}
span.sop-step-chk.done-icon{background:var(--ok);border-color:var(--ok);color:#fff}
.sop-step-chk .icon{width:13px;height:13px}

/* Form buat template — langkah (step-list) */
.field-group-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.5px;margin:16px 0 8px}
.field-group-head .icon{width:15px;height:15px}
.field-group-head .field-opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--tx3);margin-left:auto}
.sop-step-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.sop-step-num{width:22px;text-align:center;font-size:11px;font-weight:700;color:var(--tx3);flex:none}
.sop-step-fields{display:flex;flex-direction:column;gap:5px;flex:1}
.sop-add-step{margin-top:6px;margin-bottom:16px}

@media(min-width:600px){
  .sop-step-fields{flex-direction:row;align-items:center}
  .sop-step-fields .sop-step-title{flex:1.5}
  .sop-step-fields .sop-step-notes{flex:1}
}
@media(min-width:768px){
  .sop-checklist{gap:8px}
  .sop-step{padding:13px 16px}
}

/* ===================================================================== */
/* Tugas Hari Ini (tugas.php) — MOBILE-FIRST                            */
/* Base = HP 1 kolom; lebih lega via min-width.                         */
/* ===================================================================== */
.tk-list{display:flex;flex-direction:column;gap:10px;padding:14px 18px}

/* Kartu satu run */
.tk-card{display:flex;flex-direction:column;gap:9px;padding:14px 16px;border-radius:10px;border:1px solid var(--bdr);background:var(--card);text-decoration:none;color:var(--tx);transition:border-color .12s,box-shadow .12s}
.tk-card:hover{border-color:var(--ac-bd);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.tk-card.tk-card-done{background:var(--ok-bg,#ecfdf5);border-color:#a7f3d0}

/* Baris atas: nama + badge */
.tk-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tk-card-info{flex:1;min-width:0}
.tk-card-name{font-size:14px;font-weight:700;color:var(--tx);line-height:1.3;margin-bottom:2px}
.tk-card-meta{font-size:11.5px;color:var(--tx2)}
.tk-card-badge{flex:none}

/* Progress bar */
.tk-card-prog{display:flex;align-items:center;gap:8px}
.tk-card-bar-wrap{flex:1;height:6px;border-radius:3px;background:var(--bdr);overflow:hidden}
.tk-card-bar{height:100%;border-radius:3px;background:var(--ac-g,var(--ac));transition:width .3s}
.tk-card-bar.full{background:var(--ok)}
.tk-card-pct{font-size:11px;font-weight:700;color:var(--tx2);white-space:nowrap;min-width:28px;text-align:right}

/* Baris bawah: langkah + panah */
.tk-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tk-card-steps{font-size:11.5px;color:var(--tx2)}
.tk-card-arrow{color:var(--tx3);width:14px;height:14px}

/* Empty state */
.tk-empty-panel{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 20px;gap:10px}
.tk-empty-icon{width:36px;height:36px;color:var(--bdr)}
.tk-empty-title{font-size:15px;font-weight:700;color:var(--tx)}
.tk-empty-sub{font-size:12.5px;color:var(--tx2);margin-bottom:4px}

@media(min-width:640px){
  .tk-list{gap:12px;padding:16px 20px}
  .tk-card{padding:16px 18px}
  .tk-card-name{font-size:15px}
}

/* Panel dengan border kiri warna warn */
.panel-warn-border{border-left:3px solid var(--warn)}

/* == SOP APPROVAL ============================================================ */

/* Status note: pending (kuning) & rejected (merah) */
.sop-run-pending-note,.sop-run-rejected-note{
  display:flex;align-items:flex-start;gap:10px;
  font-size:12.5px;border-radius:10px;padding:12px 16px;margin-bottom:0
}
.sop-run-pending-note{background:#fefce8;border:1px solid #fde047;color:#713f12}
.sop-run-rejected-note{background:#fef2f2;border:1px solid #fca5a5;color:#7f1d1d}
.sop-run-pending-note .icon,.sop-run-rejected-note .icon{flex:none;width:16px;height:16px;margin-top:1px}
.sop-run-pending-note strong,.sop-run-rejected-note strong{font-weight:700}
.sop-run-note-time{color:inherit;opacity:.7;margin-left:4px}
.sop-run-reject-reason{margin-top:5px;font-style:italic;display:flex;align-items:center;gap:5px}
.sop-run-reject-reason .icon{width:13px;height:13px;flex:none}

/* Panel aksi approval (Setujui / Tolak) */
.sop-approval-act{display:flex;gap:8px;flex-wrap:wrap;padding:4px 0 8px}

/* Kartu "pending_approval" di Tugas Hari Ini */
.tk-card.tk-card-rejected{background:#fef2f2;border-color:#fca5a5}

/* Tombol inline kecil: approve (hijau) */
.btn-ok{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-ok:hover{background:#047857;border-color:#047857}

/* Tombol inline kecil: danger (merah) */
.btn-danger-sm{background:#fef2f2;color:var(--bad);border-color:#fca5a5}
.btn-danger-sm:hover{background:#fee2e2;border-color:var(--bad)}

@media(min-width:640px){
  .sop-run-pending-note,.sop-run-rejected-note{font-size:13px;padding:14px 18px}
}

/* ─── PERBAIKAN (Temuan → Tindakan) ──────────────────────────────────────── */

/* Mini progress bar tindakan (di list) */
.prb-prog{height:5px;border-radius:3px;background:var(--bdr);overflow:hidden;min-width:60px;margin-bottom:3px}
.prb-bar{height:100%;border-radius:3px;background:var(--ac-g,var(--ac))}
.prb-bar.full{background:var(--ok)}

/* Kartu ringkasan temuan di view */
.prb-summary-card{padding:16px 20px;display:flex;flex-direction:column;gap:10px}
.prb-sc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.prb-sc-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.prb-sc-act{display:flex;gap:8px}
.prb-sc-run{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--tx2)}
.prb-sc-run .icon{width:14px;height:14px;flex:none;color:var(--ac)}
.prb-sc-desc{font-size:13px;color:var(--tx);line-height:1.6;white-space:pre-wrap;word-break:break-word}

/* Daftar tindakan */
.prb-tdk-list{display:flex;flex-direction:column;gap:0}
.prb-tdk-row{display:flex;align-items:flex-start;gap:11px;padding:12px 18px;border-bottom:1px solid var(--bdr);transition:background .1s}
.prb-tdk-row:last-child{border-bottom:none}
.prb-tdk-row.done{background:var(--ok-bg,#ecfdf5)}
.prb-tdk-row.overdue{background:#fff7ed}
.prb-tdk-body{flex:1;min-width:0}
.prb-tdk-title{font-size:13px;font-weight:600;color:var(--tx);line-height:1.4}
.prb-tdk-row.done .prb-tdk-title{text-decoration:line-through;color:var(--tx3)}
.prb-tdk-meta{font-size:11px;color:var(--tx2);display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:2px}
.prb-tdk-meta .icon{width:12px;height:12px;flex:none}
.prb-tdk-notes{font-size:11.5px;color:var(--tx2);font-style:italic;margin-top:3px}
.prb-tdk-del{color:var(--tx3);border-color:transparent;background:transparent}
.prb-tdk-del:hover{color:var(--bad);border-color:var(--bad);background:#fef2f2}

/* Form tambah tindakan */
.prb-add-tdk{padding:14px 18px;border-top:1px solid var(--bdr)}
.prb-add-tdk-head{font-size:12px;font-weight:700;color:var(--tx2);display:flex;align-items:center;gap:5px;margin-bottom:10px}
.prb-add-tdk-head .icon{width:14px;height:14px;color:var(--ac)}
.prb-add-tdk-fields{display:flex;flex-direction:column;gap:8px}

/* Source note (form) */
.prb-source-note{display:flex;align-items:flex-start;gap:10px;background:#eff5ff;border:1px solid #bfdbfe;border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:12.5px;color:#1e40af}
.prb-source-note .icon{width:16px;height:16px;flex:none;color:#3b82f6;margin-top:1px}

/* Badge b-info (biru) — dipakai severity=info */
.bdg.b-info{background:#eff5ff;color:#1d4ed8}

/* txt helpers */
.txt-bad{color:var(--bad);font-size:inherit}
.txt-ok{color:var(--ok)}
.txt-mut{color:var(--tx3)}

@media(min-width:640px){
  .prb-add-tdk-fields{flex-direction:row;align-items:center}
  .prb-add-tdk-fields .inp:first-child{flex:1.5}
  .prb-tdk-row{padding:13px 20px}
  .prb-summary-card{padding:18px 22px}
}

/* ─── TARGET / KPI (BSC) ─────────────────────────────────────────────────── */
/* Mobile-first: base = HP, desktop via min-width:768px                      */

/* Header perspektif (Keuangan / Pelanggan / dst) */
.kpi-persp-head{
  display:flex;align-items:center;gap:8px;padding:12px 18px;
  border-bottom:1px solid var(--bdr);font-weight:700;color:var(--tx)
}
.kpi-persp-head .icon{color:var(--ac);flex:none}
.kpi-persp-nm{flex:1}
.kpi-persp-cnt{font-size:11px;font-weight:400;color:var(--tx3)}
.kpi-persp-btn-add{margin-left:auto}

/* Empty state per perspektif */
.kpi-empty{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:20px 18px;font-size:13px;color:var(--tx3)
}
.kpi-empty .icon{width:20px;height:20px;flex:none}
.kpi-empty a{color:var(--ac);font-weight:600}

/* Desktop column header — hidden on mobile */
.kpi-list-hdr{display:none}

/* Item row — mobile: flex column (card) */
.kpi-item{
  display:flex;flex-direction:column;gap:8px;
  padding:14px 18px;border-bottom:1px solid var(--bdr)
}
.kpi-item:last-child{border-bottom:none}

/* Nama + satuan */
.kpi-col-name{display:flex;flex-direction:column;gap:2px}
.kpi-nm{font-weight:600;font-size:13.5px;color:var(--tx)}
.kpi-unit{font-size:11px;color:var(--tx3)}

/* Nilai (target/aktual) — mobile: label atas, angka bawah */
.kpi-col-val{display:flex;align-items:baseline;gap:6px}
.kpi-mob-lbl{font-size:11px;color:var(--tx3);min-width:44px}
.kpi-num{font-weight:600;font-size:13px;color:var(--tx);font-variant-numeric:tabular-nums}

/* Capaian: progress bar + persen */
.kpi-col-score{display:flex;align-items:center;gap:8px}
.kpi-prog{height:8px;border-radius:4px;background:var(--bdr);flex:1;max-width:200px;overflow:hidden}
.kpi-bar{height:100%;border-radius:4px;background:var(--ac-g,var(--ac));transition:width .3s ease}
.kpi-bar.ok{background:var(--ok)}
.kpi-bar.warn{background:var(--warn)}
.kpi-bar.bad{background:var(--bad)}
.kpi-score{font-size:12px;font-weight:700;white-space:nowrap}
.kpi-score.ok{color:var(--ok)}
.kpi-score.warn{color:var(--warn)}
.kpi-score.bad{color:var(--bad)}
.kpi-score.nt{color:var(--tx3);font-weight:400}

/* Aksi */
.kpi-col-act{display:flex;gap:6px;flex-wrap:wrap}

/* Desktop: grid layout (1.6fr 130px 130px 180px 120px) */
@media(min-width:768px){
  .kpi-list-hdr{
    display:grid;
    grid-template-columns:1.6fr 130px 130px 200px 130px;
    gap:12px;padding:9px 18px;
    background:#fafafa;border-bottom:1px solid var(--bdr);
    font-size:10.5px;font-weight:700;color:var(--tx3);
    text-transform:uppercase;letter-spacing:.5px
  }
  .kpi-item{
    flex-direction:row;align-items:center;
    display:grid;grid-template-columns:1.6fr 130px 130px 200px 130px;
    gap:12px;padding:12px 18px
  }
  .kpi-col-val{flex-direction:column;gap:0}
  .kpi-mob-lbl{display:none}
  .kpi-col-score{gap:10px}
  .kpi-prog{max-width:120px}
  .kpi-col-act{flex-wrap:nowrap}
}

/* ── Doc layout: main + side (PR/PO/doc view, dipakai juga HR disciplinary) ── */
.doc-layout{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.doc-main{min-width:0}
.doc-side{}
.doc-actions{display:flex;flex-direction:column;gap:8px}
@media(min-width:900px){.doc-layout{grid-template-columns:1fr 300px}}

/* ── jfoot total area ── */
.jfoot-total{display:flex;align-items:center;gap:16px;margin-left:auto}
.jfoot-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--tx2)}
.jfoot-val{font-size:15px;font-weight:800;color:var(--ac-dk);font-variant-numeric:tabular-nums}

/* ── notice-info: banner info ringan (di atas doc-layout) ── */
.notice-info{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--ac-soft);border:1px solid var(--ac-bd);border-radius:var(--r-md);font-size:13px;margin-bottom:12px;color:var(--tx)}

/* ── form-actions: baris tombol submit di bawah form ── */
.form-actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center;justify-content:flex-end;margin-top:10px}

/* ── Utilities ── */
.w-full{width:100%}

/* ── PR item table: drag|produk|deskripsi|qty|satuan|harga|subtotal|del ── */
/* Mobile-first: 2-col stacked cards, header hidden */
.irow-prod{position:relative;min-width:0}
.itbl.pr-itbl .itbl-head{display:none}
.itbl.pr-itbl .irow{grid-template-columns:1fr 1fr;gap:6px}
.itbl.pr-itbl .irow .drag-handle{display:none}
.itbl.pr-itbl .irow .irow-prod,
.itbl.pr-itbl .irow>span:nth-child(3){grid-column:1/-1}
/* Desktop: full 8-column grid (≥768px) */
@media(min-width:768px){
  .itbl.pr-itbl .itbl-head{display:grid;grid-template-columns:26px 90px minmax(120px,2fr) 60px 52px 110px 100px 36px}
  .itbl.pr-itbl .irow{grid-template-columns:26px 90px minmax(120px,2fr) 60px 52px 110px 100px 36px}
  .itbl.pr-itbl .irow .drag-handle{display:flex;justify-content:center;color:var(--tx3)}
  .itbl.pr-itbl .irow .irow-prod,
  .itbl.pr-itbl .irow>span:nth-child(3){grid-column:unset}
}

/* ── Form Terima Barang (GR) — mobile-first (kartu di HP, grid di desktop) ── */
.itbl.gr-itbl .itbl-head{display:none}
.itbl.gr-itbl .irow{grid-template-columns:1fr 1fr;gap:6px 10px;padding:10px;border:1px solid var(--bdr);border-radius:var(--r-md);margin-bottom:8px}
.itbl.gr-itbl .irow .gr-prod{grid-column:1/-1}
.itbl.gr-itbl .irow .gr-sub{grid-column:1/-1;text-align:right}
.gr-cell-lbl{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--tx2);font-weight:700;margin-bottom:3px}
.gr-prod-name{font-weight:600}
@media(min-width:768px){
  .itbl.gr-itbl .itbl-head{display:grid;grid-template-columns:minmax(140px,2fr) 84px 92px 64px 120px 112px}
  .itbl.gr-itbl .irow{grid-template-columns:minmax(140px,2fr) 84px 92px 64px 120px 112px;border:0;padding:6px 10px;margin-bottom:0;border-radius:0;align-items:center}
  .itbl.gr-itbl .irow .gr-prod,.itbl.gr-itbl .irow .gr-sub{grid-column:unset}
  .itbl.gr-itbl .irow .gr-sub{text-align:right}
  .gr-cell-lbl{display:none}
}

/* ═══ PRODUKSIKU — Pesanan Kerja, papan status, stepper (mobile-first) ═══════ */
/* Jangkar daftar: judul + meta di bawah nomor */
.prd-anchor-title{font-weight:600;color:var(--navy);margin-top:2px}
.prd-anchor-meta{font-size:11.5px;color:var(--tx3);margin-top:1px}

/* Status pill (dot + label) */
.prd-status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--tx)}
.prd-dot{width:9px;height:9px;border-radius:50%;background:var(--tx3);flex:none}
.prd-ovd{color:var(--bad);font-weight:700}

/* Progress mini */
.prd-prog{display:flex;align-items:center;gap:8px;min-width:96px}
.prd-prog-bar{flex:1;height:6px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-pill);overflow:hidden}
.prd-prog-bar>i{display:block;height:100%;background:var(--ac)}
.prd-prog-txt{font-size:11px;color:var(--tx2);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Stepper status workflow — mobile: scroll-x; desktop: penuh */
.prd-steps{display:flex;gap:6px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch}
.prd-step{display:flex;align-items:center;gap:6px;padding:5px 10px;border:1px solid var(--bdr);border-radius:var(--r-pill);background:var(--bg);white-space:nowrap;flex:none;font-size:12px;color:var(--tx2)}
.prd-step-dot{width:8px;height:8px;border-radius:50%;border:2px solid var(--tx3);background:#fff;flex:none}
.prd-step.past{opacity:.7}
.prd-step.past .prd-step-dot{background:var(--ac);border-color:var(--ac)}
.prd-step.cur{background:var(--ac-soft);border-color:var(--ac-bd);color:var(--navy);font-weight:700}
.prd-status-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;align-items:center}
.prd-status-form .inp{flex:1;min-width:140px}

/* Form pakai bahan */
.prd-mat-form{margin-top:12px;border-top:1px solid var(--bdr);padding-top:12px}
.prd-qty-field{max-width:120px}
.prd-worker-filter{height:32px;font-size:12px;width:180px}

/* Grid 2 kolom — mobile 1 kolom */
.prd-grid2{display:grid;grid-template-columns:1fr;gap:16px}

/* Key-value rincian */
.prd-kv{display:grid;grid-template-columns:1fr;gap:8px}
.prd-kv>div{display:flex;justify-content:space-between;gap:12px;font-size:13px;padding:5px 0;border-bottom:1px dashed var(--bdr)}
.prd-kv>div:last-child{border-bottom:0}
.prd-kv span{color:var(--tx2)}
.prd-kv b{color:var(--navy);text-align:right}
.prd-note{margin-top:12px;background:var(--warn-bg);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:9px 11px;font-size:12.5px;color:var(--tx)}
.prd-wip{display:flex;justify-content:space-between;align-items:center;background:var(--ac-soft);border:1px solid var(--ac-bd);border-radius:var(--r-sm);padding:10px 12px;margin-bottom:12px;font-size:13px}
.prd-wip b{color:var(--navy);font-size:15px}
.prd-rev{opacity:.55}
.prd-rev td{text-decoration:line-through}
.prd-hint{font-size:11.5px;margin-top:8px}

/* Status & worker per-item (R2) */
.prd-item-status{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--tx2)}
.prd-item-status .prd-dot{width:8px;height:8px}
.prd-item-workers{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.prd-worker-chip{display:inline-flex;align-items:center;gap:4px;font-size:11px;background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-pill);padding:1px 8px;color:var(--tx2)}
.prd-worker-rows{display:flex;flex-direction:column;gap:6px}
.prd-worker-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.prd-worker-row .inp{min-width:120px}
/* Jam kerja (T47): kotak angka sempit — jam & menit terpisah, disimpan sbg menit */
.prd-worker-row .w-time{min-width:0;width:78px;flex:0 0 78px}

/* Catat hasil produksi (T43) — satu baris per item, Jadi · Rusak */
.prd-progress-rows{display:flex;flex-direction:column;gap:10px}
.prd-progress-row{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;padding-bottom:10px;border-bottom:1px dashed var(--bdr)}
.prd-progress-row:last-child{border-bottom:none;padding-bottom:0}
.prd-progress-name{flex:1 1 160px;font-size:12.5px}

/* Timeline riwayat */
.prd-timeline{list-style:none;margin:0;padding:0}
.prd-timeline li{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed var(--bdr);font-size:12.5px}
.prd-timeline li:last-child{border-bottom:0}
.prd-tl-dot{width:8px;height:8px;border-radius:50%;background:var(--ac);margin-top:5px;flex:none}
.prd-tl-main{color:var(--tx)}
.prd-tl-meta{font-size:11px;color:var(--tx3);margin-top:1px}

/* Daftar ringkas (dasbor) */
.prd-attn{list-style:none;margin:0;padding:0}
.prd-attn li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--bdr)}
.prd-attn li:last-child{border-bottom:0}
.prd-attn li a{display:flex;flex-direction:column;min-width:0;text-decoration:none}
.prd-attn-no{font-size:11px;font-weight:700;color:var(--ac)}
.prd-attn-title{font-size:13px;color:var(--navy);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prd-attn-dl{font-size:11.5px;color:var(--tx2);white-space:nowrap;display:inline-flex;align-items:center;gap:4px}

/* Papan status (kanban) — MOBILE: seksi tumpuk vertikal */
.prd-board{display:flex;flex-direction:column;gap:14px}
.prd-col{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-md);overflow:hidden}
.prd-col-head{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--bdr);background:var(--card);font-weight:700;color:var(--navy);font-size:13px}
.prd-col-title{flex:1}
.prd-col-count{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-pill);padding:1px 9px;font-size:11px;color:var(--tx2)}
.prd-col-body{display:flex;flex-direction:column;gap:8px;padding:10px;min-height:60px;transition:background .15s,border .15s}
.prd-card{display:block;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:10px 11px;text-decoration:none;box-shadow:var(--sh-card);cursor:grab;user-select:none}
/* SortableJS DnD states */
.prd-card.sortable-ghost{opacity:.35;border:2px dashed var(--ac);background:var(--bg);box-shadow:none}
.prd-card.sortable-chosen{box-shadow:0 8px 24px rgba(0,0,0,.15);transform:rotate(1deg);cursor:grabbing}
.prd-card.sortable-drag{opacity:0}
.prd-col-body.sortable-over{background:color-mix(in srgb,var(--ac) 8%,transparent);outline:2px dashed var(--ac);outline-offset:-2px;border-radius:var(--r-sm)}
.prd-card-done{cursor:default;opacity:.75}
.prd-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.prd-card-no{font-size:11px;font-weight:700;color:var(--ac)}
.prd-card-title{font-size:13px;font-weight:600;color:var(--navy);margin-top:3px;line-height:1.3}
.prd-card-sub{font-size:11.5px;color:var(--tx3);margin-top:2px}
.prd-card-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:11px}
.prd-card-pct{font-weight:700;color:var(--tx2);font-variant-numeric:tabular-nums}

/* Pengaturan alur status */
.prd-wf-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.prd-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.prd-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bdr);border-left-width:3px;border-radius:var(--r-sm);padding:5px 10px;font-size:12px;font-weight:600;color:var(--navy);background:var(--card)}
.prd-chip-cat{font-size:10px;font-weight:600;color:var(--tx3);text-transform:uppercase;letter-spacing:.3px}

@media(min-width:768px){
  .prd-board{flex-direction:row;align-items:flex-start;gap:12px;overflow-x:auto;padding-bottom:10px;-webkit-overflow-scrolling:touch}
  .prd-col{flex:0 0 280px;max-width:280px}
  .prd-col-body{max-height:calc(100vh - 230px);overflow-y:auto}
}
@media(min-width:900px){
  .prd-grid2{grid-template-columns:1fr 1fr}
  .prd-kv{grid-template-columns:1fr 1fr;gap:8px 18px}
}

/* ── Kalender Produksi — mobile-first ───────────────────────────────────────── */
/* Baris filter atas kalender */
.prd-cal-filters{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.prd-cal-month{font-size:14px;font-weight:700;min-width:150px;text-align:center;color:var(--navy)}
/* Toggle show/hide event */
.prd-cal-toggle{display:inline-flex;align-items:center;gap:5px;padding:0 10px;height:32px;border:1.5px solid var(--bdr);border-radius:6px;cursor:pointer;font-size:11.5px;background:var(--card);color:var(--tx3);user-select:none}
.prd-cal-toggle input{display:none}
.prd-cal-toggle-on{background:var(--ac-soft);border-color:var(--ac-bd);color:var(--ac)}
.prd-cal-toggle-ok{background:#ecfdf5;border-color:#a7f3d0;color:#059669}
/* Toggle "Hari Libur" — amber, sengaja BUKAN merah (lihat blok libur di bawah) */
.prd-cal-toggle-hol{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 38%,var(--card));color:var(--warn)}
/* Select filter assignee di toolbar */
.prd-cal-filters select.inp{height:32px;font-size:12px;width:160px}

/* Chip warna event (shared — mobile list + grid desktop) */
.prd-cal-chip-dl{color:var(--ac-dk);background:var(--ac-soft)}
.prd-cal-chip-dv{color:var(--ok);background:var(--ok-bg)}
.prd-cal-chip-ovd{color:#fff;background:var(--bad)}

/* ── Mobile (default): list per tanggal ─────────────────────────────────────── */
.prd-cal-list{display:flex;flex-direction:column;gap:6px}
.prd-cal-day{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-sm);overflow:hidden}
.prd-cal-day-head{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--bdr);font-size:12px;font-weight:700;color:var(--navy)}
.prd-cal-day-today>.prd-cal-day-head{background:var(--ac-soft);border-color:var(--ac-bd);color:var(--ac)}
.prd-cal-day-body{display:flex;flex-direction:column;gap:4px;padding:8px 10px}
.prd-cal-chip{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--bdr);border-left:3px solid;background:var(--card);text-decoration:none;font-size:12px;color:var(--tx)}
.prd-cal-chip.prd-cal-chip-dl{border-color:var(--ac-bd);border-left-color:var(--ac)}
.prd-cal-chip.prd-cal-chip-dv{border-color:var(--ok);border-left-color:var(--ok)}
.prd-cal-chip.prd-cal-chip-ovd{border-color:var(--bad);border-left-color:var(--bad)}
.prd-cal-chip:hover{background:var(--bg)}
/* Hari libur di list mobile — kepala hari amber + nama libur terbaca */
.prd-cal-day-hol>.prd-cal-day-head{background:var(--warn-bg);border-bottom-color:color-mix(in srgb,var(--warn) 30%,var(--card));color:var(--warn)}
.prd-cal-hol-tag{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:11px;font-weight:600;color:var(--warn);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.prd-cal-hol-only{font-size:11.5px;color:var(--tx2);padding:2px 2px 4px}
.prd-cal-chip-no{font-size:10.5px;font-weight:700;color:inherit;white-space:nowrap;flex:none;opacity:.85}
.prd-cal-chip-title{flex:1;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;font-weight:600}
.prd-cal-chip-tag{font-size:10px;padding:1px 7px;border-radius:var(--r-pill);font-weight:600;white-space:nowrap;flex:none;border:1px solid currentColor;opacity:.8}
/* Empty state di mobile list */
.prd-cal-empty{padding:16px;text-align:center;color:var(--tx2)}

/* ── Desktop: grid 7 kolom — TERSEMBUNYI di mobile ──────────────────────────── */
.prd-cal-grid{display:none}

@media(min-width:768px){
  .prd-cal-list{display:none}
  .prd-cal-grid{display:block;--cal-recede:color-mix(in srgb,var(--bdr) 42%,var(--card))}
  .prd-cal-grid>.card{background:var(--card);border:1px solid var(--bdr);box-shadow:var(--sh-card);overflow:hidden}
  /* Header nama hari */
  .prd-cal-grid-head{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:2px solid var(--bdr);background:var(--cal-recede)}
  .prd-cal-grid-head>div{padding:10px 8px;text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--tx2)}
  .prd-cal-grid-head>div:first-child,.prd-cal-grid-head>div:last-child{color:var(--tx3)}
  /* Grid sel */
  .prd-cal-grid-body{display:grid;grid-template-columns:repeat(7,1fr)}
  .prd-cal-cell{min-height:128px;min-width:0;overflow:hidden;border-right:1px solid var(--bdr);border-bottom:1px solid var(--bdr);padding:8px 7px;position:relative;transition:background .12s}
  /* Nomor tanggal */
  .prd-cal-cell-num{font-size:12px;font-weight:700;color:var(--tx2);margin-bottom:6px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;line-height:1}
  /* Hari ini */
  .prd-cal-cell-today{background:#f0f6ff;border-top:2px solid var(--ac)}
  .prd-cal-cell-today .prd-cal-cell-num{background:var(--ac);color:#fff;font-weight:800}
  /* Weekend */
  .prd-cal-cell-wknd{background:color-mix(in srgb,var(--bdr) 18%,var(--card))}
  .prd-cal-cell-wknd .prd-cal-cell-num{color:var(--tx3)}
  /* Hari libur — AMBER, sengaja BUKAN merah. T36 membersihkan merah dekoratif
     dari kalender ini supaya merah = sinyal "Terlambat" saja (.prd-cal-chip-ovd
     / var(--bad)); kalau libur ikut merah, sinyal keterlambatan tenggelam.
     Kelas TAMBAHAN: dipasang bersama -today/-wknd, ditaruh SESUDAHNYA agar
     latarnya menang, tapi angka tanggal hari-ini tetap lingkaran biru. */
  .prd-cal-cell-hol{background:var(--warn-bg)}
  .prd-cal-cell-hol:not(.prd-cal-cell-today) .prd-cal-cell-num{color:var(--warn)}
  /* Nama libur di dalam sel — nama itu inti nilainya, penanda warna saja tak cukup */
  .prd-cal-hol{display:flex;align-items:center;gap:4px;margin:-2px 0 6px;font-size:10.5px;font-weight:700;line-height:1.25;color:var(--warn);min-width:0}
  .prd-cal-hol .icon{flex:none}
  .prd-cal-hol>span{overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  /* Sel kosong (before/after bulan) */
  .prd-cal-cell-other{background:var(--cal-recede);min-height:128px;border-right:1px solid var(--bdr);border-bottom:1px solid var(--bdr);opacity:.5}
  /* Drop target highlight */
  .prd-cal-cell-drop{background:var(--ac-soft)!important;outline:2px dashed var(--ac-bd);outline-offset:-3px}
  /* Chip event di dalam sel */
  .prd-cal-chip-grid{display:block;margin-bottom:4px;padding:4px 7px;border-radius:4px;
    font-size:11px;cursor:pointer;text-decoration:none;
    border:none;border-left:3px solid transparent;
    line-height:1.3}
  .prd-cal-chip-grid .cal-ev-num{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px;opacity:.8}
  .prd-cal-chip-grid .cal-ev-title{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .prd-cal-chip-grid.prd-cal-chip-dl{color:var(--ac-dk);background:var(--ac-soft);border-left-color:var(--ac)}
  .prd-cal-chip-grid.prd-cal-chip-dv{color:var(--ok);background:var(--ok-bg);border-left-color:var(--ok)}
  .prd-cal-chip-grid.prd-cal-chip-ovd{color:#fff;background:var(--bad);border-left-color:color-mix(in srgb,var(--bad) 72%,#000)}
  .prd-cal-chip-grid:hover{filter:brightness(.93)}
  .prd-cal-chip-grid.draggable{cursor:grab}
  .prd-cal-chip-grid.draggable:active{cursor:grabbing}
  .prd-cal-chip-grid.drag-src{opacity:.35;pointer-events:none}
  .prd-cal-chip-grid.prd-done{opacity:.55}
  .prd-cal-chip-grid.prd-done .cal-ev-title{text-decoration:line-through}
}

/* Legenda bawah kalender grid */
.prd-cal-legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--tx2);align-items:center}
.prd-cal-legend span{display:inline-flex;align-items:center;gap:5px}
.prd-cal-legend i{width:12px;height:4px;border-radius:2px;display:inline-block;flex:none}
.prd-cal-legend i.prd-cal-chip-dl{background:var(--ac)}
.prd-cal-legend i.prd-cal-chip-dv{background:var(--ok)}
.prd-cal-legend i.prd-cal-chip-ovd{background:var(--bad)}
.prd-cal-legend i.prd-cal-hol-key{background:var(--warn)}
.prd-cal-legend-drag{opacity:.6;font-style:italic;margin-left:auto}

/* Assignee field — tampil/sembunyi kondisional */
.prd-assignee-row{display:none}
.prd-assignee-row.active{display:grid}

/* Tombol aksi Surat Jalan di work-order-view */
.prd-sj-act{margin-top:8px}

/* ── Editor Alur Status (produksi/workflows.php) ────────────────────────────── */
/* Baris aksi di header workflow (Jadikan Default / Kelola / Hapus) */
.prd-wf-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* Container editor */
.prd-st-ed{margin-top:14px;border-top:1px solid var(--bdr);padding-top:14px}
.prd-st-ed-hd{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--tx3);margin-bottom:10px;display:flex;align-items:center;gap:5px}
/* Daftar status dalam editor */
.prd-st-list{display:flex;flex-direction:column;gap:6px}
.prd-st-item{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:9px 11px}
/* Baris 1 di item: label + warna (mobile: 2-kolom) */
.prd-st-r1{display:grid;grid-template-columns:1fr 52px;gap:8px;align-items:end}
.prd-st-r1>.field{margin:0}
/* Baris 2: kategori + urut + is_initial */
.prd-st-r2{display:flex;gap:8px;align-items:end;margin-top:6px;flex-wrap:wrap}
.prd-st-r2>.field{flex:1;min-width:110px;margin:0}
.prd-f-ord{flex:none !important;width:68px}
.prd-f-init,.prd-f-submit{flex:none !important}
/* Color input */
.prd-inp-color{width:52px;height:36px;padding:2px 4px;border:1px solid var(--bdr);border-radius:var(--r-sm);cursor:pointer;display:block;background:var(--card)}
/* Checkbox "Status awal" */
.prd-init-label{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--tx2);cursor:pointer;white-space:nowrap;padding-bottom:6px}
/* Baris aksi: Simpan + Hapus */
.prd-st-acts{display:flex;gap:6px;margin-top:8px}
/* Panel "Tambah Status" */
.prd-st-add{border:2px dashed var(--bdr);border-radius:var(--r-sm);padding:10px 12px;margin-top:10px}
.prd-st-add-hd{font-size:11.5px;font-weight:600;color:var(--tx2);margin-bottom:8px;display:flex;align-items:center;gap:5px}
/* Chip "Awal" dalam tampilan read-only */
.prd-chip-init{display:inline-flex;align-items:center;color:var(--ac);margin-left:1px}

/* ── Settings Layout (Pengaturan Perusahaan) ─────────────────────────────── */
.settings-layout{display:flex;align-items:stretch;gap:0;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);overflow:hidden}
.settings-nav{width:232px;flex-shrink:0;border-right:1px solid var(--bdr);background:var(--bg);padding:var(--sp-2) 0}
.settings-nav-group{font-size:var(--fs-xs);font-weight:700;color:var(--tx3);text-transform:uppercase;letter-spacing:.5px;padding:var(--sp-3) var(--sp-4) var(--sp-1)}
.settings-nav-group:first-child{padding-top:var(--sp-1)}
.settings-nav-item{display:flex;align-items:center;gap:var(--sp-2);padding:10px var(--sp-4);color:var(--tx2);font-size:var(--fs-md);text-decoration:none;border-left:3px solid transparent;transition:background .12s,color .12s;white-space:nowrap}
.settings-nav-item:hover{background:var(--canvas);color:var(--tx)}
.settings-nav-item.sn-active{background:var(--card);color:var(--ac);border-left-color:var(--ac);font-weight:600}
.settings-nav-item .icon{color:inherit;flex:none}
.settings-content{flex:1;min-width:0;padding:var(--sp-4) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4)}
@media(max-width:767px){
  .settings-layout{flex-direction:column;border-radius:var(--r-sm)}
  .settings-nav{width:100%;padding:0;border-right:none;border-bottom:1px solid var(--bdr);display:flex;flex-wrap:nowrap;overflow-x:auto}
  .settings-nav-group{display:none}
  .settings-nav-item{border-left:none;border-bottom:3px solid transparent;border-right:1px solid var(--bdr);padding:10px var(--sp-3);font-size:var(--fs-sm);flex-shrink:0}
  .settings-nav-item:last-child{border-right:none}
  .settings-nav-item.sn-active{border-bottom-color:var(--ac);border-left-color:transparent;background:var(--card)}
  .settings-content{padding:var(--sp-3)}
}
/* Label Menu editor (ml-*) */
.ml-section{border:1px solid var(--bdr);border-radius:var(--r-sm);margin-bottom:var(--sp-3);overflow:hidden}
.ml-section-head{padding:var(--sp-2) var(--sp-3);background:var(--bg-alt)}
.ml-tabs{padding:var(--sp-2) var(--sp-3) var(--sp-3);display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-2)}
.ml-singles{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--sp-2);margin-bottom:var(--sp-3)}
.ml-field{display:flex;flex-direction:column;gap:var(--sp-1)}
.ml-field-grp{max-width:340px}
.ml-lbl{display:flex;flex-direction:column;gap:2px}
.ml-type{font-size:var(--fs-xs);color:var(--tx2);text-transform:uppercase;letter-spacing:.04em}
.ml-canon{font-size:var(--fs-sm);font-weight:600;color:var(--tx)}
.ml-overridden{border-color:var(--ac) !important;background:color-mix(in srgb,var(--ac) 6%,var(--bg))}
.ml-hide{display:flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--tx2);cursor:pointer;user-select:none}
.ml-hide input{margin:0}
.prd-chip-init .icon{width:10px;height:10px}

/* ── Produksi: komentar (R5) ─────────────────────────────────────────── */
.prd-comments{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:10px}
.prd-comment{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:10px 12px}
.prd-comment-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px;flex-wrap:wrap}
.prd-comment-meta b{font-size:13px}
.prd-comment-meta .coa-muted{font-size:11.5px}
.prd-comment-body{font-size:13px;line-height:1.55;color:var(--tx)}
.prd-comment-form textarea{resize:vertical;min-height:56px}
.prd-cmt-del{padding:2px 5px;color:var(--tx3)}
.btn-xs{font-size:11px;padding:2px 7px;border-radius:4px}

/* ── Produksi: rating (R6) ──────────────────────────────────────────── */
.prd-rating-row{display:flex;align-items:center;gap:10px;margin:4px 0 8px}
.prd-stars{display:flex;gap:2px}
.prd-star{font-size:22px;color:var(--bdr)}
.prd-star.on{color:#F59E0B}
.prd-rating-val{font-size:15px;font-weight:700;color:var(--tx)}

/* ── Produksi pack: label barcode (R4) ─────────────────────────────── */
.lbl-info-bar{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:8px 12px;font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--tx2);min-height:20px}
.lbl-preview{background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-sm);padding:10px 12px;margin-top:10px}
.lbl-preview-title{font-size:11px;font-weight:700;color:var(--tx2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.lbl-prev-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:2px 0}
.lbl-prev-sisa{background:color-mix(in srgb,var(--danger,#dc2626) 6%,transparent);border-radius:4px;padding:3px 6px;margin-top:3px}
.lbl-preview-total{margin-top:8px;padding-top:8px;border-top:1px solid var(--bdr);font-size:12px;font-weight:700}

/* Label TSC TTP-244 — 100×75mm — visible HANYA saat @media print */
#lblSheet { display: none; }

@page { size: 100mm 75mm; margin: 0; }

@media print {
  body * { visibility: hidden !important; }
  #lblSheet, #lblSheet * { visibility: visible !important; }
  #lblSheet { display: block !important; position: absolute !important; left: 0; top: 0; width: 100mm; background: #fff; }
  body.printing-label { margin: 0 !important; padding: 0 !important; }
}

.lbl-page { width:100mm; height:75mm; box-sizing:border-box; padding:1mm; font-family:Arial,sans-serif; font-size:8pt; color:#000; background:#fff; page-break-after:always; break-after:page; overflow:hidden; }
.lbl-page:last-child { page-break-after:auto; break-after:auto; }
.lbl-tbl { width:100%; height:100%; border-collapse:collapse; border:1.5px solid #000; table-layout:fixed; }
.lbl-tbl td { border:1px solid #000; padding:2px 5px; vertical-align:top; }
.lbl-tbl tr:nth-child(1) { height:8mm; }
.lbl-tbl tr:nth-child(2) { height:9mm; }
.lbl-tbl tr:nth-child(3) { height:20mm; }
.lbl-tbl tr:nth-child(4) { height:14mm; }
.lbl-tbl tr:nth-child(5) { height:9mm; }
.lbl-tbl tr:nth-child(6) { height:8mm; }
.lbl-tbl tr:nth-child(7) { height:auto; }
.lbl-brand { font-size:13pt; font-weight:bold; text-align:center; letter-spacing:2px; vertical-align:middle !important; padding:2px 0 !important; }
.lbl-qr-cell { text-align:center; vertical-align:middle !important; padding:1px !important; }
.lbl-qr { width:108px; height:108px; margin:0 auto; }
.lbl-qr svg { width:100%; height:100%; display:block; }
.lbl-cell { vertical-align:top !important; padding:2px 8px !important; }
.lbl-product-content { text-align:center; margin-top:1px; }
.lbl-prodcode { font-size:7pt; font-family:monospace; color:#444; font-weight:bold; letter-spacing:.5px; }
.lbl-prodname { font-size:11pt; font-weight:bold; line-height:1.15; margin:2px 0 1px; }
.lbl-proddesc { font-size:7.5pt; color:#333; line-height:1.15; }
.lbl-pack-cell { vertical-align:top !important; text-align:center; padding:1px 4px !important; border:1.5px solid #000 !important; }
.lbl-pack-main { font-size:18pt; font-weight:bold; line-height:1; margin-top:1px; }
.lbl-pack-sub { font-size:6.5pt; color:#333; margin-top:1px; }
.lbl-qty-main { font-size:15pt; font-weight:bold; line-height:1; margin-top:1px; }
.lbl-qty-sub { font-size:6.5pt; color:#333; margin-top:1px; }
.lbl-ttl { font-size:6pt; font-weight:bold; color:#333; text-transform:uppercase; letter-spacing:.3px; line-height:1.2; display:block; }
.lbl-sm { font-size:9pt; font-weight:bold; }
.lbl-mono { font-size:8.5pt; font-weight:bold; font-family:monospace; }
.lbl-md { font-size:10.5pt; font-weight:bold; }
.lbl-center { text-align:center; }
.lbl-ket { font-size:8pt; font-style:italic; line-height:1.2; }
.lbl-qc-cell { vertical-align:top !important; padding:3px 5px !important; }
.lbl-qc-sign { display:flex; align-items:center; justify-content:center; min-height:70px; font-size:8pt; letter-spacing:1px; }

/* == UTILITAS KECIL (T04) ============================================== */
/* Pengganti inline style yang dilarang CLAUDE.md. Sengaja sedikit —
   kalau butuh lebih dari jarak/visibilitas, bikin kelas komponen. */
.panel-gap{margin-top:12px}
.panel-gap-sm{margin-top:10px}
.is-hidden{display:none !important}

/* == Paket Khusus percetakan — hub + kalkulator (T24) =================== */
/* Hub: grid kartu berkategori (gaya akunku crm/tools, struktur ditiru saja). */
.pcetak-cat{margin-bottom:22px}
.pcetak-cat:last-child{margin-bottom:0}
.pcetak-cat-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--tx2)}
.pcetak-cat-head .n{margin-left:auto;font-weight:500;text-transform:none;letter-spacing:0;color:var(--tx3)}
.pcetak-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.pcetak-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);text-decoration:none;color:var(--tx);transition:border-color .12s,box-shadow .12s}
.pcetak-card:hover{border-color:var(--ac);box-shadow:0 3px 10px rgba(0,0,0,.06)}
.pcetak-card .icon{width:22px;height:22px;color:var(--ac-dk)}
.pcetak-card .t{font-size:13px;font-weight:700}
.pcetak-card .d{font-size:11.5px;color:var(--tx2)}
.pcetak-card.soon{opacity:.6;cursor:not-allowed}
.pcetak-card.soon:hover{border-color:var(--bdr);box-shadow:none}
.pcetak-card.soon .bdg{position:absolute;top:10px;right:10px}

/* == Hub "Tambahan" (T25) — grid kartu terkelompok per kategori ========== */
/* Struktur identik pcetak-* di atas tapi generik (rumah SEMUA add-on, bukan
   1 Paket Khusus) — dipakai modules/home/tambahan-hub.php. */
.addon-hub-cat{margin-bottom:22px}
.addon-hub-cat:last-child{margin-bottom:0}
.addon-hub-cat-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--tx2)}
.addon-hub-cat-head .n{margin-left:auto;font-weight:500;text-transform:none;letter-spacing:0;color:var(--tx3)}
.addon-hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px}
.addon-hub-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--card);border:1px solid var(--bdr);border-radius:var(--r-md);text-decoration:none;color:var(--tx);transition:border-color .12s,box-shadow .12s}
.addon-hub-card:hover{border-color:var(--ac);box-shadow:0 3px 10px rgba(0,0,0,.06)}
.addon-hub-card .icon{width:22px;height:22px;color:var(--ac-dk)}
.addon-hub-card .t{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700}
.addon-hub-card .d{font-size:11.5px;color:var(--tx2)}
.addon-hub-ext{width:13px;height:13px;color:var(--tx3)}
/* Kartu terkunci (T48) — modul belum berlangganan; menaut ke Langganan. */
.hub-card-locked{background:var(--canvas);border-style:dashed;color:var(--tx2)}
.hub-card-locked .icon{color:var(--tx3)}
.hub-card-locked:hover{border-color:var(--bdr)}

/* Kalkulator: mode switch (.seg dipakai apa adanya), field grid, hasil & bar. */
.pcetak-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px 16px}
.pcetak-results{margin-top:18px}
.pcetak-bars{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.pcetak-bar-row .h{display:flex;justify-content:space-between;font-size:11.5px;font-weight:600;color:var(--tx2);margin-bottom:4px}
.pcetak-bar-track{height:8px;border-radius:6px;background:var(--bg);overflow:hidden}
.pcetak-bar-fill{height:100%;border-radius:6px;background:var(--ac)}
.pcetak-bar-fill.tone-ok{background:var(--ok)}
.pcetak-bar-fill.tone-warn{background:var(--warn)}
.pcetak-bar-fill.tone-bad{background:var(--bad)}
.pcetak-bar-fill.tone-mut{background:var(--tx3)}
.pcetak-alert{display:flex;align-items:flex-start;gap:8px;padding:11px 14px;border-radius:var(--r-md);font-size:12.5px;margin-top:14px;border:1px solid transparent}
.pcetak-alert .icon{flex:none;width:16px;height:16px;margin-top:1px}
.pcetak-alert.bad{background:var(--bad-bg);color:var(--bad);border-color:#fca5a5}
.pcetak-alert.warn{background:var(--warn-bg);color:var(--warn);border-color:#fcd34d}
.pcetak-alert.info{background:var(--info-bg);color:var(--info);border-color:#bfdbfe}
.pcetak-tone-ok{color:var(--ok)}
.pcetak-tone-warn{color:var(--warn)}
.pcetak-tone-bad{color:var(--bad)}
.pcetak-suffix{flex:0 0 auto;display:inline-flex;align-items:center;padding:0 12px;border:1.5px solid var(--bdr);border-radius:var(--r-ctl);background:var(--bg);color:var(--tx2);font-size:13px;font-weight:600}

/* == Kalkulator Kertas — visualisasi layout potong (T58) ============= */
.pcetak-viz{border:1px solid var(--bdr);border-radius:var(--r-md);background:#fafafa;overflow:hidden}
.pcetak-viz canvas{display:block;width:100%;height:auto}
.pcetak-viz-info{display:flex;justify-content:space-between;align-items:center;margin-top:10px;font-size:11.5px;color:var(--tx2)}
.pcetak-viz-legend{display:flex;gap:12px;flex-wrap:wrap}
.pcetak-viz-legend-item{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600}
.pcetak-viz-legend-dot{width:11px;height:11px;border-radius:3px;border:1px solid transparent}
.pcetak-viz-legend-dot.dot-h{background:rgba(37,99,235,.75);border-color:#1d4ed8}
.pcetak-viz-legend-dot.dot-v{background:rgba(220,38,38,.7);border-color:#b91c1c}
.pcetak-viz-legend-dot.dot-waste{background:#f0f0f0;border-color:#d0d0d0}

/* == Kategori Edukasi — konten statis (T59) =========================== */
.pcetak-alert.ok{background:var(--ok-bg);color:var(--ok);border-color:#86efac}

.pcetak-flow{display:flex;flex-direction:column}
.pcetak-flow-step{display:flex;gap:14px}
.pcetak-flow-num{flex:none;display:flex;flex-direction:column;align-items:center}
.pcetak-flow-num .n{width:26px;height:26px;border-radius:50%;background:var(--ac);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.pcetak-flow-num .ln{flex:1;width:2px;background:var(--bdr);margin:4px 0}
.pcetak-flow-step:last-child .pcetak-flow-num .ln{display:none}
.pcetak-flow-body{padding-bottom:18px}
.pcetak-flow-body .t{font-weight:700;font-size:13.5px;margin-bottom:3px}
.pcetak-flow-body .d{font-size:12.5px;color:var(--tx2);line-height:1.55}
.pcetak-flow-body .more{margin-top:10px;padding:12px 14px;background:var(--bg);border-radius:var(--r-md);font-size:12px;color:var(--tx2);line-height:1.6}
.pcetak-flow-body .more strong{color:var(--tx)}
.pcetak-flow-body .more p+p{margin-top:8px}
.pcetak-flow-body .more ul{margin:6px 0 0 18px}
.pcetak-flow-body .more li{margin-bottom:4px}

.pcetak-term{padding:12px 14px;border:1px solid var(--bdr);border-radius:var(--r-md);margin-bottom:8px}
.pcetak-term .t{font-size:12.5px;font-weight:700;color:var(--ac-dk);margin-bottom:3px}
.pcetak-term .d{font-size:11.5px;color:var(--tx2);line-height:1.55}
.pcetak-term-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.pcetak-term-grid .pcetak-term{margin-bottom:0}

.pcetak-problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.pcetak-problem-card{border:1px solid var(--bdr);border-radius:var(--r-md);overflow:hidden}
.pcetak-problem-card .p{padding:12px 14px;background:var(--bad-bg)}
.pcetak-problem-card .p .t{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--bad);margin-bottom:4px}
.pcetak-problem-card .p .t .icon{flex:none;width:15px;height:15px}
.pcetak-problem-card .p .d{font-size:11.5px;color:var(--tx2);line-height:1.5}
.pcetak-problem-card .s{padding:10px 14px;background:var(--ok-bg);display:flex;gap:7px;align-items:flex-start;font-size:11.5px;color:var(--tx);line-height:1.5}
.pcetak-problem-card .s .icon{flex:none;width:14px;height:14px;color:var(--ok);margin-top:1px}

.pcetak-compare{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.pcetak-compare-card{border:1px solid var(--bdr);border-radius:var(--r-md);padding:16px;background:var(--card)}
.pcetak-compare-card .top{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.pcetak-compare-card .top .icon{width:17px;height:17px}
.pcetak-compare-card.tone-info .top{background:var(--info-bg);color:var(--info)}
.pcetak-compare-card.tone-ok .top{background:var(--ok-bg);color:var(--ok)}
.pcetak-compare-card.tone-warn .top{background:var(--warn-bg);color:var(--warn)}
.pcetak-compare-card .t{font-size:13.5px;font-weight:700;margin-bottom:8px}
.pcetak-compare-card .d{font-size:11.5px;color:var(--tx2);line-height:1.55}
.pcetak-compare-card .d strong{color:var(--tx)}
.pcetak-compare-card .d+.d{margin-top:8px}

.pcetak-script{border:1px solid var(--bdr);border-radius:var(--r-md);padding:14px;margin-bottom:14px}
.pcetak-script-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.pcetak-script-label{font-size:12.5px;font-weight:700}
.pcetak-script-body{font-size:12.5px;line-height:1.7;color:var(--tx)}

/* == REFERENSI HARGA (T60) — sub-header baris grup dalam .tbl-wrap table === */
.pcetak-sec{margin-bottom:26px}
.pcetak-sec:last-child{margin-bottom:0}
.pcetak-sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px}
.pcetak-sec-head h3{margin-bottom:0}
.pcetak-sec-meta{font-size:10.5px;color:var(--tx3);white-space:nowrap}
.pcetak-sec-desc{font-size:11.5px;color:var(--tx2);margin-bottom:8px}
.tbl-wrap table tr.tgrp td{background:var(--bg);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--tx2)}

/* T61 — baris rincian modal kalkulator Kalkulasi yg nonaktif (mis. Nomorator
   saat checkbox tidak dicentang): redupkan tanpa inline style. */
.tbl-wrap table tr.tr-mute{opacity:.35}

/* == T62 — Penawaran Digital: baris item dinamis (desc·harga·markup·qty) === */
.pcetak-item-row{display:grid;grid-template-columns:minmax(140px,2fr) 110px 90px 70px 32px;gap:8px;align-items:center;padding:10px 0;border-bottom:1px solid var(--bdr)}
.pcetak-item-row:last-child{border-bottom:none}
.pcetak-item-row .inp{height:32px;font-size:12.5px;padding:0 8px}
.pcetak-item-head{padding:0 0 8px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--tx3);border-bottom:none}
.pcetak-item-summary{grid-column:1/-1;display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--tx2);margin-top:-2px}
.pcetak-item-summary strong{color:var(--tx)}
@media (max-width:640px){
  .pcetak-item-head{display:none}
  .pcetak-item-row{grid-template-columns:1fr 1fr;row-gap:6px}
  .pcetak-item-row .pcetak-item-del{justify-self:end}
}

/* == T62 — File Sharing: kartu link berbagi (ikon+meta+badge, link + aksi) == */
.pcetak-share-card{border:1px solid var(--bdr);border-radius:var(--r-md);margin-bottom:14px;overflow:hidden}
.pcetak-share-head{display:flex;align-items:center;gap:12px;padding:14px 16px}
.pcetak-share-ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--ac-soft);color:var(--ac-dk);display:flex;align-items:center;justify-content:center}
.pcetak-share-meta{flex:1;min-width:0}
.pcetak-share-meta .t{font-size:13.5px;font-weight:700}
.pcetak-share-meta .d{font-size:11.5px;color:var(--tx2);margin-top:2px}
.pcetak-share-body{padding:14px 16px;border-top:1px solid var(--bdr)}
.pcetak-share-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.pcetak-share-preview{font-size:12px;line-height:1.7;color:var(--tx2);background:var(--bg);border:1px solid var(--bdr);border-radius:var(--r-md);padding:10px 12px;white-space:pre-line}

/* Daftar Harga Jual (T64) — kop + chip sales, khusus dokumen customer-facing */
.pcetak-dhj-kop{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:16px;border-bottom:2px solid var(--navy)}
.pcetak-dhj-logo{flex:none;width:44px;height:44px;border-radius:10px;overflow:hidden;background:var(--navy);display:flex;align-items:center;justify-content:center}
.pcetak-dhj-logo img{width:100%;height:100%;object-fit:cover;display:block}
.pcetak-dhj-logo .ph{color:#fff;font-weight:800;font-size:18px}
.pcetak-dhj-biz{flex:1;min-width:160px}
.pcetak-dhj-biz .n{font-size:16px;font-weight:800;color:var(--navy)}
.pcetak-dhj-biz .c{font-size:11.5px;color:var(--tx2);margin-top:2px}
.pcetak-dhj-meta{flex:none;text-align:right;font-size:11px;color:var(--tx3)}
.pcetak-dhj-meta .ed{font-weight:700;color:var(--tx2)}
.pcetak-dhj-sales{padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--bdr)}
.pcetak-dhj-sales .lb{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--tx3);margin-bottom:8px}
.pcetak-dhj-sales .grid{display:flex;gap:8px;flex-wrap:wrap}
.pcetak-dhj-chip{display:flex;align-items:center;gap:8px;flex:1;min-width:180px;padding:8px 12px;border:1px solid var(--bdr);border-radius:var(--r-md);background:var(--card);text-decoration:none;color:inherit;transition:border-color .12s,box-shadow .12s}
.pcetak-dhj-chip:hover{border-color:var(--ok);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.pcetak-dhj-chip .av{flex:none;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
.pcetak-dhj-chip .tx{flex:1;min-width:0;display:flex;flex-direction:column}
.pcetak-dhj-chip .tx .n{font-size:12.5px;font-weight:700;color:var(--tx)}
.pcetak-dhj-chip .tx .r{font-size:10.5px;color:var(--tx3)}
.pcetak-dhj-chip .wa{flex:none;color:var(--ok)}
.pcetak-dhj-foot{margin-top:18px;padding-top:12px;border-top:1px solid var(--bdr);font-size:10.5px;color:var(--tx3);text-align:center;line-height:1.5}

/* Panduan Produk (T65) — tab .seg full-width, tombol animasi lipat, wrap SVG */
.ppd-tabs{width:100%}
.ppd-tabs button{flex:1;text-align:center}
.ppd-fold-btn{margin:0 auto 4px;display:flex}
.ppd-svg-wrap{width:100%;display:flex;align-items:center;justify-content:center;min-height:200px;padding:14px 8px}
.ppd-svg-wrap svg{max-width:100%;height:auto;display:block}
/* Legend NCR — literal warna kertas (putih/merah/kuning/hijau), berimpit token semantik */
.pcetak-viz-legend-dot.ppd-dot-0{background:var(--card);border-color:var(--bdr)}
.pcetak-viz-legend-dot.ppd-dot-1{background:var(--bad-bg);border-color:var(--bad)}
.pcetak-viz-legend-dot.ppd-dot-2{background:var(--warn-bg);border-color:var(--warn)}
.pcetak-viz-legend-dot.ppd-dot-3{background:var(--ok-bg);border-color:var(--ok)}

/* == AKUN TERTAUT (Profil Saya: Email Login & Akun Google — T82) ======== */
/* Satu baris = ikon/foto · keterangan · tombol aksi. Dipakai di dua panel. */
.acc-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.acc-ico{flex:none;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg);border:1px solid var(--bdr);color:var(--tx2)}
.acc-img{flex:none;width:38px;height:38px;border-radius:50%;object-fit:cover;border:1px solid var(--bdr)}
.acc-txt{flex:1;min-width:200px}
.acc-main{font-size:13px;font-weight:700;color:var(--tx);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.acc-sub{font-size:11.5px;color:var(--tx2);line-height:1.55;margin-top:2px}
.acc-act{flex:none;display:flex;gap:8px;align-items:center}
.acc-note{margin-top:12px}
.acc-gtag{display:inline-flex;align-items:center;color:var(--tx3);vertical-align:-2px}

/* == BACKUP OTOMATIS (Pengaturan → Backup & Restore, T83) ============== */
/* Baris status jadwal: status · berikutnya · terakhir · pemakaian disk. */
.bk-sched-stat{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 14px;font-size:12px;color:var(--tx2)}
.bk-sched-stat b{color:var(--tx);font-weight:700}
/* Peringatan LUNAK (bukan hard-block): jadwal aktif tapi berkasnya tak pernah ada. */
.bk-sched-warn{display:flex;align-items:flex-start;gap:8px;padding:9px 12px;margin-bottom:14px;background:var(--warn-bg);border:1px solid #f3dfb3;border-radius:var(--r-sm);font-size:12px;line-height:1.55;color:var(--warn)}
.bk-sched-warn .icon{flex:none;margin-top:1px}
