/* ---------- Next halaqa planner ---------- */
.planner-summary {
  display: grid;
  --grid-min: 160px;
  gap: .75rem;
  margin-bottom: 1rem;
}

.planner-summary__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-height: 72px;
  padding: 1rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
}

.planner-summary__item:hover {
  border-color: var(--success-border);
  box-shadow: var(--shadow);
  text-decoration: none;
}

.planner-summary__item--alert:hover { border-color: var(--danger-border); }
.planner-summary__label { color: var(--muted); font-size: var(--text-small); font-weight: 700; }
.planner-summary__item strong { color: var(--ink); font-size: var(--text-title); line-height: 1; }

.planner-panel,
.planner-note {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 1rem;
}

.planner-panel { padding: 1rem; }
.planner-panel--missing {
  padding: 0;
  overflow: clip;
  border-color: var(--brand-border);
  background: linear-gradient(180deg, var(--surface-soft) 0, var(--surface) 150px);
}

.planner-panel__head,
.planner-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.planner-panel__head { margin-bottom: .75rem; }
.planner-panel--missing .planner-panel__head {
  margin: 0;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--brand-light);
  background: color-mix(in srgb, var(--brand-light) 60%, transparent);
}
.planner-panel__heading,
.planner-panel__title-row {
  display: flex;
  align-items: center;
}
.planner-panel__heading { gap: .75rem; min-width: 0; }
.planner-panel__title-row { flex-wrap: wrap; gap: .5rem; }
.planner-panel__icon {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--brand-dark);
  background: var(--brand-light);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
}
.planner-panel__icon .app-icon { width: 19px; height: 19px; }
.planner-panel__head h2 { margin: 0; font-size: var(--text-lead); font-weight: 800; }
.planner-panel__head p { margin: .25rem 0 0; color: var(--muted); font-size: var(--text-small); }
.planner-panel__dismiss {
  flex: 0 0 auto;
  padding: .5rem .75rem;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: var(--text-small);
  font-weight: 700;
  text-decoration: none;
}
.planner-panel__dismiss:hover { color: var(--brand-dark); border-color: var(--brand-border); text-decoration: none; }
.planner-note { padding: .75rem 1rem; color: var(--ink); }

.missing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  padding: 1rem;
}

