/* Ishure — management shell
   Brand palette is Burundi's flag colors: green (primary — darkened from the
   flag's #1EB53A so white text/icons on it clear WCAG AA contrast) and red
   (#CE1126, used as the secondary "--accent" in gradients, where it already
   has plenty of contrast for white text). */
:root {
  --brand: #147a38;
  --brand-dark: #0e5c29;
  --brand-soft: #e5f6ea;
  --accent: #ce1126;
  --accent-green: #0d9488;
  --accent-amber: #c67c1e;
  --accent-indigo: #4f46e5;
  --danger: #c0392b;
  --danger-soft: #fdecea;
  --ink: #1a2230;
  --muted: #5c6b80;
  --text-faint: #8a97ab;
  --line: #e2e7ee;
  --line-strong: #cdd6e3;
  --surface: #ffffff;
  --surface-2: #f8faf9;
  --surface-3: #eef2f0;
  --canvas: #f4f6fa;
  --sidebar: #0f331f;
  --sidebar-ink: #c9e4d2;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16,32,52,.06), 0 8px 24px rgba(16,32,52,.06);
  --shadow-sm: 0 1px 2px rgba(16,32,52,.06), 0 1px 3px rgba(16,32,52,.05);
  --shadow-md: 0 4px 14px rgba(16,32,52,.10), 0 2px 4px rgba(16,32,52,.05);
  --shadow-lg: 0 18px 48px rgba(16,32,52,.16);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-theme="dark"] {
  --brand: #34d399;
  --brand-dark: #22b573;
  --brand-soft: #123524;
  --accent: #ff5a6e;
  --accent-green: #2dd4bf;
  --danger-soft: #2c1a1c;
  --ink: #e8eef6;
  --muted: #9aabc0;
  --text-faint: #6c7c90;
  --line: #26333f;
  --line-strong: #344256;
  --surface: #16202b;
  --surface-2: #1a2531;
  --surface-3: #202c39;
  --canvas: #0e161e;
  --sidebar: #081c11;
  --sidebar-ink: #a3cdb0;
  --shadow: none;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 6px 18px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: var(--canvas);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0 0 .3rem; }
h2 { font-size: 1.05rem; margin: 0; }
small { color: var(--muted); }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--surface); padding: .5rem 1rem; z-index: 100; }

/* Shell layout */
:root { --sidebar-w: 264px; --sidebar-w-collapsed: 76px; }
.shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; background: var(--sidebar); color: var(--sidebar-ink);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  transition: width .22s ease;
}
.brand { display: flex; align-items: center; gap: .7rem; padding: 1.1rem 1.1rem .9rem; }
.brand-mark { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.12);
  display: grid; place-items: center; color: #fff; flex-shrink: 0; }
