/* ==========================================================================
BRIGHT ADMIN — core stylesheet
Fully isolated from student/parent app.css. Every custom class is adm-*.
Bootstrap 5.3.2 + Bootstrap Icons vendored locally.
========================================================================== */
:root {
/* Brand */
--adm-cyan: #00D5E5;
--adm-cyan-dark: #0891B2;
--adm-cyan-050: #ECFEFF;
--adm-cyan-100: #CFF9FC;
/* Ink scale */
--adm-ink: #0F172A;
--adm-ink-soft: #334155;
--adm-ink-muted: #64748B;
--adm-ink-faint: #94A3B8;
/* Surfaces */
--adm-surface: #FFFFFF;
--adm-surface-2: #F8FAFC;
--adm-surface-3: #F1F5F9;
--adm-border: #E2E8F0;
--adm-border-soft: #EEF2F6;
--adm-border-field: #B8C2CF; /* darker: inputs, selects, textareas */
/* Status */
--adm-amber: #F59E0B;
--adm-red: #F93E3E;
--adm-green: #10B981;
--adm-blue: #3B82F6;
--adm-violet: #7C6BF0;
/* Effects */
--adm-shadow-sm: 0 1px 2px rgba(15,23,42,.06);
--adm-shadow: 0 4px 16px rgba(15,23,42,.08);
--adm-shadow-lg: 0 18px 50px rgba(15,23,42,.16);
--adm-radius: 14px;
--adm-radius-sm: 10px;
--adm-radius-lg: 20px;
--adm-sidebar-w: 260px;
}
* { box-sizing: border-box; }
html { font-size: 16.5px; }
body {
margin: 0;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
color: var(--adm-ink);
background: var(--adm-surface-3);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* ---------- shared primitives (reused across admin pages) ---------- */
.adm-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
font-weight: 600; font-size: .9rem; line-height: 1;
padding: .72rem 1.15rem; border-radius: var(--adm-radius-sm);
border: 1px solid transparent; cursor: pointer; text-decoration: none;
transition: transform .12s ease, box-shadow .12s ease, background .15s ease, border-color .15s ease;
white-space: nowrap;
}
.adm-btn:active { transform: translateY(1px); }
.adm-btn--primary {
background: linear-gradient(180deg, var(--adm-cyan) 0%, var(--adm-cyan-dark) 100%);
color: #fff; box-shadow: 0 6px 16px rgba(8,145,178,.28);
}
.adm-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(8,145,178,.34); color:#fff; }
.adm-btn--ghost {
background: var(--adm-surface); color: var(--adm-ink-soft); border-color: var(--adm-border);
}
.adm-btn--ghost:hover { background: var(--adm-surface-2); border-color: var(--adm-ink-faint); color: var(--adm-ink); }
.adm-btn--block { width: 100%; }
.adm-btn--lg { padding: .9rem 1.3rem; font-size: .98rem; }
.adm-field { margin-bottom: 1.05rem; }
.adm-field > label {
display: block; font-size: .82rem; font-weight: 600;
color: var(--adm-ink-soft); margin-bottom: .4rem;
}
.adm-input {
width: 100%; font-size: .95rem; color: var(--adm-ink);
padding: .78rem .95rem; border: 1.5px solid var(--adm-border-field);
border-radius: var(--adm-radius-sm); background: var(--adm-surface);
transition: border-color .15s ease, box-shadow .15s ease;
font-family: inherit;
}
.adm-input::placeholder { color: var(--adm-ink-faint); }
.adm-input:focus {
outline: none; border-color: var(--adm-cyan);
box-shadow: 0 0 0 4px rgba(0,213,229,.14);
}
.adm-input-group { position: relative; }
.adm-input-group .adm-input { padding-right: 2.8rem; }
.adm-input-group__btn {
position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
background: none; border: none; color: var(--adm-ink-faint);
cursor: pointer; padding: .4rem; border-radius: 8px; line-height: 1;
}
.adm-input-group__btn:hover { color: var(--adm-ink-soft); background: var(--adm-surface-3); }
.adm-check { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; user-select: none; }
.adm-check input { width: 16px; height: 16px; accent-color: var(--adm-cyan-dark); cursor: pointer; }
.adm-check span { font-size: .86rem; color: var(--adm-ink-soft); }
.adm-link { color: var(--adm-cyan-dark); font-weight: 600; text-decoration: none; }
.adm-link:hover { text-decoration: underline; }
/* ==========================================================================
LOGIN — simple centered card
========================================================================== */
.adm-auth {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 0.8rem;
background: radial-gradient(900px 480px at 50% -8%, rgba(0,213,229,.12), transparent 60%), var(--adm-surface-3);
}
.adm-auth__card {
width: 100%;
max-width: 400px;
background: var(--adm-surface);
border: 1px solid var(--adm-border);
border-radius: var(--adm-radius-lg);
box-shadow: var(--adm-shadow-lg);
padding: 1.15rem;
}
.adm-auth__logo { display: flex; justify-content: center; margin-bottom: 1.8rem; }
.adm-auth__logo img { height: 40px; display: block; }
.adm-auth__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 .35rem; text-align: center; }
.adm-auth__subtitle { font-size: .92rem; color: var(--adm-ink-muted); margin: 0 0 1.8rem; text-align: center; }
.adm-auth__row {
display: flex; align-items: center; justify-content: space-between;
margin: -.2rem 0 1.4rem;
}
.adm-auth__note {
margin-top: 1.5rem; padding: .8rem .95rem; border-radius: var(--adm-radius-sm);
background: var(--adm-surface-2); border: 1px solid var(--adm-border-soft);
display: flex; gap: .6rem; align-items: flex-start;
}
.adm-auth__note i { color: var(--adm-cyan-dark); font-size: 1rem; margin-top: .05rem; }
.adm-auth__note p { margin: 0; font-size: .78rem; color: var(--adm-ink-muted); line-height: 1.5; }
.adm-auth__form-foot {
margin-top: 1.6rem; text-align: center; font-size: .8rem; color: var(--adm-ink-faint);
}
/* Inline error (mock) */
.adm-auth__error {
display: none; align-items: center; gap: .5rem;
background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C;
padding: .7rem .9rem; border-radius: var(--adm-radius-sm);
font-size: .84rem; font-weight: 500; margin-bottom: 1.1rem;
}
.adm-auth__error.is-shown { display: flex; }
@media (max-width: 460px) {
.adm-auth__card { padding: 2rem 1.5rem; }
}
/* ==========================================================================
APP SHELL — sidebar + topbar + content (reused on every admin page)
========================================================================== */
.adm-shell { display: flex; min-height: 100vh; }
/* ---- Sidebar ---- */
.adm-sidebar {
width: var(--adm-sidebar-w); flex: 0 0 var(--adm-sidebar-w);
background: linear-gradient(180deg, #0F172A 0%, #111c33 100%);
color: #CBD5E1; position: fixed; inset: 0 auto 0 0; height: 100vh;
display: flex; flex-direction: column; z-index: 40;
border-right: 1px solid rgba(255,255,255,.06);
}
.adm-sidebar__brand {
height: 68px; flex: 0 0 68px; display: flex; align-items: center;
padding: 0 1.3rem; border-bottom: 1px solid rgba(255,255,255,.07);
}
.adm-sidebar__brand img { height: 26px; }
.adm-sidebar__brand > a{
padding: 8px;
background: #fff;
border-radius: 4px;
}
.adm-sidebar__nav { flex: 1; overflow-y: auto; padding: 1rem .75rem 1.5rem; }
.adm-sidebar__nav::-webkit-scrollbar { width: 6px; }
.adm-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 3px; }
.adm-navlabel {
font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
color: #04B5C2; padding: 0; margin: 1.1rem 0 .4rem;
border-bottom: 1px dotted #00d5e5;
}
.adm-navlabel:first-child { margin-top: 0; }
.adm-navlink {
display: flex; align-items: center; gap: .7rem;
padding: .3rem .75rem; border-radius: 6px; margin-bottom: .12rem;
color: #CBD5E1; text-decoration: none; font-size: .82rem; font-weight: 500;
transition: background .14s ease, color .14s ease;
}
.adm-navlink i { font-size: 1.05rem; width: 20px; text-align: center; color: #94A3B8; transition: color .14s ease; }
.adm-navlink:hover { background: rgba(255,255,255,.06); color: #fff; }
.adm-navlink:hover i { color: #CBD5E1; }
.adm-navlink.is-active {
background: linear-gradient(90deg, rgba(251,198,74,.16), rgba(251,198,74,.04));
color: #FBC64A; box-shadow: inset 2px 0 0 #FBC64A;
}
.adm-navlink.is-active i { color: #FBC64A; }
.adm-navlink__badge {
margin-left: auto; background: var(--adm-cyan); color: #06323a;
font-size: .68rem; font-weight: 800; padding: .1rem .42rem; border-radius: 999px;
}
/* ---- Main + topbar ---- */
.adm-main {
flex: 1; min-width: 0; margin-left: var(--adm-sidebar-w);
display: flex; flex-direction: column;
background:
linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.4)),
url('../img/bg-pattern.png');
background-size: auto, 520px; background-attachment: fixed;
}
.adm-topbar {
height: 68px; flex: 0 0 68px; position: sticky; top: 0; z-index: 30;
background: rgba(255,255,255,.86); backdrop-filter: blur(10px);
border-bottom: 1px solid var(--adm-border);
display: flex; align-items: center; gap: 1rem; padding: 0 1.6rem;
}
.adm-hamburger {
display: none; background: none; border: none; font-size: 1.4rem;
color: var(--adm-ink); cursor: pointer; padding: .2rem;
}
.adm-topbar__title { font-size: 1.12rem; font-weight: 700; margin: 0; }
.adm-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.adm-iconbtn {
width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--adm-border);
background: var(--adm-surface); color: var(--adm-ink-soft); cursor: pointer;
display: grid; place-items: center; font-size: 1.1rem; position: relative;
transition: background .14s, border-color .14s;
}
.adm-iconbtn:hover { background: var(--adm-surface-2); border-color: var(--adm-ink-faint); }
.adm-iconbtn__dot { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--adm-red); border: 2px solid #fff; }
.adm-user { display: flex; align-items: center; gap: .65rem; cursor: pointer; padding-left: .4rem; }
.adm-user__meta { text-align: right; line-height: 1.15; }
.adm-user__name { font-size: .86rem; font-weight: 700; color: var(--adm-ink); }
.adm-user__role { font-size: .72rem; color: var(--adm-ink-muted); }
.adm-user__avatar {
width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
background: linear-gradient(180deg, var(--adm-cyan), var(--adm-cyan-dark));
color: #fff; font-weight: 800; font-size: .95rem; display: grid; place-items: center;
box-shadow: 0 4px 12px rgba(8,145,178,.3);
}
/* ---- Content area ---- */
.adm-content { padding: 1.9rem 2rem 2.8rem; max-width: 1440px; width: 100%; margin-inline: auto; }
.adm-pagehead { margin-bottom: 1.5rem; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.adm-crumb { font-size: .78rem; color: var(--adm-ink-faint); margin-bottom: .35rem; display: flex; align-items: center; gap: .4rem; }
.adm-crumb i { font-size: .7rem; }
.adm-pagehead h1 { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.adm-pagehead p { margin: .3rem 0 0; color: var(--adm-ink-muted); font-size: .92rem; }
/* generic card */
.adm-card {
background: var(--adm-surface); border: 1px solid var(--adm-border);
border-radius: var(--adm-radius); box-shadow: var(--adm-shadow-sm);
}
.adm-card__head { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--adm-border-soft); display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.adm-card__head h3 { font-size: 1.08rem; font-weight: 700; margin: 0; }
.adm-card__body { padding: 1.25rem; }
/* ---- KPI stat cards ---- */
.adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.6rem; }
.adm-stat {
background: var(--adm-surface); border: 1px solid var(--adm-border);
border-radius: var(--adm-radius); padding: 1.15rem 1.25rem; box-shadow: var(--adm-shadow-sm);
display: flex; align-items: center; gap: 1rem;
}
.adm-stat__ic { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 13px; display: grid; place-items: center; font-size: 1.35rem; }
.adm-stat__ic--cyan { background: var(--adm-cyan-050); color: var(--adm-cyan-dark); }
.adm-stat__ic--violet { background: #EEF0FE; color: var(--adm-violet); }
.adm-stat__ic--amber { background: #FEF6E7; color: var(--adm-amber); }
.adm-stat__ic--green { background: #E7F8F1; color: var(--adm-green); }
.adm-stat__val { font-size: 1.55rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.adm-stat__label { font-size: .82rem; color: var(--adm-ink-muted); margin-top: .28rem; }
.adm-stat__trend { font-size: .74rem; font-weight: 600; margin-top: .3rem; }
.adm-stat__trend--up { color: var(--adm-green); }
/* ---- Module launcher cards ---- */
.adm-modgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.adm-mod {
background: var(--adm-surface); border: 1px solid var(--adm-border);
border-radius: var(--adm-radius); padding: 1.3rem; text-decoration: none; color: inherit;
box-shadow: var(--adm-shadow-sm); display: block; position: relative;
transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.adm-mod:hover { transform: translateY(-3px); box-shadow: var(--adm-shadow); border-color: var(--adm-cyan-100); }
.adm-mod__ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.3rem; margin-bottom: .9rem; }
.adm-mod__arrow { position: absolute; top: 1.3rem; right: 1.3rem; color: var(--adm-ink-faint); font-size: 1rem; transition: transform .14s ease, color .14s ease; }
.adm-mod:hover .adm-mod__arrow { color: var(--adm-cyan-dark); transform: translateX(3px); }
.adm-mod h4 { font-size: 1rem; font-weight: 700; margin: 0 0 .3rem; }
.adm-mod p { font-size: .84rem; color: var(--adm-ink-muted); margin: 0; line-height: 1.5; }
/* ---- Coverage bars ---- */
.adm-cov { display: flex; flex-direction: column; gap: 1rem; }
.adm-cov__row { display: grid; grid-template-columns: 130px 1fr 44px; align-items: center; gap: .9rem; }
.adm-cov__name { font-size: .87rem; font-weight: 600; color: var(--adm-ink-soft); }
.adm-cov__track { height: 8px; background: var(--adm-surface-3); border-radius: 999px; overflow: hidden; }
.adm-cov__fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--adm-cyan), var(--adm-cyan-dark)); }
.adm-cov__pct { font-size: .82rem; font-weight: 700; color: var(--adm-ink-soft); text-align: right; }
/* ---- Activity feed ---- */
.adm-feed { display: flex; flex-direction: column; }
.adm-feed__item { display: flex; gap: .85rem; padding: .8rem 0; border-bottom: 1px solid var(--adm-border-soft); }
.adm-feed__item:last-child { border-bottom: none; }
.adm-feed__ic { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: grid; place-items: center; font-size: .95rem; }
.adm-feed__txt { font-size: .86rem; color: var(--adm-ink-soft); line-height: 1.45; }
.adm-feed__txt b { color: var(--adm-ink); font-weight: 700; }
.adm-feed__time { font-size: .75rem; color: var(--adm-ink-faint); margin-top: .15rem; }
/* soft icon tints (shared) */
.tint-cyan{background:var(--adm-cyan-050);color:var(--adm-cyan-dark);}
.tint-violet{background:#EEF0FE;color:var(--adm-violet);}
.tint-amber{background:#FEF6E7;color:var(--adm-amber);}
.tint-green{background:#E7F8F1;color:var(--adm-green);}
.tint-red{background:#FEECEC;color:var(--adm-red);}
.tint-blue{background:#E8F1FE;color:var(--adm-blue);}
.adm-2col { display: grid; grid-template-columns: 1.35fr 1fr; gap: 1.2rem; margin-top: 1.6rem; }
/* backdrop for mobile drawer */
.adm-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.5); z-index: 39; }
.adm-backdrop.is-open { display: block; }
/* ---- Responsive ---- */
/* sidebar collapses to a drawer just below 1400px */
@media (max-width: 1399px) {
.adm-sidebar { transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--adm-shadow-lg); }
.adm-sidebar.is-open { transform: translateX(0); }
.adm-main { margin-left: 0; }
.adm-hamburger { display: block; }
}
@media (max-width: 1100px) {
.adm-stats { grid-template-columns: repeat(2, 1fr); }
.adm-modgrid { grid-template-columns: repeat(2, 1fr); }
.adm-2col { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
.adm-modgrid { grid-template-columns: 1fr; }
.adm-user__meta { display: none; }
}
/* ==========================================================================
SHARED COMPONENTS (tables, tabs, forms, badges, tree, chat, toggles ...)
========================================================================== */
/* select */
.adm-select {
width: 100%; font-size: .9rem; color: var(--adm-ink);
padding: .6rem 2.2rem .6rem .85rem; border: 1.5px solid var(--adm-border-field);
border-radius: var(--adm-radius-sm); background: var(--adm-surface);
font-family: inherit; cursor: pointer; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748B'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right .7rem center; background-size: 14px;
}
.adm-select:focus { outline: none; border-color: var(--adm-cyan); box-shadow: 0 0 0 4px rgba(0,213,229,.14); }
.adm-input--sm, .adm-select--sm { padding-top: .5rem; padding-bottom: .5rem; font-size: .86rem; }
textarea.adm-input { resize: vertical; min-height: 90px; line-height: 1.5; }
/* toolbar buttons (page actions) */
.adm-toolbar { display: flex; gap: .55rem; flex-wrap: wrap; }
/* tabs — boxed, high-visibility */
.adm-tabs {
display: inline-flex; gap: .3rem; margin-bottom: 1.5rem; flex-wrap: wrap;
background: #E8EDF3; padding: .35rem; border-radius: 13px; border: 1px solid var(--adm-border);
}
.adm-tab {
padding: .68rem 1.25rem; font-size: .96rem; font-weight: 700; color: var(--adm-ink-muted);
background: none; border: none; border-radius: 10px; cursor: pointer;
display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; transition: all .14s;
}
.adm-tab:hover { color: var(--adm-ink); background: rgba(255,255,255,.55); }
.adm-tab.is-active { color: var(--adm-cyan-dark); background: #fff; box-shadow: var(--adm-shadow-sm); }
.adm-tab .cnt { background: var(--adm-surface-3); color: var(--adm-ink-muted); font-size: .74rem; font-weight: 800; padding: .08rem .45rem; border-radius: 999px; }
.adm-tab.is-active .cnt { background: var(--adm-cyan); color: #06323a; }
/* segmented pill tabs (subject switch) */
.adm-seg { display: inline-flex; background: #DCE2E7; border-radius: 999px; padding: .28rem; gap: .15rem; flex-wrap: wrap; }
.adm-seg__btn {
padding: .45rem .95rem; font-size: .85rem; font-weight: 600; color: var(--adm-ink-muted);
background: none; border: none; border-radius: 999px; cursor: pointer; display:inline-flex; align-items:center; gap:.4rem;
}
.adm-seg__btn.is-active { background: #fff; color: var(--adm-ink); box-shadow: var(--adm-shadow-sm); }
/* table */
.adm-tablewrap { overflow-x: auto; }
.adm-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.adm-table th {
text-align: left; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: var(--adm-ink-muted); padding: .85rem 1rem; border-bottom: 1px solid var(--adm-border); white-space: nowrap;
}
.adm-table td { padding: .85rem 1rem; border-bottom: 1px solid var(--adm-border-soft); color: var(--adm-ink-soft); vertical-align: middle; }
.adm-table tbody tr:hover { background: var(--adm-surface-2); }
.adm-table tbody tr:last-child td { border-bottom: none; }
.adm-table .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .7rem; color: #6C7C93; }
.adm-table .qtext { color: var(--adm-ink); font-weight: 500; max-width: 420px; }
.adm-table .sub { font-size: .76rem; color: #7185A2; margin-top: .15rem; }
/* row action icons */
.adm-rowact { display: inline-flex; gap: .35rem; }
.adm-rowact a, .adm-rowact button {
width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--adm-border);
background: var(--adm-surface); color: var(--adm-ink-muted); display: grid; place-items: center;
cursor: pointer; font-size: .9rem; text-decoration: none; transition: all .12s;
}
.adm-rowact a:hover { border-color: var(--adm-cyan); color: var(--adm-cyan-dark); }
.adm-rowact .del:hover { border-color: var(--adm-red); color: var(--adm-red); }
/* badges / pills */
.adm-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 700; padding: .22rem .55rem; border-radius: 999px; white-space: nowrap; }
.badge-easy { background: #E7F8F1; color: #0a8f5f; }
.badge-medium { background: #FEF6E7; color: #b57608; }
.badge-hard { background: #FEECEC; color: #d13030; }
.badge-type { background: var(--adm-surface-3); color: var(--adm-ink-soft); font-weight: 600; }
.badge-live { background: #E7F8F1; color: #0a8f5f; }
.badge-draft { background: var(--adm-surface-3); color: var(--adm-ink-muted); }
.badge-active { background: var(--adm-cyan-050); color: var(--adm-cyan-dark); }
.badge-expired{ background: #FEECEC; color: #d13030; }
/* pagination */
.adm-pager { display: flex; align-items: center; justify-content: space-between; padding-top: 1.1rem; margin-top: .3rem; border-top: 1px solid var(--adm-border-soft); flex-wrap: wrap; gap: .6rem; }
.adm-pager__info { font-size: .82rem; color: var(--adm-ink-muted); }
.adm-pager__btns { display: flex; gap: .3rem; }
.adm-pager__btns button {
min-width: 34px; height: 34px; padding: 0 .6rem; border: 1px solid var(--adm-border); background: #fff;
border-radius: 8px; font-size: .84rem; font-weight: 600; color: var(--adm-ink-soft); cursor: pointer;
}
.adm-pager__btns button.is-active { background: var(--adm-cyan); border-color: var(--adm-cyan); color: #06323a; }
.adm-pager__btns button:disabled { opacity: .45; cursor: default; }
/* filter bar */
.adm-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.adm-filters .adm-field { margin: 0; }
.adm-filters .adm-field > label { font-size: .76rem; }
/* grade / entity cards */
.adm-gridcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.adm-entity {
background: var(--adm-surface); border: 1px solid var(--adm-border); border-radius: var(--adm-radius);
box-shadow: var(--adm-shadow-sm); overflow: hidden; display: flex; flex-direction: column;
}
.adm-entity__top { padding: 1.25rem 1.3rem; display: flex; align-items: flex-start; gap: 1rem; }
.adm-entity__ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; }
.adm-entity h3 { font-size: 1.1rem; font-weight: 800; margin: 0 0 .15rem; }
.adm-entity__meta { font-size: .8rem; color: var(--adm-ink-muted); }
.adm-entity__stats { display: flex; border-top: 1px solid var(--adm-border-soft); }
.adm-entity__stat { flex: 1; padding: .8rem; text-align: center; border-right: 1px solid #E1E1E1; }
.adm-entity__stat:last-child { border-right: none; }
.adm-entity__stat b { display: block; font-size: 1.1rem; font-weight: 800; color: var(--adm-ink); }
.adm-entity__stat span { font-size: .72rem; color: var(--adm-ink-muted); }
.adm-entity__foot { padding: .9rem 1.3rem; border-top: 1px solid var(--adm-border-soft); display: flex; gap: .5rem; }
.adm-entity--new {
border-style: dashed; border-color: var(--adm-border); align-items: center; justify-content: center;
min-height: 210px; cursor: pointer; color: var(--adm-ink-muted); text-align: center; padding: 1.5rem;
transition: border-color .15s, color .15s, background .15s;
}
.adm-entity--new:hover { border-color: var(--adm-cyan); color: var(--adm-cyan-dark); background: var(--adm-cyan-050); }
.adm-entity--new i { font-size: 2rem; display: block; margin-bottom: .5rem; }
/* content tree */
.adm-tree { display: flex; flex-direction: column; }
.adm-tree__node { border-radius: 10px; }
.adm-tree__row {
display: flex; align-items: center; gap: .6rem; padding: .4rem .7rem; border-radius: 8px;
transition: background .12s;
}
.adm-tree__row:hover { background: var(--adm-surface-2); }
.adm-tree__row.lvl-1 { padding-left: 1.6rem; }
.adm-tree__row.lvl-2 { padding-left: 3.1rem; }
.adm-tree__row.lvl-3 { padding-left: 4.3rem; }
/* level colour coding */
.adm-tree__row { margin-bottom: .3rem; border: 1px solid transparent; }
.adm-tree__row--part { background: #E7E4FB; border-color: #D3D0E7; }
.adm-tree__row--part:hover { background: #EAE4FD; }
.adm-tree__row--part .adm-tree__name { color: #5B45C7; }
.adm-tree__row--chapter { background: #E9FAFC; border-color: #CFF3F7; margin-left: .9rem; }
.adm-tree__row--chapter:hover { background: #DCF6F9; }
.adm-tree__row--chapter .adm-tree__name { color: #0B7C8C; }
.adm-tree__row--unit { background: #EEF4FF; border-color: #DCE8FB; margin-left: 1.8rem; }
.adm-tree__row--unit:hover { background: #E4EEFE; }
.adm-tree__row--unit .adm-tree__name { color: #2B5BB5; }
.adm-tree__row--part .adm-tree__count { background: #E3DCFB; color: #5B45C7; }
.adm-tree__row--chapter .adm-tree__count { background: #CFF3F7; color: #0B7C8C; }
.adm-tree__row--unit .adm-tree__count { background: #DCE8FB; color: #2B5BB5; }
.adm-tree__caret { color: var(--adm-ink-faint); font-size: .8rem; width: 14px; cursor: pointer; }
.adm-tree__ic { font-size: 1rem; }
.adm-tree__name { font-weight: 600; font-size: .85rem; color: var(--adm-ink); }
.adm-tree__sub { font-size: .76rem; color: #495463; margin-left: .3rem; }
.adm-tree__count { margin-left: auto; background: var(--adm-surface-3); color: var(--adm-ink-muted); font-size: .74rem; font-weight: 700; padding: .12rem .5rem; border-radius: 999px; }
.adm-tree__acts { display: inline-flex; gap: .25rem; margin-left: .6rem; opacity: 0; transition: opacity .12s; }
.adm-tree__row:hover .adm-tree__acts { opacity: 1; }
.adm-tree__acts a { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: var(--adm-ink-muted); font-size: .82rem; }
.adm-tree__acts a:hover { background: #fff; color: var(--adm-cyan-dark); box-shadow: var(--adm-shadow-sm); }
/* two-column form layout */
.adm-split { display: grid; grid-template-columns: 340px 1fr; gap: 1.2rem; align-items: start; }
.adm-split--wide { grid-template-columns: 380px 1fr; }
/* rich text editor mock */
.adm-editor { border: 1.5px solid var(--adm-border-field); border-radius: var(--adm-radius-sm); overflow: hidden; }
.adm-editor__bar { display: flex; gap: .1rem; padding: .4rem .5rem; background: var(--adm-surface-2); border-bottom: 1px solid var(--adm-border); flex-wrap: wrap; }
.adm-editor__bar button { width: 30px; height: 30px; border: none; background: none; border-radius: 6px; color: var(--adm-ink-soft); cursor: pointer; font-size: .9rem; }
.adm-editor__bar button:hover { background: #fff; box-shadow: var(--adm-shadow-sm); }
.adm-editor__area { padding: .8rem .95rem; min-height: 90px; font-size: .92rem; color: var(--adm-ink); outline: none; line-height: 1.55; }
.adm-editor__area:empty:before { content: attr(data-ph); color: var(--adm-ink-faint); }
/* section block inside forms */
.adm-block { border: 1px solid var(--adm-border); border-radius: var(--adm-radius); margin-bottom: 1.1rem; overflow: hidden; }
.adm-block__head { padding: .85rem 1.1rem; background: var(--adm-surface-2); border-bottom: 1px solid var(--adm-border-soft); display: flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .92rem; }
.adm-block__head i { color: var(--adm-cyan-dark); }
.adm-block__body { padding: 1.1rem; }
/* choice / option row (mcq) */
.adm-opt { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .7rem; }
/* A. B. C. letters on option rows — CSS counter so add/delete re-letters automatically */
.adm-optlist { counter-reset: optltr; }
.adm-optlist > .adm-opt { counter-increment: optltr; }
.adm-optlist > .adm-opt::before {
content: counter(optltr, upper-alpha) ".";
flex: 0 0 18px;
margin-top: .95rem;
font-size: .85rem;
font-weight: 700;
color: var(--adm-ink-muted, #94A3B8);
text-align: right;
user-select: none;
}
.adm-opt__mark { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 50%; border: 2px solid var(--adm-border); display: grid; place-items: center; cursor: pointer; margin-top: .35rem; color: transparent; }
.adm-opt__mark.is-correct { background: var(--adm-green); border-color: var(--adm-green); color: #fff; }
.adm-opt__del { border: none; background: none; color: var(--adm-red); cursor: pointer; margin-top: .4rem; font-size: 1rem; }
/* type picker cards */
.adm-typegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.adm-type {
background: var(--adm-surface); border: 1.5px solid var(--adm-border); border-radius: var(--adm-radius);
padding: 1.3rem; text-decoration: none; color: inherit; transition: all .14s; display: block; position: relative;
}
.adm-type:hover { border-color: var(--adm-cyan); box-shadow: var(--adm-shadow); transform: translateY(-2px); }
.adm-type__ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.25rem; margin-bottom: .85rem; }
.adm-type h4 { font-size: .98rem; font-weight: 700; margin: 0 0 .3rem; }
.adm-type p { font-size: .82rem; color: var(--adm-ink-muted); margin: 0; line-height: 1.45; }
.adm-type__tag { position: absolute; top: 1rem; right: 1rem; font-size: .68rem; font-weight: 700; padding: .12rem .45rem; border-radius: 999px; }
/* toggle switch */
.adm-switch { position: relative; display: inline-block; width: 44px; height: 25px; flex: 0 0 44px; }
.adm-switch input { opacity: 0; width: 0; height: 0; }
.adm-switch__slider { position: absolute; inset: 0; background: var(--adm-border); border-radius: 999px; cursor: pointer; transition: .2s; }
.adm-switch__slider:before { content: ""; position: absolute; height: 19px; width: 19px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.adm-switch input:checked + .adm-switch__slider { background: var(--adm-cyan-dark); }
.adm-switch input:checked + .adm-switch__slider:before { transform: translateX(19px); }
/* setting row */
.adm-setrow { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--adm-border-soft); }
.adm-setrow:last-child { border-bottom: none; }
.adm-setrow__txt { flex: 1; }
.adm-setrow__txt h4 { font-size: .92rem; font-weight: 700; margin: 0 0 .2rem; }
.adm-setrow__txt p { font-size: .82rem; color: var(--adm-ink-muted); margin: 0; line-height: 1.45; }
/* chat / support */
.adm-chat { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - 68px - 4.4rem); min-height: 520px; }
.adm-chat__list { border-right: 1px solid var(--adm-border); overflow-y: auto; }
.adm-chat__search { padding: .9rem 1rem; border-bottom: 1px solid var(--adm-border-soft); }
.adm-convo { display: flex; gap: .75rem; padding: .9rem 1rem; border-bottom: 1px solid var(--adm-border-soft); cursor: pointer; }
.adm-convo:hover { background: var(--adm-surface-2); }
.adm-convo.is-active { background: var(--adm-cyan-050); box-shadow: inset 3px 0 0 var(--adm-cyan); }
.adm-convo__av { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: .85rem; }
.adm-convo__top { display: flex; justify-content: space-between; align-items: baseline; }
.adm-convo__name { font-weight: 700; font-size: .88rem; color: var(--adm-ink); }
.adm-convo__time { font-size: .72rem; color: var(--adm-ink-faint); }
.adm-convo__msg { font-size: .8rem; color: var(--adm-ink-muted); margin-top: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.adm-convo__badge { background: var(--adm-cyan); color: #06323a; font-size: .68rem; font-weight: 800; padding: .05rem .4rem; border-radius: 999px; }
.adm-thread { display: flex; flex-direction: column; }
.adm-thread__head { padding: 1rem 1.3rem; border-bottom: 1px solid var(--adm-border); display: flex; align-items: center; gap: .75rem; }
.adm-thread__body { flex: 1; overflow-y: auto; padding: 1.4rem; background: var(--adm-surface-2); display: flex; flex-direction: column; gap: .9rem; }
.adm-msg { max-width: 70%; }
.adm-msg__bubble { padding: .7rem .95rem; border-radius: 14px; font-size: .88rem; line-height: 1.5; }
.adm-msg--in .adm-msg__bubble { background: #fff; border: 1px solid var(--adm-border); border-bottom-left-radius: 4px; color: var(--adm-ink); }
.adm-msg--out { align-self: flex-end; }
.adm-msg--out .adm-msg__bubble { background: linear-gradient(180deg, var(--adm-cyan), var(--adm-cyan-dark)); color: #fff; border-bottom-right-radius: 4px; }
.adm-msg__time { font-size: .7rem; color: var(--adm-ink-faint); margin-top: .25rem; padding: 0 .3rem; }
.adm-msg--out .adm-msg__time { text-align: right; }
.adm-thread__foot { padding: .9rem 1.3rem; border-top: 1px solid var(--adm-border); display: flex; gap: .6rem; align-items: center; }
/* permissions matrix */
.adm-matrix { width: 100%; border-collapse: collapse; font-size: .86rem; }
.adm-matrix th, .adm-matrix td { padding: .7rem 1rem; border-bottom: 1px solid var(--adm-border-soft); text-align: center; }
.adm-matrix th:first-child, .adm-matrix td:first-child { text-align: left; font-weight: 600; color: var(--adm-ink); }
.adm-matrix thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--adm-ink-muted); }
/* empty state */
.adm-empty { text-align: center; padding: 3rem 1.5rem; color: var(--adm-ink-muted); }
.adm-empty i { font-size: 2.4rem; color: var(--adm-ink-faint); display: block; margin-bottom: .7rem; }
.adm-empty h4 { font-size: 1rem; font-weight: 700; color: var(--adm-ink-soft); margin: 0 0 .3rem; }
.adm-empty p { font-size: .86rem; margin: 0 auto 1rem; max-width: 24rem; }
/* misc helpers */
.adm-row { display: flex; gap: .9rem; }
.adm-row > * { flex: 1; }
.mb-0{margin-bottom:0}.mt-1{margin-top:.6rem}.mt-2{margin-top:1.1rem}
.adm-hint { font-size: .78rem; color: var(--adm-ink-faint); margin-top: .35rem; }
.adm-avatar-sm { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: .8rem; flex: 0 0 34px; }
@media (max-width: 1100px) {
.adm-filters { grid-template-columns: repeat(2, 1fr); }
.adm-gridcards { grid-template-columns: repeat(2, 1fr); }
.adm-typegrid { grid-template-columns: repeat(2, 1fr); }
.adm-split { grid-template-columns: 1fr; }
.adm-chat { grid-template-columns: 1fr; }
.adm-chat__list { display: none; }
}
@media (max-width: 780px) {
.adm-filters, .adm-gridcards, .adm-typegrid { grid-template-columns: 1fr; }
}
/* ==========================================================================
MODAL / POPUP system + add-question flow + flagged queue
========================================================================== */
.adm-modal {
display: none; position: fixed; inset: 0; z-index: 60;
background: rgba(15,23,42,.55); backdrop-filter: blur(3px);
align-items: flex-start; justify-content: center; padding: 4vh 1.2rem; overflow-y: auto;
}
.adm-modal.is-open { display: flex; }
.adm-modal__box {
background: var(--adm-surface); border-radius: var(--adm-radius-lg);
box-shadow: var(--adm-shadow-lg); width: 100%; max-width: 560px; margin: auto;
animation: admPop .16s ease;
}
.adm-modal__box--lg { max-width: 900px; }
.adm-modal__box--xl { max-width: 1080px; }
@keyframes admPop { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.adm-modal__head {
display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--adm-border-soft);
}
.adm-modal__head h3 { font-size: 1.2rem; font-weight: 800; margin: 0; }
.adm-modal__head p { margin: .25rem 0 0; font-size: .9rem; color: var(--adm-ink-muted); }
.adm-modal__x { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--adm-border); background: #fff; color: var(--adm-ink-soft); cursor: pointer; display: grid; place-items: center; font-size: 1rem; flex: 0 0 36px; }
.adm-modal__x:hover { background: var(--adm-surface-2); }
.adm-modal__body { padding: 1.5rem; }
.adm-modal__foot { padding: 1.1rem 1.5rem; border-top: 1px solid var(--adm-border-soft); display: flex; justify-content: flex-end; gap: .6rem; background: var(--adm-surface-2); border-radius: 0 0 var(--adm-radius-lg) var(--adm-radius-lg); }
/* step indicator for add-question flow */
.adm-steps { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.4rem; }
.adm-step { display: flex; align-items: center; gap: .5rem; font-size: .86rem; font-weight: 700; color: var(--adm-ink-faint); }
.adm-step__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: .82rem; background: var(--adm-surface-3); color: var(--adm-ink-muted); }
.adm-step.is-active { color: var(--adm-ink); }
.adm-step.is-active .adm-step__n { background: var(--adm-cyan); color: #06323a; }
.adm-step.is-done .adm-step__n { background: var(--adm-green); color: #fff; }
.adm-step__line { flex: 1; height: 2px; background: var(--adm-border); min-width: 20px; }
/* cascading category picker */
.adm-cascade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; }
/* template option cards (choose how the question looks) */
.adm-tpls { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.adm-tpl {
border: 1.5px solid var(--adm-border); border-radius: var(--adm-radius); padding: 1rem;
cursor: pointer; transition: all .14s; background: var(--adm-surface); text-align: left;
}
.adm-tpl:hover, .adm-tpl.is-sel { border-color: var(--adm-cyan); box-shadow: var(--adm-shadow); }
.adm-tpl.is-sel { background: var(--adm-cyan-050); }
.adm-tpl__name { font-weight: 700; font-size: .95rem; margin-bottom: .2rem; display: flex; align-items: center; gap: .45rem; }
.adm-tpl__name i { color: var(--adm-cyan-dark); }
.adm-tpl__desc { font-size: .83rem; color: var(--adm-ink-muted); line-height: 1.45; margin-bottom: .7rem; }
.adm-tpl__preview { border: 1px dashed var(--adm-border); border-radius: 9px; padding: .6rem .7rem; font-size: .8rem; color: var(--adm-ink-soft); background: var(--adm-surface-2); }
.adm-tpl__preview b { color: var(--adm-ink); }
.adm-tpl__pill { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; }
.adm-tpl__opt { font-size: .76rem; padding: .18rem .5rem; border-radius: 6px; background: #fff; border: 1px solid var(--adm-border); }
.adm-tpl__opt--ok { border-color: var(--adm-green); color: #0a8f5f; background: #f1fbf6; }
/* flagged card */
.adm-flag {
border: 1px solid var(--adm-border); border-left: 4px solid var(--adm-amber); border-radius: var(--adm-radius);
padding: 1.1rem 1.25rem; margin-bottom: 1rem; background: var(--adm-surface); box-shadow: var(--adm-shadow-sm);
}
.adm-flag--urgent { border-left-color: var(--adm-red); }
.adm-flag__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.adm-flag__q { font-weight: 600; color: var(--adm-ink); margin-bottom: .3rem; }
.adm-flag__meta { font-size: .8rem; color: var(--adm-ink-faint); }
.adm-flag__reason { margin-top: .8rem; background: #FEF6E7; border: 1px solid #FBE3B0; border-radius: 10px; padding: .7rem .9rem; font-size: .86rem; color: #8a5a06; }
.adm-flag__reason i { margin-right: .35rem; }
.adm-flag__acts { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
/* ==========================================================================
ADD QUESTION — full modal (category + type rail + preview) [redesign]
========================================================================== */
.adm-modal__box--full { max-width: 1180px; }
.adm-addq__head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.7rem; border-bottom: 1px solid var(--adm-border-soft); }
.adm-addq__title { font-size: 1.5rem; font-weight: 700; margin: 0; color: #1157B1; letter-spacing: -.01em; }
.adm-addq__body { padding: 1.6rem 1.7rem 1.9rem; }
/* category card */
.adm-addq__cat { background: #F0F1F2; border: 1px solid var(--adm-border); border-radius: var(--adm-radius); padding: 1.3rem 1.4rem; margin-bottom: 1.7rem; }
.adm-addq__cat-head { display: flex; align-items: center; gap: .6rem; font-size: 1.15rem; font-weight: 800; margin-bottom: 1.1rem; }
.adm-addq__cat-head i { color: var(--adm-ink-soft); }
.adm-addq__cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.adm-req { color: var(--adm-red); margin-left: 2px; }
/* section heading */
.adm-addq__sec { font-size: 1.25rem; font-weight: 700; color: var(--adm-ink-soft); margin: 0 0 1rem; }
/* picker card: rail + preview */
.adm-addq__picker { background: var(--adm-surface-2); border: 1px solid var(--adm-border); border-radius: var(--adm-radius); padding: 1.2rem; display: grid; grid-template-columns: 230px 1fr; gap: 1.2rem; }
.adm-addq__rail { display: flex; flex-direction: column; gap: .55rem; }
.adm-railbtn {
display: flex; align-items: center; gap: .7rem; width: 100%; text-align: left;
padding: .6rem .75rem; border-radius: 8px; border: 1px solid #C4CFDF;
background: #fff; color: var(--adm-ink-soft); font-weight: 600; font-size: .85rem; cursor: pointer;
font-family: inherit; transition: all .13s;
}
.adm-railbtn i { font-size: 1.05rem; width: 20px; text-align: center; }
.adm-railbtn:hover { border-color: var(--adm-cyan); color: var(--adm-ink); }
.adm-railbtn.is-active { background: linear-gradient(135deg, #CFF9FC, #A7F0F5); color: var(--adm-cyan-dark); border-color: transparent; box-shadow: var(--adm-shadow-sm); }
.adm-railbtn--ai { background: linear-gradient(135deg, #FF7AC4, #F0568F); color: #fff; border-color: transparent; }
.adm-railbtn--ai:hover { color: #fff; filter: brightness(1.03); }
.adm-railbtn--ai.is-active { background: linear-gradient(135deg, #FF7AC4, #F0568F); color: #fff; }
.adm-railbtn--sim.is-active { background: linear-gradient(135deg, #7DEBD6, #37D6C0); color: #0a6b5c; }
/* preview panel */
.adm-addq__preview { background: #fff; border: 1px solid var(--adm-border); border-radius: var(--adm-radius); padding: 1.5rem 1.6rem; min-height: 420px; display: flex; flex-direction: column; }
.adm-pv__head { display: flex; align-items: center; gap: .55rem; color: var(--adm-cyan-dark); font-weight: 700; font-size: 0.9rem; margin-bottom: 1.1rem; }
.adm-pv__head .pill { background: var(--adm-cyan-050); color: var(--adm-cyan-dark); font-size: .74rem; font-weight: 700; padding: .18rem .55rem; border-radius: 999px; }
.adm-pv__head .nav { margin-left: auto; display: inline-flex; gap: .3rem; }
.adm-pv__head .nav button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--adm-border); background: #fff; cursor: pointer; color: var(--adm-ink-soft); }
.adm-pv__label { font-weight: 700; color: var(--adm-ink); margin-bottom: .3rem; }
.adm-pv__q { font-size: 1.2rem; font-weight: 700; color: var(--adm-ink); margin-bottom: 1.2rem; }
.adm-pv__opts { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.adm-pv__opt { border: 1.5px dashed #AFB7C0; border-radius: 10px; padding: .85rem 1rem; display: flex; align-items: center; gap: .7rem; font-size: .95rem; color: var(--adm-ink-soft); }
.adm-pv__opt .r { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #BDC4CB; flex: 0 0 18px; }
.adm-pv__opt .l { font-weight: 800; color: var(--adm-cyan-dark); }
.adm-pv__opt.ok { border-style: solid; border-color: var(--adm-green); background: #f2fbf7; }
.adm-pv__opt.ok .r { border-color: var(--adm-green); background: var(--adm-green); position: relative; }
.adm-pv__foot { margin-top: auto; padding-top: 1.3rem; display: flex; justify-content: flex-end; gap: .6rem; }
.adm-btn--pill { border-radius: 999px; }
.adm-pv__hint { font-size: .88rem; color: var(--adm-ink-muted); line-height: 1.55; }
@media (max-width: 900px) {
.adm-addq__cats { grid-template-columns: 1fr 1fr; }
.adm-addq__picker { grid-template-columns: 1fr; }
.adm-addq__rail { flex-direction: row; overflow-x: auto; }
.adm-railbtn { white-space: nowrap; }
.adm-pv__opts { grid-template-columns: 1fr; }
}
/* ===== Add-Question popup: template chooser + editors (added) ===== */
.adm-tpl__tag{ font-size:.68rem; font-weight:600; color:var(--adm-ink-faint); background:var(--adm-surface-2,#F1F5F9);
border:1px solid var(--adm-border); border-radius:100px; padding:.08rem .5rem; margin-left:.4rem; }
.adm-tpl__preview .mono, .adm-editform .mono{ font-family:'JetBrains Mono',ui-monospace,monospace; }
.adm-tpl__preview .frac{ display:inline-flex; flex-direction:column; text-align:center; vertical-align:middle; line-height:1; }
.adm-tpl__preview .frac i{ font-style:normal; padding:0 .2rem; }
.adm-tpl__preview .frac i:first-child{ border-bottom:1.5px solid currentColor; }
.adm-tpl__preview .ph{ display:inline-block; width:60px; height:16px; border:1.5px dashed var(--adm-cyan); border-radius:5px; vertical-align:middle; }
.adm-tpl__preview .ph.sm{ width:34px; }
.adm-pv__opt.sm{ font-size:.82rem; padding:.35rem .6rem; display:inline-block; margin:.15rem .2rem 0 0; }
.lbl2{ font-weight:700; font-size:.88rem; color:var(--adm-ink-soft); margin:1rem 0 .55rem; }
.adm-editform .adm-row{ gap:.7rem; }
.adm-hint{ font-size:.82rem; color:var(--adm-ink-muted); background:var(--adm-surface-2,#F8FAFC);
border:1px dashed var(--adm-border); border-radius:8px; padding:.5rem .7rem; }
/* image options grid */
.adm-optimg{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.adm-optimg__cell{ border:1.5px solid var(--adm-border-field); border-radius:10px; overflow:hidden; }
.adm-optimg__cell.is-correct{ border-color:var(--adm-green); box-shadow:0 0 0 2px rgba(16,185,129,.15); }
.adm-optimg__up{ display:grid; place-items:center; gap:.2rem; min-height:74px; font-size:.8rem; font-weight:700;
color:var(--adm-ink-faint); cursor:pointer; }
.adm-optimg__cell.is-correct .adm-optimg__up{ color:var(--adm-green); }
/* true/false rows */
.adm-tf-rows{ display:flex; flex-direction:column; gap:.6rem; }
.adm-tf-row{ display:flex; gap:.6rem; align-items:center; }
.adm-tf-row .adm-input{ flex:1; }
.adm-seg--sm .adm-seg__btn{ padding:.35rem .7rem; font-size:.8rem; }
/* matching + find-word rows */
.adm-match, .adm-fw{ display:flex; flex-direction:column; gap:.55rem; }
.adm-match__row{ display:flex; gap:.55rem; align-items:center; }
.adm-match__row .bi{ color:var(--adm-ink-faint); flex:0 0 auto; }
.adm-fw__row{ display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
/* upload box + sub-questions */
.adm-uploadbox{ border:1.5px dashed var(--adm-border); border-radius:10px; min-height:80px; display:grid;
place-items:center; gap:.3rem; color:var(--adm-ink-faint); cursor:pointer; font-size:.9rem; }
.adm-subq{ border:1px solid var(--adm-border); border-radius:10px; padding:.7rem .8rem; margin-bottom:.6rem; background:var(--adm-surface); }
.adm-subq__head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.5rem; font-weight:700; color:var(--adm-ink-soft); }
.adm-subq__head span:first-child{ color:var(--adm-cyan-dark); }
.adm-subq__head .adm-opt__del{ margin-left:auto; }
.adm-editform .adm-field{ margin-bottom:.9rem; }
/* ===== template previews: faithful mini-renders of the student question ===== */
.adm-tpl__preview{ background:#fff; }
.tpv{ font-size:.78rem; color:#334155; line-height:1.45; }
.tpv__stem{ font-weight:700; color:#0F172A; font-size:.8rem; margin-bottom:.45rem; }
.tpv__box{ display:inline-block; min-width:42px; height:24px; border:1.5px dashed #A7AFBA; border-radius:6px; background:#f6f6f6; vertical-align:middle; }
.tpv__box.sm{ min-width:26px; height:22px; }
.tpv__ans{ display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; }
.tpv__ans b{ font-size:.78rem; color:#334155; }
.tpv__unit{ font-weight:700; }
.tpv__sum{ display:inline-block; font-family:'JetBrains Mono',ui-monospace,monospace; font-weight:700; font-size:.95rem; text-align:right; color:#0F172A; }
.tpv__sum .op{ color:#0891B2; margin-right:.2rem; }
.tpv__rule{ border-bottom:2px solid #0F172A; margin:.12rem 0 .1rem; }
.tpv__frac{ display:inline-flex; flex-direction:column; text-align:center; vertical-align:middle; font-weight:700; margin:0 .1rem; }
.tpv__frac span:first-child{ border-bottom:1.5px solid currentColor; padding:0 .25rem .02rem; }
.tpv__frac span:last-child{ padding:.02rem .25rem 0; }
.tpv__opts{ display:grid; grid-template-columns:1fr 1fr; gap:.3rem; margin-top:.3rem; }
.tpv__opt{ display:flex; align-items:center; gap:.3rem; border:1px dashed #A7AFBA; border-radius:7px; padding:.28rem .45rem; font-size:.72rem; color:#334155; }
.tpv__opt .r{ width:12px; height:12px; border-radius:50%; border:1.5px solid #A7AFBA; flex:0 0 auto; }
.tpv__opt.ok{ border-style:solid; border-color:#00D5E5; background:#ECFEFF; }
.tpv__opt.ok .r{ border-color:#00D5E5; background:#00D5E5; }
.tpv__opt .k{ font-weight:800; color:#0891B2; }
.tpv__tf{ display:inline-flex; gap:.3rem; }
.tpv__tf span{ border:1px solid #E2E8F0; border-radius:7px; padding:.2rem .55rem; font-size:.7rem; font-weight:700; background:#F1F5F9; color:#64748B; }
.tpv__tf span.ok{ border-color:#00D5E5; background:#ECFEFF; color:#0891B2; }
.tpv__tick{ display:flex; align-items:center; gap:.35rem; font-size:.73rem; margin-top:.2rem; }
.tpv__tick i{ width:14px; height:14px; border:1.5px solid #838991; border-radius:4px; display:inline-block; flex:0 0 auto; }
.tpv__tick.on i{ background:#00D5E5; border-color:#00D5E5; }
.tpv__gap{ display:inline-block; min-width:42px; border-bottom:1.5px dashed #8A919C; vertical-align:middle; }
.tpv__chip{ display:inline-block; border:1.5px solid #00D5E5; color:#0891B2; border-radius:100px; padding:.02rem .4rem; font-size:.66rem; font-weight:700; margin-right:.2rem; }
.tpv__hint{ color:#0891B2; font-style:italic; font-weight:700; }
.tpv__sel{ display:inline-flex; align-items:center; justify-content:space-between; min-width:84px; gap:.3rem;
border:1.5px solid #E2E8F0; border-radius:7px; padding:.2rem .45rem; font-size:.7rem; font-weight:600; color:#64748B; vertical-align:middle; }
.tpv__sel::after{ content:'⌄'; }
.tpv__sel.on{ border-color:#00D5E5; color:#0891B2; }
.tpv__match{ display:flex; flex-direction:column; gap:.32rem; }
.tpv__match .row{ display:flex; align-items:center; gap:.35rem; font-size:.72rem; }
.tpv__match .row b{ color:#0F172A; }
.tpv__word{ display:inline-flex; gap:.18rem; align-items:flex-end; }
.tpv__word b{ font-size:.82rem; color:#0F172A; }
.tpv__word i{ width:11px; border-bottom:1.5px solid #A7AFBA; height:13px; display:inline-block; font-style:normal; }
.tpv__img{ border:1.5px dashed #CBD5E1; border-radius:7px; min-height:40px; display:grid; place-items:center; color:#94A3B8; font-size:1rem; }
.tpv__money{ display:flex; gap:.28rem; flex-wrap:wrap; }
.tpv__note,.tpv__coin{ display:flex; flex-direction:column; align-items:center; gap:.18rem; }
.tpv__note b,.tpv__coin b{ font-size:.62rem; font-weight:800; color:#334155; }
.tpv__note span{ width:36px; height:20px; border:1px solid #CBD5E1; border-radius:3px; background:linear-gradient(135deg,#EEF6F0,#E7EEF5); }
.tpv__coin span{ width:20px; height:20px; border-radius:50%; border:1px solid #CBD5E1; background:radial-gradient(#F1F5F9,#E2E8F0); }
.tpv__money i{ width:11px; height:11px; border:1.4px solid #838991; border-radius:3px; }
.tpv__passage{ background:#F8FAFC; border:1px solid #E2E8F0; border-radius:7px; padding:.4rem .5rem; font-size:.68rem; color:#64748B; margin-bottom:.35rem; }
.tpv__sub{ font-size:.7rem; color:#334155; }
.tpv__sub b{ color:#0891B2; }
/* ===== question bank: drafts, dates, history timeline ===== */
.adm-src{ display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:700; padding:.18rem .5rem; border-radius:100px; white-space:nowrap; }
.adm-src--ai{ color:#7C3AED; background:#F3E8FF; }
.adm-src--human{ color:#0891B2; background:#ECFEFF; }
.adm-src--import{ color:#B45309; background:#FEF3C7; }
.adm-datecell{ white-space:nowrap; line-height:1.3; }
.adm-datecell .c{ color:var(--adm-ink); font-weight:600; font-size:.82rem; }
.adm-datecell .e{ color:var(--adm-ink-faint); font-size:.74rem; display:block; }
.badge-draft{ color:#B45309; background:#FEF3C7; }
.adm-timeline{ position:relative; padding-left:1.7rem; margin:.4rem 0 .2rem; }
.adm-timeline::before{ content:''; position:absolute; left:.45rem; top:.4rem; bottom:.4rem; width:2px; background:var(--adm-border); }
.adm-tl{ position:relative; padding-bottom:1.25rem; }
.adm-tl:last-child{ padding-bottom:0; }
.adm-tl__dot{ position:absolute; left:-1.4rem; top:.1rem; width:14px; height:14px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1.5px var(--adm-border); }
.adm-tl__dot--create{ background:var(--adm-cyan); }
.adm-tl__dot--edit{ background:var(--adm-amber); }
.adm-tl__dot--draft{ background:var(--adm-ink-faint); }
.adm-tl__dot--valid{ background:var(--adm-green); box-shadow:0 0 0 1.5px var(--adm-green); }
.adm-tl__title{ font-weight:700; font-size:.9rem; color:var(--adm-ink); }
.adm-tl__meta{ font-size:.8rem; color:var(--adm-ink-muted); margin-top:.1rem; }
.adm-tl__meta b{ color:var(--adm-ink-soft); font-weight:600; }
/* ============================================================
Uniform form validation (shared across ALL admin forms)
============================================================ */
.adm-field--error > label { color: var(--adm-red); }
.adm-field--error .adm-input,
.adm-field--error .adm-select { border-color: var(--adm-red); box-shadow: 0 0 0 3px rgba(249,62,62,.12); }
.adm-field__err {
display: none;
color: var(--adm-red);
font-size: .78rem;
margin-top: .35rem;
}
.adm-field--error .adm-field__err { display: block; }
/* ── Field info tooltips (reusable: ) ── */
.adm-info{display:inline-block;margin-left:4px;font-size:.85rem;color:var(--adm-ink-faint,#94a3b8);cursor:help;position:relative;vertical-align:middle}
.adm-info:hover{color:var(--adm-brand,#00D5E5)}
.adm-info::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:-6px;width:220px;background:#0F172A;color:#fff;padding:.55rem .65rem;border-radius:8px;font-size:.75rem;line-height:1.4;font-weight:400;text-align:left;white-space:normal;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .15s,transform .15s;z-index:60;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.18)}
.adm-info:hover::after{opacity:1;visibility:visible;transform:translateY(0)}
/* ── Paginator "per page" selector ── */
.adm-pager__size{color:var(--adm-ink-muted);font-size:.82rem;white-space:nowrap}
.adm-pager__sizesel{border:1px solid var(--adm-line,#e6e8ec);border-radius:7px;padding:.15rem .35rem;font:inherit;font-size:.82rem;background:#fff;cursor:pointer;margin:0 .15rem}
/* ── Builder: image options (MCQ picture) ── */
.adm-imgopts{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;margin-bottom:.6rem}
.adm-imgopt{border:1.5px solid var(--adm-line,#e6e8ec);border-radius:12px;padding:.6rem;background:#fff}
.adm-imgopt.is-correct{border-color:#16a34a;background:#f0fdf4}
.adm-imgopt__head{display:flex;align-items:center;gap:.5rem;margin-bottom:.45rem;font-size:.85rem}
.adm-imgopt__k{font-weight:800;color:var(--adm-cyan-dark,#0891B2)}
.adm-imgopt__pick{margin-left:auto;display:flex;align-items:center;gap:.3rem;color:var(--adm-ink-muted);cursor:pointer}
.adm-imgopt__drop{border:1.5px dashed var(--adm-line,#cbd5e1);border-radius:10px;min-height:110px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:.85rem;cursor:pointer;overflow:hidden;margin-bottom:.45rem}
.adm-imgopt__drop img{max-width:100%;max-height:150px;display:block}
/* ── Builder: titled part sections (Choose+reason, grouped) ── */
.adm-part{border:1.5px solid var(--adm-line,#e6e8ec);border-radius:14px;padding:1rem 1.1rem 1.1rem;margin:1.2rem 0;background:#fbfcfd}
.adm-part__title{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--adm-cyan-dark,#0891B2);margin-bottom:.9rem}
/* ── Template picker: live thumbnails rendered by QRender ── */
.qz-thumb{overflow:hidden;pointer-events:none;max-height:170px}
.qz-thumb .qz-wrap{padding:0}
.qz-thumb .qz-card{border:0;box-shadow:none;padding:.2rem;margin:0;transform:scale(.82);transform-origin:top left;width:122%}
.qz-thumb .qz-stem{font-size:.9rem;margin-bottom:.5rem}
.qz-thumb .qz-note{display:none}
.qz-thumb__none{color:#94a3b8;font-size:.8rem;padding:.8rem}
/* ── "View all types" gallery ── */
.adm-alltypes__group{margin-bottom:1.6rem}
.adm-alltypes__title{font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--adm-cyan-dark,#0891B2);margin:0 0 .7rem;display:flex;align-items:center;gap:.4rem}
.adm-railbtn--all{background:#f1f5f9}
/* ── "View all types" gallery: divider between type sections ── */
.adm-alltypes__group{padding-bottom:1.5rem;border-bottom:1px solid var(--adm-line,#e6e8ec)}
.adm-alltypes__group:last-child{border-bottom:0}
/* ── "View all types": larger, clearer section titles ── */
.adm-alltypes__title{font-size:1.05rem!important;font-weight:800!important;letter-spacing:0!important;text-transform:none!important;color:var(--adm-ink,#0F172A)!important;margin-bottom:.9rem!important}
.adm-alltypes__title i{color:var(--adm-cyan-dark,#0891B2)}
.adm-tpl__name{font-size:.95rem;font-weight:700}
/* gallery section titles back to turquoise */
.adm-alltypes__title{color:var(--adm-cyan-dark,#0891B2)!important}
/* ── Builder: table row builder ── */
.adm-tgrid{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.6rem}
.adm-trow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.adm-tcell{display:flex;gap:.35rem;align-items:center;flex:1;min-width:200px}
.adm-tcell select{max-width:92px;flex:0 0 auto}
.adm-tcell input{flex:1}
.adm-trow__eg{display:flex;align-items:center;gap:.3rem;font-size:.8rem;color:var(--adm-ink-muted);white-space:nowrap}
/* ── Builder: grouped question parts ── */
.adm-gparts{display:flex;flex-direction:column;gap:1rem;margin-bottom:.7rem}
.adm-gpart{border:1.5px solid var(--adm-line,#e6e8ec);border-radius:14px;padding:1rem;background:#fbfcfd}
.adm-gpart__bar{display:flex;align-items:center;gap:.6rem;margin-bottom:.8rem}
.adm-gpart__lab{font-weight:800;color:var(--adm-cyan-dark,#0891B2);font-size:.9rem}
.adm-gpart__del{margin-left:auto}
.adm-gpart__meta{margin-top:.8rem}
/* ── Question bank: keep the question cell to one short line ── */
.adm-table .qtext{
display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical;
overflow:hidden; text-overflow:ellipsis; max-width:340px; white-space:normal;
}
.adm-table td:nth-child(3){ max-width:360px; }
/* ---- Bulk import report ------------------------------------------------ */
/* The four summary tiles filter the table under them. A tile with a count of
zero is not clickable — filtering to an empty table just looks broken. */
.adm-stat.is-clickable{ cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.adm-stat.is-clickable:hover{ border-color:var(--adm-cyan, #0891B2); }
.adm-stat.is-on{ border-color:var(--adm-cyan, #0891B2); box-shadow:0 0 0 2px rgba(8,145,178,.14); }
/* A rejected row was never written, so it sits greyed with no actions. */
tr.bi-rejected{ background:#FCFCFD; color:var(--adm-ink-muted, #64748B); }
tr.bi-rejected td{ opacity:.85; }
.bi-note{ font-size:.82rem; line-height:1.45; }
.bi-note--bad{ color:#ef4444; }
.bi-none{ color:#94A3B8; }
/* ---- Quiz & exam setup ------------------------------------------------- */
.qs-h{ font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
color:var(--adm-cyan-dark,#0891B2); margin:0 0 .7rem; }
/* An inherited value is shown, not hidden — but greyed, so a glance down the
column tells you which units actually differ. */
.qs-inherit{ color:var(--adm-ink-muted,#64748B); font-size:.86rem; }
tr.qs-on{ background:#F8FAFC; }
tr.qs-on td{ font-weight:600; }
.qs-mixcell{ display:inline-flex; gap:.25rem; }
/* The total sat inside a flex row of form fields, so it stretched to the full
height of an input and came out as a large blob. Pin it to the text. */
.qs-total{
align-self:flex-end; margin-bottom:.55rem;
padding:.28rem .6rem; border-radius:8px;
font-size:.8rem; font-weight:800; line-height:1.2; white-space:nowrap;
}
/* The Mode select was clipping "Inherit" to "Inhe". */
.qs-mode{ width:100%; min-width:106px; }
.qs-mixin{ width:52px; text-align:center; padding-left:.3rem; padding-right:.3rem; }
.qs-mixcell.is-bad .qs-mixin{ border-color:#ef4444; }
/* ---- Question health --------------------------------------------------- */
.qh-issue{ display:flex; align-items:flex-start; gap:.5rem; margin-bottom:.35rem; }
.qh-issue:last-child{ margin-bottom:0; }
.qh-detail{ font-size:.83rem; line-height:1.45; color:var(--adm-ink-muted,#64748B); }
.qh-dim{ color:#94A3B8; }
/* A wrong answer key is the worst thing in the bank — every pupil who met it
was marked down unfairly — so it is the one number that goes red. */
.qh-bad{ color:#dc2626; }
.qh-warn{ color:#B45309; }
.qh-over{ color:#B45309; font-weight:700; }
/* ---- Image pipeline: drop zone ----------------------------------------- */
.adm-drop{
border:2px dashed var(--adm-line,#e6e8ec); border-radius:12px;
padding:1.6rem 1rem; text-align:center; cursor:pointer;
transition:border-color .15s ease, background .15s ease;
}
.adm-drop:hover{ border-color:#94A3B8; }
.adm-drop.is-over{ border-color:var(--adm-blue,#2563eb); background:#F1F6FE; }
.adm-drop__icon{ font-size:1.6rem; color:#94A3B8; display:block; margin-bottom:.35rem; }
.adm-drop__hint{ font-size:.83rem; color:var(--adm-ink-muted,#64748B); }
.adm-drop input[type=file]{ display:none; }
/* The queue of files chosen but not yet sent. */
.adm-droplist{ margin-top:.8rem; display:flex; flex-wrap:wrap; gap:.4rem; }
.adm-dropchip{
display:inline-flex; align-items:center; gap:.4rem;
background:#F1F5F9; border-radius:999px; padding:.25rem .6rem;
font-size:.78rem; color:var(--adm-ink,#0F172A);
}
.adm-dropchip button{
border:0; background:none; cursor:pointer; color:#94A3B8;
font-size:.9rem; line-height:1; padding:0;
}
.adm-dropchip button:hover{ color:#dc2626; }
/* ---- Image library ------------------------------------------------------ */
/* Delete actions were being coloured with an inline style on every button. */
.adm-btn--del{ color:#ef4444; }
.adm-media{
display:grid; gap:.9rem; margin-top:.9rem;
grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
}
.adm-mediaitem{
border:1.5px solid var(--adm-line,#e6e8ec); border-radius:12px;
background:#fff; overflow:hidden; position:relative;
}
.adm-mediaitem.is-picked{ border-color:var(--adm-blue,#3B82F6); box-shadow:0 0 0 3px #DBEAFE; }
.adm-mediaitem__thumb{
height:130px; display:flex; align-items:center; justify-content:center;
background:#F8FAFC; overflow:hidden; cursor:pointer;
}
.adm-mediaitem__thumb img{ max-width:100%; max-height:130px; display:block; }
.adm-mediaitem__body{ padding:.55rem .6rem .65rem; }
.adm-mediaitem__name{
font-size:.75rem; font-family:'JetBrains Mono',monospace; word-break:break-all;
color:var(--adm-ink,#0F172A); margin-bottom:.35rem;
}
.adm-mediaitem__meta{ font-size:.72rem; color:var(--adm-ink-muted,#64748B); margin-top:.3rem; }
.adm-mediaitem__pick{ position:absolute; top:.45rem; left:.45rem; z-index:1; }
/* ============================================================
iOS INPUT ZOOM
Safari on iOS zooms the whole page when a field under 16px
takes focus, and it does not zoom back. The page is then
wider than the screen, which is where the horizontal scroll
on mobile comes from. Android Chrome does not do it, but the
size is harmless there.
16px is Apple's threshold, not a design choice, so this has
to beat every class that sets a smaller size — `.unit-select`
at .85rem, `.adm-input--sm` at .86rem, `.topic-search input`
at .95rem, and any future one. Hence !important, which is
otherwise avoided in this file.
Mobile only. Desktop keeps its current field sizes, where
nothing zooms and 16px would coarsen the admin filters.
============================================================ */
@media (max-width: 640px) {
input, select, textarea,
.form-control, .form-select,
[contenteditable="true"] {
font-size: 16px !important;
}
}
/* ============================================================
LEARNER ACTIVITY — /admin/students and /admin/user-detail
------------------------------------------------------------
Appended, not inserted. This file has grown by appending and
the last copy of a rule wins, so a block placed here is the
one that takes effect. Every selector below is new (`la-*`),
so nothing above is overridden.
It sits AFTER the mobile 16px field block on purpose and
sets no font-size on any input, select or textarea, so that
block keeps winning where it matters.
Colours, radii and borders come from the same variables the
rest of the admin uses. No new palette.
============================================================ */
/* --- the learner row on the list ------------------------- */
.la-who { display: flex; align-items: center; gap: .6rem; }
.la-who__av { background: var(--adm-cyan-dark); }
.la-who__name { font-weight: 600; color: var(--adm-ink); }
.la-who__user { font-size: .75rem; color: var(--adm-ink-muted); }
/* --- the session feed ------------------------------------ */
.la-sub { font-size: .78rem; color: var(--adm-ink-muted); margin-top: .15rem; }
.la-nowrap { white-space: nowrap; }
/* Band colours follow the NUMBER, never the label. Under 50 is
`qh-bad`, which this file already defines red. */
.la-amber { color: var(--adm-amber); }
.la-green { color: var(--adm-green); }
/* A whole row is the control, so it has to look like one. */
.la-row { cursor: pointer; }
.la-row:hover { background: var(--adm-surface-2); }
.la-row.is-open { background: var(--adm-cyan-050); }
.la-row.is-open td { border-bottom-color: transparent; }
.la-caret { color: var(--adm-ink-faint); font-size: .8rem; }
.la-row.is-open .la-caret { color: var(--adm-cyan-dark); }
/* --- the drill-down -------------------------------------- */
.la-detailrow > td { padding: 0 !important; background: var(--adm-surface-2); }
.la-detail { padding: .9rem 1rem 1.1rem; border-left: 3px solid var(--adm-cyan); }
.la-loading { padding: 1rem; color: var(--adm-ink-muted); font-size: .88rem; }
.la-inner { font-size: .86rem; background: var(--adm-surface); }
.la-inner th { font-size: .74rem; letter-spacing: .02em; }
.la-inner td { vertical-align: top; }
/* The answer the child actually typed. Long ones wrap rather
than stretching the table, and it stays monospaced so a
trailing space or a stray zero is visible. */
.la-resp {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: .8rem; color: var(--adm-ink-soft);
max-width: 320px; overflow-wrap: anywhere;
}
/* A question that has since left the bank. Struck through, not
hidden: the child really did answer it. */
.la-gone { color: var(--adm-ink-faint); text-decoration: line-through; }
@media (max-width: 860px) {
.la-detail { padding: .7rem .6rem .9rem; border-left-width: 2px; }
.la-resp { max-width: 200px; }
}
/* ============================================================================
Collapsible detail block (.adm-details)
----------------------------------------------------------------------------
Added for the learner activity modal, where a set's finer numbers sit behind
a toggle: they matter when a set looks wrong and are noise the rest of the
time. Written as a reusable block rather than scoped to that page, so the
next screen that needs one does not invent a second look.
Built on a native /, so it opens with no JavaScript at all.
The default disclosure triangle is removed in both engines (list-style for
Firefox, ::-webkit-details-marker for Safari and Chrome) and replaced by a
chevron that turns, which is the same affordance the sidebar uses.
NEW selectors, appended at the end of the file. Nothing above redefines them,
so unlike an edit to an existing rule there is no earlier copy to lose to.
========================================================================== */
.adm-details {
border: 1px solid var(--adm-border);
border-radius: var(--adm-radius);
background: var(--adm-surface-2);
margin-bottom: 1.1rem;
overflow: hidden;
}
.adm-details__sum {
list-style: none; /* Firefox */
cursor: pointer;
padding: .7rem 1rem;
font-size: .86rem;
font-weight: 700;
color: var(--adm-ink-soft);
display: flex;
align-items: center;
gap: .55rem;
user-select: none;
}
.adm-details__sum::-webkit-details-marker { display: none; } /* Safari, Chrome */
.adm-details__sum:hover { color: var(--adm-ink); }
.adm-details__chev { transition: transform .15s ease; font-size: .8rem; }
.adm-details[open] .adm-details__chev { transform: rotate(90deg); }
.adm-details[open] .adm-details__sum { border-bottom: 1px solid var(--adm-border-soft); }
.adm-details__body { padding: .9rem 1rem 1rem; }
/* Two-column key/value table inside a detail block: the label column is fixed,
quiet and non-wrapping, so ten facts read as a list rather than a paragraph. */
.adm-table--kv { background: transparent; }
.adm-table--kv td { border-bottom: 1px solid var(--adm-border-soft); padding: .45rem .6rem; }
.adm-table--kv tr:last-child td { border-bottom: 0; }
.adm-table--kv td:first-child {
width: 150px;
color: var(--adm-ink-muted);
font-weight: 600;
white-space: nowrap;
}
@media (max-width: 560px) {
.adm-table--kv td:first-child { width: 110px; white-space: normal; }
}
/* ============================================================================
Stacked cards, and a table that keeps its header (.adm-stack, --sticky)
----------------------------------------------------------------------------
`.adm-card` carries no margin of its own, deliberately: a page positions its
own cards. That leaves cards rendered in a loop butting against each other,
which is what the full-paper view does, so the spacing goes on the CONTAINER
rather than on every card in the app.
The sticky header needs the max-height as well as the sticky rule, and the
reason is not obvious. `.adm-tablewrap` sets `overflow-x: auto`, and a box
with overflow-x auto computes overflow-y to auto too, so the wrapper is
already the scroll container for anything inside it. Sticky positions against
the nearest scrolling ancestor, so `top: 0` pins to a wrapper that has no
height limit and therefore never scrolls: the header would simply never move.
Giving the wrapper a height is what makes the table scroll inside it and the
header stay.
`th` needs its own background or the rows show straight through it while
they pass underneath.
NEW selectors, appended. Nothing above defines them.
========================================================================== */
.adm-stack { display: grid; gap: 1.1rem; }
.adm-tablewrap--sticky { max-height: 58vh; overflow: auto; }
/* border-collapse MUST be separate here. A sticky `th` does not stick inside a
collapsed-border table: with `collapse` the borders belong to the table, not
the cell, so the cell cannot be lifted out of flow and the header scrolls
away regardless of the sticky rule. `.adm-table` sets `collapse` globally,
which is why the first attempt did nothing. Switching to `separate` costs the
collapsed border, so the header line is redrawn as an inset shadow. */
.adm-table--sticky { border-collapse: separate; border-spacing: 0; }
.adm-table--sticky thead th {
position: sticky;
top: 0;
z-index: 2;
background: var(--adm-surface);
box-shadow: inset 0 -1px 0 var(--adm-border);
}
@media (max-width: 860px) {
.adm-tablewrap--sticky { max-height: 65vh; }
}
/* ============================================================================
Small line chart (.adm-chart)
----------------------------------------------------------------------------
Hand-drawn SVG. No admin page has ever loaded a charting library and one
line is not worth adding the first, so this is a polyline in a viewBox that
scales to whatever width the card gives it.
Colours live here rather than as attributes on the SVG, so the chart follows
the admin palette like everything else and a theme change reaches it.
========================================================================== */
.adm-chart { width: 100%; height: auto; display: block; }
.adm-chart__grid { stroke: var(--adm-border-soft); stroke-width: 1; }
.adm-chart__band { stroke: var(--adm-border); stroke-width: 1; stroke-dasharray: 3 3; }
.adm-chart__line { fill: none; stroke: var(--adm-cyan); stroke-width: 2.5;
stroke-linejoin: round; stroke-linecap: round; }
.adm-chart__dot { fill: var(--adm-cyan); }
.adm-chart__label { fill: var(--adm-ink-faint); font-size: 11px; font-weight: 600; }
/* ============================================================================
Toolbar and row-action tidy-ups
----------------------------------------------------------------------------
`.adm-toolbar` wraps by default, which is right for a toolbar that might hold
anything. A card head holding exactly two controls does not want that: at the
width a card head leaves, a select and an input wrap onto two lines and the
head grows to match. `--tight` keeps them on one line and gives them fixed
widths, then hands the wrapping back below 720px where one line genuinely
does not fit.
`.adm-rowbtns` is for a table cell with two or more full-size buttons in it.
`.adm-rowact` already exists but is for 32px icon squares, so it is the wrong
thing to reach for when the buttons carry words.
========================================================================== */
.adm-toolbar--tight { flex-wrap: nowrap; }
.adm-toolbar--tight .adm-select { width: 155px; min-width: 0; }
.adm-toolbar--tight .adm-input { width: 215px; min-width: 0; }
.adm-rowbtns { display: inline-flex; gap: .4rem; flex-wrap: wrap; }
@media (max-width: 720px) {
.adm-toolbar--tight { flex-wrap: wrap; }
.adm-toolbar--tight .adm-select,
.adm-toolbar--tight .adm-input { width: 100%; }
}
/* ---- Parent area additions ----------------------------------------------
The parent pages use this stylesheet, not app.css. Everything below is what
they need on top of the admin vocabulary. Appended rather than merged into
the blocks above so nothing already working is touched. */
/* Required marks and per-field errors. The admin forms carry one error box at
the top of a modal; a parent signup is long enough that a message at the top
is missed, so each field gets its own. */
.adm-req { color: var(--adm-red); font-weight: 700; margin-left: .15rem; }
.fld-err { display: none; font-size: .82rem; color: var(--adm-red); margin-top: .35rem; }
.fld-err.is-shown { display: block; }
.adm-input.is-bad, select.is-bad, textarea.is-bad { border-color: var(--adm-red); }
.adm-input.is-bad:focus { border-color: var(--adm-red); box-shadow: 0 0 0 3px rgba(249,62,62,.15); }
.adm-formnote { font-size: .82rem; color: var(--adm-ink-muted); margin: 0 0 1.1rem; }
/* Two cards, not the three the grade packages page shows. */
.adm-gridcards--two { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){ .adm-gridcards--two { grid-template-columns: 1fr; } }
/* The signup offer. */
.adm-plan { display: flex; flex-direction: column; padding: 1.4rem; }
.adm-plan__name { font-weight: 800; font-size: 1.08rem; }
.adm-plan__note { font-size: .82rem; color: var(--adm-ink-muted); margin-bottom: .6rem; }
.adm-plan__price { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 1rem; }
.adm-plan__feats { list-style: none; margin: 0 0 1.2rem; padding: 0; font-size: .9rem;
color: var(--adm-ink-soft); flex: 1; }
.adm-plan__feats li { padding: .28rem 0 .28rem 1.2rem; position: relative; }
.adm-plan__feats li::before { content: ""; position: absolute; left: 0; top: .78rem;
width: .42rem; height: .42rem; border-radius: 50%; background: var(--adm-cyan); }
.adm-plan--pick { border-color: var(--adm-cyan); background: var(--adm-cyan-050); }
/* A child on the dashboard. */
.adm-kid__top { display: flex; align-items: center; gap: .8rem; }
.adm-kid__av { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 44px;
background: var(--adm-cyan-050); color: var(--adm-cyan-dark);
display: grid; place-items: center; font-weight: 800; font-size: 1.05rem; }
.adm-kid__name { font-weight: 800; }
.adm-kid__user { font-size: .82rem; color: var(--adm-ink-muted); }
.adm-kid__foot { margin-top: 1rem; display: flex; gap: .5rem; flex-wrap: wrap; }
/* The chapter picker. One open subject at a time, rows inside. */
.adm-subj { border: 1px solid var(--adm-border); border-radius: var(--adm-radius-sm);
margin-bottom: .7rem; overflow: hidden; background: var(--adm-surface); }
.adm-subj__head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem;
cursor: pointer; background: var(--adm-surface); }
.adm-subj__head .adm-subj__name { font-weight: 700; flex: 1; }
.adm-subj__count { font-size: .8rem; color: var(--adm-ink-muted); }
.adm-subj__body { display: none; padding: .2rem 1.1rem .9rem; }
.adm-subj.is-open .adm-subj__body { display: block; }
.adm-subj.is-open .adm-subj__head { border-bottom: 1px solid var(--adm-border-soft); }
.adm-chap { display: flex; align-items: center; gap: .7rem; padding: .55rem 0;
border-top: 1px solid var(--adm-border-soft); }
.adm-chap:first-child { border-top: 0; }
.adm-chap__code { font-size: .72rem; font-weight: 800; color: var(--adm-cyan-dark);
background: var(--adm-cyan-050); border-radius: 6px; padding: .12rem .4rem; flex: 0 0 auto; }
.adm-chap__name { font-size: .9rem; flex: 1; min-width: 0; }
.adm-btn--sm { padding: .35rem .7rem; font-size: .8rem; }
/* `.adm-row` is two fields side by side and does not wrap. In a modal on a
phone that gives two unusable half-width boxes. */
/* Two fields side by side become two unusable half-width boxes on a phone.
Applies to every `.adm-row`, not only the ones inside a modal. */
@media (max-width: 560px){
.adm-row { flex-wrap: wrap; }
.adm-row > * { flex: 1 1 100%; }
}
/* Tabs on the parent auth card: sign in and create account on one page. */
.adm-tabs { display:flex; gap:.3rem; background:var(--adm-surface-3); padding:.25rem;
border-radius:var(--adm-radius-sm); margin-bottom:1.4rem; }
.adm-tab {
flex: 1;
font: inherit;
font-size: 1rem;
font-weight: 700;
padding: 1rem .8rem;
border: 0;
border-radius: 8px;
background: transparent;
color: #465366;
cursor: pointer;
line-height: 16px;
}
.adm-tab.is-on { background:var(--adm-surface); color:var(--adm-ink); box-shadow:var(--adm-shadow-sm); }
.adm-pane { display:none; }
.adm-pane.is-on { display:block; }
/* The waiting-plan box on the dashboard. Loud on purpose: a plan with no child
on it is the one thing a parent must finish. */
.adm-attach { border:1px solid var(--adm-cyan); background:var(--adm-cyan-050);
border-radius:var(--adm-radius); padding:1.3rem 1.4rem; margin-bottom:1.5rem;
display:flex; align-items:center; gap:1.1rem; flex-wrap:wrap; }
.adm-attach__ic { width:46px; height:46px; border-radius:12px; flex:0 0 46px;
background:var(--adm-surface); color:var(--adm-cyan-dark);
display:grid; place-items:center; font-size:1.3rem; }
.adm-attach__txt { flex:1 1 16rem; min-width:0; }
.adm-attach__txt b { display:block; font-size:1.02rem; font-weight:800; }
.adm-attach__txt span { font-size:.88rem; color:var(--adm-ink-soft); }
.adm-attach__act { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.adm-attach__act .adm-input { width:auto; min-width:11rem; }
/* No plan on the account at all. Same shape as the waiting-plan box, different
colour, because it is a prompt rather than an unfinished job. */
.adm-offer { border:1px solid var(--adm-border); background:var(--adm-surface);
border-radius:var(--adm-radius); padding:1.3rem 1.4rem; margin-bottom:1.5rem;
box-shadow:var(--adm-shadow-sm); }
.adm-offer__t { font-weight:800; font-size:1.02rem; }
.adm-offer__s { font-size:.88rem; color:var(--adm-ink-muted); margin-bottom:1rem; }
.adm-offer__list { display:flex; gap:.7rem; flex-wrap:wrap; }
.adm-offer__one { flex:1 1 14rem; border:1px solid var(--adm-border); border-radius:var(--adm-radius-sm);
padding:1rem; display:flex; flex-direction:column; gap:.5rem; }
.adm-offer__one b { font-size:.98rem; }
.adm-offer__one .p { font-size:1.3rem; font-weight:800; letter-spacing:-.02em; }
/* ---- Add-a-child wizard --------------------------------------------------
Two steps in one modal: details, then chapters. Chapters used to be a button
on the card that a parent had to know to press, so children were created with
an empty plan and nothing to work through. */
.adm-steps { display:flex; align-items:center; gap:.5rem; margin-bottom:1.3rem; }
.adm-step { display:flex; align-items:center; gap:.5rem; font-size:.84rem; font-weight:700;
color:var(--adm-ink-light); }
.adm-step__n { width:24px; height:24px; border-radius:50%; flex:0 0 24px;
display:grid; place-items:center; font-size:.76rem;
background:var(--adm-surface-3); color:var(--adm-ink-muted); }
.adm-step.is-on { color:var(--adm-ink); }
.adm-step.is-on .adm-step__n { background:var(--adm-cyan); color:#fff; }
.adm-step.is-done .adm-step__n { background:var(--adm-cyan-050); color:var(--adm-cyan-dark); }
.adm-steps__line { flex:1; height:2px; background:var(--adm-border); border-radius:2px; }
/* Day / month / year rather than a calendar. A birth date is eleven years back
and a calendar makes you page through a hundred and thirty months to reach
it. Three lists land in two taps on a phone. */
.adm-dob { display:flex; gap:.5rem; }
.adm-dob select { flex:1; min-width:0; }
.adm-dob select.y { flex:0 0 7rem; }
/* ---- A child on the dashboard ---- */
.adm-kid { display:flex; flex-direction:column; }
.adm-kid__head { display:flex; align-items:flex-start; gap:.9rem; }
.adm-kid__av { width:52px; height:52px; border-radius:14px; flex:0 0 52px;
background:linear-gradient(135deg,var(--adm-cyan),var(--adm-cyan-dark)); color:#fff;
display:grid; place-items:center; font-weight:800; font-size:1.25rem; }
.adm-kid__id { flex:1; min-width:0; }
.adm-kid__name { font-weight:800; font-size:1.05rem; line-height:1.25; }
.adm-kid__user { font-size:.82rem; color:var(--adm-ink-muted); }
.adm-kid__meta { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.85rem; }
.adm-kid__stats { display:flex; gap:1.4rem; margin-top:1rem;
padding-top:.9rem; border-top:1px solid var(--adm-border-soft); }
.adm-kid__stat b { display:block; font-size:1.15rem; font-weight:800; line-height:1.2; }
.adm-kid__stat span { font-size:.74rem; color:var(--adm-ink-muted); }
.adm-kid__foot { margin-top:1rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.adm-kid__foot .adm-btn { flex:1 1 auto; justify-content:center; }
/* ---- Subject colour, shared by every chapter list -----------------------
Lifted from the child's own `subj-*` classes in app.css so a subject carries
the same colour on both sides of the product. */
.adm-sic { width:34px; height:34px; border-radius:10px; flex:0 0 34px;
display:grid; place-items:center; font-size:1rem; }
.adm-sic--maths { background:var(--adm-cyan-050); color:var(--adm-cyan-dark); }
.adm-sic--english { background:#EDE9FE; color:#6D28D9; }
.adm-sic--science { background:#D1FAE5; color:#047857; }
.adm-sic--french { background:#FCE7F3; color:#BE185D; }
.adm-sic--history { background:#FEF3C7; color:#B45309; }
/* Chapters two across. Twenty-nine units in one column is a page of scrolling
to reach U29.
CLOSED IS `display:none` AND OPEN IS `display:grid`, both stated here.
Writing only the grid rule set `display:grid` on the body unconditionally,
which beat the earlier `display:none` and rendered every subject open; the
earlier `.is-open` rule then set `display:block`, so clicking a subject
collapsed it to one column instead of closing it. Two symptoms, one cause. */
.adm-subj__body { display:none; }
.adm-subj.is-open .adm-subj__body {
display:grid; grid-template-columns:repeat(2,1fr); gap:0 1.4rem;
padding:.2rem 1.1rem .9rem;
}
@media (max-width:820px){
.adm-subj.is-open .adm-subj__body { grid-template-columns:1fr; }
}
/* The chevron turns so a closed subject does not look like an open empty one. */
.adm-subj__head .bi-chevron-down { transition:transform .18s ease; }
.adm-subj.is-open .adm-subj__head .bi-chevron-down { transform:rotate(180deg); }
.adm-subj__head { font-size:.98rem; }
.adm-subj__head .adm-subj__name { font-weight:800; }
/* ---- The plan cards on checkout ---- */
.adm-plan { position:relative; overflow:hidden; }
.adm-plan__ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
font-size:1.25rem; margin-bottom:.9rem; }
.adm-plan--free .adm-plan__ic { background:#FEF3C7; color:#B45309; }
.adm-plan--pick .adm-plan__ic { background:var(--adm-surface); color:var(--adm-cyan-dark); }
.adm-plan--pick { border-color:var(--adm-cyan); border-width:2px;
background:linear-gradient(160deg,var(--adm-cyan-050),var(--adm-surface)); }
.adm-plan__flag { position:absolute; top:0; right:0; font-size:.68rem; font-weight:800;
letter-spacing:.04em; text-transform:uppercase; color:#fff; padding:.3rem .7rem;
background:linear-gradient(135deg,var(--adm-cyan),var(--adm-cyan-dark));
border-bottom-left-radius:10px; }
.adm-plan__price { display:flex; align-items:baseline; gap:.4rem; }
.adm-plan__price small { font-size:.8rem; font-weight:600; color:var(--adm-ink-muted); }
/* ---- Bigger, calmer child card ---- */
.adm-kid__av { width:60px; height:60px; flex:0 0 60px; border-radius:16px; font-size:1.4rem; }
.adm-kid__name { font-size:1.15rem; }
.adm-kid__meta .adm-badge { font-size:.78rem; padding:.34rem .7rem; border-radius:999px; }
.adm-kid__foot .adm-btn { padding:.6rem 1rem; font-size:.88rem; }
.adm-kid__stats { gap:2rem; }
.adm-kid__stat b { font-size:1.5rem; }
/* The chooser shows two plans side by side and needs more room than a sign-in
box. Applied only while the chooser is on screen. */
.adm-auth__card--wide { max-width: 46rem; }
/* ---- Plan choice inside the add-a-child wizard ---- */
.adm-pick { display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; }
@media (max-width:620px){ .adm-pick { grid-template-columns:1fr; } }
.adm-pick__one { border:1px solid var(--adm-border); border-radius:var(--adm-radius-sm);
padding:1rem; cursor:pointer; background:var(--adm-surface); text-align:left;
font:inherit; display:flex; flex-direction:column; gap:.3rem; }
.adm-pick__one:hover { border-color:var(--adm-cyan); }
.adm-pick__one.is-on { border-color:var(--adm-cyan); border-width:2px; padding:calc(1rem - 1px);
background:var(--adm-cyan-050); }
.adm-pick__one b { font-size:.96rem; }
.adm-pick__one .p { font-size:1.25rem; font-weight:800; letter-spacing:-.02em; }
.adm-pick__one span { font-size:.8rem; color:var(--adm-ink-muted); }
.adm-pick__tag { font-size:.7rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
color:var(--adm-cyan-dark); }
/* Danger button, for removing a child. */
.adm-btn--danger { border-color:#FCA5A5; color:#B4232A; background:var(--adm-surface); }
.adm-btn--danger:hover { background:#FEF2F2; border-color:#F87171; }
/* The username is what a parent has to read out to their child, so it is not
fine print. */
.adm-kid__user { font-size:.95rem; font-weight:700; color:var(--adm-ink-soft); }
.adm-kid__user em { font-style:normal; font-weight:600; color:var(--adm-ink-muted); }
/* Two independent sections in the edit modal, each with its own Save. */
.adm-sect { border:1px solid var(--adm-border); border-radius:var(--adm-radius-sm);
padding:1.1rem; margin-bottom:1rem; }
.adm-sect__h { font-weight:800; font-size:.98rem; margin:0 0 .9rem;
display:flex; align-items:center; gap:.5rem; }
.adm-sect__foot { display:flex; justify-content:flex-end; margin-top:.3rem; }
/* `.adm-pick__one` is an for the catalogue entries and a