/* =========================================================
   PMB Design System
   Struktur & pola mengikuti SIBAYA; palet memakai brand PMB
   (indigo #2737C9 sebagai primary, aksen emas #C68C3E sesuai warna
   emas pada logo UYM).
   ========================================================= */

/* Banner notifikasi kuning di beranda CAMABA. Tetap menempel saat
   halaman digulir supaya mahasiswa terus ingat langkah yang belum
   dikerjakan — posisinya di dalam card, jadi ikut ter-scope dan tidak
   menimpa sidebar. */
.pmb-sticky-notice {
    position: sticky;
    top: calc(var(--pmb-topbar-h, 68px) + .75rem);
    z-index: 10;
}

:root {
    /* Lebar sidebar yang dipakai untuk memposisikan tombol perkecil.
       253px = nilai .page-sidebar bawaan Admiro. Rail saat diperkecil
       ada di .page-wrapper.pmb-sidebar-compact di bawah. Ini soal
       geometri, bukan warna, makanya tidak ikut di blok --sidebar-*. */
    --pmb-sidebar-w: 253px;

    /* ---------------------------------------------------------------
       Primary mengikuti portal LMS Mahasiswa UYM
       (https://mahasiswa.lms.uym.ac.id/): indigo #2737C9. Aksen
       TIDAK ikut portal — portal memakai ungu #7957D5, sedangkan logo
       UYM memuat emas #C68C3E, jadi aksen sekarang emas. Warna status
       (teal/merah/amber) tetap.

       Dua penyimpangan dari referensi, keduanya soal keterbacaan:
         1. Warna status TEKS digelapkan. Reference memakai warna
            mentah di atas tint 10% (#00BF8E di #E5F8F3) yang hanya
            2,15:1 — jauh di bawah ambang WCAG AA. Nilai di bawah
            mencapai 4,5:1.
         2. --text-muted dinaikkan dari #747A8B (4,29:1) ke
            #656B7C (5,32:1).
       --------------------------------------------------------------- */
    --theme-default: #2737C9;
    --theme-default-dark: #1B2A96;
    --theme-default-rgb: 39, 55, 201;
    --theme-default-light: #4A57DB;
    /* Aksen kedua tadinya ungu (#7957D5). Warna itu tidak ada di logo
       UYM — logo memakai navy #043B89 dan emas #C68C3E — jadi aksen kedua
       diganti emas sesuai brand.

       Nilai gelap dipakai untuk teks di atas permukaan terang: emas logo
       (#C68C3E) hanya 2,9:1 terhadap putih, jadi tidak aman untuk teks
       kecil. Varian gelap #7A5518 di atas #FAF3E6 mencapai 5,2:1. */
    --theme-secondary: #C68C3E;
    --theme-secondary-dark: #B07A2E;
    --theme-secondary-rgb: 198, 140, 62;

    /* Surfaces */
    --surface: #F5F6FA;
    --card-bg: #FFFFFF;
    --card-border: #E6E9ED;
    --border-soft: #E9EBF0;
    --text-body: #1A2134;
    --text-muted: #656B7C;

    /* Topbar */
    --topbar-bg: #FFFFFF;
    --topbar-border: #E6E9ED;
    --topbar-logo-bg: var(--topbar-bg);
    --topbar-shadow: 0px 4px 34px rgba(39, 55, 201, 0.06);

    /* Plat di belakang logo admin */

    /* Soft status (badge / chip) — bg dari tint 10% referensi,
       fg digelapkan agar teksnya terbaca di atas bg tersebut. */
    --soft-primary-bg: #EEF0FC;
    --soft-primary-fg: #2737C9;
    --soft-success-bg: #E5F8F3;
    --soft-success-fg: #067F5B;
    --soft-warning-bg: #FEF4E3;
    --soft-warning-fg: #8A5A06;
    --soft-pending-bg: #EFF1F5;
    --soft-pending-fg: #4A5265;
    --soft-danger-bg: #FDEBEF;
    --soft-danger-fg: #B3123A;
    --soft-info-bg: #E8F1FD;
    --soft-info-fg: #0B5FBF;
    --soft-secondary-bg: #FAF3E6;
    --soft-secondary-fg: #7A5518;

    /* Sidebar — PUTIH.
       Permintaan: sidebar gelap "bikin sakit mata". Latar indigo #2737C9
       memenuhi hampir seluruh tinggi layar, dan teks putih di atas bidang
       gelap sebesar itu memang melelahkan untuk mata dalam waktu lama.

       Sidebar putih membuat topbar (yang juga putih) menyatu, jadi batas
       keduanya cukup garis --topbar-border, tanpa blok warna besar
       sebagai pemisah. Menu aktif ditandai indigo + bar indigo; bar putih
       di atas putih lenyap. */
    --sidebar-bg: #FFFFFF;
    --sidebar-text: #3F4859;
    --sidebar-text-strong: #1A2134;
    --sidebar-muted: #6B7183;
    --sidebar-hover: rgba(26, 33, 52, .045);
    --sidebar-active: rgba(39, 55, 201, .09);
    --sidebar-active-bar: #2737C9;
    --sidebar-leaf-active: rgba(39, 55, 201, .075);
    /* Rail: garis submenu, thumb scrollbar, ikon pin. Di sidebar putih ini
       harus gelap samar — putih tidak terlihat. */
    --sidebar-rail: rgba(26, 33, 52, .12);
    --sidebar-field-invert: invert(0);



    /* Data tables */
    --table-head-bg: #F3F5FA;
    --table-head-color: #1A2134;
    --table-border: #E6E9ED;
    --table-row-bg: #FFFFFF;
    --table-row-alt-bg: #F1F5F9;
    --table-row-hover: #EEF0FC;
    --table-empty-bg: #FAFBFD;
    --table-index-color: #656B7C;
    --table-caret: #8B91A3;

    /* Alias ke Bootstrap: menyamakan tautan warna & primary supaya
       kelas utilitas (text-bg-primary, text-bg-warning) tidak lagi
       memakai biru/kuning bawaan yang berbeda dari brand. */
    --bs-primary: #2737C9;
    --bs-primary-rgb: 39, 55, 201;
    --bs-link-color: #2737C9;
    --bs-link-color-rgb: 39, 55, 201;
    --bs-link-hover-color: #1B2A96;
    --bs-link-hover-color-rgb: 27, 42, 150;
    --bs-warning: #FEAE37;
    --bs-warning-rgb: 254, 174, 55;

    /* Font — Inter, mengikuti portal LMS Mahasiswa UYM. Berkasnya di-host
       sendiri (assets/css/local-fonts.css), bukan dari CDN. */
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --bs-body-font-family: var(--bs-font-sans-serif);
}

/* =========================================================
   Komponen isian & tampilan (halaman CAMABA)
   ========================================================= */

/* --- Toggle dalam tabel: tanpa padding untuk label, tetap tengah --- */
.table .pmb-switch,
.table td .pmb-switch,
.table th .pmb-switch {
    padding-left: 0;
    min-height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.table .pmb-switch > .pmb-toggle {
    margin-left: 0;
    margin-right: 0;
}

/* Angka nominal dan nilai penting yang menonjol tanpa kehilangan warna
   teks utama. */
.pmb-emphasis {
    color: var(--theme-default);
}

/* Label kecil di atas nilai. Menggantikan pola
   class="text-uppercase small fw-bold text-muted" + style letter-spacing
   yang diulang di puluhan view. */
.pmb-eyebrow {
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .25rem;
}

.pmb-eyebrow--sm {
    font-size: .7rem;
}

/* Kelompok isian di dalam satu kartu. Garis pemisah muncul di kelompok
   kedua dan seterusnya, bukan di yang pertama. */
.pmb-group + .pmb-group {
    margin-top: 1.35rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--card-border);
}

.pmb-group__title {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .9rem;
}

/* Aksen kecil di depan judul kelompok — penanda bahwa baris di bawahnya
   masih satu kelompok, bukan daftar isian yang terpisah. */
.pmb-group__title::before {
    content: "";
    flex-shrink: 0;
    width: 3px;
    height: .9rem;
    border-radius: 2px;
    background: var(--theme-default);
}

/* Panel ringkasan: satu blok info dengan label di atas nilai. Nilai dipotong
   satu baris supaya tinggi panelnya seragam walau isinya panjang. */
.pmb-panel {
    padding: .75rem .9rem;
    border: 1px solid var(--card-border);
    border-radius: .6rem;
    background: var(--card-bg);
}

/* Panel yang di sini berfungsi sebagai sorotan, bukan kartu biasa:
   latar soft tanpa garis. */
.pmb-panel--primary { background: var(--soft-primary-bg); border-color: transparent; }
.pmb-panel--success { background: var(--soft-success-bg); border-color: transparent; }

.pmb-panel__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: .1rem;
}

.pmb-panel__value {
    font-size: .88rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tab berupa pil: lebih longgar daripada nav-tabs untuk nama bagian yang
   panjang, dan tetap bisa digeser di layar sempit. */
.pmb-tablist {
    display: flex;
    gap: .35rem;
    overflow-x: auto;
    padding-bottom: .25rem;
    scrollbar-width: thin;
}

.pmb-tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: .4rem .85rem;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: .85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.pmb-tab:hover {
    color: var(--theme-default);
    border-color: var(--theme-default);
}

.pmb-tab.is-active {
    background: var(--theme-default);
    border-color: var(--theme-default);
    color: #fff;
}

/* Wadah untuk bar progres + keterangan isian wajib. */
.pmb-progress-panel {
    padding: .7rem .85rem;
    border: 1px solid var(--card-border);
    border-radius: .6rem;
    background: var(--card-bg);
}

/* Catatan singkat di bawah isian, tanpa blok alert besar. */
.pmb-hint {
    font-size: .78rem;
    color: var(--text-muted);
}

/* Badge berukuran kecil untuk penghitung di dalam tab. */
.pmb-badge--xs {
    font-size: .64rem;
    line-height: 1;
    padding: .3em .5em;
    vertical-align: middle;
}

/* Thumbnail dokumen (foto). */
.pmb-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

.pmb-thumb-box {
    width: 56px;
    flex-shrink: 0;
    text-align: center;
}

/* Garis pemisah di dalam kartu. Menggantikan
   style="border-top:1px solid var(--card-border)" yang diulang di
   beberapa halaman. */
.pmb-divider-top {
    border-top: 1px solid var(--card-border);
}

.pmb-divider-bottom {
    border-bottom: 1px solid var(--card-border);
}

/* Nilai yang sudah ditentukan sistem (kampus, kelas, sesi terkunci).
   Semula memakai .form-control bg-light sehingga terbaca sebagai isian
   yang bisa diketik padahal hanya informatif. */
.pmb-autofill {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-content: center;
    gap: .6rem 1.5rem;
    padding: .8rem 1rem;
    background: var(--soft-secondary-bg);
    border: 1px solid var(--card-border);
    border-radius: .5rem;
}

.pmb-autofill__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pmb-autofill__value {
    font-weight: 600;
    color: var(--text-body);
}

/* Baris ringkasan: label kiri, nilai kanan. */
.pmb-sum {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .8125rem;
}

.pmb-sum__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .75rem;
}

.pmb-sum__label {
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.pmb-sum__value {
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

/* Nilai yang belum ada: bukan "-", tapi kalimat, supaya jelas itu
   field yang menunggu diisi dan bukan data kosong. */
.pmb-sum__value.is-empty {
    font-weight: 500;
    color: var(--text-muted);
}

.pmb-sum__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .625rem .875rem;
    background: var(--soft-primary-bg);
    border-radius: .5rem;
    font-size: .8125rem;
}

/* Badge brand: dipakai untuk jenjang sekolah di daftar saran. */
.pmb-badge--brand {
    background: var(--theme-default);
    color: #fff;
}

/* Daftar saran sekolah. */
.pmb-suggestion {
    z-index: 1050;
    max-height: 20rem;
    overflow: auto;
    border-radius: .5rem;
    border: 1px solid var(--card-border);
}

.pmb-suggestion__item:hover,
.pmb-suggestion__item:focus-visible {
    background: var(--soft-primary-bg);
    color: var(--text-body);
    outline: 0;
}

/* Pemisah kolom pada strip informasi: vertikal di layar lebar,
   horizontal saat tiga blok itu turun ke bawah. */
@media (min-width: 768px) {
    .pmb-col-divide + .pmb-col-divide {
        border-left: 1px solid var(--card-border);
    }
}

@media (max-width: 767.98px) {
    .pmb-col-divide + .pmb-col-divide {
        border-top: 1px solid var(--card-border);
    }
}

/* Ringkasan ikut tertahan saat halaman panjang digulir, supaya total
   selalu terlihat tanpa harus naik lagi ke form. */
@media (min-width: 992px) {
    .pmb-sticky-summary {
        position: sticky;
        top: calc(var(--pmb-topbar-h, 68px) + 1rem);
        z-index: 10;
    }
}

/* =========================================================
   Layout
   ========================================================= */
.page-body-wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 72px);
    min-width: 0;
}

.page-body {
    flex: 1 1 auto;
    min-height: auto !important;
    /* PENTING: item flex punya min-width:auto secara default, jadi .page-body
       ikut melebar mengikuti lebar tabel dan seluruh halaman jadi bisa digeser
       ke samping di layar kecil. min-width:0 mengembalikan .table-responsive
       sebagai tempat tabel digeser. */
    min-width: 0;
    background: var(--surface);
}

.footer {
    margin-top: auto;
    border-top: 1px solid var(--border-soft) !important;
    padding: 15px 0;
    background: var(--card-bg);
    color: var(--text-muted);
}

/* =========================================================
   Loading skeleton
   Loader penuh dari Admiro menutupi layar; skeleton hanya
   menutupi area konten dan hilang maksimal 1,2 detik.
   ========================================================= */
.page-skeleton {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: var(--surface);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.page-skeleton[hidden] {
    display: none;
}

.page-skeleton-row {
    display: flex;
    gap: 16px;
}

.sk-block {
    background: linear-gradient(90deg, #EDF0F5 25%, #F6F8FB 37%, #EDF0F5 63%);
    background-size: 400% 100%;
    animation: sk-shimmer 1.3s ease-in-out infinite;
    border-radius: 8px;
}

.sk-title {
    height: 26px;
    width: 240px;
}

.sk-subtitle {
    height: 16px;
    width: 380px;
    max-width: 100%;
}

.sk-card {
    height: 108px;
    flex: 1 1 0;
}

.sk-wide {
    height: 320px;
    flex: 1 1 100%;
}

@keyframes sk-shimmer {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0 50%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sk-block {
        animation: none;
    }
}

/* =========================================================
   Print header — hanya tampil saat dicetak
   ========================================================= */
.print-header {
    display: none;
}

@media print {
    .print-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding-bottom: 8px;
        margin-bottom: 12px;
        border-bottom: 2px solid var(--theme-default);
        font-size: 12px;
    }

    .print-header strong {
        display: block;
        font-size: 15px;
        color: var(--theme-default);
    }

    .print-header-meta {
        text-align: right;
        color: #555;
    }

    .print-header-meta span {
        display: block;
    }

    .page-skeleton,
    .tap-top,
    .loader-wrapper,
    .page-header,
    .page-sidebar,
    .footer,
    .dataTables_paginate,
    .dataTables_filter,
    .dataTables_length,
    .dt-buttons,
    .table-filters {
        display: none !important;
    }

    body,
    .page-body {
        background: #fff !important;
    }
}

/* =========================================================
   Progress bar global (SibaUI)
   ========================================================= */
.siba-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0;
    z-index: 2000;
    background: linear-gradient(90deg, var(--theme-default), var(--theme-secondary));
    opacity: 0;
    transition: width .2s ease, opacity .25s ease;
    pointer-events: none;
}

.siba-progress.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .siba-progress {
        transition: none;
    }
}

/* =========================================================
   Ringkasan error form (SibaForm)
   ========================================================= */
.siba-error-summary {
    margin-bottom: 1rem;
    border: 1px solid var(--soft-danger-fg);
    border-left: 4px solid var(--soft-danger-fg);
    border-radius: 6px;
    background: var(--soft-danger-bg);
    color: var(--soft-danger-fg);
    padding: .75rem 1rem;
    font-size: .875rem;
}

.siba-error-summary strong {
    display: block;
    margin-bottom: .25rem;
}

.siba-error-summary ul {
    margin: 0;
    padding-left: 1.1rem;
}

.siba-error-summary a {
    color: inherit;
    text-decoration: underline;
}

/* =========================================================
   Tanggal relatif & teks terpotong (SibaFormat)
   ========================================================= */
.siba-date {
    display: inline-flex;
    align-items: baseline;
    gap: .35rem;
    white-space: nowrap;
}

.siba-rel {
    font-size: .72rem;
    color: var(--text-muted);
    background: var(--soft-secondary-bg);
    border-radius: 999px;
    padding: 0 .4rem;
}

.siba-truncate {
    display: inline-block;
    max-width: 22ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

.siba-detail-value {
    color: var(--text-body);
    word-break: break-word;
}

/* =========================================================
   Empty state tabel
   ========================================================= */
.table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: 2.25rem 1rem;
    text-align: center;
}

.table-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--soft-secondary-bg);
    color: var(--text-muted);
    font-size: 1.25rem;
    margin-bottom: .35rem;
}

.table-empty-title {
    margin: 0;
    font-weight: 600;
    color: var(--text-body);
}

.table-empty-text {
    margin: 0;
    font-size: .82rem;
    color: var(--text-muted);
}

/* =========================================================
   Tombol sekunder (btn-outline-secondary)
   admiro-custom.css mewarnai SEMUA btn-outline-secondary menjadi emas
   supaya kontras di kartu putih. Akibatnya setiap tombol sekunder --
   Batal, Tutup, Reset, tombol filter, tombol ekspor -- berwarna brand
   dan bersaing dengan tombol utama; "Batal" bahkan terbaca seperti
   CTA. Warna emas dikembalikan ke perannya: aksen brand (sorotan menu
   aktif, segel), bukan warna semua aksi sekunder.
   ========================================================= */
/* Selektor memakai :not(:hover) yang sama dengan aturan lama di
   admiro-custom.css. Tanpa itu aturan lama (:not(:hover) menambah
   specificity) tetap menang dan teks tombol kembali emas. */
body.light button.btn-outline-secondary:not(:hover):not(:active):not(.active):not([aria-expanded="true"]):not([aria-pressed="true"]):not(.btn-clicked),
body.light a.btn-outline-secondary:not(:hover):not(:active):not(.active):not([aria-expanded="true"]):not([aria-pressed="true"]):not(.btn-clicked) {
    color: var(--text-muted);
    border-color: var(--card-border);
    background-color: var(--card-bg);
}

body.light button.btn-outline-secondary:hover:not(:active):not(.active):not([aria-expanded="true"]):not([aria-pressed="true"]):not(.btn-clicked),
body.light a.btn-outline-secondary:hover:not(:active):not(.active):not([aria-expanded="true"]):not([aria-pressed="true"]):not(.btn-clicked) {
    color: var(--text-body);
    border-color: var(--text-muted);
    background-color: var(--soft-secondary-bg);
}

body.light button.btn-outline-secondary:not(:hover) .stroke-icon,
body.light a.btn-outline-secondary:not(:hover) .stroke-icon {
    stroke: var(--text-muted);
}

/* Di dalam wrapper DataTables berlaku aturan serupa. */
body.light .dataTables_wrapper button.btn-outline-secondary:not(:hover):not(:active):not(.active):not([aria-expanded="true"]):not([aria-pressed="true"]):not(.btn-clicked) {
    color: var(--text-muted);
    border-color: var(--card-border);
}

/* =========================================================
   Panel filter tabel
   ========================================================= */

/* Toolbar: satu baris penuh. Sebelumnya .table-filters memakai flex row
   sementara anaknya tidak merebut lebar, sehingga baris hanya selebar
   isinya (667px dari 1090px) dan tombol ekspor terlempar ke baris kedua.

   Jarak ke tabel dikasih di sini (bukan margin manual per view) supaya
   halaman yang memakai komponen dan halaman yang menerima toolbar otomatis
   punya jarak yang sama. Tanpa ini jaraknya 0px dan tabel menempel pada
   kotak cari. */
.table-filters {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 1rem;
}

/* Panel filter yang terbuka juga butuh jarak ke tabel. */
.table-filters-panel:not([hidden]) {
    margin-bottom: 1rem;
}

.table-filters-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    width: 100%;
}

/* Zona kiri merebut sisa ruang baris supaya tombol Filter tidak terlempar
   ke baris kedua hanya karena kotak cari tidak bisa melebar. */
.table-filters-left {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    flex: 1 1 auto;
    min-width: 0;
}

