html.dark-mode {
    color-scheme: dark;
    --background: 0 0% 9%;
    --foreground: 210 40% 96%;
    --card: 0 0% 12%;
    --card-foreground: 210 40% 96%;
    --border: 0 0% 24%;
    --muted-foreground: 215 20% 65%;
    --accent: 0 0% 18%;
    --accent-foreground: 210 40% 96%;
    --ring: 213 94% 68%;
    --ink: #e2e8f0;
    --ink-2: #cbd5e1;
    --ink-soft: #94a3b8;
    --paper: #171717;
    --paper-alt: #262626;
    --line: #3a3a3a;
    --line-strong: #525252;
}

html.dark-mode body {
    background-color: #171717 !important;
    background-image: none !important;
    /* Reset Tailwind gradient custom properties so light-mode gradient doesn't bleed through */
    --tw-gradient-from: transparent !important;
    --tw-gradient-via: transparent !important;
    --tw-gradient-to: transparent !important;
    --tw-gradient-stops: transparent !important;
    color: #e2e8f0 !important;
}

html.dark-mode .bg-theme-light {
    background-color: #202020 !important;
}

/* Arbitrary Tailwind page surfaces used by assessment/report screens. */
html.dark-mode [class~="bg-[#F8FAFC]"] {
    background-color: #171717 !important;
}

html.dark-mode :is(
    [class~="bg-white"],
    [class~="bg-gray-50"],
    [class~="bg-slate-50"],
    [class~="bg-sky-50"],
    [class~="bg-blue-50"],
    [class~="bg-indigo-50"],
    [class~="bg-emerald-50"],
    [class~="bg-green-50"],
    [class~="bg-amber-50"],
    [class~="bg-yellow-50"],
    [class~="bg-orange-50"],
    [class~="bg-red-50"],
    [class~="bg-rose-50"],
    [class~="bg-purple-50"],
    [class~="bg-pink-50"],
    [class~="bg-teal-50"],
    [class~="bg-cyan-50"],
    [class~="bg-gray-100"],
    [class~="bg-slate-100"],
    [class~="bg-sky-100"],
    [class~="bg-blue-100"],
    [class~="bg-indigo-100"],
    [class~="bg-emerald-100"],
    [class~="bg-green-100"],
    [class~="bg-amber-100"],
    [class~="bg-yellow-100"],
    [class~="bg-orange-100"],
    [class~="bg-red-100"],
    [class~="bg-rose-100"],
    [class~="bg-purple-100"],
    [class~="bg-pink-100"],
    [class~="bg-teal-100"],
    [class~="bg-cyan-100"],
    [class~="bg-gray-200"],
    [class~="bg-slate-200"]
) {
    background-color: #202020 !important;
}

html.dark-mode :is(
    [class*="hover:bg-white"]:hover,
    [class*="hover:bg-gray-50"]:hover,
    [class*="hover:bg-slate-50"]:hover,
    [class*="hover:bg-sky-50"]:hover,
    [class*="hover:bg-blue-50"]:hover,
    [class*="hover:bg-amber-50"]:hover,
    [class*="hover:bg-gray-100"]:hover,
    [class*="hover:bg-slate-100"]:hover,
    [class*="hover:bg-sky-100"]:hover
) {
    background-color: #303030 !important;
}

html.dark-mode :is(
    [class~="bg-white/70"],
    [class~="bg-white/80"],
    [class~="bg-white/90"],
    [class~="bg-white/95"],
    [class~="bg-white/60"],
    [class~="bg-sky-50/70"],
    [class~="bg-sky-50/80"]
) {
    background-color: rgb(31 31 31 / .94) !important;
}

html.dark-mode :is(
    [class~="text-slate-900"],
    [class~="text-slate-800"],
    [class~="text-slate-700"],
    [class~="text-gray-900"],
    [class~="text-gray-800"],
    [class~="text-gray-700"],
    [class~="text-theme-dark"],
    [class~="text-sky-900"],
    [class~="text-blue-900"],
    [class~="text-indigo-900"],
    [class~="text-emerald-900"],
    [class~="text-green-900"],
    [class~="text-amber-900"],
    [class~="text-yellow-900"],
    [class~="text-red-900"],
    [class~="text-rose-900"],
    [class~="text-purple-900"],
    [class~="text-pink-900"],
    [class~="text-teal-900"],
    [class~="text-cyan-900"]
) {
    color: #e2e8f0 !important;
}

html.dark-mode :is(
    [class~="text-slate-600"],
    [class~="text-slate-500"],
    [class~="text-gray-600"],
    [class~="text-gray-500"],
    [class~="text-theme-blue"]
) {
    color: #cbd5e1 !important;
}

html.dark-mode :is([class~="text-slate-400"], [class~="text-gray-400"], [class~="text-slate-300"], [class~="text-gray-300"]) {
    color: #94a3b8 !important;
}

html.dark-mode :is(
    [class~="text-sky-600"], [class~="text-sky-700"], [class~="text-sky-800"],
    [class~="text-blue-600"], [class~="text-blue-700"], [class~="text-blue-800"],
    [class~="text-indigo-600"], [class~="text-indigo-700"], [class~="text-indigo-800"],
    [class~="text-cyan-600"], [class~="text-cyan-700"], [class~="text-cyan-800"]
) {
    color: #93c5fd !important;
}

html.dark-mode :is(
    [class~="text-emerald-600"], [class~="text-emerald-700"], [class~="text-emerald-800"],
    [class~="text-green-600"], [class~="text-green-700"], [class~="text-green-800"],
    [class~="text-teal-600"], [class~="text-teal-700"], [class~="text-teal-800"]
) {
    color: #6ee7b7 !important;
}

html.dark-mode :is(
    [class~="text-amber-600"], [class~="text-amber-700"], [class~="text-amber-800"],
    [class~="text-yellow-600"], [class~="text-yellow-700"], [class~="text-yellow-800"],
    [class~="text-orange-600"], [class~="text-orange-700"], [class~="text-orange-800"]
) {
    color: #fcd34d !important;
}

html.dark-mode :is(
    [class~="text-red-500"], [class~="text-red-600"], [class~="text-red-700"], [class~="text-red-800"],
    [class~="text-rose-500"], [class~="text-rose-600"], [class~="text-rose-700"], [class~="text-rose-800"]
) {
    color: #fda4af !important;
}

html.dark-mode :is([class~="text-violet-600"], [class~="text-violet-700"], [class~="text-violet-800"], [class~="text-purple-600"], [class~="text-purple-700"], [class~="text-pink-600"]) {
    color: #d8b4fe !important;
}

html.dark-mode .ps-pill {
    background: rgb(23 23 23 / .98);
    border-color: #3a3a3a;
    box-shadow: 0 10px 40px -16px rgb(0 0 0 / .7), inset 0 1px 0 rgb(163 163 163 / .08);
}

html.dark-mode .ps-logo:hover {
    background: rgb(48 48 48 / .72);
}

html.dark-mode .ps-logo-txt strong {
    color: #e2e8f0;
}

html.dark-mode .ps-logo-txt small {
    color: #94a3b8;
}

html.dark-mode .ps-blob-1 { background: rgb(115 115 115 / .12); }
html.dark-mode .ps-blob-2 { background: rgb(163 163 163 / .08); }

html.dark-mode .ps-item:hover,
html.dark-mode .ps-submenu a:hover,
html.dark-mode .ps-menu a:hover,
html.dark-mode .ps-menu button:hover {
    background: #303030;
    color: #e0f2fe;
}

html.dark-mode .ps-item:not(.ps-active),
html.dark-mode .ps-submenu a:not(.ps-active),
html.dark-mode .ps-menu a:not(.ps-active),
html.dark-mode .ps-section-lbl,
html.dark-mode .ps-section-sub {
    color: #cbd5e1;
}

html.dark-mode .ps-item.ps-active,
html.dark-mode .ps-item[aria-current="page"],
html.dark-mode .ps-submenu a.ps-active,
html.dark-mode .ps-menu .ps-active {
    background: #262626 !important;
    border-left: 3px solid #38bdf8 !important;
    color: #f8fafc !important;
    box-shadow: 0 1px 2px rgb(0 0 0 / .3) !important;
}

/* Collapsed pill-sidebar flyouts are rendered outside the rail surface. */
html.dark-mode .ps-submenu {
    border-left-color: #525252;
}

html.dark-mode body.ps-collapsed .ps-group .ps-submenu {
    background: rgb(23 23 23 / .98);
    border-color: #3a3a3a;
    box-shadow: 0 18px 40px -12px rgb(0 0 0 / .7), 0 2px 14px -6px rgb(0 0 0 / .45);
}