.brand-text { min-width: 0; }
.brand-text strong { display: block; color: #fff; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-text span { font-size: .74rem; color: var(--sidebar-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mobile-close { display: none; margin-left: auto; }

/* Desktop collapse toggle — shrinks the sidebar to icon-only, like eshop's console shell */
.sidebar-toggle {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: calc(100% - 1.2rem); margin: 0 .6rem .7rem; padding: .5rem .6rem;
  border: 1px solid rgba(255,255,255,.12); border-radius: 9px;
  background: rgba(255,255,255,.06); color: var(--sidebar-ink);
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
.sidebar-toggle svg { flex-shrink: 0; transition: transform .2s ease; }
.shell.collapsed .sidebar-toggle svg { transform: rotate(180deg); }

.nav-scroll { flex: 1; overflow-y: auto; padding: .4rem .6rem 1rem; }
.nav-item { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 9px;
  color: var(--sidebar-ink); font-weight: 500; }
.nav-item:hover { background: rgba(255,255,255,.07); text-decoration: none; color: #fff; }
.nav-item.active { background: var(--brand); color: #fff; }
.nav-item.active .nav-icon { color: #fff; }
.nav-icon { width: 20px; display: inline-flex; align-items: center; justify-content: center; color: #8fa6bd; }
.nav-section { padding: .9rem .8rem .35rem; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .09em; color: #7f93a8; }
.nav-group { margin: .1rem 0; }
.nav-group summary { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem;
  border-radius: 9px; cursor: pointer; list-style: none; font-weight: 500; }
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary:hover { background: rgba(255,255,255,.07); color: #fff; }
.nav-group summary b { margin-left: auto; display: inline-flex; color: #8fa6bd; transition: transform .15s; }
.nav-group[open] summary b { transform: rotate(180deg); }
.nav-subsection { display: flex; flex-direction: column; padding: .15rem 0 .4rem .95rem;
  margin-left: .7rem; border-left: 1px solid rgba(255,255,255,.1); }
.nav-subsection a { padding: .38rem .6rem; border-radius: 7px; color: var(--sidebar-ink); font-size: .86rem; }
.nav-subsection a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav-subsection a[aria-current="page"] { background: var(--brand); color: #fff; }
.nav-overview { font-weight: 600; }

.sidebar-foot { padding: .7rem; border-top: 1px solid rgba(255,255,255,.08); }
.user-card { display: flex; align-items: center; gap: .55rem; }
.user-card strong { color: #fff; font-size: .85rem; display: block; }
.user-card div { flex: 1; min-width: 0; }
.user-card strong, .user-card small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.user-logout { background: rgba(255,255,255,.1); border: 0; color: #fff; width: 30px; height: 30px;
  border-radius: 8px; cursor: pointer; }

.sidebar-backdrop { display: none; }

/* Collapsed sidebar — desktop only; on mobile the sidebar is an off-canvas
   drawer (see the 820px breakpoint below) so width-collapsing it would just
   make an already-hidden panel the wrong width when opened. */
@media (min-width: 821px) {
  .shell.collapsed .sidebar { width: var(--sidebar-w-collapsed); }
  .shell.collapsed .brand { justify-content: center; padding-inline: .5rem; }
  .shell.collapsed .nav-item, .shell.collapsed .nav-group summary { justify-content: center; padding-inline: .6rem; }
  .shell.collapsed .user-card { justify-content: center; }
  .shell.collapsed .brand-text,
  .shell.collapsed .nav-section,
  .shell.collapsed .nav-subsection,
  .shell.collapsed .nav-group summary b,
  .shell.collapsed .nav-item span:not(.nav-icon),
  .shell.collapsed .nav-group summary > span:not(.nav-icon),
  .shell.collapsed .user-card > div,
  .shell.collapsed .sidebar-toggle-label { display: none; }
}

/* Workspace */
.workspace { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; align-items: center; gap: 1rem; padding: .8rem 1.4rem;
  background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar-title { display: flex; flex-direction: column; }
.topbar-title strong { font-size: .95rem; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: .8rem; }
.topbar-user { display: flex; align-items: center; gap: .5rem; }
.topbar-user-copy { display: flex; flex-direction: column; }
.topbar-user-copy strong { font-size: .84rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-weight: 600; }
.icon-btn { background: transparent; border: 1px solid var(--line); border-radius: 9px; width: 36px;
  height: 36px; cursor: pointer; color: var(--ink); display: inline-grid; place-items: center; }
.menu-toggle, [data-open-nav] { display: none; }

.content { padding: 1.75rem 2.25rem 3rem; width: 100%; }

/* Icons */
.icon { flex-shrink: 0; }
svg.icon { display: inline-block; vertical-align: -0.16em; }
.btn svg.icon, .table-action svg.icon, .mini-add svg.icon,
.eyebrow svg.icon, dd svg.icon { vertical-align: -0.16em; }
.nav-icon svg.icon, .metric-icon svg.icon, .module-icon svg.icon,
.banner-icon svg.icon, .brand-mark svg.icon, .title-icon svg.icon,
.empty-icon svg.icon { display: block; vertical-align: baseline; }

/* Page header */
.page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  margin-bottom: 1.3rem; flex-wrap: wrap; }
.page-header p { color: var(--muted); margin: .2rem 0 0; }
.eyebrow { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--brand); font-weight: 700; margin-bottom: .25rem; }
.page-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .95rem; border-radius: 10px;
  font-weight: 600; font-size: .85rem; cursor: pointer; border: 1px solid transparent; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { background: var(--brand-soft); color: var(--brand-dark); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-danger { background: var(--danger); color: #fff; }
.btn-small { padding: .4rem .7rem; font-size: .78rem; }
.btn-block { width: 100%; justify-content: center; }

/* Panels */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem; box-shadow: var(--shadow); margin-bottom: 1.2rem; }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; gap: 1rem; }
.stack-gap > * { margin-bottom: 1.2rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }

/* Metrics */
.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem;
  margin-bottom: 1.3rem; }
.metric-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem; box-shadow: var(--shadow); border-top: 3px solid var(--brand); }
.metric-card.accent-green { border-top-color: var(--accent-green); }
.metric-card.accent-amber { border-top-color: var(--accent-amber); }
.metric-card.accent-indigo { border-top-color: var(--accent-indigo); }
.metric-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.metric-icon { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-dark); }
.accent-green .metric-icon { background: #e6f5ee; color: var(--accent-green); }
.accent-amber .metric-icon { background: #fbeede; color: var(--accent-amber); }
.accent-indigo .metric-icon { background: #ecebfc; color: var(--accent-indigo); }
.metric-card p { margin: 0; color: var(--muted); font-size: .82rem; }
.metric-card h2 { font-size: 1.7rem; margin: .15rem 0; }
.metric-card span { font-size: .78rem; color: var(--muted); }
.chip { font-size: .68rem; background: var(--brand-soft); color: var(--brand-dark); padding: .15rem .5rem;
  border-radius: 999px; font-weight: 700; }

/* Module cards */
.module-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }
.module-card { display: flex; align-items: center; gap: .8rem; padding: .9rem 1rem; border: 1px solid var(--line);
  border-radius: 12px; color: var(--ink); background: var(--canvas); }
.module-card:hover { border-color: var(--brand); text-decoration: none; }
.module-card span:nth-child(2) { flex: 1; min-width: 0; }
.module-card strong { display: block; font-size: .9rem; }
.module-card small { display: block; }
.module-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-dark); flex-shrink: 0; }
.module-go { color: var(--muted); display: inline-flex; margin-left: auto; }
.module-card:hover .module-go { color: var(--brand); }
.title-with-icon { display: flex; align-items: center; gap: .55rem; }
.title-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-dark); }

/* Lists */
.stack-list { display: flex; flex-direction: column; }
.stack-list a { display: flex; align-items: center; gap: .8rem; padding: .7rem .4rem; border-bottom: 1px solid var(--line);
  color: var(--ink); }
.stack-list a:last-child { border-bottom: 0; }
.stack-list a:hover { text-decoration: none; background: var(--canvas); }
.stack-list span { flex: 1; min-width: 0; }
.stack-list strong { display: block; font-size: .86rem; }

.badge { display: inline-block; font-size: .72rem; padding: .18rem .55rem; border-radius: 999px;
  background: var(--canvas); border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.badge-good { background: #e6f5ee; border-color: #bfe6d3; color: var(--accent-green); }

/* Admission decision badges — Application.Status values, lower-cased */
.badge-status-accepted, .badge-status-enrolled { background: #e6f5ee; border-color: #bfe6d3; color: var(--accent-green); }
.badge-status-under_review { background: #fbeede; border-color: #f0d7ae; color: var(--accent-amber); }
.badge-status-waitlisted { background: var(--brand-soft); border-color: transparent; color: var(--brand-dark); }
.badge-status-rejected { background: #fdecea; border-color: #f5c6c0; color: var(--danger); }
.badge-status-submitted { background: var(--canvas); border-color: var(--line); color: var(--muted); }

/* Charts */
.bar-chart { display: flex; align-items: flex-end; gap: .7rem; height: 180px; padding-top: 1rem; }
.bar-chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .35rem; height: 100%; }
.bar-chart-val { font-size: .78rem; color: var(--muted); }
.bar-chart-track { flex: 1; width: 100%; max-width: 40px; display: flex; align-items: flex-end;
  background: var(--canvas); border-radius: 6px; }
.bar-chart-track i { width: 100%; background: var(--brand); border-radius: 6px; min-height: 4px; }
.horizontal-chart { display: flex; flex-direction: column; gap: .8rem; }
.hchart-row > div:first-child { display: flex; justify-content: space-between; font-size: .84rem; margin-bottom: .25rem; }
.hchart-track { height: 8px; background: var(--canvas); border-radius: 999px; overflow: hidden; }
.hchart-track i { display: block; height: 100%; background: var(--brand); border-radius: 999px; }
.mini-add { font-size: .74rem; }

/* Tables */
.table-toolbar { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.search-field { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line); border-radius: 10px;
  padding: .1rem .7rem; flex: 1; min-width: 220px; max-width: 460px; background: var(--canvas); }
.search-field span { display: inline-flex; color: var(--muted); }
.search-field input { border: 0; background: transparent; padding: .5rem 0; flex: 1; color: var(--ink); outline: none; }
.toolbar-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.toolbar-actions select { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.data-table th { text-align: left; padding: .7rem .9rem; background: var(--canvas); color: var(--muted);
  font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.data-table td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); }
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: var(--canvas); }
.row-link { font-weight: 600; }
.row-actions { text-align: right; white-space: nowrap; }
.table-action { font-size: .8rem; font-weight: 600; }
.table-footer { display: flex; justify-content: space-between; padding: .8rem .2rem 0; font-size: .78rem; color: var(--muted); }

/* Detail */
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; margin: 0; }
.detail-grid dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.detail-grid dd { margin: .2rem 0 0; font-size: .92rem; }
.workflow-bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

.banner { display: flex; gap: .8rem; padding: .9rem 1.1rem; border-radius: 12px; margin-bottom: 1.2rem;
  background: var(--brand-soft); align-items: flex-start; }
.banner-warn { background: #fdf2e2; color: #7a4a12; }
.banner-icon { display: inline-flex; flex-shrink: 0; margin-top: .1rem; }
.banner strong { display: block; }
.banner p { margin: .2rem 0 0; font-size: .85rem; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group.full-span { grid-column: 1 / -1; }
.form-group label { font-size: .8rem; font-weight: 600; }
.form-group label b { color: var(--danger); margin-left: .15rem; }
.fld, .form-group input, .form-group select, .form-group textarea {
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink); font: inherit; width: 100%; }
.fld:focus, .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: 2px solid var(--brand-soft); border-color: var(--brand); }
.fld-check, .check-group input { width: auto; }
.checkbox-control { display: flex; gap: .6rem; align-items: flex-start; flex-direction: row; }
.form-section-head { margin: 1.4rem 0 1rem; }
.form-section-head:first-child { margin-top: 0; }
.form-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.5rem;
  border-top: 1px solid var(--line); padding-top: 1.1rem; }
.form-error { background: #fdecea; border: 1px solid #f5c6c0; color: var(--danger); padding: .8rem 1rem;
  border-radius: 10px; margin-bottom: 1rem; }
.field-error { color: var(--danger); font-size: .78rem; }
.has-error .fld, .has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
.system-note { display: flex; gap: .7rem; background: var(--canvas); border: 1px solid var(--line);
  border-radius: 10px; padding: .8rem 1rem; margin-bottom: 1rem; }
.system-note p { margin: .2rem 0 0; font-size: .83rem; color: var(--muted); }

.inline-formset { margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.inline-items { display: flex; flex-direction: column; gap: 1rem; }
.inline-item { border: 1px solid var(--line); border-radius: 12px; padding: 1rem; background: var(--canvas); }
.inline-item header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.inline-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem; }
.inline-delete { display: flex; align-items: center; gap: .3rem; font-size: .8rem; }

/* Dialogs */
.danger-dialog, .workflow-dialog { text-align: center; max-width: 520px; margin: 2rem auto; }
.danger-icon, .workflow-icon { display: inline-grid; place-items: center; width: 48px; height: 48px;
  border-radius: 50%; background: #fdecea; color: var(--danger); margin-bottom: .6rem; }
.status-badge-lg { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  margin-bottom: .8rem; }
.status-badge-lg.ok { background: #e6f5ee; color: var(--accent-green); }
.status-badge-lg.wait { background: var(--brand-soft); color: var(--brand-dark); }
.pub-centered { text-align: center; }
.icon-list li { display: flex; align-items: center; gap: .5rem; list-style: none; }
.icon-list { padding-left: 0; }
.pub-brand-mark, .auth-brand-mark { display: inline-flex; vertical-align: -0.2em; }
.workflow-icon { background: var(--brand-soft); color: var(--brand-dark); }
.workflow-field { display: flex; flex-direction: column; gap: .4rem; text-align: left; margin: 1rem 0; }
.workflow-field textarea { padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; }
.danger-dialog .page-actions, .workflow-dialog .page-actions { justify-content: center; margin-top: 1.2rem; }

.empty-state { text-align: center; padding: 2rem 1rem; color: var(--muted); }
.empty-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--canvas); color: var(--muted); margin-bottom: .6rem; border: 1px solid var(--line); }
.empty-state strong { display: block; color: var(--ink); }

.toast-stack { position: fixed; top: 1rem; right: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 50; }
.toast { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand);
  padding: .7rem 1rem; border-radius: 10px; box-shadow: var(--shadow); font-size: .85rem; max-width: 340px; }
.toast.success { border-left-color: var(--accent-green); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--accent-amber); }

/* Auth */
.auth-body { display: grid; place-items: center; min-height: 100vh; background: var(--canvas); }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 2rem;
  width: 100%; max-width: 380px; box-shadow: var(--shadow); }
.auth-brand { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; font-weight: 700; margin-bottom: 1rem; }
.auth-sub { color: var(--muted); margin-top: -.2rem; }
.auth-card .form-group { margin-bottom: 1rem; }

/* School switcher */
.school-switch select, .school-tag {
  padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 9px;
  background: var(--canvas); color: var(--ink); font: inherit; font-size: .82rem; max-width: 200px;
}
.school-tag { display: inline-block; }

/* ===========================================================================
   PUBLIC SITE — structure matched to ../eshop's templates/public/{base,landing}.html
   (site-header / hero-band / section / feature-grid / step-grid / cta-band /
   site-footer), kept in SchoolFlow's own blue brand rather than eshop's green.
   =========================================================================== */
body.public, .pub-body { background: var(--canvas); color: var(--ink); }

/* ---- Header -------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header-inner { max-width: 1180px; margin: 0 auto; padding: 0 28px;
  height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.site-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 800;
  font-size: 15.5px; color: var(--ink); letter-spacing: -.01em; }
.site-brand:hover { text-decoration: none; }
.site-brand-mark { width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 800;
  background: linear-gradient(140deg, var(--brand), var(--accent)); }
.site-nav { display: flex; align-items: center; gap: 20px; }
.site-nav a:not(.btn) { color: var(--muted); font-weight: 550; font-size: 13.5px; }
.site-nav a:not(.btn):hover { color: var(--ink); text-decoration: none; }
.site-nav .btn { margin-left: 2px; }

/* ---- Notices --------------------------------------------------------------- */
.notice-wrap { max-width: 1180px; margin: 16px auto 0; padding: 0 28px; }
.pub-notices { display: grid; gap: 10px; margin-bottom: 1.4rem; }
.notice { padding: 12px 15px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 0;
  background: var(--brand-soft); color: var(--ink); border: 1px solid transparent; }
.notice.success { background: #e6f5ee; color: var(--accent-green); }
.notice.error { background: var(--danger-soft); color: var(--danger); }
.notice.warning { background: #fbeede; color: var(--accent-amber); }

/* ---- Layout ---------------------------------------------------------------- */
.pub-main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 2.5rem 28px 64px; }
.pub-centered { text-align: center; }
.pub-section, .section { margin: 0; padding: 56px 0; }
.pub-main > .pub-section:first-child, .pub-main > .section:first-child,
.pub-main > .hero-band + .pub-section, .pub-main > .hero-band + .section { padding-top: 0; }
.pub-section-head, .section-head { margin-bottom: 32px; }
.section-head { text-align: center; }
.pub-section-head h2, .section-head h2 { font-size: clamp(22px, 3vw, 28px); letter-spacing: -.02em; }
.pub-section-head p, .section-head p { color: var(--muted); margin: 8px 0 0; font-size: 14.5px; }
.section-head p { max-width: 56ch; margin-inline: auto; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.site-footer-inner { max-width: 1180px; margin: 0 auto; padding: 36px 28px 24px;
  display: flex; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.site-footer-inner strong { font-size: 14.5px; display: inline-flex; align-items: center; gap: 8px; }
.site-footer-inner p { font-size: 13px; color: var(--text-faint); margin-top: 6px; max-width: 40ch; }
.site-footer-inner nav { display: flex; flex-direction: column; gap: 8px; }
.site-footer-inner nav a { font-size: 13px; color: var(--muted); }
.site-footer-base { max-width: 1180px; margin: 0 auto; padding: 14px 28px 28px;
  font-size: 12px; color: var(--text-faint); border-top: 1px solid var(--line); }

/* ---- Hero band (matches eshop's .hero-band / .hero-inner; kept contained
   within .pub-main's width instead of eshop's full-viewport bleed, to avoid a
   horizontal-scrollbar breakout on the many narrower public pages) --------- */
.hero-band { background:
    radial-gradient(900px 420px at 12% -20%, var(--brand-soft), transparent),
    radial-gradient(720px 380px at 92% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent),
    var(--surface);
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden; }
.hero-inner { padding: 56px 44px 48px; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--brand-dark); }
.hero-inner h1 { font-size: clamp(28px, 4.6vw, 44px); line-height: 1.08; letter-spacing: -.03em;
  margin: 14px 0; max-width: 18ch; }
.hero-inner > p { font-size: 16px; color: var(--muted); max-width: 54ch; line-height: 1.6; }
.hero-actions { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.btn-lg { padding: 12px 22px; font-size: 14px; border-radius: 10px; }
.hero-stats { display: flex; gap: 40px; margin-top: 44px; flex-wrap: wrap; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats b, .hero-stats strong { font-size: 25px; font-weight: 780; letter-spacing: -.02em; }
.hero-stats span { font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) { .hero-inner { padding: 40px 24px 36px; } }

/* ---- Feature grid (eshop's .feature-grid / .feature-card) --------------- */
.feature-grid, .pub-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.feature-card, .pub-feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow-sm); transition: transform .15s ease, border-color .15s ease; }
.feature-card:hover, .pub-feature:hover { transform: translateY(-2px); border-color: var(--brand); }
.fc-icon, .pub-feature-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font-size: 19px; background: var(--brand-soft); color: var(--brand-dark); margin-bottom: 12px; }
.feature-card h3, .pub-feature h3 { margin: 0 0 5px; font-size: 15px; }
.feature-card p, .pub-feature p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

/* ---- Steps (eshop's .step-grid / .step-card) ----------------------------- */
.step-grid, .pub-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px;
  counter-reset: step; }
.step-card, .pub-step { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); }
.step-card b, .pub-step::before { counter-increment: step; content: counter(step);
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.pub-step::before { display: inline-grid; border-radius: 8px; }
.step-card h3, .pub-step h3 { font-size: 14.5px; margin: 0 0 4px; }
.step-card p, .pub-step p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.55; }

/* ---- "Already live" strip (eshop's .shop-strip / .shop-chip) ------------ */
.school-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.school-chip { display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease; }
.school-chip:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; border-color: var(--line-strong); }
.school-chip strong { font-size: 14px; color: var(--ink); }
.school-chip span { font-size: 12px; color: var(--text-faint); }
.school-chip small { font-size: 11.5px; color: var(--brand-dark); font-weight: 650; margin-top: 2px; }

/* ---- Final CTA band (eshop's .cta-band) ---------------------------------- */
.cta-band { max-width: 1180px; margin: 0 auto; padding: 36px;
  background: linear-gradient(120deg, var(--brand-dark), var(--accent));
  border-radius: 18px; color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { color: #fff; font-size: 22px; letter-spacing: -.01em; }
.cta-band p { color: rgba(255,255,255,.86); margin-top: 6px; font-size: 14px; max-width: 48ch; }
.cta-band .btn-primary { background: #fff; color: var(--brand-dark); }
.cta-band .btn-primary:hover { background: #eef4fa; }

/* Before / after comparison */
.pub-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.2rem; }
.pub-compare-col { border-radius: var(--radius); padding: 1.4rem; }
.pub-compare-col.before { background: var(--canvas); border: 1px dashed var(--line); }
.pub-compare-col.after { background: var(--brand-soft); border: 1px solid var(--brand); }
.pub-compare-col h3 { margin: 0 0 .9rem; font-size: 1rem; }
.pub-compare-col.before h3 { color: var(--muted); }
.pub-compare-col.after h3 { color: var(--brand-dark); }
.pub-compare-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .65rem; }
.pub-compare-list li { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; }
.pub-compare-col.before li { color: var(--muted); }
.pub-compare-col.after li { color: var(--ink); font-weight: 500; }
.pub-compare-list .ico { flex-shrink: 0; margin-top: .1rem; }
.pub-compare-col.before .ico { color: #c4574a; }
.pub-compare-col.after .ico { color: var(--accent-green); }

/* FAQ */
.pub-faq { display: flex; flex-direction: column; gap: .6rem; max-width: 860px; }
.pub-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: .2rem 1.1rem; }
.pub-faq summary { cursor: pointer; padding: 1rem 0; font-weight: 600; font-size: .94rem;
  list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.pub-faq summary::-webkit-details-marker { display: none; }
.pub-faq summary::after { content: "+"; font-size: 1.3rem; color: var(--muted); font-weight: 400; flex-shrink: 0; }
.pub-faq details[open] summary::after { content: "–"; }
.pub-faq p { margin: 0 0 1rem; color: var(--muted); font-size: .88rem; max-width: 70ch; }

/* School directory */
.pub-search { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--line);
  border-radius: 11px; padding: .1rem .85rem; background: var(--surface); max-width: 420px;
  margin-bottom: 1.2rem; }
.pub-search span { display: inline-flex; color: var(--muted); }
.pub-search input { border: 0; background: transparent; padding: .6rem 0; flex: 1; color: var(--ink);
  outline: none; font: inherit; }
.pub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; }
.pub-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.3rem; display: flex; flex-direction: column; gap: .4rem; box-shadow: var(--shadow);
  color: var(--ink); transition: transform .12s ease, border-color .12s ease; }
.pub-card:hover { border-color: var(--brand); text-decoration: none; transform: translateY(-2px); }
.pub-card strong { font-size: 1rem; letter-spacing: -.01em; }
.pub-card small { color: var(--muted); }
.pub-card .badge { align-self: flex-start; margin-top: .3rem; }
.pub-card-logo { width: 46px; height: 46px; border-radius: 12px; background: var(--brand-soft);
  display: grid; place-items: center; font-weight: 800; color: var(--brand-dark); overflow: hidden;
  margin-bottom: .3rem; }
.pub-card-logo.lg { width: 76px; height: 76px; font-size: 1.6rem; border-radius: 16px; }
.pub-card-logo img { width: 100%; height: 100%; object-fit: cover; }
.pub-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 2rem; }
.pub-card-visit { color: var(--brand-dark); font-weight: 650; font-size: .8rem; margin-top: .2rem; }

