/*
  ESTAMA Enterprise Design System
  UI-only layer. Existing module markup and behaviour stay intact.
*/

/*
  Breakpoint resmi (jangan menambah angka baru tanpa alasan):
  640  = field rentang / form sempit
  767  = HP: kanvas 16px, tabel → kartu
  1023 = tablet: sidebar overlay, 2 kolom
  1100 = grid dashboard meruntuh
*/
:root {
  --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* --font-mono dulu DIPAKAI di .date-input dan .active-period-badge tetapi
     tidak pernah DIDEFINISIKAN — kedua aturan itu diam-diam memakai font
     warisan. Ditambahkan 28 Okt 2026; nilai sama dengan yang dipakai
     index.html untuk kolom angka (ui-monospace…). */
  /* Satu font untuk seluruh aplikasi: Inter. Nama --font-mono dipertahankan
     supaya aturan lama tidak putus, tetapi nilainya sekarang Inter juga —
     angka tetap rata karena yang dipakai tabular-nums, bukan lebar huruf
     monospace. (Sebelum 28 Okt 2026: ui-monospace/Menlo/Consolas.) */
  --font-mono: var(--font-sans);
  /* --bg TIDAK didefinisikan di sini: estama-borderless.css memuat sesudah
     berkas ini dan menang. Sebelum 28 Okt 2026 nilai #F7F8F7 di bawah ini
     hanya menyesatkan pembaca — tidak pernah dipakai browser. */
  --surface: #FFFFFF;
  /* --surface-subtle: lihat estama-borderless.css */
  /* --surface-muted: lihat estama-borderless.css */
  --surface-sidebar: var(--surface-muted);
  --text: #111827;
  --text-secondary: #475569;
  --text-muted: #64748B;
  /* --border: lihat estama-borderless.css (var(--edge)) */
  /* --border-strong: lihat estama-borderless.css (var(--edge-strong)) */
  --primary: #087A52;
  --primary-hover: #066443;
  --primary-soft: #EAF7F1;
  --primary-soft-strong: #D5F0E3;
  --primary-contrast: #FFFFFF;
  --success-contrast: #FFFFFF;
  --warning-contrast: #FFFFFF;
  --danger-contrast: #FFFFFF;
  --info-contrast: #FFFFFF;
  --success: #047857;
  --success-soft: #ECFDF5;
  --success-border: #A7F3D0;
  --warning: #B45309;
  --warning-soft: #FFFBEB;
  --warning-border: #FDE68A;
  --danger: #DC2626;
  --danger-soft: #FEF2F2;
  --danger-border: #FECACA;
  --info: #2563EB;
  --info-soft: #EFF6FF;
  --info-border: #BFDBFE;
  /* Keluarga ungu — ditambahkan 28 Okt 2026 atas persetujuan pemilik aplikasi.
     Bukan warna karangan: markup sudah lama memakai `text-purple-700`, yang di
     palet Tailwind bernilai #7E22CE. Di sini nilainya dijadikan token supaya
     ikut tema gelap. Dipakai untuk kategori "Bahan Kemas" (sampling 4 jenis:
     fg=biru · kemas=ungu · R&D=abu · bahan baku=kuning) dan angka
     "Target Scale Up". */
  --purple-contrast: #FFFFFF;
  --purple: #7E22CE;
  --purple-soft: #FAF5FF;
  --purple-border: #E9D5FF;
  --neutral-soft: #F1F5F9;
  --neutral-border: #E2E8F0;
  --inverse: #111827;
  --inverse-hover: #1F2937;
  --inverse-text: #FFFFFF;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  /* --sp-7 dan --sp-8 melengkapi tangga: 4, 8, 12, 16, 24, 32, 40, 48.
     Sampai 28 Okt 2026 --sp-8 bernilai 32px — SAMA dengan --sp-6, jadi
     satu tingkat skala hilang dan .empty-state memakai padding yang
     lebih rapat daripada yang dimaksud. */
  --sp-7: 40px;
  --sp-8: 48px;
  /* Skala ukuran UI: 5 langkah (12 / 14 / 16 / 20 / 24), sama dengan skala Tailwind bawaan.
     11px dan 13px dilebur ke 12px; 15px -> 14px; 18px dan 22px -> 20px.
     Nama lama tetap ada sebagai alias supaya modul yang memakainya tidak putus. */
  --fs-sm: 12px;
  /* caption, label kecil, isi tabel/input/nav */
  --fs-2xs: 11px;   /* judul kelompok sidebar: satu tingkat di bawah item */
  --fs-md: 14px;                 /* teks isi */
  --fs-lg: 16px;                 /* judul seksi */
  --fs-xl: 20px;                 /* judul halaman, login */
  --fs-2xl: 24px;                /* angka KPI besar */
  --fs-xs: var(--fs-sm);         /* alias (dulu 11px) */
  --fs-base: var(--fs-sm);       /* alias (dulu 13px). Ganti ke 13px untuk mengembalikan ukuran isi tabel/input/nav */
  --fs-title: var(--fs-xl);      /* dulu 22px */
  /* --fs-section / --fs-body / --fs-secondary / --fs-caption didefinisikan
     di estama-typography.css (dimuat sesudah berkas ini, nilainya sama). */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  /* --fw-bold (700) dihapus: UI memakai 3 bobot saja (400/500/600). Bold asli hanya di lembar cetak (Arial). */
  --radius-sm: 8px;
  --radius-control: 8px;
  --radius-card: 10px;
  --radius-modal: 12px;
  --radius-pill: 999px;
  --r-sm: 8px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-full: 999px;
  /* --shadow-xs/-sm/-md: nilai TERANG ada di estama-borderless.css (menang).
     Yang tetap di sini hanya bayangan yang tidak ditimpa: lg/overlay/drawer. */
  --shadow-lg: 0 10px 28px -14px rgba(15, 23, 42, .16);
  --shadow-overlay: 0 16px 40px rgba(15, 23, 42, .16);
  --shadow-drawer: -20px 0 48px rgba(15, 23, 42, .14);
  --focus-ring: 0 0 0 3px rgba(8, 122, 82, .16);
  --focus-outline: var(--primary);
  --focus-outline-w: 2px;
  --focus-outline-offset: 2px;
  --border-w: 1px;
  --bg-muted: var(--surface-muted);
  --bg-hover: var(--surface-subtle);
  --primary-soft-2: var(--primary-soft-strong);
  --on-primary: var(--primary-contrast);
  --link: var(--primary);
  --success-strong: var(--success);
  --warning-strong: var(--warning);
  --danger-strong: var(--danger);
  --info-strong: var(--info);
  --neutral-strong: var(--text-secondary);
  --tone-success-bg: color-mix(in srgb, var(--success-border) 40%, var(--success-soft));
  --tone-success-fg: color-mix(in srgb, var(--success) 82%, var(--text));
  --tone-warning-bg: color-mix(in srgb, var(--warning-border) 40%, var(--warning-soft));
  --tone-warning-fg: color-mix(in srgb, var(--warning) 82%, var(--text));
  --tone-danger-bg: color-mix(in srgb, var(--danger-border) 40%, var(--danger-soft));
  --tone-danger-fg: color-mix(in srgb, var(--danger) 82%, var(--text));
  --tone-info-bg: color-mix(in srgb, var(--info-border) 40%, var(--info-soft));
  --tone-info-fg: color-mix(in srgb, var(--info) 82%, var(--text));
  --tone-purple-bg: color-mix(in srgb, var(--purple-border) 40%, var(--purple-soft));
  --tone-purple-fg: color-mix(in srgb, var(--purple) 82%, var(--text));
  --tone-primary-bg: color-mix(in srgb, var(--primary-soft-strong) 45%, var(--primary-soft));
  --tone-primary-fg: color-mix(in srgb, var(--primary) 82%, var(--text));
  --tone-neutral-bg: color-mix(in srgb, var(--neutral-border) 55%, var(--neutral-soft));
  --tone-neutral-fg: var(--text-secondary);
  --sidebar-width: 248px;
  --sidebar-collapsed: 72px;
  --topbar-height: 48px;
  --touch-h: 44px;
  --focus-ring-danger: 0 0 0 3px rgba(220, 38, 38, .14);
}

html.dark {
  --bg: #1A1E24;
  --surface: #22272F;
  --surface-subtle: #2A3038;
  --surface-muted: #1E232A;
  --surface-sidebar: var(--surface-muted);
  --text: #D5DAD8;
  --text-secondary: #A4ADA9;
  --text-muted: #929B97;
  --border: #32383F;
  --border-strong: #3E464E;
  --primary: #5FCB9A;
  --primary-hover: #7DD8AE;
  --primary-soft: #1C2C26;
  --primary-soft-strong: #274338;
  --primary-contrast: #0E1C16;
  --success-contrast: #0E1C16;
  --warning-contrast: #2C2010;
  --danger-contrast: #341414;
  --info-contrast: #10202F;
  --success: #5FCB9A;
  --success-soft: #1C2C26;
  --success-border: #2F5344;
  --warning: #D7B06A;
  --warning-soft: #2C261A;
  --warning-border: #5A4C30;
  --danger: #D09090;
  --danger-soft: #2C1F1F;
  --danger-border: #5A3A3A;
  --info: #7AA3D4;
  --info-soft: #1C2530;
  --info-border: #334860;
  --purple-contrast: #171021;
  --purple: #BFA1E0;
  --purple-soft: #241E2E;
  --purple-border: #463A5C;
  --neutral-soft: #2A3038;
  --neutral-border: #3A424C;
  --inverse: #D5DAD8;
  --inverse-hover: #C2C9C6;
  --inverse-text: #1A1E24;
  /* --shadow-xs/-sm/-md tema gelap: juga ada di html.dark estama-borderless.css. */
  --shadow-lg: 0 8px 22px -12px rgba(0, 0, 0, .24);
  --shadow-overlay: 0 12px 28px rgba(0, 0, 0, .24);
  --shadow-drawer: -16px 0 32px rgba(0, 0, 0, .20);
  --focus-ring: 0 0 0 3px rgba(95, 203, 154, .20);
  --focus-ring-danger: 0 0 0 3px rgba(208, 144, 144, .20);
}

html, body {
  font-family: var(--font-sans) !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-size: var(--fs-body);
  font-feature-settings: "tnum" 1, "cv02" 1, "cv03" 1, "cv04" 1;
  font-variant-numeric: tabular-nums;
}

body { line-height: 1.5; }

/* Status tone — pastel tag (token 50+200), teks lebih dalam. Satu bahasa badge/ikon */
.tone-success { background: var(--tone-success-bg); color: var(--tone-success-fg); border: none; }
.tone-warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); border: none; }
.tone-danger { background: var(--tone-danger-bg); color: var(--tone-danger-fg); border: none; }
.tone-info { background: var(--tone-info-bg); color: var(--tone-info-fg); border: none; }
.tone-neutral { background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); border: none; }
.tone-primary { background: var(--tone-primary-bg); color: var(--tone-primary-fg); border: none; }

.metric-value {
  color: var(--text);
  font-size: var(--fs-2xl);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat-value, .kpi-value, .ui-kpi-value { font-size: var(--fs-2xl); font-weight: 600; }

.login-hero-title { font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: -.01em; line-height: 1.3; }
.chart-svg circle { transform-box: fill-box; transform-origin: center; transition: transform .15s ease; }
.chart-svg circle:hover { transform: scale(1.25); }
.card .ui-drawer-kv { margin-top: var(--sp-4); }
.notif-unread-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: var(--radius-pill); background: var(--danger); flex-shrink: 0; }

/* Umpan balik */
@keyframes rowFlash { 0% { background: var(--success-soft); } 100% { background: transparent; } }
tr.row-flash { animation: rowFlash 1.8s ease-out; }
.input-error { border-color: var(--danger) !important; }
.input-error:focus { box-shadow: var(--focus-ring-danger); border-color: var(--danger) !important; }
.field-msg { font-size: var(--fs-xs); line-height: 1.4; color: var(--danger); margin-top: var(--sp-1); }
.btn-loading { opacity: .75; pointer-events: none; }
.btn-loading .btn-spinner {
  display: inline-block; width: 13px; height: 13px;
  border: 2px solid currentColor; border-top-color: transparent;
  border-radius: 50%; animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
.empty-state.empty-active { background: var(--surface-muted); border: 1px dashed var(--border-strong); border-radius: var(--radius-card); }

/* Menu akun */
#userMenu { padding: 6px; border-radius: var(--radius-modal); }
.um-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 10px; }
.um-avatar { width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--surface-muted); border: 1px solid var(--border); color: var(--text-secondary); display: grid; place-items: center; font-weight: var(--fw-semibold); font-size: var(--fs-caption); flex-shrink: 0; }
.um-txt { min-width: 0; }
.um-name { font-size: var(--fs-secondary); font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-meta { font-size: var(--fs-caption); color: var(--text-secondary); }
.um-email { font-size: var(--fs-caption); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-mode { display: flex; align-items: center; gap: 7px; font-size: var(--fs-caption); color: var(--text-secondary); padding: 7px 8px; background: var(--surface-muted); border-radius: var(--radius-sm); margin-bottom: 2px; }
.um-mode i { color: var(--primary); flex-shrink: 0; }
.um-divider { height: 1px; background: var(--border); margin: 4px 0; }
.um-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 9px; border: none; background: transparent; border-radius: var(--radius-sm); font-size: var(--fs-secondary); font-weight: 500; color: var(--text-secondary); cursor: pointer; text-align: left; }
.um-item:hover { background: var(--surface-muted); color: var(--text); }
.um-item i { width: 15px; height: 15px; flex-shrink: 0; }
.um-item.um-danger { color: var(--danger); }
.um-item.um-danger:hover { background: var(--danger-soft); }

/* Dropdown searchable */
.dropdown-input.input { padding-left: 36px; padding-right: 34px; }
.dropdown-list { position: absolute; z-index: 50; width: 100%; margin-top: 6px; max-height: 240px; overflow-y: auto; padding: 4px; border-radius: var(--radius-control); }
.dropdown-item { display: flex; align-items: center; gap: var(--sp-2); padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--fs-secondary); cursor: pointer; color: var(--text); }
.dropdown-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-empty { padding: var(--sp-4); text-align: center; font-size: var(--fs-caption); color: var(--text-muted); font-style: italic; }

.legend { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.legend .legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--text-secondary); }
.legend .legend-item .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.header-search { display: flex; align-items: center; gap: var(--sp-2); }
.header-search input { background: transparent; border: none; outline: none; width: 100%; color: var(--text); font-family: inherit; }
.header-search input::placeholder { color: var(--text-muted); }
.header-search .kbd-hint { font-size: var(--fs-caption); line-height: 1; padding: 3px 6px; border-radius: 5px; border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--surface); white-space: nowrap; }
#crumb .crumb-sep { color: var(--border-strong); margin: 0 6px; }

/* .hidden WAJIB menang atas kelas komponen yang menetapkan display sendiri.
   Berkas ini dimuat setelah tailwind.css, sehingga .notif-badge{display:...}
   dan .ui-count-badge{display:grid} mengalahkan .hidden{display:none} dari
   tailwind. Akibatnya elemen yang sengaja disembunyikan (badge notifikasi
   bernilai 0) tetap tampil. Satu aturan ini memperbaiki seluruh 115 pemakaian
   classList.add('hidden') di aplikasi. */
.hidden { display: none !important; }

.notif-badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--danger);
  color: var(--danger-contrast);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  display: grid;
  place-items: center;
  line-height: 1;
}
/* ============================================================
   Jembatan tema — beberapa modul masih pakai warna Tailwind ad-hoc
   (slate/rose) dengan pasangan dark: sendiri, bukan token desain
   sistem. Kelas ini menggantikannya supaya ikut --border/--danger
   yang sama dengan komponen lain, benar di kedua mode.
   ============================================================ */
/* Baris info pada kartu detail. Satu pola untuk seluruh modul.
   Keputusan pemilik aplikasi 28 Okt 2026: baris diberi jarak lebih longgar
   (tinggi baris 1,7 dan tinggi baris minimal --sp-6, jadi baris tunggal 33 px),
   nilai kembali ke bobot normal, dan antarbaris diberi garis rambut.
   Tinggi baris memakai min-height, bukan padding, supaya nilai dua baris
   (alamat, kontak) tetap tumbuh sendiri sesuai isinya. */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--sp-6);
  font-size: var(--fs-sm);
  line-height: 1.7;
}
/* Baris yang langsung menyusul baris lain: jarak bawaan wadah (space-y-*)
   dinolkan supaya garis rambut menempel tepat di tengah dua baris.
   Selektor .space-y-* Tailwind berspesifisitas (0,3,0), jadi aturan ini
   memakai #app/#modal agar menang tanpa menulis !important berulang.
   #modal perlu ikut karena beberapa modul (Summary, COA) membuka detail
   di dalam modal, bukan di halaman. */
#app .info-row + .info-row,
#modal .info-row + .info-row {
  margin-top: 0;
  border-top: var(--border-w) solid var(--hairline);
}
.info-row > .info-row-label { color: var(--text-muted); min-width: 0; }
/* Nilai memakai anak terakhir, apa pun kelas bawaannya, supaya baris lama yang
   masih menulis <span class="font-mono"> dan sebagainya ikut tertata tanpa
   perlu disunting satu per satu. */
.info-row > :last-child,
.info-row > .info-row-value { color: var(--text); font-weight: var(--fw-regular); text-align: right; min-width: 0; overflow-wrap: anywhere; }
.list-row-b { border-color: var(--border) !important; }
.list-row-hover:hover { background: var(--surface-muted) !important; }
.text-danger-strong { color: var(--danger) !important; }
.text-danger-soft2 { color: var(--danger) !important; opacity: .85; }

