/* ============================================================
   SLAY — PHASE 4 COMPONENTS
   New primitives introduced by Settings, Timetable, Staff,
   Gallery, and Alerts that don't exist in data.css. Every value
   comes from tokens.css — no ad hoc colors, spacing, or radii.
   ============================================================ */

/* ---- Settings grid/cards ---- */
.settings-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.settings-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
}

.settings-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.settings-card__head h3 { margin: 0; }

.settings-card__desc {
  font-size: var(--fs-00);
  color: var(--text-tertiary);
  margin-top: var(--sp-1);
}

.settings-card--locked {
  opacity: 0.85;
}

.dev-owned-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: var(--fs-000);
  color: var(--text-tertiary);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-full);
  padding: 0 var(--sp-2);
  height: 20px;
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.save-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.save-confirm {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-00);
  font-weight: var(--fw-medium);
  color: var(--success-strong);
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
}
.save-confirm.is-visible { opacity: 1; transform: translateY(0); }

/* ---- Toggle switch ---- */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
}
.toggle-row + .toggle-row { border-top: 1px solid var(--border); }

.toggle-row__label { font-weight: var(--fw-medium); font-size: var(--fs-0); color: var(--text-primary); }
.toggle-row__sub { font-size: var(--fs-00); color: var(--text-tertiary); margin-top: 2px; }

.toggle-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  border-radius: var(--r-full);
  background: var(--bg-sunken);
  border: 1.5px solid var(--border);
  transition: background var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
.toggle-switch:focus-visible { box-shadow: var(--focus-ring); }
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-med) var(--ease);
}
.toggle-switch.is-on {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
}
.toggle-switch.is-on::after { transform: translateX(20px); }
.toggle-switch.is-disabled { opacity: 0.5; pointer-events: none; }

.sub-option {
  margin-top: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  font-size: var(--fs-00);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  animation: frag-in var(--dur-med) var(--ease);
}

/* ---- Logo upload / crop-preview ---- */
.logo-upload {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.crop-preview {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bg-sunken);
  border: 1.5px dashed var(--border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crop-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--crop-zoom, 1));
  transition: transform var(--dur-med) var(--ease);
}

.crop-preview__placeholder {
  color: var(--text-tertiary);
  font-size: var(--fs-000);
  text-align: center;
  padding: var(--sp-2);
}

.logo-upload__controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  flex: 1;
  min-width: 200px;
}

.zoom-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.zoom-row input[type="range"] {
  flex: 1;
  accent-color: var(--brand-strong);
}

.zoom-row span {
  font-family: var(--font-mono);
  font-size: var(--fs-000);
  color: var(--text-tertiary);
  width: 40px;
  text-align: right;
}

/* ============================================================
   TIMETABLE
   ============================================================ */
.tt-switcher select {
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-size: var(--fs-00);
  font-weight: var(--fw-medium);
}
.tt-switcher select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

.tt-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 108px;
}
.tt-cell__subject { font-weight: var(--fw-semibold); font-size: var(--fs-00); color: var(--text-primary); }
.tt-cell__teacher { font-size: var(--fs-000); color: var(--text-tertiary); }
.tt-cell--empty { color: var(--text-tertiary); font-size: var(--fs-00); }

/* Mobile: day-by-day stacked list instead of squished table */
.tt-day-list { display: none; flex-direction: column; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) var(--sp-5); }

.tt-day-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.tt-day-card__head {
  background: var(--bg-sunken);
  padding: var(--sp-3) var(--sp-4);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-00);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-secondary);
}
.tt-day-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}
.tt-day-card__period { font-family: var(--font-mono); font-size: var(--fs-000); color: var(--text-tertiary); flex-shrink: 0; width: 76px; }

@media (max-width: 640px) {
  .table-wrap.tt-table-wrap { display: none; }
  .tt-day-list { display: flex; }
}

/* ============================================================
   STAFF DIRECTORY
   ============================================================ */
.staff-toolbar {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}

.staff-toolbar input[type="text"] {
  height: 40px;
  min-width: 220px;
  flex: 1;
  padding: 0 var(--sp-4);
  background: var(--bg-sunken);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
}
.staff-toolbar input[type="text"]:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); background: var(--bg-raised); }
.staff-toolbar input[type="text"]::placeholder { color: var(--text-tertiary); }

.staff-toolbar select {
  height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-size: var(--fs-00);
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-4);
}

.staff-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-med) var(--ease), transform var(--dur-fast) var(--ease);
}
.staff-card:hover { box-shadow: var(--shadow-md); }

.staff-card .avatar {
  width: 64px;
  height: 64px;
  font-size: var(--fs-1);
  margin: 0 auto var(--sp-3);
}

.staff-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-0); color: var(--text-primary); }
.staff-card__role { font-size: var(--fs-00); color: var(--brand-strong); font-weight: var(--fw-medium); margin-top: 2px; }
.staff-card__meta { font-size: var(--fs-000); color: var(--text-tertiary); margin-top: var(--sp-2); }

.staff-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  color: var(--text-tertiary);
  font-size: var(--fs-00);
}

