/* ==========================================================================
   TEMA PRAMUKA -- override warna & tampilan aplikasi
   ==========================================================================
   File ini di-load PALING TERAKHIR (setelah adminlte.min.css & mystyle.css)
   supaya aturan di sini menang lewat urutan cascade. Beberapa selector tetap
   pakai !important karena beberapa utility class Bootstrap (mis. .bg-white,
   .text-primary) sendiri sudah !important di file aslinya.

   Prinsip:
   - Warna coklat (identitas seragam Pramuka) jadi warna utama/brand di
     seluruh aplikasi: sidebar, tombol aksi utama, link, tab aktif, dst.
   - Warna emas/gold jadi aksen sekunder (border, hover, ikon aktif).
   - Warna STATUS/SEMANTIK (hijau=aktif/sukses, merah=hapus/bahaya,
     kuning=peringatan, biru muda=info) SENGAJA TIDAK diubah, supaya makna
     warna di seluruh aplikasi (mis. badge "aktif" tetap hijau) tetap
     konsisten & tidak membingungkan pengguna.
   ========================================================================== */

:root {
    --pramuka-brown-darkest: #241408;
    --pramuka-brown-dark: #3b2412;
    --pramuka-brown: #5c3a1e;
    --pramuka-brown-light: #8a6d4a;
    --pramuka-brown-pale: #cbb493;
    --pramuka-gold: #d9b657;
    --pramuka-gold-dark: #b8934a;
    --pramuka-cream: #f7f3ec;
}

/* ---------- Latar belakang umum ---------- */
body,
.content-wrapper {
    background-color: var(--pramuka-cream) !important;
}

/* ---------- Sidebar ---------- */
.main-sidebar,
.main-sidebar.sidebar-light-teal,
.main-sidebar::before {
    background-color: var(--pramuka-brown-dark) !important;
}

.main-sidebar .brand-link {
    background-color: var(--pramuka-brown-darkest) !important;
    border-bottom: 1px solid rgba(217, 182, 87, .25);
}

.main-sidebar .brand-text {
    color: var(--pramuka-gold) !important;
    font-weight: 600;
}

.main-sidebar .user-panel a,
.main-sidebar .user-panel .info,
.main-sidebar .user-panel .info a {
    color: var(--pramuka-cream) !important;
}

.sidebar-light-teal .nav-sidebar > .nav-item > .nav-link,
.main-sidebar .nav-sidebar > .nav-item > .nav-link,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    color: #e9dfce !important;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background-color: var(--pramuka-brown) !important;
    color: #fff !important;
}

.sidebar-light-teal .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-teal .nav-sidebar.nav-legacy > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--pramuka-gold) !important;
    color: var(--pramuka-brown-darkest) !important;
    font-weight: 600;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active i,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active p {
    color: var(--pramuka-brown-darkest) !important;
}

.main-sidebar .nav-sidebar .nav-icon {
    color: var(--pramuka-gold);
}

.main-sidebar .os-scrollbar-handle {
    background: rgba(217, 182, 87, .4) !important;
}

/* ---------- Navbar (topbar) ---------- */
.main-header.navbar {
    background-color: #fff !important;
    border-bottom: 3px solid var(--pramuka-gold);
}

.main-header .nav-link {
    color: var(--pramuka-brown-dark) !important;
}

.main-header .nav-link:hover {
    color: var(--pramuka-gold-dark) !important;
}

/* ---------- Link ---------- */
a {
    color: var(--pramuka-brown-dark);
}

a:hover {
    color: var(--pramuka-gold-dark);
}

/* ---------- Tombol aksi utama (brand), status TIDAK diubah ---------- */
.btn-primary {
    background-color: var(--pramuka-brown-dark) !important;
    border-color: var(--pramuka-brown-dark) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--pramuka-brown) !important;
    border-color: var(--pramuka-brown) !important;
}

.btn-outline-primary {
    color: var(--pramuka-brown-dark) !important;
    border-color: var(--pramuka-brown-dark) !important;
}

.btn-outline-primary:hover {
    background-color: var(--pramuka-brown-dark) !important;
    color: #fff !important;
}

.btn-link {
    color: var(--pramuka-brown-dark);
}

/* ---------- Badge & label brand (badge status hijau/merah/kuning TIDAK disentuh) ---------- */
.badge-primary,
.badge-info {
    background-color: var(--pramuka-gold-dark) !important;
    color: #fff !important;
}

/* ---------- Border brand ---------- */
.border-primary {
    border-color: var(--pramuka-brown-dark) !important;
}

.text-primary {
    color: var(--pramuka-brown-dark) !important;
}

.bg-primary {
    background-color: var(--pramuka-brown-dark) !important;
}

/* ---------- Tab aktif (dipakai luas di halaman Golongan/SKU/SKK/Kenaikan) ---------- */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--pramuka-brown-dark) !important;
    border-color: #dee2e6 #dee2e6 #fff;
    border-bottom: 3px solid var(--pramuka-gold-dark) !important;
    font-weight: 600;
}

.nav-tabs .nav-link:hover:not(.active) {
    border-color: transparent;
    color: var(--pramuka-gold-dark);
}

/* ---------- Pagination (dipakai DataTables & tabel manual) ---------- */
.page-item.active .page-link,
.paginate_button.current,
.paginate_button.current:hover {
    background-color: var(--pramuka-brown-dark) !important;
    border-color: var(--pramuka-brown-dark) !important;
    color: #fff !important;
}

.page-link {
    color: var(--pramuka-brown-dark);
}

/* ---------- Form focus ---------- */
.form-control:focus,
.custom-select:focus {
    border-color: var(--pramuka-gold-dark);
    box-shadow: 0 0 0 .2rem rgba(217, 182, 87, .25);
}

/* ---------- Card header brand ---------- */
.card-primary.card-outline {
    border-top-color: var(--pramuka-brown-dark) !important;
}

.card-primary:not(.card-outline) > .card-header {
    background-color: var(--pramuka-brown-dark) !important;
    color: #fff !important;
}

/* ---------- Info alert -- pakai nuansa krem/emas alih-alih biru default,
   supaya kotak keterangan (banyak dipakai di halaman Golongan/SKU/SKK) ikut senada ---------- */
.alert-info {
    background-color: #fbf3e1;
    border-color: var(--pramuka-gold-dark);
    color: var(--pramuka-brown-dark);
}

.alert-info .alert-link,
.alert-info a {
    color: var(--pramuka-brown-darkest);
}

/* ---------- Judul halaman ---------- */
.content-header h1 {
    color: var(--pramuka-brown-dark);
    font-weight: 700;
}

/* ---------- Checkbox/radio (icheck-bootstrap) ---------- */
.icheck-primary > input:first-child:checked + label::before {
    background-color: var(--pramuka-brown-dark) !important;
    border-color: var(--pramuka-brown-dark) !important;
}

/* ---------- Halaman login ---------- */
body.hold-transition .login-box .card,
body.hold-transition .card {
    border-top: 4px solid var(--pramuka-gold);
}

.login-logo,
.login-box .login-logo a {
    color: var(--pramuka-brown-dark);
    font-weight: 700;
}