button, input, select, textarea { font-family: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--primary-soft-strong); color: var(--text); }

/* ============================================================
   Chrome — scrollbar overlay (satu sumber).
   Native disembunyikan: tidak ada kolom. Batang [data-sb]
   menimpa tepi (ui-utils). Jangan width di modul.
   docs/ui/09-chrome.md.
   ============================================================ */
html {
  scrollbar-width: none;
  scrollbar-gutter: auto;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}
.overflow-x-auto,
.overflow-y-auto,
.overflow-auto,
#sidebar nav,
#nav,
.dropdown-list,
.lot-combo-list,
.ui-drawer-body,
.dt-pop-body,
#cmdList,
#notifList,
#modal .modal-panel,
.table-wrap,
.dt-table-wrap,
.more-menu-pop {
  scrollbar-width: none;
  scrollbar-gutter: auto;
}
.table-wrap,
.dt-table-wrap {
  overflow: auto !important;
}
.overflow-x-auto::-webkit-scrollbar,
.overflow-y-auto::-webkit-scrollbar,
.overflow-auto::-webkit-scrollbar,
#sidebar nav::-webkit-scrollbar,
#nav::-webkit-scrollbar,
.dropdown-list::-webkit-scrollbar,
.lot-combo-list::-webkit-scrollbar,
.ui-drawer-body::-webkit-scrollbar,
.dt-pop-body::-webkit-scrollbar,
#cmdList::-webkit-scrollbar,
#notifList::-webkit-scrollbar,
#modal .modal-panel::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.dt-table-wrap::-webkit-scrollbar,
.more-menu-pop::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}
[data-sb] {
  position: fixed;
  width: 6px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--text-muted) 50%, transparent);
  pointer-events: none;
  /* Harus di atas SEMUA container yang dilacak, termasuk yang di-portal
     ke body dengan z-index tinggi (dropdown-portal: 90, modal: 80,
     more-menu-portal: 80) — kalau tidak, thumb-nya ada tapi kegambar
     di belakang kontennya sendiri sehingga terlihat seperti tidak ada
     scrollbar sama sekali. 999 = tepat di bawah chart-tip (1000),
     satu-satunya elemen yang memang harus selalu di atas segalanya. */
  z-index: 999;
  opacity: 0;
  display: none;
  transition: opacity .12s linear;
}
[data-sb][data-sb-on] { opacity: 1; display: block; }
.sticky-col { right: 0; }
@media print {
  [data-sb] { display: none !important; }
}

/* Login surface follows the same restrained enterprise geometry */
#loginCard { border-radius: var(--radius-modal) !important; box-shadow: var(--shadow-overlay) !important; }
.login-hero-logo { filter: brightness(0) invert(1); }

/* Application frame */
#mainWrap {
  margin-left: var(--sidebar-width) !important;
  background: var(--bg);
  min-height: 100vh;
  transition: margin-left .18s ease;
}
#mainWrap.sidebar-open { margin-left: var(--sidebar-collapsed) !important; }
#app {
  width: 100%;
  max-width: 1600px !important;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-6) !important;
}

/* Sidebar */
#sidebar {
  width: var(--sidebar-width) !important;
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: none !important;
  z-index: 40;
  transition: width .18s ease, transform .18s ease;
}
#sidebar.sidebar-collapsed { width: var(--sidebar-collapsed) !important; }
.sidebar-header {
  height: var(--topbar-height);
  min-height: var(--topbar-height);
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
}
.sidebar-workspace { gap: 10px; padding: 6px 4px; }
.sidebar-ws-logo {
  width: 28px !important;
  height: 28px !important;
  border-radius: 7px !important;
}
.sidebar-ws-txt b {
  font-size: var(--fs-secondary) !important;
  letter-spacing: -.01em;
}
.sidebar-ws-txt i { font-size: var(--fs-caption) !important; }
.sidebar-collapse-top { width: 30px !important; height: 30px !important; }
#sidebar nav, #nav { padding: 14px 12px 18px !important; min-height: 0 !important; }
.nav-section { margin-bottom: 16px !important; }
.nav-section + .nav-section { margin-top: 0 !important; }
.nav-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  height: auto;
  padding: 0 var(--sp-2) var(--sp-1) !important;
  margin: var(--sp-3) 0 var(--sp-1) !important;
  color: var(--text-muted) !important;
  font-size: var(--fs-2xs) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: .9;
}
.nav-section:first-child > .nav-section-label { margin-top: 0 !important; }
.nav-section-label i { width: 12px !important; height: 12px !important; color: var(--text-muted) !important; flex: 0 0 auto; }
.nav-item {
  height: 38px;
  margin: 2px 0 !important;
  padding: 0 10px !important;
  gap: 10px !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius-control) !important;
  color: var(--text-secondary) !important;
  font-size: var(--fs-secondary) !important;
  font-weight: 500 !important;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.nav-item i { width: 18px !important; height: 18px !important; color: var(--text-muted) !important; }
.nav-item:hover {
  background: var(--surface-muted) !important;
  color: var(--text) !important;
}
.nav-item:hover i { color: var(--text) !important; }
.nav-item-active,
.nav-item-active:hover {
  position: relative;
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  border-color: var(--primary-soft-strong) !important;
  font-weight: 600 !important;
}
.nav-item-active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--primary);
}
.nav-item-active i { color: var(--primary) !important; }
#sidebar.sidebar-collapsed .sidebar-header { padding: 0 12px; }
#sidebar.sidebar-collapsed .sidebar-header { justify-content: center; padding: 0 8px; gap: 0; }
#sidebar.sidebar-collapsed .sidebar-workspace { width: 32px; flex: 0 0 32px; justify-content: center; padding: 2px 0; cursor: pointer; }
#sidebar.sidebar-collapsed .sidebar-ws-txt,
#sidebar.sidebar-collapsed .sidebar-collapse-top { display: none; }
#sidebar.sidebar-collapsed nav { padding: 14px 10px 18px !important; }
#sidebar.sidebar-collapsed .nav-section-label {
  display: flex !important;
  justify-content: center;
  height: 18px;
  padding: 0 !important;
  margin: 2px 0 4px;
}
#sidebar.sidebar-collapsed .nav-section-label span { display: none !important; }
#sidebar.sidebar-collapsed .nav-section-label i { display: block !important; width: 12px !important; height: 12px !important; opacity: .65; }
#sidebar.sidebar-collapsed .nav-item {
  justify-content: center;
  height: 40px;
  padding: 0 !important;
}
#sidebar.sidebar-collapsed .nav-item span { display: none; }
#sidebar.sidebar-collapsed .nav-item i { width: 18px !important; height: 18px !important; }
#sidebar.sidebar-collapsed .nav-section { margin-bottom: 4px !important; }
#sidebar.sidebar-collapsed .nav-section + .nav-section {
  margin-top: 6px !important;
  padding-top: 6px;
  border-top: 1px solid var(--border);
}
.sidebar-backdrop { background: rgba(15, 23, 42, .42) !important; z-index: 35; }

/* Topbar */
#mainWrap > header {
  height: var(--topbar-height) !important;
  min-height: var(--topbar-height) !important;
  padding: 0 var(--sp-5) !important;
  gap: var(--sp-2) !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
  overflow: visible !important;
}
#notifWrap { flex: 0 0 auto; overflow: visible !important; }
#notifPanel {
  z-index: 60;
  overflow: hidden;
}
#notifPanel:not(.hidden) {
  display: flex;
  flex-direction: column;
}
#notifList { max-height: 360px; overflow-y: auto; }
#btnSidebarOpen { display: none; }
#crumb {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--text-secondary) !important;
  font-size: var(--fs-secondary) !important;
  font-weight: 500 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#crumb a { color: var(--text-muted) !important; flex: 0 0 auto; }
#crumb a:hover { color: var(--primary) !important; }
/* Segmen record (nama/kode) yang boleh panjang: truncate di layar sempit */
.crumb-seg {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text) !important;
  font-weight: 600 !important;
  max-width: 46vw;
}
.crumb-sep { flex: 0 0 auto; }
@media (max-width: 767px) /* HP: kanvas 16px, tabel → kartu */{
  .crumb-seg { max-width: 40vw; }
}
.header-search {
  width: 280px !important;
  height: 36px !important;
  padding: 0 10px !important;
  background: var(--surface-muted) !important;
  border-color: var(--border) !important;
  border-radius: var(--radius-control) !important;
}
.header-search:focus-within {
  background: var(--surface) !important;
  border-color: var(--primary) !important;
  box-shadow: var(--focus-ring) !important;
}
.header-search input { font-size: var(--fs-secondary) !important; }
.header-search .kbd-hint {
  border-color: var(--border-strong) !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
}
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  border: 1px solid transparent;
  border-radius: var(--radius-control) !important;
  background: transparent;
  color: var(--text-secondary) !important;
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-muted) !important; color: var(--text) !important; }
.header-avatar {
  display: grid;
  place-items: center;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  overflow: hidden;
  border-radius: 50% !important;
  border: 1px solid var(--primary-soft-strong) !important;
  background: var(--primary-soft) !important;
  color: var(--primary) !important;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
  flex-shrink: 0;
  cursor: pointer;
}

/* Page rhythm and headers.
   Kanvas (#app padding-top) = judul→isi (.page gap) = 24px, supaya judul
   duduk di tengah header↔isi. Tombol/tab di kanan tidak menambah tinggi
   baris (tinggi kunci 32 = .btn), jadi jarak itu tetap sama. */
.page { display: flex; flex-direction: column; gap: var(--sp-5); }
.page-lg { gap: var(--sp-5); }
/* Kartu: rapat. Markup tetap gap-4 / space-y-4 / p-4 — bukan class baru. */
#app .gap-4 { gap: var(--sp-3) !important; }
#app .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 12px !important; }
#app .p-4,
#modal .p-4,
.ui-drawer .p-4 { padding: var(--sp-3) !important; }
.page-header {
  display: flex;
  align-items: center !important;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 32px;
  padding: 0;
  margin: 0;
  flex-wrap: nowrap !important;
}
.page-header > .min-w-0,
.header-main > .min-w-0 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.page-header .page-title,
.header-main .page-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
}
.page-header > .flex,
.page-header .ui-page-actions {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  margin-left: auto;
  gap: var(--sp-2);
}
.page-header .seg {
  height: 32px !important;
  padding: 2px !important;
  box-sizing: border-box;
  align-items: stretch;
  flex-wrap: nowrap !important;
  border: 1px solid var(--border) !important;
  background: var(--surface-muted) !important;
  box-shadow: var(--shadow-xs);
}
.page-header .seg-btn {
  height: auto !important;
  font-size: var(--fs-caption) !important;
  font-weight: 500 !important;
  padding: 0 12px !important;
  line-height: 1;
}
.page-header .dt-toolbtn { height: 32px; }
.page-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-title) !important;
  line-height: 32px !important;
  font-weight: 600 !important;
  letter-spacing: -.02em !important;
  color: var(--text) !important;
  min-height: 32px;
}
.page-title .text-base,
.page-title .text-slate-400,
.page-title .dt-count { line-height: 32px; }
.page-sub {
  margin-top: 6px !important;
  color: var(--text-muted) !important;
  font-size: var(--fs-secondary) !important;
  line-height: 1.45 !important;
}
.section-title { font-size: var(--fs-section) !important; color: var(--text) !important; }
.card-title { font-size: var(--fs-md) !important; font-weight: 600; color: var(--text) !important; }
.card-title-xs { font-size: var(--fs-caption); color: var(--text-secondary); text-transform: none; letter-spacing: .02em; }
.card-note { font-size: var(--fs-caption); color: var(--text-secondary); }
.card-muted { background: var(--surface-muted) !important; }
.card-header-muted { background: var(--surface-muted) !important; }
.page-sub-xs { font-size: var(--fs-caption); }
.remove-btn { color: var(--danger); padding: 6px; border: 0; border-radius: var(--radius-sm); font-weight: 500; line-height: 1; background: transparent; cursor: pointer; }
.remove-btn:hover { background: var(--danger-soft); }
.badge-solid-danger { background: var(--danger) !important; color: var(--danger-contrast) !important; border: none !important; }
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-8) var(--sp-4); text-align: center; color: var(--text-muted); font-size: var(--fs-secondary); }
.dev-badge { display: inline-flex; align-items: center; font-size: var(--fs-xs); font-weight: 600; line-height: 1; padding: 3px 8px; border-radius: var(--radius-pill); border: none; white-space: nowrap; }
.dev-badge.dev-ok { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.dev-badge.dev-warn { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.dev-badge.dev-bad { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
.dev-badge.dev-neutral { background: var(--tone-neutral-bg); color: var(--text-muted); }
.card.penimbangan-anomali { border-color: var(--danger-border) !important; background: var(--danger-soft); }
.step-bar { flex: 1; height: 6px; border-radius: var(--radius-pill); }
.step-active { background: var(--primary); }
.step-done { background: var(--success); }
.step-idle { background: var(--surface-muted); }
.step-chip { flex: 1; padding: var(--sp-3); border-radius: var(--radius-control); border: 1px solid var(--border); background: var(--surface); }
.step-chip.step-active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); box-shadow: var(--shadow-xs); }
.step-chip.step-active .text-slate-500 { color: color-mix(in srgb, var(--primary-contrast) 80%, transparent) !important; }
.stat-label { font-size: var(--fs-xs); font-weight: 500; color: var(--text-muted); text-transform: none; letter-spacing: .02em; }
.kpi-spark { margin-top: 10px; min-height: 42px; }
.kpi-spark-empty { height: 42px; border-radius: var(--radius-sm); background: repeating-linear-gradient(90deg, var(--surface-muted) 0 6px, transparent 6px 12px); opacity: .5; }

/* Posisi baku legend di page-header: 1 baris di bawah deskripsi */
.page-legend { margin-top: 8px !important; }
.page-legend .legend-item { font-size: var(--fs-caption); }

/* Filter periode generik (periodFilterHtml): .seg cepat + Dari/Sampai + Terapkan. */
.period-filter .pf-range { display:flex; flex-direction:column; gap:2px; }
.period-filter .pf-range .label { font-size:var(--fs-caption); margin:0; }
.period-filter .pf-range .input { width:auto; min-width:10rem; flex:0 0 auto; }
.period-filter .seg { align-self:stretch; }
.period-filter > .dt-popover {
  display: none;
  top: calc(100% + 6px);
  right: 0;
  left: auto;
}
.period-filter > .dt-popover.is-open {
  display: flex;
}
.period-filter .dt-pop-preset.is-active {
  background: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}
@media (max-width:640px){
  .period-filter .pf-range { flex:1 1 100%; }
  .period-filter .pf-range .input { width:100%; min-width:0; }
}

/* Legend generik di toolbar/atas tabel (keluar dari page-header).
   Page-header baku: judul+subjudul kiri, 1 CTA kanan. */
.legend-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  padding: 8px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); font-size: var(--fs-caption); color: var(--text-secondary);
}
.legend-bar .legend-item { display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-caption); }
.legend-bar .dot { width:8px; height:8px; border-radius:999px; display:inline-block; flex:0 0 auto; }
.legend-bar .legend-swatch { width:10px; height:10px; border-radius:3px; display:inline-block; flex:0 0 auto; }

/* ============================================================
   Kalender bulan (renderMonthCalendar) — satu gaya untuk Analisa
   & Produksi. Warna mengikuti token status, benar di dark mode.
   ============================================================ */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-card); overflow:hidden; }
.cal-head { background:var(--surface-muted); padding:8px 6px; font-size:var(--fs-caption); font-weight:600; color:var(--text-secondary); text-align:center; }
.cal-cell { background:var(--surface); min-height:92px; padding:6px; display:flex; flex-direction:column; }
.cal-cell-blank { background:var(--surface-subtle); min-height:92px; }
.cal-cell-clickable { cursor:pointer; transition:background .12s; }
.cal-cell-clickable:hover { background:var(--surface-muted); }
.cal-cell-today { background:var(--primary-soft); box-shadow:inset 0 0 0 1px var(--primary-soft-strong); }
.cal-daynum { font-size:var(--fs-caption); color:var(--text-secondary); }
.cal-daynum-today { font-weight:var(--fw-semibold); color:var(--primary); }
.cal-events { display:flex; flex-direction:column; gap:3px; overflow:hidden; }
.cal-evt { font-size:var(--fs-caption); line-height:1.2; }
.cal-evt a, .cal-evt .cal-evt-link { display:block; padding:2px 5px; border-radius:6px; border:1px solid var(--border); background:var(--surface); }
.cal-evt a:hover { background:var(--surface-muted); }
.cal-evt .cal-dot { width:6px; height:6px; border-radius:999px; display:inline-block; flex:0 0 auto; }
.cal-more { font-size:var(--fs-caption); color:var(--primary); font-weight:600; padding:1px 5px; cursor:pointer; border-radius:6px; }
.cal-more:hover { background:var(--primary-soft); }
.cal-legend { margin-top:12px; }
.cal-legend .legend-item { font-size:var(--fs-caption); }
@media (max-width:767px){
  .cal-cell { min-height:64px; padding:4px; }
  .cal-cell-blank { min-height:64px; }
  .cal-evt .cal-evt-sub, .cal-evt .cal-evt-po { display:none; }
  .cal-head { padding:6px 2px; font-size:var(--fs-caption); }
}

