/* The statistics' pages (Task stats): «إحصاءات الدفعة» (/courses/run/stats, part a), a run's for its staff, and
   «الإحصاءات» (/admin/stats, part b), the site's for admins. Right to left first: logical properties only. Colours and
   sizes come from tokens.css. Their tables are the attendance table's (classroom.css: .att-table in its .att-scroll
   box); their numbers are tiles, and their bars and day columns the app's own (the owner's choice 7a: no library), one
   hue, each bar's words beside it, each day's numbers in a table too. */

run-stats-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stats-crumbs {
  margin: 0;
}

.stats-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.stats-card h2,
.stats-card h3 {
  margin: 0;
}

.stats-card h3 {
  font-size: var(--font-size-body);
}

/* ── The numbers at the top ── */

.stats-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* on the card's own colour: its grey words read against it as everywhere in the app (on --color-bg, less well) */
.stats-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
}

.stats-tile p {
  margin: 0;
}

.stats-tile-name,
.stats-tile-note {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.stats-tile-value {
  font-size: var(--font-size-stat);
  font-weight: 700;
  line-height: 1.2;
}

/* a phone: two in a row, their numbers smaller */
@media (max-width: 40rem) {
  .stats-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stats-tile-value {
    font-size: var(--font-size-title);
  }
}

/* ── The students' table: each header sorts it, a student's name opens his details ── */

/* its own box is where the words for screen readers inside it are placed: placed by the page, the columns scrolled out
   of sight would widen it */
.stats-card .att-scroll {
  position: relative;
}

.stats-table thead th {
  padding: 0;
}

/* (Task homework, part b1's review) each cell draws its own line between the rows: the cells that stay in sight
   (sticky) would otherwise cover the table's lines where a row's height isn't a whole pixel */
.stats-table {
  border-collapse: separate;
  border-spacing: 0;
}

.stats-table tbody tr + tr > * {
  border-block-start: 1px solid var(--color-border);
}

/* a student's name stays in sight while the table scrolls sideways, and keeps its words together */
.stats-table .stats-name-cell {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--color-surface);
}

.stats-table tbody .stats-name-cell {
  overflow-wrap: normal;
}

/* in the head, raised as the rest of it */
.stats-table thead .stats-name-cell,
.stats-table thead .stats-pick-cell {
  background: var(--color-raised);
}

.stats-table td {
  vertical-align: top;
}

.stats-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-block-size: var(--control-height);
  padding: var(--space-1) var(--space-2);
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
}

.stats-sort:hover,
.stats-table th[aria-sort] .stats-sort {
  color: var(--color-text);
}

.stats-sort-mark {
  font-size: var(--font-size-small);
}

.stats-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font: inherit;
  font-weight: 700;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
}

.stats-name:hover,
.stats-name[aria-expanded="true"] {
  text-decoration: underline;
}

.stats-flag {
  color: var(--color-danger);
  font-weight: 700;
}

.stats-cell-note {
  display: block;
  color: var(--color-muted);
}

/* ── A student's details ── */

.stats-marked {
  margin: 0;
  color: var(--color-danger);
}

.stats-lines {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-lines li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-1);
  border-block-end: 1px solid var(--color-border);
}

.stats-line-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.stats-line-text {
  color: var(--color-muted);
}

.stats-details > .button {
  align-self: flex-start;
}

/* ── The run as a whole: its bars ── */

