/* ==========================================================================
   PSB Super Theme -- override kosmetik di atas bundle Metronic vendor
   (assets/css/style.bundle.css, ~62K baris, tetap dipakai apa adanya untuk
   utility class Bootstrap/grid/plugin -- file ini HANYA mengubah warna,
   spacing, radius, shadow, typography di atasnya lewat cascade, TIDAK
   mengubah struktur/markup/class yang dipakai scripts.bundle.js untuk
   interaksi sidebar collapsible & offcanvas. Sama persis pola yang sudah
   dipakai AKADEMIK/include/navbar-kiri.php untuk kasus yang sama.
   Dimuat TERAKHIR di include/file_css.php supaya menang lewat urutan cascade
   tanpa perlu !important di mana-mana.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
    --brand:#0f7d4c;
    --brand-dark:#0b5f3a;
    --brand-light:#e8f7ef;
    --accent:#ffa500;
    --accent-dark:#ff7b00;
    --ink:#14201c;
    --ink-soft:#5a6b64;
    --ink-faint:#97a39e;
    --line:#e6eae8;
    --surface:#ffffff;
    --surface-soft:#f5f7f6;
    --radius:14px;
    --radius-sm:10px;
    --shadow-card:0 6px 22px -8px rgba(11,95,58,.14);
    --shadow-pop:0 16px 40px -12px rgba(11,95,58,.25);
}

html, body{
    font-family:'Plus Jakarta Sans','Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    color:var(--ink);
}
body{ background:#f3f6f4 !important; }

::selection{ background:var(--brand); color:#fff; }

/* scrollbar halus (Chromium/Edge) */
*::-webkit-scrollbar{ width:9px; height:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:#c7d3ce; border-radius:20px; }
*::-webkit-scrollbar-thumb:hover{ background:#a9bab2; }

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

/* ---------------------------------------------------------------------- */
/* Header / topbar                                                         */
/* ---------------------------------------------------------------------- */
#kt_header{
    background:linear-gradient(120deg,var(--brand) 0%,var(--brand-dark) 100%) !important;
}
.header-mobile{
    background:linear-gradient(120deg,var(--brand) 0%,var(--brand-dark) 100%) !important;
    box-shadow:0 4px 16px rgba(0,0,0,.18);
}

/* ---------------------------------------------------------------------- */
/* Sidebar (aside)                                                          */
/* ---------------------------------------------------------------------- */
.aside{
    background:#ffffff !important;
    box-shadow:2px 0 18px rgba(15,45,32,.06);
    border-right:none !important;
}
.brand{ background:var(--brand-dark) !important; }
.brand .brand-logo img{ filter:drop-shadow(0 2px 4px rgba(0,0,0,.25)); }

/* kartu "Halo, nama" di puncak sidebar */
.aside-menu table.table{
    background:linear-gradient(135deg,var(--brand-light),#dcf0e6) !important;
    border-radius:var(--radius-sm);
    margin:0 14px 10px;
    width:calc(100% - 28px) !important;
    overflow:hidden;
}
.aside-menu table.table td{ border:none !important; padding:12px 10px !important; }
.aside-menu table.table a{ color:var(--brand-dark) !important; font-weight:700 !important; }
.aside-menu table.table .symbol-badge{ border:2px solid #fff; }

.aside-menu .menu-section .menu-text{
    color:var(--ink-faint) !important;
    font-weight:800 !important;
    font-size:.72rem !important;
    letter-spacing:.08em;
    text-transform:uppercase;
    padding-left:14px;
}
.aside-menu hr{ border-color:var(--line); margin:.4rem 14px .6rem; opacity:.7; }

.aside-menu .menu-nav > .menu-item > .menu-link{
    border-radius:10px;
    margin:1px 10px;
    padding-top:.65rem;
    padding-bottom:.65rem;
    transition:background .15s, color .15s;
}
.aside-menu .menu-nav > .menu-item > .menu-link .menu-text{
    font-weight:600;
    color:#3a4742;
    font-size:.92rem;
}
.aside-menu .menu-nav .menu-item.menu-item-here > .menu-link,
.aside-menu .menu-nav .menu-item.menu-item-open > .menu-link,
.aside-menu .menu-nav .menu-item .menu-link:hover{
    background:var(--brand-light) !important;
}
.aside-menu .menu-nav .menu-item.menu-item-here > .menu-link .menu-text,
.aside-menu .menu-nav .menu-item.menu-item-open > .menu-link .menu-text{
    color:var(--brand-dark) !important;
    font-weight:700;
}
.aside-menu .menu-nav .menu-item .menu-link .menu-icon,
.aside-menu .menu-nav .menu-item .menu-link .svg-icon svg{
    color:var(--brand);
}
.aside-menu .menu-nav .menu-submenu .menu-link{
    border-radius:8px;
    margin:1px 10px 1px 26px;
}
.aside-menu .menu-nav .menu-submenu .menu-link:hover,
.aside-menu .menu-nav .menu-submenu .menu-item.menu-item-active > .menu-link{
    background:var(--brand-light) !important;
}
.aside-menu .menu-nav .menu-submenu .menu-item.menu-item-active > .menu-link .menu-text{
    color:var(--brand-dark) !important;
    font-weight:700;
}

/* ---------------------------------------------------------------------- */
/* Kartu, tabel, tombol, form -- dipakai luas di halaman admin              */
/* ---------------------------------------------------------------------- */
.card{
    border:none !important;
    border-radius:var(--radius) !important;
    box-shadow:var(--shadow-card);
}
.card-header{
    background:transparent !important;
    border-bottom:1px solid var(--line) !important;
    font-weight:700;
}

.btn{ border-radius:10px !important; font-weight:700; letter-spacing:.01em; }
.btn-primary{
    background:linear-gradient(135deg,var(--brand),var(--brand-dark)) !important;
    border-color:var(--brand-dark) !important;
    box-shadow:0 8px 18px -6px rgba(11,95,58,.45);
}
.btn-success{
    background:linear-gradient(135deg,var(--brand),var(--brand-dark)) !important;
    border-color:var(--brand-dark) !important;
}
.btn-danger{
    background:linear-gradient(135deg,#e5484d,#c9302c) !important;
    border-color:#c9302c !important;
}
.btn-warning{
    background:linear-gradient(135deg,var(--accent),var(--accent-dark)) !important;
    border-color:var(--accent-dark) !important;
    color:#fff !important;
}
.btn-light{ background:var(--surface-soft) !important; border-color:var(--line) !important; }

.form-control{
    border-radius:10px !important;
    border-color:var(--line) !important;
    background:var(--surface-soft) !important;
}
.form-control:focus{
    border-color:var(--brand) !important;
    box-shadow:0 0 0 3px rgba(15,125,76,.12) !important;
    background:#fff !important;
}

.table thead th{
    background:var(--brand-light);
    color:var(--brand-dark);
    font-weight:800;
    font-size:.78rem;
    letter-spacing:.03em;
    text-transform:uppercase;
    border-bottom:none !important;
}
.table-hover tbody tr:hover{ background:var(--brand-light) !important; }

.alert{ border-radius:12px !important; border:none !important; font-weight:600; }
.badge{ border-radius:8px !important; font-weight:700; padding:.4em .7em; }

/* widget statistik dashboard (bg-light-* dari Metronic) */
.card.bg-light-success{ background:var(--brand-light) !important; }
.card.bg-light-warning{ background:#fff5e6 !important; }
.card.bg-light-primary{ background:#eaf3ff !important; }
.card.bg-light-danger{ background:#fdeceb !important; }

/* ---------------------------------------------------------------------- */
/* Wizard multi-langkah (dipakai registrasi.php pendaftaran publik)         */
/* ---------------------------------------------------------------------- */
.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step .wizard-icon{
    background:var(--brand-light);
    border-radius:50%;
    box-shadow:none;
}
.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step .wizard-icon svg g [fill]{
    fill:var(--brand) !important;
}
.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-icon{
    background:linear-gradient(135deg,var(--brand),var(--brand-dark));
    box-shadow:0 8px 18px -6px rgba(11,95,58,.5);
}
.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-icon svg g [fill]{
    fill:#fff !important;
}
.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-icon{
    background:var(--brand-dark);
}
.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="done"] .wizard-icon svg g [fill]{
    fill:#fff !important;
}
.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step .wizard-title{
    color:var(--ink);
    font-weight:700;
}
.wizard.wizard-2 .wizard-nav .wizard-steps .wizard-step[data-wizard-state="current"] .wizard-title{
    color:var(--brand-dark);
}
.wizard.wizard-2 .card.card-custom{ border-radius:var(--radius) !important; overflow:hidden; }

/* ---------------------------------------------------------------------- */
/* Responsive polish                                                        */
/* ---------------------------------------------------------------------- */
@media(max-width:767.98px){
    .card{ border-radius:12px !important; }
    .aside-menu table.table{ margin:0 8px 8px; width:calc(100% - 16px) !important; }
    h1,h2,h3,.font-size-h1{ font-size:1.35rem !important; }
}
@media(max-width:575.98px){
    .btn{ font-size:.85rem; }
    .table{ font-size:.85rem; }
}