/* School landing */
.pub-school-banner { border-radius: var(--radius); margin-bottom: 1.4rem; }
.pub-school-banner.has-image { background-size: cover; background-position: center;
  padding: 2.2rem 1.6rem 1.6rem; }
.pub-school-banner.has-image .pub-school-hero { background: transparent; border: 0;
  box-shadow: none; margin-bottom: 0; }
.pub-school-banner.has-image h1,
.pub-school-banner.has-image .pub-motto { color: #fff; }
.pub-school-banner.has-image .pub-motto { opacity: .92; }
.pub-school-hero { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow); margin-bottom: 1.4rem; }
.pub-school-hero h1 { margin: 0; letter-spacing: -.01em; }
.pub-motto { color: var(--muted); font-style: italic; margin: .3rem 0 .9rem; }

/* Activity / news feed */
.pub-activity-list { display: flex; flex-direction: column; gap: .8rem; }
.pub-activity { display: flex; gap: 1rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.2rem; }
.pub-activity-date { flex: 0 0 auto; width: 6.5rem; color: var(--muted); font-size: .8rem;
  font-weight: 600; }
.pub-activity strong { display: block; margin-bottom: .25rem; font-size: .95rem; }
.pub-activity p { margin: 0; color: var(--muted); font-size: .88rem; }