.missing-student {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 1rem;
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .75rem;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.missing-student:hover { border-color: var(--brand-border); box-shadow: var(--shadow); transform: translateY(-1px); }
.missing-student__identity { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.missing-student__avatar {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  color: var(--brand-dark);
  background: var(--brand-light);
  border-radius: 50%;
  font-size: var(--text-body);
  font-weight: 800;
}
.missing-student__details { min-width: 0; }

.missing-student__name {
  display: block;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.missing-student__name:hover { color: var(--brand); text-decoration: none; }
.missing-student__halaqah {
  display: flex;
  align-items: center;
  gap: .25rem;
  margin-top: .125rem;
  color: var(--muted);
  font-size: var(--text-label);
}
.missing-student__halaqah .app-icon { width: 12px; height: 12px; }
.missing-student__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.missing-student__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  min-width: 0;
  min-height: 36px;
  padding: .5rem .5rem;
  color: var(--brand-dark);
  background: var(--surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--radius);
  font-size: var(--text-small);
  font-weight: 750;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
}
.missing-student__action:hover { color: var(--brand-dark); background: var(--brand-light); border-color: var(--brand-border); text-decoration: none; }
.missing-student__action--primary { color: var(--on-brand); background: var(--brand); border-color: var(--brand); }
.missing-student__action--primary:hover { color: var(--on-brand); background: var(--brand-dark); border-color: var(--brand-dark); }
.missing-student__action .app-icon { flex: 0 0 auto; width: 15px; height: 15px; }

@media (max-width: 1100px) {
  .missing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.assignment-row--overdue td { background: var(--danger-bg); }
.assignment-row--today td { background: var(--warning-bg); }
.assignment-form-card { max-width: 920px; }
.readonly-field {
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
  font-weight: 700;
}

/* ---------- Dashboard ---------- */
/* Feature surface: a regular card lifted by a soft brand glow, so it sits
   with the stat cards below in both themes. */
.welcome-card {
  background:
    radial-gradient(420px 160px at 100% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    var(--surface);
  color: var(--ink);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}
[dir="rtl"] .welcome-card {
  background:
    radial-gradient(420px 160px at 0% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    var(--surface);
}
.welcome-card__title { margin: 0; font-size: var(--text-title); font-weight: 800; }
.welcome-card__subtitle { margin: .375rem 0 0; color: var(--muted); }
.dashboard-hero { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.dashboard-hero__context { display: grid; justify-items: end; gap: .375rem; color: var(--muted); font-size: var(--text-small); text-align: end; }
.dashboard-hero__role { padding: .125rem .5rem; color: var(--brand-dark); background: var(--brand-light); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); border-radius: var(--radius-pill); font-weight: 700; }

.stat-grid {
  display: grid;
  --grid-min: 180px;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.dashboard-summary {
  margin-bottom: 1.25rem;
  background: linear-gradient(180deg, var(--brand-light), var(--surface) 65%);
  border-color: var(--brand-border);
}
.dashboard-summary__head {
  flex-wrap: wrap;
  margin-bottom: .75rem;
}
.dashboard-summary__head .badge { flex-shrink: 0; background: var(--surface); border: 1px solid var(--border); }
.dashboard-summary__body {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: var(--text-body);
}
.dashboard-summary__actions {
  margin-top: .75rem;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--surface) 96%, transparent)),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  color: inherit;
  text-decoration: none;
  min-width: 0;
}
.stat-card__icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--brand-light);
  display: grid; place-items: center; font-size: var(--text-subtitle); flex-shrink: 0;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 8%, transparent);
}
.stat-card__icon .app-icon {
  width: 1.35rem;
  height: 1.35rem;
  stroke-width: 1.8;
}
.stat-card:nth-child(3n + 2) .stat-card__icon { background: var(--info-bg); }
.stat-card:nth-child(3n) .stat-card__icon { background: var(--accent-light); }
.stat-card__body { flex: 1; min-width: 0; }
.stat-card__label { color: var(--muted); font-size: var(--text-small); }
.stat-card__value {
  overflow-wrap: anywhere;
  font-size: var(--text-title);
  font-weight: 800;
  color: var(--ink);
  line-height: 1.12;
  margin-top: .125rem;
}
.stat-card__subtitle {
  margin-top: .25rem;
  color: var(--muted);
  font-size: var(--text-small);
  line-height: 1.35;
}
/* Feature stat: the one headline figure on a page, lifted by a brand border
   and glow like the welcome card. Doubled class so it outranks the shared
   .stat-card surface in 12-surfaces.css. */
.stat-card.stat-card--feature {
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  background:
    radial-gradient(280px 120px at 100% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    var(--surface);
  border-color: var(--brand-border);
}
[dir="rtl"] .stat-card.stat-card--feature {
  background:
    radial-gradient(280px 120px at 0% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%),
    var(--surface);
}
.stat-card__total { margin-inline-start: .125rem; font-size: var(--text-lead); font-weight: 600; opacity: .65; }

.progress-ring { width: 76px; height: 76px; flex: none; }
.progress-ring circle { fill: none; stroke-width: 7; }
.progress-ring__track { stroke: var(--brand-light); }
.progress-ring__value { stroke: var(--brand); stroke-linecap: round; transform: rotate(-90deg); transform-origin: center; }
[dir="rtl"] .progress-ring__value { transform: rotate(-90deg) scaleY(-1); }
/* Size comes from the SVG font-size attribute (user units of the 80x80 viewBox). */
.progress-ring__label { fill: var(--ink); font-family: var(--font-display); font-weight: 700; }

.stat-card__arrow { color: var(--brand); opacity: 0; transition: opacity var(--duration) var(--ease); }
.stat-card__arrow::before { content: "→"; }
[dir="rtl"] .stat-card__arrow::before { content: "←"; }
.stat-card--link { cursor: pointer; transition: transform var(--duration) var(--ease), box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.stat-card--link:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lg);
  border-color: var(--success-border);
  text-decoration: none;
}
.stat-card--link:hover .stat-card__arrow { opacity: 1; }

