/* ============================================================
   AsFin — Coretax DJP Theme (NobleUI override)
   Palet resmi Coretax; mode terang & gelap.
   ============================================================ */

/* ---------- Token mentah Coretax ---------- */
:root {
  --asfin-blue-base: #212C5F;
  --asfin-blue-70: #161D3F;
  --asfin-blue-60: #1C254F;
  --asfin-blue-50: #464F7A;
  --asfin-blue-40: #6B7294;
  --asfin-blue-30: #9095AF;
  --asfin-blue-20: #B5B9CA;
  --asfin-blue-10: #D3D5DF;

  --asfin-yellow-base: #FFC91B;
  --asfin-yellow-50: #FFD241;
  --asfin-yellow-40: #FFDB67;
  --asfin-yellow-20: #FFEDB3;
  --asfin-yellow-10: #FFF4D1;

  --asfin-sky-base: #39A9EA;
  --asfin-sky-50: #5AB7ED;
  --asfin-sky-10: #D7EEFB;
  --asfin-sky-05: #EEF9FF;

  --asfin-neutral-base: #464646;
  --asfin-neutral-50: #656565;
  --asfin-neutral-30: #A3A3A3;
  --asfin-neutral-10: #DADADA;

  --asfin-danger: #DC2626;
  --asfin-success: #16A34A;

  /* Mode terang */
  --asfin-bg: #f5f4ef;
  --asfin-surface: #FFFFFF;
  --asfin-surface-2: #faf7ef;
  --asfin-text: #131B44;
  --asfin-text-muted: #6B7294;
  --asfin-border: rgba(33, 44, 95, .14);

  --asfin-text-secondary: #2B3358;
  --asfin-text-body: #5F6265;
  --asfin-text-faint: #9095AF;

  --asfin-brand: #212C5F;
  --asfin-brand-hover: #161D3F;
  --asfin-on-brand: #FFFFFF;

  --asfin-accent: #FFC91B;
  --asfin-accent-2: #FFD241;

  --asfin-line: rgba(33, 44, 95, .08);
  --asfin-line-3: rgba(33, 44, 95, .22);
  --asfin-hover: rgba(33, 44, 95, .04);

  --asfin-shadow-card: 0 15px 30px rgba(33, 44, 95, .08);
  --asfin-shadow-lg: 0 25px 45px rgba(33, 44, 95, .12);

  --asfin-radius-5: 5px;
  --asfin-radius-10: 10px;
  --asfin-radius-15: 15px;
  --asfin-radius-100: 100px;

  /* Map ke Bootstrap/NobleUI (terang) */
  --bs-primary: var(--asfin-brand);
  --bs-primary-rgb: 33, 44, 95;
  --bs-secondary: var(--asfin-text-muted);
  --bs-secondary-rgb: 107, 114, 148;
  --bs-success: var(--asfin-success);
  --bs-success-rgb: 22, 163, 74;
  --bs-danger: var(--asfin-danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-warning: var(--asfin-accent);
  --bs-warning-rgb: 255, 201, 27;
  --bs-info: var(--asfin-sky-base);
  --bs-info-rgb: 57, 169, 234;

  --bs-body-bg: var(--asfin-bg);
  --bs-body-color: var(--asfin-text);
  --bs-body-color-rgb: 19, 27, 68;

  --bs-light: var(--asfin-surface-2);
  --bs-dark: var(--asfin-text);

  --bs-border-color: var(--asfin-border);
  --bs-link-color: var(--asfin-brand);
  --bs-link-hover-color: var(--asfin-brand-hover);

  --bs-input-bg: var(--asfin-surface);
  --bs-input-color: var(--asfin-text);
  --bs-input-border-color: var(--asfin-border);

  --bs-navbar-color: var(--asfin-text);
  --bs-navbar-hover-color: var(--asfin-brand);
  --bs-navbar-active-color: var(--asfin-brand);
}

/* ---------- Mode gelap ---------- */
html[data-nui-mode="dark"] {
  --asfin-bg: #0f0f0f;
  --asfin-surface: #212121;
  --asfin-surface-2: #272727;
  --asfin-text: #f1f1f1;
  --asfin-text-muted: #aaaaaa;
  --asfin-border: rgba(255, 255, 255, .12);

  --asfin-text-secondary: rgba(255, 255, 255, .72);
  --asfin-text-body: rgba(255, 255, 255, .62);
  --asfin-text-faint: rgba(255, 255, 255, .40);

  --asfin-brand: #FFC91B;
  --asfin-brand-hover: #E0AE0F;
  --asfin-on-brand: #131B44;

  --asfin-line: rgba(255, 255, 255, .08);
  --asfin-line-3: rgba(255, 255, 255, .22);
  --asfin-hover: rgba(255, 255, 255, .06);

  --asfin-shadow-card: 0 15px 30px rgba(0, 0, 0, .35);
  --asfin-shadow-lg: 0 25px 45px rgba(0, 0, 0, .45);

  /* Map Bootstrap gelap */
  --bs-primary: var(--asfin-brand);
  --bs-primary-rgb: 255, 201, 27;
  --bs-secondary: var(--asfin-text-muted);
  --bs-secondary-rgb: 170, 170, 170;
  --bs-success: var(--asfin-success);
  --bs-danger: var(--asfin-danger);
  --bs-warning: var(--asfin-accent);
  --bs-info: var(--asfin-sky-base);

  --bs-body-bg: var(--asfin-bg);
  --bs-body-color: var(--asfin-text);
  --bs-body-color-rgb: 241, 241, 241;

  --bs-light: var(--asfin-surface-2);
  --bs-dark: var(--asfin-text);

  --bs-border-color: var(--asfin-border);
  --bs-link-color: var(--asfin-brand);
  --bs-link-hover-color: var(--asfin-brand-hover);

  --bs-input-bg: var(--asfin-surface);
  --bs-input-color: var(--asfin-text);
  --bs-input-border-color: var(--asfin-border);

  --bs-navbar-color: var(--asfin-text);
  --bs-navbar-hover-color: var(--asfin-brand);
  --bs-navbar-active-color: var(--asfin-brand);
}

/* ---------- Dasar ---------- */
body {
  background-color: var(--asfin-bg) !important;
  color: var(--asfin-text) !important;
}

a {
  color: var(--bs-link-color);
}
a:hover, a:focus {
  color: var(--bs-link-hover-color);
}

.text-muted { color: var(--asfin-text-muted) !important; }
.text-secondary { color: var(--asfin-text-secondary) !important; }
.text-body { color: var(--asfin-text-body) !important; }
.text-faint { color: var(--asfin-text-faint) !important; }
.border { border-color: var(--asfin-border) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--asfin-border) !important; }