/* ============================================================
   Featured / KPI card — angka ringkasan penting (dashboard/KPI),
   beda visual dari card konten biasa: aksen border-kiri, angka besar.
   ============================================================ */
.kpi-card {
  display: flex;
  flex-direction: column;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
  padding: var(--sp-3) !important;
  box-shadow: var(--shadow-xs) !important;
}
.kpi-card .kpi-label { font-size: var(--fs-caption); color: var(--text-muted); font-weight: 600; letter-spacing: .02em; }
.kpi-card .kpi-value { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; margin-top: 2px; }
.kpi-card .kpi-hint  { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 2px; }

/* Surfaces */
.card,
.hero-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-xs);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: 44px;
  padding: var(--sp-3) !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
  border-bottom: 1px solid var(--border);
}
/* Card angka ringkasan (KPI): aksen border-kiri otomatis saat memuat
   .stat-value/.kpi-value, tanpa perlu mengubah markup tiap modul. */
.card-header-muted { background: var(--surface-subtle) !important; }
.mini-box { border-color: var(--border) !important; border-radius: var(--radius-control) !important; }
.info-box, .warn-box, .danger-box, .success-box, .brand-box, .muted-box {
  border-radius: var(--radius-control) !important;
  padding: 12px !important;
}

/* Buttons: one clear primary */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: var(--fs-caption);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  box-shadow: none;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, filter .1s, transform .1s;
}
.btn:focus-visible, .icon-btn:focus-visible { box-shadow: var(--focus-ring) !important; outline: var(--focus-outline-w) solid var(--focus-outline) !important; outline-offset: var(--focus-outline-offset); }
.btn:active:not(.is-loading):not(.btn-loading) { filter: brightness(.96); transform: translateY(0.5px); }
.btn-primary {
  background: var(--primary) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
  --btn-on-color: var(--primary-contrast);
}
.btn-primary:hover {
  background: var(--primary-hover) !important;
  border-color: var(--primary-hover) !important;
}
.btn-success { background: var(--success) !important; border-color: var(--success) !important; color: var(--success-contrast) !important; --btn-on-color: var(--success-contrast); }
.btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: var(--danger-contrast) !important; --btn-on-color: var(--danger-contrast); }
.btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: var(--warning-contrast) !important; --btn-on-color: var(--warning-contrast); }
.btn-outline {
  background: var(--surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-strong) !important;
}
.btn-outline:hover { background: var(--surface-muted) !important; color: var(--text) !important; border-color: var(--border-strong) !important; }
.btn-soft { background: var(--surface-muted) !important; color: var(--text-secondary) !important; border-color: var(--border) !important; }
.btn-soft:hover { background: var(--neutral-soft) !important; color: var(--text) !important; }
.btn-ghost { color: var(--text-secondary) !important; }
.btn-ghost:hover { background: var(--surface-muted) !important; color: var(--text) !important; }
.btn-danger-soft { background: var(--danger-soft) !important; color: var(--danger) !important; border-color: var(--danger-border) !important; }
/* Ukuran tombol — SATU tinggi (32px) untuk semua varian.
   Sebelum 28 Okt 2026:
     · .btn-sm 32px = sama persis dengan .btn default (kelas mati)
     · .btn-xs 28px = satu-satunya yang beda tinggi, sehingga sebaris dengan
       tombol lain terlihat naik-turun.
   Sekarang ketiganya 32px; yang membedakan hanya kerapatan isi:
     default  padding 12px · gap 7px
     .btn-sm  padding 12px · gap 7px   — ALIAS, bukan ukuran
     .btn-xs  padding  9px · gap 7px   (lebih rapat, tinggi tetap 32px)
   .btn-sm sudah tidak dipakai di markup (523 pemakaian dibersihkan 28 Okt
   2026) dan nilainya sama persis dengan .btn. Aturan ini DIPERTAHANKAN
   hanya agar kode dinamis/eksternal yang masih menyebutnya tidak rusak.
   Ukuran ikon TIDAK diatur di sini: tetap mengikuti markup (w-3.5 / w-4),
   supaya ikon btn-xs tidak tiba-tiba lebih kecil daripada btn-sm. */
.btn-sm { height: 32px !important; padding: 0 12px !important; font-size: var(--fs-caption) !important; }
.btn-xs { height: 32px !important; padding: 0 9px !important; font-size: var(--fs-caption) !important; }

/* ============================================================
   Sistem Tombol — hierarki & interaksi.
   Aturan pemakaian (lihat PANDUAN-TOMBOL di header file ini):
   - .btn-primary : SATU per grup (aksi utama: Simpan/Tambah/Lanjut).
   - .btn-outline : aksi sekunder (Batal/Export/Detail/Edit di row).
   - .btn-soft/.btn-ghost : aksi minor/berulang.
   - .btn-danger-soft : hapus di list/row; .btn-danger : hanya di dialog konfirmasi.
   - .btn-success/.btn-warning/.btn-inverse : hanya semantik status, bukan aksi umum.
   ============================================================ */

/* Spinner loading pada tombol submit (cegah double-submit) */
.btn-spin { animation: dt-spin 0.7s linear infinite; }
@keyframes dt-spin { to { transform: rotate(360deg); } }
.btn-loading { opacity: 0.85; pointer-events: none; }
.btn-loading .btn-spin { display: inline-block; }

/* Overflow menu "⋯" untuk header yang tombolnya > 3 */
.more-menu { position: relative; display: inline-flex; }
.more-menu-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  min-width: 200px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-overlay);
  display: none; flex-direction: column; gap: 2px;
}
.more-menu-pop.open { display: flex; }
.more-menu-pop.more-menu-portal {
  position: fixed !important;
  z-index: 80 !important;
  top: auto; right: auto;
}
.more-menu-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--text-secondary);
  font-size: var(--fs-secondary); font-weight: 500; text-align: left; cursor: pointer;
}
.more-menu-item:hover { background: var(--surface-muted); color: var(--text); }
.more-menu-item i, .more-menu-item svg { width: 16px; height: 16px; flex: 0 0 auto; }
.more-menu-danger { color: var(--danger); }
.more-menu-danger:hover { background: var(--danger-soft); }

/* ============================================================
   Skeleton loading — placeholder shimmer untuk proses berat.
   Warna memakai --sk-base/--sk-shine agar benar di mode gelap.
   ============================================================ */
:root {
  --sk-base: #EEF2F0;
  --sk-shine: #F8FAF9;
}
html.dark {
  --sk-base: #232A33;
  --sk-shine: #2E3640;
}
.sk-bar {
  display: block;
  height: 10px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--sk-base) 25%, var(--sk-shine) 37%, var(--sk-base) 63%);
  background-size: 400% 100%;
  animation: sk-shimmer 1.2s ease-in-out infinite;
}
@keyframes sk-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
/* Gerak minimum: keadaan memuat tetap terbaca lewat teks ("Memuat data..."),
   tanpa kilau skeleton atau putaran ikon. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .sk-bar, .dt-skeleton, .dt-empty-mark.dt-empty-loading i { animation: none !important; }
}
.sk-card .sk-bar { margin: 0; }

/* ============================================================
   Onboarding checklist (first-run dashboard)
   ============================================================ */
.onb-card { border-color: var(--primary-soft-strong); }
.onb-progress { height: 6px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; }
.onb-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--primary); transition: width .4s ease; }
.onb-step { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); }
.onb-step.onb-done { opacity: .72; }
/* Langkah yang sudah selesai tidak perlu penjelasan lagi; penjelasannya
   memakan tinggi layar pertama dan mendorong angka KPI ke bawah lipatan. */
.onb-step.onb-done { padding: var(--sp-2) var(--sp-3); gap: var(--sp-2); }
.onb-step.onb-done .onb-desc { display: none; }
.onb-step.onb-done .onb-label { font-weight: 500; }
.onb-step.onb-done .badge { font-size: var(--fs-2xs); padding: 0 var(--sp-1); }
.onb-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center; border: 1.5px solid var(--border-strong); color: var(--text-muted); }
.onb-done .onb-check { background: var(--success); border-color: var(--success); color: var(--success-contrast); }
.onb-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--border-strong); }
.onb-body { flex: 1 1 auto; min-width: 0; }
.onb-label { font-weight: 600; font-size: var(--fs-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.onb-desc { font-size: var(--fs-caption); color: var(--text-muted); margin-top: 1px; }

/* Segmented control — pasangan tombol yang satu kesatuan (mis. naik/turun) */
.seg-group { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-control); overflow: hidden; }
.seg-group .icon-btn, .seg-group .btn {
  border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important;
}
.seg-group > * + * { border-left: 1px solid var(--border-strong) !important; }

/* Inputs and toolbar */
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
@media (min-width: 768px) { .form-grid { grid-template-columns: 1fr 1fr; } }
.label {
  display: block;
  margin-bottom: 6px !important;
  color: var(--text-secondary) !important;
  font-size: var(--fs-caption) !important;
  font-weight: 500 !important;
}
.label.mb-0 { margin-bottom: 0 !important; }
.label-xs { font-size: var(--fs-xs); margin-bottom: 4px; }
.form-hint { font-size: var(--fs-xs); color: var(--text-secondary); }
input.input.hidden { display: none !important; }
.input, .select {
  display: block;
  width: 100%;
  min-height: 38px;
  height: 38px !important;
  padding: 0 var(--sp-3) !important;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-control) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: var(--fs-secondary) !important;
  font-family: inherit;
  outline: none;
}
.select {
  appearance: none;
  -webkit-appearance: none;
  width: auto;
  min-width: 140px;
  max-width: 100%;
  display: inline-block;
  padding-right: 34px !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}
.input-auto { width: auto; display: inline-block; }
/* Catatan: tinggi tetap 2 baris. Jangan auto-grow / stretch — merusak ritme form. */
.textarea,
textarea.input {
  display: block;
  width: 100%;
  height: 64px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  padding: 8px 12px !important;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
  field-sizing: fixed;
  border: 1px solid var(--border-strong) !important;
  border-radius: var(--radius-control) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  font-size: var(--fs-secondary) !important;
}
.input::placeholder, .textarea::placeholder { color: var(--text-muted) !important; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary) !important;
  box-shadow: var(--focus-ring) !important;
  outline: none !important;
}
.input-readonly, .input-muted { background: var(--surface-muted) !important; }
.input-sm { min-height: 32px; height: 32px !important; font-size: var(--fs-caption) !important; }
.search-bar {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 180px;
  min-width: 160px;
  height: 36px !important;
  max-width: 340px !important;
}
.search-bar.grow { flex: 4 1 220px; max-width: none; min-width: 200px; }
.search-bar > i,
.search-bar > svg { position: absolute; left: 12px; top: 10px; width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; }
.search-bar > .input { width: 100%; height: 36px !important; padding-left: 36px !important; padding-right: 34px !important; background: var(--surface-muted) !important; }
.search-bar:focus-within > .input { border-color: var(--primary) !important; box-shadow: var(--focus-ring) !important; background: var(--surface) !important; }
.toolbar, .filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 60px;
  padding: var(--sp-3) var(--sp-4) !important;
  gap: var(--sp-2) !important;
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Segmented controls */
.seg {
  display: inline-flex;
  align-items: stretch;
  padding: 2px !important;
  gap: 2px !important;
  background: var(--surface-muted) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-control) !important;
  box-shadow: var(--shadow-xs);
  box-sizing: border-box;
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 28px !important;
  padding: 0 12px !important;
  border: 1px solid transparent;
  border-radius: var(--radius-sm) !important;
  background: transparent;
  color: var(--text-secondary) !important;
  font-size: var(--fs-caption) !important;
  font-weight: 500 !important;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.seg-btn:hover { color: var(--text) !important; }
.seg-active {
  background: var(--surface) !important;
  border-color: var(--border-strong) !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-xs) !important;
}

/* Status badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 22px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  border: none !important;
  text-transform: none;
}
.badge-neutral { background: var(--tone-neutral-bg) !important; color: var(--tone-neutral-fg) !important; }
.badge-success { background: var(--tone-success-bg) !important; color: var(--tone-success-fg) !important; }
.badge-warning { background: var(--tone-warning-bg) !important; color: var(--tone-warning-fg) !important; }
.badge-danger { background: var(--tone-danger-bg) !important; color: var(--tone-danger-fg) !important; }
.badge-info { background: var(--tone-info-bg) !important; color: var(--tone-info-fg) !important; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  background: var(--tone-neutral-bg) !important;
  border: none !important;
  color: var(--tone-neutral-fg) !important;
}
.chip-brand { background: var(--tone-primary-bg) !important; color: var(--tone-primary-fg) !important; }
.chip-danger { background: var(--tone-danger-bg) !important; color: var(--tone-danger-fg) !important; }

/* Dense enterprise tables */
.table-wrap { max-height: 72vh !important; overflow: auto !important; }
/* Kartu detail (header + tabel): wrap 72vh menaruh scrollbar di bawah fold.
   List data-table tidak pakai .card-header, tetap 72vh. */
.card-header + .table-wrap {
  max-height: min(340px, 38vh) !important;
}
#app table, #modal table { width: 100%; min-width: 640px; border-collapse: separate !important; border-spacing: 0 !important; }
#app table thead th, #modal table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 36px;
  padding: 0 var(--sp-3) !important;
  background: var(--surface-subtle) !important;
  color: var(--text-muted) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, .04);
  font-size: var(--fs-caption) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none;
  white-space: nowrap;
}
#app table tbody td, #modal table tbody td {
  height: 42px;
  padding: 7px 12px !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: var(--fs-secondary) !important;
  vertical-align: middle !important;
  font-variant-numeric: tabular-nums;
}
#app table:not(.inv-table):not(.fb-table) tbody tr:hover td, #modal table:not(.inv-table):not(.fb-table) tbody tr:hover td { background: var(--surface-subtle) !important; }
#app table tbody tr:last-child td, #modal table tbody tr:last-child td { border-bottom: 0 !important; }
/* Dulu min-width 520 px. Di kartu kanan halaman detail (lebarnya sekitar
   370 px) angka itu memaksa tabel digeser mendatar: terukur +149 px pada
   "Dipakai di Formula" dan "Batch yang Pakai Formula Ini". Sekarang tabel
   boleh menyusut sampai selebar kartunya. */
#app table.table-xs, #modal table.table-xs { min-width: min(520px, 100%); }
#app table.table-xs tbody td, #modal table.table-xs tbody td { height: 36px; padding: 5px 10px !important; font-size: var(--fs-caption) !important; }
.sticky-col { position: sticky; right: 0; z-index: 1; background: var(--surface) !important; border-left: 1px solid var(--border) !important; }
.sticky-col-head { z-index: 2 !important; }
#app table:not(.inv-table):not(.fb-table) tbody tr:hover td.sticky-col, #modal table:not(.inv-table):not(.fb-table) tbody tr:hover td.sticky-col { background: var(--surface-subtle) !important; }
.sticky-col-head { background: var(--surface-subtle) !important; }
.table-empty { min-height: 160px; padding: 34px 16px !important; color: var(--text-muted) !important; }

/* Sub-isi di dalam sel tabel: kode, tanggal, petugas, catatan singkat di bawah isi utama.
   Ditumpuk di sel yang sama (bukan baris <tr> kedua, bukan <span> menyamping).
   Kode/ID -> tambah .font-mono. Bisa panjang -> tambah .truncate.
   :where() = spesifisitas 0, jadi utilitas eksplisit (mis. .text-rose-600 untuk sisa
   jatuh tempo) tetap menang tanpa perlu !important. Warna lewat token -> ikut mode gelap. */
:where(.cell-sub) { display: block; font-size: var(--fs-caption); font-weight: var(--fw-regular); line-height: 1rem; color: var(--text-muted); }
/* Bobot isi sel tabel: satu saja, 400 — isi utama, sub-isi, tautan, kode, angka.
   Hierarki dari warna (--text vs --text-muted), mono, dan ukuran, bukan bobot.
   Kepala tabel 500 (estama-typography.css bagian 7), jadi tetap satu tingkat di atas isi.
   - .font-medium tidak berlaku di dalam sel.
   - .font-semibold hanya berlaku di dua tempat: baris total (<tr class="font-semibold">,
     pola C) dan nilai berwarna status (mis. .text-rose-600.font-semibold). Selain itu
     diratakan ke 400. Nilai yang warnanya kondisional otomatis ikut: kena status -> 600,
     netral -> 400.
   Diratakan lewat CSS supaya markup lama tidak perlu diedit satu-satu; pemakaian baru
   jangan menulis kelas-kelas itu di sel.
   Tabel cetak (.fb-table, .inv-table, .coa-table) punya gaya sendiri, dikecualikan.
   Kartu mobile (.dt-card-v) adalah tampilan lain dari tabel yang sama, ikut. */
