:root{
  --bg:#0b1020; --panel:#121938; --muted:#8aa0ff;
  --text:#f0f1f6; --soft:#1a234a; --line:#273160;
  --primary:#4f7cff; --danger:#ff5f7a; --warn:#ffb454;
  --ok:#39d98a;
  --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,.25);
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:5; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:linear-gradient(160deg,#0b1020 0%,#101a36 60%,#0f1730 100%);
  color:var(--text);
}
.app{display:flex; min-height:100vh}

/* ===== Sidebar & Layout (Desktop default) ===== */
.sidebar{
  width:290px; background:linear-gradient(180deg,#0e1533,#0a1026);
  border-right:1px solid var(--line); padding:18px; position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; gap:14px;
}
.brand{font-weight:800; font-size:20px; letter-spacing:.5px; margin:6px 6px 8px}
.menu{display:flex; flex-direction:column; gap:8px}
.menu-sep{opacity:.7; padding:8px 6px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.06em}
.nav-link{
  text-align:left; background:transparent; color:var(--text); border:1px solid transparent;
  padding:10px 12px; border-radius:10px; cursor:pointer; transition:.15s;
}
.nav-link:hover{background:rgba(255,255,255,.06)}
.nav-link.active{background:var(--soft); border-color:var(--line)}
.sidebar-footer{margin-top:auto; padding:8px 6px} /* <— no opacity here */

/* tombol di footer */
.sidebar-footer .btn{
  background:#223064; color:var(--text); border:1px solid var(--line);
}

.main{flex:1; display:flex; flex-direction:column}

/* ===== Topbar (base; akan di-override di Anti Putih) ===== */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 22px; border-bottom:1px solid var(--line);
  background:rgba(0,0,0,.15); backdrop-filter: blur(8px);
  position:sticky; top:0; z-index:10;
}
.topbar h1{margin:0; font-size:20px}
.topbar .btn{margin-left:8px}

/* ===== Sections ===== */
.view{padding:22px}
.hidden{display:none}

/* ===== Cards ===== */
.cards{display:grid; grid-template-columns:repeat(4,1fr); gap:16px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow);
}
.card-title{opacity:.8; font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.stat{font-size:26px; font-weight:800; margin-top:10px}

/* ===== Panel ===== */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  margin-top:18px; padding:16px; box-shadow:var(--shadow);
}
.panel-header{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap}
.actions .btn{margin-left:8px}

/* ===== Table (Desktop) ===== */
.table{width:100%; border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--line); padding:10px; font-size:14px}
.table th{opacity:.8; text-align:left}
.table td.num,.table th.num{text-align:right}
.table tfoot th{border-top:1px solid var(--line)}
.table-wrap{overflow:auto; border:1px solid var(--line); border-radius:12px}

