/*!
 * GKJ Theme v1.0 — port ke Datawarga (tanpa Bootstrap)
 * Sumber: paket "GKJ Theme" (gaya sinodegkj.or.id). Token & nilai kontras sama persis;
 * komponen dipetakan ke class app.css yang SUDAH ADA (.sidebar, .card, .btn, .table, .stat-card, dst).
 *
 * Aktif hanya bila <html data-theme="gkj"> dan BUKAN dark mode. Dark mode & tema "Klasik"
 * (navy & emas) tetap memakai app.css apa adanya. Dimuat SETELAH app.css.
 * Selector html[data-theme="gkj"]:not(.dark) (0,2,1) sengaja lebih spesifik dari :root override
 * warna instansi_settings di layout, jadi tema ini menang tanpa !important.
 */

/* ── 0. Huruf self-host (WOFF2 subset Latin; Inter, Lato, Poppins — lisensi OFL) ───────────
   Taruh berkas di folder yang sama dgn CSS ini (folder baru di assets/ tidak ter-serve di hosting). */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("font-inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("font-inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("font-inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("font-inter-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 400; font-style: normal; font-display: swap; src: url("font-lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-weight: 700; font-style: normal; font-display: swap; src: url("font-lato-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("font-poppins-400.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("font-poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("font-poppins-600.woff2") format("woff2"); }

/* ── 1. Token → variabel Datawarga ─────────────────────────────── */
html[data-theme="gkj"]:not(.dark) {
  --gkj-header-bg:    #F8FAFC;
  --gkj-surface-soft: #F3F6FC;
  --gkj-primary:      #0A84FD;
  --gkj-sky-strong:   #1E5F8C;
  --gkj-lambang:      #0084BB;

  --primary:       #0B6BC8;   /* tombol & tautan teks (5,31:1) */
  --primary-dark:  #0A5FB2;   /* hover */
  --primary-light: #0A84FD;   /* fokus, ikon, garis aktif */
  --accent:        #0084BB;
  --accent-light:  #82BFE0;
  --accent-bg:     #F3F6FC;
  --bg:            #EDF0F6;
  --surface:       #FFFFFF;
  --border:        #DCE2E9;
  --text:          #324059;
  --muted:         #5A6A88;   /* 5,2:1 */
  --info:          #1E5F8C;
  --info-bg:       #E6F1FA;
  --radius:        6px;
  --radius-lg:     16px;
  --shadow:        0 6px 24px rgba(50,64,89,.06);
  --shadow-md:     0 8px 28px rgba(50,64,89,.12);
  --font:          'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:  'Poppins', 'Lato', system-ui, sans-serif;
}

html[data-theme="gkj"]:not(.dark) body { font-size: 15px; }
html[data-theme="gkj"]:not(.dark) a:hover { color: #1279E0; }

/* ── 2. Tipografi ──────────────────────────────────────────────── */
html[data-theme="gkj"]:not(.dark) :is(h1,h2,h3,h4,.topbar-title,.card-title,.btn,.nav-link,.tab-link,
  .sidebar-brand-name,.auth-brand-name,.stat-value,.modal-header h3,.dashboard-greeting h2) {
  font-family: var(--font-display);
}
html[data-theme="gkj"]:not(.dark) :is(h1,.dashboard-greeting h2,.auth-form-header h2) { color: var(--gkj-sky-strong); font-weight: 600; }
html[data-theme="gkj"]:not(.dark) .dashboard-greeting h2 { font-size: 1.6rem; }
html[data-theme="gkj"]:not(.dark) .card-title { font-weight: 600; }
html[data-theme="gkj"]:not(.dark) .topbar-title { color: var(--gkj-sky-strong); }
html[data-theme="gkj"]:not(.dark) .form-label { font-size: .87rem; font-weight: 700; }
html[data-theme="gkj"]:not(.dark) .form-control::placeholder { color: var(--muted); opacity: 1; }
/* angka rupiah/statistik rata & lebar sama */
html[data-theme="gkj"]:not(.dark) :is(.stat-value,.table td.num,.num) { font-variant-numeric: tabular-nums; }

/* ── 3. Sidebar terang, item aktif bergaris kiri biru ─────────── */
html[data-theme="gkj"]:not(.dark) .sidebar { background: var(--surface); border-right: 1px solid var(--border); }
html[data-theme="gkj"]:not(.dark) .sidebar-brand,
html[data-theme="gkj"]:not(.dark) .sidebar-user,
html[data-theme="gkj"]:not(.dark) .sidebar-divisi-switch { border-bottom-color: var(--border); }
html[data-theme="gkj"]:not(.dark) .sidebar-footer { border-top-color: var(--border); }
html[data-theme="gkj"]:not(.dark) .sidebar-brand-name,
html[data-theme="gkj"]:not(.dark) .sidebar-user-name { color: var(--text); }
html[data-theme="gkj"]:not(.dark) .sidebar-brand-sub,
html[data-theme="gkj"]:not(.dark) .sidebar-user-role { color: var(--muted); }
html[data-theme="gkj"]:not(.dark) .sidebar-logo-text { color: var(--gkj-lambang); }
html[data-theme="gkj"]:not(.dark) .sidebar-divisi-switch .form-control {
  background: var(--gkj-surface-soft); border-color: var(--border); color: var(--text);
}
html[data-theme="gkj"]:not(.dark) .sidebar-divisi-switch .form-control option { background: #fff; color: var(--text); }

html[data-theme="gkj"]:not(.dark) .nav-link {
  color: var(--text); border-left: 3px solid transparent; letter-spacing: 0;
}
html[data-theme="gkj"]:not(.dark) .nav-link .nav-icon { color: var(--muted); }
html[data-theme="gkj"]:not(.dark) .nav-link:hover { background: var(--gkj-surface-soft); color: var(--text); }
html[data-theme="gkj"]:not(.dark) .nav-link.active {
  background: var(--gkj-surface-soft); color: var(--primary);
  border-left-color: var(--gkj-primary); font-weight: 500;
}
html[data-theme="gkj"]:not(.dark) .nav-link.active .nav-icon { color: var(--gkj-primary); }
html[data-theme="gkj"]:not(.dark) .nav-link-danger { color: var(--danger) !important; }
html[data-theme="gkj"]:not(.dark) .nav-link-danger:hover { background: var(--danger-bg) !important; color: var(--danger) !important; }
html[data-theme="gkj"]:not(.dark) .nav-section-header { color: var(--muted); font-weight: 700; }
html[data-theme="gkj"]:not(.dark) .nav-section-header:hover { color: var(--text); }
html[data-theme="gkj"]:not(.dark) .btn-dark-toggle { color: var(--muted); }
html[data-theme="gkj"]:not(.dark) .btn-dark-toggle:hover { color: var(--text); }

/* ── 4. Topbar ─────────────────────────────────────────────────── */
html[data-theme="gkj"]:not(.dark) .topbar { background: var(--gkj-header-bg); box-shadow: none; }

/* ── 5. Tombol ─────────────────────────────────────────────────── */
html[data-theme="gkj"]:not(.dark) .btn { font-weight: 500; }
html[data-theme="gkj"]:not(.dark) .btn-secondary { background: #E3E8F0; color: var(--text); }
html[data-theme="gkj"]:not(.dark) .btn-secondary:hover { background: #D3DAE5; }

/* ── 6. Kartu & statistik ──────────────────────────────────────── */
html[data-theme="gkj"]:not(.dark) .card { border: 0; }
html[data-theme="gkj"]:not(.dark) .card-header { background: transparent; }
html[data-theme="gkj"]:not(.dark) .stat-card {
  border: 0; border-radius: 24px; padding: 1.25rem 1.5rem;
}
html[data-theme="gkj"]:not(.dark) .stat-value { font-weight: 600; color: var(--text); }
html[data-theme="gkj"]:not(.dark) .stat-card-primary .stat-icon,
html[data-theme="gkj"]:not(.dark) .stat-card-info .stat-icon { color: var(--gkj-primary); }

/* ── 7. Tabel & form ───────────────────────────────────────────── */
html[data-theme="gkj"]:not(.dark) .table th {
  background: var(--gkj-surface-soft); color: var(--text);
  font-size: .87rem; font-weight: 700; text-transform: none; letter-spacing: 0;
}
html[data-theme="gkj"]:not(.dark) .table th a { color: var(--text); }
html[data-theme="gkj"]:not(.dark) .table-striped tbody tr:nth-child(even) td { background: #F8FAFD; }
html[data-theme="gkj"]:not(.dark) .table tbody tr:hover td { background: var(--gkj-surface-soft); }
html[data-theme="gkj"]:not(.dark) .form-control:focus {
  border-color: var(--gkj-primary); box-shadow: 0 0 0 .2rem rgba(10,132,253,.2);
}
html[data-theme="gkj"]:not(.dark) :focus-visible { outline: 2px solid var(--gkj-primary); outline-offset: 2px; }
html[data-theme="gkj"]:not(.dark) .tab-link.active { border-bottom-color: var(--gkj-primary); }
html[data-theme="gkj"]:not(.dark) .page-link.active { border-color: var(--primary); }

/* ── 8. Halaman masuk ──────────────────────────────────────────── */
html[data-theme="gkj"]:not(.dark) .auth-body { background: var(--bg); }
html[data-theme="gkj"]:not(.dark) .auth-card { border: 0; border-radius: 24px; }
html[data-theme="gkj"]:not(.dark) .auth-logo {
  background: var(--gkj-surface-soft); border-bottom: 1px solid var(--border); border-radius: 24px 24px 0 0;
}
html[data-theme="gkj"]:not(.dark) .auth-brand-name { color: var(--gkj-sky-strong); }
html[data-theme="gkj"]:not(.dark) .auth-brand-tagline { color: var(--muted); }
html[data-theme="gkj"]:not(.dark) .auth-logo-text { color: var(--gkj-lambang); }

/* ── 9. Mobile: input 16px (cegah zoom iPhone), target sentuh 44px ─ */
@media (max-width: 575.98px) {
  html[data-theme="gkj"]:not(.dark) :is(.form-control,select,textarea) { font-size: 16px; }
  html[data-theme="gkj"]:not(.dark) .btn:not(.btn-sm) { min-height: 44px; }
  html[data-theme="gkj"]:not(.dark) .stat-card { border-radius: 16px; padding: 1rem; }
}