/* MitaBase Pro — a product of ETMITA · https://etmita.com
   Copyright © ETMITA. All rights reserved. */
/* ════════════════════════════════════════════════════════════════
   STATISTIKEN v3 — the page the manager decides from.

   The page is src/features/analytics/analytics.page.ts →
   public/js/pages/analytics.js; this sheet holds every .an3-* rule.
   Token-native under .mt-scope (overview-tokens.css) — dark mode is a
   token swap, never a parallel rule set. Chart DATA colours are JS
   constants in the module (the validated ST_CAT palettes); everything
   painted here is a token. The heat ramp mixes the accent against the
   inset surface, so dark mode re-steps itself.

   Motion: one rise keyframe with a capped stagger, the KPI count-up
   (RAF, module-side), Chart.js draw-ins — and every one of them dies
   under prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════ */

.an3 { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 14px; padding: 14px 16px 20px; --an3-heat: var(--accent-fill-solid); }
.an3-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.an3-title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.an3-title { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-display), sans-serif; font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--text-primary); }
.an3-sub { margin: 0; font-size: .74rem; color: var(--text-muted); }
.an3-head-acts { display: inline-flex; gap: 8px; margin-inline-start: auto; }
.an3-ic { flex: 0 0 auto; }
.an3-mono { font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; }
.an3-avfall { display: inline-grid; place-items: center; border-radius: 999px; background: var(--surface-inset); color: var(--text-secondary); font-size: .68rem; font-weight: 800; flex: 0 0 auto; }
.an3-av { flex: 0 0 auto; }

/* month stepper */
.an3-month { display: inline-flex; align-items: center; gap: 6px; padding: 4px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-card); }
.an3-month b { min-width: 132px; text-align: center; font-size: .84rem; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.an3-month-b { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: var(--surface-inset); color: var(--text-secondary); cursor: pointer; }
.an3-month-b:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); }
.an3-month-b:disabled { opacity: .35; cursor: default; }
.an3-month-b:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }

/* error */
.an3-error { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--status-expired-soft); color: var(--status-expired); font-size: .82rem; font-weight: 600; }
.an3-error.hidden { display: none !important; }

/* ── the sticky section nav (scrollspy) ─────────────────────────── */
.an3-nav {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px; margin: 0 -4px; border-radius: 14px;
  background: var(--surface-page); backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--border-subtle);
}
.an3-nav-b {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--text-secondary);
  font: inherit; font-size: .74rem; font-weight: 700; cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.an3-nav-b:hover { background: var(--surface-hover); color: var(--text-primary); }
.an3-nav-b.is-on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--border-subtle); }
.an3-nav-b:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }

/* ── sections ───────────────────────────────────────────────────── */
.an3-sec { display: flex; flex-direction: column; gap: 10px; scroll-margin-block-start: 64px; }
.an3-sec-h { display: inline-flex; align-items: center; gap: 9px; margin: 8px 0 0; font-family: var(--font-display), sans-serif; font-size: .95rem; font-weight: 700; color: var(--text-primary); }
.an3-sec-h .an3-ic { color: var(--accent-text); }
.an3-x { margin: 0; max-width: 86ch; font-size: .76rem; line-height: 1.55; color: var(--text-muted); }
.an3-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--surface-card); box-shadow: var(--shadow-sm); min-width: 0; }
.an3-card-h { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.an3-card--wide { grid-column: 1 / -1; }
.an3-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.an3-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.an3-note { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .74rem; color: var(--text-muted); }

/* ── KPI tiles ──────────────────────────────────────────────────── */
.an3-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.an3-kpi {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px;
  border: 1px solid var(--border-subtle); border-radius: 14px;
  background: var(--surface-card); box-shadow: var(--shadow-sm);
  font: inherit; text-align: start; cursor: pointer; min-width: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.an3-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md, var(--shadow-sm)); }
