/* ============================================================
   ARIES ONE — Base Stylesheet
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light;

  /* ── Permukaan ───────────────────────────────────────────────────── */
  --bg:            #f4f5f7;   /* latar halaman                          */
  --surface:       #ffffff;   /* kartu, modal, dropdown, input          */
  --surface-2:     #f8fafc;   /* card-header, readonly, hover baris     */
  --surface-3:     #f1f5f9;   /* thead, tombol tutup, badge abu         */
  --surface-4:     #e2e8f0;   /* hover tombol tutup                     */
  --border:        #dde1e7;
  --border-2:      #e5e7eb;   /* garis kartu & modal                    */
  --border-3:      #f0f2f5;   /* garis antar baris tabel                */

  /* ── Teks ────────────────────────────────────────────────────────── */
  --text:          #1e293b;
  --text-muted:    #5c6b80;
  --text-soft:     #475569;
  --text-label:    #374151;
  --text-dim:      #7c8ca1;
  --on-accent:     #ffffff;   /* teks di atas warna aksen pekat         */
  --on-accent-dim: rgba(255,255,255,.78); /* teks sekunder di atas latar gelap tetap */

  /* ── Aksen ───────────────────────────────────────────────────────── */
  --primary:       #2563eb;
  --primary-h:     #1d4ed8;
  --primary-soft:  #eff6ff;
  --primary-soft2: #dbeafe;
  --primary-brd:   #bfdbfe;
  --primary-ink:   #1d4ed8;   /* teks di atas --primary-soft            */
  --primary-dim:   #60a5fa;
  --row-hover:     #f0f7ff;

  --danger:        #dc2626;
  --danger-h:      #b91c1c;
  --danger-soft:   #fee2e2;
  --danger-soft2:  #fef2f2;
  --danger-brd:    #fca5a5;
  --danger-ink:    #b91c1c;

  --success:       #15803d;
  --success-soft:  #dcfce7;
  --success-soft2: #f0fdf4;
  --success-brd:   #22c55e;
  --success-ink:   #15803d;

  --warn:          #d97706;
  --warn-soft:     #fef3c7;
  --warn-soft2:    #fffbeb;
  --warn-brd:      #fde68a;
  --warn-ink:      #92400e;

  --purple-soft:   #ede9fe;
  --purple-brd:    #8b5cf6;
  --purple-ink:    #5b21b6;
  --slate-soft:    #f1f5f9;
  --slate-brd:     #94a3b8;
  --slate-ink:     #334155;

  /* ── Topbar & navigasi ───────────────────────────────────────────── */
  /* Dipisah dari --primary supaya tema bisa memakai warna topbar yang
     berbeda dari warna tombol utama (dipakai tema Navy & Army).        */
  --topbar-bg:     var(--primary);
  --topbar-fg:     #ffffff;
  --topbar-fg-dim: #ffffffcc;
  --topbar-hover:  rgba(255,255,255,.10);
  --topbar-active: rgba(255,255,255,.15);
  --topbar-line:   rgba(255,255,255,.8);

  /* ── Lain-lain ───────────────────────────────────────────────────── */
  --radius:        6px;

  /* ── Warna "solid": TETAP di semua tema ──────────────────────────
     Dipakai untuk latar pekat yang di atasnya selalu ada teks putih —
     header tabel laporan, badge status, pita judul.

     Kenapa tidak memakai --primary-ink / --warn-ink / --text saja?
     Karena variabel itu MEMBALIK antar tema: --warn-ink bernilai #92400e
     (cokelat tua) di tema terang tapi #fcd34d (kuning muda) di tema gelap.
     Sebagai warna TEKS itu benar — ia harus ikut membalik mengikuti latar
     lembutnya. Tapi sebagai LATAR, hasilnya teks putih di atas kuning muda
     alias tidak terbaca. Warna di bawah ini sengaja tidak ikut tema. */
  --solid-slate:  #1e293b;
  --solid-blue:   #1d4ed8;
  --solid-green:  #15803d;
  --solid-amber:  #92400e;
  --solid-red:    #b91c1c;
  --solid-purple: #5b21b6;

  --shadow:        0 1px 3px rgba(0,0,0,.1);
  --shadow-card:   0 2px 8px rgba(0,0,0,.07);
  --shadow-topbar: 0 2px 8px rgba(0,0,0,.22);
  --shadow-modal:  0 8px 30px rgba(0,0,0,.18);
  --overlay:       rgba(0,0,0,.45);
}

body {
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--text);
  min-height: var(--ao-tinggi-layar, 100vh);
}

/* ---- Topbar ---- */
.topbar {
  background: var(--topbar-bg);
  color: var(--topbar-fg);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 16px 0 0;
  height: 48px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--shadow-topbar);
}
.topbar-brand {
  font-weight: 700; font-size: 15px; letter-spacing: .5px;
  padding: 0 18px; display: flex; align-items: center;
  white-space: nowrap; flex-shrink: 0;
  color: var(--topbar-fg); text-decoration: none; cursor: pointer;
}
.topbar-brand:hover { opacity: .85; }
.topbar-right {
  display: flex; align-items: center; gap: 14px;
  font-size: 13px; flex-shrink: 0;
}
.topbar-right a { color: var(--topbar-fg-dim); text-decoration: none; }
.topbar-right a:hover { color: var(--topbar-fg); }
.hamburger {
  display: none; background: none; border: none;
  color: var(--topbar-fg); font-size: 20px; cursor: pointer; padding: 0 4px;
}

/* ---- Top Navigation ---- */
.topnav {
  display: flex; align-items: stretch; flex: 1;
  overflow: visible;
}
.tnav-item {
  position: relative; display: flex; align-items: stretch;
}
.tnav-link {
  display: flex; align-items: center; gap: 4px;
  padding: 0 14px; font-size: 13px; font-weight: 500;
  color: var(--topbar-fg-dim); text-decoration: none;
  cursor: pointer; white-space: nowrap; border: none;
  background: none; height: 100%;
  border-bottom: 3px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.tnav-link:hover,
.tnav-item:hover > .tnav-link { color: var(--topbar-fg); background: var(--topbar-hover); }
.tnav-link.active { color: var(--topbar-fg); border-bottom-color: var(--topbar-line); }
.tnav-arrow { font-size: 10px; opacity: .7; transition: transform .2s; }
.tnav-item:hover > .tnav-link .tnav-arrow { transform: rotate(180deg); }

/* Dropdown */
.tnav-dropdown {
  display: none;
  position: absolute; top: 48px; left: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.13);
  min-width: 200px; max-width: 280px;
  z-index: 300; padding: 6px 0;
}
.tnav-item:hover .tnav-dropdown,
.tnav-item.open  .tnav-dropdown { display: block; }