/* ============================================================
   GALLERY
   ============================================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-3);
}

.gallery-thumb {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease);
}
.gallery-thumb:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.gallery-thumb__badge {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  background: hsl(240 10% 4% / 0.55);
  color: var(--on-dark-surface);
  border-radius: var(--r-full);
  height: 22px;
  padding: 0 var(--sp-2);
  display: inline-flex;
  align-items: center;
  font-size: var(--fs-000);
  font-weight: var(--fw-medium);
}

/* Lightbox / modal preview */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
}
.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: var(--scrim);
}

.lightbox__frame {
  position: relative;
  z-index: 1;
  background: var(--bg-raised);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xl);
  max-width: min(680px, 92vw);
  width: 100%;
  overflow: hidden;
  animation: frag-in var(--dur-med) var(--ease);
}

.lightbox__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--bg-sunken);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}
.lightbox__media img { width: 100%; height: 100%; object-fit: cover; }

.lightbox__caption {
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-00);
  color: var(--text-secondary);
}

.lightbox__close {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: hsl(240 10% 4% / 0.5);
  color: var(--on-dark-surface);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* ============================================================
   EMERGENCY ALERT
   ============================================================ */
.page-head--urgent h1 { color: var(--danger-strong); }

.panel--urgent {
  border-color: var(--danger-strong);
  box-shadow: 0 0 0 3px var(--danger-soft), var(--shadow-sm);
}
.panel--urgent .panel__head { border-bottom-color: var(--danger-soft); }

.alert-form { display: flex; flex-direction: column; gap: var(--sp-4); }

.category-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: var(--sp-3);
}

.category-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 44px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-00);
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.category-chip:hover { border-color: var(--border-strong); }
.category-chip.is-active {
  border-color: var(--danger-strong);
  background: var(--danger-soft);
  color: var(--danger-strong);
}

.alert-form textarea {
  width: 100%;
  min-height: 96px;
  padding: var(--sp-4);
  background: var(--bg-sunken);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-0);
  line-height: var(--lh-body);
  resize: vertical;
}
.alert-form textarea:focus { outline: none; border-color: var(--danger-strong); box-shadow: 0 0 0 3px var(--danger-soft); background: var(--bg-raised); }

.btn-urgent {
  background: var(--danger-strong);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-urgent:hover { box-shadow: var(--shadow-md); filter: brightness(1.05); }

.alert-delivered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  animation: frag-in var(--dur-med) var(--ease);
}

.alert-delivered__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--success-soft);
  color: var(--success-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alert-delivered__counter {
  font-family: var(--font-mono);
  font-size: var(--fs-2);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.alert-delivered__sub { font-size: var(--fs-00); color: var(--text-tertiary); }

.alert-history-item__meta { display: flex; align-items: center; gap: var(--sp-2); }

/* ============================================================
   STUDENT PROFILE
   ============================================================ */
.profile-head {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}

.profile-head .avatar {
  width: 84px;
  height: 84px;
  font-size: var(--fs-2);
  flex-shrink: 0;
}

.profile-head__name { margin: 0; }
.profile-head__meta { color: var(--text-tertiary); font-size: var(--fs-00); margin-top: var(--sp-1); }
.profile-head__badges { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); flex-wrap: wrap; }

.detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: var(--sp-4) var(--sp-6);
}

.detail-list__item { display: flex; flex-direction: column; gap: 2px; }
.detail-list__label {
  font-family: var(--font-mono);
  font-size: var(--fs-000);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-tertiary);
}
.detail-list__value { font-size: var(--fs-0); color: var(--text-primary); font-weight: var(--fw-medium); }

@media (max-width: 560px) {
  .detail-list { grid-template-columns: 1fr; }
  .profile-head { text-align: center; justify-content: center; }
}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.notif-list { display: flex; flex-direction: column; }

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-med) var(--ease);
  position: relative;
}
.notif-list .notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-sunken); }

.notif-item__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand-strong);
}
.notif-item__icon.is-danger  { background: var(--danger-soft);  color: var(--danger-strong); }
.notif-item__icon.is-success { background: var(--success-soft); color: var(--success-strong); }
.notif-item__icon.is-warning { background: var(--warning-soft); color: var(--warning-strong); }

.notif-item__body { flex: 1; min-width: 0; }
.notif-item__text { font-size: var(--fs-0); color: var(--text-secondary); }
.notif-item.is-unread .notif-item__text { color: var(--text-primary); font-weight: var(--fw-medium); }
.notif-item__time { font-size: var(--fs-000); color: var(--text-tertiary); margin-top: 2px; font-family: var(--font-mono); }

.notif-item__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-strong);
  flex-shrink: 0;
  margin-top: 6px;
}

.notif-empty {
  text-align: center;
  padding: var(--sp-7) var(--sp-4);
  color: var(--text-tertiary);
  font-size: var(--fs-00);
}

/* ============================================================
   HOMEWORK / ASSIGNMENTS
   ============================================================ */
.hw-filters { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hw-filters select {
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-size: var(--fs-00);
}

.hw-list { display: flex; flex-direction: column; gap: var(--sp-4); }

.hw-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.hw-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
}