html.dark-mode body.ps-collapsed .ps-group[open] summary {
    background: #262626 !important;
    border-left: 3px solid #38bdf8 !important;
    color: #f8fafc !important;
    box-shadow: 0 1px 2px rgb(0 0 0 / .3) !important;
}

html.dark-mode body.ps-collapsed .ps-group .ps-submenu::before {
    color: #94a3b8;
}

html.dark-mode .ps-user {
    background: #202020;
    border-color: #3a3a3a;
    box-shadow: 0 1px 3px rgb(0 0 0 / .45), inset 0 1px 0 rgb(163 163 163 / .06);
}

html.dark-mode body.ps-collapsed .ps-user {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.dark-mode .ps-user-txt strong { color: #e2e8f0; }
html.dark-mode .ps-user-txt small { color: #a8b6c9; }
html.dark-mode .ps-user-link:hover { background: #303030; }
html.dark-mode .ps-dot { box-shadow: 0 0 0 2px #202020, 0 2px 6px rgb(245 158 11 / .5); }
html.dark-mode .ps-toggle { background: #202020; border-color: #3a3a3a; color: #cbd5e1; }
html.dark-mode .ps-menu { background: #171717; border-color: #3a3a3a; }
html.dark-mode .ps-menu hr { border-color: #3a3a3a; }
html.dark-mode .ps-tip {
    background: rgb(23 23 23 / .98);
    border-color: #3a3a3a;
    color: #e2e8f0;
    box-shadow: 0 18px 40px -12px rgb(0 0 0 / .7), 0 2px 14px -6px rgb(0 0 0 / .45);
}

html.dark-mode .ps-nav-main {
    scrollbar-color: #525252 #171717;
}

html.dark-mode .ps-nav-main::-webkit-scrollbar {
    width: 5px;
    background: #171717;
}

html.dark-mode .ps-nav-main::-webkit-scrollbar-thumb {
    background: #525252;
    border-radius: 999px;
}

html.dark-mode .ps-nav-main::-webkit-scrollbar-thumb:hover {
    background: #737373;
}

html.dark-mode #sidebar-mobile {
    background-color: #171717 !important;
    border-color: #3a3a3a !important;
}

html.dark-mode #sidebar-mobile nav > a:not([aria-current="page"]),
html.dark-mode #sidebar-mobile nav summary:not(.bg-gradient-to-r) {
    color: #cbd5e1;
}

html.dark-mode #sidebar-mobile nav > a[aria-current="page"],
html.dark-mode #sidebar-mobile nav summary.bg-gradient-to-r {
    background-image: linear-gradient(to right, #164e63, #1e3a8a) !important;
    color: #f0f9ff !important;
}

html.dark-mode #sidebar-mobile .bg-gradient-to-r.from-sky-50.to-amber-50 {
    background-image: none !important;
    background-color: #202020 !important;
    border-color: #3a3a3a !important;
}

html.dark-mode #sidebar-mobile .bg-gradient-to-r.from-sky-50.to-amber-50 :is(strong, small, button) {
    color: #e2e8f0 !important;
}

html.dark-mode [class~="from-sky-100"][class~="to-white"] {
    background-image: none !important;
    background-color: #202020 !important;
}

/* Opaque dark surface for translucent light sections on detail pages. */
html.dark-mode [class~="bg-sky-50/60"] {
    background-color: #202020 !important;
}

html.dark-mode [class~="bg-blue-50/60"] {
    background-color: #1e3a5f !important;
    border-color: #3b6090 !important;
}

html.dark-mode [class~="bg-amber-50/60"] {
    background-color: #423212 !important;
    border-color: #806526 !important;
}

html.dark-mode [class~="bg-emerald-50/60"] {
    background-color: #164437 !important;
    border-color: #2d7a61 !important;
}

html.dark-mode [class~="bg-rose-50/60"] {
    background-color: #4a2632 !important;
    border-color: #8d4658 !important;
}

html.dark-mode :is(
    [class~="bg-slate-50/50"],
    [class~="bg-slate-50/60"],
    [class~="bg-slate-50/70"]
) {
    background-color: #262626 !important;
}

html.dark-mode :is(
    [class~="border-slate-200/70"],
    [class~="border-slate-200/60"]
) {
    border-color: #3a3a3a !important;
}

html.dark-mode :is(
    [class~="border-slate-100"],
    [class~="border-slate-200"],
    [class~="border-gray-100"],
    [class~="border-gray-200"]
) {
    border-color: #3a3a3a !important;
}

html.dark-mode [class~="from-sky-50"][class~="to-white"],
html.dark-mode [class~="from-amber-50"][class~="to-white"],
html.dark-mode [class~="from-sky-100"][class~="to-blue-100"],
html.dark-mode [class~="from-sky-50"][class~="to-amber-50"],
html.dark-mode [class~="from-amber-100"][class~="to-yellow-50"] {
    background-image: none !important;
    background-color: #202020 !important;
}

html.dark-mode [class~="from-amber-50"][class~="to-white"] {
    background-image: none !important;
    background-color: #29251b !important;
    border-color: #66501e !important;
}

html.dark-mode [class~="from-amber-50"][class~="to-yellow-50"] {
    background-image: none !important;
    background-color: #29251b !important;
    border-color: #66501e !important;
}

html.dark-mode [class~="from-amber-100"][class~="to-yellow-100"] {
    background-image: none !important;
    background-color: #423212 !important;
    border-color: #806526 !important;
    color: #fde68a !important;
}

html.dark-mode [class~="from-violet-50"][class~="to-white"] {
    background-image: none !important;
    background-color: #2b2340 !important;
    border-color: #554078 !important;
}

html.dark-mode [class~="hover:from-amber-200"][class~="hover:to-yellow-200"]:hover {
    background-image: none !important;
    background-color: #594716 !important;
}

html.dark-mode [class~="from-emerald-100"][class~="to-teal-100"] {
    background-image: none !important;
    background-color: #164437 !important;
    border-color: #2d7a61 !important;
    color: #a7f3d0 !important;
}

html.dark-mode [class~="hover:from-emerald-200"][class~="hover:to-teal-200"]:hover {
    background-image: none !important;
    background-color: #1d5a49 !important;
}

html.dark-mode [class~="from-sky-50"][class~="to-white"] {
    background-image: none !important;
    background-color: #202020 !important;
    border-color: #3a3a3a !important;
}

html.dark-mode [class~="bg-sky-50"][class~="text-sky-600"] {
    background-color: #262626 !important;
    border-color: #3a3a3a !important;
    color: #38bdf8 !important;
}

html.dark-mode [class~="bg-amber-50/70"] {
    background-color: rgb(66 50 18 / .72) !important;
    border-color: #66501e !important;
}

html.dark-mode [class~="bg-amber-50"][class~="text-amber-600"] {
    background-color: #29251b !important;
    border-color: #66501e !important;
    color: #fcd34d !important;
}

html.dark-mode [class~="hover:bg-amber-100/70"]:hover {
    background-color: rgb(82 62 22 / .85) !important;
}

html.dark-mode [class~="bg-rose-50/70"] {
    background-color: rgb(59 31 39 / .72) !important;
    border-color: #713642 !important;
}

html.dark-mode [class~="hover:bg-rose-100/70"]:hover {
    background-color: rgb(75 38 48 / .85) !important;
}

html.dark-mode [class~="from-sky-100"][class~="to-blue-100"] {
    background-color: #303030 !important;
}

html.dark-mode [class~="from-amber-100"][class~="to-yellow-50"] {
    background-color: #29251b !important;
}

/* Hero banner gradient: used across kesiswaan pages (pelatih, users, dashboard, etc.)
   Render as pure neutral dark card in dark mode (#202020), NO blue/navy tint! */
html.dark-mode :is(
    [class~="from-sky-400"][class~="via-blue-400"][class~="to-blue-600"],
    [class~="from-sky-400"][class~="via-blue-500"][class~="to-blue-600"],
    [class~="from-sky-500"][class~="via-blue-600"][class~="to-indigo-700"]
) {
    background-image: none !important;
    background-color: #202020 !important;
    border: 1px solid #3a3a3a !important;
    box-shadow: 0 4px 20px rgb(0 0 0 / .4) !important;
}

html.dark-mode [class~="from-sky-400"][class~="to-blue-500"] {
    background-image: none !important;
    background-color: #262626 !important;
    border-color: #3a3a3a !important;
}

html.dark-mode [class~="bg-amber-200/40"] {
    background-color: rgb(245 158 11 / .08) !important;
}

html.dark-mode :is([class~="bg-white/10"], [class~="bg-white/15"], [class~="bg-white/20"]) {
    background-color: rgb(255 255 255 / .06) !important;
}

html.dark-mode :is([class~="border-white/10"], [class~="border-white/15"], [class~="border-white/20"]) {
    border-color: rgb(203 213 225 / .16) !important;
}

html.dark-mode [class~="from-emerald-50"][class~="to-white"],
html.dark-mode [class~="from-green-50"][class~="to-white"],
html.dark-mode [class~="from-blue-50"][class~="to-white"],
html.dark-mode [class~="from-rose-50"][class~="to-white"],
html.dark-mode [class~="from-sky-50"][class~="to-blue-50"],
html.dark-mode [class~="from-rose-50"][class~="to-red-50"],
html.dark-mode [class~="from-red-50"][class~="to-rose-50"] {
    background-image: none !important;
    background-color: #202020 !important;
}

html.dark-mode [class~="from-amber-300"][class~="to-yellow-400"] {
    --tw-gradient-from: #d97706 !important;
    --tw-gradient-to: #a16207 !important;
    color: #fef3c7 !important;
}

html.dark-mode [class~="from-amber-400"][class~="to-yellow-500"] {
    --tw-gradient-from: #ca8a04 !important;
    --tw-gradient-to: #a16207 !important;
}

html.dark-mode [class~="from-emerald-400"][class~="to-teal-500"] {
    --tw-gradient-from: #059669 !important;
    --tw-gradient-to: #0d9488 !important;
}

html.dark-mode [class~="from-emerald-500"][class~="to-teal-600"] {
    --tw-gradient-from: #047857 !important;
    --tw-gradient-to: #0f766e !important;
}

html.dark-mode [class~="from-rose-400"][class~="to-red-500"] {
    --tw-gradient-from: #e11d48 !important;
    --tw-gradient-to: #dc2626 !important;
}

html.dark-mode [class~="from-rose-500"][class~="to-red-600"] {
    --tw-gradient-from: #be123c !important;
    --tw-gradient-to: #b91c1c !important;
}

html.dark-mode [class~="from-red-400"][class~="to-red-500"] {
    --tw-gradient-from: #dc2626 !important;
    --tw-gradient-to: #b91c1c !important;
}

html.dark-mode [class*="shadow-sky-100"],
html.dark-mode [class*="shadow-sky-200"],
html.dark-mode [class*="shadow-sky-300"],
html.dark-mode [class*="shadow-amber-100"],
html.dark-mode [class*="shadow-amber-200"],
html.dark-mode [class*="shadow-emerald-100"],
html.dark-mode [class*="shadow-emerald-200"],
html.dark-mode [class*="shadow-rose-100"],
html.dark-mode [class*="shadow-rose-200"],
html.dark-mode [class*="shadow-slate-100"],
html.dark-mode [class*="shadow-slate-200"],
html.dark-mode [class*="shadow-red-100"],
html.dark-mode [class*="shadow-red-200"],
html.dark-mode [class*="shadow-blue-100"],
html.dark-mode [class*="shadow-blue-200"] {
    --tw-shadow-color: rgb(0 0 0 / .30) !important;
}

html.dark-mode [class*="shadow-violet-100"],
html.dark-mode [class*="shadow-violet-200"],
html.dark-mode [class*="shadow-purple-100"],
html.dark-mode [class*="shadow-purple-200"],
html.dark-mode [class*="shadow-pink-100"],
html.dark-mode [class*="shadow-pink-200"] {
    --tw-shadow-color: rgb(0 0 0 / .30) !important;
}

html.dark-mode [class*="shadow-sky-900/10"],
html.dark-mode [class*="shadow-sky-900/20"] {
    --tw-shadow-color: rgb(0 0 0 / .25) !important;
}

html.dark-mode .profile-exit-card {
    border-color: #a34452 !important;
    box-shadow: 0 0 0 1px rgb(248 113 113 / .2), 0 0 22px rgb(239 68 68 / .2), 0 8px 24px rgb(0 0 0 / .3) !important;
}

html.dark-mode .profile-sacred-badge {
    background-image: none !important;
    background-color: #29251b !important;
    border-color: #66501e !important;
    color: #fcd34d !important;
}

html.dark-mode :is([class~="text-amber-800"], [class~="text-yellow-800"], [class~="text-orange-800"]) {
    color: #fde68a !important;
}

html.dark-mode :is([class~="bg-amber-50"], [class~="bg-yellow-50"], [class~="bg-orange-50"]) {
    border-color: #66501e !important;
}

html.dark-mode :is([class~="bg-emerald-50"], [class~="bg-green-50"], [class~="bg-teal-50"]) {
    border-color: #1f5c4a !important;
}

html.dark-mode :is([class~="bg-red-50"], [class~="bg-rose-50"]) {
    border-color: #713642 !important;
}

html.dark-mode .ps-avatar {
    background: linear-gradient(135deg, #facc15, #eab308);
    color: #422006;
    box-shadow: 0 4px 10px rgb(234 179 8 / .32);
}

html.dark-mode :is(
    [class~="border-gray-50"],
    [class~="border-gray-100"],
    [class~="border-gray-200"],
    [class~="border-slate-50"],
    [class~="border-slate-100"],
    [class~="border-slate-200"],
    [class~="border-sky-50"],
    [class~="border-sky-100"],
    [class~="border-sky-200"],
    [class~="border-blue-100"],
    [class~="border-blue-200"],
    [class~="border-amber-100"],
    [class~="border-amber-200"],
    [class~="border-emerald-100"],
    [class~="border-red-100"],
    [class~="border-red-200"],
    [class~="border-white"]
) {
    border-color: #3a3a3a !important;
}

html.dark-mode .attendance-stat.attendance-stat--present {
    background-image: none !important;
    background-color: #102b26 !important;
    border-color: #1f5c4a !important;
}

html.dark-mode .attendance-stat.attendance-stat--excused {
    background-image: none !important;
    background-color: #29251b !important;
    border-color: #66501e !important;
}

html.dark-mode .attendance-stat.attendance-stat--sick {
    background-image: none !important;
    background-color: #2b2340 !important;
    border-color: #554078 !important;
}

html.dark-mode .attendance-stat.attendance-stat--absent {
    background-image: none !important;
    background-color: #2b1d27 !important;
    border-color: #713642 !important;
}

html.dark-mode .recruitment-open-badge {
    background-color: #102b26 !important;
    border-color: #1f5c4a !important;
    color: #6ee7b7 !important;
}

/* catalog-filter (legacy pill button) */
html.dark-mode .catalog-filter {
    background-color: #202020 !important;
    border-color: #3a3a3a !important;
}

html.dark-mode .catalog-filter:hover {
    background-color: #303030 !important;
    border-color: #525252 !important;
}

/* catalog-filter-tab (new tab-bar style in filter container) */
html.dark-mode .catalog-filter-tab {
    color: #a3a3a3 !important;
}

html.dark-mode .catalog-filter-tab:hover {
    background-color: #262626 !important;
    color: #e0f2fe !important;
}

/* catalog-card — main ekskul card */
html.dark-mode .catalog-card {
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
    box-shadow: 0 4px 16px rgb(0 0 0 / .32) !important;
}

html.dark-mode .catalog-card:hover {
    border-color: #444444 !important;
    box-shadow: 0 12px 28px rgb(0 0 0 / .48) !important;
}

/* The top color strip inside catalog-card stays as gradient, so no override needed.
   But the border divider inside the card (border-sky-50) needs darkening. */
html.dark-mode .catalog-card .border-sky-50 {
    border-color: #2a2a2a !important;
}

/* Badge: open recruitment — keep emerald tint subtle in dark */
html.dark-mode .recruitment-open-badge {
    background-color: #102b26 !important;
    border-color: #1f5c4a !important;
    color: #6ee7b7 !important;
}

/* Badge: closed — neutral gray pill */
html.dark-mode .catalog-closed-badge {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
    color: #6b7280 !important;
}

/* Disabled / unavailable button */
html.dark-mode .catalog-unavailable {
    background-color: #242424 !important;
    border-color: #3a3a3a !important;
    color: #6b7280 !important;
}

html.dark-mode .attendance-status--hadir {
    background-color: #102b26 !important;
    color: #6ee7b7 !important;
}

html.dark-mode .attendance-status--sakit {
    background-color: #2b2340 !important;
    color: #d8b4fe !important;
}

html.dark-mode .attendance-status--izin {
    background-color: #29251b !important;
    color: #fcd34d !important;
}

html.dark-mode .attendance-status--alpha {
    background-color: #2b1d27 !important;
    color: #fda4af !important;
}

html.dark-mode .attendance-status--unmarked {
    background-color: #26354b !important;
    color: #94a3b8 !important;
}

html.dark-mode input:not([type="checkbox"]):not([type="radio"]),
html.dark-mode select,
html.dark-mode textarea {
    background-color: #1f1f1f !important;
    border-color: #3a3a3a !important;
    color: #e2e8f0 !important;
}

/* Reusable component classes must follow the same surface tokens as legacy
   utility-based cards and fields. */
html.dark-mode .soul-card {
    background-color: #202020 !important;
    border-color: #3a3a3a !important;
    box-shadow: 0 16px 32px rgb(0 0 0 / .24) !important;
}

html.dark-mode .soul-field {
    background-color: #1f1f1f !important;
    border-color: #3a3a3a !important;
    color: #e2e8f0 !important;
}

/* Katalog ekskul. Kartu memakai variabel --soul-tinta untuk tepi kiri dan bar
   sumbu minggu, jadi satu token ini cukup untuk mode terang maupun gelap. */
html.dark-mode .soul-kartu {
    --soul-tinta: #3b82f6;
    background-color: #1e1e1e !important;
    border-color: #333333 !important;
}

html.dark-mode .soul-kartu--tutup {
    --soul-tinta: #4b5563;
}

html.dark-mode .soul-kartu:hover {
    box-shadow: inset 6px 0 0 var(--soul-tinta), 0 10px 22px -14px rgb(0 0 0 / .7) !important;
}

html.dark-mode .soul-crest {
    background-color: #262626 !important;
    border-color: #3a3a3a !important;
}

html.dark-mode .soul-crest-mono {
    color: #e2e8f0 !important;
}

html.dark-mode .soul-minggu-batang {
    background-color: #3f3f3f !important;
}

html.dark-mode .soul-minggu-sumbu {
    background-color: #2f2f2f !important;
}

html.dark-mode .soul-minggu-label {
    color: #8f8f8f !important;
}

html.dark-mode .soul-axiom + .soul-axiom {
    border-top-color: #2f2f2f !important;
}

html.dark-mode .soul-axiom-kunci {
    color: #8f8f8f !important;
}

html.dark-mode .soul-axiom-nilai {
    color: #e2e8f0 !important;
}

html.dark-mode .soul-btn:focus-visible,
html.dark-mode .soul-kartu :is(a, button):focus-visible,
html.dark-mode .soul-indeks-item:focus-visible {
    outline-color: #60a5fa !important;
}

html.dark-mode .soul-btn--utama {
    background-color: #1d4ed8 !important;
}

html.dark-mode .soul-btn--utama:hover {
    background-color: #1e40af !important;
}

html.dark-mode .soul-btn--bawa {
    background-color: #262626 !important;
    border-color: #3a3a3a !important;
    color: #cbd5e1 !important;
}

html.dark-mode .soul-btn--bawa:hover {
    border-color: #3b82f6 !important;
    color: #bfdbfe !important;
}

html.dark-mode .soul-btn--mati {
    background-color: #1a1a1a !important;
    border-color: #2f2f2f !important;
    color: #6b7280 !important;
}

html.dark-mode .soul-indeks-item {
    color: #a3a3a3 !important;
}

html.dark-mode .soul-indeks-item:hover {
    border-left-color: #525252 !important;
    color: #e5e5e5 !important;
}

html.dark-mode .soul-indeks-item[aria-current="true"] {
    border-left-color: #3b82f6 !important;
    color: #bfdbfe !important;
}

html.dark-mode .soul-indeks-jumlah {
    color: #8f8f8f !important;
}

html.dark-mode .soul-indeks-item[aria-current="true"] .soul-indeks-jumlah {
    color: #60a5fa !important;
}

html.dark-mode .soul-garis {
    background-color: #333333 !important;
}

html.dark-mode .soul-status--menunggu {
    background-color: #2b2210 !important;
    border-color: #5a4413 !important;
    color: #fcd34d !important;
}

html.dark-mode .soul-status--terdaftar {
    background-color: #1e1e1e !important;
    border-color: #3a3a3a !important;
    color: #cbd5e1 !important;
}

html.dark-mode .soul-kolom {
    background-color: #1f1f1f !important;
    border-color: #3a3a3a !important;
    color: #e2e8f0 !important;
}

html.dark-mode .soul-kolom:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgb(96 165 250 / .25) !important;
}

html.dark-mode .soul-tanya,
html.dark-mode .soul-tanya summary {
    border-color: #333333;
    color: #e2e8f0;
}

html.dark-mode .soul-tanya summary:focus-visible {
    outline-color: #60a5fa !important;
}

html.dark-mode .soul-tanya-jawab {
    color: #cbd5e1 !important;
}

html.dark-mode .soul-tanya[open] .soul-tanya-tanda,
html.dark-mode .soul-tanya summary:hover .soul-tanya-tanda {
    color: #60a5fa !important;
}

/* Native file inputs keep a light browser button unless it is themed explicitly. */
html.dark-mode input[type="file"] {
    background-color: #1f1f1f !important;
    border-color: #3a3a3a !important;
    color: #cbd5e1 !important;
}

html.dark-mode input[type="file"]::file-selector-button,
html.dark-mode input[type="file"]::-webkit-file-upload-button {
    margin-right: .75rem;
    padding: .45rem .85rem;
    border: 1px solid #3b6090;
    border-radius: .7rem;
    background-color: #263b5c !important;
    background-image: none !important;
    color: #bfdbfe !important;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .06);
}

html.dark-mode input[type="file"]::file-selector-button:hover,
html.dark-mode input[type="file"]::-webkit-file-upload-button:hover {
    background-color: #315681 !important;
    border-color: #5b84b8;
}

/* Keep focused fields subtle in dark mode; light-mode sky rings are too bright here. */
html.dark-mode input:focus:not([type="checkbox"]):not([type="radio"]),
html.dark-mode select:focus,
html.dark-mode textarea:focus {
    background-color: #262626 !important;
    border-color: #5273a5 !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgb(59 130 246 / .18) !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #94a3b8 !important;
}

html.dark-mode table thead,
html.dark-mode .divide-y > :not([hidden]) ~ :not([hidden]) {
    border-color: #3a3a3a !important;
}

/* Canonical dark table treatment. Accent text on individual cells remains
   untouched, while all table surfaces and separators share one baseline. */
html.dark-mode table {
    color: #cbd5e1;
}

html.dark-mode table thead,
html.dark-mode table thead tr,
html.dark-mode table thead th {
    background-color: #262626 !important;
    background-image: none !important;
}

html.dark-mode table th {
    border-color: #3a3a3a !important;
}

html.dark-mode table td {
    border-color: #3a3a3a !important;
}

html.dark-mode table tbody tr {
    border-color: #3a3a3a !important;
}

html.dark-mode table tbody tr:hover {
    background-color: #2a2a2a !important;
}

html.dark-mode .site-header {
    background: rgb(23 23 23 / .94);
    border-color: #3a3a3a;
}

html.dark-mode .site-header,
html.dark-mode .site-header a,
html.dark-mode .site-header button {
    color: #e2e8f0;
}

html.dark-mode .sheet-panel,
html.dark-mode .sheet-overlay {
    color: #e2e8f0;
}

html.dark-mode .sheet-panel {
    background-color: #171717;
    border-color: #3a3a3a;
}

html.dark-mode .login-card,
html.dark-mode .login-form-card {
    background-color: rgb(23 23 23 / .94);
    color: #e2e8f0;
    border-color: #3a3a3a;
}

html.dark-mode .login-card,
html.dark-mode .login-right {
    background-color: #171717;
}

html.dark-mode .login-left {
    background: #242424;
}

html.dark-mode :is(.login-title, .login-left-title, .platform-text h4) {
    color: #e2e8f0;
}

html.dark-mode :is(.login-subtitle, .login-left-desc, .platform-text p, .remember) {
    color: #a8b6c9;
}

html.dark-mode :is(.login-left-brand, .beranda-link) {
    color: #93c5fd;
}

html.dark-mode .login-card {
    box-shadow: 0 20px 40px -12px rgb(0 0 0 / .55), 0 0 0 1px #3a3a3a !important;
}

html.dark-mode .login-alert {
    background: #2b1d27 !important;
    border-color: #713642 !important;
    color: #fda4af !important;
}

html.dark-mode .form-hint {
    background: #29251b !important;
    border-color: #66501e !important;
}

html.dark-mode .form-hint-text,
html.dark-mode .form-hint svg {
    color: #fcd34d !important;
}

html.dark-mode .form-hint-text code {
    background: #3a3220 !important;
    color: #fde68a !important;
}

html.dark-mode .password-toggle {
    color: #94a3b8 !important;
}

html.dark-mode .password-toggle:hover {
    background: #303030 !important;
    color: #e2e8f0 !important;
}

html.dark-mode :is(.form-control, .password-input) {
    background: #1f1f1f;
    border-color: #3a3a3a;
    color: #e2e8f0;
}

html.dark-mode .form-label {
    color: #cbd5e1 !important;
}

html.dark-mode .form-label .required {
    color: #fda4af !important;
}

html.dark-mode :is(.form-control, .password-input)::placeholder {
    color: #8291a7;
}

html.dark-mode .platform-icon { background: #171717; }
html.dark-mode .platform-icon svg { color: #93c5fd; }

html.dark-mode :is(.coverflow-card, .stat-card, .chart-placeholder, .login-modal, .team-card) {
    background-color: #1f1f1f;
    border-color: #3a3a3a;
    color: #e2e8f0;
}

html.dark-mode :is(.vision-section, .feature-detail-section, .team-section, .team-card-inner) {
    background-color: #171717;
    color: #e2e8f0;
}

html.dark-mode .team-card-inner {
    border-color: #3a3a3a;
}

html.dark-mode :is(.vision-section, .feature-detail-section--2, .feature-detail-section--3, .feature-detail-section--4) {
    background-image: none;
}

html.dark-mode :is(.vision-eyebrow-text, .vision-quote-text, .feature-detail-title, .team-heading, .team-name, .stat-value, .widget-value, .ekskul-name) {
    color: #e2e8f0;
}

html.dark-mode :is(.vision-quote-desc, .feature-detail-desc, .team-desc, .team-bio, .team-location) {
    color: #a8b6c9;
}

/* Blend the landing-page hero into the dark section below it. */
html.dark-mode .hero-section::after {
    background: linear-gradient(
        180deg,
        rgb(23 23 23 / 0) 0%,
        rgb(23 23 23 / 0.55) 55%,
        #171717 100%
    );
}

/* Keep the community coverflow section dark instead of its light default. */
html.dark-mode .coverflow {
    background: #171717;
    color: #e2e8f0;
}

html.dark-mode .coverflow-bg-overlay {
    background: #171717;
}

html.dark-mode .coverflow-eyebrow-text {
    color: #e2e8f0;
}

/* Match the team cards' secondary surfaces to the dark theme. */
html.dark-mode .team-avatar-frame {
    background: #262626;
    border-color: #3a3a3a;
}

html.dark-mode .team-skill {
    color: #cbd5e1;
    background: #262626;
    border-color: #3a3a3a;
}

html.dark-mode .team-skill:hover {
    background: #303030;
}

html.dark-mode .team-social-link {
    color: #a8b6c9;
    background: #262626;
    border-color: #3a3a3a;
}

html.dark-mode .team-social-link:hover {
    color: #f8fafc;
    background: #333333;
    border-color: #525252;
}

/* Preserve semantic accent surfaces in dark mode instead of flattening them
   into the same neutral gray as ordinary cards. */
html.dark-mode :is(
    [class~="bg-sky-50"][class*="text-sky-"],
    [class~="bg-blue-50"][class*="text-blue-"],
    [class~="bg-indigo-50"][class*="text-indigo-"],
    [class~="bg-cyan-50"][class*="text-cyan-"]
) {
    background-color: #262626 !important;
    border-color: #3a3a3a !important;
}

html.dark-mode :is(
    [class~="bg-emerald-50"][class*="text-emerald-"],
    [class~="bg-green-50"][class*="text-green-"],
    [class~="bg-teal-50"][class*="text-teal-"]
) {
    background-color: #102b26 !important;
    border-color: #1f5c4a !important;
}

html.dark-mode :is(
    [class~="bg-amber-50"][class*="text-amber-"],
    [class~="bg-yellow-50"][class*="text-yellow-"],
    [class~="bg-orange-50"][class*="text-orange-"]
) {
    background-color: #29251b !important;
    border-color: #66501e !important;
}

html.dark-mode :is(
    [class~="bg-red-50"][class*="text-red-"],
    [class~="bg-rose-50"][class*="text-rose-"]
) {
    background-color: #2b1d27 !important;
    border-color: #713642 !important;
}

html.dark-mode :is(
    [class~="bg-violet-50"][class*="text-violet-"],
    [class~="bg-purple-50"][class*="text-purple-"],
    [class~="bg-pink-50"][class*="text-pink-"]
) {
    background-color: #2b2340 !important;
    border-color: #554078 !important;
}

html.dark-mode :is(
    [class~="bg-sky-100"][class*="text-sky-"],
    [class~="bg-blue-100"][class*="text-blue-"],
    [class~="bg-indigo-100"][class*="text-indigo-"],
    [class~="bg-cyan-100"][class*="text-cyan-"]
) {
    background-color: #2a2a2a !important;
    border-color: #3a3a3a !important;
}

html.dark-mode :is(
    [class~="bg-emerald-100"][class*="text-emerald-"],
    [class~="bg-green-100"][class*="text-green-"],
    [class~="bg-teal-100"][class*="text-teal-"]
) {
    background-color: #164437 !important;
    border-color: #2d7a61 !important;
}

html.dark-mode :is(
    [class~="bg-amber-100"][class*="text-amber-"],
    [class~="bg-yellow-100"][class*="text-yellow-"],
    [class~="bg-orange-100"][class*="text-orange-"]
) {
    background-color: #423212 !important;
    border-color: #806526 !important;
}

html.dark-mode :is(
    [class~="bg-red-100"][class*="text-red-"],
    [class~="bg-rose-100"][class*="text-rose-"]
) {
    background-color: #4a2632 !important;
    border-color: #8d4658 !important;
}

html.dark-mode :is(
    [class~="bg-violet-100"][class*="text-violet-"],
    [class~="bg-purple-100"][class*="text-purple-"],
    [class~="bg-pink-100"][class*="text-pink-"]
) {
    background-color: #3d2d5d !important;
    border-color: #695393 !important;
}

html.dark-mode :is(
    [class*="bg-sky-50/"][class*="text-sky-"],
    [class*="bg-blue-50/"][class*="text-blue-"],
    [class*="bg-indigo-50/"][class*="text-indigo-"],
    [class*="bg-cyan-50/"][class*="text-cyan-"]
) {
    background-color: #262626 !important;
    border-color: #3a3a3a !important;
}

html.dark-mode :is(
    [class*="bg-emerald-50/"][class*="text-emerald-"],
    [class*="bg-green-50/"][class*="text-green-"],
    [class*="bg-teal-50/"][class*="text-teal-"]
) {
    background-color: rgb(16 43 38 / .72) !important;
    border-color: #1f5c4a !important;
}

html.dark-mode :is(
    [class*="bg-amber-50/"][class*="text-amber-"],
    [class*="bg-yellow-50/"][class*="text-yellow-"],
    [class*="bg-orange-50/"][class*="text-orange-"]
) {
    background-color: rgb(41 37 27 / .72) !important;
    border-color: #66501e !important;
}

html.dark-mode :is(
    [class*="bg-red-50/"][class*="text-red-"],
    [class*="bg-rose-50/"][class*="text-rose-"]
) {
    background-color: rgb(43 29 39 / .72) !important;
    border-color: #713642 !important;
}

html.dark-mode :is(
    [class~="bg-slate-50/80"],
    [class~="bg-slate-50/90"]
) {
    background-color: #262626 !important;
}

html.dark-mode :is(
    [class~="from-emerald-50"][class~="to-white"],
    [class~="from-green-50"][class~="to-white"],
    [class~="from-blue-50"][class~="to-white"],
    [class~="from-sky-50"][class~="to-blue-50"],
    [class~="from-rose-50"][class~="to-white"],
    [class~="from-red-50"][class~="to-rose-50"]
) {
    background-image: none !important;
}

html.dark-mode :is(
    [class~="from-emerald-50"][class~="to-white"],
    [class~="from-green-50"][class~="to-white"]
) {
    background-color: #102b26 !important;
    border-color: #1f5c4a !important;
}

html.dark-mode :is(
    [class~="from-blue-50"][class~="to-white"],
    [class~="from-sky-50"][class~="to-blue-50"]
) {
    background-color: #202020 !important;
    border-color: #3a3a3a !important;
}

html.dark-mode :is(
    [class~="from-rose-50"][class~="to-white"],
    [class~="from-red-50"][class~="to-rose-50"]
) {
    background-color: #2b1d27 !important;
    border-color: #713642 !important;
}

html.dark-mode .login-modal-close:hover {
    background: #303030;
    color: #e2e8f0;
}

html.dark-mode #soul-theme-toggle {
    color: #f8fafc;
    background: #202020;
    border-color: #525252;
}

#soul-theme-toggle {
    /* Temporarily hidden while the dark-mode UI is being finalized. */
    /*display: none !important;*/
    position: fixed;
    z-index: 35;
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    display: inline-flex;
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .65rem .8rem;
    border: 1px solid #cbd5e1;
    border-radius: 9999px;
    background: #fff;
    color: #334155;
    box-shadow: 0 8px 24px rgb(15 23 42 / .18);
    font: 600 12px/1 system-ui, sans-serif;
    cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}

#soul-theme-toggle:hover { transform: translateY(-2px); }
#soul-theme-toggle svg { width: 18px; height: 18px; }

/* Sticky matrix columns must follow the same dark header surface. */
html.dark-mode table thead th.sticky {
    background-color: #262626 !important;
    background-image: none !important;
}

/* ==========================================================================
   Ekskul Detail Page Dark Mode
   ========================================================================== */
/* Ekskul detail page overrides body bg — keep in sync with the main body rule above */
html.dark-mode body {
    background-color: #171717 !important;
    background-image: none !important;
}

html.dark-mode header.sticky {
    background-color: rgba(24, 24, 24, 0.88) !important;
    border-color: #2e2e2e !important;
}

html.dark-mode .ekskul-gradient-mesh {
    background-color: #171717 !important;
    background-image: none !important;
}

/* Detail page cards — scoped to ekskul detail page sections only */
html.dark-mode section#tentang .bg-white,
html.dark-mode section#tentang [class*="from-amber-50"],
html.dark-mode section#prestasi article,
html.dark-mode section#kegiatan article,
html.dark-mode section#testimoni article,
html.dark-mode section#faq .bg-white,
html.dark-mode section .rounded-3xl.bg-white,
html.dark-mode div.bg-white.relative {
    background-color: #1a1a1a !important;
    border-color: #2c2c2c !important;
    color: #e2e8f0 !important;
}

/* Headings and text — only non-white-text headings get the dark override */
html.dark-mode h1:not([class*="text-white"]):not([class*="text-sky-"]):not([class*="text-blue-"]):not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-rose-"]),
html.dark-mode h2:not([class*="text-white"]):not([class*="text-sky-"]):not([class*="text-blue-"]):not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-rose-"]),
html.dark-mode h3:not([class*="text-white"]):not([class*="text-sky-"]):not([class*="text-blue-"]):not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-rose-"]),
html.dark-mode h4:not([class*="text-white"]):not([class*="text-sky-"]):not([class*="text-blue-"]):not([class*="text-amber-"]):not([class*="text-emerald-"]):not([class*="text-rose-"]) {
    color: #f8fafc !important;
}

/* FAQ Accordion Details */
html.dark-mode section#faq details summary:hover {
    background-color: #222222 !important;
}

html.dark-mode section#faq details div[class*="border-t"] {
    background-color: #151515 !important;
    border-color: #282828 !important;
}

/* Metric / Quick facts cards in detail hero */
html.dark-mode div[class*="bg-sky-50/60"],
html.dark-mode div[class*="bg-amber-50/60"],
html.dark-mode div[class*="bg-emerald-50/60"],
html.dark-mode div[class*="bg-blue-50/60"] {
    background-color: #202020 !important;
    border-color: #303030 !important;
}

/* Inner card boxes */
html.dark-mode section#tentang [class*="bg-white/80"] {
    background-color: #222222 !important;
    border-color: #333333 !important;
    color: #cbd5e1 !important;
}

/* Inputs & textareas in detail */
html.dark-mode textarea[id="quote"],
html.dark-mode input[id="pertanyaan"] {
    background-color: #202020 !important;
    border-color: #3a3a3a !important;
    color: #f1f5f9 !important;
}

html.dark-mode textarea[id="quote"]:focus,
html.dark-mode input[id="pertanyaan"]:focus {
    background-color: #262626 !important;
    border-color: #38bdf8 !important;
}

/* Empty states */
html.dark-mode div[class*="border-dashed"] {
    background-color: #181818 !important;
    border-color: #333333 !important;
}

/* Footer */
html.dark-mode footer {
    background-color: #141414 !important;
    border-color: #282828 !important;
}

@media print {
    #soul-theme-toggle { display: none !important; }
}

/* ==========================================================================
   Missing border-color variants (used in stat cards, badges, pelatih page)
   ========================================================================== */
html.dark-mode :is(
    [class~="border-amber-200"],
    [class~="border-amber-300"]
) {
    border-color: #66501e !important;
}

html.dark-mode :is(
    [class~="border-emerald-200"],
    [class~="border-emerald-300"]
) {
    border-color: #1f5c4a !important;
}

html.dark-mode :is(
    [class~="border-rose-200"],
    [class~="border-rose-300"]
) {
    border-color: #713642 !important;
}

html.dark-mode :is(
    [class~="border-sky-200"],
    [class~="border-sky-300"]
) {
    border-color: #3a3a3a !important;
}

/* Amber ring glow (pending stat card: ring-2 ring-amber-400/50) */
html.dark-mode [class*="ring-amber-400"] {
    --tw-ring-color: rgb(180 120 10 / .35) !important;
}

/* ==========================================================================
   Native <dialog> dark mode (pelatih tolak modal + any future modals)
   ========================================================================== */
html.dark-mode dialog {
    background-color: #1e1e1e !important;
    border-color: #3a3a3a !important;
    color: #e2e8f0 !important;
}

html.dark-mode dialog::backdrop {
    background-color: rgb(0 0 0 / .65) !important;
}

html.dark-mode dialog > div {
    background-color: #1e1e1e !important;
    border-color: #3a3a3a !important;
}

html.dark-mode dialog :is(.border-slate-100, .border-b, .border-t) {
    border-color: #3a3a3a !important;
}

html.dark-mode dialog h3 {
    color: #f1f5f9 !important;
}

html.dark-mode dialog p {
    color: #cbd5e1 !important;
}

html.dark-mode dialog label {
    color: #cbd5e1 !important;
}

html.dark-mode dialog textarea {
    background-color: #262626 !important;
    border-color: #4a4a4a !important;
    color: #f1f5f9 !important;
}

html.dark-mode dialog textarea:focus {
    border-color: #f43f5e !important;
    box-shadow: 0 0 0 3px rgb(244 63 94 / .2) !important;
}

html.dark-mode dialog button[type="button"] {
    background-color: #262626 !important;
    border-color: #3a3a3a !important;
    color: #cbd5e1 !important;
}

html.dark-mode dialog button[type="button"]:hover {
    background-color: #303030 !important;
    color: #e2e8f0 !important;
}

html.dark-mode dialog .bg-rose-100 {
    background-color: #4a2632 !important;
    color: #fda4af !important;
}

/* ==========================================================================
   Pelatih page specific refinements
   ========================================================================== */

/* Pelatih list cards — pending (amber border) */
html.dark-mode .rounded-3xl[class*="border-amber-200"] {
    background-color: #202020 !important;
    border-color: #66501e !important;
    box-shadow: 0 4px 16px rgb(0 0 0 / .35) !important;
}

/* Pelatih list cards — normal (sky border) */
html.dark-mode .rounded-3xl[class*="border-sky-100"] {
    background-color: #202020 !important;
    border-color: #3a3a3a !important;
}

/* Catatan penolakan box */
html.dark-mode .rounded-xl.bg-rose-50.border-rose-100 {
    background-color: #2b1d27 !important;
    border-color: #713642 !important;
}

/* "Tanpa Sertifikat" neutral badge */
html.dark-mode span.bg-slate-100.text-slate-400 {
    background-color: #2a2a2a !important;
    color: #64748b !important;
}

/* Mobile card action divider */
html.dark-mode .border-t.lg\:border-t-0 {
    border-color: #3a3a3a !important;
}

/* Neutralize colored shadows in dark mode (e.g. shadow-sky-200, shadow-blue-500) */
html.dark-mode :is(
    [class*="shadow-sky-"],
    [class*="shadow-blue-"],
    [class*="shadow-indigo-"],
    [class*="shadow-amber-"],
    [class*="shadow-emerald-"],
    [class*="shadow-rose-"]
) {
    --tw-shadow-color: rgb(0 0 0 / .35) !important;
}

/* Filter inputs & selects on kesiswaan pages in dark mode */
html.dark-mode :is(
    select.bg-slate-50,
    input[type="text"].bg-slate-50,
    input[type="search"].bg-slate-50
) {
    background-color: #262626 !important;
    border-color: #3a3a3a !important;
    color: #f1f5f9 !important;
}

html.dark-mode :is(
    select.bg-slate-50:focus,
    input[type="text"].bg-slate-50:focus,
    input[type="search"].bg-slate-50:focus
) {
    background-color: #2a2a2a !important;
    border-color: #525252 !important;
    color: #ffffff !important;
}

/* Switch Dashboard Buttons (Desktop & Mobile across all roles & profile) */
html.dark-mode :is(
    #header-switch-dashboard,
    #header-switch-dashboard-mobile,
    #header-switch-dashboard-ketua,
    #header-switch-dashboard-ketua-mobile,
    #header-switch-dashboard-profile,
    #header-switch-dashboard-profile-mobile
) {
    background-color: rgba(14, 165, 233, 0.14) !important;
    border-color: rgba(56, 189, 248, 0.35) !important;
    color: #7dd3fc !important;
    box-shadow: 0 2px 10px -2px rgba(14, 165, 233, 0.25) !important;
}

html.dark-mode :is(
    #header-switch-dashboard:hover,
    #header-switch-dashboard-mobile:hover,
    #header-switch-dashboard-ketua:hover,
    #header-switch-dashboard-ketua-mobile:hover,
    #header-switch-dashboard-profile:hover,
    #header-switch-dashboard-profile-mobile:hover
) {
    background-color: rgba(14, 165, 233, 0.24) !important;
    border-color: rgba(56, 189, 248, 0.55) !important;
    color: #bae6fd !important;
    box-shadow: 0 4px 14px -2px rgba(14, 165, 233, 0.35) !important;
}

html.dark-mode :is(
    #header-switch-dashboard svg,
    #header-switch-dashboard-mobile svg,
    #header-switch-dashboard-ketua svg,
    #header-switch-dashboard-ketua-mobile svg,
    #header-switch-dashboard-profile svg,
    #header-switch-dashboard-profile-mobile svg
) {
    color: #38bdf8 !important;
}

html.dark-mode :is(
    #header-switch-dashboard span.bg-sky-200\/60,
    #header-switch-dashboard-ketua span.bg-sky-200\/60,
    #header-switch-dashboard-profile span.bg-sky-200\/60
) {
    background-color: rgba(14, 165, 233, 0.25) !important;
    color: #e0f2fe !important;
    border: 1px solid rgba(56, 189, 248, 0.25) !important;
}

/* Switch dashboard hero action in dashboard siswa */
html.dark-mode #switch-dashboard-btn {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
}

