/*
 * Warna sidebar mengikuti header papan presensi di TV gerbang: gradasi hijau
 * tua menuju kuning-hijau. Titik warnanya disalin persis dari
 * resources/views/papan-presensi/index.blade.php supaya layar di gerbang dan
 * aplikasi di dalam terlihat berasal dari sistem yang sama.
 *
 * Bedanya arah: header papan itu lebar dan pendek, jadi gradasinya menyerong
 * ke kanan. Sidebar sempit dan tinggi, jadi gradasinya turun ke bawah - dengan
 * kemiringan tipis supaya tidak terlihat seperti garis datar.
 *
 * Dimuat di semua halaman lewat pendaftaran plugin di config/adminlte.php,
 * bukan di-@push per halaman, karena sidebar memang tampil di mana-mana.
 */

:root {
    --sb-hijau-tua: #0b6f37;
    --sb-hijau: #1f8c38;
    --sb-hijau-muda: #47a72d;
    --sb-kuning-hijau: #7bbd2a;
    --sb-kuning: #9cc92b;
}

.main-sidebar {
    /* Dua lapis:
       1. tirai gelap tipis yang menebal ke bawah - ujung kuning-hijau terlalu
          terang untuk tulisan putih, dan menu paling bawah jadi sulit dibaca
          tanpa ini;
       2. gradasi pokoknya. */
    background:
        linear-gradient(180deg,
            rgba(0, 0, 0, 0) 40%,
            rgba(0, 0, 0, 0.10) 70%,
            rgba(0, 0, 0, 0.26) 100%),
        linear-gradient(172deg,
            var(--sb-hijau-tua) 0%,
            var(--sb-hijau) 26%,
            var(--sb-hijau-muda) 54%,
            var(--sb-kuning-hijau) 78%,
            var(--sb-kuning) 100%) !important;
}

/* Kepala sidebar (logo + nama sekolah) dibiarkan tembus supaya gradasinya
   mengalir utuh dari atas, hanya dipisah garis tipis dari daftar menu. */
.main-sidebar .brand-link {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/*
 * .brand-link bawaan AdminLTE ber-display:block, dan logo di dalamnya
 * disejajarkan dengan float + margin atas negatif - hitungan yang dibuat untuk
 * logo PERSEGI setinggi 33px. Perisai sekolah lebih tinggi daripada itu, jadi
 * dengan cara yang sama ia tertarik ke atas dan tidak sebaris dengan tulisan
 * di sebelahnya.
 *
 * Diganti flexbox: berapa pun tinggi logonya, ia dan nama sekolah duduk di
 * satu garis tengah tanpa perlu angka yang dihitung manual.
 */
.main-sidebar .brand-link {
    display: flex;
    align-items: center;
}

/*
 * Logo sekolah berbentuk perisai dengan latar tembus, lebih tinggi daripada
 * lebar. Karena itu dimuat utuh (contain), bukan dipotong (cover), dan tanpa
 * lingkaran - dipaksa bulat akan memangkas ujung-ujung perisainya.
 *
 * Bayangannya memakai drop-shadow, bukan box-shadow: yang pertama mengikuti
 * siluet perisai, yang kedua akan menggambar kotak di sekeliling bidang
 * kosong di kanan-kirinya.
 */
.main-sidebar .brand-logo-sekolah {
    height: 38px;
    width: auto;
    max-width: 34px;
    object-fit: contain;
    flex-shrink: 0;

    /* Margin blok negatif yang SIMETRIS. Baris teks merek hanya setinggi 30px,
       jadi tanpa ini perisai 38px akan menambah tinggi bilah merek. Simetris -
       sama besar atas dan bawah - supaya penengahan flexbox di atas tidak
       tergeser; ketidaksimetrisanlah yang dulu membuatnya tampak naik.

       Jarak kirinya disamakan dengan .brand-image bawaan AdminLTE (padding
       .5rem + margin .8rem): di sidebar yang diciutkan selebar 4.6rem, offset
       itulah yang membuat logo tampak berada di tengah. */
    margin: -4px .5rem -4px .8rem;

    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.38));
}

