/* ========================================
   MUDBLAZOR OVERRIDES - GLOBAL CSS
   ========================================
   All rules targeting MudBlazor internal classes (.mud-*)
   MUST be in global CSS. Scoped .razor.css files silently
   fail because CSS isolation adds [b-xxx] attributes that
   MudBlazor internal elements never receive.
   ======================================== */


/* ----------------------------------------
   MainLayout - Toolbar & Menu
   ---------------------------------------- */

.no-quiz-selected .mud-icon-root,
.auth-prompt .mud-icon-root {
    color: rgba(var(--glytic-primary-rgb), 0.5);
}

.auth-expand-btn .mud-button-start-icon {
    transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.mud-menu .mud-paper {
    background: var(--glytic-bg-medium) !important;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.2) !important;
    backdrop-filter: blur(10px);
}

.mud-menu .mud-list-item:hover {
    background: rgba(var(--glytic-primary-rgb), 0.1) !important;
}


/* ----------------------------------------
   AdminDashboard - Cards, Tabs, Tables
   ---------------------------------------- */

.admin-breadcrumb .mud-breadcrumbs {
    color: rgba(224, 230, 237, 0.6);
    font-size: 0.9rem;
}

.admin-breadcrumb .mud-breadcrumbs a {
    color: var(--glytic-primary);
    text-decoration: none;
}

.admin-breadcrumb .mud-breadcrumbs a:hover {
    text-decoration: underline;
}

.action-card .mud-card-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.action-card .mud-icon-root {
    font-size: 3rem !important;
    margin-bottom: 1rem !important;
}

.action-card .mud-typography-h6 {
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.dashboard-tabs .mud-tabs .mud-tab {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dashboard-tabs .mud-tabs .mud-tab-slider {
    background: var(--mud-palette-primary);
}

.dashboard-tabs .mud-tab-panel {
    padding: 0;
}

.admin-dashboard .mud-table th {
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-background-grey);
}

.admin-dashboard .mud-table td {
    vertical-align: middle;
}

.loading-container .mud-progress-circular {
    color: var(--mud-palette-primary);
}

.admin-dashboard .mud-grid-item {
    padding: 0.75rem;
}

.admin-dashboard .mud-card:not(.action-card):hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.dashboard-actions .mud-icon-button {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.dashboard-actions .mud-icon-button:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}


/* ----------------------------------------
   TestListComponent - Table & Chips
   ---------------------------------------- */

.test-list-component .mud-table-cell {
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.1);
}

.test-list-component .mud-table-row:hover {
    background: rgba(var(--glytic-primary-rgb), 0.05);
}

.test-list-component .mud-chip-animate {
    animation: test-list-pulse 2s infinite;
}

@keyframes test-list-pulse {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}


/* ----------------------------------------
   QuestionRating - Stars & Comments
   ---------------------------------------- */

.rating-stars-inline .mud-rating-item {
    font-size: 0.9rem !important;
}

.comment-icon-inline .mud-icon-root {
    font-size: 0.9rem !important;
    color: rgba(255, 255, 255, 0.4) !important;
}

.comment-icon-inline:hover .mud-icon-root {
    color: rgba(255, 255, 255, 0.7) !important;
}


/* ----------------------------------------
   Settings Menu - Gear Dropdown
   ---------------------------------------- */

.settings-menu-gear .mud-menu-items {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-width: 180px !important;
    padding: 8px 0 !important;
    background: rgba(26, 34, 48, 0.98) !important;
    box-shadow: 0 4px 16px rgba(0, 132, 187, 0.15), 0 2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px !important;
}

.settings-menu-gear .mud-menu-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    padding: 8px 16px !important;
    font-size: 15px !important;
    color: #f0f0f0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 4px !important;
    transition: background 0.2s, color 0.2s;
}

.settings-menu-gear .mud-menu-item:hover {
    background: rgba(0, 132, 187, 0.08) !important;
    color: #0071c5 !important;
}

.settings-menu-gear .mud-icon-root {
    margin-right: 10px !important;
    font-size: 18px !important;
    color: #0071c5 !important;
}

.settings-menu-gear .mud-switch-root {
    margin-right: 10px !important;
}


/* ----------------------------------------
   QuizForge Dialog Baseline
   All MudDialog instances get the dark theme
   ---------------------------------------- */

.mud-dialog:not(.tt-sheet) {
    background: linear-gradient(152deg, #151a28 0%, #1c2438 50%, #111520 100%) !important;
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.30) !important;
    border-radius: 20px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6),
                0 0 40px rgba(var(--glytic-primary-rgb), 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: hidden;
    position: relative;
}

.mud-dialog:not(.tt-sheet)::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 10% 15%, rgba(var(--glytic-primary-rgb), 0.05) 0%, transparent 55%),
        radial-gradient(ellipse at 90% 85%, rgba(var(--glytic-secondary-rgb), 0.04) 0%, transparent 55%);
    pointer-events: none;
    border-radius: 20px;
    z-index: 0;
}

