/* =====================================================================
   Tema Presensi Toko Central — terang & simpel, warna dari logo CL
   (navy #2E415B + kuning #FDF064), tanpa gradasi.
   Dimuat SETELAH CSS Mazer. Selector diawali `html:root` agar
   spesifisitasnya setara `html[data-bs-theme=dark] ...` milik app-dark.css,
   sehingga satu aturan berlaku untuk mode terang & gelap (nilai lewat token).
   ===================================================================== */

:root {
  /* Navy logo — aksen non-teks (ikon, indikator, grafik, fokus). */
  --c-brand: #2E415B;
  --c-brand-rgb: 46, 65, 91;
  /* Kuning logo — HANYA di atas navy/latar gelap (di atas putih cuma 1,3:1). */
  --c-accent: #FDF064;
  --c-primary: #2E415B;           /* teks putih 10,4:1 */
  --c-primary-rgb: 46, 65, 91;
  --c-primary-hover: #243449;
  --c-primary-active: #1B2838;
  --c-primary-text: #2E415B;
  --c-primary-soft: #EAEFF6;
  --c-primary-soft-text: #2E415B;
  --c-primary-border: #C5D0E0;

  --c-bg: #F4F7FB;
  --c-surface: #FFFFFF;
  --c-surface-2: #F8FAFC;
  --c-border: #E2E8F0;
  --c-text: #0F172A;
  --c-text-2: #334155;
  --c-muted: #64748B;

  --c-success: #15803D;
  --c-success-soft: #DCFCE7;
  --c-success-text: #15803D;
  --c-warning: #B45309;
  --c-warning-accent: #F59E0B;
  --c-warning-soft: #FEF3C7;
  --c-warning-text: #B45309;
  --c-danger: #DC2626;
  --c-danger-soft: #FEE2E2;
  --c-danger-text: #B91C1C;

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

html[data-bs-theme=dark] {
  /* Navy logo nyaris tak terlihat di latar gelap (1,6:1) → versi lebih terang. */
  --c-brand: #9DB4D6;
  --c-brand-rgb: 157, 180, 214;
  --c-primary: #4A6591;           /* teks putih 5,9:1 */
  --c-primary-rgb: 74, 101, 145;
  --c-primary-hover: #5773A0;
  --c-primary-active: #3F5780;
  --c-primary-text: #9DB4D6;
  --c-primary-soft: rgba(157, 180, 214, .16);
  --c-primary-soft-text: #B7C8E2;
  --c-primary-border: rgba(157, 180, 214, .4);

  --c-bg: #151521;
  --c-surface: #1E1E2D;
  --c-surface-2: #26263A;
  --c-border: #2E2E44;
  --c-text: #E5E7EB;
  --c-text-2: #CBD5E1;
  --c-muted: #9CA3AF;

  --c-success-soft: rgba(34, 197, 94, .16);
  --c-success-text: #4ADE80;
  --c-warning-soft: rgba(245, 158, 11, .16);
  --c-warning-text: #FBBF24;
  --c-danger-soft: rgba(239, 68, 68, .16);
  --c-danger-text: #F87171;
}

/* ---------- Variabel Bootstrap ---------- */
html:root {
  --bs-blue: var(--c-brand);
  --bs-cyan: var(--c-brand);
  --bs-primary: var(--c-primary);
  --bs-primary-rgb: var(--c-primary-rgb);
  --bs-info: var(--c-primary);
  --bs-info-rgb: var(--c-primary-rgb);
  --bs-primary-text-emphasis: var(--c-primary-soft-text);
  --bs-primary-bg-subtle: var(--c-primary-soft);
  --bs-primary-border-subtle: var(--c-primary-border);
  --bs-info-text-emphasis: var(--c-primary-soft-text);
  --bs-info-bg-subtle: var(--c-primary-soft);
  --bs-info-border-subtle: var(--c-primary-border);
  --bs-link-color: var(--c-primary-text);
  --bs-link-color-rgb: 46, 65, 91;
  --bs-link-hover-color: var(--c-primary-hover);
  --bs-link-hover-color-rgb: 36, 52, 73;
  --bs-heading-color: var(--c-text);
  --bs-body-bg: var(--c-bg);
  --bs-gradient: none;
  --bs-body-font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html:root[data-bs-theme=dark] {
  --bs-link-color-rgb: 157, 180, 214;
  --bs-link-hover-color: #B7C8E2;
  --bs-link-hover-color-rgb: 183, 200, 226;
}

html:root .text-primary, html:root .text-info { color: var(--c-primary-text) !important; }
html:root .text-muted { color: var(--c-muted) !important; }
/* Kuning bawaan Mazer di atas putih hanya ~1,6:1. */
html:root .text-warning { color: var(--c-warning-text) !important; }

/* ---------- Tombol ---------- */
html:root .btn { font-weight: 600; border-radius: var(--radius-sm); }
/* Ikon + teks di tombol: sejajar tengah dengan jarak tetap. Bootstrap Icons
   menggeser glyph turun (vertical-align: -.125em) sehingga ikon "jatuh". */
html:root .btn:has(> .bi) { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; }
html:root .btn > .bi { line-height: 1; }
html:root .btn > .bi::before { vertical-align: 0; }
html:root .btn-primary,
html:root .btn-info {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--c-primary);
  --bs-btn-border-color: var(--c-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--c-primary-hover);
  --bs-btn-hover-border-color: var(--c-primary-hover);
  --bs-btn-focus-shadow-rgb: var(--c-brand-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--c-primary-active);
  --bs-btn-active-border-color: var(--c-primary-active);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--c-primary);
  --bs-btn-disabled-border-color: var(--c-primary);
  box-shadow: none;
}
html:root .btn-outline-primary,
html:root .btn-outline-info {
  --bs-btn-color: var(--c-primary-text);
  --bs-btn-border-color: var(--c-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--c-primary);
  --bs-btn-hover-border-color: var(--c-primary);
  --bs-btn-focus-shadow-rgb: var(--c-brand-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--c-primary-active);
  --bs-btn-active-border-color: var(--c-primary-active);
  --bs-btn-disabled-color: var(--c-primary-text);
  --bs-btn-disabled-border-color: var(--c-primary);
}
html:root .btn-link {
  --bs-btn-color: var(--c-primary-text);
  --bs-btn-hover-color: var(--c-primary-hover);
  --bs-btn-active-color: var(--c-primary-hover);
}
html:root .btn-light-primary,
html:root .btn-light-info,
html:root .bg-light-primary,
html:root .bg-light-info {
  background-color: var(--c-primary-soft);
  color: var(--c-primary-soft-text);
}
html:root .bg-light-success { background-color: var(--c-success-soft); color: var(--c-success-text); }
html:root .bg-light-warning { background-color: var(--c-warning-soft); color: var(--c-warning-text); }
html:root .bg-light-danger  { background-color: var(--c-danger-soft);  color: var(--c-danger-text); }
html:root .badge { font-weight: 600; border-radius: 6px; }