/* Gallery */
.pub-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .8rem; }
.pub-gallery-item { margin: 0; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface); }
.pub-gallery-item img { display: block; width: 100%; height: 140px; object-fit: cover; }
.pub-gallery-item figcaption { padding: .5rem .7rem; font-size: .78rem; color: var(--muted); }
.pub-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.pub-list { margin: .4rem 0 0; padding-left: 1.1rem; }
.pub-list li { margin: .35rem 0; }
.icon-list { padding-left: 0; }
.icon-list li { display: flex; align-items: center; gap: .5rem; list-style: none; }
.pub-note { background: var(--brand-soft); border-radius: 10px; padding: .8rem 1rem;
  font-size: .88rem; margin-top: 1rem; color: var(--brand-dark); }
.panel h2 { margin-bottom: .6rem; }

/* Action cards on the school page */
.pub-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.pub-action { display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); color: var(--ink); }
.pub-action:hover { border-color: var(--brand); text-decoration: none; transform: translateY(-2px); }
.pub-action-icon { display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: 10px; background: var(--brand-soft); color: var(--brand-dark); margin-bottom: .7rem; }
.pub-action strong { display: block; font-size: .95rem; }
.pub-action small { color: var(--muted); }

/* Fee statement */
.pub-statement { width: 100%; border-collapse: collapse; font-size: .88rem; }
.pub-statement th { text-align: left; padding: .65rem .8rem; background: var(--canvas); color: var(--muted);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.pub-statement td { padding: .75rem .8rem; border-bottom: 1px solid var(--line); vertical-align: middle; }
.pub-statement tr:last-child td { border-bottom: 0; }
.pub-statement .amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pub-due-banner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: .8rem; background: var(--brand-soft); border-radius: 12px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.pub-due-banner strong { font-size: 1.3rem; color: var(--brand-dark); }

.eyebrow { display: inline-block; font-size: .72rem; text-transform: uppercase; letter-spacing: .09em;
  color: var(--brand); font-weight: 700; margin-bottom: .3rem; }
.status-badge-lg { display: inline-grid; place-items: center; width: 56px; height: 56px;
  border-radius: 50%; margin-bottom: .8rem; }
.status-badge-lg.ok { background: #e6f5ee; color: var(--accent-green); }
.status-badge-lg.wait { background: var(--brand-soft); color: var(--brand-dark); }

/* ===========================================================================
   FAMILY PORTAL — reuses the staff shell (.shell/.sidebar/.topbar/.content,
   defined above), just with its own sidebar content and nav items.
   =========================================================================== */
.portal-head { margin-bottom: 1.4rem; }
.portal-head h1 { letter-spacing: -.01em; }
.portal-head .badge { margin-right: .35rem; }
.portal-back { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem;
  font-weight: 600; color: var(--muted); margin-bottom: .6rem; }
.portal-back:hover { color: var(--ink); text-decoration: none; }

.portal-notice { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem;
  background: var(--surface); box-shadow: var(--shadow); margin-bottom: .9rem; }
.portal-notice h3 { margin: 0 0 .2rem; font-size: .95rem; }
.portal-notice small { color: var(--muted); }
.portal-notice p { margin: .5rem 0 0; }
.portal-attention { list-style: none; margin: 0; padding: 0; }
.portal-attention li { display: flex; align-items: center; gap: .6rem; padding: .55rem 0;
  border-bottom: 1px solid var(--line); font-size: .9rem; }
.portal-attention li:last-child { border-bottom: 0; }
.portal-attention .att-ico { display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; background: #fbeede; color: var(--accent-amber); flex-shrink: 0; }

/* child picker cards */
.portal-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }
.portal-kid { display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.2rem; box-shadow: var(--shadow); color: var(--ink); }
.portal-kid:hover { border-color: var(--brand); text-decoration: none; transform: translateY(-2px); }
.portal-kid strong { display: block; font-size: 1.02rem; }
.portal-kid small { color: var(--muted); }
.portal-kid-foot { display: flex; justify-content: space-between; align-items: baseline;
  margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); font-size: .82rem; }
.portal-kid-foot b { font-size: 1rem; }

/* stat tiles */
.portal-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem;
  margin-bottom: 1.2rem; }
