/**
 * EEP UI/UX v3 — dashboard page polish
 * Layer:    L01 (page surface) / @layer components
 * Phase:    P3-S1
 *
 * The dashboard HTML was already moved to <eep-shell> in P0-S3 and the
 * page content is rendered from js/pages/dashboard-page.js. This file
 * is the v3 polish pass: align the existing stat tiles + project table
 * + activity list with the v3 token + typography system without
 * touching the underlying render logic.
 *
 * Scope:
 *   1. Stat-card numbers → monospace tabular-nums (.ty-value semantics)
 *   2. Stat labels → uppercase tracked (matches .ty-label semantics)
 *   3. data-provenance pass-through so calc / locked / warn states
 *      colour the value automatically (P0-S5 colour rules)
 *   4. Project table numbers → mono tabular-nums
 *   5. Existing classes (.stat-card etc.) preserved — additive, not
 *      destructive. Legacy app.css still loads first; this layer wins.
 */

@layer components {
  /* ─── Stat tiles — mono numerals, tightened tracking ─── */
  .stat-card .stat-value,
  #dashboard-main .stat-value {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "cv02" 1, "ss01" 1, "liga" 0;
    letter-spacing: -0.02em;          /* slightly tighter than default --tr-value */
  }

  /* Provenance hooks (P0-S5) — when dashboard-page.js stamps a
     `data-provenance` attribute, the value's colour follows. We don't
     paint a left-inset border on stat-card values (they live inside
     a card already) — colour only. */
  .stat-card .stat-value[data-provenance="calc"]      { color: var(--c-fg-calc); }
  .stat-card .stat-value[data-provenance="validated"] { color: var(--c-fg-validated); }
  .stat-card .stat-value[data-provenance="warn"]      { color: var(--c-fg-warn); }
  .stat-card .stat-value[data-provenance="violation"] { color: var(--c-fg-violation); }
  .stat-card .stat-value[data-provenance="locked"]    { color: var(--c-fg-locked); }
  .stat-card .stat-value[data-provenance="override"]  { color: var(--c-fg-override); }
  .stat-card .stat-value[data-provenance] {
    background: transparent !important;
    padding: 0 !important;
    border-left: 0 !important;
    /* v1.36.30 — the real "frame next to the number" the user kept seeing
       was provenance.css's `box-shadow: inset 2px 0 0 <state-colour>` (the
       2px inset-left state bar), NOT a border-left or a progress bar. On a
       full data cell that left bar is meaningful; on a big dashboard stat
       tile it just reads as a stray tick beside the numeral. Kill the
       box-shadow here so the tile shows ONLY the plain number. Colour of
       the numeral (calc/validated/warn) is kept — that still encodes
       provenance without the decorative bar. */
    box-shadow: none !important;
  }

  /* Issue #8 (re-report) — the first-row stat tiles must show ONLY the
     count number. Defensively suppress anything that could read as a
     "bar showing 0%" next to the value: (a) a stray .progress-bar ever
     injected into a tile, and (b) the global [data-provenance]::after
     debug badge (provenance.css) leaking onto a tile value. The live
     render already emits plain numerals (loadStats), so this is
     belt-and-suspenders against a regression OR a stale cached bundle. */
  .stat-card .progress-bar,
  .stat-card .progress-fill { display: none !important; }
  .stat-card .stat-value[data-provenance]::after,
  #dashboard-main .stat-value[data-provenance]::after { content: none !important; }

  /* v1.36.23 — skeleton shimmer REMOVED. User reported it was
     confusing ("حالت لودینگ بار رو از روی کاشی های داشبورد بردار
     چون نمیکنن"): the shimmer suggested loading-in-progress but
     never resolved when data was genuinely 0 or missing. v1.36.23
     loadStats() now always emits real numbers (0 when zero), so
     locked-provenance is unused on tiles. Tile values render as
     plain numerals; muted colour for locked, normal for calc/
     validated/warn. No animation. */

  /* ─── Stat labels — uppercase tracked, matches .ty-label ─── */
  .stat-card .stat-label,
  #dashboard-main .stat-label {
    font-family: var(--f-sans);
    /* font-size/weight already 10px/600 from app.css — keep that. */
    letter-spacing: var(--tr-label, 0.06em);
  }

  /* ─── Stat sub-line — small muted, optionally monospace for counts ── */
  .stat-card .stat-sub,
  #dashboard-main .stat-sub {
    color: var(--c-fg-muted);
  }
  .stat-card .stat-sub .ty-num,
  #dashboard-main .stat-sub .ty-num {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* ─── Project table — mono columns for IDs / dates / counters ── */
  #dashboard-main .ty-num,
  #dashboard-main .ty-cell {
    font-family: var(--f-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
  }

  /* ─── New-project / filter buttons — focus ring follows v3 ─── */
  #dashboard-main .btn:focus-visible {
    outline: 2px solid var(--c-focus);
    outline-offset: 1px;
  }
}