/* SPDX-License-Identifier: LicenseRef-Proprietary
   Copyright (C) 2026, araCreate Group
   Author: Vishnu Varthan <vishnu@aracreate.group>
   Description: This file contains the whole visual layer of the app */

/* ===========================================================
   Bootcamp Dashboard

   The araCreate design system ships ninety-odd components and
   the app was using twelve of them, which read as clutter
   rather than as a product. This file keeps the two things
   that are actually the brand — the colours and the logo —
   and builds the rest at the size this app needs.

   Brand, from araCreate's own logo files:
     golden sun  #f9bf3b     graphite  #555555
   Everything else here is a neutral derived from those two.
   =========================================================== */

:root {
  /* brand */
  --gold:        #f9bf3b;
  --gold-hover:  #f0b32a;
  --gold-soft:   #fdf3d8;
  --ink:         #262626;      /* body text — graphite, darkened for contrast */
  --ink-soft:    #5d5d5d;      /* muted text. #6f6f6f measured 4.11:1 on the  */
                               /* page once it was deepened, under the 4.5    */
                               /* AA needs. This measures 5.39:1 there and    */
                               /* 6.58:1 on a card.                           */

  /* surfaces
     The page was #f6f6f6 against a #ffffff card — a 3% step that a projector
     and a phone in daylight both lose, so every screen read as flat white.
     Deepened to a step you can actually see, and the border darkened with it. */
  --page:        #e8e8ec;
  --card:        #ffffff;
  --line:        #d8d8de;
  --line-strong: #b8b8c0;

  /* state */
  --good:        #1c7c54;
  --good-soft:   #e7f3ed;
  --warn-soft:   var(--gold-soft);

  /* scale — one ramp, used everywhere */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  --radius:  10px;
  --shadow:  0 1px 2px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.04);
  --focus:   0 0 0 3px rgba(249,191,59,.45);

  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.25; margin: 0; font-weight: 650; letter-spacing: -.01em; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p  { margin: 0; }
a  { color: inherit; }

:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }

.muted  { color: var(--ink-soft); font-size: 14px; }
.tiny   { color: var(--ink-soft); font-size: 13px; }
.stack  { display: grid; gap: var(--s4); }
.stack-s{ display: grid; gap: var(--s2); }
.row    { display: flex; align-items: center; gap: var(--s3); }
.between{ display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.grow   { flex: 1; min-width: 0; }
.wrap   { overflow-wrap: anywhere; }

/* ---------- app frame ----------
   A sidebar on a laptop; the same sidebar as a slide-in drawer on a phone,
   where 240px of permanent navigation would leave nothing for the content.
   One set of markup, one set of styles, the media query does the rest. */

.app { min-height: 100vh; }

.side {
  position: fixed; inset: 0 auto 0 0; z-index: 50;
  /* On a phone the drawer takes most of the screen, so what is left is
     clearly a dimmed page rather than a second panel beside the menu.
     The desktop rule below pins it back to a fixed 250px column. */
  width: min(300px, 82vw);
  display: flex; flex-direction: column;
  background: var(--card);
  border-right: 1px solid var(--line);
  padding: var(--s4) var(--s3);
  transform: translateX(-100%);
  transition: transform .2s ease;
}
.side[data-open="1"] { transform: none; }

.side__brand {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3) var(--s5);
}
.side__brand img { height: 26px; width: auto; display: block; }
.side__brand span { font-weight: 650; font-size: 15px; }

.side__nav { display: grid; gap: 2px; }
.side__nav button {
  display: flex; align-items: center; gap: var(--s3);
  width: 100%; text-align: left;
  padding: 11px var(--s3);
  border: 0; border-radius: 8px; background: none; cursor: pointer;
  font: inherit; font-size: 15px; color: var(--ink);
  min-height: 44px;                      /* a thumb target, not a mouse target */
}
.side__nav button svg { width: 20px; height: 20px; flex: none; }
.side__nav button:hover { background: var(--page); }
.side__nav button[aria-current="page"] {
  background: var(--gold-soft); color: var(--ink); font-weight: 600;
}

.side__foot { margin-top: auto; padding-top: var(--s4); border-top: 1px solid var(--line); }
.side__who { padding: var(--s2) var(--s3); }
.side__who strong { display: block; font-size: 14px; }
.side__who span { font-size: 12px; color: var(--ink-soft); }

