/* ============================================================================
   SAMS — additions to the Base design system.
   Data entry: forms, the gradebook, the attendance register, and the printed
   report. Tokens only; no raw colours.
   ========================================================================= */

/* ---- Forms ---------------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: var(--space-4); }
.form-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.form-section {
  font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-muted);
  padding-top: var(--space-2); border-top: 1px solid var(--border);
}
.form-section:first-child { border-top: 0; padding-top: 0; }
.fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.fld--full { grid-column: 1 / -1; }
.fld__label { font-size: var(--text-xs); font-weight: 600; color: var(--ink-secondary); }
.fld__label .req { color: var(--status-critical); margin-inline-start: 2px; }
.fld__hint { font-size: var(--text-xs); color: var(--ink-muted); line-height: 1.4; }
.input {
  width: 100%; min-height: 36px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); font-size: var(--text-sm);
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);
}
.input:hover { border-color: var(--brand-navy-300); }
.input:focus { outline: none; border-color: var(--series-1); box-shadow: 0 0 0 3px var(--status-info-bg); }
.input[aria-invalid="true"] { border-color: var(--status-critical); }
textarea.input { min-height: 84px; resize: vertical; line-height: 1.5; }
select.input {
  appearance: none; cursor: pointer; padding-inline-end: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-muted) 50%),
                    linear-gradient(135deg, var(--ink-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
[dir="rtl"] select.input { background-position: 16px 55%, 11px 55%; }
.check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--brand-navy); }

.form-error {
  display: flex; gap: var(--space-2); align-items: flex-start;
  padding: var(--space-3); border-radius: var(--radius);
  background: var(--status-critical-bg); color: var(--ink); font-size: var(--text-sm);
}
.form-error svg { color: var(--status-critical); flex: 0 0 auto; margin-top: 1px; }
.form-error ul { margin-top: var(--space-1); padding-inline-start: var(--space-4); list-style: disc; }

.btn--danger { color: var(--status-critical); border-color: var(--status-critical-bg); }
.btn--danger:hover { background: var(--status-critical-bg); border-color: var(--status-critical); }
.btn--primary.btn--danger { background: var(--status-critical); border-color: var(--status-critical); color: var(--ink-on-dark); }
.btn--primary.btn--danger:hover { background: var(--status-critical); filter: brightness(0.92); }
.btn[data-busy="true"] { cursor: progress; }
.btn .spin {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }

/* Modals: padded body that scrolls between a fixed head and foot */
.modal__panel { display: flex; flex-direction: column; overflow: hidden; }
.modal .drawer__body { padding: var(--space-5); overflow-y: auto; }
.modal .drawer__foot { justify-content: flex-end; }
.modal--wide .modal__panel { width: min(760px, calc(100vw - 32px)); }
.fld.check { flex-direction: row; align-items: center; gap: var(--space-2); }

/* ---- Topbar additions ----------------------------------------------------- */
.termctl { display: inline-flex; align-items: center; gap: var(--space-2); }
.termctl__label { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-muted); }
.search-pop { min-width: min(420px, calc(100vw - 24px)); max-height: 70vh; overflow-y: auto; }
.search-pop .menu__label { padding-top: var(--space-3); }
.search-pop button { min-height: 40px; }
.search-pop .sp-meta { margin-inline-start: auto; font-size: var(--text-2xs); color: var(--ink-muted); }
.search-pop .sp-empty { padding: var(--space-3); font-size: var(--text-sm); color: var(--ink-muted); }