html.dark-mode #switch-dashboard-btn:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
}

/* ==========================================================================
   Mobile sidebar — Ketua & Pembina sub-nav dropdowns
   ========================================================================== */

/* The accordion border-l divider inside Details/Summary sub-menus */
html.dark-mode #sidebar-mobile .border-l.border-sky-100 {
    border-color: #2d3748 !important;
}

/* Sub-nav links inside ketua/pembina accordion panels */
html.dark-mode #sidebar-mobile details div a {
    color: #94a3b8;
}

html.dark-mode #sidebar-mobile details div a:hover {
    background-color: #262626 !important;
    color: #bae6fd !important;
}

html.dark-mode #sidebar-mobile details div a.bg-sky-50,
html.dark-mode #sidebar-mobile details div a[class*="bg-sky-50"] {
    background-color: #262626 !important;
    color: #e5e5e5 !important;
}

html.dark-mode #sidebar-mobile details div a.text-sky-700,
html.dark-mode #sidebar-mobile details div a[class*="text-sky-700"] {
    color: #e5e5e5 !important;
}

/* Active nav state using from-sky-100 to-blue-100 gradient in mobile sidebar */
html.dark-mode #sidebar-mobile [class*="from-sky-100"][class*="to-blue-100"] {
    background-image: none !important;
    background-color: #262626 !important;
}