/* The dimmed page behind an open drawer. Tapping it closes the drawer. */
.scrim {
  /* Covers the whole viewport and sits under the drawer. Insetting it to the
     drawer's width instead left a visible seam down the screen, which read as
     a second panel rather than as a dimmed page. */
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,.45);
  border: 0; padding: 0;
}

.bar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--card);
  border-bottom: 1px solid var(--line);
}
.bar img { height: 24px; width: auto; display: block; }
.bar .title { font-weight: 650; font-size: 15px; }
.bar__menu {
  display: grid; place-items: center;
  width: 40px; height: 40px; margin-left: -6px;
  border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--ink);
}
.bar__menu:hover { background: var(--page); }
.bar__menu svg { width: 22px; height: 22px; }

.main {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s7);
}

@media (min-width: 900px) {
  /* The sidebar is permanent, so the drawer's button and scrim go away. */
  .side { transform: none; width: 250px; }
  .bar__menu, .scrim { display: none; }
  .bar { display: none; }
  .app { padding-left: 250px; }
  .main { padding-top: var(--s6); }
}

/* ---------- card ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  box-shadow: var(--shadow);
}
.card + .card { margin-top: var(--s4); }
.card > h2 { margin-bottom: var(--s4); }
.card--flat { box-shadow: none; }

.sectionhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); margin: var(--s6) 0 var(--s3);
}
.sectionhead:first-child { margin-top: 0; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: 11px var(--s5);
  border: 1px solid transparent; border-radius: 8px;
  background: var(--gold); color: #3a2c05;
  font: inherit; font-weight: 600; font-size: 15px;
  cursor: pointer;
  transition: background .12s ease;
  min-height: 44px;                      /* a thumb target, not a mouse target */
}
.btn:hover:not(:disabled) { background: var(--gold-hover); }
.btn:disabled { opacity: .55; cursor: default; }
.btn--quiet { background: var(--card); border-color: var(--line-strong); color: var(--ink); }
.btn--quiet:hover:not(:disabled) { background: var(--page); }
.btn--link {
  background: none; border: 0; padding: 0; min-height: 0;
  color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
  font-weight: 500; font-size: 14px;
}
.btn--sm { padding: 7px var(--s4); font-size: 14px; min-height: 38px; }
.btn--block { width: 100%; }

/* ---------- form ---------- */

.f { display: grid; gap: 6px; }
.f > label { font-size: 14px; font-weight: 600; }
.f .hint { font-size: 13px; color: var(--ink-soft); }

.in {
  width: 100%;
  padding: 11px var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  font: inherit; font-size: 16px;        /* 16px or iOS zooms on focus */
  color: var(--ink);
}
.in:focus { outline: none; border-color: var(--gold); box-shadow: var(--focus); }
textarea.in { resize: vertical; min-height: 96px; line-height: 1.55; }

/* The browser's own file button is inconsistent and ugly; this wraps it. */
.file {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3);
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--page);
}
.file input[type=file] { flex: 1; min-width: 0; font-size: 14px; }
.file input[type=file]::file-selector-button {
  margin-right: var(--s3); padding: 7px var(--s3);
  border: 1px solid var(--line-strong); border-radius: 6px;
  background: var(--card); font: inherit; font-size: 14px; cursor: pointer;
}

/* ---------- status ---------- */

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--page); color: var(--ink-soft);
  border: 1px solid var(--line);
}
.pill--done { background: var(--good-soft); color: var(--good); border-color: transparent; }
.pill--now  { background: var(--gold); color: #3a2c05; border-color: transparent; }
.pill--wait { background: var(--warn-soft); color: #7a5a00; border-color: transparent; }

.note {
  display: flex; gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 14px;
}
.note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; stroke: currentColor;
            fill: none; stroke-width: 1.7; color: var(--ink-soft); }
.note--bad  { background: #fdeceb; border-color: #f5c4c0; color: #8a2018; }
.note--good { background: var(--good-soft); border-color: #bfe0d0; color: var(--good); }

/* ---------- today: the one list that matters ---------- */

.hero { margin-bottom: var(--s5); }
.hero h1 { margin-bottom: 2px; }

.progress { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--gold); border-radius: inherit; }

.task {
  display: flex; align-items: flex-start; gap: var(--s3);
  width: 100%; text-align: left;
  padding: var(--s4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card);
  font: inherit; color: inherit;
  cursor: pointer;
}
.task + .task { margin-top: var(--s2); }
.task:hover { border-color: var(--line-strong); }
.task[data-done="1"] { background: var(--page); box-shadow: none; }
.task[data-done="1"] .task__t { color: var(--ink-soft); }
.task--next { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }

.task__box {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  border: 1.5px solid var(--line-strong); border-radius: 50%;
  display: grid; place-items: center;
}
.task[data-done="1"] .task__box { background: var(--good); border-color: var(--good); }
.task__box svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 2.5; fill: none; }
.task__t { font-weight: 600; font-size: 15px; }
.task__n { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }
.task__go { flex: none; align-self: center; color: var(--ink-soft); }
.task__go svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }

