@layer components {
  /* Staff dashboard: main content left, stats sidebar right */
  .dashboard-layout {
    align-items: start;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 16rem;

    @media (max-width: 900px) { grid-template-columns: 1fr; }
  }
  /* Consistent breathing room between stacked sections (Needs Attention, My Classes,
     Upcoming, Assessments), whichever combination is shown. */
  .dashboard-main > * + * { margin-block-start: 2rem; }
  .dashboard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .dashboard-sidebar-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0.5rem 0 0;
    text-transform: uppercase;
  }

  /* Time-sensitive, student-facing tiles (Awaiting Approval, Results Awaiting Release) get
     the same warm treatment as "Needs your attention", so an admin/teacher can triage the
     sidebar by colour rather than reading every label. Variants only set
     --dashboard-stat-card-*. */
  .dashboard-stat-card {
    --dashboard-stat-card-background: oklch(var(--oklch-canvas-raised));
    --dashboard-stat-card-border-color: var(--color-border);

    background: var(--dashboard-stat-card-background);
    border: 1px solid var(--dashboard-stat-card-border-color);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    text-align: center;
  }
  .dashboard-stat-card--link {
    color: inherit;
    display: block;
    text-decoration: none;
    transition: border-color 150ms;

    &:hover { --dashboard-stat-card-border-color: var(--color-primary); }
  }
  .dashboard-stat-card--accent {
    --dashboard-stat-card-background: oklch(var(--oklch-warning) / 0.08);
    --dashboard-stat-card-border-color: oklch(var(--oklch-warning) / 0.35);

    .stat-value { color: var(--color-warning-text); }

    &:hover { --dashboard-stat-card-border-color: oklch(var(--oklch-warning)); }
  }

  /* Needs your attention: leads the school_admin dashboard so actionable items (pending
     invitations, assessments awaiting approval) surface before the assessments table. */
  .needs-attention {
    background: oklch(var(--oklch-warning) / 0.08);
    border: 1px solid oklch(var(--oklch-warning) / 0.35);
    border-radius: var(--radius-md);
    margin-block-end: 2rem;
    padding: 1.25rem 1.5rem;

    h2 {
      font-size: 1.1rem;
      margin: 0 0 0.75rem;
    }
    h3.dashboard-subheading:first-of-type { margin-block-start: 0; }
  }
  .needs-attention-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;

    a { font-weight: 600; }
  }
  .needs-attention-more {
    font-size: 0.875rem;
    margin: 0.5rem 0 0;
  }
  .needs-attention-clear {
    color: var(--color-text-secondary);
    margin: 0;
  }

  /* Upcoming assessments and my classes: divided lists */
  .upcoming-assessments-list,
  .my-classes-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    list-style: none;
    margin: 0;
    padding: 0;

    li {
      border-block-end: 1px solid var(--color-border);
      display: flex;
      padding-block-end: 0.75rem;
    }
    li:last-child {
      border-block-end: none;
      padding-block-end: 0;
    }
  }
  .upcoming-assessments-list {
    li {
      align-items: baseline;
      gap: 1rem;
      justify-content: space-between;
    }
    a { font-weight: 600; }
  }
  .upcoming-assessments-time {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
  }
  .my-classes-list li {
    flex-direction: column;
    gap: 0.25rem;
  }
  .my-classes-name { font-weight: 600; }
  .my-classes-stats {
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }

  .dashboard-section { margin: 2rem 0; }
  .dashboard-section-header {
    align-items: baseline;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
  }
  .dashboard-live-as-of {
    color: var(--color-text-muted);
    font-size: 0.875rem;
  }

  .dashboard-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    margin-block-start: 1rem;
  }
  .dashboard-charts {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    margin-block-start: 1.25rem;
  }

  .dashboard-card {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1.25rem;
  }
  .dashboard-card-title {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
    text-transform: uppercase;
  }
  .dashboard-total {
    color: var(--color-text);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
  }
  .dashboard-total-target {
    color: var(--color-text-muted);
    font-size: 1.5rem;
    font-weight: 400;
  }
  .dashboard-sub {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin: 0.25rem 0 0;
  }
  .dashboard-type-list {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    margin: 0.35rem 0 0;
    opacity: 0.7;
  }
  .dashboard-target-q { color: var(--color-text-muted); }

  .dashboard-table {
    border-collapse: collapse;
    font-size: 0.875rem;
    inline-size: 100%;

    td { padding: 0.3rem 0.25rem; }
    td:first-child { color: var(--color-text); }
    thead th {
      color: var(--color-text-muted);
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      padding: 0 0.5rem 0.35rem;
      text-transform: uppercase;
    }
  }
  .dashboard-table--indented {
    margin-block-start: 0.25rem;
    padding-inline-start: 0.75rem;

    td:first-child {
      color: var(--color-text-muted);
      padding-inline-start: 0.75rem;
    }
  }
  .count-cell {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    text-align: end;
    white-space: nowrap;
  }
  .marks-cell {
    font-variant-numeric: tabular-nums;
    text-align: end;
    white-space: nowrap;
  }
  .marks-label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
  }
  .pct-cell {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    inline-size: 3rem;
    text-align: end;
  }
  .pct-badge {
    background: var(--color-surface);
    border-radius: 999px;
    color: var(--color-text-muted);
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    margin-inline-start: 0.25rem;
    padding: 0.1rem 0.4rem;
    vertical-align: middle;
  }

  /* ── Dashboard accordion ── */
  .dashboard-accordion {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);

    .dashboard-grid,
    .dashboard-subheading,
    .fa-breakdown { padding: 1rem 1rem; }
  }
  .dashboard-accordion-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.75rem;
    list-style: none;
    padding: 0.75rem 1rem;
    user-select: none;

    &::-webkit-details-marker { display: none; }
    &::before {
      color: var(--color-text-muted);
      content: '▶';
      flex-shrink: 0;
      font-size: 0.625rem;
      transition: transform 150ms ease;
    }
    .dashboard-accordion[open] & { border-block-end: 1px solid var(--color-border); }
    .dashboard-accordion[open] &::before { transform: rotate(90deg); }
  }
  .dashboard-accordion-title {
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .dashboard-accordion-meta {
    color: var(--color-text-muted);
    font-size: 0.8rem;
  }

  /* ── Focus area breakdown table ── */
  .dashboard-subheading {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    margin: 1.5rem 0 0.75rem;
    text-transform: uppercase;
  }
  .fa-breakdown {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }
  .fa-block {
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem 1.25rem;
  }
  .fa-block-header {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-block-end: 0.75rem;
  }
  .fa-block-name {
    font-size: 0.9375rem;
    font-weight: 600;
  }
  .fa-block-meta {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
  }
  .fa-shared-badge {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-style: italic;
    white-space: nowrap;
  }
  .stat-col {
    font-variant-numeric: tabular-nums;
    padding: 0.25rem 0.5rem;
    text-align: end;
    white-space: nowrap;
  }
  .stat-col--total { font-weight: 600; }
  .fa-totals-row td {
    border-block-start: 1px solid var(--color-border);
    font-weight: 600;
    padding-block-start: 0.35rem;
  }

  .page-number-group {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Focus area and topic pills. Variants only set --question-tag-*. */
  .question-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
  }
  .question-tag {
    --question-tag-background: transparent;
    --question-tag-color: inherit;

    background: var(--question-tag-background);
    border-radius: 999px;
    color: var(--question-tag-color);
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.15rem 0.5rem;
    white-space: nowrap;
  }
  .question-tag--focus-area {
    --question-tag-background: light-dark(oklch(0.92 0.06 250), oklch(0.30 0.06 250));
    --question-tag-color: light-dark(oklch(0.35 0.12 250), oklch(0.85 0.08 250));
  }
  .question-tag--topic {
    --question-tag-background: light-dark(oklch(0.93 0.05 160), oklch(0.30 0.05 160));
    --question-tag-color: light-dark(oklch(0.35 0.10 160), oklch(0.85 0.08 160));
  }

  /* ── Edit form ── */
  .form-section {
    border-block-end: 1px solid var(--color-border);
    margin-block-end: 2rem;
    padding-block-end: 2rem;

    &:last-of-type { border-block-end: none; }
  }
  .form-section-heading {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 0.25rem;
  }
  .form-section-hint {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: 0 0 1rem;
  }
  .form-default-preview {
    background: oklch(var(--oklch-canvas-raised));
    border: 1px solid oklch(var(--oklch-border));
    border-radius: var(--radius-md);
    margin: 0 0 var(--space-4);
    padding: var(--space-4) var(--space-5);
  }
  .form-default-preview-label {
    color: oklch(var(--oklch-ink-light));
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin: 0 0 var(--space-3);
    text-transform: uppercase;
  }
  .form-default-preview-quote {
    border-inline-start: 3px solid oklch(var(--oklch-border));
    color: oklch(var(--oklch-ink-mid));
    font-size: 0.9375rem;
    font-style: italic;
    line-height: 1.6;
    margin: 0;
    padding-inline-start: var(--space-4);
  }
  .form-group--wide { max-inline-size: 100%; }
  .form-group--sample-answer {
    border-block-start: 1px solid var(--color-border);
    margin-block-start: 1.5rem;
    padding-block-start: 1.5rem;

    label { color: var(--color-success); }
  }
  /* ── Boxed form sections (subject type restrictions) ── */
  .form-group--boxed {
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    padding: 0.75rem 1rem;
  }
  .form-group--remove {
    flex: 0 0 auto;
    min-inline-size: auto;
  }
  .form-control--narrow { max-inline-size: 10rem; }
  /* Sits in a row of buttons (special provisions "Copy Provisions") */
  .form-control--inline { inline-size: auto; }
  .form-control-sm {
    font-size: 0.85rem;
    min-block-size: 36px;
    padding: 0.3rem 0.6rem;

    select& { padding-inline-end: 2rem; }
  }
  .lexxy-editor--wide { min-block-size: 12rem; }

  /* Focus area + topic multi-row section */
  .fat-section { margin-block-end: 1.25rem; }
  .fat-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-block-end: 0.5rem;
  }
  .fat-label {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
  }
  .fat-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .fat-row {
    align-items: flex-end;
    margin-block-end: 0;
  }
  .fat-outcomes {
    column-count: 2;
    column-gap: 2rem;
    padding-block: 0.25rem;

    @media (max-width: 1024px) { column-count: 1; }
  }
  .fat-outcome-label {
    align-items: flex-start;
    break-inside: avoid;
    cursor: pointer;
    display: flex;
    font-size: 0.875rem;
    gap: 0.5rem;
    margin-block-end: 0.75rem;

    input[type="checkbox"] {
      flex-shrink: 0;
      margin-block-start: 0.15rem;
    }
  }

  /* ── Checkbox lists (focus areas, outcomes, year levels) ── */
  .checkbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
  }
  .checkbox-list--inline {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }
  .checkbox-list--grid {
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }
  .checkbox-label {
    align-items: center;
    cursor: pointer;
    display: flex;
    font-size: 0.875rem;
    gap: 0.375rem;
  }

  /* ── Year-level tab bar ── */
  .year-level-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-block-end: 1rem;
  }
}