:is(#app, #modal) table:not(.fb-table):not(.inv-table):not(.coa-table) tbody :is(td.font-medium, td .font-medium),
:is(#app, #modal) table:not(.fb-table):not(.inv-table):not(.coa-table) tbody tr:not(.font-semibold) :is(td.font-semibold, td .font-semibold):not(:is(.text-rose-600, .text-rose-700, .text-emerald-600, .text-emerald-700, .text-amber-600, .text-amber-700)),
.dt-card-v .font-medium,
.dt-card-v .font-semibold:not(:is(.text-rose-600, .text-rose-700, .text-emerald-600, .text-emerald-700, .text-amber-600, .text-amber-700)) { font-weight: var(--fw-regular); }
.link { color: var(--primary) !important; }
.link:hover { color: var(--primary-hover) !important; }

/* Existing KPI and dashboard blocks inherit the system */
.stat-label { color: var(--text-muted) !important; font-size: var(--fs-caption) !important; font-weight: 600 !important; letter-spacing: .02em !important; }
.stat-value { color: var(--text) !important; font-size: var(--fs-2xl) !important; font-weight: 600 !important; }
.stat-hint { color: var(--text-muted) !important; }

/* Overlay surfaces */
#userMenu, #cmdPanel, #modal .modal-panel {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-overlay) !important;
}
#modal { z-index: 80 !important; }
#modal .modal-backdrop { background: rgba(2, 6, 23, .42); }
#modal .modal-panel { border-radius: var(--radius-modal) !important; background: var(--surface); }
#modalBody { color: var(--text); }
.modal-title { font-size: var(--fs-lg) !important; font-weight: 600; }
/* Judul panjang (mis. "Koreksi Batch · Brightening Glow Serum 30ml · B260929-01")
   dulu terpotong mentah di tepi panel. Sekarang menyusut dengan elipsis dan
   teks lengkapnya ada di atribut title. */
#modalTitle.modal-title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#cmdPanel .cmd-input { border-color: var(--border) !important; }
.cmd-item:hover, .cmd-item.cmd-active { background: var(--primary-soft) !important; color: var(--primary) !important; }
.dropdown-list, .lot-combo-list { background: var(--surface) !important; border-color: var(--border) !important; box-shadow: var(--shadow-overlay) !important; }
.dropdown-item:hover { background: var(--primary-soft) !important; color: var(--primary) !important; }
/* List suggestion yang di-portal ke document.body (lihat createSearchableDropdown):
   bebas dari transform/overflow drawer, z-index di atas drawer (55). */
.dropdown-list.dropdown-portal {
  position: fixed !important;
  z-index: 90 !important;
  margin-top: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  scrollbar-width: auto !important;
  scrollbar-color: #64748b #f1f5f9 !important;
}
.dropdown-list.dropdown-portal::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
  display: block !important;
  background: #f1f5f9 !important;
}
.dropdown-list.dropdown-portal::-webkit-scrollbar-thumb {
  background: var(--text-muted) !important;
  border-radius: 8px !important;
}
.dropdown-item .dropdown-label { display: block; }
.dropdown-item .dropdown-sub { display: block; margin-top: 1px; color: var(--text-muted); font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dropdown-more {
  position: sticky; bottom: 0; padding: 6px 10px; text-align: center;
  font-size: var(--fs-caption); color: var(--text-muted); background: var(--surface);
  border-top: 1px solid var(--border);
}
.toast-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: 9px 13px;
  border-radius: var(--radius-control);
  font-size: var(--fs-secondary);
  border: 0 !important;
  box-shadow: var(--shadow-overlay) !important;
}
.toast-neutral { background: var(--inverse); color: var(--inverse-text); }
.toast-success { background: var(--success); color: var(--success-contrast); }
.toast-warning { background: var(--warning); color: var(--warning-contrast); }
.toast-danger { background: var(--danger); color: var(--danger-contrast); }
/* Pakai currentColor, bukan putih tetap — toast-neutral berbalik jadi latar
   terang/teks gelap di dark mode, jadi overlay ini harus ikut warna teksnya. */
.toast-action { background: color-mix(in srgb, currentColor 18%, transparent); border: 1px solid color-mix(in srgb, currentColor 35%, transparent); color: inherit; border-radius: 6px; padding: 4px 10px; }
.toast-action:hover { background: color-mix(in srgb, currentColor 30%, transparent); }
/* Tombol close manual pada toast (X) — terlihat di atas latar apa pun toast-nya */
.toast-close{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; margin:-2px -4px 0 4px; padding:0; border:0; border-radius:6px; background:color-mix(in srgb, currentColor 16%, transparent); color:inherit; cursor:pointer; opacity:.85; transition:background .15s, opacity .15s; }
.toast-close:hover{ background:color-mix(in srgb, currentColor 30%, transparent); opacity:1; }
.toast-close i, .toast-close svg{ width:14px; height:14px; }
.toast-action{ flex:0 0 auto; }

/* Mobile / tablet shell */
@media (max-width: 1023px) {
  #mainWrap { margin-left: 0 !important; }
  #mainWrap.sidebar-open { margin-left: 0 !important; }
  #btnSidebarOpen { display: inline-flex !important; }
  #sidebar { width: var(--sidebar-width) !important; }
  #sidebar.sidebar-collapsed { width: var(--sidebar-width) !important; }
  #sidebar.sidebar-collapsed .sidebar-header { justify-content: space-between; padding: 0 16px; gap: 10px; }
  #sidebar.sidebar-collapsed .sidebar-ws-txt,
  #sidebar.sidebar-collapsed .sidebar-collapse-top,
  #sidebar.sidebar-collapsed .nav-section-label,
  #sidebar.sidebar-collapsed .nav-section-label span,
  #sidebar.sidebar-collapsed .nav-item span { display: initial; }
  #sidebar.sidebar-collapsed .nav-section-label { justify-content: flex-start; height: 26px; padding: 0 10px 5px !important; margin: 0; }
  #sidebar.sidebar-collapsed .nav-section + .nav-section { border-top: 0; margin-top: 0 !important; padding-top: 0; }
  #sidebar.sidebar-collapsed .nav-item { justify-content: flex-start; height: 44px; padding: 0 10px !important; }
  #sidebar.sidebar-collapsed .sidebar-workspace { justify-content: flex-start; }
  #sidebar.sidebar-collapsed .sidebar-collapse-top { display: inline-flex; }
  #mainWrap > header { padding: 0 24px !important; }
  .header-search { width: min(280px, 42vw) !important; }
  #app { padding-top: 24px !important; padding-bottom: 28px !important; }
}
@media (max-width: 767px) /* HP: kanvas 16px, tabel → kartu */ {
  #app { padding: var(--sp-4) var(--sp-4) var(--sp-5) !important; }
  .page, .page-lg { gap: var(--sp-4) !important; }
  #mainWrap > header { gap: 8px !important; padding: 0 16px !important; }
  #crumb { font-size: var(--fs-caption) !important; }
  .header-search { display: none !important; }
  .page-title { font-size: var(--fs-title) !important; }
  .page-header { gap: 12px !important; flex-wrap: wrap !important; }
  .page-header > .flex { width: 100%; }
  .page-header .btn { flex: 0 0 auto; }
  .toolbar, .filterbar { align-items: stretch; }
  .search-bar { max-width: none !important; flex-basis: 100%; }
  .search-bar > .input { width: 100%; }
  .card-header { min-height: 40px; padding: 8px 12px !important; }
  #app table, #modal table { min-width: 620px; }
  #modal .modal-panel { border-radius: 0 !important; }
}

/* Enterprise dashboard composition */
.enterprise-dashboard .page-header { margin-bottom: 0; }
.dash-context-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 8px 12px; background: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-control); }
.dash-context-status { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--text-muted); font-size: var(--fs-caption); }
.dash-context-sep { color: var(--border-strong); }
.dash-live-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.dash-context-actions { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, .8fr); gap: 12px; }
.dash-grid-top { grid-template-columns: minmax(0, 1.5fr) minmax(320px, .8fr); align-items: stretch; }
.dash-grid-bottom { grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); }
.dash-panel { min-width: 0; overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.dash-panel-toolbar { display: flex; align-items: center; gap: var(--sp-2); padding: 0 14px 10px; overflow-x: auto; }
.ui-issue-section-label { display: flex; align-items: center; justify-content: space-between; padding: 8px 6px 4px; color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold); border-top: 1px solid var(--border); }
.issue-group:first-child .ui-issue-section-label { border-top: none; }
.dash-panel-head-tabs { align-items: center !important; flex-wrap: wrap; gap: 10px; }
.dash-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px 10px; }
.dash-panel-head .btn { flex: 0 0 auto; }
.dash-chart { min-height: 250px; padding: 0 14px 12px; }
.dash-chart .chart-svg { width: 100%; height: auto; }
.dash-status-chart { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 16px 16px 12px; }
.dash-status-chart .stacked-wrap { flex: 1; justify-content: center; gap: 14px; }
.dash-status-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: auto; padding: 10px 16px 14px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-caption); }
.dash-status-foot b { color: var(--text); font-size: var(--fs-body); font-weight: 600; }
.dash-status-note { color: var(--text-muted); text-align: right; }
.ui-count-badge { display: grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border: none; border-radius: var(--radius-pill); background: var(--tone-neutral-bg); color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.ui-count-badge.has-items { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
/* Penghitung kosong (0) tidak memberi informasi apa pun; sembunyikan. */
.ui-count-badge:not(.has-items) { display: none; }
.ui-issue-list, .ui-upcoming-list { padding: 0 12px 12px; }
.ui-issue-row, .ui-upcoming-row { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 6px; border-top: 1px solid var(--border); color: inherit; text-decoration: none; }
.ui-issue-row:hover, .ui-upcoming-row:hover { background: var(--surface-subtle); }
.ui-issue-icon { display: grid; place-items: center; width: 30px; height: 30px; flex: 0 0 auto; border: none; border-radius: var(--radius-control); background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }
.ui-issue-warning .ui-issue-icon { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.ui-issue-danger .ui-issue-icon { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
.ui-issue-info .ui-issue-icon { background: var(--tone-info-bg); color: var(--tone-info-fg); }
.ui-issue-success .ui-issue-icon { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.ui-issue-copy, .ui-upcoming-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ui-issue-copy strong, .ui-upcoming-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: var(--fs-secondary); font-weight: 600; }
.ui-issue-copy small, .ui-upcoming-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); font-size: var(--fs-caption); }
.ui-issue-action { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--primary); font-size: var(--fs-caption); font-weight: 600; }
.ui-upcoming-marker { width: 8px; height: 8px; flex: 0 0 auto; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); }
.ui-upcoming-marker.is-running { border-color: var(--info); background: var(--info); box-shadow: 0 0 0 3px var(--info-soft); }
.ui-upcoming-marker.is-alert { border-color: var(--danger); background: var(--danger); }
.ui-upcoming-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 5px; flex: 0 0 auto; }
.ui-upcoming-meta small { color: var(--text-muted); font-size: var(--fs-caption); }
.ui-activity-table { max-height: 310px; border-top: 1px solid var(--border); }
.ui-activity-table table { min-width: 680px !important; }
.ui-activity-table .ui-nowrap { white-space: nowrap; }
.ui-activity-type { display: inline-flex; padding: 3px 7px; border: none; border-radius: var(--radius-pill); background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); font-size: var(--fs-caption); font-weight: 600; }
.ui-muted-cell { color: var(--text-muted) !important; }
.ui-empty-compact { min-height: 145px; }
@media (max-width: 1100px) { .dash-grid, .dash-grid-top, .dash-grid-bottom { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .dash-context-bar { align-items: flex-start; flex-direction: column; } .dash-context-actions { width: 100%; justify-content: flex-end; } .dash-panel-head { padding-left: 14px; padding-right: 14px; } .dash-chart { padding-left: 8px; padding-right: 8px; } .dash-status-foot { align-items: flex-start; flex-direction: column; } .dash-status-note { text-align: left; } .ui-issue-action { display: none; } }

/* New shared primitives used by migrated pages */
.ui-page-header { align-items: center !important; }
.ui-page-heading { min-width: 0; }
.ui-page-heading .page-title { display: flex; align-items: center; gap: 8px; }
.ui-page-icon { color: var(--primary); flex: 0 0 auto; }
.ui-eyebrow { margin-bottom: 6px; color: var(--primary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .02em; text-transform: none; }
.ui-page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ui-section-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ui-section-title { color: var(--text); font-size: var(--fs-section); font-weight: 600; line-height: 1.35; }
.ui-section-note { margin-top: 3px; color: var(--text-muted); font-size: var(--fs-caption); }
.ui-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ui-kpi { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); }
.ui-kpi-link { display: block; color: inherit; text-decoration: none; }
.ui-kpi-main { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); }
.ui-kpi-label { color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .02em; text-transform: none; }
.ui-kpi-value { margin-top: 6px; color: var(--text); font-size: var(--fs-2xl); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.ui-kpi-hint { margin-top: 6px; color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.35; }
.ui-kpi-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 auto; border: none; border-radius: var(--radius-control); background: var(--tone-neutral-bg); color: var(--tone-neutral-fg); }
.ui-kpi.ui-tone-primary .ui-kpi-icon,
.ui-kpi-icon.ui-tone-primary { background: var(--tone-primary-bg); color: var(--tone-primary-fg); }
.ui-kpi.ui-tone-success .ui-kpi-icon,
.ui-kpi-icon.ui-tone-success { background: var(--tone-success-bg); color: var(--tone-success-fg); }
.ui-kpi.ui-tone-warning .ui-kpi-icon,
.ui-kpi-icon.ui-tone-warning { background: var(--tone-warning-bg); color: var(--tone-warning-fg); }
.ui-kpi.ui-tone-danger .ui-kpi-icon,
.ui-kpi-icon.ui-tone-danger { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
.ui-kpi.ui-tone-info .ui-kpi-icon,
.ui-kpi-icon.ui-tone-info { background: var(--tone-info-bg); color: var(--tone-info-fg); }
.ui-tone-warning { color: var(--warning) !important; }
.ui-tone-danger { color: var(--danger) !important; }
.ui-tone-success { color: var(--success) !important; }
.ui-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 180px; gap: 7px; padding: 28px 16px; text-align: center; color: var(--text-muted); }
.ui-empty-mark { display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: var(--radius-control); background: var(--tone-primary-bg); color: var(--tone-primary-fg); }
.ui-empty-mark i, .ui-empty-mark svg { width: 20px; height: 20px; }
.ui-empty-title { color: var(--text-secondary); font-size: var(--fs-secondary); font-weight: 600; }
.ui-empty-description { max-width: 360px; color: var(--text-muted); font-size: var(--fs-caption); }
/* Keadaan galat (R-27): memakai kerangka .ui-empty yang sudah ada, hanya
   warna penanda dan kotak rincian yang ditambah. Tidak ada ukuran keras baru,
   semuanya dari token spasi/radius/teks supaya ikut tema. */
.ui-error .ui-empty-mark { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
.ui-error-detail { margin-top: var(--sp-1); padding: var(--sp-2) var(--sp-3); border: var(--border-w) solid var(--danger-border); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--tone-danger-fg); font-family: var(--font-mono); font-size: var(--fs-caption); overflow-wrap: anywhere; text-align: left; max-width: 100%; }
.ui-error-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; margin-top: var(--sp-1); }
/* Penanda galat pada tabel (dipakai data-table saat cfg.error terisi). */
.dt-empty-mark.dt-empty-danger { background: var(--tone-danger-bg); color: var(--tone-danger-fg); }
@media (max-width: 1023px) { .ui-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ui-kpi-grid { grid-template-columns: 1fr; } .ui-section-header { flex-wrap: wrap; } }

/* Print remains document-like; this layer must not tint official documents. */
@media print {
  #mainWrap { margin-left: 0 !important; }
  #app { padding: 0 !important; max-width: none !important; }
}

/* ============================================================
   ESTAMA v2 interaction layer
   Balanced readable data tables + hybrid page/drawer workflow.
   ============================================================ */
:root {
  --table-row-height: 42px;
  --drawer-width: 460px;
  --drawer-backdrop: rgba(15, 23, 42, .40);
}
html.dark { --drawer-backdrop: rgba(10, 12, 15, .68); }

/* Balanced readable table rhythm: enough density for ERP, enough air for scanning. */
#app table tbody td, #modal table tbody td {
  height: var(--table-row-height);
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}
#app table.table-xs tbody td, #modal table.table-xs tbody td {
  height: 36px;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}
#app table tbody tr { transition: background-color .14s ease; }
#app table tbody tr:focus-within td { background: var(--primary-soft) !important; }
#app table td .btn, #app table td button { white-space: nowrap; }

/* Control-tower dashboard */
.dash-control-panels { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(220px, .75fr); gap: 12px; padding: 0 12px 12px; }
.dash-control-pane { min-width: 0; margin: 0 14px 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface-subtle); }
.dash-control-pane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.dash-control-pane-title { color: var(--text); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.dash-control-pane-note { margin-top: 2px; color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.35; }
.dash-control-pane .chart-svg { width: 100%; height: auto; max-height: 156px; }
.dash-chart-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 5px; color: var(--text-muted); font-size: var(--fs-caption); }
.dash-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dash-chart-legend i { display: inline-block; width: 16px; height: 2px; border-radius: 2px; background: var(--primary); }
.dash-chart-legend i.is-target { height: 0; border-top: 2px dashed var(--text-muted); background: transparent; }
.dash-control-total { color: var(--text); font-size: var(--fs-section); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.dash-control-total small { color: var(--text-muted); font-size: var(--fs-caption); font-weight: 500; }
.dash-aging-list { display: grid; gap: 7px; margin-top: 9px; }
.dash-aging-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) 26px; align-items: center; gap: 7px; color: var(--text-muted); font-size: var(--fs-caption); }
.dash-aging-track { height: 7px; overflow: hidden; border-radius: 99px; background: var(--surface-muted); }
.dash-aging-bar { height: 100%; min-width: 2px; border-radius: inherit; background: var(--primary); }
.dash-aging-row:nth-child(2) .dash-aging-bar { background: var(--info); }
.dash-aging-row:nth-child(3) .dash-aging-bar { background: var(--warning); }
.dash-aging-row:nth-child(4) .dash-aging-bar { background: var(--danger); }
.dash-aging-value { color: var(--text); font-weight: var(--fw-semibold); text-align: right; font-variant-numeric: tabular-nums; }
.dash-aging-empty { padding: 32px 8px; color: var(--text-muted); font-size: var(--fs-caption); text-align: center; }