/* ---------- a handed-in photo ----------
   A phone camera gives a 4:3 portrait; capped by height so a tall photo
   cannot push the mark and the comment off the screen. */

.shot {
  display: block; width: 100%; max-height: 320px;
  object-fit: cover; object-position: center;
  margin-top: var(--s3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--page);
}

/* ---------- stats ---------- */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s3); }
.stat { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--radius);
        background: var(--card); text-align: center; }
.stat b { display: block; font-size: 24px; font-weight: 680; letter-spacing: -.02em; }
.stat span { display: block; font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.stat--gold { background: var(--gold-soft); border-color: transparent; }

/* ---------- the daily log ---------- */

.log { display: grid; gap: var(--s3); }
.logitem {
  display: grid; grid-template-columns: 34px 1fr; gap: var(--s3);
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.logitem:last-child { border-bottom: 0; padding-bottom: 0; }
.logitem b {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gold-soft); font-size: 13px; font-weight: 650;
}
.logitem p { white-space: pre-wrap; font-size: 14px; }

/* ---------- table ---------- */

.tablewrap { overflow-x: auto; margin: 0 calc(var(--s5) * -1) calc(var(--s5) * -1);
             padding: 0 var(--s5) var(--s5); }
/* A scroll container is focusable, and Chrome rings it on click. The ring on
   a table that only just overflows reads as a stray dotted box. */
.tablewrap:focus { outline: none; }
.tablewrap:focus-visible { box-shadow: var(--focus); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
     color: var(--ink-soft); font-weight: 600; padding: 0 var(--s3) var(--s2); }
td { padding: var(--s3); border-top: 1px solid var(--line); }
tr[data-me="1"] { background: var(--gold-soft); }
tr[data-me="1"] td { font-weight: 600; }

/* ---------- sign in ---------- */

/* The college's own gate, so the first screen is somewhere a student
   recognises. Two files: 206 phones on college wifi get the 51 KB one, and
   only a wide screen pays for the 140 KB version. */

.signin {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;          /* a phone's address bar must not crop it */
  display: grid; place-items: center;
  padding: var(--s4);
  background: var(--page) url("login-bg-sm.jpg") center / cover no-repeat;
}

@media (min-width: 900px) {
  .signin { background-image: url("login-bg.jpg"); }
}

/* The photo is 16:9 and a tall phone crops it hard. The card covers the
   middle, so the arch is pulled into the band that stays visible above it
   rather than sitting behind the form where nobody sees it. */
@media (max-width: 560px) {
  .signin { background-position: 50% 28%; }
  /* Sit the card low enough that the gate has room to read above it. */
  .signin { align-content: end; padding-bottom: var(--s7); }
}

/* A veil, so the form reads whatever the photo is doing behind it. The photo
   is already pale and overexposed, so this stays light rather than darkening
   it — a dark scrim over a white sky reads as a mistake. */
.signin::before {
  content: "";
  position: absolute; inset: 0;
  /* Lighter at the top, where the logo sits on the overexposed sky, and
     stronger low down behind the gate detail. Kept under 50% so the gate is
     still the college's gate rather than a grey wash. */
  background: linear-gradient(180deg, #ffffff26, #ffffff73);
}

.signin__box {
  position: relative;          /* above the veil */
  width: 100%; max-width: 380px;
}

/* The card lifts off the photo rather than sitting flat on it. */
.signin__box .card { box-shadow: 0 8px 28px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08); }

/* The logo sits inside the card, on the card's own white, so it needs no
   backing of its own. With the card behind it there is room to let it run a
   little larger than it did on the photo. */
.signin__logo {
  display: block; height: 52px;
  margin: 0 auto var(--s4);
}

/* Visible to a screen reader, to nobody else. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- loading ----------
   A skeleton in the shape of the page that is coming, rather than the word
   "Loading". On college wifi a request can take a second or two, and a grey
   block that is already the right shape reads as "nearly there" where a line
   of text reads as "nothing happened". */

.skel { display: grid; gap: var(--s3); }
.skel i {
  display: block; height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, var(--line) 25%, #f1f1f4 50%, var(--line) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.skel i:nth-child(1) { width: 40%; height: 22px; }
.skel i:nth-child(2) { width: 85%; }
.skel i:nth-child(3) { width: 70%; }
.skel .block { height: 92px; border-radius: var(--radius); margin-top: var(--s2); }

@keyframes shimmer { to { background-position: -200% 0; } }

/* Someone who prefers less motion gets a plain block, not a moving one. */
@media (prefers-reduced-motion: reduce) {
  .skel i { animation: none; background: var(--line); }
}

/* A button that is doing something says so, and cannot be pressed twice. */
.btn[data-busy="1"], .ac-btn[data-busy="1"] { opacity: .75; cursor: progress; }
.btn[data-busy="1"]::before, .ac-btn[data-busy="1"]::before {
  content: ''; width: 13px; height: 13px; margin-right: 7px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .btn[data-busy="1"]::before, .ac-btn[data-busy="1"]::before { animation: none; }
}

/* ---------- empty ---------- */

.empty { text-align: center; padding: var(--s6) var(--s4); }
.empty h3 { margin-bottom: var(--s2); }

/* ---------- toast ---------- */

.toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 60;
  padding: var(--s3) var(--s5);
  background: var(--ink); color: #fff;
  border-radius: 999px; font-size: 14px; font-weight: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  animation: rise .18s ease;
}
@keyframes rise { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (min-width: 760px) { .toast { bottom: var(--s5); } }

/* ---------- quiz ---------- */

.qbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4); margin-bottom: var(--s4);
  background: var(--ink); color: #fff; border-radius: var(--radius);
}
.qbar .clock { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 18px; }
.qbar .clock[data-low="1"] { color: var(--gold); }