/* Ketua/Pembina mobile sidebar summary (accordion trigger) active state */
html.dark-mode #sidebar-mobile details summary[class*="from-sky-100"] {
    background-image: none !important;
    background-color: #262626 !important;
    color: #e5e5e5 !important;
}

/* Session flash alerts — Pembina main content area */
html.dark-mode .ps-page main .bg-emerald-50.border-emerald-200 {
    background-color: #102b26 !important;
    border-color: #1f5c4a !important;
    color: #6ee7b7 !important;
}

html.dark-mode .ps-page main .bg-red-50.border-red-200 {
    background-color: #2b1d27 !important;
    border-color: #713642 !important;
    color: #fda4af !important;
}

/* bg-sky-50/70 search inputs inside all role headers */
html.dark-mode header input[type="text"][class*="bg-sky-50"] {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
    color: #e2e8f0 !important;
}

/* ==========================================================================
   NEUTRAL DARK MODE - "hitam, bukan biru"
   --------------------------------------------------------------------------
   Semua permukaan & aksen biru (sky/blue/indigo/cyan) dinetralkan menjadi
   skala abu-abu netral (hitam) supaya dark mode konsisten di semua role.
   ========================================================================== */

html.dark-mode,
html.dark {
    --soul-blue-50: #262626;
    --soul-blue-100: #2e2e2e;
    --soul-blue-200: #3a3a3a;
    --soul-blue-300: #525252;
    --soul-blue-400: #737373;
    --soul-blue-500: #a3a3a3;
    --soul-blue-600: #d4d4d4;
    --soul-blue-700: #e5e5e5;
    --soul-blue-800: #f5f5f5;
    --soul-blue-900: #fafafa;
}

