/* ==========================================================================
   dashboard-panels.css — admin dashboard panel families: overview quick links,
   stat cards, section cards, the control row (search / select / button), entity
   cards, status badges, loading/empty/error states, the report-filter bar +
   charts, plus the Pass 2a additions: a generic data table, attendance badges,
   the list/card view toggle, an inline field wrapper, and the dialog base.

   Page-scoped: linked from dashboard.html after dashboard-shell.css (which owns
   the dark rail + page chrome). Split out of the old single `dashboard.css` in
   Phase 2 Pass 2a per kore-architecture-folder-structure.md §5 — see the note in
   dashboard-shell.css. Every value is a base.css design token; no `!important`
   outside the sanctioned exceptions; BEM kebab-case classes; the new generic
   blocks (.data-table, .attendance-badge, .view-toggle, .field-inline, .dialog)
   are designed to be reused by the Reports / Performance sections in 2b/2c.

   Sections (in order below):
      1. Overview quick links
      2. Stat cards (grid, icons, clickable scope filters)
      3. Section cards (header, count, controls, body)
      4. Controls (search, select, button)
      5. Entity card grids (users / courses cards)
      6. Status badges
      7. States: loading / empty / error
      8. Report-filter bar + charts
      9. Data tables (generic — roster / reports / performance)
     10. Attendance badges + roster note + teachers bar
     11. View toggle (list / card)
     12. Inline field wrapper (label + input on one row)
     13. Dialog (idle-timeout prompt; base for future modals)
     14. Responsive
   ========================================================================== */


/* ──────────────────────────────────────────────────────────────────────
   1. Overview quick links
   ────────────────────────────────────────────────────────────────────── */

.quick-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--spacing-md);
}

.quick-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  min-height: 44px;
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font: inherit;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast),
              border-color var(--transition-fast);
}

.quick-link:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  border-color: var(--color-primary-alpha-30);
}

.quick-link:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.quick-link__icon {
  width: 20px;
  text-align: center;
  color: var(--color-primary);
  font-size: var(--font-size-md);
}

.quick-link__label {
  flex: 1;
}


/* ──────────────────────────────────────────────────────────────────────
   2. Stat cards (double as scope filters in Users / Courses)
   ────────────────────────────────────────────────────────────────────── */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
}

.stat-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  width: 100%;
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  text-align: left;
  font: inherit;
  color: inherit;
}

.stat-card--filter {
  cursor: pointer;
  transition: box-shadow var(--transition-base), transform var(--transition-base),
              border-color var(--transition-base);
}

.stat-card--filter:hover {
  box-shadow: var(--shadow-card-lift);
  transform: translateY(-2px);
}

.stat-card--filter:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.stat-card.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-20);
}

.stat-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  font-size: var(--font-size-xl);
}

.stat-card__icon--blue   { background: var(--color-primary-alpha-12);   color: var(--color-primary); }
.stat-card__icon--green  { background: var(--color-secondary-alpha-12); color: var(--color-secondary-dark); }
.stat-card__icon--yellow { background: var(--color-accent-alpha-12);    color: var(--color-accent-dark); }
.stat-card__icon--red    { background: var(--color-danger-soft);        color: var(--color-danger); }

.stat-card__content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.stat-card__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

.stat-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}


/* ──────────────────────────────────────────────────────────────────────
   3. Section cards (a panel: header + body)
   ────────────────────────────────────────────────────────────────────── */

.section-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.section-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.section-card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.section-card__count {
  margin-left: var(--spacing-xs);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-light);
}

.section-card__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

.section-card__body {
  padding: var(--spacing-lg);
}


/* ──────────────────────────────────────────────────────────────────────
   4. Controls (search input, selects, buttons)
   ────────────────────────────────────────────────────────────────────── */

.dash-search {
  position: relative;
  display: flex;
  align-items: center;
}

.dash-search__icon {
  position: absolute;
  left: var(--spacing-md);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  pointer-events: none;
}

.dash-search__input {
  min-width: 200px;
  min-height: 44px;
  padding: var(--spacing-sm) var(--spacing-2xl);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.dash-search__input::placeholder {
  color: var(--color-text-light);
}

.dash-search__input:hover {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.dash-search__input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-12);
}

.dash-search__clear {
  position: absolute;
  right: var(--spacing-xs);
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--color-text-light);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.dash-search__clear:hover {
  color: var(--color-danger);
  background: var(--color-surface-subtle);
}

.dash-search__clear:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 1px;
}

.dash-search__clear.is-visible {
  display: inline-flex;
}

.dash-select {
  min-height: 44px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  color: var(--color-text);
  cursor: pointer;
}

.dash-select:hover {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.dash-select:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha-12);
}

.dash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  min-height: 44px;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast), border-color var(--transition-fast),
              color var(--transition-fast);
}