.hw-card__subject {
  font-family: var(--font-mono);
  font-size: var(--fs-000);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--brand-strong);
  background: var(--brand-soft);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
  flex-shrink: 0;
}

.hw-card__main { flex: 1; min-width: 0; }
.hw-card__title { font-weight: var(--fw-semibold); font-size: var(--fs-0); color: var(--text-primary); }
.hw-card__due { font-size: var(--fs-00); color: var(--text-tertiary); margin-top: 2px; }

.hw-card__chevron {
  color: var(--text-tertiary);
  transition: transform var(--dur-med) var(--ease);
  flex-shrink: 0;
}
.hw-card.is-expanded .hw-card__chevron { transform: rotate(180deg); }

.hw-card__detail {
  padding: 0 var(--sp-5) var(--sp-5);
  border-top: 1px solid var(--border);
  margin-top: 0;
  animation: frag-in var(--dur-med) var(--ease);
}
.hw-card__instructions {
  padding-top: var(--sp-4);
  color: var(--text-secondary);
  font-size: var(--fs-00);
  line-height: var(--lh-body);
}

/* ============================================================
   ACADEMIC CALENDAR
   ============================================================ */
.cal-nav { display: flex; align-items: center; gap: var(--sp-2); }
.cal-nav button {
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.cal-nav button:hover { border-color: var(--border-strong); color: var(--text-primary); }

.cal-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.cal-legend__item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-00); color: var(--text-secondary); }
.cal-legend__dot { width: 8px; height: 8px; border-radius: 50%; }
.cal-legend__dot.is-holiday { background: var(--success-strong); }
.cal-legend__dot.is-exam { background: var(--danger-strong); }
.cal-legend__dot.is-event { background: var(--brand-strong); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.cal-weekday {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-000);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-tertiary);
  padding-bottom: var(--sp-2);
}

.cal-day {
  aspect-ratio: 1;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-size: var(--fs-00);
  color: var(--text-primary);
  position: relative;
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.cal-day.is-empty { background: transparent; border-color: transparent; }
.cal-day.is-marked { cursor: pointer; }
.cal-day.is-marked:hover { border-color: var(--border-strong); background: var(--bg-raised); }
.cal-day.is-selected { border-color: var(--brand); box-shadow: var(--focus-ring); }

.cal-day__dots { display: flex; gap: 2px; }
.cal-day__dot { width: 5px; height: 5px; border-radius: 50%; }
.cal-day__dot.is-holiday { background: var(--success-strong); }
.cal-day__dot.is-exam { background: var(--danger-strong); }
.cal-day__dot.is-event { background: var(--brand-strong); }

.cal-event-panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  animation: frag-in var(--dur-med) var(--ease);
}
.cal-event-panel__body { flex: 1; }
.cal-event-panel__date { font-size: var(--fs-00); color: var(--text-tertiary); margin-top: 2px; }

@media (max-width: 560px) {
  .cal-grid { gap: 4px; }
  .cal-day { font-size: var(--fs-000); }
}

/* ============================================================
   BUS TRACKING
   ============================================================ */
.bus-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}

.bus-map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background:
    linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--bg-sunken);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.bus-map__route {
  position: absolute;
  inset: 0;
}

.bus-map__route svg { width: 100%; height: 100%; }
.bus-map__route path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3;
  stroke-dasharray: 8 8;
  opacity: 0.5;
}

.bus-map__stop {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg-raised);
  border: 2px solid var(--border-strong);
  transform: translate(-50%, -50%);
}
.bus-map__stop.is-next { border-color: var(--brand-strong); background: var(--brand-soft); }

.bus-map__icon {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-strong);
  color: var(--text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transform: translate(-50%, -50%);
  transition: left 1.4s linear, top 1.4s linear;
  z-index: 2;
}

.bus-map__pulse {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-soft);
  transform: translate(-50%, -50%);
  animation: bus-pulse 1.8s var(--ease) infinite;
  z-index: 1;
  transition: left 1.4s linear, top 1.4s linear;
}

@keyframes bus-pulse {
  0%   { transform: translate(-50%, -50%) scale(0.7); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
}

.bus-info .detail-list { grid-template-columns: 1fr; gap: var(--sp-3); }

.bus-eta-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  background: var(--success-soft);
  color: var(--success-strong);
  border-radius: var(--r-full);
  padding: var(--sp-1) var(--sp-3);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-00);
}

