/*
 * attend. -- the administration overview (templates/ui/admin_overview.html).
 *
 * Design: docs/design/visual-design.md, "Admin 'Needs attention' row" and
 * "Quick access tiles"; boards A-admin-phone / A-admin-desktop in the Indigo
 * colours. Phone: the sections stack, the counts read in three columns and the
 * tiles in two. Desktop: "Needs attention" and "Today across the faculty" sit
 * side by side when there is room, the tiles in five columns.
 *
 * Only adds rules to `@layer components` with var(--...) tokens from
 * static/css/app.css: no colour literals, gradients, blur or filters, shadows
 * only as the light theme's elevation tokens (tests/test_css_rules.py). Shared
 * components (.btn, .row, .row-list, .section-label) are static/css/components.css;
 * the selectors here carry the screen's own class first, and outrank a shared
 * rule's specificity, so they win whatever the link order.
 */
@layer components {
  /* Sections: 24px apart (Quick access 32px from 768px). The section labels'
     top margin spaces them (a flex item's margin does not collapse into a
     row gap, so the row gap stays 0). */
  .overview-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 var(--space-4);
  }

  /* Specific enough (0,3,0) to beat components.css's
     `.overview-section + .overview-section` in any link order. */
  .overview-top > .overview-section,
  .overview-top > .overview-section + .overview-section {
    margin-top: 0;
    min-width: 0;
  }

  .overview-top > .attention {
    flex: 2 1 560px;
  }

  .overview-top > .faculty-today {
    flex: 1 1 300px;
  }

  .overview-top + .quick-access {
    margin-top: var(--space-6);
  }

  .overview-top .section-label,
  .quick-access .section-label {
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
  }

  /* "Needs attention": a tinted 36px circle by kind, a big bold count before
     what is waiting, a muted description, and the "Review" pill (.btn is the
     secondary button). The pill stays beside the text on phones too. */
  .attention-list .attention-row {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: var(--space-3);
    padding-block: var(--space-4);
  }

  .attention-row .attention-row__icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    inline-size: 36px;
    block-size: 36px;
    margin-top: 2px;
    border-radius: 50%;
  }

  .attention-row .attention-row__icon .icon {
    inline-size: 18px;
    block-size: 18px;
    stroke-width: 2.25;
  }

  .attention-row .attention-row__icon--positive {
    background: var(--attend-positive-bg);
    color: var(--attend-positive-text);
  }

  .attention-row .attention-row__icon--warning {
    background: var(--attend-warning-bg);
    color: var(--attend-warning-text);
  }

  .attention-row .attention-row__icon--info {
    background: var(--attend-info-bg);
    color: var(--attend-info-text);
  }

  .attention-row .attention-row__icon--inactive {
    background: var(--attend-inactive-bg);
    color: var(--attend-inactive-text);
  }

  .attention-row .attention-row__icon--danger {
    background: var(--attend-danger-bg);
    color: var(--attend-danger-text);
  }

  .attention-row .attention-row__body {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .attention-row .row__title {
    font-size: var(--text-body);
    line-height: var(--leading-body);
    font-weight: var(--weight-strong);
  }

  .attention-row .attention-row__count {
    margin-inline-end: var(--space-05);
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: 28px; /* Bricolage 28/800 at every width (§7) */
    line-height: 32px;
    font-weight: var(--weight-display);
    font-variant-numeric: tabular-nums;
  }

  .attention-row .row__meta {
    color: var(--attend-text-muted);
  }

  .attention-list .attention-row__review {
    flex-shrink: 0;
    gap: var(--space-1);
    padding-inline: var(--space-4);
  }

  /* Nothing waiting: an "All caught up" card the height of the faculty card
     beside it (owner, 2026-11-02). Only an empty queue stretches the row. */
  .overview-top:has(.attention-clear) {
    align-items: stretch;
  }

  .overview-top > .attention:has(.attention-clear) {
    display: flex;
    flex-direction: column;
  }

  .attention .attention-clear {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    border: 1px solid var(--attend-border);
    border-radius: var(--r-lg);
    background: var(--attend-surface);
    box-shadow: var(--attend-shadow-card);
    text-align: center;
  }

  .attention-clear .attention-clear__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 56px;
    block-size: 56px;
    margin-bottom: var(--space-2);
    border-radius: 50%;
    background: var(--attend-brand-tint);
    color: var(--attend-accent);
  }

  .attention-clear .attention-clear__title {
    margin: 0;
    color: var(--attend-text-strong);
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: var(--weight-display);
  }

  .attention-clear .attention-clear__body {
    margin: 0;
    max-width: var(--measure);
    color: var(--attend-text-muted);
    font-size: var(--text-small);
  }

  /* "Today across the faculty": one card of three counts. */
  .faculty-today .faculty-today__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--attend-border);
    border-radius: var(--r-lg);
    background: var(--attend-surface);
    box-shadow: var(--attend-shadow-card);
  }

  .faculty-today .faculty-today__item {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    min-width: 0;
    padding: var(--space-4) var(--space-3);
    overflow-wrap: anywhere;
  }

  .faculty-today .faculty-today__item + .faculty-today__item {
    border-inline-start: 1px solid var(--attend-border);
  }

  /* Phones show the number and its words only; the icon tile joins from 768px. */
  .faculty-today .faculty-today__icon {
    display: none;
  }

  .faculty-today .faculty-today__count {
    color: var(--attend-text-strong);
    font-family: var(--font-display);
    font-optical-sizing: auto;
    font-size: 28px; /* Bricolage 28/800 at every width (§7) */
    line-height: 32px;
    font-weight: var(--weight-display);
    font-variant-numeric: tabular-nums;
  }

  .faculty-today .faculty-today__label {
    margin-top: var(--space-1);
    color: var(--attend-text-muted);
    font-size: var(--text-small);
    line-height: var(--leading-small);
  }

  /* "Quick access": tiles of a brand-tint icon circle and a label. */
  .quick-access .quick-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .quick-tiles .quick-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    block-size: 100%;
    min-height: var(--touch);
    padding: var(--space-4);
    border: 1px solid var(--attend-border);
    border-radius: var(--r-md);
    background: var(--attend-surface);
    color: var(--attend-text-strong);
    font-size: var(--text-button);
    line-height: var(--leading-button);
    font-weight: var(--weight-button);
    text-decoration: none;
    overflow-wrap: anywhere;
  }

  .quick-tiles .quick-tile:hover {
    border-color: var(--attend-border-strong);
    background: var(--attend-row-hover);
  }

  .quick-tiles .quick-tile__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    background: var(--attend-brand-tint);
    color: var(--attend-brand-text);
  }

  .quick-tiles .quick-tile__icon .icon {
    inline-size: 20px;
    block-size: 20px;
  }

  @media (min-width: 768px) {
    .overview-top + .quick-access {
      margin-top: var(--space-8);
    }

    .attention-list .attention-row {
      gap: var(--space-4);
      padding-inline: var(--space-6);
    }

    .attention-row .attention-row__icon {
      align-self: center;
      margin-top: 0;
    }

    .attention-row .attention-row__count {
      margin-inline-end: var(--space-2);
    }

    .faculty-today .faculty-today__list {
      flex-direction: column;
      padding: var(--space-1) var(--space-6);
    }

    .faculty-today .faculty-today__item {
      flex-direction: row;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-4) 0;
    }

    .faculty-today .faculty-today__item + .faculty-today__item {
      border-inline-start: 0;
      border-top: 1px solid var(--attend-border);
    }

    .faculty-today .faculty-today__icon {
      display: inline-flex;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      inline-size: 40px;
      block-size: 40px;
      border-radius: var(--r-sm);
      background: var(--attend-ground);
      color: var(--attend-text);
    }

    .faculty-today .faculty-today__icon .icon {
      inline-size: 20px;
      block-size: 20px;
    }

    .faculty-today .faculty-today__count {
      min-width: 2ch;
    }

    .faculty-today .faculty-today__label {
      margin-top: 0;
      color: var(--attend-text);
      font-size: var(--text-body);
      line-height: var(--leading-body);
    }

    .quick-access .quick-tiles {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-4);
    }
  }

  @media (min-width: 1024px) {
    .quick-access .quick-tiles {
      grid-template-columns: repeat(5, minmax(0, 1fr));
    }
  }
}