:root{
  --primary:#4f46e5; --primary-d:#4338ca;
  --bg:#f1f5f9; --card:#ffffff; --text:#0f172a; --muted:#64748b;
  --success:#10b981; --danger:#ef4444; --warning:#f59e0b;
}
body{ background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }

/* Login */
.auth-page{ min-height:100vh; display:grid; place-items:center;
  background:linear-gradient(135deg,#4f46e5 0%,#7c3aed 50%,#db2777 100%); }
.auth-card{ background:#fff; padding:2.25rem; border-radius:1rem; width:100%; max-width:400px; }
.auth-logo{ width:64px;height:64px;border-radius:16px;margin:0 auto 1rem;
  display:grid;place-items:center;font-size:1.75rem;color:#fff;
  background:linear-gradient(135deg,var(--primary),#7c3aed); }

/* Layout */
.app-wrap{ display:flex; min-height:100vh; }
.sidebar{ width:250px; background:#0f172a; color:#cbd5e1; padding:1rem .75rem; position:sticky; top:0; height:100vh; overflow-y:auto; }
.sidebar a{ color:#cbd5e1; text-decoration:none; display:flex; gap:.6rem; align-items:center;
  padding:.6rem .8rem; border-radius:.5rem; font-size:.92rem; }
.sidebar a:hover,.sidebar a.active{ background:rgba(255,255,255,.08); color:#fff; }
.main{ flex:1; min-width:0; padding:1.25rem 1.75rem; }
.card-stat{ border:0; border-radius:.9rem; box-shadow:0 4px 16px rgba(15,23,42,.05); }
.card-stat .icon{ width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:1.25rem; }

/* ========== TOPBAR ========== */
.topbar{
  display:flex; align-items:center; gap:.75rem;
  padding:.6rem 1rem; background:#fff; border-radius:.75rem;
  box-shadow:0 2px 10px rgba(15,23,42,.04); margin-bottom:1.25rem;
}
.topbar .badge-cabang{
  font-size:.72rem; padding:.35rem .6rem; border-radius:.5rem;
  background:#eef2ff; color:var(--primary-d); font-weight:600;
}
.user-chip{
  display:flex; align-items:center; gap:.6rem; padding:.35rem .8rem;
  background:#f8fafc; border-radius:.75rem; cursor:pointer; border:1px solid #e2e8f0;
}
.user-chip:hover{ background:#eef2ff; }
.avatar{
  width:34px;height:34px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary),#7c3aed);
  color:#fff;display:grid;place-items:center;font-weight:700;font-size:.85rem;
}

/* ========== SIDEBAR OVERLAY (mobile) ========== */
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:1040;
}
@media (max-width:991.98px){
  .sidebar{ position:fixed; left:0; top:0; z-index:1041;
    transform:translateX(-100%); transition:transform .25s ease; }
  .sidebar.show{ transform:translateX(0); }
  .sidebar-backdrop.show{ display:block; }
  .main{ padding:1rem !important; }
}

/* ========== DASHBOARD ========== */
.stat-card{
  background:#fff;border-radius:.9rem;padding:1.1rem 1.2rem;
  box-shadow:0 4px 16px rgba(15,23,42,.05); display:flex; gap:1rem; align-items:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.stat-card:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(15,23,42,.08); }
.stat-card .icon{ width:48px;height:48px;border-radius:12px;
  display:grid;place-items:center;font-size:1.35rem;color:#fff;flex-shrink:0; }
.stat-card .icon.bg-indigo  { background:linear-gradient(135deg,#4f46e5,#7c3aed); }
.stat-card .icon.bg-emerald { background:linear-gradient(135deg,#10b981,#059669); }
.stat-card .icon.bg-amber   { background:linear-gradient(135deg,#f59e0b,#d97706); }
.stat-card .icon.bg-rose    { background:linear-gradient(135deg,#f43f5e,#e11d48); }
.stat-card .label{ font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; font-weight:600; }
.stat-card .value{ font-size:1.35rem; font-weight:800; line-height:1.1; }

.quick-action{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:1rem .75rem; border-radius:.85rem; text-decoration:none; color:#0f172a;
  background:#f8fafc; border:1px solid #e2e8f0; transition:.15s ease; height:100%;
}
.quick-action:hover{ background:#eef2ff; border-color:#c7d2fe; color:var(--primary-d); transform:translateY(-2px); }
.quick-action i{ font-size:1.6rem; margin-bottom:.35rem; color:var(--primary); }
.quick-action span{ font-size:.82rem; font-weight:600; }

/* ========== FLASH TOAST ========== */
.flash-wrap{ position:fixed; top:1rem; right:1rem; z-index:2000; display:flex; flex-direction:column; gap:.5rem; }
.flash-item{
  min-width:280px; padding:.7rem 1rem; border-radius:.65rem; color:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.12); animation:slideIn .3s ease, fadeOut .4s ease 3.6s forwards;
  display:flex; gap:.6rem; align-items:center; font-size:.9rem;
}
.flash-item.success{ background:#10b981; }
.flash-item.danger{ background:#ef4444; }
.flash-item.warning{ background:#f59e0b; }
.flash-item.info{ background:#3b82f6; }
@keyframes slideIn{ from{ transform:translateX(120%); opacity:0; } to{ transform:translateX(0); opacity:1; } }
@keyframes fadeOut{ to{ opacity:0; transform:translateX(120%); visibility:hidden; } }

/* Tables */
.table thead th{ font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
.table tbody td{ font-size:.88rem; vertical-align:middle; }

/* ============================================================
   PRINT — FINAL OVERRIDE (v2)
   Aturan ini WAJIB di paling bawah file.
   Menetralisir sisa rule lama + sembunyikan chrome saja.
   ============================================================ */
@media print {
  /* 1) PAKSA semua elemen di body menjadi visible
        (mengalahkan body * { visibility: hidden } dari rule lama
         manapun, karena specific + !important) */
  html body,
  html body *,
  html body *::before,
  html body *::after {
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* 2) Sembunyikan chrome/navigasi */
  .sidebar,
  .sidebar-backdrop,
  .topbar,
  .flash-wrap,
  .dropdown,
  .dropdown-menu,
  nav.pagination,
  .pagination,
  .d-print-none,
  .no-print,
  .quick-action {
    display: none !important;
    visibility: hidden !important;
  }

  /* 3) Sembunyikan tombol & form filter */
  .btn,
  button,
  form {
    display: none !important;
  }
  form.keep-print { display: block !important; }

  /* 4) Reset layout */
  html, body {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #000 !important;
  }
  .app-wrap { display: block !important; }
  .main,
  main.main {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 5) Kartu & tabel */
  .card, .card-stat {
    box-shadow: none !important;
    border: 1px solid #d1d5db !important;
    background: #fff !important;
    page-break-inside: avoid;
  }
  .card-body { padding: .75rem !important; }

  .table { font-size: 10.5px !important; }
  .table thead th {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .badge {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  tr { page-break-inside: avoid; }
  h6 { page-break-after: avoid; }
}
/* ============================================================
   PRINT — LAPORAN: sembunyikan kartu ringkasan & chart.
   Sisakan: judul + tabel saja.
   ============================================================ */
@media print {
  /* 1) Sembunyikan seluruh baris kartu ringkasan
        (baris yang berisi .p-3.rounded — hanya ada di laporan) */
  .main .row.g-2.mb-3:has(> [class*="col-"] > .p-3.rounded) {
    display: none !important;
  }

  /* 2) Fallback untuk browser lama tanpa :has()
        — sembunyikan tiap kotak ringkasan */
  .main .row.g-2.mb-3 > [class*="col-"] > .p-3.rounded {
    display: none !important;
  }

  /* 3) Sembunyikan chart di halaman Pendapatan
        (div container chart dengan height:320px) */
  .main div[style*="height:320px"] {
    display: none !important;
  }

  /* 4) Rapatkan jarak setelah judul */
  .card-stat .d-flex.flex-wrap.justify-content-between.align-items-center.mb-3 {
    margin-bottom: .5rem !important;
  }
}
/* ============================================================
   PRINT TOTAL ROW — Hanya tampil di print, bukan di screen
   ============================================================ */
tfoot.print-total { display: none !important; }

@media print {
  tfoot.print-total { display: table-footer-group !important; }

  tfoot.print-total th,
  tfoot.print-total td {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    border-top: 2px solid #475569 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Sembunyikan catatan/footer text di bawah tabel */
  .card-body > small.text-muted,
  .card-body > .text-muted.small,
  .card-body > .no-print {
    display: none !important;
  }
}
/* ==========================================
   MANUAL BOOK (PANDUAN) STYLES
   ========================================== */
.doc-sidebar { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.doc-sidebar a { color: #475569; text-decoration: none; padding: .35rem .75rem; border-radius: .375rem; display: block; font-size: .88rem; }
.doc-sidebar a:hover { background: #f1f5f9; color: #0f172a; }
.doc-sidebar a.active { background: #eef2ff; color: #4f46e5; font-weight: 600; }
.doc-category { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: #94a3b8; margin: 1.25rem 0 .5rem .75rem; }
.doc-content h2 { font-size: 1.35rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid #e2e8f0; }
.doc-content h3 { font-size: 1.1rem; font-weight: 600; margin-top: 1.5rem; }
.doc-content p { line-height: 1.7; color: #334155; }
.doc-content img { max-width: 100%; border-radius: .5rem; box-shadow: 0 4px 12px rgba(0,0,0,.1); margin: 1rem 0; }
.doc-content code { background: #f1f5f9; color: #db2777; padding: .15rem .35rem; border-radius: .25rem; font-size: .85em; }
.doc-content pre { background: #0f172a; color: #e2e8f0; padding: 1rem; border-radius: .5rem; overflow-x: auto; }
.doc-content blockquote { border-left: 4px solid #4f46e5; padding-left: 1rem; color: #475569; font-style: italic; margin: 1rem 0; background: #f8fafc; padding: .75rem 1rem; border-radius: 0 .5rem .5rem 0; }
.toc { position: sticky; top: 1rem; font-size: .85rem; border-left: 2px solid #e2e8f0; padding-left: 1rem; }
.toc a { color: #64748b; text-decoration: none; display: block; margin-bottom: .4rem; }
.toc a:hover { color: #4f46e5; }
/* ==========================================
   MOBILE RESPONSIVE ENHANCEMENTS (GLOBAL)
   ========================================== */
@media (max-width: 768px) {
  /* Perkecil padding utama agar layar lebih luas */
  .main { padding: 0.75rem !important; }
  
  /* Sembunyikan tanggal di topbar agar tidak berdesakan */
  .topbar .text-muted { display: none !important; }
  
  /* Ringkas Card Statistik */
  .stat-card { padding: 0.8rem 1rem; gap: 0.75rem; }
  .stat-card .icon { width: 40px; height: 40px; font-size: 1.1rem; }
  .stat-card .value { font-size: 1.15rem; }
  
  /* Tabel agar bisa di-scroll dengan indikator visual */
  .table-responsive {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .table th, .table td { white-space: nowrap; }
  
  /* Form input font size min 16px untuk mencegah iPhone auto-zoom */
  .form-control, .form-select, .input-group-text { font-size: 16px !important; }
  
  /* Tombol-tombol besar untuk jempol */
  .btn { padding: 0.5rem 1rem; font-size: 0.95rem; }
  .btn-sm { padding: 0.35rem 0.65rem; font-size: 0.85rem; }
  
  /* Modal full width di HP */
  .modal-dialog { margin: 0.5rem; }
  
  /* Sembunyikan tombol close bawaan jika terlalu kecil */
  .btn-close { padding: 0.75rem; }
}