/**
 * Lokasi: public/assets/css/premium-ui.css
 *
 * BARU (permintaan user - "berikut ini adalah layout layout premium.
 * tolong buat seperti premium ini", dengan 8 contoh screenshot reel:
 * Login UI, Date & Time Picker, Sidebar, Progress Widget, Date Range
 * Picker, Breadcrumb, Signup Form, Tree Navigation - semuanya bertema
 * "Basic vs Premium"): lapisan CSS terpusat yang menaikkan "kelas" tampilan
 * komponen yang SUDAH ada di 394+ file view (input, tombol, kartu, badge,
 * tabel, sidebar) supaya terasa seperti versi "Premium" di contoh -
 * SELALU pakai palet indigo/slate KHAS e-Couns yang sudah konsisten
 * dipakai di seluruh aplikasi (dikonfirmasi user via pertanyaan pilihan
 * ganda: "Tetap warna e-Couns, gaya premium"), BUKAN gradasi ungu/biru
 * dari reel contohnya.
 *
 * KENAPA satu file CSS terpusat (pola SAMA PERSIS dgn
 * public/assets/css/theme-accent.css yang sudah ada lebih dulu di
 * aplikasi ini - baca catatan lengkap di file itu): menyunting 394+ file
 * view satu-satu utk tiap perbaikan kecil (shadow lebih halus, transisi
 * lebih mulus, dst) sangat berisiko ada yg kelewatan/beda sendiri. File
 * ini memanfaatkan KONVENSI class Tailwind yang SUDAH konsisten dipakai
 * di seluruh aplikasi (rounded-3xl+shadow-sm utk kartu, rounded-xl+
 * border utk input, dst) - begitu file ini dimuat sekali di
 * templates/header.php (staf) & templates/header_siswa.php (siswa),
 * SEMUA halaman yang memakai kedua template itu otomatis kebagian
 * upgrade, tanpa perlu satu-satu.
 *
 * !important dipakai dgn alasan SAMA PERSIS spt di theme-accent.css:
 * Tailwind Play CDN (public/assets/vendor/tailwind/) meng-generate ulang
 * stylenya sendiri lewat MutationObserver saat DOM berubah, jadi urutan
 * <link>/<style> di <head> tidak bisa diandalkan menang di cascade.
 *
 * Komponen BARU (tidak ada padanan class Tailwind bawaannya, dipakai lewat
 * class eksplisit ".premium-xxx" di view/JS yang secara sengaja memilih
 * ikut upgrade) meliputi: breadcrumb premium, progress ring melingkar,
 * chrome premium utk widget date/time picker & date-range picker (dipasang
 * oleh public/assets/js/premium-ui.js), aksen "tree navigation" di grup
 * sidebar yang bisa dilipat.
 */

/* ===================================================================
   1) INPUT & SELECT - fokus lebih hidup, sedikit "terangkat" saat aktif.
   Menyasar kombinasi class yang SUDAH dipakai konsisten di ~ratusan form
   di seluruh aplikasi (rounded-xl/rounded-2xl + border + focus:border-*).
   =================================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="tel"],
input[type="search"],
input[type="url"],
textarea,
select {
    transition: box-shadow .18s ease, border-color .18s ease, transform .12s ease !important;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12), 0 2px 8px rgba(79, 70, 229, 0.08) !important;
}

/* ===================================================================
   2) TOMBOL SOLID - bg-indigo-600/700 SUDAH bergradasi lewat
   theme-accent.css; di sini ditambah efek "terangkat" halus saat hover +
   ditekan, supaya terasa lebih hidup & premium spt tombol "Login ->" di
   contoh reel, tanpa mengubah warnanya sama sekali. */
button[type="submit"],
a.premium-btn,
button.premium-btn {
    transition: transform .15s ease, box-shadow .15s ease !important;
}
button[type="submit"]:not(:disabled):hover,
a.premium-btn:hover,
button.premium-btn:not(:disabled):hover {
    transform: translateY(-1px);
}
button[type="submit"]:not(:disabled):active,
a.premium-btn:active,
button.premium-btn:not(:disabled):active {
    transform: translateY(0);
}

/* ===================================================================
   3) KARTU - kombinasi "rounded-2xl/rounded-3xl + shadow-sm/border" yang
   SUDAH dipakai di ~ribuan tempat (kartu dashboard, form, tabel) - shadow
   bawaan Tailwind (shadow-sm) diganti bayangan berlapis yang lebih halus
   & "mengambang", konsisten dgn kesan "Premium" di semua contoh reel.
   =================================================================== */
.rounded-3xl.shadow-sm,
.rounded-2xl.shadow-sm {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -12px rgba(15, 23, 42, 0.10) !important;
    transition: box-shadow .2s ease, transform .2s ease;
}

/* ===================================================================
   4) TABEL - baris tabel mendapat highlight kiri halus saat hover
   (konvensi "hover:bg-slate-50/50" SUDAH dipakai di ~ratusan tabel).
   =================================================================== */
.hover\:bg-slate-50\/50:hover,
tbody tr:hover {
    box-shadow: inset 3px 0 0 0 rgba(79, 70, 229, 0.35);
}

/* ===================================================================
   5) BREADCRUMB PREMIUM (baru - reel "Breadcrumb UI Upgrade")
   Dipasang eksplisit lewat partial templates/partials/breadcrumb.php.
   =================================================================== */
.premium-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%);
    border: 1px solid #e0e7ff;
    border-radius: 14px;
    padding: 8px 10px;
}
.premium-breadcrumb .premium-crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.premium-breadcrumb .premium-crumb:hover {
    background: rgba(79, 70, 229, 0.08);
    color: #4338ca;
}
.premium-breadcrumb .premium-crumb.is-current {
    color: #fff;
    background-image: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    box-shadow: 0 4px 14px -4px rgba(79, 70, 229, 0.55);
}
.premium-breadcrumb .premium-crumb-sep {
    color: #c7d2fe;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* ===================================================================
   6) PROGRESS RING (baru - reel "Progress Widget UI Upgrade")
   SVG lingkaran, warnanya dikendalikan lewat CSS var --premium-progress
   (0-100) yang diisi inline oleh view/JS yang memakainya.
   =================================================================== */
.premium-progress-ring {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
}
.premium-progress-ring svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}
.premium-progress-ring circle {
    fill: none;
    stroke-width: 9;
    stroke-linecap: round;
}
.premium-progress-ring .premium-progress-track {
    stroke: #eef2ff;
}
.premium-progress-ring .premium-progress-value {
    stroke: url(#premiumProgressGradient);
    transition: stroke-dashoffset .6s cubic-bezier(.4,0,.2,1);
}
.premium-progress-ring .premium-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}
.premium-progress-ring .premium-progress-label strong {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}
.premium-progress-ring .premium-progress-label span {
    font-size: 9px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* ===================================================================
   7) SIDEBAR "TREE NAVIGATION" (reel #3 & #7): garis penghubung halus
   antara header grup yang bisa dilipat dan menu-menu di dalamnya, +
   indikator aktif berupa bar warna di kiri (bukan cuma ganti warna latar
   spt sebelumnya) - dipasang lewat class ".premium-sidebar" di
   #sidebarUtama & #sidebarSiswaUtama (lihat templates/sidebar.php &
   sidebar_siswa.php).
   =================================================================== */