.stats-part {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.stats-part .crs-note,
.stats-part .crs-empty {
  margin: 0;
}

/* one grid for all the rows (each row its subgrid), so the bars start and end together whatever their words */
.stats-bars {
  display: grid;
  grid-template-columns: minmax(7rem, 16rem) minmax(4rem, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.stats-bar-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  row-gap: var(--space-1);
}

.stats-bar-row .form-links {
  grid-column: 1 / -1;
  margin: 0;
}

/* (Task homework, part a3) how a homework's students split, on a line of its own under its row */
.stats-bar-row .stats-bar-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.stats-bar-name {
  overflow-wrap: anywhere;
}

/* the bar: its track, and its fill as long as its share, rounded at its end only (anchored at its start) */
.stats-bar {
  display: block;
  block-size: 0.625rem;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-track);
}

.stats-bar-fill {
  display: block;
  block-size: 100%;
  border-start-end-radius: var(--radius);
  border-end-end-radius: var(--radius);
  background: var(--color-on);
}

.stats-bar-text {
  color: var(--color-muted);
  font-size: var(--font-size-small);
  white-space: nowrap;
}

@media (max-width: 30rem) {
  .stats-bars {
    grid-template-columns: 1fr auto;
  }

  .stats-bar {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}

@media (forced-colors: active) {
  .stats-bar {
    border: 1px solid CanvasText;
  }

  .stats-bar-fill {
    background: Highlight;
  }
}

/* ── «أرسل رسالة» (Task homework, part b1): a column of ticks before the names, how many are ticked, and the message's
   box ── */

.stats-msg-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.stats-msg-count {
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.stats-msg-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.stats-msg-form h3 {
  margin: 0;
  font-size: var(--font-size-body);
}

.stats-msg-form .field-hint,
.stats-msg-form .field-error {
  margin: 0;
}

.stats-msg-text {
  inline-size: 100%;
  min-block-size: 6rem;
  resize: vertical;
}

.stats-msg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.stats-msg-missed {
  margin: var(--space-1) 0 0;
  padding-inline-start: var(--space-5);
}

/* (the review's) the ticks' column stays in sight with the names as the table scrolls sideways: as wide as a control,
   the names' cells after it */
.stats-table .stats-pick-cell {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  inline-size: var(--control-height);
  padding: 0;
  background: var(--color-surface);
  /* on the name's line (a row's other cells start at its top) */
  vertical-align: middle;
}

.stats-table.has-picks .stats-name-cell {
  inset-inline-start: var(--control-height);
}

/* the whole cell ticks it: as large as a finger needs */
.stats-pick-hit {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--control-height);
  min-block-size: var(--control-height);
  cursor: pointer;
}

.stats-pick {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0;
  accent-color: var(--color-on-text);
  cursor: inherit;
}

.stats-pick:disabled {
  cursor: default;
}

/* ── How it is counted ── */

.stats-how-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding-inline-start: var(--space-5);
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

/* «عن الدورة»: what a registered student is told its trainers see */
.reg-stats-note {
  margin: 0;
}

/* ── «الإحصاءات» (/admin/stats, Task stats, part b): the site's, for admins ── */

admin-stats-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.stats-parts {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* the period's choice, and the community's under «مجتمعان»: a row of buttons, the one shown pressed */
.stats-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-5);
}

.stats-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.stats-choice-name {
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.stats-choice-button[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* a count for each day: columns along the period, the first day at the start (time runs right to left), their
   heights from the data (a style property: stats-parts.js), the period's highest the full height */
.stats-columns {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
}

.stats-columns-name {
  font-weight: 700;
}

.stats-columns-list {
  display: flex;
  align-items: flex-end;
  gap: calc(var(--space-1) / 2);
  block-size: calc(var(--space-5) * 4);
  margin: 0;
  padding: 0;
  border-block-end: 1px solid var(--color-border);
  list-style: none;
}

.stats-column {
  display: flex;
  flex: 1 1 0;
  align-items: flex-end;
  min-inline-size: 0;
  block-size: 100%;
}

.stats-column-bar {
  display: block;
  inline-size: 100%;
  min-block-size: calc(var(--space-1) / 2);
  border-start-start-radius: var(--radius);
  border-start-end-radius: var(--radius);
  background: var(--color-on);
}

/* 90 days: no gap between the columns, or a phone has no room left for them */
.stats-columns-many .stats-columns-list {
  gap: 0;
}

.stats-columns-ends {
  display: flex;
  justify-content: space-between;
  margin: 0;
  color: var(--color-muted);
  font-size: var(--font-size-small);
}

.stats-columns-none {
  margin: 0;
  color: var(--color-muted);
}

.stats-columns-numbers summary {
  color: var(--color-link);
  font-size: var(--font-size-small);
  cursor: pointer;
}

.stats-columns-numbers[open] summary {
  margin-block-end: var(--space-2);
}

.stats-table-box {
  position: relative;
}

/* (Task study-plan) a month's name in the real scores' table on one line («أغسطس ٢٠٢٦», never broken inside a word) */
.stats-month {
  white-space: nowrap;
}

/* (Task feedback, part b2) «الرضا»'s runs: a run's name broken only between its words, and under its stars what their
   average is of and who rated, on more lines than one on a phone */
.stats-sat-name {
  overflow-wrap: normal;
}

.stats-sat-rated {
  display: block;
  color: var(--color-muted);
  white-space: normal;
}

@media (forced-colors: active) {
  .stats-column-bar {
    background: Highlight;
  }

  .stats-choice-button[aria-pressed="true"] {
    border-width: 3px;
  }
}