.opt {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s4); border: 1px solid var(--line-strong);
  border-radius: 8px; cursor: pointer; background: var(--card);
}
.opt + .opt { margin-top: var(--s2); }
.opt:has(input:checked) { border-color: var(--gold); background: var(--gold-soft); }
.opt input { margin: 3px 0 0; accent-color: var(--gold); width: 18px; height: 18px; }

@media (max-width: 420px) {
  .main { padding: var(--s4) var(--s3) var(--s7); }
  .card { padding: var(--s4); }
  .stats { gap: var(--s2); }
  .stat { padding: var(--s3); }
  .stat b { font-size: 20px; }
}

/* ===========================================================
   Admin screens

   The admin pages are built on the design system (.ac-*), which
   ds/system.css loads lazily the first time one of them opens.
   The system owns the components; what follows is only the
   layout glue around them that it leaves to the consumer —
   the same rules the pre-rebuild front end carried, restored
   here because app.js still emits this markup.

   These use --ac-* tokens on purpose: they are only ever on the
   page once ds/system.css is loaded, and they should track the
   system's scale rather than the student side's --s* ramp.
   =========================================================== */

.sub    { color: var(--ac-text-muted); font-size: var(--ac-text-sm); }
.hint   { color: var(--ac-text-muted); font-size: var(--ac-text-xs); }
.nowrap { white-space: nowrap; }

/* A row's actions, right-aligned in the last table column. */
.rowbtns { display: flex; gap: var(--ac-space-2); justify-content: flex-end; }

/* Who has handed in and who has not, as a filter above the table. The chosen
   one has to look chosen: these sit in a row and otherwise read as four
   buttons that did nothing when pressed. */
.filterbtn.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
/* The count rides inside the chip, so it takes the chip's own foreground
   rather than the muted grey .hint carries elsewhere: grey on the brand
   yellow is 3.9:1, under the 4.5 this size needs. */
