/* ============================================================
   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 ---- */
@media (max-width: 900px) {
  .hamburger { display: flex; }
  .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);
  }
  .topnav.open { display: flex; }
  .tnav-item { flex-direction: column; }
  .tnav-link { padding: 10px 20px; border-bottom: none; border-radius: 0; }
  .tnav-dropdown {
    position: static; box-shadow: none; border: none;
    background: var(--topbar-active); border-radius: 0;
    padding: 0; display: none;
  }
  .tnav-item.open .tnav-dropdown { display: block; }
  .tnav-dd-item { color: var(--topbar-fg-dim); padding: 8px 32px; }
  .tnav-dd-item:hover { background: var(--topbar-hover); color: var(--topbar-fg); }
  .tnav-dd-item.active { background: var(--topbar-active); color: var(--topbar-fg); }
  .tnav-group-label { color: var(--topbar-fg-dim); padding-left: 32px; }
  .tnav-group { border-top-color: var(--topbar-active); }
  /* Mobile: flyout jadi flat expand */
  .tnav-flyout-trigger { color: var(--topbar-fg-dim); padding: 8px 32px; }
  .tnav-flyout-trigger:hover { background: var(--topbar-hover); color: var(--topbar-fg); }
  .tnav-flyout-trigger.active { background: var(--topbar-active); color: var(--topbar-fg); }
  .tnav-flyout { position: static; box-shadow: none; border: none; border-radius: 0; background: var(--topbar-active); padding: 0; display: none; }
  .tnav-flyout-item.open > .tnav-flyout { display: block; }
  .tnav-flyout .tnav-dd-item { padding-left: 48px; }
}

/* ---- Layout ---- */
.page-wrapper { max-width: 1200px; margin: 0 auto; padding: 24px 16px; }
.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; }
}