/*
 * AMPHURI — Velzon theme override (design system)
 * Primary = hijau soft (#4ba585). Hanya berlaku di shell Velzon (file ini hanya
 * di-load oleh layouts/partials/velzon/head.blade.php), jadi Mazer tak terpengaruh.
 *
 * Velzon meng-hardcode hex pada beberapa komponen (mis. .btn-primary), bukan selalu
 * var(--vz-primary). Karena itu override mencakup root vars + komponen kunci.
 */

:root {
    --vz-primary: #4ba585;
    --vz-primary-rgb: 75, 165, 133;
    --vz-primary-text-emphasis: #357a61;
    --vz-primary-bg-subtle: #e9f5f0;
    --vz-primary-border-subtle: #bfe2d4;

    --vz-link-color: #4ba585;
    --vz-link-color-rgb: 75, 165, 133;
    --vz-link-hover-color: #3f8e72;
}

/* Tombol solid primary (Velzon hardcode shade-nya) */
.btn-primary {
    --vz-btn-bg: #4ba585;
    --vz-btn-border-color: #4ba585;
    --vz-btn-hover-bg: #3f8e72;
    --vz-btn-hover-border-color: #3b866b;
    --vz-btn-active-bg: #3b866b;
    --vz-btn-active-border-color: #377e65;
    --vz-btn-focus-shadow-rgb: 75, 165, 133;
    --vz-btn-disabled-bg: #4ba585;
    --vz-btn-disabled-border-color: #4ba585;
}

/* Outline & ghost primary */
.btn-outline-primary {
    --vz-btn-color: #4ba585;
    --vz-btn-border-color: #4ba585;
    --vz-btn-hover-bg: #4ba585;
    --vz-btn-hover-border-color: #4ba585;
    --vz-btn-active-bg: #4ba585;
    --vz-btn-active-border-color: #4ba585;
    --vz-btn-focus-shadow-rgb: 75, 165, 133;
}

.btn-ghost-primary {
    color: #4ba585;
}

/* Form controls fokus */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #9cd0bd;
    box-shadow: 0 0 0 .15rem rgba(75, 165, 133, .25);
}

.form-check-input:checked {
    background-color: #4ba585;
    border-color: #4ba585;
}

/* Sidebar — warna item & sub-item aktif/hover memakai primary hijau.
   Di-set pada .navbar-menu (ancestor terdekat) → menang atas default ungu #4b38b3
   di :root maupun [data-bs-theme=dark] untuk light & dark mode. */
.navbar-menu {
    --vz-vertical-menu-item-active-color: #4ba585;
    --vz-vertical-menu-item-hover-color: #4ba585;
    --vz-vertical-menu-sub-item-hover-color: #4ba585;
    --vz-vertical-menu-sub-item-active-color: #4ba585;
}

.navbar-menu .navbar-nav .nav-sm .nav-link.active,
.navbar-menu .navbar-nav .nav-link.active {
    color: #4ba585;
}

/* Sidebar ikut mode gelap.
   Velzon default: [data-bs-theme=dark] tetap set --vz-vertical-menu-bg:#fff (sidebar putih)
   kecuali data-sidebar=dark. Shell kita data-sidebar=light, jadi sidebar tak ikut gelap.
   Override variabel sidebar saat tema gelap (mirror nilai [data-bs-theme=dark][data-sidebar=dark]),
   active/hover tetap hijau brand. Dimuat setelah app.min.css → menang via urutan sumber. */
[data-bs-theme="dark"] {
    --vz-vertical-menu-bg: #212529;
    --vz-vertical-menu-border: #212529;
    --vz-vertical-menu-item-color: #a3a6b7;
    --vz-vertical-menu-item-bg: rgba(255, 255, 255, 0.15);
    --vz-vertical-menu-item-active-bg: rgba(255, 255, 255, 0.15);
    --vz-vertical-menu-sub-item-color: #a3a6b7;
    --vz-vertical-menu-title-color: #9b9eb1;
}

/* Pagination & nav-pills aktif */
.pagination {
    --vz-pagination-active-bg: #4ba585;
    --vz-pagination-active-border-color: #4ba585;
    --vz-pagination-focus-box-shadow: 0 0 0 .25rem rgba(75, 165, 133, .25);
}

.nav-pills {
    --vz-nav-pills-link-active-bg: #4ba585;
}

/* Hamburger tetap berbentuk hamburger di kedua state, cuma di-flip arah ratanya.
   Velzon default: .hamburger-icon.open me-rotate ketiga bar jadi chevron (rotate 90deg),
   yang di mobile terbaca seperti tombol back/next — tidak familiar sebagai toggle menu.
   Override: state collapse (default) bar pendek rata kanan; state open bar pendek rata kiri. */
.hamburger-icon.open {
    transform: none;
}