/* Quick view drawer. Full detail routes remain the source of truth; drawer only adds context. */
body.drawer-open { overflow: hidden; }
.ui-drawer { position: fixed; inset: 0; z-index: 55; display: flex; justify-content: flex-end; visibility: visible; }
.ui-drawer.hidden { display: none !important; }
.ui-drawer-backdrop { position: absolute; inset: 0; background: var(--drawer-backdrop); opacity: 0; transition: opacity .18s ease; }
.ui-drawer-panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: min(var(--drawer-width), 100vw); height: 100%; overflow: hidden; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-drawer); transform: translateX(100%); transition: transform .18s ease; }
.ui-drawer.is-open .ui-drawer-backdrop { opacity: 1; }
.ui-drawer.is-open .ui-drawer-panel { transform: translateX(0); }
.ui-drawer-head { display: flex; align-items: flex-start; gap: 14px; min-height: 76px; padding: 18px 18px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.ui-drawer-heading { min-width: 0; flex: 1; }
.ui-drawer-eyebrow { margin-bottom: 4px; color: var(--primary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .02em; text-transform: none; }
.ui-drawer-title { overflow: hidden; color: var(--text); font-size: var(--fs-lg); font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.ui-drawer-subtitle { margin-top: 4px; overflow: hidden; color: var(--text-muted); font-size: var(--fs-caption); text-overflow: ellipsis; white-space: nowrap; }
.ui-drawer-body { flex: 1; overflow-y: auto; padding: 16px; }
.ui-drawer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 13px 18px; border-top: 1px solid var(--border); background: var(--surface-subtle); }
.ui-drawer-section { padding: 14px 0; border-bottom: 1px solid var(--border); }
.ui-drawer-section:first-child { padding-top: 0; }
.ui-drawer-section:last-child { border-bottom: 0; }
.ui-drawer-section-title { margin-bottom: 8px; color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .02em; text-transform: none; }
.ui-drawer-summary { color: var(--text-secondary); font-size: var(--fs-secondary); line-height: 1.55; }
.ui-drawer-kv { display: grid; grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr); gap: 8px 12px; margin: 0; font-size: var(--fs-caption); }
.ui-drawer-kv dt { color: var(--text-muted); }
.ui-drawer-kv dd { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--text); font-weight: 600; }
.ui-issue-row { position: relative; }
.ui-issue-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; color: inherit; text-decoration: none; }
.ui-issue-quick { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 5px 7px; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: var(--primary); cursor: pointer; font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.ui-issue-quick:hover { border-color: var(--primary-soft-strong); background: var(--primary-soft); }
.ui-issue-quick:focus-visible, .ui-drawer button:focus-visible, .ui-drawer a:focus-visible { outline: var(--focus-outline-w) solid var(--focus-outline); outline-offset: var(--focus-outline-offset); box-shadow: var(--focus-ring); }
.ui-issue-action.is-disabled, .ui-issue-quick.is-disabled { opacity: 0.55; cursor: not-allowed !important; color: var(--text-muted) !important; pointer-events: none; }
.ui-issue-main.is-locked { cursor: default; }

@media (max-width: 1100px) {
  .dash-control-panels { grid-template-columns: 1fr; }
}
@media (max-width: 767px) /* HP: kanvas 16px, tabel → kartu */ {
  .dash-control-panels { padding: 0 10px 10px; gap: 10px; }
  .dash-control-pane { padding: 10px; }
  .ui-drawer-panel { width: 100%; border-left: 0; }
  .ui-drawer-body { padding: 16px; }
  .ui-drawer-head { padding-left: 16px; padding-right: 16px; }
  .ui-drawer-foot { padding-left: 16px; padding-right: 16px; }
  .ui-issue-quick { padding: 8px 9px; }
}
@media print {
  .ui-drawer { display: none !important; }
}

/* Search inputs: .input has an intentional !important padding reset, so restore
   the icon gutter with equal priority. Prevents placeholder/value text from
   painting over the magnifier in list search bars and searchable dropdowns. */
.search-bar > .input,
.searchable-dropdown .dropdown-input {
  padding-left: 38px !important;
  padding-right: 36px !important;
}

/* ============================================================
   FORM DRAWER — panel kanan untuk form kompleks (wizard,
   daftar item dinamis, sub-form bersarang). Terpisah dari
   drawer "Tinjau" read-only; animasi slide-in identik.
   ============================================================ */
:root {
  --form-drawer-width: 560px;
  --form-drawer-width-lg: 720px;
  --form-drawer-width-sm: 440px;
}
body.form-drawer-open { overflow: hidden; }
.ui-form-drawer { z-index: 56; }
/* CATATAN 29 Okt 2026: percobaan "drawer memendek / kartu mengambang"
   (kelas .is-fit) SUDAH DICABUT atas keputusan pemilik aplikasi. Drawer
   kembali setinggi layar seperti semula. Jangan pasang lagi tanpa izin. */
.ui-form-drawer .ui-drawer-panel { width: min(var(--form-drawer-width), 100vw); }
.ui-form-drawer.drawer-size-lg .ui-drawer-panel { width: min(var(--form-drawer-width-lg), 100vw); }
.ui-form-drawer.drawer-size-sm .ui-drawer-panel { width: min(var(--form-drawer-width-sm), 100vw); }
.ui-form-drawer .ui-drawer-head { flex-wrap: wrap; gap: 10px 14px; min-height: 0; padding: 16px 18px 14px; }
.ui-form-drawer .ui-drawer-title { white-space: normal; }
.ui-form-drawer .ui-drawer-foot { justify-content: space-between; background: var(--surface); }

/* Segmented step indicator di dalam header (tidak ikut scroll) */
.ui-form-steps { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.ui-form-step { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-muted); font-size: var(--fs-caption); font-weight: 600; }
.ui-form-step-dot { display: grid; place-items: center; width: 20px; height: 20px; flex: 0 0 auto; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1; }
.ui-form-step-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-form-step-line { width: 18px; height: 2px; flex: 0 0 auto; border-radius: 2px; background: var(--border-strong); }
.ui-form-step.is-done .ui-form-step-dot { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); }
.ui-form-step.is-done .ui-form-step-label { color: var(--text-secondary); }
.ui-form-step-line.is-done { background: var(--primary); }
.ui-form-step.is-active .ui-form-step-dot { border-color: var(--primary); background: var(--primary); color: var(--primary-contrast); box-shadow: 0 0 0 3px var(--primary-soft); }
.ui-form-step.is-active .ui-form-step-label { color: var(--primary); }

/* Inline confirm perubahan belum tersimpan (strip di bawah header) */
.ui-form-dirty { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 9px 18px; border-bottom: 1px solid var(--warning-border); background: var(--warning-soft); color: var(--warning); font-size: var(--fs-caption); font-weight: 600; }
.ui-form-dirty.hidden { display: none !important; }
#modalDirty { position: sticky; top: 56px; z-index: 11; }
.ui-form-dirty-msg { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ui-form-dirty-actions { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }

/* Section label kecil di dalam body form (scan cepat) */
.ui-form-section { padding: 14px 0; border-bottom: 1px solid var(--border); }
.ui-form-section:first-child { padding-top: 0; }
.ui-form-section:last-child { border-bottom: 0; padding-bottom: 0; }
.ui-form-section-title { display: block; margin-bottom: 10px; color: var(--text-muted); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .02em; text-transform: none; }

/* ---- Dynamic item rows: card-row lega menggantikan grid 12-kolom sempit ---- */
.card-rows { display: grid; gap: 10px; }
.card-row {
  position: relative;
  padding: 12px 12px 12px 14px;
  border: none;
  border-radius: var(--radius-card);
  background: var(--surface-subtle);
}
.card-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.card-row-badge {
  display: grid; place-items: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--tone-primary-bg);
  color: var(--tone-primary-fg);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums;
}
.card-row-title { min-width: 0; flex: 1; color: var(--text-secondary); font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .02em; text-transform: none; }
.card-row-remove {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-control);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--fs-caption); font-weight: 600;
  cursor: pointer;
  transition: filter .12s ease;
}
.card-row-remove:hover { filter: brightness(.97); }
.card-row-remove i { width: 14px; height: 14px; }
.card-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.card-row-grid .span-2 { grid-column: 1 / -1; }
.card-row-grid .label { margin-bottom: 5px; }
.card-row.flash-remove { animation: cardRowShake .28s ease; }
@keyframes cardRowShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

/* Tombol tambah item: selalu di bawah daftar, dashed/full-width */
.btn-add-row {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 38px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--primary);
  font-size: var(--fs-secondary); font-weight: 600;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.btn-add-row:hover { border-color: var(--primary); background: var(--primary-soft); }
.btn-add-row i { width: 15px; height: 15px; }

/* Sticky summary bar di atas tombol tambah (mis. Total Persentase) */
.rows-summary {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 4px; padding: 9px 12px;
  border: none;
  border-radius: var(--radius-control);
  background: var(--surface-muted);
  font-size: var(--fs-caption); color: var(--text-secondary);
}
.rows-summary b { color: var(--text); font-size: var(--fs-secondary); font-variant-numeric: tabular-nums; }
.rows-summary .rows-summary-val { font-family: var(--font-sans); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.rows-summary.is-valid { background: var(--success-soft); }
.rows-summary.is-valid .rows-summary-val { color: var(--success); }
.rows-summary.is-invalid { background: var(--warning-soft); }
.rows-summary.is-invalid .rows-summary-val { color: var(--warning); }

/* Empty state kecil di dalam daftar item */
.rows-empty {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--surface-subtle);
  color: var(--text-muted);
  text-align: center;
}
.rows-empty-mark { display: grid; place-items: center; width: 32px; height: 32px; border: none; border-radius: var(--radius-control); background: var(--tone-primary-bg); color: var(--tone-primary-fg); }
.rows-empty-mark i, .rows-empty-mark svg { width: 16px; height: 16px; }
.rows-empty-title { color: var(--text-secondary); font-size: var(--fs-caption); font-weight: 600; }
.rows-empty-desc { font-size: var(--fs-caption); line-height: 1.4; }
.rows-empty .btn-add-row { max-width: 260px; margin-top: 4px; }

/* Loading state tombol simpan (cegah double submit) */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px;
  border: 2px solid color-mix(in srgb, var(--btn-on-color, #fff) 45%, transparent); border-top-color: var(--btn-on-color, #fff);
  border-radius: 50%;
  animation: btnSpin .6s linear infinite;
}
.btn-outline.is-loading::after, .btn-soft.is-loading::after, .btn-danger-soft.is-loading::after {
  border-color: var(--border-strong); border-top-color: var(--text-secondary);
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Footer form: aksi sekunder kiri, primer kanan (konsisten semua panel) */
.form-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.form-foot-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ui-form-drawer-foot .form-foot { padding: 0; }

/* Baris tombol terakhir di dalam pop-up dijadikan kaki yang rata tepi,
   bukan tombol menggantung di tengah isi (kelas dipasang tandaiKakiModal). */
#modalBody > .modal-foot-inline,
#modalBody > form > .modal-foot-inline {
  margin: var(--sp-4) calc(-1 * var(--sp-4)) calc(-1 * var(--sp-4));
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-top: var(--border-w) solid var(--border);
}
#modal .modal-foot-inline .btn { min-width: 0; }

/* Compact modal: form sederhana ≤ ~5 field tidak melebar penuh */
#modal.modal-compact .modal-panel { width: min(520px, 94vw); max-height: 84vh; }
#modalBody { padding: 16px !important; }
#modal.modal-compact #modalBody { padding: 16px !important; }
#modal.modal-compact .form-grid { gap: 12px; }

@media (max-width: 767px) /* HP: kanvas 16px, tabel → kartu */ {
  .ui-form-drawer .ui-drawer-panel,
  .ui-form-drawer.drawer-size-lg .ui-drawer-panel { width: 100%; border-left: 0; }
  .card-row-grid { grid-template-columns: 1fr; }
  .ui-form-steps { overflow-x: auto; padding-bottom: 2px; }
  .ui-form-step-label { display: none; }
  .ui-form-step.is-active .ui-form-step-label { display: inline; }
  .ui-form-dirty { align-items: flex-start; flex-direction: column; }
}

/* ============================================================
   DATATABLE — komponen tabel reusable (toolbar 2-baris, filter
   popover, sort via header, pagination, bulk action, card mobile)
   ============================================================ */
.dt-card-shell { padding: 0; }
.dt-count { color: var(--text-muted); font-weight: 400; font-size: var(--fs-body); }

/* Toolbar baris 1 */
.dt-toolbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 48px; padding: 10px 12px;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.dt-search { position: relative; flex: 1 1 280px; min-width: 220px; display: flex; align-items: center; }
.dt-search > i, .dt-search > svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--text-muted); pointer-events: none; z-index: 1; }
.dt-search-input { height: 36px !important; width: 100%; padding-left: 36px !important; padding-right: 34px !important; background: var(--surface-muted) !important; }
.dt-search-clear {
  position: absolute; right: 8px; z-index: 1; display: grid; place-items: center;
  width: 22px; height: 22px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.dt-search-clear:hover { background: var(--border); color: var(--text); }
.dt-toolbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }

.dt-toolbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-control);
  background: var(--surface); color: var(--text-secondary);
  font-size: var(--fs-secondary); font-weight: 500; cursor: pointer; position: relative;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.dt-toolbtn:hover { background: var(--surface-muted); color: var(--text); }
.dt-toolbtn i, .dt-toolbtn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.dt-toolbtn-badge {
  display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-contrast);
  font-size: var(--fs-caption); font-weight: var(--fw-semibold); line-height: 1;
}
.dt-toolbtn-icon { width: 36px; padding: 0; justify-content: center; }

/* Toolbar baris 2 — chip filter aktif */
.dt-chipbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 12px; background: var(--surface-subtle); border-bottom: 1px solid var(--border); }
.dt-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 6px 0 10px;
  border: none; border-radius: var(--radius-pill);
  background: var(--tone-primary-bg); color: var(--tone-primary-fg);
  font-size: var(--fs-caption); font-weight: 500;
}
.dt-chip-label { color: var(--text-muted); font-weight: 600; }
.dt-chip button { display: inline-flex; align-items: center; border: 0; background: transparent; color: var(--primary); cursor: pointer; padding: 2px; border-radius: var(--radius-pill); }
.dt-chip button:hover { background: var(--primary-soft-strong); }
.dt-chip-reset {
  display: inline-flex; align-items: center; gap: 5px; margin-left: auto;
  border: 0; background: transparent; color: var(--text-muted);
  font-size: var(--fs-caption); font-weight: 600; cursor: pointer;
}
.dt-chip-reset:hover { color: var(--danger); }
.dt-chip-reset i { width: 13px; height: 13px; }

/* Filter / sort popover. .dt-table-anchor membungkus card + popover; popover
   absolute di luar card agar tidak ter-clip overflow-hidden card. */
.dt-card-shell { position: relative; }
.dt-table-anchor { position: relative; }
.dt-popover {
  position: absolute; top: 52px; right: 16px; z-index: 60;
  width: min(300px, calc(100vw - 32px));
  max-height: min(72vh, 480px);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); box-shadow: var(--shadow-overlay);
  overscroll-behavior: contain;
}
/* Popover sort selebar base: footer 2 tombol ("Tanpa sort" + toggle arah)
   harus muat tanpa terpotong di layar manapun. */
