/*
 * public/assets/css/app.css
 *
 * Stage 36C — Platform-shared Design System.
 * Loaded by BOTH app/views/layouts/admin.php (#content-area) and
 * app/views/layouts/main.php (#studentMainContent) — both containers
 * carry class="app-content", so every rule below is written once and
 * reused by Admin (Stage 36B) and Student (Stage 36C) pages alike,
 * instead of being duplicated per layout.
 *
 * Values are Theme-token-driven via the --mcq-* Design Tokens injected
 * by ThemeService::renderCssVariables() (see both layout <head>s).
 */

/* --- Shared design-system token aliases -----------------------------------
 * Stage 40.4: these local aliases of the --mcq-* Theme tokens previously
 * lived only in dashboard.css's :root (Admin-only). But this file — the
 * one that actually consumes them (.empty-state, .widget-header,
 * .search-filter-bar, .card, .alert-custom, etc.) — is loaded by Admin,
 * Student, AND Auth. On Student/Auth pages these variables were
 * therefore unset. Defined here, their single shared source, instead. */
:root {
    --card-border-color: var(--mcq-color-border, #e2e8f0);
    --card-base-shadow: var(--mcq-shadow-card, 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -2px rgba(0, 0, 0, 0.02));
    --surface-bg: var(--mcq-color-surface, #ffffff);
    --content-bg: var(--mcq-color-background, #f8fafc);
    --text-body: var(--mcq-color-text, #1e293b);
    --radius-md: var(--mcq-radius, 0.75rem);
    --shadow-dropdown: var(--mcq-shadow-dropdown, 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08));
    --shadow-modal: var(--mcq-shadow-modal, 0 .5rem 1rem rgba(0, 0, 0, .15));
}

/* --- Stat icon tints (used by admin/dashboard/index.php) ---------------
   Reusable, Theme-aware utility classes — replaces per-view inline
   `style="background-color:#eff6ff"` etc. Stage 36E: removed the old
   static rgba() duplicates of these rules (superseded by the color-mix()
   versions below, which track the active Theme's tokens). */
.stat-icon.bg-light-primary { background-color: color-mix(in srgb, var(--bs-primary, #0F3D5C) 10%, transparent); }
.stat-icon.bg-light-success { background-color: color-mix(in srgb, var(--bs-success, #198754) 10%, transparent); }
.stat-icon.bg-light-warning { background-color: color-mix(in srgb, var(--bs-warning, #ffc107) 14%, transparent); }
.stat-icon.bg-light-danger  { background-color: color-mix(in srgb, var(--bs-danger, #dc3545) 10%, transparent); }
.stat-icon.bg-light-info    { background-color: color-mix(in srgb, var(--bs-info, #0dcaf0) 14%, transparent); }

/* --- Icon-tint circles (Stage 36E) ---------------------------------------
   Same color-mix()-over-Theme-token approach as .stat-icon.bg-light-*
   above, for badges that use custom per-instance width/height (e.g.
   rounded-circle avatars on the Student dashboard) instead of the fixed
   48px .stat-icon size. Replaces the remaining per-view inline
   `style="background:#eff6ff"` hardcoded hex values with Theme-aware
   equivalents. */
.icon-tint-primary { background-color: color-mix(in srgb, var(--bs-primary, #0F3D5C) 10%, transparent); }
.icon-tint-success { background-color: color-mix(in srgb, var(--bs-success, #198754) 10%, transparent); }
.icon-tint-warning { background-color: color-mix(in srgb, var(--bs-warning, #ffc107) 14%, transparent); }
.icon-tint-danger  { background-color: color-mix(in srgb, var(--bs-danger, #dc3545) 10%, transparent); }
.icon-tint-info    { background-color: color-mix(in srgb, var(--bs-info, #0dcaf0) 14%, transparent); }
/* Purple is not one of the Theme's required colour tokens; standardized to
   the single #6f42c1 shade already used elsewhere (Admin Comprehension
   badges) instead of the second, inconsistent #9333ea shade previously
   hardcoded on the Student dashboard. */
.icon-tint-purple  { background-color: color-mix(in srgb, #6f42c1 10%, transparent); }
.text-purple-token { color: #6f42c1 !important; }

/* --- Dashboard widgets ---------------------------------------------------
   .table-container is already the shared "widget card" wrapper used across
   the dashboard and most list pages; this rule set standardizes its header
   row so every widget (stat blocks, activity lists, analytics panels)
   shares the same spacing and title treatment. */
.widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--card-border-color);
    background: var(--surface-bg);
}
.widget-header h5, .widget-header h6 {
    margin-bottom: 0;
}

/* --- Empty states ---------------------------------------------------------
   Standard "nothing here yet" block. Reuses the same dashed placeholder
   pattern already established on the dashboard's analytics panel. */
.empty-state {
    padding: 3rem 1.5rem;
    text-align: center;
    border: 2px dashed var(--card-border-color);
    border-radius: var(--radius-md);
    background: var(--content-bg);
    color: var(--bs-secondary-color, #64748b);
}
.empty-state i,
.empty-state .empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mcq-color-primary, #0F3D5C) 10%, var(--surface-bg));
    font-size: 1.75rem;
    color: var(--mcq-color-primary, #0F3D5C);
}
.empty-state h6 {
    color: var(--text-body);
    font-weight: 700;
    margin-bottom: 0.35rem;
}
.empty-state p {
    max-width: 420px;
    margin: 0 auto;
}

/* --- Loading indicators ---------------------------------------------------
   Standard inline loading state for tables/widgets that fetch data via AJAX. */
.loading-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2.5rem 1rem;
    color: var(--bs-secondary-color, #64748b);
    font-weight: 500;
    font-size: 0.9rem;
}
.loading-state .spinner-border {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 0.2em;
    color: var(--bs-primary, #0F3D5C);
}

/* --- Forms ------------------------------------------------------------- */
.admin-form-label,
.app-content .form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-body);
    margin-bottom: 0.4rem;
}
.app-content .form-label .text-danger {
    font-weight: 700;
}
.app-content .form-control,
.app-content .form-select {
    border-color: var(--card-border-color);
    border-radius: 0.5rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.9rem;
    background-color: var(--content-bg);
}
/* Stitch form style: border switches to primary on focus with only a thin
   ring, not a heavy glow — lightened from the previous 0.2rem/15% glow. */
.app-content .form-control:focus,
.app-content .form-select:focus {
    background-color: var(--surface-bg);
    border-color: var(--bs-primary, #0F3D5C);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--bs-primary, #0F3D5C) 12%, transparent);
}
.app-content .form-control.is-invalid,
.app-content .form-select.is-invalid {
    border-color: var(--bs-danger, #dc3545);
}
.app-content .invalid-feedback {
    font-size: 0.8125rem;
    font-weight: 500;
}
.app-content .form-text {
    font-size: 0.8125rem;
}

/* Checkboxes / Radios — larger, consistent hit area, theme-coloured check */
.app-content .form-check-input {
    width: 1.1em;
    height: 1.1em;
    margin-top: 0.2em;
    border-color: var(--mcq-color-border, #cbd5e1);
}
.app-content .form-check-input:checked {
    background-color: var(--bs-primary, #0F3D5C);
    border-color: var(--bs-primary, #0F3D5C);
}
.app-content .form-check-label {
    font-size: 0.9rem;
    padding-left: 0.15rem;
}
.app-content .form-switch .form-check-input {
    width: 2.25em;
}
.app-content .form-control:disabled,
.app-content .form-select:disabled {
    background-color: var(--surface-bg);
    opacity: 0.7;
}
.app-content .form-check-input:disabled {
    opacity: 0.5;
}
.app-content .form-check-input:disabled ~ .form-check-label {
    color: var(--bs-secondary-color, #94a3b8);
    cursor: not-allowed;
}

/* Input groups — align addon/button radii with the standardized .form-control */
.app-content .input-group-text {
    border-color: var(--card-border-color);
    background: var(--surface-bg);
    color: var(--bs-secondary-color, #64748b);
    font-size: 0.9rem;
}

/* Consistent required-field indicator */
.required-field::after {
    content: " *";
    color: var(--bs-danger, #dc3545);
}

/* Standard form action row */
.form-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--card-border-color);
}

/* --- Buttons ------------------------------------------------------------ */
.app-content .btn {
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
}
.app-content .btn-sm {
    border-radius: 0.4rem;
}
.app-content .btn:focus-visible {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bs-primary, #0F3D5C) 25%, transparent);
}
.app-content .btn:disabled,
.app-content .btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
/* Outline/secondary buttons — transparent fill, quiet border + text, matching
   the Stitch "no sharp corners, muted secondary" button style. Toolbar icon
   buttons reuse the same treatment via .btn-icon. */
.app-content .btn-outline-primary,
.app-content .btn-outline-secondary {
    background-color: transparent;
    border-color: var(--card-border-color);
    color: var(--text-body);
}
.app-content .btn-outline-primary:hover,
.app-content .btn-outline-primary:focus-visible {
    background-color: color-mix(in srgb, var(--bs-primary, #0F3D5C) 8%, transparent);
    border-color: var(--bs-primary, #0F3D5C);
    color: var(--bs-primary, #0F3D5C);
}
.app-content .btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border-radius: 0.5rem;
}

/* --- Tabs ----------------------------------------------------------------
   Standardizes Bootstrap's .nav-tabs so admin pages that use tabbed
   sections (question banks, settings screens, etc.) look consistent. */
.app-content .nav-tabs {
    border-bottom: 1px solid var(--card-border-color);
    gap: 0.25rem;
}
.app-content .nav-tabs .nav-link {
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--bs-secondary-color, #64748b);
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.65rem 0.9rem;
}
.app-content .nav-tabs .nav-link:hover {
    color: var(--bs-primary, #0F3D5C);
    border-bottom-color: var(--card-border-color);
}
.app-content .nav-tabs .nav-link.active {
    color: var(--bs-primary, #0F3D5C);
    background: transparent;
    border-bottom-color: var(--bs-primary, #0F3D5C);
}

/* --- Accordions ----------------------------------------------------------
   Standardizes Bootstrap's .accordion for FAQ / grouped-settings panels. */
.app-content .accordion-item {
    border-color: var(--card-border-color);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.app-content .accordion-button {
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--surface-bg);
    color: var(--text-body);
}
.app-content .accordion-button:not(.collapsed) {
    background: color-mix(in srgb, var(--bs-primary, #0F3D5C) 6%, transparent);
    color: var(--bs-primary, #0F3D5C);
    box-shadow: none;
}
.app-content .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--bs-primary, #0F3D5C) 15%, transparent);
}

/* --- Pagination ------------------------------------------------------------ */
.app-content .pagination {
    gap: 0.25rem;
    flex-wrap: wrap;
}
.app-content .page-link {
    border-radius: 0.4rem;
    border-color: var(--card-border-color);
    color: var(--text-body);
    font-weight: 500;
    font-size: 0.85rem;
}
.app-content .page-item.active .page-link {
    background-color: var(--bs-primary, #0F3D5C);
    border-color: var(--bs-primary, #0F3D5C);
}
.app-content .page-item.disabled .page-link {
    color: var(--bs-secondary-color, #94a3b8);
}

/* --- Search bars & filter toolbars ----------------------------------------
   Standard wrapper for the search+filter row used above most admin index
   tables (e.g. Questions, Students, Exams list pages). */
.search-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--surface-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--radius-md);
    /* Stage 40.5: own shadow so it can be used standalone (no wrapping
       .card required) — matches the shadow-sm cards it used to sit inside. */
    box-shadow: var(--card-base-shadow, none);
    margin-bottom: 1.25rem;
}
.search-filter-bar .form-control,
.search-filter-bar .form-select {
    min-width: 180px;
}
/* Bug fix: Type / Difficulty filters live in narrow col-md-1 columns
   (~8% width) on the Questions list, far narrower than the 180px min-width
   above — causing the <select> to overflow its grid column and visually
   overlap the neighboring filter. Scope an override to just those narrow
   columns rather than lowering the shared 180px default used by every
   other search-filter-bar across the admin (Students, Exams, etc.). */
.search-filter-bar .col-md-1 .form-control,
.search-filter-bar .col-md-1 .form-select {
    min-width: 0;
}
.search-filter-bar .search-input-group {
    position: relative;
    flex: 1 1 240px;
}
.search-filter-bar .search-input-group i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--bs-secondary-color, #94a3b8);
}
.search-filter-bar .search-input-group input {
    padding-left: 2.25rem;
}

/* Bulk action toolbar (appears above tables once rows are selected) */
.bulk-action-toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    background: color-mix(in srgb, var(--bs-primary, #0F3D5C) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--bs-primary, #0F3D5C) 20%, transparent);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-primary, #0F3D5C);
}

/* Active-filter summary chips shown under the search/filter bar */
.filter-chip-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.75rem;
}
.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.65rem;
    background: color-mix(in srgb, var(--bs-primary, #0F3D5C) 8%, transparent);
    color: var(--bs-primary, #0F3D5C);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
}
.filter-chip .btn-close {
    font-size: 0.55rem;
    opacity: 0.65;
}
.filter-chip .btn-close:hover,
.filter-chip .btn-close:focus-visible {
    opacity: 1;
}

/* Items-per-page selector — pairs with the existing pagination nav below */
.per-page-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #64748b);
}
.per-page-select .form-select {
    width: auto;
    min-width: 0;
}

/* Results summary line above a table ("Showing X of Y records") */
.table-results-summary {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #64748b);
}

/* --- Modals ---------------------------------------------------------------- */
.app-content ~ .modal .modal-content,
.modal .modal-content {
    border: none;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-modal);
}
.modal .modal-header {
    border-bottom: 1px solid var(--card-border-color);
    padding: 1rem 1.25rem;
}
.modal .modal-footer {
    border-top: 1px solid var(--card-border-color);
    padding: 0.85rem 1.25rem;
}
.modal .modal-title {
    font-weight: 700;
    font-size: 1rem;
}

/* --- Dropdown menus (extends the profile-dropdown rules already present) --- */
.app-content .dropdown-menu {
    border: 1px solid var(--card-border-color);
    box-shadow: var(--shadow-dropdown);
    border-radius: 0.75rem;
    padding: 0.4rem;
}
.app-content .dropdown-item {
    border-radius: 0.4rem;
    padding: 0.5rem 0.85rem;
    font-size: 0.875rem;
    font-weight: 500;
}
.app-content .dropdown-item:hover,
.app-content .dropdown-item:focus {
    background-color: var(--mcq-color-background, #f1f5f9);
}
.app-content .dropdown-item.active,
.app-content .dropdown-item:active {
    background-color: var(--bs-primary, #0F3D5C);
    color: var(--bs-white, #fff);
}

/* --- Cards -----------------------------------------------------------------
   Stage 41B: generic content cards only (Stitch "card style" — quiet
   shadow-sm resting elevation that lifts to shadow-md on hover, xl/0.75rem
   radius, consistent lg/24px internal padding). Does NOT touch .card-stat
   (Dashboard-only, Stage 41C) or any dashboard.css rule. */
.app-content .card {
    border-color: var(--card-border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--card-base-shadow, none);
    transition: box-shadow 160ms ease;
}
.app-content .card:not(.card-stat):hover {
    box-shadow: var(--shadow-dropdown, var(--card-base-shadow));
}
.app-content .card-header {
    background: var(--surface-bg);
    font-weight: 600;
    padding: 1rem 1.25rem;
}
.app-content .card-body {
    padding: 1.5rem;
}
.app-content .card-footer {
    background: var(--surface-bg);
    border-top: 1px solid var(--card-border-color);
    padding: 1rem 1.25rem;
}

/* --- Alerts / Badges (extend the existing alert-custom / badge-custom) ---- */
.app-content .alert {
    border-radius: 0.75rem;
}
/* .alert-custom is used by the shared flash.php partial on BOTH the Admin
   and Student layouts. It previously lived only in dashboard.css, which
   Student pages never load — so flashes rendered unstyled there. Moved
   here (app.css, loaded by both layouts) for consistency. The per-type
   left border was previously a hardcoded inline style in flash.php; moved
   into CSS, driven by the same Bootstrap color tokens already in scope. */
.alert-custom {
    border-radius: 0.75rem;
    border: none;
    border-left: 4px solid transparent;
    box-shadow: var(--shadow-dropdown, 0 4px 6px -1px rgba(0, 0, 0, 0.05));
    padding: 1rem 1.25rem;
}
.alert-custom.alert-success { border-left-color: var(--bs-success, #198754); }
.alert-custom.alert-danger  { border-left-color: var(--bs-danger, #dc3545); }
.alert-custom.alert-warning { border-left-color: var(--bs-warning, #ffc107); }
.alert-custom.alert-info    { border-left-color: var(--bs-info, #0dcaf0); }

/* Icon chip used inside .alert-custom (flash.php) — reuses the existing
   .icon-tint-* utilities already defined above instead of introducing a
   new color system. */
.alert-custom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
}
.app-content .badge {
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* --- Responsive polish ------------------------------------------------------
   Stage 41H: the mobile block that used to live here (main.container-fluid
   gutter padding + unscoped .search-filter-bar/.widget-header padding) was
   an exact duplicate of two other rules later in this file — the
   .app-content-scoped version just below, and the .app-shell-container
   mobile-gutter block further down (which already covers
   #admin-main-content, the only element main.container-fluid ever matched).
   Removed rather than left triplicated; no visual change. */

/* ═══════════════════════════════════════════════════════════════════════
   STAGE 36C — STUDENT UI ADDITIONS (shared via .app-content)
   Progress displays, result/score presentation, and base accessibility
   focus states reused by both Admin and Student pages.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Progress displays (My Progress, Study Planner, course completion) --- */
.app-content .progress {
    height: 0.6rem;
    border-radius: 999px;
    background-color: var(--mcq-color-border, #e2e8f0);
    overflow: hidden;
}
.app-content .progress-bar {
    background-color: var(--bs-primary, #0F3D5C);
}
.app-content .progress-bar.bg-success { background-color: var(--bs-success, #198754) !important; }
.app-content .progress-bar.bg-warning { background-color: var(--bs-warning, #ffc107) !important; }
.app-content .progress-bar.bg-danger  { background-color: var(--bs-danger, #dc3545) !important; }

.progress-stat-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-body, #1e293b);
}
.progress-stat-row .progress-stat-value { color: var(--bs-secondary-color, #64748b); font-weight: 500; }

/* --- Result / score presentation (My Results, Mock Test, Daily Quiz) ----- */
.result-score-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.875rem;
}
.result-score-badge.is-pass {
    background: color-mix(in srgb, var(--bs-success, #198754) 12%, transparent);
    color: var(--bs-success, #198754);
}
.result-score-badge.is-fail {
    background: color-mix(in srgb, var(--bs-danger, #dc3545) 12%, transparent);
    color: var(--bs-danger, #dc3545);
}

/* --- Tooltips (Bootstrap tooltips already initialized in dashboard.js) --- */
.tooltip .tooltip-inner {
    background: var(--text-body, #1e293b);
    border-radius: 0.4rem;
    font-size: 0.8125rem;
    padding: 0.4rem 0.65rem;
}

/* --- Skip-to-content link (Admin + Student) ------------------------------
   Visually hidden until focused (keyboard-only users). Moved here from
   dashboard.css in Stage 36C so both layouts share one definition. */
.mcq-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.6rem 1rem;
    background: var(--mcq-color-primary, #0F3D5C);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 0.5rem 0;
    text-decoration: none;
}
.mcq-skip-link:focus {
    left: 0;
    outline: 2px solid var(--mcq-color-primary, #0F3D5C);
    outline-offset: 2px;
}

/* Top navbar focus-visible (Admin's .admin-navbar + Student's .student-navbar) */
.admin-navbar a:focus-visible,
.admin-navbar button:focus-visible,
.student-navbar a:focus-visible,
.student-navbar button:focus-visible {
    outline: 2px solid var(--mcq-color-primary, #0F3D5C);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Platform-wide keyboard focus state (Admin + Student) --------------- */
.app-content a:focus-visible,
.app-content button:focus-visible,
.app-content input:focus-visible,
.app-content select:focus-visible,
.app-content textarea:focus-visible,
.app-content [tabindex]:focus-visible {
    outline: 2px solid var(--mcq-color-primary, #0F3D5C);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --- Responsive polish shared by both layouts ---------------------------- */
@media (max-width: 767.98px) {
    .app-content .search-filter-bar { padding: 0.85rem; }
    .app-content .widget-header { padding: 0.85rem 1rem; }
    .app-content .empty-state { padding: 2rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .card-stat,
    #sidebar,
    .app-content,
    .app-content *,
    .sidebar-menu .nav-link,
    .sidebar-menu .nav-link i {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   STAGE 40.5 — TABLES, SEARCH, FILTERS & PAGINATION MODERNIZATION
   .table-container / .table-custom / .badge-custom migrated here from
   dashboard.css (Admin-only) — token-driven now instead of hardcoded hex
   — plus new opt-in presentation helpers (sticky header, selected row,
   sortable header indicator, selection column, row-actions gap). All
   scoped to .app-content so Admin and Student share one definition, same
   as the pagination / search-filter-bar / bulk-action-toolbar rules
   above. Presentation only — no pagination, search, filter, or sort
   logic is implemented or changed by this block.
   ═══════════════════════════════════════════════════════════════════════ */

.table-container {
    background: var(--surface-bg);
    border: 1px solid var(--card-border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--card-base-shadow);
    overflow: hidden;
}

.app-content .table-custom {
    margin-bottom: 0;
}
.app-content .table-custom th {
    background-color: var(--content-bg);
    color: var(--bs-secondary-color, #475569);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--card-border-color);
    white-space: nowrap;
}
.app-content .table-custom td {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--card-border-color);
    font-size: 0.875rem;
    color: var(--text-body);
    vertical-align: middle;
}
.app-content .table-custom tr:last-child td {
    border-bottom: none;
}
.app-content .table-custom tbody tr {
    transition: background-color 120ms ease;
}
.app-content .table-custom tbody tr:hover td {
    background-color: var(--content-bg);
}

/* Selected-row state — pairs with a leading row checkbox / bulk-action-toolbar */
.app-content .table-custom tbody tr.is-selected td,
.app-content .table-custom tbody tr.table-active td {
    background-color: color-mix(in srgb, var(--bs-primary, #0F3D5C) 6%, transparent);
}

/* Opt-in sticky header for long tables — add alongside .table-responsive;
   no markup change required on pages that don't use it. */
.table-responsive.table-sticky-header {
    max-height: 65vh;
}
.table-responsive.table-sticky-header thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Row action buttons — consistent gap without relying on inline margins */
.table-row-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Selection checkbox column */
.app-content .table-custom th.col-select,
.app-content .table-custom td.col-select {
    width: 44px;
    padding-right: 0;
    text-align: center;
}

/* Sortable column header — opt-in via aria-sort="ascending|descending|none" */
.app-content .table-custom th[aria-sort] {
    cursor: pointer;
    user-select: none;
}
.app-content .table-custom th[aria-sort] .sort-icon {
    margin-left: 0.35rem;
    font-size: 0.7rem;
    opacity: 0.45;
}
.app-content .table-custom th[aria-sort="ascending"] .sort-icon,
.app-content .table-custom th[aria-sort="descending"] .sort-icon {
    opacity: 1;
    color: var(--bs-primary, #0F3D5C);
}

/* Badge styling (moved from dashboard.css) */
.app-content .badge-custom {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
    border-radius: 0.375rem;
}

/* --- Status / plan pill badges ---------------------------------------------
   Stitch badge style: rounded-full pills, bold uppercase small text, colour
   conveys status rather than colour alone (paired with the label). Covers
   status badges + the Premium/Trial/Free plan badges used across Admin and
   Student (subscription, question bank, user lists). */
.app-content .badge-pill-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.app-content .badge-pill-status.is-premium {
    background: color-mix(in srgb, #6b1c00 12%, transparent);
    color: #6b1c00;
}
.app-content .badge-pill-status.is-trial {
    background: color-mix(in srgb, var(--bs-warning, #ffc107) 16%, transparent);
    color: color-mix(in srgb, var(--bs-warning, #ffc107) 65%, black);
}
.app-content .badge-pill-status.is-free {
    background: var(--mcq-color-background, #f1f5f9);
    color: var(--bs-secondary-color, #64748b);
}
.app-content .badge-pill-status.is-active {
    background: color-mix(in srgb, var(--bs-success, #198754) 12%, transparent);
    color: var(--bs-success, #198754);
}
.app-content .badge-pill-status.is-inactive {
    background: color-mix(in srgb, var(--bs-danger, #dc3545) 12%, transparent);
    color: var(--bs-danger, #dc3545);
}

@media (max-width: 767.98px) {
    .app-content .table-custom th,
    .app-content .table-custom td {
        padding: 0.65rem 0.85rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   STAGE 40.2 — GLOBAL LAYOUT SHELL MODERNIZATION
   Shell-only: container width, spacing scale, typography hierarchy,
   footer shell, responsive foundation. Shared by Admin (#admin-main-
   content) and Student (#studentPageMain) via the new `.app-shell-container`
   marker class added to both layouts' inner content container in this
   stage — no other markup changed. Does not touch component styling
   (forms, buttons, tables, cards, etc. above) or Theme tokens.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* Shell spacing scale — falls back to sensible defaults if a Theme
       ever chooses to expose matching --mcq-spacing-* tokens. */
    --shell-content-max-width: 1440px;
    --shell-gutter-x:        var(--mcq-spacing-lg, 1.5rem);
    --shell-gutter-y:        var(--mcq-spacing-lg, 1.5rem);
    --shell-gutter-x-mobile: var(--mcq-spacing-md, 1rem);
    --shell-gutter-y-mobile: var(--mcq-spacing-md, 1rem);
    --shell-header-gap:      1rem;
}

/* --- Global typography (Theme-token-driven) ------------------------------
   Applies the Theme Foundation's font tokens (--mcq-font-body / --mcq-
   font-heading, injected by ThemeService::renderCssVariables()) as the
   actual rendered typeface for all three shells (Admin, Student, Auth —
   app.css is loaded by all three layout heads). Previously only the Admin
   shell set a body font, and it was a hardcoded 'Plus Jakarta Sans' value
   in dashboard.css that ignored the active Theme's typography tokens
   entirely; Student and Auth set no font at all. Fixed here (shell-level,
   not component-level) and in dashboard.css, which is loaded after this
   file in admin.php and must reference the same token rather than
   overriding it with a hardcoded family. */
body {
    font-family: var(--mcq-font-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--mcq-font-heading, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
}

/* --- Content container: consistent max-width + gutters ------------------
   Both master layouts already use Bootstrap's .container-fluid (edge-to-
   edge). On very wide monitors this stretches page content uncomfortably
   far; capping and centering it here is shell-level, not a redesign of
   any page inside it. */
/* Stage 41I CSS audit: was two separate .app-shell-container blocks
   (max-width/centering + spacing) — merged into one, values unchanged. */
.app-shell-container {
    max-width: var(--shell-content-max-width);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding-left:  var(--shell-gutter-x);
    padding-right: var(--shell-gutter-x);
}
#admin-main-content.app-shell-container {
    padding-top:    var(--shell-gutter-y);
    padding-bottom: var(--shell-gutter-y);
}
#studentPageMain > .app-shell-container {
    padding-top:    var(--shell-gutter-y);
    padding-bottom: var(--shell-gutter-y);
}

/* --- Typography hierarchy -------------------------------------------------
   Admin and Student page headers already share the same markup pattern
   (breadcrumb-custom + h1.h3.fw-bold); this makes the relationship between
   breadcrumb, title, and the content below it consistent across both
   shells instead of relying on default Bootstrap heading spacing. */
.app-shell-container .breadcrumb-custom {
    margin-bottom: 0.25rem;
}
.app-shell-container h1.h3 {
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.app-shell-container > .d-flex.border-bottom {
    gap: var(--shell-header-gap);
}

/* --- Footer shell -----------------------------------------------------
   Admin and Student footers already share identical base markup/classes
   (footer.bg-white.border-top); this confirms one consistent spacing/
   type treatment for both instead of leaving it to Bootstrap defaults. */
#admin-wrapper footer.border-top,
#main-wrapper footer.border-top {
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.8125rem;
}

/* Stage 41A — Admin footer only: brand + copyright split across a flex
   row (Stitch reference's footer pattern), reusing the same .app-shell-
   container gutters/max-width already used for the page header/content
   above it. Content (app name, year, "all rights reserved") is unchanged —
   layout/typography only. Scoped to #admin-wrapper so it does not affect
   Student's still-unmodified footer markup. */
#admin-wrapper footer.border-top.mcq-app-footer {
    padding-top: 0;
    padding-bottom: 0;
}
#admin-wrapper .mcq-app-footer {
    font-size: 0.8125rem;
}
#admin-wrapper .mcq-app-footer__inner {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
#admin-wrapper .mcq-app-footer__brand {
    font-weight: 700;
    color: var(--mcq-color-primary, #0F3D5C);
    letter-spacing: -0.01em;
}
#admin-wrapper .mcq-app-footer__copyright {
    font-size: 0.8125rem;
}

/* --- Responsive layout foundation ---------------------------------------
   Extends the existing mobile gutter tightening (previously only matched
   Admin's `main.container-fluid`) to the shared `.app-shell-container`
   marker, so Student's inner container — which is a <div>, not a <main>,
   and was not covered by the pre-existing `main.container-fluid` rule —
   receives the same tightened mobile gutters Admin already had. */
@media (max-width: 767.98px) {
    .app-shell-container {
        padding-left:  var(--shell-gutter-x-mobile) !important;
        padding-right: var(--shell-gutter-x-mobile) !important;
    }
    #admin-main-content.app-shell-container,
    #studentPageMain > .app-shell-container {
        padding-top:    var(--shell-gutter-y-mobile);
        padding-bottom: var(--shell-gutter-y-mobile);
    }
}

/* --- Ultra-wide screens: slightly roomier gutters ------------------------- */
@media (min-width: 1600px) {
    :root {
        --shell-gutter-x: 2rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   STAGE 53B — ADMIN PRODUCTIVITY & FORM UX MODERNIZATION
   Shared, opt-in presentation helpers for the modernized Question Editor
   and other long admin forms. Token-driven like the rest of this file —
   no page-specific overrides, so any form can reuse these same classes.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Sticky Save Bar -------------------------------------------------------
   Keeps Save / Cancel reachable on long forms without a second submit
   endpoint — it submits the existing <form> via the button's form="" attr. */
.sticky-save-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--surface-bg);
    border-top: 1px solid var(--card-border-color);
    box-shadow: 0 -4px 12px -6px rgba(0, 0, 0, 0.08);
}
.sticky-save-bar-inner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: var(--shell-max-width, 1320px);
    margin: 0 auto;
    padding: 0.65rem var(--shell-gutter-x, 1.5rem);
}
@media (max-width: 767.98px) {
    .sticky-save-bar-inner {
        padding: 0.65rem var(--shell-gutter-x-mobile, 1rem);
    }
}

/* --- Compact Image Uploads --------------------------------------------------
   Icon + filename + Replace button instead of a full-width file input.
   Reused by any form that currently uses a bare <input type="file">. */
.compact-media-upload {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    border: 1px solid var(--card-border-color);
    border-radius: var(--radius-md);
    background: var(--content-bg);
}
.compact-media-preview {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--surface-bg);
    border: 1px solid var(--card-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
}
.compact-media-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.compact-media-preview.is-empty {
    color: var(--bs-secondary-color, #94a3b8);
    font-size: 1.25rem;
}
.compact-media-upload .min-w-0 {
    min-width: 0;
}

/* --- Form section help / consistency (Part E) ------------------------------
   Standardizes the small helper-text row under a tab/section heading and
   tightens spacing between stacked field groups on long admin forms. */
.form-section-help {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #64748b);
    margin-bottom: 1rem;
}
.app-content .tab-content .card:last-child {
    margin-bottom: 0;
}