.table-filters-right {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Di layar sempit seluruh zona turun sebagai satu blok, bukan memecah
   tombolnya satu per satu. */
@media (max-width: 767.98px) {

    .table-filters-left,
    .table-filters-right {
        width: 100%;
    }

    .table-filters-search {
        flex: 1 1 100%;
        max-width: none !important;
    }
}

.table-filters-search {
    flex: 1 1 240px;
    max-width: 340px;
    min-width: 180px;
}

.table-filters-search .input-group-text {
    min-height: 34px;
    height: 34px;
    background-color: #ffffff !important;
    border: 1px solid #CBD5E1 !important;
    border-right: none !important;
    color: #94A3B8 !important;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.table-filters-search .form-control {
    min-height: 34px;
    height: 34px;
    border: 1px solid #CBD5E1 !important;
    border-left: none !important;
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
    font-size: 0.85rem !important;
    color: #1E293B !important;
}

.table-filters-search .form-control:focus {
    border-color: var(--theme-default, #2737C9) !important;
    box-shadow: none !important;
}

.table-filters-search:focus-within .input-group-text {
    border-color: var(--theme-default, #2737C9) !important;
    color: var(--theme-default, #2737C9) !important;
}

.table-filters-length {
    width: auto;
    min-width: 74px;
    min-height: 34px;
    height: 34px;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    font-size: 0.85rem !important;
    color: #334155 !important;
}

/* Grup ekspor: satu kelompok alat konsisten */
.table-filters-export {
    border-radius: 8px !important;
    overflow: visible !important;
}

.table-filters-export .dropdown-menu {
    z-index: 1060 !important;
}

.table-filters-export > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    height: 34px;
    border-color: #CBD5E1 !important;
    background-color: #ffffff !important;
    color: #475569 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    transition: all .15s ease;
}

.table-filters-export > .btn:hover {
    background: #EEF0FC !important;
    color: var(--theme-default, #2737C9) !important;
    border-color: var(--theme-default, #2737C9) !important;
}

.table-filters-export > .btn:active,
.table-filters-export > .btn.active,
.table-filters-export > .btn.btn-clicked,
.table-filters-export > .btn[aria-expanded="true"] {
    background-color: #334155 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(51, 65, 85, 0.25) !important;
}

.table-filters-export > .btn:active i,
.table-filters-export > .btn:active span,
.table-filters-export > .btn.active i,
.table-filters-export > .btn.active span,
.table-filters-export > .btn.btn-clicked i,
.table-filters-export > .btn.btn-clicked span,
.table-filters-export > .btn[aria-expanded="true"] i,
.table-filters-export > .btn[aria-expanded="true"] span {
    color: #ffffff !important;
}

/* =========================================================
   TABLE FILTER TOGGLE & COUNT BADGE (HARMONIOUS, CRISP & MODERN)
   Tidak bentrok warna: idle bersih putih-abu, open soft-tint, active solid indigo dengan badge putih
   ========================================================= */

/* 1. Default State (No Filter, Panel Closed) */
button#filterToggle.table-filters-toggle,
.table-filters-toggle {
    display: inline-flex !important;
    align-items: center !important;
    gap: .45rem !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 0.75rem !important;
    border-radius: 8px !important;
    border: 1px solid #CBD5E1 !important;
    background-color: #ffffff !important;
    color: #475569 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    transition: all .15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

button#filterToggle.table-filters-toggle i,
.table-filters-toggle i {
    color: #64748B !important;
    transition: color .15s ease !important;
}

/* 2. Hover State (Saat belum ada filter aktif) */
button#filterToggle.table-filters-toggle:hover:not(.has-filter),
.table-filters-toggle:hover:not(.has-filter) {
    background-color: #EEF0FC !important;
    color: var(--theme-default, #2737C9) !important;
    border-color: var(--theme-default, #2737C9) !important;
}

button#filterToggle.table-filters-toggle:hover:not(.has-filter) i,
.table-filters-toggle:hover:not(.has-filter) i {
    color: var(--theme-default, #2737C9) !important;
}

/* 3. Panel Sedang Terbuka ("Lagi Milih", belum ada filter) */
button#filterToggle.table-filters-toggle[aria-expanded="true"]:not(.has-filter),
button#filterToggle.table-filters-toggle.active:not(.has-filter),
.table-filters-toggle[aria-expanded="true"]:not(.has-filter),
.table-filters-toggle.active:not(.has-filter) {
    background-color: #EEF0FC !important;
    border-color: var(--theme-default, #2737C9) !important;
    color: var(--theme-default, #2737C9) !important;
    box-shadow: 0 0 0 3px rgba(39, 55, 201, 0.15) !important;
}

button#filterToggle.table-filters-toggle[aria-expanded="true"]:not(.has-filter) i,
button#filterToggle.table-filters-toggle.active:not(.has-filter) i,
.table-filters-toggle[aria-expanded="true"]:not(.has-filter) i,
.table-filters-toggle.active:not(.has-filter) i {
    color: var(--theme-default, #2737C9) !important;
}

/* 4. Filter Aktif (Ada filter terpilih misal "Filter 1" — Solid Indigo + Badge Putih Kontras) */
button#filterToggle.table-filters-toggle.has-filter,
.table-filters-toggle.has-filter {
    background-color: var(--theme-default, #2737C9) !important;
    border-color: var(--theme-default, #2737C9) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(39, 55, 201, 0.28) !important;
}

button#filterToggle.table-filters-toggle.has-filter i,
button#filterToggle.table-filters-toggle.has-filter span:not(.table-filters-count),
.table-filters-toggle.has-filter i,
.table-filters-toggle.has-filter span:not(.table-filters-count) {
    color: #ffffff !important;
}

/* 5. Filter Aktif saat Sedang Milih / Hover / Klik / Panel Terbuka */
button#filterToggle.table-filters-toggle.has-filter:hover,
button#filterToggle.table-filters-toggle.has-filter:focus,
button#filterToggle.table-filters-toggle.has-filter:active,
button#filterToggle.table-filters-toggle.has-filter[aria-expanded="true"],
button#filterToggle.table-filters-toggle.has-filter.active,
.table-filters-toggle.has-filter:hover,
.table-filters-toggle.has-filter:focus,
.table-filters-toggle.has-filter:active,
.table-filters-toggle.has-filter[aria-expanded="true"],
.table-filters-toggle.has-filter.active {
    background-color: #1e2ba6 !important;
    border-color: #1e2ba6 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(30, 43, 166, 0.35) !important;
}

button#filterToggle.table-filters-toggle.has-filter:hover i,
button#filterToggle.table-filters-toggle.has-filter:hover span:not(.table-filters-count),
button#filterToggle.table-filters-toggle.has-filter[aria-expanded="true"] i,
button#filterToggle.table-filters-toggle.has-filter[aria-expanded="true"] span:not(.table-filters-count),
.table-filters-toggle.has-filter:hover i,
.table-filters-toggle.has-filter:hover span:not(.table-filters-count),
.table-filters-toggle.has-filter[aria-expanded="true"] i,
.table-filters-toggle.has-filter[aria-expanded="true"] span:not(.table-filters-count) {
    color: #ffffff !important;
}

/* 6. Badge Hitungan Filter ("1") — Pil Putih Bersih di atas latar Biru, Angka Biru Tegas */
.table-filters-count,
.table-filters-toggle .table-filters-count,
.table-filters-toggle.has-filter .table-filters-count,
.table-filters-toggle.has-filter:hover .table-filters-count,
.table-filters-toggle.has-filter:focus .table-filters-count,
.table-filters-toggle.has-filter:active .table-filters-count,
.table-filters-toggle.has-filter[aria-expanded="true"] .table-filters-count,
button#filterToggle.table-filters-toggle .table-filters-count,
button#filterToggle.table-filters-toggle.has-filter .table-filters-count,
button#filterToggle.table-filters-toggle.has-filter:hover .table-filters-count,
button#filterToggle.table-filters-toggle.has-filter:focus .table-filters-count,
button#filterToggle.table-filters-toggle.has-filter:active .table-filters-count,
button#filterToggle.table-filters-toggle.has-filter[aria-expanded="true"] .table-filters-count {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 1.35rem !important;
    height: 1.35rem !important;
    padding: 0 .4rem !important;
    border-radius: 9999px !important;
    background-color: #ffffff !important;
    color: #1e2ba6 !important;
    font-size: .75rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
    margin-left: 0.35rem !important;
}

/* Saat belum ada filter aktif tetapi badge tampil (misal filter 0) */
.table-filters-toggle:not(.has-filter) .table-filters-count,
button#filterToggle.table-filters-toggle:not(.has-filter) .table-filters-count {
    background-color: var(--theme-default, #2737C9) !important;
    color: #ffffff !important;
}

.table-filters-count[hidden] {
    display: none !important;
}

/* Panel Filter yang Rapi, Bersih, dan Profesional */
.table-filters-panel {
    flex: 1 1 100%;
    margin-top: .75rem;
    margin-bottom: 1rem;
    padding: 1.15rem 1.25rem;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    background: #F8FAFC !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
}

.table-filters-panel[hidden] {
    display: none;
}

.table-filters-fields {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem 1rem;
    align-items: flex-end;
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 170px;
    flex: 1 1 170px;
}

.filter-field label {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #64748B !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    margin: 0;
}

.filter-field .form-control,
.filter-field .form-select {
    font-size: 0.85rem !important;
    height: 34px !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    background-color: #FFFFFF !important;
    color: #1E293B !important;
    padding: 0.35rem 0.75rem !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-field .form-control:focus,
.filter-field .form-select:focus {
    border-color: var(--theme-default, #2737C9) !important;
    box-shadow: 0 0 0 3px rgba(39, 55, 201, 0.15) !important;
    outline: 0;
}

.table-filters-reset,
#filterReset {
    margin-top: .85rem;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 0.38rem 0.85rem !important;
    color: #dc2626 !important;
    border: 1px solid #fecaca !important;
    background-color: #ffffff !important;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.table-filters-reset:hover,
#filterReset:hover {
    background-color: #fee2e2 !important;
    border-color: #ef4444 !important;
    color: #b91c1c !important;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15) !important;
}

.table-filters-reset:active,
#filterReset:active,
.table-filters-reset.btn-clicked,
#filterReset.btn-clicked {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/* =========================================================
   Popover "Tampilkan kolom" (colvis)
   ========================================================= */
.colvis-popover {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 30;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    padding: .5rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(4, 32, 68, .14);
}

.colvis-popover-title {
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 0 .25rem .4rem;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: .35rem;
}

.colvis-item {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .22rem .25rem;
    border-radius: 5px;
    font-size: .85rem;
    cursor: pointer;
}

.colvis-item:hover {
    background: var(--soft-primary-bg);
}

.colvis-popover-reset {
    width: 100%;
    margin-top: .35rem;
    padding: .3rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--theme-default);
    background: var(--soft-primary-bg);
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

/* Judul popover bawaan extension DataTables disembunyikan, pakai punyaku. */
.dt-button-collection .dt-colvis-title {
    display: none;
}

/* =========================================================
   Header brand lockup
   ========================================================= */
.brand-lockup {
    display: flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.brand-logo img {
    height: 38px;
    width: auto;
    display: block;
}

/* Logo tidak boleh ikut menyusut.
   .brand-logo dan <img> di dalamnya sama-sama flex item dengan
   flex-shrink:1, jadi ketika ruang header kurang, yang pertama kali
   dipangkas adalah logo — bukan teksnya. Akibatnya gambar 2458x2300
   (rasio 1,069) tergambar 36,6x38 (rasio 0,963): logo gepeng 10%.
   Teks brand sudah punya min-width:0 + ellipsis, jadi biarkan teks
   yang dipotong, bukan logonya. */
.brand-logo,
.brand-logo img {
    flex: 0 0 auto;
    max-width: none;
}

.brand-text {
    min-width: 0;
}

.brand-text strong {
    display: block;
    /* "Universitas Yatsi Madani" (24 huruf kapital) + "Penerimaan Mahasiswa Baru"
       (27 huruf) butuh kotak yang cukup lebar. Di 253px bawaan Admiro
       ruang teksnya hanya 155px, sehingga keduanya selalu terpotong.

       Kotak logo sekarang 300px (lihat aturan .page-header .logo-wrapper),
       jadi ruang teksnya jadi 202px. Lebar diukur langsung dari font
       Inter-nya (ImageMagick + font Inter latin):
         nama    12,8px -> 185px   muat
         subtitle  9,6px -> 172px   muat (tracking .06em sudah dihitung)
       Jadi .8rem untuk nama dan .6rem untuk subtitle adalah ukuran
       terbesar yang masih muat tanpa elipsis. --*/
    font-size: .8rem;
    line-height: 1.15;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--theme-default);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand-text small {
    display: block;
    font-size: .6rem;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Blok logo punya lebar tetap; brand + tombol tidak selalu muat, jadi
   teks dipotong dengan elipsis, bukan terpotong di tengah huruf. */
.page-header .logo-wrapper {
    min-width: 0;
}

/* Lebar kotak logo: 253px bawaan Admiro tidak cukup untuk nama
   universitas + subjudulnya, keduanya jadi ber-elipsis.
   Diperlebar ke 300px sehingga ruang teksnya 202px dan keduanya muat
   penuh (lihat catatan di .brand-text strong).

   Hanya berlaku di >= 992px: di bawah itu Admiro menyempitkan kotak ini
   jadi 230px dan .brand-text disembunyikan, jadi tidak perlu apa-apa.
   Lebar sidebar dan .page-body-wrapper tetap 253px — tidak disentuh, jadi
   penempatan konten tidak bergeser. */
@media (min-width: 992px) {
    .page-header .logo-wrapper {
        width: 300px;
    }
}

.page-header .logo-wrapper .brand-lockup {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------------------------------------------------------------
   BRAND (LOGO + TEKS) — dipakai KEDUA top bar: panel admin maupun
   halaman CAMABA.

   Di-scope ke .pmb-brand (kelas yang dipasang partial
   layouts/admiro/partials/brand-lockup.blade.php) dan bukan ke
   body.pmb-admin / body.user-dashboard, supaya keduanya tidak
   mungkin melenceng lagi.

   Dulu hanya untuk CAMABA: teks brand dipaksa putih karena blok
   logonya dianggap biru tua. Padahal tidak ada aturan yang memberi
   warna itu pada blok itu — topbar-nya terang, jadi teks putihnya
   hilang. Sekarang keduanya memakai logo berwarna di atas plat terang
   dan teks warna normal.
   --------------------------------------------------------------- */
/* Kedua top bar memakai blok logo dengan latar yang sama. */
.page-header .logo-wrapper {
    background-color: var(--topbar-logo-bg);
}

/* ---------------------------------------------------------------
   LAYOUT: ANTI KEJEPIT

   Dua penyebab layout "berantakan" yang paling sering di panel:

   1. Input pencarian di toolbar dipaksa lebar pixel tetap (mis.
      width:300px). Di layar sempit, dipadukan dengan tombol di
      sebelahnya, kolomnya saling dorong dan terpotong.
      `.pmb-search` memakai flex-basis + min-width:0 supaya bisa
      menyusut dan membungkus dengan rapi.

   2. Anak flex tanpa `min-width: 0` tidak mau menyusut. Flexbox
      memberi anak default `min-width:auto`, jadi konten panjang
      (tabel, teks panjang) meluber dan menekan elemen sebelahnya.
      `.pmb-toolbar` memastikan container-nya benar.
   --------------------------------------------------------------- */

/* Kotak pencarian di toolbar filter. */
.pmb-search {
    flex: 1 1 14rem;
    max-width: 24rem;
    min-width: 0;
}

/* Baris kontrol (filter, tombol aksi) di atas tabel. */
.pmb-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}

/* Kolom aksi di tabel: ikon tidak pernah pecah ke baris baru. */
.pmb-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: .25rem;
    justify-content: flex-end;
}

/* Sel tabel yang berisi kontrol tidak boleh memaksa lebar kolom. */
.pmb-cell-kontrol {
    min-width: 0;
    white-space: nowrap;
}

/* ---------------------------------------------------------------
   TOMBOL IKON SAJA (icon-only)

   Konvensi ikon yang dipakai seragam di seluruh panel:

     Tambah / Baru     fa-plus
     Ubah / Edit       fa-pen-to-square
     Simpan            fa-floppy-disk      (fa-save sudah deprecated di FA6)
     Hapus             fa-trash
     Lihat / Detail    fa-eye
     Cari / Filter     fa-magnifying-glass
     Unduh             fa-download
     Cetak             fa-print
     Daftar soal       fa-list-check
     Setujui / Lulus   fa-check

   Tombol ini TIDAK boleh tanpa nama yang bisa dibaca assistive tech,
   jadi `title` (tooltip) dan `aria-label` selalu wajib.
   --------------------------------------------------------------- */
.btn-icon {
    /* Lebar diambil dari aspect-ratio, tinggi mengikuti padding + line-height
       Bootstrap. Jadi tombol ikon selalu bujur sangkar DAN tingginya sama
       persis dengan tombol teks di sebelahnya — untuk .btn maupun .btn-sm —
       tanpa angka tetap yang bisa melenceng kalau Bootstrap berubah. */
    --bs-btn-padding-x: 0;
    aspect-ratio: 1 / 1;
    /* Utilitas lebar Bootstrap memakai !important (w-25, w-50, w-100).
       Tanpa pagar ini, salah satu utilitas itu bisa memaksa lebar tombol
       dan membuat ikon tertekan gepeng. Jaring pengaman di sini:
       lebarnya SELALU dihitung dari aspect-ratio. */
    width: auto !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    flex: 0 0 auto;
}

/* Ikon di dalam tombol berlabel maupun tombol ikon tidak boleh punya
   margin bawaan dari utility kelas, supaya jarak konsisten. */
.btn-icon i,
.btn-icon svg {
    margin: 0;
}

/* Tombol berlabel: jarak ikon-teks memakai satu utility saja (me-1),
   supaya tidak ada tombol yang ikonnya menempel ke teks. */
.btn > i:first-child + * {
    margin-inline-start: 0;
}

/* 38px, bukan 30px.

   Diukur dari berkas: artwork logo hanya 246x249 dari kanvas 320x320
   (77%). Pada 30px yang benar-benar tampil hanya 23,3px, sementara blok
   teks dua baris di sebelahnya (strong .8rem + small .6rem) sekitar 30px —
   logo terlihat lebih kecil daripada teksnya. Pada 38px artwork yang
   terlihat jadi 29,6px, jadi sebanding. */
.pmb-brand .brand-logo img {
    height: 38px;
    width: auto;
    display: block;
}

/* Plat di belakang logo (background, border, border-radius, padding)
   DIHAPUS. Logo resmi sudah bulat sendiri dengan latar transparan,
   sehingga kotak di belakangnya tidak perlu dan hanya membuat logo
   terlihat terkurung. Paddingnya juga dihitung untuk logo LAMA
   (2458x2300); logo sekarang punya margin transparan sendiri. */
.pmb-brand .brand-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* Logo admin memakai gambar berwarna, jadi teks brand mengikuti warna
   teks normal — bukan dipaksa putih seperti blok brand. */
.pmb-brand .brand-text strong {
    color: var(--text-body);
}

.pmb-brand .brand-text small {
    color: var(--text-muted);
}

/* Tombol buka/perkecil sidebar melompat di batas blok logo / area konten.
   PENTING: class di-prefix 'pmb-'. Admiro memakai 'sidebar-open' sebagai class
   STATE pada .page-wrapper (drawer mobile) — memakai nama yang sama membuat
   seluruh wrapper paksa jadi inline-flex dan halaman runtuh. */
.pmb-sidebar-toggle,
.pmb-sidebar-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-left: .5rem;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.pmb-sidebar-toggle:hover,
.pmb-sidebar-open:hover {
    background: var(--soft-primary-bg);
    color: var(--theme-default);
}


/* ======================================================================
   TOMBOL PERKECIL SIDEBAR

   Letaknya di PERBATASAN sidebar dengan konten (x=253px), persis seperti
   semula, tapi diturunkan ke bawah.

   Kenapa harus turun: brand mulai di x=82 dan teks nama universitasnya
   185px, jadi berakhir di x=267 - melewati x=253. Kalau tombolnya di
   tengah tinggi header (top:50%) seperti semula, tombol itu menimpa
   ujung teks. Menurunkannya sampai di bawah blok teks (yang berakhir
   di y~53) menyelesaikannya tanpa memperkecil teks brand.

   left memakai --pmb-sidebar-w supaya mengikuti lebar sidebar: 253px
   saat penuh, 72px saat diperkecil. -- sidebar.edge bukan
   logo-wrapper.right, karena kotak logo sengaja dilebarkan ke 300px
   supaya nama + subjudulnya muat.

   bottom: -9px berarti tombol menggantung 9px di bawah header. Itu yang
   memberinya jarak aman dari teks tanpa membuat kotak brand makin lebar.
   ====================================================================== */
.page-header .logo-wrapper {
    position: relative;
    overflow: visible;
    z-index: 1040;
}

.pmb-sidebar-toggle {
    position: absolute;
    left: var(--pmb-sidebar-w, 253px);
    /* 30px tinggi tombol + 12px jarak dari tepi bawah header, jadi tombol
       menggantung jelas di bawah header dan tidak "mepet" dengannya.
       Jarak ini juga yang membebaskan blok teks brand (tinggal di y~53)
       dari tombol ini tanpa harus mengecilkan teksnya. */
    bottom: -42px;
    transform: translate(-50%, 0);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--sidebar-rail);
    border-radius: 50%;
    background: var(--card-bg, #FFFFFF);
    color: var(--sidebar-text-strong, #1A2134);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(10, 25, 60, .18);
    /* Yang dianimasikan transform, bukan left: left memicu layout tiap
       frame, sementara transform dikomposisi GPU. .22s sama dengan
       transisi .page-sidebar di atas, jadi keduanya tetap seirama. */
    transition: transform .22s ease, background .15s ease, border-color .15s ease;
}

.pmb-sidebar-toggle:hover {
    background: var(--sidebar-active);
    border-color: var(--sidebar-active-bar);
}

.pmb-sidebar-toggle:focus-visible {
    outline: 2px solid var(--sidebar-active-bar);
    outline-offset: 2px;
}

/* Di bawah 992px sidebar berubah jadi off-canvas/drawer, jadi rail 72px
   tidak ada dan tombol perkecil disembunyikan. Pada layar desktop (>= 992px),
   sidebar docked dan dapat di-toggle antara mode normal (253px) dan compact (72px). */
@media (max-width: 991.98px) {
    .pmb-sidebar-toggle {
        display: none !important;
    }
}

/* --- Perbaikan lag saat sidebar buka/tutup ----------------------
   Bawaan Admiro:
     .page-sidebar          { transition: .5s all }
     .page-body-wrapper     { margin-left: 253px; transition: .5s all }

   "all" membuat box-shadow dan background ikut teranimasikan tanpa
   perlu, dan yang lebih penting .5s membuat margin-left pada
   pembungkus seluruh konten berubah selama 500ms. Property itu
   memicu relayout, jadi tiap frame satu halaman ditata ulang ->
   terasa ngelag, apalagi di halaman bertabel.

   Di sini transisi dipersempit ke property yang benar-benar berubah
   (width dan margin-left) dan durasinya jadi .22s supaya terasa
   responsif. .22s dipilih karena cukup jelas terbaca sebagai animasi
   tanpa membuat pengguna mengira kliknya tidak merespons. */
@media (min-width: 992px) {
    .page-sidebar {
        left: 0;
        transition: width .22s ease;
    }

    .page-wrapper .page-body-wrapper {
        margin-left: 253px;
        transition: margin-left .22s ease;
    }
}

/* Saat sidebar jadi rail, tombolnya ikut geser 253-72 = 181px ke kiri.
   left tetap di --pmb-sidebar-w (253px); yang digeser hanya transform,
   supaya tidak ada property pemicu layout yang dianimasikan. */
.page-wrapper.pmb-sidebar-compact .pmb-sidebar-toggle {
    transform: translate(calc(-50% - 181px), 0);
}

/* Saat sidebar diperkecil, header SENGAJA tidak ikut menyusut: kotak logo
   tetap 300px dan brand tetap tampil. Permintaan: "kalau sidebar
   diperkecil header nggak ngikut".

   Yang ikut ke rail hanya tombolnya, lewat aturan transform di atas,
   sehingga meluncur bersama sidebar dan tidak melompat terpisah. */
.pmb-sidebar-open svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* Ikon toggle sidebar (bars-staggered). Dipisah dari .svg-color karena class itu memaksa
   fill:currentColor, sedangkan ikon digambar dengan stroke. */
.pmb-sidebar-toggle__icon {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .22s ease;
    pointer-events: none;
}

/* Sidebar penuh: garis menjorok ke kiri. Sudah jadi rail: dibalik
   ke kanan tepat saat sidebar selesai meluncur. */
.pmb-sidebar-compact .pmb-sidebar-toggle__icon {
    transform: rotate(180deg);
}

/* ======================================================================
   Topbar pada mode dark.

   Permintaan: "warna topbar beda sendiri" saat mode dark. Tanpa aturan
   ini, .page-main-header tetap memakai warna putih tema terang sehingga
   blok logo dan area konten terlihat seperti dua tema berbeda.
   ====================================================================== */
/* Topbar memakai token --topbar-* sehingga light & dark hanya berbeda
   nilai token, bukan aturan berbeda. Aturan dark di bawah hanya
  -infected untuk hal yang benar-benar berbeda (ikon & nama user). */
.page-header {
    background-color: var(--topbar-bg);
    box-shadow: var(--topbar-shadow);
}

.page-header .page-main-header {
    background-color: var(--topbar-bg);
}


.pmb-sidebar-open {
    display: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: 10px;
    background: var(--card-bg, #ffffff);
    color: var(--text-main, #334155);
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.15s ease;
}

@media (max-width: 991.98px) {
    .pmb-sidebar-open {
        display: inline-flex;
    }
}

.pmb-sidebar-open:hover,
.pmb-sidebar-open:active {
    background: var(--sidebar-hover, #f8fafc);
    color: var(--theme-default, #0d6efd);
    border-color: rgba(13, 110, 253, 0.35);
    transform: scale(0.96);
}

.pmb-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1035;
    background: rgba(4, 32, 68, .45);
}

.pmb-sidebar-backdrop[hidden] {
    display: none;
}

.pmb-sidebar-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: var(--sidebar-hover);
    color: var(--sidebar-text-strong);
    cursor: pointer;
}

.pmb-sidebar-close:hover {
    background: var(--sidebar-active);
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .page-header .brand-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        margin-left: 0.5rem;
    }
    .page-header .brand-text strong {
        font-size: 0.8125rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 170px;
        display: block;
    }
    .page-header .brand-text small {
        font-size: 0.6875rem;
        line-height: 1.2;
        color: var(--text-muted);
        letter-spacing: 0.03em;
        text-transform: uppercase;
        display: block;
    }
}

/* Di layar ponsel (mobile), sembunyikan teks brand agar topbar tidak padat/tebal
   dan hanya menampilkan logo institusi yang bersih dan proporsional. */
@media (max-width: 767.98px) {
    .page-header .brand-text {
        display: none !important;
    }
}

@media (min-width: 992px) {
    .pmb-sidebar-close {
        display: none;
    }
}

/* =========================================================
   Sidebar
   Meniru sidebar SIBAYA: warna solid, menu datar, hierarki
   level 1 > grup > daun dibedakan oleh indent + bold, bukan
   bullet. Semua class bertipe "level-1" di sini milik Admiro
   dan hanya di-override warnanya, strukturnya tidak diubah.
   ========================================================= */
/* =========================================================
   FONT
   =========================================================
   Inter, mengikuti portal LMS Mahasiswa UYM. Font-nya sendiri
   (public/assets/fonts/inter) — lihat assets/css/local-fonts.css.

   Aturan style.css Admiro yang mengunci Nunito Sans, dan harus
   dikalahkan dari sini (specificity sama, jadi yang menang adalah
   berkas yang dimuat belakangan):
     body { font-family: "Nunito Sans", sans-serif }

   Sisa aturan Nunito di style.css ter-scope ke halaman yang tidak
   dipakai aplikasi ini (.landing-page, .chat-page, .dashboard-*), jadi
   tidak perlu dikejar satu per satu.

   Emoji tetap pakai fallback sistem supaya tidak hilang glyph-nya.
   ========================================================= */
html,
body,
.badge,
.btn,
.form-control,
.form-select,
.form-check-input,
.input-group-text,
.nav-tabs .nav-link,
.dropdown-menu,
.modal-content,
table,
.card,
h1, h2, h3, h4, h5, h6,
.f-w-600,
.f-w-700 {
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

.page-sidebar {
    background: var(--sidebar-bg) !important;
    border-right: 0;
    box-shadow: none;
}

.page-sidebar .sidebar-menu {
    background: transparent;
    padding: .5rem .6rem 1rem;
}

.page-sidebar .sidebar-menu li {
    list-style: none;
}

/* --- Level 1 --- */
.page-sidebar .sidebar-link {
    color: var(--sidebar-text);
    font-weight: 500;
    font-size: .94rem;
    padding: .55rem .7rem;
    border-radius: 8px;
    margin-bottom: 2px;
    gap: .7rem;
    transition: background .12s ease, color .12s ease;
}

/* Selektor sengaja mengikuti kekuatan aturan Admiro
   (.sidebar-menu .sidebar-list .sidebar-link.active h6) yang memberi
   warna brand pada judul menu aktif. Tanpa itu, teksnya berada di atas
   latar brand dan tidak terbaca. */
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link h6,
.page-sidebar .sidebar-menu .sidebar-list .sidebar-link.active h6 {
    color: inherit;
    font-size: inherit;
    font-weight: 600;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page-sidebar .sidebar-link svg,
.page-sidebar .sidebar-link>i {
    flex: 0 0 auto;
    color: inherit;
    opacity: .9;
}

/* :not(.active) WAJIB ada di aturan hover.

   Tanpa itu, hover menimpa latar item aktif. Di admin ini tidak terlihat
   karena aturan .active-nya (0,4,0) lebih tinggi dari hover (0,3,0).
   Tapi sidebar CAMABA punya satu blok tambahan ber-specificity tinggi di
   file ini juga:

       body.user-dashboard .page-sidebar .sidebar-menu
         .sidebar-list:hover .sidebar-link        -> (0,6,2)

   Itu seri dengan aturan .active ber-:hover milik admiro-custom, dan
   app.css dimuat terakhir, sehingga aturan hover menang: item aktif
   yang sedang di-hover kehilangan latar birunya menjadi
   rgba(26,33,52,.045) — nyaris putih — sementara teks dan ikon tetap
   #fff dari aturan .active. Putih di atas putih. */
.page-sidebar .sidebar-link:hover:not(.active) {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-strong);
}

/* Selector di sini butuh .page-sidebar supaya lebih tinggi dari aturan
   sidebar bawaan vendor, dan :not(.active) supaya tidak pernah menimpa
   latar item aktif — lihat catatan di aturan .page-sidebar
   .sidebar-link:hover:not(.active) di atas.

   Seluruh state hover/active sidebar sekarang hanya diatur di file ini,
   supaya sidebar admin dan sidebar CAMABA benar-benar sama: tidak ada
   lagi duplikat di admiro-custom.css yang bisa saling bertabrakan. */
body.user-dashboard .page-sidebar .sidebar-menu .sidebar-list:hover .sidebar-link:not(.active),
body .page-sidebar .sidebar-menu .sidebar-list:hover .sidebar-link:not(.active) {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-strong);
}

/* Teks dan ikon harus ikut aturan di atas.
   Dua aturan vendor selalu menang atas `color` pada elemennya:

       .sidebar-menu .sidebar-list:hover .sidebar-link h6 -> (0,4,1)
       .sidebar-menu .sidebar-list:hover .sidebar-link i  -> (0,3,1)

   Keduanya memberi var(--theme-default). Tanpa blok di bawah, judul dan
   ikon menu ikut berubah jadi biru saat kursor menyentuhnya, sementara
   latarnya tetap abu-abu muda — satu item dengan dua warna.

   Ditulis dengan #pageSidebar karena ID menang atas berapa pun jumlah
   kelasnya, jadi berlaku untuk sidebar admin maupun CAMABA tanpa perlu
   menghitung specificity. */
#pageSidebar .sidebar-list:hover .sidebar-link:not(.active) h6,
#pageSidebar .sidebar-list:hover .sidebar-link:not(.active) .h6,
#pageSidebar .sidebar-list:hover .sidebar-link:not(.active) i,
#pageSidebar .sidebar-list:hover .sidebar-link:not(.active) svg {
    color: var(--sidebar-text-strong);
    stroke: var(--sidebar-text-strong);
}

/* Level 2 dan 3. Vendor juga mewarnai judul submenu biru saat hover,
   sementara latarnya sudah diatur abu-abu di atas. */
#pageSidebar .sidebar-submenu a:hover h6,
#pageSidebar .sidebar-submenu .submenu-title:hover i,
#pageSidebar .according-submenu a:hover svg {
    color: var(--sidebar-text-strong);
    stroke: var(--sidebar-text-strong);
}

/* Keadaan "grup sedang dibuka karena hasil pencarian menu".

   Di ui-scripts, ketika kata kunci cocok dengan ANAK menu tapi bukan
   dengan nama grupnya, JS memberi kelas `active` pada <li class="sidebar-list">
   supaya submenunya terbuka. Waktu itu .sidebar-link sendiri tidak diberi
   .active, dan aturan kita yang hanya menutup
   `.page-sidebar .sidebar-list>.sidebar-link.active` tidak ikut berlaku.

   Aturan vendor ini menang dan link-nya jadi teal:

       .sidebar-menu .sidebar-list.active .sidebar-link
           background-color: rgba(48, 142, 135, .2)   -> (0,4,0)

   Itu sebabnya teal sering muncul di sidebar admin: bukan hanya ketika
   halaman sedang dibuka, tapi setiap kali menu dicari.

   Ditutup di sini dengan :not(.sidebar-link.active) supaya keadaan
   "halaman ini yang aktif" — yang berlatar solid dan teks putih — tidak
   ikut tertimpa. */
#pageSidebar .sidebar-list.active > .sidebar-link:not(.sidebar-link.active) {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-strong);
}

#pageSidebar .sidebar-list.active > .sidebar-link:not(.sidebar-link.active) h6,
#pageSidebar .sidebar-list.active > .sidebar-link:not(.sidebar-link.active) .h6,
#pageSidebar .sidebar-list.active > .sidebar-link:not(.sidebar-link.active) i,
#pageSidebar .sidebar-list.active > .sidebar-link:not(.sidebar-link.active) svg {
    color: var(--sidebar-text-strong);
    stroke: var(--sidebar-text-strong);
}

/* Fokus keyboard. Tanpa ini, menelusuri menu dengan Tab tidak terlihat
   sama sekali — kursor berpindah tanpa ada perubahan apa pun. */
.page-sidebar .sidebar-link:focus-visible,
.page-sidebar .submenu-title:focus-visible,
.page-sidebar .sidebar-submenu a:focus-visible,
.page-sidebar .according-submenu a:focus-visible {
    outline: 2px solid var(--sidebar-active-bar);
    outline-offset: -2px;
    border-radius: 8px;
    color: var(--sidebar-text-strong);
}

#pageSidebar .sidebar-link:focus-visible,
#pageSidebar .submenu-title:focus-visible {
    background: var(--sidebar-hover);
}

/* --- Level 1 aktif ---

   Samakan dengan sidebar CAMABA: latar SOLID dan teks putih.

   Sebelumnya memakai var(--sidebar-active) yang hanya
   rgba(39, 55, 201, .09) — opacity 9%, jadi item aktif tampak tipis dan
   mudah terlewat. Token itu tidak diubah nilainya karena masih dipakai
   .pmb-sidebar-toggle:hover, jadi di sini ditulis langsung.

   box-shadow inset yang tadinya menandai sisi kiri dihapus:
   --sidebar-active-bar (#2737C9) sama persis dengan --theme-default,
   jadi batangnya tidak kelihatan lagi di atas latar yang sama.

   Ikon (Font Awesome) dan chevron memakai color: inherit, dan h6 juga
   color: inherit, jadi mengubah color di sini sudah otomatis mengubah
   teks dan ikon jadi putih. */
.page-sidebar .sidebar-list>.sidebar-link.active {
    background: var(--theme-default);
    color: #fff;
}

.page-sidebar .sidebar-list>.sidebar-link.active h6 {
    font-weight: 700;
}

/* Ikon & label item aktif selalu putih.

   WAJIB memakai #pageSidebar. Aturan vendor berikut selalu menang atas
   aturan kita yang cuma `color: inherit`:

       .sidebar-menu .sidebar-list:hover .sidebar-link h6  -> (0,9,3)
       .sidebar-menu .sidebar-list:hover .sidebar-link i   -> (0,4,2)
       .sidebar-menu .sidebar-list .sidebar-link.active h6 -> (0,9,1)

   semuanya memberi color: var(--theme-default) — indigo. Jadi ketika item
   aktif dikenai kursor, ikon dan teksnya jadi indigo di atas latar
   indigo yang solid: teks putih yang seharusnya tampil lenyap.

   Karena ID menang atas berapa pun jumlah kelasnya, blok ini berlaku untuk
   sidebar admin maupun CAMABA tanpa perlu menghitung specificity lagi.
   Keadaan :hover ditulis eksplisit karena itu justru kasus yang rusak. */
#pageSidebar .sidebar-list .sidebar-link.active h6,
#pageSidebar .sidebar-list .sidebar-link.active .h6,
#pageSidebar .sidebar-list .sidebar-link.active i,
#pageSidebar .sidebar-list .sidebar-link.active svg,
#pageSidebar .sidebar-list:hover .sidebar-link.active h6,
#pageSidebar .sidebar-list:hover .sidebar-link.active .h6,
#pageSidebar .sidebar-list:hover .sidebar-link.active i,
#pageSidebar .sidebar-list:hover .sidebar-link.active svg {
    color: #fff;
}

/* Ikon sprite memakai stroke, bukan color. */
#pageSidebar .sidebar-list .sidebar-link.active svg.stroke-icon,
#pageSidebar .sidebar-list:hover .sidebar-link.active svg.stroke-icon {
    stroke: #fff;
}

/* --- Submenu (level 2) --- */
.page-sidebar .sidebar-submenu {
    border-left: 1px solid var(--sidebar-rail);
    margin: .1rem 0 .35rem .95rem;
    padding-left: .35rem;
}

.page-sidebar .sidebar-submenu li {
    list-style: none;
}

/* Label panjang dipangkas satu baris + title, bukan membungkus dua baris
   yang membuat tinggi menu tidak seragam. min-width/max-width dipakai karena
   tanpa itu teks panjang keluar dari sidebar (flex item punya min-width:auto). */
.page-sidebar .sidebar-submenu li,
.page-sidebar .according-submenu li {
    min-width: 0;
    max-width: 100%;
}

.page-sidebar .sidebar-submenu a,
.page-sidebar .submenu-title {
    color: var(--sidebar-muted);
    font-size: .875rem;
    font-weight: 500;
    padding: .4rem .6rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: .4rem;
    min-width: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .12s ease, color .12s ease;
}

/* =========================================================
   Kontras submenu sidebar

   style.css Admiro masih menyisakan dua aturan untuk tema terang:

     .page-sidebar .sidebar-submenu a                        (0,2,1)
     .sidebar-menu .sidebar-list .sidebar-submenu > li.active
       .submenu-title                                        (0,5,1)

   Keduanya lebih spesifik daripada aturan bertingkat di atas dan
   keduanya memberi warna teks gelap. Akibatnya dulu submenu Bernoulli
   di atas sidebar: teksnya sewarna dengan latar sehingga tidak
   terbaca. Sekarang teks submenu memakai --sidebar-muted, dan
   kontrasnya terhadap --sidebar-bg sudah diuji (4,76:1 terang,
   8,97:1 gelap).

   Selektor di bawah memakai #pageSidebar supaya spesifikasinya pasti
   melampaui style.css tanpa !important.
   ========================================================= */
#pageSidebar .sidebar-submenu a,
#pageSidebar .sidebar-submenu .submenu-title,
#pageSidebar .submenu-title {
    color: var(--sidebar-muted);
}

#pageSidebar .sidebar-submenu a:hover,
#pageSidebar .sidebar-submenu .submenu-title:hover,
#pageSidebar .submenu-title:hover {
    color: var(--sidebar-text-strong);
}

/* .submenu-title.active tetap gelap karena tidak punya latar — kalau ikut
   jadi putih, teksnya hilang di atas sidebar yang berwarna putih.

   a.active dipisah karena ia memakai latar solid di bawah. */
#pageSidebar .sidebar-submenu .submenu-title.active,
#pageSidebar .sidebar-list>li.active>.submenu-title {
    color: var(--sidebar-text-strong);
    font-weight: 600;
}

#pageSidebar .sidebar-submenu a.active {
    color: #fff;
    font-weight: 600;
}

#pageSidebar .submenu-title i.icli {
    color: var(--sidebar-muted);
}

/* Bullet ::before bawaan Admiro disembunyikan; hierarki pakai indent + bold. */
.page-sidebar .sidebar-submenu a::before {
    content: none !important;
}

.page-sidebar .sidebar-submenu a:hover,
.page-sidebar .submenu-title:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-strong);
}

.page-sidebar .sidebar-submenu a.active {
    color: #fff;
    background: var(--theme-default);
    font-weight: 600;
}

.page-sidebar .submenu-title i.icli {
    margin-left: auto;
    color: var(--sidebar-muted);
    transition: transform .18s ease;
}

.page-sidebar li.active>.submenu-title i.icli {
    transform: rotate(90deg);
}

/* --- Level 3 --- */
.page-sidebar .according-submenu {
    margin: .1rem 0 .3rem .5rem;
    padding-left: .3rem;
    border-left: 1px solid var(--sidebar-rail);
}

.page-sidebar .according-submenu li {
    list-style: none;
}

.page-sidebar .according-submenu li a {
    /* Level-3 dulu memakai --sidebar-muted yang hanya 4,76:1 di atas
       sidebar. Sekarang teks penuh dengan opasitas .82 (~6,3:1): tetap
       terasa lebih redup dari induknya tanpa jadi sulit dibaca. */
    color: var(--sidebar-text-strong);
    opacity: .82;
    font-size: .84rem;
    font-weight: 400;
    padding: .35rem .6rem;
    border-radius: 6px;
    display: block;
}

.page-sidebar .according-submenu li a:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-strong);
}

/* Level 3 memakai awalan #pageSidebar dengan sengaja.

   Vendor punya aturan
     .page-sidebar .sidebar-menu .sidebar-list .sidebar-submenu
       li.active .according-submenu li a.active { color: var(--theme-default); }
   dengan specificity (0,6,2). Aturan tanpa #pageSidebar hanya (0,2,2),
   jadi warna teksnya kalah dan hasilnya teks indigo di atas latar
   indigo — tidak terbaca. Satu ID sudah cukup untuk menang. */
#pageSidebar .sidebar-submenu .according-submenu li a.active,
#pageSidebar .according-submenu li a.active {
    background: var(--theme-default);
    color: #fff;
    font-weight: 600;
}

