/*!
 * Marketplace Gratis — lapisan merek, kontras & tata letak untuk tampilan warisan pusatseller (dasbor app-v2/app, superadmin, akun).
 * TAHAP 3 (25 Okt 2026): palet LOGO PEMILIK (biru-sian -> biru tua -> ungu -> magenta -> oranye -> kuning). Warna solid untuk teks/tombol =
 * biru-ungu tua (--brand-600 #2f1be0, teks putih 8,9:1); gradasi logo HANYA dekorasi/latar. Warna brand-* Tailwind memakai CSS var
 * (--brand-*) dari .env BRAND_CSS_ROOT. Dimuat SESUDAH bundel Tailwind + gaya inline layout.
 */

/* ── Warna merek pada komponen dasbor ── */
.sk-btn-primary { background: rgb(var(--brand-600, 47 27 224)) !important; box-shadow: 0 1px 3px rgb(var(--brand-600, 47 27 224) / .3) !important; }
.sk-btn-primary:hover { background: rgb(var(--brand-700, 37 19 180)) !important; }
.sk-bottom-tab.active { color: rgb(var(--brand-600, 47 27 224)) !important; }
.sk-bottom-tab.active::before { background: rgb(var(--brand-600, 47 27 224)) !important; }
.sk-bottom-tab:active { background: rgb(var(--brand-600, 47 27 224) / .08) !important; }
.dark .sk-bottom-tab.active { color: rgb(var(--brand-300, 169 155 255)) !important; }
.dark .sk-bottom-tab.active::before { background: rgb(var(--brand-300, 169 155 255)) !important; }
.sk-input:focus { border-color: rgb(var(--brand-500, 79 55 242)) !important; box-shadow: 0 0 0 3px rgb(var(--brand-500, 79 55 242) / .18) !important; }
.sk-header-icon-btn:focus-visible { outline-color: rgb(var(--brand-500, 79 55 242)) !important; }
.sk-swipe-indicator { background: rgb(var(--brand-500, 79 55 242) / .35) !important; }
.sk-card:hover { border-color: rgb(var(--brand-500, 79 55 242) / .25) !important; }
.breadcrumb a:hover { color: rgb(var(--brand-600, 47 27 224)) !important; }

/* ── Sidebar: biru-ungu sangat tua senada logo (teks menu terang, kontras > 7:1) ── */
#sk-sidebar {
  background:
    radial-gradient(1100px 420px at 0% -10%, rgba(41, 21, 220, .32) 0%, transparent 55%),
    radial-gradient(700px 380px at 120% 45%, rgba(246, 23, 160, .12) 0%, transparent 52%),
    radial-gradient(600px 300px at -20% 105%, rgba(3, 215, 252, .10) 0%, transparent 55%),
    linear-gradient(180deg, #0b0828 0%, #100c35 48%, #0b1220 100%) !important;
}
#sk-sidebar .nav-item { color: #c3cbe0; }
#sk-sidebar .nav-item.active { background: linear-gradient(90deg, rgba(125, 104, 251, .30) 0%, rgba(125, 104, 251, .08) 100%) !important; color: #ece8ff !important; box-shadow: inset 3px 0 0 #a99bff !important; }
#sk-sidebar .nav-item:focus-visible { outline-color: #c9c1ff !important; }
#sk-sidebar .nav-group-head, #sk-sidebar .nav-group-head span, #sk-sidebar .nav-section-title { color: #aab4cc !important; }
#sk-sidebar img[src*="favicon"] { background: transparent !important; box-shadow: none !important; object-fit: contain; }

/* Laci sidebar PONSEL selalu penuh (ikon + label) — status "diciutkan" desktop (localStorage sk_sidebar) tidak berlaku < 1024 px. */
@media (max-width: 767.98px) {
  #sk-sidebar.collapsed { width: var(--sidebar-w) !important; }
  #sk-sidebar.collapsed .nav-label { opacity: 1 !important; width: auto !important; overflow: visible !important; }
  #sk-sidebar.collapsed .nav-section-title { opacity: 1 !important; height: auto !important; overflow: visible !important; }
  #sk-sidebar.collapsed .nav-item { justify-content: flex-start !important; padding: 10px 14px !important; margin: 2px 10px !important; }
  #sk-sidebar.collapsed .nav-cari { display: block !important; }
  #sk-sidebar .nav-tooltip { display: none !important; }
}

/* ── Kelas indigo/ungu Tailwind yang tertulis langsung di view -> warna merek (ungu logo) ── */
.text-indigo-500, .text-indigo-600, .text-indigo-700, .text-violet-600, .text-purple-600 { color: rgb(var(--brand-600, 47 27 224)) !important; }
.dark .dark\:text-indigo-300, .dark .dark\:text-indigo-400, .dark .dark\:text-violet-400 { color: rgb(var(--brand-300, 169 155 255)) !important; }
.bg-indigo-500, .bg-indigo-600 { background-color: rgb(var(--brand-600, 47 27 224)) !important; }
.hover\:bg-indigo-700:hover, .hover\:bg-indigo-600:hover { background-color: rgb(var(--brand-700, 37 19 180)) !important; }
.bg-indigo-50 { background-color: rgb(var(--brand-50, 240 238 255)) !important; }
.border-indigo-500, .border-indigo-600, .focus\:border-indigo-500:focus { border-color: rgb(var(--brand-500, 79 55 242)) !important; }
.ring-indigo-500, .focus\:ring-indigo-500:focus { --tw-ring-color: rgb(var(--brand-500, 79 55 242) / .45) !important; }
/* Gradasi indigo/ungu bawaan view = sudah senada logo -> TIDAK ditimpa (TAHAP 2 menimpanya jadi hijau tua sehingga spanduk terang
   ber-teks gelap seperti "Pusat Panduan" tak terbaca). Gradasi gelap tetap memakai teks putih bawaan view. */