html:root .alert-primary,
html:root .alert-info {
  background-color: var(--c-primary-soft);
  color: var(--c-primary-soft-text);
  border: 1px solid var(--c-primary-border);
}
/* Mazer memakai blok warna pekat untuk alert status; samakan dengan gaya lembut di atas. */
html:root .alert-success { background-color: var(--c-success-soft); color: var(--c-success-text); border: 1px solid transparent; }
html:root .alert-warning { background-color: var(--c-warning-soft); color: var(--c-warning-text); border: 1px solid transparent; }
html:root .alert-danger  { background-color: var(--c-danger-soft);  color: var(--c-danger-text);  border: 1px solid transparent; }
html:root .alert :is(.alert-heading, strong, b) { color: inherit; }

/* ---------- Form ---------- */
html:root .form-control:focus,
html:root .form-select:focus,
html:root .form-check-input:focus,
html:root .dataTable-input:focus {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 .25rem rgba(var(--c-brand-rgb), .2);
}
html:root .form-check-input:checked,
html:root .form-check-input[type=checkbox]:indeterminate,
html:root .form-check .form-check-input.form-check-primary,
html:root .form-check .form-check-input.form-check-info,
html:root .form-check.form-check-primary .form-check-input,
html:root .form-check.form-check-info .form-check-input {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
}
html:root .form-range::-webkit-slider-thumb { background-color: var(--c-primary); }
html:root .form-range::-moz-range-thumb { background-color: var(--c-primary); }
html:root .form-group.with-title .form-control:focus ~ label { border-color: var(--c-brand); }