.hamburger-icon.open span:nth-child(1) {
    top: 0;
    left: 0;
    right: auto;
    width: 80%;
    transform: none;
    transition-delay: 0ms;
}

.hamburger-icon.open span:nth-child(2) {
    top: 6px;
    left: 0;
    right: auto;
    width: 100%;
    transform: none;
    transition-delay: 0ms;
}

.hamburger-icon.open span:nth-child(3) {
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    width: 60%;
    transform: none;
    transition-delay: 0ms;
}

/* Tampilkan logo app di sidebar mobile.
   Velzon default menyembunyikan .navbar-brand-box di ≤767.98px (logo dipindah ke header),
   tapi saat sidebar mobile slide-in tak ada logo. Munculkan khusus brand-box di dalam app-menu. */
@media (max-width: 767.98px) {
    .app-menu .navbar-brand-box {
        display: block;
    }

    .app-menu .logo span.logo-lg {
        display: inline-block;
    }

    .app-menu .logo span.logo-sm {
        display: none;
    }

    /* Sidebar mobile: jadikan flex-column setinggi viewport TAMPAK (100dvh →
       memperhitungkan toolbar browser yg dinamis). Brand-box & kotak cari (sticky)
       di atas, #scrollbar mengisi sisa ruang & itulah satu-satunya area scroll →
       item terbawah (Informasi Kemenhaj, Pengaturan) selalu bisa dijangkau.
       Mengganti hack lama `height: calc(100% - 70px)` yg rapuh + ketutup UI browser.
       `.navbar-menu` bawaan punya padding-bottom 95px → di-nol-kan supaya tak makan ruang. */
    .app-menu {
        display: flex;
        flex-direction: column;
        height: 100vh;
        height: 100dvh;
        padding-bottom: 0;
    }
    .app-menu .navbar-brand-box { flex: 0 0 auto; }
    .app-menu #scrollbar {
        flex: 1 1 auto;
        min-height: 0;
        height: auto !important;
    }

    /* Ruang kecil di bawah daftar menu agar item terakhir tak mepet tepi. */
    .app-menu #navbar-nav { padding-bottom: 1.5rem; }
}

/* Kotak "Cari menu/fitur" dibuat sticky di puncak area scroll SimpleBar sidebar,
   agar tetap terlihat saat daftar menu yang panjang di-scroll. Background memakai
   warna sidebar (--vz-vertical-menu-bg, ikut light/dark) supaya item menu tidak
   tembus di belakangnya; shadow tipis sebagai pemisah saat ada konten di bawahnya. */
.app-menu .sidebar-menu-search {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--vz-vertical-menu-bg, #fff);
    box-shadow: 0 6px 8px -6px rgba(0, 0, 0, .12);
}

/* Ruang kanan input supaya teks tak menabrak ikon/tombol bersihkan. */
.sidebar-menu-search .form-control { padding-right: 2.1rem; }

/* Ikon cari & tombol bersihkan menempati posisi IDENTIK (saling gantian),
   ukuran & kotak sama → tombol X tepat di tempat ikon, tak meleset. */
.sidebar-menu-search-affix {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    line-height: 1;
    font-size: 1rem;
}
.sidebar-menu-search-affix > i { line-height: 1; }
#sidebarMenuSearchClear { cursor: pointer; }

/* Mobile: selama input pencarian fokus, PAKSA sidebar tetap terbuka walau
   app.js melepas .vertical-sidebar-enable saat keyboard virtual memicu resize.
   Menang atas margin-right:-100% → sidebar tak slide-out/in (cegah kedip). */
@media (max-width: 767.98px) {
    body.menu-search-focused .app-menu { margin-right: 0 !important; }
    body.menu-search-focused .vertical-overlay { display: block; }
}

/* Jarak antar tombol pagination DataTables.
   DataTables v2 me-render markup .dt-container > .dt-paging > ul.pagination (BUKAN
   .dataTables_paginate lama), jadi aturan di ds-components.css tak kena. Velzon
   app.min.css cuma kasih .page-link{margin:0 3px} → tombol mepet. Pakai gap di ul
   + nol-kan margin link (specificity > .page-link!important) biar jaraknya rata. */
.dt-container .dt-paging .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.dt-container .dt-paging .pagination .page-item .page-link,
.dt-container .dt-paging .pagination .page-link {
    margin: 0 !important;
}

/* DataTables Responsive di HP.
   Tabel umumnya dibungkus .table-responsive (overflow-x:auto). Wrapper itu memberi
   ruang scroll tak terbatas sehingga extension Responsive mengira selalu muat → tak
   pernah collapse. Saat wrapper berisi .dt-container, jadikan overflow visible agar
   extension menghitung lebar viewport dengan benar & meng-collapse kolom di layar kecil. */