.premium-sidebar .sidebar-menu-item,
.premium-sidebar-siswa a {
    position: relative;
}
.premium-sidebar .sidebar-menu-item.bg-indigo-50::before,
.premium-sidebar-siswa a.bg-indigo-600::before {
    content: "";
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 4px 4px 0;
    background-image: linear-gradient(180deg, #4338ca 0%, #818cf8 100%);
}
.premium-sidebar .sidebar-group:not(.collapsed) > a.sidebar-menu-item {
    margin-left: 8px;
    padding-left: 20px !important;
    border-left: 1px dashed #e2e8f0;
}

/* ===================================================================
   8) LOGIN TAB SLIDER (reel #1): indikator halus yang meluncur di bawah
   tab yang aktif - dipasang lewat #premiumTabIndicator di auth/login.php.
   =================================================================== */
#premiumTabIndicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background-image: linear-gradient(90deg, #4338ca, #818cf8);
    transition: left .25s cubic-bezier(.4,0,.2,1), width .25s cubic-bezier(.4,0,.2,1);
}

/* ===================================================================
   9) PREMIUM DATE / TIME / RANGE PICKER CHROME
   Dipasang oleh public/assets/js/premium-ui.js (EcounsDatePicker /
   EcounsRangePicker) - progressive enhancement di atas <input
   type="date"/"time"> ASLI (input aslinya tetap ada tersembunyi, jadi
   kalau JS gagal dimuat form tetap berfungsi normal via native picker
   browser - lihat catatan "fail open" yang sama di password-field.js).
   =================================================================== */
.premium-picker-wrap { position: relative; }
.premium-picker-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.premium-picker-trigger .premium-picker-value {
    flex: 1;
    font-weight: 600;
    color: #334155;
}
.premium-picker-trigger .premium-picker-value.is-empty {
    font-weight: 500;
    color: #94a3b8;
}
.premium-picker-popover {
    position: absolute;
    z-index: 60;
    margin-top: 6px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.22);
    padding: 14px;
    width: max-content;
    max-width: min(520px, 92vw);
}
.premium-picker-popover[hidden] { display: none !important; }