.main-sidebar .brand-link,
.main-sidebar .brand-link .brand-text {
    color: #fff !important;
}

/* Bayangan tipis pada teks: luminansi latarnya berubah dari atas ke bawah,
   dan tanpa ini tulisan putih di bagian kuning-hijau kehilangan ketegasan. */
.main-sidebar .nav-sidebar .nav-link,
.main-sidebar .nav-sidebar .nav-link p,
.main-sidebar .nav-header {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.92);
    border-radius: 8px;
    margin: 2px 8px;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/*
 * Menu aktif. Bawaan AdminLTE memakai biru pekat (sidebar-dark-primary), yang
 * di atas gradasi hijau-kuning terlihat seperti tempelan dari tema lain.
 * Diganti panel putih tembus dengan penanda tegas di tepi kiri - menonjol
 * tanpa memasukkan warna baru.
 */
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active:hover,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active:focus {
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    box-shadow: inset 4px 0 0 #fff;
}

/*
 * SUBMENU (treeview).
 *
 * Semua aturan menu di atas memakai ">" supaya hanya mengenai menu tingkat
 * satu - dan justru karena itu anak submenu tidak kebagian apa pun: tidak
 * warnanya, tidak pilnya, tidak pula sorotan aktifnya. Tanpa blok ini anak
 * submenu tampil persis seperti menu biasa, sehingga tidak terbaca sebagai
 * bertingkat.
 *
 * Jorokannya sendiri bukan dari sini melainkan dari kelas .nav-child-indent
 * bawaan AdminLTE, yang dipasang lewat 'classes_sidebar_nav' di
 * config/adminlte.php. Tanpa kelas itu AdminLTE memakai
 * .nav-treeview { padding: 0 } dan anak submenu berdiri sejajar induknya.
 */

/* Garis penuntun tegak di tepi kiri daftar anak - penanda paling murah bahwa
   butir-butir ini bernaung pada satu induk yang sama. */
.main-sidebar .nav-sidebar .nav-treeview {
    position: relative;
    padding-bottom: 4px;
}

.main-sidebar .nav-sidebar .nav-treeview::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 7px;
    left: 14px;
    width: 2px;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.22);
}

/* Sedikit lebih kecil dan lebih redup daripada menu tingkat satu: bedanya
   halus, tapi cukup membuat mata langsung tahu mana induk mana anak. */
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    color: rgba(255, 255, 255, 0.86);
    border-radius: 8px;
    margin: 1px 8px 1px 6px;
    padding-top: .38rem;
    padding-bottom: .38rem;
    font-size: .92rem;
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active:hover,
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link.active:focus {
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 #fff;
}

.main-sidebar .nav-sidebar .nav-treeview .nav-icon {
    color: rgba(255, 255, 255, 0.78);
    font-size: .95rem;
}

/*
 * Induk yang submenunya sedang terbuka. Dibedakan tipis saja - cukup untuk
 * menandai "daftar di bawah ini milik saya", tapi sengaja tidak menyaingi
 * sorotan menu aktif yang memakai panel putih 22% plus penanda tepi.
 */
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link {
    background-color: rgba(255, 255, 255, 0.10);
    color: #fff;
}

/* Anak panah penanda induk. AdminLTE sudah memutarnya sendiri saat submenu
   terbuka; yang kurang hanya warnanya di atas gradasi ini. Dipilih i.right,
   bukan .right, supaya lencana angka di menu lain tidak ikut terwarnai. */
.main-sidebar .nav-sidebar .nav-link > p > i.right {
    color: rgba(255, 255, 255, 0.72);
}

/*
 * Sidebar yang diciutkan. AdminLTE mengembalikan jorokan treeview ke nol di
 * keadaan ini, jadi garis penuntun dan jorokan tambahan di atas ikut
 * ditiadakan - kalau tidak, garisnya akan memotong menu melayangnya.
 */