.filterbtn .hint { color: inherit; opacity: .75; font-weight: 600; }
.filterbtn.is-on .hint { color: #fff; }

/* Team codes and register numbers must not wrap — a wrapped
   ECE-T35-CLOCKWORKS doubles the height of every row. */
.ac-table td { white-space: nowrap; }
.ac-table td .ac-cell-stack__sub { white-space: normal; }

/* ---------- a student's two resumes, side by side ---------- */

.resume-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ac-space-6); }
.resume-box {
  padding: var(--ac-space-6);
  border: var(--ac-border-width) solid var(--ac-border);
  background-color: var(--ac-surface-page);
}
.resume-box.done { background-color: var(--ac-golden-soft); }
.resume-box .rb-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--ac-space-4); margin-bottom: var(--ac-space-4);
}

/* A daily post keeps the line breaks the student typed. */
.tl-text { white-space: pre-wrap; margin: 0 0 var(--ac-space-2); }

/* ---------- forms inside admin cards ---------- */

.formgrid { display: grid; gap: var(--ac-space-6); }
.formgrid.two { grid-template-columns: 1fr 1fr; }

/* ---------- a question's answers, read-only ----------
   The student quiz styles .opt as a tappable label; on the admin
   side the same markup is a listing, so it loses the pointer and
   marks the correct answer instead of the chosen one. */

.opt.readonly { cursor: default; }
.opt.picked { border-color: var(--ac-accent-active); background-color: var(--ac-golden-soft); }
.opt .letter { font-weight: var(--ac-weight-medium); min-width: 1.4em; }

/* ---------- charts ----------
   The design system owns the frame (.ac-chart, .ac-bars). These are
   only the direct labels, which it leaves to the consumer. A label
   sits ABOVE its bar in a text token — never inside a Golden Sun
   fill, where graphite measures 4.45:1. */

.ac-bars__bar { position: relative; min-width: 0; }
.ac-bars__lab {
  position: absolute;
  left: 0; right: 0; top: -19px;
  text-align: center;
  font-family: var(--ac-font-mono);
  font-size: var(--ac-text-xs);
  color: var(--ac-text-heading);
}
.ac-chart__plot { padding-top: var(--ac-space-7); }
.ac-chart__head { flex-wrap: wrap; }
.ac-chart__title { white-space: nowrap; }

/* a ranked bar row — the honest shape for "top N by one measure" */
.ranked { display: grid; gap: var(--ac-space-5); }
.ranked-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--ac-space-4) var(--ac-space-6); align-items: baseline;
}
.ranked-row .ac-progress-bar { grid-column: 1 / -1; }
.ranked-name { font-size: var(--ac-text-sm); min-width: 0; overflow: hidden;
               text-overflow: ellipsis; white-space: nowrap; }
.ranked-val  { font-family: var(--ac-font-mono); font-size: var(--ac-text-sm);
               color: var(--ac-text-heading); }

/* ---------- admin: a wider column ----------
   .main is capped at 720px, which is the right measure for the student side:
   one column of text and cards read on a phone. An admin table carries six or
   seven columns and was overflowing that cap, pushing the row actions off the
   right edge. The admin pages get the width their tables actually need.

   Scoped to the body class the router sets, so the student pages keep theirs. */

body[data-admin="1"] .main { max-width: 1100px; }

/* ---------- admin: the same surfaces as the student side ----------
   ds/system.css carries its own canvas and stroke, set before the page
   background was deepened. Left alone the admin screens sit on #f6f6f6
   while the frame around them is #eeeef0, which shows as a seam down the
   page. These re-point the system's tokens at the values above. */

:root {
  --ac-canvas: var(--page);
  --ac-stroke: var(--line);

  /* The design system sets body text and headings to #555555, the brand
     graphite. That is a logo colour, not a reading colour: beside the
     student side's #262626 it reads as permanently greyed-out, which is
     the "fonts are too light" complaint. Re-pointed at the same ink the
     rest of the app uses.

     Measured on #ffffff / #e8e8ec:
       #555555  7.46 / 6.10   the system's value
       #262626 15.505 / 12.68  this one
     Muted text moves with it: #6f6f6f measured 4.11:1 on the deepened
     page, under the 4.5 AA needs. */
  --ac-text-primary: var(--ink);
  --ac-text-heading: var(--ink);
  --ac-text-muted:   var(--ink-soft);
  --ac-gray-450:     var(--ink-soft);

  /* Graphite on Golden Sun measures 4.45:1 — just under AA. The student
     side already uses a dark brown there, which measures 8.13:1. */
  --ac-text-on-accent: #3a2c05;
}