/* Select2 (bootstrap-5 theme) */
html:root .select2-container--bootstrap-5.select2-container--focus .select2-selection,
html:root .select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--c-brand);
  box-shadow: 0 0 0 .25rem rgba(var(--c-brand-rgb), .2);
}
html:root .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
html:root .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted) {
  background-color: var(--c-primary);
  color: #fff;
}

/* Tema select2 tidak punya mode gelap — samakan dengan input Mazer gelap. */
html:root[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection,
html:root[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown {
  background-color: #1b1b29;
  border-color: #35354f;
  color: #c2c2d9;
}
html:root[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { color: #c2c2d9; }
html:root[data-bs-theme=dark] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option--highlighted { background-color: var(--c-surface-2); color: var(--c-text); }

/* ---------- Navigasi & komponen ---------- */
html:root .dropdown-menu,
html:root .dropdown-menu-dark { --bs-dropdown-link-active-bg: var(--c-primary); }
html:root .nav-link:focus-visible { box-shadow: 0 0 0 .25rem rgba(var(--c-brand-rgb), .25); }
html:root .nav-pills { --bs-nav-pills-link-active-bg: var(--c-primary); }
html:root .nav-pills .nav-link.active { box-shadow: none; }
html:root .nav-tabs .nav-link:hover { text-shadow: none; }
html:root .nav-tabs .nav-link.active { color: var(--c-primary-text); }
html:root .nav-tabs .nav-link.active:after { background-color: var(--c-brand); box-shadow: none; }
html:root .accordion {
  --bs-accordion-btn-focus-border-color: var(--c-brand);
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(var(--c-brand-rgb), .2);
}
html:root .pagination {
  --bs-pagination-color: var(--c-primary-text);
  --bs-pagination-hover-color: var(--c-primary-hover);
  --bs-pagination-focus-color: var(--c-primary-hover);
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(var(--c-brand-rgb), .2);
  --bs-pagination-active-bg: var(--c-primary);
  --bs-pagination-active-border-color: var(--c-primary);
}
html:root .pagination.pagination-primary .page-item.active .page-link,
html:root .pagination.pagination-info .page-item.active .page-link {
  background-color: var(--c-primary);
  border-color: var(--c-primary);
  box-shadow: none;
}
html:root .progress,
html:root .progress-stacked { --bs-progress-bg: var(--c-border); --bs-progress-bar-bg: var(--c-brand); }
html:root .progress.progress-primary .progress-bar,
html:root .progress.progress-info .progress-bar { background-color: var(--c-brand); }
html:root .list-group {
  --bs-list-group-active-bg: var(--c-primary);
  --bs-list-group-active-border-color: var(--c-primary);
}
html:root .btn-close { --bs-btn-close-focus-shadow: 0 0 0 .25rem rgba(var(--c-brand-rgb), .2); }
html:root .spinner-border.text-primary { color: var(--c-brand) !important; }

/* ---------- Kartu, tabel, judul halaman ---------- */
html:root .card {
  --bs-card-bg: var(--c-surface);
  --bs-card-cap-bg: var(--c-surface);
  --bs-card-border-radius: var(--radius);
  --bs-card-inner-border-radius: calc(var(--radius) - 1px);
  border: 1px solid var(--c-border);
  box-shadow: none;
  margin-bottom: 1.5rem;
}
html:root .card .card-header { padding-bottom: .5rem; }
html:root .card .card-header h4,
html:root .card .card-title { font-size: 1.05rem; font-weight: 700; color: var(--c-text); }
html:root .card.card-statistic { background: var(--c-surface); box-shadow: none; }
html:root .bg-gradient-ltr { background: var(--c-primary); }
html:root .stats-icon.purple,
html:root .stats-icon.blue { background-color: var(--c-brand); }

html:root .page-heading h3 { font-weight: 700; color: var(--c-text); }

html:root .table { --bs-table-hover-bg: var(--c-surface-2); --bs-table-striped-bg: var(--c-surface-2); color: var(--c-text-2); }
html:root .table > thead th {
  color: var(--c-muted);
  font-size: .8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  border-bottom-color: var(--c-border);
}
html:root .table > :not(:first-child) { border-top-color: var(--c-border); }
html:root .table > :not(caption) > * > * { border-bottom-color: var(--c-border); }
html:root .table td { vertical-align: middle; }

/* ---------- Sidebar ---------- */
html:root .sidebar-wrapper { background-color: var(--c-surface); border-right: 1px solid var(--c-border); }
html:root .sidebar-wrapper .sidebar-header .logo img { height: 2.75rem; }
html:root .sidebar-wrapper .menu .sidebar-title { color: var(--c-muted); }
html:root .sidebar-wrapper .menu .sidebar-link { color: var(--c-text-2); transition: background-color .15s, color .15s; }
html:root .sidebar-wrapper .menu .sidebar-link i { color: var(--c-muted); }
html:root .sidebar-wrapper .menu .sidebar-link:hover { background-color: var(--c-surface-2); }
html:root .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link { background-color: var(--c-primary); }
html:root .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link span { color: #fff; }
html:root .sidebar-wrapper .menu .sidebar-item.active > .sidebar-link i { color: var(--c-accent); }
html:root .sidebar-wrapper .menu .submenu .submenu-item a { color: var(--c-text-2); }
html:root .sidebar-wrapper .menu .submenu .submenu-item a:hover,
html:root .sidebar-wrapper .menu .submenu .submenu-item.active > a { color: var(--c-primary-text); }

/* ---------- Mobile: gutter & ritme vertikal ---------- */
/* Mazer memberi #main-content padding 2rem (32px) — di layar 390px itu
   memakan 16% lebar. Samakan jadi 16px dengan header. */
@media (max-width: 767.98px) {
  html:root #main #main-content {
    padding-left: 1rem; padding-right: 1rem; padding-top: .5rem;
    /* Ruang untuk bottom nav fixed + home indicator iPhone. Harus di sini:
       `#main #main-content{padding:2rem}` Mazer mengalahkan selector `#main-content`. */
    padding-bottom: calc(var(--mobile-nav-height, 62px) + env(safe-area-inset-bottom, 0px) + 16px);
  }
  html:root .navbar-top .container-fluid { padding-left: 1rem; padding-right: 1rem; }
  html:root .page-heading { margin-bottom: 1rem; }

  /* Tabel: satu baris per sel + geser horizontal (.table-responsive),
     bukan sel sempit yang pecah 3 baris dan kolom terpotong. */
  html:root .table > :not(caption) > * > * { white-space: nowrap; }

  /* DataTables men-center "Show entries"/"Search" di mobile → berantakan.
     Buat sebaris: jumlah baris kiri, pencarian kanan & melebar. */
  html:root div.dataTables_wrapper > .row:first-child { row-gap: .5rem; }
  html:root div.dataTables_wrapper > .row:first-child > [class*="col-"] { padding-left: 0; padding-right: 0; }
  html:root div.dataTables_wrapper div.dataTables_length,
  html:root div.dataTables_wrapper div.dataTables_filter { text-align: left; }
  html:root div.dataTables_wrapper div.dataTables_filter label { display: flex; align-items: center; gap: .5rem; }
  html:root div.dataTables_wrapper div.dataTables_filter input { margin-left: 0; width: 100%; min-width: 0; }
}

/* ---------- Lain-lain ---------- */
html:root .toastify { background: var(--c-primary); border-radius: var(--radius-sm); box-shadow: 0 4px 12px rgba(15, 23, 42, .15); }
html:root .avatar.bg-primary { background-color: var(--c-primary) !important; }

@media (prefers-reduced-motion: reduce) {
  html:root .sidebar-wrapper .menu .sidebar-link { transition: none; }
}