/* =====================================================================
   Jordan Bilingual College — dashboard styles (mobile-first)
   ===================================================================== */
:root {
  --jbc-primary: #123B72;
  --jbc-secondary: #0A66C2;
  --jbc-accent: #F59E0B;
  --jbc-bg: #F5F7FB;
  --jbc-text: #1d2433;
  --jbc-muted: #5b6475;
  --jbc-border: #e4e8f0;
  --sidebar-w: 264px;
  --bs-primary: #0A66C2;
  --bs-primary-rgb: 10, 102, 194;
  --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-body-color: var(--jbc-text);
  --bs-link-color: #0A66C2;
  --bs-link-color-rgb: 10, 102, 194;
}
body { background: var(--jbc-bg); font-size: .935rem; overflow-x: hidden; }
.min-w-0 { min-width: 0; }

.btn-primary { --bs-btn-bg: var(--jbc-secondary); --bs-btn-border-color: var(--jbc-secondary); --bs-btn-hover-bg: var(--jbc-primary); --bs-btn-hover-border-color: var(--jbc-primary); --bs-btn-active-bg: var(--jbc-primary); }
.btn-outline-primary { --bs-btn-color: var(--jbc-secondary); --bs-btn-border-color: var(--jbc-secondary); --bs-btn-hover-bg: var(--jbc-secondary); --bs-btn-hover-border-color: var(--jbc-secondary); }
.btn-accent { background: var(--jbc-accent); border-color: var(--jbc-accent); color: #1d1300; font-weight: 600; }
.btn-accent:hover, .btn-accent:focus { background: #d98806; border-color: #d98806; color: #1d1300; }
.bg-accent { background: var(--jbc-accent) !important; }
.text-primary { color: var(--jbc-secondary) !important; }
.btn, .form-control, .form-select { border-radius: .6rem; }
.btn { min-height: 40px; }
.btn-sm { min-height: 32px; }
.btn-icon { border: 0; background: transparent; padding: .25rem .5rem; color: var(--jbc-primary); }
.form-control:focus, .form-select:focus { border-color: var(--jbc-secondary); box-shadow: 0 0 0 .2rem rgba(10, 102, 194, .15); }

/* ---------------------------------------------------------------- shell */
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); background: linear-gradient(180deg, #123B72 0%, #0d2d58 100%); color: #dbe6f7;
  display: flex; flex-direction: column;
}
@media (min-width: 992px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 1030; overflow-y: auto; }
  .main { margin-left: var(--sidebar-w); }
}
.offcanvas-lg.sidebar { --bs-offcanvas-width: 280px; --bs-offcanvas-bg: #123B72; }
.sidebar-brand { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.sidebar-brand img { width: 46px; height: 46px; object-fit: contain; background: #fff; border-radius: 12px; padding: 3px; }
.brand-name { font-weight: 700; color: #fff; line-height: 1.15; font-size: .95rem; }
.brand-sub { font-size: .72rem; color: var(--jbc-accent); letter-spacing: .04em; text-transform: uppercase; }
.sidebar-nav { padding: .5rem .6rem 1rem; flex: 1; }
.nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(219, 230, 247, .55); padding: 1rem .75rem .35rem; }
.sidebar .nav-link {
  display: flex; align-items: center; gap: .7rem; color: #dbe6f7; padding: .62rem .75rem; border-radius: .6rem;
  font-weight: 500; font-size: .9rem; transition: background .15s, color .15s;
}
.sidebar .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.sidebar .nav-link:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sidebar .nav-link.active { background: #fff; color: var(--jbc-primary); box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.sidebar .nav-link.active i { color: var(--jbc-accent); }
.sidebar-foot { padding: .6rem; border-top: 1px solid rgba(255, 255, 255, .1); }
.sidebar-foot .nav-link { color: #ffc9c9; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--jbc-border);
  padding: .6rem 1rem; min-height: 64px;
}
.page-title { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--jbc-primary); }
.breadcrumb { --bs-breadcrumb-divider-color: #9aa3b2; }
.breadcrumb a { text-decoration: none; }
.term-pill { background: #eef4fc; color: var(--jbc-primary); font-weight: 600; padding: .5rem .75rem; border-radius: 2rem; align-items: center; }
.btn-user { display: flex; align-items: center; gap: .5rem; border: 0; background: transparent; padding: .25rem; }
.btn-user::after { display: none; }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .85rem; color: #fff; background: linear-gradient(135deg, #0A66C2, #123B72); }
.content { padding: 1rem; flex: 1; }
@media (min-width: 768px) { .content { padding: 1.5rem; } .topbar { padding: .6rem 1.5rem; } }
.app-footer { padding: 1rem 1.5rem; font-size: .8rem; color: var(--jbc-muted); border-top: 1px solid var(--jbc-border); background: #fff; }

/* ---------------------------------------------------------------- cards */
.card-soft { border: 1px solid var(--jbc-border); border-radius: 1rem; box-shadow: 0 2px 10px rgba(18, 59, 114, .05); overflow: hidden; }
.card-soft > .card-header { background: #fff; border-bottom: 1px solid var(--jbc-border); padding: .85rem 1rem; }
.card-soft h2.h6 { font-weight: 700; color: var(--jbc-primary); }
.toolbar { background: #fff; border: 1px solid var(--jbc-border); border-radius: 1rem; padding: .85rem 1rem; }
.stat-card {
  background: #fff; border: 1px solid var(--jbc-border); border-radius: 1rem; padding: 1rem; height: 100%;
  display: flex; align-items: center; gap: .85rem; box-shadow: 0 2px 10px rgba(18, 59, 114, .05);
  transition: transform .15s, box-shadow .15s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(18, 59, 114, .1); }
.stat-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.stat-value { font-size: 1.45rem; font-weight: 800; line-height: 1.1; color: var(--jbc-primary); }
.stat-label { font-size: .78rem; color: var(--jbc-muted); }
.stat-mini { background: #fff; border: 1px solid var(--jbc-border); border-radius: .85rem; padding: .75rem .9rem; height: 100%; }
.stat-mini .v { font-size: 1.25rem; font-weight: 800; color: var(--jbc-primary); }
.stat-mini .l { font-size: .74rem; color: var(--jbc-muted); }
.welcome-card {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  background: linear-gradient(120deg, #123B72, #0A66C2); color: #fff; border-radius: 1rem; padding: 1.25rem 1.5rem;
}
.quick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
@media (min-width: 576px) { .quick-grid { grid-template-columns: repeat(3, 1fr); } }
.quick-action {
  display: flex; flex-direction: column; align-items: center; gap: .35rem; text-align: center; padding: .85rem .5rem;
  border: 1px solid var(--jbc-border); border-radius: .85rem; text-decoration: none; color: var(--jbc-primary);
  font-size: .8rem; font-weight: 600; transition: all .15s;
}
.quick-action i { font-size: 1.35rem; color: var(--jbc-secondary); }
.quick-action:hover { background: #eef4fc; border-color: #bcd5f2; }
.chart-box { position: relative; height: 280px; }
.chart-box-sm { height: 210px; }
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--jbc-muted); }
.empty-state i { font-size: 2.4rem; color: #c0c8d6; display: block; margin-bottom: .5rem; }
.empty-state p { margin: 0; }

/* ---------------------------------------------------------------- tables */
.table { --bs-table-hover-bg: #f3f7fd; }
.table > thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--jbc-muted); background: #f8fafd; font-weight: 700; white-space: nowrap; }
.sort-head { cursor: pointer; user-select: none; }
.sort-head::after { content: ' ⇅'; opacity: .35; }
.sort-head[data-dir="asc"]::after { content: ' ↑'; opacity: 1; }
.sort-head[data-dir="desc"]::after { content: ' ↓'; opacity: 1; }
.grade { display: inline-block; min-width: 2.1rem; text-align: center; padding: .15rem .4rem; border-radius: .4rem; font-weight: 700; font-size: .8rem; }
.grade-Ap, .grade-A { background: #dcfce7; color: #166534; }
.grade-B { background: #dbeafe; color: #1e40af; }
.grade-C { background: #e0f2fe; color: #075985; }
.grade-D { background: #fef9c3; color: #854d0e; }
.grade-E { background: #ffedd5; color: #9a3412; }
.grade-F { background: #fee2e2; color: #991b1b; }
.rank-badge { display: inline-grid; place-items: center; min-width: 2.2rem; height: 2.2rem; border-radius: 50%; font-weight: 800; background: #eef4fc; color: var(--jbc-primary); }
.rank-1 { background: linear-gradient(135deg, #fde68a, #F59E0B); color: #3b2500; }
.rank-2 { background: linear-gradient(135deg, #f1f5f9, #cbd5e1); color: #1e293b; }
.rank-3 { background: linear-gradient(135deg, #fed7aa, #ea9a5b); color: #3b1d00; }

/* Stacked "card" rows on phones: <table class="table-stack"> + <td data-label> */
@media (max-width: 767.98px) {
  .table-stack thead { display: none; }
  .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100%; }
  .table-stack tr { border: 1px solid var(--jbc-border); border-radius: .85rem; margin: .65rem; width: auto; padding: .35rem .25rem; background: #fff; }
  .table-stack td { border: 0; padding: .35rem .75rem; text-align: right !important; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
  .table-stack td[data-label]::before { content: attr(data-label); font-weight: 600; color: var(--jbc-muted); font-size: .78rem; text-align: left; }
  .table-stack td:not([data-label]) { justify-content: flex-end; }
}

/* ---------------------------------------------------------------- mark entry */
.marks-table .mark-input { width: 84px; text-align: center; font-weight: 600; font-size: 1rem; min-height: 42px; margin: 0 auto; }
.marks-table .mark-comment { min-width: 170px; }
.marks-table .mark-status { min-width: 106px; }
.marks-table .col-name { min-width: 190px; }
.marks-table .col-no { width: 40px; }
.marks-table tr.row-missing { background: #fffbeb; }
.marks-table tr.row-missing td:first-child { box-shadow: inset 4px 0 0 var(--jbc-accent); }
.mark-input.is-saving { background-image: linear-gradient(90deg, #eef4fc, #fff, #eef4fc); background-size: 200% 100%; animation: shimmer 1s linear infinite; }
.mark-input.is-saved { border-color: #16a34a; box-shadow: 0 0 0 .2rem rgba(22, 163, 74, .18); }
@keyframes shimmer { to { background-position: -200% 0; } }
.legend { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 4px; }
.legend-missing { background: #fde68a; }
.legend-fail { background: #fecaca; }
.save-state { font-size: .82rem; font-weight: 600; padding: .35rem .75rem; border-radius: 2rem; background: #ecfdf5; color: #047857; }
.save-state.saving { background: #eef4fc; color: var(--jbc-secondary); }
.save-state.error { background: #fef2f2; color: #b91c1c; }

@media (min-width: 768px) {
  .marks-scroll { max-height: 70vh; }
  .marks-table thead th { position: sticky; top: 0; z-index: 2; }
  .marks-table .col-name { position: sticky; left: 0; background: #fff; z-index: 1; }
  .marks-table thead .col-name { z-index: 3; background: #f8fafd; }
  .marks-table tr.row-missing .col-name { background: #fffbeb; }
}
/* Phones: one card per student with large touch targets */
@media (max-width: 767.98px) {
  .marks-table thead { display: none; }
  .marks-table, .marks-table tbody { display: block; }
  .marks-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .75rem; padding: .85rem; margin: .65rem; border: 1px solid var(--jbc-border); border-radius: .9rem; background: #fff; }
  .marks-table td { border: 0; padding: .15rem 0; display: block; }
  .marks-table td.col-no { display: none; }
  .marks-table td.col-name { grid-column: 1 / -1; border-bottom: 1px dashed var(--jbc-border); padding-bottom: .5rem; margin-bottom: .25rem; }
  .marks-table td[data-label]::before { content: attr(data-label); display: block; font-size: .72rem; font-weight: 600; color: var(--jbc-muted); text-transform: uppercase; margin-bottom: .15rem; }
  .marks-table td[data-label] { text-align: left !important; }
  .marks-table td[data-label="Comment"] { grid-column: 1 / -1; }
  .marks-table .mark-input { width: 100%; min-height: 48px; font-size: 1.15rem; }
  .action-dock { position: sticky; bottom: 0; z-index: 1010; border-radius: 1rem 1rem 0 0; box-shadow: 0 -6px 20px rgba(18, 59, 114, .12); }
  .action-dock .card-body { grid-template-columns: 1fr 1fr; }
  .action-dock .card-body > a { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- broadsheet */
.broadsheet th, .broadsheet td { white-space: nowrap; font-size: .82rem; }
.broadsheet .sticky-col { position: sticky; left: 0; background: #fff; z-index: 1; }
.broadsheet thead .sticky-col { background: #f8fafd; z-index: 2; }
.fail { color: #b91c1c; font-weight: 600; }

/* ---------------------------------------------------------------- login */
.login-body { background: var(--jbc-bg); }
.login-wrap { display: flex; min-height: 100vh; }
.login-hero {
  flex: 1.1; position: relative; color: #fff; align-items: flex-end;
  background: linear-gradient(180deg, rgba(18, 59, 114, .55), rgba(13, 45, 88, .92)), url('../img/campus.jpg') center / cover;
}
.login-hero-inner { padding: 3rem; max-width: 560px; }
.hero-logo { width: 92px; height: 92px; background: #fff; border-radius: 22px; padding: 6px; object-fit: contain; margin-bottom: 1rem; }
.login-hero h2 { font-weight: 800; font-size: 2.1rem; }
.hero-points { list-style: none; padding: 0; margin: 0; }
.hero-points li { padding: .35rem 0; }
.hero-points i { color: var(--jbc-accent); margin-right: .5rem; }
.login-panel { flex: 1; display: grid; place-items: center; padding: 1.5rem 1rem; }
.login-card { width: 100%; max-width: 410px; background: #fff; border-radius: 1.25rem; padding: 2rem 1.5rem; box-shadow: 0 10px 40px rgba(18, 59, 114, .12); }
@media (min-width: 576px) { .login-card { padding: 2.5rem; } }
.login-logo { width: 88px; height: 88px; object-fit: contain; }

/* ---------------------------------------------------------------- print */
@media print {
  .sidebar, .topbar, .app-footer, .toolbar, .no-print, .btn, .toast-container { display: none !important; }
  .main { margin: 0 !important; }
  .content { padding: 0 !important; }
  body { background: #fff; }
  .card-soft { box-shadow: none; break-inside: avoid; }
}

/* student record */
.student-photo { width: 72px; height: 96px; border-radius: 10px; overflow: hidden; background: #eef4fc; border: 3px solid var(--jbc-accent); display: grid; place-items: center; color: #9aa3b2; font-size: 2rem; flex-shrink: 0; }
.student-photo img { width: 100%; height: 100%; object-fit: cover; }
.student-photo-lg { width: 150px; height: 200px; font-size: 3.5rem; }
.student-thumb { width: 34px; height: 44px; border-radius: 6px; object-fit: cover; background: #eef4fc; }
.student-thumb.empty { display: inline-grid; place-items: center; color: #9aa3b2; }

/* timetable grids */
.tt-grid th, .tt-grid td { min-width: 120px; vertical-align: top; }
.tt-grid thead th { text-align: center; }
.tt-edit td { min-width: 150px; }
@media print { .tt-edit select, .tt-edit input { border: 0; appearance: none; padding: 0; background: none; } .nav-pills { display: none !important; } }

/* ---------------------------------------------------------------- parent & student portal */
.child-photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; border: 3px solid #eef4fc; }
.child-initials { display: grid; place-items: center; font-weight: 800; font-size: 1.5rem; color: #fff; background: linear-gradient(135deg, #0A66C2, #123B72); }
.date-chip { flex: 0 0 52px; text-align: center; border-radius: .7rem; background: #eef4fc; color: var(--jbc-primary); font-size: .7rem; text-transform: uppercase; font-weight: 700; padding: .3rem 0; line-height: 1.1; }
.date-chip span { display: block; font-size: 1.2rem; }
.portal-tabs { gap: .35rem; padding-bottom: .25rem; scrollbar-width: thin; }
.portal-tabs .nav-link { border-radius: 2rem; background: #fff; border: 1px solid var(--jbc-border); color: var(--jbc-primary); font-weight: 500; font-size: .88rem; }
.portal-tabs .nav-link.active { background: var(--jbc-secondary); border-color: var(--jbc-secondary); color: #fff; }
.thread-msg { border-radius: 1rem; padding: .75rem 1rem; max-width: 46rem; }
.thread-msg.from-school { background: #eef4fc; margin-right: auto; }
.thread-msg.from-family { background: #fff7e6; margin-left: auto; }
.quiz-q { border: 1px solid var(--jbc-border); border-radius: 1rem; padding: 1rem; background: #fff; }
.tt-grid td, .tt-grid th { min-width: 110px; }
.tt-grid th:first-child { min-width: 90px; }
.register-row .btn-check + .btn { min-width: 44px; }

/* =====================================================================
   Learning platform (online assessments, AI tutor, portal hub)
   ===================================================================== */
.question-card .prose p:last-child { margin-bottom: .25rem; }
.attempt-bar { position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; background: #fff; border: 1px solid #e3e8f0; border-radius: 14px; padding: .6rem 1rem; margin-bottom: .75rem; box-shadow: 0 6px 18px rgba(17, 28, 51, .06); }
.attempt-timer { font-weight: 800; font-variant-numeric: tabular-nums; background: #eef2ff; color: #123B72; border-radius: 999px; padding: .25rem .8rem; }
.attempt-timer.timer-low { background: #fee2e2; color: #b91c1c; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .attempt-timer.timer-low { animation: none; } }
.q-nav { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.q-dot { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; border: 1px solid #cfd6e4; text-decoration: none; color: #334155; font-weight: 600; font-size: .85rem; background: #fff; }
.q-dot.answered { background: #123B72; color: #fff; border-color: #123B72; }
.q-card { scroll-margin-top: 80px; }
.q-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.q-num { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 .4rem; border-radius: 10px; background: #123B72; color: #fff; font-weight: 700; }
.q-marks { font-size: .8rem; color: #64748b; }
.q-prompt { font-size: 1.02rem; }
.q-image { max-height: 360px; border-radius: 10px; border: 1px solid #e3e8f0; margin-bottom: .75rem; }
.q-input { margin-top: .5rem; }
.sub-q { border-left: 3px solid #F59E0B; padding: .75rem 0 .25rem 1rem; margin-top: 1rem; }
.choice { padding: .55rem .75rem .55rem 2.2rem; border: 1px solid #e3e8f0; border-radius: 10px; margin-bottom: .45rem; }
.choice:has(input:checked) { border-color: #123B72; background: #eef4ff; }
.choice .form-check-label { width: 100%; cursor: pointer; }
.choice-letter { font-weight: 700; color: #123B72; margin-right: .35rem; }
.form-check-inline.choice { padding-right: 1rem; }
.order-list { padding-left: 1.5rem; }
.order-item { display: flex; align-items: center; gap: .4rem; border: 1px solid #e3e8f0; border-radius: 10px; padding: .4rem .6rem; margin-bottom: .4rem; background: #fff; }
.blank-slot { display: inline-block; min-width: 3.5rem; border-bottom: 2px solid #123B72; text-align: center; font-weight: 700; color: #64748b; }
.yt-figure { margin: .5rem 0; max-width: 560px; }
.yt-lite { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: #000; cursor: pointer; }
.yt-lite img { width: 100%; height: 100%; object-fit: cover; }
.yt-lite iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border: 0; border-radius: 12px; background: rgba(204, 0, 0, .92); color: #fff; font-size: 1.8rem; display: grid; place-items: center; }
.yt-figure figcaption { font-size: .85rem; padding-top: .35rem; }
.rich-table { background: #fff; }

/* AI tutor */
.chat-wrap { display: flex; flex-direction: column; height: min(70vh, 720px); }
.chat-log { flex: 1; overflow-y: auto; padding: 1rem; background: #f8fafc; border-radius: 14px; border: 1px solid #e3e8f0; }
.chat-msg { max-width: 85%; padding: .7rem .95rem; border-radius: 14px; margin-bottom: .7rem; line-height: 1.55; overflow-wrap: anywhere; }
.chat-msg p:last-child { margin-bottom: 0; }
.chat-msg.user { margin-left: auto; background: #123B72; color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.assistant { background: #fff; border: 1px solid #e3e8f0; border-bottom-left-radius: 4px; }
.chat-msg.error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.chat-msg pre { white-space: pre-wrap; background: #f1f5f9; padding: .5rem; border-radius: 8px; }
.chat-form textarea { resize: none; }
.chat-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.chat-chips button { font-size: .8rem; }
.typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; margin-right: 3px; animation: blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 50% { opacity: .2; } }

/* student hub */
.hub-tile { display: flex; gap: .8rem; align-items: center; padding: 1rem; border: 1px solid #e3e8f0; border-radius: 14px; background: #fff; text-decoration: none; color: inherit; height: 100%; transition: box-shadow .2s, border-color .2s; }
.hub-tile:hover { border-color: #F59E0B; box-shadow: 0 8px 22px rgba(17, 28, 51, .07); color: inherit; }
.hub-tile i { font-size: 1.5rem; color: #123B72; }
.badge-earned { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 600; font-size: .82rem; }
.badge-locked { background: #f1f5f9; color: #94a3b8; }
@media print { .attempt-bar, .q-nav, .chat-form { display: none !important; } }

/* =====================================================================
   Sequenced entrance animations for staff and portal pages (CSS only, so a
   page can never stay hidden if a script fails). Off with reduced motion.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .topbar { animation: app-fade .45s ease both; }
  .sidebar-nav > * { animation: app-in-left .4s cubic-bezier(.2, .7, .2, 1) both; }
  .sidebar-nav > *:nth-child(1) { animation-delay: .03s; } .sidebar-nav > *:nth-child(2) { animation-delay: .06s; }
  .sidebar-nav > *:nth-child(3) { animation-delay: .09s; } .sidebar-nav > *:nth-child(4) { animation-delay: .12s; }
  .sidebar-nav > *:nth-child(5) { animation-delay: .15s; } .sidebar-nav > *:nth-child(6) { animation-delay: .18s; }
  .sidebar-nav > *:nth-child(7) { animation-delay: .21s; } .sidebar-nav > *:nth-child(8) { animation-delay: .24s; }
  .sidebar-nav > *:nth-child(9) { animation-delay: .27s; } .sidebar-nav > *:nth-child(n+10) { animation-delay: .3s; }
  .content > *:not(.modal):not(.toast-container):not(style):not(script) { animation: app-in .55s cubic-bezier(.2, .7, .2, 1) both; }
  .content > *:nth-child(1) { animation-delay: .08s; } .content > *:nth-child(2) { animation-delay: .16s; }
  .content > *:nth-child(3) { animation-delay: .24s; } .content > *:nth-child(4) { animation-delay: .32s; }
  .content > *:nth-child(5) { animation-delay: .4s; }  .content > *:nth-child(6) { animation-delay: .48s; }
  .content > *:nth-child(n+7) { animation-delay: .56s; }
  .content .row > [class*="col"] { animation: app-in .5s cubic-bezier(.2, .7, .2, 1) both; }
  .content .row > [class*="col"]:nth-child(2) { animation-delay: .07s; } .content .row > [class*="col"]:nth-child(3) { animation-delay: .14s; }
  .content .row > [class*="col"]:nth-child(4) { animation-delay: .21s; } .content .row > [class*="col"]:nth-child(5) { animation-delay: .28s; }
  .content .row > [class*="col"]:nth-child(n+6) { animation-delay: .35s; }
  /* the sticky bar of an assessment must never move */
  .content > .attempt, .attempt-bar { animation: none; }
}
@keyframes app-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes app-in-left { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes app-fade { from { opacity: 0; } to { opacity: 1; } }

/* back to top */
.app-top { position: fixed; right: 18px; bottom: 18px; z-index: 1030; width: 46px; height: 46px; border-radius: 50%; border: 0; background: #F59E0B; color: #111c33; font-size: 1.2rem; box-shadow: 0 8px 22px rgba(0, 0, 0, .2); display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .25s, transform .25s, visibility .25s; }
.app-top.is-shown { opacity: 1; visibility: visible; transform: none; }
.app-top:hover, .app-top:focus-visible { background: #123B72; color: #fff; }
@media print { .app-top { display: none !important; } }

/* "Online now" (top bar drop-down and dashboard card) */
.online-dot { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #16A34A; border: 2px solid #fff; }
.online-dot.static { position: relative; display: inline-block; right: auto; bottom: auto; vertical-align: middle; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: onlinePulse 2s infinite; }
@keyframes onlinePulse { 70% { box-shadow: 0 0 0 7px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
.btn-online .online-count { position: absolute; top: 2px; right: 0; background: #16A34A; color: #fff; font-size: .65rem; min-width: 18px; }
.online-menu { width: 300px; max-width: calc(100vw - 24px); }
.online-menu [data-online-list] { max-height: 360px; overflow-y: auto; }
.online-list li { display: flex; align-items: center; gap: .65rem; padding: .5rem 1rem; }
.online-list li + li { border-top: 1px solid rgba(0, 0, 0, .05); }
.online-card .online-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.online-card .online-list li + li { border-top: 0; }
.avatar-sm { position: relative; flex: 0 0 auto; width: 34px; height: 34px; font-size: .75rem; }
.online-meta { font-size: .72rem; }
@media (prefers-reduced-motion: reduce) { .online-dot.static { animation: none; } }
@media print { [data-online] { display: none !important; } }
.online-group + .online-group { border-top: 1px solid rgba(0, 0, 0, .06); }
.online-group-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #5b6475; padding: .55rem 1rem .15rem; }
.avatar-student { background: linear-gradient(135deg, #16A34A, #0F766E); }
.avatar-parent { background: linear-gradient(135deg, #F59E0B, #B45309); }
.online-menu [data-online-list] { max-height: 420px; }