.dt-popover[data-dt-pop="sort"] { width: min(320px, calc(100vw - 32px)); }
.dt-pop-body { padding: 12px; display: grid; gap: 10px; flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.dt-pop-field { display: grid; gap: 5px; }
.dt-pop-field .label { margin-bottom: 0; }
.dt-pop-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.dt-pop-presets .btn { padding: 3px 9px; font-size: var(--fs-caption); }
.dt-pop-daterange { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dt-pop-daterange .input { flex: 1; min-width: 0; font-size: var(--fs-caption); padding: 6px 8px; }
.dt-pop-date-sep { color: var(--text-muted, #94a3b8); }
.dt-pop-foot { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface-subtle); }
/* Tombol "kiri" footer (Reset / Tanpa sort) didorong ke kiri dengan
   kelas khusus — JANGAN andalkan .btn-outline karena dipakai bersama
   tombol toggle arah sort (.dt-sort-dir) sehingga margin bentrok. */
.dt-pop-foot-start { margin-right: auto; }
@media (max-width:480px){
  .dt-pop-foot .btn { white-space: normal; }
}
.dt-pop-sort { gap: 2px; }
.dt-sort-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: var(--radius-control);
  background: transparent; color: var(--text-secondary);
  font-size: var(--fs-secondary); font-weight: 500; cursor: pointer; text-align: left;
}
.dt-sort-item:hover { background: var(--surface-muted); }
.dt-sort-item.is-active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.dt-sort-item i { width: 15px; height: 15px; flex: 0 0 auto; }
.dt-sort-dot { width: 15px; height: 15px; flex: 0 0 auto; }
.dt-sort-dir { margin-left: auto; white-space: nowrap; }
.dt-pop-foot-start + .dt-sort-dir { margin-left: 0; }

/* Bulk contextual bar */
.dt-bulkbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; padding: 10px 12px;
  border: 1px solid var(--primary-soft-strong); border-radius: var(--radius-card);
  background: var(--primary-soft);
}
.dt-bulkbar-overlay {
  position: absolute; left: 0; right: 0; top: 0; z-index: 8;
  margin-bottom: 0 !important;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}
.dt-bulk-count { color: var(--text); font-size: var(--fs-secondary); }
.dt-bulk-count b { color: var(--primary); }
.dt-bulk-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Table enhancements */
.dt-table thead th.dt-th-sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.dt-table tbody tr.dt-row-clickable { cursor: pointer; }
.dt-table tbody tr.dt-row-clickable:hover td { background: var(--surface-subtle); }
.dt-cards .dt-card.dt-row-clickable { cursor: pointer; }
.dt-table thead th.dt-th-sortable:hover { color: var(--text); }
.dt-th-label { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
#app table thead th.dt-right .dt-th-label,
#modal table thead th.dt-right .dt-th-label,
#app table thead th.text-right .dt-th-label,
#modal table thead th.text-right .dt-th-label { width: 100%; justify-content: flex-end; }
.dt-sort {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  width: 7px;
  height: 10px;
  flex: 0 0 auto;
  opacity: .28;
}
.dt-sort::before,
.dt-sort::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
}
.dt-sort::before { border-bottom: 3.5px solid currentColor; }
.dt-sort::after { border-top: 3.5px solid currentColor; }
.dt-table thead th.dt-th-sortable:hover .dt-sort { opacity: .5; }
.dt-sort.is-asc,
.dt-sort.is-desc { opacity: .7; }
.dt-sort.is-asc::after { opacity: .22; }
.dt-sort.is-desc::before { opacity: .22; }
.dt-th-check, .dt-table td.dt-th-check { width: 36px; text-align: center; position: sticky; left: 0; z-index: 2; background: var(--surface); }
.dt-table thead th.dt-th-check { background: var(--surface-subtle); }
.dt-check { width: 15px; height: 15px; accent-color: var(--primary); cursor: pointer; }
.dt-table tbody tr.dt-row-selected td { background: var(--primary-soft) !important; }
.dt-right { text-align: right; font-variant-numeric: tabular-nums; }
.dt-center { text-align: left; }
#app table thead th.dt-right, #modal table thead th.dt-right,
#app table tbody td.dt-right, #modal table tbody td.dt-right {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
}
#app table thead th.dt-center, #modal table thead th.dt-center {
  text-align: left !important;
}
#app table th.text-right, #app table td.text-right,
#modal table th.text-right, #modal table td.text-right {
  font-variant-numeric: tabular-nums;
}
/* Tinggi satu baris tabel dibatasi 3 baris (keputusan pemilik 1 Okt 2026).
   Teks yang lebih panjang dipotong dengan titik-titik; lengkapnya lewat tooltip.
   Sejak 28 Okt 2026 renderer bersama (data-table.js) memasang kelas ini pada
   setiap sel data, jadi aturannya berlaku untuk semua tabel, bukan per modul.
   `line-clamp` tanpa awalan ikut ditulis untuk peramban yang sudah baku. */
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.clamp-3-chips { max-height: 4.3rem; overflow: hidden; }
.dt-row-actions { display: inline-flex; gap: 4px; justify-content: flex-end; min-width: 168px; white-space: nowrap; }
.dt-row-actions .btn { white-space: nowrap; }
/* Lebar kolom Aksi stabil antar baris walau jumlah/label tombol berbeda */
.dt-table th.sticky-col, .dt-table td.sticky-col { min-width: 176px; }
.dt-jadwal-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }

/* Empty & loading states */
.dt-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 44px 16px; text-align: center; }
.dt-empty-mark { display: grid; place-items: center; width: 40px; height: 40px; border: none; border-radius: var(--radius-card); background: var(--tone-primary-bg); color: var(--tone-primary-fg); }
.dt-empty-mark i, .dt-empty-mark svg { width: 20px; height: 20px; }
.dt-empty-mark.dt-empty-muted { background: var(--surface-muted); color: var(--text-muted); }
.dt-empty-mark i { width: 22px; height: 22px; }
/* Animasi putar HANYA untuk penanda memuat; ikon keadaan kosong/galat diam. */
.dt-empty-mark.dt-empty-loading i { animation: dt-spin 1s linear infinite; }
.dt-empty-title { color: var(--text-secondary); font-size: var(--fs-body); font-weight: 600; }
.dt-empty-desc { max-width: 380px; color: var(--text-muted); font-size: var(--fs-caption); }
.dt-empty-action { margin-top: 4px; }
.dt-skeleton { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-muted) 25%, var(--border) 37%, var(--surface-muted) 63%); background-size: 400% 100%; animation: dt-shimmer 1.3s ease infinite; }
@keyframes dt-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes dt-spin { to { transform: rotate(360deg); } }

/* Pagination */
.dt-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 12px; border-top: 1px solid var(--border); background: var(--surface); }
.dt-page-info { color: var(--text-muted); font-size: var(--fs-caption); }
.dt-page-info b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.dt-page-controls { display: flex; align-items: center; gap: 6px; }
.dt-page-size { height: 32px !important; min-height: 32px; font-size: var(--fs-caption) !important; padding: 0 8px !important; width: auto; }
.dt-page, .dt-page-nav {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: var(--radius-control);
  background: var(--surface); color: var(--text-secondary);
  font-size: var(--fs-caption); font-weight: 600; cursor: pointer; font-variant-numeric: tabular-nums;
}
.dt-page:hover, .dt-page-nav:hover:not(:disabled) { background: var(--surface-muted); color: var(--text); }
.dt-page.is-active { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); }
.dt-page-nav:disabled { opacity: .4; cursor: not-allowed; }
.dt-page-nav i { width: 15px; height: 15px; }
.dt-page-sep { color: var(--text-muted); padding: 0 2px; }

/* Mobile card list (sembunyikan tabel, tampilkan card) */
.dt-cards { display: none !important; }
.dt-cards[hidden], .dt-table-wrap[hidden] { display: none !important; }
.dt-card {
  padding: 12px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
}
.dt-card:last-child { border-bottom: 0; }
.dt-card-head { display: flex; align-items: flex-start; gap: 10px; }
.dt-card-titles { min-width: 0; flex: 1; }
.dt-card-title { font-size: var(--fs-body); font-weight: 600; color: var(--text); }
.dt-card-sub { margin-top: 2px; font-size: var(--fs-caption); color: var(--text-muted); }
.dt-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.dt-card-field { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dt-card-k { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: .02em; text-transform: none; color: var(--text-muted); }
.dt-card-v { font-size: var(--fs-secondary); color: var(--text); word-break: break-word; }
.dt-card-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dt-cards-empty { padding: 0; }

@media (max-width: 767px) /* HP: kanvas 16px, tabel → kartu */ {
  .dt-table-wrap { display: none !important; }
  .dt-table-wrap.dt-keep-table { display: block !important; }
  .dt-cards { display: block !important; }
  .dt-toolbar { align-items: stretch; flex-direction: column; }
  .dt-search { flex-basis: 100%; }
  .dt-toolbar-actions { margin-left: 0; width: 100%; }
  .dt-toolbar-actions .btn { flex: 1 1 auto; }
  .dt-popover { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; }
  .dt-pagination { flex-direction: column; align-items: stretch; }
  .dt-page-controls { justify-content: center; flex-wrap: wrap; }
  .dt-bulkbar { flex-direction: column; align-items: stretch; }
  .dt-bulk-actions { justify-content: flex-end; }
}

/* Semantic graph palette: charts use meaning, not a rainbow of arbitrary hues. */
:root {
  --chart-primary: var(--primary);
  --chart-primary-light: #34D399;
  --chart-success: var(--success);
  --chart-info: #1D4ED8;
  --chart-info-light: #60A5FA;
  --chart-warning: var(--warning);
  --chart-danger: var(--danger);
  --chart-neutral: var(--text-muted);
  --chart-muted: var(--border-strong);
  --chart-teal: #0F766E;
  --chart-purple: #7C3AED;
  --chart-on-color: #FFFFFF;
}
html.dark {
  --chart-primary-light: #6EE7B7;
  --chart-info: #60A5FA;
  --chart-info-light: #BFDBFE;
  --chart-teal: #2DD4BF;
  --chart-purple: #A78BFA;
  --chart-on-color: #06281A;
}

/* ---------- Modern chart styling: smooth motion, soft depth, clear hierarchy ---------- */
.chart-svg { display: block; overflow: visible; animation: chartFadeIn .35s ease; }
.chart-svg .chart-hit { fill: transparent; cursor: pointer; }
.chart-svg .chart-block { transition: opacity .12s ease, filter .12s ease; }
.chart-svg .chart-block:hover { filter: brightness(1.12); opacity: 1 !important; }
.chart-svg .chart-donut-arc { transition: opacity .15s ease; cursor: pointer; }
.chart-svg .chart-donut-arc:hover { opacity: .8; }
@keyframes chartFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.chart-tip {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  background: var(--inverse);
  color: var(--inverse-text);
  font-size: var(--fs-caption);
  font-weight: 600;
  padding: 5px 9px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-overlay);
  opacity: 0;
  transform: translateY(4px) scale(.96);
  transition: opacity .12s ease, transform .12s ease;
  max-width: 220px;
  line-height: 1.35;
}
.chart-tip.show { opacity: 1; transform: translateY(0) scale(1); }

.stacked-bar { transition: filter .15s ease; }
.stacked-seg { transition: transform .12s ease, filter .12s ease; cursor: default; }
.stacked-seg:hover { filter: brightness(1.12); transform: scale(1.15); }

.donut-legend { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.donut-legend.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 14px; }
.dl-item { display: flex; align-items: center; gap: 7px; font-size: var(--fs-caption); color: var(--text-secondary); padding: 3px 5px; border-radius: var(--radius-sm); transition: background .12s ease; }
.dl-item:hover { background: var(--surface-muted); }
.dl-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dl-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dl-val { font-weight: var(--fw-semibold); color: var(--text); font-variant-numeric: tabular-nums; }
.dl-pct { color: var(--text-muted); font-size: var(--fs-caption); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }

.kpi-delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--fs-caption); font-weight: var(--fw-semibold); padding: 2px 6px; border-radius: var(--radius-pill); }
.kpi-delta.up { color: var(--tone-success-fg); background: var(--tone-success-bg); }
.kpi-delta.down { color: var(--tone-danger-fg); background: var(--tone-danger-bg); }
.kpi-delta.flat { color: var(--text-muted); background: var(--tone-neutral-bg); }

/* Print: buang kotak abu (shadow kartu, bg header tabel, surface-subtle).
   Spesifisitas #app table thead th harus mengalahkan aturan layar. */
@media print {
  * { box-shadow: none !important; text-shadow: none !important; }
  html, body, #app, #app .page, #mainWrap, #labelPrint, #printLabel {
    background: #fff !important;
    color: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  body.printing-label > *:not(#labelPrint),
  body.printing-po > *:not(#poPrintModal) {
    display: none !important;
  }
  body.printing-po #poPrintModal {
    position: static !important;
    background: transparent !important;
    padding: 0 !important;
    display: block !important;
    overflow: visible !important;
    max-height: none !important;
  }
  body.printing-po #poPrintModal .a4-sheet-container {
    box-shadow: none !important;
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    background: transparent !important;
  }
  .no-print {
    display: none !important;
  }
  /* Lembar label perlu nol penuh (cetak tepi-ke-tepi). Lembar dokumen A4
     (fb-sheet cs) WAJIB menyimpan margin halamannya (padding 12mm 14mm). */
  .print-label-sheet {
    margin: 0 !important;
    padding: 0 !important;
  }
  body.printing-label .fb-sheet, body.printing-label #labelPrint .fb-sheet {
    margin: 0 auto !important;
    padding: 12mm 14mm !important;
  }
  .fb-head, .inv-head { margin-top: 0 !important; padding-top: 0 !important; }
  #app table thead th,
  #modal table thead th,
  #app table tbody td,
  #modal table tbody td,
  .fb-sheet table thead th,
  .fb-sheet table tbody td {
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: none !important;
    color: #000 !important;
  }
  .card, .hero-card, .kpi-card, .ui-kpi, .seg, .toolbar, .filterbar,
  .dt-toolbar, .table-wrap, .dt-table-wrap {
    box-shadow: none !important;
    background: #fff !important;
    background-color: #fff !important;
  }
}