/* --- Permukaan biru -> abu-abu netral ---------------------------------- */
html.dark-mode :is(
    [class*="bg-sky-"],
    [class*="bg-blue-"],
    [class*="bg-indigo-"],
    [class*="bg-cyan-"]
),
html.dark :is(
    [class*="bg-sky-"],
    [class*="bg-blue-"],
    [class*="bg-indigo-"],
    [class*="bg-cyan-"]
) {
    background-color: #262626 !important;
}

/* Varian terang (50/100) tetap dibuat sedikit lebih terang agar tak hilang. */
html.dark-mode :is(
    [class*="bg-sky-50"],
    [class*="bg-sky-100"],
    [class*="bg-blue-50"],
    [class*="bg-blue-100"],
    [class*="bg-indigo-50"],
    [class*="bg-indigo-100"],
    [class*="bg-cyan-50"],
    [class*="bg-cyan-100"]
),
html.dark :is(
    [class*="bg-sky-50"],
    [class*="bg-sky-100"],
    [class*="bg-blue-50"],
    [class*="bg-blue-100"],
    [class*="bg-indigo-50"],
    [class*="bg-indigo-100"],
    [class*="bg-cyan-50"],
    [class*="bg-cyan-100"]
) {
    background-color: #2e2e2e !important;
}