.tnav-dd-item {
  display: block; padding: 8px 16px;
  font-size: 13px; color: var(--text); text-decoration: none;
  transition: background .1s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tnav-dd-item:hover { background: var(--surface-3); color: var(--primary); }
.tnav-dd-item.active { background: var(--primary-soft); color: var(--primary); font-weight: 500; }

/* Group header inside dropdown */
.tnav-group { border-top: 1px solid var(--border); padding-top: 4px; margin-top: 4px; }
.tnav-group:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.tnav-group-label {
  padding: 5px 16px 3px;
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
}

/* ── Flyout submenu (level-2) ── */
.tnav-flyout-item {
  position: relative;
}
.tnav-flyout-trigger {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;
  font-size: 13px; color: var(--text); text-decoration: none;
  transition: background .1s; white-space: nowrap; cursor: default;
  gap: 12px;
}
.tnav-flyout-trigger:hover { background: var(--surface-3); color: var(--primary); }
.tnav-flyout-trigger.active { background: var(--primary-soft); color: var(--primary); font-weight: 500; }
.tnav-flyout-arrow { font-size: 10px; opacity: .6; flex-shrink: 0; }

.tnav-flyout {
  display: none;
  position: absolute; top: -6px; left: 100%;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(0,0,0,.13);
  min-width: 220px; z-index: 400; padding: 6px 0;
}
/* Buka flyout saat hover pada item */
.tnav-flyout-item:hover > .tnav-flyout { display: block; }

/* Jika flyout akan terpotong di kanan layar, buka ke kiri */
.tnav-flyout-item.flyout-left > .tnav-flyout {
  left: auto; right: 100%;
}

/* ---- Mobile nav ---- */
/* Dulu @media (max-width:900px). Diganti atribut karena lebar tempat menu
   berhenti muat TIDAK TETAP — ia bergantung pada panjang label menu, yang
   berbeda di tiap pemasangan. Di antara 901px dan lebar yang dibutuhkan
   menu, .topnav yang ber-flex:1 tanpa min-width mendorong .topbar-right
   keluar layar: lonceng notifikasi dan tombol Keluar hilang dari pandangan.
   Sekarang tema.js yang memasang data-topnav="sempit" — dari matchMedia
   lebih dulu (sebelum halaman tergambar), lalu dikoreksi dengan mengukur
   apakah menunya benar-benar meluber. */
html[data-topnav="sempit"] .hamburger { display: flex; }
html[data-topnav="sempit"] .topnav { display: none; flex-direction: column;
    position: absolute; top: 48px; left: 0; right: 0;
    background: var(--topbar-bg); z-index: 250;
    padding: 8px 0; box-shadow: 0 4px 12px rgba(0,0,0,.2); }
html[data-topnav="sempit"] .topnav.open { display: flex; }
html[data-topnav="sempit"] .tnav-item { flex-direction: column; }
html[data-topnav="sempit"] .tnav-link { padding: 10px 20px; border-bottom: none; border-radius: 0; }
html[data-topnav="sempit"] .tnav-dropdown { position: static; box-shadow: none; border: none;
    background: var(--topbar-active); border-radius: 0;
    padding: 0; display: none; }
html[data-topnav="sempit"] .tnav-item.open .tnav-dropdown { display: block; }
html[data-topnav="sempit"] .tnav-dd-item { color: var(--topbar-fg-dim); padding: 8px 32px; }
html[data-topnav="sempit"] .tnav-dd-item:hover { background: var(--topbar-hover); color: var(--topbar-fg); }
html[data-topnav="sempit"] .tnav-dd-item.active { background: var(--topbar-active); color: var(--topbar-fg); }
html[data-topnav="sempit"] .tnav-group-label { color: var(--topbar-fg-dim); padding-left: 32px; }
html[data-topnav="sempit"] .tnav-group { border-top-color: var(--topbar-active); }
/* Mobile: flyout jadi flat expand */
html[data-topnav="sempit"] .tnav-flyout-trigger { color: var(--topbar-fg-dim); padding: 8px 32px; }
html[data-topnav="sempit"] .tnav-flyout-trigger:hover { background: var(--topbar-hover); color: var(--topbar-fg); }
html[data-topnav="sempit"] .tnav-flyout-trigger.active { background: var(--topbar-active); color: var(--topbar-fg); }
html[data-topnav="sempit"] .tnav-flyout { position: static; box-shadow: none; border: none; border-radius: 0; background: var(--topbar-active); padding: 0; display: none; }
html[data-topnav="sempit"] .tnav-flyout-item.open > .tnav-flyout { display: block; }
html[data-topnav="sempit"] .tnav-flyout .tnav-dd-item { padding-left: 48px; }

/* ---- Layout ---- */
/* Bawaannya PENUH. Sebagian besar layar di aplikasi ini isinya tabel —
   laporan, daftar master, baris transaksi — dan membatasinya di 1200px
   menyisakan pita kosong di kiri-kanan justru waktu tabelnya paling butuh
   ruang. Halaman yang isinya borang menandai dirinya sendiri dengan
   .sempit lewat $PAGE_SEMPIT di layout.php: isian selebar 2500px tidak
   lebih mudah dibaca, cuma lebih jauh dijangkau mata. */
.page-wrapper { max-width: none; margin: 0 auto; padding: 20px 18px; }
.page-wrapper.sempit { max-width: 1200px; }
.page-title {
  font-size: 18px; font-weight: 600; margin-bottom: 16px;
  padding-bottom: 10px; border-bottom: 2px solid var(--primary);
  color: var(--text);
}
.page-title span { color: var(--text-muted); font-weight: 400; font-size: 13px; margin-left: 8px; }

/* ---- Card ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: 13px;
  background: var(--surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-body { padding: 16px; }

/* ---- Form ---- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 16px;
}
.form-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.form-group { display: flex; flex-direction: column; gap: 4px; }
.form-group.full { grid-column: 1 / -1; }
label { font-size: 12px; font-weight: 500; color: var(--text-muted); }
input[type=text], input[type=number], input[type=password],
select, textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  transition: border-color .15s;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
input[readonly] { background: var(--surface-2); color: var(--text-muted); }
textarea { resize: vertical; min-height: 60px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; font-family: inherit;
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.btn-primary  { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-h); border-color: var(--primary-h); }
.btn-danger   { background: var(--danger); color: var(--surface); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-h); border-color: var(--danger-h); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg); }
.btn-success  { background: var(--success); color: var(--surface); border-color: var(--success); }
.btn-sm { padding: 4px 9px; font-size: 12px; }

/* ---- Toolbar (above table) ---- */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px; margin-bottom: 12px;
}
.toolbar-left, .toolbar-right { display: flex; gap: 8px; align-items: center; }
.search-box {
  display: flex; align-items: center; gap: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
}
.search-box input {
  border: none; border-radius: 0; width: 220px; padding: 6px 10px;
  box-shadow: none;
}
.search-box input:focus { box-shadow: none; border: none; }
.search-box button {
  background: var(--primary); color: var(--surface); border: none;
  padding: 0 12px; cursor: pointer; font-size: 14px; height: 100%;
}

/* ---- Table ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  background: var(--surface-3); color: var(--text-muted);
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; padding: 9px 12px;
  border-bottom: 1px solid var(--border); text-align: left;
  white-space: nowrap;
}
thead th.center { text-align: center; }
tbody tr { border-bottom: 1px solid var(--border-3); transition: background .1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--surface-2); }
tbody td { padding: 8px 12px; vertical-align: middle; }
tbody td.center { text-align: center; }
tbody td.right  { text-align: right; }
.td-actions { display: flex; gap: 5px; justify-content: center; }

/* ---- Badge ---- */
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 99px;
  font-size: 11px; font-weight: 500;
}
.badge-green  { background: var(--success-soft); color: var(--success-ink); }
.badge-gray   { background: var(--surface-3); color: var(--text-muted); }
.badge-blue   { background: var(--primary-soft2); color: var(--primary-ink); }
.badge-red    { background: var(--danger-soft); color: var(--danger-ink); }
.badge-amber  { background: var(--warn-soft); color: var(--warn-ink); }

/* ---- Alert ---- */
.alert {
  padding: 10px 14px; border-radius: var(--radius);
  font-size: 13px; margin-bottom: 14px;
  border-left: 4px solid transparent;
}
.alert-success { background: var(--success-soft2); border-color: var(--success); color: var(--success-ink); }
.alert-danger  { background: var(--danger-soft2); border-color: var(--danger);  color: var(--danger-ink); }
.alert-info    { background: var(--primary-soft); border-color: var(--primary);  color: var(--primary-ink); }

/* ---- Subscription warning banner (BUKAN .alert - sengaja terpisah supaya
   tidak ikut ke-auto-hide oleh script 4 detik di layout.php) ---- */
.subs-warning-banner {
  background: var(--warn-soft2); border: 1px solid var(--warn); color: var(--warn-ink);
  padding: 10px 16px; border-radius: var(--radius); font-size: 13px;
  margin-bottom: 16px; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.subs-warning-banner a { color: var(--warn-ink); font-weight: 700; text-decoration: underline; white-space: nowrap; }

/* ---- Modal ---- */
.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: var(--overlay); z-index: 200;
  align-items: center; justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface); border-radius: 8px;
  box-shadow: var(--shadow-modal);
  width: 100%; max-height: 90vh; overflow-y: auto;
  animation: modal-in .15s ease;
}
.modal-sm  { max-width: 400px; }
.modal-md  { max-width: 600px; }
.modal-lg  { max-width: 820px; }
.modal-xl  { max-width: 1000px; }
@keyframes modal-in { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-header {
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  font-weight: 600; font-size: 15px;
}
.modal-body   { padding: 18px; }
.modal-footer {
  padding: 12px 18px; border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
}
.btn-close {
  background: none; border: none; cursor: pointer;
  font-size: 18px; color: var(--text-muted); line-height: 1;
}
.btn-close:hover { color: var(--text); }

/* ---- Pagination ---- */
.pagination { display: flex; gap: 4px; align-items: center; margin-top: 14px; }
.pagination a, .pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 6px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 12px; text-decoration: none; color: var(--text);
  background: var(--surface);
}
.pagination a:hover { background: var(--bg); }
.pagination .active { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.pagination .disabled { color: var(--text-muted); pointer-events: none; background: var(--surface-2); }

/* ---- Misc ---- */
.text-muted  { color: var(--text-muted); }
.text-danger { color: var(--danger); }
.text-right  { text-align: right; }
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.flex { display: flex; }
.gap-2 { gap: 8px; }

/* ---- Confirm dialog ---- */
#confirm-backdrop {
  display: none; position: fixed; inset: 0;
  background: var(--overlay); z-index: 300;
  align-items: center; justify-content: center;
}
#confirm-backdrop.open { display: flex; }
#confirm-box {
  background: var(--surface); border-radius: 8px; padding: 24px;
  max-width: 360px; width: 100%; text-align: center;
  box-shadow: var(--shadow-modal);
}
#confirm-box .ci { font-size: 36px; margin-bottom: 10px; }
#confirm-box p { font-size: 14px; margin-bottom: 18px; color: var(--text); }
#confirm-box .btns { display: flex; gap: 10px; justify-content: center; }