/* ---- Letters, numbers ----------------------------------------------------- */
.letter {
  display: inline-grid; place-items: center;
  min-width: 26px; height: 22px; padding: 0 6px;
  border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  font-size: var(--text-xs); font-weight: 700; color: var(--brand-navy);
  background: var(--surface);
}
.letter--fail { color: var(--status-critical); border-color: var(--status-critical); background: var(--status-critical-bg); }
.pctcell { display: inline-flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.trend-up { color: var(--success-text); }
.trend-down { color: var(--status-critical); }
.nowrap { white-space: nowrap; }
.link {
  color: var(--series-1); text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
}
.link:hover { text-decoration-color: currentColor; }

/* ---- Profile header ------------------------------------------------------- */
.profile-head { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.profile-head .avatar--lg { width: 56px; height: 56px; font-size: var(--text-lg); }
.profile-head__body { flex: 1 1 260px; min-width: 0; }
.profile-head h1 { font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.02em; }
.profile-head__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.reasons { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--ink-secondary); }
.reasons li { display: flex; gap: var(--space-2); align-items: center; }
.reasons svg { color: var(--ink-muted); flex: 0 0 auto; }

/* ---- Gradebook ------------------------------------------------------------ */
.gradebook th, .gradebook td { padding: var(--space-2) var(--space-3) !important; }
.gradebook th.sticky, .gradebook td.sticky {
  position: sticky; inset-inline-start: 0; z-index: 2; background: var(--surface);
  box-shadow: 1px 0 0 var(--border);
}
.gradebook thead th.sticky { z-index: 3; background: var(--surface-sunken); }
.gradebook thead th { vertical-align: bottom; white-space: normal; min-width: 92px; }
.gradebook .ahead { display: flex; flex-direction: column; gap: 2px; text-transform: none; letter-spacing: 0; }
.gradebook .ahead b { font-size: var(--text-xs); color: var(--ink); font-weight: 600; }
.gradebook .ahead span { font-size: var(--text-2xs); color: var(--ink-muted); font-weight: 500; }
.gradebook .ahead button { align-self: flex-start; }
.gradebook tfoot td { background: var(--surface-sunken); font-size: var(--text-xs); font-weight: 600; border-bottom: 0; }
.score {
  width: 76px; height: 32px; padding: 0 var(--space-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); text-align: end; font-variant-numeric: tabular-nums;
  font-size: var(--text-sm);
}
.score:hover { border-color: var(--border-strong); }
.score:focus { outline: none; border-color: var(--series-1); box-shadow: 0 0 0 3px var(--status-info-bg); }
.score[data-dirty="true"] { background: var(--status-info-bg); border-color: var(--series-1); }
.score[aria-invalid="true"] { background: var(--status-critical-bg); border-color: var(--status-critical); }
.score::-webkit-inner-spin-button, .score::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.score { -moz-appearance: textfield; }

.savebar {
  position: sticky; bottom: var(--space-4); z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4);
  background: var(--brand-navy); color: var(--ink-on-dark);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
}
.savebar[hidden] { display: none; }
.savebar .btn { border-color: transparent; }
.savebar .btn--ghost { color: var(--ink-on-dark-dim); }
.savebar .btn--ghost:hover { background: var(--sidebar-hover); color: var(--ink-on-dark); }
.savebar .btn--primary { background: var(--brand-yellow); color: var(--brand-navy); }
.savebar .btn--primary:hover { background: var(--brand-yellow); filter: brightness(0.95); }
.savebar :focus-visible { outline-color: var(--brand-yellow); }

/* ---- Attendance register --------------------------------------------------- */
.register { display: flex; flex-direction: column; }
.register__row {
  display: grid; align-items: center; gap: var(--space-3);
  grid-template-columns: minmax(180px, 1fr) auto minmax(120px, 220px);
  padding: var(--space-2) var(--space-5); border-bottom: 1px solid var(--border);
}
.register__row:last-child { border-bottom: 0; }
.register__row[data-status=""] .person__name::after {
  content: "Not marked"; margin-inline-start: var(--space-2);
  font-size: var(--text-2xs); font-weight: 500; color: var(--ink-muted);
}
.att-seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.att-seg button {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 34px; padding: 0 var(--space-3);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-secondary);
  font-size: var(--text-xs); font-weight: 500; cursor: pointer;
  transition: background var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.att-seg button svg { width: 13px; height: 13px; }