/* ---------- admin: give the design system's card an edge ----------
   .ac-card ships with a background and nothing else — no border, no shadow.
   On a page of stacked cards that reads as one flat sheet, which is the
   "everything is white" complaint. The same edge the student card has. */

.ac-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.ac-card + .ac-card { margin-top: var(--s4); }

/* ---------- admin: the card around a table ----------
   The admin pages share the student card(), which draws its own white box,
   border and radius. A bordered table inside that is a frame inside a frame
   on the same white — the "everything is white" look. So a card that holds a
   table stops being a box and lets the table be one.

   Not :only-child: several of these cards carry a heading above the table
   (Attendance by team is the one that showed it), and requiring the table to
   be alone left those with a square, unframed table inside a white card. */

.card:has(> .ac-table-wrap),
.ac-card:has(.ac-table-wrap),
.ac-card:has(.ac-table-wrap) > .ac-card__body {
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
  overflow: visible;      /* a heading above the table must not be clipped */
  border-radius: var(--radius);
}

/* A heading that has lost its card keeps the space the card was giving it. */
.ac-card:has(.ac-table-wrap) > .ac-card__body > :not(.ac-table-wrap) {
  margin-bottom: var(--s3);
}

/* The frame goes on the TABLE, not on the wrapper. The wrapper is a scroll
   container whose height does not track its child exactly, and a background
   on it showed as a strip of white under the last row. The table always
   ends where its last row ends, so it is the honest thing to draw. */
.card > .ac-table-wrap,
.ac-card .ac-table-wrap { background: none; border: 0; }
.card > .ac-table-wrap > table,
.ac-card .ac-table-wrap > table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
}

/* A scroll container is focusable, and Chrome rings it on click — a dotted
   box around a table that only just overflows. */
.ac-table-wrap:focus { outline: none; }
.ac-table-wrap:focus-visible { box-shadow: var(--focus); }

/* border-radius does not clip a collapsed table's own cells, so the corner
   cells round themselves and the dark header band follows the frame. */
.ac-table thead tr:first-child th:first-child { border-top-left-radius: var(--radius); }
.ac-table thead tr:first-child th:last-child  { border-top-right-radius: var(--radius); }
.ac-table tbody tr:last-child td:first-child  { border-bottom-left-radius: var(--radius); }
.ac-table tbody tr:last-child td:last-child   { border-bottom-right-radius: var(--radius); }

/* Zebra striping does the work the second border was doing: it separates the
   rows without drawing a line for each one. Grey rows on white, so the gold
   stays the page's only accent. */
.ac-table tbody tr:nth-child(even) { background-color: #fafafa; }
.ac-table tbody tr:hover { background-color: var(--gold-soft); }
.ac-table td { border-bottom: 1px solid #efefef; }
.ac-table tbody tr:last-child td { border-bottom: 0; }

/* The row actions were plain underlined text, which read as body copy in the
   last column. A quiet bordered button says "this does something". */
.rowbtns .ac-btn--link {
  padding: 5px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 13px;
}
.rowbtns .ac-btn--link:hover { background: var(--page); color: var(--ink); border-color: var(--ink-soft); }

/* ---------- admin: page furniture ----------
   A page opened with a toolbar whose title sat level with the table and no
   space under it. These give the admin pages the same rhythm the student
   side gets from .hero and .sectionhead. */

.ac-toolbar { margin-bottom: var(--s4); gap: var(--s4); }
.ac-toolbar__count { color: var(--ink-soft); font-size: 14px; font-weight: 500; }
.ac-card-grid { margin-bottom: var(--s5); }

/* ---------- admin on a phone ----------
   The tables carry six or seven columns on a laptop. Below 768px
   the secondary ones drop out rather than forcing a sideways
   scroll through the primary ones. */

@media (max-width: 767px) {
  .hide-sm { display: none; }
  .resume-row, .formgrid.two { grid-template-columns: 1fr; }

  /* a toolbar's action goes full width rather than squeezing beside the title */
  .ac-toolbar { align-items: stretch; }
  .ac-toolbar__spacer { margin-left: 0; }
  .ac-toolbar .ac-btn { width: 100%; }
}