/* ============================================================
   ARIES ONE v3 — Enhanced UI + Modal Form styles
   ============================================================ */

/* ---- Base size upgrade ---- */
body { font-size: 15px; }
label { font-size: 13px; font-weight: 600; color: var(--text-label); }
input[type=text], input[type=number], input[type=password], select, textarea {
  padding: 9px 12px; font-size: 14px; border-radius: 7px;
  border: 1.5px solid var(--border);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.13);
}
.btn { padding: 9px 18px; font-size: 14px; border-radius: 7px; }
.btn-sm { padding: 5px 12px; font-size: 13px; }

/* ---- Page title ---- */
.page-title {
  font-size: 20px; font-weight: 700; margin-bottom: 20px;
  padding-bottom: 12px; border-bottom: 3px solid var(--primary);
}
.page-title span { font-size: 14px; font-weight: 400; color: var(--text-muted); margin-left: 10px; }

/* ---- Card upgrade ---- */
.card { border-radius: 10px; box-shadow: var(--shadow-card); border: 1px solid var(--border-2); }
.card-header { padding: 14px 20px; font-size: 14px; font-weight: 700; background: var(--surface-2); border-radius: 10px 10px 0 0; }
.card-body { padding: 20px; }

/* ---- Table upgrade ---- */
thead th {
  padding: 11px 14px; font-size: 12px; font-weight: 700;
  background: var(--surface-3); color: var(--text-soft);
  text-transform: uppercase; letter-spacing: .05em;
}
tbody td { padding: 11px 14px; font-size: 14px; }
tbody tr:hover { background: var(--row-hover); }

/* ---- Section header inside modal/form ---- */
.section-hdr {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; padding: 7px 12px; border-radius: 6px;
  margin: 18px 0 12px; display: flex; align-items: center; gap: 8px;
}
.section-hdr.blue   { background: var(--primary-soft2); color: var(--primary-ink); border-left: 4px solid var(--primary); }
.section-hdr.green  { background: var(--success-soft); color: var(--success-ink); border-left: 4px solid var(--success-brd); }
.section-hdr.amber  { background: var(--warn-soft); color: var(--warn-ink); border-left: 4px solid var(--warn); }
.section-hdr.purple { background: var(--purple-soft); color: var(--purple-ink); border-left: 4px solid var(--purple-brd); }
.section-hdr.slate  { background: var(--surface-3); color: var(--slate-ink); border-left: 4px solid var(--text-dim); }

/* ---- Modal upgrade ---- */
.modal-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(15,23,42,.55); z-index: 500;
  align-items: center; justify-content: center;
  padding: 16px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface); border-radius: 12px; width: 100%;
  max-height: 92vh; overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  animation: modal-in .18s ease;
}
.modal-sm  { max-width: 440px; }
.modal-md  { max-width: 640px; }
.modal-lg  { max-width: 860px; }
.modal-xl  { max-width: 1040px; }
@keyframes modal-in {
  from { transform: translateY(-16px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal-header {
  padding: 18px 22px; border-bottom: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 16px; font-weight: 700; color: var(--text);
  position: sticky; top: 0; background: var(--surface); z-index: 10;
  border-radius: 12px 12px 0 0;
}
.modal-body   { padding: 22px; }
.modal-footer {
  padding: 14px 22px; border-top: 1px solid var(--border-2);
  display: flex; justify-content: flex-end; gap: 10px;
  position: sticky; bottom: 0; background: var(--surface-2);
  border-radius: 0 0 12px 12px;
}
.btn-close {
  background: var(--surface-3); border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  font-size: 16px; color: var(--text-muted); display: flex;
  align-items: center; justify-content: center;
  transition: background .15s;
}
.btn-close:hover { background: var(--surface-4); color: var(--text); }

/* ---- Auto-code badge ---- */
.auto-code {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--primary-soft); color: var(--primary-ink); border: 1.5px solid var(--primary-brd);
  border-radius: 7px; padding: 8px 14px; font-size: 14px;
  font-family: monospace; font-weight: 700; letter-spacing: .05em;
}
.auto-code small { font-size: 11px; color: var(--primary-dim); font-family: sans-serif; font-weight: 400; display: block; margin-top: 1px; }

/* ---- Satuan builder (setstok) ---- */
.satuan-row {
  display: grid;
  grid-template-columns: 28px minmax(90px,1.2fr) 70px minmax(110px,1.5fr) 28px;
  gap: 8px; align-items: end;
  padding: 10px 12px; background: var(--surface-2);
  border: 1px solid var(--border-2); border-radius: 8px; margin-bottom: 8px;
}
.satuan-row .level-badge {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--primary-soft2); color: var(--primary-ink); flex-shrink: 0;
}
.satuan-row.level-1 { background: var(--primary-soft); border-color: var(--primary-brd); }
.satuan-row.level-1 .level-badge { background: var(--primary); color: var(--surface); }
.satuan-remove {
  background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 18px; padding: 0;
  transition: color .15s;
}
.satuan-remove:hover { color: var(--danger-ink); }

/* ---- Barcode row ---- */
.barcode-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 8px; align-items: center;
  margin-bottom: 8px;
}
.barcode-remove {
  background: none; border: 1px solid var(--danger-brd); color: var(--danger-ink);
  border-radius: 6px; cursor: pointer; padding: 6px 10px; font-size: 13px;
  transition: background .15s;
}
.barcode-remove:hover { background: var(--danger-soft); }

/* ---- Harga table ---- */
.harga-table { width: 100%; border-collapse: collapse; }
.harga-table th {
  background: var(--warn-soft); color: var(--warn-ink); font-size: 12px;
  font-weight: 700; padding: 9px 12px; text-align: left;
  border-bottom: 2px solid var(--warn-brd);
}
.harga-table td { padding: 8px 12px; border-bottom: 1px solid var(--border-3); }
.harga-table tr:last-child td { border-bottom: none; }
.harga-table tr.eceran td { background: var(--warn-soft2); }
.harga-table input { width: 100%; }

/* ---- Toolbar + search upgrade ---- */
.toolbar { margin-bottom: 16px; }
.search-box input { font-size: 14px; width: 260px; padding: 8px 12px; }
.search-box button { padding: 0 14px; }

/* ---- Row action buttons ---- */
.td-actions { gap: 6px; }

/* ---- Satuan list header ---- */
.satuan-hdr {
  display: grid;
  grid-template-columns: 28px minmax(90px,1.2fr) 70px minmax(110px,1.5fr) 28px;
  gap: 8px; padding: 0 12px; margin-bottom: 4px;
}
.satuan-hdr span { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; }

/* Kolom kalkulasi harga per satuan turunan */
.harga-table td[id^="hcalc-"] { color: var(--text-muted); font-size: 12px; line-height: 1.7; }

/* Input harga per satuan turunan — 2 arah, bisa diketik langsung */
.hcalc-item { display: inline-flex; align-items: center; gap: 4px; margin: 0 10px 4px 0; }
input.hcalc-inp {
  width: 82px; padding: 4px 7px; font-size: 12px; border-radius: 5px;
  border: 1.5px solid var(--border); text-align: right;
}
.hcalc-unit { font-size: 11px; color: var(--text-muted); white-space: nowrap; }

