/* ==========================================================================
   RenataSkripsi — Unified Button & Modal Interaction Design System
   ========================================================================== */

/* Anti-Scroll Lock saat Pop-up / Modal Terbuka (Desktop & Mobile) */
html.modal-open,
body.modal-open {
    overflow: hidden !important;
    height: 100% !important;
    max-height: 100% !important;
    overscroll-behavior: none !important;
}

/* Modal overlays & scrollable bodies must contain their own scrolling */
.sub-modal-overlay,
.promo-modal-overlay,
.status-modal-overlay,
#notifDetailModalOverlay,
.modal-overlay,
.modal-backdrop {
    overscroll-behavior: contain !important;
}

.sub-modal-card,
#subModalBody,
.promo-modal-card,
.promo-body,
.status-modal,
#notifDetailCard,
#notifDetailBody {
    overscroll-behavior: contain !important;
    touch-action: pan-y !important;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    font-weight: 700;
    border-radius: 0.75rem;
    white-space: nowrap;
    border: none;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.18s ease,
                filter 0.18s ease,
                background-color 0.18s ease,
                border-color 0.18s ease,
                color 0.18s ease;
    line-height: 1.1;
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.35);
}
.btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}
.btn svg { flex-shrink: 0; }

/* ---- Sizes & Layout ---- */
.btn-md { padding: 0.625rem 1rem; font-size: 0.8125rem; border-radius: 0.75rem; }
.btn-sm { padding: 0.5rem 0.75rem; font-size: 0.75rem; border-radius: 0.625rem; }
.btn-icon-only { padding: 0.625rem; }
.btn-full { width: 100%; display: flex; }
@media (min-width: 640px) {
    .btn-md { padding: 0.625rem 1.125rem; font-size: 0.875rem; }
}

/* ---- Primary CTA (gradient & solid) ---- */
.btn-primary,
.btn-gradient {
    background: var(--gradient-brand, linear-gradient(135deg, #7c3aed 0%, #6366f1 100%));
    color: #fff;
    box-shadow: 0 4px 14px rgba(124,58,237,0.3), 0 2px 4px rgba(124,58,237,0.15);
    position: relative;
    overflow: hidden;
}
.btn-primary::after,
.btn-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}
.btn-primary:hover:not(:disabled),
.btn-gradient:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(124,58,237,0.42), 0 4px 8px rgba(124,58,237,0.22);
    filter: brightness(1.05);
}
.btn-primary:hover:not(:disabled)::after,
.btn-gradient:hover:not(:disabled)::after { transform: translateX(100%); }
.btn-primary:active:not(:disabled),
.btn-gradient:active:not(:disabled) { transform: translateY(0) scale(0.97); }