/* ESTAMA DESIGN SYSTEM: EXTENSION FOR ANALISA & BI HUB */
.period-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  box-shadow: var(--shadow-xs);
}
.period-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.period-label {
  font-size: var(--fs-caption, 11px);
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.period-chip {
  background: var(--surface-subtle);
  border: 1px solid var(--border);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.12s ease;
}
.period-chip:hover {
  background: var(--surface-muted);
  color: var(--text);
}
.period-chip.active {
  background: var(--primary);
  border-color: var(--primary-hover);
  color: #fff;
  font-weight: 600;
}
.period-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.date-input-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.date-input {
  border: 1px solid var(--border);
  border-radius: var(--radius-control, 6px);
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: #fff;
  outline: none;
}
.date-input:focus {
  border-color: var(--primary);
}
.active-period-badge {
  font-size: 11px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--info-soft, #EFF6FF);
  color: var(--info, #2563EB);
  border: 1px solid #bfdbfe;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tab-filter-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
}
.filter-chip {
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.filter-chip:hover {
  background: var(--surface-muted);
  color: var(--text);
}
.filter-chip.active {
  background: var(--text);
  border-color: var(--text);
  color: #fff;
  font-weight: 600;
}


/* ==========================================================================
   PERBAIKAN TATA LETAK IKON & WARNA TABEL (ESTAMA STANDAR)
   ========================================================================== */

/* 1. Ikon dan teks selalu sejajar horizontal di sebelahnya (bukan di atas / di bawah) */
svg.lucide,
i[data-lucide],
.lucide,
i.w-3\.5, i.w-4, i.w-5,
svg.w-3\.5, svg.w-4, svg.w-5 {
  display: inline-block !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

.card-title,
.card-header .card-title,
.ui-section-title,
.page-title,
.dt-th-label,
.btn,
.dt-toolbtn,
.nav-link,
.chip,
.badge,
.tab-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.25 !important;
}

.dt-th-label {
  gap: 5px !important;
}

.btn,
.dt-toolbtn {
  gap: 6px !important;
}

.chip,
.badge {
  gap: 4px !important;
}

/* 2. Tabel berlatar belakang permukaan standar (var(--surface), bukan hardcoded #ffffff) */
#app table,
#modal table,
#uiFormDrawer table,
#uiDrawer table,
.ui-drawer table,
.dt-table,
table.table {
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

#app table tbody,
#modal table tbody,
#uiFormDrawer table tbody,
#uiDrawer table tbody,
.ui-drawer table tbody,
.dt-table tbody,
table.table tbody {
  background-color: var(--surface) !important;
}

#app table tbody tr,
#modal table tbody tr,
#uiFormDrawer table tbody tr,
#uiDrawer table tbody tr,
.ui-drawer table tbody tr,
.dt-table tbody tr,
table.table tbody tr {
  background-color: var(--surface) !important;
}

#app table tbody td,
#modal table tbody td,
#uiFormDrawer table tbody td,
#uiDrawer table tbody td,
.ui-drawer table tbody td,
.dt-table tbody td,
table.table tbody td {
  background-color: var(--surface) !important;
  color: inherit;
}

#app table tbody td.sticky-col,
#modal table tbody td.sticky-col,
#uiFormDrawer table tbody td.sticky-col,
#uiDrawer table tbody td.sticky-col,
.ui-drawer table tbody td.sticky-col,
.dt-table tbody td.sticky-col,
table.table tbody td.sticky-col {
  background-color: var(--surface) !important;
}

/* 3. Hanya baris yang sedang disentuh kursor (hover) yang berubah warna ke surface-subtle */
#app table:not(.inv-table):not(.fb-table) tbody tr:hover td,
#modal table:not(.inv-table):not(.fb-table) tbody tr:hover td,
#uiFormDrawer table:not(.inv-table):not(.fb-table) tbody tr:hover td,
#uiDrawer table:not(.inv-table):not(.fb-table) tbody tr:hover td,
.ui-drawer table:not(.inv-table):not(.fb-table) tbody tr:hover td,
.dt-table tbody tr:hover td,
table.table tbody tr:hover td,
.dt-table tbody tr.dt-row-clickable:hover td {
  background-color: var(--surface-subtle) !important;
}

#app table:not(.inv-table):not(.fb-table) tbody tr:hover td.sticky-col,
#modal table:not(.inv-table):not(.fb-table) tbody tr:hover td.sticky-col,
#uiFormDrawer table:not(.inv-table):not(.fb-table) tbody tr:hover td.sticky-col,
#uiDrawer table:not(.inv-table):not(.fb-table) tbody tr:hover td.sticky-col,
.ui-drawer table:not(.inv-table):not(.fb-table) tbody tr:hover td.sticky-col,
.dt-table tbody tr:hover td.sticky-col,
table.table tbody tr:hover td.sticky-col {
  background-color: var(--surface-subtle) !important;
}

/* 4. Card penampung tabel dan wrapper tabel selalu berlatar surface */
.card .card.dt-card-shell,
.card .dt-table-anchor .card,
.dt-card-shell,
.table-wrap,
.dt-table-wrap {
  background-color: var(--surface) !important;
}

/* 5. Tabel di dalam Drawer Estama: struktur, spasi, dan ritme baca rapi */
#uiFormDrawer table,
#uiDrawer table,
.ui-drawer table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background-color: var(--surface) !important;
  color: var(--text) !important;
}

#uiFormDrawer table thead th,
#uiDrawer table thead th,
.ui-drawer table thead th {
  padding: 8px 12px !important;
  font-size: var(--fs-caption, 12px) !important;
  font-weight: 600 !important;
  color: var(--text-secondary, #64748b) !important;
  background-color: var(--surface-subtle, #f8fafc) !important;
  border-bottom: 1px solid var(--border, #e2e8f0) !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

#uiFormDrawer table tbody td,
#uiDrawer table tbody td,
.ui-drawer table tbody td {
  height: 40px;
  padding: 8px 12px !important;
  color: var(--text, #0f172a) !important;
  border-bottom: 1px solid var(--border, #e2e8f0) !important;
  font-size: var(--fs-secondary, 13px) !important;
  vertical-align: middle !important;
  background-color: var(--surface, #ffffff) !important;
}

#uiFormDrawer table tbody tr:last-child td,
#uiDrawer table tbody tr:last-child td,
.ui-drawer table tbody tr:last-child td {
  border-bottom: 0 !important;
}

#uiFormDrawer table tbody tr:hover td,
#uiDrawer table tbody tr:hover td,
.ui-drawer table tbody tr:hover td {
  background-color: var(--surface-subtle, #f8fafc) !important;
}

/* ====================================================================
   LAPIS B — TABEL UMUM DI HALAMAN PENUH, OPSI B3 "BARIS SELANG-SELING"
   Keputusan pemilik 28 Okt 2026: B3, bukan B1. Pemisah antar baris di dalam
   tabel DIHAPUS; yang memisahkan baris adalah latar baris genap. Yang tinggal
   hanya dua garis: satu di bawah kepala tabel dan satu di baris terakhir.

   Alasannya: garis rambut di setiap baris, pada tabel tujuh sampai dua belas
   kolom, menghasilkan kotak-kotak kecil di setiap sel. Tanpa garis dalam,
   mata mengikuti pita baris, bukan kisi.

   Hanya menyentuh tabel renderer bersama (.dt-table); tabel cetak
   (.fb-table/.inv-table/.coa-table) dan kartu HP tidak ikut berubah.
   ==================================================================== */
/* B3 berlaku untuk SEMUA tabel layar, bukan hanya tabel daftar (.dt-table).
   Tabel di halaman detail memakai kelas .table-xs dan sebelumnya tertinggal:
   kepalanya masih abu dengan garis bayangan, barisnya masih bergaris satu-satu.
   Tabel cetak (invoice, formula baku, COA) tetap dikecualikan. */
#app table:not(.inv-table):not(.fb-table):not(.coa-table) thead th,
#modal table:not(.inv-table):not(.fb-table):not(.coa-table) thead th {
  /* TANPA border-top. Di atas kepala tabel daftar sudah ada .dt-toolbar
     dengan garis bawahnya sendiri, dan keduanya bertemu di y yang sama
     (terukur: toolbar 188 px, th 188 px) sehingga terbaca sebagai dua garis
     yang menabrak. Satu garis di bawah toolbar sudah cukup. */
  border-top: 0 !important;
  border-bottom: var(--border-w) solid var(--border-strong) !important;
  /* Warna solid, bukan transparan. Kepala tabel menempel (position: sticky);
     kalau latarnya transparan, baris yang digulir tembus pandang di balik
     judul kolom. Juga bukan --surface-subtle seperti gaya lama: dengan pita
     baris genap, kepala abu membuat baris pertama terlihat seperti pita. */
  background: var(--surface) !important;
  box-shadow: none !important;
  font-weight: var(--fw-medium) !important;
}
#app table:not(.inv-table):not(.fb-table):not(.coa-table) tbody td,
#modal table:not(.inv-table):not(.fb-table):not(.coa-table) tbody td {
  /* B3: tanpa garis pemisah di dalam tabel. */
  border-bottom: 0 !important;
}
#app table.dt-table tbody td { height: calc(var(--sp-6) + var(--sp-1)) !important; }
#app table:not(.inv-table):not(.fb-table):not(.coa-table) tbody tr:nth-child(even) td,
#modal table:not(.inv-table):not(.fb-table):not(.coa-table) tbody tr:nth-child(even) td {
  background: var(--surface-subtle) !important;
}
/* Baris terakhir tetap diberi satu garis penutup supaya tabel punya ujung. */
#app table:not(.inv-table):not(.fb-table):not(.coa-table) tbody tr:last-child td,
#modal table:not(.inv-table):not(.fb-table):not(.coa-table) tbody tr:last-child td {
  border-bottom: var(--border-w) solid var(--hairline) !important;
}
/* Sorot kursor memakai --surface-muted, BUKAN --surface-subtle. Kalau sama
   dengan baris genap, menunjuk baris genap tidak mengubah apa pun dan user
   kehilangan balasan bahwa kursor sedang di baris itu.
   Bentuk :not(...) di sini WAJIB: aturan sorot lama di berkas ini memakai
   bentuk itu, jadi tanpa :not di sini aturan lama yang menang (terukur:
   sorotan tetap --surface-subtle dan tidak terlihat di baris genap). */
#app table:not(.inv-table):not(.fb-table):not(.coa-table) tbody tr:hover td,
#modal table:not(.inv-table):not(.fb-table):not(.coa-table) tbody tr:hover td {
  background: var(--surface-muted) !important;
}

/* Kolom menempel (Aksi, dan kolom centang) IKUT pita. Tanpa dua aturan ini,
   kolom Aksi tetap putih di baris genap: pitanya terputus tepat di kolom
   terakhir, dan mata membacanya sebagai dua tabel. Terukur pada tangkapan
   /order: sel Aksi baris 2 putih, sementara sel lain sudah berpita. */
#app table:not(.inv-table):not(.fb-table):not(.coa-table) tbody tr:nth-child(even) td.sticky-col,
#app table:not(.inv-table):not(.fb-table):not(.coa-table) tbody tr:nth-child(even) td.dt-th-check,
#modal table:not(.inv-table):not(.fb-table):not(.coa-table) tbody tr:nth-child(even) td.sticky-col {
  background: var(--surface-subtle) !important;
}
#app table:not(.inv-table):not(.fb-table):not(.coa-table) tbody tr:hover td.sticky-col,
#app table:not(.inv-table):not(.fb-table):not(.coa-table) tbody tr:hover td.dt-th-check,
#modal table:not(.inv-table):not(.fb-table):not(.coa-table) tbody tr:hover td.sticky-col {
  background: var(--surface-muted) !important;
}

/* --- Kerapatan B1, tiga tambahan (keputusan pemilik 28 Okt 2026: "pakai B1
   semua"). Garis rambut saja belum cukup untuk dua tabel terlebar: Pembelian
   (+392 px) dan Plan Order (+475 px). Tiga tambahan ini yang membuat keduanya
   muat, dan semuanya tetap di dalam gagasan B1: rapat, bukan berkotak.

   1. Jarak sel 12 px ke 8 px. Terukur memangkas 128 px pada tabel 16 kolom,
      tanpa satu huruf pun hilang.
   2. Sel teks boleh membungkus. Sebelumnya satu kalimat panjang di satu baris
      memaksa seluruh kolom selebar kalimat itu. Tetap `break-word`, bukan
      `anywhere`: nomor dokumen jangan pecah per karakter (pelajaran Lapis A).
   3. Kolom Aksi tidak lagi dipatok lebar tetap. Isinya kini satu tombol dan
      satu menu, jadi patokan lama menyisakan ruang kosong di semua tabel. */
#app table.dt-table thead th,
#app table.dt-table tbody td {
  padding-left: var(--sp-2) !important;
  padding-right: var(--sp-2) !important;
}
#app table.dt-table tbody td {
  white-space: normal !important;
  overflow-wrap: break-word;
}
#app table.dt-table th.sticky-col,
#app table.dt-table td.sticky-col { min-width: 0; }
#app table.dt-table td.sticky-col .dt-row-actions { min-width: 0; }

/* Lebar kolom tetap untuk dua tabel terpadat (Pembelian, Plan Order).
   Dengan `table-layout: fixed`, pembagian lebar ditentukan di sini, bukan
   dihitung peramban dari isi; akibatnya kolom Status tidak lagi memakan
   171 px sementara Nilai PO tinggal 111 px. Nilainya persen, jadi tabel
   tetap menyesuaikan diri saat jendela dikecilkan. */
#app table.dt-table.dt-fixed { table-layout: fixed; }
/* Kolom Aksi ikut ditulis lebarnya: kalau satu kolom saja dibiarkan tanpa
   lebar, peramban membagikan sisa ruang ke SEMUA kolom dan semua angka
   persen di atas jadi meleset (terukur: Item Bahan 217 px menjadi 160 px). */
#app table.dt-table.dt-fixed th.sticky-col { width: 10%; }
/* Kolom centang (tabel dengan aksi massal) juga ikut lebar tetap. */
#app table.dt-table.dt-fixed .dt-th-check { width: 3%; }
/* Di tabel berlebar tetap, badge/chip yang lebih lebar dari selnya dulu
   terpotong mentah ("Menunggu perset"). Sekarang dipangkas dengan elipsis
   di dalam selnya sendiri. */
#app table.dt-table.dt-fixed td .badge,
#app table.dt-table.dt-fixed td .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* Chip di tabel berlebar tetap harus bisa memangkas teksnya sendiri dengan
   elipsis; inline-flex tidak melakukannya, jadi di sini chip dijadikan
   inline-block (tidak ada chip berikon di tabel-tabel ini). */
#app table.dt-table.dt-fixed td .chip { display: inline-block !important; vertical-align: middle; }
#app table.dt-table.dt-fixed .dt-w5 { width: 5%; }
#app table.dt-table.dt-fixed .dt-w6 { width: 6%; }
#app table.dt-table.dt-fixed .dt-w7 { width: 7%; }
#app table.dt-table.dt-fixed .dt-w8 { width: 8%; }
#app table.dt-table.dt-fixed .dt-w9 { width: 9%; }
#app table.dt-table.dt-fixed .dt-w10 { width: 10%; }
#app table.dt-table.dt-fixed .dt-w11 { width: 11%; }
#app table.dt-table.dt-fixed .dt-w12 { width: 12%; }
#app table.dt-table.dt-fixed .dt-w13 { width: 13%; }
#app table.dt-table.dt-fixed .dt-w14 { width: 14%; }
#app table.dt-table.dt-fixed .dt-w15 { width: 15%; }
#app table.dt-table.dt-fixed .dt-w16 { width: 16%; }
#app table.dt-table.dt-fixed .dt-w17 { width: 17%; }
#app table.dt-table.dt-fixed .dt-w18 { width: 18%; }
#app table.dt-table.dt-fixed .dt-w20 { width: 20%; }
#app table.dt-table.dt-fixed .dt-w21 { width: 21%; }
#app table.dt-table.dt-fixed .dt-w22 { width: 22%; }

/* ====================================================================
   LAPIS A — TABEL DI DALAM DRAWER DAN POP-UP
   Ruang di drawer 460 px (bawaan), 560 px (formulir), 720 px (besar).
   Tabel daftar tujuh kolom berisi 594 px, jadi di dua ukuran tersempit ia
   menggulir mendatar: terukur +167 px pada 460 dan +67 px pada 560.
   Penyebabnya bukan min-width, melainkan sel yang dipaksa satu baris.
   Perbaikan: di dalam drawer/pop-up sel boleh membungkus, huruf turun satu
   tingkat, jarak dirapatkan, dan pemisah memakai garis rambut.
   Hasil ukur: 0 px gulir mendatar pada 460, 560, dan 720.
   ==================================================================== */
#uiFormDrawer table tbody td,
#uiDrawer table tbody td,
.ui-drawer table tbody td,
#modal table tbody td {
  /* Sel boleh membungkus supaya tabel tidak perlu digeser. JANGAN pakai
     overflow-wrap:anywhere di sini: nomor dokumen tanpa spasi jadi pecah
     per karakter (terukur: "SO-2610-001" pecah 7 baris pada kolom 37 px,
     tinggi baris meledak ke 130 px). Kata utuh dibiarkan utuh. */
  white-space: normal !important;
  overflow-wrap: break-word;
}
/* Utilitas .whitespace-nowrap dari Tailwind KALAH oleh aturan
   `white-space: normal !important` di atas, jadi nomor batch dan nomor
   dokumen di dalam pop-up tetap terbelah dua baris (terukur: "B261012-01"
   pecah jadi "B261012-" + "01"). Modul yang menempelkan kelas itu tahu
   isinya tidak boleh pecah, jadi di pop-up kelas itu dikembalikan haknya. */
#modal table thead th.whitespace-nowrap,
#modal table tbody td.whitespace-nowrap { white-space: nowrap !important; }

/* Tabel buku mutasi barang jadi di pop-up: lebar kolom ditetapkan supaya
   "Qty (pcs)" dan "Ref" tidak turun baris dan barisnya rata. */
#modal table.mutasi-produk-table { table-layout: fixed; }
#modal table.mutasi-produk-table col:nth-child(1) { width: 15%; }
#modal table.mutasi-produk-table col:nth-child(2) { width: 8%; }
#modal table.mutasi-produk-table col:nth-child(3) { width: 12%; }
#modal table.mutasi-produk-table col:nth-child(4) { width: 7%; }
#modal table.mutasi-produk-table col:nth-child(5) { width: 7%; }
#modal table.mutasi-produk-table col:nth-child(6) { width: 13%; }
#modal table.mutasi-produk-table col:nth-child(7) { width: 16%; }
#modal table.mutasi-produk-table col:nth-child(8) { width: 22%; }
#modal table.mutasi-produk-table thead th { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }
#modal table.mutasi-produk-table tbody td { padding-left: var(--sp-2) !important; padding-right: var(--sp-2) !important; }

#uiFormDrawer table thead th,
#uiDrawer table thead th,
.ui-drawer table thead th,
#modal table thead th {
  white-space: normal !important;
  line-height: 1.3;
  font-weight: var(--fw-medium) !important;
  letter-spacing: 0 !important;
  border-bottom: var(--border-w) solid var(--border-strong) !important;
}
#uiFormDrawer table tbody td,
#uiDrawer table tbody td,
.ui-drawer table tbody td,
#modal table tbody td {
  height: auto !important;
  min-height: var(--sp-6);
  padding: var(--sp-1) var(--sp-2) !important;
  font-size: var(--fs-caption) !important;
  line-height: 1.45;
  border-bottom: var(--border-w) solid var(--hairline) !important;
}
#uiFormDrawer table thead th,
#uiDrawer table thead th,
.ui-drawer table thead th,
#modal table thead th {
  height: var(--sp-6);
  padding: var(--sp-1) var(--sp-2) !important;
  font-size: var(--fs-2xs) !important;
  color: var(--text-muted) !important;
  /* Sama alasannya dengan tabel di halaman: kepala tabel menempel, jadi
     latarnya harus solid supaya baris yang digulir tidak tembus di baliknya. */
  background: var(--surface) !important;
}

/* --------------------------------------------------------------------
   LAPIS A, OPSI A3 "KARTU MENGAMBANG" + BARIS SELANG-SELING
   Keputusan pemilik 28 Okt 2026: A3 selang-seling untuk tabel di dalam
   drawer dan pop-up.

   Sebelumnya tabel di drawer hanya punya garis rambut antar sel dan
   pembungkusnya nyaris tak terlihat, sehingga tabel menyatu dengan isi
   drawer dan tidak jelas di mana datanya mulai dan berakhir.

   Yang dipasang sekarang:
   1. Pembungkus tabel (kartu) diberi bingkai --edge, bayangan sedang, dan
      sudut kartu + 2 px, supaya ia terbaca sebagai benda tersendiri di atas
      latar drawer.
   2. Isi tabel memakai pita: baris genap berlatar --surface-subtle, tanpa
      garis pemisah di dalam.
   3. Sorot kursor memakai --surface-muted, bukan --surface-subtle, sebab
      kalau sama dengan pita baris genap sorotan itu tidak terlihat.

   Tabel cetak (invoice, formula baku, COA) sengaja dikecualikan: kertas
   tidak mengenal bayangan, dan pita abu memboroskan tinta.
   -------------------------------------------------------------------- */
#uiDrawerBody .card:has(.table-wrap),
#uiFormDrawerBody .card:has(.table-wrap),
.ui-drawer-body .card:has(.table-wrap),
#modal .card:has(.table-wrap) {
  border: var(--border-w) solid var(--edge) !important;
  border-radius: calc(var(--radius-card) + 2px) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}
#uiDrawerBody .card:has(.table-wrap) > .card-header,
#uiFormDrawerBody .card:has(.table-wrap) > .card-header,
.ui-drawer-body .card:has(.table-wrap) > .card-header,
#modal .card:has(.table-wrap) > .card-header {
  background: var(--surface) !important;
  border-bottom: var(--border-w) solid var(--hairline) !important;
}
/* Pembungkus tabel tanpa kartu (sebagian drawer menaruh .table-wrap
   langsung) tetap mendapat bingkai yang sama supaya tidak ada dua gaya. */
#uiDrawerBody .table-wrap:not(.card .table-wrap),
#uiFormDrawerBody .table-wrap:not(.card .table-wrap),
.ui-drawer-body .table-wrap:not(.card .table-wrap),
#modal .table-wrap:not(.card .table-wrap) {
  border: var(--border-w) solid var(--edge) !important;
  border-radius: calc(var(--radius-card) + 2px) !important;
  box-shadow: var(--shadow-md) !important;
  overflow: hidden;
}