/* ============================================================
   TEMA
   ------------------------------------------------------------
   Tema bekerja dengan menimpa variabel di :root lewat atribut
   data-theme pada elemen <html>. Atribut itu dipasang oleh skrip
   kecil di config/layout.php SEBELUM <body> dirender, supaya tidak
   ada kedipan putih sesaat (flash of unstyled theme).

   Tema "custom" memakai palet dasar terang/gelap sesuai data-base,
   lalu 5 warna pilihan user ditimpa sebagai inline style di <html>
   oleh assets/js/tema.js (inline style menang atas stylesheet).
   ============================================================ */

/* ---- Gelap (dark mode) ---- */
html[data-theme="dark"],
html[data-theme="custom"][data-base="dark"] {
  color-scheme: dark;
  --bg:            #0f172a;
  --surface:       #1e293b;
  --surface-2:     #172234;
  --surface-3:     #24344d;
  --surface-4:     #334155;
  --border:        #334155;
  --border-2:      #2c3d55;
  --border-3:      #223047;

  --text:          #e2e8f0;
  --text-muted:    #94a3b8;
  --text-soft:     #cbd5e1;
  --text-label:    #cbd5e1;
  --text-dim:      #7c8ba1;
  --on-accent:     #ffffff;
  --on-accent-dim: rgba(255,255,255,.78); /* teks sekunder di atas latar gelap tetap */

  --primary:       #5b96f8;
  --primary-h:     #3b82f6;
  --primary-soft:  #16304f;
  --primary-soft2: #1d3a5f;
  --primary-brd:   #2f5a8f;
  --primary-ink:   #93c5fd;
  --primary-dim:   #60a5fa;
  --row-hover:     #1c2b42;

  --danger:        #f87171;
  --danger-h:      #ef4444;
  --danger-soft:   #3f1d1d;
  --danger-soft2:  #2a1616;
  --danger-brd:    #7f2a2a;
  --danger-ink:    #fca5a5;

  --success:       #22c55e;
  --success-soft:  #14331f;
  --success-soft2: #10281a;
  --success-brd:   #2f7d4f;
  --success-ink:   #86efac;

  --warn:          #f59e0b;
  --warn-soft:     #3a2d10;
  --warn-soft2:    #2c220c;
  --warn-brd:      #7a5a1a;
  --warn-ink:      #fcd34d;

  --purple-soft:   #2a1f4a;
  --purple-brd:    #7c5cd6;
  --purple-ink:    #c4b5fd;
  --slate-soft:    #24344d;
  --slate-brd:     #64748b;
  --slate-ink:     #cbd5e1;

  --topbar-bg:     #16233a;
  --topbar-fg:     #e2e8f0;
  --topbar-fg-dim: #a8b6c9;
  --topbar-hover:  rgba(255,255,255,.07);
  --topbar-active: rgba(255,255,255,.12);
  --topbar-line:   rgba(226,232,240,.85);


  /* ── Warna "solid": TETAP di semua tema ──────────────────────────
     Dipakai untuk latar pekat yang di atasnya selalu ada teks putih —
     header tabel laporan, badge status, pita judul.

     Kenapa tidak memakai --primary-ink / --warn-ink / --text saja?
     Karena variabel itu MEMBALIK antar tema: --warn-ink bernilai #92400e
     (cokelat tua) di tema terang tapi #fcd34d (kuning muda) di tema gelap.
     Sebagai warna TEKS itu benar — ia harus ikut membalik mengikuti latar
     lembutnya. Tapi sebagai LATAR, hasilnya teks putih di atas kuning muda
     alias tidak terbaca. Warna di bawah ini sengaja tidak ikut tema. */
  --solid-slate:  #1e293b;
  --solid-blue:   #1d4ed8;
  --solid-green:  #15803d;
  --solid-amber:  #92400e;
  --solid-red:    #b91c1c;
  --solid-purple: #5b21b6;

  --shadow:        0 1px 3px rgba(0,0,0,.5);
  --shadow-card:   0 2px 8px rgba(0,0,0,.4);
  --shadow-topbar: 0 2px 8px rgba(0,0,0,.55);
  --shadow-modal:  0 8px 30px rgba(0,0,0,.6);
  --overlay:       rgba(0,0,0,.65);
}

/* ---- Navy (biru tua) ---- */
html[data-theme="blue"] {
  color-scheme: dark;
  --bg:            #0a1a33;
  --surface:       #123056;
  --surface-2:     #0e2645;
  --surface-3:     #16395f;
  --surface-4:     #1d4675;
  --border:        #1e4272;
  --border-2:      #1a3a66;
  --border-3:      #14304f;

  --text:          #e8f0fb;
  --text-muted:    #9db6d6;
  --text-soft:     #c5d8ef;
  --text-label:    #c5d8ef;
  --text-dim:      #7a97ba;
  --on-accent:     #ffffff;
  --on-accent-dim: rgba(255,255,255,.78); /* teks sekunder di atas latar gelap tetap */

  --primary:       #5aa0ec;
  --primary-h:     #3f88db;
  --primary-soft:  #14355e;
  --primary-soft2: #1a4173;
  --primary-brd:   #2f6bab;
  --primary-ink:   #a8cdfb;
  --primary-dim:   #7ab4fb;
  --row-hover:     #16395f;

  --danger:        #f47272;
  --danger-h:      #f05252;
  --danger-soft:   #4a1c22;
  --danger-soft2:  #331419;
  --danger-brd:    #8c2f38;
  --danger-ink:    #fbb3b3;

  --success:       #2fc46b;
  --success-soft:  #10352a;
  --success-soft2: #0c2a21;
  --success-brd:   #2b7f57;
  --success-ink:   #8ce9b5;

  --warn:          #f0a92c;
  --warn-soft:     #3d3113;
  --warn-soft2:    #2e250e;
  --warn-brd:      #7d611d;
  --warn-ink:      #fbd47c;

  --purple-soft:   #26235c;
  --purple-brd:    #7d6de0;
  --purple-ink:    #c3bcfa;
  --slate-soft:    #16395f;
  --slate-brd:     #6b8bb0;
  --slate-ink:     #c5d8ef;

  --topbar-bg:     #061428;
  --topbar-fg:     #e8f0fb;
  --topbar-fg-dim: #a9c2e0;
  --topbar-hover:  rgba(255,255,255,.08);
  --topbar-active: rgba(255,255,255,.14);
  --topbar-line:   rgba(232,240,251,.85);


  /* ── Warna "solid": TETAP di semua tema ──────────────────────────
     Dipakai untuk latar pekat yang di atasnya selalu ada teks putih —
     header tabel laporan, badge status, pita judul.

     Kenapa tidak memakai --primary-ink / --warn-ink / --text saja?
     Karena variabel itu MEMBALIK antar tema: --warn-ink bernilai #92400e
     (cokelat tua) di tema terang tapi #fcd34d (kuning muda) di tema gelap.
     Sebagai warna TEKS itu benar — ia harus ikut membalik mengikuti latar
     lembutnya. Tapi sebagai LATAR, hasilnya teks putih di atas kuning muda
     alias tidak terbaca. Warna di bawah ini sengaja tidak ikut tema. */
  --solid-slate:  #1e293b;
  --solid-blue:   #1d4ed8;
  --solid-green:  #15803d;
  --solid-amber:  #92400e;
  --solid-red:    #b91c1c;
  --solid-purple: #5b21b6;

  --shadow:        0 1px 3px rgba(0,0,0,.5);
  --shadow-card:   0 2px 8px rgba(0,0,0,.42);
  --shadow-topbar: 0 2px 8px rgba(0,0,0,.6);
  --shadow-modal:  0 8px 30px rgba(0,0,0,.62);
  --overlay:       rgba(2,10,22,.7);
}