/* ---- Dark neutral (e.g. Download / Lihat) ---- */
.btn-dark {
    background: #111827;
    color: #fff;
    box-shadow: 0 2px 8px rgba(17,24,39,0.18);
}
.btn-dark:hover:not(:disabled) { background: #1f2937; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(17,24,39,0.24); }
.btn-dark:active:not(:disabled) { transform: translateY(0) scale(0.97); }

/* ---- Soft accent buttons (toolbar actions) ---- */
.btn-accent-purple  { background: #7c3aed; color: #fff; box-shadow: 0 2px 8px rgba(124,58,237,0.22); }
.btn-accent-purple:hover:not(:disabled)  { background: #6d28d9; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(124,58,237,0.3); }

.btn-accent-indigo  { background: #4f46e5; color: #fff; box-shadow: 0 2px 8px rgba(79,70,229,0.22); }
.btn-accent-indigo:hover:not(:disabled)  { background: #4338ca; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(79,70,229,0.3); }

.btn-accent-emerald { background: #059669; color: #fff; box-shadow: 0 2px 8px rgba(5,150,105,0.22); }
.btn-accent-emerald:hover:not(:disabled) { background: #047857; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(5,150,105,0.3); }

.btn-accent-purple:active:not(:disabled),
.btn-accent-indigo:active:not(:disabled),
.btn-accent-emerald:active:not(:disabled) { transform: translateY(0) scale(0.97); }

/* ---- Outline / secondary (Kembali, Batal, dsb) ---- */
.btn-outline {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    color: #374151;
}
.btn-outline:hover:not(:disabled) {
    border-color: #7c3aed;
    color: #7c3aed;
    background: rgba(124,58,237,0.04);
    transform: translateY(-1px);
}
.btn-outline:active:not(:disabled) { transform: translateY(0) scale(0.98); }

.btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #e5e7eb;
}
.btn-secondary:hover:not(:disabled) { background: #e5e7eb; color: #111827; transform: translateY(-1px); }
.btn-secondary:active:not(:disabled) { transform: translateY(0) scale(0.98); }

/* ---- Soft status buttons (row actions: Hapus/Restore/Unlock) ---- */
.btn-soft-red    { background: #fef2f2; color: #b91c1c; }
.btn-soft-red:hover:not(:disabled)    { background: #fee2e2; }
.btn-soft-amber  { background: #fffbeb; color: #b45309; }
.btn-soft-amber:hover:not(:disabled)  { background: #fef3c7; }
.btn-soft-green  { background: #f0fdf4; color: #15803d; }
.btn-soft-green:hover:not(:disabled)  { background: #dcfce7; }

/* ---- Strong danger (permanent/destructive) ---- */
.btn-danger {
    background: #dc2626;
    color: #fff;
    box-shadow: 0 2px 8px rgba(220,38,38,0.22);
}
.btn-danger:hover:not(:disabled) { background: #b91c1c; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(220,38,38,0.3); }
.btn-danger:active:not(:disabled) { transform: translateY(0) scale(0.97); }

.btn-danger-strong {
    background: #991b1b;
    color: #fff;
}
.btn-danger-strong:hover:not(:disabled) { background: #7f1d1d; }

.btn-success {
    background: #059669;
    color: #fff;
}
.btn-success:hover:not(:disabled) { background: #047857; transform: translateY(-1px); }

/* ---- Active/selected nav-style pill (e.g. current page indicator) ---- */
.btn-pill-active {
    background: rgba(124,58,237,0.08);
    color: #7c3aed;
}

@media (max-width: 639px) {
    .btn-md { gap: 0.4rem; padding: 0.625rem 1rem; font-size: 0.8125rem; min-height: 44px; }
    .btn-sm { gap: 0.3rem; padding: 0.45rem 0.75rem; font-size: 0.75rem; min-height: 38px; }
    .btn { max-width: 100%; box-sizing: border-box; }
}

@media (pointer: coarse) {
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    #dark-mode-toggle,
    #notif-bell-btn,
    .status-modal-close,
    .pwd-toggle-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

/* ========================================================================= */
/* ANDROID GESTURE BAR & PUNCH-HOLE COMPLIANCE                               */
/* ========================================================================= */
@media (max-width: 640px) {
    /* Pastikan drawer, footer, modal tidak tertutup gesture bar Android */
    #mobileSidebarDrawer,
    #historySidebarDrawer,
    #projectSidebarDrawer {
        padding-bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 16px)) !important;
    }
    .modal-content,
    .settings-modal-content,
    .modal-panel,
    .sub-modal-card {
        margin-bottom: max(16px, env(safe-area-inset-bottom, 0px)) !important;
    }
    /* Toolbar fixed di mobile dengan safe clearance */
    #wordDocNavControls {
        left: 4px !important;
        right: 4px !important;
        width: auto !important;
        box-sizing: border-box !important;
    }
}

/* ---- Small inline hover utilities (plain CSS, NOT part of the Tailwind
   build) — dipakai di index.html untuk tombol yang sebelumnya pakai
   onmouseover/onmouseout inline JS. Ini bukan class Tailwind: file
   tailwind.min.css di project ini di-COMPILE lewat `npm run build:css`
   (lihat package.json), jadi class hover: baru yang belum pernah dipakai
   di source SEBELUM build terakhir tidak akan punya aturan CSS sama
   sekali. Supaya tidak tergantung rebuild, hover-hover kecil ini taruh
   di sini saja sebagai CSS biasa. */
.hover-text-indigo:hover  { color: #4f46e5 !important; }
.hover-bg-gray-800:hover  { background: #1f2937 !important; }
.hover-text-purple-900:hover { color: #5b21b6 !important; }
.hover-bg-gray-100:hover  { background: #f3f4f6 !important; }

/* ========================================================================= */
/* UNIVERSAL COMPREHENSIVE DARK MODE DESIGN SYSTEM                           */
/* Menjamin keterbacaan kontras tinggi, warna teks konsisten, dan anti-silau */
/* ========================================================================= */
[data-theme="dark"],
[data-theme="dark"] body {
    background-color: #0f172a !important;
    color: #f8fafc !important;
}

/* 1. Global Typography: Judul, Heading & Teks Penting */
[data-theme="dark"] h1:not(.word-page *),
[data-theme="dark"] h2:not(.word-page *),
[data-theme="dark"] h3:not(.word-page *),
[data-theme="dark"] h4:not(.word-page *),
[data-theme="dark"] h5:not(.word-page *),
[data-theme="dark"] h6:not(.word-page *),
[data-theme="dark"] strong:not(.word-page *),
[data-theme="dark"] b:not(.word-page *) {
    color: #f8fafc !important;
}

/* 2. Teks Deskriptif, Subtitle, & Paragraf */
[data-theme="dark"] p:not(.word-page *),
[data-theme="dark"] .step-subtitle,
[data-theme="dark"] .adm-page-sub,
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-slate-500,
[data-theme="dark"] .text-slate-600 {
    color: #cbd5e1 !important;
}

/* 3. Global Form Labels */
[data-theme="dark"] label:not(.word-page *),
[data-theme="dark"] label span:not([style*="red"]):not([style*="#ef4444"]):not([style*="#dc2626"]) {
    color: #e2e8f0 !important;
}

/* 4. Global Inputs, Selects, & Textareas */
[data-theme="dark"] .form-input,
[data-theme="dark"] input.form-input,
[data-theme="dark"] select.form-input,
[data-theme="dark"] textarea.form-input,
[data-theme="dark"] .adm-input {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
[data-theme="dark"] .form-input:hover,
[data-theme="dark"] input.form-input:hover,
[data-theme="dark"] select.form-input:hover,
[data-theme="dark"] textarea.form-input:hover {
    border-color: #7c3aed !important;
}
[data-theme="dark"] .form-input:focus,
[data-theme="dark"] input.form-input:focus,
[data-theme="dark"] select.form-input:focus,
[data-theme="dark"] textarea.form-input:focus {
    background-color: #0f172a !important;
    border-color: #a78bfa !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(124,58,237,0.25) !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] .form-input::placeholder {
    color: #64748b !important;
}
[data-theme="dark"] select option {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}
[data-theme="dark"] select optgroup {
    background-color: #0f172a !important;
    color: #a78bfa !important;
}

/* 5. Pembersihan inline style teks hitam/abu gelap pada elemen UI */
[data-theme="dark"] *[style*="#0f172a"]:not(.word-page *):not(.word-page),
[data-theme="dark"] *[style*="#111827"]:not(.word-page *):not(.word-page),
[data-theme="dark"] *[style*="#1e293b"]:not(.word-page *):not(.word-page),
[data-theme="dark"] *[style*="#374151"]:not(.word-page *):not(.word-page),
[data-theme="dark"] *[style*="#1f2937"]:not(.word-page *):not(.word-page) {
    color: #f8fafc !important;
}

[data-theme="dark"] *[style*="#475569"]:not(.word-page *):not(.word-page),
[data-theme="dark"] *[style*="#64748b"]:not(.word-page *):not(.word-page),
[data-theme="dark"] *[style*="#6b7280"]:not(.word-page *):not(.word-page),
[data-theme="dark"] *[style*="#334155"]:not(.word-page *):not(.word-page),
[data-theme="dark"] *[style*="#94a3b8"]:not(.word-page *):not(.word-page),
[data-theme="dark"] *[style*="#9ca3af"]:not(.word-page *):not(.word-page) {
    color: #cbd5e1 !important;
}

/* Teks ungu gelap di latar gelap diubah menjadi lavender terang ber-kontras tinggi */
[data-theme="dark"] span[style*="#7c3aed"],
[data-theme="dark"] div[style*="#7c3aed"]:not([style*="background"]),
[data-theme="dark"] p[style*="#7c3aed"],
[data-theme="dark"] span[style*="#6d28d9"],
[data-theme="dark"] div[style*="#6d28d9"]:not([style*="background"]),
[data-theme="dark"] p[style*="#6d28d9"] {
    color: #c4b5fd !important;
}

/* Tombol aksen dengan background gold tetap mempertahankan teks gelap pekat agar kontras tinggi */
[data-theme="dark"] #navSubBtn,
[data-theme="dark"] #navSubBtn *,
[data-theme="dark"] #superAdminBanner a,
[data-theme="dark"] #superAdminBanner a * {
    color: #0f172a !important;
    font-weight: 800 !important;
}

/* Teks tombol Coba Contoh & Uji Judul & Sampel di mode gelap */
[data-theme="dark"] button[onclick="fillSample()"],
[data-theme="dark"] button[onclick="fillSample()"] * {
    color: #c4b5fd !important;
}
[data-theme="dark"] button[onclick="openTitleAnalyzerModal()"] {
    background: rgba(124,58,237,0.2) !important;
    color: #c4b5fd !important;
    border-color: #6d28d9 !important;
}
[data-theme="dark"] button[onclick="openSampleCalculatorModal()"] {
    background: rgba(16,185,129,0.2) !important;
    color: #6ee7b7 !important;
    border-color: #059669 !important;
}

/* Login Page Dark Mode Enhancements */
[data-theme="dark"] .tab-btn:not(.active) {
    color: #94a3b8 !important;
}
[data-theme="dark"] .tab-btn.active {
    color: #ffffff !important;
}
[data-theme="dark"] .text-link,
[data-theme="dark"] .footer-link a {
    color: #c4b5fd !important;
}

/* Admin Dashboard Elements Dark Mode */
[data-theme="dark"] .adm-num {
    background: rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
}
[data-theme="dark"] .adm-menu button {
    color: #cbd5e1 !important;
}
[data-theme="dark"] .adm-menu button.active {
    color: #ffffff !important;
    background: rgba(124,58,237,0.35) !important;
}
[data-theme="dark"] #adm-top-profile span[style*="#fef3c7"] {
    background: rgba(245,158,11,0.2) !important;
    color: #fbbf24 !important;
}

/* 6. Step ProgressBar di index.html */
[data-theme="dark"] .step-item .step-label { color: #94a3b8 !important; }
[data-theme="dark"] .step-item.active .step-label { color: #c4b5fd !important; font-weight: 800 !important; }
[data-theme="dark"] .step-item.complete .step-label { color: #34d399 !important; font-weight: 800 !important; }
[data-theme="dark"] .step-line { background: #334155 !important; }
[data-theme="dark"] .step-dot:not(.complete):not(.active) {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}

[data-theme="dark"] .btn-secondary {
    background: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1.5px solid #334155 !important;
}
[data-theme="dark"] .btn-secondary:hover:not(:disabled) {
    background: #334155 !important;
    color: #ffffff !important;
    border-color: #64748b !important;
}

/* 7. Modal & Panel Dialogs (Academic Tools, Bimbingan Review, Originality, Sidang, Subscriptions) */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .sub-modal-card,
[data-theme="dark"] #subModalBody,
[data-theme="dark"] #subModalFooter,
[data-theme="dark"] #sidangCard,
[data-theme="dark"] #sidangBody,
[data-theme="dark"] #refSearchCard,
[data-theme="dark"] #refSearchBody,
[data-theme="dark"] #refSearchBody > div,
[data-theme="dark"] #bimbinganCard,
[data-theme="dark"] #bimbinganBody,
[data-theme="dark"] #bimbinganDropzone,
[data-theme="dark"] #originalityCard,
[data-theme="dark"] #originalityBody,
[data-theme="dark"] #fbCard,
[data-theme="dark"] #fbBody,
[data-theme="dark"] #chatEditPanel,
[data-theme="dark"] #chatEditMessages,
[data-theme="dark"] #notifDetailCard,
[data-theme="dark"] #notifDetailBody,
[data-theme="dark"] #kcPanel {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

[data-theme="dark"] #notifDetailMessage {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* VIP Active Live Countdown Styling (Light & Dark Mode WCAG AAA) */
.cd-segment {
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

[data-theme="dark"] #vipActiveCountdown .cd-segment {
    background: #0f172a !important;
    border-color: #059669 !important;
    color: #6ee7b7 !important;
}

[data-theme="dark"] #cdSecs {
    color: #f87171 !important;
}

/* 8. Sub-kotak / item kartu di dalam modal */
[data-theme="dark"] div[style*="background:#ffffff"]:not(.word-page):not(.word-page *),
[data-theme="dark"] div[style*="background: #ffffff"]:not(.word-page):not(.word-page *),
[data-theme="dark"] div[style*="background:#fff"]:not(.word-page):not(.word-page *),
[data-theme="dark"] div[style*="background: #fff"]:not(.word-page):not(.word-page *),
[data-theme="dark"] div[style*="background:#f8fafc"]:not(.word-page):not(.word-page *),
[data-theme="dark"] div[style*="background: #f8fafc"]:not(.word-page):not(.word-page *),
[data-theme="dark"] div[style*="background:#f1f5f9"]:not(.word-page):not(.word-page *),
[data-theme="dark"] div[style*="background: #f1f5f9"]:not(.word-page):not(.word-page *),
[data-theme="dark"] div[style*="background:#f5f3ff"]:not(.word-page):not(.word-page *),
[data-theme="dark"] div[style*="background: #f5f3ff"]:not(.word-page):not(.word-page *),
[data-theme="dark"] div[style*="background:#faf5ff"]:not(.word-page):not(.word-page *),
[data-theme="dark"] div[style*="background: #faf5ff"]:not(.word-page):not(.word-page *) {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

/* 9. Konsultasi Chat Dark Mode */
[data-theme="dark"] #kcPanel {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: #334155 !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5) !important;
}
[data-theme="dark"] .kc-welcome {
    background: #1e293b !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .kc-welcome h3 { color: #f8fafc !important; }
[data-theme="dark"] .kc-welcome p { color: #94a3b8 !important; }
[data-theme="dark"] .kc-chip {
    background: rgba(124, 58, 237, 0.18) !important;
    border-color: #4338ca !important;
    color: #c4b5fd !important;
}
[data-theme="dark"] .kc-chip:hover {
    background: rgba(124, 58, 237, 0.32) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}
[data-theme="dark"] .kc-msg-ai .kc-bubble {
    background: #1e293b !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .kc-textarea {
    background: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}
[data-theme="dark"] .kc-textarea::placeholder {
    color: #64748b !important;
}
[data-theme="dark"] .kc-input-area {
    background: #1e293b !important;
    border-top-color: #334155 !important;
}

/* 10. Kertas Word A4 (.word-page) — DIPERTAHANKAN OTENTIK PUTIH DOKUMEN CETAK (KECUALI DARK PAPER MODE / SEPIA) */
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page {
    background: #ffffff !important;
    color: #111111 !important;
}
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page * {
    color: #111111;
}
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page h1, 
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page h2, 
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page h3, 
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page h4, 
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page p,
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page span, 
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page div, 
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page td, 
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page th, 
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page li {
    color: #111111 !important;
}
.word-page-footer {
    color: #444444 !important;
}
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page pre {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}
body:not(.dark-paper-mode):not(.paper-theme-sepia) .word-page pre code {
    color: #0f172a !important;
}

/* 11. Proteksi QRIS Canvas (Selalu Putih & Hitam Pekat untuk Kemudahan Scan Mobile Banking) */
#qrisDynamicCanvas,
#qrisDynamicCanvas canvas,
#qrisDynamicCanvas img {
    background: #ffffff !important;
    color: #0f172a !important;
}

/* 12. Tombol & Komponen Universal Dark Mode Enhancements */
[data-theme="dark"] .btn-dark {
    background: #334155 !important;
    color: #f8fafc !important;
    border-color: #475569 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}
[data-theme="dark"] .btn-dark:hover:not(:disabled) {
    background: #475569 !important;
}

[data-theme="dark"] .btn-outline {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #cbd5e1 !important;
}
[data-theme="dark"] .btn-outline:hover:not(:disabled) {
    border-color: #a78bfa !important;
    color: #c4b5fd !important;
    background: rgba(124,58,237,0.14) !important;
}

[data-theme="dark"] .btn-soft-red {
    background: rgba(220,38,38,0.18) !important;
    color: #fca5a5 !important;
}
[data-theme="dark"] .btn-soft-red:hover:not(:disabled) {
    background: rgba(220,38,38,0.28) !important;
}
[data-theme="dark"] .btn-soft-amber {
    background: rgba(245,158,11,0.15) !important;
    color: #fcd34d !important;
}
[data-theme="dark"] .btn-soft-amber:hover:not(:disabled) {
    background: rgba(245,158,11,0.25) !important;
}
[data-theme="dark"] .btn-soft-green {
    background: rgba(16,185,129,0.15) !important;
    color: #6ee7b7 !important;
}
[data-theme="dark"] .btn-soft-green:hover:not(:disabled) {
    background: rgba(16,185,129,0.25) !important;
}

[data-theme="dark"] .btn-pill-active {
    background: rgba(124,58,237,0.25) !important;
    color: #c4b5fd !important;
}

[data-theme="dark"] .hover-bg-gray-100:hover {
    background: #334155 !important;
}

/* 13. Universal Drawer & Modal Scrim Consistency */
[data-theme="dark"] #mobileSidebarDrawer,
[data-theme="dark"] #historySidebarDrawer,
[data-theme="dark"] #projectSidebarDrawer {
    background: #0f172a !important;
    color: #f8fafc !important;
}
[data-theme="dark"] #mobileSidebarDrawer > div:first-child,
[data-theme="dark"] #historySidebarDrawer > div:first-child,
[data-theme="dark"] #projectSidebarDrawer > div:first-child {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
    border-bottom-color: #334155 !important;
}
[data-theme="dark"] #mobileSidebarDrawer > div:first-child div[style*="color:#111827"],
[data-theme="dark"] #historySidebarDrawer > div:first-child div[style*="color:#111827"],
[data-theme="dark"] #projectSidebarDrawer > div:first-child div[style*="color:#111827"] {
    color: #f8fafc !important;
}
[data-theme="dark"] #mobileSidebarDrawer > div:first-child div[style*="color:#7c3aed"],
[data-theme="dark"] #historySidebarDrawer > div:first-child div[style*="color:#7c3aed"],
[data-theme="dark"] #projectSidebarDrawer > div:first-child div[style*="color:#7c3aed"] {
    color: #c4b5fd !important;
}
[data-theme="dark"] #mobileSidebarDrawer button[onclick*="closeMobileSidebar"],
[data-theme="dark"] #historySidebarDrawer button[onclick*="closeHistorySidebar"],
[data-theme="dark"] #projectSidebarDrawer button[onclick*="closeProjectSidebar"] {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
[data-theme="dark"] #drawerAuthContainer,
[data-theme="dark"] #drawerHistoryAuthContainer,
[data-theme="dark"] #drawerProjectAuthContainer {
    background: #0f172a !important;
    border-top-color: #334155 !important;
}

/* 14. Universal Form & Status Modal Refinements */
[data-theme="dark"] .glass-card {
    background: rgba(30, 41, 59, 0.95) !important;
    border-color: #334155 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
}
[data-theme="dark"] .status-modal-details {
    background: #0f172a !important;
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
[data-theme="dark"] .status-modal-details .k {
    color: #64748b !important;
}
[data-theme="dark"] .status-modal-details .v {
    color: #e2e8f0 !important;
}
[data-theme="dark"] .status-modal-btn.ghost {
    color: #94a3b8 !important;
}
[data-theme="dark"] .status-modal-btn.ghost:hover {
    color: #f8fafc !important;
    background: rgba(255,255,255,0.06) !important;
}
[data-theme="dark"] select.form-input,
[data-theme="dark"] select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2394a3b8'%3E%3Cpath fill-rule='evenodd' d='M5.5 7l4.5 5 4.5-5H5.5z'/%3E%3C/svg%3E") !important;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #334155 !important;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #475569 !important;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0f172a !important;
}

/* ========================================================================= */
/* ACCESSIBILITY: PREFERS-REDUCED-MOTION (WCAG 2.1 Guideline 2.3.3)         */
/* ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .btn,
    .btn:hover,
    .btn-primary::after,
    .btn-gradient::after,
    .skeleton {
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* ========================================================================= */
/* UNIVERSAL LOADING SKELETON & A11Y TOKENS                                 */
/* ========================================================================= */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.skeleton {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite ease-in-out;
    border-radius: 8px;
}

[data-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
    background-size: 200% 100%;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 12px;
}

[data-theme="dark"] .skeleton-card {
    background: #1e293b;
    border-color: #334155;
}