@media (max-width: 780px) {
  .bus-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 640px) {
  .settings-grid { grid-template-columns: 1fr; }
  .logo-upload { flex-direction: column; align-items: flex-start; }
  .staff-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .category-picker { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Diary date filter (segmented toggle) ---- */
.seg-toggle {
  display: inline-flex;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  padding: 3px;
  gap: 2px;
}
.seg-toggle__btn {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-00);
  font-weight: var(--fw-medium);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.seg-toggle__btn:hover { color: var(--text-primary); }
.seg-toggle__btn.is-active {
  background: var(--bg-raised);
  color: var(--brand-strong);
  box-shadow: var(--shadow-sm);
}
.seg-toggle__btn:focus-visible { box-shadow: var(--focus-ring); }

/* ---- Navbar child switcher ---- */
.child-switcher { position: relative; }

.child-switcher__trigger {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.child-switcher__trigger:hover { background: var(--bg-raised); border-color: var(--border-strong); }
.child-switcher__trigger:focus-visible { box-shadow: var(--focus-ring); }

.child-switcher__avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: var(--fs-000);
  flex-shrink: 0;
}

.child-switcher__name {
  font-size: var(--fs-00);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

.child-switcher__chevron {
  color: var(--text-tertiary);
  transition: transform var(--dur-fast) var(--ease);
  flex-shrink: 0;
}
.child-switcher.is-open .child-switcher__chevron { transform: rotate(180deg); }

.child-switcher__menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  min-width: 220px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  z-index: 30;
}
.child-switcher.is-open .child-switcher__menu { display: block; }

.child-switcher__item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: none;
  background: transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
}
.child-switcher__item:hover { background: var(--bg-sunken); }
.child-switcher__item.is-active { background: var(--brand-soft); }
.child-switcher__item-meta { display: flex; flex-direction: column; min-width: 0; }
.child-switcher__item-name { font-size: var(--fs-00); font-weight: var(--fw-medium); color: var(--text-primary); }
.child-switcher__item-cls { font-size: var(--fs-000); color: var(--text-tertiary); }

@media (max-width: 560px) {
  .child-switcher__name { display: none; }
}

/* ---- Navbar notification bell ---- */
.notif-bell { position: relative; }

.notif-bell__trigger {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-primary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.notif-bell__trigger:hover { background: var(--bg-raised); border-color: var(--border-strong); }
.notif-bell__trigger:focus-visible { box-shadow: var(--focus-ring); }

.notif-bell__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: var(--r-full);
  background: var(--danger, #d64545);
  color: #fff;
  font-size: 10px;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.notif-bell__menu {
  display: none;
  position: absolute;
  top: calc(100% + var(--sp-2));
  right: 0;
  width: 300px;
  max-width: 90vw;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--sp-2);
  z-index: 30;
}
.notif-bell.is-open .notif-bell__menu { display: block; }

.notif-bell__list {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.notif-bell__item {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
}
.notif-bell__item.is-unread { background: var(--brand-soft); }
.notif-bell__item-title { font-size: var(--fs-00); font-weight: var(--fw-medium); color: var(--text-primary); }
.notif-bell__item-body { font-size: var(--fs-000); color: var(--text-tertiary); margin-top: 2px; }

.notif-bell__empty {
  padding: var(--sp-3);
  font-size: var(--fs-00);
  color: var(--text-tertiary);
  text-align: center;
}

.notif-bell__see-all {
  display: block;
  width: 100%;
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: none;
  border-top: 1px solid var(--border);
  background: transparent;
  color: var(--brand-strong);
  font-weight: var(--fw-medium);
  font-size: var(--fs-00);
  cursor: pointer;
  text-align: center;
}
.notif-bell__see-all:hover { background: var(--bg-sunken); }

/* ---- Documents ---- */
.doc-toolbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.doc-toolbar input[type="text"] {
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-00);
  color: var(--text-primary);
  min-width: 220px;
}
.doc-toolbar input[type="text"]:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); background: var(--bg-raised); }
.doc-toolbar input[type="text"]::placeholder { color: var(--text-tertiary); }

.doc-upload-form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}
.doc-upload-form .field { margin-bottom: 0; min-width: 200px; }

.doc-preview__frame { width: min(720px, 92vw); max-height: 86vh; display: flex; flex-direction: column; padding: var(--sp-5); }
.doc-preview__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.doc-preview__header h2 { margin: 0; font-size: var(--fs-1); }
.doc-preview__body { overflow-y: auto; flex: 1; }
.doc-preview__iframe { width: 100%; height: 60vh; border: 1px solid var(--border); border-radius: var(--r-md); }
.doc-preview__text { white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--fs-00); color: var(--text-primary); line-height: 1.6; }
.doc-preview__markdown { font-size: var(--fs-00); color: var(--text-primary); line-height: 1.6; }
.doc-preview__markdown h1, .doc-preview__markdown h2, .doc-preview__markdown h3 { margin: var(--sp-4) 0 var(--sp-2); }
.doc-preview__markdown p { margin: 0 0 var(--sp-3); }
.doc-preview__markdown ul { margin: 0 0 var(--sp-3); padding-left: var(--sp-5); }
.doc-preview__unavailable { color: var(--text-tertiary); font-size: var(--fs-00); text-align: center; padding: var(--sp-5) 0; }

.doc-group { margin-top: var(--sp-5); }
.doc-group:first-child { margin-top: var(--sp-3); }
.doc-group__label {
  font-family: var(--font-mono);
  font-size: var(--fs-000);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-tertiary);
  margin-bottom: var(--sp-3);
}

.doc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}

.doc-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
}

