/* Main styles for Repaso */

:root {
    --primary-color: #0d6efd;
    --secondary-color: #6c757d;
    --success-color: #198754;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #0dcaf0;
    --light-color: #f8f9fa;
    --dark-color: #212529;
    --border-radius: 8px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* Question type colors */
    --question-generated-color: #0d6efd; /* Blue */
    --question-extracted-color: #fd7e14; /* Orange */
}

/* === GLOBAL FOUNDATION === */

/* Base */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* iOS safe area support */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    flex: 1;
}

/* === NAVIGATION === */
.navbar {
    box-shadow: var(--shadow-sm);
    /* Sticky with safe area offset */
    padding-top: env(safe-area-inset-top);
}

.navbar-brand {
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}

.navbar-toggler {
    border: none;
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* User avatar in navbar dropdown */
.navbar-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 600;
    font-size: 0.8rem;
    flex-shrink: 0;
}

/* Mobile nav improvements */
@media (max-width: 991.98px) {
    .navbar-collapse {
        padding-bottom: 0.5rem;
        max-height: 80vh;
        overflow-y: auto;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        min-height: 48px;
        display: flex;
        align-items: center;
    }

    .navbar-nav .dropdown-menu {
        background: transparent;
        border: none;
        box-shadow: none;
        padding: 0 0 0 1rem;
    }

    .navbar-nav .dropdown-item {
        color: rgba(255, 255, 255, 0.8);
        padding: 0.625rem 1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    .navbar-nav .dropdown-item:hover,
    .navbar-nav .dropdown-item:focus {
        background: rgba(255, 255, 255, 0.1);
        color: white;
    }

    .navbar-nav .dropdown-divider {
        border-color: rgba(255, 255, 255, 0.15);
    }
}

/* === FOOTER === */
.site-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: var(--light-color, #f8f9fa);
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom));
}