.dash-btn:hover {
  background: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.dash-btn:active {
  transform: translateY(0);
}

.dash-btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

.dash-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.dash-btn--icon {
  min-width: 44px;
  padding-inline: var(--spacing-sm);
}

/* Secondary / outline button — used for the "Sign out now" action in the
   idle-timeout dialog and as the future modals' cancel button. */
.dash-btn--ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

.dash-btn--ghost:hover {
  background: var(--color-surface-subtle);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* Destructive primary — bulk delete, "delete all filtered", and the confirm
   button on a danger-mode confirmModal. Same shape as .dash-btn, red palette. */
.dash-btn--danger {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

.dash-btn--danger:hover {
  background: var(--color-danger-strong);
}


/* ──────────────────────────────────────────────────────────────────────
   5. Entity card grids (users / courses)
   ────────────────────────────────────────────────────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--spacing-lg);
}

.entity-card {
  position: relative;
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.entity-card:hover {
  box-shadow: var(--shadow-card-lift);
  transform: translateY(-2px);
}

.entity-card__id {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  padding: 2px var(--spacing-sm);
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.entity-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  padding-right: var(--spacing-2xl);
}

.entity-card__avatar,
.entity-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: var(--gradient-primary);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

.entity-card__avatar { border-radius: 50%; font-size: var(--font-size-md); }
.entity-card__icon   { border-radius: var(--radius-md); font-size: var(--font-size-lg); }

.entity-card__heading {
  min-width: 0;
  flex: 1;
}

.entity-card__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  color: var(--color-text);
}

.entity-card__title-text {
  word-break: break-word;
}

.entity-card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.entity-card__subtitle--mono {
  font-family: var(--font-family-mono);
}

.entity-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.entity-card__detail {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.entity-card__detail-icon {
  flex-shrink: 0;
  width: 16px;
  margin-top: 2px;
  color: var(--color-text-light);
  text-align: center;
}

.entity-card__detail-content {
  min-width: 0;
}

.entity-card__detail-label {
  display: block;
  margin-bottom: 2px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
}

.entity-card__detail-value {
  color: var(--color-text);
  word-break: break-word;
}

.entity-card__detail-value--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* ──────────────────────────────────────────────────────────────────────
   6. Status badges
   ────────────────────────────────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 2px var(--spacing-sm);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* Green — Online / Visible / Enrolled */
.badge--success {
  background: var(--color-secondary-alpha-20);
  color: var(--color-success-strong);
  border: 1px solid var(--color-secondary-alpha-30);
}

/* Amber — Suspended */
.badge--warning {
  background: var(--color-warning-surface);
  color: var(--color-warning-text);
  border: 1px solid var(--color-accent);
}

/* Quiet grey — Active status / Hidden course / role label */
.badge--neutral {
  background: var(--color-overlay-black-faint);
  color: var(--color-text-light);
  border: 1px solid var(--color-border);
}

/* Blue — informational (teacher role) */
.badge--info {
  background: var(--color-primary-alpha-12);
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-alpha-30);
}


/* ──────────────────────────────────────────────────────────────────────
   7. States: loading / empty / error
   ────────────────────────────────────────────────────────────────────── */

.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-2xl) 0;
}

.dash-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: dash-spin 1s linear infinite;
}

@keyframes dash-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .dash-spinner { animation-duration: 1.5s; }
}

.empty-state,
.error-state {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
}

.empty-state {
  color: var(--color-text-light);
}

.error-state {
  color: var(--color-danger);
}

.empty-state__icon,
.error-state__icon {
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-3xl);
  opacity: 0.5;
}

.empty-state__title,
.error-state__title {
  margin-bottom: var(--spacing-xs);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}


/* ──────────────────────────────────────────────────────────────────────
   8. Report-filter bar + charts
   ────────────────────────────────────────────────────────────────────── */

.report-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.report-filter-bar__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.report-filter-bar__group--inline {
  flex-direction: row;
  align-items: flex-end;
}

.report-filter-bar__group--actions {
  margin-left: auto;
}

.report-filter-bar__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}