.an3-kpi:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 2px; }
.an3-kpi-top { display: inline-flex; align-items: center; gap: 7px; font-size: .7rem; font-weight: 700; color: var(--text-muted); }
.an3-kpi-top .an3-ic { color: var(--text-secondary); }
.an3-kpi-v { font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; font-size: 1.3rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; }
.an3-kpi-b { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.an3-kpi-prev { font-size: .66rem; color: var(--text-muted); }
.an3-spark { width: 100%; height: 26px; margin-block-start: 2px; }

/* delta chips — tone + arrow + text, never colour alone */
.an3-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--surface-inset); color: var(--text-secondary); }
.an3-chip.is-good { background: var(--status-valid-soft); color: var(--status-valid); }
.an3-chip.is-bad { background: var(--status-expired-soft); color: var(--status-expired); }
.an3-chip.is-warn { background: var(--status-expiring-soft); color: var(--status-expiring); }
.an3-chip.is-neutral { background: var(--accent-soft); color: var(--accent-text); }

/* ── charts ─────────────────────────────────────────────────────── */
.an3-chart { position: relative; height: 240px; }
.an3-chart canvas { max-width: 100%; }

/* ── heatmap (token ramp — dark re-steps itself) ────────────────── */
.an3-heat-grid { display: grid; grid-template-columns: 34px repeat(var(--an3-cols, 12), minmax(0, 1fr)); gap: 3px; }
.an3-heat-corner { }
.an3-heat-hh { font-size: .62rem; font-weight: 700; color: var(--text-muted); text-align: center; font-variant-numeric: tabular-nums; }
.an3-heat-wd { font-size: .68rem; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; }
.an3-heat-c {
  aspect-ratio: 1.6; min-height: 20px; border-radius: 5px;
  background: color-mix(in srgb, var(--an3-heat) calc(var(--an3-v) * 1%), var(--surface-inset));
  display: grid; place-items: center;
  transition: transform .12s ease;
}
.an3-heat-c:hover { transform: scale(1.12); }
.an3-heat-c:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.an3-heat-n { font-size: .62rem; font-weight: 800; color: var(--accent-contrast); }
.an3-heat-key { display: flex; align-items: center; gap: 8px; font-size: .66rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.an3-heat-ramp { flex: 0 0 120px; height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--surface-inset), var(--an3-heat)); }

/* ── ranked bars ────────────────────────────────────────────────── */
.an3-bars { display: flex; flex-direction: column; gap: 7px; }
.an3-bar { display: grid; grid-template-columns: minmax(90px, 1.1fr) 2fr auto; align-items: center; gap: 10px; min-width: 0; }
.an3-bar-l { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: .76rem; font-weight: 600; color: var(--text-secondary); }
.an3-bar-l span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an3-bar-t { position: relative; height: 8px; border-radius: 999px; background: var(--surface-inset); overflow: hidden; min-width: 40px; }
.an3-bar-t i { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 999px; transition: width .5s cubic-bezier(.22, .8, .36, 1); }
.an3-bar-v { font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; font-size: .74rem; font-weight: 700; color: var(--text-primary); white-space: nowrap; }

/* ── team cards ─────────────────────────────────────────────────── */
.an3-team { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.an3-tm { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--border-subtle); background: var(--surface-card); box-shadow: var(--shadow-sm); }
.an3-tm-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.an3-tm-who b { font-size: .86rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.an3-tm-rank { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: var(--surface-inset); color: var(--text-secondary); font-size: .68rem; font-weight: 800; flex: 0 0 auto; }
.an3-tm-rate { display: flex; flex-direction: column; gap: 5px; }
.an3-tm-num { font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 800; color: var(--text-primary); }
.an3-tm-num small { margin-inline-start: 6px; font-size: .66rem; font-weight: 600; color: var(--text-muted); }
.an3-tm-why { margin: 0; font-size: .7rem; color: var(--text-muted); }
.an3-tm-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0; }
.an3-tm-facts div { display: flex; justify-content: space-between; gap: 8px; }
.an3-tm-facts dt { font-size: .7rem; color: var(--text-muted); }
.an3-tm-facts dd { margin: 0; font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; font-size: .72rem; font-weight: 700; color: var(--text-primary); }