#uiFormDrawer table tbody td,
#uiDrawer table tbody td,
.ui-drawer table tbody td,
#modal table tbody td {
  /* A3: tanpa garis pemisah di dalam tabel; pita baris yang memisahkan. */
  border-bottom: 0 !important;
}
#uiFormDrawer table tbody tr:nth-child(even) td,
#uiDrawer table tbody tr:nth-child(even) td,
.ui-drawer table tbody tr:nth-child(even) td,
#modal table tbody tr:nth-child(even) td {
  background: var(--surface-subtle) !important;
}
#uiFormDrawer table tbody tr:last-child td,
#uiDrawer table tbody tr:last-child td,
.ui-drawer table tbody tr:last-child td,
#modal table tbody tr:last-child td {
  border-bottom: 0 !important;
}
/* Sorot kursor: satu tingkat lebih gelap dari pita, bukan sama dengannya. */
#uiFormDrawer table tbody tr:hover td,
#uiDrawer table tbody tr:hover td,
.ui-drawer table tbody tr:hover td,
#modal table tbody tr:hover td {
  background: var(--surface-muted) !important;
}
/* Tabel cetak di dalam drawer tidak ikut dipita. */
#uiDrawer table.inv-table tbody td,
#uiDrawer table.fb-table tbody td,
#uiDrawer table.coa-table tbody td,
#uiFormDrawer table.inv-table tbody td,
#uiFormDrawer table.fb-table tbody td,
#uiFormDrawer table.coa-table tbody td,
#modal table.inv-table tbody td,
#modal table.fb-table tbody td,
#modal table.coa-table tbody td {
  background: transparent !important;
}

/* Dukungan Dark Mode menyeluruh untuk Drawer & Kartu Tabel */
html.dark #uiFormDrawer .ui-drawer-panel,
html.dark #uiDrawer .ui-drawer-panel,
html.dark .ui-drawer .ui-drawer-panel {
  background-color: var(--surface, #22272F) !important;
  color: var(--text, #D5DAD8) !important;
  border-left-color: var(--border, #32383F) !important;
}

html.dark #uiFormDrawer .ui-drawer-head,
html.dark #uiDrawer .ui-drawer-head,
html.dark .ui-drawer .ui-drawer-head {
  background-color: var(--surface, #22272F) !important;
  border-bottom-color: var(--border, #32383F) !important;
}

html.dark #uiFormDrawer .form-foot,
html.dark #uiDrawer .form-foot,
html.dark #uiFormDrawer .ui-drawer-foot,
html.dark #uiDrawer .ui-drawer-foot {
  background-color: var(--surface, #22272F) !important;
  border-top-color: var(--border, #32383F) !important;
}

html.dark #uiFormDrawer .card,
html.dark #uiDrawer .card,
html.dark .ui-drawer .card {
  background-color: var(--surface, #22272F) !important;
  border-color: var(--border, #32383F) !important;
  color: var(--text, #D5DAD8) !important;
}

html.dark #uiFormDrawer .card-header,
html.dark #uiDrawer .card-header,
html.dark .ui-drawer .card-header {
  background-color: var(--surface, #22272F) !important;
  border-bottom-color: var(--border, #32383F) !important;
  color: var(--text, #D5DAD8) !important;
}

html.dark #uiFormDrawer table,
html.dark #uiDrawer table,
html.dark .ui-drawer table,
html.dark #uiFormDrawer table tbody,
html.dark #uiDrawer table tbody,
html.dark #uiFormDrawer table tbody tr,
html.dark #uiDrawer table tbody tr,
html.dark #uiFormDrawer table tbody td,
html.dark #uiDrawer table tbody td {
  background-color: var(--surface, #22272F) !important;
  color: var(--text, #D5DAD8) !important;
  border-color: var(--border, #32383F) !important;
}

html.dark #uiFormDrawer table thead th,
html.dark #uiDrawer table thead th,
html.dark .ui-drawer table thead th {
  background-color: var(--surface-muted, #1E232A) !important;
  color: var(--text-secondary, #A4ADA9) !important;
  border-color: var(--border, #32383F) !important;
}

html.dark #uiFormDrawer table tbody tr:hover td,
html.dark #uiDrawer table tbody tr:hover td {
  background-color: var(--surface-subtle, #2A3038) !important;
}

/* Kartu KPI di dalam drawer. Sebelum 28 Okt 2026 warnanya ditulis sebagai
   style="background:…;border-color:…" pada 28 tempat di analisa-drawer-bahan.js,
   sehingga tidak bisa diubah lewat design system. Sekarang kelas yang mengatur. */
.drawer-kpi-card { background: var(--surface-subtle); border-color: var(--border); }
.drawer-kpi-card .drawer-kpi-label { color: var(--text-secondary); }
.drawer-kpi-card .drawer-kpi-value { color: var(--text); }

html.dark .drawer-kpi-card {
  background-color: var(--surface-subtle, #2A3038) !important;
  border-color: var(--border, #32383F) !important;
  color: var(--text, #D5DAD8) !important;
}

/* =========================================================
   P14: REMINDER KONTEKSTUAL & PERLU PERHATIAN ESTAMA
   ========================================================= */
.reminder-header-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  font-size: var(--fs-caption, 12px);
  font-weight: 500;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid var(--border, #cbd5e1);
  background: var(--surface, #ffffff);
  color: var(--text, #334155);
  cursor: pointer;
  transition: all 0.15s ease;
  line-height: 1;
  vertical-align: middle;
}
.reminder-header-btn:hover {
  background: var(--surface-subtle, #f1f5f9);
  border-color: var(--primary, #059669);
  color: var(--primary, #059669);
}
html.dark .reminder-header-btn {
  background: var(--surface, #22272F);
  border-color: var(--border, #32383F);
  color: var(--text, #D5DAD8);
}
html.dark .reminder-header-btn:hover {
  background: #2a313a;
  border-color: var(--primary, #10b981);
  color: var(--primary, #10b981);
}
.reminder-header-btn.has-active {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.08);
  color: #b45309;
}
html.dark .reminder-header-btn.has-active {
  border-color: #d97706;
  background: rgba(245, 158, 11, 0.15);
  color: #fbbf24;
}

.reminder-item-card {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: var(--radius-card, 8px);
  background: var(--surface, #ffffff);
  padding: 12px 14px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.reminder-item-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
html.dark .reminder-item-card {
  background: var(--surface, #22272F);
  border-color: var(--border, #32383F);
}
.reminder-item-card.is-done {
  opacity: 0.65;
  background: var(--surface-subtle, #f8fafc);
}
html.dark .reminder-item-card.is-done {
  background: #1e2329;
}

.prompt-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface-subtle, #f1f5f9);
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  transition: all 0.12s ease;
}
.prompt-chip:hover {
  border-color: var(--primary, #059669);
  color: var(--primary, #059669);
  background: rgba(16, 185, 129, 0.08);
}
html.dark .prompt-chip {
  background: #282f38;
  border-color: var(--border, #32383F);
  color: #94a3b8;
}



/* ESTAMA HEADER TITLE & REMINDER SIDE-BY-SIDE GUARANTEE */
.page-header > .min-w-0,
.header-main > .min-w-0 {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: nowrap !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.page-header .page-title,
.header-main .page-title,
#app .page-title {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--sp-2, 8px) !important;
  margin: 0 !important;
  flex-shrink: 0 !important;
  width: auto !important;
}

/* Tombol pengingat: dulu transition dimatikan total (!important) supaya
   tata letaknya tidak bergeser. Efek sampingnya, pergantian warna saat kursor
   lewat terjadi dalam satu frame dan terbaca seperti berkedip. Sekarang hanya
   warna yang diberi transisi singkat; ukuran, posisi, dan bayangan tetap
   tidak ikut beranimasi, jadi tidak ada pergeseran tata letak. */
#tblReminderBtn,
#detailReminderBtn,
[data-rem-btn],
.btn-reminder {
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}

/* PERATAAN VERTIKAL DAN HORIZONTAL DRAWER PENGINGAT (ESTAMA DESIGN SYSTEM) */
#uiReminderDrawer .ui-drawer-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 56px !important;
  padding: 14px 20px !important;
  box-sizing: border-box !important;
}
#uiReminderDrawer .ui-drawer-heading {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
#uiReminderDrawer .ui-drawer-title {
  margin: 0 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
}
#uiReminderDrawer .ui-drawer-head .icon-btn {
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
#uiReminderDrawer .reminder-tab-bar {
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--surface-muted) !important;
  box-sizing: border-box !important;
}
#uiReminderDrawer .reminder-tab-bar .seg {
  width: 100% !important;
  display: flex !important;
}
#uiReminderDrawer .reminder-tab-bar .seg-btn {
  flex: 1 1 0% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}
#uiReminderDrawer #reminderDrawerBody {
  padding: 20px !important;
  box-sizing: border-box !important;
}
#uiReminderDrawer .ui-drawer-foot {
  padding: 14px 20px !important;
  box-sizing: border-box !important;
}


/* ============================================================
   PELENGKAP DESIGN SYSTEM — 28 Okt 2026
   ------------------------------------------------------------
   Sejak 28 Okt 2026 tailwind.css DIBANGUN ULANG dari sumber (v3.4.19,
   tema & pemindaian yang sama, safelist berisi seluruh kelas build lama
   sehingga build baru = superset). Karena itu utility biasa — inline-block,
   mt-0.5, clamp-*, sm:grid-cols-2, tracking-wider, hover:*, dark:* —
   TIDAK lagi ditulis di sini: sudah dihasilkan Tailwind.

   Yang tersisa di blok ini hanya dua hal yang memang tidak bisa:
     1. UTILITAS KUSTOM yang bukan bagian Tailwind
        (.clamp-1/.clamp-2/.text-2xs/.text-primary);
     2. PENYELARAS TOKEN — warna yang WAJIB ikut tema. Teks gelap literal
        (#0f172a) tidak terbaca di tema gelap, sedangkan token berubah
        sendiri. Untuk warna dekoratif (garis/latar) dipakai nilai Tailwind.

   Dijaga oleh tools/uji-kepatuhan.mjs.
   ============================================================ */

/* --- 1. utilitas kustom --- */
.clamp-1, .clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.text-2xs { font-size: 0.625rem; line-height: 1.4; }
/* teks untuk pembaca layar saja — dipakai saat makna sebuah ikon perlu
   diucapkan (mis. centang "selesai") tanpa menambah teks yang terlihat. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.text-primary { color: var(--primary); }

/* --- 2. penyelaras token (ikut tema terang/gelap) --- */
.text-slate-900 { color: var(--text); }
.text-blue-600 { color: var(--info); }
.text-emerald-500 { color: var(--success); }
.text-rose-800 { color: var(--danger); }
/* Tailwind menghasilkan .text-purple-700 dengan hex literal #7E22CE — tidak
   ikut tema gelap. Aturan ini menimpanya (berkas ini dimuat sesudah
   tailwind.css) supaya warnanya mengikuti token. */
.text-purple-700 { color: var(--purple); }

/* --- 3. varian design system yang tidak ada padanannya di Tailwind --- */
.badge-primary { background: var(--tone-primary-bg) !important; color: var(--tone-primary-fg) !important; }
/* Sampai 28 Okt 2026 ada DUA nama untuk warna yang sama: .badge-primary dan
   .badge-accent sama-sama hijau, sehingga badge "Reguler (pcs)" dan
   "Scale Up (g)" tak terbedakan. Sekarang:
     · Reguler (pcs) → .badge-primary  (hijau, token primary)
     · Scale Up (g)  → .badge-purple   (ungu, sejalan dengan angka
                                        "Target Scale Up" yang ungu)
   .badge-accent dihapus; seluruh 5 pemakaian di markup diganti .badge-purple. */
/* Ungu — kini token resmi (lihat --purple-* di blok token). */
.badge-purple { background: var(--tone-purple-bg) !important; color: var(--tone-purple-fg) !important; }
.chip-info { background: var(--tone-info-bg) !important; color: var(--tone-info-fg) !important; }
.chip-warning { background: var(--tone-warning-bg) !important; color: var(--tone-warning-fg) !important; }
.chip-neutral { background: var(--tone-neutral-bg) !important; color: var(--tone-neutral-fg) !important; }

/* Detail penerimaan: tombol COA dan aksi lain membungkus pada layar kecil. */
@media (max-width: 767px) { .page-header > .rcv-detail-actions { flex-wrap: wrap; min-width: 0; } }

/* IPC QC: satu formulir dengan kartu parameter yang mudah dibaca di HP. */
#uiFormDrawer .ipc-drawer { display:grid; gap:16px; min-width:0; }
#uiFormDrawer .ipc-context { border:1px solid var(--border); border-radius:12px; padding:16px; background:var(--surface); }
#uiFormDrawer .ipc-context-label { display:block; font-size:11px; font-weight:700; letter-spacing:.07em; color:var(--text-muted); }
#uiFormDrawer .ipc-context-main { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-top:6px; }
#uiFormDrawer .ipc-context-main strong { overflow-wrap:anywhere; font-size:16px; }
#uiFormDrawer .ipc-context p { margin:5px 0 0; color:var(--text-muted); font-size:13px; overflow-wrap:anywhere; }
#uiFormDrawer .ipc-intro h3 { margin:0; font-size:15px; font-weight:650; }
#uiFormDrawer .ipc-intro p { margin:4px 0 0; font-size:13px; color:var(--text-muted); }
#uiFormDrawer .ipc-parameters { display:grid; gap:10px; }
#uiFormDrawer .ipc-parameter { min-width:0; padding:14px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
#uiFormDrawer .ipc-parameter:nth-child(even) { background:var(--surface-muted, var(--surface)); }
#uiFormDrawer .ipc-parameter-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
#uiFormDrawer .ipc-parameter-head h3 { margin:0; font-size:14px; font-weight:650; }
#uiFormDrawer .ipc-parameter-head p { margin:3px 0 0; font-size:12px; color:var(--text-muted); }
#uiFormDrawer .ipc-target { font-size:12px; color:var(--text-muted); overflow-wrap:anywhere; }
#uiFormDrawer .ipc-trio { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:12px; }
#uiFormDrawer .ipc-trio input { width:100%; min-width:0; }
#uiFormDrawer .ipc-notes { min-width:0; }
#uiFormDrawer .ipc-optional { color:var(--text-muted); font-weight:400; }
#uiFormDrawer .ipc-history { border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
#uiFormDrawer .ipc-history summary { cursor:pointer; font-size:13px; font-weight:600; }
#uiFormDrawer .ipc-history-body { display:grid; gap:8px; margin-top:10px; overflow-wrap:anywhere; }
#uiFormDrawer .ipc-foot { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; width:100%; }
#uiFormDrawer .ipc-foot .btn { min-width:0; justify-content:center; }
@media (max-width:520px) { #uiFormDrawer .ipc-foot { grid-template-columns:repeat(2,minmax(0,1fr)); } }

@media (max-width:767px) {
  #app .produksi-page .page-header > .flex { flex-wrap:wrap; min-width:0; }
}
/* QC: kartu tenang dan sejajar dengan formulir lain, tanpa warna khusus. */
#uiFormDrawer .qc-validation { display:grid; gap:14px; min-width:0; }
#uiFormDrawer .qc-validation-card, #uiFormDrawer .qc-doc-link { min-width:0; padding:16px; border:1px solid var(--border); border-radius:12px; background:var(--surface); }
#uiFormDrawer .qc-validation-card h3, #uiFormDrawer .qc-doc-link strong { margin:0; font-size:14px; font-weight:650; }
#uiFormDrawer .qc-validation-card > p, #uiFormDrawer .qc-doc-link p { margin:4px 0 0; font-size:12px; color:var(--text-muted); }
#uiFormDrawer .qc-qty { display:flex; align-items:baseline; gap:5px; margin-top:12px; }
#uiFormDrawer .qc-qty strong { font-size:24px; line-height:1; }
#uiFormDrawer .qc-qty span { font-size:13px; color:var(--text-muted); }
#uiFormDrawer .qc-doc-link { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; }
#uiFormDrawer .qc-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#uiFormDrawer .qc-metric { min-width:0; border:1px solid var(--border); border-radius:8px; padding:10px; overflow-wrap:anywhere; }
#uiFormDrawer .qc-foot-three { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; }
#uiFormDrawer .qc-foot-three .btn { min-width:0; justify-content:center; }
@media (max-width:520px) { #uiFormDrawer .qc-metrics { grid-template-columns:1fr; } }
/* Hindari notifikasi menutupi tombol footer drawer setelah aksi beruntun. */
body.form-drawer-open #toast { top:16px; bottom:auto !important; }
/* Posisi khusus QC yang sudah diuji tetap dipertahankan. */
body:has(#uiFormDrawer:not(.hidden) .ipc-drawer) #toast,
body:has(#uiFormDrawer:not(.hidden) .qc-validation) #toast,
body:has(#uiFormDrawer:not(.hidden) #psKembaliForm) #toast { top:auto; bottom:96px !important; }
@media (max-width:520px) {
  body:has(#uiFormDrawer:not(.hidden) .ipc-drawer) #toast,
  body:has(#uiFormDrawer:not(.hidden) .qc-validation) #toast,
  body:has(#uiFormDrawer:not(.hidden) #psKembaliForm) #toast { bottom:148px !important; }
}

/* Antrean Warehouse tetap terbaca saat tabel digeser di HP. */
#warehouseTable .wh-antrian-produk { min-width: 150px; }
#warehouseTable .wh-nama-produk { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: normal; }