/* ---------- Tables ---------- */
.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-body);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: clip;
  box-shadow: var(--shadow-sm);
}

.card > .table:only-child,
.card > form:only-child > .table,
.card > form:only-child > .bulk-bar + .table {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.table th, .table td {
  padding: .5rem .75rem;
  text-align: start;
  border-bottom: 1px solid var(--border);
}

.table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: linear-gradient(180deg, var(--surface-soft), var(--surface-soft));
  color: var(--muted);
  font-weight: 800;
  font-size: var(--text-small);
  text-transform: none;
}

.table tbody tr {
  transition: background var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.table tbody tr:hover { background: var(--surface-soft); }
.table tbody tr:last-child td { border-bottom: none; }
.table__empty { text-align: center; color: var(--muted); padding: 2rem 0; }
.member-identity { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.member-identity__avatar {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand-dark);
  font-weight: 800;
  font-size: var(--text-small);
}
.empty-action {
  display: grid;
  place-items: center;
  gap: .75rem;
  min-height: 180px;
  padding: 1.5rem;
  text-align: center;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-light) 55%, transparent), color-mix(in srgb, var(--surface) 20%, transparent)),
    var(--surface);
}
.empty-action__icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--brand-dark);
  background: var(--brand-light);
  border: 1px solid var(--success-border);
  border-radius: 50%;
}
.empty-action__icon .app-icon { width: 1.375rem; height: 1.375rem; }
.empty-action .table__empty { padding-bottom: 0; }

.student-overview {
  display: grid;
  --grid-min: 240px;
  gap: .75rem;
  margin-bottom: 1rem;
}
.student-overview__panel {
  display: grid;
  align-content: start;
  gap: .5rem;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}
.student-overview__label {
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 800;
}
.student-overview__title,
.student-overview__link {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.student-overview__title:hover,
.student-overview__link:hover { color: var(--brand); text-decoration: none; }
.student-overview__meta,
.student-overview__actions,
.student-overview__stack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}
.student-overview__actions { margin-top: .375rem; }
.student-overview__stack {
  align-items: flex-start;
  flex-direction: column;
}
.student-overview__empty {
  color: var(--muted);
  font-size: var(--text-body);
  margin: 0;
}
.student-attention {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1rem;
  padding: .75rem 1rem;
  border: 1px solid var(--warning-border);
  border-radius: var(--radius);
  background: var(--warning-bg);
}
.student-attention > div:first-child { display: grid; gap: .125rem; margin-inline-end: auto; }
.student-attention > div:first-child strong { font-size: var(--text-body); }
.student-attention > div:first-child span { color: var(--muted); font-size: var(--text-label); }
.student-attention__signals { display: flex; flex-wrap: wrap; gap: .375rem; }
.timeline-filters { display: flex; flex-wrap: wrap; gap: .25rem; }
.timeline-filter {
  padding: .25rem .5rem;
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.timeline-filter:hover,
.timeline-filter--active,
.timeline-filter--active:hover { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 35%, transparent); background: var(--brand-light); text-decoration: none; }
.guardian-chip { gap: .5rem; }
.guardian-chip__contact { color: var(--brand); font-size: var(--text-label); font-weight: 700; }

@media (max-width: 640px) {
  .student-attention { align-items: stretch; flex-direction: column; }
  .student-attention .btn { width: 100%; }
  .timeline-filters { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }
  .timeline-filter { flex: 0 0 auto; }
}