/* Varian gelap (900/950) jadi hitam pekat. */
html.dark-mode :is(
    [class*="bg-sky-900"],
    [class*="bg-sky-950"],
    [class*="bg-blue-900"],
    [class*="bg-blue-950"],
    [class*="bg-indigo-900"],
    [class*="bg-indigo-950"],
    [class*="bg-cyan-900"],
    [class*="bg-cyan-950"]
),
html.dark :is(
    [class*="bg-sky-900"],
    [class*="bg-sky-950"],
    [class*="bg-blue-900"],
    [class*="bg-blue-950"],
    [class*="bg-indigo-900"],
    [class*="bg-indigo-950"],
    [class*="bg-cyan-900"],
    [class*="bg-cyan-950"]
) {
    background-color: #1a1a1a !important;
}

/* Hover/active biru -> abu-abu netral yang sedikit lebih terang. */
html.dark-mode :is(
    [class*="hover:bg-sky-"],
    [class*="hover:bg-blue-"],
    [class*="hover:bg-indigo-"],
    [class*="hover:bg-cyan-"]
):hover,
html.dark :is(
    [class*="hover:bg-sky-"],
    [class*="hover:bg-blue-"],
    [class*="hover:bg-indigo-"],
    [class*="hover:bg-cyan-"]
):hover {
    background-color: #383838 !important;
}