/* ---------- Kartu ---------- */
.card {
  background-color: var(--asfin-surface);
  border-color: var(--asfin-border);
  box-shadow: var(--asfin-shadow-card);
  border-radius: var(--asfin-radius-10);
}
.card-header {
  background-color: var(--asfin-surface);
  border-bottom-color: var(--asfin-line);
  color: var(--asfin-text);
}

/* ---------- Navbar & sidebar ---------- */
.navbar {
  background-color: var(--asfin-surface);
  border-bottom: 1px solid var(--asfin-line);
}
.sidebar {
  background-color: var(--asfin-surface);
  border-right: 1px solid var(--asfin-line);
}
.sidebar-brand {
  color: var(--asfin-text);
}
.sidebar .nav .nav-item .nav-link {
  color: var(--asfin-text-secondary);
}
.sidebar .nav .nav-item .nav-link:hover,
.sidebar .nav .nav-item .nav-link.active {
  background-color: var(--asfin-hover);
  color: var(--asfin-brand);
}
.sidebar .nav .nav-item.nav-category {
  color: var(--asfin-text-muted);
}

/* ---------- Dropdown ---------- */
.dropdown-menu {
  background-color: var(--asfin-surface);
  border-color: var(--asfin-border);
  box-shadow: var(--asfin-shadow-lg);
}
.dropdown-item {
  color: var(--asfin-text);
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--asfin-hover);
  color: var(--asfin-brand);
}
.dropdown-divider { border-color: var(--asfin-line); }