/* ===== Buttons ===== */
.btn{
  background:#223064; color:var(--text); border:1px solid var(--line);
  padding:8px 12px; border-radius:10px; cursor:pointer; transition:.15s;
  min-height:44px;
}
.btn:hover{filter:brightness(1.1)}
.btn.primary{background:linear-gradient(90deg,#496bff,#5e8dff); border-color:#4a73ff}
.btn.danger{background:linear-gradient(90deg,#ff5678,#ff7b95); border-color:#ff6a86}
.btn.warning{background:linear-gradient(90deg,#ffb65a,#ffc879); border-color:#ffc06b}
.btn.tiny{padding:4px 8px; font-size:12px; min-height:32px}
.btn.icon{ width:44px; padding:0; display:inline-flex; align-items:center; justify-content:center }

/* ===== Forms ===== */
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.grid-2 .full{grid-column:1/-1}

label{display:flex; flex-direction:column; gap:6px; font-size:14px}
input,select,textarea{
  background:#0e1633; color:var(--text); border:1px solid var(--line);
  padding:10px 12px; border-radius:10px; outline:none; min-height:44px;
}
textarea{min-height:110px}
input[type="month"], input[type="date"]{padding:8px 10px}

/* Items grid (quotation/invoice) */
.items{border:1px dashed var(--line); border-radius:12px; padding:10px}
.items-header{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 40px; gap:8px; opacity:.8; font-size:13px; margin-bottom:6px}
.item-row{display:grid; grid-template-columns:2fr 1fr 1fr 1fr 40px; gap:8px; align-items:center; margin-bottom:8px}
.it-subtotal{text-align:right; padding-right:8px}

/* ===== Dialog ===== */
.tx-form{min-width:360px; position:relative;}
.tx-form menu{display:flex; justify-content:flex-end; gap:8px; margin-top:12px}
dialog{border:none; border-radius:14px; padding:0; overflow:hidden}
dialog::backdrop{background:rgba(0,0,0,.55)}

/* ===== Print Placeholder ===== */
.print-area{display:none}

/* ===================== PRINT RULES (GLOBAL) ===================== */
@page { margin: 12mm; }
@media print {
  /* Sembunyikan SEMUA panel di tiga view dokumen */
  #view-receipt .panel,
  #view-quotation .panel,
  #view-invoice .panel {
    display: none !important;
  }

  /* Tapi pastikan area cetak tetap muncul */
  #printAreaReceipt,
  #printAreaQuote,
  #printAreaInv {
    display: block !important;
  }print-area{display:block !important; page-break-inside:avoid; margin-top:4mm;}
}

/* ====== Responsive (Desktop → Tablet) ====== */
@media (max-width:1100px){
  .cards{grid-template-columns:repeat(2,1fr)}
}

/* ====== Responsive (MOBILE BOOSTER) ====== */
@media (max-width:768px){
  /* App grid → sidebar jadi drawer */
  .app{display:grid; grid-template-columns:1fr; min-height:100dvh;}
  .main{padding:12px}

  .sidebar{
    position: fixed; inset: 0 auto 0 0; width: min(88vw, 280px);
    transform: translateX(-100%); transition: transform .25s ease;
    height: 100dvh; z-index: 1000; overflow:auto;
    box-shadow: var(--shadow);
  }
  .sidebar.open{ transform: translateX(0) }

  /* Topbar: siapkan ruang untuk tombol menu */
  .topbar{ position:sticky; top:0; z-index:900 }
  .topbar .btn.menu{ display:inline-flex; }
}

/* Sembunyikan tombol ☰ di desktop */
@media (min-width:769px){
  .topbar .btn.menu{ display:none; }
}

/* ====== Table → Card Mode (Mobile) ====== */
@media (max-width:768px){
  .table-wrap{ overflow:visible; border:none }
  table.table{ width:100%; border-collapse:collapse }
  table.table thead{ display:none }
  table.table, table.table tbody, table.table tr, table.table td{ display:block; width:100% }
  table.table tr{
    background:var(--panel); border:1px solid var(--line);
    border-radius:12px; box-shadow:var(--shadow);
    padding:10px; margin-bottom:10px;
  }
  table.table td{
    display:grid; grid-template-columns: 42% 1fr; gap:8px; border:0; padding:6px 0;
  }
  table.table td::before{
    content: attr(data-label);
    color: var(--muted); font-weight:600; letter-spacing:.03em;
  }
  table.table td.num{ text-align:right }
}

/* ====== Cards & Grids (Mobile) ====== */
@media (max-width:720px){
  .cards{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .tx-form{min-width:unset; width:100%}
}

/* ===== Close (X) ===== */
.close-x{
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
  width:28px; height:28px;
  border-radius:50%;
  line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  font-weight:800; cursor:pointer;
}
.close-x:hover{ filter:brightness(1.15) }
.panel-header{ position:relative; }
.panel-header .close-x{ margin-left:8px }
.tx-form .close-x{ position:absolute; top:8px; right:8px }

/* ======== CONTRAST FIX (Buttons & Inputs) ======== */
button,
.btn{
  background:#223064;
  color:var(--text);
  border:1px solid var(--line);
}
/* tombol di sel tabel tanpa varian */
.table td button:not(.primary):not(.danger):not(.warning),
.table td .btn:not(.primary):not(.danger):not(.warning){
  background:#223064;
  color:var(--text);
  border-color:#273160;
}
/* disabled state */
button:disabled,
.btn:disabled,
.btn[disabled],
.sidebar-footer .btn:disabled,
.sidebar-footer .btn[disabled],
.sidebar-footer .btn.is-disabled,
.sidebar-footer .btn[aria-disabled="true"]{
  background:#1b244a !important;
  color:#9fb0ff !important;
  border-color:#273160 !important;
  cursor:not-allowed;
  opacity:.95;
}
/* ikon date/month */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator{
  filter: invert(0.85) brightness(1.1);
  opacity:.9;
}
/* aksi bar kecil */
.actions .btn,
.row-actions .btn{
  background:#223064;
  color:var(--text);
  border-color:#273160;
}

/* ====== TOPBAR FINAL (Anti Putih Bulletproof) ====== */
.topbar,
main > .topbar,
.app .main > .topbar{
  background: var(--panel) !important;     /* ganti ke #0e1633 jika mau lebih biru */
  border-bottom: 1px solid var(--line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  isolation: isolate;
  position: sticky; top: 0; z-index: 10;
  overflow: hidden;                         /* untuk layer ::before */
}
.topbar::before,
main > .topbar::before,
.app .main > .topbar::before{
  content: "";
  position: absolute; inset: 0;
  background: var(--panel);                 /* atau #0e1633 */
  z-index: -1;
  pointer-events: none;
}
.main{ background: transparent !important; }

/* ====== PANEL-HEADER BUTTON FIX (Terapkan, dll.) ====== */
.panel-header .btn,
.panel-header button{
  background:#223064 !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  -webkit-appearance:none;
  appearance:none;
}
.panel-header .btn:disabled,
.panel-header button:disabled,
#btnDashFilter[disabled]{
  background:#1b244a !important;
  color:#9fb0ff !important;
  border-color:#273160 !important;
  cursor:not-allowed;
}
#btnDashFilter{
  background:#223064 !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
}
.panel-header input[type="month"]{
  background:#0e1633 !important;
  color:var(--text) !important;
  border:1px solid var(--line) !important;
  border-radius:10px;
}
.panel-header input[type="month"]::-webkit-calendar-picker-indicator{
  filter: invert(0.85) brightness(1.1);
  opacity:.9;
}
/* === Sidebar: netral gelap (bukan biru) === */
.sidebar{
  background:#f9fbfb;   /* latar sidebar */
  color:#100305;         /* warna teks */
}
.sidebar .brand{ color:#f20606; }

.sidebar .menu .nav-link{
  background:transparent;
  color:#043342;         /* teks menu */
  border:0;
}
.sidebar .menu .nav-link:hover{
  background:#0ac9de;    /* hover item */
  color:#ffffff;
}
.sidebar .menu .nav-link.active{
  background:#212631;    /* item aktif */
  color:#ffffff;
  border:1px solid #2e3441;
}

.sidebar-footer{
  border-top:1px solid #2e3441;
  color:#131211;
}
/* === Sidebar: tebalkan & perbesar teks === */
.sidebar .brand{
  font-weight: 900;      /* judul/brand lebih tebal */
  font-size: 42px;       /* perbesar judul */
}

.sidebar .menu .nav-link{
  font-weight: 900;      /* BOLD item menu */
  font-size: 15px;     /* perbesar teks menu */
  line-height: 1.3;
}

.sidebar .menu .nav-link.active{
  font-weight: 800;      /* item aktif ekstra tebal */
}

.sidebar .menu-sep{
  font-weight: 700;      /* header section (LAPORAN, DOKUMEN, dst) */
  font-size: 20px;
  letter-spacing: .08em;
}

/* Supaya tetap rapi di mobile */
@media (max-width: 768px){
  .sidebar .brand{ font-size: 20px; }
  .sidebar .menu .nav-link{ font-size: 14.5px; }
}
/* ==== Perbaiki tombol + Item di Quotation & Invoice ==== */
.items > button#btnQuoteAddItem,
.items > button#btnInvAddItem {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  border-radius: 10px;

  /* warna kontras di tema gelap */
  background: #3b82f6;          /* biru – silakan ganti */
  color: #fff !important;        /* pastikan teks terlihat */
  border: 1px solid #2563eb;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

.items > button#btnQuoteAddItem:hover,
.items > button#btnInvAddItem:hover {
  filter: brightness(1.05);
}

/* Biar baris item juga lebih “kelihatan” di tema gelap (opsional) */
.item-row{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
}
.items-header{
  color: #e2e8f0;
  font-weight: 600;
}
/* =========================== PRINT — FINAL PRO ============================ */
:root{
  --ink:#000; --ink-2:#222; --ink-3:#555;
  --line-ink:#000; --fill-10:#f2f2f2;
}
@page { size: A4; margin: 12mm; }

@media print {
  /* Sembunyikan UI */
  .topbar, .sidebar, .sidebar-footer, .cards, .actions, .row-actions,
  .btn, dialog, .tx-form, .no-print,
  #view-receipt .panel, #view-quotation .panel, #view-invoice .panel { display:none !important; }

  /* Tampilkan area cetak */
  #printAreaReceipt, #printAreaQuote, #printAreaInv, .print-area { display:block !important; }

  /* Kontras penuh */
  html,body{ background:#fff !important; }
  *{ color:#000 !important; text-shadow:none !important; box-shadow:none !important;
     filter:none !important; opacity:1 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  a[href]:after{ content:"" !important; }

  /* Kanvas */
  .doc-wrap{ max-width:180mm; margin:0 auto; font-size:11pt; line-height:1.35; }
  .doc-title{ text-align:center; font-size:16pt; font-weight:800; letter-spacing:.02em; margin:0 0 10pt 0; color:var(--ink-2) !important; }
  .doc-header{ display:grid; gap:8pt; grid-template-columns:1fr auto; align-items:flex-start; margin-bottom:10pt; }
  .doc-header .brand{ font-weight:800; font-size:12pt; color:var(--ink-2) !important; }
  .doc-header .muted{ color:var(--ink-3) !important; font-size:10pt; }

  /* Tabel meta */
  .meta-table{ width:100%; border-collapse:collapse; table-layout:fixed; margin:0 0 10pt 0; }
  .meta-table th,.meta-table td{ border:0.6pt solid var(--line-ink); padding:6pt 8pt; vertical-align:top; }
  .meta-table th{ width:32%; text-align:left; font-weight:700; background:#fff; color:var(--ink-2) !important; }

  /* Tabel item */
  .doc-table{ width:100%; border-collapse:collapse; margin:0 0 10pt 0; }
  .doc-table thead th{ font-weight:800; text-transform:uppercase; background:var(--fill-10); }
  .doc-table th,.doc-table td{ border:0.6pt solid var(--line-ink) !important; padding:6pt 8pt !important; }
  .doc-table .num,.doc-table td.text-right{ text-align:right; }

  /* Totals kanan */
  .totals{ margin-left:auto; width:min(80mm,70%); border-collapse:collapse; }
  .totals th,.totals td{ border:0.6pt solid var(--line-ink); padding:6pt 8pt; }
  .totals th{ text-align:left; width:60%; }
  .totals tr:last-child th,.totals tr:last-child td{ font-weight:800; font-size:12pt; }

  /* Catatan & tanda tangan */
  .note{ margin-top:6pt; font-size:10pt; }
  .sign-row{ display:flex; gap:12mm; justify-content:flex-end; margin-top:16mm; }
  .sign-box{ width:60mm; text-align:center; border:0.6pt solid var(--line-ink); padding:10mm 6mm 6mm; border-radius:2pt; }
  .sign-name{ margin-top:18mm; font-weight:700; text-decoration:underline; }
  .sign-role{ margin-top:2mm; }

  /* ====== KHUSUS KWITANSI (gbr 1) ====== */
  #printAreaReceipt .doc-header{ grid-template-columns:1fr 60mm; }
  .amount-words{ border:0.6pt dashed var(--line-ink); border-radius:12pt; padding:6pt 10pt; display:inline-block; font-weight:700; margin:4pt 0 10pt; }
  .kw-items .col-no{ width:16mm; text-align:center; }
  .kw-items .col-desc{ width:auto; }
  .kw-items .col-amt{ width:38mm; text-align:right; }
  .kw-bottom{ display:grid; grid-template-columns:1fr 60mm; gap:10pt; margin-top:8pt; align-items:start; }
  .kw-info td,.kw-info th{ border:0; padding:2pt 0; }
  .kw-total-box{ border:0.6pt solid var(--line-ink); padding:6pt 8pt; text-align:right; font-weight:800; }
  .kw-attn{ border:0.6pt solid var(--line-ink); min-height:26mm; padding:6pt 8pt; }

  /* ====== KHUSUS INVOICE (gbr 2) ====== */
  #printAreaInv .doc-header{ grid-template-columns:1fr 68mm; }
  #printAreaInv .summary-mini{ border:0.6pt solid var(--line-ink); padding:6pt 8pt; }
  #printAreaInv .summary-mini .row{ display:flex; justify-content:space-between; gap:8pt; }
  #printAreaInv .billto{ border:0.6pt solid var(--line-ink); padding:8pt; margin:6pt 0 10pt; }
  #printAreaInv .footer-grid{ display:grid; grid-template-columns:1fr 60mm; gap:10pt; align-items:start; margin-top:12pt; }

  /* ====== KHUSUS PENAWARAN (gbr 3) ====== */
  #printAreaQuote .doc-header{ grid-template-columns:1fr 70mm; }
  #printAreaQuote .meta-box{ border:0.6pt solid var(--line-ink); padding:8pt; }
  #printAreaQuote .notes{ font-size:10pt; line-height:1.4; margin-top:10pt; }
}