/* ============================================================================
   Component: stat tile
   ----------------------------------------------------------------------------
   Replaces the saturated full-bleed .stat-card. The audit measured the old
   treatment at 2.15:1 (white on #f59e0b), 2.54:1 (on #10b981), 2.77:1 (on
   #0ea5e9) and 2.80:1 (on #f97316) — the dashboard's headline numbers, below
   AA, on the first screen every user sees.

   The fix is structural, not a palette swap: the NUMBER sits on --surface as
   --ink (15.37:1), and the tone survives as a small icon plus a 3px accent
   rule. Colour stops carrying the text and starts carrying the category,
   which is what it was always meant to do.
   ========================================================================== */
.aq-stat{
  position: relative;
  display: block;
  height: 100%;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-4);
  padding-left: calc(var(--space-4) + 3px);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* The accent rule. A pseudo-element rather than border-left so the tile's
   corner radius is not flattened on one side. */
.aq-stat::before{
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 3px;
  background: var(--aq-stat-accent, var(--brand-primary));
}

.aq-stat__head{
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.aq-stat__icon{
  font-size: var(--fs-h4);
  line-height: 1;
  color: var(--aq-stat-accent, var(--brand-primary));
}
.aq-stat__label{
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.aq-stat__value{
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: var(--fw-bold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.aq-stat__meta{
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--ink-muted);
}

/* Tones. Only the accent changes — never the text colour. */
.aq-stat--brand   { --aq-stat-accent: var(--brand-primary); }
.aq-stat--success { --aq-stat-accent: var(--success); }
.aq-stat--warning { --aq-stat-accent: var(--warning); }
.aq-stat--danger  { --aq-stat-accent: var(--danger); }
.aq-stat--info    { --aq-stat-accent: var(--info); }
.aq-stat--neutral { --aq-stat-accent: var(--line-strong); }

/* ---------------------------------------------------------- soft variant --
   For tiles that sit INSIDE a card, where a --surface tile would be invisible
   against its parent and the tone needs to carry the scanning cue itself
   (the attendance register summary: Present / Absent / Late at a glance).
   The tint comes from the semantic soft surfaces, which ship contrast-paired
   foregrounds — so unlike the hand-rolled `{colour}1a` backgrounds this
   replaces, the figure on top is guaranteed readable in both themes. */
.aq-stat--soft{
  background: var(--aq-stat-soft-bg, var(--surface-3));
  color: var(--aq-stat-soft-fg, var(--ink-muted));
  border-color: transparent;
}
/* The tint already communicates the tone, so the accent rule would be noise. */
.aq-stat--soft::before{ display: none; }
.aq-stat--soft{ padding-left: var(--space-4); }
/* Everything inside a soft tile takes the tone's paired foreground at FULL
   strength. Dimming the label with opacity is tempting for hierarchy, but at
   .82 it drops these to 3.42-4.24:1 in light mode — below AA. The label is
   already subordinate through size (12px), weight and letterspacing, which
   costs no contrast. */
.aq-stat--soft .aq-stat__value,
.aq-stat--soft .aq-stat__icon,
.aq-stat--soft .aq-stat__label,
.aq-stat--soft .aq-stat__meta{ color: inherit; }

.aq-stat--soft.aq-stat--success{ --aq-stat-soft-bg: var(--status-success-bg); --aq-stat-soft-fg: var(--status-success-fg); }
.aq-stat--soft.aq-stat--warning{ --aq-stat-soft-bg: var(--status-warning-bg); --aq-stat-soft-fg: var(--status-warning-fg); }
.aq-stat--soft.aq-stat--danger { --aq-stat-soft-bg: var(--status-danger-bg);  --aq-stat-soft-fg: var(--status-danger-fg);  }
.aq-stat--soft.aq-stat--info   { --aq-stat-soft-bg: var(--status-info-bg);    --aq-stat-soft-fg: var(--status-info-fg);    }
.aq-stat--soft.aq-stat--neutral{ --aq-stat-soft-bg: var(--status-neutral-bg); --aq-stat-soft-fg: var(--status-neutral-fg); }
.aq-stat--soft.aq-stat--brand  { --aq-stat-soft-bg: var(--brand-subtle);      --aq-stat-soft-fg: var(--brand-primary-text); }

/* Interactive tiles. A tile that opens a dialog is a real <button>, so it is
   focusable and operable from the keyboard without role/tabindex patching.
   The lift the old cards used made a wall of them feel restless, so the hover
   cue is a border and shadow change only. */
button.aq-stat{
  width: 100%; font: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--card-border);
}
.aq-stat--soft:is(button, a){ border-color: transparent; }
a.aq-stat, button.aq-stat{ transition: border-color var(--motion-fast) var(--ease-out),
                       box-shadow var(--motion-fast) var(--ease-out); }
a.aq-stat:hover, button.aq-stat:hover{ border-color: var(--line-interactive); box-shadow: var(--shadow-md); }
a.aq-stat:focus-visible, button.aq-stat:focus-visible{
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: var(--focus-offset); }
.aq-stat__link-hint{
  position: absolute; top: var(--space-3); right: var(--space-3);
  color: var(--ink-muted); font-size: var(--fs-xs); line-height: 1;
}

@media (max-width: 575.98px){
  .aq-stat{ padding: var(--space-3); padding-left: calc(var(--space-3) + 3px); }
  .aq-stat--soft{ padding-left: var(--space-3); }
  .aq-stat__value{ font-size: var(--fs-h3); line-height: var(--lh-h3); }
}

/* =========================================================== BASIC skin ====
   [data-ui-style="basic"] — the school's original full-colour dashboard, with
   its contrast defect fixed.

   Two UI styles, ONE set of markup. The tile above already carries a semantic
   tone class, so the skin is a re-paint: nothing in any template changes, and
   a school switching styles cannot end up on a stale or half-migrated screen.

   What was actually wrong with the original was never the colours — it was
   putting WHITE on all of them. Here each fill takes the foreground that
   passes on it (the --vib- and --on-vib- pairs in tokens.css, ratios
   recorded there), so the amber tile that measured 2.15:1 now measures
   7.16:1 while staying the same amber.

   .aq-stat--soft is deliberately excluded: it is an in-card tint with its own
   contrast-paired tokens (the attendance summary), not a dashboard headline.
   ========================================================================== */

[data-ui-style="basic"] .aq-stat:not(.aq-stat--soft){
  background: var(--aq-vib-fill, var(--vib-neutral));
  color: var(--aq-vib-fg, var(--on-vib-neutral));
  border-color: transparent;
}
/* The whole tile is the tone now, so the 3px rule would be invisible anyway. */
[data-ui-style="basic"] .aq-stat:not(.aq-stat--soft)::before{ display: none; }
[data-ui-style="basic"] .aq-stat:not(.aq-stat--soft){ padding-left: var(--space-4); }

/* Every part of the tile takes the paired foreground. No opacity dimming:
   at .82 these drop below AA, which is the defect this skin exists to fix. */
[data-ui-style="basic"] .aq-stat:not(.aq-stat--soft) .aq-stat__value,
[data-ui-style="basic"] .aq-stat:not(.aq-stat--soft) .aq-stat__label,
[data-ui-style="basic"] .aq-stat:not(.aq-stat--soft) .aq-stat__meta,
[data-ui-style="basic"] .aq-stat:not(.aq-stat--soft) .aq-stat__icon,
[data-ui-style="basic"] .aq-stat:not(.aq-stat--soft) .aq-stat__link-hint{
  color: inherit;
}

[data-ui-style="basic"] .aq-stat--info   { --aq-vib-fill: var(--vib-info);    --aq-vib-fg: var(--on-vib-info); }
[data-ui-style="basic"] .aq-stat--success{ --aq-vib-fill: var(--vib-success); --aq-vib-fg: var(--on-vib-success); }
[data-ui-style="basic"] .aq-stat--warning{ --aq-vib-fill: var(--vib-warning); --aq-vib-fg: var(--on-vib-warning); }
[data-ui-style="basic"] .aq-stat--danger { --aq-vib-fill: var(--vib-danger);  --aq-vib-fg: var(--on-vib-danger); }
[data-ui-style="basic"] .aq-stat--brand  { --aq-vib-fill: var(--vib-brand);   --aq-vib-fg: var(--on-vib-brand); }
[data-ui-style="basic"] .aq-stat--neutral{ --aq-vib-fill: var(--vib-neutral); --aq-vib-fg: var(--on-vib-neutral); }

/* Hover lifts with shadow rather than filter:brightness — changing the fill's
   lightness would move the very contrast ratio this skin guarantees. */
[data-ui-style="basic"] a.aq-stat:not(.aq-stat--soft):hover,
[data-ui-style="basic"] button.aq-stat:not(.aq-stat--soft):hover{
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}