.mud-dialog > * {
    position: relative;
    z-index: 1;
}

.mud-dialog .mud-dialog-title {
    background: rgba(var(--glytic-primary-rgb), 0.04);
    border-bottom: 1px solid rgba(var(--glytic-primary-rgb), 0.12);
    color: #e0e6ed;
    font-weight: 600;
    padding: 18px 24px;
}

.mud-dialog .mud-dialog-content {
    color: #c9d1d9;
    padding: 24px;
}

.mud-dialog .mud-dialog-actions {
    border-top: 1px solid rgba(var(--glytic-primary-rgb), 0.10);
    padding: 14px 24px;
    gap: 8px;
}

/* Dialog buttons: sentence case + consistent shape. MudBlazor defaults to ALL-CAPS, which
   reads as unstyled. Scoped to the dialog (not .mud-dialog-actions) because the fragment-
   pattern dialogs render <MudDialogActions> as an unclassed custom element. House-wide. */
.mud-dialog .mud-button-root {
    font-weight: 600;
    letter-spacing: 0;
    border-radius: 8px;
}

/* MudBlazor applies the uppercase on the inner .mud-button-label span specifically. */
.mud-dialog .mud-button-label {
    text-transform: none !important;
}

.mud-dialog .mud-input-label,
.mud-dialog .mud-input-helper-text {
    color: rgba(201, 209, 217, 0.6) !important;
}

.mud-dialog .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(var(--glytic-primary-rgb), 0.15) !important;
}

.mud-dialog .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(var(--glytic-primary-rgb), 0.3) !important;
}

.mud-dialog .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: rgba(var(--glytic-primary-rgb), 0.5) !important;
}

.mud-dialog .mud-input {
    color: #e0e6ed !important;
}

.mud-dialog-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(4px);
}


/* ----------------------------------------
   RateExamDialog - Star Rating Modal
   ---------------------------------------- */

.rate-dialog-body {
    padding: 8px 0;
}

.rate-dialog-stars-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0 20px;
}

.rate-dialog-prompt {
    color: rgba(201, 209, 217, 0.6);
    text-align: center;
}

.rate-dialog-stars .mud-rating-item {
    font-size: 2.2rem !important;
    transition: transform 0.15s ease;
}

.rate-dialog-stars .mud-rating-item:hover {
    transform: scale(1.15);
}

.rate-dialog-label {
    color: rgba(255, 193, 7, 0.85);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.75rem;
}

.rate-dialog-comment {
    margin-top: 4px;
}

.rate-dialog-submit {
    border-radius: 8px;
}

.rate-dialog-cancel {
    color: rgba(201, 209, 217, 0.5) !important;
}


/* ----------------------------------------
   AI Generate - Chip Overrides
   (Moved from unified-ai-generate.css)
   ---------------------------------------- */