.sidebar-collapse .main-sidebar .nav-sidebar .nav-treeview::before {
    display: none;
}

.sidebar-collapse .main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    margin-left: 8px;
}

/* Judul seksi ("Master Akademik", dst). */
.main-sidebar .nav-header {
    color: rgba(255, 255, 255, 0.78);
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .74rem;
    font-weight: 700;
}

/* Garis pemisah panel pengguna, kalau suatu saat dinyalakan. */
.main-sidebar .user-panel {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.main-sidebar .nav-sidebar .nav-icon {
    color: rgba(255, 255, 255, 0.9);
}

/* Batang gulir sidebar disamarkan supaya tidak memotong gradasi dengan
   garis abu-abu terang. */
.main-sidebar .os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
    background: rgba(255, 255, 255, 0.35);
}

/*
 * Navbar atas memakai gradasi yang sama, arahnya menyerong ke kanan seperti
 * header papan presensi TV (lebar dan pendek) - bukan turun ke bawah seperti
 * sidebar. classes_topnav di config/adminlte.php diganti ke "navbar-dark"
 * supaya ikon dan tautan bawaan AdminLTE otomatis putih di atas latar ini.
 */
.main-header.navbar {
    background: linear-gradient(100deg,
        var(--sb-hijau-tua) 0%,
        var(--sb-hijau) 26%,
        var(--sb-hijau-muda) 54%,
        var(--sb-kuning-hijau) 78%,
        var(--sb-kuning) 100%) !important;
    border-bottom: 0;
}

/*
 * Identitas pondok di navbar (partials/identitas-navbar): nama pondok dan
 * moto, permintaan pemilik 30 Okt 2026. Mengisi ruang di antara tombol menu
 * dan tautan kanan; nama yang terlalu panjang dipotong elipsis supaya ikon
 * cari dan menu akun tidak terdorong keluar layar. Nama utuhnya di title.
 */
.main-header .identitas-pondok {
    display: flex;
    align-items: baseline;
    gap: 1.6rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 .5rem 0 1.25rem;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
}
.identitas-pondok__nama,
.identitas-pondok__moto {
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.2;
    letter-spacing: .01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
}
.identitas-pondok__nama { overflow: hidden; text-overflow: ellipsis; }
.identitas-pondok__moto { flex-shrink: 0; }

/* Tombol menu dan ikon kanan tidak ikut mengecil: yang mengalah selalu nama
   pondok. Tanpa ini, nama yang sangat panjang di HP mendorong ikon akun
   keluar layar dan halaman bisa digeser ke samping. */
.main-header.navbar > .navbar-nav { flex-shrink: 0; }

/* Laptop sempit: lebih kecil, tetap sebaris. */
@media (max-width: 1199.98px) {
    .main-header .identitas-pondok { gap: 1rem; }
    .identitas-pondok__nama,
    .identitas-pondok__moto { font-size: 1.35rem; }
}

/* HP dan tablet: dua baris - nama tebal, moto kecil di bawahnya. */
@media (max-width: 767.98px) {
    .main-header .identitas-pondok {
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 0;
        padding-left: .25rem;
    }
    .identitas-pondok__nama { font-size: 1.05rem; max-width: 100%; }
    .identitas-pondok__moto {
        font-size: .74rem;
        font-weight: 600;
        opacity: .9;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/*
 * HP: tombol layar penuh disembunyikan dan nama akun diganti ikon, supaya
 * nama pondok punya ruang. Menu akunnya tetap terbuka saat ikonnya disentuh.
 */
@media (max-width: 575.98px) {
    .main-header [data-widget="fullscreen"] { display: none; }
    .main-header .user-menu > .nav-link > span { display: none; }
    .main-header .user-menu > .nav-link::before {
        content: "\f2bd";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 1.15rem;
    }
    .main-header .user-menu > .nav-link.dropdown-toggle::after { display: none; }
}