.today-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.workspace-progress {
  display: grid;
  grid-template-columns: minmax(220px, .45fr) 1fr;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  border-radius: var(--radius);
  background: var(--brand-light);
}
.workspace-progress strong,
.workspace-progress span { display: block; }
.workspace-progress strong { color: var(--ink); font-size: var(--text-body); }
.workspace-progress > div > span { margin-top: .125rem; color: var(--muted); font-size: var(--text-label); }
.workspace-progress__track { height: 10px; overflow: clip; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--brand) 15%, transparent); }
.workspace-progress__track span { height: 100%; border-radius: inherit; background: var(--brand); }
.workspace-roster { display: grid; gap: .5rem; }
.workspace-student {
  display: grid;
  grid-template-columns: auto minmax(180px, 1fr) minmax(220px, auto) auto;
  align-items: center;
  gap: .75rem;
  padding: .75rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.workspace-student--complete { border-color: var(--success-border); background: linear-gradient(90deg, color-mix(in srgb, var(--success-bg) 70%, transparent), var(--surface)); }
.workspace-student__number { display: grid; place-items: center; width: 30px; height: 30px; color: var(--muted); font-size: var(--text-label); font-weight: 800; border-radius: 50%; background: var(--surface-soft); }
.workspace-student__identity { min-width: 0; }
.workspace-student__name { display: block; color: var(--ink); font-weight: 800; text-decoration: none; }
.workspace-student__name:hover { text-decoration: none; }
.workspace-student__identity span { display: block; overflow: hidden; margin-top: .125rem; color: var(--muted); font-size: var(--text-label); text-overflow: ellipsis; white-space: nowrap; }
.workspace-student__states { display: flex; flex-wrap: wrap; gap: .375rem; }

@media (max-width: 760px) {
  .workspace-progress { grid-template-columns: 1fr; }
  .workspace-student { grid-template-columns: auto 1fr; }
  .workspace-student__states,
  .workspace-student__actions { grid-column: 2; }
  .workspace-student__actions .btn { width: 100%; }
}
.today__dates { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
.today__hijri { color: var(--accent-ink); font-weight: 600; }
.today__hijri::before { content: "·" / ""; margin-inline-end: .5rem; color: var(--muted); font-weight: 400; }

.today-stats {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-bottom: 1rem;
}

@media (max-width: 1050px) {
  .today-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .today-stats .stat-card--feature { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .today-stats { grid-template-columns: minmax(0, 1fr); }
}

.today-card {
  min-width: 0;
}
.today-card--wide {
  grid-column: 1 / -1;
}
.today-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}
.today-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-top: 1px solid var(--border);
}
.today-row:last-child { padding-bottom: 0; }
.today-row__time {
  display: grid;
  gap: .25rem;
  align-self: start;
  color: var(--muted);
  font-size: var(--text-label);
}
.today-row__time strong {
  color: var(--ink);
  font: 700 var(--text-heading)/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.today-row__body { min-width: 0; }
.today-row__title,
.today-mini-list__title {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
.today-mini-list__subtle-link {
  color: inherit;
  text-decoration: none;
}
.today-row__title:hover,
.today-mini-list__title:hover,
.today-mini-list__subtle-link:hover { color: var(--brand); text-decoration: underline; }
.today-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1rem;
  color: var(--muted);
  font-size: var(--text-label);
  margin-top: .25rem;
}
.today-row__meta span { display: inline-flex; align-items: center; gap: .25rem; }
.today-row__meta .app-icon { width: .85rem; height: .85rem; }
.today-row__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
}
.today-row__actions .badge { display: inline-flex; align-items: center; gap: .25rem; }
.today-mini-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.today-mini-list li {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--border);
}
.today-mini-list li > div { flex: 1; min-width: 0; }
.today-mini-list li:last-child { border-bottom: none; }
.today-mini-list li > div span {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-small);
  margin-top: .125rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.today-mini-list--columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}