/* ---------- Dashboard analytics ---------- */
.analytics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.analytics:has(> .card:only-child) { grid-template-columns: 1fr; }
.analytics .card { margin: 0; display: flex; flex-direction: column; }
.analytics .card > .table__empty,
.analytics .card > .chart__empty { margin-block: auto; }
.analytics__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.analytics__title { margin: 0; font-size: var(--text-lead); font-weight: 800; }
.analytics__meta { color: var(--muted); font-size: var(--text-small); text-decoration: none; }
a.analytics__meta:hover { color: var(--brand); text-decoration: none; }
@media (max-width: 820px) { .analytics { grid-template-columns: 1fr; } }

.upcoming-halaqas {
  container-type: inline-size;
  margin-bottom: 1.25rem;
}

.upcoming-halaqas__list {
  display: grid;
  gap: .5rem;
}

.upcoming-halaqah {
  display: grid;
  grid-template-columns: minmax(150px, .55fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .5rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.upcoming-halaqah__time,
.upcoming-halaqah__body {
  display: grid;
  gap: .125rem;
}

.upcoming-halaqah__time strong,
.upcoming-halaqah__name {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}

.upcoming-halaqah__name:hover {
  color: var(--brand);
  text-decoration: none;
}

.upcoming-halaqah__time span,
.upcoming-halaqah__meta {
  color: var(--muted);
  font-size: var(--text-small);
}

.upcoming-halaqah__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .75rem;
}

.upcoming-halaqah__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

@container (max-width: 640px) {
  .upcoming-halaqah { grid-template-columns: 1fr; align-items: stretch; }
  .upcoming-halaqah__actions { justify-content: stretch; }
  .upcoming-halaqah__actions .btn { flex: 1 1 0; }
}

.top-students { list-style: none; margin: 0; padding: 0; }
.top-students li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .375rem 0;
  border-bottom: 1px solid var(--border);
}
.top-students li:last-child { border-bottom: none; }
.top-students__rank { display: grid; place-items: center; width: 1.75rem; }
.top-students__name { min-width: 0; font-weight: 700; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.top-students__name:hover { color: var(--brand); text-decoration: none; }
.top-students__halaqah { color: var(--muted); font-size: var(--text-small); flex: 1; }
.top-students__points { color: var(--brand); font-weight: 700; font-size: var(--text-body); }

.config-list { list-style: none; margin: 0; padding: 0; }
.config-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .375rem 0;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body);
}
.config-list li:last-child { border-bottom: none; }

.quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.quick-actions {
  padding: .25rem 0 .375rem;
}
.quick-actions .btn {
  min-height: 40px;
}

.super-admin-alerts {
  display: grid;
  gap: .5rem;
}
.super-admin-alert {
  display: grid;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}