.portal-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem; box-shadow: var(--shadow); }
.portal-tile span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); }
.portal-tile strong { font-size: 1.5rem; display: block; margin-top: .2rem; letter-spacing: -.01em; }
.portal-tile.warn strong { color: var(--accent-amber); }
.portal-tile.good strong { color: var(--accent-green); }

.portal-section { margin-top: 1.8rem; }
.portal-section > h2 { margin-bottom: .8rem; font-size: 1.1rem; }

/* results */
.result-exam { margin-bottom: 1rem; }
.result-exam-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
  gap: .4rem; margin-bottom: .5rem; }
.result-exam-head h3 { margin: 0; font-size: .95rem; }
.result-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.result-table th { text-align: left; padding: .55rem .7rem; background: var(--canvas); color: var(--muted);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.result-table td { padding: .6rem .7rem; border-bottom: 1px solid var(--line); }
.result-table tr:last-child td { border-bottom: 0; }
.result-bar { position: relative; height: 6px; background: var(--canvas); border-radius: 999px;
  overflow: hidden; min-width: 90px; }
.result-bar i { position: absolute; inset: 0 auto 0 0; background: var(--brand); border-radius: 999px; }

/* ===========================================================================
   ATTENDANCE REGISTER
   =========================================================================== */
.att-summary { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.att-summary-tile { flex: 1; min-width: 92px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: .6rem .8rem; box-shadow: var(--shadow); }
.att-summary-tile span { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); }
.att-summary-tile strong { font-size: 1.3rem; letter-spacing: -.01em; }
.att-summary-tile.good strong { color: var(--accent-green); }
.att-summary-tile.bad strong { color: var(--danger); }
.att-summary-tile.warn strong { color: var(--accent-amber); }

.att-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.att-tab { font: inherit; font-weight: 600; font-size: .82rem; padding: .45rem .85rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted);
  display: inline-flex; align-items: center; gap: .3rem; }
