@media (max-width: 1024px) {
    aside:not(#mainSidebar) {
        position: fixed !important;
        top: 4rem !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 85vw !important;
        max-width: 20rem !important;
        z-index: 1000 !important;
        background: #ffffff !important;

        transform: translateX(100%) !important;
        visibility: hidden !important;
        opacity: 0 !important;

        transition:
            transform 0.3s ease-in-out,
            opacity 0.3s ease-in-out,
            visibility 0.3s ease-in-out !important;
        overflow-y: auto !important;
        padding-bottom: 2rem !important;
        margin: 0 !important;

        border: none !important;
        outline: none !important;
    }

    aside:not(#mainSidebar).mobile-active {
        transform: translateX(0) !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: -10px 0 25px rgba(0, 0, 0, 0.2) !important;
    }
}

.exam-sidebar-overlay {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
        opacity 0.3s ease,
        visibility 0.3s ease !important;
    backdrop-filter: blur(2px) !important;
}

.exam-sidebar-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.int-modal-overlay,
.int-toast,
#intToast {
    z-index: 9999 !important;
}

html.dark-theme body,
html.dark-theme .page-bg,
html.dark-theme .min-h-screen,
html.dark-theme .page-wrapper,
html.dark-theme .main-wrapper,
html.dark-theme .bg-gradient-to-br {
    background: #0f172a !important;
    color: #f8fafc !important;
}

/* Force Cards & Containers Dark */
html.dark-theme .bg-white,
html.dark-theme .up-card,
html.dark-theme .preview-card,
html.dark-theme .feedback-card,
html.dark-theme .sidebar-box,
html.dark-theme .sidebar-card,
html.dark-theme .question-slide,
html.dark-theme .pe-global-header,
html.dark-theme .exam-drawer-mobile {
    background-color: #1e293b !important; /* Slate 800 */
    border-color: #334155 !important;
}

/* Overpower Tailwind Text Colors */
html.dark-theme .text-\[\#1F2937\],
html.dark-theme .text-slate-900,
html.dark-theme .text-slate-800,
html.dark-theme .text-slate-700,
html.dark-theme h1,
html.dark-theme h2,
html.dark-theme h3,
html.dark-theme h4,
html.dark-theme h5 {
    color: #f8fafc !important;
}

html.dark-theme .text-slate-600,
html.dark-theme .text-slate-500,
html.dark-theme .text-slate-400,
html.dark-theme p {
    color: #cbd5e1 !important;
}

/* Fix Inputs & Dropdowns */
html.dark-theme .pe-dropdown-menu,
html.dark-theme .int-modal-box {
    background: #1e293b !important;
    border-color: #334155 !important;
}
html.dark-theme input,
html.dark-theme select,
html.dark-theme textarea,
html.dark-theme .search-input {
    background-color: #0f172a !important;
    color: #f8fafc !important;
    border-color: #334155 !important;
}

/* Fix Buttons, Toggles, and Borders */
html.dark-theme .bg-slate-50,
html.dark-theme .bg-slate-100 {
    background-color: #334155 !important;
    border-color: #475569 !important;
}
html.dark-theme .border-slate-200,
html.dark-theme .border-slate-100 {
    border-color: #334155 !important;
}
html.dark-theme .up-toggle.inactive {
    background-color: #475569 !important;
}

/* Specific Exam Elements */
html.dark-theme .rationale-box {
    background-color: rgba(15, 23, 42, 0.5) !important;
    border-color: #334155 !important;
}
html.dark-theme .answer-option {
    border-color: #475569 !important;
}
html.dark-theme .answer-option:hover {
    background-color: #334155 !important;
}
html.dark-theme .action-buttons-group {
    border-top-color: #334155 !important;
}