/* ---------- Tabel ---------- */
/* Template ini memakai Bootstrap 4, yang mengatur warna baris lewat variabel
   --bs-table-accent-bg / --bs-table-striped-color (bukan --bs-table-bg-state
   milik Bootstrap 5). Tanpa override ini, baris ganjil memakai warna bawaan
   (#e9ecef + teks #000) sehingga teks gelap di atas latar gelap pada mode
   malam nyaris tidak terbaca. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--asfin-text);
  --bs-table-border-color: var(--asfin-line);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-bg: var(--asfin-hover);
  --bs-table-striped-color: var(--asfin-text);
  --bs-table-hover-bg: var(--asfin-hover);
  --bs-table-hover-color: var(--asfin-text);
  --bs-table-active-bg: var(--asfin-hover);
  --bs-table-active-color: var(--asfin-text);
  color: var(--asfin-text);
}
/* Baris ganjil (table-striped) dan hover tetap memakai warna teks tema */
.table-striped > tbody > tr:nth-of-type(odd) > * {
  color: var(--asfin-text);
}
.table-hover > tbody > tr:hover > * {
  color: var(--asfin-text);
}
.table thead th {
  color: var(--asfin-text-secondary);
  border-bottom-color: var(--asfin-line-3);
}

/* ---------- Form ---------- */
.form-control, .form-select {
  background-color: var(--bs-input-bg);
  color: var(--bs-input-color);
  border-color: var(--bs-input-border-color);
}
.form-control:focus, .form-select:focus {
  background-color: var(--bs-input-bg);
  color: var(--bs-input-color);
  border-color: var(--asfin-brand);
  box-shadow: 0 0 0 .2rem rgba(255, 201, 27, .35);
}
.input-group-text {
  background-color: var(--asfin-surface-2);
  color: var(--asfin-text-muted);
  border-color: var(--asfin-border);
}
.form-control::placeholder { color: var(--asfin-text-faint); }
.form-control:disabled, .form-select:disabled {
  background-color: var(--asfin-surface-2);
  color: var(--asfin-text-muted);
}