.doc-card__icon { width: 28px; height: 28px; color: var(--brand-strong); flex-shrink: 0; }
.doc-card__main { flex: 1; min-width: 0; }
.doc-card__name { font-weight: var(--fw-medium); font-size: var(--fs-00); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-card__date { font-size: var(--fs-000); color: var(--text-tertiary); margin-top: 2px; }
.doc-card__dl { flex-shrink: 0; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-000); }

/* ---- Global search ---- */
.search-hero {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--sp-6);
}
.search-hero__icon { width: 22px; height: 22px; color: var(--text-tertiary); flex-shrink: 0; }
.search-hero__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: var(--fs-1);
  color: var(--text-primary);
}
.search-hero__input:focus { outline: none; }
.search-hero__input::placeholder { color: var(--text-tertiary); }

.search-group + .search-group { margin-top: var(--sp-4); }

/* ---- Receipt preview ---- */
.receipt-preview { margin-top: var(--sp-5); }
.receipt-preview__card {
  max-width: 420px;
  margin: 0 auto;
  padding: var(--sp-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  background: var(--bg-sunken);
}
.receipt-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.receipt-preview__school { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-1); color: var(--text-primary); }
.receipt-preview__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  font-size: var(--fs-00);
  color: var(--text-secondary);
  padding: var(--sp-2) 0;
}
.receipt-preview__row span:last-child { color: var(--text-primary); font-weight: var(--fw-medium); }
.receipt-preview__row.is-total { border-top: 1px dashed var(--border); margin-top: var(--sp-2); padding-top: var(--sp-3); }
.receipt-preview__card .btn { width: 100%; margin-top: var(--sp-4); }

/* ---- Fake inline toast (Documents / Receipts downloads) ---- */
.inline-toast {
  position: fixed;
  bottom: var(--sp-6);
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--bg-overlay);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-00);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease);
  z-index: 100;
}
.inline-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- Parent-Student Binding ---- */
.binding-arrow { color: var(--text-tertiary); font-weight: var(--fw-regular); }
.binding-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }
.binding-reason {
  margin-top: var(--sp-2);
  font-size: var(--fs-000);
  color: var(--danger-strong);
  background: var(--danger-soft);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  display: inline-block;
}

.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-000); }

/* ---- Data Export ---- */
.export-last { font-size: var(--fs-000); color: var(--text-tertiary); }

.export-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.export-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.export-card:hover { border-color: var(--border-strong); }
.export-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.export-card__box {
  width: 20px;
  height: 20px;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border-strong);
  background: var(--bg-raised);
  flex-shrink: 0;
  margin-top: 2px;
  position: relative;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.export-card input[type="checkbox"]:checked + .export-card__box {
  background: var(--brand);
  border-color: var(--brand);
}
.export-card input[type="checkbox"]:checked + .export-card__box::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid var(--text-on-brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.export-card input[type="checkbox"]:focus-visible + .export-card__box { box-shadow: var(--focus-ring); }
.export-card__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.export-card__label { font-weight: var(--fw-medium); font-size: var(--fs-0); color: var(--text-primary); }
.export-card__desc { font-size: var(--fs-000); color: var(--text-tertiary); }

.export-actions { display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }

.export-progress {
  width: 160px;
  height: 6px;
  background: var(--bg-sunken);
  border-radius: var(--r-full);
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--sp-3);
}
.export-progress__bar {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--brand);
  border-radius: var(--r-full);
  animation: export-progress-slide 1.1s ease-in-out infinite;
}
@keyframes export-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.export-status { font-size: var(--fs-00); color: var(--text-secondary); display: flex; align-items: center; }
.export-success {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--success-strong);
}
.export-success svg { flex-shrink: 0; }

/* ---- Secure page weight (Document Wallet) — reuses existing
   tokens only, mirrors the .page-head--urgent / .panel--urgent
   approach used by Emergency Alert, but neutral rather than
   danger-toned since this isn't an urgent action. ---- */
.page-head--secure h1 { letter-spacing: var(--ls-tight); }

.panel--secure {
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-lg);
  background: var(--bg-raised);
}
.panel--secure .panel__head { border-bottom-color: var(--border-strong); }

.wallet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--sp-3);
}

.wallet-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.wallet-card:hover { border-color: var(--brand); background: var(--bg-raised); }
.wallet-card:focus-visible { box-shadow: var(--focus-ring); }
.wallet-card.is-verifying { cursor: default; }
.wallet-card.is-verifying:hover { border-color: var(--border-strong); background: var(--bg-sunken); }