/* Spanduk sambutan dasbor (dashboard.blade.php .welcome-banner): biru tua -> ungu -> magenta tua + teks putih >= 4,5:1 */
.dashboard-shell { --grad-1: #160b6e !important; --grad-2: #2f1be0 !important; --grad-3: #8a0f86 !important; }
.welcome-banner::before { background: radial-gradient(circle at 18% 40%, rgba(3, 215, 252, .14) 0%, transparent 46%), radial-gradient(circle at 85% 15%, rgba(251, 130, 55, .14) 0%, transparent 40%) !important; }
.welcome-banner .text-white\/60, .welcome-banner .text-white\/70, .welcome-banner .text-white\/80 { color: rgba(255, 255, 255, .92) !important; }
.welcome-banner .bg-emerald-500 { background-color: rgba(255, 255, 255, .18) !important; color: #ffffff !important; }
html:not(.dark) [style*="color:#10b981"], html:not(.dark) [style*="color: #10b981"] { color: #047857 !important; }
html:not(.dark) [style*="color:#6366f1"], html:not(.dark) [style*="color: #6366f1"] { color: #3b2bd0 !important; }
/* Mode gelap: teks merek/indigo tanpa varian dark: -> ungu terang */
.dark .text-brand-500, .dark .text-brand-600, .dark .text-brand-700, .dark .text-indigo-500, .dark .text-indigo-600, .dark .text-indigo-700, .dark .text-violet-600, .dark .text-purple-600 { color: rgb(var(--brand-300, 169 155 255)) !important; }
.dark .trend.trend-up { color: #6ee7b7 !important; }
.dark .trend.trend-down { color: #fca5a5 !important; }
.dark .bg-red-100, .dark .bg-rose-100 { background-color: rgba(239, 68, 68, .22) !important; }
.dark .bg-amber-100, .dark .bg-yellow-100, .dark .bg-orange-100 { background-color: rgba(245, 158, 11, .22) !important; }
.dark .bg-emerald-100, .dark .bg-green-100, .dark .bg-teal-100 { background-color: rgba(16, 185, 129, .22) !important; }
.dark .bg-blue-100, .dark .bg-sky-100, .dark .bg-indigo-100, .dark .bg-violet-100, .dark .bg-purple-100, .dark .bg-brand-100 { background-color: rgba(125, 104, 251, .22) !important; }
.dark .text-emerald-800, .dark .text-green-800, .dark .text-blue-700, .dark .text-blue-800, .dark .text-sky-700, .dark .text-violet-700, .dark .text-purple-700, .dark .text-indigo-800 { color: #dcd6ff !important; }

/* Tampilan MG TAHAP 1/3 (mg/domain, mg/admin, meter dasbor): tombol & saringan memakai warna merek */
.mga-btn.hijau { background: rgb(var(--brand-600, 47 27 224)) !important; color: #fff !important; }
.mga-saring a.aktif, .dark .mga-saring a.aktif { background: rgb(var(--brand-600, 47 27 224)) !important; color: #ffffff !important; border-color: rgb(var(--brand-600, 47 27 224)) !important; }
.mg-sub a { color: rgb(var(--brand-600, 47 27 224)) !important; }
.dark .mg-sub, .dark .mgd-angka span, .dark .mgd-tingkat span { color: #b6c0d2 !important; }
.dark .mg-sub a { color: rgb(var(--brand-300, 169 155 255)) !important; }
.dark .mgd-redup, .dark .mga-redup { color: #b6c0d2 !important; }
.dark .mgd-kartu a, .dark .mga-kartu a, .dark p.mgd-redup a { color: rgb(var(--brand-300, 169 155 255)) !important; }
.dark .mga-saring a { color: #cbd5e1 !important; }
[class*="shadow-indigo-"] { --tw-shadow-color: rgb(var(--brand-600, 47 27 224) / .25) !important; }

/* ── Kontras: mode TERANG. Teks abu muda dinaikkan HANYA di atas permukaan terang (sidebar, spanduk & latar gelap dikecualikan). ── */
html:not(.dark) :where(.text-slate-400, .text-gray-400, .text-slate-300, .text-gray-300):not(#sk-sidebar *):not(:where(.bg-slate-900, .bg-slate-800, .bg-gray-900, .bg-gray-800, .bg-black, .welcome-banner, .mg-gelap, [class*="from-slate-9"], [class*="from-slate-8"], [class*="from-indigo-6"], [class*="from-indigo-7"], [class*="from-indigo-8"], [class*="from-indigo-9"], [class*="from-violet-6"], [class*="from-purple-6"], [class*="from-brand-6"], [class*="from-brand-7"], [class*="from-brand-8"], [class*="from-brand-9"], .bg-brand-600, .bg-brand-700, .bg-indigo-600) *) { color: #5b6476 !important; }
html:not(.dark) :where(.text-slate-500, .text-gray-500):not(#sk-sidebar *):not(:where(.bg-slate-900, .bg-slate-800, .bg-gray-900, .bg-gray-800, .bg-black, .welcome-banner, .mg-gelap, [class*="from-slate-9"], [class*="from-slate-8"], [class*="from-indigo-6"], [class*="from-indigo-7"], [class*="from-brand-6"], [class*="from-brand-7"], .bg-brand-600, .bg-brand-700, .bg-indigo-600) *) { color: #545d70 !important; }
html:not(.dark) .text-red-600 { color: #b91c1c !important; }
#sk-sidebar .text-slate-400, #sk-sidebar .text-slate-500, #sk-sidebar .text-slate-600, #sk-sidebar .text-gray-400, #sk-sidebar .text-gray-500 { color: #b0b9cc !important; }
html:not(.dark) .text-emerald-500, html:not(.dark) .text-emerald-600, html:not(.dark) .text-green-500, html:not(.dark) .text-green-600 { color: #047857 !important; }
html:not(.dark) .text-amber-500, html:not(.dark) .text-amber-600, html:not(.dark) .text-yellow-600 { color: #b45309 !important; }
html:not(.dark) .text-red-400, html:not(.dark) .text-red-500 { color: #b91c1c !important; }
html:not(.dark) .text-sky-500, html:not(.dark) .text-blue-500, html:not(.dark) .text-cyan-600 { color: #0369a1 !important; }
html:not(.dark) .text-pink-500, html:not(.dark) .text-fuchsia-500, html:not(.dark) .text-rose-500 { color: #be185d !important; }
html:not(.dark) .text-purple-500, html:not(.dark) .text-violet-500 { color: #6d28d9 !important; }
html:not(.dark) .breadcrumb a { color: #475569 !important; }
html:not(.dark) .breadcrumb span { color: #5b6476 !important; }
html:not(.dark) .breadcrumb .current { color: #0f172a !important; }
html:not(.dark) .sk-bottom-tab { color: #475569 !important; }
html:not(.dark) .sk-table th { color: #475569 !important; }
html:not(.dark) .dash-stat .label, html:not(.dark) .dash-stat .sub { color: #5b6476 !important; }
html:not(.dark) .trend.trend-up { color: #065f46 !important; }
html:not(.dark) .trend.trend-down { color: #991b1b !important; }
html:not(.dark) .sk-header-icon-btn { color: #475569 !important; }
html:not(.dark) ::placeholder { color: #6b7280; opacity: 1; }

/* ── Kontras: mode GELAP — permukaan terang & teks gelap tanpa varian dark: (view pusatseller lama) diselaraskan ── */
.dark .bg-white:not(.mg-akun *) { background-color: #121a30 !important; }
.dark .bg-slate-50, .dark .bg-gray-50 { background-color: #17213a !important; }
.dark .bg-slate-100, .dark .bg-gray-100 { background-color: #1d2946 !important; }
.dark .bg-red-50, .dark .bg-rose-50 { background-color: rgba(239, 68, 68, .14) !important; }
.dark .bg-amber-50, .dark .bg-yellow-50, .dark .bg-orange-50 { background-color: rgba(245, 158, 11, .14) !important; }
.dark .bg-emerald-50, .dark .bg-green-50, .dark .bg-teal-50 { background-color: rgba(16, 185, 129, .14) !important; }
.dark .bg-blue-50, .dark .bg-sky-50, .dark .bg-indigo-50, .dark .bg-violet-50, .dark .bg-purple-50, .dark .bg-brand-50 { background-color: rgba(125, 104, 251, .14) !important; }
.dark .border-slate-100, .dark .border-slate-200, .dark .border-gray-100, .dark .border-gray-200, .dark .border-indigo-100, .dark .border-indigo-200 { border-color: rgba(148, 163, 184, .2) !important; }
.dark .text-slate-700, .dark .text-slate-800, .dark .text-slate-900, .dark .text-gray-700, .dark .text-gray-800, .dark .text-gray-900 { color: #e2e8f0 !important; }
.dark .text-slate-600, .dark .text-gray-600 { color: #cbd5e1 !important; }
.dark .text-red-600, .dark .text-red-700, .dark .text-red-800 { color: #fca5a5 !important; }
.dark .text-emerald-600, .dark .text-emerald-700, .dark .text-green-600, .dark .text-green-700 { color: #6ee7b7 !important; }
.dark .text-amber-600, .dark .text-amber-700, .dark .text-amber-800, .dark .text-amber-900 { color: #fcd34d !important; }
.dark .text-slate-500, .dark .text-gray-500, .dark .dark\:text-slate-500, .dark .dark\:text-gray-500 { color: #a9b4c7 !important; }
.dark .text-slate-400, .dark .text-gray-400 { color: #a9b4c7 !important; }
.dark .dark\:text-slate-600, .dark .dark\:text-gray-600 { color: #9aa6ba !important; }
.dark .breadcrumb a { color: #b2bdcd !important; }
.dark .breadcrumb span { color: #9aa6ba !important; }
.dark .sk-bottom-tab { color: #b2bdcd !important; }
.dark .sk-table th { color: #b2bdcd !important; }
.dark ::placeholder { color: #94a3b8; opacity: 1; }

/* ── Kaki dasbor (layouts/partials/footer — kelas mg-kaki-panel) ── */
.mg-kaki-panel, html:not(.dark) div.mg-kaki-panel, html:not(.dark) div.mg-kaki-panel span { font-size: 12.5px !important; color: #475569 !important; }
.mg-kaki-panel a { color: #334155 !important; text-decoration: underline; text-underline-offset: 2px; }
.mg-kaki-panel a:hover { color: rgb(var(--brand-600, 47 27 224)) !important; }
.dark .mg-kaki-panel, .dark div.mg-kaki-panel span { color: #b2bdcd !important; }
.dark .mg-kaki-panel a { color: #d7deea !important; }

/* ═════════════ Tata letak responsif dasbor (TAHAP 3): akar luber di ponsel ═════════════
   (1) anak grid/flex boleh menyusut (min-width:auto bawaan = isi terpanjang mendorong kartu keluar wadah);
   (2) isian/pemilih tidak pernah lebih lebar dari wadahnya; (3) teks panjang (surel, URL, nomor resi) dipatah. */
.sk-main-area, .sk-main-area *, .sk-main-area *::before, .sk-main-area *::after { box-sizing: border-box; }
.sk-main-area :where(.grid, [class*="grid-cols-"]) > * { min-width: 0; }
.sk-main-area :where(.flex, .inline-flex) > :where(div, form, label, section, article, header, footer, p, ul, ol, fieldset, dl, nav, details, main):not([class*="shrink-0"]):not([class*="flex-none"]):not([class^="w-"]):not([class*=" w-"]) { min-width: 0; }
.sk-main-area :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { max-width: 100%; min-width: 0; }
.sk-main-area select { text-overflow: ellipsis; }
.sk-main-area :where(img, video, canvas, iframe, embed, object) { max-width: 100%; }
.sk-main-area :where(p, li, dd, dt, h1, h2, h3, h4, h5, label, td, th, a, strong, small, code, span) { overflow-wrap: break-word; }
.sk-main-area pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.sk-main-area .mg-gulir-tabel { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
  /* f4 (25 Okt ±22.35): kotak MELAYANG (dropdown/popover/tooltip/menu aksi: absolute/fixed) TIDAK dibatasi lebar pembungkusnya —
     dulu menu akun & panel lonceng header (rounded-2xl, pembungkus selebar tombol) terjepit ±50 px, teks turun per huruf. */
  .sk-main-area :where(.card, .sk-card, [class*="rounded-2xl"], [class*="rounded-3xl"]):not(.absolute):not(.fixed):not(.sk-user-dropdown):not([role="menu"]):not([role="dialog"]):not([role="tooltip"]):not([role="listbox"]) { max-width: 100%; }
  .sk-main-area :where(table) { font-size: 13px; }
}

/* ── Isian ponsel: minimal 16px supaya iOS tidak memperbesar halaman saat fokus ── */
@media (max-width: 767.98px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea { font-size: 16px !important; }
}

/* ═════════════ Layout akun MG (mg.layouts.akun: masuk, daftar, lupa sandi) ═════════════ */
.mg-akun [hidden] { display: none !important; }
.mg-akun { background: #ffffff; color: #0b1220; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
html.dark .mg-akun { background: #0b1220; color: #eef2f7; }
.mg-akun * { font-family: inherit; }
.mg-akun-tata { min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .mg-akun-tata { grid-template-columns: minmax(380px, 44%) minmax(0, 1fr); } }
.mg-akun-panel { display: none; position: relative; overflow: hidden; color: #eeeaff; padding: 48px clamp(32px, 4vw, 64px);
  background: radial-gradient(640px 380px at 0% 0%, rgba(3, 215, 252, .16), transparent 60%), radial-gradient(620px 380px at 100% 100%, rgba(246, 23, 160, .22), transparent 60%),
    linear-gradient(150deg, #0b0828 0%, #1c0f8a 52%, #3a0d78 100%); }
.mg-akun-panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: linear-gradient(90deg, #03d7fc, #106efb, #2915dc, #a114f4, #f617a0, #fb8237, #fce145); }
@media (min-width: 1024px) { .mg-akun-panel { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; } }
.mg-akun-merek { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: #fff !important; text-decoration: none; letter-spacing: -.02em; }
.mg-akun-merek img { width: 38px; height: 38px; object-fit: contain; }
.mg-akun-merek b { color: #ffc2ea; }
.mg-akun-panel h2 { color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.12; letter-spacing: -.03em; font-weight: 800; margin: 0 0 14px; }
.mg-akun-panel p { color: #e4deff; margin: 0; font-size: 16px; line-height: 1.6; }
.mg-akun-poin { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.mg-akun-poin li { display: flex; gap: 12px; align-items: flex-start; color: #f3f0ff; font-weight: 600; font-size: 15.5px; line-height: 1.45; }
.mg-akun-poin li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px; background: rgba(255, 255, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 13px no-repeat; }
.mg-akun-panel small { color: #d9d2ff; font-size: 13.5px; }
.mg-akun-utama { display: flex; flex-direction: column; min-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
.mg-akun-kepala { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.mg-akun-kepala .mg-akun-merek { color: #0b1220 !important; font-size: 16px; }
.mg-akun-kepala .mg-akun-merek b { color: #2f1be0; }
html.dark .mg-akun-kepala .mg-akun-merek { color: #fff !important; }
html.dark .mg-akun-kepala .mg-akun-merek b { color: #a99bff; }
@media (min-width: 1024px) { .mg-akun-kepala .mg-akun-merek { visibility: hidden; } }
.mg-akun-aksi { display: flex; align-items: center; gap: 6px; }
.mg-akun-aksi a, .mg-akun-tema { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 12px; border-radius: 12px; color: #334155; font-weight: 600; font-size: 14.5px; text-decoration: none; background: transparent; border: 1px solid #e2e1ee; cursor: pointer; }
html.dark .mg-akun-aksi a, html.dark .mg-akun-tema { color: #cbd5e1; border-color: rgba(148, 163, 184, .25); }
.mg-akun-tema svg { width: 20px; height: 20px; }
.mg-akun-tema .mg-matahari { display: none; }
html.dark .mg-akun-tema .mg-bulan { display: none; }
html.dark .mg-akun-tema .mg-matahari { display: block; }
.mg-akun-isi { flex: 1; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 440px; margin: 0 auto; padding: 28px 0; }
.mg-akun-kaki { text-align: center; font-size: 13px; color: #475569; margin: 12px 0 0; }
html.dark .mg-akun-kaki { color: #b2bdcd; }

/* Kelas yang dulu didefinisikan layouts.auth-marketing (dipakai view login/daftar pusatseller) — versi MG */
.auth-input { width: 100%; max-width: 100%; background: #fff; border: 1.5px solid #c9c6dc; border-radius: 12px; padding: 0.75rem 1rem; font-size: 16px; color: #0b1220; outline: none; transition: border-color .2s, box-shadow .2s; }
.auth-input:focus { border-color: #2f1be0; box-shadow: 0 0 0 4px rgba(79, 55, 242, .2); background: #fff; }
.auth-input::placeholder { color: #64748b; }
.dark .auth-input { background: #121a30; border-color: rgba(148, 163, 184, .32); color: #eef2f7; }
.dark .auth-input:focus { border-color: #a99bff; box-shadow: 0 0 0 4px rgba(169, 155, 255, .22); background: #121a30; }
.dark .auth-input::placeholder { color: #94a3b8; }
.auth-checkbox { width: 1.1rem; height: 1.1rem; border-radius: .375rem; accent-color: #2f1be0; cursor: pointer; }
.dark .auth-checkbox { accent-color: #a99bff; }
.glass { background: #fff; border: 1px solid #e2e1ee; box-shadow: 0 10px 30px -12px rgba(15, 23, 42, .18); }
.dark .glass { background: #121a30; border-color: rgba(148, 163, 184, .18); box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .6); }
.theme-toggle { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid #e2e1ee; color: #334155; background: transparent; }
.dark .theme-toggle { border-color: rgba(148, 163, 184, .25); color: #cbd5e1; }

/* Komponen formulir akun MG (lupa / atur ulang sandi) */
.mg-judul { font-size: clamp(1.6rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.15; margin: 0 0 10px; color: inherit; }
.mg-lead { color: #475569; margin: 0 0 24px; font-size: 15.5px; line-height: 1.6; }
html.dark .mg-lead { color: #bcc6d6; }
.mg-isian { margin-bottom: 16px; }
.mg-isian label { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.mg-isian input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1.5px solid #c9c6dc; background: #fff; color: #0b1220; font-size: 16px; line-height: 1.4; }
.mg-isian input:focus { outline: none; border-color: #2f1be0; box-shadow: 0 0 0 4px rgba(79, 55, 242, .2); }
html.dark .mg-isian input { background: #121a30; color: #eef2f7; border-color: rgba(148, 163, 184, .35); }
.mg-isian .mg-bantu { font-size: 13.5px; color: #475569; margin-top: 6px; }
html.dark .mg-isian .mg-bantu { color: #b2bdcd; }
.mg-isian .mg-galat { font-size: 14px; color: #b91c1c; margin-top: 6px; font-weight: 600; }
html.dark .mg-isian .mg-galat { color: #fca5a5; }
.mg-tombol { display: inline-flex; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 12px 20px; border: 0; border-radius: 14px; background: #2f1be0; color: #fff; font-weight: 800; font-size: 16px; cursor: pointer; text-decoration: none; }
.mg-tombol:hover { background: #2513b4; color: #fff; }
html.dark .mg-tombol { background: #4f37f2; color: #ffffff; }
html.dark .mg-tombol:hover { background: #2f1be0; }
.mg-pesan { border-radius: 14px; padding: 13px 16px; margin-bottom: 18px; font-weight: 600; font-size: 15px; line-height: 1.5; }
.mg-pesan--ok { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.mg-pesan--galat { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
html.dark .mg-pesan--ok { background: rgba(16, 185, 129, .12); color: #a7f3d0; border-color: rgba(16, 185, 129, .3); }
html.dark .mg-pesan--galat { background: rgba(239, 68, 68, .12); color: #fecaca; border-color: rgba(239, 68, 68, .3); }
.mg-taut { color: #2f1be0; font-weight: 700; }
html.dark .mg-taut { color: #c9c1ff; }
.mg-pemisah { border-top: 1px solid #e2e1ee; margin-top: 26px; padding-top: 20px; text-align: center; font-size: 15px; color: #475569; }
html.dark .mg-pemisah { border-color: rgba(148, 163, 184, .2); color: #bcc6d6; }

/* ═════════════ Kontras tambahan hasil SAPU 168 rute x 8 lebar x 2 tema (TAHAP 3) ═════════════ */
/* terang */
html:not(.dark) .text-rose-500, html:not(.dark) .text-rose-600 { color: #be123c !important; }
html:not(.dark) .text-orange-500, html:not(.dark) .text-orange-600 { color: #c2410c !important; }
html:not(.dark) .text-teal-500, html:not(.dark) .text-teal-600 { color: #0f766e !important; }
html:not(.dark) .text-indigo-400, html:not(.dark) .text-violet-400, html:not(.dark) .text-purple-400 { color: #5b3fd6 !important; }
/* gelap: teks berwarna tanpa varian dark: -> versi terang */
.dark .text-red-400, .dark .text-red-500 { color: #fca5a5 !important; }
.dark .text-blue-500, .dark .text-blue-600, .dark .text-blue-700, .dark .text-sky-600 { color: #93c5fd !important; }
.dark .text-teal-600, .dark .text-teal-700, .dark .text-cyan-700 { color: #5eead4 !important; }
.dark .text-rose-500, .dark .text-rose-600, .dark .text-rose-700, .dark .text-pink-600 { color: #fda4af !important; }
.dark .text-orange-500, .dark .text-orange-600, .dark .text-orange-700 { color: #fdba74 !important; }
.dark .text-yellow-600, .dark .text-yellow-700, .dark .text-amber-500 { color: #fde047 !important; }
.dark .text-emerald-900, .dark .text-green-900, .dark .text-emerald-500 { color: #a7f3d0 !important; }
.dark .text-violet-500, .dark .text-purple-500, .dark .text-indigo-400 { color: #c4b5fd !important; }
.dark .lbl { color: #cbd5e1 !important; }
/* gelap: permukaan terang ber-opasitas (bg-slate-50/80 dst.) & abu terang tanpa varian dark: */
.dark :is([class~="bg-slate-50/50"], [class~="bg-slate-50/60"], [class~="bg-slate-50/70"], [class~="bg-slate-50/80"], [class~="bg-slate-50/90"], [class~="bg-gray-50/50"], [class~="bg-gray-50/80"],
  [class~="bg-slate-100/50"], [class~="bg-slate-100/60"], [class~="bg-slate-100/70"], [class~="bg-slate-100/80"], [class~="bg-white/60"], [class~="bg-white/70"], [class~="bg-white/80"], [class~="bg-white/90"], [class~="bg-white/95"]):not([class*="dark:bg-"]) { background-color: #17213a !important; }
.dark .bg-slate-200:not([class*="dark:bg-"]), .dark .bg-gray-200:not([class*="dark:bg-"]) { background-color: #2a3654 !important; }
.dark :is([class~="bg-emerald-200/60"], [class~="bg-emerald-200"], [class~="bg-green-200"]):not([class*="dark:bg-"]) { background-color: rgba(16, 185, 129, .26) !important; }
.dark :is(.bg-rose-50, .bg-pink-50, .bg-fuchsia-50):not([class*="dark:bg-"]) { background-color: rgba(244, 63, 94, .14) !important; }
.dark :is(.bg-teal-50, .bg-cyan-50, .bg-lime-50):not([class*="dark:bg-"]) { background-color: rgba(20, 184, 166, .14) !important; }
/* POS (kasir layar sentuh): aksen ungu logo, teks redup >= 4,5:1 */
.pos-shell { --pos-accent: #4f37f2 !important; --pos-accent-2: #8a12e6 !important; }
body:not(.dark) .pos-shell { --pos-accent: #2f1be0 !important; --pos-accent-2: #7a12d8 !important; --pos-text-dim: #545d70 !important; }
html.dark body .pos-shell { --pos-text-dim: #a9b4c7 !important; }

/* ═════════════ Luber anak wadah tambahan (sapu ponsel) ═════════════ */
.sk-main-area :where(.mga, .mg3, .mgd, .mga-aksi, .stat-card, .dash-stats) > * { min-width: 0; }
/* (f2) span/a anak flex boleh menyusut KECUALI yang memang tidak boleh terpotong: whitespace-nowrap (tab, label), anak wadah gulir
   overflow-x-auto (deret tab /pesanan-online harus digulir, bukan diperas sampai teksnya keluar), tombol, lencana bulat. */
.sk-main-area :where(.flex, .inline-flex):not([class*="overflow-x-"]):not([class*="overflow-auto"]) > :where(span, a):not([class*="shrink-0"]):not([class*="flex-none"]):not([class^="w-"]):not([class*=" w-"]):not([class*="rounded-full"]):not([class*="whitespace-nowrap"]):not([class*="sk-btn"]) { min-width: 0; }
.sk-main-area code { overflow-wrap: anywhere; }
@media (max-width: 639.98px) {
  .sk-main-area .flex:not(.flex-col):not(.flex-nowrap):has(> .sk-btn, > button, > a[class*="sk-btn"], > form > button) { flex-wrap: wrap; }
}

/* ═════════════ Sisa sapu (TAHAP 3 f2): 168 rute x 8 lebar x 2 tema ═════════════ */
/* (1) Gradien indigo->ungu bawaan PS yang tertulis SEBARIS (avatar inisial di kepala & sidebar, daftar pengguna, kepala modal):
       teks putih di #8b5cf6 hanya 4,23:1 -> gradien logo biru-ungu tua -> ungu (putih >= 5,3:1 di setiap titik). */
:is([style*="#6366f1, #8b5cf6"], [style*="#6366f1,#8b5cf6"], [style*="#4f46e5,#6366f1"], [style*="#4f46e5, #6366f1"]) { background: linear-gradient(135deg, #2f1be0, #a114f4) !important; }
/* kartu saldo /wallet: gradien lebih gelap (tombol bg-white/20 6:1) + teks putih redup dinaikkan */
[style*="#4f46e5 0%, #7c3aed 100%"] { background: linear-gradient(135deg, #2f1be0 0%, #4a12c0 100%) !important; }
.sk-main-area :is(.text-white\/50, .text-white\/60, .text-white\/65, .text-white\/70, .text-white\/75, .text-white\/80) { color: rgba(255, 255, 255, .92) !important; }

/* (2) Warna teks SEBARIS (style="color:#...") pada angka statistik & ikon: terang -> tingkat 700, gelap -> tingkat 300. */
html:not(.dark) :is([style^="color:#f59e0b" i], [style^="color: #f59e0b" i], [style*=";color:#f59e0b" i], [style*="; color: #f59e0b" i]) { color: #b45309 !important; }
html:not(.dark) :is([style^="color:#8b5cf6" i], [style^="color: #8b5cf6" i], [style*=";color:#8b5cf6" i], [style*="; color: #8b5cf6" i]) { color: #6d28d9 !important; }
html:not(.dark) :is([style^="color:#0ea5e9" i], [style^="color: #0ea5e9" i], [style*=";color:#0ea5e9" i], [style*="; color: #0ea5e9" i]) { color: #0369a1 !important; }
html:not(.dark) :is([style^="color:#ef4444" i], [style^="color: #ef4444" i], [style*=";color:#ef4444" i], [style*="; color: #ef4444" i]) { color: #b91c1c !important; }
.dark :is([style^="color:#10b981" i], [style^="color: #10b981" i], [style*=";color:#10b981" i], [style*="; color: #10b981" i]) { color: #6ee7b7 !important; }
.dark :is([style^="color:#f59e0b" i], [style^="color: #f59e0b" i], [style*=";color:#f59e0b" i], [style*="; color: #f59e0b" i]) { color: #fcd34d !important; }
.dark :is([style^="color:#8b5cf6" i], [style^="color: #8b5cf6" i], [style*=";color:#8b5cf6" i], [style*="; color: #8b5cf6" i]) { color: #c4b5fd !important; }
.dark :is([style^="color:#6366f1" i], [style^="color: #6366f1" i], [style*=";color:#6366f1" i], [style*="; color: #6366f1" i],
  [style^="color:#4f46e5" i], [style^="color: #4f46e5" i]) { color: #a5b4fc !important; }
.dark :is([style^="color:#0ea5e9" i], [style^="color: #0ea5e9" i], [style*=";color:#0ea5e9" i], [style*="; color: #0ea5e9" i]) { color: #7dd3fc !important; }
.dark :is([style^="color:#ef4444" i], [style^="color: #ef4444" i], [style*=";color:#ef4444" i], [style*="; color: #ef4444" i]) { color: #fca5a5 !important; }

/* (3) Mode gelap: spanduk/kartu ber-gradien TERANG (from-*-50/100; varian dark:from-* banyak yang tidak terkompilasi) dan latar tipis
       ber-opasitas (bg-*-50/NN) -> permukaan gelap bertint, supaya teks terang mode gelap >= 4,5:1. Pencocokan TOKEN (~=), bukan
       potongan teks, agar gradien pekat (from-indigo-500 dst.) tidak ikut tertimpa. */
.dark :is([class~="from-indigo-50"], [class~="from-violet-50"], [class~="from-purple-50"], [class~="from-blue-50"], [class~="from-sky-50"], [class~="from-brand-50"],
  [class~="from-indigo-100"], [class~="from-violet-100"], [class~="from-purple-100"], [class~="from-blue-100"]) { background-image: none !important; background-color: rgba(125, 104, 251, .13) !important; }
.dark :is([class~="from-teal-50"], [class~="from-cyan-50"], [class~="from-emerald-50"], [class~="from-green-50"], [class~="from-lime-50"], [class~="from-teal-100"], [class~="from-emerald-100"]) { background-image: none !important; background-color: rgba(20, 184, 166, .13) !important; }
.dark :is([class~="from-amber-50"], [class~="from-yellow-50"], [class~="from-orange-50"], [class~="from-amber-100"], [class~="from-orange-100"]) { background-image: none !important; background-color: rgba(245, 158, 11, .13) !important; }
.dark :is([class~="from-rose-50"], [class~="from-pink-50"], [class~="from-red-50"], [class~="from-fuchsia-50"], [class~="from-rose-100"]) { background-image: none !important; background-color: rgba(244, 63, 94, .13) !important; }
.dark :is([class~="from-slate-50"], [class~="from-gray-50"], [class~="from-slate-100"]) { background-image: none !important; background-color: #17213a !important; }
.dark :is([class~="bg-indigo-50/30"], [class~="bg-indigo-50/40"], [class~="bg-indigo-50/50"], [class~="bg-indigo-50/60"], [class~="bg-indigo-50/70"], [class~="bg-indigo-50/80"],
  [class~="bg-violet-50/50"], [class~="bg-violet-50/60"], [class~="bg-purple-50/50"], [class~="bg-blue-50/50"], [class~="bg-blue-50/60"], [class~="bg-sky-50/50"], [class~="bg-brand-50/50"]) { background-color: rgba(125, 104, 251, .12) !important; }
.dark :is([class~="bg-emerald-50/30"], [class~="bg-emerald-50/40"], [class~="bg-emerald-50/50"], [class~="bg-emerald-50/60"], [class~="bg-emerald-50/70"], [class~="bg-emerald-50/80"],
  [class~="bg-green-50/50"], [class~="bg-teal-50/50"], [class~="bg-teal-50/60"], [class~="bg-cyan-50/50"]) { background-color: rgba(16, 185, 129, .12) !important; }
.dark :is([class~="bg-amber-50/50"], [class~="bg-amber-50/60"], [class~="bg-amber-50/70"], [class~="bg-amber-50/80"], [class~="bg-yellow-50/50"], [class~="bg-orange-50/50"]) { background-color: rgba(245, 158, 11, .12) !important; }
.dark :is([class~="bg-rose-50/50"], [class~="bg-rose-50/60"], [class~="bg-red-50/50"], [class~="bg-red-50/60"], [class~="bg-pink-50/50"]) { background-color: rgba(244, 63, 94, .12) !important; }
/* lencana muda (bg-*-100) di mode gelap -> tint gelap; teksnya ikut diterangkan di (4) */
.dark :is(.bg-emerald-100, .bg-green-100, .bg-teal-100, .bg-cyan-100):not([class*="dark:bg-"]) { background-color: rgba(16, 185, 129, .2) !important; }
.dark :is(.bg-amber-100, .bg-yellow-100, .bg-orange-100):not([class*="dark:bg-"]) { background-color: rgba(245, 158, 11, .2) !important; }
.dark :is(.bg-rose-100, .bg-red-100, .bg-pink-100):not([class*="dark:bg-"]) { background-color: rgba(244, 63, 94, .2) !important; }
.dark :is(.bg-indigo-100, .bg-violet-100, .bg-purple-100, .bg-blue-100, .bg-sky-100, .bg-brand-100):not([class*="dark:bg-"]) { background-color: rgba(125, 104, 251, .22) !important; }

/* (4) Mode gelap: teks berwarna PEKAT (700-900) yang ditulis tanpa varian dark: -> tingkat terang yang setara. */
.dark :is(.text-indigo-800, .text-indigo-900, .text-violet-700, .text-violet-800, .text-violet-900, .text-purple-700, .text-purple-800, .text-purple-900,
  .text-brand-700, .text-brand-800, .text-brand-900, .text-blue-800, .text-blue-900, .text-sky-800) { color: #d4ceff !important; }
.dark :is(.text-emerald-600, .text-emerald-700, .text-emerald-800, .text-green-600, .text-green-700, .text-green-800, .text-teal-800, .text-teal-900) { color: #a7f3d0 !important; }
.dark :is(.text-amber-600, .text-amber-700, .text-amber-800, .text-amber-900, .text-yellow-800, .text-orange-800, .text-orange-900) { color: #fde68a !important; }
.dark :is(.text-rose-800, .text-rose-900, .text-red-600, .text-red-700, .text-red-800, .text-red-900, .text-pink-700, .text-pink-800) { color: #fecdd3 !important; }
.dark .text-indigo-500, .dark .text-indigo-600, .dark .text-indigo-700, .dark .text-violet-600, .dark .text-purple-600 { color: rgb(var(--brand-300, 169 155 255)) !important; }

/* (5) Terang: warna teks -500 Tailwind yang < 4,5:1 di putih */
html:not(.dark) :is(.text-amber-500, .text-yellow-500, .text-yellow-600) { color: #b45309 !important; }
html:not(.dark) :is(.text-violet-500, .text-purple-500) { color: #6d28d9 !important; }
html:not(.dark) :is(.text-emerald-500, .text-green-500) { color: #047857 !important; }
html:not(.dark) .text-sky-500 { color: #0369a1 !important; }

/* (6) Judul seksi sidebar (mis. "Super Admin" text-indigo-500/80) di sidebar gelap: satu warna terang >= 7:1 */
#sk-sidebar .nav-section-title p { color: #b8c0d9 !important; }

/* (7) .sk-input (gaya sebaris layout: width:100%, dimuat SESUDAH app.css) mengalahkan kelas lebar Tailwind -> pemilih "w-auto" melebar
       100% dan kotak cari di sebelahnya terjepit 0 px (/customers /orders /products di >= 640 px). Kelas lebar dipulihkan. */
.sk-input.w-auto { width: auto; }
.sk-input.w-20 { width: 5rem; }
.sk-input.w-24 { width: 6rem; }
.sk-input.w-28 { width: 7rem; }
.sk-input.w-32 { width: 8rem; }
.sk-input.w-36 { width: 9rem; }
.sk-input.w-40 { width: 10rem; }
.sk-input.w-44 { width: 11rem; }
.sk-input.w-48 { width: 12rem; }
.sk-input.w-56 { width: 14rem; }
.sk-input.w-64 { width: 16rem; }
@media (min-width: 640px) {
  .sk-input.sm\:w-auto { width: auto; }
  .sk-input.sm\:w-48 { width: 12rem; }
  .sk-input.sm\:w-56 { width: 14rem; }
  .sk-input.sm\:w-64 { width: 16rem; }
  .sk-input.sm\:w-72 { width: 18rem; }
}
.sk-main-area label > select.sk-input:is(.ml-1, .ml-2) { width: auto; }

/* (8) Kisi perancang struk `minmax(0,1fr) 380px` (sebaris): di < 1024 px kolom pratinjau 380 px memeras kolom susunan jadi 0 -> ditumpuk. */
@media (max-width: 1023.98px) {
  .sk-main-area .grid[style*="minmax(0,1fr) 380px"], .sk-main-area .grid[style*="minmax(0, 1fr) 380px"] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* (9) Paginasi Laravel (tailwind): ringkasan + nomor halaman boleh turun baris di layar sedang */
.sk-main-area nav[role="navigation"] > div { flex-wrap: wrap; gap: .5rem; }
.sk-main-area nav[role="navigation"] span.relative.z-0.inline-flex { flex-wrap: wrap; }

/* (f3) Mode gelap: varian ber-opasitas teks pekat (mis. text-indigo-800/90 di kartu info /wallet/operational) -> tingkat terang. */
.dark :is([class*="text-indigo-700/"], [class*="text-indigo-800/"], [class*="text-indigo-900/"], [class*="text-violet-800/"], [class*="text-violet-900/"],
  [class*="text-purple-800/"], [class*="text-purple-900/"], [class*="text-brand-700/"], [class*="text-brand-800/"], [class*="text-brand-900/"], [class*="text-blue-800/"], [class*="text-blue-900/"]) { color: #d4ceff !important; }
.dark :is([class*="text-emerald-700/"], [class*="text-emerald-800/"], [class*="text-emerald-900/"], [class*="text-green-800/"], [class*="text-teal-800/"]) { color: #a7f3d0 !important; }
.dark :is([class*="text-amber-700/"], [class*="text-amber-800/"], [class*="text-amber-900/"], [class*="text-yellow-800/"], [class*="text-orange-800/"]) { color: #fde68a !important; }
.dark :is([class*="text-rose-700/"], [class*="text-rose-800/"], [class*="text-rose-900/"], [class*="text-red-700/"], [class*="text-red-800/"], [class*="text-red-900/"]) { color: #fecdd3 !important; }

/* ═════════════ f4 (25 Okt 2026 ±22.35): dropdown header (menu akun + panel lonceng) — keluhan pemilik "gepeng" di Android 412 px ═════════════
   1) Lebar EKSPLISIT: kelas arbitrer w-[min(21rem,calc(100vw-1.5rem))] milik panel lonceng TIDAK ada di bundel Tailwind (lebar jatuh ke auto
      = ikut sempit pembungkus). 2) Ponsel & tablet kecil (< 768 px): pembungkus dijadikan static sehingga panel berjangkar ke tepi kanan HEADER
      (bukan ke tombol) — tidak pernah terpotong di 360 px. 3) Teks di dalam panel tidak dipecah per huruf. */
#sk-header .sk-user-dropdown { width: min(19rem, calc(100vw - 1.5rem)); max-width: calc(100vw - 1.5rem); min-width: min(16.25rem, calc(100vw - 1.5rem)); }
#sk-header .sk-user-dropdown[class*="21rem"] { width: min(21rem, calc(100vw - 1.5rem)); }
#sk-header .sk-user-dropdown :where(p, span, a, button) { overflow-wrap: normal; word-break: normal; }
#sk-header .sk-user-dropdown :where(p, span) { overflow-wrap: anywhere; }
@media (max-width: 767.98px) {
  #sk-header :has(> .sk-user-dropdown) { position: static !important; }
  #sk-header .sk-header-bar { position: relative; }
  #sk-header .sk-user-dropdown { left: auto !important; right: .75rem !important; top: 100% !important; margin-top: .375rem; max-height: calc(100vh - 5.5rem); max-height: calc(100dvh - 5.5rem); overflow-y: auto; }
}

/* ═════════════ f5 (25 Okt 2026 ±22.55): sisa uji KEADAAN TERBUKA ═════════════
   1) Panel menu akun & lonceng OPAK: kelas bg-white/95 & backdrop-blur-xl tidak ada di bundel -> latar tembus pandang, isi halaman terbaca di
      balik panel. 2) TABLET 768–1023: rel ringkas sidebar (fixed, 68 px) dulu MENUTUPI tepi kiri isi halaman -> area utama digeser selebar rel. */
#sk-header .sk-user-dropdown { background: #fff !important; box-shadow: 0 20px 44px -12px rgba(15, 23, 42, .30), 0 2px 6px rgba(15, 23, 42, .06) !important; }
.dark #sk-header .sk-user-dropdown { background: #1e293b !important; border-color: rgba(148, 163, 184, .24) !important; box-shadow: 0 20px 44px -12px rgba(0, 0, 0, .6) !important; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .sk-main-area { padding-left: var(--sidebar-w-collapsed, 68px); }
}
/* f5b: laci ponsel & rel tablet setinggi layar — `inset-y: 0` di layout BUKAN properti CSS (nama utilitas Tailwind), jadi dulu diabaikan
   dan rel/laci hanya setinggi isinya. */
@media (max-width: 1023.98px) {
  #sk-sidebar { top: 0 !important; bottom: 0 !important; height: 100vh; height: 100dvh; max-height: none; }
}
/* f6: layout LAMA layouts.app (view superadmin/google-drive & nonaktif) — di tablet saat rel dibuka, judul kelompok menu kehilangan padding
   (`padding: initial` = 0 di CSS layout) -> "UTAMA", "PENGIRIMAN" menempel tepi kiri laci. Kembalikan padding px-4 pt-4 pb-1. Layout v2 tidak
   memakai .nav-section-title. */
@media (min-width: 768px) and (max-width: 1023.98px) {
  #sk-sidebar.expanded .nav-section-title { padding: 1rem 1rem .25rem !important; }
}
/* f7 (26 Okt 2026, laporan pemilik): DESKTOP >= 1024 px — sidebar MENEMPEL setinggi layar. Dulu `position: relative` (layout) + kelas
   max-h-dvh: sidebar hanya setinggi satu layar di PUNCAK halaman dan ikut tergulung, jadi di halaman panjang bagian bawahnya kosong putih.
   Kini sticky top 0 + tinggi 100dvh (menu tetap bisa digulir di dalamnya). Ponsel (< 768) & tablet (768–1023) memakai `fixed` — tidak disentuh. */
@media (min-width: 1024px) {
  #sk-sidebar { position: sticky; top: 0; align-self: flex-start; height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; }
}