/*
 * Tema warna SIKUMU - nuansa hijau logo Muhammadiyah.
 * 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 {
  --sk-primary: #0e7a3a;        /* hijau Muhammadiyah: tombol, link aktif, aksen sidebar */
  --sk-primary-rgb: 14, 122, 58;
  --sk-primary-hover: #0b6530;
  --sk-primary-active: #085026;
  --sk-on-primary: #ffffff;     /* teks di atas hijau */
  --sk-header: #0a5a2b;         /* header atas (teks putih) */
  --sk-heading: #0b4422;        /* judul, card-title, teks menu non-aktif */
  --sk-link: #0b6530;           /* link teks */
  --sk-muted: #7f9a8a;          /* teks sekunder, breadcrumb, ikon menu non-aktif, heading sidebar */
  --sk-tint: #e3f3e8;           /* latar menu aktif / hover, bg-primary-light */
  --sk-tint-soft: #f1f9f3;      /* latar hover ringan (dropdown, thead) */
  --sk-tint-strong: #bfe3cb;    /* divider dropdown, item terpilih */
  --sk-focus: #4fae73;          /* border input saat fokus */
  --sk-accent: #f2b705;         /* aksen kuning: badge tahun anggaran, sorotan */
  --sk-on-accent: #3d2e00;
  --sk-bg: #f4f8f5;             /* latar halaman */
  --sk-border: #cfe6d7;
  --sk-wajib: #dc3545;          /* tanda * isian wajib */

  /* Bootstrap 5 */
  --bs-primary: var(--sk-primary);
  --bs-primary-rgb: var(--sk-primary-rgb);
  --bs-link-color: var(--sk-link);
  --bs-link-color-rgb: 11, 101, 48;
  --bs-link-hover-color: var(--sk-heading);
  --bs-link-hover-color-rgb: 11, 68, 34;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ---------- NiceAdmin: header ---------- */
.header {
  background-color: var(--sk-header);
  box-shadow: 0 2px 20px rgba(var(--sk-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(--sk-tint);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.back-to-top:hover {
  background: var(--sk-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(--sk-focus);
  box-shadow: 0 0 0 0.25rem rgba(var(--sk-primary-rgb), 0.25);
}

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

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected {
  background-color: var(--sk-primary);
  color: var(--sk-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(--sk-wajib);
  font-weight: 600;
}

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

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

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

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

/* ---------- header: pemilih entitas & tahun anggaran ---------- */
.header-nav .ta-badge {
  background: var(--sk-accent);
  color: var(--sk-on-accent);
}

.badge.bg-accent {
  background: var(--sk-accent) !important;
  color: var(--sk-on-accent);
}

/* ---------- tabel anggaran (RKA, LRA) ---------- */
.tabel-anggaran tr.baris-kegiatan td {
  background: var(--sk-tint-soft);
  font-weight: 600;
  color: var(--sk-heading);
}

.tabel-anggaran tr.baris-seksi td {
  background: var(--sk-tint);
  font-weight: 700;
  color: var(--sk-heading);
}

.progress-bar.bg-primary {
  background-color: var(--sk-primary) !important;
}

.text-lebih {
  color: var(--sk-wajib);
  font-weight: 600;
}