/* Chevron level 1 berputar saat grup dibuka. */
.page-sidebar .sidebar-link>.icli {
    margin-left: auto;
    color: var(--sidebar-muted);
    transition: transform .18s ease;
}

.page-sidebar .sidebar-list.active>.sidebar-link>.icli {
    transform: rotate(90deg);
}

/* .simplebar-content milik Admiro memakai display:grid. Item grid punya
   min-width:auto, sehingga label panjang mendorong sidebar dari 253px jadi
   327px dan menu keluar dari sidebar. min-width:0 memaksa item mengikuti
   lebar container sehingga ellipsis bisa bekerja. */
.page-sidebar .simplebar-content>li,
.page-sidebar .sidebar-menu>li {
    min-width: 0;
    max-width: 100%;
}

.page-sidebar .sidebar-menu {
    overflow-x: hidden;
}

/* Judul "Disematkan" */.page-sidebar .pin-title {
    color: var(--sidebar-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .66rem;
    font-weight: 700;
    padding: .5rem .7rem .2rem;
}

.page-sidebar .pin-title .sidebar-title {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

/* Pemisah bagian (dipakai sidebar CAMABA: "Menu Pendaftar" / "Keluar").
   Berbeda dari .pin-title yang milik Admiro dan ditampilkan lewat JS,
   kelas ini murni pembatas visual. */
.page-sidebar .pmb-sidebar-section {
    color: var(--sidebar-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .66rem;
    font-weight: 700;
    padding: .9rem .7rem .25rem;
    list-style: none;
}

.page-sidebar .pmb-sidebar-section .sidebar-title {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    margin: 0;
}

/* Scrollbar sidebar */
.page-sidebar .sidebar-main::-webkit-scrollbar {
    width: 6px;
}

.page-sidebar .sidebar-main::-webkit-scrollbar-track {
    background: transparent;
}

.page-sidebar .sidebar-main::-webkit-scrollbar-thumb {
    background: var(--sidebar-rail);
    border-radius: 3px;
}

/* Ikon pin tetap terlihat di atas latar brand. */
.sidebar-list .pmb-pin {
    color: var(--sidebar-rail);
}

.sidebar-list:hover .pmb-pin {
    color: var(--sidebar-muted);
}

.sidebar-list.pined .pmb-pin {
    color: var(--sidebar-active-bar);
}

.sidebar-list.pined>.sidebar-link {
    box-shadow: inset 3px 0 0 var(--sidebar-active-bar);
}



/* --- Pembungkus sidebar ---
   Supaya input pencarian ikut menempel di atas dan daftar menu bisa digulir
   sendiri, terpisah dari sidebar yang di-scroll Admiro. */
.page-sidebar .main-sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.page-sidebar .sidebar-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}

.page-sidebar .sidebar-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* --- Off-canvas / drawer (mobile & tablet) ---
   Sidebar disembunyikan oleh Admiro lewat 'sidebar-open' pada .page-wrapper
   (left:-263px). Tombol tutup & backdrop hanya muncul saat drawer dibuka,
   yaitu ketika 'sidebar-open' TIDAK ada.

   Z-index: backdrop harus DI BAWAH sidebar, kalau tidak tombol "Tutup"
   tertahan backdrop dan tidak bisa diklik. Sidebar aslinya z-index 3 dari Admiro,
   jadi keduanya dinaikkan lewat sini (app.css dimuat setelah style.css). */
.page-sidebar {
    z-index: 1030;
}

.pmb-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1020;
    background: rgba(4, 32, 68, .45);
}

.pmb-sidebar-backdrop[hidden] {
    display: none;
}

.pmb-sidebar-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    z-index: 4;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: rgba(var(--theme-default-rgb), .10);
    color: var(--theme-default);
    cursor: pointer;
}

.pmb-sidebar-close:hover {
    background: rgba(var(--theme-default-rgb), .18);
}

/* Di layar lebar sidebar selalu docked, jadi tombol tutup & backdrop disembunyikan. */
@media (min-width: 992px) {

    .pmb-sidebar-close,
    .pmb-sidebar-backdrop {
        display: none !important;
    }
}

.pmb-drawer-active {
    overflow: hidden;
}

/* --- Rail ikon (desktop) --- */
.pmb-sidebar-compact .page-sidebar {
    width: 72px !important;
}

.pmb-sidebar-compact .page-body-wrapper {
    margin-left: 72px !important;
}

.pmb-sidebar-compact .page-sidebar .sidebar-link h6,
.pmb-sidebar-compact .page-sidebar .submenu-title,
.pmb-sidebar-compact .page-sidebar .sidebar-link>.icli,
.pmb-sidebar-compact .page-sidebar .pin-title {
    display: none;
}

.pmb-sidebar-compact .page-sidebar .sidebar-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* Di rail submenu tidak pernah dibuka (tidak ada tombol); grouping tetap
   terbaca lewat judul menu. */
.pmb-sidebar-compact .page-sidebar .sidebar-submenu,
.pmb-sidebar-compact .page-sidebar .according-submenu {
    display: none !important;
}

/* Teks brand SENGAJA tetap tampil saat sidebar diperkecil: header tidak
   ikut menyusut, jadi kotak logonya masih 300px dan masih cukup ruang.
   Yang disembunyikan hanya kotak cari menu, karena di rail 72px tidak ada
   tempat yang masuk akal untuk menaruhnya. */
.pmb-sidebar-compact #pmb-sidebar-filter {
    display: none;
}

.pmb-sidebar-compact .page-sidebar .sidebar-wrapper {
    overflow: visible;
}

/* ======================================================================
   Sub-sidebar / Flyout Menu pada Mode Sidebar Kecil (.pmb-sidebar-compact)
   ====================================================================== */