.report-filter-bar__range {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.report-filter-bar__sep {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.charts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

/* The chart cards reuse .section-card chrome; this constrains the canvas area. */
.chart-card__canvas {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  min-height: 300px;
}

.chart-card--wide .chart-card__canvas,
.chart-card--full .chart-card__canvas {
  min-height: 400px;
}

.chart-card__canvas canvas {
  max-width: 100%;
  max-height: 400px;
}

.chart-card--wide .chart-card__canvas canvas,
.chart-card--full .chart-card__canvas canvas {
  max-height: 500px;
}


/* ──────────────────────────────────────────────────────────────────────
   9. Data tables (generic — the roster's Teachers/Students tables, and the
      Reports / Performance tables in 2b/2c). Wrap a <table class="data-table__
      table"> in <div class="data-table"> for horizontal scroll on narrow
      screens; an optional <caption class="data-table__caption"> labels it.
   ────────────────────────────────────────────────────────────────────── */

.data-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: var(--spacing-lg);
}

.data-table:last-child {
  margin-bottom: 0;
}

.data-table__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.data-table__caption {
  caption-side: top;
  text-align: left;
  margin-bottom: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.data-table__head {
  background: var(--color-surface-subtle);
}

.data-table__table th {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
}

.data-table__table td {
  padding: var(--spacing-sm) var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: top;
}

.data-table__table tbody tr:last-child td {
  border-bottom: none;
}

.data-table__row:hover {
  background: var(--color-primary-alpha-04);
}

.data-table__cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.data-table__cell--nowrap {
  white-space: nowrap;
}

.data-table__cell--muted {
  color: var(--color-text-light);
}

.data-table__empty {
  padding: var(--spacing-xl);
  text-align: center;
  color: var(--color-text-light);
}

.data-table--compact .data-table__table th,
.data-table--compact .data-table__table td {
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* Totals row at the bottom of a report table — heavier rule + tinted bg. */
.data-table__row--total td {
  border-top: 2px solid var(--color-border);
  background: var(--color-surface-subtle);
}

/* Per-course sub-row in the Reports attendance table — indented + muted bg
   so it visually nests under the aggregate "All Courses" row. Hidden by
   default via the `hidden` attribute (toggled in dashboard-reports.js). */
.data-table__row--child td {
  background: var(--color-surface-subtle);
}

.data-table__row--child td:nth-child(2) {
  padding-left: var(--spacing-xl);
}

/* The collapsible date-row toggle inside .data-table — a button so it gets
   keyboard focus + :focus-visible for free. Styled to look like a row label,
   not a button. */
.reports-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

.reports-expand-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

.reports-expand-toggle__chevron {
  transition: transform 0.15s ease;
}

.reports-expand-toggle.is-expanded .reports-expand-toggle__chevron {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .reports-expand-toggle__chevron {
    transition: none;
  }
}

/* Tiny attendance / activity rate pill — three tiers, same tokens as the
   other status surfaces. Reused by the Reports attendance + active-users
   tables. */
.attendance-rate-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--spacing-xs);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border: 1px solid transparent;
}

.attendance-rate-badge--good {
  background: var(--color-attendance-present-surface);
  color: var(--color-attendance-present-text);
  border-color: var(--color-attendance-present-border);
}

.attendance-rate-badge--warning {
  background: var(--color-attendance-late-surface);
  color: var(--color-attendance-late-text);
  border-color: var(--color-attendance-late-border);
}

.attendance-rate-badge--poor {
  background: var(--color-attendance-absent-surface);
  color: var(--color-attendance-absent-text);
  border-color: var(--color-attendance-absent-border);
}


/* ──────────────────────────────────────────────────────────────────────
   10. Attendance badges + roster note + teachers bar (Participants section)
   ────────────────────────────────────────────────────────────────────── */

.attendance-badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--spacing-xs);
  padding: 2px var(--spacing-sm);
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.attendance-badge--present {
  background: var(--color-attendance-present-surface);
  color: var(--color-attendance-present-text);
  border-color: var(--color-attendance-present-border);
}

.attendance-badge--absent {
  background: var(--color-attendance-absent-surface);
  color: var(--color-attendance-absent-text);
  border-color: var(--color-attendance-absent-border);
}

.attendance-badge--late {
  background: var(--color-attendance-late-surface);
  color: var(--color-attendance-late-text);
  border-color: var(--color-attendance-late-border);
}

.attendance-badge--excused {
  background: var(--color-attendance-excused-surface);
  color: var(--color-attendance-excused-text);
  border-color: var(--color-attendance-excused-border);
}

.attendance-badge--unmarked {
  background: var(--color-attendance-unmarked-surface);
  color: var(--color-attendance-unmarked-text);
  border-color: var(--color-attendance-unmarked-border);
}

/* "No session on …" hint shown when a date is picked but no attendance exists. */
.attendance-note {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-surface-subtle);
  color: var(--color-text-light);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}

/* Teacher chips above the participants list. */
.teachers-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.teachers-bar__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
}

.teachers-bar__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-sm);
  color: var(--color-text);
}

.teachers-bar__chip-icon {
  color: var(--color-primary);
}


/* ──────────────────────────────────────────────────────────────────────
   11. View toggle (list / card segmented control)
   ────────────────────────────────────────────────────────────────────── */

.view-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Top-level segmented toggle (Assessments | SCORM in the Performance section).
   The participants header has its own spacing — only top-of-section toggles
   need the bottom margin. */
#performance-view-toggle {
  margin-bottom: var(--spacing-md);
}

.view-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  min-width: 44px;
  min-height: 44px;
  padding: 0 var(--spacing-md);
  background: var(--color-surface-subtle);
  border: none;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-light);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.view-toggle__btn:last-child {
  border-right: none;
}

.view-toggle__btn:hover {
  background: var(--color-surface);
  color: var(--color-primary);
}

.view-toggle__btn.is-active {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.view-toggle__btn:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: -2px;
}


/* ──────────────────────────────────────────────────────────────────────
   12. Inline field wrapper (a small label + control on one row — e.g. the
       participants attendance-date picker)
   ────────────────────────────────────────────────────────────────────── */

.field-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.field-inline__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-light);
}


/* ──────────────────────────────────────────────────────────────────────
   15. Responsive
   ────────────────────────────────────────────────────────────────────── */

@media (min-width: 1024px) {
  .charts-grid {
    grid-template-columns: 1fr 2fr;
  }

  .chart-card--full {
    grid-column: 1 / -1;
  }
}