.table-responsive:has(.dt-container) {
    overflow: visible;
}
/* Tombol expand Responsive ala Velzon: lingkaran (+)/(−) memakai warna brand via
   CSS var (ikut tema + dark mode), border-ring halus seperti kontrol native Velzon,
   soft shadow, dan hover-lift biar terasa "bisa di-tap". Pakai !important supaya
   menang atas responsive.dataTables.min.css (di-load setelah file ini). */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
    position: relative;
    padding-left: 2.2rem !important;
    cursor: pointer;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
    content: "+" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0.6rem !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin-top: -0.625rem !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 2px solid var(--vz-secondary-bg, #fff) !important;
    border-radius: 50% !important;
    background-color: var(--vz-primary) !important;
    color: #fff !important;
    font-family: inherit !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-align: center !important;
    text-indent: 0 !important;
    box-shadow: 0 0 3px rgba(0, 0, 0, .18) !important;
    transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:hover:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:hover:before {
    transform: scale(1.12) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .22) !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {
    content: "−" !important;
    background-color: var(--vz-danger, #f06548) !important;
}

/* Control bar DataTables responsif di HP.
   Build Velzon = integrasi Bootstrap5: .dt-container > .row > .col-md-auto > (.dt-length|
   .dt-search|.dt-info|.dt-paging). Di <md, .col-md-auto tak punya lebar + me-auto/ms-auto
   bikin length & search terpisah jauh (justify-between) → tak rapi. Solusi: tumpuk vertikal
   (flex-column) full-width. Atas (length/search) rata kiri & search full-width; bawah
   (info/paging) rata tengah. */
@media (max-width: 767.98px) {
    .dt-container > .row {
        flex-direction: column;
        row-gap: .5rem;
        margin-left: 0;
        margin-right: 0;
    }
    .dt-container > .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .dt-container .dt-length,
    .dt-container .dt-search {
        width: 100%;
    }
    /* "entries per page": select auto-width (jangan 100% ala form-select) sejajar label. */
    .dt-container .dt-length {
        display: flex;
        align-items: center;
        gap: .5rem;
    }
    .dt-container .dt-length select {
        width: auto;
        flex: 0 0 auto;
    }
    .dt-container .dt-length label {
        margin-bottom: 0;
        white-space: nowrap;
    }
    /* label "Search:" + input bersebelahan, input mengisi sisa lebar. */
    .dt-container .dt-search {
        display: flex;
        align-items: center;
        gap: .5rem;
    }
    .dt-container .dt-search label {
        margin-bottom: 0;
        white-space: nowrap;
    }
    .dt-container .dt-search input {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        margin-left: 0;
    }
    .dt-container .dt-info,
    .dt-container .dt-paging {
        width: 100%;
        text-align: center;
    }
    .dt-container .dt-paging .pagination {
        justify-content: center;
    }
}

/* Velzon .section (kelas landing-page) = padding 90px 0. Di shell ADMIN, kelas ini
   banyak dipakai sebagai pembungkus konten biasa → padding-atas 90px bikin ruang
   kosong jauh antara judul (page-title) & konten. Nol-kan padding ATAS, sisakan
   sedikit padding BAWAH supaya konten terakhir tak mepet ke footer. File ini HANYA
   dimuat di shell Velzon admin, jadi .section di frontpage publik tak terpengaruh.
   position:relative dari Velzon dibiarkan (beberapa anak absolute mengandalkannya). */
.section {
    padding-top: 0;
    padding-bottom: 1.5rem;
}

/* ── Tab filter (.nav-tabs) responsif di HP ──────────────────────────────────
   Strip tab (mis. /events, /user, /staff, /pembayaran) berisi banyak tab
   ikon+label+badge yang tak muat di layar HP → Bootstrap membungkusnya turun
   ke beberapa baris (berantakan). Aturan global ini membuat SEMUA .nav-tabs
   tetap satu baris & bisa digeser horizontal (swipe). Berlaku otomatis di
   seluruh halaman shell Velzon — tak perlu CSS per-view. Pendamping JS
   (scroll tab aktif ke tengah) ada di shared/global-scripts.blade.php. */
@media (max-width: 767.98px) {
    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;          /* Firefox: sembunyikan scrollbar */
        -ms-overflow-style: none;       /* IE/Edge lawas */
    }
    .nav-tabs::-webkit-scrollbar { display: none; }   /* WebKit */
    .nav-tabs .nav-item { flex: 0 0 auto; }
    .nav-tabs .nav-link { white-space: nowrap; }
}

/* ── Konten notulensi (HTML WYSIWYG) ─────────────────────────────────────────
   Konten deskripsi notulensi dirender dari editor kaya teks dan bisa memuat
   gambar/tabel besar yang melampaui lebar card. Aturan ini menjaga media
   tetap responsif & jarak antar-elemen rapi di halaman detail. */
.ds-notulensi-content img { max-width: 100%; height: auto; border-radius: .25rem; }
.ds-notulensi-content table { width: 100%; max-width: 100%; }
.ds-notulensi-content > :last-child { margin-bottom: 0; }