/* Responsive tables: turn rows into readable cards on small screens */
@media (max-width: 640px) {
  .table {
    display: block;
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    white-space: normal;
  }
  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .table tbody {
    display: grid;
    gap: .75rem;
  }
  .table tr {
    display: grid;
    overflow: clip;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  .table th,
  .table td {
    border-bottom: 1px solid var(--border);
  }
  .table td {
    display: grid;
    grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
    min-width: 0;
    padding: .75rem .75rem;
    overflow-wrap: anywhere;
    white-space: normal;
  }
  .table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: var(--text-label);
    font-weight: 800;
  }
  .table td:not([data-label]) {
    display: block;
  }
  .table td:not([data-label])::before {
    display: none;
  }
  .table td.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: stretch;
    justify-content: stretch;
  }
  .table td.row-actions::before {
    flex: 0 0 100%;
  }
  .table td.row-actions > * {
    flex: 1 1 140px;
  }
  .table td.row-actions .btn {
    width: 100%;
  }
  .table--people td.row-actions::before {
    display: none;
  }
  .table--people td.row-actions > * {
    flex: 1 1 auto;
  }
  .table--people td.row-actions .btn {
    width: auto;
    min-width: 84px;
  }
  .table td.assignment-actions-cell .row-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: stretch;
    margin-top: .125rem;
  }
  .table td.assignment-actions-cell .row-actions > * {
    flex: 1 1 140px;
  }
  .table td.assignment-actions-cell .btn {
    width: 100%;
  }
  .table tbody tr:hover { background: var(--surface); }
  .table tbody tr:last-child td { border-bottom: 1px solid var(--border); }
  .table tbody tr td:last-child { border-bottom: 0; }
  .table-stack {
    min-width: 0;
  }
  .page__header { align-items: stretch; }
  .toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
  .toolbar .field { width: 100%; }
  .toolbar .field--grow,
  .toolbar .field:has(input[type="text"]),
  .toolbar .field:has(input[type="search"]),
  .toolbar .field:last-child { grid-column: 1 / -1; }
  .analytics { grid-template-columns: 1fr; }
  .stat-card__value { font-size: var(--text-title); }
  .assign-existing { flex-direction: column; align-items: stretch; }
  .planner-panel__head,
  .planner-note {
    align-items: stretch;
    flex-direction: column;
  }
  .planner-panel--missing .planner-panel__head { align-items: flex-start; }
  .missing-grid { grid-template-columns: 1fr; padding: .75rem; }
  .missing-student { padding: .75rem; }
  .segmented { width: 100%; }
}

/* ---------- Badges & chips ---------- */
.badge {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-label);
  font-weight: 600;
  background: var(--info-bg);
  color: var(--info);
  white-space: nowrap;
}

.badge--new { background: var(--brand-light); color: var(--brand); }
.badge--accent { background: var(--accent-light); color: var(--accent-ink); }
.badge--minor { background: var(--info-bg); color: var(--info); }
.badge--major { background: var(--warning-bg); color: var(--warning); }

.badge--present { background: var(--brand-light); color: var(--brand); }
.badge--absent { background: var(--danger-bg); color: var(--danger); }
.badge--late { background: var(--warning-bg); color: var(--warning); }
.badge--excused { background: var(--info-bg); color: var(--info); }
.badge--fee-due { background: var(--warning-bg); color: var(--warning); }
.badge--auto-review { background: var(--info-bg); color: var(--info); }

.grade {
  font-weight: 800;
  font-size: var(--text-lead);
}
.grade--high { color: var(--brand); }
.grade--mid { color: var(--warning); }
.grade--low { color: var(--danger); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .25rem .5rem;
  border-radius: var(--radius);
  background: var(--surface-soft);
  font-size: var(--text-small);
  color: var(--ink);
}
.chip .app-icon {
  width: 1rem;
  height: 1rem;
  color: var(--brand);
}
.chip strong { color: var(--ink); font-size: var(--text-body); }

/* ---------- Forms (grid) ---------- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.form-grid .field { margin-bottom: 0; }
/* Grid items default to min-width: auto, so a control with a wide intrinsic
   size (iOS date inputs) would widen the column past the card. */
.form-grid > * { min-width: 0; }
.form-grid .field--full { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .form-grid { grid-template-columns: 1fr; }
}

textarea.input { resize: vertical; min-height: 90px; }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.form-actions--sticky {
  position: sticky;
  bottom: 0;
  z-index: 5;
  align-items: center;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: .75rem 1rem;
}