.att-seg button:hover { border-color: var(--brand-navy-300); color: var(--ink); }
.att-seg button[aria-checked="true"] { font-weight: 700; color: var(--ink); }
.att-seg button[data-v="present"][aria-checked="true"]    { background: var(--status-good-bg);     border-color: var(--status-good); }
.att-seg button[data-v="absent"][aria-checked="true"]     { background: var(--status-critical-bg); border-color: var(--status-critical); }
.att-seg button[data-v="late"][aria-checked="true"]       { background: var(--status-warning-bg);  border-color: var(--status-warning); }
.att-seg button[data-v="excused"][aria-checked="true"]    { background: var(--status-info-bg);     border-color: var(--series-1); }
.att-seg button[data-v="left_early"][aria-checked="true"] { background: var(--status-serious-bg);  border-color: var(--status-serious); }
.att-note { min-height: 32px; font-size: var(--text-xs); }
.register__tally { display: flex; flex-wrap: wrap; gap: var(--space-2); }

@media (max-width: 900px) {
  .register__row { grid-template-columns: 1fr; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
  .att-seg { display: grid; grid-template-columns: repeat(5, 1fr); }
  .att-seg button { justify-content: center; padding: 0 4px; min-height: var(--touch); }
  .att-seg button .att-long { display: none; }
}
@media (min-width: 901px) { .att-seg button .att-short { display: none; } }

/* ---- Enrollment checklist -------------------------------------------------- */
.checklist { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.checklist label {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border);
  font-size: var(--text-sm); cursor: pointer;
}
.checklist label:last-child { border-bottom: 0; }
.checklist label:hover { background: var(--surface-hover); }
.checklist .muted { margin-inline-start: auto; font-size: var(--text-xs); }

/* ---- Scale editor ----------------------------------------------------------- */
.scale-row { display: grid; grid-template-columns: 90px 1fr auto; gap: var(--space-2); align-items: center; }

/* ---- Printed reports -------------------------------------------------------- */
.report-doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-8); }
.report-doc__head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start;
  padding-bottom: var(--space-4); border-bottom: 2px solid var(--brand-navy); margin-bottom: var(--space-5); }
.report-doc__title { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }
.report-doc__eyebrow { font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.report-doc h3 { font-size: var(--text-md); font-weight: 600; margin: var(--space-5) 0 var(--space-2); }
.report-doc table.data { border: 1px solid var(--border); border-radius: var(--radius); }
.rkv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1px solid var(--border); border-radius: var(--radius); }
.rkv { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-inline-end: 1px solid var(--border); }
.rkv:last-child { border-inline-end: 0; }
.rkv span { font-size: var(--text-xs); color: var(--ink-muted); }
.rkv b { font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.report-doc__foot { margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--border);
  font-size: var(--text-2xs); color: var(--ink-muted); display: flex; justify-content: space-between; gap: var(--space-4); }
.sig { margin-top: var(--space-8); display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: var(--space-8); }
.sig div { border-top: 1px solid var(--ink-secondary); padding-top: var(--space-1); font-size: var(--text-xs); color: var(--ink-secondary); }

.print-only { display: none; }

@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  .no-print, .pagehead, .tabs, .notice, .savebar, .skip-link, .tabletools { display: none !important; }
  .print-only { display: block; }
  .content { padding: 0; }
  .report-doc { border: 0; padding: 0; }
  .tablewrap { overflow: visible; }
  table.data thead th { position: static; }
  table.data th, table.data td { padding: 5px 8px; }
}

/* ---- Setup / sign-in extras ------------------------------------------------- */
.login__alt { font-size: var(--text-sm); color: var(--ink-secondary); }
.login__msg { font-size: var(--text-sm); }
.login__msg[hidden], .login__fields[hidden] { display: none; }
[hidden] { display: none !important; }

/* ---- Boot state -------------------------------------------------------------- */
.boot { display: grid; place-items: center; min-height: 40vh; color: var(--ink-muted); font-size: var(--text-sm); gap: var(--space-3); }
.boot .spin { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); border-inline-end-color: var(--brand-navy); animation: spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .btn .spin, .boot .spin { animation-duration: 2.4s; } }