.wallet-card__lock { width: 24px; height: 24px; color: var(--text-secondary); flex-shrink: 0; }
.wallet-card__main { flex: 1; min-width: 0; }
.wallet-card__name { font-weight: var(--fw-medium); font-size: var(--fs-00); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wallet-card__date { font-size: var(--fs-000); color: var(--text-tertiary); margin-top: 2px; }
.wallet-card__status { font-size: var(--fs-000); color: var(--text-secondary); margin-top: 2px; }
.wallet-card__badge { flex-shrink: 0; }

.wallet-card__spinner {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2.5px solid var(--border);
  border-top-color: var(--brand);
  flex-shrink: 0;
  animation: wallet-spin 0.8s linear infinite;
}
@keyframes wallet-spin { to { transform: rotate(360deg); } }

.wallet-upload { margin-top: var(--sp-4); }

.wallet-preview__page {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 4;
  margin: 0 auto;
  background: var(--bg-sunken);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  filter: blur(2px);
}
.wallet-preview__watermark {
  position: absolute;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--fs-00);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  transform: rotate(-25deg);
  white-space: nowrap;
}
.wallet-preview__note {
  text-align: center;
  font-size: var(--fs-00);
  color: var(--text-tertiary);
  margin-top: var(--sp-4);
  margin-bottom: 0;
}

/* ============================================================
   AUDIT TRAIL
   ============================================================ */
.audit-toolbar {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}

.audit-toolbar select {
  height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-size: var(--fs-00);
}
.audit-toolbar select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

.audit-list {
  display: flex;
  flex-direction: column;
}

.audit-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.audit-list .audit-row:last-child { border-bottom: none; }

.audit-row__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-sunken);
  color: var(--text-tertiary);
}
.audit-row__icon .icon { width: 16px; height: 16px; }
.audit-row__icon.is-success { background: var(--success-soft); color: var(--success-strong); }
.audit-row__icon.is-warning { background: var(--warning-soft); color: var(--warning-strong); }
.audit-row__icon.is-danger  { background: var(--danger-soft);  color: var(--danger-strong); }

.audit-row__main { flex: 1; min-width: 0; }
.audit-row__action { color: var(--text-primary); font-size: var(--fs-0); }
.audit-row__meta { color: var(--text-tertiary); font-size: var(--fs-00); margin-top: 2px; }

.audit-row__time {
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-family: var(--font-mono);
  font-size: var(--fs-000);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .audit-row { flex-wrap: wrap; }
  .audit-row__time { margin-left: 44px; }
}

/* ============================================================
   EXAM SEATING GENERATOR
   ============================================================ */
.seating-toolbar {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}

.seating-toolbar select {
  height: 40px;
  min-width: 260px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-size: var(--fs-00);
}
.seating-toolbar select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

.seat-grid {
  display: grid;
  gap: var(--sp-2);
}

.seat-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--fs-000);
  font-weight: var(--fw-medium);
}

/* ============================================================
   PHASE 7.3 — AUTH (OTP / ROLE / CHILD LINK) + ONLINE ADMISSION
   ============================================================ */

/* OTP input group (register step 2) */
.otp-group {
  display: flex;
  gap: var(--sp-2);
}
.otp-group input {
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-1);
  letter-spacing: var(--ls-wide);
}
.otp-resend {
  margin-top: var(--sp-1);
  font-size: var(--fs-000);
  color: var(--text-tertiary);
}
.otp-resend button {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand-strong);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

/* Role picker (register step 4) — reuses category-picker/chip
   grid mechanics but sized for text-only role labels */
.role-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--sp-3);
}
.role-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 48px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-00);
  cursor: pointer;
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.role-chip:hover { border-color: var(--border-strong); }
.role-chip.is-active {
  border-color: var(--brand-strong);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

/* Duplicate-email / blocked states */
.auth-inline-error {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--danger-soft);
  border: 1px solid var(--danger-soft);
  color: var(--danger-strong);
  font-size: var(--fs-00);
  margin-bottom: var(--sp-4);
}
.auth-inline-error[hidden] { display: none; }
.auth-inline-error a { color: var(--danger-strong); font-weight: var(--fw-semibold); text-decoration: underline; }

/* Child search/link cards (Parent role -> step 4b) */
.child-search-results {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.child-pick-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.child-pick-card:hover { border-color: var(--border-strong); }
.child-pick-card.is-linked { border-color: var(--success-strong); background: var(--success-soft); }
.child-pick-card__meta { flex: 1; min-width: 0; }
.child-pick-card__name { font-weight: var(--fw-semibold); font-size: var(--fs-00); color: var(--text-primary); }
.child-pick-card__sub { font-size: var(--fs-000); color: var(--text-tertiary); margin-top: 2px; }

.linked-children {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
}
.linked-child-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--success-soft);
  border: 1px solid var(--success-soft);
}
.linked-child-row__meta { flex: 1; min-width: 0; font-size: var(--fs-00); color: var(--text-primary); font-weight: var(--fw-medium); }
.linked-child-row__remove {
  background: none;
  border: none;
  color: var(--danger-strong);
  cursor: pointer;
  font-size: var(--fs-000);
  font-weight: var(--fw-semibold);
}

.btn-add-child {
  width: 100%;
  border: 1.5px dashed var(--border-strong);
  background: transparent;
  color: var(--text-secondary);
}
.btn-add-child:hover { border-color: var(--brand); color: var(--brand-strong); }