/* ---- Army (hijau militer) ---- */
html[data-theme="green"] {
  color-scheme: dark;
  --bg:            #1c2418;
  --surface:       #27321f;
  --surface-2:     #212b1a;
  --surface-3:     #2f3b25;
  --surface-4:     #3a4930;
  --border:        #3c4a30;
  --border-2:      #35422b;
  --border-3:      #2a3421;

  --text:          #e9efdf;
  --text-muted:    #a8b795;
  --text-soft:     #cbd8b8;
  --text-label:    #cbd8b8;
  --text-dim:      #8a9877;
  --on-accent:     #ffffff;
  --on-accent-dim: rgba(255,255,255,.78); /* teks sekunder di atas latar gelap tetap */

  --primary:       #87ad42;
  --primary-h:     #6f9134;
  --primary-soft:  #26301a;
  --primary-soft2: #2e3b20;
  --primary-brd:   #4e6528;
  --primary-ink:   #b9d47f;
  --primary-dim:   #93b357;
  --row-hover:     #2f3b25;

  --danger:        #e8836e;
  --danger-h:      #d4553f;
  --danger-soft:   #3d211a;
  --danger-soft2:  #2e1913;
  --danger-brd:    #7d3627;
  --danger-ink:    #eda893;

  --success:       #5fa855;
  --success-soft:  #1f3320;
  --success-soft2: #182818;
  --success-brd:   #467a40;
  --success-ink:   #a8dda0;

  --warn:          #c99a2e;
  --warn-soft:     #362c13;
  --warn-soft2:    #29220e;
  --warn-brd:      #6f5a1c;
  --warn-ink:      #e8c878;

  --purple-soft:   #2b2740;
  --purple-brd:    #7a6cb3;
  --purple-ink:    #c0b6e4;
  --slate-soft:    #2f3b25;
  --slate-brd:     #7d8b6a;
  --slate-ink:     #cbd8b8;

  --topbar-bg:     #161d12;
  --topbar-fg:     #e9efdf;
  --topbar-fg-dim: #b3c19c;
  --topbar-hover:  rgba(255,255,255,.07);
  --topbar-active: rgba(255,255,255,.13);
  --topbar-line:   rgba(233,239,223,.85);


  /* ── Warna "solid": TETAP di semua tema ──────────────────────────
     Dipakai untuk latar pekat yang di atasnya selalu ada teks putih —
     header tabel laporan, badge status, pita judul.

     Kenapa tidak memakai --primary-ink / --warn-ink / --text saja?
     Karena variabel itu MEMBALIK antar tema: --warn-ink bernilai #92400e
     (cokelat tua) di tema terang tapi #fcd34d (kuning muda) di tema gelap.
     Sebagai warna TEKS itu benar — ia harus ikut membalik mengikuti latar
     lembutnya. Tapi sebagai LATAR, hasilnya teks putih di atas kuning muda
     alias tidak terbaca. Warna di bawah ini sengaja tidak ikut tema. */
  --solid-slate:  #1e293b;
  --solid-blue:   #1d4ed8;
  --solid-green:  #15803d;
  --solid-amber:  #92400e;
  --solid-red:    #b91c1c;
  --solid-purple: #5b21b6;

  --shadow:        0 1px 3px rgba(0,0,0,.45);
  --shadow-card:   0 2px 8px rgba(0,0,0,.38);
  --shadow-topbar: 0 2px 8px rgba(0,0,0,.55);
  --shadow-modal:  0 8px 30px rgba(0,0,0,.58);
  --overlay:       rgba(8,12,6,.68);
}
html[data-theme="sky"] {
  color-scheme: light;
  --bg: #e9f2fb;
  --surface: #ffffff;
  --surface-2: #f4f9fe;
  --surface-3: #e4eff9;
  --surface-4: #cee2f3;
  --border: #c3daee;
  --border-2: #d7e7f5;
  --border-3: #e8f1fa;
  --text: #12314c;
  --text-muted: #4a6377;
  --text-soft: #2c4d69;
  --text-label: #26455f;
  --text-dim: #6a8399;
  --on-accent: #ffffff;
  --on-accent-dim: rgba(255,255,255,.78);
  --primary: #0b6bb3;
  --primary-h: #08558f;
  --primary-soft: #eaf4fc;
  --primary-soft2: #d4e9f8;
  --primary-brd: #a6d1ee;
  --primary-ink: #0a5c99;
  --primary-dim: #4aa3dd;
  --row-hover: #eaf4fd;
  --danger: #c62828;
  --danger-h: #a51f1f;
  --danger-soft: #fde3e3;
  --danger-soft2: #fef3f3;
  --danger-brd: #f2a3a3;
  --danger-ink: #b21f1f;
  --success: #14784a;
  --success-soft: #d8f3e4;
  --success-soft2: #eefaf3;
  --success-brd: #5cbf8c;
  --success-ink: #116340;
  --warn: #b06a05;
  --warn-soft: #fdf0d2;
  --warn-soft2: #fefaf0;
  --warn-brd: #f0cf8c;
  --warn-ink: #7d4a04;
  --purple-soft: #e9e6fb;
  --purple-brd: #7c5cd6;
  --purple-ink: #4c2f9e;
  --slate-soft: #e4eff9;
  --slate-brd: #7d97ac;
  --slate-ink: #2c4d69;
  --topbar-bg: #0b6bb3;
  --topbar-fg: #ffffff;
  --topbar-fg-dim: #ffffffcc;
  --topbar-hover: rgba(255,255,255,.12);
  --topbar-active: rgba(255,255,255,.18);
  --topbar-line: rgba(255,255,255,.85);
  --solid-slate: #1e293b;
  --solid-blue: #1d4ed8;
  --solid-green: #15803d;
  --solid-amber: #92400e;
  --solid-red: #b91c1c;
  --solid-purple: #5b21b6;
  --shadow: 0 1px 3px rgba(16,52,86,.10);
  --shadow-card: 0 2px 8px rgba(16,52,86,.09);
  --shadow-topbar: 0 2px 8px rgba(11,107,179,.28);
  --shadow-modal: 0 8px 30px rgba(16,52,86,.20);
  --overlay: rgba(12,40,66,.45);
}

html[data-theme="mint"] {
  color-scheme: light;
  --bg: #eaf5ee;
  --surface: #ffffff;
  --surface-2: #f3faf5;
  --surface-3: #e4f2e9;
  --surface-4: #cbe6d5;
  --border: #c0dccd;
  --border-2: #d5e9dd;
  --border-3: #e7f3ec;
  --text: #16352a;
  --text-muted: #4a6759;
  --text-soft: #2d5344;
  --text-label: #274b3d;
  --text-dim: #6a887a;
  --on-accent: #ffffff;
  --on-accent-dim: rgba(255,255,255,.78);
  --primary: #12775a;
  --primary-h: #0d5f48;
  --primary-soft: #e7f6ee;
  --primary-soft2: #d1ecdf;
  --primary-brd: #9dd6ba;
  --primary-ink: #0f6349;
  --primary-dim: #4fae8a;
  --row-hover: #eaf7f0;
  --danger: #c62828;
  --danger-h: #a51f1f;
  --danger-soft: #fde3e3;
  --danger-soft2: #fef3f3;
  --danger-brd: #f2a3a3;
  --danger-ink: #b21f1f;
  --success: #14784a;
  --success-soft: #d8f3e4;
  --success-soft2: #eefaf3;
  --success-brd: #5cbf8c;
  --success-ink: #116340;
  --warn: #a86a08;
  --warn-soft: #fbefd4;
  --warn-soft2: #fdf9f0;
  --warn-brd: #e8cb8e;
  --warn-ink: #764806;
  --purple-soft: #e9e6fb;
  --purple-brd: #7c5cd6;
  --purple-ink: #4c2f9e;
  --slate-soft: #e4f2e9;
  --slate-brd: #7ea394;
  --slate-ink: #2d5344;
  --topbar-bg: #12775a;
  --topbar-fg: #ffffff;
  --topbar-fg-dim: #ffffffcc;
  --topbar-hover: rgba(255,255,255,.12);
  --topbar-active: rgba(255,255,255,.18);
  --topbar-line: rgba(255,255,255,.85);
  --solid-slate: #1e293b;
  --solid-blue: #1d4ed8;
  --solid-green: #15803d;
  --solid-amber: #92400e;
  --solid-red: #b91c1c;
  --solid-purple: #5b21b6;
  --shadow: 0 1px 3px rgba(20,60,44,.10);
  --shadow-card: 0 2px 8px rgba(20,60,44,.09);
  --shadow-topbar: 0 2px 8px rgba(18,119,90,.26);
  --shadow-modal: 0 8px 30px rgba(20,60,44,.20);
  --overlay: rgba(16,48,36,.45);
}