.super-admin-alert:last-child { border-bottom: none; padding-bottom: 0; }
.super-admin-alert__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.super-admin-alert .config-list li span:last-child {
  color: var(--muted);
  font-size: var(--text-small);
}
.dashboard-actions { margin-bottom: 1.25rem; padding: 1rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.dashboard-actions__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.dashboard-actions__head h2 { margin: 0; font-size: var(--text-lead); }
.dashboard-actions__head p { margin: .125rem 0 0; color: var(--muted); font-size: var(--text-small); }
.dashboard-actions__today { font-size: var(--text-small); font-weight: 800; white-space: nowrap; }
.dashboard-actions .quick-actions { margin: 0; padding: 0; }
.setup-checklist {
  margin-bottom: 1rem;
  padding: 1rem 1rem;
  border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent);
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand-light), var(--surface));
  box-shadow: var(--shadow-sm);
}
.setup-checklist__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.setup-checklist__head h2 { margin: 0; font-size: var(--text-lead); }
.setup-checklist__head p { margin: .25rem 0 0; color: var(--muted); font-size: var(--text-small); }
.setup-checklist__head > strong { color: var(--brand); font-size: var(--text-small); white-space: nowrap; }
.setup-checklist__progress { height: 6px; margin: .75rem 0; overflow: clip; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.setup-checklist__progress span { display: block; height: 100%; border-radius: inherit; background: var(--brand); transition: width var(--duration) var(--ease); }
.setup-checklist__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.setup-checklist__steps li { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .5rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.setup-checklist__steps li .btn { grid-column: 1 / -1; justify-content: center; margin-top: .125rem; }
.setup-checklist__check { display: grid; place-items: center; width: 23px; height: 23px; color: var(--brand); font-size: var(--text-label); font-weight: 800; border-radius: 50%; background: var(--brand-light); }
.setup-checklist__steps strong,
.setup-checklist__steps small { display: block; }
.setup-checklist__steps strong { font-size: var(--text-label); line-height: 1.3; }
.setup-checklist__steps small { margin-top: .125rem; color: var(--muted); font-size: var(--text-micro); line-height: 1.35; }
.setup-checklist__step--complete { opacity: .68; }
.setup-checklist__step--complete .setup-checklist__check { color: var(--on-brand); background: var(--success); }
.setup-checklist__step--current { border-color: color-mix(in srgb, var(--brand) 45%, transparent) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 8%, transparent); }
.setup-checklist__later { grid-column: 1 / -1; padding-inline-start: 1.75rem; }
.activation-summary { margin-bottom: 1rem; }
.activation-summary__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.activation-summary__head p { margin: .25rem 0 0; }
.activation-summary__head > strong { color: var(--brand); font-size: var(--text-small); }
.activation-summary__steps { margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; }
.activation-summary__steps li { padding: .375rem .75rem; display: flex; align-items: center; gap: .375rem; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--muted); font-size: var(--text-label); }
.activation-summary__steps li.is-complete { color: var(--brand-dark); border-color: var(--brand-border); background: var(--brand-light); }

@media (max-width: 1050px) {
  .setup-checklist__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .setup-checklist__head { flex-direction: column; gap: .375rem; }
  .setup-checklist__steps { grid-template-columns: 1fr; }
}
.attendance-meter-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.attendance-meter-row:last-child { margin-bottom: 0; }
.attendance-meter-row__label { flex: 0 0 70px; }
.attendance-meter-row__bar { flex: 1; min-width: 0; }
.attendance-meter-row__count { flex: 0 0 32px; text-align: end; font-weight: 700; }

.section-title { font-size: var(--text-heading); font-weight: 800; margin: 0 0 1rem; }

.ward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}
.ward-card {
  display: grid;
  gap: .75rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  color: inherit;
  box-shadow: var(--shadow-sm);
}
.ward-card__header {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-width: 0;
}
.ward-card__avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-light); color: var(--brand-dark);
  display: grid; place-items: center; font-weight: 800; font-size: var(--text-heading);
}
.ward-card__identity { min-width: 0; }
.ward-card__name {
  display: inline-block;
  max-width: 100%;
  font-weight: 800;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.ward-card__name:hover { color: var(--brand); text-decoration: none; }
.ward-card__meta,
.ward-card__empty,
.ward-card__subline {
  color: var(--muted);
  font-size: var(--text-small);
}
.ward-card__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .5rem;
  margin: 0;
}
.ward-card__metrics div {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .5rem;
  min-width: 0;
}
.ward-card__metrics dt {
  color: var(--muted);
  font-size: var(--text-label);
  margin: 0 0 .125rem;
}
.ward-card__metrics dd {
  color: var(--ink);
  font-size: var(--text-lead);
  font-weight: 800;
  margin: 0;
}
.ward-card__section {
  border-top: 1px solid var(--border);
  padding-top: .75rem;
  min-width: 0;
}
.ward-card__label {
  color: var(--muted);
  font-size: var(--text-label);
  font-weight: 800;
  margin-bottom: .25rem;
}
.ward-card__assignment {
  display: block;
  color: var(--ink);
  font-size: var(--text-body);
  font-weight: 700;
  margin-top: .125rem;
  overflow-wrap: anywhere;
  text-decoration: none;
}
a.ward-card__assignment:hover { color: var(--brand); }
.ward-card__subline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .375rem;
}
.ward-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px solid var(--border);
  padding-top: .75rem;
}
.ward-card__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem;
}