/* Pending approval / rejected outcome screens */
.auth-outcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-2);
  animation: frag-in var(--dur-med) var(--ease);
}
.auth-outcome[hidden] { display: none; }
.auth-outcome__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-2);
}
.auth-outcome__icon.is-pending { background: var(--warning-soft); color: var(--warning-strong); }
.auth-outcome__icon.is-success { background: var(--success-soft); color: var(--success-strong); }
.auth-outcome__icon.is-danger  { background: var(--danger-soft);  color: var(--danger-strong); }
.auth-outcome h1 { font-size: var(--fs-2); margin: 0; }
.auth-outcome p { color: var(--text-tertiary); font-size: var(--fs-00); max-width: 34ch; }

.auth-outcome__reason {
  width: 100%;
  max-width: 380px;
  margin-top: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  font-size: var(--fs-00);
  color: var(--text-secondary);
  text-align: left;
}
.auth-outcome__reason strong { color: var(--text-primary); }

/* Demo-only aids — deliberately understated so it never reads
   as a real product affordance */
.demo-aid {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border);
  font-size: var(--fs-000);
  color: var(--text-tertiary);
}
.demo-aid button {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-tertiary);
  text-decoration: underline dotted;
  cursor: pointer;
  font-size: inherit;
}
.demo-aid button:hover { color: var(--text-secondary); }

/* ---- Online Admission (public form) ---- */
.admission-shell { max-width: 640px; }

.admission-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--sp-5);
}
.admission-form legend {
  font-size: var(--fs-00);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--sp-3);
  padding: 0;
}
.admission-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 560px) {
  .admission-form .field-row { grid-template-columns: 1fr; }
}
.admission-form select {
  height: 46px;
  min-height: 44px;
  padding: 0 var(--sp-4);
  background: var(--bg-sunken);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-weight: var(--fw-regular);
}
.admission-form select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

.upload-field {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  background: var(--bg-sunken);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.upload-field__icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
}
.upload-field__body { flex: 1; min-width: 0; }
.upload-field__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  font-size: var(--fs-00);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}
.upload-field__hint { font-size: var(--fs-000); color: var(--text-tertiary); margin-top: 2px; }
.upload-field__filename { font-size: var(--fs-000); color: var(--brand-strong); margin-top: 2px; word-break: break-all; }

.badge-encrypted { background: var(--brand-soft); color: var(--brand-strong); }
.badge-e2e { background: var(--success-soft); color: var(--success-strong); }

.admission-nav-link {
  margin-top: var(--sp-5);
  text-align: center;
}

/* ============================================================
   PHASE 7.3b — STAFF DIRECTORY: TEACHER ASSIGNMENT MODEL +
   ADD/EDIT STAFF MODAL
   ============================================================ */

.staff-card { position: relative; text-align: left; }
.staff-card__top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.staff-card .avatar { margin: 0; flex-shrink: 0; }
.staff-card__head { flex: 1; min-width: 0; }
.staff-card__role-badge { margin-top: var(--sp-1); }
.staff-card__meta-list {
  margin-top: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--fs-000);
  color: var(--text-tertiary);
}
.staff-card__meta-list a { color: inherit; }

.staff-card__edit {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 28px;
  height: 28px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.staff-card:hover .staff-card__edit { opacity: 1; }
.staff-card__edit:hover { color: var(--brand-strong); border-color: var(--brand); }

.tag-group {
  margin-top: var(--sp-3);
}
.tag-group__label {
  font-size: 10px;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: var(--sp-1);
  display: block;
}
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}
.tag {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  font-size: var(--fs-000);
  font-weight: var(--fw-medium);
}
.tag-subject { background: var(--brand-soft); color: var(--brand-strong); border-color: transparent; }
.tag-class   { background: var(--success-soft); color: var(--success-strong); border-color: transparent; }

.staff-toolbar__actions { margin-left: auto; display: flex; align-items: center; }

/* Multi-select chip picker used inside the Add/Edit Staff modal */
.multiselect-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.multiselect-chip {
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-full);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-secondary);
  font-size: var(--fs-000);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.multiselect-chip:hover { border-color: var(--border-strong); }
.multiselect-chip.is-active {
  border-color: var(--brand-strong);
  background: var(--brand-soft);
  color: var(--brand-strong);
}
.multiselect-chip.is-active.is-class {
  border-color: var(--success-strong);
  background: var(--success-soft);
  color: var(--success-strong);
}

/* Add/Edit Staff modal — built on the existing .lightbox primitive */
.staff-modal__frame {
  max-width: min(560px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.staff-modal__header {
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--border);
}
.staff-modal__header h2 { margin: 0; font-size: var(--fs-1); }
.staff-modal__header p { margin: var(--sp-1) 0 0; color: var(--text-tertiary); font-size: var(--fs-00); }

.staff-modal__body {
  padding: var(--sp-5);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.staff-modal__footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-3);
}

.staff-modal__role-select {
  height: 44px;
  padding: 0 var(--sp-4);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-size: var(--fs-00);
}
.staff-modal__role-select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

.staff-modal__teacher-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
}
.staff-modal__teacher-fields[hidden] { display: none; }

/* ============================================================
   PHASE 7.3c — ATTENDANCE REBUILD: TEACHER/STUDENT/PARENT/ADMIN
   VIEWS + SUBMIT-LOCK BANNER
   ============================================================ */