/* ============================================================
   CETAK — mode HITAM PUTIH (hemat tinta)
   ------------------------------------------------------------
   Dipasang lewat data-print="bw" pada <html>. Tujuannya menekan
   pemakaian tinta pada laporan rutin (kas harian, laporan penjualan)
   yang dicetak tiap hari.

   Selektornya sengaja mengulang [data-print=bw] tiga kali. Alasannya
   teknis: banyak file di laporan/ punya aturan @media print sendiri
   seperti

       .lt thead tr.th-grp th { background:#1e3a5f!important;
                                print-color-adjust: exact }

   Aturan itu sudah !important DAN spesifisitasnya (0,1,3) lebih tinggi
   daripada `html[data-print=bw] *` yang cuma (0,1,0) — jadi kalau
   ditulis sekali saja, header tabel laporan TETAP tercetak biru tua
   dan mode hemat tinta tidak berpengaruh sama sekali. Dengan tiga
   atribut, spesifisitas naik ke (0,3,0) dan menang atas semuanya
   tanpa perlu menyunting 27 file laporan satu per satu.
   ============================================================ */
@media print {
  html[data-print="bw"],
  html[data-print="bw"] body { background: #fff !important; }

  html[data-print="bw"][data-print="bw"][data-print="bw"] *,
  html[data-print="bw"][data-print="bw"][data-print="bw"] *::before,
  html[data-print="bw"][data-print="bw"][data-print="bw"] *::after {
    background-color: transparent !important;
    background-image: none !important;
    color: #000 !important;
    border-color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: economy !important;
    print-color-adjust: economy !important;
  }
  /* Struktur tabel tetap terbaca lewat garis, bukan blok warna. */
  html[data-print="bw"][data-print="bw"][data-print="bw"] thead th {
    border-bottom: 1.5px solid #000 !important;
    font-weight: 700 !important;
  }
}

/* Mode berwarna: pastikan browser tidak "menghemat" warna sendiri. */
@media print {
  html[data-print="color"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ============================================================
   CETAK — netralkan wadah bergulir
   ------------------------------------------------------------
   Beberapa laporan membungkus tabelnya dalam wadah ber-overflow
   supaya bisa digeser di layar sempit:

       .lt-wrap { overflow-x: auto }      (lapdaftarhutang, lapdaftarpiutang,
                                           lapkrtlgn, lapkrtstok, lapkrtsup)
       .bk-wrap { overflow-x: auto }      (lapbkbesar)

   Saat DICETAK, wadah itu tidak ikut melebar mengikuti kertas — dia tetap
   selebar viewport, sehingga kolom di luar area terlihat TERPOTONG dan
   batang scroll-nya ikut tercetak sebagai garis horizontal. Persis gejala
   pada cetak Daftar Hutang & Daftar Piutang.

   lapdaftarstok.php dan lapnrclajur.php sudah punya penetral ini di
   @media print masing-masing — makanya keduanya tercetak normal. Enam
   laporan sisanya tidak punya. Diletakkan global di sini, bukan ditambal
   satu per satu, supaya laporan baru pun otomatis ikut benar.
   ============================================================ */
@media print {
  .lt-wrap, .bk-wrap, .tbl-wrap, .table-wrap, .pk-list {
    overflow: visible !important;
    max-height: none !important;
  }
  .lt, .bk-tbl { width: 100% !important; }
}

/* ============================================================
   CETAK — sembunyikan kerangka aplikasi
   ------------------------------------------------------------
   Sebagian besar file di laporan/ sudah menyembunyikan .topbar dan
   kawan-kawan lewat @media print masing-masing. Tapi tiap laporan
   menuliskannya ulang sendiri, sehingga laporan yang lupa (mis.
   lapdaftarstokpromo.php, yang memang tidak punya blok @media print
   sama sekali) ikut mencetak batang menu dan navigasinya.

   Aturan global di sini menutup celah itu sekali untuk semua halaman —
   termasuk halaman non-laporan yang sesekali dicetak.
   ============================================================ */
@media print {
  .topbar, .tnav, .tnav-dropdown, .tnav-flyout, .hamburger,
  .mobile-nav, .sidebar, .btn-toolbar, .pagination,
  .modal-backdrop, .subs-warning-banner, .confirm-backdrop, #confirm-backdrop {
    display: none !important;
  }
  .page-wrapper, .main-content { padding: 0 !important; margin: 0 !important; }
  .card { box-shadow: none !important; border: none !important; }
}

/* ══ Panel navigasi di kiri ════════════════════════════════════════════════
   Pilihan per orang, disimpan di localStorage bersama tema (kunci ao_nav).
   tema.js memasang data-nav pada <html> di dalam <head> — sebelum <body>
   dirender — supaya halaman tidak sempat tergambar dengan menu di atas lalu
   melompat ke kiri di setiap perpindahan halaman.

   Bilah atas TETAP ADA di mode ini: lonceng notifikasi harus selalu terlihat,
   dan menurunkannya ke kiri bawah membuatnya lebih mudah terlewat — padahal
   seluruh gunanya justru memberi tahu tanpa diminta.

   Panelnya position:fixed, bukan sticky: isinya bisa lebih panjang dari layar
   di pemasangan bermenu banyak, dan ia harus bisa digulir sendiri tanpa ikut
   menyeret halaman. */
html[data-nav="kiri"] { --ao-sidebar-w: 228px; }
html[data-nav="kiri"][data-nav-ciut="1"] { --ao-sidebar-w: 54px; }

html[data-nav="kiri"] .topnav {
  position: fixed; top: 48px; left: 0; bottom: 0;
  width: var(--ao-sidebar-w);
  flex-direction: column; align-items: stretch;
  background: var(--topbar-bg);
  overflow-y: auto; overflow-x: hidden;
  z-index: 150; padding: 6px 0 60px;
  transition: width .12s ease;
}
html[data-nav="kiri"] .page-wrapper { margin-left: var(--ao-sidebar-w); }

/* Isi menu jadi tumpukan tegak — pola yang sama dengan mode sempit:
   dropdown melebar ke bawah di tempat, bukan melayang. */
html[data-nav="kiri"] .tnav-item { flex-direction: column; }
html[data-nav="kiri"] .tnav-link {
  padding: 9px 14px; border-bottom: none; border-radius: 0;
  display: flex; align-items: center; gap: 10px; white-space: nowrap;
}
html[data-nav="kiri"] .tnav-arrow { margin-left: auto; }
html[data-nav="kiri"] .tnav-dropdown {
  position: static; box-shadow: none; border: none; border-radius: 0;
  background: var(--topbar-active); padding: 0; display: none;
  min-width: 0; max-width: none;
}
html[data-nav="kiri"] .tnav-item.open .tnav-dropdown { display: block; }
html[data-nav="kiri"] .tnav-dd-item {
  color: var(--topbar-fg-dim); padding: 7px 14px 7px 38px; white-space: normal;
}
html[data-nav="kiri"] .tnav-dd-item:hover  { background: var(--topbar-hover); color: var(--topbar-fg); }
html[data-nav="kiri"] .tnav-dd-item.active { background: var(--topbar-active); color: var(--topbar-fg); }
html[data-nav="kiri"] .tnav-flyout-trigger { padding: 7px 14px 7px 38px; color: var(--topbar-fg-dim); }
html[data-nav="kiri"] .tnav-flyout-arrow { margin-left: auto; }
html[data-nav="kiri"] .tnav-flyout {
  position: static; box-shadow: none; border: none; border-radius: 0;
  background: var(--topbar-hover); padding: 0; display: none;
  min-width: 0; max-width: none;
}
html[data-nav="kiri"] .tnav-flyout-item.open > .tnav-flyout { display: block; }
html[data-nav="kiri"] .tnav-flyout .tnav-dd-item { padding-left: 52px; }

/* Ikon menu: hanya dipakai di mode kiri. Di mode atas ia disembunyikan
   supaya bilah atas tetap seperti semula. */
.tnav-ikon { display: none; }
html[data-nav="kiri"] .tnav-ikon {
  display: inline-flex; width: 22px; flex-shrink: 0;
  justify-content: center; font-size: 14px; line-height: 1;
}

/* Diciutkan: label hilang, ikon tinggal. Menu tanpa ikon bawaan memakai
   huruf pertamanya — pemasangan bisa punya menu buatan sendiri, dan
   panel berisi kotak-kotak kosong lebih buruk daripada huruf. */
html[data-nav="kiri"][data-nav-ciut="1"] .tnav-teks,
html[data-nav="kiri"][data-nav-ciut="1"] .tnav-arrow { display: none; }
html[data-nav="kiri"][data-nav-ciut="1"] .tnav-link { justify-content: center; padding: 11px 0; }
html[data-nav="kiri"][data-nav-ciut="1"] .tnav-dropdown { display: none !important; }

/* Tombol ciutkan, menempel di dasar panel. */
.nav-ciut-btn { display: none; }
html[data-nav="kiri"] .nav-ciut-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  position: fixed; left: 0; bottom: 0; width: var(--ao-sidebar-w);
  height: 38px; z-index: 151;
  background: var(--topbar-bg); color: var(--topbar-fg-dim);
  border: none; border-top: 1px solid var(--topbar-active);
  font-size: 12px; cursor: pointer;
}
html[data-nav="kiri"] .nav-ciut-btn:hover { color: var(--topbar-fg); background: var(--topbar-hover); }

/* Lencana versi digeser supaya tidak tertimpa panel. */
html[data-nav="kiri"] .versi-cap { left: calc(var(--ao-sidebar-w) + 8px); }

/* Layar sempit menang atas pilihan orang: panel kiri di layar 400px tidak
   menyisakan ruang untuk apa pun. Di sana ia kembali jadi menu tarik-turun
   dari hamburger, persis mode atas yang sempit. */
html[data-nav="kiri"][data-topnav="sempit"] .topnav {
  position: absolute; top: 48px; left: 0; right: 0; bottom: auto;
  width: auto; padding: 8px 0; box-shadow: 0 4px 12px rgba(0,0,0,.2);
}
html[data-nav="kiri"][data-topnav="sempit"] .page-wrapper { margin-left: 0; }
html[data-nav="kiri"][data-topnav="sempit"] .nav-ciut-btn { display: none; }
html[data-nav="kiri"][data-topnav="sempit"] .versi-cap { left: 8px; }
html[data-nav="kiri"][data-topnav="sempit"] .tnav-ikon { display: none; }

@media print {
  html[data-nav="kiri"] .topnav,
  html[data-nav="kiri"] .nav-ciut-btn { display: none !important; }
  html[data-nav="kiri"] .page-wrapper { margin-left: 0 !important; }
}

/* ══ Kartu Beranda ═════════════════════════════════════════════════════════
   Kolomnya menyesuaikan sendiri lewat auto-fit: di layar 2560px kartunya
   berjajar lima, di 900px jadi dua, di ponsel satu — tanpa satu breakpoint
   pun yang harus ditebak. Kartu grafik mengambil dua kolom kalau muat. */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:16px;margin-bottom:24px}
