/*
 * Tema warna MyLazisMU - nuansa oranye Lazismu (#f5a623), palet dari SmartLazizMU.
 * Dimuat PALING AKHIR (setelah bootstrap, style.css NiceAdmin, vendor, dan app.css).
 * Satu-satunya tempat warna: ganti nilai di :root untuk mengubah seluruh aplikasi.
 * style.css masih NiceAdmin asli (biru #4154f1 / navy #012970) - semua pemakaiannya
 * ditimpa di bawah.
 */

:root {
  --lz-primary: #f5a623;        /* warna utama: tombol, link aktif, aksen sidebar */
  --lz-primary-rgb: 245, 166, 35;
  --lz-primary-hover: #d99417;
  --lz-primary-active: #b8790f;
  --lz-on-primary: #3a2506;     /* teks di atas oranye: gelap, kontras teks putih terlalu rendah */
  --lz-header: #b8790f;         /* header atas (teks putih) */
  --lz-heading: #7a4d06;        /* judul, card-title, teks menu non-aktif */
  --lz-link: #b8790f;           /* link teks (lebih gelap dari primary agar terbaca di latar putih) */
  --lz-muted: #899bbd;          /* teks sekunder, breadcrumb, ikon menu non-aktif, heading sidebar */
  --lz-tint: #fdecc9;           /* latar menu aktif / hover, bg-primary-light */
  --lz-tint-soft: #fef6e7;      /* latar hover ringan (dropdown, thead) */
  --lz-tint-strong: #fbd999;    /* divider dropdown, item terpilih */
  --lz-focus: #f7b84d;          /* border input saat fokus */
  --lz-bg: #f6f9ff;             /* latar halaman */
  --lz-border: #f3dfb8;
  --lz-wajib: #dc3545;          /* tanda * isian wajib */

  /* Bootstrap 5 */
  --bs-primary: var(--lz-primary);
  --bs-primary-rgb: var(--lz-primary-rgb);
  --bs-link-color: var(--lz-link);
  --bs-link-color-rgb: 184, 121, 15;
  --bs-link-hover-color: var(--lz-heading);
  --bs-link-hover-color-rgb: 122, 77, 6;

  /* DataTables (indikator "memproses", baris terpilih) */
  --dt-row-selected: var(--lz-primary-rgb);
}

/* ---------- dasar ---------- */
body {
  background: var(--lz-bg);
}

a {
  color: var(--lz-link);
}

a:hover {
  color: var(--lz-heading);
}

::selection {
  background: rgba(var(--lz-primary-rgb), 0.3);
}

/* ---------- utilitas warna primary (nilai statis hasil Sass, harus ditimpa) ---------- */
.text-primary { color: var(--lz-primary-active) !important; }
.bg-primary { background-color: var(--lz-primary) !important; color: var(--lz-on-primary); }
.border-primary { border-color: var(--lz-primary) !important; }
.bg-primary-light { background-color: var(--lz-tint) !important; }
.link-primary { color: var(--lz-link) !important; }
.badge.bg-primary { color: var(--lz-on-primary); }

/* ---------- tombol ---------- */
.btn-primary {
  --bs-btn-color: var(--lz-on-primary);
  --bs-btn-bg: var(--lz-primary);
  --bs-btn-border-color: var(--lz-primary);
  --bs-btn-hover-color: var(--lz-on-primary);
  --bs-btn-hover-bg: var(--lz-primary-hover);
  --bs-btn-hover-border-color: var(--lz-primary-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--lz-primary-active);
  --bs-btn-active-border-color: var(--lz-primary-active);
  --bs-btn-disabled-color: var(--lz-on-primary);
  --bs-btn-disabled-bg: var(--lz-primary);
  --bs-btn-disabled-border-color: var(--lz-primary);
  --bs-btn-focus-shadow-rgb: var(--lz-primary-rgb);
}

.btn-outline-primary {
  --bs-btn-color: var(--lz-primary-active);
  --bs-btn-border-color: var(--lz-primary);
  --bs-btn-hover-color: var(--lz-on-primary);
  --bs-btn-hover-bg: var(--lz-primary);
  --bs-btn-hover-border-color: var(--lz-primary);
  --bs-btn-active-color: var(--lz-on-primary);
  --bs-btn-active-bg: var(--lz-primary-hover);
  --bs-btn-active-border-color: var(--lz-primary-hover);
  --bs-btn-disabled-color: var(--lz-primary);
  --bs-btn-disabled-border-color: var(--lz-primary);
  --bs-btn-focus-shadow-rgb: var(--lz-primary-rgb);
}

/* ---------- form ---------- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--lz-focus);
  box-shadow: 0 0 0 0.25rem rgba(var(--lz-primary-rgb), 0.25);
}

.form-check-input:checked {
  background-color: var(--lz-primary);
  border-color: var(--lz-primary);
}

/* ---------- pagination, dropdown, nav ---------- */
.pagination {
  --bs-pagination-color: var(--lz-link);
  --bs-pagination-hover-color: var(--lz-heading);
  --bs-pagination-focus-color: var(--lz-heading);
  --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(var(--lz-primary-rgb), 0.25);
  --bs-pagination-active-color: var(--lz-on-primary);
  --bs-pagination-active-bg: var(--lz-primary);
  --bs-pagination-active-border-color: var(--lz-primary);
}

.dropdown-menu {
  --bs-dropdown-link-active-color: var(--lz-on-primary);
  --bs-dropdown-link-active-bg: var(--lz-primary);
}