.mud-chip-success {
    background: linear-gradient(135deg, #00c851, #00ff66);
    color: white;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.mud-chip-warning {
    background: linear-gradient(135deg, #ffbb33, #ffcc66);
    color: #333;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.3);
}


/* ========================================
   CONSOLIDATED RESPONSIVE OVERRIDES
   ======================================== */

/* MetricCard responsive */
@media (max-width: 960px) {
    .metric-card .mud-typography-h4,
    .enrichment-metric-card .mud-typography-h4 {
        font-size: 1.75rem;
    }

    .metric-icon .mud-icon-root {
        font-size: 2rem !important;
    }
}

/* All 768px overrides */
@media (max-width: 768px) {
    /* AdminDashboard */
    .action-card .mud-icon-root {
        font-size: 2.5rem !important;
    }

    .dashboard-header .d-flex {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    /* QuestionRating */
    .rating-stars-inline .mud-rating-item {
        font-size: 0.8rem !important;
    }

    .comment-icon-inline .mud-icon-root {
        font-size: 0.8rem !important;
    }

    /* ExamDetail */
    .hero-cta .mud-paper {
        padding: 1rem !important;
    }

    .existing-exam-mode-card .mud-card-content {
        padding: 16px !important;
    }
}

/* All 600px overrides */
@media (max-width: 600px) {
    .metric-card .mud-typography-h4,
    .enrichment-metric-card .mud-typography-h4 {
        font-size: 1.5rem;
    }

    .metric-icon .mud-icon-root {
        font-size: 1.75rem !important;
    }
}

/* All 480px overrides */
@media (max-width: 480px) {
    /* MainLayout auth buttons */
    .login-btn .mud-button-label,
    .register-btn .mud-button-label {
        display: none;
    }

    /* AdminDashboard */
    .action-card .mud-icon-root {
        font-size: 2rem !important;
    }

    .action-card .mud-typography-h6 {
        font-size: 1rem;
    }

    /* QuestionRating */
    .rating-stars-inline .mud-rating-item {
        font-size: 0.75rem !important;
    }

    /* ExamDetail */
    .badge-row .mud-chip {
        font-size: 0.65rem !important;
    }
}


/* ----------------------------------------
   Homepage Sticky Fix
   MudBlazor layout ancestors must not create
   new stacking contexts or clip overflow,
   otherwise position:sticky breaks.
   body.homepage class is toggled by Index page.
   ---------------------------------------- */

body.homepage .mud-layout,
body.homepage .mud-main-content {
    overflow: visible !important;
    transform: none !important;
    contain: none !important;
    perspective: none !important;
    isolation: auto !important;
    will-change: auto !important;
    filter: none !important;
}


/* ----------------------------------------
   Quiz Wizard dialog (QuizWizardDialog.razor)
   ----------------------------------------
   Moved here from the component's scoped .razor.css. MudDialog renders its
   content in a portal, so the CSS-isolation [b-xxx] attribute is never applied
   to these elements and scoped rules silently fail (see header note). All
   selectors are namespaced by .quiz-wizard-dialog so nothing leaks. */

/* Sleek single-line title: never wrap, ellipsis on overflow, clear of close button. */
.quiz-wizard-dialog .wizard-title {
    display: block;
    max-width: 100%;
    margin: 0;
    padding-right: 2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.05rem;
    line-height: 1.4;
}

.quiz-wizard-dialog .wizard-loading { display: flex; justify-content: center; padding: 2rem; }
.quiz-wizard-dialog .wizard-section { margin-bottom: 1.1rem; }
.quiz-wizard-dialog .wizard-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--glytic-text-muted);
    margin-bottom: 0.4rem;
}
.quiz-wizard-dialog .wizard-modes,
.quiz-wizard-dialog .wizard-counts,
.quiz-wizard-dialog .wizard-difficulty,
.quiz-wizard-dialog .wizard-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.quiz-wizard-dialog .wizard-comparison { display: block; color: var(--glytic-text-secondary); margin-bottom: 0.75rem; }
.quiz-wizard-dialog .wizard-resume-btn { margin-bottom: 1rem; }
.quiz-wizard-dialog .wizard-timed { display: flex; align-items: center; }


/* ========================================
   AUTH MODAL (AuthDialog)
   ========================================
   The MudDialog chrome is neutralized (transparent, no border/shadow); the visible card
   is the inner .qf-panel (.qf-panel--dialog), identical to the /login and /register pages.
   Scoped to .qf-auth-dialog so other dialogs are unaffected. */
.mud-overlay-scrim.mud-overlay-dark {
    background-color: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(3px) !important;
    -webkit-backdrop-filter: blur(3px) !important;
}
.mud-dialog-container:has(.qf-auth-dialog) {
    padding: 16px !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
}
@media (min-width: 600px) {
    .mud-dialog-container:has(.qf-auth-dialog) { padding: 32px !important; }
}
.mud-dialog.qf-auth-dialog.mud-dialog-width-full {
    width: 100% !important;
    max-width: 460px !important;
    margin: 0 auto !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    overflow: visible !important;
}
.qf-auth-dialog .mud-dialog-content {
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
}
/* Float the close (X) button over the panel's top-right corner */
.qf-auth-dialog .mud-dialog-title {
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    background: transparent !important;
    border-bottom: none !important;
    position: absolute !important;
    top: 8px;
    right: 8px;
    z-index: 2;
}
.qf-auth-dialog .mud-dialog-title h6.mud-typography-h6:empty { display: none !important; }
.qf-auth-dialog .mud-dialog-title .mud-button-close { position: relative !important; top: unset !important; right: unset !important; opacity: 0.7; }
.qf-auth-dialog .mud-dialog-title .mud-button-close:hover { opacity: 1; }

/* ----------------------------------------
   Tutor study sheet (Client/Shared/TutorSheetDialog.razor)
   Opted out of the baseline above (:not(.tt-sheet)) so it can be a flat, edge-to-edge sheet on
   phones and a squared two-pane panel on desktop, without !important.
   ---------------------------------------- */
.mud-dialog.tt-sheet {
    max-width: 1120px;
    background: var(--glytic-bg-medium);
    border: 1px solid rgba(var(--glytic-primary-rgb), 0.35);
    border-radius: 6px;
    box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    animation: tt-sheet-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.mud-dialog.tt-sheet .mud-dialog-content {
    padding: 0;
}

.mud-dialog.tt-sheet.mud-dialog-fullscreen {
    border: 0;
    border-radius: 0;
    animation: tt-sheet-up 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes tt-sheet-in {
    from { opacity: 0; transform: translateY(8px) scale(0.985); }
    to { opacity: 1; transform: none; }
}

@keyframes tt-sheet-up {
    from { opacity: 0.6; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mud-dialog.tt-sheet,
    .mud-dialog.tt-sheet.mud-dialog-fullscreen { animation: none; }
}