/* Demo-only role-preview switcher — deliberately understated,
   same spirit as the register/outcome demo aid. */
.demo-role-switch {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  font-size: var(--fs-000);
  color: var(--text-tertiary);
}
.demo-role-switch label { font-weight: var(--fw-medium); }
.demo-role-switch select {
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-raised);
  color: var(--text-primary);
  font-size: var(--fs-000);
}
.demo-role-switch select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

/* Generic select used for class-section pickers on this page */
.att-class-select {
  height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-size: var(--fs-00);
}
.att-class-select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

/* Locked/submitted banner — reused for Student Attendance Mode 1
   and the Staff Attendance marking tab */
.locked-banner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--success-soft);
  border: 1px solid var(--success-soft);
  color: var(--success-strong);
  font-size: var(--fs-00);
  font-weight: var(--fw-medium);
}
.locked-banner svg { flex-shrink: 0; }

.status-pill[disabled],
.status-pill.is-locked {
  cursor: default;
  opacity: 0.9;
}

/* Student/Parent self-view: monthly log */
.self-att-log {
  display: flex;
  flex-direction: column;
}
.self-att-log__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.self-att-log__row:last-child { border-bottom: none; }
.self-att-log__date {
  font-size: var(--fs-00);
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

/* ============================================================
   PHASE 7.3d/e — LEAVE (STUDENT+STAFF) + FEES + RECEIPTS REBUILD
   ============================================================ */

/* Apply-for-leave form (Student/Parent mode) */
.leave-apply-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 560px) {
  .leave-apply-form .field-row { grid-template-columns: 1fr; }
}
.leave-apply-form select {
  height: 46px;
  padding: 0 var(--sp-4);
  background: var(--bg-sunken);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
}
.leave-apply-form select:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }
.leave-apply-form textarea {
  width: 100%;
  min-height: 80px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-sunken);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-00);
  resize: vertical;
}
.leave-apply-form textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

/* Reject-with-reason inline prompt, reused across Leave modes */
.reason-prompt {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  margin-top: var(--sp-2);
  width: 100%;
}
.reason-prompt input {
  flex: 1;
  height: 36px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-size: var(--fs-000);
}
.reason-prompt input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

.rejected-reason {
  margin-top: var(--sp-1);
  font-size: var(--fs-000);
  color: var(--text-tertiary);
}
.rejected-reason strong { color: var(--text-secondary); }

/* Quota block with a small inline "Refill" action (Principal mode) */
.quota-block { display: flex; align-items: center; gap: var(--sp-2); }
.quota-refill-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand-strong);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-000);
  cursor: pointer;
  text-decoration: underline;
}

/* Quota-exhausted block */
.quota-exhausted {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--danger-soft);
  color: var(--danger-strong);
  font-size: var(--fs-00);
  font-weight: var(--fw-medium);
}

/* Log-style note for staff leave (quota vs strict-log distinction) */
.log-note {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-5);
  border-radius: var(--r-md);
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  color: var(--text-tertiary);
  font-size: var(--fs-000);
}

/* Fees — Principal class rollup grid */
.class-rollup-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.class-rollup-card {
  text-align: left;
  padding: var(--sp-4);
  border-radius: var(--r-lg);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: border-color var(--dur-med) var(--ease);
}
.class-rollup-card:hover { border-color: var(--border-strong); }
.class-rollup-card.is-active { border-color: var(--brand-strong); background: var(--brand-soft); }
.class-rollup-card__cls { font-weight: var(--fw-semibold); font-size: var(--fs-00); color: var(--text-primary); }
.class-rollup-card__amt { margin-top: var(--sp-1); font-size: var(--fs-1); font-weight: var(--fw-bold); color: var(--success-strong); }
.class-rollup-card__sub { margin-top: 2px; font-size: var(--fs-000); color: var(--text-tertiary); }

/* Inline fee-amount editor (Principal only) */
.fee-edit-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}
.fee-edit-inline input {
  width: 96px;
  height: 32px;
  padding: 0 var(--sp-2);
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-size: var(--fs-000);
}
.fee-edit-inline input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }

/* Info/notice state — e.g. linked-student fee redirect */
.info-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-4);
}
.info-state__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-2);
}
.info-state h2 { margin: 0; font-size: var(--fs-1); }
.info-state p { color: var(--text-tertiary); font-size: var(--fs-00); max-width: 40ch; }

/* Fee line items (class-fee vs specific fees, kept separate) */
.fee-line-items { display: flex; flex-direction: column; }

/* Receipts search/filter toolbar (Accountant/Principal mode) */
.receipts-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.receipts-toolbar[hidden] { display: none; }
.receipts-toolbar input[type="text"],
.receipts-toolbar input[type="date"] {
  height: 40px;
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  border: 1.5px solid var(--border);
  background: var(--bg-sunken);
  color: var(--text-primary);
  font-size: var(--fs-00);
}
.receipts-toolbar input:focus { outline: none; border-color: var(--brand); box-shadow: var(--focus-ring); }