.dropdown-menu .dropdown-item:hover,
.header-nav .profile .dropdown-item:hover {
  background-color: var(--lz-tint-soft);
}

.dropdown-menu .dropdown-divider {
  color: var(--lz-tint-strong);
}

.nav-pills {
  --bs-nav-pills-link-active-color: var(--lz-on-primary);
  --bs-nav-pills-link-active-bg: var(--lz-primary);
}

.nav-tabs-bordered .nav-link:hover,
.nav-tabs-bordered .nav-link:focus,
.nav-tabs-bordered .nav-link.active {
  color: var(--lz-primary-active);
}

.nav-tabs-bordered .nav-link.active {
  border-bottom-color: var(--lz-primary);
}

.accordion-button:not(.collapsed) {
  color: var(--lz-heading);
  background-color: var(--lz-tint-soft);
}

.accordion-flush .accordion-button:not(.collapsed) {
  color: var(--lz-primary-active);
}

/* ---------- NiceAdmin: header ---------- */
.header {
  background-color: var(--lz-header);
  box-shadow: 0 2px 20px rgba(var(--lz-primary-rgb), 0.2);
}

.header .logo span,
.header .toggle-sidebar-btn,
.header-nav .nav-link,
.header-nav .nav-profile,
.header-nav .nav-profile span {
  color: #fff;
}

.header-nav .nav-link:hover,
.header .toggle-sidebar-btn:hover {
  color: var(--lz-tint);
}

/* ---------- NiceAdmin: judul, breadcrumb, card ---------- */
.pagetitle h1,
.card-title,
.logo span,
.dashboard .info-card h6,
.error-404 h2 {
  color: var(--lz-heading);
}

.card-title span,
.breadcrumb a,
.breadcrumb .active {
  color: var(--lz-muted);
}

.breadcrumb a:hover {
  color: var(--lz-link);
}

.dashboard .filter .icon:hover,
.dashboard .filter .icon:focus,
.error-404 h1 {
  color: var(--lz-primary);
}

.dashboard .sales-card .card-icon {
  color: var(--lz-primary-active);
  background: var(--lz-tint);
}

.dashboard .recent-sales .table thead,
.dashboard .top-selling .table thead {
  background: var(--lz-tint-soft);
}

/* ---------- NiceAdmin: sidebar (heading seksi + item + dropdown) ---------- */
.sidebar-nav .nav-heading {
  color: var(--lz-muted);
}

.sidebar-nav .nav-link {
  color: var(--lz-primary-active);
  background: var(--lz-tint);
}

.sidebar-nav .nav-link i {
  color: var(--lz-primary);
}

.sidebar-nav .nav-link.collapsed {
  color: var(--lz-heading);
  background: #fff;
}

.sidebar-nav .nav-link.collapsed i {
  color: var(--lz-muted);
}

.sidebar-nav .nav-link:hover {
  color: var(--lz-primary-active);
  background: var(--lz-tint);
}

.sidebar-nav .nav-link:hover i {
  color: var(--lz-primary);
}

.sidebar-nav .nav-content a {
  color: var(--lz-heading);
}

.sidebar-nav .nav-content a:hover,
.sidebar-nav .nav-content a.active {
  color: var(--lz-primary-active);
}

.sidebar-nav .nav-content a.active i {
  background-color: var(--lz-primary);
}

/* ---------- NiceAdmin: footer & tombol ke atas ---------- */
.footer {
  border-top-color: var(--lz-border);
}

.footer .copyright,
.footer .credits {
  color: var(--lz-heading);
}

.back-to-top {
  background: var(--lz-primary);
}

.back-to-top i {
  color: var(--lz-on-primary);
}

.back-to-top:hover {
  background: var(--lz-primary-hover);
}

/* ---------- Select2 & DataTables ---------- */
.select2-container--bootstrap-5.select2-container--focus .select2-selection,
.select2-container--bootstrap-5.select2-container--open .select2-selection {
  border-color: var(--lz-focus);
  box-shadow: 0 0 0 0.25rem rgba(var(--lz-primary-rgb), 0.25);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
  background-color: var(--lz-tint);
  color: var(--lz-heading);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected {
  background-color: var(--lz-primary);
  color: var(--lz-on-primary);
}

/* ---------- tanda isian wajib ----------
 * Otomatis dari atribut HTML `required` (tidak perlu menandai label satu per satu): label yang diikuti
 * (sibling sesudahnya) isian wajib itu sendiri atau pembungkus yang berisi isian wajib (.input-group,
 * gambar captcha + input, dsb.). Setiap isian dibungkus kolom sendiri, jadi label tidak "menangkap" isian
 * lain. Isian disabled tidak dianggap wajib. Tata letak lain: class `required` pada label (app.css).
 */
label:has(~ :is(input, select, textarea)[required]:not(:disabled))::after,
label:has(~ * :is(input, select, textarea)[required]:not(:disabled))::after {
  content: " *";
  color: var(--lz-wajib);
  font-weight: 600;
}

/* ---------- halaman error ---------- */
.error-404 .btn {
  background: var(--lz-primary);
  color: var(--lz-on-primary);
}

.error-404 .btn:hover {
  background: var(--lz-primary-hover);
  color: var(--lz-on-primary);
}

/* ---------- halaman login ---------- */
.auth-page {
  background: linear-gradient(160deg, var(--lz-tint-soft) 0%, var(--lz-bg) 60%);
}

.auth-page .card-title {
  color: var(--lz-heading);
}