.dash-card{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column}
@media (min-width:960px){ .dash-lebar{grid-column:span 2} }
.dash-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 15px;border-bottom:1px solid var(--border);
  font-size:12.5px;font-weight:700}
.dash-head a{font-size:11px;font-weight:400;color:var(--text-muted);text-decoration:none}
.dash-head a:hover{color:var(--primary);text-decoration:underline}
.dash-body{padding:13px 15px;flex:1}
.dash-kosong{font-size:12.5px;color:var(--text-muted);padding:14px 0;text-align:center}
.dash-kaki{font-size:11px;color:var(--text-muted);line-height:1.5;margin-top:9px}
.dash-besar{font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.dash-sedang{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3}
.dash-kecil{font-size:11.5px;color:var(--text-muted)}
.dash-duo{display:flex;gap:20px;flex-wrap:wrap}
.dash-duo > div{min-width:130px}
.dash-delta{display:inline-block;margin-top:7px;font-size:12px;font-weight:700;
  padding:2px 9px;border-radius:20px}
.dash-delta.naik{background:var(--success-soft);color:var(--success-ink)}
.dash-delta.turun{background:var(--danger-soft);color:var(--danger-ink)}
.dash-delta.netral{background:var(--surface-3);color:var(--text-muted);font-weight:400}
.dash-tabel{width:100%;border-collapse:collapse;font-size:12.5px}
.dash-tabel td{padding:5px 0;border-bottom:1px solid var(--border-3);vertical-align:top}
.dash-tabel tr:last-child td{border-bottom:0}
.dash-tabel td.angka{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums;
  font-weight:600;padding-left:10px}
.dash-tabel td.angka.bahaya{color:var(--danger-ink)}
.dash-tabel td.angka.ingat{color:var(--warn-ink)}
.dash-sedang.bahaya{color:var(--danger-ink)}
.dash-sedang.ingat{color:var(--warn-ink)}
.dash-min{font-size:11px;color:var(--text-muted);font-weight:400}

/* Pemilih rentang grafik. */
.dash-rentang{display:flex;gap:4px}
.dash-rentang a{font-size:11px;padding:2px 8px;border-radius:20px;
  border:1px solid var(--border);color:var(--text-muted);text-decoration:none}
.dash-rentang a:hover{border-color:var(--primary);color:var(--primary);text-decoration:none}
.dash-rentang a.aktif{background:var(--primary-soft);border-color:var(--primary-brd);
  color:var(--primary-ink);font-weight:700}

/* Grafik. preserveAspectRatio="none" membuatnya melar mengikuti lebar kartu;
   vector-effect menjaga garisnya tetap setebal 2px walau ikut dilebarkan —
   tanpa itu garis akan menipis di kartu lebar dan menebal di kartu sempit. */
.dash-legenda{display:flex;gap:14px;font-size:11.5px;color:var(--text-muted);margin-bottom:6px}
.dash-legenda i{display:inline-block;width:11px;height:3px;border-radius:2px;
  vertical-align:middle;margin-right:5px}
.dash-svg{width:100%;height:190px;display:block;overflow:visible}
.dash-grid-line,.dash-svg .dash-grid{stroke:var(--border);stroke-width:1;
  vector-effect:non-scaling-stroke}
.dash-garis{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.dash-area{opacity:.12;stroke:none}
.dash-sumbu{font-size:11px;fill:var(--text-muted)}
.dash-duagrafik{display:grid;gap:12px}
@media (min-width:1200px){ .dash-duagrafik{grid-template-columns:1fr 1fr} }
/* 210, bukan 150. Grafiknya dibaca untuk melihat bentuk naik-turunnya,
   dan di 150px selisih hari yang satu dengan yang lain tinggal beberapa
   piksel — bedanya ada, tapi tidak terlihat. */
.dash-duagrafik .dash-svg{height:210px}
.dash-legenda b{margin-left:auto;color:var(--text);font-variant-numeric:tabular-nums}
.dash-legenda{align-items:center}

/* ══ Kepala tabel yang ikut menempel saat digulir ══════════════════════════
   Daftar 300 barang tidak bisa dibaca kalau nama kolomnya sudah lewat di atas
   layar — angka di kolom kelima berhenti punya arti.

   YANG MENGGULIR PEMBUNGKUSNYA, BUKAN HALAMAN. Ini bukan pilihan gaya:
   .lt-wrap dan .table-wrap sudah ber-overflow-x:auto untuk tabel lebar, dan
   itu MENJADIKANNYA wadah gulir. position:sticky di dalamnya menempel ke
   wadah itu — bukan ke layar — jadi selama wadahnya setinggi isinya, kepala
   tabel tetap ikut hanyut ke atas bersama halaman. Terukur: digulir 4000px,
   kepala tabelnya berada di y = -3541.

   Jadi wadahnya diberi tinggi maksimum dan menggulir sendiri. Tingginya
   diukur layout.php dari jarak wadah itu ke tepi bawah layar, karena ia
   berbeda di tiap halaman — laporan punya bilah saringan yang tinggi, master
   tidak.

   Latar kepala tabel WAJIB pekat. Yang tembus pandang akan menumpuk dengan
   baris yang lewat di belakangnya jadi bubur yang tidak terbaca — persis di
   saat kepala tabelnya paling dibutuhkan. */
.lt-wrap, .table-wrap {
  overflow: auto;
  max-height: var(--ao-tabel-tinggi, none);
}
thead th, .lt thead th { position: sticky; top: 0; z-index: 5; }

/* Kepala dua baris (mis. Laporan Daftar Stok): baris kedua menempel TEPAT di
   bawah baris pertama. Tingginya diukur, bukan ditebak — ia berubah mengikuti
   skala tampilan dan panjang judul kolomnya. */
.lt thead tr:nth-child(2) th { top: var(--ao-th1, 0px); }

/* Baris total ikut menempel di dasar: saldo akhir laporan panjang tidak lagi
   harus dicari sampai ujung gulungan. */
.lt tfoot td, .lt tfoot th { position: sticky; bottom: 0; z-index: 4; }

@media print {
  thead th, .lt thead th, .lt thead tr:nth-child(2) th,
  .lt tfoot td, .lt tfoot th { position: static !important; }
}

/* ══════════════════════════════════════════════════════════════════════
 * LAYAR TRANSAKSI — bilah alat, kepala nota, dan bilah bantuan
 * ----------------------------------------------------------------------
 * Empat layar bersaudara memakai blok ini: Retur Pembelian, Retur
 * Penjualan, Pelunasan Hutang, dan Pelunasan Piutang. Fungsinya sebangun
 * dua-dua, jadi tampilannya harus sebangun juga.
 *
 * KENAPA DISATUKAN. Sebelumnya tiap halaman membawa salinan gaya sendiri
 * dengan awalan sendiri — .rj-, .tb-, .lp- — dan salinan itu pelan-pelan
 * berbeda satu sama lain. Yang paling kelihatan: label kepala nota di sisi
 * penjualan tercetak KAPITAL, di sisi pembelian tidak, semata karena dua
 * aturan CSS yang kebetulan tidak ikut disalin. Tidak ada yang memutuskan
 * itu; ia cuma terjadi. Selama gayanya disalin per halaman, perbedaan
 * seperti itu akan lahir lagi.
 *
 * Yang TIDAK ikut ke sini: jumlah dan lebar kolom kepala nota. Tiap layar
 * punya isian yang berbeda banyaknya, jadi grid-template-columns tetap
 * ditulis di halamannya masing-masing — satu baris, tepat di bawah
 * pemakaian .trx-hdr.
 * ══════════════════════════════════════════════════════════════════════ */

.trx-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}

.trx-status{font-size:12px;padding:4px 10px;border-radius:6px}
.trx-status.saved  {background:var(--success-soft);color:var(--success-ink)}
.trx-status.unsaved{background:var(--warn-soft);   color:var(--warn-ink)}
.trx-status.error  {background:var(--danger-soft); color:var(--danger-h)}

/* align-items:start, BUKAN end. Kolom "Atas Nota" di kedua layar retur
   membawa kotak centang di bawah kotaknya, jadi selnya lebih tinggi dari
   yang lain. Dengan align-items:end, sel-sel pendek terdorong ke bawah dan
   labelnya jadi tidak sebaris — terlihat jelas di Retur Pembelian, dan
   samar-samar juga di Retur Penjualan. Semua kotak isian tingginya sama,
   jadi merapat ke atas menghasilkan baris yang rata. */
.trx-hdr{display:grid;gap:10px;align-items:start}
.trx-hdr label{
  font-size:11px;font-weight:700;color:var(--text-muted);
  display:block;margin-bottom:3px;
  text-transform:uppercase;letter-spacing:.04em;
}
.trx-hdr input,.trx-hdr select{
  width:100%;font-size:13px;padding:7px 10px;
  border:1.5px solid var(--border);border-radius:7px;
  background:var(--surface);color:var(--text);box-sizing:border-box;
}
.trx-hdr input:focus,.trx-hdr select:focus{border-color:var(--primary);outline:none}

/* Bilah bantuan tombol pintas, selalu di dasar halaman. */
.trx-hint{font-size:12px;color:var(--text-muted);display:flex;gap:24px;flex-wrap:wrap}
.trx-hint-note{
  margin-top:8px;padding-top:8px;border-top:1px solid var(--border);
  font-size:11px;color:var(--text-dim);line-height:1.6;
}

/* Barang yang diretur atas sebuah nota tapi TIDAK ada di nota itu. Dipakai
   kedua layar retur — dulu hanya ada di transreturbeli.php, dan Retur
   Penjualan yang menyalinnya nanti pasti berbeda beberapa piksel. */
.bdg-luar{
  display:inline-block;padding:0 6px;border-radius:20px;font-size:9.5px;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  white-space:nowrap;flex:0 0 auto;
  background:var(--warn-soft);color:var(--warn-ink);border:1px solid var(--warn-brd);
}

/* Kotak centang "tanpa nota asal" — sama di kedua layar retur. */
.trx-tn{
  display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;
  font-size:11px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em;margin-top:6px;
}
.trx-tn input{width:14px;height:14px;cursor:pointer;margin:0}

/* Isian yang hanya bisa dipilih lewat pencarian, bukan diketik. Digayakan
   berbeda supaya jelas bukan kotak ketik biasa — dulu tiap layar mengaturnya
   sendiri, dan dua di antaranya memakai #6366f1 mentah alih-alih var(--primary),
   jadi warna fokusnya tidak ikut berubah waktu tema diganti. */
.trx-hdr input[readonly]{background:var(--surface-2);color:var(--text-muted);cursor:pointer}
.trx-hdr input[readonly]:focus{background:var(--surface)}

/* Kaki tabel transaksi: keterangan di kiri, total di kanan. Dulu Retur
   Penjualan memakai .rj-foot dan Retur Pembelian memakai .total-bar —
   angkanya beda ukuran, beda warna, dan yang satu menulis "Rp" sementara
   yang lain tidak. */
.trx-foot{
  display:flex;justify-content:flex-end;align-items:center;gap:24px;flex-wrap:wrap;
  padding:10px 14px;background:var(--surface-2);border-top:1.5px solid var(--surface-3);
}
.trx-foot .lbl{font-size:11px;font-weight:700;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.04em}
.trx-foot .val{font-weight:700;font-family:monospace;font-size:17px;color:var(--purple-ink)}

/* Baris "belum ada isi" di tabel transaksi — miring, supaya jelas ia
   keterangan, bukan data. */
.trx-empty{padding:32px;text-align:center;color:var(--text-dim);font-size:13px;font-style:italic}

/* Isian berpasangan di kepala nota: kotak (atau dua) plus tombol cari di
   sebelahnya. Dipakai kolom Supplier/Pelanggan dan Atas Nota di kedua layar
   retur, supaya bentuknya sama persis. */
.trx-wrap{display:flex;gap:5px}
.trx-wrap input{flex:1;min-width:0}

/* Angka grafik waktu kursor lewat. Petaknya tak terlihat tapi menangkap
   kursor; garis tegak menandai hari yang sedang dibaca. */
.dash-grafik{position:relative}
.dash-petak rect{fill:transparent;cursor:crosshair}
.dash-tunjuk{stroke:var(--text-muted);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
.dash-tooltip{
  position:absolute;top:4px;z-index:3;pointer-events:none;
  background:var(--surface);border:1px solid var(--border);border-radius:7px;
  padding:6px 10px;font-size:11.5px;line-height:1.5;white-space:nowrap;
  box-shadow:0 4px 14px rgba(0,0,0,.13);color:var(--text);
}
.dash-tooltip b{display:block;font-size:11px;color:var(--text-muted);font-weight:700}
/* Angka yang belum beres — sisa alokasi, selisih bayar — diberi warna
   bahaya supaya kelihatan sebelum tombol Simpan ditekan. */
.trx-foot .val.warn{color:var(--danger-ink)}

/* ============================================================
   KOP LAPORAN
   ------------------------------------------------------------
   Disembunyikan di layar, ditampilkan saat dicetak. Aturan
   ".print-header{display:none}" milik sembilan laporan lama
   sudah melakukan separuhnya; yang di sini mengurus 25 laporan
   sisanya yang tidak punya aturan apa pun untuk kelas itu.

   !important pada cetak: sembilan laporan itu juga punya
   "@media print{.print-header{display:block!important}}"
   sendiri, dan tanpa !important di sini urutan muat yang
   menentukan siapa yang menang — sesuatu yang tidak boleh
   menentukan apakah nama toko muncul di kertas atau tidak.
   ============================================================ */
.lap-kop { display: none; }
@media print {
  .lap-kop { display: block !important; margin-bottom: 6px; text-align: center; }
  .lap-kop-toko   { font-size: 12pt; font-weight: 700; letter-spacing: .01em; }
  .lap-kop-alamat { font-size: 8pt; color: #444; margin-top: 1px; }
  .lap-kop h2     { font-size: 10.5pt !important; margin: 4px 0 1px !important;
                    text-transform: uppercase; letter-spacing: .03em; }
  .lap-kop p      { font-size: 8.5pt; color: #444; margin: 0; }
}