/*
 * Tema Portal Bang Ical — warna solid & profesional (dipakai login.html dan reports.html).
 * Dimuat SETELAH tailwind dan <style> halaman, sehingga menimpa utilitas lama tanpa menyentuh logika.
 *
 * Prinsip:
 *  - Kuning logo (#FACC15) = warna utama: tombol aksi, penanda aktif, panel merek. Teks di atasnya hitam arang.
 *  - Hitam arang (#1C1917) untuk teks tegas & sidebar. Merah hanya untuk bahaya/error (beda dari portal Chima).
 *  - Permukaan datar: tanpa gradien, tanpa kaca buram, bayangan hanya untuk dropdown & modal.
 */
:root {
  --brand: #1C1917;
  --brand-hover: #000000;
  --brand-dark: #0C0A09;
  --brand-tint: #FEFCE8;
  --brand-line: #FDE047;

  --accent: #FACC15;       /* kuning tulisan logo */
  --accent-hover: #EAB308;
  --accent-soft: #FEF9C3;
  --accent-ink: #1C1917;   /* teks di atas kuning */

  --ink: #111827;
  --ink-2: #374151;
  --ink-3: #6B7280;
  --ink-4: #9CA3AF;
  --line: #E5E7EB;
  --line-strong: #D1D5DB;

  --page: #FAF8EF; /* krem hangat */
  --surface: #FFFFFF;
  --muted: #F9FAFB;
  --dark: #1F2937;

  --ok: #15803D;
  --ok-bg: #F0FDF4;
  --ok-line: #BBF7D0;
  --warn: #92400E;
  --warn-bg: #FFFBEB;
  --warn-line: #FDE68A;

  --radius: 10px;
  --radius-sm: 8px;
}

/* Tailwind menaruh font-family di kelas .font-sans (pada <body>), jadi harus ditimpa lewat kelas itu juga. */
:root { --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; }
html, body, .font-sans, button, input, select, textarea { font-family: var(--font) !important; }
.font-mono, code, pre { font-family: "Cascadia Mono", "Consolas", ui-monospace, monospace !important; }
html body[class], body {
  background-color: var(--page) !important;
  background-image: none !important;
  color: var(--ink-2);
}
h1, h2, h3, h4 { color: var(--ink); letter-spacing: -0.01em; }

/* ---------- Ikon (sprite SVG) ---------- */
.ic {
  display: inline-block;
  width: 1em; height: 1em; flex: none;
  stroke: currentColor; fill: none; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.125em;
}
.ic-lg { width: 1.25em; height: 1.25em; }

/* ---------- Permukaan datar ---------- */
.card-soft, .bg-white {
  background-color: var(--surface);
}
.card-soft {
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: none !important;
}
.shadow, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xs, .shadow-inner { box-shadow: none !important; }
.shadow-xl, .shadow-2xl { box-shadow: 0 12px 32px rgba(17, 24, 39, 0.16) !important; }

.rounded-3xl, .rounded-2xl { border-radius: 12px !important; }
.rounded-xl { border-radius: var(--radius-sm) !important; }
.rounded-lg { border-radius: 6px !important; }

