/* Lifted verbatim from app.blade.php.
   Inline it was 39,716 bytes of HTML on every render;
   as a file the browser fetches it once. */
        /* Sidebar icon hover effect enhancement */
        #sidebar .kt-btn-icon:hover {
            transition: all 0.2s ease;
            transform: scale(1.05);
        }
        
        /* Notification badge pulse animation */
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                box-shadow: 0 2px 8px rgba(255, 59, 48, 0.4);
            }
            50% {
                transform: scale(1.05);
                box-shadow: 0 4px 16px rgba(255, 59, 48, 0.6);
            }
        }
        
        /* Quota Display - Integrated Dropdown Style */
        /* One grouped card, not a stack of disconnected slabs: the section owns
           the surface and the rows are separated by a hairline. */
        .quota-section {
            margin: 8px 8px 0;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--muted);
            overflow: hidden;
        }

        .quota-display {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 9px 12px;
            background: transparent;
            transition: background 0.15s ease;
        }

        .quota-display + .quota-display {
            border-top: 1px solid var(--border);
        }

        .quota-display:hover {
            background: var(--accent);
        }
        
        .quota-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 12px;
            font-weight: 500;
            color: var(--muted-foreground);
        }
        
        .quota-icon {
            font-size: 14px;
            color: var(--primary);
        }
        
        .quota-value {
            font-size: 14px;
            font-weight: 700;
            color: var(--foreground);
        }

        /* The HyperScan balance doubles as the way in to topping it up. */
        .quota-value-link {
            text-decoration: none;
        }

        .quota-value-link:hover {
            color: #6366f1;
        }

        /* Sits as the card's final row so the action reads as part of the same
           object, not a button floating underneath it. */
        .quota-buy-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            padding: 7px 12px;
            border-top: 1px solid var(--border);
            background: rgba(99, 102, 241, 0.08);
            color: #4f46e5;
            font-size: 11.5px;
            font-weight: 600;
            text-decoration: none;
            transition: background 0.15s ease;
        }

        .quota-buy-btn:hover {
            background: rgba(99, 102, 241, 0.16);
            color: #4338ca;
        }

        .quota-buy-btn i {
            font-size: 10px;
        }

        [data-kt-theme-mode="dark"] .quota-buy-btn,
        .dark .quota-buy-btn {
            background: rgba(165, 180, 252, 0.14);
            color: #a5b4fc;
        }
        
        /* Typography overrides */
        html.text-sm {
            font-size: 14px;
        }
        html.text-lg {
            font-size: 18px;
        }
        html.text-base {
            font-size: 16px;
        }
        
        /* Ensure font family is applied to all elements */
        * {
            font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
        }

        /* Header brand lockup — the wide PNG logo lives here. The brand area
           sits in the header row and is decoupled from --sidebar-width (the
           sidebar below the header still uses sidebar-width and is icon-only).
           The wide image extends across the icon-column boundary into the
           breadcrumb gutter, which is fine because the sidebar starts BELOW
           the header, not behind it. */
        .cq-brand-area {
            /* Slight left padding so the lockup hugs the left edge. Right
               padding kept tight so the "/" breadcrumb hugs the wordmark. */
            padding: 0 2px 0 12px;
            min-width: var(--sidebar-width, 58px);
            justify-content: flex-start;
        }
        @media (max-width: 1023px) {
            /* On mobile, the mobile menu button takes the lead. */
            .cq-brand-area { padding: 0 2px 0 8px; }
        }
        .cq-brand-link {
            padding: 4px 8px;
            border-radius: 8px;
            transition: background-color 0.15s ease;
            line-height: 0;
        }
        .cq-brand-link:hover { background-color: rgba(15, 23, 42, 0.04); }
        .dark .cq-brand-link:hover { background-color: rgba(255, 255, 255, 0.06); }

        /* Wide lockup — the full Codequiry brand image. Fixed height, width
           scales proportionally. flex-shrink: 0 stops the parent flex row
           from squishing it. max-height caps it so it never exceeds the
           header. */
        .cq-brand-wide {
            height: 21px;
            width: auto;
            max-width: none;
            max-height: calc(var(--header-height, 58px) - 22px);
            flex-shrink: 0;
            object-fit: contain;
            display: block;
        }
        @media (max-width: 640px) {
            /* On phones, drop the lockup a bit further so it doesn't
               crowd the menu / breadcrumb. */
            .cq-brand-wide { height: 20px; }
        }

        /* Light/dark variant swap. The dashboard uses data-kt-theme-mode="dark"
           on the root element, NOT Tailwind's `.dark` class — so this layout
           needs its own visibility rule rather than the dark: utility. */
        .cq-brand-wide--light { display: block; }
        .cq-brand-wide--dark  { display: none; }
        [data-kt-theme-mode="dark"] .cq-brand-wide--light { display: none; }
        [data-kt-theme-mode="dark"] .cq-brand-wide--dark  { display: block; }

        /* Demo-user square icon fallback (when a tenant has uploaded their
           own square branding mark — we keep that compact). */
        .cq-brand-icon {
            width: 26px;
            height: 26px;
            object-fit: contain;
            display: block;
        }

        .cq-brand-text {
            /* Match the wordmark in the brand logo: Poppins-family at heavy
               weight, tight tracking, lowercase, deep navy (the wordmark in
               the lockup reads as "almost black with a navy hint", not true
               black). */
            font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
            font-weight: 700;
            font-size: 20px;
            letter-spacing: -0.025em;
            color: #0c1d3d;
            line-height: 1;
            text-transform: lowercase;
        }
        .cq-brand-text:hover { color: #1e3a8a; text-decoration: none; }
        .dark .cq-brand-text { color: #f8fafc; }
        .dark .cq-brand-link:hover { background-color: rgba(255, 255, 255, 0.06); }

        /* Card Titles - Playfair Display Styling (matching Codequiry logo style) */
        .kt-card-title,
        .unified-table-title,
        .unified-title,
        .av-hero-title,
        .kt-menu-title {
            font-family: 'Playfair Display', serif;
            font-weight: 500;
        }
        
        /* Exclude top navigation menu items from Playfair Display */
        .kt-menu.gap-5 .kt-menu-title,
        .kt-menu[class*="gap-5"] .kt-menu-title,
        /* Target top nav menu items specifically */
        .kt-menu-item.border-b-2 .kt-menu-title {
            font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif) !important;
            font-weight: inherit;
        }
        
        /* Standard title sizes */
        .kt-card-title,
        .unified-table-title,
        .unified-title {
            font-size: 16px;
        }
        
        /* Hero titles are larger */
        .av-hero-title {
            font-size: 1.5rem;
        }
        
        /* Gradient text titles - Playfair Display Styling */
        h3.bg-gradient-to-r.bg-clip-text,
        h4.bg-gradient-to-r.bg-clip-text,
        .bg-gradient-to-r.bg-clip-text.text-transparent,
        h3.text-base.font-bold.bg-gradient-to-r.bg-clip-text,
        h4.text-base.font-bold.bg-gradient-to-r.bg-clip-text,
        /* More specific selectors for course page assignment names */
        a h3.bg-gradient-to-r.bg-clip-text,
        a h3.text-base.font-bold.bg-gradient-to-r.bg-clip-text,
        h3[class*="bg-gradient-to-r"][class*="bg-clip-text"],
        h4[class*="bg-gradient-to-r"][class*="bg-clip-text"],
        /* Universal selector for any element with both classes */
        [class*="bg-gradient-to-r"][class*="bg-clip-text"] h3,
        [class*="bg-gradient-to-r"][class*="bg-clip-text"] h4 {
            font-family: 'Playfair Display', serif !important;
            font-weight: 500 !important;
        }
        
        /* Specific override for assignment names on course page - highest specificity */
        .assignment-card a h3.bg-gradient-to-r.bg-clip-text,
        #assignments_grid a h3.bg-gradient-to-r.bg-clip-text,
        #assignments_list a h3.bg-gradient-to-r.bg-clip-text,
        .assignment-card h3[class*="bg-gradient-to-r"][class*="bg-clip-text"],
        #assignments_grid h3[class*="bg-gradient-to-r"][class*="bg-clip-text"],
        #assignments_list h3[class*="bg-gradient-to-r"][class*="bg-clip-text"],
        /* Direct child selector for maximum specificity */
        a > h3.bg-gradient-to-r.bg-clip-text.text-transparent,
        a > h3.text-base.font-bold.bg-gradient-to-r.bg-clip-text {
            font-family: 'Playfair Display', serif !important;
            font-weight: 500 !important;
        }
        
        /* Course selector button text - Playfair Display Styling */
        #course_selector_button_label,
        #course_selector_button_label_short {
            font-family: 'Playfair Display', serif;
            font-weight: 500;
        }
        
        /* Plagiarism Score label - Playfair Display Styling */
        .plagiarism-score-label {
            font-family: 'Playfair Display', serif;
            font-weight: 500;
        }
        
        /* Active state styles for navigation */
        .kt-menu-item.active .kt-menu-link {
            color: var(--primary) !important;
            font-weight: 600 !important;
        }
        
        .kt-menu-item.active .kt-menu-title {
            color: var(--primary) !important;
            font-weight: 600 !important;
        }
        
        /* Sidebar active state */
        .kt-btn.active {
            background-color: var(--background) !important;
            border-color: var(--input) !important;
        }
        
        .kt-btn.active .ki-filled {
            color: var(--primary) !important;
        }
        
        /* Vercel-style Sidebar Tooltips - Optimized */
        .sidebar-tooltip-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        /* Hide tooltips on mobile/tablet (below lg breakpoint) */
        @media (max-width: 1023px) {
            .sidebar-tooltip {
                display: none !important;
            }
        }
        
        .sidebar-tooltip {
            position: fixed;
            background: #52525b;
            color: #fff;
            padding: 6px 10px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease;
            z-index: 9999;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            transform: translateY(-50%) translateX(-6px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            /* Position will be set by JavaScript */
            left: 0;
            top: 0;
        }
        
        .sidebar-tooltip::before {
            content: '';
            position: absolute;
            left: -5px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
            border-right: 5px solid #52525b;
        }
        
        .sidebar-tooltip-wrapper:hover .sidebar-tooltip {
            opacity: 1;
            visibility: visible;
            transform: translateY(-50%) translateX(0);
        }
        
        /* Dark mode tooltip */
        [data-kt-theme-mode="dark"] .sidebar-tooltip {
            background: #3f3f46;
            border: 1px solid rgba(255, 255, 255, 0.15);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }
        
        [data-kt-theme-mode="dark"] .sidebar-tooltip::before {
            border-right: 5px solid #3f3f46;
        }
        
        /* Ensure tooltips don't interfere with button clicks */
        #sidebar .sidebar-tooltip-wrapper .kt-btn,
        #sidebar .sidebar-tooltip-wrapper form {
            position: relative;
        }
        
        /* Ensure logout button icon is visible */
        #sidebar .sidebar-tooltip-wrapper form .kt-btn,
        #sidebar .sidebar-tooltip-wrapper form button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }
        
        #sidebar .sidebar-tooltip-wrapper form .kt-btn i,
        #sidebar .sidebar-tooltip-wrapper form button i {
            display: inline-block;
            visibility: visible;
            opacity: 1;
        }
        
        /* Ensure sidebar tooltips appear above everything */
        #sidebar {
            z-index: 20;
        }
        
        /* Ensure wrapper doesn't create stacking context issues */
        #sidebar .sidebar-tooltip-wrapper {
            position: relative;
        }
        
        /* Hide scrollbars in sidebar while keeping scroll functionality */
        #sidebar {
            overflow: hidden;
        }

        /* Stripe.js appends hidden controller/metrics iframes to <body>. With no
           width constraint they can render ~700px wide and, being position:fixed,
           expand the scroll area — causing sideways scroll / dead space on mobile.
           They are non-visual API bridges, so pin them to 1px. Scoped by name
           prefix so the visible 3DS challenge and card Element iframes (different
           names) are never affected. */
        iframe[name^="__privateStripeController"],
        iframe[name^="__privateStripeMetricsController"] {
            width: 1px !important;
            max-width: 1px !important;
            height: 1px !important;
        }

        /* Sidebar on mobile/tablet: out of the layout when closed, a real drawer
           when opened.

           This used to be a flat `#sidebar { display: none !important }`, which
           also won against the drawer's own open state — so the hamburger
           (data-kt-drawer-toggle="#sidebar") did everything right, dropped
           `hidden`, added `.kt-drawer` and dimmed the page with a backdrop, and
           the panel it was opening stayed display:none. Every panel page was
           left with no navigation on mobile and a scrim over the content.

           KTDrawer marks the open panel with .open (and swaps Tailwind's
           hidden/flex); .kt-drawer itself is present in BOTH states, so the
           open state is what these two rules key on. Closed stays fully out of
           the mobile layout, open wins over the hard hide. */
        @media (max-width: 1023px) {
            #sidebar:not(.open) {
                display: none !important;
            }

            #sidebar.open {
                display: flex !important;
            }
            
            /* Ensure main content takes full width on mobile */
            #main_content_container {
                margin-left: 0 !important;
            }

            /* On mobile the sub-nav is in normal flow (not lg:fixed), so it must
               clear the fixed header itself. The page wrapper's pt-(--header-height)
               (which paddings for the header on desktop) is then redundant on mobile
               and would double the gap, so zero it here. */
            #navbar {
                margin-top: var(--header-height);
            }
            #page_wrapper {
                padding-top: 0 !important;
            }
        }
        
        #sidebar .kt-scrollable-y-auto {
            overflow-x: hidden !important;
            overflow-y: auto;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* IE and Edge */
            width: 100%;
            max-width: 100%;
        }
        
        #sidebar .kt-scrollable-y-auto::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }
        
        /* Prevent horizontal overflow in sidebar content */
        #sidebar_content {
            overflow-x: hidden;
            overflow-y: hidden;
            width: 100%;
            max-width: 100%;
        }
        
        /* Ensure sidebar items don't cause horizontal overflow */
        #sidebar .sidebar-tooltip-wrapper {
            width: 100%;
            max-width: 100%;
            overflow: visible;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        #sidebar .kt-btn,
        #sidebar button,
        #sidebar a {
            max-width: 100%;
            overflow: hidden;
        }
        
        /* Center the logout button */
        #sidebar .mt-auto.sidebar-tooltip-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }
        
        /* Top bar active state */
        .kt-menu-item.kt-menu-item-active {
            border-bottom-color: var(--primary) !important;
        }
        
        .kt-menu-item.kt-menu-item-active .kt-menu-title {
            color: var(--primary) !important;
            font-weight: 600 !important;
        }
        
        /* =============================================
           Z-INDEX HIERARCHY - CLEAN & ORGANIZED
           =============================================
           1:        Main content container (below everything)
           1-10:     Sticky elements inside content (epic nav = 10)
           50:       Header (fixed) - set via Tailwind z-50
           9999:     All dropdowns & menus (must be above header AND main content)
           10000:    Modal backdrops
           10001:    Modal content
           99999:    Notifications, toasts, critical overlays
           ============================================= */

        /* All dropdowns and menus - above header (z-50) and main content */
        .kt-menu-dropdown,
        .kt-dropdown-menu,
        [data-kt-dropdown-menu="true"],
        .dropdown-menu,
        [data-popper-placement] {
            z-index: 9999 !important;
        }

        /* Main content container must stay BELOW header dropdowns */
        #main_content_container {
            position: relative;
            z-index: 1;
        }

        /* Header must be above main content, dropdowns above header */
        #header {
            z-index: 50;
        }
        #header .kt-menu-dropdown,
        #header .kt-dropdown-menu,
        #header [data-kt-dropdown-menu="true"] {
            z-index: 9999 !important;
        }

        /* Topbar user dropdown - ensure it's above all other content when open */
        .topbar-user-dropdown {
            position: relative;
        }
        .topbar-user-dropdown .kt-dropdown-menu.open {
            z-index: 99999 !important;
            position: absolute;
        }

        /* Select library dropdowns */
        .ts-dropdown,
        .select2-dropdown,
        .selectize-dropdown,
        .chosen-drop {
            z-index: 9999 !important;
        }

        /* Body-level dropdowns (appended to body) */
        body > .ts-dropdown,
        body > .select2-dropdown {
            z-index: 9999 !important;
        }

        /* Impersonation warning banner styles */
        .impersonation-banner {
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }
        
        /* Ensure warning text is readable */
        .text-warning-dark {
            color: #92400e !important;
        }
        
        /* Custom scrollbar for admin dropdown and other menus */
        .custom-scrollbar {
            scrollbar-width: thin;
            scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
        }
        
        .custom-scrollbar::-webkit-scrollbar {
            width: 8px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
            border-radius: 4px;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: rgba(156, 163, 175, 0.5);
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        
        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background-color: rgba(107, 114, 128, 0.7);
        }
        
        /* Dark mode scrollbar */
        [data-kt-theme-mode="dark"] .custom-scrollbar {
            scrollbar-color: rgba(75, 85, 99, 0.5) transparent;
        }
        
        [data-kt-theme-mode="dark"] .custom-scrollbar::-webkit-scrollbar-thumb {
            background-color: rgba(75, 85, 99, 0.5);
        }
        
        [data-kt-theme-mode="dark"] .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background-color: rgba(107, 114, 128, 0.7);
        }

        /* Match header divider to nav background (light/dark) */
        #header {
            border-bottom: 1px solid transparent;
        }
        /* Explicit header divider colors for light/dark */
        :root:not(.dark) #header {
            border-bottom-color: #f3f4f6;
        }
        .dark #header {
            border-bottom-color: rgb(24 24 27);
        }
        
        /* Enhanced impersonate modal styles */
        .user-list-item:hover {
            background-color: var(--muted);
        }
        
        .user-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0.75rem;
        }
        
        /* Tab styling */
        .kt-tab-toggle {
            position: relative;
            transition: all 0.3s ease;
            border-bottom: 2px solid transparent;
        }
        .kt-tab-toggle.active {
            color: var(--kt-primary);
            border-bottom-color: var(--kt-primary);
        }
        .kt-tab-toggle:hover {
            color: var(--kt-primary);
        }
        
        /* Global design polish */
        .kt-card {
            border: 1px solid var(--input);
            border-radius: var(--radius);
            background: var(--card, var(--background));
            /* REMOVED transform transition - it creates stacking context issues for dropdowns */
            transition: box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
        }
        /* Removed hover effects to eliminate annoying card shadows */
        .kt-card:hover {
            /* Hover effects disabled */
        }
        
        .kt-btn {
            transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .08s ease, box-shadow .2s ease;
            will-change: transform;
        }
        .kt-btn:active { transform: translateY(1px); }
        
        .kt-btn-primary {
            background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary) 94%, #fff 6%), var(--primary));
            box-shadow: 0 4px 12px rgba(0,0,0,.06);
        }
        .kt-btn-primary:hover { filter: brightness(1.02); box-shadow: 0 8px 18px rgba(0,0,0,.08); }
        
        .kt-btn-outline:hover {
            background-color: color-mix(in srgb, var(--primary) 8%, transparent);
            border-color: color-mix(in srgb, var(--primary) 25%, var(--input));
        }
        .kt-btn-ghost:hover { background-color: var(--muted); }
        
        .kt-input {
            transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
        }
        .kt-input:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary) 20%, transparent);
        }
        
        .kt-dropdown-menu {
            box-shadow: 0 16px 40px rgba(0,0,0,.12);
            border: 1px solid var(--input);
            border-radius: var(--radius);
            z-index: 9999;
        }
        
        .kt-progress { height: 8px; border-radius: 9999px; overflow: hidden; background-color: var(--muted); }
        .kt-progress-indicator { height: 100%; border-radius: 9999px; }
        
        .kt-badge { border-radius: 9999px; font-weight: 600; }
        
        /* Table row hover */
        .kt-table tbody tr:hover { background-color: color-mix(in srgb, var(--muted) 70%, transparent); }
        
        /* Header subtle divider */
        #header { border-bottom: 1px solid var(--input); }
        
        /* Smooth link hover */
        a { transition: color .2s ease, opacity .2s ease; }
        
        /* Scrollbar styling */
        *::-webkit-scrollbar { width: 10px; height: 10px; }
        *::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--foreground) 12%, transparent); border-radius: 9999px; }
        *::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--foreground) 20%, transparent); }
        
        /* Removed dark mode hover effects to eliminate annoying card shadows */
        [data-kt-theme-mode="dark"] .kt-card:hover { /* Hover effects disabled */ }
        [data-kt-theme-mode="dark"] .kt-table tbody tr:hover { background-color: rgba(255,255,255,0.03); }
        
        /* Global override to disable all card hover effects in v2 */
        .kt-card:hover {
            box-shadow: none !important;
            transform: none !important;
            border-color: var(--input) !important;
        }
        
        /* CRITICAL FIX: Prevent cards from creating stacking contexts */
        .kt-card {
            transform: none !important;
            will-change: auto !important;
        }
        
        /* Disable any remaining hover effects on cards */
        .kt-card.hover\:shadow-lg:hover,
        .kt-card.hover\:shadow-xl:hover,
        .kt-card.hover\:shadow-md:hover {
            box-shadow: none !important;
        }
        
        .kt-card.hover\:-translate-y-0\.5:hover,
        .kt-card.hover\:-translate-y-1:hover,
        .kt-card.hover\:-translate-y-2:hover {
            transform: none !important;
        }

        @media (max-width: 768px) {
            .user-stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            
            /* Reduce main content wrapper margins on mobile */
            .flex.grow.rounded-b-xl.bg-background {
                margin-left: 0.75rem !important;
                margin-right: 0.75rem !important;
            }
            
            /* Ensure container has proper padding */
            .kt-container-fluid {
                padding-left: 1rem !important;
                padding-right: 1rem !important;
            }
        }
        
        @media (max-width: 480px) {
            /* Minimal margins on very small screens */
            .flex.grow.rounded-b-xl.bg-background {
                margin-left: 0.25rem !important;
                margin-right: 0.25rem !important;
                border-radius: 0.5rem !important;
            }
            
            /* Ensure content is not cut off */
            .kt-container-fluid {
                padding-left: 0.75rem !important;
                padding-right: 0.75rem !important;
            }
        }
        
        /* ============================================================
           COMPREHENSIVE DARK MODE FIXES FOR V2 PANEL
           Ensures all pages are dark mode compatible
           ============================================================ */
        
        /* Flash Messages & Alerts - Dark Mode */
        .dark .bg-red-50,
        html.dark .bg-red-50 {
            background-color: rgba(239, 68, 68, 0.1) !important;
        }
        .dark .bg-green-50,
        html.dark .bg-green-50 {
            background-color: rgba(34, 197, 94, 0.1) !important;
        }
        .dark .bg-blue-50,
        html.dark .bg-blue-50 {
            background-color: rgba(59, 130, 246, 0.1) !important;
        }
        .dark .bg-yellow-50,
        html.dark .bg-yellow-50 {
            background-color: rgba(234, 179, 8, 0.1) !important;
        }
        .dark .bg-orange-50,
        html.dark .bg-orange-50 {
            background-color: rgba(249, 115, 22, 0.1) !important;
        }
        .dark .bg-purple-50,
        html.dark .bg-purple-50 {
            background-color: rgba(168, 85, 247, 0.1) !important;
        }
        .dark .bg-indigo-50,
        html.dark .bg-indigo-50 {
            background-color: rgba(99, 102, 241, 0.1) !important;
        }
        .dark .bg-gray-50,
        html.dark .bg-gray-50 {
            background-color: hsl(var(--muted)) !important;
        }
        
        /* Light backgrounds with opacity - Dark Mode */
        .dark .bg-blue-50\/50,
        html.dark .bg-blue-50\/50,
        .dark [class*="bg-blue-50/"],
        html.dark [class*="bg-blue-50/"] {
            background-color: rgba(59, 130, 246, 0.08) !important;
        }
        .dark .bg-red-50\/50,
        html.dark .bg-red-50\/50 {
            background-color: rgba(239, 68, 68, 0.08) !important;
        }
        .dark .bg-green-50\/50,
        html.dark .bg-green-50\/50 {
            background-color: rgba(34, 197, 94, 0.08) !important;
        }
        
        /* Border colors - Dark Mode */
        .dark .border-red-200,
        html.dark .border-red-200 {
            border-color: rgba(239, 68, 68, 0.3) !important;
        }
        .dark .border-green-200,
        html.dark .border-green-200 {
            border-color: rgba(34, 197, 94, 0.3) !important;
        }
        .dark .border-blue-200,
        html.dark .border-blue-200 {
            border-color: rgba(59, 130, 246, 0.3) !important;
        }
        .dark .border-yellow-200,
        html.dark .border-yellow-200 {
            border-color: rgba(234, 179, 8, 0.3) !important;
        }
        .dark .border-gray-200,
        html.dark .border-gray-200 {
            border-color: hsl(var(--border)) !important;
        }
        
        /* Text colors - Dark Mode (ensure visibility) */
        .dark .text-red-600,
        html.dark .text-red-600 {
            color: #f87171 !important;
        }
        .dark .text-red-700,
        html.dark .text-red-700 {
            color: #fca5a5 !important;
        }
        .dark .text-red-800,
        html.dark .text-red-800 {
            color: #fecaca !important;
        }
        .dark .text-red-900,
        html.dark .text-red-900 {
            color: #fee2e2 !important;
        }
        .dark .text-green-600,
        html.dark .text-green-600 {
            color: #4ade80 !important;
        }
        .dark .text-green-700,
        html.dark .text-green-700 {
            color: #86efac !important;
        }
        .dark .text-blue-600,
        html.dark .text-blue-600 {
            color: #60a5fa !important;
        }
        .dark .text-blue-700,
        html.dark .text-blue-700 {
            color: #93c5fd !important;
        }
        .dark .text-blue-800,
        html.dark .text-blue-800 {
            color: #bfdbfe !important;
        }
        .dark .text-gray-700,
        html.dark .text-gray-700 {
            color: hsl(var(--foreground)) !important;
        }
        .dark .text-gray-800,
        html.dark .text-gray-800 {
            color: hsl(var(--foreground)) !important;
        }
        .dark .text-gray-900,
        html.dark .text-gray-900 {
            color: hsl(var(--foreground)) !important;
        }
        
        /* bg-white elements in dark mode */
        .dark .bg-white,
        html.dark .bg-white {
            background-color: hsl(var(--card)) !important;
        }
        
        /* Danger Zone section fixes - Dark Mode */
        .dark [style*="background: #fef2f2"],
        .dark [style*="background:#fef2f2"],
        html.dark [style*="background: #fef2f2"],
        html.dark [style*="background:#fef2f2"] {
            background: rgba(239, 68, 68, 0.1) !important;
        }
        .dark [style*="background: #fee2e2"],
        .dark [style*="background:#fee2e2"],
        html.dark [style*="background: #fee2e2"],
        html.dark [style*="background:#fee2e2"] {
            background: rgba(239, 68, 68, 0.15) !important;
        }
        .dark [style*="background: linear-gradient(to right, #fef2f2"],
        html.dark [style*="background: linear-gradient(to right, #fef2f2"] {
            background: linear-gradient(to right, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05)) !important;
        }
        .dark [style*="border: 2px solid #fee2e2"],
        .dark [style*="border:2px solid #fee2e2"],
        html.dark [style*="border: 2px solid #fee2e2"],
        html.dark [style*="border:2px solid #fee2e2"] {
            border-color: rgba(239, 68, 68, 0.3) !important;
        }
        .dark [style*="border: 1px solid #fca5a5"],
        .dark [style*="border:1px solid #fca5a5"],
        html.dark [style*="border: 1px solid #fca5a5"],
        html.dark [style*="border:1px solid #fca5a5"],
        .dark [style*="border: 2px solid #fca5a5"],
        .dark [style*="border:2px solid #fca5a5"],
        html.dark [style*="border: 2px solid #fca5a5"],
        html.dark [style*="border:2px solid #fca5a5"],
        .dark [style*="border: 2px solid #fecaca"],
        .dark [style*="border:2px solid #fecaca"],
        html.dark [style*="border: 2px solid #fecaca"],
        html.dark [style*="border:2px solid #fecaca"] {
            border-color: rgba(239, 68, 68, 0.4) !important;
        }
        
        /* Info/Tip banner fixes - Dark Mode */
        .dark .p-3.bg-blue-50,
        html.dark .p-3.bg-blue-50 {
            background-color: rgba(59, 130, 246, 0.1) !important;
            border-color: rgba(59, 130, 246, 0.2) !important;
        }
        
        /* kt-alert dark mode fixes */
        .dark .kt-alert-success,
        html.dark .kt-alert-success {
            background-color: rgba(34, 197, 94, 0.15) !important;
            border-color: rgba(34, 197, 94, 0.3) !important;
            color: #86efac !important;
        }
        .dark .kt-alert-danger,
        html.dark .kt-alert-danger {
            background-color: rgba(239, 68, 68, 0.15) !important;
            border-color: rgba(239, 68, 68, 0.3) !important;
            color: #fca5a5 !important;
        }
        .dark .kt-alert-warning,
        html.dark .kt-alert-warning {
            background-color: rgba(234, 179, 8, 0.15) !important;
            border-color: rgba(234, 179, 8, 0.3) !important;
            color: #fde047 !important;
        }
        .dark .kt-alert-info,
        html.dark .kt-alert-info {
            background-color: rgba(59, 130, 246, 0.15) !important;
            border-color: rgba(59, 130, 246, 0.3) !important;
            color: #93c5fd !important;
        }
        
        /* Inline style color overrides for dark mode */
        .dark [style*="color: #1d1d1f"],
        .dark [style*="color:#1d1d1f"],
        html.dark [style*="color: #1d1d1f"],
        html.dark [style*="color:#1d1d1f"] {
            color: #f5f5f7 !important;
        }
        .dark [style*="color: #515154"],
        .dark [style*="color:#515154"],
        html.dark [style*="color: #515154"],
        html.dark [style*="color:#515154"] {
            color: #a1a1a6 !important;
        }
        
        /* Inline style background overrides for dark mode */
        .dark [style*="background: #f5f7fa"],
        .dark [style*="background:#f5f7fa"],
        .dark [style*="background-color: #f5f7fa"],
        .dark [style*="background-color:#f5f7fa"],
        html.dark [style*="background: #f5f7fa"],
        html.dark [style*="background:#f5f7fa"] {
            background: hsl(var(--muted)) !important;
        }
        .dark [style*="background: #ffffff"],
        .dark [style*="background:#ffffff"],
        .dark [style*="background-color: #ffffff"],
        .dark [style*="background-color:#ffffff"],
        html.dark [style*="background: #ffffff"],
        html.dark [style*="background:#ffffff"] {
            background: hsl(var(--card)) !important;
        }
        
        /* Border overrides for dark mode */
        .dark [style*="border: 1px solid rgba(0, 0, 0"],
        html.dark [style*="border: 1px solid rgba(0, 0, 0"] {
            border-color: rgba(255, 255, 255, 0.1) !important;
        }
        
        /* Form inputs in dark mode within colored backgrounds */
        .dark input[style*="background: #ffffff"],
        .dark input[style*="background:#ffffff"],
        html.dark input[style*="background: #ffffff"],
        html.dark input[style*="background:#ffffff"] {
            background: hsl(var(--input)) !important;
            color: hsl(var(--foreground)) !important;
        }
        
        /* Progress bars in dark backgrounds */
        .dark .bg-muted\/50,
        html.dark .bg-muted\/50 {
            background-color: rgba(255, 255, 255, 0.05) !important;
        }

        /* ========================================
           ASSIGNMENT PAGE - Hide Navbar Only
           (Keep header with user dropdown visible)
           ======================================== */
        body.assignment-page #navbar {
            display: none !important;
        }
        
        /* Main content gets rounded top + no navbar margin */
        body.assignment-page #main_content_container {
            margin-top: 0 !important;
            border-radius: 0.75rem !important; /* rounded-xl on all corners */
            border-top: 1px solid hsl(var(--input)) !important;
        }

        /* ========================================
           CROSS-PAGE VIEW TRANSITIONS
           Full page loads crossfade instead of flashing white
           (Chrome/Edge 126+, safely ignored elsewhere). Header and
           sidebar get their own named snapshot groups so identical
           chrome holds perfectly still — only the content appears
           to change, which keeps the frame feeling like one app
           instead of a new page per click.
           ======================================== */
        @view-transition { navigation: auto; }
        ::view-transition-old(root),
        ::view-transition-new(root) {
            animation-duration: 160ms;
        }
        #header { view-transition-name: cq-header; }
        #sidebar { view-transition-name: cq-sidebar; }
        ::view-transition-old(cq-header),
        ::view-transition-new(cq-header),
        ::view-transition-old(cq-sidebar),
        ::view-transition-new(cq-sidebar) {
            animation-duration: 0s;
        }