.form-disclosure {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.form-disclosure > summary,
.record-step--optional > summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
  list-style: none;
}
.form-disclosure > summary { padding: .75rem 1rem; }
.form-disclosure > summary::-webkit-details-marker,
.record-step--optional > summary::-webkit-details-marker { display: none; }
.form-disclosure > summary::after,
.record-step--optional > summary::after {
  content: "";
  flex: none;
  width: .5rem;
  height: .5rem;
  margin-inline: auto .25rem;
  color: var(--brand);
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: translateY(-.125rem) rotate(45deg);
  transition: transform var(--duration) var(--ease);
}
.form-disclosure[open] > summary::after,
.record-step--optional[open] > summary::after { transform: translateY(.125rem) rotate(225deg); }
.form-disclosure > summary span { color: var(--ink); font-size: var(--text-body); font-weight: 700; }
.form-disclosure > summary small,
.record-step--optional > summary small { display: block; margin-top: .125rem; color: var(--muted); font-size: var(--text-label); font-weight: 500; }
.form-disclosure__content {
  padding: 1rem;
  border-top: 1px solid var(--border);
}
.record-step--optional > summary { margin: 0; }
.record-step--optional[open] > summary { padding-bottom: .75rem; border-bottom: 1px solid var(--border); }
.record-step__content { padding-top: 1rem; }
.session-primary-grade { max-width: 44rem; }
.session-outcome { max-width: 28rem; }
/* Two long choices share the row; let a label wrap instead of spilling. */
.session-outcome .segmented__option > span { white-space: normal; text-align: center; }
.grade-mode-options { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: .75rem; }
.grade-mode-options .switch-row { align-items: center; }

.errors {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger);
  border-radius: var(--radius);
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: var(--text-body);
}
.errors ul { margin: .25rem 0 0; padding-inline-start: 1.25rem; }

/* ---------- Segmented control (attendance roster) ---------- */
/* Four across when the cell has room, otherwise two by two. The frame is the
   query container because table cells cannot be one. */
.segmented-frame { container-type: inline-size; min-width: 27rem; }
/* Table rows become stacked cards here, so the cell is already full width. */
@media (max-width: 640px) {
  .segmented-frame { min-width: 0; }
}
.segmented {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.segmented__input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented__option {
  cursor: pointer;
  user-select: none;
  min-width: 0;
}

.segmented__option > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 40px;
  padding: .375rem .5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.segmented__option .app-icon { width: .9rem; height: .9rem; flex: none; }
.segmented__option:hover > span { color: var(--ink); }

.segmented__option--present:has(.segmented__input:checked) > span {
  background: var(--brand-light); color: var(--brand-dark); border-color: var(--brand);
}
.segmented__option--absent:has(.segmented__input:checked) > span {
  background: var(--danger-bg); color: var(--danger); border-color: var(--danger);
}
.segmented__option--late:has(.segmented__input:checked) > span {
  background: var(--warning-bg); color: var(--warning); border-color: var(--warning);
}
.segmented__option--excused:has(.segmented__input:checked) > span {
  background: var(--info-bg); color: var(--info); border-color: var(--info);
}

.segmented__option:has(.segmented__input:focus-visible) > span {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

@container (min-width: 27rem) {
  .segmented { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.attendance-tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.attendance-tools .card__title { margin: 0; }
/* The roster table runs edge to edge, so the card drops its padding (see
   .card:has(> form:only-child > .table)); inset the controls above it. */
.card > form > .attendance-tools { margin: 0; padding: 1rem 1rem .75rem; }
.card > form > .attendance-summary { margin: 0 1rem 1rem; }
.attendance-student { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.attendance-student .badge { display: inline-flex; align-items: center; gap: .25rem; }
.attendance-tools__actions { display: flex; flex-wrap: wrap; gap: .375rem; justify-content: flex-end; }
.attendance-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1rem;
  padding: .75rem;
  border-radius: var(--radius);
  background: var(--surface-soft);
}
.attendance-summary__item {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .5rem;
  color: var(--muted);
  font-size: var(--text-label);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface);
}
.attendance-summary__item strong { color: var(--ink); font-size: var(--text-body); }
.attendance-summary__item--present strong { color: var(--success); }
.attendance-summary__item--absent strong { color: var(--danger); }
.attendance-summary__item--late strong { color: var(--warning); }
.attendance-summary__item--excused strong { color: var(--info); }
.attendance-save { justify-content: flex-end; }

@media (max-width: 640px) {
  .attendance-tools { align-items: stretch; flex-direction: column; }
  .attendance-tools__actions { display: grid; grid-template-columns: repeat(2, 1fr); }
  .attendance-tools__actions .btn { width: 100%; }
}