[class*="backdrop-blur"] { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.animate-pulse { animation: none !important; }

.hero-slate-card {
  background: var(--dark) !important;   /* solid, bukan gradien */
  color: #F9FAFB !important;
}
.bg-pattern { background-image: none !important; }

/* ---------- Header & navigasi ---------- */
header.sticky, header.w-full {
  background: var(--surface) !important;
  border-top: 5px solid var(--accent);
  border-bottom: 1px solid var(--line) !important;
}
.brand-mark {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; flex: none; border: 1px solid var(--line);
  background: var(--surface);
}

/* Tombol/tab utama: kuning solid + teks hitam. Elemen non-tombol yang gelap (kartu hero) dibiarkan netral. */
button.bg-slate-800, button.bg-slate-900, a.bg-slate-800, a.bg-slate-900,
button.bg-emerald-600, button.bg-emerald-700, button.bg-emerald-800,
a.bg-emerald-600, a.bg-emerald-700,
button.bg-rose-600, button.bg-rose-700, button.bg-brand-600 {
  background-color: var(--accent) !important;
  color: var(--accent-ink) !important;
  border-color: var(--accent) !important;
}
button.bg-slate-800 *, button.bg-slate-900 *, a.bg-slate-800 *, a.bg-slate-900 *,
button.bg-emerald-600 *, button.bg-emerald-700 *, button.bg-brand-600 * { color: inherit !important; }
button.bg-slate-800:hover, button.bg-slate-900:hover, a.bg-slate-800:hover, a.bg-slate-900:hover,
button.bg-emerald-600:hover, button.bg-emerald-700:hover, button.bg-emerald-800:hover,
a.bg-emerald-600:hover, a.bg-emerald-700:hover,
button.bg-rose-600:hover, button.bg-rose-700:hover, button.bg-brand-600:hover,
button.hover\:bg-slate-900:hover, button.hover\:bg-emerald-700:hover, button.hover\:bg-emerald-800:hover {
  background-color: var(--accent-hover) !important;
}
/* Kartu hero gelap: aksen kuning di kiri */
.hero-slate-card { border-left: 6px solid var(--accent) !important; }
button:disabled { opacity: .55; cursor: not-allowed; }

/* Tab navigasi tidak aktif */
a.bg-transparent.text-slate-600:hover { background: var(--muted) !important; color: var(--ink) !important; }

/* ---------- Palet: buang warna dekoratif ---------- */
/* biru / indigo / ungu / sky -> netral */
.bg-blue-50, .bg-indigo-50, .bg-purple-50, .bg-sky-50, .bg-violet-50, .bg-cyan-50 { background-color: var(--muted) !important; }
.bg-blue-100, .bg-indigo-100, .bg-purple-100 { background-color: #F3F4F6 !important; }
.text-blue-600, .text-blue-700, .text-blue-800, .text-indigo-600, .text-indigo-700, .text-indigo-800,
.text-purple-600, .text-purple-700, .text-purple-800, .text-sky-700, .text-violet-700 { color: var(--ink-2) !important; }
.border-blue-100, .border-blue-200, .border-indigo-100, .border-indigo-200, .border-purple-100, .border-purple-200,
.border-blue-200\/60, .border-indigo-200\/60, .border-purple-200\/60 { border-color: var(--line) !important; }
.bg-blue-500, .bg-indigo-500, .bg-purple-500, .bg-blue-600, .bg-indigo-600, .bg-purple-600 { background-color: var(--ink-3) !important; }

/* rose / merah -> merah brand */
.bg-rose-50, .bg-red-50 { background-color: var(--brand-tint) !important; }
.text-rose-500, .text-rose-600, .text-rose-700, .text-red-500, .text-red-600, .text-red-700 { color: var(--brand) !important; }
.border-rose-100, .border-rose-200, .border-rose-200\/60, .border-red-100, .border-red-200 { border-color: var(--brand-line) !important; }
.bg-rose-500, .bg-red-500 { background-color: var(--brand) !important; }

/* hijau = sukses (semantik) */
.bg-emerald-50 { background-color: var(--ok-bg) !important; }
.text-emerald-600, .text-emerald-700, .text-emerald-800, .text-emerald-900 { color: var(--ok) !important; }
.border-emerald-100, .border-emerald-200, .border-emerald-200\/60, [class*="border-emerald-200/60"] { border-color: var(--ok-line) !important; }
.bg-emerald-500 { background-color: #16A34A !important; }

/* kuning = peringatan (semantik) */
.bg-amber-50, .bg-amber-50\/70, [class*="bg-amber-50/70"] { background-color: var(--warn-bg) !important; }
.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900 { color: var(--warn) !important; }
.border-amber-100, .border-amber-200, .border-amber-200\/70, .border-amber-200\/80,
[class*="border-amber-200/70"], [class*="border-amber-200/80"] { border-color: var(--warn-line) !important; }

/* abu-abu: sedikit lebih netral & kontras dari slate kebiruan */
.bg-slate-50, .bg-slate-50\/70, [class*="bg-slate-50/"] { background-color: var(--muted) !important; }
.bg-slate-100 { background-color: #F3F4F6 !important; }
.text-slate-900, .text-slate-800 { color: var(--ink) !important; }
.text-slate-700, .text-slate-600 { color: var(--ink-2) !important; }
.text-slate-500 { color: var(--ink-3) !important; }
.text-slate-400 { color: var(--ink-4) !important; }
.border-slate-100 { border-color: #F3F4F6 !important; }
.border-slate-200, .border-slate-200\/60, .border-slate-200\/70, .border-slate-200\/80,
[class*="border-slate-200/"] { border-color: var(--line) !important; }
.border-slate-300 { border-color: var(--line-strong) !important; }

/* ---------- Formulir ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not(.border-0),
select:not(.border-0), textarea {
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--surface);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus, button:focus-visible, a:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.20) !important;
  border-color: var(--brand) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }

/* ---------- Tabel ---------- */
table { border-collapse: collapse; }
table thead th, table thead td {
  background: var(--muted) !important;
  color: var(--ink-3) !important;
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong) !important;
}
table tbody tr { border-color: var(--line) !important; }
table tbody tr:hover { background: var(--muted); }

/* ---------- Scrollbar ---------- */
.custom-scrollbar::-webkit-scrollbar-track { background: #F3F4F6; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--line-strong); }

/* ---------- Cetak ---------- */
@media print {
  header.sticky { border-top: 0 !important; }
  .card-soft { border-color: #D1D5DB !important; }
}

/* ---------- Kelas brand lama -> hitam arang brand (#1C1917) ---------- */
.bg-brand-600, .hover\:bg-brand-600:hover { background-color: var(--brand) !important; }
.bg-brand-700, .hover\:bg-brand-700:hover { background-color: var(--brand-hover) !important; }
.bg-brand-50, .hover\:bg-brand-50:hover { background-color: var(--brand-tint) !important; }
.bg-brand-100 { background-color: #FEF9C3 !important; }
.text-brand-600 { color: var(--brand) !important; }
.text-brand-700, .hover\:text-brand-700:hover { color: var(--brand-hover) !important; }
.border-brand-200, .border-brand-500 { border-color: var(--brand-line) !important; }
/* Chip ikon pada kartu: seragam netral (bukan warna-warni) */
.card-soft div.w-8.h-8, .card-soft span.w-8.h-8, .card-soft div.w-9.h-9 {
  background: var(--muted) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
}

/* ================= TIPOGRAFI (lebih besar, lebih terbaca) ================= */
html { font-size: 16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { font-size: 15px; line-height: 1.5; }

.text-xs      { font-size: 13px !important; line-height: 1.5 !important; }
.text-sm      { font-size: 14.5px !important; line-height: 1.5 !important; }
.text-base    { font-size: 16px !important; }
.text-lg      { font-size: 18px !important; }
.text-xl      { font-size: 20px !important; }
.text-2xl     { font-size: 26px !important; line-height: 1.2 !important; }
.text-3xl     { font-size: 30px !important; line-height: 1.2 !important; }
/* ukuran mikro buatan sendiri (text-[10px] dst.) dinaikkan agar nyaman dibaca */
.text-\[8px\]  { font-size: 11px !important; }
.text-\[9px\]  { font-size: 11.5px !important; }
.text-\[10px\] { font-size: 12px !important; }
.text-\[11px\] { font-size: 12.5px !important; }
.text-\[12px\] { font-size: 13px !important; }

.font-black, .font-extrabold { font-weight: 700 !important; }
.uppercase { letter-spacing: 0.03em; }
.tracking-wider, .tracking-widest { letter-spacing: 0.03em !important; }
h1 { font-size: 19px; font-weight: 700; }
h2 { font-weight: 650; }

/* kontras teks: abu terang (#9CA3AF) di atas putih gagal keterbacaan -> naikkan */
.text-slate-400, .text-gray-400 { color: #6B7280 !important; }
.text-slate-500, .text-gray-500 { color: #4B5563 !important; }
.placeholder-slate-400::placeholder, input::placeholder { color: #9CA3AF !important; }

/* ================= NAVIGASI & KOMPONEN ================= */
/* Tab utama: muat satu baris (sebelumnya membungkus ke baris kedua) */
#navTabReports, #navTabBranches, #navTabSdui, #navTabExpenses {
  padding: 8px 13px !important; gap: 7px !important; font-size: 13.5px !important;
  border-radius: 8px !important; white-space: nowrap; font-weight: 600;
}
#navTabReports .ic, #navTabBranches .ic, #navTabSdui .ic, #navTabExpenses .ic { width: 1.1em; height: 1.1em; opacity: .9; }

/* Pil/lencana kecil: tinggi seragam, teks terbaca */
.rounded-full.px-2, .rounded-full.px-2\.5, .rounded-full.px-3 { line-height: 1.35; }

/* Tabel: teks 13.5px, baris lega */
table th { font-size: 12.5px !important; padding-top: 10px !important; padding-bottom: 10px !important; letter-spacing: .02em; }
table td { font-size: 13.5px !important; }
table td, table th { vertical-align: middle; }

/* Kartu KPI: angka lebih menonjol */
#kpiRevenue, #kpiTransactions, #kpiAov, #kpiItemsSold { font-size: 28px !important; line-height: 1.15 !important; font-weight: 700 !important; letter-spacing: -0.02em; }

/* Input tanggal & select agar tinggi seragam */
input[type="date"], select { min-height: 36px; }

/* ================= IKON & PEMILIH ================= */
/* Select: panah kustom yang seragam (bukan panah bawaan browser) */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 15px;
  padding-right: 30px !important;
  cursor: pointer;
}
select:hover { border-color: var(--ink-4); }
select option { color: var(--ink); background: #fff; }

/* Pemilih cabang di bilah navigasi */
#outletFilterSelect { font-size: 13.5px; font-weight: 600; color: var(--ink); }
#outletFilterSelect:focus { box-shadow: none !important; }
div:has(> #outletFilterSelect) {
  background: var(--surface) !important; border: 1px solid var(--line-strong) !important;
  border-radius: 8px !important; transition: border-color .15s, box-shadow .15s;
}
div:has(> #outletFilterSelect):hover { border-color: var(--ink-4) !important; }
div:has(> #outletFilterSelect):focus-within { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(185, 28, 28, .18); }
div:has(> #outletFilterSelect) .ic { color: var(--brand); }

/* Menu peran (dropdown akun): ikon dalam kotak seragam, centang merah */
#roleDropdownMenu .text-lg {
  width: 34px; height: 34px; border-radius: 8px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--muted); border: 1px solid var(--line); color: var(--ink-2);
}
#roleDropdownMenu button:hover .text-lg { background: var(--brand-tint); border-color: var(--brand-line); color: var(--brand); }
#roleDropdownMenu [id^="check_"] { color: var(--brand) !important; }
#roleIcon { display: inline-flex; color: var(--ink-2); }

/* Tombol ikon bundar (tutup modal, dsb.) */
button.rounded-full .ic { width: 14px; height: 14px; }
button .ic, a .ic { flex: none; }