.att-tab:hover { color: var(--ink); }
.att-tab.done { color: var(--accent-green); border-color: #bfe6d3; background: #e6f5ee; }
.att-tab.current { background: var(--brand); border-color: var(--brand); color: #fff; }

.att-toolbar { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }

.att-list-wrap { padding: 0; }
.att-list { list-style: none; margin: 0; padding: 0; counter-reset: att; }
.att-row { display: grid; grid-template-columns: minmax(160px, 1.4fr) auto minmax(140px, 1fr);
  gap: .8rem 1rem; align-items: center; padding: .7rem 1.1rem; border-bottom: 1px solid var(--line); }
.att-row:last-child { border-bottom: 0; }
.att-row[data-status=""] { background: color-mix(in srgb, var(--accent-amber) 6%, transparent); }
.att-student strong { display: block; font-size: .9rem; }
.att-student small { color: var(--muted); }

.att-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden;
  background: var(--canvas); }
.att-opt { position: relative; }
.att-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.att-opt span { display: block; padding: .5rem .7rem; font-size: .8rem; font-weight: 700; color: var(--muted);
  border-right: 1px solid var(--line); cursor: pointer; user-select: none; min-width: 2.4rem; text-align: center; }
.att-opt:last-child span { border-right: 0; }
.att-opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: -2px; }
.att-present input:checked + span { background: #e6f5ee; color: var(--accent-green); }
.att-absent  input:checked + span { background: #fdecea; color: var(--danger); }
.att-late    input:checked + span { background: #fbeede; color: var(--accent-amber); }
.att-excused input:checked + span { background: var(--brand-soft); color: var(--brand-dark); }

.att-remark { font-size: .84rem; padding: .45rem .6rem; }

.att-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: .6rem;
  padding: .9rem 0; margin-top: 1rem; background: linear-gradient(to top, var(--canvas) 70%, transparent); }

@media (max-width: 760px) {
  .att-row { grid-template-columns: 1fr; gap: .5rem; }
  .att-seg { width: 100%; }
  .att-opt { flex: 1; }
  .att-opt span { min-width: 0; }
}

/* ===========================================================================
   REPORTS
   =========================================================================== */
.export-group { display: inline-flex; align-items: center; gap: .3rem; }
.report-builder-panel { padding: 1.3rem; }
.report-builder { display: flex; flex-wrap: wrap; gap: .9rem; align-items: flex-end; }
.report-field { display: flex; flex-direction: column; gap: .3rem; }
.report-field span { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.report-field select, .report-field input { padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
.report-field-wide { flex: 1; min-width: 240px; }
.report-builder .btn { height: 40px; }

.report-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem;
  margin: 1.2rem 0; }
.report-group h2 { margin-bottom: .8rem; }
.report-links { display: flex; flex-direction: column; gap: .7rem; }
.report-link { border: 1px solid var(--line); border-radius: 10px; padding: .8rem .9rem; background: var(--canvas); }
.report-link strong { display: block; font-size: .9rem; }
.report-link small { display: block; color: var(--muted); margin: .15rem 0 .35rem; }
.report-link em { font-size: .72rem; color: var(--brand-dark); font-style: normal; font-weight: 600; }

/* Timetable grid */
.timetable-grid td { vertical-align: top; }
.timetable-grid .tt-time { font-weight: 700; white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }
.tt-cell.filled { background: var(--brand-soft); }
.tt-cell strong { display: block; font-size: .85rem; }
.tt-cell small { display: block; color: var(--muted); font-size: .74rem; }
.tt-empty { color: var(--line); }

/* Quiz taking */
.quiz-q h2 { font-size: 1rem; margin-bottom: .2rem; }
.quiz-choices { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.quiz-choice { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--line);
  border-radius: 10px; padding: .6rem .8rem; cursor: pointer; }
.quiz-choice:hover { border-color: var(--brand); }
.quiz-choice input { margin-top: .15rem; }
.quiz-choice.result { cursor: default; }
.quiz-choice.result.correct { border-color: #bfe6d3; background: #e6f5ee; }
.quiz-choice.result.wrong { border-color: #f3c9c4; background: #fdecea; }
.quiz-choice .badge { margin-left: .4rem; }

@media (max-width: 980px) {
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .site-nav a:not(.btn) { display: none; }
  .school-strip { grid-template-columns: 1fr; }
  .cta-band { flex-direction: column; align-items: flex-start; text-align: left; }
  .portal-header { padding: .7rem 1.1rem; }
  .portal-main { padding: 1.4rem 1.1rem 2.5rem; }
  .portal-footer-inner { padding: 1rem 1.1rem; }
  .portal-brand-tag { display: none; }
  .portal-user span:last-child { display: none; }
}
@media (max-width: 820px) {
  .sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%);
    transition: transform .2s ease; }
  .shell.nav-open .sidebar { transform: translateX(0); }
  .shell.nav-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 55; }
  .mobile-close { display: grid; place-items: center; }
  [data-open-nav] { display: grid; place-items: center; }
  .topbar-user-copy { display: none; }
}