/* ============================================================
   Design System: CSS Variable Overrides & Component Styles
   ============================================================ */

/* --- No-Line Rule: strip all default table/divider lines --- */
.mud-table-container .mud-table-row {
    border-bottom: none !important;
}
.mud-table-container .mud-table-head .mud-table-cell {
    border-bottom: none !important;
}
.mud-divider {
    display: none;
}

/* --- Data Grid: header styling (all-caps, label-md in on-surface-variant) --- */
.mud-table-head .mud-table-cell {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #434656;
}

/* --- Data Grid: row hover fill (surface-container-high) instead of lines --- */
.mud-table-root .mud-table-row:hover > td {
    background-color: #e5e8ef !important;
}

/* --- Cards: lg (1rem) corner radius — no exact MudBlazor utility, override here --- */
.mud-card {
    border-radius: 1rem !important;
    border: none !important;
}

/* --- Buttons: md (0.75rem) corner radius, active scale-down ---
     No exact utility for 0.75rem; override here.
     For inline one-off use, prefer Class="rounded-xl" on the component. --- */
.mud-button-root:active {
    transform: scale(0.98);
}
.mud-button-filled.mud-button-root,
.mud-button-outlined.mud-button-root {
    border-radius: 0.75rem;
}
.mud-button-outlined.mud-button-root {
    border-color: rgba(57, 75, 175, 0.15) !important;
}

/* --- AppBar: Glassmorphism --- */
.mud-appbar {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: none !important;
    box-shadow: none !important;
}

/* --- Drawer (side nav): no border --- */
.mud-drawer {
    border-right: none !important;
}

/* --- Nav active: pill indicator (primary_fixed: #dee0ff)
     Scoped CSS in NavMenu.razor.css handles ::deep links.
     These rules handle the MudBlazor-generated .mud-nav-link class
     as a fallback for MudNavLink components rendered outside NavMenu. --- */
.mud-nav-link.active {
    background-color: #dee0ff !important;
    color: #00105c !important;
    border-radius: 9999px !important; /* rounded-pill equivalent */
}
.mud-nav-link:hover:not(.active) {
    background-color: rgba(57, 75, 175, 0.08) !important;
    border-radius: 9999px !important;
}

/* --- Difficulty badge utility classes (future use when Difficulty field is added)
     Apply with Class="badge-easy rounded-pill" etc. on MudChip or span. --- */
.badge-easy {
    background-color: #dee0ff;   /* primary_fixed */
    color: #00105c;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}
.badge-medium {
    background-color: #feb300;   /* secondary_container */
    color: #181c1f;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}
.badge-hard {
    background-color: #ffd9e2;   /* tertiary_container */
    color: #ab0044;
    padding: 0.125rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
}

/* --- Category tags (tertiary color) --- */
.category-tag {
    color: #ab0044;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
}

/* --- Editorial Moment: large stat display ---
     Usage: <MudText Class="stat-display">42</MudText>
            <MudText Class="stat-label">Questions</MudText> --- */
.stat-display {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1;
}
.stat-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}