/* === LOGIN PAGE === */
.login-container {
    max-width: 440px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

@media (min-width: 768px) {
    .login-container {
        margin-top: 2.5rem;
        padding: 0;
    }
}

.login-card {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.login-card:hover {
    transform: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

.login-header {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    padding: 2.5rem 2rem;
    text-align: center;
    color: white;
}

.login-header i {
    font-size: 2.75rem;
    margin-bottom: 0.5rem;
    display: block;
}

.login-header h3 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.login-header p {
    opacity: 0.85;
    font-size: 0.95rem;
}

.login-body {
    padding: 2rem;
}

.provider-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.2s ease;
    text-decoration: none;
    border: 1.5px solid #dadce0;
    background: white;
    color: #3c4043;
    min-height: 48px;
}

.provider-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #c2c8d0;
    background: #f8f9fa;
    color: #3c4043;
}

.provider-btn:active {
    transform: translateY(0);
}

.provider-btn i {
    font-size: 1.25rem;
    color: #4285f4;
}

.login-info-box {
    background-color: #e7f1ff;
    border: 1px solid #b8d4fe;
    border-radius: 10px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.login-info-box i {
    color: #0d6efd;
    font-size: 1.125rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.login-info-box p {
    margin: 0;
    color: #1a3a5c;
    font-size: 0.875rem;
    line-height: 1.5;
}

.login-info-box strong {
    color: #0d3b66;
}

.login-help {
    text-align: center;
    padding: 1rem 0 1.5rem;
}

.login-help p {
    color: #6c757d;
    font-size: 0.8125rem;
    margin: 0;
}

@media (max-width: 767.98px) {
    .login-header {
        padding: 2rem 1.5rem;
    }

    .login-body {
        padding: 1.5rem;
    }

    .login-header i {
        font-size: 2.25rem;
    }

    .login-header h3 {
        font-size: 1.5rem;
    }
}

/* === PAGE LAYOUT UTILITIES === */
/* Narrow, centered wrapper for focused single-column forms (upload, take-test).
   base.html already wraps every page in <main class="container">, which sets the
   standard list/dashboard width; .page-narrow narrows the focused forms to a
   comfortable reading width so inputs/cards don't sprawl across the full
   container. Replaces the ad-hoc col-md-8 / col-lg-8 wrappers (oa-em7f). */
.page-narrow {
    max-width: 45rem; /* 720px — ~8/12 of the default container */
    margin: 0 auto;
    /* Match a Bootstrap column's gutter so nested .row elements (whose negative
       side-margins a column's padding normally absorbs) align with the rest of
       the form instead of poking out (oa-em7f). */
    padding: 0 0.75rem;
}

/* === PRACTICE HOME === */
.practice-home h1 {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.practice-home .stat-card .card-body {
    padding: 1rem 0.75rem;
}

.practice-home .stat-card h5 {
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

.practice-home .stat-card h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .practice-home {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .practice-home h1 {
        font-size: 1.375rem;
        margin-bottom: 1rem;
    }

    .practice-home .stats-row {
        margin-bottom: 0.75rem !important;
    }

    .practice-home .stat-card {
        margin-bottom: 0.5rem;
    }

    .practice-home .stat-card:hover {
        transform: none;
        box-shadow: var(--shadow);
    }

    .practice-home .stat-card .card-body {
        padding: 0.75rem 0.5rem;
    }

    .practice-home .stat-card h2 {
        font-size: 1.5rem;
    }

    .practice-home .action-btn {
        width: 100%;
        min-height: 52px;
        font-size: 1.0625rem;
    }

    .practice-home .sidebar-section {
        margin-top: 1.5rem;
    }
}

/* Cards */
.card {
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.card-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background-color: rgba(0, 0, 0, 0.02);
    font-weight: 600;
}

/* Buttons */
.btn {
    border-radius: 6px;
    padding: 0.625rem 1.25rem;
    font-weight: 500;
    transition: all 0.2s ease;
    min-height: 44px; /* Touch target minimum for mobile */
}

.btn:active {
    transform: scale(0.98);
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    min-height: 48px;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    min-height: 36px;
}

/* Forms */
.form-control, .form-select {
    border-radius: 6px;
    border: 1px solid #dee2e6;
    padding: 0.625rem 0.75rem;
    min-height: 44px; /* Touch target minimum for mobile */
}

.form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.15);
}

.form-label {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--dark-color);
}

.form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.15rem;
}

/* Status badges */
.badge {
    padding: 0.4em 0.7em;
    font-weight: 500;
    border-radius: 4px;
}

/* Progress bars */
.progress {
    height: 8px;
    border-radius: 4px;
    background-color: #e9ecef;
}

.progress-bar {
    transition: width 0.3s ease;
}

/* List groups */
.list-group-item {
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 1rem;
    transition: background-color 0.15s ease;
}

.list-group-item-action {
    cursor: pointer;
    min-height: 44px; /* Touch target for list items */
    display: flex;
    align-items: center;
}

.list-group-item-action:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Loading States */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.loading-spinner {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

.loading-inline {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
    vertical-align: middle;
    margin-left: 0.5rem;
}

.btn-loading {
    position: relative;
    pointer-events: none;
    color: transparent !important;
}

.btn-loading::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin-left: -0.5rem;
    margin-top: -0.5rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border 0.75s linear infinite;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 9999;
    max-width: 350px;
}

.toast {
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 0.75rem;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease;
}

.toast.show {
    opacity: 1;
    transform: translateX(0);
}

.toast-header {
    background: transparent;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.75rem 1rem;
    font-weight: 600;
}

.toast-body {
    padding: 0.75rem 1rem;
}

.toast-success {
    border-left: 4px solid var(--success-color);
}

.toast-error {
    border-left: 4px solid var(--danger-color);
}

.toast-warning {
    border-left: 4px solid var(--warning-color);
}

.toast-info {
    border-left: 4px solid var(--info-color);
}

/* Error States */
.error-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.error-card {
    text-align: center;
    padding: 3rem 2rem;
}

.error-code {
    font-size: 6rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

.error-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.error-description {
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

/* Alerts */
.alert {
    border-radius: var(--border-radius);
    border: none;
    padding: 1rem 1.25rem;
}

.alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    color: var(--success-color);
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.1);
    color: #997404;
}

.alert-info {
    background-color: rgba(13, 202, 240, 0.1);
    color: #055160;
}

/* Footer */
footer {
    margin-top: auto;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Empty States */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-state-icon {
    font-size: 4rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.empty-state-description {
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.3s ease;
}

/* Utility classes */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.text-truncate-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.cursor-pointer {
    cursor: pointer;
}

.no-decoration {
    text-decoration: none;
}

.no-decoration:hover {
    text-decoration: none;
}

/* === RESPONSIVE DESIGN === */

/* Large Desktop (1920px+) */
@media (min-width: 1920px) {
    .container {
        max-width: 1400px;
    }

    .card {
        margin-bottom: 1.5rem;
    }

    .navbar-brand {
        font-size: 1.5rem;
    }

    .btn {
        padding: 0.75rem 1.5rem;
    }
}

/* Desktop (1200px - 1919px) */
@media (min-width: 1200px) and (max-width: 1919px) {
    .container {
        max-width: 1140px;
    }
}

/* Tablet (768px - 1199px) */
@media (min-width: 768px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    .card {
        margin-bottom: 1rem;
    }

    .toast-container {
        max-width: 300px;
    }
}

/* Mobile (<768px) */
@media (max-width: 767.98px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Stack columns on mobile */
    .row > .col-md-4,
    .row > .col-md-6,
    .row > .col-md-8 {
        width: 100%;
        margin-bottom: 1rem;
    }

    /* Cards on mobile */
    .card {
        margin-bottom: 1rem;
        border-radius: 6px;
    }

    .card-body {
        padding: 1rem;
    }

    /* Typography on mobile */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    h4 {
        font-size: 1.125rem;
    }

    h5 {
        font-size: 1rem;
    }

    /* Buttons on mobile - full width for primary actions */
    .btn-block-mobile {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    /* Forms on mobile */
    .form-control,
    .form-select {
        font-size: 16px; /* Prevent auto-zoom on iOS */
    }

    /* Navbar on mobile */
    .navbar-collapse {
        background: var(--primary-color);
        padding: 1rem;
        margin-top: 0.5rem;
        border-radius: var(--border-radius);
        box-shadow: var(--shadow);
    }

    .navbar-collapse .nav-link {
        color: white !important;
        padding: 0.75rem 1rem;
        border-radius: 6px;
        margin-bottom: 0.25rem;
    }

    .navbar-collapse .nav-link:hover,
    .navbar-collapse .nav-link:active {
        background-color: rgba(255, 255, 255, 0.15);
    }

    .navbar-nav .nav-item {
        margin-bottom: 0.25rem;
    }

    .dropdown-menu {
        position: static !important;
        transform: none !important;
        border: none;
        box-shadow: none;
        padding-left: 1rem;
    }

    /* Stats cards stack on mobile */
    .stats-row .col-md-4 {
        width: 100%;
        margin-bottom: 0.75rem;
    }

    /* List groups on mobile */
    .list-group-item {
        padding: 0.75rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .list-group-item .d-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Toast notifications on mobile */
    .toast-container {
        left: 1rem;
        right: 1rem;
        max-width: none;
    }

    /* Practice test interface on mobile */
    .progress-bar-container {
        position: sticky;
        top: 0;
        z-index: 100;
        background: white;
        padding: 0.75rem;
        box-shadow: var(--shadow-sm);
    }

    /* Question options on mobile - ensure large touch targets */
    .list-group-item-action {
        padding: 1rem;
        min-height: 48px;
    }

    .form-check-input {
        width: 1.5rem;
        height: 1.5rem;
    }
}

/* Extra Small Mobile (<375px) */
@media (max-width: 374.98px) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    h1 {
        font-size: 1.5rem;
    }

    .btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .card-body {
        padding: 0.75rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets for touch devices */
    .btn,
    .list-group-item-action,
    .nav-link {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    .btn:hover {
        transform: none;
    }

    .card:hover {
        transform: none;
        box-shadow: var(--shadow);
    }
}

/* Print styles */
@media print {
    .navbar,
    footer,
    .btn,
    .toast-container {
        display: none;
    }

    .card {
        box-shadow: none;
        border: 1px solid #dee2e6;
        page-break-inside: avoid;
    }

    body {
        background: white;
    }
}

/* Dark mode support */
[data-bs-theme="dark"] {
    --light-color: #212529;
    --dark-color: #f8f9fa;
}

[data-bs-theme="dark"] .provider-btn {
    background: #2b3035;
    color: #dee2e6;
    border-color: #495057;
}

[data-bs-theme="dark"] .provider-btn:hover {
    background: #343a40;
    color: #dee2e6;
    border-color: #6c757d;
}

[data-bs-theme="dark"] .provider-btn i {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .login-info-box {
    background-color: #0d2137;
    border-color: #1a3a5c;
}

[data-bs-theme="dark"] .login-info-box p {
    color: #b8d4fe;
}

[data-bs-theme="dark"] .login-info-box strong {
    color: #8cb9ff;
}

[data-bs-theme="dark"] .login-info-box i {
    color: #6ea8fe;
}

[data-bs-theme="dark"] .login-help p {
    color: #adb5bd;
}

[data-bs-theme="dark"] .site-footer {
    background: #1a1d20;
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .toast {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
    color: #dee2e6;
}

[data-bs-theme="dark"] .toast-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    color: #dee2e6;
}

[data-bs-theme="dark"] .review-stat-card {
    background: #2b3035;
}

[data-bs-theme="dark"] .review-option {
    background: #2b3035;
    border-color: #495057;
}

[data-bs-theme="dark"] .review-option-letter {
    background-color: #495057;
    color: #dee2e6;
}

[data-bs-theme="dark"] .review-all-header {
    background: #1a1d20;
    border-bottom-color: #495057;
}

[data-bs-theme="dark"] .review-all-option {
    background: #2b3035;
    border-color: #495057;
}

[data-bs-theme="dark"] .review-all-option-letter {
    background-color: #495057;
    color: #dee2e6;
}

[data-bs-theme="dark"] .floating-action-bar {
    background: #1a1d20;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
    border-top-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .feedback-details-card {
    background: #2b3035;
    border-color: #495057;
}

[data-bs-theme="dark"] .feedback-detail-row {
    border-bottom-color: #495057;
}

[data-bs-theme="dark"] .feedback-detail-label {
    color: #adb5bd;
}

[data-bs-theme="dark"] .feedback-detail-value {
    color: #dee2e6;
}

[data-bs-theme="dark"] .feedback-success-title {
    color: #dee2e6;
}

[data-bs-theme="dark"] .feedback-success-text {
    color: #adb5bd;
}

[data-bs-theme="dark"] .theme-toggle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.15rem;
}

[data-bs-theme="dark"] .theme-toggle:hover {
    color: #ffffff;
}

/* Light mode theme toggle styling */
.theme-toggle {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.15rem;
    padding: 0.375rem 0.5rem;
    border: none;
    text-decoration: none;
}

.theme-toggle:hover {
    color: #ffffff;
}

.theme-toggle:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
    border-radius: 4px;
}

/* Delete button in dropdown menu */
.delete-form {
    margin: 0;
}

.delete-form button {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    cursor: pointer;
}

.dropdown-item.text-danger:hover {
    background-color: rgba(220, 53, 69, 0.1);
}

/* Three-dot menu button styling */
.btn-link.text-body-secondary {
    opacity: 0.6;
    transition: opacity 0.2s;
}

.btn-link.text-body-secondary:hover {
    opacity: 1;
}

/* === QUESTION BANK STYLES === */

/* Question type colors added to main :root block above */

/* Question card type differentiation */
.question-card-generated {
    border-left: 4px solid var(--question-generated-color) !important;
}

.question-card-extracted {
    border-left: 4px solid var(--question-extracted-color) !important;
}

/* Question type badges */
.badge-question-generated {
    background-color: var(--question-generated-color);
    color: white;
}

.badge-question-extracted {
    background-color: var(--question-extracted-color);
    color: white;
}

/* Multi-select mode */
.question-card-checkbox {
    display: none;
    position: absolute;
    top: 1rem;
    left: 1rem;
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
    z-index: 10;
}

.question-card-checkbox input[type="checkbox"] {
    width: 1.5rem;
    height: 1.5rem;
    cursor: pointer;
}

/* Multi-select mode active */
.select-mode .question-card-checkbox {
    display: block;
}

.select-mode .question-card-generated .card-body {
    padding-left: 3.5rem; /* Make room for checkbox */
}

/* Lock icon for protected questions */
.question-card-lock {
    display: none;
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--secondary-color);
    opacity: 0.7;
    z-index: 10;
}

.select-mode .question-card-lock {
    display: block;
}

.select-mode .question-card-extracted .card-body {
    padding-left: 3.5rem; /* Make room for lock icon */
}

/* Floating action bar — hidden until at least one question is selected.
   The bar slides up from the bottom. ``visibility: hidden`` (rather than only
   ``transform``) takes it out of the tab order and accessibility tree while
   hidden, so the keyboard-focusable "Cancel" button and the disabled actions
   are neither reachable nor announced at zero selection. The visibility
   transition is delayed on hide so it waits for the slide-out to finish, and
   immediate on show so the contents appear with the bar (oa-em7f). */
.floating-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 1rem;
    z-index: 1000;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

.floating-action-bar.show {
    transform: translateY(0);
    visibility: visible;
    /* Drop the hide-delay so contents appear with the bar; transform's delay
       was already 0, so only the longhand is needed (oa-em7f). */
    transition-delay: 0s;
}

.floating-action-bar .action-bar-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.floating-action-bar .selected-count {
    font-weight: 600;
    color: var(--dark-color);
    flex: 1;
    min-width: 150px;
}

.floating-action-bar .action-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.floating-action-bar .btn {
    min-width: 120px;
}

/* Question bank mobile styles */
@media (max-width: 767.98px) {
    /* Stats cards - 2x2 grid on mobile */
    .question-bank-stats .col-6 {
        margin-bottom: 0.75rem;
    }

    .question-bank-stats .card-body {
        padding: 0.75rem;
    }

    .question-bank-stats h3 {
        font-size: 1.5rem;
    }

    .question-bank-stats .card-text {
        font-size: 0.875rem;
    }

    /* Filter form - collapsible on mobile */
    .filter-toggle-btn {
        width: 100%;
        margin-bottom: 1rem;
    }

    /* Question cards - full width on mobile */
    .question-card {
        margin-bottom: 1rem;
    }

    .question-card .card-body {
        padding: 0.875rem;
    }

    .question-card .card-title {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .question-card .btn {
        width: 100%;
        margin-top: 0.5rem;
    }

    /* Pagination - larger touch targets */
    .pagination .page-link {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pagination .page-item {
        margin: 0 2px;
    }

    /* Multi-select on mobile */
    .question-card-checkbox {
        width: 1.75rem;
        height: 1.75rem;
    }

    .question-card-checkbox input[type="checkbox"] {
        width: 1.75rem;
        height: 1.75rem;
    }

    /* Floating action bar on mobile */
    .floating-action-bar {
        padding: 0.75rem;
    }

    .floating-action-bar .action-bar-content {
        flex-direction: column;
        gap: 0.75rem;
    }

    .floating-action-bar .selected-count {
        text-align: center;
        min-width: 100%;
    }

    .floating-action-bar .action-buttons {
        width: 100%;
        flex-direction: column;
    }

    .floating-action-bar .btn {
        width: 100%;
        min-width: 100%;
    }
}

/* === PRACTICE TEST STYLES === */

/* Start Test - Topic Tree */
.topic-tree-container {
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Start Test - Topic control buttons row */
.topic-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

/* Start Test - Topic tree checkboxes need proper touch targets */
.topic-tree-container .form-check {
    min-height: 48px;
    display: flex;
    align-items: center;
}

/* Start Test - Topic tree group titles */
.topic-tree-container > div > strong:first-child,
.topic-tree-container .ms-3 + strong {
    display: block;
    padding-top: 0.5rem;
    margin-top: 0.5rem;
    border-top: 1px solid #e9ecef;
    color: var(--dark-color);
    font-size: 0.9375rem;
}

/* Take Test - Answer options: override global mobile column layout
   The global .list-group-item mobile rule sets flex-direction: column which
   breaks answer options that need radio + text inline */
.take-test-options .list-group-item-action {
    flex-direction: row !important;
    align-items: center;
    gap: 0.75rem;
}

/* Take Test - Question text readability */
.take-test-question-text {
    font-size: 1.125rem;
    line-height: 1.7;
}

/* Take Test - Confirm-answer button: make the disabled→enabled delta obvious.
   The button loads disabled and is enabled by JS once an option is picked, but
   Bootstrap's default disabled look (faded primary) is too close to enabled, so
   users miss that the commit action is now live. Disabled reads clearly
   inactive (faded + muted neutral); enabled is the unchanged stock .btn-primary,
   so the button visibly "lights up" on selection (oa-em7f). The disabled state
   is exempt from WCAG 1.4.3 (inactive UI) and is not colour-alone: opacity +
   neutral bg/border convey it (oa-em7f). */
.take-test-submit .btn-primary:disabled {
    opacity: .55;
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-secondary-color);
}

/* Take Past Exam - Answer option rows: flex layout mirrors .take-test-options
   so the radio, letter and text stay aligned and wrap cleanly. Mobile rules
   below enforce the 48px touch target and a larger radio. */
.past-exam-option {
    display: flex;
    align-items: center;
    padding: 0.5rem;
}

.past-exam-option strong {
    flex-shrink: 0;
}

/* Take Test - Progress card (sticky behavior added in mobile breakpoint) */
.take-test-progress-card {
    position: static;
}

/* Take Test - Progress card: disable card hover transform so sticky works */
.take-test-progress-card:hover,
.past-exam-progress-card:hover {
    transform: none;
    box-shadow: var(--shadow);
}

/* Mobile Adjustments */
@media (max-width: 767.98px) {
    /* Start Test - Topic tree: use viewport-relative max-height on mobile */
    .topic-tree-container {
        max-height: 50vh;
        max-height: 50dvh;
    }

    /* Start Test - Better spacing between form groups */
    .start-test-form .mb-3,
    .start-test-form .mb-4 {
        margin-bottom: 1.25rem;
    }

    /* Start Test - Topic tree select/deselect buttons full width on small screens */
    .topic-controls .btn-sm {
        flex: 1;
        min-width: 0;
    }

    /* Take Test - Sticky progress bar at top of viewport */
    .take-test-progress-card {
        position: sticky;
        top: 0;
        z-index: 100;
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin-bottom: 0 !important;
        box-shadow: var(--shadow-sm);
    }

    /* Answer options: enforce 48px minimum touch target
       (take-test list-group rows + past-exam label rows) */
    .take-test-options .list-group-item-action,
    .past-exam-option {
        min-height: 48px;
        padding: 0.875rem 1rem;
    }

    /* Larger radio buttons for answer options on mobile
       (take-test + past-exam) */
    .take-test-options .form-check-input,
    .past-exam-option .form-check-input {
        width: 1.375rem;
        height: 1.375rem;
        flex-shrink: 0;
        margin-top: 0;
    }

    /* Take Test - Keep answer letter bold text from wrapping alone */
    .take-test-options .list-group-item-action strong {
        flex-shrink: 0;
    }

    /* Take Test - Submit button top spacing */
    .take-test-submit {
        margin-top: 0.75rem;
    }

    /* Take Test - Info card below question */
    .take-test-info-card {
        margin-top: 0.5rem;
    }
}

/* === QUESTION NAV GRID (oa-tfah) === */
/* Compact numbered buttons to jump between questions. Answered = green + check
   (colour + icon so the state isn't colour-alone, oa-w910); blank = outline.
   The current question gets a primary-coloured ring. */
.question-nav-btn {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0.1rem 0.4rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
}
.question-nav-current {
    box-shadow: 0 0 0 2px var(--bs-primary, #0d6efd);
    z-index: 1;
}

/* === REVIEW PAGE STYLES === */

/* Score Ring */
.review-score-card {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

.review-score-ring {
    position: relative;
    width: 160px;
    height: 160px;
    margin: 0 auto;
}

.review-score-value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

.review-score-number {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.review-score-percent {
    font-size: 1.5rem;
    font-weight: 600;
    opacity: 0.7;
}

.review-score-circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.review-score-circle-bg {
    fill: none;
    stroke: #e9ecef;
    stroke-width: 8;
}

.review-score-circle-progress {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 339.292; /* 2 * PI * 54 */
    stroke-dashoffset: calc(339.292 * (1 - var(--score) / 100));
    transition: stroke-dashoffset 1s ease-in-out;
}

/* Score colors */
.review-score-excellent .review-score-number {
    color: #198754;
}

.review-score-excellent .review-score-circle-progress {
    stroke: #198754;
}

.review-score-good .review-score-number {
    color: #0d6efd;
}

.review-score-good .review-score-circle-progress {
    stroke: #0d6efd;
}

.review-score-fair .review-score-number {
    color: #ffc107;
}

.review-score-fair .review-score-circle-progress {
    stroke: #ffc107;
}

.review-score-poor .review-score-number {
    color: #dc3545;
}

.review-score-poor .review-score-circle-progress {
    stroke: #dc3545;
}

/* Stat Cards */
.review-stat-card {
    border: none;
    background: white;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.review-stat-card .card-body {
    padding: 1.25rem;
}

.review-stat-icon {
    font-size: 2.5rem;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-stat-success .review-stat-icon {
    color: #198754;
}

.review-stat-danger .review-stat-icon {
    color: #dc3545;
}

.review-stat-info .review-stat-icon {
    color: #0d6efd;
}

.review-stat-warning .review-stat-icon {
    color: #ffc107;
}

.review-stat-card h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    line-height: 1;
}

.review-stat-card .small {
    font-size: 0.875rem;
}

/* Answer List */
.review-answer-item {
    padding: 1rem 1.25rem;
    border-left: 4px solid transparent;
    transition: all 0.2s ease;
}

.review-answer-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
    border-left-color: #0d6efd;
}

.review-answer-number {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.review-answer-correct {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
}

.review-answer-incorrect {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* Progress Badge */
.review-progress-badge {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: white;
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.875rem;
    box-shadow: 0 2px 4px rgba(13, 110, 253, 0.3);
}

/* Question Card */
.review-question-card {
    border: 2px solid rgba(0, 0, 0, 0.08);
}

.review-question-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 2px solid rgba(0, 0, 0, 0.08);
    padding: 1.25rem;
}

.review-question-text {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: #212529;
}

/* Options */
.review-options {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.review-option {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: white;
}

.review-option-correct {
    border-color: #198754;
    background-color: rgba(25, 135, 84, 0.05);
}

.review-option-incorrect {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.05);
}

.review-option-letter {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    margin-right: 1rem;
    flex-shrink: 0;
    background-color: #e9ecef;
    color: #495057;
}

.review-option-correct .review-option-letter {
    background-color: #198754;
    color: white;
}

.review-option-incorrect .review-option-letter {
    background-color: #dc3545;
    color: white;
}

.review-option-text {
    flex: 1;
    font-size: 1rem;
    line-height: 1.5;
}

.review-option-indicator {
    margin-left: 1rem;
    font-size: 1.5rem;
}

/* Explanation Section */
.review-explanation-card {
    border-left: 4px solid #0d6efd;
}

.review-explanation-section,
.review-reference-section {
    margin: 0;
}

.review-explanation-title,
.review-reference-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #212529;
}

.review-explanation-text,
.review-reference-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #495057;
    margin-bottom: 0;
}

/* Mobile Adjustments */
@media (max-width: 767.98px) {
    .review-score-ring {
        width: 140px;
        height: 140px;
    }

    .review-score-number {
        font-size: 2.5rem;
    }

    .review-score-percent {
        font-size: 1.25rem;
    }

    .review-stat-card h3 {
        font-size: 1.5rem;
    }

    .review-stat-icon {
        font-size: 2rem;
        margin-right: 0.75rem;
    }

    .review-answer-item {
        padding: 0.875rem 1rem;
    }

    .review-answer-number {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .review-progress-badge {
        font-size: 0.75rem;
        padding: 0.375rem 0.875rem;
    }

    .review-question-text {
        font-size: 1rem;
    }

    .review-option {
        padding: 0.875rem 1rem;
    }

    .review-option-letter {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
        margin-right: 0.75rem;
    }

    .review-option-text {
        font-size: 0.9375rem;
    }

    .review-option-indicator {
        font-size: 1.25rem;
        margin-left: 0.5rem;
    }
}

/* === REVIEW ALL PAGE STYLES === */

/* Sticky Header */
.review-all-header {
    background: white;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #e9ecef;
    z-index: 100;
}

.review-all-score {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.review-all-score-label {
    font-size: 0.875rem;
    color: #6c757d;
}

.review-all-score-value {
    font-size: 1.5rem;
    font-weight: 700;
}

/* Filters */
.review-all-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.review-filter-btn {
    padding: 0.5rem 1rem;
    border: 2px solid #dee2e6;
    background: white;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.review-filter-btn:hover {
    border-color: #0d6efd;
    background-color: rgba(13, 110, 253, 0.05);
}

.review-filter-btn.active {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

/* Quick Jump Grid */
.review-quick-jump {
    margin-top: 1rem;
}

.review-quick-jump-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
    display: block;
    margin-bottom: 0.5rem;
}

.review-quick-jump-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.review-quick-jump-pill {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.review-quick-jump-pill.correct {
    background-color: rgba(25, 135, 84, 0.1);
    color: #198754;
    border: 2px solid rgba(25, 135, 84, 0.3);
}

.review-quick-jump-pill.incorrect {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 2px solid rgba(220, 53, 69, 0.3);
}

.review-quick-jump-pill:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Question Cards */
.review-all-question-card {
    border: 2px solid #dee2e6;
    transition: all 0.2s ease;
}

.review-all-question-card.question-correct {
    border-left: 4px solid #198754;
}

.review-all-question-card.question-incorrect {
    border-left: 4px solid #dc3545;
}

.review-all-question-header {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    cursor: pointer;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #dee2e6;
    transition: background-color 0.2s ease;
}

.review-all-question-header:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.review-all-question-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
}

.review-collapse-icon {
    transition: transform 0.3s ease;
    font-size: 1.25rem;
}

.review-all-question-text {
    font-size: 1.0625rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    color: #212529;
}

/* Options */
.review-all-options {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.review-all-option {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    background: white;
}

.review-all-option-correct {
    border-color: #198754;
    background-color: rgba(25, 135, 84, 0.05);
}

.review-all-option-incorrect {
    border-color: #dc3545;
    background-color: rgba(220, 53, 69, 0.05);
}

.review-all-option-letter {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e9ecef;
    color: #495057;
    font-weight: 700;
    font-size: 0.875rem;
    margin-right: 0.875rem;
    flex-shrink: 0;
}

.review-all-option-correct .review-all-option-letter {
    background-color: #198754;
    color: white;
}

.review-all-option-incorrect .review-all-option-letter {
    background-color: #dc3545;
    color: white;
}

.review-all-option-text {
    flex: 1;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Meta Section */
.review-all-meta {
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.review-all-explanation,
.review-all-reference {
    font-size: 0.9375rem;
    line-height: 1.6;
}

.review-all-explanation h6,
.review-all-reference h6 {
    margin-bottom: 0.5rem;
}

/* Mobile Adjustments */
@media (max-width: 767.98px) {
    .review-all-header {
        padding: 0.75rem 0;
    }

    .review-all-score-label {
        font-size: 0.75rem;
    }

    .review-all-score-value {
        font-size: 1.25rem;
    }

    .review-filter-btn {
        padding: 0.375rem 0.875rem;
        font-size: 0.8125rem;
    }

    .review-quick-jump-pill {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }

    .review-all-question-number {
        width: 36px;
        height: 36px;
        font-size: 0.75rem;
    }

    .review-all-question-header h6 {
        font-size: 0.9375rem;
    }

    .review-all-question-text {
        font-size: 1rem;
    }

    .review-all-option {
        padding: 0.625rem 0.875rem;
    }

    .review-all-option-letter {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
        margin-right: 0.625rem;
    }

    .review-all-option-text {
        font-size: 0.875rem;
    }

    .review-all-explanation,
    .review-all-reference {
        font-size: 0.875rem;
    }

    /* Filters - horizontal scroll on mobile */
    .review-all-filters {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }

    .review-all-filters::-webkit-scrollbar {
        display: none;
    }

    /* Question card headers - touch targets */
    .review-all-question-header {
        padding: 0.875rem 1rem;
        min-height: 52px;
    }
}

/* Very Small Screens (< 360px) */
@media (max-width: 359.98px) {
    /* Results page - score ring */
    .review-score-ring {
        width: 110px;
        height: 110px;
    }

    .review-score-number {
        font-size: 2rem;
    }

    .review-score-percent {
        font-size: 1rem;
    }

    /* Results page - stats grid single column */
    .review-stats-grid .col-6 {
        width: 100%;
    }

    .review-stat-card h3 {
        font-size: 1.25rem;
    }

    .review-stat-icon {
        font-size: 1.5rem;
        margin-right: 0.5rem;
    }

    .review-stat-card .card-body {
        padding: 0.875rem;
    }

    /* Review-all - smaller pills */
    .review-quick-jump-pill {
        width: 28px;
        height: 28px;
        font-size: 0.6875rem;
    }

    .review-quick-jump-grid {
        gap: 0.375rem;
    }
}

/* Results action buttons - stack on mobile */
.review-results-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .review-results-actions {
        flex-direction: column;
    }

    .review-results-actions .btn {
        width: 100%;
    }
}

/* === GENERATION === */

/* --- Generate Form --- */

/* Topic tree scrollable container (shared with start_test) */
.generate-topic-tree {
    max-height: 300px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Generate form controls: ensure proper min-height for touch */
.generate-form .form-control,
.generate-form .form-select {
    min-height: 44px;
}

/* --- Generating (Live Progress) --- */

/* Progress bar for generation */
.generating-progress .progress {
    height: 25px;
    font-size: 0.875rem;
    line-height: 25px;
}

/* Progress message readability */
.generating-progress .progress-message {
    font-size: 1rem;
    min-height: 1.5rem;
}

/* Spinner sizing */
.generating-progress .spinner-border {
    width: 3rem;
    height: 3rem;
}

/* Generation status containers */
.generating-status-text {
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* --- Mobile Adjustments for Generation --- */
@media (max-width: 767.98px) {
    /* Filter panel toggle: prominent mobile button */
    .filter-toggle-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        min-height: 48px;
        font-size: 1rem;
        font-weight: 600;
        padding: 0.75rem 1rem;
    }

    /* Stats cards: ensure clean 2x2 grid on mobile */
    .question-bank-stats .card {
        border-radius: 8px;
    }

    .question-bank-stats .card-body {
        padding: 0.625rem 0.5rem;
    }

    .question-bank-stats .card-title {
        font-size: 1.25rem;
        margin-bottom: 0;
    }

    .question-bank-stats .card-text {
        font-size: 0.75rem;
        margin-bottom: 0;
    }

    /* Question cards: 44px+ touch targets for checkboxes */
    .question-card-checkbox {
        width: 44px !important;
        height: 44px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0.75rem;
        left: 0.75rem;
    }

    .question-card-checkbox input[type="checkbox"] {
        width: 22px !important;
        height: 22px !important;
        cursor: pointer;
    }

    /* Extra left padding for checkbox in select mode */
    .select-mode .question-card-generated .card-body,
    .select-mode .question-card-extracted .card-body {
        padding-left: 3.75rem;
    }

    /* Lock icon: proper touch target area */
    .question-card-lock {
        width: 44px;
        height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        top: 0.75rem;
        left: 0.75rem;
        font-size: 1.25rem;
    }

    /* Hide lock icon outside select mode on mobile too */
    .question-card-lock {
        display: none !important;
    }

    .select-mode .question-card-lock {
        display: flex !important;
    }

    /* Floating action bar: improved mobile layout */
    .floating-action-bar {
        padding: 0.75rem 1rem;
        padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    }

    .floating-action-bar .selected-count {
        font-size: 1rem;
        padding: 0.25rem 0;
    }

    .floating-action-bar .action-buttons .btn {
        min-height: 44px;
        font-size: 0.9375rem;
    }

    /* Generate form: topic tree viewport-relative height */
    .generate-topic-tree {
        max-height: 50vh;
        max-height: 50dvh;
    }

    /* Generate form: larger touch targets for topic checkboxes */
    .generate-topic-tree .form-check {
        min-height: 48px;
        display: flex;
        align-items: center;
        padding: 0.25rem 0;
    }

    .generate-topic-tree .form-check-input {
        width: 1.375rem;
        height: 1.375rem;
        flex-shrink: 0;
        margin-top: 0;
    }

    .generate-topic-tree .form-check-label {
        padding-left: 0.25rem;
    }

    /* Generate form: topic group separators */
    .generate-topic-tree > .mb-3 > strong:first-child {
        display: block;
        padding-top: 0.625rem;
        margin-top: 0.25rem;
        border-top: 1px solid #e9ecef;
        font-size: 0.9375rem;
        color: var(--dark-color);
    }

    /* Generate form: select/deselect buttons full width on small screens */
    .generate-topic-controls .btn-sm {
        flex: 1;
        min-width: 0;
    }

    /* Generating page: progress readability on small screens */
    .generating-progress .progress {
        height: 20px;
        font-size: 0.8125rem;
        line-height: 20px;
    }

    .generating-progress .spinner-border {
        width: 2.5rem;
        height: 2.5rem;
    }

    .generating-progress h5 {
        font-size: 1.125rem;
    }

    .generating-progress .generating-status-text {
        font-size: 0.875rem;
    }

    /* Error/success containers on generating page */
    .generating-result-container .btn {
        min-height: 44px;
    }
}

/* === DOCUMENTS === */

/* --- Document List --- */

/* Sticky filter/search card on mobile */
@media (max-width: 767.98px) {
    .doc-filter-card {
        position: sticky;
        top: 56px; /* navbar height */
        z-index: 1020;
        border-radius: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        margin-left: -0.75rem;
        margin-right: -0.75rem;
        margin-bottom: 1rem;
    }

    .doc-filter-card .card-body {
        padding: 0.75rem;
    }
}

/* Horizontal scroll for filter badges / action bar on mobile */
.doc-filter-scroll {
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.doc-filter-scroll::-webkit-scrollbar {
    display: none;
}

.doc-filter-field {
    min-width: 160px;
}

.doc-filter-field-wide {
    min-width: 200px;
}

/* Document cards */
.doc-card {
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.doc-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

/* Status badges — legible on small screens */
.doc-status-badge {
    font-size: 0.75rem;
    padding: 0.3em 0.6em;
    line-height: 1.3;
    white-space: nowrap;
}

/* Action buttons — ensure 44px+ touch targets on mobile */
.doc-card-actions .dropdown-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
}

.doc-card-actions .dropdown-item {
    padding: 0.6rem 1rem;
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.doc-card-actions .dropdown-item i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
}

/* Card footer CTA */
.doc-card-footer .btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Empty state inbox icon */
.doc-empty-icon {
    font-size: 3rem;
    color: #adb5bd;
}

@media (max-width: 767.98px) {
    .doc-empty-icon {
        font-size: 2.5rem;
    }
}

/* --- Card Progress (document processing) --- */
.doc-card-progress .progress {
    height: 6px;
    border-radius: 3px;
}

.doc-card-progress .progress-bar {
    min-width: 1rem;
}

/* --- Upload Page --- */

/* Drop zone — mobile-friendly */
.doc-drop-zone {
    border: 3px dashed #0d6efd;
    border-radius: 12px;
    padding: 2.5rem 1rem;
    text-align: center;
    background-color: #f8f9fa;
    transition: all 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.doc-drop-zone:hover,
.doc-drop-zone:focus-within {
    background-color: #e7f1ff;
    border-color: #0a58ca;
}

.doc-drop-zone.dragover {
    background-color: #e7f1ff;
    border-color: #0a58ca;
    transform: scale(1.02);
}

/* Touch feedback for mobile tap */
.doc-drop-zone:active {
    background-color: #d0e2ff;
    border-color: #084298;
    transform: scale(0.99);
}

.doc-drop-zone i {
    font-size: 3rem;
    color: #0d6efd;
    margin-bottom: 0.75rem;
}

@media (max-width: 767.98px) {
    .doc-drop-zone {
        padding: 2rem 0.75rem;
        min-height: 160px;
    }

    .doc-drop-zone i {
        font-size: 2.5rem;
    }

    /* Larger tap area on the whole drop zone */
    .doc-drop-zone h4,
    .doc-drop-zone p {
        pointer-events: none;
    }
}

/* File list items — swipe-friendly */
.doc-file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #f8f9fa;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    min-height: 52px;
    gap: 0.5rem;
}

.doc-file-item .file-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.doc-file-item .file-name {
    font-weight: 500;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-file-item .file-size {
    color: #6c757d;
    font-size: 0.85rem;
}

.doc-file-item .remove-file {
    color: #dc3545;
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.doc-file-item .remove-file:hover {
    background-color: rgba(220, 53, 69, 0.1);
}

.doc-file-item .remove-file:active {
    background-color: rgba(220, 53, 69, 0.2);
}

/* Document type selection cards. Each card is a <label> wrapping a
   visually-hidden but focusable radio — never display:none, which would
   kick the radio out of the tab order and the a11y tree. */
.doc-type-card {
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
    border: 2px solid transparent;
    -webkit-tap-highlight-color: transparent;
}

.doc-type-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Selected state mirrors the native radio's checked/aria-checked — no JS class needed. */
.doc-type-card:has(input:checked) {
    border-color: #0d6efd;
    background-color: #e7f1ff;
}

/* Visible focus ring on the card when its radio is keyboard-focused. */
.doc-type-card:has(input:focus-visible) {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}

.doc-type-card .card-body {
    padding: 1.25rem;
}

@media (max-width: 767.98px) {
    .doc-type-card .card-body {
        padding: 1rem;
    }

    .doc-type-card .bi {
        font-size: 1.75rem !important;
    }
}

/* Form controls — proper mobile sizing */
@media (max-width: 767.98px) {
    #upload-form .form-select,
    #upload-form .form-control {
        min-height: 48px;
        font-size: 16px; /* prevents iOS zoom */
    }
}

/* Hidden file input */
.doc-drop-zone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* === FEEDBACK SUCCESS PAGE STYLES === */

.feedback-success-card {
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feedback-success-icon {
    display: flex;
    justify-content: center;
    align-items: center;
}

.feedback-success-circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: linear-gradient(135deg, #198754 0%, #146c43 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    box-shadow: 0 4px 12px rgba(25, 135, 84, 0.3);
    animation: feedbackSuccessPulse 1.5s ease-in-out;
}

@keyframes feedbackSuccessPulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.feedback-success-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #212529;
}

.feedback-success-text {
    font-size: 1.0625rem;
    line-height: 1.6;
    color: #6c757d;
}

.feedback-details-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    text-align: left;
    margin-bottom: 1rem;
}

.feedback-details-header {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: white;
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    font-size: 1rem;
}

.feedback-details-body {
    padding: 1.25rem;
}

.feedback-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem 0;
    border-bottom: 1px solid #dee2e6;
}

.feedback-detail-row:last-child {
    border-bottom: none;
}

.feedback-detail-label {
    font-weight: 600;
    color: #495057;
    margin-right: 1rem;
    min-width: 140px;
}

.feedback-detail-value {
    flex: 1;
    color: #212529;
    text-align: right;
}

.feedback-info-note {
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

/* Mobile Adjustments */
@media (max-width: 767.98px) {
    .feedback-success-circle {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
    }

    .feedback-success-title {
        font-size: 1.5rem;
    }

    .feedback-success-text {
        font-size: 1rem;
    }

    .feedback-details-header {
        padding: 0.75rem 1rem;
        font-size: 0.9375rem;
    }

    .feedback-details-body {
        padding: 1rem;
    }

    .feedback-detail-row {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.625rem 0;
    }

    .feedback-detail-label {
        margin-bottom: 0.25rem;
        min-width: auto;
    }

    .feedback-detail-value {
        text-align: left;
    }
}

/* === CONFIG === */
/* Settings / Provider Configuration page — accordion form styles */

/* Section cards */
.config-section {
    margin-bottom: 1.5rem;
}

/* Accordion header — clickable, pointer cursor, nice hover */
.config-section .card-header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.config-section .card-header:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

/* Section icon color */
.section-icon {
    margin-right: 0.5rem;
    color: var(--primary-color);
}

/* Form field wrapper — label + input + help text */
.config-field {
    margin-bottom: 1.25rem;
}

.config-field label,
.config-field .form-label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.config-field small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Chevron rotation on collapsed sections — driven by JS adding .rotated */
.config-section .card-header .bi-chevron-down {
    transition: transform 0.2s ease;
}

.config-section .card-header .bi-chevron-down.rotated {
    transform: rotate(-90deg);
}

/* Action buttons row */
.config-actions {
    display: flex;
    gap: 0.75rem;
}

/* ---- Mobile overrides ---- */
@media (max-width: 767.98px) {
    /* Accordion headers: larger touch target */
    .config-section .card-header {
        min-height: 56px;
        padding: 0.875rem 1rem;
    }

    .config-section .card-header h5 {
        font-size: 1rem;
    }

    /* Hide descriptive subtitle on small screens to save space */
    .config-section .card-header .text-body-secondary:not(.section-icon) {
        display: none;
    }

    /* Chevron easier to tap */
    .config-section .card-header .bi-chevron-down {
        font-size: 1.125rem;
    }

    /* All form controls meet 44px touch target */
    .config-section .form-control,
    .config-section .form-select {
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom on focus */
    }

    /* Form check (switches) also meets touch target */
    .config-section .form-check-input {
        min-height: 24px;
        min-width: 48px;
    }

    .config-section .form-check {
        min-height: 44px;
        padding-top: 0.375rem;
    }

    /* More breathing room between field groups */
    .config-field {
        margin-bottom: 1.5rem;
    }

    /* Pipeline sub-cards tighter on mobile */
    .config-section .card.mb-3 {
        margin-bottom: 1rem;
    }

    .config-section .card.mb-3 .card-header {
        padding: 0.75rem 1rem;
    }

    .config-section .card.mb-3 .card-body {
        padding: 1rem;
    }

    /* Row children stack with spacing */
    .config-section .row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }

    /* Action buttons full width on mobile */
    .config-actions {
        flex-direction: column;
    }

    .config-actions .btn {
        width: 100%;
        justify-content: center;
        min-height: 48px;
    }

    /* Page title area */
    .config-page-header h1 {
        font-size: 1.25rem;
    }
}

/* === LOADING SKELETONS === */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border-radius: 0.375rem;
    color: transparent !important;
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5rem;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-title {
    height: 1.5em;
    width: 40%;
    margin-bottom: 0.75rem;
}

.skeleton-card {
    height: 120px;
    margin-bottom: 1rem;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Dark mode skeleton */
[data-bs-theme="dark"] .skeleton {
    background: linear-gradient(90deg, #3a3a3a 25%, #4a4a4a 50%, #3a3a3a 75%);
    background-size: 200% 100%;
}

/* === SKIP TO CONTENT (Accessibility) === */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary-color);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    z-index: 10000;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid white;
    outline-offset: 2px;
}

/* === COMPREHENSIVE DARK MODE FIXES === */

/* Loading overlay */
[data-bs-theme="dark"] .loading-overlay {
    background-color: rgba(33, 37, 41, 0.9);
}

/* Login card already handled above, but login-card hover was a no-op — leave it */

/* Card general — ensure card borders adapt */
[data-bs-theme="dark"] .card {
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
    background-color: rgba(255, 255, 255, 0.03);
}

/* Doc filter card */
[data-bs-theme="dark"] .doc-filter-card {
    background: var(--bs-body-bg);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Dashboard charts — canvas containers */
[data-bs-theme="dark"] .progress-dashboard canvas {
    filter: none;
}

/* Review score card gradient */
[data-bs-theme="dark"] .review-score-card {
    background: linear-gradient(135deg, #1a1d20 0%, #2b3035 100%);
}

/* Sticky progress cards (take-test + past-exam paper mode) */
[data-bs-theme="dark"] .take-test-progress-card,
[data-bs-theme="dark"] .past-exam-progress-card {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Take test options */
[data-bs-theme="dark"] .take-test-options .list-group-item {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .take-test-options .list-group-item:hover {
    background: #343a40;
    color: var(--bs-body-color);
}

/* Question card */
[data-bs-theme="dark"] .question-card {
    background: var(--bs-body-bg);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Generation page cards */
[data-bs-theme="dark"] .generation-status-card {
    background: #2b3035;
}

/* Coverage map cards */
[data-bs-theme="dark"] .coverage-map .card {
    border-color: rgba(255, 255, 255, 0.1);
}

/* Session list items */
[data-bs-theme="dark"] .list-group-item {
    background: var(--bs-body-bg);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .list-group-item:hover {
    background: #343a40;
}

/* Config page */
[data-bs-theme="dark"] .config-card {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Celery monitor */
[data-bs-theme="dark"] .celery-dashboard {
    background: #1a1d20;
}

/* HTMX indicator */
[data-bs-theme="dark"] .htmx-indicator {
    border-color: rgba(255, 255, 255, 0.3);
    border-right-color: transparent;
}

/* Exam questions validation grid */
[data-bs-theme="dark"] .eq-card {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Document detail scrollable content */
[data-bs-theme="dark"] .doc-content-scroll {
    background: #1a1d20;
    color: var(--bs-body-color);
}

/* Upload type selection cards */
[data-bs-theme="dark"] .upload-type-card {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .upload-type-card:hover {
    background: #343a40;
}

/* Gazette import */
[data-bs-theme="dark"] .gazette-card {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Section tree */
[data-bs-theme="dark"] .section-tree {
    background: var(--bs-body-bg);
}

/* Stats cards (question bank, dashboard, home) */
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .question-bank-stats .card {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
}

/* Filter form cards */
[data-bs-theme="dark"] .filter-toggle-btn {
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--bs-body-color);
}

/* Ensure badge text visible in dark mode */
[data-bs-theme="dark"] .bg-warning.text-dark {
    color: #212529 !important;
}

/* Form elements in dark mode — improve borders */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    border-color: rgba(255, 255, 255, 0.15);
    background-color: #2b3035;
    color: var(--bs-body-color);
}

/* ============================================= */
/* === GENERATE PAGE REDESIGN === */
/* ============================================= */

.generate-page .generate-page-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--bs-primary) 0%, #7c3aed 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.generate-card {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.generate-card > .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--bs-body-color);
}

/* Topic chips — the big redesign */
.generate-topic-tree {
    max-height: 420px;
    overflow-y: auto;
    padding: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.15) transparent;
}

.generate-topic-tree::-webkit-scrollbar {
    width: 5px;
}

.generate-topic-tree::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

.topic-group {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
}

.topic-group-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--bs-body-color, #212529);
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.08) 0%, rgba(13, 110, 253, 0.03) 100%);
    border-radius: 8px;
    margin-bottom: 0.625rem;
    border-left: 3px solid var(--bs-primary);
}

.topic-group-header i {
    font-size: 1rem;
    color: var(--bs-primary);
}

.topic-group-toggle {
    font-size: 0.75rem;
    color: var(--bs-primary);
    text-decoration: none;
}

.topic-group-toggle:hover {
    text-decoration: underline;
}

.topic-group-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding-left: 0.75rem;
}

/* The chip itself */
.topic-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.topic-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.topic-chip-label {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: 20px;
    border: 1px solid #dee2e6;
    background: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-body-color);
    transition: all 0.15s ease;
    line-height: 1.4;
}

.topic-chip:hover .topic-chip-label {
    border-color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), 0.04);
}

.topic-chip.selected .topic-chip-label,
.topic-chip input:checked + .topic-chip-label {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.topic-chip input:focus-visible + .topic-chip-label {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
}

/* Touch targets: meet the 44px minimum (WCAG 2.5.5 / Apple HIG). */
@media (hover: none) and (pointer: coarse) {
    .topic-chip-label {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* Topic controls bar */
.generate-topic-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.topic-filter-mode {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
}

.topic-filter-mode-label {
    color: var(--bs-body-secondary);
    font-weight: 500;
    margin-right: 0.25rem;
}

.generate-topic-count {
    font-size: 0.75rem;
    font-weight: 600;
}

/* Generate submit button */
.generate-submit-btn {
    border-radius: 10px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.3);
    transition: all 0.2s ease;
}

.generate-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.4);
}

.generate-submit-btn:active {
    transform: translateY(0);
}

/* ============================================= */
/* === GLOBAL POLISH IMPROVEMENTS === */
/* ============================================= */

/* Stat cards — add left border accent */
.practice-home .stat-card {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
}

.practice-home .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
}

.practice-home .stat-card:nth-child(1) .card,
.practice-home .stats-row .col-md-4:nth-child(1) .stat-card::before {
    background: var(--bs-primary);
}

.practice-home .stats-row .col-md-4:nth-child(2) .stat-card::before {
    background: var(--bs-success);
}

.practice-home .stats-row .col-md-4:nth-child(3) .stat-card::before {
    background: var(--bs-info);
}

.practice-home .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Card headers — subtle accent globally */
.card > .card-header {
    font-size: 0.9375rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Sidebar cards — more polished */
.sidebar-section .card {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sidebar-section .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.75rem 1rem;
}

/* Action buttons — more polished */
.action-btn {
    border-radius: 10px;
    font-weight: 600;
    padding: 0.625rem 1.25rem;
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.2);
    transition: all 0.2s ease;
}

.action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), 0.3);
}

/* Recent tests list — better hover */
.list-group-item.list-group-item-action {
    border-radius: 8px;
    margin-bottom: 0.375rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.15s ease;
}

.list-group-item.list-group-item-action:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Form controls — subtle custom styling */
.form-control:focus,
.form-select:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.1);
}

/* Better badges */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Amber badges need dark text for WCAG AA contrast: Bootstrap's default
   white text on bg-warning (#ffc107) is ~1.6:1. Applies to every warning
   badge (status + difficulty) so the colour-coded chips stay legible. */
.badge.bg-warning {
    color: #212529;
}

/* ============================================= */
/* === GENERATE PAGE DARK MODE === */
/* ============================================= */

[data-bs-theme="dark"] .generate-card {
    background: #1e2125;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .generate-card > .card-header {
    background: #16191c;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .generate-page-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

[data-bs-theme="dark"] .topic-chip-label {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.12);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .topic-chip:hover .topic-chip-label {
    border-color: rgba(var(--bs-primary-rgb), 0.5);
    background: rgba(var(--bs-primary-rgb), 0.1);
}

[data-bs-theme="dark"] .topic-chip.selected .topic-chip-label,
[data-bs-theme="dark"] .topic-chip input:checked + .topic-chip-label {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

[data-bs-theme="dark"] .topic-group {
    background: var(--bs-body-bg);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .topic-group-header {
    color: var(--bs-body-color);
    background: linear-gradient(135deg, rgba(13, 110, 253, 0.15) 0%, rgba(13, 110, 253, 0.05) 100%);
    border-left-color: var(--bs-primary);
}

[data-bs-theme="dark"] .generate-topic-controls {
    background: #16191c;
    border-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .generate-topic-tree {
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

[data-bs-theme="dark"] .generate-topic-tree::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
}

/* Stat card dark mode accent bars */
[data-bs-theme="dark"] .practice-home .stat-card {
    background: #1e2125;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .practice-home .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Sidebar dark mode */
[data-bs-theme="dark"] .sidebar-section .card {
    background: #1e2125;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .sidebar-section .card-header {
    background: #16191c;
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* List group items dark mode */
[data-bs-theme="dark"] .list-group-item.list-group-item-action {
    background: #1e2125;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .list-group-item.list-group-item-action:hover {
    background: #2b3035;
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}

/* === Active nav link highlighting === */
.navbar .nav-link.active {
    color: #fff !important;
    font-weight: 600;
    border-bottom: 2px solid #fff;
    padding-bottom: 0.25rem;
}

/* === Dark mode: Error page === */
[data-bs-theme="dark"] .error-card {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .error-code {
    color: var(--bs-primary);
    opacity: 0.9;
}

/* === Dark mode: Breadcrumbs === */
[data-bs-theme="dark"] .breadcrumb {
    background: transparent;
}

[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.4);
}

[data-bs-theme="dark"] .breadcrumb-item a {
    color: var(--bs-primary);
}

[data-bs-theme="dark"] .breadcrumb-item.active {
    color: var(--bs-body-color);
}

/* === Dark mode: Progress bars === */
[data-bs-theme="dark"] .progress {
    background-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .progress-bar {
    background-color: var(--bs-primary);
}

[data-bs-theme="dark"] .progress-bar.bg-success {
    background-color: var(--bs-success) !important;
}

[data-bs-theme="dark"] .progress-bar.bg-danger {
    background-color: var(--bs-danger) !important;
}

[data-bs-theme="dark"] .progress-bar.bg-warning {
    background-color: var(--bs-warning) !important;
}

[data-bs-theme="dark"] .progress-bar.bg-info {
    background-color: var(--bs-info) !important;
}

/* === Dark mode: Accordion (config page) === */
[data-bs-theme="dark"] .accordion-item {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .accordion-button {
    background: #2b3035;
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .accordion-button:not(.collapsed) {
    background: #343a40;
    color: #fff;
}

[data-bs-theme="dark"] .accordion-button::after {
    filter: invert(1) brightness(0.8);
}

[data-bs-theme="dark"] .accordion-body {
    background: #1a1d20;
    color: var(--bs-body-color);
}

/* === Dark mode: Document detail info sections === */
[data-bs-theme="dark"] .card-body dl dt {
    color: rgba(255, 255, 255, 0.6);
}

[data-bs-theme="dark"] .card-body dl dd {
    color: var(--bs-body-color);
}

/* === Dark mode: Section tree checkboxes === */
[data-bs-theme="dark"] .section-tree .form-check-input {
    background-color: #2b3035;
    border-color: rgba(255, 255, 255, 0.3);
}

[data-bs-theme="dark"] .section-tree .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

[data-bs-theme="dark"] .section-tree .form-check-label {
    color: var(--bs-body-color);
}

/* === Dark mode: Topic selector checkboxes (generate page) === */
[data-bs-theme="dark"] .topic-checkbox-grid .form-check-input {
    background-color: #2b3035;
    border-color: rgba(255, 255, 255, 0.3);
}

/* === Dark mode: Test-taking answer option cards === */
[data-bs-theme="dark"] .take-test-options .list-group-item.selected,
[data-bs-theme="dark"] .take-test-options .list-group-item:has(input:checked) {
    background: rgba(var(--bs-primary-rgb), 0.2);
    border-color: var(--bs-primary);
}

/* === Dark mode: Dashboard stat card value colors === */
[data-bs-theme="dark"] .stat-card h2,
[data-bs-theme="dark"] .question-bank-stats .card h3 {
    color: #fff;
}

[data-bs-theme="dark"] .stat-card h5,
[data-bs-theme="dark"] .question-bank-stats .card p {
    color: rgba(255, 255, 255, 0.6);
}

/* === Dark mode: Login card === */
[data-bs-theme="dark"] .login-card {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .login-card .card-header {
    background: #1a1d20;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .login-card .btn-outline-dark {
    color: var(--bs-body-color);
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

[data-bs-theme="dark"] .login-card .btn-outline-dark:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

[data-bs-theme="dark"] .login-card .alert-info {
    background: rgba(13, 110, 253, 0.15);
    color: var(--bs-body-color);
    border-color: rgba(13, 110, 253, 0.3);
}

/* === Dark mode: Dropdown menu (user menu) === */
[data-bs-theme="dark"] .dropdown-menu {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .dropdown-item {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* === Dark mode: Empty states === */
[data-bs-theme="dark"] .empty-state {
    color: rgba(255, 255, 255, 0.5);
}

[data-bs-theme="dark"] .empty-state i {
    color: rgba(255, 255, 255, 0.3);
}

/* === Dark mode: Score/percentage text colors === */
[data-bs-theme="dark"] .text-success {
    color: var(--bs-success) !important;
}

[data-bs-theme="dark"] .text-danger {
    color: var(--bs-danger) !important;
}

[data-bs-theme="dark"] .text-warning {
    color: var(--bs-warning) !important;
}

/* === Section tree: scrollable container === */
.section-tree {
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.section-tree::-webkit-scrollbar {
    width: 6px;
}

.section-tree::-webkit-scrollbar-track {
    background: transparent;
}

.section-tree::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

[data-bs-theme="dark"] .section-tree::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
}

/* === Keyboard shortcut hint styling === */
.kbd-hint {
    font-size: 0.7rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    padding: 0.05rem 0.3rem;
    font-family: var(--bs-font-monospace);
}

/* Print styles — force light for printing */
@media print {
    [data-bs-theme="dark"] {
        --bs-body-bg: white;
        --bs-body-color: black;
    }

    .navbar,
    .theme-toggle,
    .site-footer {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================= */
/* === GLOBAL PAGE HEADER ICON === */
/* ============================================= */

.page-header-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.page-header-icon i {
    font-size: 1.25rem;
}

.page-header-icon span {
    font-size: 1.375rem;
    line-height: 1;
}

[data-bs-theme="dark"] .page-header-icon {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%) !important;
}

/* ============================================= */
/* === STAT CARD ICON CONTAINERS === */
/* ============================================= */

.stat-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0.75rem auto 0;
    font-size: 1rem;
}

.stat-card-icon-primary {
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
}

.stat-card-icon-success {
    background: rgba(var(--bs-success-rgb), 0.1);
    color: var(--bs-success);
}

.stat-card-icon-info {
    background: rgba(var(--bs-info-rgb), 0.1);
    color: var(--bs-info);
}

.stat-card-icon-warning {
    background: rgba(var(--bs-warning-rgb), 0.15);
    color: var(--bs-warning);
}

.stat-card-icon-danger {
    background: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
}

.stat-card-icon-secondary {
    background: rgba(var(--bs-secondary-rgb), 0.1);
    color: var(--bs-secondary);
}

[data-bs-theme="dark"] .stat-card-icon-primary {
    background: rgba(59, 130, 246, 0.15);
}
[data-bs-theme="dark"] .stat-card-icon-success {
    background: rgba(25, 135, 84, 0.15);
}
[data-bs-theme="dark"] .stat-card-icon-info {
    background: rgba(13, 202, 240, 0.15);
}
[data-bs-theme="dark"] .stat-card-icon-warning {
    background: rgba(255, 193, 7, 0.15);
}
[data-bs-theme="dark"] .stat-card-icon-danger {
    background: rgba(220, 53, 69, 0.15);
}

/* ============================================= */
/* === QUESTION BANK STAT CARDS === */
/* ============================================= */

.question-bank-stats .stat-card {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
    overflow: hidden;
    position: relative;
}

.question-bank-stats .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
}

.question-bank-stats .col-md-3:nth-child(1) .stat-card::before {
    background: var(--bs-primary);
}

.question-bank-stats .col-md-3:nth-child(2) .stat-card::before {
    background: var(--bs-info);
}

.question-bank-stats .col-md-3:nth-child(3) .stat-card::before {
    background: var(--bs-warning);
}

.question-bank-stats .col-md-3:nth-child(4) .stat-card::before {
    background: var(--bs-secondary);
}

.question-bank-stats .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.question-bank-stats .stat-card h3 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0;
}

.question-bank-stats .stat-card .card-body {
    padding: 0.5rem 0.75rem 0.75rem;
}

.question-bank-stats .stat-card p {
    font-size: 0.8125rem;
    margin-bottom: 0;
}

/* ============================================= */
/* === DASHBOARD STAT CARDS === */
/* ============================================= */

.dashboard-stat {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
}

.dashboard-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    border-radius: 4px 0 0 4px;
}

.dashboard-stat:nth-child(1)::before,
.col-md-3:nth-child(1) .dashboard-stat::before {
    background: var(--bs-primary);
}

.col-md-3:nth-child(2) .dashboard-stat::before {
    background: var(--bs-success);
}

.col-md-3:nth-child(3) .dashboard-stat::before {
    background: var(--bs-info);
}

.col-md-3:nth-child(4) .dashboard-stat::before {
    background: var(--bs-danger);
}

.dashboard-stat:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.dashboard-stat h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0;
}

.dashboard-stat h5 {
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

[data-bs-theme="dark"] .dashboard-stat {
    background: #1e2125;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .dashboard-stat:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ============================================= */
/* === RECENT TESTS LIST === */
/* ============================================= */

.recent-tests-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.recent-test-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    background: var(--bs-body-bg);
    text-decoration: none;
    color: var(--bs-body-color);
    transition: all 0.15s ease;
    gap: 0.75rem;
}

.recent-test-item:hover {
    border-color: rgba(var(--bs-primary-rgb), 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.recent-test-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.recent-test-status {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.status-completed {
    background: rgba(var(--bs-success-rgb), 0.1);
    color: var(--bs-success);
}

.status-progress {
    background: rgba(var(--bs-warning-rgb), 0.15);
    color: var(--bs-warning);
}

.recent-test-info {
    min-width: 0;
}

.recent-test-title {
    font-weight: 600;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.recent-test-meta {
    font-size: 0.8125rem;
    color: var(--bs-body-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-test-right {
    text-align: right;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.125rem;
}

.recent-test-score {
    font-size: 1.25rem;
    font-weight: 700;
}

[data-bs-theme="dark"] .recent-test-item {
    background: #1e2125;
    border-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .recent-test-item:hover {
    background: #2b3035;
    border-color: rgba(var(--bs-primary-rgb), 0.3);
}

/* ============================================= */
/* === TIP NUMBERS === */
/* ============================================= */

.tip-number {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(var(--bs-primary-rgb), 0.1);
    color: var(--bs-primary);
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 0.5rem;
}

/* ============================================= */
/* === SIDEBAR CARD POLISH === */
/* ============================================= */

.sidebar-card {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.sidebar-card .card-header {
    background: #f8f9fa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.75rem 1rem;
}

.sidebar-card .card-header h5 {
    font-size: 0.9375rem;
    font-weight: 600;
}

/* ============================================= */
/* === START TEST PAGE === */
/* ============================================= */

.start-test-page .config-field label {
    margin-bottom: 0.375rem;
}

/* ============================================= */
/* === DOCUMENTS PAGE === */
/* ============================================= */

.documents-page .doc-card {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.documents-page .doc-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.documents-page .doc-card .card-title a {
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
}

.documents-page .doc-card .card-title a:hover {
    color: var(--bs-primary);
}

/* Documents page: the card title shares a flex row with the actions dropdown, so give
   it min-width:0 + flex sizing so the 2-line clamp (.text-truncate-2) can engage, and
   keep the dropdown from being squeezed. The clamp itself breaks long filenames via
   overflow-wrap/word-break defined on the .text-truncate-2 utility. See oa-03s1. */
.documents-page .doc-card .card-title {
    min-width: 0;
    flex: 1 1 auto;
}

.documents-page .doc-card .doc-card-actions {
    flex-shrink: 0;
}

/* Release the 2-line clamp while the name is being inline-edited: inline-edit.js sets
   data-editing="true" on the span while the input/buttons are shown (Documents page only). */
.documents-page .doc-card .card-title span[data-editing="true"] {
    display: inline;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.documents-page .doc-card-footer {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    padding: 0.75rem 1rem;
}

/* ============================================= */
/* === QUESTION BANK PAGE === */
/* ============================================= */

.question-bank-page .question-card {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.question-bank-page .question-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* ============================================= */
/* === DARK MODE: QUESTION BANK STATS === */
/* ============================================= */

[data-bs-theme="dark"] .question-bank-stats .stat-card {
    background: #1e2125;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .question-bank-stats .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ============================================= */
/* === MOBILE RESPONSIVE ADJUSTMENTS === */
/* ============================================= */

@media (max-width: 767.98px) {
    .page-header-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 1.125rem;
    }

    .recent-test-item {
        padding: 0.75rem;
        flex-wrap: wrap;
    }

    .recent-test-right {
        flex-direction: row;
        align-items: center;
        width: 100%;
        justify-content: space-between;
    }

    .recent-test-score {
        font-size: 1rem;
    }

    .stat-card-icon {
        width: 30px;
        height: 30px;
        border-radius: 8px;
        font-size: 0.875rem;
    }

    .question-bank-stats .stat-card h3 {
        font-size: 1.375rem;
    }

    .practice-home .stat-card h2 {
        font-size: 1.375rem;
    }

    .dashboard-stat h2 {
        font-size: 1.375rem;
    }
}

/* === TODAY HERO (practice home) === */
.today-hero {
    background: linear-gradient(135deg, #0d6efd 0%, #7c3aed 100%);
    color: #fff;
    border: none;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-lg);
}

.today-hero h1 {
    color: #fff;
}

.today-kicker {
    letter-spacing: 0.06em;
    opacity: 0.85;
}

.today-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50rem;
    padding: 0.35rem 0.85rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #fff;
    white-space: nowrap;
}

a.today-chip-link {
    text-decoration: none;
    transition: background 0.15s ease;
}

a.today-chip-link:hover,
a.today-chip-link:focus {
    background: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.today-start-btn {
    box-shadow: var(--shadow);
}

/* === STUDY MODE CARDS (practice home) === */
.mode-card {
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--border-radius);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mode-card:hover,
.mode-card:focus {
    color: inherit;
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.mode-card h3 {
    color: var(--bs-body-color);
}

.mode-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 0.75rem;
}

[data-bs-theme="dark"] .today-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #5b21b6 100%);
}

@media (max-width: 767px) {
    .today-hero .card-body {
        padding: 1.25rem;
    }

    .today-start-btn {
        width: 100%;
    }

    .today-hero form {
        width: 100%;
    }
}

/* === HOW IT WORKS pipeline (practice home hero, oa-hm2l) === */
/* Pills reuse .today-chip; this just tightens the padding so the number
   circle nestles in. Colors inherit from .today-hero (white on gradient). */
.how-it-works {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.45rem;
    font-size: 0.9rem;
}

.how-it-works-label {
    font-weight: 700;
    opacity: 0.9;
    margin-right: 0.15rem;
}

.how-it-works-step {
    padding: 0.2rem 0.75rem 0.2rem 0.3rem;
}

.how-it-works-step .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #0d6efd;
    font-weight: 700;
    font-size: 0.75rem;
}

.how-it-works > .bi-arrow-right {
    opacity: 0.7;
}

/* === MOBILE POLISH (coach UX) === */
.navbar .nav-link .bi {
    margin-right: 0.35rem;
}

@media (max-width: 767px) {
    /* Compact study-mode cards: icon beside text instead of stacked */
    .mode-card .card-body {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.75rem 1rem;
    }

    .mode-card .mode-icon {
        margin-bottom: 0;
        flex-shrink: 0;
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* Feedback page: continue button on top, full width; report below */
    .feedback-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .feedback-actions > .btn,
    .feedback-actions .dropdown,
    .feedback-actions .dropdown > .btn {
        width: 100%;
    }

    /* Keyboard shortcuts mean nothing on touch screens */
    .kbd-hint,
    .keyboard-tip {
        display: none;
    }
}