/* ---------- Tombol ---------- */
.btn-primary {
  background-color: var(--asfin-brand);
  border-color: var(--asfin-brand);
  color: var(--asfin-on-brand);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active {
  background-color: var(--asfin-brand-hover);
  border-color: var(--asfin-brand-hover);
  color: var(--asfin-on-brand);
}
.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 .2rem rgba(255, 201, 27, .35);
}
.btn-outline-primary {
  color: var(--asfin-brand);
  border-color: var(--asfin-brand);
  background-color: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active {
  background-color: var(--asfin-brand);
  border-color: var(--asfin-brand);
  color: var(--asfin-on-brand);
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
  box-shadow: 0 0 0 .2rem rgba(255, 201, 27, .35);
}
.btn-light {
  background-color: var(--asfin-surface-2);
  border-color: var(--asfin-line);
  color: var(--asfin-text);
}
.btn-light:hover, .btn-light:focus {
  background-color: var(--asfin-hover);
  border-color: var(--asfin-line-3);
  color: var(--asfin-text);
}

/* ---------- Utilitas tambahan ---------- */
.btn-accent {
  background-color: var(--asfin-accent);
  border-color: var(--asfin-accent);
  color: var(--asfin-on-brand);
}
.btn-accent:hover, .btn-accent:focus {
  background-color: var(--asfin-accent-2);
  border-color: var(--asfin-accent-2);
  color: var(--asfin-on-brand);
}
.text-brand { color: var(--asfin-brand) !important; }
.bg-brand { background-color: var(--asfin-brand) !important; color: var(--asfin-on-brand) !important; }
.border-accent { border-color: var(--asfin-accent) !important; }

/* ---------- Badge ---------- */
.badge.bg-primary, .badge.text-bg-primary { background-color: var(--asfin-brand) !important; color: var(--asfin-on-brand) !important; }
.badge.bg-secondary, .badge.text-bg-secondary { background-color: var(--asfin-surface-2) !important; color: var(--asfin-text-muted) !important; border: 1px solid var(--asfin-line); }
.badge.bg-success, .badge.text-bg-success { background-color: var(--asfin-success) !important; color: #fff !important; }
.badge.bg-danger, .badge.text-bg-danger { background-color: var(--asfin-danger) !important; color: #fff !important; }
.badge.bg-warning, .badge.text-bg-warning { background-color: var(--asfin-accent) !important; color: var(--asfin-on-brand) !important; }

/* ---------- Modal ---------- */
.modal-content {
  background-color: var(--asfin-surface);
  border-color: var(--asfin-border);
  box-shadow: var(--asfin-shadow-lg);
}
.modal-header, .modal-footer {
  border-color: var(--asfin-line);
}

/* ---------- Pagination & breadcrumb ---------- */
.page-link {
  background-color: var(--asfin-surface);
  color: var(--asfin-brand);
  border-color: var(--asfin-border);
}
.page-link:hover, .page-link:focus {
  background-color: var(--asfin-hover);
  color: var(--asfin-brand-hover);
  border-color: var(--asfin-line-3);
}
.page-item.active .page-link {
  background-color: var(--asfin-brand);
  border-color: var(--asfin-brand);
  color: var(--asfin-on-brand);
}
.page-item.disabled .page-link {
  background-color: var(--asfin-surface-2);
  color: var(--asfin-text-faint);
  border-color: var(--asfin-line);
}
.breadcrumb { background-color: transparent; }
.breadcrumb-item a { color: var(--asfin-brand); }
.breadcrumb-item.active { color: var(--asfin-text-muted); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--asfin-text-faint); }

/* ---------- Alert ---------- */
.alert-primary { background-color: rgba(33, 44, 95, .08); color: var(--asfin-brand); border-color: rgba(33, 44, 95, .14); }
html[data-nui-mode="dark"] .alert-primary { background-color: rgba(255, 201, 27, .10); color: var(--asfin-brand); border-color: rgba(255, 201, 27, .20); }
.alert-secondary { background-color: var(--asfin-surface-2); color: var(--asfin-text-muted); border-color: var(--asfin-line); }
.alert-success { background-color: rgba(22, 163, 74, .10); color: var(--asfin-success); border-color: rgba(22, 163, 74, .20); }
.alert-danger { background-color: rgba(220, 38, 38, .10); color: var(--asfin-danger); border-color: rgba(220, 38, 38, .20); }
.alert-warning { background-color: rgba(255, 201, 27, .12); color: #8a6a00; border-color: rgba(255, 201, 27, .25); }
html[data-nui-mode="dark"] .alert-warning { color: var(--asfin-accent); }

/* ---------- Footer ---------- */
.footer {
  background-color: var(--asfin-surface);
  border-top: 1px solid var(--asfin-line);
  color: var(--asfin-text-muted);
}
.footer a { color: var(--asfin-brand); }

/* ---------- Settings / tutorial sidebar ---------- */
.settings-sidebar {
  background-color: var(--asfin-surface);
  border-left: 1px solid var(--asfin-line);
}
.settings-sidebar .sidebar-body { color: var(--asfin-text); }
.settings-sidebar .settings-sidebar-toggler { color: var(--asfin-text-muted); }

/* ---------- Accordion & list group ---------- */
.accordion-item {
  background-color: var(--asfin-surface);
  border-color: var(--asfin-line);
}
.accordion-button {
  background-color: var(--asfin-surface);
  color: var(--asfin-text);
}
.accordion-button:not(.collapsed) {
  background-color: var(--asfin-hover);
  color: var(--asfin-brand);
}
.accordion-button::after { filter: none; }
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(255, 201, 27, .35); border-color: var(--asfin-brand); }
.accordion-body { color: var(--asfin-text-body); }

.list-group-item {
  background-color: var(--asfin-surface);
  color: var(--asfin-text);
  border-color: var(--asfin-line);
}
.list-group-item-action:hover, .list-group-item-action:focus {
  background-color: var(--asfin-hover);
  color: var(--asfin-brand);
}
.list-group-item.active {
  background-color: var(--asfin-brand);
  border-color: var(--asfin-brand);
  color: var(--asfin-on-brand);
}

/* ---------- Fokus global ---------- */
*:focus-visible, .btn:focus, .form-check-input:focus {
  outline: 0;
}
.form-check-input:focus {
  box-shadow: 0 0 0 .2rem rgba(255, 201, 27, .35);
  border-color: var(--asfin-brand);
}

/* ---------- Scrollbar (WebKit) ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--asfin-bg); }
::-webkit-scrollbar-thumb { background: var(--asfin-blue-30); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--asfin-blue-40); }
html[data-nui-mode="dark"] ::-webkit-scrollbar-thumb { background: var(--asfin-neutral-50); }
html[data-nui-mode="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--asfin-neutral-30); }