.pmb-sidebar-compact .sidebar-list.pmb-compact-active > .sidebar-link {
    background: var(--soft-primary-bg, #eff6ff) !important;
    color: var(--theme-default, #0d6efd) !important;
    border-radius: 10px;
}

.pmb-compact-flyout {
    position: fixed;
    z-index: 1060;
    width: 240px;
    max-width: calc(100vw - 85px);
    background: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 14px 35px -4px rgba(15, 23, 42, 0.18), 0 6px 14px -2px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: pmbFlyoutSlide 0.18s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pmbFlyoutSlide {
    from {
        opacity: 0;
        transform: translateX(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.pmb-compact-flyout .pmb-flyout-header {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    background: #f8fafc;
    border-bottom: 1px solid var(--card-border, #e2e8f0);
}

.pmb-compact-flyout .pmb-flyout-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pmb-compact-flyout .pmb-flyout-body {
    padding: 6px 8px;
    max-height: calc(100vh - 100px);
    overflow-y: auto;
}

.pmb-compact-flyout ul.sidebar-submenu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: block !important;
}

.pmb-compact-flyout ul.sidebar-submenu li {
    list-style: none;
    margin: 2px 0;
}

/* Semua teks tautan dan submenu di-set konsisten (font-weight: 500)
   agar pengguna tidak bingung dengan perbedaan tebal-tipis huruf */
.pmb-compact-flyout ul.sidebar-submenu li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    font-size: 0.8125rem;
    font-weight: 500 !important;
    color: var(--text-body, #334155);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.pmb-compact-flyout ul.sidebar-submenu li a:hover {
    background: var(--soft-primary-bg, #eff6ff);
    color: var(--theme-default, #2737c9);
}

/* Status aktif ditandai dengan warna dan latar, bukan font tebal yang kontras */
.pmb-compact-flyout ul.sidebar-submenu li a.active,
.pmb-compact-flyout ul.sidebar-submenu li.active > a {
    background: var(--soft-primary-bg, #eff6ff);
    color: var(--theme-default, #2737c9);
    font-weight: 500 !important;
}

.pmb-compact-flyout ul.according-submenu {
    display: none;
    list-style: none;
    margin: 3px 0 5px 8px;
    padding-left: 8px;
    border-left: 2px solid var(--card-border, #e2e8f0);
}

.pmb-compact-flyout li.active > ul.according-submenu {
    display: block;
}

.pmb-compact-flyout ul.according-submenu li a {
    padding: 6px 10px;
    font-size: 0.8125rem;
    font-weight: 500 !important;
    color: #475569;
}

.pmb-compact-flyout ul.according-submenu li a:hover,
.pmb-compact-flyout ul.according-submenu li a.active {
    background: var(--soft-primary-bg, #eff6ff);
    color: var(--theme-default, #2737c9);
    font-weight: 500 !important;
}

.pmb-compact-flyout .submenu-title .icli {
    font-size: 0.6875rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.pmb-compact-flyout li.active > .submenu-title .icli {
    transform: rotate(90deg);
    color: var(--theme-default, #2737c9);
}

/* Pencarian menu. Ini satu-satunya kotak cari di aplikasi: yang di top bar
   sudah dihapus (input Typeahead "Cari ..." tidak pernah punya sumber data).
   Sidebar sekarang putih, jadi warna diambil dari token sidebar dan bukan
   dari putih/#fff yang dulu dipakai di atas latar brand. */
.pmb-sidebar-filter {
    /* .sidebar-menu memakai padding-inline .6rem, jadi kotak cari harus
       memakai jarak horizontal yang sama. Sebelumnya input ini menempel
       ke tepi sidebar (x=0, lebar 253px) sementara isi menu mulai
       x=9,6px dan berakhir di 243,4px — tepi kotak dan tepi menu
       tidak pernah sejajar. */
    width: auto;
    margin: .25rem .6rem .4rem;
    /* Diperkecil: padding .45/.7rem -> .35/.6rem, tinggi baris turun dari
       ~36px ke ~30px. Kotak ini duduk di 253px yang juga memuat
       plat logo dan nama universitas di top bar. */
    padding: .35rem .6rem;
    font-size: .8rem;
    color: var(--sidebar-text-strong);
    background: var(--sidebar-hover);
    border: 1px solid var(--sidebar-rail);
    border-radius: 8px;
}

.pmb-sidebar-filter::placeholder {
    color: var(--sidebar-muted);
}

.pmb-sidebar-filter:focus {
    outline: none;
    background: var(--sidebar-active);
    border-color: var(--sidebar-active-bar);
}

.pmb-sidebar-filter::-webkit-search-cancel-button {
    /* Glyph bawaan browser gelap. Di sidebar gelap (mode dark) field-nya
       gelap juga, jadi X-nya dibalik jadi terang; di sidebar putih ia
       dibiarkan apa adanya. */
    filter: var(--sidebar-field-invert);
    opacity: .6;
}

/* --- Pin menu ---
   Posisi diatur di sini: aturan Admiro menaruh ikon ke luar batas
   (right: -7px) sehingga terpotong tepi sidebar. */
.sidebar-list .pmb-pin {
    position: absolute;
    top: 3px;
    right: 6px;
    z-index: 2;
    font-size: .8rem;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity .15s ease, color .15s ease;
    cursor: pointer;
}

.sidebar-list:hover .pmb-pin,
.sidebar-list .pmb-pin:focus-visible {
    opacity: .7;
}

.sidebar-list .pmb-pin:hover {
    color: var(--theme-default);
    opacity: 1;
}

.sidebar-list.pined .pmb-pin {
    color: var(--theme-secondary);
    opacity: 1;
}

/* Di rail ikon tidak ada ruang untuk pin. */
.pmb-sidebar-compact .page-sidebar .pmb-pin {
    display: none;
}

/* =========================================================
   SweetAlert2 flash & dialog (modern & professional)
   ========================================================= */
.swal2-popup.siba-flash {
    border-radius: 14px !important;
    padding: 1.75rem 1.5rem 1.5rem !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    max-width: 26rem !important;
}

.swal2-popup.siba-flash .swal2-icon {
    width: 3.5rem !important;
    height: 3.5rem !important;
    margin: 0 auto 1rem !important;
    border-width: 3px !important;
}

.swal2-popup.siba-flash .swal2-icon .swal2-icon-content {
    font-size: 2.25rem !important;
}

.swal2-popup.siba-flash .swal2-title {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 0 0 0.5rem !important;
    padding: 0 !important;
    line-height: 1.35 !important;
}

.swal2-popup.siba-flash .swal2-html-container {
    font-size: 13.5px !important;
    color: #64748b !important;
    margin: 0 0 1rem !important;
    line-height: 1.5 !important;
}

.siba-flash .swal2-actions {
    margin-top: 1.25rem !important;
    gap: 0.625rem !important;
}

/* Pastikan tombol deny (No) dan tombol tersembunyi tidak pernah muncul */
.siba-flash .swal2-deny,
.siba-flash button[style*="display: none"],
.siba-flash .swal2-actions button[style*="display: none"] {
    display: none !important;
}

.siba-flash .btn {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 7px 18px !important;
    line-height: 1.4 !important;
    min-width: 84px !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition: all 0.15s ease !important;
}

.siba-flash .btn-primary {
    background-color: var(--theme-default, #2737C9) !important;
    border-color: var(--theme-default, #2737C9) !important;
    color: #ffffff !important;
}

.siba-flash .btn-primary:hover,
.siba-flash .btn-primary:focus {
    background-color: var(--theme-default-dark, #1B2A96) !important;
    border-color: var(--theme-default-dark, #1B2A96) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(39, 55, 201, 0.25) !important;
    transform: translateY(-1px);
}

.siba-flash .btn-outline-secondary {
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    background-color: #ffffff !important;
}

.siba-flash .btn-outline-secondary:hover,
.siba-flash .btn-outline-secondary:focus {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

.siba-flash .btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
}

.siba-flash .btn-danger:hover,
.siba-flash .btn-danger:focus {
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 6px -1px rgba(220, 53, 69, 0.25) !important;
    transform: translateY(-1px);
}

.siba-flash .swal2-confirm:not(.btn) {
    background-color: var(--theme-default, #2737C9) !important;
    border: 1px solid var(--theme-default, #2737C9) !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 7px 18px !important;
    cursor: pointer;
}

.siba-flash .swal2-cancel:not(.btn) {
    background-color: transparent !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 7px 18px !important;
    cursor: pointer;
}

/* =========================================================
   SweetAlert2 progress toast (modern & professional)
   ========================================================= */
body.swal2-toast-shown .swal2-container.swal2-top-end,
body.swal2-toast-shown .swal2-container.swal2-top-right {
    top: 1.25rem !important;
    right: 1.25rem !important;
    inset: 1.25rem 1.25rem auto auto !important;
    padding: 0 !important;
    z-index: 1090 !important;
}

.swal2-popup.siba-toast {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.12), 0 8px 10px -6px rgba(0, 0, 0, 0.04) !important;
    padding: 0.75rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    min-width: 280px !important;
    max-width: 420px !important;
}

.swal2-popup.siba-toast .swal2-icon {
    margin: 0 !important;
    width: 2rem !important;
    height: 2rem !important;
    min-width: 2rem !important;
    border: 2px solid #10b981 !important;
    border-radius: 50% !important;
    background: #ecfdf5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.swal2-popup.siba-toast .swal2-icon.swal2-error,
.swal2-popup.siba-toast--error .swal2-icon {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
    color: #ef4444 !important;
}

.swal2-popup.siba-toast .swal2-icon.swal2-warning,
.swal2-popup.siba-toast--warning .swal2-icon {
    border-color: #f59e0b !important;
    background: #fffbeb !important;
    color: #f59e0b !important;
}

.swal2-popup.siba-toast .swal2-icon.swal2-info,
.swal2-popup.siba-toast--info .swal2-icon {
    border-color: #3b82f6 !important;
    background: #eff6ff !important;
    color: #3b82f6 !important;
}

.swal2-popup.siba-toast .swal2-icon .swal2-icon-content {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.swal2-popup.siba-toast .swal2-icon .swal2-icon-content svg {
    display: block !important;
    width: 1.125rem !important;
    height: 1.125rem !important;
}

/* Fallback jika SweetAlert native success elements dirender */
.swal2-popup.siba-toast .swal2-icon.swal2-success {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

.swal2-popup.siba-toast .swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #10b981 !important;
}

.swal2-popup.siba-toast .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(16, 185, 129, 0.3) !important;
}

.swal2-popup.siba-toast .swal2-title {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    flex: 1 1 auto !important;
}

.swal2-popup.siba-toast .swal2-timer-progress-bar {
    background: #10b981 !important;
    height: 3px !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    opacity: 0.9;
}

/* =========================================================
   Tombol & label form
   ========================================================= */
.form-label {
    font-weight: 600;
}

.btn {
    font-size: 14px;
    font-weight: 600;
}

.card-header .card-title {
    margin-bottom: 0;
}

/* Judul card & tinggi header card.
   SIBAYA memakai padding 16px 20px dan judul 15,5px/600. Nilai kita
   sebelumnya menghasilkan tinggi header 59-75px tergantung isi, dan
   judul card muncul dalam dua ukuran: 16px di sebagian halaman, 14px
   di dashboard dan halaman pengaturan — padahal semua kartu memakai
   ruang yang sama dalam tata letak. */
.page-body .card>.card-header {
    padding: 16px 20px;
}

.page-body .card>.card-header>h5,
.page-body .card>.card-header>h6,
.page-body .card>.card-header>.card-title {
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* =========================================================
   Permukaan card memakai token PMB

   style.css menetapkan .card { --bs-card-bg: var(--bs-body-bg) },
   sehingga card, card-header, dan modal memakai abu-abu netral theme
   dan bukan --card-bg kita. Di light mode keduanya kebetulan sama
   (#FFFFFF), jadi tidak terlihat; di dark mode card jadi
   rgb(24,25,25) — netral — sementara tombol dan chip memakai
   --card-bg bernuansa biru tua. Akibatnya permukaan dan
   isinya terlihat berasal dari dua palet yang berbeda.

   Card yang memakai .bg-white / .bg-light tetap aman karena kelas
   utilitas Bootstrap itu ber-!important.
   ========================================================= */
.page-body .card,
.page-body .modal-content,
.page-body .offcanvas {
    background-color: var(--card-bg);
    border-color: var(--card-border);
}

.page-body .card-header {
    background-color: var(--card-bg);
    border-bottom-color: var(--card-border);
}

.page-body .card-footer {
    background-color: var(--card-bg);
    border-top-color: var(--card-border);
}

/* .btn-sm bawaan Bootstrap hanya setinggi ~24px. Untuk tombol ikon
   (tanpa teks) di dalam tabel itu jadi target sentuh yang kecil sekali,
   padahal tombol aksi di tabel lain sudah 32px. Disamakan supaya satu
   ukuran berlaku untuk semua tombol tabel, termasuk di ponsel. */
.page-body .btn.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

table.dataTable td .btn {
    border-radius: 8px;
    min-width: 32px;
}

table.dataTable td .btn+.btn {
    margin-left: .125rem;
}

table.dataTable td .btn i {
    font-size: 13px;
}

/* =========================================================
   Tabel admin
   Ikuti spesifikasi tabel SIBAYA (public/assets/css/app.css
   baris 1146-1265) memakai token PMB, supaya semua tabel
   DataTable di panel admin punya kepadatan, header, caret, dan
   interaksi baris yang sama.

   Yang diperbaiki dari versi sebelumnya:
     - padding sel pernah tidak simetris (9,6px 12px 12px): atas
       9,6px tapi bawah 12px, akibatnya baris terlihat turun
       tidak rata dan caret sort tidak duduk di tengah. Penyebabnya
       style.css yang memaksa padding-bottom lewat !important.
     - border-collapse masih "collapse" sehingga garis header
      dobel dan tearing saat tabel digeser.
     - caret sort memakai glyph Font Awesome dengan top tetap
       dalam piksel, jadi tidak ikut vertikal center.
     - kolom aksi tidak|center dan melebar sampai 250px.
     - letter-spacing 0,5px terbawa dari body sehingga teks sel
       terlihat lebih renggang dari header.
   ========================================================= */
.page-body table.dataTable {
    --bs-table-bg: transparent;
    width: 100% !important;
    margin-bottom: 0;
    color: var(--text-body);
    font-size: 13.5px;
    letter-spacing: normal;
    /* !important wajib: style.css punya table.dataTable{...collapse!important}
       yang tanpa ini selalu menang. */
    border-collapse: separate !important;
    border-spacing: 0;
}

.page-body table.dataTable>thead>tr>th,
.page-body table.dataTable>tbody>tr>td,
.page-body table.dataTable>tfoot>tr>td {
    /* !important wajib: style.css punya
       .dataTables_wrapper table.dataTable th/td{padding-bottom:.75rem!important}
       yang membuat padding sel jadi tidak simetris — atas 11px tapi
       bawah 12px — dan membuat caret sort terlihat duduk slightly di bawah
       tengah header. */
    padding: 11px 14px !important;
    line-height: 1.5;
    vertical-align: middle;
    color: var(--text-body) !important;
    background-color: var(--table-row-bg) !important;
    border: 0;
    border-bottom: 1px solid var(--table-border) !important;
}

.page-body table.dataTable>thead>tr>th {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--table-head-color) !important;
    background-color: var(--table-head-bg) !important;
    border-bottom: 1px solid var(--table-border) !important;
}

.page-body table.dataTable>thead>tr>th .dt-column-title {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.page-body table.dataTable>tbody>tr {
    transition: background .1s ease;
}

/* DataTables zebra striping:
   - Ganjil (.odd / :nth-child(odd)) = baris bernomor ganjil (1, 3, 5...) memakai abu-abu lembut #F1F5F9
   - Genap (.even / :nth-child(even)) = baris bernomor genap (2, 4, 6...) memakai putih bersih #FFFFFF */
.page-body table.dataTable>tbody>tr.even>td,
.page-body table.dataTable>tbody>tr:nth-child(even)>td {
    background-color: var(--table-row-bg) !important;
}

.page-body table.dataTable>tbody>tr.odd>td,
.page-body table.dataTable>tbody>tr:nth-child(odd)>td {
    background-color: var(--table-row-alt-bg) !important;
}

.page-body table.dataTable>tbody>tr:hover>td {
    background-color: var(--table-row-hover) !important;
}

/* Baris terakhir tidak perlu garis bawah, kalau tidak tabel terlihat
   seperti menggantung di dalam card. */
.page-body table.dataTable>tbody>tr:last-child>td {
    border-bottom: 0 !important;
}

/* Kolom nomor. */
.page-body table.dataTable>thead>tr>th:first-child,
.page-body table.dataTable>tbody>tr>td:first-child {
    width: 52px;
    text-align: center;
    color: var(--table-index-color) !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.page-body table.dataTable>thead>tr>th:first-child {
    color: var(--table-head-color) !important;
}

/* Isi sel boleh keluar dari kotaknya ketika kolomnya dipipihkan browser,
   lalu tombol di kolom berikutnya ikut tertutup. .dt-fit-least memaksa
   lebar minimum secukupnya agar tidak ada isi yang saling menimpa. */
.page-body table.dataTable td.dt-fit-least,
.page-body table.dataTable th.dt-fit-least {
    overflow: visible;
}

/* Kolom teks terlebar pada tabel yang meluber.
   Ditandai .dt-fit-text oleh ui-scripts hanya ketika lebar tabel
   melebihi wadahnya, dan hanya pada satu kolom terlebar. Tujuannya
   kolom aksi tetap terlihat tanpa harus menggeser tabel.

   max-width harus dipasang pada elemen di dalam sel, bukan pada <td>
   langsung: pada table-layout:auto, width maximum sel hanya saran dan
   browser tetap boleh melebar, sedangkan blok di dalam sel dihormati
   karena punya lebar pasti. */
.page-body table.dataTable td.dt-fit-text,
.page-body table.dataTable td.dt-fit-text>* {
    max-width: 320px;
}

.page-body table.dataTable td.dt-fit-text,
.page-body table.dataTable td.dt-fit-text>* {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* KolomAKSI: rapat, center, tidak pernah melar.
   .dt-col-actions ditandai lewat JS hanya kalau sel terakhir benar-benar
   berisi tombol, jadi kolom teks di posisi terakhir tidak ikut dipipihkan. */
.page-body table.dataTable>thead>tr>th:last-child,
.page-body table.dataTable>tbody>tr>td:last-child {
    text-align: center;
    white-space: nowrap;
}

.page-body table.dataTable>thead>tr>th.dt-col-actions,
.page-body table.dataTable>tbody>tr>td.dt-col-actions {
    width: 1%;
    /* width:1% saja tidak cukup: pada tabel.columns yang banyak browser
       tetap memberi bagian kecil, sehingga tombol di dalam sel keluar
       dari kotak dan menimpa kolom sebelah. min-width ini muat untuk
       dua tombol (2x34 + gap + padding); kalau isinya lebih banyak,
       sel tetap melebar mengikuti isinya. */
    min-width: 104px;
    overflow: hidden;
}

/* Kolom aksi menempel di tepi kanan.
   Tabel Penerimaan punya sebelas kolom dan tidak mungkin muat di 1088px.
   Daripada memotong semua kolom — yang justru menghilangkan informasi —
   tabel dibiarkan bergeser, tapi tombol edit/hapus tetap terlihat karena
   kolom aksinya dijepit. Butuh border-collapse:separate (sudah dipakai)
   supaya sticky bekerja, dan setiap baris punya warna sendiri sehingga
   latar kolom yang menjepit ikut warna baris itu, bukan warna tetap. */
.page-body table.dataTable>thead>tr>th.dt-col-actions {
    position: sticky;
    right: 0;
    z-index: 3;
    background-color: var(--table-head-bg) !important;
    box-shadow: -6px 0 8px -6px rgba(15, 23, 42, .12);
}

.page-body table.dataTable>tbody>tr>td.dt-col-actions {
    position: sticky;
    right: 0;
    z-index: 2;
    background-color: var(--table-row-bg) !important;
    box-shadow: -6px 0 8px -6px rgba(15, 23, 42, .12);
}

.page-body table.dataTable>tbody>tr.even>td.dt-col-actions,
.page-body table.dataTable>tbody>tr:nth-child(even)>td.dt-col-actions {
    background-color: var(--table-row-bg) !important;
}

.page-body table.dataTable>tbody>tr.odd>td.dt-col-actions,
.page-body table.dataTable>tbody>tr:nth-child(odd)>td.dt-col-actions {
    background-color: var(--table-row-alt-bg) !important;
}

.page-body table.dataTable>tbody>tr:hover>td.dt-col-actions {
    background-color: var(--table-row-hover) !important;
}

.page-body .table-actions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.page-body .table-actions .btn,
.page-body .table td .btn,
.page-body table.dataTable td .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* width:auto wajib, dan berlaku untuk semua tombol di dalam sel —
       bukan hanya kolom terakhir. admiro-custom.css menyetel
       table.dataTable td .btn{width:34px} supaya tombol ikon seragam,
       tanpa overrides ini setiap tombol berteks ("Ubah", "Tulis
       Catatan") terkunci 34px dan teksnya terpotong. min-width 34px
       tetap dipakai supaya tombol ikon-only sebesar kotak ikon.

       Selector .table td .btn ikut ditambahkan karena tabel biasa
       (bukan DataTable) tidak tertangkap aturan di atas — di Manajemen
       Menu nama menu dirender sebagai <button class="btn btn-link">,
       sehingga "Beranda" terpotong dan kolom Nama Menu tampil kosong. */
    width: auto;
    min-width: 34px;
    height: 32px;
    padding: 0 .45rem;
    margin: 0;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1;
}

/* Aturan min-width tombol sel sudah terpusat di blok .table-actions/.td .btn
   di atas. Duplikat min-width:32px di sini pernah menimpanya karena
   specificity sama tapi ditulis belakangan, membuat tombol ikon 32px
   sedangkan ikon standarnya 34px. */

.page-body table.dataTable td .btn+.btn {
    margin-left: .125rem;
}

.page-body table.dataTable td .btn i,
.page-body .table-actions .btn i {
    font-size: 13px;
    line-height: 1;
}

/* Border form control.
   Tanpa ini input dan select memakai dua abu-abu berbeda dari
   Bootstrap/theme: .form-control rgb(222,226,230) tapi .form-select
   rgb(229,229,229). Selisihnya cuma 1px dan nyaris tak terlihat, tapi
   membuat form yang memuat keduanya terlihat tidak rata. Keduanya kini
   --border-soft, sama seperti garis pemisah tabel. */
.page-body .form-control,
.page-body .form-select {
    border-color: var(--border-soft);
}

.page-body .form-control:focus,
.page-body .form-select:focus {
    border-color: var(--theme-default);
    box-shadow: 0 0 0 3px rgba(var(--theme-default-rgb), .12);
}

/* Tombol "Choose File" bawaan browser adalah blok abu-abu siku-siku
   di dalam kotak yang sudah bulat, sehingga input file terlihat
   seperti komponen dari aplikasi yang berbeda. */
.page-body input[type=file] {
    padding: .25rem .5rem;
    /* Samakan tinggi dengan .form-control (37-38px). Padding dikecilkan
       supaya tombol di dalamnya tidak terlalu besar, lalu min-height
       yang menepati sisa bedanya. */
    min-height: 38px;
}

.page-body input[type=file]::file-selector-button {
    margin-right: .6rem;
    padding: .25rem .7rem;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: var(--card-bg);
    color: var(--text-body);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.page-body input[type=file]::file-selector-button:hover {
    background: var(--soft-primary-bg);
    border-color: var(--theme-default);
    color: var(--theme-default);
}

/* Badge di dalam tabel: SIBAYA 11,5px/600, versi lama 10,5px/500
   sehingga chip status terlihat jauh lebih kecil dari teks di
   sebelahnya. */
.page-body table.dataTable .badge {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 5px 10px;
}

/* Ukuran badge di luar tabel.
   Tanpa ini badge punya tiga ukuran berbeda dalam satu aplikasi:
   10,5px (Bootstrap .75em), 11,5px (aturan tabel di atas), dan 12px
   di beberapa halaman. Badge paling sering muncul sebagai chip status
   di dashboard dan daftar, jadi perbedaan se kecil ini langsung
   terlihat membingungkan saat dipindai sekilas. */
.page-body .badge {
    font-size: 11.5px;
}

/* =========================================================
   Badge status memakai soft token

   View masih memakai kelas utilitas Bootstrap text-bg-*, yang
   menghasilkan blok warna pekat bertulisan putih. SIBAYA memakai
   bg-* yang dipetakan ke soft token: latar muda + teks tua. Selain
   lebih ringan di mata saat membaca banyak baris, warna badge jadi
   satu keluarga dengan chip dan tombol sekunder, bukan warna asing
   yang mencolok dari palet aplikasi.

   Dipetakan lewat CSS, bukan dengan mengganti kelas di puluhan view,
   jadi tidak ada perubahan perilaku.
   ========================================================= */
.page-body .text-bg-primary,
.page-body .badge.bg-primary {
    background-color: var(--soft-primary-bg) !important;
    color: var(--soft-primary-fg) !important;
}

.page-body .text-bg-success,
.page-body .badge.bg-success {
    background-color: var(--soft-success-bg) !important;
    color: var(--soft-success-fg) !important;
}

.page-body .text-bg-warning,
.page-body .badge.bg-warning {
    background-color: var(--soft-warning-bg) !important;
    color: var(--soft-warning-fg) !important;
}

.page-body .text-bg-danger,
.page-body .badge.bg-danger {
    background-color: var(--soft-danger-bg) !important;
    color: var(--soft-danger-fg) !important;
}

.page-body .text-bg-info,
.page-body .badge.bg-info {
    background-color: var(--soft-info-bg) !important;
    color: var(--soft-info-fg) !important;
}

.page-body .text-bg-secondary,
.page-body .badge.bg-secondary {
    background-color: var(--soft-secondary-bg) !important;
    color: var(--soft-secondary-fg) !important;
}

/* text-bg-dark (mis. badge peran "Super_admin") masih blacksolid
   rgb(33,37,41) di kedua mode. Di dark mode warnet itu terlihat seperti
   lubang di atas kartu brand. Dipetakan ke netral lembut agar konsisten
   dengan badge lain; peran tetap terbedakan lewat labelnya. */
.page-body .text-bg-dark,
.page-body .badge.bg-dark {
    background-color: var(--soft-secondary-bg) !important;
    color: var(--soft-secondary-fg) !important;
}

/* .text-dark sering disandingkan dengan text-bg-* ("text-bg-warning
   text-dark"). Setelah latar jadi muda, teks gelap justru yang
   benar; utilitas text-dark harus dikalahkan supaya tidak menimpa. */
.page-body .text-bg-primary.text-dark,
.page-body .text-bg-success.text-dark,
.page-body .text-bg-warning.text-dark,
.page-body .text-bg-danger.text-dark,
.page-body .text-bg-info.text-dark,
.page-body .text-bg-secondary.text-dark {
    color: inherit;
}

/* Badge kode registration / NIM supaya seragam. */
.page-body .table .code-chip {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .72rem;
    letter-spacing: .02em;
    color: var(--text-muted);
    background: var(--soft-secondary-bg);
    border: 1px solid var(--card-border);
    border-radius: 5px;
    padding: 0 .3rem;
}

/* Isi sel multi-baris (kode + nama + telepon) dirapatkan jaraknya. */
.page-body .table .cell-stack>div+div {
    margin-top: .1rem;
}

.page-body .table .cell-sub {
    color: var(--text-muted);
    font-size: .78rem;
}

/* --- Caret sort ---
   Admiro memasang sprite lewat ::before/::after dengan top dalam
   piksel sehingga tidak ikut vertikal center dan glyph-nya kecil.
   Diganti panah teks biasa (⇕ ↑ ↓) yang.center dengan transform. */.page-body table.dataTable>thead>tr>th {
    background-image: none !important;
    position: relative;
}

.page-body table.dataTable>thead>tr>th[class*="sorting"]::before {
    content: none !important;
    display: none !important;
}

.page-body table.dataTable>thead>tr>th[class*="sorting"]::after {
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 700;
    top: 50% !important;
    bottom: auto !important;
    right: 12px !important;
    transform: translateY(-50%);
    opacity: .45;
    color: var(--table-caret);
}

.page-body table.dataTable>thead>tr>th.sorting::after {
    content: "\2195" !important;
    opacity: 0;
}

.page-body table.dataTable>thead>tr>th.sorting:hover::after {
    opacity: .6 !important;
}

.page-body table.dataTable>thead>tr>th.sorting_asc::after {
    content: "\2191" !important;
    opacity: 1;
    color: var(--theme-default);
}

.page-body table.dataTable>thead>tr>th.sorting_desc::after {
    content: "\2193" !important;
    opacity: 1;
    color: var(--theme-default);
}

.page-body table.dataTable>thead>tr>th:first-child::after {
    content: none !important;
}

.page-body table.dataTable>thead>tr>th.sorting:hover,
.page-body table.dataTable>thead>tr>th.sorting_asc:hover,
.page-body table.dataTable>thead>tr>th.sorting_desc:hover {
    color: var(--theme-default) !important;
}

/* Pembungkus tabel boleh bergeser, tapi tidak memaksa halaman ikut melebar. */
.page-body .table-responsive {
    margin-bottom: 0;
    border-radius: 0 !important;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 23, 42, .22) transparent;
}

.page-body .table-responsive::-webkit-scrollbar {
    height: 8px;
}

.page-body .table-responsive::-webkit-scrollbar-track {
    background: transparent;
}

.page-body .table-responsive::-webkit-scrollbar-thumb {
    background: rgba(15, 23, 42, .22);
    border-radius: 4px;
}

.page-body .table-responsive>.dataTables_wrapper,
.page-body .table-responsive table.dataTable {
    width: 100% !important;
}

/* Footer tabel (jumlah data + paginasi).
   Info dan paginate dibungkus .dt-meta-row oleh ui-scripts. Sebelumnya
   keduanya pakai float, dan garis pemisah menempel pada .dataTables_info
   yang hanya selebar teksnya — jadi garisnya terpotong di tengah kaki
   tabel sementara paginate di sebelahnya tidak ikut bergaris. */
.page-body .dataTables_wrapper>.dt-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: .85rem;
    padding-top: .75rem;
    border-top: 1px solid var(--table-border);
}

.page-body .dataTables_wrapper>.dt-meta-row>.dataTables_info {
    margin: 0;
    padding: 0;
    border-top: 0;
    float: none;
    /* !important: style.css punya aturan .dataTables_info ber-!important
       yangWarnanya kurang terbaca di atas kartu. */
    color: var(--text-muted) !important;
    font-size: .82rem;
}

.page-body .dataTables_wrapper>.dt-meta-row>.dataTables_paginate {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    float: none;
    justify-content: flex-end;
}

/* Tombol halaman. style.css hanya memberi border dan background
   transparan, sehingga "2" dan "Berikutnya" muncul sebagai teks
   rgb(226,226,226) di atas kartu putih — kontras 1,24:1, praktis
   tak terlihat. Bentuk, warna, dan state-nya mengikuti SIBAYA. */
.page-body .dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    min-height: 32px;
    margin: 0;
    padding: 5px 12px;
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-body);
    font-size: .82rem;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.page-body .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: var(--soft-primary-bg);
    border-color: var(--theme-default);
    color: var(--theme-default);
}

.page-body .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--theme-default);
    border-color: var(--theme-default);
    color: #fff;
    font-weight: 600;
}

.page-body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    background: var(--card-bg);
    border-color: var(--border-soft);
    /* !important: style.css masih memberi #666 ke .paginate_button.disabled,
       yang di dark mode hanya 2,93:1 di atas kartu gelap. opacity 0,6
       seperti SIBAYA diturunkan ke 0,75 supaya tetap di atas 4,5:1. */
    color: var(--text-muted) !important;
    opacity: .75;
    cursor: not-allowed;
}

/* Status berkas: ringkasan + chip, menggantikan tabel bersarang yang membuat
   baris tabel bisa setinggi 200px. */
.berkas-summary {
    margin-bottom: .25rem;
}

.berkas-chips {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 250px;
    gap: .2rem;
}

.berkas-chip {
    display: inline-block;
    font-size: .7rem;
    line-height: 1.4;
    padding: .05rem .35rem;
    margin: 0 .2rem .2rem 0;
    border-radius: 5px;
    color: var(--text-muted);
    background: var(--soft-secondary-bg);
    border: 1px solid var(--card-border);
    white-space: nowrap;
    cursor: default;
}

.berkas-chip--pending {
    color: var(--soft-warning-fg);
    background: var(--soft-warning-bg);
    border-color: transparent;
}

.berkas-chips .berkas-chip:hover {
    border-color: var(--theme-default);
}

/* =========================================================
   Dashboard
   ========================================================= */
/* Kartu dashboard dibuat kolom flex supaya isi card-body bisa merebut sisa
   tinggi. Tanpa ini card memanjang mengikuti kartu terpanjang di baris yang
   sama dan seluruh ruang kosong mengumpul di bawah. */
.dash-card {
    display: flex;
    flex-direction: column;
}

.dash-card>.card-body {
    flex: 1 1 auto;
}

/* Baris daftar (jalur/fakultas/prodi) ikut merebut tinggi sisa, tapi dibatasi
   supaya kartu dengan 2 baris (mis. Fakultas) tidak melompat jauh dan
   sisanya gathered di tengah. Kartu dengan 8 baris tetap penuh. */
.dash-bars {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    flex: 1 1 auto;
    justify-content: center;
}

.dash-bar-item {
    flex: 1 1 auto;
    max-height: 46px;
    min-height: 30px;
    min-width: 0;
    transition: background .12s ease;
}

.dash-bar-item:hover {
    background: var(--soft-primary-bg);
}

.dash-bar-item:focus-visible {
    outline: 2px solid var(--theme-default);
    outline-offset: -2px;
}

/* Label diberi ruang lebih lega supaya nama jalur/prodi tidak terpotong
   di tengah kata. Sisa teks tetap dipangkas dengan elipsis. */
.dash-label {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Progress bar seragam: tinggi tetap, trek tipis, isi memakai warna brand.
   Nilai kecil tetap terlihat karena ada lebar minimum. */
.dash-progress {
    flex: 1 1 auto;
    min-width: 40px;
    height: 7px;
    background: var(--soft-secondary-bg);
    border-radius: 999px;
    overflow: hidden;
}

.dash-progress>.progress-bar {
    background: var(--theme-default);
    border-radius: 999px;
    min-width: 3px;
    transition: width .3s ease;
}

/* Bar berstatus (bg-success/danger/warning/...) tetap memakai warnanya sendiri:
   utilitas warna Bootstrap memakai !important sehingga menang atas aturan di
   atas, jadi tidak perluditimpa. */

.dash-count {
    flex: 0 0 auto;
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Kartu kosong: bukan sekadar teks "Belum ada data" di tengah ruang kosong. */
.dash-empty {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    text-align: center;
    color: var(--text-muted);
    font-size: .85rem;
    padding: 1.5rem .5rem;
}

.dash-empty i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--soft-secondary-bg);
    font-size: 1.15rem;
}

/* Tautan "Lihat Semua" diberi affordance supaya tidak terlihat seperti teks biasa. */
.card-header .text-primary {
    font-weight: 600;
}

.card-header .text-primary:hover {
    text-decoration: underline;
}

.min-width-0 {
    min-width: 0;
}

/* =========================================================
   Dashboard KPI
   ========================================================= */
.kpi-card {
    transition: transform .15s ease, box-shadow .15s ease;
    border: 1px solid var(--card-border, #E8ECF1);
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--theme-default-rgb), .08) !important;
}

header .nav-right {
    display: flex;
    align-items: center;
}

/* =========================================================
   Menu profil di header
   ========================================================= */
.profile-nav .user-wrap {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: 3px 10px 3px 3px;
    border-radius: 9999px;
    border: 1px solid rgba(0, 0, 0, .06);
    background: rgba(255, 255, 255, .8);
    cursor: pointer;
    transition: all .15s ease;
    user-select: none;
}

.profile-nav .user-wrap:hover {
    background: rgba(0, 0, 0, .04);
    border-color: rgba(0, 0, 0, .1);
}

.profile-nav.show .user-wrap,
.profile-nav.is-open .user-wrap,
.profile-nav:has(.custom-menu.show) .user-wrap,
.custom-dropdown.active .user-wrap {
    background: rgba(var(--theme-default-rgb, 13, 110, 253), .08);
    border-color: rgba(var(--theme-default-rgb, 13, 110, 253), .25);
}

.profile-nav .user-wrap .user-img img.pmb-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

.profile-nav .user-wrap .user-content {
    margin-left: 2px;
}

.profile-nav .user-wrap .user-content h6 {
    font-size: .875rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--text-main, #1e293b);
    line-height: 1.2;
}

.profile-nav .user-wrap .user-content p {
    font-size: .75rem;
    color: var(--text-muted, #64748b);
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.profile-nav .user-wrap .user-content p i {
    font-size: .65rem;
    transition: transform .2s ease;
}

.profile-nav.show .user-wrap .user-content p i,
.profile-nav.is-open .user-wrap .user-content p i,
.profile-nav:has(.custom-menu.show) .user-wrap .user-content p i,
.custom-dropdown.active .user-wrap .user-content p i,
.profile-nav:hover .user-wrap .user-content p i {
    transform: rotate(180deg);
}

@media (max-width: 767.98px) {
    .profile-nav .user-wrap {
        padding: 2px;
        border: 1px solid transparent;
        background: transparent;
        border-radius: 50%;
    }
    .profile-nav .user-wrap:hover {
        background: rgba(0, 0, 0, .05);
    }
    .profile-nav .user-wrap .user-img img.pmb-avatar {
        width: 36px;
        height: 36px;
    }
}

/* === Foto profil (halaman Profil Saya) ================================ */
.pmb-foto-profil {
    box-shadow: 0 2px 10px rgba(10, 25, 60, .10);
}

.pmb-foto-profil img {
    display: block;
}

/* === Menu akun di top bar (dropdown profil) ========================== */
.profile-nav .custom-menu {
    border: 1px solid var(--card-border, #e2e8f0);
    border-radius: 14px;
    box-shadow: 0 12px 30px -4px rgba(15, 23, 42, .12), 0 4px 12px -2px rgba(15, 23, 42, .04);
    background: var(--card-bg, #ffffff);
    padding: 0;
    overflow: hidden;
    min-width: 260px;
    max-width: 300px;
    margin-top: 10px;
    transform: translateY(-4px);
    transition: opacity .18s cubic-bezier(0.16, 1, 0.3, 1), transform .18s cubic-bezier(0.16, 1, 0.3, 1), visibility .18s;
}

.profile-nav .custom-menu.show {
    transform: translateY(0);
}

/* Header profil di bagian atas dropdown */
.pmb-dropdown-header {
    padding: .875rem 1rem;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-bottom: 1px solid var(--card-border, #e2e8f0);
}

.pmb-dropdown-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    flex-shrink: 0;
}

.pmb-role-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 4px;
    font-size: .725rem;
    font-weight: 500;
    line-height: 1.35;
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.pmb-profile-divider {
    height: 1px;
    margin: .35rem 0;
    background: var(--card-border, #f1f5f9);
    list-style: none;
}

.custom-menu .pmb-profile-menu {
    width: 100%;
    min-width: 250px;
    padding: 6px 8px;
}

/* Baris tautan dan tombol */
.pmb-profile-item > a,
.pmb-profile-item form > button {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 40px;
    padding: .55rem .75rem;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: var(--text-body, #334155);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}

.pmb-profile-item > a:hover,
.pmb-profile-item form > button:hover {
    background: var(--sidebar-hover, #f8fafc);
    color: var(--theme-default, #0d6efd);
    text-decoration: none;
}

.pmb-profile-item i {
    flex: 0 0 auto;
    width: 20px;
    font-size: 1rem;
    line-height: 1;
    text-align: center;
    color: var(--text-muted, #94a3b8);
    transition: color .12s ease;
}

.pmb-profile-item > a:hover i,
.pmb-profile-item form > button:hover i {
    color: var(--theme-default, #0d6efd);
}

/* "Keluar": netral saat diam, merah elegan saat hover */
.pmb-profile-item--danger form > button {
    color: var(--text-body, #334155);
}

.pmb-profile-item--danger form > button:hover,
.pmb-profile-item--danger form > button:focus-visible {
    background: rgba(239, 68, 68, .08);
    color: #dc2626;
}

.pmb-profile-item--danger form > button:hover i,
.pmb-profile-item--danger form > button:focus-visible i {
    color: #dc2626;
}

/* .btn-link di luar dropdown profil masih biru Bootstrap + underline.
   Contohnya tombol "Beranda"/"Website UYM" di Manajemen Menu. Tanpa ini
   tautan actionable terlihat seperti navigasi visited, bukan aksi. */
.page-body .btn.btn-link {
    color: var(--theme-default);
    text-decoration: none;
    font-weight: 600;
}

.page-body .btn.btn-link:hover,
.page-body .btn.btn-link:focus {
    color: var(--theme-default-dark);
    text-decoration: underline;
}

/* Judul tahap pada timeline Beranda. Tautan ringan tanpa tombol, supaya
   navigasi tetap ada tanpa menambah deretan tombol yang bers repetisi. */
.pmb-step-link {
    color: var(--text-body);
    text-decoration: none;
}
.pmb-step-link:hover,
.pmb-step-link:focus {
    color: var(--theme-default);
    text-decoration: underline;
}

/* ==========================================================================
   Lapisan komponen & interaksi halaman CAMABA
   --------------------------------------------------------------------------
   Sebelumnya halaman pendaftar memakai tiga sistem warna sekaligus:
   kelas status bawaan Bootstrap (kuning #ffc107 / hijau #198754), token
   warna di atas, dan literal rgba. Akibatnya "perhatian" bisa kuning
   Bootstrap di satu halaman dan emas soft di halaman lain.

   Semua di bawah memakai token yang sama, plus state hover yang seragam
   karena sebelumnya kartu, tautan, dan isian form tidak punya umpan balik
   hover sama sekali.
   ========================================================================== */

/* --- Kartu yang bisa diklik ------------------------------------------- */
.pmb-card-link {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: .5rem;
    color: var(--text-body);
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.pmb-card-link:hover,
.pmb-card-link:focus-visible {
    border-color: var(--theme-default);
    box-shadow: 0 .25rem .75rem rgba(var(--theme-default-rgb), .12);
    transform: translateY(-2px);
    color: var(--text-body);
}
.pmb-card-link:hover .pmb-card-title,
.pmb-card-link:focus-visible .pmb-card-title {
    color: var(--theme-default);
}
.pmb-card-title {
    color: var(--text-body);
    font-weight: 600;
    transition: color .15s ease;
}

/* --- Kartu info (dokumen foto, ringkasan, dsb) ------------------------ */
.pmb-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: .5rem;
}
.pmb-card .card-header {
    background: var(--theme-default);
    border-bottom: 0;
    color: #fff;
}

/* --- Topbar kartu berlatar brand ---------------------------------------
   Kop kartu yang memuat kode pendaftaran + chip status. Semula ditulis
   `style="background:var(--theme-default)"` di tiap view, jadi satu
   perubahan brand berarti mengedit semua file. */
.pmb-card-topbar {
    background: var(--theme-default);
    color: #fff;
    padding: .75rem 1.5rem;
}

.pmb-card-topbar__title {
    color: #fff;
    font-weight: 600;
    margin: 0;
}

/* --- Kartu QRIS --------------------------------------------------------
   Dipakai di Biaya Formulir dan Daftar Ulang. Lebar tetap lewat
   aspect-ratio supaya panelnya tidak ikut berubah mengikuti teks
   di sebelahnya. */
.pmb-qr {
    display: block;
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    padding: .5rem;
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: .5rem;
}

.pmb-qr-label {
    margin-top: .5rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* --- Teal vendor pada tombol & kontrol interaktif --------------------

   Vendor Admiro memakai --theme-default: #308e87 (teal / hijau lumut).
   app.css menimpanya menjadi --theme-default: #2737C9, tapi beberapa aturan
   vendor menulis teal itu SECARA HARDCODED, bukan lewat
   var(--theme-default), sehingga tidak ikut berubah dan bocor ke UI.

   Yang paling merusak:

     .btn.btn-outline-primary:hover  { background-color: rgba(48,142,135,.9) }

   Specificity-nya (0,3,0), sedangkan aturan vendor yang benar —
   `.btn-outline-primary:hover { background-color: var(--theme-default) }`
   — cuma (0,2,0). Jadi yang menang justru yang teal: setiap tombol
   outline-primary berubah jadi hijau lumut ketika kursor menyentuhnya,
   sementara ikon di dalamnya tetap warna brand. Itulah warna yang
   "bentrok".

   Semua ditulis di sini karena app.css dimuat paling akhir. */
.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-primary:active,
.btn.btn-outline-primary.active,
/* Tombol outline saat aktif/ditekan: warna teks & ikon menjadi putih solid. */
.btn.btn-outline-primary:active i,
.btn.btn-outline-primary:active svg,
.btn.btn-outline-primary.active i,
.btn.btn-outline-primary.active svg {
    color: #fff;
    stroke: #fff;
}

/* Tombol dropdown (menu akun, filter). */
.dropdown .dropdown-toggle:hover,
.dropdown .dropdown-toggle:focus,
.dropdown .dropdown-toggle.show,
.dropdown .dropdown-toggle:active {
    background-color: var(--theme-default);
    border-color: var(--theme-default);
    color: #fff;
}

/* Accordion / collapse bertema primary. */
.accordion-button.accordion-light-primary:not(.collapsed),
.accordion-button.accordion-light-primary.active,
.accordion-button.accordion-light-primary:active,
.accordion-button.accordion-light-primary:focus,
.accordion-button .accordion-light-primary:not(.collapsed),
.multi-collapse.show .collapse-wrapper.accordion-light-primary {
    background-color: var(--soft-primary-bg);
    border-color: var(--theme-default);
    color: var(--theme-default);
}

.accordion-button.accordion-light-primary:not(.collapsed)::after,
.accordion-button.accordion-light-primary.active::after,
.accordion-button.accordion-light-primary:focus::after {
    background-image: none;
    color: var(--theme-default);
    filter: none;
}

/* Tombol pengalih tampilan (grid / list) di halaman daftar. */
.grid-bookmark-view.active,
.list-layout-view.active,
.grid-bookmark-view:hover,
.list-layout-view:hover {
    background-color: var(--theme-default);
    border-color: var(--theme-default);
    color: #fff;
}

/* --- Alert light: vendor menulis teks putih di atas latar terang -----
   templates/admiro/assets/css/style.css:18084 mendefinisikan
       .alert-light { background-color: var(--light-color);
                      border-color:   var(--light-color);
                      color:          var(--white); }
   Rasio kontrasnya sekitar 1.07:1, jadi teksnya tidak terbaca sama sekali.
   Aturan itu paling akhir di vendor sehingga mengalahkan
   `.alert-light { color: var(--body-font-color) }` yang muncul sebelumnya.

   Ditimpa di sini memakai pasangan token soft milik proyek
   (#0B5FBF di atas #E8F1FD = 5.4:1, lolos AA untuk teks normal).
   Berlaku untuk semua pemakaian alert-light, bukan cuma halaman dashboard. */
.alert-light {
    background-color: var(--soft-info-bg);
    border-color: rgba(11, 90, 158, .16);
    color: var(--soft-info-fg);
}

/* --- Status: alert soft berbasis token -------------------------------- */
.pmb-alert {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem 1.25rem;
    border: 1px solid transparent;
    border-radius: .5rem;
}
.pmb-alert.pmb-alert--primary { background: var(--soft-primary-bg);  border-color: rgba(var(--theme-default-rgb), .14); color: var(--soft-primary-fg); }
.pmb-alert.pmb-alert--success { background: var(--soft-success-bg);  border-color: rgba(0, 102, 58, .16);   color: var(--soft-success-fg); }
.pmb-alert.pmb-alert--warning { background: var(--soft-warning-bg);  border-color: rgba(138, 90, 24, .18);  color: var(--soft-warning-fg); }
.pmb-alert.pmb-alert--danger  { background: var(--soft-danger-bg);   border-color: rgba(153, 17, 17, .16);   color: var(--soft-danger-fg); }
.pmb-alert.pmb-alert--info    { background: var(--soft-info-bg);     border-color: rgba(11, 90, 158, .16);   color: var(--soft-info-fg); }
.pmb-alert.pmb-alert--muted   { background: var(--soft-secondary-bg); border-color: var(--card-border);     color: var(--soft-secondary-fg); }
.pmb-alert__title { font-weight: 600; margin-bottom: .15rem; }
.pmb-alert__body  { font-size: .8125rem; line-height: 1.6; opacity: .92; }
.pmb-alert__icon  { flex-shrink: 0; font-size: 1.1rem; line-height: 1.4; }

/* --- Status: badge/chip berbasis token --------------------------------- */
.pmb-badge {
    display: inline-block;
    padding: .3rem .7rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
.pmb-badge.pmb-badge--primary { background: var(--soft-primary-bg);   color: var(--soft-primary-fg); }
.pmb-badge.pmb-badge--success { background: var(--soft-success-bg);   color: var(--soft-success-fg); }
.pmb-badge.pmb-badge--warning { background: var(--soft-warning-bg);   color: var(--soft-warning-fg); }
.pmb-badge.pmb-badge--danger  { background: var(--soft-danger-bg);    color: var(--soft-danger-fg); }
.pmb-badge.pmb-badge--info    { background: var(--soft-info-bg);      color: var(--soft-info-fg); }
.pmb-badge.pmb-badge--muted   { background: var(--soft-secondary-bg); color: var(--soft-secondary-fg); }
.pmb-badge.pmb-badge--pending { background: var(--soft-pending-bg);   color: var(--soft-pending-fg); }

/* Bar kuota voucher di dalam sel tabel DataTable.
   Ukuran tetap ditulis di CSS, bukan style="height:6px;width:80px" inline
   pada setiap baris. Tinggi 6px di layar sentuh setipis ini, dan aturan
   inline ikut menimpa tema begitu dark mode aktif. */
.quota-bar {
    display: inline-block;
    vertical-align: middle;
    width: 80px;
    height: 6px;
}

/* Bar progres blast: tinggi tetap di CSS supaya tidak menulis
   style="height:25px" inline di tiap view. */
.blast-progress {
    height: 20px;
}

.blast-progress-lg {
    height: 25px;
}

/* Chip status: ikon + label.
   .pmb-status dipakai StatusPendaftar::chip(). Border 1px warna penuh
   ditambahkan karena warnanya sendiri terlalu pucat untuk jadi satu-satunya
   pembawa makna (chip bg hanya BERBEDA ~1,1:1 dari latar). Yang
   sebenarnya membedakan status adalah ikon + teks, bukan warna. */
.pmb-status {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: 600;
    white-space: nowrap;
}
.pmb-status i {
    font-size: .85em;
    line-height: 1;
}
.pmb-badge.pmb-badge--solid-success { background: var(--soft-success-fg); color: #fff; }

/* Badge di atas header brand perlu kontras, bukan soft. */
/* Nama class lama "on-navy" dipertahankan: sudah dipakai di banyak
   view dan mengganti namanya berarti menyentuh semuanya. Isinya sudah
   disesuaikan ke primary yang baru. */
.pmb-badge--on-navy {
    background: rgba(255, 255, 255, .16);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
}

/* --- Tombol aksen (pengganti btn-warning) ------------------------------

   Teksnya gelap, bukan putih. Aksen sekarang emas #C68C3E dan putih di
   atasnya hanya 2,9:1 — gagal Standar AA untuk teks.

   #241800 di atas emas #C68C3E = 6,0:1, dan di atas emas gelap hover
   #B07A2E = 4,7:1. Keduanya lolos AA. */
.pmb-btn-accent {
    background: var(--theme-secondary);
    border: 1px solid var(--theme-secondary);
    color: #241800;
    font-weight: 600;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pmb-btn-accent.pmb-btn-accent:hover,
.pmb-btn-accent.pmb-btn-accent:focus-visible {
    background: var(--theme-secondary-dark);
    border-color: var(--theme-secondary-dark);
    color: #241800;
    box-shadow: 0 .125rem .5rem rgba(176, 122, 46, .35);
}

/* --- Tautan daftar / langkah ------------------------------------------ */
.pmb-link {
    color: var(--theme-default);
    font-weight: 600;
    text-decoration: none;
    transition: color .15s ease;
}
.pmb-link:hover,
.pmb-link:focus-visible {
    color: var(--theme-default-dark);
    text-decoration: underline;
}

/* --- Isian form: hover + fokus seragam -------------------------------- */
.pmb-field {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: .375rem;
    color: var(--text-body);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pmb-field:hover:not(:disabled):not(:focus) {
    border-color: var(--soft-primary-fg);
}
.pmb-field:focus {
    border-color: var(--theme-default);
    box-shadow: 0 0 0 .2rem rgba(var(--theme-default-rgb), .12);
    outline: 0;
}
.pmb-field:disabled {
    background: var(--soft-secondary-bg);
    color: var(--text-muted);
    cursor: not-allowed;
}
.pmb-field::placeholder {
    color: var(--text-muted);
    opacity: .75;
}

  /* --- Tombol lihat/sembunyikan password --------------------------------

     Sebelumnya memakai .show-hide vendor: <span class="show"></span> yang
     ikonnya digambar lewat CSS

         .show-hide span.show:before { content: "show"; }
         .show-hide span:before       { content: "hide"; }

     jadi yang tampil di layar adalah TEKS "show"/"hide", bukan ikon.
     Sekarang tombol sungguhan berisi ikon Font Awesome, ditoggle oleh
     delegated listener di layout auth. */
  .pmb-pw-toggle {
      position: absolute;
      top: 50%;
      right: .5rem;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.1rem;
      height: 2.1rem;
      padding: 0;
      border: 0;
      border-radius: .35rem;
      background: transparent;
      color: var(--text-muted);
      cursor: pointer;
      z-index: 3;
      transition: color .15s ease, background .15s ease;
  }

  .pmb-pw-toggle:hover {
      color: var(--theme-default);
      background: var(--soft-primary-bg);
  }

  .pmb-pw-toggle:focus-visible {
      outline: 2px solid var(--sidebar-active-bar);
      outline-offset: 1px;
  }

  .pmb-pw-toggle i {
      font-size: .95rem;
      pointer-events: none;
  }

  /* --- Baris pilihan (radio/checkbox) ----------------------------------- */
.pmb-choice {
    border: 1px solid var(--card-border);
    border-radius: .5rem;
    cursor: pointer;
    padding: .6rem .9rem;
    transition: border-color .15s ease, background .15s ease;
}
.pmb-choice:hover {
    border-color: var(--theme-default);
    background: var(--soft-primary-bg);
}
.pmb-choice:has(input:checked) {
    border-color: var(--theme-default);
    background: var(--soft-primary-bg);
}

/* --- Chip onstage yang bisa diklik ------------------------------------ */
.pmb-chip {
    background: var(--soft-secondary-bg);
    border: 1px solid var(--card-border);
    border-radius: .5rem;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.pmb-chip:hover {
    border-color: var(--theme-default);
    transform: translateY(-1px);
}

/* --- Tabel pilihan (voucher, jalur, dsb) ------------------------------ */
.pmb-option {
    border: 1px solid var(--card-border);
    border-radius: .5rem;
    cursor: pointer;
    display: block;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.pmb-option:hover {
    border-color: var(--theme-default);
    background: var(--soft-primary-bg);
}
.pmb-option:has(input:checked) {
    border-color: var(--theme-default);
    background: var(--soft-primary-bg);
    box-shadow: inset 0 0 0 1px var(--theme-default);
}

/* Alpine menyembunyikan elemen bertanda ini sampai Alpine selesai boot,
   supaya isinya tidak berkedip sebelum state-nya terbaca. */
[x-cloak] {
    display: none !important;
}

/* Angka NIM: satu-satunya nilai yang paling sering disalin, jadi diberi
   ruang sendiri dan digitnya tetap sejajar. */
.pmb-nim {
    color: var(--theme-default);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: .12em;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    margin-bottom: .5rem;
}

/* Accordion tanpa latar, untuk ringkasan isian yang hanya butuh garis
   pemisah. Warna diambil dari token, bukan ditulis inline per view. */
.pmb-accordion .accordion-item {
    background: transparent;
    border-color: var(--border-soft);
}

.pmb-accordion .accordion-button {
    background: transparent;
    font-size: .85rem;
    font-weight: 600;
}

.pmb-accordion .accordion-button:not(.collapsed) {
    background: transparent;
    color: var(--text-body);
}

/* Overlay layar penuh, dipakai saat unggah berkas berjalan. */
.pmb-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
}

/* Kotak ikon pada daftar tahap: Container kecil yang warnanya menandai
   tahap itu selesai atau belum. */
.pmb-step-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .5rem;
}

.pmb-step-icon--done { background: var(--soft-success-bg); color: var(--soft-success-fg); }
.pmb-step-icon--todo { background: var(--soft-primary-bg); color: var(--theme-default); }

/* --- Garis waktu tahapan ----------------------------------------------
   Dipakai Beranda untuk sembilan tahap pendaftaran. Garis penghubung antar
   titik digambar dengan pseudo-elemen, jadi tidak perlu elemen kosong di
   markup. */
.pmb-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pmb-timeline__item {
    position: relative;
    display: flex;
    gap: .75rem;
    padding-bottom: 1rem;
}

.pmb-timeline__item:last-child {
    padding-bottom: 0;
}

.pmb-timeline__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 1.0625rem;
    top: 2.25rem;
    bottom: .25rem;
    width: 2px;
    background: var(--border-soft);
}

.pmb-timeline__item--done:not(:last-child)::before {
    background: var(--theme-default);
}

.pmb-timeline__marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    font-size: .85rem;
    font-weight: 700;
    z-index: 1;
}

.pmb-timeline__marker--done    { background: var(--theme-default); color: var(--card-bg); }
/* Emas dengan teks gelap: putih di atas #C68C3E hanya 2,9:1. */
.pmb-timeline__marker--current {
    background: var(--theme-secondary);
    color: #241800;
    box-shadow: 0 0 0 4px rgba(198, 140, 62, 0.25);
}
.pmb-timeline__marker--todo {
    background: var(--soft-secondary-bg);
    border: 1px solid var(--border-soft);
    color: var(--text-muted);
}

/* Titik penanda di daftar informasi. */
.pmb-dot {
    display: inline-block;
    flex-shrink: 0;
    width: .625rem;
    height: .625rem;
    margin-top: .4rem;
    border: 2px solid var(--theme-default);
    border-radius: 50%;
}

/* Lingkaran ikon pada kartu kosong dan kartu berhasil. Warna tetap ditulis
   inline karena tiap keadaan punya tokennya sendiri. */
.pmb-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    font-size: 1.6rem;
}

/* Paragraf penjelasan panjang. Lebar baca dibatasi supaya tidak jadi
   satu baris yang panjang di layar lebar. */
.pmb-measure {
    max-width: 40rem;
    line-height: 1.65;
}

/* Isi pengumuman: teks bebas yang diketik admin, jadi tipografinya
   dikunci di sini supaya seragam di semua blok. */
.pmb-prose {
    font-size: .95rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}

/* --- Halaman ujian -----------------------------------------------------
   CBT interface responsive: lebar penuh dan terpusat mengikuti kontainer layar */
.pmb-ujian {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* Jarak antar soal, ditulis di sini supaya tiap file view tidak
   mengulang utility margin yang sama. */
.pmb-ujian-soal + .pmb-ujian-soal {
    margin-top: 1rem;
}

/* --- Bar progres ------------------------------------------------------- */
.pmb-progress {
    background: var(--soft-secondary-bg);
    border-radius: 999px;
    height: 6px;
    overflow: hidden;
}
.pmb-progress__bar {
    background: var(--theme-default);
    border-radius: 999px;
    height: 100%;
    transition: width .4s ease;
}

/* Varian warna: hijau saat(target selesai, merah saat masih ada yang kurang.
   Dipakai di halaman Biodata, sedangkan bentuk bar-nya tetap sama. */
.pmb-progress__bar--success { background: var(--soft-success-fg); }
.pmb-progress__bar--danger  { background: var(--soft-danger-fg); }

/* --- Bayangan ekstra halus untuk kartu & elemen aksen ---------------- */
.shadow-xs {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

/* --- Aksesibilitas: fokus selalu terlihat ----------------------------- */
.pmb-focusable:focus-visible,
a.pmb-card-link:focus-visible,
button.pmb-card-link:focus-visible {
    outline: 2px solid var(--theme-default);
    outline-offset: 2px;
}

/* --- AlertBootstrap di halaman CAMABA -> warna token ------------------
   Markup-nya tetap memakai .alert (dismissible, posisi tombol tutup, dan
   utilitas flex) supaya tidak perlu mengubah struktur; hanya warnanya
   yang diselaraskan ke token. .=user-dashboard= hanya halaman CAMABA,
   jadi halaman admin tidak ikut berubah. */
.user-dashboard .alert-warning,
.pmb-flash--warning {
    background: var(--soft-warning-bg);
    border-color: rgba(138, 90, 24, .18);
    color: var(--soft-warning-fg);
}
.user-dashboard .alert-success,
.pmb-flash--success {
    background: var(--soft-success-bg);
    border-color: rgba(0, 102, 58, .16);
    color: var(--soft-success-fg);
}
.user-dashboard .alert-danger,
.pmb-flash--danger {
    background: var(--soft-danger-bg);
    border-color: rgba(153, 17, 17, .16);
    color: var(--soft-danger-fg);
}
.user-dashboard .alert-info,
.pmb-flash--info {
    background: var(--soft-info-bg);
    border-color: rgba(11, 90, 158, .16);
    color: var(--soft-info-fg);
}
.user-dashboard .alert-secondary,
.user-dashboard .alert-light,
.pmb-flash--muted {
    background: var(--soft-secondary-bg);
    border-color: var(--card-border);
    color: var(--soft-secondary-fg);
}
/* Badge "Selesai" dsb di header brand butuh kontras, bukan soft. */
.user-dashboard .card-header .text-bg-success,
.user-dashboard .card-header .text-bg-secondary,
.user-dashboard .card-header .text-bg-warning {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

/* Teks status -> token. Tanpa !important: (0,2,0) sudah mengalahkan
   .text-success Bootstrap (0,1,0). Termasuk tanda bintang field wajib
   agar merah yang dipakai sama dengan merah alert. */
.user-dashboard .text-success { color: var(--soft-success-fg); }
.user-dashboard .text-danger  { color: var(--soft-danger-fg); }
.user-dashboard .text-warning { color: var(--soft-warning-fg); }
.user-dashboard .text-info    { color: var(--soft-info-fg); }

/* --- Pemilih berkas kustom -------------------------------------------
   <input type="file"> bawaan browser menampilkan "Choose File" /
   "No file chosen" dalam bahasa Inggris. Dipakai pemicu milik sendiri
   supaya konsisten dengan bahasa halaman dan menerima berkas yang
   dijatuhkan ke area tersebut. */
.pmb-upload {
    align-items: center;
    background: var(--card-bg);
    border: 1px dashed var(--card-border);
    border-radius: .375rem;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    gap: .5rem;
    padding: .625rem .875rem;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pmb-upload:hover,
.pmb-upload:focus-visible {
    background: var(--soft-primary-bg);
    border-color: var(--theme-default);
    color: var(--theme-default);
}
.pmb-upload.is-dragging {
    background: var(--soft-primary-bg);
    border-color: var(--theme-default);
    border-style: solid;
    color: var(--theme-default);
}
.pmb-upload__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pmb-upload:hover .pmb-upload__name { color: var(--theme-default); }

/* --- Kartu jalur pendaftaran -------------------------------------------
   Sebelumnya definisinya tersebar di @push tiap layout dengan bayangan
   berbeda (hitam di layout publik, brand di layout pendaftar). Digabung
   ke sini supaya satu kartu terasa sama di kedua tempat. */
.jalur-card {
    border: 1px solid var(--card-border) !important;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.jalur-card:hover {
    transform: translateY(-3px);
    border-color: var(--theme-default) !important;
    box-shadow: 0 .5rem 1.25rem rgba(var(--theme-default-rgb), .14) !important;
}
.jalur-icon {
    background: var(--soft-primary-bg);
    color: var(--theme-default);
}
/* Panah di tombol "Daftar Sekarang": muncul saat kursor diarahkan ke
   kartu. Di layar sentuh tidak ada hover, jadi dibiarkan terlihat. */
@media (hover: hover) {
    .jalur-arrow {
        opacity: 0;
        transition: opacity .15s ease, transform .15s ease;
    }

    .jalur-card:hover .jalur-arrow {
        opacity: 1;
        transform: translateX(2px);
    }
}
/* ==========================================================================
   Breadcrumb admin
   --------------------------------------------------------------------------
   Dulu posisinya benar tapi rapiannya seadanya: pemisah masih "/",
   tautan tidak punya hover, langkah terakhir tidak pernah dibedakan dari
   induknya, dan induk yang ber-URL "/" dibuat tautan mati. Semua itu bikin
   crumbs terlihat seperti sisa template, bukan bagian dari navigasi.

   Sekarang satu sumber dengan sidebar, pemisah chevron, satu warna dari
   token yang sama, dan rantai panjang dilipat supaya tidak mendorong judul
   halaman ke baris baru.
   ========================================================================== */

.pmb-crumb {
    display: flex;
    justify-content: flex-end;
}

.pmb-crumb .breadcrumb {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    background: transparent;
    line-height: 1.3;
}

.pmb-crumb .breadcrumb-item {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: .8125rem;
    color: var(--text-muted);
}

/* Pemisah chevron tipis. Slash "/" bawaan Bootstrapterlihat berat dan
   membuat deretan ini terbaca seperti path, bukan navigasi. */
.pmb-crumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\f105";
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900;
    font-style: normal;
    display: inline-block;
    padding: 0 .5rem;
    color: #C3C8D4;
    font-size: .6875rem;
    vertical-align: middle;
}

.pmb-crumb .breadcrumb-item a {
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color .15s ease, border-color .15s ease;
}

.pmb-crumb .breadcrumb-item a:hover,
.pmb-crumb .breadcrumb-item a:focus-visible {
    color: var(--theme-default);
    border-bottom-color: rgba(var(--theme-default-rgb), .35);
}

/* Grup tanpa halaman: harus jelas bukan tautan, kalau tidak tetap terlihat
   bisa diklik padahal tidak melakukan apa pun. */
.pmb-crumb .pmb-crumb-group span {
    font-weight: 500;
}

/* Langkah terakhir: satu-satunya yang diberi penekanan. */
.pmb-crumb .pmb-crumb-current span {
    color: var(--text-body);
    font-weight: 600;
}

/* Rantai panjang: judul halaman dilindungi dari tabrakan. */
.pmb-crumb .breadcrumb-item > a,
.pmb-crumb .breadcrumb-item > span {
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pmb-crumb .pmb-crumb-current span {
    max-width: 22rem;
}

/* Tombol elipsis: tanpa kotak, supaya tidak bersaing dengan tautan. */
.pmb-crumb .pmb-crumb-toggle {
    border: 0;
    background: transparent;
    padding: 0 .15rem;
    color: var(--text-muted);
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease;
}

.pmb-crumb .pmb-crumb-toggle:hover,
.pmb-crumb .pmb-crumb-toggle:focus-visible {
    color: var(--theme-default);
}

.pmb-crumb .pmb-crumb-menu {
    border: 1px solid var(--card-border);
    border-radius: 10px;
    box-shadow: 0 .5rem 1.25rem rgba(var(--theme-default-rgb), .1);
    padding: .25rem;
    min-width: 12rem;
}

.pmb-crumb .pmb-crumb-menu .dropdown-item {
    border-radius: 7px;
    font-size: .8125rem;
    padding: .4rem .6rem;
    color: var(--text-body);
}

.pmb-crumb .pmb-crumb-menu .dropdown-item:hover {
    background: var(--soft-primary-bg);
    color: var(--theme-default);
}

/* Di layar sempit judul halaman dan crumbs tetap terbaca; crumbs turun ke
   baris sendiri alih-alih dipotong jadi satu huruf. */
@media (max-width: 767.98px) {
    .pmb-crumb {
        justify-content: flex-start;
        margin-top: .35rem;
    }

    .pmb-crumb .breadcrumb {
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pmb-crumb .breadcrumb::-webkit-scrollbar {
        display: none;
    }

    .pmb-crumb .breadcrumb-item > a,
    .pmb-crumb .breadcrumb-item > span,
    .pmb-crumb .pmb-crumb-current span {
        max-width: 11rem;
    }
}
/* ==========================================================================
   Top bar di layar ponsel
   --------------------------------------------------------------------------
   Empat masalah yang bisa dibuktikan dari CSS, bukan dari perkiraan:

   1. Logo DISEMBUNYIKAN TOTAL di bawah 420px.
      Vendor: @media (max-width:420px){ .page-header .logo-wrapper img
      { display:none !important } }. Seedangkan .brand-text sudah disembunyikan
      sejak 991.98px, jadi di ponsel kecil seluruh sisi kiri top bar kosong —
      ada blok 154px yang tidak berisi apa pun.

   2. Dropdown profil TERKURUNG di bawah 575.98px.
      Vendor: header .custom-menu { position:fixed;
      width:calc(100% - 200px); min-width:unset; top:45px; right:10px }.
      Di layar 360pxlebarnya jadi 160px, sementara .pmb-profile-menu kita
      dikunci 268px — jadi isinya meluber keluar wadahnya. Header juga
      melapisi dengan class overflow-hidden, sehingga teks terpotong diam-diam.

   3. top:45px adalah angka mati yang tidak sesuai tinggi top bar kita.
      Top bar kita 68px (padding 15px + logo 38px), bukan 45px, jadi menu
      muncul melayang 23px di atas header.

   4. Lebar blok logo berubah empat kali dalam empat breakpoint
      (253 -> 230 -> 170 -> 154 -> auto) dan berakhir menjadi auto tepat di
      breakpoint tempat logonya disembunyikan. Akibatnya lebar brand di ponsel
      kecil tidak ditentukan oleh isi, tapi oleh tidak adanya isi.

   Semua aturan di bawah memakai kelas milik proyek (pmb-) supaya tidak
   menabrak aturan vendor lain. both top bar — panel admin dan CAMABA —
   memakai struktur kelas yang sama, jadi satu blok ini memperbaiki keduanya.
   ========================================================================== */

/* Tinggi top bar dipakai untuk menjangkarkan dropdown. Nilainya dihitung
   dari CSS: padding blok logo 14px + tinggi logo 38px = 66px.
   Declare di sini supaya override ini dan aturan dropdown selalu
   membaca angka yang sama. */
header.page-header,
.page-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    --pmb-topbar-h: 68px;
}

@media (max-width: 767.98px) {
    header.page-header,
    .page-header {
        --pmb-topbar-h: 56px;
    }
}

/* --- 1. Logo tetap tampil di ponsel --------------------------------- */
/* Selector sengaja dibuat lebih spesifik dari vendor dan tetap memakai
   !important, karena aturan vendor juga !important — pada!important
   yang sama, yang menang adalah spesifisitas. */
@media (max-width: 991.98px) {
    .page-header .logo-wrapper .pmb-brand .brand-logo img {
        display: block !important;
        width: auto;
        height: 38px;
    }

    /* --- 4. Satu lebar, bukan empat ------------------------------- */
    /* Lebar ditentukan oleh isi (logo + padding), bukan angka tetap.
       Dengan begitu brand tidak lagi menentukan sendiri kalau
       admin mengunggah logo yang lebih lebar. */
    .page-header .logo-wrapper {
        width: auto;
        flex: 0 0 auto;
        padding: 14px 16px;
    }
}

@media (max-width: 767.98px) {
    .page-header .logo-wrapper {
        padding: 10px 12px !important;
    }

    .page-header .logo-wrapper .pmb-brand .brand-logo img {
        height: 34px !important;
    }

    header .page-main-header {
        padding: 10px 12px !important;
    }
}

/* --- 2 & 3. Dropdown profil muat rapi di layar ponsel & tablet ------ */
@media (max-width: 767.98px) {
    /* Pastikan profile-nav tidak disembunyikan oleh selector vendor Admiro */
    header ul[class*=header-] > li.profile-nav,
    header ul.header-right > li.profile-nav,
    .header-right > li.profile-nav,
    li.profile-nav {
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Panel menempel di bawah top bar, sejajar rapi di kanan atas layar */
    header .custom-menu,
    .profile-nav .custom-menu {
        position: fixed !important;
        top: calc(var(--pmb-topbar-h, 56px) + 6px) !important;
        left: auto !important;
        right: 12px !important;
        width: min(285px, calc(100vw - 24px)) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        margin-top: 0 !important;
        z-index: 1060 !important;
        border-radius: 14px !important;
        border: 1px solid var(--card-border, #e2e8f0) !important;
        box-shadow: 0 14px 35px -4px rgba(15, 23, 42, 0.18), 0 6px 14px -2px rgba(15, 23, 42, 0.08) !important;
        background: var(--card-bg, #ffffff) !important;
        overflow: hidden !important;
    }

    /* Lebar menu ikut panel */
    .custom-menu .pmb-profile-menu {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }
}
/* Ajakan "Mulai Pendaftaran" di beranda CAMABA.

   Dulu ada dua ajakan yang persis sama: kartu di atas dan dock yang
   menempel di bawah viewport. Keduanya berada di blok @if(!$pendaftar)
   yang sama, jadi keduanya selalu tampil bersamaan — satu mengambang
   di bawah, satu di posisi aslinya. Dock-nya sudah dihapus.

   Yang tersisa sekarang ikut ter-scroll bersama halaman. Masalahnya
   beranda CAMABA memuat roadmap sembilan tahap yang panjang, dan tombol
   "Mulai Pendaftaran" justru keluar layar tepat di bagian tempat CAMABA
   paling perlu mengambil keputusan untuk melanjutkan. Jadi kartu ini
   dibuat sticky: tetap terlihat sambil menggulir.

   Dua hal yang membuat ini benar-benar bekerja, keduanya karena mudah
   salah bila tidak diperiksa:

   1. Sticky memerlukan induk yang lebih tinggi dari elemennya sendiri.
      Kalau induknya setinggi kartu ini, elemennya tidak akan pernah
      bergerak — sticky bukan fixed, ia tetap bagian dari alur dokumen.
      Induknya .card-body sekaligus memuat roadmap sembilan tahap, jadi
      ruangnya tersedia.

   2. Tidak satu pun leluhurnya boleh punya overflow yang bukan visible.
      Overflow yang tersembunyi membuat elemen berhenti di tepi kotak itu dan
      tidak akan pernah menempel ke viewport. Diperiksa pada .card,
      .card-body, .alert (Bootstrap) dan .page-body / .page-body-wrapper
      (Admiro) — semuanya bersih.

   Topbar header sticky di top: 0 dengan tinggi --pmb-topbar-h (68px desktop / 56px mobile).
   Agar card sticky tidak menutupi topbar saat digulir, top card dihitung
   dengan offset tepat di bawah topbar: calc(var(--pmb-topbar-h, 68px) + 1.25rem).
   Z-index diset 10 agar selalu berada di bawah header (z-index: 1000).
   max-height dan overflow-y: auto ditambahkan agar jika konten card lebih
   tinggi dari sisa viewport layar, konten di dalamnya tetap dapat digulir. */
.pmb-cta-sticky {
    position: sticky;
    top: calc(var(--pmb-topbar-h, 68px) + 1.25rem);
    z-index: 10;
    max-height: calc(100vh - var(--pmb-topbar-h, 68px) - 2rem);
    overflow-y: auto;
    scrollbar-width: thin;
}

/* Di layar sempit kartu ini berubah jadi satu kolom (ikon di atas teks),
   jadi ruang kosongnya lebih lega dan tidak terasa berat saat menempel. */
@media (max-width: 575.98px) {
    .pmb-cta-sticky {
        top: calc(var(--pmb-topbar-h, 56px) + .5rem);
    }
}
/* ==========================================================================
   Warna lama yang masih bocor di mode ponsel
   --------------------------------------------------------------------------
   Dua tempat, keduanya bukan sekadar satu warna: ada teal dan ada navy tua dari tema lama Admiro.

   1. Plat navy di blok logo, hanya di bawah 1200px.

      admiro-custom.css masih punya:

        @media (max-width: 1199.98px) {
            header.page-header .logo-wrapper {
                background-color: rgba(12, 53, 106, .92);
            }
        }

      Plat navy tua di sisi kiri top bar dihapus dari desktop di commit
      7e0680a6, tapi aturan khusus layar kecil ini tertinggal. Di HP blok
      logo jadi gelap while sisa top bar tetap putih — terlihat seperti
      dua versi yang tidak sengaja bercampur.

      Kena mobile padahal urutan muat sudah benar: app.css dimuat setelah
      admiro-custom.css, jadi tidak ada soal urutan file. Yang menentukan
      adalah spesifisitas. Aturan lama itu punya satu elemen (header) dan
      dua kelas, jadi (0,2,1); aturan kita hanya dua kelas (0,2,0). Yang
      lebih spesifik menang siapa pun yang dimuat lebih dulu.

      Karena itu perbaikannya memakai selector dengan bentuk yang sama
      persis — header.page-header .logo-wrapper — supaya spesifisitasnya
      sama dan yang menang ditentukan oleh urutan muat, yaitu file kita.
      Tidak perlu !important.

      Aksen putih .logo-caption yang masih ada di file itu dibuat untuk
      plat gelap seperti ini; di bawah 991.98px sudah disembunyikan file
      itu sendiri, jadi tidak ada yang perlu dibersihkan di sini.

   2. Scrollbar teal.

      Empat aturan masih memakai rgba(48, 142, 135, …) — teal tema lama —
      dan tidak satu pun pernah di-override:

        .simplebar-scrollbar:before                     (scrollbar.css)
        .custom-scroll::-webkit-scrollbar-thumb         (style.css)
        .theme-scrollbar::-webkit-scrollbar-thumb       (style.css)
        .left-sidebar-wrapper *::-webkit-scrollbar-thumb (style.css)

      Scrollbar sidebar utama sudah pakai --sidebar-rail, tapi thumb
      simplebar — yang dipakai drawer sidebar di ponsel dan beberapa
      panel — masih teal. Ditambah thumb tabel dan sidebar di dalam
      wrapper lain.

      Semua diganti ke --sidebar-rail, token yang sudah dipakai untuk
      scrollbar sidebar: gelap samar, terlihat di atas putih dan di atas
      surface abu-abu. Thumb simplebar juga diberi radius supaya bentuknya
      sama dengan scrollbar webkit yang lain.
   ========================================================================== */

@media (max-width: 1199.98px) {
    /* Bentuk selector sengaja sama dengan aturan lama (0,2,1) supaya kita
       menang karena dimuat belakangan, bukan karena !important. */
    header.page-header .logo-wrapper {
        background-color: var(--topbar-logo-bg);
    }
}

/* ==========================================================================
   SCROLLBAR NETRAL & PROFESIONAL
   Menggantikan scrollbar biru bawaan Admiro (*::-webkit-scrollbar-thumb)
   dan scrollbar teal dengan warna abu-abu netral yang modern, bersih, dan profesional.
   ========================================================================== */
html, body, * {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

*::-webkit-scrollbar-track {
    background: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.45) !important;
    border-radius: 8px;
    transition: background-color 0.15s ease;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, 0.7) !important;
}

.simplebar-scrollbar:before {
    background: rgba(148, 163, 184, 0.45) !important;
    border-radius: 8px !important;
}

.simplebar-scrollbar.simplebar-visible:before {
    opacity: 0.8 !important;
}

.custom-scroll::-webkit-scrollbar-thumb,
.theme-scrollbar::-webkit-scrollbar-thumb,
.datatable-container::-webkit-scrollbar-thumb,
.left-sidebar-wrapper *::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.45) !important;
}

.custom-scroll,
.theme-scrollbar {
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent !important;
}

/* ==========================================================================
   UNIFIED DESIGN SYSTEM: BORDER-RADIUS & SOFT BADGES (GLOBAL)
   Reference Standard: /vo/log-aktivitas
   Hierarki Border-Radius:
   - 1.5rem (24px): Primary Cards (.dash-card, .kpi-card, standard main cards)
   - 1.25rem (20px): Standard Admin Cards (.card, .modal-content)
   - 1rem   (16px): Secondary Subcards & Panels (.dash-subcard)
   - 14px         : Large Icon Boxes (.kpi-icon)
   - 12px         : Filter Panels & Inner Stat Boxes (.table-filters-panel, .dash-panel)
   - 8px          : Inputs, Dropdowns, Toolbar Buttons (.dash-panel-sm, form controls, .btn)
   - 0            : Tables & Table Wrappers (.table-container-card, .table-responsive, table) — KOTAK / SQUARE
   - 9999px       : Soft Pill Badges (.badge-soft)
   ========================================================================== */

/* Soft Pill Badges (Global Token) */
.badge-soft {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px !important;
    line-height: 1.25;
    white-space: nowrap;
}
.badge-soft-success {
    background-color: #E5F8F3 !important;
    color: #067F5B !important;
    border: 1px solid rgba(6, 127, 91, 0.2) !important;
}
.badge-soft-danger {
    background-color: #FDEBEF !important;
    color: #B3123A !important;
    border: 1px solid rgba(179, 18, 58, 0.2) !important;
}
.badge-soft-warning {
    background-color: #FEF4E3 !important;
    color: #8A5A06 !important;
    border: 1px solid rgba(138, 90, 6, 0.2) !important;
}
.badge-soft-primary {
    background-color: #EEF0FC !important;
    color: #2737C9 !important;
    border: 1px solid rgba(39, 55, 201, 0.2) !important;
}
.badge-soft-info {
    background-color: #E0F2FE !important;
    color: #0369A1 !important;
    border: 1px solid rgba(3, 105, 161, 0.2) !important;
}
.badge-soft-secondary {
    background-color: #EFF1F5 !important;
    color: #4A5265 !important;
    border: 1px solid rgba(74, 82, 101, 0.2) !important;
}
.badge-soft-dark {
    background-color: #1e293b !important;
    color: #ffffff !important;
    border: 1px solid #0f172a !important;
}

/* ==========================================================================
   UNIFIED DESIGN SYSTEM: CARDS & TABLES HIERARCHY
   Hierarchy:
     - Primary Dashboard & Hero Cards (.dash-card): 1.5rem (24px)
     - Standard Admin Cards (.card): 1.25rem (20px)
     - Subcards & Inner Cards (.dash-subcard): 1rem (16px)
     - Filter Panels (.table-filters-panel): 12px
     - Modals (.modal-content): 1.25rem (20px)
     - Dropdowns (.dropdown-menu): 0.75rem (12px)
     - Tables & Wrappers (.table-container-card, .table-responsive, table): 0 (SQUARE / KOTAK)
   ========================================================================== */
:root {
    --bs-border-radius: 0.75rem !important;
    --bs-border-radius-sm: 0.5rem !important;
    --bs-border-radius-lg: 1rem !important;
    --bs-border-radius-xl: 1.25rem !important;
    --bs-border-radius-2xl: 1.5rem !important;
    --bs-border-radius-pill: 9999px !important;
    --bs-card-border-radius: 1.25rem !important;
    --bs-card-inner-border-radius: calc(1.25rem - 1px) !important;
    --bs-modal-border-radius: 1.25rem !important;
    --bs-modal-inner-border-radius: calc(1.25rem - 1px) !important;
}

/* All Admin Cards (Consistent 1.25rem, Clean White, Subtle Shadow, No Boxy Outlines) */
.pmb-admin .card,
.page-body .card,
.card {
    border-radius: 1.25rem !important;
    border: 0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    background-color: #ffffff;
}
.pmb-admin .card > .card-header:first-child,
.page-body .card > .card-header:first-child,
.card > .card-header:first-child {
    border-top-left-radius: 1.25rem !important;
    border-top-right-radius: 1.25rem !important;
    background-color: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}
.pmb-admin .card > .card-footer:last-child,
.page-body .card > .card-footer:last-child,
.card > .card-footer:last-child {
    border-bottom-left-radius: 1.25rem !important;
    border-bottom-right-radius: 1.25rem !important;
    background-color: #ffffff;
    border-top: 1px solid #f1f5f9;
}

/* Primary Dashboard Cards (1.5rem / 24px) */
.dash-card,
.pmb-admin .card.dash-card,
.page-body .card.dash-card {
    border-radius: 1.5rem !important;
    overflow: hidden;
    border: 0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    background-color: #ffffff;
}
.dash-card > .card-header:first-child,
.page-body .card.dash-card > .card-header:first-child {
    border-top-left-radius: 1.5rem !important;
    border-top-right-radius: 1.5rem !important;
}
.dash-card > .card-footer:last-child,
.page-body .card.dash-card > .card-footer:last-child {
    border-bottom-left-radius: 1.5rem !important;
    border-bottom-right-radius: 1.5rem !important;
}

/* KPI Cards */
.kpi-card,
.pmb-admin .card.kpi-card,
.page-body .card.kpi-card {
    border-radius: 1.25rem !important;
    border: 0 !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04) !important;
    background-color: #ffffff;
}

/* Secondary Cards, Nested Subcards & Panels (1rem / 16px) */
.dash-subcard,
.pmb-admin .card.dash-subcard,
.page-body .card.dash-subcard,
.page-body .card .card,
.pmb-admin .card .card {
    border-radius: 1rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    overflow: hidden;
}
.dash-subcard > .card-header:first-child,
.page-body .card .card > .card-header:first-child {
    border-top-left-radius: calc(1rem - 1px) !important;
    border-top-right-radius: calc(1rem - 1px) !important;
    background-color: #ffffff;
    border-bottom: 1px solid #f1f5f9;
}
.dash-subcard > .card-footer:last-child,
.page-body .card .card > .card-footer:last-child {
    border-bottom-left-radius: calc(1rem - 1px) !important;
    border-bottom-right-radius: calc(1rem - 1px) !important;
    background-color: #ffffff;
    border-top: 1px solid #f1f5f9;
}

/* Safeguard: Toggles in flex containers must never have negative margins */
.access-item input.pmb-toggle,
.d-flex > input.pmb-toggle,
label:not(.pmb-switch) > input.pmb-toggle {
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
}

/* Table Container Cards & Responsive Table Wrappers (Square / Kotak: 0 border-radius)
   Tabel harus kotak tanpa border-radius agar rapih, border sel tegas, dan tidak ada teks terpotong */
.table-container-card,
.page-body .card-body > .table-responsive,
.page-body .table-responsive {
    border-radius: 0 !important;
    border: 1px solid #e2e8f0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 1rem;
}
.table-container-card table,
.page-body .card-body > .table-responsive table,
.page-body .table-responsive table,
.page-body .table,
.page-body table.dataTable,
.table-dashboard {
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0;
}
.table-container-card thead th,
.page-body .card-body > .table-responsive thead th,
.page-body .table thead th,
.page-body table.dataTable thead th,
.table-dashboard thead th {
    border-radius: 0 !important;
    border-top: none !important;
    background-color: #F8FAFC !important;
}
.table-container-card tbody tr:last-child td,
.page-body .card-body > .table-responsive tbody tr:last-child td,
.page-body .table tbody td,
.page-body table.dataTable tbody td,
.table-dashboard tbody td {
    border-radius: 0 !important;
}
.table-container-card tfoot td,
.page-body .table tfoot td,
.page-body table.dataTable tfoot td {
    border-radius: 0 !important;
}
.page-body .dataTables_wrapper > .dt-meta-row {
    border-radius: 0 !important;
}

/* Ensure table checkboxes always maintain a strict 1:1 square ratio and never flatten / gepeng */
table.dataTable th input[type="checkbox"],
table.dataTable td input[type="checkbox"],
.table th input[type="checkbox"],
.table td input[type="checkbox"],
#check-all,
#check-all-akun,
.row-check,
.akun-check {
    width: 1.15rem !important;
    height: 1.15rem !important;
    min-width: 1.15rem !important;
    min-height: 1.15rem !important;
    max-width: 1.15rem !important;
    max-height: 1.15rem !important;
    aspect-ratio: 1 / 1 !important;
    flex: 0 0 1.15rem !important;
    flex-shrink: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 4px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
}

/* Inner Panels & Stat Boxes (12px & 8px) */
.dash-panel {
    border-radius: 12px !important;
}
.dash-panel-sm {
    border-radius: 8px !important;
}

/* Modals Modern Clean Styling */
.modal-content {
    border-radius: 1.25rem !important;
    border: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12) !important;
}
.modal-header {
    border-top-left-radius: 1.25rem !important;
    border-top-right-radius: 1.25rem !important;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    padding: 1.25rem 1.5rem;
}
.modal-body {
    padding: 1.5rem;
}
.modal-footer {
    border-bottom-left-radius: 1.25rem !important;
    border-bottom-right-radius: 1.25rem !important;
    background-color: #fafcfe;
    border-top: 1px solid #e2e8f0;
    padding: 1rem 1.5rem;
}

/* Dropdown Menus */
.dropdown-menu {
    border-radius: 0.75rem !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
    padding: 0.5rem !important;
}
.dropdown-item {
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 13.5px !important;
}
.dropdown-item:hover {
    background-color: #f1f5f9 !important;
    color: var(--theme-default, #2737C9) !important;
}

/* ==========================================================================
   UNIFIED DESIGN SYSTEM: TABLES (CONSISTENT, NEAT, CLEAN & PROFESSIONAL)
   ========================================================================== */

/* Standard, DataTables & Dashboard Tables Consistency */
.page-body .table,
.page-body table.dataTable,
.table-dashboard {
    width: 100% !important;
    margin-bottom: 0;
    color: #1e293b;
    font-size: 13.5px;
    letter-spacing: normal;
    border-collapse: separate !important;
    border-spacing: 0;
}

.page-body .table > thead > tr > th,
.page-body table.dataTable > thead > tr > th,
.table-dashboard > thead > tr > th {
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    color: #475569 !important;
    background-color: #F8FAFC !important;
    border-top: 0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 11px 14px !important;
    vertical-align: middle !important;
}

.page-body .table > tbody > tr > td,
.page-body table.dataTable > tbody > tr > td,
.table-dashboard > tbody > tr > td {
    padding: 11px 14px !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    border: 0;
    border-bottom: 1px solid #E2E8F0 !important;
}

.page-body .table > tbody > tr,
.page-body table.dataTable > tbody > tr,
.table-dashboard > tbody > tr {
    transition: background-color 0.12s ease;
}

/* Zebra Striping: Genap (Baris No. 2, 4, 6...) = Putih Bersih */
.page-body .table > tbody > tr:nth-child(even) > td,
.page-body table.dataTable > tbody > tr.even > td,
.page-body table.dataTable > tbody > tr:nth-child(even) > td,
.page-body .table-striped > tbody > tr:nth-of-type(even) > td,
.table-dashboard > tbody > tr:nth-child(even) > td {
    background-color: #FFFFFF !important;
}

/* Zebra Striping: Ganjil (Baris No. 1, 3, 5...) = Abu-abu Lembut (#F1F5F9) */
.page-body .table > tbody > tr:nth-child(odd) > td,
.page-body table.dataTable > tbody > tr.odd > td,
.page-body table.dataTable > tbody > tr:nth-child(odd) > td,
.page-body .table-striped > tbody > tr:nth-of-type(odd) > td,
.page-body .table-striped > tbody > tr:nth-of-type(odd) > th,
.table-dashboard > tbody > tr:nth-child(odd) > td {
    background-color: #F1F5F9 !important;
}

/* Interactive Hover State: Highlight Indigo Halus (#EEF0FC) */
.page-body .table > tbody > tr:hover > td,
.page-body table.dataTable > tbody > tr:hover > td,
.table-dashboard > tbody > tr:hover > td,
.page-body .table-striped > tbody > tr:hover > td {
    background-color: #EEF0FC !important;
}

.page-body .table > tbody > tr:last-child > td,
.page-body table.dataTable > tbody > tr:last-child > td,
.table-dashboard > tbody > tr:last-child > td {
    border-bottom: 0 !important;
}

.page-body .table > tfoot > tr > td,
.page-body table.dataTable > tfoot > tr > td,
.table-dashboard > tfoot > tr > td {
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 12px 14px !important;
    background-color: #F8FAFC !important;
    border-top: 2px solid #E2E8F0 !important;
    border-bottom: 0 !important;
    color: #1E293B !important;
}

/* Tabular Nums for Numeric Columns */
.page-body .table td.text-end,
.page-body .table th.text-end,
.table-dashboard td.text-end,
.table-dashboard th.text-end,
.page-body table.dataTable td.text-end,
.page-body table.dataTable th.text-end {
    font-variant-numeric: tabular-nums;
}

/* Row Index Column */
.table-dashboard > thead > tr > th:first-child,
.table-dashboard > tbody > tr > td:first-child,
.page-body .table > thead > tr > th:first-child,
.page-body .table > tbody > tr > td:first-child,
.page-body table.dataTable > thead > tr > th:first-child,
.page-body table.dataTable > tbody > tr > td:first-child {
    font-variant-numeric: tabular-nums;
    color: #64748b !important;
}

/* DataTables Meta Footer Row (Pagination & Info) */
.page-body .dataTables_wrapper > .dt-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 0 !important;
    padding: 0.85rem 1.15rem !important;
    background-color: #FAFCFE !important;
    border-top: 1px solid #E2E8F0 !important;
}

/* ==========================================================================
   UNIFIED DESIGN SYSTEM: OUTLINE BUTTONS (HOVER, FOCUS, ACTIVE & CLICKED)
   When an outline button is hovered, focused, or clicked, it has rich tactile color
   ========================================================================== */

/* Tactile Click Transition for Outline Buttons */
.btn[class*="btn-outline-"] {
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.btn[class*="btn-outline-"]:active,
.btn[class*="btn-outline-"].btn-clicked {
    transform: translateY(1px);
}

/* Outline Secondary (Default Grey / Slate -> Dark Slate when Active) */
body.light button.btn-outline-secondary:hover,
body.light a.btn-outline-secondary:hover,
.btn-outline-secondary:hover {
    background-color: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}
body.light button.btn-outline-secondary:hover i,
body.light button.btn-outline-secondary:hover span,
body.light a.btn-outline-secondary:hover i,
body.light a.btn-outline-secondary:hover span,
.btn-outline-secondary:hover i,
.btn-outline-secondary:hover span {
    color: #1e293b !important;
}
body.light button.btn-outline-secondary:focus-visible,
body.light a.btn-outline-secondary:focus-visible,
.btn-outline-secondary:focus-visible {
    background-color: #e2e8f0 !important;
    border-color: #64748b !important;
    color: #0f172a !important;
    box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.2) !important;
}
body.light button.btn-outline-secondary:focus-visible i,
body.light button.btn-outline-secondary:focus-visible span,
body.light a.btn-outline-secondary:focus-visible i,
body.light a.btn-outline-secondary:focus-visible span,
.btn-outline-secondary:focus-visible i,
.btn-outline-secondary:focus-visible span {
    color: #0f172a !important;
}
body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle):active,
body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle).active,
body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle)[aria-pressed="true"],
body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle)[aria-expanded="true"],
body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle).btn-clicked,
body.light a.btn-outline-secondary:active,
body.light a.btn-outline-secondary.active,
body.light a.btn-outline-secondary[aria-pressed="true"],
body.light a.btn-outline-secondary[aria-expanded="true"],
body.light a.btn-outline-secondary.btn-clicked,
.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle):active,
.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle).active,
.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle)[aria-pressed="true"],
.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle)[aria-expanded="true"],
.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle).btn-clicked {
    background-color: #334155 !important;
    border-color: #334155 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(51, 65, 85, 0.25) !important;
}

body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle):active i,
body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle):active span,
body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle).active i,
body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle).active span,
body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle)[aria-expanded="true"] i,
body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle)[aria-expanded="true"] span,
body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle).btn-clicked i,
body.light button.btn-outline-secondary:not(#filterToggle):not(.table-filters-toggle).btn-clicked span,
body.light a.btn-outline-secondary:active i,
body.light a.btn-outline-secondary:active span,
body.light a.btn-outline-secondary.active i,
body.light a.btn-outline-secondary.active span,
body.light a.btn-outline-secondary[aria-expanded="true"] i,
body.light a.btn-outline-secondary[aria-expanded="true"] span,
body.light a.btn-outline-secondary.btn-clicked i,
body.light a.btn-outline-secondary.btn-clicked span {
    color: #ffffff !important;
}

/* Outline Primary (Brand Blue Fill when Active / Clicked) */
body.light button.btn-outline-primary:hover,
body.light a.btn-outline-primary:hover,
.btn-outline-primary:hover {
    background-color: #EEF0FC !important;
    border-color: var(--theme-default, #2737C9) !important;
    color: var(--theme-default, #2737C9) !important;
}
body.light button.btn-outline-primary:hover i,
body.light button.btn-outline-primary:hover span,
body.light a.btn-outline-primary:hover i,
body.light a.btn-outline-primary:hover span,
.btn-outline-primary:hover i,
.btn-outline-primary:hover span {
    color: var(--theme-default, #2737C9) !important;
    stroke: var(--theme-default, #2737C9) !important;
}
body.light button.btn-outline-primary:focus-visible,
body.light a.btn-outline-primary:focus-visible,
.btn-outline-primary:focus-visible {
    background-color: #EEF0FC !important;
    border-color: var(--theme-default, #2737C9) !important;
    color: var(--theme-default, #2737C9) !important;
    box-shadow: 0 0 0 3px rgba(39, 55, 201, 0.25) !important;
}
body.light button.btn-outline-primary:focus-visible i,
body.light button.btn-outline-primary:focus-visible span,
body.light a.btn-outline-primary:focus-visible i,
body.light a.btn-outline-primary:focus-visible span,
.btn-outline-primary:focus-visible i,
.btn-outline-primary:focus-visible span {
    color: var(--theme-default, #2737C9) !important;
    stroke: var(--theme-default, #2737C9) !important;
}
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary[aria-pressed="true"],
.btn-outline-primary[aria-expanded="true"],
.btn-outline-primary.btn-clicked,
a.btn.btn-outline-primary:active,
a.btn.btn-outline-primary.active,
a.btn.btn-outline-primary[aria-pressed="true"],
a.btn.btn-outline-primary[aria-expanded="true"],
a.btn.btn-outline-primary.btn-clicked,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--theme-default, #2737C9) !important;
    border-color: var(--theme-default, #2737C9) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(39, 55, 201, 0.28) !important;
}
.btn-outline-primary:active i,
.btn-outline-primary:active span,
.btn-outline-primary.active i,
.btn-outline-primary.active span,
.btn-outline-primary[aria-pressed="true"] i,
.btn-outline-primary[aria-pressed="true"] span,
.btn-outline-primary[aria-expanded="true"] i,
.btn-outline-primary[aria-expanded="true"] span,
.btn-outline-primary.btn-clicked i,
.btn-outline-primary.btn-clicked span,
a.btn.btn-outline-primary:active i,
a.btn.btn-outline-primary:active span,
a.btn.btn-outline-primary.active i,
a.btn.btn-outline-primary.active span,
a.btn.btn-outline-primary[aria-pressed="true"] i,
a.btn.btn-outline-primary[aria-pressed="true"] span,
a.btn.btn-outline-primary[aria-expanded="true"] i,
a.btn.btn-outline-primary[aria-expanded="true"] span,
a.btn.btn-outline-primary.btn-clicked i,
a.btn.btn-outline-primary.btn-clicked span {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Outline Danger (Red Fill when Active) */
body.light button.btn-outline-danger:hover,
body.light a.btn-outline-danger:hover,
.btn-outline-danger:hover {
    background-color: #FEF2F2 !important;
    border-color: #dc2626 !important;
    color: #dc2626 !important;
}
body.light button.btn-outline-danger:hover i,
body.light button.btn-outline-danger:hover span,
body.light a.btn-outline-danger:hover i,
body.light a.btn-outline-danger:hover span,
.btn-outline-danger:hover i,
.btn-outline-danger:hover span,
body.light button.btn-outline-danger:focus-visible i,
body.light button.btn-outline-danger:focus-visible span,
body.light a.btn-outline-danger:focus-visible i,
body.light a.btn-outline-danger:focus-visible span,
.btn-outline-danger:focus-visible i,
.btn-outline-danger:focus-visible span {
    color: #dc2626 !important;
}
.btn-outline-danger:active,
.btn-outline-danger.active,
.btn-outline-danger[aria-pressed="true"],
.btn-outline-danger[aria-expanded="true"],
.btn-outline-danger.btn-clicked,
a.btn.btn-outline-danger:active,
a.btn.btn-outline-danger.active,
a.btn.btn-outline-danger.btn-clicked {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
}
.btn-outline-danger:active i,
.btn-outline-danger:active span,
.btn-outline-danger.active i,
.btn-outline-danger.active span,
.btn-outline-danger.btn-clicked i,
.btn-outline-danger.btn-clicked span {
    color: #ffffff !important;
}

/* Outline Success (Green Fill when Active) */
body.light button.btn-outline-success:hover,
body.light a.btn-outline-success:hover,
.btn-outline-success:hover {
    background-color: #F0FDF4 !important;
    border-color: #16a34a !important;
    color: #16a34a !important;
}
body.light button.btn-outline-success:hover i,
body.light button.btn-outline-success:hover span,
body.light a.btn-outline-success:hover i,
body.light a.btn-outline-success:hover span,
.btn-outline-success:hover i,
.btn-outline-success:hover span,
body.light button.btn-outline-success:focus-visible i,
body.light button.btn-outline-success:focus-visible span,
body.light a.btn-outline-success:focus-visible i,
body.light a.btn-outline-success:focus-visible span,
.btn-outline-success:focus-visible i,
.btn-outline-success:focus-visible span {
    color: #16a34a !important;
}
.btn-outline-success:active,
.btn-outline-success.active,
.btn-outline-success[aria-pressed="true"],
.btn-outline-success[aria-expanded="true"],
.btn-outline-success.btn-clicked,
a.btn.btn-outline-success:active,
a.btn.btn-outline-success.active,
a.btn.btn-outline-success.btn-clicked {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.25) !important;
}
.btn-outline-success:active i,
.btn-outline-success:active span,
.btn-outline-success.active i,
.btn-outline-success.active span,
.btn-outline-success.btn-clicked i,
.btn-outline-success.btn-clicked span {
    color: #ffffff !important;
}

/* Outline Warning (Amber Fill when Active) */
body.light button.btn-outline-warning:hover,
body.light a.btn-outline-warning:hover,
.btn-outline-warning:hover {
    background-color: #FFFBEB !important;
    border-color: #d97706 !important;
    color: #d97706 !important;
}
body.light button.btn-outline-warning:hover i,
body.light button.btn-outline-warning:hover span,
body.light a.btn-outline-warning:hover i,
body.light a.btn-outline-warning:hover span,
.btn-outline-warning:hover i,
.btn-outline-warning:hover span,
body.light button.btn-outline-warning:focus-visible i,
body.light button.btn-outline-warning:focus-visible span,
body.light a.btn-outline-warning:focus-visible i,
body.light a.btn-outline-warning:focus-visible span,
.btn-outline-warning:focus-visible i,
.btn-outline-warning:focus-visible span {
    color: #d97706 !important;
}
.btn-outline-warning:active,
.btn-outline-warning.active,
.btn-outline-warning[aria-pressed="true"],
.btn-outline-warning[aria-expanded="true"],
.btn-outline-warning.btn-clicked,
a.btn.btn-outline-warning:active,
a.btn.btn-outline-warning.active,
a.btn.btn-outline-warning.btn-clicked {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(217, 119, 6, 0.25) !important;
}
.btn-outline-warning:active i,
.btn-outline-warning:active span,
.btn-outline-warning.active i,
.btn-outline-warning.active span,
.btn-outline-warning.btn-clicked i,
.btn-outline-warning.btn-clicked span {
    color: #ffffff !important;
}

/* Outline Info (Sky Blue Fill when Active) */
body.light button.btn-outline-info:hover,
body.light a.btn-outline-info:hover,
.btn-outline-info:hover {
    background-color: #E0F2FE !important;
    border-color: #0284c7 !important;
    color: #0284c7 !important;
}
body.light button.btn-outline-info:hover i,
body.light button.btn-outline-info:hover span,
body.light a.btn-outline-info:hover i,
body.light a.btn-outline-info:hover span,
.btn-outline-info:hover i,
.btn-outline-info:hover span,
body.light button.btn-outline-info:focus-visible i,
body.light button.btn-outline-info:focus-visible span,
body.light a.btn-outline-info:focus-visible i,
body.light a.btn-outline-info:focus-visible span,
.btn-outline-info:focus-visible i,
.btn-outline-info:focus-visible span {
    color: #0284c7 !important;
}
.btn-outline-info:active,
.btn-outline-info.active,
.btn-outline-info[aria-pressed="true"],
.btn-outline-info[aria-expanded="true"],
.btn-outline-info.btn-clicked,
a.btn.btn-outline-info:active,
a.btn.btn-outline-info.active,
a.btn.btn-outline-info.btn-clicked {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(2, 132, 199, 0.25) !important;
}
.btn-outline-info:active i,
.btn-outline-info:active span,
.btn-outline-info.active i,
.btn-outline-info.active span,
.btn-outline-info.btn-clicked i,
.btn-outline-info.btn-clicked span {
    color: #ffffff !important;
}

/* Decimal Spacing Utilities */
.p-2\.5 { padding: 0.625rem !important; }
.py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; }
.px-2\.5 { padding-left: 0.625rem !important; padding-right: 0.625rem !important; }
.gap-1\.5 { gap: 0.375rem !important; }
.gap-2\.5 { gap: 0.625rem !important; }

/* =========================================================
   Auth Pages Layout & Hero (Login & Register)
   ========================================================= */
.login-wrap {
    background: #ffffff;
    min-height: 100vh;
    width: 100%;
}

.login-box {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

.auth-branding {
    text-align: center;
    margin-bottom: 1.25rem;
}

.auth-branding .login-logo {
    height: 60px;
    width: auto;
    transition: transform 0.2s ease;
}

.auth-branding .auth-brand-title {
    font-size: 1.05rem;
    font-weight: 700;
}

.auth-branding .auth-brand-subtitle {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
}

@media (max-width: 991.98px) {
    .login-wrap {
        background-color: #ffffff;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .login-panel {
        width: 100% !important;
        flex: 1 1 auto !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        padding: 0 !important;
    }

    .login-panel > .flex-grow-1 {
        padding: 1.5rem 1.25rem 1rem !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important;
    }

    .login-box {
        background: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .login-panel footer {
        padding: 0.75rem 1.25rem 1.5rem !important;
        text-align: center;
    }

    .login-panel .theme-form .form-group {
        margin-bottom: 0.95rem !important;
    }

    .login-panel .theme-form .col-form-label {
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.35rem !important;
        color: #334155 !important;
        padding: 0 !important;
    }

    .login-panel .theme-form .form-control,
    .login-panel .theme-form .input-group-text {
        font-size: 16px !important; /* Mencegah auto-zoom di iOS Safari saat fokus input */
        min-height: 48px !important;
        border-radius: 0.625rem;
    }

    .login-panel .theme-form .input-group .form-control {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
    }

    .login-panel .theme-form .input-group .input-group-text {
        border-top-left-radius: 0.625rem !important;
        border-bottom-left-radius: 0.625rem !important;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .login-panel .pmb-pw-toggle {
        width: 2.75rem !important;
        height: 2.75rem !important;
        right: 0.25rem !important;
    }

    .login-panel .btn-primary,
    .login-panel .btn-outline-secondary {
        min-height: 48px !important;
        font-size: 0.95rem !important;
    }
}

@media (min-width: 992px) {
    .login-wrap {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        min-height: 100vh;
    }

    .login-panel {
        width: 50% !important;
        flex: 0 0 50% !important;
        min-height: 100vh;
        display: flex !important;
        flex-direction: column !important;
    }

    .auth-branding {
        text-align: left;
        margin-bottom: 1.5rem;
    }

    .auth-branding .login-logo {
        height: 80px;
    }

    .auth-branding .auth-brand-title {
        font-size: 1.15rem;
    }

    .auth-branding .auth-brand-subtitle {
        font-size: 0.72rem;
    }

    .login-hero {
        width: 50% !important;
        flex: 0 0 50% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        position: sticky !important;
        top: 0;
        align-self: flex-start;
        overflow: hidden !important;
        background-color: #0f172a;
    }

    .login-hero-bg {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 10s ease;
    }

    .login-hero:hover .login-hero-bg {
        transform: scale(1.03);
    }
}


/* ==========================================================================
   MOBILE UX — Camaba & Admin
   --------------------------------------------------------------------------
   Perbaikan aksesibilitas mobile:
   1. Tombol logout di sidebar (admin + camaba) — visible hanya di ≤991.98px
   2. Header: avatar tap target lebih besar di ponsel
   3. Page title lebih compact di ponsel
   4. Beranda camaba: kolom informasi urutan dibalik di mobile (order)
   5. Spacing konten lebih efisien di ponsel
   ========================================================================== */

/* ------------------------------------------------------------------
   1. Sidebar logout button — admin & camaba
   ------------------------------------------------------------------ */

/* Wrapper tombol logout di bawah sidebar-menu admin.
   Posisi sticky di dasar sidebar agar selalu terlihat tanpa scroll. */
.pmb-sidebar-logout-wrap {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--sidebar-rail, rgba(255,255,255,.12));
    margin-top: auto;
}

/* Tombol logout admin (di pmb-sidebar-logout-wrap) — hanya tampil di mobile/tablet. */
@media (min-width: 992px) {
    .pmb-sidebar-logout-wrap {
        display: none;
    }
}

/* Shared button style — dipakai oleh admin dan camaba sidebar. */
.pmb-sidebar-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--sidebar-text, rgba(255,255,255,.75));
    transition: background 0.15s ease, color 0.15s ease;
    text-align: left;
}

.pmb-sidebar-logout:hover,
.pmb-sidebar-logout:focus-visible {
    background: rgba(255,255,255,.08);
    color: #fff;
    outline: none;
}

/* Ikon dalam tombol logout */
.pmb-sidebar-logout > i,
.pmb-sidebar-logout > .fa-solid {
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--soft-danger-fg, #ef4444);
    opacity: 0.85;
}

/* Camaba sidebar: tombol logout pakai tampilan yang sama dengan sidebar-link. */
.sidebar-list .pmb-sidebar-logout {
    width: 100%;
    text-align: left;
    font-size: 0.9375rem;
    color: var(--sidebar-text, rgba(255,255,255,.75));
}

.sidebar-list .pmb-sidebar-logout h6 {
    margin: 0;
    font-size: inherit;
    font-weight: 600;
    color: inherit;
}

.sidebar-list .pmb-sidebar-logout:hover,
.sidebar-list .pmb-sidebar-logout:focus-visible {
    background: rgba(255,255,255,.08);
    color: #fff;
}

/* Form yang membungkus tombol tidak boleh menambah margin/padding. */
.sidebar-list form,
#sidebar-logout-form {
    display: block;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------
   2. Header: avatar tap target lebih besar di ponsel
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* Diperbesar dari 36px ke 44px — minimal Apple HIG untuk elemen sentuh. */
    .profile-nav .user-wrap .user-img img.pmb-avatar {
        width: 40px !important;
        height: 40px !important;
    }

    /* Tambah padding tap area di sekitar avatar supaya mudah disentuh. */
    .profile-nav .user-wrap {
        padding: 6px !important;
        border-radius: 50%;
        min-width: 52px;
        min-height: 52px;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ------------------------------------------------------------------
   3. Page title lebih compact di ponsel
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* Judul halaman */
    .user-dashboard .page-title {
        padding-top: 0.75rem;
        padding-bottom: 0.5rem;
    }

    .user-dashboard .page-title h2 {
        font-size: 1.25rem;
        margin-bottom: 0;
    }

    /* Row page-title: teks dan breadcrumb di baris yang sama kalau muat,
       kalau tidak, crumbs turun ke baris berikutnya (flex-wrap: wrap default). */
    .user-dashboard .page-title .row {
        align-items: center;
        row-gap: 0.25rem;
    }
}

/* ------------------------------------------------------------------
   4. Beranda camaba: kolom informasi muncul setelah konten utama di mobile
      Pada desktop (lg) urutan natural HTML sudah benar (9+3).
      Di mobile kita ingin konten utama (col-lg-9) tampil duluan,
      lalu kolom informasi (col-lg-3) di bawahnya — ini sudah default
      Bootstrap (sumber sebelah kiri ke bawah), tidak perlu order.
      Tapi berikan visual separator agar kolom info tidak nempel ke atas. */
@media (max-width: 991.98px) {
    /* Kolom informasi camaba dapat sedikit jarak atas di mobile. */
    .user-dashboard .col-lg-3 > .card {
        margin-top: 0;
    }
}

/* ------------------------------------------------------------------
   5. Sidebar drawer: sidebar-wrapper memiliki flex layout agar
      logout button (admin) selalu di dasar drawer.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    /* Sidebar content box pakai flex column agar konten + logout
       terdistribusi dari atas ke bawah secara penuh. */
    .page-sidebar .main-sidebar {
        display: flex;
        flex-direction: column;
        height: 100%;
    }

    .page-sidebar .sidebar-wrapper {
        display: flex;
        flex-direction: column;
        flex: 1;
        height: 100%;
        overflow: hidden;
    }

    /* sidebar-menu mengambil sisa ruang & bisa di-scroll internal. */
    .page-sidebar .sidebar-wrapper > ul.sidebar-menu {
        flex: 1;
        overflow-y: auto;
    }

    /* Logout wrap selalu di bawah. */
    .pmb-sidebar-logout-wrap {
        flex-shrink: 0;
        display: block;
    }
}

/* ------------------------------------------------------------------
   6. Spacing kartu beranda camaba di mobile lebih efisien
   ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    /* row g-4 terlalu lebar gap di layar sempit. */
    .user-dashboard .row.g-4 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1rem;
    }

    /* card-body padding lebih kecil. */
    .user-dashboard .card-body {
        padding: 1rem;
    }
}

/* ------------------------------------------------------------------
   7. Header Mobile: Profile Chip & Dropdown UX
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* Profile chip berbentuk pill: [Avatar ▾] */
    .profile-nav .user-wrap {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 3px 8px 3px 3px !important;
        border-radius: 9999px !important;
        background: rgba(0, 0, 0, 0.04) !important;
        border: 1px solid rgba(0, 0, 0, 0.08) !important;
        min-width: unset !important;
        min-height: 40px !important;
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

    .profile-nav .user-wrap:hover,
    .profile-nav.is-open .user-wrap,
    .profile-nav:has(.custom-menu.show) .user-wrap {
        background: rgba(var(--theme-default-rgb, 13, 110, 253), 0.1) !important;
        border-color: rgba(var(--theme-default-rgb, 13, 110, 253), 0.25) !important;
    }

    .profile-nav .user-wrap .user-img img.pmb-avatar {
        width: 34px !important;
        height: 34px !important;
        border-radius: 50% !important;
        display: block !important;
    }

    .pmb-mobile-chevron {
        font-size: 0.65rem !important;
        color: var(--text-muted, #64748b) !important;
        transition: transform 0.2s ease, color 0.2s ease;
    }

    .profile-nav.is-open .pmb-mobile-chevron,
    .profile-nav:has(.custom-menu.show) .pmb-mobile-chevron {
        transform: rotate(180deg);
        color: var(--theme-default, #0d6efd) !important;
    }

    /* Menu item touch-friendly di layar ponsel */
    .pmb-profile-item > a,
    .pmb-profile-item form > button {
        min-height: 44px !important;
        padding: 0.65rem 0.85rem !important;
        font-size: 0.875rem !important;
    }
}

/* ------------------------------------------------------------------
   9. Camaba Mobile UX Refinements (Breadcrumb, Tabs, Panels, SweetAlert)
   ------------------------------------------------------------------ */
@media (max-width: 767.98px) {
    /* Floating tap-to-top button di mobile */
    .tap-top {
        bottom: 20px !important;
        right: 20px !important;
        width: 38px !important;
        height: 38px !important;
        line-height: 38px !important;
        z-index: 1050 !important;
    }

    /* Page title di mobile user dibuat ringkas dan bersih */
    .user-dashboard .page-title {
        padding-top: 0.5rem !important;
        padding-bottom: 0.25rem !important;
    }

    .user-dashboard .page-title h2 {
        font-size: 1.15rem !important;
        font-weight: 700 !important;
        margin-bottom: 0 !important;
    }

    /* Breadcrumb disembunyikan total di mobile (bikin penuh & sesak) */
    .user-dashboard nav[aria-label="breadcrumb"],
    .page-title .breadcrumb {
        display: none !important;
    }

    /* Sub-header halaman anak (berkas, status, hasil, nim, biaya formulir, riwayat) dibuat ringkas */
    .user-dashboard .d-flex.flex-wrap.justify-content-between.align-items-end.gap-2.mb-4,
    .user-dashboard .d-flex.flex-wrap.justify-content-between.align-items-center.gap-3.mb-4 {
        margin-bottom: 0.65rem !important;
    }

    .user-dashboard .d-flex.flex-wrap.justify-content-between.align-items-end.gap-2.mb-4 h4,
    .user-dashboard .d-flex.flex-wrap.justify-content-between.align-items-center.gap-3.mb-4 h4 {
        font-size: 1.1rem !important;
        margin-bottom: 0.2rem !important;
    }

    .user-dashboard .d-flex.flex-wrap.justify-content-between.align-items-end.gap-2.mb-4 p,
    .user-dashboard .d-flex.flex-wrap.justify-content-between.align-items-center.gap-3.mb-4 p {
        font-size: 0.785rem !important;
    }

    /* Card header biodata di mobile: judul disembunyikan agar status autosave & badge simetris rapi */
    .user-dashboard .pmb-biodata-header-title {
        display: none !important;
    }

    /* Padding samping container di mobile lebih efisien */
    .user-dashboard .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Tab list biodata & pendaftaran touch-scroll tanpa scrollbar kaku */
    .pmb-tablist {
        -webkit-overflow-scrolling: touch;
        padding-bottom: 6px;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .pmb-tablist::-webkit-scrollbar {
        display: none !important;
    }

    .pmb-tab {
        padding: 0.35rem 0.75rem !important;
        font-size: 0.8rem !important;
        border-radius: 9999px !important;
    }

    /* SweetAlert Toast: Melayang di bawah (bottom snackbar), tidak menutupi topbar */
    body.swal2-toast-shown .swal2-container.swal2-top-right,
    body.swal2-toast-shown .swal2-container {
        top: auto !important;
        bottom: 1.25rem !important;
        left: 1rem !important;
        right: 1rem !important;
        inset: auto 1rem 1.25rem 1rem !important;
        width: auto !important;
        margin: 0 auto !important;
        display: flex !important;
        justify-content: center !important;
        pointer-events: none !important;
    }

    .swal2-popup.siba-toast {
        pointer-events: auto !important;
        width: 100% !important;
        max-width: 360px !important;
        min-width: 0 !important;
        padding: 0.625rem 0.85rem !important;
        border-radius: 10px !important;
        box-shadow: 0 10px 25px -4px rgba(15, 23, 42, 0.2), 0 4px 10px -2px rgba(15, 23, 42, 0.1) !important;
        gap: 0.625rem !important;
    }

    .swal2-popup.siba-toast .swal2-title {
        font-size: 0.8125rem !important;
        line-height: 1.35 !important;
    }

    .swal2-popup.siba-toast .swal2-icon {
        width: 1.75rem !important;
        height: 1.75rem !important;
        min-width: 1.75rem !important;
    }

    .swal2-popup.siba-toast .swal2-icon .swal2-icon-content svg {
        width: 0.95rem !important;
        height: 0.95rem !important;
    }

    /* SweetAlert Dialog Modal: Compact, tidak memenuhi viewport mobile */
    .swal2-popup.siba-flash {
        width: calc(100vw - 2rem) !important;
        max-width: 320px !important;
        padding: 1.25rem 1rem !important;
        border-radius: 14px !important;
        margin: auto !important;
    }

    .swal2-popup.siba-flash .swal2-icon {
        width: 2.75rem !important;
        height: 2.75rem !important;
        min-width: 2.75rem !important;
        margin: 0 auto 0.65rem !important;
        border-width: 2px !important;
    }

    .swal2-popup.siba-flash .swal2-icon .swal2-icon-content {
        font-size: 1.5rem !important;
    }

    .swal2-popup.siba-flash .swal2-title {
        font-size: 1.05rem !important;
        margin-bottom: 0.35rem !important;
    }

    .swal2-popup.siba-flash .swal2-html-container {
        font-size: 0.8125rem !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.4 !important;
    }

    .siba-flash .swal2-actions {
        margin-top: 1rem !important;
        width: 100% !important;
        gap: 0.5rem !important;
    }

    .siba-flash .swal2-actions .btn {
        width: 100% !important;
        min-height: 42px !important;
        font-size: 0.875rem !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Form Controls & Labels di Mobile */
    .user-dashboard .form-label {
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        margin-bottom: 0.25rem !important;
    }

    .user-dashboard .form-control,
    .user-dashboard .form-select {
        min-height: 40px !important;
        font-size: 0.875rem !important;
        border-radius: 8px !important;
        padding: 0.45rem 0.75rem !important;
    }

    /* Spasial Kelompok Form (pmb-group) di Mobile */
    .user-dashboard .pmb-group + .pmb-group {
        margin-top: 0.85rem !important;
        padding-top: 0.75rem !important;
    }

    .user-dashboard .pmb-group__title {
        font-size: 0.6875rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Tabel di Mobile (Berkas Persyaratan, Status) */
    .user-dashboard .table th.ps-4,
    .user-dashboard .table td.ps-4 {
        padding-left: 0.5rem !important;
    }

    .user-dashboard .table th.pe-4,
    .user-dashboard .table td.pe-4 {
        padding-right: 0.5rem !important;
    }

    .user-dashboard .table td,
    .user-dashboard .table th {
        padding: 0.55rem 0.5rem !important;
        font-size: 0.8125rem !important;
    }

    .user-dashboard .table .btn-sm {
        min-height: 36px !important;
        padding: 0.3rem 0.65rem !important;
        font-size: 0.75rem !important;
    }

    /* Kartu status dan topbar di mobile */
    .pmb-card-topbar {
        padding: 10px 12px;
    }

    /* Ringkasan list pmb-sum spacing */
    .pmb-sum {
        gap: 0.5rem;
    }

    .pmb-sum__row {
        flex-direction: row;
        align-items: baseline;
    }

    /* Alert / notice touch-friendly */
    .pmb-alert {
        padding: 10px 12px;
        border-radius: 8px;
    }

    /* Tombol-tombol aksi utama di mobile */
    .user-dashboard .btn-sm {
        padding: 0.35rem 0.85rem;
        font-size: 0.8125rem;
    }

    /* Tombol Navigasi Bawah Formulir di Mobile */
    .user-dashboard .pmb-divider-top .btn {
        min-height: 42px !important;
        padding: 0.45rem 1.25rem !important;
        font-size: 0.8125rem !important;
        font-weight: 600 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Spacing & Card Comfort di Mobile */
    .user-dashboard .card {
        margin-bottom: 0.75rem !important;
        border-radius: 12px;
        border: 1px solid var(--card-border, #e2e8f0) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    }

    .user-dashboard .card-header {
        padding: 0.75rem 1rem !important;
    }

    .user-dashboard .card-body {
        padding: 0.85rem 1rem !important;
    }

    .user-dashboard .btn-primary:not(.btn-sm),
    .user-dashboard .btn-success:not(.btn-sm) {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .user-dashboard .pmb-panel,
    .user-dashboard .pmb-panel--primary {
        padding: 0.65rem 0.85rem !important;
        border-radius: 10px;
        margin-bottom: 0.65rem !important;
    }

    .user-dashboard .pmb-panel .row.g-3 {
        --bs-gutter-x: 0.5rem !important;
        --bs-gutter-y: 0.35rem !important;
    }

    .user-dashboard .pmb-panel__label {
        font-size: 0.6875rem !important;
        margin-bottom: 1px !important;
        color: var(--text-muted, #64748b) !important;
    }

    .user-dashboard .pmb-panel__value {
        font-size: 0.8125rem !important;
        line-height: 1.25 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pmb-timeline__item {
        padding-bottom: 0.75rem;
    }

    .pmb-timeline__marker {
        width: 1.85rem !important;
        height: 1.85rem !important;
        font-size: 0.75rem !important;
    }

    /* Footer compact di mobile */
    .footer {
        padding: 8px 12px !important;
        font-size: 0.72rem !important;
        background: transparent !important;
        border-top: 1px solid var(--border-soft, #e2e8f0) !important;
    }

    .footer .row {
        flex-direction: column !important;
        gap: 2px !important;
    }

    .footer .row > div {
        text-align: center !important;
        width: 100% !important;
    }

    .footer p {
        font-size: 0.72rem !important;
        line-height: 1.35 !important;
        color: var(--text-muted, #64748b) !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* Modal Pratinjau Berkas & Lightbox di Layar HP */
    #modalPreviewBerkas {
        padding: 0.5rem !important;
    }

    #previewModalCard {
        max-height: 96vh !important;
        border-radius: 12px !important;
    }

    #previewModalCard .card-header {
        padding: 0.5rem 0.75rem !important;
        min-height: 48px !important;
    }

    #previewModalCard .card-footer {
        padding: 0.5rem 0.75rem !important;
        min-height: 48px !important;
        gap: 0.5rem !important;
    }

    #previewModalCard .card-footer .btn {
        font-size: 0.8125rem !important;
        padding: 0.4rem 0.75rem !important;
    }
}

/* ------------------------------------------------------------------
   10. Navigasi Pilihan Jalur Masuk (Landing Page)
   ------------------------------------------------------------------ */
.pmb-jalur-nav-item {
    color: #475569;
    background: transparent;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.pmb-jalur-nav-item:hover {
    background: #f8fafc;
    color: var(--theme-default, #0d6efd);
}

.pmb-jalur-nav-item.is-active {
    background: var(--soft-primary-bg, #eff6ff) !important;
    color: var(--theme-default, #0d6efd) !important;
    font-weight: 600;
}

.pmb-jalur-nav-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal !important;
    overflow-wrap: break-word;
    word-break: normal;
    line-height: 1.45;
}

/* ==========================================================================
   Timeline Riwayat Aktivitas & Jejak Langkah Calon Mahasiswa (PMB) - Clean Style
   ========================================================================== */
.camaba-timeline {
    position: relative;
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}

.camaba-timeline::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 4px;
    width: 2px;
    background: #e2e8f0;
}

.dark-only .camaba-timeline::before {
    background: #334155;
}

.camaba-timeline-item {
    position: relative;
    padding-bottom: 1.15rem;
    transition: opacity 0.2s ease;
}

.camaba-timeline-item:last-child {
    padding-bottom: 0;
}

.camaba-timeline-item.d-none {
    display: none !important;
}

.camaba-timeline-dot {
    position: absolute;
    left: -1.5rem;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #94a3b8;
    z-index: 2;
    box-sizing: border-box;
}

.camaba-timeline-dot.dot-success { border-color: #10b981; background: #10b981; }
.camaba-timeline-dot.dot-primary { border-color: var(--theme-default, #2737c9); background: var(--theme-default, #2737c9); }
.camaba-timeline-dot.dot-info    { border-color: #0284c7; background: #0284c7; }
.camaba-timeline-dot.dot-warning { border-color: #f59e0b; background: #f59e0b; }
.camaba-timeline-dot.dot-danger  { border-color: #ef4444; background: #ef4444; }

.dark-only .camaba-timeline-dot {
    box-shadow: 0 0 0 2px var(--body-color, #1d222b);
}

.camaba-timeline-body {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.camaba-timeline-item:hover .camaba-timeline-body {
    background-color: #f8fafc;
}

.dark-only .camaba-timeline-item:hover .camaba-timeline-body {
    background-color: rgba(255, 255, 255, 0.03);
}

.camaba-timeline-filter-btn {
    font-size: 0.8125rem;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.camaba-timeline-filter-btn:hover {
    color: #0f172a;
    background: #f1f5f9;
}

.camaba-timeline-filter-btn.active {
    color: #0f172a !important;
    background: #e2e8f0 !important;
    font-weight: 600;
}

.dark-only .camaba-timeline-filter-btn {
    color: #94a3b8;
}

.dark-only .camaba-timeline-filter-btn:hover {
    color: #f1f5f9;
    background: #334155;
}

.dark-only .camaba-timeline-filter-btn.active {
    color: #ffffff !important;
    background: #334155 !important;
}