/* ARNDALE student portal — shared responsive design system */
:root {
    --student-brand: #2563eb;
    --student-brand-strong: #1d4ed8;
    --student-brand-soft: #eff6ff;
    --student-accent: #06b6d4;
    --student-ink: #0f172a;
    --student-muted: #64748b;
    --student-line: #e2e8f0;
    --student-canvas: #f6f8fc;
    --student-surface: #ffffff;
    --student-radius-sm: 12px;
    --student-radius: 18px;
    --student-radius-lg: 24px;
    --student-shadow: 0 12px 32px rgba(15, 23, 42, .07);
    --student-shadow-hover: 0 20px 44px rgba(15, 23, 42, .12);
    --sidebar-width: 264px;
    --sidebar-collapsed: 82px;
}

html { scroll-behavior: smooth; }

body {
    color: var(--student-ink);
    background: var(--student-canvas) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto var(--sidebar-width);
    height: 310px;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle at 82% 8%, rgba(6, 182, 212, .12), transparent 28%),
        linear-gradient(180deg, #edf5ff 0%, rgba(246, 248, 252, 0) 100%);
}

a, button, input, select, textarea { transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, transform .2s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid rgba(37, 99, 235, .25) !important;
    outline-offset: 2px;
}

.sidebar {
    width: var(--sidebar-width) !important;
    padding: 16px 12px;
    background: linear-gradient(160deg, #0f172a 0%, #172554 58%, #1e3a8a 100%) !important;
    border-right: 1px solid rgba(255,255,255,.08);
    box-shadow: 12px 0 34px rgba(15, 23, 42, .12) !important;
}
.sidebar-header { padding: 12px 10px 22px !important; border-bottom: 0 !important; text-align: left !important; }
.sidebar-brand { justify-content: flex-start !important; padding: 10px; font-size: 1.05rem !important; letter-spacing: -.01em; }
.sidebar-brand i {
    display: grid; place-items: center; width: 42px; height: 42px;
    border-radius: 13px; color: #fff !important;
    background: linear-gradient(135deg, var(--student-brand), var(--student-accent));
    box-shadow: 0 9px 20px rgba(6,182,212,.22);
}
.sidebar-nav { padding: 8px 0 !important; }
.nav-item { margin: 4px 0 !important; }
.sidebar .nav-link {
    min-height: 48px; padding: 12px 14px !important; border: 0 !important;
    border-radius: 13px; color: #cbd5e1 !important; gap: 13px !important;
}
.sidebar .nav-link i { width: 24px !important; font-size: 1rem !important; }
.sidebar .nav-link:hover { color: #fff !important; background: rgba(255,255,255,.08) !important; transform: translateX(2px); }
.sidebar .nav-link.active {
    color: #fff !important; background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(6,182,212,.75)) !important;
    box-shadow: 0 10px 24px rgba(2,132,199,.18);
}
.sidebar-footer { border-top: 1px solid rgba(255,255,255,.1) !important; padding: 16px 0 0 !important; }
.logout-btn { border: 0 !important; border-radius: 13px !important; background: rgba(255,255,255,.07) !important; color: #e2e8f0 !important; }
.logout-btn:hover { background: rgba(239,68,68,.18) !important; color: #fecaca !important; }
.sidebar-collapsed { width: var(--sidebar-collapsed) !important; }
.sidebar-collapsed .sidebar-brand, .sidebar-collapsed .nav-link { justify-content: center !important; }

.main-wrapper { margin-left: var(--sidebar-width) !important; width: calc(100% - var(--sidebar-width)) !important; min-width: 0; }
.main-wrapper-expanded { margin-left: var(--sidebar-collapsed) !important; width: calc(100% - var(--sidebar-collapsed)) !important; }
.top-bar {
    min-height: 76px; margin: 16px 24px 0; padding: 10px 14px 10px 10px !important;
    border: 1px solid rgba(226,232,240,.9) !important; border-radius: 18px;
    background: rgba(255,255,255,.88) !important; box-shadow: 0 8px 25px rgba(15,23,42,.05) !important;
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
}
.sidebar-toggle, .mobile-menu-trigger {
    display: grid; place-items: center; width: 44px !important; height: 44px !important;
    border: 1px solid var(--student-line) !important; border-radius: 13px !important;
    background: #fff !important; color: var(--student-ink) !important; box-shadow: 0 4px 12px rgba(15,23,42,.06);
}
.user-info { gap: 11px !important; }
.user-avatar {
    width: 44px !important; height: 44px !important; border-radius: 14px !important;
    background: linear-gradient(135deg, var(--student-brand), var(--student-accent)) !important;
    box-shadow: 0 8px 18px rgba(37,99,235,.2);
}
.user-details strong { color: var(--student-ink); font-size: .94rem; }
.user-details small { color: var(--student-muted) !important; font-size: .78rem; }

.main-content { width: 100%; max-width: 1500px; margin: 0 auto; padding: 28px 24px 40px !important; }
.main-content > :first-child { margin-top: 0; }
.student-footer { margin: auto 24px 20px !important; padding: 18px 4px !important; border-top: 1px solid var(--student-line) !important; color: var(--student-muted) !important; background: transparent !important; }

/* Normalize the many existing page components into one visual language. */
.card, .student-card, .stat-card, .stats-card, .dashboard-card, .exam-card,
.quiz-card, .result-card, .profile-card, .library-card, .material-card,
.welcome-card, .content-card, .info-card, .filter-card, .performance-card {
    border: 1px solid var(--student-line) !important;
    border-radius: var(--student-radius) !important;
    background: var(--student-surface) !important;
    box-shadow: var(--student-shadow) !important;
    overflow: hidden;
}
.card:hover, .exam-card:hover, .quiz-card:hover, .material-card:hover, .library-card:hover {
    border-color: #cbd5e1 !important; box-shadow: var(--student-shadow-hover) !important;
}
.card-header { border-bottom: 1px solid var(--student-line) !important; background: #fff !important; padding: 18px 20px !important; }
.card-body { padding: 20px !important; }
h1, h2, h3, h4, h5, h6 { color: var(--student-ink); letter-spacing: -.025em; }
.page-title, .dashboard-title { font-weight: 750 !important; }
.text-muted, .page-subtitle { color: var(--student-muted) !important; }

.btn {
    min-height: 42px; border-radius: 12px !important; padding: .62rem 1rem !important;
    font-weight: 650 !important; border-width: 1px !important;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { border-color: var(--student-brand) !important; background: linear-gradient(135deg, var(--student-brand), var(--student-brand-strong)) !important; box-shadow: 0 7px 16px rgba(37,99,235,.18); }
.btn-success { background: #059669 !important; border-color: #059669 !important; }
.btn-outline-primary { color: var(--student-brand) !important; border-color: #bfdbfe !important; background: #fff !important; }
.btn-outline-primary:hover { color: #fff !important; background: var(--student-brand) !important; }
.badge { border-radius: 999px !important; padding: .48em .72em !important; font-weight: 650 !important; }

.form-control, .form-select, .form-input {
    min-height: 46px; border: 1px solid #cbd5e1 !important; border-radius: 12px !important;
    background-color: #fff !important; color: var(--student-ink) !important;
}
.form-control:focus, .form-select:focus, .form-input:focus {
    border-color: var(--student-brand) !important; box-shadow: 0 0 0 4px rgba(37,99,235,.11) !important;
}
.form-label { color: #334155 !important; font-weight: 650 !important; }

.table-responsive { border: 1px solid var(--student-line); border-radius: 16px; background: #fff; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { margin-bottom: 0 !important; color: #334155 !important; }
.table > :not(caption) > * > * { padding: .9rem 1rem !important; border-bottom-color: var(--student-line) !important; vertical-align: middle; }
.table thead th { white-space: nowrap; color: #475569 !important; font-size: .76rem; text-transform: uppercase; letter-spacing: .055em; background: #f8fafc !important; }
.alert { border: 0 !important; border-radius: 14px !important; box-shadow: 0 6px 20px rgba(15,23,42,.06); }
.modal-content { border: 0 !important; border-radius: 22px !important; box-shadow: 0 24px 70px rgba(15,23,42,.22) !important; }
.dropdown-menu { padding: 8px !important; border: 1px solid var(--student-line) !important; border-radius: 14px !important; box-shadow: var(--student-shadow-hover) !important; }
.dropdown-item { border-radius: 9px; padding: 9px 11px; }

.student-page { width: 100%; }
.page-heading { padding: 6px 2px; }
.page-eyebrow { display: block; margin-bottom: 8px; color: var(--student-brand); font-size: .76rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.page-eyebrow i { margin-right: 6px; }
.page-title { font-size: clamp(1.75rem, 4vw, 2.35rem); font-weight: 780; }
.count-pill, .quiz-meta span { display: inline-flex; align-items: center; gap: 7px; width: max-content; padding: 8px 12px; border-radius: 999px; color: #475569; background: #fff; border: 1px solid var(--student-line); font-size: .84rem; font-weight: 650; }
.quiz-icon, .empty-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--student-brand); background: var(--student-brand-soft); }
.empty-icon { width: 64px; height: 64px; margin: 0 auto 18px; font-size: 1.35rem; }
.back-link { display: inline-flex; align-items: center; gap: 8px; color: var(--student-muted); text-decoration: none; font-weight: 650; }
.back-link:hover { color: var(--student-brand); }
.question-card { max-width: 940px; }
.question-number { margin-bottom: 8px; color: var(--student-brand); font-size: .75rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.question-title { margin-bottom: 20px; font-size: clamp(1.05rem, 3vw, 1.28rem); line-height: 1.5; }
.answer-grid { display: grid; gap: 10px; }
.answer-option { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 11px 14px; border: 1px solid var(--student-line); border-radius: 13px; cursor: pointer; background: #fff; }
.answer-option:hover { border-color: #93c5fd; background: #f8fbff; }
.answer-option:has(input:checked) { border-color: var(--student-brand); background: var(--student-brand-soft); box-shadow: 0 0 0 3px rgba(37,99,235,.08); }
.answer-option input { flex: 0 0 auto; }
.option-letter { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; color: #475569; background: #f1f5f9; font-weight: 750; }
.answer-option:has(input:checked) .option-letter { color: #fff; background: var(--student-brand); }
.quiz-submit-bar { position: sticky; bottom: 12px; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 18px; max-width: 940px; padding: 14px 16px; border: 1px solid var(--student-line); border-radius: 16px; background: rgba(255,255,255,.94); box-shadow: 0 15px 35px rgba(15,23,42,.12); backdrop-filter: blur(14px); }
.score-ring { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 110px; width: 110px; height: 110px; border: 9px solid #dbeafe; border-top-color: var(--student-brand); border-radius: 50%; background: #fff; }
.score-ring strong { font-size: 1.25rem; color: var(--student-ink); }.score-ring span { font-size: .75rem; color: var(--student-muted); }
.review-card { border-left: 4px solid var(--student-line) !important; }.review-card.is-correct { border-left-color: #10b981 !important; }.review-card.is-incorrect { border-left-color: #ef4444 !important; }
.review-status { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; }.is-correct .review-status { color: #047857; background: #d1fae5; }.is-incorrect .review-status { color: #b91c1c; background: #fee2e2; }
.answer-review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.answer-review-grid > div { display: grid; gap: 4px; padding: 12px; border-radius: 12px; background: #f8fafc; }.answer-review-grid span { color: var(--student-muted); font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }.explanation { padding: 12px 14px; border-radius: 12px; color: #475569; background: #fffbeb; }
.reflection-intro { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:12px; }.reflection-prompt { margin-bottom:10px; padding:11px 13px; border-radius:12px; color:#1e40af; background:#eff6ff; font-weight:650; }.reflection-input { width:100%; margin-bottom:7px; resize:vertical; }.reflection-counter { display:flex; justify-content:space-between; gap:12px; margin-bottom:13px; color:var(--student-muted); font-size:.76rem; }.week-feedback-item { border-color:var(--student-line)!important; border-radius:14px!important; }.week-header { background:#f8fafc!important; min-height:52px; }

/* Standalone login */
body.student-login-page {
    position: relative; padding: 24px !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(6,182,212,.18), transparent 30%),
        radial-gradient(circle at 88% 88%, rgba(37,99,235,.18), transparent 34%),
        #f8fafc !important;
}
.student-login-page .login-container { max-width: 460px !important; }
.student-login-page .login-card { padding: clamp(24px, 5vw, 40px) !important; border: 1px solid rgba(226,232,240,.95) !important; border-radius: 26px !important; box-shadow: 0 28px 75px rgba(15,23,42,.14) !important; }
.student-login-page .login-card::before { height: 6px !important; border-radius: 26px 26px 0 0 !important; background: linear-gradient(90deg, var(--student-brand), var(--student-accent)) !important; }
.student-login-page .login-icon { width: 70px !important; height: 70px !important; border-radius: 20px !important; background: linear-gradient(135deg, var(--student-brand), var(--student-accent)) !important; }
.student-login-page .login-title { color: var(--student-ink) !important; font-size: clamp(1.5rem, 5vw, 2rem) !important; }
.student-login-page .login-subtitle { color: var(--student-muted) !important; }

@media (max-width: 991.98px) {
    body::before { left: 0; }
    .sidebar { width: min(86vw, 310px) !important; transform: translateX(-105%); border-radius: 0 22px 22px 0; }
    .sidebar.show { transform: translateX(0); }
    .main-wrapper, .main-wrapper-expanded { width: 100% !important; margin-left: 0 !important; }
    .top-bar { margin: 12px 16px 0 72px; min-height: 64px; border-radius: 16px; }
    .mobile-menu-trigger { position: fixed !important; top: 22px !important; left: 16px !important; z-index: 1040 !important; }
    .main-content { padding: 22px 16px 96px !important; }
    .student-footer { margin: 0 16px 76px !important; }
}

@media (max-width: 575.98px) {
    .top-bar { margin-left: 66px; padding-right: 9px !important; }
    .user-details { max-width: 145px; overflow: hidden; }
    .user-details strong, .user-details small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .main-content { padding-inline: 12px !important; }
    .card-body, .card-header { padding: 16px !important; }
    .row { --bs-gutter-x: .85rem; }
    h1 { font-size: 1.65rem !important; }
    h2 { font-size: 1.4rem !important; }
    .btn { width: 100%; }
    .btn-group .btn, .input-group .btn, td .btn, .d-flex .btn { width: auto; }
    .table > :not(caption) > * > * { padding: .78rem !important; }
    .student-login-page { padding: 14px !important; align-items: flex-start !important; overflow-y: auto; }
    .student-login-page .login-container { margin: auto 0; }
    .student-login-page .login-card { padding: 25px 20px !important; border-radius: 22px !important; }
    .quiz-submit-bar { flex-direction: column; align-items: stretch; bottom: 8px; }
    .quiz-submit-bar .btn { width: 100%; }
    .answer-review-grid { grid-template-columns: 1fr; }
    .score-ring { width: 96px; height: 96px; flex-basis: 96px; }
}

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