/* ── payment mix ────────────────────────────────────────────────── */
.an3-mix-bar { display: flex; height: 18px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--surface-inset); }
.an3-mix-bar i { display: block; min-width: 3px; }
.an3-mix-key { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.an3-mix-key li { display: flex; align-items: center; gap: 8px; font-size: .76rem; }
.an3-mix-key b { color: var(--text-secondary); font-weight: 600; }
.an3-mix-key em { margin-inline-start: auto; font-style: normal; font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; color: var(--text-primary); font-weight: 700; }
.an3-dot { width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; }
.an3-lost { display: flex; align-items: center; gap: 7px; margin: 0; padding: 9px 12px; border-radius: 10px; background: var(--status-expired-soft); color: var(--status-expired); font-size: .78rem; font-weight: 600; }
.an3-lost b { font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; }

/* ── heroes, lists ──────────────────────────────────────────────── */
.an3-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; border-radius: 12px; background: var(--surface-inset); }
.an3-hero b { font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 800; color: var(--text-primary); }
.an3-hero small { font-size: .7rem; color: var(--text-muted); }
.an3-hero.is-good { background: var(--status-valid-soft); }
.an3-hero.is-good b { color: var(--status-valid); }
.an3-hero.is-warn { background: var(--status-expiring-soft); }
.an3-hero.is-warn b { color: var(--status-expiring); }
.an3-hero.is-bad { background: var(--status-expired-soft); }
.an3-hero.is-bad b { color: var(--status-expired); }
.an3-list { display: flex; flex-direction: column; gap: 7px; }
.an3-li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-inset); color: var(--text-secondary); }
.an3-li.is-bad { background: var(--status-expired-soft); color: var(--status-expired); }
.an3-li.is-warn { background: var(--status-expiring-soft); color: var(--status-expiring); }
.an3-li-t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.an3-li-t b { font-size: .78rem; color: var(--text-primary); }
.an3-li-t span { font-size: .68rem; color: var(--text-muted); }
.an3-li-v { font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Top-Kassierer ──────────────────────────────────────────────── */
.an3-lb-head { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-inset); align-self: flex-start; }
.an3-seg { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text-secondary); font: inherit; font-size: .76rem; font-weight: 700; cursor: pointer; }
.an3-seg.is-on { background: var(--surface-card); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.an3-seg:focus-visible { outline: 2px solid var(--accent-fill-solid); outline-offset: 1px; }
.an3-prize { display: inline-flex; align-items: center; gap: 7px; margin: 0; font-size: .78rem; color: var(--text-secondary); }
.an3-prize b { color: var(--text-primary); }
.an3-lb { display: flex; flex-direction: column; gap: 6px; }
.an3-lb-row { display: grid; grid-template-columns: 28px auto minmax(80px, 1fr) 2fr auto auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 12px; border: 1px solid var(--border-subtle); background: var(--surface-card); }
.an3-lb-row.is-winner { border-color: var(--accent-fill-solid); background: var(--accent-soft); }
.an3-lb-rank { text-align: center; font-size: .82rem; font-weight: 800; color: var(--text-secondary); }
.an3-lb-name { font-size: .8rem; font-weight: 700; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an3-lb-n { font-size: .7rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.an3-lb-v { font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; font-size: .8rem; font-weight: 800; color: var(--text-primary); white-space: nowrap; }

/* ── empty states ───────────────────────────────────────────────── */
.an3-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 14px; text-align: center; color: var(--text-muted); }
.an3-empty p { margin: 0; font-size: .78rem; max-width: 40ch; line-height: 1.5; }

/* ── motion — purposeful, capped, killable ──────────────────────── */
@keyframes an3Rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.an3-rise { animation: an3Rise .4s cubic-bezier(.22, .8, .36, 1) both; animation-delay: calc(min(var(--an3-i, 0), 12) * 45ms); }

/* ── phone ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .an3 { padding: 10px 10px 16px; }
  .an3-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an3-grid2, .an3-grid3 { grid-template-columns: 1fr; }
  .an3-heat-n { display: none; }
  .an3-lb-row { grid-template-columns: 24px auto 1fr auto; }
  .an3-lb-row .an3-bar-t, .an3-lb-row .an3-lb-n { display: none; }
  .an3-nav-b, .an3-month-b, .an3-seg { min-height: 44px; }
  .an3-kpi { min-height: 44px; }
}

/* ── calm by default ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .an3 *, .an3-rise, .an3-bar-t i, .an3-heat-c, .an3-kpi { animation: none !important; transition: none !important; }
}