/* --- Teks biru -> abu-abu terang --------------------------------------- */
html.dark-mode :is(
    [class*="text-sky-"],
    [class*="text-blue-"],
    [class*="text-indigo-"],
    [class*="text-cyan-"]
),
html.dark :is(
    [class*="text-sky-"],
    [class*="text-blue-"],
    [class*="text-indigo-"],
    [class*="text-cyan-"]
) {
    color: #d4d4d4 !important;
}

html.dark-mode :is(
    [class*="text-sky-50"],
    [class*="text-sky-100"],
    [class*="text-sky-200"],
    [class*="text-blue-50"],
    [class*="text-blue-100"],
    [class*="text-blue-200"],
    [class*="text-indigo-50"],
    [class*="text-indigo-100"],
    [class*="text-indigo-200"],
    [class*="text-cyan-50"],
    [class*="text-cyan-100"],
    [class*="text-cyan-200"]
),
html.dark :is(
    [class*="text-sky-50"],
    [class*="text-sky-100"],
    [class*="text-sky-200"],
    [class*="text-blue-50"],
    [class*="text-blue-100"],
    [class*="text-blue-200"],
    [class*="text-indigo-50"],
    [class*="text-indigo-100"],
    [class*="text-indigo-200"],
    [class*="text-cyan-50"],
    [class*="text-cyan-100"],
    [class*="text-cyan-200"]
) {
    color: #a3a3a3 !important;
}

