/* QuizCraft — Academic theme (green + gold) */
:root {
    --qc-primary: #1b5e20;
    --qc-primary-dark: #0d3d10;
    --qc-accent: #c9a227;
    --qc-accent-light: #d4af37;
    --qc-bg: #eef0f2;
    --qc-text: #212529;
    --qc-card-hover: 0 4px 12px rgba(0,0,0,0.08);
    /* Auth/login background overlay (lighter than topbar) */
    --qc-auth-overlay-top: rgba(27, 94, 32, 0.14);
    --qc-auth-overlay-bottom: rgba(27, 94, 32, 0.22);
    /* Welcome/hero overlay (show building photo clearly) */
    --qc-hero-overlay-top: rgba(27, 94, 32, 0.06);
    --qc-hero-overlay-bottom: rgba(27, 94, 32, 0.14);
    --qc-font-size: 16px;
}

/* Base and headers: one base size, headers scale with it (em) so font controls affect all */
body { background: var(--qc-bg); color: var(--qc-text); font-size: var(--qc-font-size); transition: background-color 0.2s ease, color 0.2s ease; }
h1, .h1 { font-size: 1.4em; }
h2, .h2 { font-size: 1.25em; }
h3, .h3 { font-size: 1.15em; }
h4, .h4, h5, .h5, h6, .h6 { font-size: 1.05em; }
body.quizcraft-dark { --qc-bg: #121212; --qc-text: #e4e4e4; background: #121212; color: #e4e4e4; }
body.quizcraft-dark .card, body.quizcraft-dark .table { background: #1e1e1e; color: #e4e4e4; }
body.quizcraft-dark .card-header { background: #2a2a2a; border-color: rgba(255,255,255,0.1); color: #e4e4e4; }
body.quizcraft-dark .table-quizcraft thead th { background: rgba(27,94,32,0.25); color: #c8e6c9; }
body.quizcraft-dark .text-muted { color: #b0b0b0 !important; }
.font-small { --qc-font-size: 14px; font-size: 14px; }
.font-medium { --qc-font-size: 16px; font-size: 16px; }
.font-large { --qc-font-size: 18px; font-size: 18px; }

/* Profile label alignment (e.g. Name : value) */
.profile-label { width: 120px; display: inline-block; }

/* Table horizontal scroll on mobile: table keeps min width so .table-responsive can scroll */
.min-w-full { min-width: 100%; }

/* Pagination — green theme */
.pagination .page-link { color: var(--qc-primary); border-color: rgba(27, 94, 32, 0.25); }
.pagination .page-link:hover { background-color: rgba(27, 94, 32, 0.08); color: var(--qc-primary-dark); border-color: rgba(27, 94, 32, 0.4); }
.pagination .page-item.active .page-link { background-color: var(--qc-primary); border-color: var(--qc-primary); color: #fff; }
.pagination .page-item.disabled .page-link { color: #6c757d; }
body.quizcraft-dark .pagination .page-link { color: var(--qc-accent-light); border-color: rgba(201, 162, 39, 0.3); }
body.quizcraft-dark .pagination .page-link:hover { background-color: rgba(201, 162, 39, 0.15); }
body.quizcraft-dark .pagination .page-item.active .page-link { background-color: var(--qc-accent); border-color: var(--qc-accent); color: #1a1a1a; }

/* Hero / welcome — campus image visible; body bg not used when hero is present */
.quizcraft-hero-bg {
    background-color: #1b3d1f;
    background-image:
        linear-gradient(var(--qc-hero-overlay-top), var(--qc-hero-overlay-bottom)),
        url('../img/bpc-campus.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.quizcraft-hero-bg::before {
    /* subtle vignette so the center card pops while photo stays visible */
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top left, rgba(0,0,0,0.05), transparent 55%),
        radial-gradient(circle at bottom right, rgba(0,0,0,0.10), transparent 55%);
}
.hero-card-quizcraft {
    border-radius: 1rem;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,0.88);
}
.hero-card-entrance {
    opacity: 0;
    transform: scale(0.95);
    animation: heroCardEntrance 250ms ease-out forwards;
}
@keyframes heroCardEntrance {
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.hero-logo-wrapper {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.hero-logo-img {
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
}
.hero-title { color: #43a047; }
.hero-quiz-side {
    max-width: 220px;
}
.hero-quiz-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(201,162,39,0.12);
    color: var(--qc-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Top nav */
.navbar-quizcraft {
    background: var(--qc-primary) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    min-height: 56px;
}
.navbar-quizcraft .navbar-brand { color: #fff !important; font-weight: 600; }
.navbar-quizcraft .navbar-logo { width: 36px; height: 36px; object-fit: contain; }
.navbar-quizcraft .btn-outline-light:hover { background: var(--qc-accent); border-color: var(--qc-accent); color: #212529; }
.navbar-quizcraft .navbar-text { color: #fff !important; }
.navbar-quizcraft .profile-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.3); }

.navbar-quizcraft .role-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: rgba(255,255,255,0.18);
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
}
body.quizcraft-dark .navbar-quizcraft .role-pill { background: rgba(255,255,255,0.14); color: #f8f9fa; }

/* Collapsed sidebar (768px+): fully hidden, main takes full width */
@media (min-width: 768px) {
    body.quizcraft-sidebar-collapsed .sidebar-quizcraft {
        display: none !important;
    }
}

/* Student dashboard: info + stats side by side; stat cards 200px wide */
.student-dashboard-stat-card {
    min-width: 180px;
    width: 200px;
    max-width: 100%;
}
.student-dashboard-stat-number { font-size: 1.55em; line-height: 1.2; }
.student-dashboard-stat-card .small { font-size: 1em; }
@media (max-width: 767.98px) {
    .student-dashboard-stat-card { min-width: 0; width: 100%; }
}
/* Dashboard top row: allow columns to shrink so tablet doesn't break */
.row.align-items-stretch > [class^="col-"] { min-width: 0; }

/* No gap between topbar and sidebar when sidebar is present */
body.quizcraft-has-sidebar .quizcraft-below-nav.mt-3 { margin-top: 0 !important; }


/* Below-nav wrapper: prevent horizontal overflow when viewport is narrow */
.quizcraft-below-nav { min-height: 0; max-width: 100%; padding-top: 56px; }

/* Responsive: form filter rows and tables adapt when viewport is resized (not only full-screen vs mobile) */
@media (max-width: 991.98px) {
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card-body .d-flex.flex-wrap.gap-2 { gap: 0.5rem; }
    .card-body .d-flex.flex-wrap.gap-2 .form-select { min-width: 0; max-width: 100%; }
}
@media (max-width: 1199.98px) {
    .quizcraft-main .card { max-width: 100%; }
    .col-md-6 .card, .col-lg-4 .card { min-width: 0; }
}

/* Prevent flex child overflow (fixes in-between breakpoint collapse) */
.quizcraft-main { min-width: 0; }
.quizcraft-content-column { min-width: 0; }

@media (max-width: 575.98px) {
    .page-header { flex-direction: column; align-items: stretch !important; }
    .page-header .btn { align-self: flex-start; }
    .table-responsive { font-size: 0.875rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .table th, .table td { padding: 0.35rem 0.5rem; }
    .table th { white-space: nowrap; }
    .table td { word-break: break-word; min-width: 0; }
    .quizcraft-main { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
    .card .d-flex.gap-2, .card .d-flex.flex-wrap.gap-2 { flex-direction: column; align-items: stretch; }
    .card .d-flex.gap-2 .form-control, .card .d-flex.gap-2 .form-select { max-width: 100% !important; }
    form[role="search"].d-flex { flex-direction: column; }
    form[role="search"] .form-control, form[role="search"] .form-select { width: 100%; max-width: 100%; }
    .navbar-quizcraft .navbar-brand { font-size: 0.95rem; }
}
@media (max-width: 767px) {
    .quizcraft-below-nav .container-fluid { max-width: 100%; }
    .quizcraft-main-row { margin-left: 0; margin-right: 0; }
    .quizcraft-main, .quizcraft-content-column { min-width: 0; max-width: 100%; }
    main.quizcraft-main { overflow-x: visible; }
    .row.g-3 > [class^="col-"] { flex: 0 0 100%; max-width: 100%; }
    .card .row .col-6.col-md { flex: 0 0 50%; max-width: 50%; }
    .modal-dialog { max-width: calc(100vw - 2rem); margin: 1rem auto; }
    .form-select, .form-control { min-width: 0; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
    .page-header { flex-wrap: wrap; }
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .quizcraft-main { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
}
@media (min-width: 1200px) {
    .quizcraft-main { padding-left: 2rem !important; padding-right: 2rem !important; }
}

/* Touch-friendly targets and spacing on mobile/tablet */
@media (max-width: 991.98px) {
    .btn { min-height: 44px; }
    .btn.btn-sm { min-height: 38px; }
    .sidebar-quizcraft .nav-link,
    .sidebar-quizcraft-mobile .nav-link { min-height: 44px; padding-top: 0.65rem; padding-bottom: 0.65rem; display: flex; align-items: center; }
}

/* Mobile polish: reduce visual whitespace without breaking touch targets */
@media (max-width: 575.98px) {
    .btn { min-height: 40px; }
    .btn.btn-sm { min-height: 34px; }
    .btn { padding-top: 0.45rem; padding-bottom: 0.45rem; }
    .btn.btn-sm { padding-top: 0.30rem; padding-bottom: 0.30rem; }
    .page-header { margin-bottom: 1.1rem; }
    .page-header .subtitle { font-size: 0.85rem; }
    /* Shorten long instructions/subtitles on mobile without editing every page */
    .page-header .subtitle {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .card-body { padding: 0.9rem; }
    .d-flex.gap-2, .d-flex.flex-wrap.gap-2 { gap: 0.5rem !important; }
}
@media (min-width: 992px) {
    .w-lg-auto { width: auto !important; }
}

/* New desktop/tablet layout: sidebar + main */
.quizcraft-layout {
    display: flex;
    min-height: calc(100vh - 56px);
    overflow: visible !important;
}

@media (min-width: 768px) {
    .quizcraft-layout {
        display: block;
        min-height: calc(100vh - 56px);
        overflow: visible !important;
    }
    .sidebar-quizcraft {
        position: fixed !important;
        top: 64px; /* a bit lower than navbar for comfortable gap */
        left: 0;
        width: 260px;
        height: calc(100vh - 64px);
        overflow-y: auto;
        overflow-x: hidden;
        background: #fff;
        border-right: 1px solid rgba(0,0,0,0.08);
        box-shadow: 2px 0 8px rgba(0,0,0,0.04);
        z-index: 1020;
        transform: none !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    .quizcraft-main-column {
        margin-left: 260px;
        min-width: 0;
        max-width: none;
    }
    .quizcraft-main {
        min-height: 0;
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
    body.quizcraft-dark .sidebar-quizcraft {
        background: #212529;
        border-right-color: #343a40;
    }
    body.quizcraft-sidebar-collapsed .sidebar-quizcraft {
        display: none !important;
    }
    body.quizcraft-sidebar-collapsed .quizcraft-main-column {
        margin-left: 0;
    }
}

/* Sidebar base styles (also used by mobile drawer variant) */
.sidebar-quizcraft {
    background: #fff;
    overflow-y: auto;
    min-height: 200px;
}
.sidebar-quizcraft .nav-link {
    color: var(--qc-text);
    padding: 0.65rem 1rem;
    border-left: 3px solid transparent;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease;
}
.sidebar-quizcraft .nav-link:hover { background: rgba(27,94,32,0.08); color: var(--qc-primary); }
.sidebar-quizcraft .nav-link.active { background: rgba(27,94,32,0.1); color: var(--qc-primary); border-left-color: var(--qc-primary); }

/* Question bank selection checkbox: make it clearly visible in both themes */
.question-bank-cb-strong {
    width: 1.1rem;
    height: 1.1rem;
    border-width: 2px;
    border-color: var(--qc-primary);
    box-shadow: 0 0 0 1px rgba(27,94,32,0.12);
}
.question-bank-cb-strong:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(27,94,32,0.35);
}
.question-bank-cb-strong:checked {
    background-color: var(--qc-primary);
    border-color: var(--qc-primary);
}
body.quizcraft-dark .question-bank-cb-strong {
    border-color: var(--qc-accent-light);
    box-shadow: 0 0 0 1px rgba(201,162,39,0.35);
}
body.quizcraft-dark .question-bank-cb-strong:checked {
    background-color: var(--qc-accent);
    border-color: var(--qc-accent);
}

/* Cards */
.card-quizcraft {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card-quizcraft:hover {
    box-shadow: var(--qc-card-hover);
    transform: translateY(-2px);
}

/* Student quiz: floating timer — top-right under navbar, always visible, does not cover questions */
.quiz-timer-floating {
    position: fixed;
    top: 56px;
    right: 1.25rem;
    z-index: 1029;
    display: flex;
    align-items: center;
    padding: 0.65rem 1.25rem;
    border-radius: 9999px;
    font-size: 1.25rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.14);
    background: rgba(27, 94, 32, 0.14);
    color: var(--qc-primary);
    pointer-events: none;
}
.quiz-timer-floating .small { font-size: 0.95em; }
.quiz-timer-floating strong { font-size: 1.15em; }
body.quizcraft-dark .quiz-timer-floating {
    background: rgba(201, 162, 39, 0.25);
    color: var(--qc-accent-light);
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
@media (max-width: 991.98px) {
    .quiz-timer-floating { top: 52px; right: 1rem; font-size: 1.1rem; padding: 0.55rem 1rem; }
    .quiz-timer-floating strong { font-size: 1.1em; }
}
@media (max-width: 575.98px) {
    .quiz-timer-floating { font-size: 1rem; padding: 0.5rem 0.85rem; }
}
.quiz-timer-bar {
    background: rgba(27, 94, 32, 0.12);
    color: var(--qc-primary);
    font-size: 1rem;
}
body.quizcraft-dark .quiz-timer-bar {
    background: rgba(201, 162, 39, 0.15);
    color: var(--qc-accent-light);
}
.quiz-timer-floating.quiz-timer-warning,
.quiz-timer-warning {
    background: rgba(220, 53, 69, 0.15) !important;
    color: #dc3545 !important;
}
body.quizcraft-dark .quiz-timer-floating.quiz-timer-warning,
body.quizcraft-dark .quiz-timer-warning {
    background: rgba(220, 53, 69, 0.25) !important;
    color: #f8a0a8 !important;
}
/* Quiz taking: constrained width, side padding (no full-bleed on PC) */
.quiz-take-content {
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
}
@media (min-width: 768px) {
    .quiz-take-content { padding-left: 40px; padding-right: 40px; }
}
@media (max-width: 575.98px) {
    .quiz-take-content { padding-left: 16px; padding-right: 16px; }
}
.sticky-submit-wrapper {
    position: sticky;
    bottom: 0.5rem;
    z-index: 5;
    padding-top: 0.5rem;
    background: var(--qc-bg);
}
body.quizcraft-dark .sticky-submit-wrapper {
    background: #1a1d21;
}
.card-header-quizcraft { background: rgba(27,94,32,0.06); border-bottom: 1px solid rgba(27,94,32,0.1); font-weight: 600; border-radius: 12px 12px 0 0; }
.dashboard-stat-card .card-body { min-height: 7rem; }
.dashboard-stat-card .card-body .card-title { font-size: 2rem !important; font-weight: 700 !important; }
.dashboard-stat-card.stat-courses .card-body .card-title { color: #0d6efd !important; }
.dashboard-stat-card.stat-students .card-body .card-title { color: var(--qc-primary) !important; }
.dashboard-stat-card.stat-instructors .card-body .card-title { color: #198754 !important; }
.dashboard-stat-card.stat-subjects .card-body .card-title { color: #6f42c1 !important; }
.dashboard-stat-card.stat-sections .card-body .card-title { color: #fd7e14 !important; }

/* Buttons — ensure all are clearly visible (different from background) */
.btn-quizcraft { background: var(--qc-primary); border-color: var(--qc-primary); color: #fff; }
.btn-quizcraft:hover { background: var(--qc-primary-dark); border-color: var(--qc-primary-dark); color: #fff; }
.btn-outline-quizcraft { background: rgba(27,94,32,0.12); border: 1px solid rgba(27,94,32,0.45); color: var(--qc-primary); }
.btn-outline-quizcraft:hover { background: rgba(27,94,32,0.22); border-color: var(--qc-primary); color: var(--qc-primary-dark); }
.btn-outline-secondary { background: #f0f0f0; border: 1px solid #ced4da; color: #495057; }
.btn-outline-secondary:hover { background: #e2e6ea; border-color: #adb5bd; color: #212529; }
.btn-quizcraft-accent { background: var(--qc-accent); border-color: var(--qc-accent); color: #212529; }
.btn-quizcraft-accent:hover { background: var(--qc-accent-light); border-color: var(--qc-accent-light); color: #212529; }
.btn, .btn-sm { border-radius: 8px; cursor: pointer; }
/* Dark mode: buttons remain clearly visible */
body.quizcraft-dark .btn-outline-quizcraft { background: rgba(27,94,32,0.25); border-color: rgba(27,94,32,0.5); color: #a5d6a7; }
body.quizcraft-dark .btn-outline-quizcraft:hover { background: rgba(27,94,32,0.4); border-color: #81c784; color: #c8e6c9; }
body.quizcraft-dark .btn-outline-secondary { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.25); color: #b0b0b0; }
body.quizcraft-dark .btn-outline-secondary:hover { background: rgba(255,255,255,0.18); border-color: rgba(255,255,255,0.35); color: #e4e4e4; }

/* Student dashboard: pending stat card height matches table header + first data row (e.g. up to "Database Systems" row) */
body.quizcraft-dark .student-dashboard-stat-card .card-body { background: rgba(255,255,255,0.03); }

/* Page headers */
.page-header { margin-bottom: 1.5rem; min-width: 0; }
.page-header h1 { color: var(--qc-primary); font-weight: 700; font-size: 1.5rem; }
.page-header h2, .page-header h3, .page-header h4 { font-weight: 700; }
.page-header .subtitle { color: #6c757d; font-size: 0.9rem; }
.page-title-truncate { word-break: break-word; overflow-wrap: break-word; max-width: 100%; }
@media (max-width: 991.98px) {
    .page-header h1, .page-title-truncate { font-size: 1.25rem; }
}
@media (max-width: 575.98px) {
    .page-header h1, .page-title-truncate { font-size: 1.1rem; }
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; }
.card-title { font-weight: 700; }

/* Cards — consistent radius and hover */
.card, .card-quizcraft { border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card:hover, .card-quizcraft:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.08); }
.card-body { padding: 1rem; }

/* Tables */
/* Give data tables a minimum width so they scroll horizontally on mobile */
.table-quizcraft { background: #fff; color: var(--qc-text); min-width: 900px; }
.table-quizcraft thead th { background: rgba(27,94,32,0.08); font-weight: 700; color: var(--qc-primary); border-bottom: 2px solid rgba(27,94,32,0.2); padding: 0.6rem 0.75rem; }
.table-quizcraft tbody td { color: var(--qc-text); padding: 0.6rem 0.75rem; border-top: 1px solid rgba(0,0,0,0.06); }
.table-quizcraft th,
.table-quizcraft td { white-space: nowrap; }
/* Allow specific cells to wrap when needed */
.table-quizcraft td.cell-wrap { white-space: normal; }
.table-quizcraft tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); }
.table-quizcraft tbody tr:hover { background: rgba(248,249,250,0.8); }
body.quizcraft-dark .table-quizcraft tbody tr:nth-child(even) { background: rgba(255,255,255,0.04); }
.dashboard-recent-table .table-responsive { min-height: 120px; }
.dashboard-recent-table .table { margin-bottom: 0; }

/* Responsive: tables and forms adapt when viewport is resized (not only full-screen vs mobile) */
.table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
@media (max-width: 767.98px) {
    .table-responsive { margin-left: -0.5rem; margin-right: -0.5rem; padding-left: 0.5rem; padding-right: 0.5rem; }
    .table th, .table td { padding: 0.4rem 0.5rem; font-size: 0.875rem; }
    .table .btn { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
}
@media (max-width: 575.98px) {
    .table th, .table td { white-space: normal; word-break: break-word; }
    /* Keep quiz tables horizontal on mobile – scroll instead of stacking letters */
    .table-quizcraft th,
    .table-quizcraft td { white-space: nowrap; word-break: normal; }
    .card-quizcraft.col-md-6 { max-width: 100%; }
    .d-flex.flex-wrap.gap-2 { gap: 0.5rem !important; }
    .form-select, .form-control { min-height: 38px; }
}
/* Form rows: wrap to full width on narrow viewports so fields don't squeeze */
@media (max-width: 991.98px) {
    .row.g-2 > [class^="col-"], .row.g-3 > [class^="col-"] { flex: 0 0 100%; max-width: 100%; }
}
@media (max-width: 767.98px) {
    .row.g-2.mb-3 .col-md-4, .row.g-2.mb-3 .col-md-6 { flex: 0 0 100%; max-width: 100%; }
    .page-header { flex-wrap: wrap; gap: 0.5rem; }
    .page-header .btn { width: 100%; max-width: 200px; }
}
/* Allow horizontal scrolling when tables overflow on small screens.
 * Lock the page width, but let inner .table-responsive scroll. */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100vw; }
.quizcraft-below-nav { overflow-x: hidden; }
.quizcraft-below-nav .container-fluid { max-width: 100%; }

/* Instructor dashboard: left = AI card + Recent lessons; right = Recent Quizzes (same total height, scrollable body) */
.instructor-dashboard-row { align-items: stretch; }
.instructor-dashboard-left { gap: 1rem; }
.instructor-dashboard-right .card { min-height: 0; }
.instructor-dashboard-right .card-body { max-height: 100%; }

/* My Class subject page: Students and Quizzes cards same height */
.instructor-class-subject-row.align-items-stretch .instructor-class-card { min-height: 14rem; }

/* Filter tabs (e.g. My Quizzes by subject): green tabs, active = white, contained in card */
.nav-tabs-quizcraft { border-bottom: 1px solid rgba(27,94,32,0.15); }
.nav-tabs-quizcraft .nav-link {
    background: rgba(27,94,32,0.12);
    color: var(--qc-primary);
    border: 1px solid rgba(27,94,32,0.2);
    border-bottom: none;
    margin-bottom: -1px;
    padding: 0.35rem 0.9rem;
    font-weight: 600;
}
.nav-tabs-quizcraft .nav-link:hover { background: rgba(27,94,32,0.2); color: var(--qc-primary-dark); }
.nav-tabs-quizcraft .nav-link.active {
    background: #fff;
    color: var(--qc-primary);
    border-color: rgba(27,94,32,0.2);
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
    box-shadow: 0 2px 0 0 #fff;
}
/* Less white under filter tabs (compact tab bar); add space around quiz table below */
.student-quiz-filter-card .card-body.p-0 .table-responsive { padding: 0.75rem 1rem 1rem; }
/* My Quizzes index: add a bit of space around the "All quizzes" table */
.student-quizzes-index-table .table-responsive { padding: 0 0.25rem; }
.student-quizzes-index-table .card-body { padding: 1rem 1.25rem; }
body.quizcraft-dark .nav-tabs-quizcraft .nav-link { background: rgba(27,94,32,0.2); color: #c8e6c9; }
body.quizcraft-dark .nav-tabs-quizcraft .nav-link.active { background: #212529; border-bottom-color: #212529; box-shadow: 0 2px 0 0 #212529; }

/* Subject filter buttons: affordances so they look pressable (Database Systems, Web Development, etc.) */
.subject-btn {
    min-height: 44px;
    padding: 10px 20px !important;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}
/* Slightly darker background for inactive subject buttons (outline variant) */
.subject-btn.btn-outline-quizcraft {
    background-color: rgba(27,94,32,0.18) !important;
    border-color: rgba(27,94,32,0.35);
    color: var(--qc-primary-dark);
}
.subject-btn:hover {
    background-color: rgba(27,94,32,0.22) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.subject-btn.btn-quizcraft:hover {
    background-color: var(--qc-primary-dark) !important;
}
.subject-btn:active {
    transform: translateY(1px);
    box-shadow: 0 0 2px rgba(0,0,0,0.1);
}
body.quizcraft-dark .subject-btn { box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
body.quizcraft-dark .subject-btn.btn-outline-quizcraft { background-color: rgba(27,94,32,0.28) !important; color: #c8e6c9; border-color: rgba(27,94,32,0.5); }
body.quizcraft-dark .subject-btn:hover { background-color: rgba(27,94,32,0.38) !important; box-shadow: 0 2px 6px rgba(0,0,0,0.3); }

/* Status badges (consistent across Student / Instructor / Admin) */
.badge-available { background: #198754; color: #fff; }
.badge-inprogress { background: #ffc107; color: #212529; }
.badge-submitted { background: #0d6efd; color: #fff; }
.badge-missed { background: #dc3545; color: #fff; }
.badge-no-attempts { background: #6c757d; color: #fff; }
.badge-pending { background: #ffc107; color: #212529; }
.badge-locked { background: #6c757d; color: #fff; }
.badge-completed { background: #198754; color: #fff; }
body.quizcraft-dark .badge-completed { background: var(--qc-primary); color: #fff; }

/* Empty state */
.empty-state { padding: 2.5rem; text-align: center; color: #6c757d; }
.empty-state i { font-size: 2.5rem; margin-bottom: 1rem; opacity: 0.5; }

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.content-fade-in { animation: fadeIn 0.25s ease; }

/* Tooltip helper */
[data-bs-toggle="tooltip"] { cursor: help; }

.text-quizcraft { color: var(--qc-primary); }
.bg-quizcraft { background: var(--qc-primary); }

/* Bulk upload: same-size cards */
.bulk-upload-card .card-body { min-height: 200px; }
.bulk-upload-card .card-body .form-control { min-height: 38px; }

/* Footer (transparent) */
.quizcraft-footer { background: transparent !important; }
body.quizcraft-dark .quizcraft-footer small { color: #adb5bd !important; }

/* Instructor dashboard: card body min height only; no forced main min-height to avoid excess space */
.instructor-dashboard-card .card-body { min-height: 120px; }

/* Mobile-only sidebar backplate: hidden on desktop */
.sidebar-mobile-backplate { display: none; }

/* Mobile drawer: separate panel (sibling to backdrop) so it always appears on top */
.sidebar-quizcraft-mobile { display: none; }

/* ——— Mobile / tablet <768px: sidebar = overlay drawer; from 768px sidebar in-flow ——— */
@media (max-width: 767.98px) {
    .navbar-quizcraft {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        min-height: 52px;
    }
    .navbar-quizcraft .navbar-brand { font-size: 1rem; }
    .navbar-quizcraft .navbar-logo { width: 32px; height: 32px; }
    .navbar-quizcraft .role-pill { font-size: 0.75rem; padding: 0.12rem 0.45rem; }
    .navbar-quizcraft .container-fluid {
        align-items: center;
        flex-wrap: nowrap;
    }
    /* Keep profile on same row as logo and hamburger (don't let collapse take full width) */
    .navbar-quizcraft .navbar-collapse {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        display: flex !important;
        align-items: center !important;
        flex-basis: auto !important;
        width: auto !important;
        flex-grow: 0 !important;
    }
    #navbarNavToggler { display: none !important; }
    .navbar-quizcraft .dropdown {
        display: flex;
        align-items: center;
    }
    .navbar-quizcraft .dropdown #profileDropdown {
        padding: 0.25rem;
        display: flex;
        align-items: center;
        line-height: 1;
    }
    .navbar-quizcraft .dropdown .profile-avatar { margin-right: 0 !important; vertical-align: middle; }
    .navbar-quizcraft .dropdown #profileDropdown i.fa-user-circle { font-size: 28px; vertical-align: middle; }
    .navbar-quizcraft .dropdown .me-2 { margin-right: 0 !important; }

    /* Sidebar: overlay drawer — off-screen by default, slide-in when open; sidebar column collapsed */
    .quizcraft-main-row .col-md-3:first-child,
    .quizcraft-main-row .col-lg-2:first-child {
        flex: 0 0 0;
        max-width: 0;
        padding: 0;
        overflow: visible;
    }
    .sidebar-quizcraft {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 280px;
        max-width: 85vw;
        transform: translateX(-100%);
        z-index: 1055;
        transition: transform 0.3s ease-out, box-shadow 0.3s ease;
        margin: 0;
        box-shadow: none;
        padding: 0;
        background: #ffffff !important;
        background-color: #ffffff !important;
        opacity: 1;
        visibility: hidden;
        pointer-events: none;
        overflow-y: auto;
        overflow-x: hidden;
        isolation: isolate;
        display: flex !important;
        flex-direction: column;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        border-right: 1px solid rgba(0,0,0,0.12);
    }
    .sidebar-quizcraft .d-md-none.d-flex.justify-content-end {
        flex-shrink: 0;
        min-height: 52px;
        align-items: center;
        padding-right: 0.5rem;
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    .sidebar-quizcraft .sidebar-quizcraft-inner:last-of-type {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 1.5rem 0 0.75rem; /* extra top padding so first link isn't tight under navbar */
        -webkit-overflow-scrolling: touch;
    }
    /* Solid opaque backplate so main content never shows through; sidebar remains readable */
    .sidebar-mobile-backplate {
        display: block !important;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background: #ffffff !important;
        background-color: #ffffff !important;
        z-index: 0;
        pointer-events: none;
        opacity: 1;
    }
    .sidebar-quizcraft-inner {
        position: relative;
        z-index: 1;
        background: transparent !important;
    }
    .sidebar-quizcraft .nav,
    .sidebar-quizcraft .nav-link {
        background: transparent !important;
        background-color: transparent !important;
    }
    .sidebar-quizcraft .quizcraft-sidebar-close {
        background: transparent !important;
        background-color: transparent !important;
        color: #333 !important;
    }
    body.quizcraft-sidebar-open .sidebar-quizcraft {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.3s ease-out, box-shadow 0.3s ease;
    }
    body.quizcraft-dark .sidebar-quizcraft,
    body.quizcraft-dark .sidebar-mobile-backplate {
        background: #212529 !important;
        background-color: #212529 !important;
        border-right-color: #343a40;
    }
    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 1050;
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }
    body.quizcraft-sidebar-open .sidebar-backdrop {
        display: block !important;
        opacity: 1;
        pointer-events: auto;
    }
    body.quizcraft-sidebar-open { overflow: hidden; }

    /* Mobile sidebar drawer — fixed overlay, slides in from left, above backdrop */
    .sidebar-quizcraft-mobile {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        z-index: 1060 !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease-out, box-shadow 0.3s ease;
        background: #ffffff !important;
        background-color: #ffffff !important;
        box-shadow: none;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        border-right: 1px solid rgba(0,0,0,0.12);
    }
    .sidebar-quizcraft-mobile-inner { padding: 0; }
    .sidebar-quizcraft-mobile-header {
        flex-shrink: 0;
        background: rgba(0,0,0,0.03);
        border-bottom: 1px solid rgba(0,0,0,0.08);
    }
    body.quizcraft-dark .sidebar-quizcraft-mobile-header {
        background: rgba(0,0,0,0.2);
        border-bottom-color: #343a40;
    }
    .sidebar-mobile-brand { color: #212529; }
    .sidebar-mobile-logo { width: 36px; height: 36px; object-fit: contain; }
    .sidebar-mobile-title { font-weight: 600; font-size: 1.1rem; }
    body.quizcraft-dark .sidebar-mobile-brand { color: #e9ecef; }
    .sidebar-quizcraft-mobile-nav { padding: 0.5rem 0 0.75rem; padding-left: 0.75rem; padding-right: 0.75rem; }
    .sidebar-quizcraft-mobile .nav { flex-direction: column; }
    .sidebar-quizcraft-mobile .nav-link {
        padding: 0.5rem 0.75rem;
        color: #212529;
        border-radius: 0.25rem;
        border-left: 3px solid transparent;
    }
    .sidebar-quizcraft-mobile .nav-link:hover { background: rgba(27,94,32,0.08); color: var(--qc-primary); }
    .sidebar-quizcraft-mobile .nav-link.active { background: rgba(27,94,32,0.1); color: var(--qc-primary); border-left-color: var(--qc-primary); }
    body.quizcraft-sidebar-open .sidebar-quizcraft-mobile {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    }
    body.quizcraft-dark .sidebar-quizcraft-mobile {
        background: #212529 !important;
        background-color: #212529 !important;
        border-right-color: #343a40;
    }
    body.quizcraft-dark .sidebar-quizcraft-mobile .nav-link { color: #dee2e6; }
    body.quizcraft-dark .sidebar-quizcraft-mobile .nav-link:hover,
    body.quizcraft-dark .sidebar-quizcraft-mobile .nav-link.active { background: rgba(255,255,255,0.08); color: #c9a227; border-left-color: #c9a227; }

    .quizcraft-main {
        flex: 0 0 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Footer: visible and readable on small screens */
    .quizcraft-footer {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        font-size: 0.875rem;
    }
    .quizcraft-footer .container-fluid { padding-left: 1rem; padding-right: 1rem; }
}

/* Dark mode (UI only, from Settings) */
body.quizcraft-dark { --qc-bg: #1a1d21; --qc-text: #e9ecef; background-color: var(--qc-bg); color: var(--qc-text); }
body { font-size: var(--qc-font-size); }
body.quizcraft-dark .sidebar-quizcraft { background: #212529; }
body.quizcraft-dark .sidebar-quizcraft .nav-link { color: #dee2e6; }
body.quizcraft-dark .sidebar-quizcraft .nav-link:hover,
body.quizcraft-dark .sidebar-quizcraft .nav-link.active { background: rgba(255,255,255,0.08); color: #c9a227; border-left-color: #c9a227; }
.sidebar-quizcraft .quizcraft-sidebar-close { color: var(--qc-text); }
body.quizcraft-dark .sidebar-quizcraft .quizcraft-sidebar-close { color: #dee2e6; }
body.quizcraft-dark .card-quizcraft { background: #262b30; color: #e9ecef; border: 1px solid #353b41; }
body.quizcraft-dark .card-header-quizcraft { background: rgba(0,0,0,0.22); border-bottom-color: #353b41; }
body.quizcraft-dark .card-quizcraft i { color: #ced4da; }
body.quizcraft-dark .card-quizcraft .text-quizcraft { color: #d4af37 !important; }
body.quizcraft-dark .table-quizcraft { background: #212529 !important; color: #e9ecef !important; }
body.quizcraft-dark .table-quizcraft thead th { background: #343a40 !important; color: #c9a227 !important; border-bottom-color: #495057 !important; }
body.quizcraft-dark .table-quizcraft tbody td { background: #212529 !important; color: #e9ecef !important; border-top-color: #343a40 !important; }
body.quizcraft-dark .table-quizcraft tbody tr { background: #212529 !important; }
body.quizcraft-dark .table-quizcraft tbody tr:hover { background: #2c3136 !important; }
body.quizcraft-dark .table { background: #212529 !important; color: #e9ecef !important; }
body.quizcraft-dark .table thead th { background: #343a40 !important; color: #c9a227 !important; }
body.quizcraft-dark .table tbody td { background: #212529 !important; color: #e9ecef !important; }
body.quizcraft-dark .table tbody tr { background: #212529 !important; }
body.quizcraft-dark .table tbody tr:hover { background: #2c3136 !important; }
body.quizcraft-dark .page-header h1 { color: #86b986; }
body.quizcraft-dark .page-header h2, body.quizcraft-dark .page-header h3, body.quizcraft-dark .page-header h4 { color: #e9ecef; }
body.quizcraft-dark .page-header .subtitle { color: #adb5bd !important; }
body.quizcraft-dark .text-muted { color: #adb5bd !important; }
body.quizcraft-dark .fw-semibold, body.quizcraft-dark .card-quizcraft .fw-semibold { color: #e9ecef !important; }
body.quizcraft-dark .card-quizcraft .card-body, body.quizcraft-dark .card .card-body { color: #e9ecef; }
body.quizcraft-dark .card-quizcraft small, body.quizcraft-dark .card small { color: #adb5bd; }
body.quizcraft-dark .navbar-quizcraft .dropdown-menu { background: #2a2e33; border-color: #3d4348; }
body.quizcraft-dark .dropdown-header { color: #adb5bd !important; }
body.quizcraft-dark .dropdown-item { color: #e9ecef; }
body.quizcraft-dark .dropdown-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
body.quizcraft-dark .dropdown-divider { border-color: #3d4348; }
body.quizcraft-dark .badge { color: #e9ecef; }
body.quizcraft-dark .form-control,
body.quizcraft-dark .form-select,
body.quizcraft-dark input[type="text"],
body.quizcraft-dark input[type="email"],
body.quizcraft-dark input[type="number"],
body.quizcraft-dark input[type="datetime-local"],
body.quizcraft-dark textarea { background: #343a40; border-color: #495057; color: #e9ecef !important; }
body.quizcraft-dark .form-label { color: #e9ecef !important; }
body.quizcraft-dark .form-control::placeholder,
body.quizcraft-dark input::placeholder,
body.quizcraft-dark textarea::placeholder { color: #adb5bd !important; opacity: 1; }
body.quizcraft-dark .form-text,
body.quizcraft-dark .form-control + small,
body.quizcraft-dark label.small + .form-control + small { color: #adb5bd !important; }
/* Correct-answer / green-highlight boxes: keep inputs readable in dark mode */
body.quizcraft-dark .bg-success.bg-opacity-25 { background: rgba(27,94,32,0.35) !important; }
body.quizcraft-dark .bg-success.bg-opacity-25 .form-control,
body.quizcraft-dark .bg-success.bg-opacity-25 input { color: #e9ecef !important; }

/* File inputs (Choose file) */
input[type="file"].form-control { cursor: pointer; }
input[type="file"].form-control::file-selector-button {
    margin-right: 0.75rem;
    border: 1px solid rgba(27,94,32,0.35);
    background: rgba(27,94,32,0.08);
    color: var(--qc-primary);
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
input[type="file"].form-control:hover::file-selector-button {
    background: rgba(27,94,32,0.14);
    border-color: rgba(27,94,32,0.5);
}
body.quizcraft-dark input[type="file"].form-control::file-selector-button {
    border-color: #495057;
    background: #2c3136;
    color: #e9ecef;
}
body.quizcraft-dark input[type="file"].form-control:hover::file-selector-button { background: #353b41; }
body.quizcraft-dark .bg-light { background: #212529 !important; }
body.quizcraft-dark .list-group-item { background: #212529; border-color: #343a40; color: #e9ecef; }
body.quizcraft-dark .empty-state { color: #adb5bd; }
body.quizcraft-dark .navbar-quizcraft { background: #121417 !important; box-shadow: 0 2px 6px rgba(0,0,0,0.6); }
body.quizcraft-dark .navbar-quizcraft .navbar-brand { color: #f8f9fa !important; }
body.quizcraft-dark .navbar-quizcraft .navbar-text { color: #f8f9fa !important; }
body.quizcraft-dark .navbar-quizcraft .dropdown-toggle { background: transparent !important; border: none !important; }
body.quizcraft-dark .navbar-quizcraft .dropdown-toggle:focus { background: transparent !important; box-shadow: none !important; }
body.quizcraft-dark .navbar-quizcraft .badge { background: rgba(255,255,255,0.2) !important; color: #f8f9fa !important; }
body.quizcraft-dark a { color: #c9a227; text-decoration: none; }
body.quizcraft-dark a:hover { color: #d4af37; text-decoration: underline; }
body.quizcraft-dark .hero-card-quizcraft { background: rgba(33,37,41,0.96); }
body.quizcraft-dark .hero-logo-wrapper { background: #1f2428; }
body.quizcraft-dark.quizcraft-hero-bg {
    background-image:
        linear-gradient(rgba(0,0,0,0.50), rgba(0,0,0,0.72)),
        url('../img/bpc-campus.jpg');
}
body.quizcraft-dark.quizcraft-hero-bg::before {
    background:
        radial-gradient(circle at top left, rgba(0,0,0,0.22), transparent 55%),
        radial-gradient(circle at bottom right, rgba(0,0,0,0.32), transparent 55%);
}
body.quizcraft-dark .hero-title { color: #9ad29a; }

/* Profile */
.profile-avatar-xl { width: 240px; height: 240px; object-fit: cover; }
.profile-avatar-placeholder-xl { width: 240px; height: 240px; }
@media (max-width: 576px) {
    .profile-avatar-xl, .profile-avatar-placeholder-xl { width: 170px; height: 170px; }
}

/* Auth layout: same height/size as main navbar */
.auth-header {
    flex-shrink: 0;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 56px;
    display: flex;
    align-items: center;
    background: var(--qc-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.auth-header-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
}
.auth-header-brand:hover { color: #fff !important; opacity: 0.9; }
.auth-header-logo { width: 36px; height: 36px; object-fit: contain; }
.auth-main { min-height: 0; }
body.quizcraft-dark .auth-header { background: #121417 !important; }

/* Auth pages: less vertical space, visual anchor */
.auth-page { min-height: auto; padding-top: 1.5rem; padding-bottom: 2rem; align-items: flex-start; }
.auth-page .auth-card { box-shadow: 0 4px 20px rgba(0,0,0,0.08); margin-top: 0.5rem; }
body.auth-page-bg {
    background-image:
        linear-gradient(var(--qc-auth-overlay-top), var(--qc-auth-overlay-bottom)),
        url('../img/bpc-campus.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    position: relative;
}
body.auth-page-bg::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(var(--qc-auth-overlay-top), var(--qc-auth-overlay-bottom)),
        url('../img/bpc-campus.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}
body.auth-page-bg .container-fluid {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
body.auth-page-bg .row {
    width: 100%;
    margin: 0;
}
.auth-card-wrapper .card { background: rgba(255,255,255,0.90); border-radius: 0.5rem; box-shadow: 0 4px 20px rgba(0,0,0,0.15); border: none; backdrop-filter: blur(8px); }
.auth-card-logo { width: 96px; height: 96px; object-fit: contain; display: block; margin-left: auto; margin-right: auto; }
body.quizcraft-dark .auth-card-wrapper .card { background: rgba(33,37,41,0.88); }
body.quizcraft-dark .auth-card-wrapper .card { background: #212529; border: 1px solid #343a40; }
/* Dark mode auth page background: slight dark gray (no green tint) */
body.quizcraft-dark.auth-page-bg {
    background-image:
        linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.75)),
        url('../img/bpc-campus.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: #1a1d21 !important;
}
body.quizcraft-dark.auth-page-bg::before {
    background-image:
        linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.75)),
        url('../img/bpc-campus.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}
.password-toggle-wrapper { position: relative; }
.password-toggle-wrapper .form-control { padding-right: 2.75rem; }
.password-toggle-wrapper .btn-password-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; color: #6c757d; padding: 0.25rem; cursor: pointer; }
.password-toggle-wrapper .btn-password-toggle:hover { color: var(--qc-text); }
body.quizcraft-dark .password-toggle-wrapper .btn-password-toggle { color: #adb5bd; }
body.quizcraft-dark .password-toggle-wrapper .btn-password-toggle:hover { color: #e9ecef; }

/* Global link styling - remove blue underline */
a { color: var(--qc-primary); text-decoration: none; }
a:hover { color: var(--qc-primary-dark); text-decoration: underline; }
a.btn { text-decoration: none; }
a.btn:hover { text-decoration: none; }
.btn-link { color: inherit; text-decoration: none; }
.btn-link:hover { color: inherit; text-decoration: underline; }
body.quizcraft-dark .btn-link { color: #c9a227; }
body.quizcraft-dark .btn-link:hover { color: #d4af37; }

/* Footer: never overflow on mobile */
.quizcraft-footer { width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; padding: 0.5rem 1rem; }
.quizcraft-footer .container-fluid { max-width: 100%; text-align: center; white-space: normal; word-break: break-word; }

/* Catch-all: prevent any element from blowing out viewport width on mobile */
@media (max-width: 767.98px) {
    * { max-width: 100vw; box-sizing: border-box; }
    /* Exceptions — allowed to exceed viewport */
    td, th,
    .sidebar-quizcraft,
    .sidebar-quizcraft-mobile,
    .quiz-timer-floating,
    .modal, .modal-dialog,
    .dropdown-menu { max-width: none; }
}