.assignment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.assignment-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
}
.assignment-list li > div {
  min-width: 0;
}
.assignment-list li:last-child { border-bottom: none; }
.assignment-list__name {
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.assignment-list__name:hover { color: var(--brand); }
.assignment-list__meta {
  color: var(--muted);
  font-size: var(--text-small);
  margin-inline-start: .375rem;
}
.assignment-list__content {
  color: var(--ink);
  font-size: var(--text-small);
  margin-top: .25rem;
}

.attention-card { container-type: inline-size; margin-bottom: 1rem; border-inline-start: 4px solid var(--warning); }
.attention-card__hint { margin: .25rem 0 0; color: var(--muted); font-size: var(--text-small); }
.attention-list { display: grid; margin-top: .75rem; }
.attention-item { display: grid; grid-template-columns: minmax(150px, .65fr) minmax(240px, 1.35fr) auto; gap: .75rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.attention-item:last-child { border-bottom: 0; }
.attention-item__student { min-width: 0; }
.attention-item__name { display: block; color: var(--ink); font-weight: 800; overflow-wrap: anywhere; }
.attention-item__student > span { color: var(--muted); font-size: var(--text-small); }
.attention-item__signals { display: flex; flex-wrap: wrap; gap: .375rem; }
.attention-item--two-column { grid-template-columns: minmax(0, 1fr) auto; }
.attention-item--two-column > .btn { justify-self: end; }
@container (max-width: 640px) {
  .attention-item { grid-template-columns: 1fr; align-items: stretch; }
  .attention-item__actions { justify-content: flex-start; }
  .attention-item__actions .btn { flex: 1 1 auto; width: auto; }
}
@media (max-width: 720px) {
  .attention-item { grid-template-columns: 1fr; align-items: stretch; }
  .attention-item__actions { justify-content: flex-start; }
  .attention-item__actions .btn { flex: 1 1 auto; width: auto; }
  .attention-item--two-column > .btn { width: 100%; justify-self: stretch; }
}

.assignment-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}
.assignment-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .75rem;
}
.assignment-card__title {
  margin: 0;
  font-size: var(--text-lead);
  font-weight: 800;
}
.assignment-card__meta {
  margin: .25rem 0 0;
  color: var(--muted);
  font-size: var(--text-small);
}
.assignment-card__portions {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.assignment-portion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .5rem .75rem;
  color: var(--ink);
  font-size: var(--text-body);
}
.assignment-card__notes {
  margin: .75rem 0 0;
  color: var(--ink);
  white-space: pre-line;
}
.assignment-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1rem;
}

.detail-grid {
  display: grid;
  --grid-min: 180px;
  gap: .75rem;
}
.detail-grid > div {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  min-width: 0;
}
.detail-grid__label {
  color: var(--muted);
  font-size: var(--text-small);
  font-weight: 700;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: 1rem;
}
.section-head h2 {
  margin: 0;
  font-size: var(--text-lead);
  font-weight: 800;
}

.timeline {
  display: grid;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline__item {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
}
.timeline__marker {
  width: 10px;
  height: 10px;
  margin-top: .5rem;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 0 4px var(--brand-light);
}
.timeline__item--attendance .timeline__marker { background: var(--info); box-shadow: 0 0 0 4px var(--info-bg); }
.timeline__item--assignment .timeline__marker { background: var(--warning); box-shadow: 0 0 0 4px var(--warning-bg); }
.timeline__item--certificate .timeline__marker { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-light); }
.timeline__body {
  min-width: 0;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--border);
}
.timeline__item:last-child .timeline__body { border-bottom: 0; padding-bottom: 0; }
.timeline__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  color: var(--muted);
  font-size: var(--text-small);
}
.timeline__kind {
  font-weight: 800;
  color: var(--brand-dark);
}
.timeline__title {
  display: block;
  margin-top: .125rem;
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.timeline__title:hover { color: var(--brand); text-decoration: none; }
.timeline__meta {
  margin: .125rem 0 0;
  color: var(--muted);
  font-size: var(--text-small);
}