html.dark-mode :is(
    [class*="hover:text-sky-"],
    [class*="hover:text-blue-"],
    [class*="hover:text-indigo-"],
    [class*="hover:text-cyan-"]
):hover,
html.dark :is(
    [class*="hover:text-sky-"],
    [class*="hover:text-blue-"],
    [class*="hover:text-indigo-"],
    [class*="hover:text-cyan-"]
):hover {
    color: #f5f5f5 !important;
}

/* --- Border / ring biru -> abu-abu ------------------------------------- */
html.dark-mode :is(
    [class*="border-sky-"],
    [class*="border-blue-"],
    [class*="border-indigo-"],
    [class*="border-cyan-"],
    [class*="ring-sky-"],
    [class*="ring-blue-"],
    [class*="ring-indigo-"],
    [class*="ring-cyan-"]
),
html.dark :is(
    [class*="border-sky-"],
    [class*="border-blue-"],
    [class*="border-indigo-"],
    [class*="border-cyan-"],
    [class*="ring-sky-"],
    [class*="ring-blue-"],
    [class*="ring-indigo-"],
    [class*="ring-cyan-"]
) {
    border-color: #3a3a3a !important;
}

html.dark-mode :is(
    [class*="ring-sky-"],
    [class*="ring-blue-"],
    [class*="ring-indigo-"],
    [class*="ring-cyan-"]
),
html.dark :is(
    [class*="ring-sky-"],
    [class*="ring-blue-"],
    [class*="ring-indigo-"],
    [class*="ring-cyan-"]
) {
    --tw-ring-color: #525252 !important;
}

/* --- Gradient biru -> abu-abu -------------------------------------------- */
html.dark-mode :is(
    [class*="from-sky-"],
    [class*="from-blue-"],
    [class*="from-indigo-"],
    [class*="from-cyan-"]
),
html.dark :is(
    [class*="from-sky-"],
    [class*="from-blue-"],
    [class*="from-indigo-"],
    [class*="from-cyan-"]
) {
    --tw-gradient-from: #303030 !important;
    --tw-gradient-stops: #303030 !important;
}

html.dark-mode :is(
    [class*="via-sky-"],
    [class*="via-blue-"],
    [class*="via-indigo-"],
    [class*="via-cyan-"]
),
html.dark :is(
    [class*="via-sky-"],
    [class*="via-blue-"],
    [class*="via-indigo-"],
    [class*="via-cyan-"]
) {
    --tw-gradient-via: #262626 !important;
    --tw-gradient-stops: #262626 !important;
}

html.dark-mode :is(
    [class*="to-sky-"],
    [class*="to-blue-"],
    [class*="to-indigo-"],
    [class*="to-cyan-"]
),
html.dark :is(
    [class*="to-sky-"],
    [class*="to-blue-"],
    [class*="to-indigo-"],
    [class*="to-cyan-"]
) {
    --tw-gradient-to: #1f1f1f !important;
    --tw-gradient-stops: #1f1f1f !important;
}

/* --- Aksen biru solid (indikator aktif, tombol) -> netral/amber --------- */
html.dark-mode :is([class~="bg-blue-500"], [class~="bg-sky-500"], [class~="bg-indigo-500"], [class~="bg-cyan-500"]),
html.dark :is([class~="bg-blue-500"], [class~="bg-sky-500"], [class~="bg-indigo-500"], [class~="bg-cyan-500"]) {
    background-color: #525252 !important;
}

html.dark-mode :is([class~="bg-blue-600"], [class~="bg-sky-600"], [class~="bg-indigo-600"], [class~="bg-cyan-600"]),
html.dark :is([class~="bg-blue-600"], [class~="bg-sky-600"], [class~="bg-indigo-600"], [class~="bg-cyan-600"]) {
    background-color: #404040 !important;
}

html.dark-mode :is([class~="bg-blue-400"], [class~="bg-sky-400"], [class~="bg-indigo-400"], [class~="bg-cyan-400"]),
html.dark :is([class~="bg-blue-400"], [class~="bg-sky-400"], [class~="bg-indigo-400"], [class~="bg-cyan-400"]) {
    background-color: #737373 !important;
}

/* --- Placeholder & ikon biru -------------------------------------------- */
html.dark-mode :is([class*="placeholder-sky-"], [class*="placeholder-blue-"], [class*="placeholder-indigo-"], [class*="placeholder-cyan-"]),
html.dark :is([class*="placeholder-sky-"], [class*="placeholder-blue-"], [class*="placeholder-indigo-"], [class*="placeholder-cyan-"]) {
    --tw-placeholder-color: #737373 !important;
}

html.dark-mode :is([class*="placeholder-sky-"], [class*="placeholder-blue-"], [class*="placeholder-indigo-"], [class*="placeholder-cyan-"])::-webkit-input-placeholder,
html.dark :is([class*="placeholder-sky-"], [class*="placeholder-blue-"], [class*="placeholder-indigo-"], [class*="placeholder-cyan-"])::-webkit-input-placeholder {
    color: #737373 !important;
}

html.dark-mode :is([class*="placeholder-sky-"], [class*="placeholder-blue-"], [class*="placeholder-indigo-"], [class*="placeholder-cyan-"])::-moz-placeholder,
html.dark :is([class*="placeholder-sky-"], [class*="placeholder-blue-"], [class*="placeholder-indigo-"], [class*="placeholder-cyan-"])::-moz-placeholder {
    color: #737373 !important;
}

/* --- Focus ring biru -> netral ------------------------------------------ */
html.dark-mode :is([class*="focus:border-sky-"], [class*="focus:border-blue-"], [class*="focus:border-indigo-"], [class*="focus:border-cyan-"]):focus,
html.dark :is([class*="focus:border-sky-"], [class*="focus:border-blue-"], [class*="focus:border-indigo-"], [class*="focus:border-cyan-"]):focus {
    border-color: #525252 !important;
}

html.dark-mode :is([class*="focus:ring-sky-"], [class*="focus:ring-blue-"], [class*="focus:ring-indigo-"], [class*="focus:ring-cyan-"]):focus,
html.dark :is([class*="focus:ring-sky-"], [class*="focus:ring-blue-"], [class*="focus:ring-indigo-"], [class*="focus:ring-cyan-"]):focus {
    --tw-ring-color: #525252 !important;
    box-shadow: 0 0 0 4px rgb(82 82 82 / .25) !important;
}

/* --- Selection & scrollbar --------------------------------------------- */
html.dark-mode ::selection,
html.dark ::selection {
    background-color: #404040 !important;
    color: #fafafa !important;
}

/* --- Badge / pill biru --------------------------------------------------- */
html.dark-mode :is([class*="bg-sky-200"], [class*="bg-blue-200"], [class*="bg-indigo-200"], [class*="bg-cyan-200"]),
html.dark :is([class*="bg-sky-200"], [class*="bg-blue-200"], [class*="bg-indigo-200"], [class*="bg-cyan-200"]) {
    background-color: #404040 !important;
}

/* --- Select / option dropdown ------------------------------------------- */
html.dark-mode select,
html.dark-mode option,
html.dark select,
html.dark option {
    background-color: #171717 !important;
    color: #e5e5e5 !important;
}

/* --- Scrollbar global ---------------------------------------------------- */
html.dark-mode *::-webkit-scrollbar,
html.dark *::-webkit-scrollbar {
    background-color: #171717;
}

html.dark-mode *::-webkit-scrollbar-thumb,
html.dark *::-webkit-scrollbar-thumb {
    background-color: #404040;
    border-radius: 999px;
}

html.dark-mode *::-webkit-scrollbar-thumb:hover,
html.dark *::-webkit-scrollbar-thumb:hover {
    background-color: #525252;
}