.premium-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}
.premium-cal-head button {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: background .15s ease, color .15s ease;
}
.premium-cal-head button:hover { background: #eef2ff; color: #4338ca; }
.premium-cal-head select {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
}
.premium-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.premium-cal-dow {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    padding: 4px 0 6px;
    text-transform: uppercase;
}
.premium-cal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.premium-cal-day:hover { background: #eef2ff; }
.premium-cal-day.is-muted { color: #cbd5e1; }
.premium-cal-day.is-today { box-shadow: inset 0 0 0 1.5px #a5b4fc; }
.premium-cal-day.is-selected {
    color: #fff;
    background-image: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    box-shadow: 0 4px 12px -4px rgba(79, 70, 229, 0.6);
}
.premium-cal-day.is-in-range { background: #eef2ff; border-radius: 0; }
.premium-cal-day.is-range-start { border-radius: 10px 0 0 10px; }
.premium-cal-day.is-range-end { border-radius: 0 10px 10px 0; }

.premium-time-cols {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}
.premium-time-col { flex: 1; text-align: center; }
.premium-time-col-label {
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 4px;
}
.premium-time-stepper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.premium-time-stepper button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 0;
    color: #94a3b8;
    border-radius: 6px;
}
.premium-time-stepper button:hover { background: #f1f5f9; color: #4338ca; }
.premium-time-stepper .premium-time-value {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    border-radius: 8px;
    padding: 4px 0;
    width: 100%;
}

.premium-picker-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.premium-picker-presets button {
    padding: 5px 10px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.premium-picker-presets button:hover {
    border-color: #c7d2fe;
    color: #4338ca;
    background: #eef2ff;
}
.premium-picker-presets button.is-active {
    color: #fff;
    border-color: transparent;
    background-image: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
}

.premium-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
}
.premium-picker-footer .premium-picker-summary {
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
}
.premium-picker-footer button.premium-picker-done {
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background-image: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    box-shadow: 0 6px 16px -6px rgba(79, 70, 229, 0.6);
}
.premium-picker-footer button.premium-picker-clear {
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

/* ===================================================================
   10) PUTARAN LANJUTAN (permintaan user - "buat supaya UI dan UX nya
   premium modern dan elegan"): penyempurnaan tambahan di atas fondasi yang
   sudah ada di atas - menyasar pola yang SAMA-SAMA sudah konsisten dipakai
   ratusan kali (kartu status/alert bg-*-50+border+rounded, badge pill,
   scrollbar, teks tautan, checkbox/radio, dan transisi halaman) supaya
   SEMUA halaman ikut naik kelas sekaligus, tanpa perlu disunting satu-satu.
   =================================================================== */

/* Scrollbar tipis & senada tema (Chromium/WebKit; browser lain fallback ke
   scrollbar bawaan - tidak masalah, murni kosmetik). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 2px solid #f8fafc;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: padding-box; }

/* Kartu alert/status (bg-emerald-50/rose-50/amber-50/sky-50 + border +
   rounded-xl/2xl) - dipakai ribuan kali utk pesan sukses/gagal/peringatan.
   Ditambah aksen bar tipis di kiri + bayangan sangat halus, konsisten dgn
   bahasa visual kartu premium di bagian 3) di atas. */
[class*="bg-emerald-50"][class*="border"][class*="rounded-"],
[class*="bg-rose-50"][class*="border"][class*="rounded-"],
[class*="bg-amber-50"][class*="border"][class*="rounded-"],
[class*="bg-sky-50"][class*="border"][class*="rounded-"],
[class*="bg-violet-50"][class*="border"][class*="rounded-"] {
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 4px 14px -8px rgba(15, 23, 42, 0.12) !important;
}

/* Badge/pill kecil (rounded-full dgn latar tint warna) - transisi halus
   saat status berubah/di-hover (banyak dipakai di daftar/tabel). */
.rounded-full {
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Checkbox & radio native - disamakan warnanya dgn aksen indigo aplikasi
   (accent-color didukung semua browser modern) supaya tidak lagi terasa
   "polos bawaan browser" di tengah form yang sudah premium. */
input[type="checkbox"]:not([class*="accent-"]),
input[type="radio"]:not([class*="accent-"]) {
    accent-color: #4338ca;
}

/* Tautan teks polos (bukan tombol) di dalam konten - underline muncul halus
   saat hover, bukan langsung dari awal, kesannya lebih tenang/elegan. */
main a.text-indigo-600:not(.premium-btn),
main a[class*="text-indigo-6"]:not(.premium-btn) {
    text-underline-offset: 3px;
    transition: color .15s ease;
}

/* Transisi masuk halus tiap kartu/konten utama saat halaman selesai dimuat
   - dipasang via premium-ui.js (menambah class .premium-fade-in ke elemen
   <main>) supaya terasa hidup tanpa mengubah satu pun markup di 350+ view. */
main.premium-fade-in {
    animation: premiumFadeIn .35s cubic-bezier(.16,1,.3,1) both;
}
@keyframes premiumFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    main.premium-fade-in { animation: none; }
}

/* Avatar/inisial bulat (dipakai di header profil & daftar pengguna) -
   cincin tipis + bayangan lembut supaya tidak terasa "datar". */
.rounded-full.premium-avatar,
[class*="rounded-full"][class*="bg-indigo-"] img,
img.rounded-full {
    box-shadow: 0 0 0 3px #fff, 0 2px 8px rgba(15, 23, 42, 0.12);
}

/* Focus-visible yang lebih jelas utk aksesibilitas keyboard, senada aksen
   indigo - tanpa mengubah tampilan saat diklik mouse (hanya saat navigasi
   Tab). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
    border-radius: 6px;
}

/* ===================================================================
   11) PUTARAN LANJUTAN #2 (permintaan user - 10 reel baru: "Multi Select",
   "Profile Upload", "Dashboard Header", "Split Button", "Dropdown",
   "Activity Feed", "Search", "Hamburger Menu", "Tree Navigation" [sudah
   ada sejak bagian 7], "Upcoming Meeting Card") - SAMA PERSIS pendekatan
   bagian 1-10 di atas: palet indigo/slate KHAS e-Couns (BUKAN gradasi
   ungu/biru reel-nya), dibangun sbg SISTEM DESAIN dulu di sini (bisa
   dipasang lewat class ".premium-xxx" eksplisit), rollout ke halaman
   nyata dilakukan BERTAHAP - lihat komponen mana yg SUDAH dipasang
   (header navbar & widget "Log Aktivitas Saya") vs yg BARU tersedia siap
   pakai utk halaman berikutnya (multi-select, upload, split button,
   custom dropdown, search) di catatan tiap sub-bagian di bawah.
   =================================================================== */

/* --- 11a) IKON TOMBOL PREMIUM (reel "Dashboard Header UI Upgrade") ---
   SUDAH dipasang di navbar atas (templates/header.php & header_siswa.php)
   - bell notifikasi, logout, hamburger, dst. Lingkaran icon-button dgn
   micro-interaction "terangkat" + latar warna lembut saat hover, mengganti
   kesan "datar" tombol ikon polos sebelumnya. */
.premium-icon-btn {
    position: relative;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease !important;
}
.premium-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px -8px rgba(79, 70, 229, 0.35);
}
.premium-icon-btn:active { transform: translateY(0); }

/* --- 11b) ACTIVITY FEED / TIMELINE PREMIUM (reel "Activity Feed UI
   Upgrade") - SUDAH dipasang di templates/widget_log_aktivitas_user.php
   (widget "Log Aktivitas Saya" yg tampil di semua dashboard). Garis
   penghubung vertikal + lingkaran ikon berwarna per baris, mengganti titik
   polos sebelumnya - kesan "linimasa", persis contoh reel. */
.premium-activity-feed { position: relative; }
.premium-activity-feed .premium-activity-item {
    position: relative;
    padding-left: 34px;
}
.premium-activity-feed .premium-activity-item::before {
    /* Garis penghubung vertikal - disambung dari ikon baris ini ke ikon
       baris berikutnya (disembunyikan di baris terakhir via :last-child). */
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: -8px;
    width: 2px;
    background: #eef2ff;
}
.premium-activity-feed .premium-activity-item:last-child::before { display: none; }
.premium-activity-feed .premium-activity-icon {
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: #fff;
    box-shadow: 0 4px 10px -3px rgba(79, 70, 229, 0.5);
    flex-shrink: 0;
}

/* --- 11c) MULTI SELECT & CUSTOM DROPDOWN PREMIUM (reel "Multi Select UI
   Upgrade" & "Dropdown UI Upgrade") - komponen BARU, TERSEDIA SIAP PAKAI
   utk halaman berikutnya (rollout bertahap - lihat public/assets/js/
   premium-ui.js: EcounsChoicePicker), belum dipasang otomatis di form
   manapun (opt-in lewat atribut data-premium-choice di <select>, SAMA
   pola "fail open" dgn date picker: <select> asli tetap ada di DOM, form
   tetap terkirim normal kalau JS gagal dimuat). */
.premium-choice-wrap { position: relative; }
.premium-choice-trigger {
    width: 100%;
    min-height: 46px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    cursor: pointer;
}
.premium-choice-trigger .premium-choice-placeholder {
    color: #94a3b8;
    font-weight: 500;
    font-size: 13px;
}
.premium-choice-trigger .premium-choice-caret {
    margin-left: auto;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform .15s ease;
}
.premium-choice-wrap.is-open .premium-choice-caret { transform: rotate(180deg); }
.premium-choice-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 6px 4px 10px;
    border-radius: 9999px;
    background-image: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}
.premium-choice-chip button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.25);
}
.premium-choice-chip button:hover { background: rgba(255,255,255,0.4); }
.premium-choice-panel {
    position: absolute;
    z-index: 60;
    margin-top: 6px;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.22);
    padding: 10px;
    max-height: 320px;
    display: flex;
    flex-direction: column;
}
.premium-choice-panel[hidden] { display: none !important; }
.premium-choice-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.premium-choice-search input {
    border: none;
    outline: none;
    flex: 1;
    font-size: 12.5px;
    background: transparent;
}
.premium-choice-list { overflow-y: auto; flex: 1; }
.premium-choice-group-label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #a5b4fc;
    padding: 8px 8px 4px;
}
.premium-choice-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: #334155;
}
.premium-choice-option:hover { background: #eef2ff; }
.premium-choice-option.is-selected { background: #eef2ff; color: #4338ca; }
.premium-choice-option .premium-choice-check {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 1.5px solid #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.premium-choice-option.is-selected .premium-choice-check {
    background-image: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    border-color: transparent;
}
.premium-choice-empty { padding: 18px 8px; text-align: center; font-size: 12px; color: #94a3b8; }
.premium-choice-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
    flex-shrink: 0;
}
.premium-choice-footer button.premium-choice-clear {
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 600;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.premium-choice-footer button.premium-choice-apply {
    padding: 7px 16px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 700;
    color: #fff;
    background-image: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    box-shadow: 0 6px 16px -6px rgba(79, 70, 229, 0.6);
}

/* --- 11d) UPLOAD PREMIUM (reel "Profile Upload UI Upgrade") - komponen
   BARU, TERSEDIA SIAP PAKAI (opt-in lewat atribut data-premium-upload di
   <input type="file">, pola fail-open sama spt di atas). Zona drag & drop
   + pratinjau file/gambar + info nama & ukuran, mengganti tampilan
   <input type="file"> bawaan browser yang polos. */
.premium-upload-zone {
    border: 2px dashed #c7d2fe;
    border-radius: 18px;
    background: #f8fafc;
    padding: 22px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.premium-upload-zone:hover,
.premium-upload-zone.is-dragover {
    border-color: #6366f1;
    background: #eef2ff;
}
.premium-upload-zone .premium-upload-icon {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background-image: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
    box-shadow: 0 8px 20px -8px rgba(79, 70, 229, 0.6);
}
.premium-upload-zone .premium-upload-title { font-size: 12.5px; font-weight: 700; color: #334155; }
.premium-upload-zone .premium-upload-hint { font-size: 10.5px; color: #94a3b8; margin-top: 3px; }
.premium-upload-preview {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    margin-top: 10px;
}
.premium-upload-preview[hidden] { display: none !important; }
.premium-upload-preview img.premium-upload-thumb {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(15,23,42,.12);
}
.premium-upload-preview .premium-upload-file-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #eef2ff;
    color: #4338ca;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.premium-upload-preview .premium-upload-meta { flex: 1; min-width: 0; }
.premium-upload-preview .premium-upload-name {
    font-size: 12px;
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.premium-upload-preview .premium-upload-size { font-size: 10.5px; color: #94a3b8; }
.premium-upload-preview button.premium-upload-remove {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.premium-upload-preview button.premium-upload-remove:hover { color: #e11d48; background: #fff1f2; border-color: #fecdd3; }

/* --- 11e) SPLIT BUTTON PREMIUM (reel "Split Button UI Upgrade") -
   komponen BARU, TERSEDIA SIAP PAKAI (auto-wired dari attribut
   data-premium-split di public/assets/js/premium-ui.js - tinggal bungkus
   tombol aksi utama + tombol panah + menu dgn markup di bawah). */
.premium-split-btn { position: relative; display: inline-flex; }
.premium-split-btn .premium-split-main {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.premium-split-btn .premium-split-toggle {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: 1px solid rgba(255,255,255,.25);
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    align-items: center;
}
.premium-split-menu {
    position: absolute;
    z-index: 60;
    top: 100%;
    right: 0;
    margin-top: 6px;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.22);
    padding: 6px;
}
.premium-split-menu[hidden] { display: none !important; }
.premium-split-menu a,
.premium-split-menu button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
}
.premium-split-menu a:hover,
.premium-split-menu button:hover { background: #eef2ff; color: #4338ca; }

/* --- 11f) SEARCH PREMIUM (reel "Search UI Upgrade") - class ringan yg
   bisa ditempel LANGSUNG ke input pencarian yang SUDAH ada di halaman
   manapun (tanpa JS wajib) utk kesan "premium" (ring fokus lebih tebal +
   tombol bersih "x"), TERSEDIA SIAP PAKAI kalau nanti suatu halaman perlu
   suggestion/riwayat pencarian juga (markup panelnya sama pola dgn
   premium-choice-panel di atas, tinggal dipasangkan). */
.premium-search-wrap { position: relative; }
.premium-search-wrap input[type="search"],
.premium-search-wrap input[type="text"].premium-search-input {
    padding-left: 38px !important;
}
.premium-search-wrap .premium-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}
.premium-search-wrap .premium-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    background: #f1f5f9;
}
.premium-search-wrap .premium-search-clear:hover { color: #475569; background: #e2e8f0; }

/* --- 11g) UPCOMING MEETING / JOB CARD PREMIUM (reel "Upcoming Meeting
   Card UI Upgrade") - komponen kartu BARU, TERSEDIA SIAP PAKAI utk
   halaman jadwal/agenda berikutnya (mis. Ekstrakurikuler, Konseling
   Online, Agenda BK) - belum dipasang otomatis di halaman manapun. */
.premium-meeting-card {
    display: grid;
    grid-template-columns: minmax(96px, 140px) 1fr;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 10px 28px -14px rgba(15,23,42,.14);
}
@media (max-width: 480px) {
    .premium-meeting-card { grid-template-columns: 1fr; }
}
.premium-meeting-card .premium-meeting-side {
    background-image: linear-gradient(160deg, #1e1b4b 0%, #4338ca 100%);
    color: #fff;
    padding: 16px 14px;
}
.premium-meeting-card .premium-meeting-side .premium-meeting-title {
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}
.premium-meeting-card .premium-meeting-dates { display: flex; flex-direction: column; gap: 4px; }
.premium-meeting-card .premium-meeting-date-btn {
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: rgba(255,255,255,.75);
}
.premium-meeting-card .premium-meeting-date-btn.is-active {
    background: rgba(255,255,255,.18);
    color: #fff;
}
.premium-meeting-card .premium-meeting-body { padding: 16px; }
.premium-meeting-card .premium-meeting-entry {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}
.premium-meeting-card .premium-meeting-entry .premium-meeting-time {
    font-size: 10px;
    font-weight: 700;
    color: #6366f1;
    width: 52px;
    flex-shrink: 0;
}
.premium-meeting-card .premium-meeting-entry .premium-meeting-name { font-size: 12.5px; font-weight: 700; color: #1e293b; }
.premium-meeting-card .premium-meeting-entry .premium-meeting-sub { font-size: 10.5px; color: #94a3b8; }
.premium-meeting-card .premium-meeting-join {
    margin-left: auto;
    flex-shrink: 0;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 10.5px;
    font-weight: 700;
    color: #fff;
    background-image: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
}

/* ===================================================================
   12) GUTTER KIRI HALAMAN DI MOBILE (laporan user, dgn tangkapan layar -
   judul halaman "mepet pembatas"): SELURUH halaman staf (254 file view)
   memakai pola SAMA PERSIS "<main class="md:pl-72 pr-6 ...">" - md:pl-72
   menggeser konten ke kanan utk memberi tempat sidebar TAPI HANYA aktif
   dari breakpoint md ke atas; di bawah md (mobile, sidebar disembunyikan
   jadi overlay) tidak ada pl-* sama sekali, jadi judul/isi halaman
   nempel PERSIS di tepi kiri layar - cuma pr-6 di kanan yg memberi jarak.
   Diperbaiki di SATU TEMPAT ini (bukan menyunting 254 file satu-satu -
   selain makan waktu, resikonya salah ketik lebih besar) dgn selector
   atribut supaya tidak perlu meng-escape ":" pada nama class Tailwind
   "md:pl-72", memberi gutter kiri SAMA besar (1.5rem) dgn pr-6 yg sudah
   ada di kanan, HANYA di bawah breakpoint md (768px) - begitu md:pl-72
   aktif di layar lebih lebar, aturan ini otomatis tidak berlaku lagi. */
@media (max-width: 767.98px) {
    main[class*="md:pl-72"] {
        padding-left: 1.5rem;
    }
}

/* ===================================================================
   13) SIDEBAR LEBIH RAPAT (permintaan user - "jarak antar menu semua
   peran lebih didekatkan"): padding vertikal tiap menu dikurangi
   (py-2.5 -> 0.4rem, py-2 -> 0.3rem) dan jarak antar grup/menu
   dirapatkan. Selector atribut dipakai supaya satu aturan ini berlaku
   untuk SEMUA peran tanpa menyunting ratusan baris sidebar.php /
   sidebar_siswa.php satu per satu.
   =================================================================== */
#sidebarMenuScroll a[class*="py-2.5"],
.premium-sidebar-siswa a[class*="py-2.5"] {
    padding-top: .4rem !important;
    padding-bottom: .4rem !important;
}
#sidebarMenuScroll a[class*=" py-2 "],
.premium-sidebar-siswa a[class*=" py-2 "] {
    padding-top: .3rem !important;
    padding-bottom: .3rem !important;
}
#sidebarMenuScroll > * + * {
    margin-top: .9rem !important;
}
#sidebarMenuScroll .sidebar-group > * + *,
#sidebarMenuScroll .space-y-0\.5 > * + * {
    margin-top: 1px !important;
}

/* ===================================================================
   12) CHIP IKON SIDEBAR (upgrade premium lanjutan - permintaan user
   "menu sidebar buat premium"): tiap ikon menu dibungkus "chip" kotak
   membulat ber-tint supaya seluruh grup terasa setara & premium (bukan
   ikon telanjang yang terkesan redup). Berlaku GLOBAL utk sidebar siswa
   (.premium-sidebar-siswa) & semua sidebar staf (#sidebarMenuScroll),
   jadi semua halaman kebagian tanpa menyunting markup satu per satu.
   Menyasar ikon lucide (ter-render jadi <svg>, atau <i data-lucide>
   sebelum JS jalan) sebagai anak pertama tiap <a> menu.
   =================================================================== */
.premium-sidebar-siswa a > svg:first-child,
.premium-sidebar-siswa a > i[data-lucide]:first-child,
#sidebarMenuScroll a > svg:first-child,
#sidebarMenuScroll a > i[data-lucide]:first-child {
    box-sizing: content-box !important;
    padding: 6px !important;
    border-radius: 9px !important;
    background: #f1f3fb !important;
    border: 1px solid #eceef7 !important;
    transition: background .15s ease, border-color .15s ease !important;
    flex-shrink: 0;
}
/* hover: chip menyala indigo lembut */
.premium-sidebar-siswa a:hover > svg:first-child,
.premium-sidebar-siswa a:hover > i[data-lucide]:first-child,
#sidebarMenuScroll a:hover > svg:first-child,
#sidebarMenuScroll a:hover > i[data-lucide]:first-child {
    background: #eef0ff !important;
    border-color: #dfe2fb !important;
}
/* item aktif (bg-indigo-600): chip jadi putih transparan agar kontras di atas latar indigo */
.premium-sidebar-siswa a.bg-indigo-600 > svg:first-child,
.premium-sidebar-siswa a.bg-indigo-600 > i[data-lucide]:first-child,
#sidebarMenuScroll a.bg-indigo-600 > svg:first-child,
#sidebarMenuScroll a.bg-indigo-600 > i[data-lucide]:first-child,
#sidebarMenuScroll a.bg-indigo-50 > svg:first-child,
#sidebarMenuScroll a.bg-indigo-50 > i[data-lucide]:first-child {
    background: rgba(255,255,255,.22) !important;
    border-color: rgba(255,255,255,.3) !important;
}
#sidebarMenuScroll a.bg-indigo-50 > svg:first-child,
#sidebarMenuScroll a.bg-indigo-50 > i[data-lucide]:first-child {
    background: #e0e7ff !important;
    border-color: #c7d2fe !important;
}

/* ===================================================================
   14) SIDEBAR & TOPBAR SISWA "PERSIS MOCKUP" (Dashboard_Siswa_Premium.html,
   permintaan user - "layout termasuk susunan menunya persis mockup").
   Desktop saja (>=768px) - tampilan HP (bottom sheet grid di
   mobile-nav.css) tidak disentuh. Sidebar jadi kartu mengambang 238px
   (radius 20px, jarak 16px dari tepi), item = chip ikon 28px + label
   12.5px semibold, label grup indigo uppercase, item aktif gradien
   indigo->violet. Topbar jadi kartu membulat sejajar sidebar.
   =================================================================== */
@media (min-width: 768px) {
    body:has(#sidebarSiswa) {
        background:
            radial-gradient(1200px 500px at 85% -10%, #eef0fe, transparent 60%),
            radial-gradient(900px 500px at 0% 0%, #faf6ff, transparent 55%),
            #f4f4fb !important;
    }
    #sidebarSiswa.premium-sidebar-siswa {
        top: 16px !important;
        left: 16px !important;
        bottom: 16px !important;
        height: auto !important;
        width: 238px !important;
        padding: 14px 12px !important;
        background: #fff !important;
        border: 1px solid #e8e8f2 !important;
        border-radius: 20px !important;
        box-shadow: 0 6px 24px -10px rgba(50,40,120,.2), 0 2px 6px -3px rgba(50,40,120,.09) !important;
        font-family: 'Figtree', 'Plus Jakarta Sans', system-ui, sans-serif;
    }
    #sidebarSiswa > .space-y-7 > * + * { margin-top: 0 !important; }
    #sidebarSiswa .sb-brand {
        padding: 4px 8px 14px !important;
        margin-bottom: 8px;
        border-bottom: 1px solid #f0f0f7;
    }
    #sidebarSiswa .sb-brand .sb-logo { width: 34px !important; height: 34px !important; border-radius: 11px; }
    #sidebarSiswa .sb-brand h1 {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        font-weight: 800 !important; font-size: 15px !important; letter-spacing: -.02em !important; line-height: 1.15 !important;
        color: #1a1a2e !important;
    }
    /* "Powered by e-Couns": jelas terbaca tapi tetap di bawah nama & logo sekolah. */
    #sidebarSiswa .sb-brand .sb-powered { font-size: 10px !important; font-weight: 600 !important; color: #64748b !important; margin-top: 3px !important; letter-spacing: .01em; }
    #sidebarSiswa .sb-brand .sb-powered span { color: #4f46e5 !important; font-weight: 700; }
    #sidebarSiswa .sb-nav > * + * { margin-top: 0 !important; }
    #sidebarSiswa .sb-grp {
        font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .1em !important;
        color: #4338ca !important; opacity: .75;
        padding: 10px 10px 3px !important; margin: 0 !important;
    }
    #sidebarSiswa .sb-nav a.sb-item {
        gap: 10px !important;
        padding: 5px 9px !important;
        border-radius: 11px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #1a1a2e !important;
        margin-bottom: 1px !important;
        box-shadow: none !important;
    }
    #sidebarSiswa .sb-nav a.sb-item::before { display: none !important; }
    #sidebarSiswa .sb-nav a.sb-item:hover { background: #f4f4fb !important; }
    #sidebarSiswa .sb-nav a.sb-item > svg:first-child,
    #sidebarSiswa .sb-nav a.sb-item > i[data-lucide]:first-child {
        box-sizing: border-box !important;
        width: 28px !important; height: 28px !important;
        padding: 6.5px !important;
        border-radius: 9px !important;
        background: #f4f4fb !important;
        border: 1px solid #f0f0f7 !important;
        color: #4a4a63 !important;
    }
    #sidebarSiswa .sb-nav a.sb-item:hover > svg:first-child {
        background: #eef0ff !important; border-color: #dcdaf9 !important; color: #4f46e5 !important;
    }
    #sidebarSiswa .sb-nav a.sb-item.bg-indigo-600 {
        background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px -10px #4f46e5 !important;
    }
    #sidebarSiswa .sb-nav a.sb-item.bg-indigo-600 > svg:first-child {
        background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.28) !important; color: #fff !important;
    }
    /* Titik/angka penanda di kanan item = pil merah kecil seperti mockup. */
    #sidebarSiswa .sb-nav a.sb-item > span.ml-auto:not(.hidden) { margin-left: auto !important; }
    #sidebarSiswa .sb-nav .sb-badge {
        font-size: 9.5px; font-weight: 700; background: #e11d48; color: #fff;
        padding: 1px 6px; border-radius: 999px; line-height: 1.5;
    }
    #sidebarSiswa .sb-nav a.sb-item.bg-indigo-600 .sb-badge { background: rgba(255,255,255,.25); }
    /* Sub-menu terlipat (Asesmen & Instrumen, Menu Lainnya). */
    #sidebarSiswa .sb-nav a.sb-sub { display: none !important; }
    #sidebarSiswa .sb-nav.sb-buka-asesmen a.sb-sub-asesmen,
    #sidebarSiswa .sb-nav.sb-buka-lainnya a.sb-sub-lainnya { display: flex !important; }
    #sidebarSiswa .sb-nav a.sb-sub { margin-left: 14px !important; font-size: 12px !important; font-weight: 500 !important; }
    #sidebarSiswa .sb-nav a.sb-sub > svg:first-child { width: 24px !important; height: 24px !important; padding: 5px !important; }
    #sidebarSiswa .sb-nav .sb-caret { margin-left: 4px; flex-shrink: 0; transition: transform .2s; }
    #sidebarSiswa .sb-nav a.sb-toggle > span.ml-auto + .sb-caret { margin-left: 4px; }
    #sidebarSiswa .sb-nav a.sb-toggle > span:nth-of-type(1) { flex: 1; }
    #sidebarSiswa .sb-nav.sb-buka-asesmen a.sb-toggle[onclick*="asesmen"] .sb-caret,
    #sidebarSiswa .sb-nav.sb-buka-lainnya a.sb-toggle[onclick*="lainnya"] .sb-caret { transform: rotate(180deg); }

    /* Kolom konten bergeser sesuai sidebar mengambang (16 + 238 + 16). */
    .ecouns-siswa-content-col { padding-left: 254px !important; }
    /* Topbar = kartu membulat (mockup .topbar). */
    header.ecouns-siswa-header {
        position: relative !important; /* mockup: topbar ikut tergulung, tidak sticky */
        top: auto !important;
        margin: 16px 16px 0 16px;
        height: auto !important;
        min-height: 60px;
        padding: 11px 15px !important;
        background: #fff !important;
        border: 1px solid #e8e8f2 !important;
        border-radius: 20px !important;
        box-shadow: 0 6px 24px -10px rgba(50,40,120,.2), 0 2px 6px -3px rgba(50,40,120,.09) !important;
    }
    header.ecouns-siswa-header .ecouns-topbar-judul { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: #1a1a2e; }
    header.ecouns-siswa-header .premium-icon-btn[id^="btn"] {
        width: 38px !important; height: 38px !important; border-radius: 12px !important;
        background: #f4f4fb !important; border: 1px solid #f0f0f7 !important; color: #4a4a63 !important;
    }
    header.ecouns-siswa-header .premium-avatar {
        width: 38px !important; height: 38px !important; border-radius: 11px !important;
        background: linear-gradient(135deg, #c7d2fe, #ddd6fe) !important; color: #4338ca !important;
        font-weight: 700 !important; font-size: 13px !important; border: 0 !important;
    }
}
/* HP: tombol lipat tidak dipakai - semua sub-menu tampil biasa di grid. */
@media (max-width: 767.98px) {
    #sidebarSiswa .sb-toggle { display: none !important; }
}

/* Topbar siswa desktop: urutan ala mockup - ikon (lonceng, pengumuman,
   website, ganti password, keluar) lalu avatar + nama di ujung kanan.
   Website & Keluar jadi tombol ikon 38px. */
@media (min-width: 768px) {
    header.ecouns-siswa-header > div:last-child > div:last-child > .text-right { order: 9; text-align: left !important; }
    header.ecouns-siswa-header > div:last-child > div:last-child > .premium-avatar { order: 8; }
    header.ecouns-siswa-header > div:last-child > div:last-child > .text-right p { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700 !important; font-size: 13px !important; color: #1a1a2e !important; }
    header.ecouns-siswa-header > div:last-child > div:last-child > .text-right span { font-size: 11px !important; color: #0ea36b !important; }
    header.ecouns-siswa-header a.premium-icon-btn[href$="/web"],
    header.ecouns-siswa-header a.premium-icon-btn[href$="/logout_siswa"],
    header.ecouns-siswa-header a.premium-icon-btn[href$="/buatPasswordBaru"] {
        width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 12px !important;
        background: #f4f4fb !important; border: 1px solid #f0f0f7 !important; color: #4a4a63 !important; box-shadow: none !important;
    }
    header.ecouns-siswa-header a.premium-icon-btn[href$="/logout_siswa"] { color: #e11d48 !important; }
    header.ecouns-siswa-header a.premium-icon-btn[href$="/web"] > span,
    header.ecouns-siswa-header a.premium-icon-btn[href$="/logout_siswa"] > span { display: none !important; }
    header.ecouns-siswa-header a.premium-icon-btn[href$="/web"] > svg,
    header.ecouns-siswa-header a.premium-icon-btn[href$="/web"] > i { margin: 0 !important; }
    header.ecouns-siswa-header a.premium-icon-btn[href$="/logout_siswa"] > svg,
    header.ecouns-siswa-header a.premium-icon-btn[href$="/logout_siswa"] > i { display: block !important; }
    header.ecouns-siswa-header a.premium-icon-btn:hover { color: #4f46e5 !important; border-color: #4f46e5 !important; }
    header.ecouns-siswa-header > div:last-child > .hidden.sm\:block { display: none !important; }
}

/* ===================================================================
   15) TEMA PREMIUM AKUN STAF (admin, pimpinan, guru, guru BK, dst) -
   disamakan dgn sidebar & topbar siswa (bagian 14, mockup
   Dashboard_Siswa_Premium.html). Desktop saja (>=768px); drawer HP &
   bottom nav staf tidak disentuh. Markup menu per peran TIDAK diubah -
   murni lapisan CSS di atas #sidebarUtama, navbar atas, & offset konten
   (".md:pl-72" / ".md:ml-64" yg dipakai ratusan view staf).
   =================================================================== */
@media (min-width: 768px) {
    body:has(#sidebarUtama) {
        background:
            radial-gradient(1200px 500px at 85% -10%, #eef0fe, transparent 60%),
            radial-gradient(900px 500px at 0% 0%, #faf6ff, transparent 55%),
            #f4f4fb !important;
        background-attachment: fixed !important;
    }
    /* Sidebar = kartu mengambang 238px. */
    #sidebarUtama.premium-sidebar {
        top: 16px !important;
        left: 16px !important;
        bottom: 16px !important;
        height: auto !important;
        width: 238px;
        padding-top: 14px !important;
        background: #fff !important;
        border: 1px solid #e8e8f2 !important;
        border-radius: 20px !important;
        box-shadow: 0 6px 24px -10px rgba(50,40,120,.2), 0 2px 6px -3px rgba(50,40,120,.09) !important;
        font-family: 'Figtree', 'Plus Jakarta Sans', system-ui, sans-serif;
        z-index: 55 !important; /* di atas navbar fixed (z-50) */
    }
    html.sidebar-collapsed #sidebarUtama.premium-sidebar { width: 5.5rem !important; }
    #sidebarUtama .sb-staf-brand {
        padding: 4px 18px 14px; margin: 0 12px 8px; padding-left: 8px; padding-right: 8px;
        border-bottom: 1px solid #f0f0f7;
    }
    #sidebarUtama .sb-staf-logo { width: 34px; height: 34px; border-radius: 11px; }
    #sidebarUtama .sb-staf-teks b {
        display: block; font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
        font-weight: 800; font-size: 15px; letter-spacing: -.02em; line-height: 1.15; color: #1a1a2e;
    }
    #sidebarUtama .sb-staf-teks small { display: block; font-size: 10px; color: #64748b; margin-top: 3px; font-weight: 600; letter-spacing: .01em; }
    #sidebarUtama .sb-staf-teks small span { color: #4f46e5; font-weight: 700; }
    html.sidebar-collapsed #sidebarUtama .sb-staf-brand { justify-content: center; margin: 0 8px 8px; }
    #sidebarUtama #sidebarMenuScroll { padding-left: 12px !important; padding-right: 12px !important; }
    /* Tombol kecilkan/besarkan menu: ditaruh sejajar brand. */
    #sidebarUtama > button[onclick="toggleSidebarDesktop()"] { top: 22px !important; }

    /* Judul grup: indigo uppercase kecil (mockup .grp). */
    #sidebarMenuScroll p.sidebar-label,
    #sidebarMenuScroll > p.uppercase,
    #sidebarMenuScroll > div > p.uppercase,
    #sidebarMenuScroll .sidebar-group-header,
    #sidebarMenuScroll .sidebar-group-header span,
    #sidebarMenuScroll .sidebar-group-header p {
        font-size: 9.5px !important; font-weight: 700 !important; letter-spacing: .1em !important;
        text-transform: uppercase !important; color: #4338ca !important;
    }
    #sidebarMenuScroll > p.uppercase, #sidebarMenuScroll > div > p.uppercase { opacity: .75; padding: 10px 10px 3px !important; margin-top: 6px !important; margin-bottom: 0 !important; }
    #sidebarMenuScroll p.sidebar-label { opacity: .75; padding: 10px 10px 3px !important; margin: 0 !important; }
    #sidebarMenuScroll .sidebar-group-header {
        background: transparent !important; border: 0 !important; box-shadow: none !important;
        padding: 10px 10px 3px !important; margin: 0 !important; opacity: .85; cursor: pointer;
    }
    /* DIPERTEGAS (permintaan user - "tulisan grup menu lebih kecil dan warnanya
       kurang keras, harusnya untuk membedakan lebih terlihat"): judul grup lebih
       besar, tebal, warna penuh (tanpa opacity) + garis tipis penanda awal grup. */
    #sidebarMenuScroll p.sidebar-label,
    #sidebarMenuScroll > p.uppercase,
    #sidebarMenuScroll > div > p.uppercase,
    #sidebarMenuScroll .sidebar-group-header,
    #sidebarMenuScroll .sidebar-group-header span,
    #sidebarMenuScroll .sidebar-group-header p {
        font-size: 11px !important; font-weight: 800 !important; letter-spacing: .08em !important;
        color: #312e81 !important; opacity: 1 !important; line-height: 1.2 !important;
    }
    #sidebarMenuScroll p.sidebar-label,
    #sidebarMenuScroll > p.uppercase,
    #sidebarMenuScroll > div > p.uppercase,
    #sidebarMenuScroll .sidebar-group-header { padding: 14px 8px 6px !important; }
    #sidebarMenuScroll p.sidebar-label,
    #sidebarMenuScroll > p.uppercase,
    #sidebarMenuScroll > div > p.uppercase { display: flex !important; align-items: center; gap: 8px; }
    #sidebarMenuScroll p.sidebar-label::after,
    #sidebarMenuScroll > p.uppercase::after,
    #sidebarMenuScroll > div > p.uppercase::after { content: ""; flex: 1; height: 1px; background: #e4e4f2; }
    /* Label di dalam header grup lipat: padding sudah dipegang header-nya. */
    #sidebarMenuScroll .sidebar-group-header p.sidebar-label { padding: 0 !important; }
    /* Sub-judul DI DALAM grup (mis. "Data Siswa", "Presensi" di grup BK) -
       satu tingkat di bawah judul grup: lebih kecil, indigo sedang, tanpa garis. */
    #sidebarMenuScroll .sidebar-group > p.uppercase:not(.sidebar-label) {
        display: block !important; font-size: 10px !important; font-weight: 700 !important;
        color: #6366f1 !important; letter-spacing: .06em !important; padding: 8px 8px 2px !important;
    }
    #sidebarMenuScroll .sidebar-group > p.uppercase:not(.sidebar-label)::after { content: none; }
    html.sidebar-collapsed #sidebarMenuScroll p.uppercase::after { content: none; }
    #sidebarMenuScroll .sidebar-group-header > svg:first-child,
    #sidebarMenuScroll .sidebar-group-header > i[data-lucide]:first-child { display: none !important; }
    #sidebarMenuScroll .sidebar-group-header svg { width: 12px !important; height: 12px !important; color: #4338ca !important; }

    /* Item menu: chip 26px + label 12.5px semibold (mockup .item).
       DIRAPATKAN (permintaan user - "jarak antar menu terlalu jauh"): dulu
       chip 28px + padding 5px (tinggi item 38px), sekarang 32px. */
    #sidebarMenuScroll a.flex.items-center.gap-3 {
        gap: 10px !important;
        padding: 3px 8px !important;
        border-radius: 11px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        color: #1a1a2e !important;
        margin: 0 0 1px 0 !important;
        border-left: 0 !important;
        box-shadow: none !important;
    }
    .premium-sidebar .sidebar-group:not(.collapsed) > a.sidebar-menu-item { margin-left: 0 !important; padding-left: 9px !important; }
    /* Sub-menu (dulu pl-9): menjorok halus + chip lebih kecil. */
    #sidebarMenuScroll a.flex.items-center.gap-3[class*="pl-9"] { margin-left: 12px !important; font-size: 12px !important; font-weight: 500 !important; }
    #sidebarMenuScroll a.flex.items-center.gap-3[class*="pl-9"] > svg:first-child { width: 22px !important; height: 22px !important; padding: 4.5px !important; }
    #sidebarMenuScroll a.flex.items-center.gap-3::before { display: none !important; }
    #sidebarMenuScroll a.flex.items-center.gap-3:hover { background: #f4f4fb !important; }
    #sidebarMenuScroll a.flex.items-center.gap-3 > svg:first-child,
    #sidebarMenuScroll a.flex.items-center.gap-3 > i[data-lucide]:first-child {
        box-sizing: border-box !important;
        width: 26px !important; height: 26px !important; padding: 6px !important;
        border-radius: 8px !important;
        background: #f4f4fb !important; border: 1px solid #f0f0f7 !important; color: #4a4a63 !important;
    }
    #sidebarMenuScroll a.flex.items-center.gap-3:hover > svg:first-child {
        background: #eef0ff !important; border-color: #dcdaf9 !important; color: #4f46e5 !important;
    }
    /* Item aktif: gradien indigo -> violet, teks putih. */
    #sidebarMenuScroll a.flex.items-center.gap-3.bg-indigo-50,
    #sidebarMenuScroll a.flex.items-center.gap-3.bg-indigo-600 {
        background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px -10px #4f46e5 !important;
    }
    #sidebarMenuScroll a.flex.items-center.gap-3.bg-indigo-50 *,
    #sidebarMenuScroll a.flex.items-center.gap-3.bg-indigo-600 * { color: #fff !important; }
    #sidebarMenuScroll a.flex.items-center.gap-3.bg-indigo-50 > svg:first-child,
    #sidebarMenuScroll a.flex.items-center.gap-3.bg-indigo-600 > svg:first-child {
        background: rgba(255,255,255,.22) !important; border-color: rgba(255,255,255,.28) !important;
    }
    html.sidebar-collapsed #sidebarMenuScroll a.flex.items-center.gap-3 { justify-content: center !important; }

    /* Navbar atas = kartu membulat di kanan sidebar (mockup .topbar). */
    body:has(#sidebarUtama) > nav.glass-header {
        top: 16px !important;
        left: 270px !important;
        right: 16px !important;
        padding: 11px 15px !important;
        background: #fff !important;
        border: 1px solid #e8e8f2 !important;
        border-radius: 20px !important;
        box-shadow: 0 6px 24px -10px rgba(50,40,120,.2), 0 2px 6px -3px rgba(50,40,120,.09) !important;
        backdrop-filter: none !important;
    }
    html.sidebar-collapsed body:has(#sidebarUtama) > nav.glass-header { left: 120px !important; }
    body:has(#sidebarUtama) > nav.glass-header > div { max-width: none !important; }
    body:has(#sidebarUtama) .ecouns-staf-navbar-logo { display: none !important; }
    body:has(#sidebarUtama) .ecouns-staf-topbar-judul {
        display: block !important; margin: 0;
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; font-size: 14px; color: #1a1a2e;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    body:has(#sidebarUtama) > nav.glass-header .premium-icon-btn {
        width: 38px !important; height: 38px !important; padding: 0 !important; border-radius: 12px !important;
        background: #f4f4fb !important; border: 1px solid #f0f0f7 !important; color: #4a4a63 !important; box-shadow: none !important;
        display: inline-flex !important; align-items: center; justify-content: center;
    }
    body:has(#sidebarUtama) > nav.glass-header .premium-icon-btn.md\:hidden { display: none !important; }
    body:has(#sidebarUtama) > nav.glass-header .premium-icon-btn:hover { color: #4f46e5 !important; border-color: #4f46e5 !important; }
    body:has(#sidebarUtama) > nav.glass-header a.premium-icon-btn[href$="/auth/logout"] { color: #e11d48 !important; }
    body:has(#sidebarUtama) > nav.glass-header .premium-avatar {
        width: 38px !important; height: 38px !important; border-radius: 11px !important;
        background: linear-gradient(135deg, #c7d2fe, #ddd6fe) !important; color: #4338ca !important;
        font-weight: 700 !important; font-size: 13px !important;
    }
    body:has(#sidebarUtama) > nav.glass-header .premium-avatar + div p:first-child {
        font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700 !important; font-size: 13px !important; color: #1a1a2e !important;
    }
    /* Urutan ala mockup: tombol ikon dulu, avatar + nama di ujung kanan. */
    body:has(#sidebarUtama) > nav.glass-header .flex.items-center.gap-2.shrink-0 > .w-px { order: 9; }
    body:has(#sidebarUtama) > nav.glass-header .flex.items-center.gap-2.shrink-0 > .md\:flex { order: 10; }
    /* Jarak konten ke topbar = 16px (topbar 16 + ~62 tinggi). */
    body:has(#sidebarUtama) .pt-28 { padding-top: 94px !important; }
    /* Sholat di hero dashboard -> pil di navbar tidak perlu dobel. */
    body:has(.js-sholat-hero) > nav.glass-header .js-sholat-pill { display: none !important; }

    /* Offset konten mengikuti sidebar mengambang (16 + 238 + 16). */
    body:has(#sidebarUtama) .md\:pl-72 { padding-left: 270px !important; }
    body:has(#sidebarUtama) .md\:ml-64 { margin-left: 254px !important; }
    html.sidebar-collapsed body:has(#sidebarUtama) .md\:pl-72 { padding-left: 120px !important; }
    html.sidebar-collapsed body:has(#sidebarUtama) .md\:ml-64 { margin-left: 104px !important; }
}