/* ==========================================================================
   ACTIVITY PREMIUM — Strava-grade styling for the activity analysis page.
   Scoped entirely to .act so it never touches the rest of the app. Builds on
   the app's own surface/border/muted/text tokens (so it follows light + dark)
   and adds a scoped athletic accent for pace/speed. Athletic typography via
   Archivo (display/numbers) + Barlow (body), loaded in index.html.
   ========================================================================== */

.act{
  --acc:#0e9d90;            /* pace/speed — teal that reads on a light ground */
  font-family:"Barlow", system-ui, -apple-system, sans-serif;
  /* A readable, centered column instead of stretching edge-to-edge on desktop
     (loads later than styles.css so this beats the base .view max-width:100%). */
  max-width:1060px;
  margin-left:auto; margin-right:auto;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .act{ --acc:#2dd4bf; } }
:root[data-theme="dark"] .act{ --acc:#2dd4bf; }

.act h1,.act h2,.act h3,
.act .greeting__hello,
.act .act__tileV,
.act .app-perf__rowTitle{
  font-family:"Archivo","Barlow", system-ui, sans-serif;
  letter-spacing:-.01em;
}
.act, .act table, .act td, .act th, .act p, .act span{ font-variant-numeric:tabular-nums; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.act .greeting__hello{ font-size:clamp(24px,3.6vw,34px); font-weight:800; line-height:1.08; margin-bottom:4px; }
.act .greeting__sub{ color:var(--muted); font-weight:500; }
.act .act__chips{ display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 2px; }
.act .ap-strip__chip{
  font-family:"Barlow Semi Condensed", sans-serif; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; font-size:12px; padding:5px 11px; border-radius:99px;
  background:color-mix(in srgb, var(--acc) 13%, transparent);
  color:var(--acc); border:1px solid color-mix(in srgb, var(--acc) 32%, transparent);
}

/* ── Hero stat tiles ────────────────────────────────────────────────────── */
.act .act__tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:20px 0; }
@media(min-width:680px){ .act .act__tiles{ grid-template-columns:repeat(6,1fr); } }
.act .act__tile{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:13px 13px 12px; display:flex; flex-direction:column; gap:5px;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.06);
}
.act .act__tileV{ font-size:24px; font-weight:800; line-height:1.05; }
.act .act__tileK{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.act .act__tile:nth-child(1) .act__tileV,
.act .act__tile:nth-child(3) .act__tileV{ color:var(--acc); }

/* ── Section cards ──────────────────────────────────────────────────────── */
.act .app-perf__sec{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:16px 18px 18px; margin-bottom:16px;
  box-shadow:0 1px 2px rgba(0,0,0,.05), 0 12px 30px rgba(0,0,0,.05);
}
.act .app-perf__secHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.act .app-perf__h{
  font-family:"Barlow Semi Condensed", sans-serif; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin:0;
}
.act .app-perf__rowTitle{ font-weight:700; }

/* ── Map / media inside cards ───────────────────────────────────────────── */
.act .atv__map{ border-radius:12px; overflow:hidden; }
.act .acv__svg, .act .atv__elevSvg{ border-radius:8px; }

/* ── Best-efforts + achievements chips get the athletic face ────────────── */
.act .app-perf__list{ display:flex; flex-direction:column; gap:8px; }
.act .app-perf__row{
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  padding:10px 12px;
}

/* ── Insights — level-coloured cards ────────────────────────────────────── */
.act .act__insights{ display:flex; flex-direction:column; gap:9px; }
.act .act__insight{
  display:flex; gap:11px; align-items:flex-start;
  background:var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--muted); border-radius:12px; padding:11px 13px;
}
.act .act__insight--positive{ border-left-color:#22c55e; }
.act .act__insight--monitor{ border-left-color:#f59e0b; }
.act .act__insight--info{ border-left-color:var(--acc); }
.act .act__insightIcon{ font-size:18px; line-height:1.3; flex:none; }
.act .act__insight .app-perf__rowTitle{ margin:0 0 1px; }
.act .act__insight .muted{ color:var(--muted); }

/* ── Achievements / PR badges ───────────────────────────────────────────── */
.act .app-perf__badge, .act .ap-badge{
  font-family:"Barlow Semi Condensed", sans-serif; font-weight:700; letter-spacing:.02em;
}

/* ==========================================================================
   ATHLETE HOME («Οι προπονήσεις μου») — same athletic typography + centered
   column + accent so it matches the premium activity page. Conservative: only
   type/colour/width, no structural changes to the existing .ap-* layout.
   ========================================================================== */
.athlete-mode, .ap-dash{
  --acc:#0e9d90;
  font-family:"Barlow", system-ui, -apple-system, sans-serif;
  font-variant-numeric:tabular-nums;
  max-width:1100px; margin-left:auto; margin-right:auto;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .athlete-mode, :root:not([data-theme="light"]) .ap-dash{ --acc:#2dd4bf; } }
:root[data-theme="dark"] .athlete-mode, :root[data-theme="dark"] .ap-dash{ --acc:#2dd4bf; }

.athlete-mode h1,.athlete-mode h2,.athlete-mode h3,.ap-dash h1,.ap-dash h2,.ap-dash h3,
.athlete-mode .ap-kpi__val,.ap-dash .ap-kpi__val,
.athlete-mode .ap-w__title,.ap-dash .ap-w__title,
.athlete-mode .greeting__hello,.ap-dash .greeting__hello{
  font-family:"Archivo","Barlow", system-ui, sans-serif; letter-spacing:-.01em;
}
.athlete-mode .ap-kpi__val,.ap-dash .ap-kpi__val{ font-weight:800; }
.athlete-mode .ap-kpi:nth-child(1) .ap-kpi__val,
.athlete-mode .ap-kpi:nth-child(6) .ap-kpi__val,
.ap-dash .ap-kpi:nth-child(2) .ap-kpi__val{ color:var(--acc); }
.athlete-mode .ap-kpi__lbl,.ap-dash .ap-kpi__lbl{ text-transform:uppercase; letter-spacing:.05em; font-size:11px; }

/* Section divider note — labels the "ανά προπόνηση" vs "συνολικά" chart groups. */
.ap-sec-note{
  margin:6px 2px 2px; font-size:12px; font-weight:700; letter-spacing:.01em;
  color:var(--muted); display:flex; align-items:center; gap:6px;
}

/* ── Premium widget cards / KPI tiles / tabs for the athlete home + Απόδοση ── */
.athlete-mode .ap-w, .ap-dash .ap-w{
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 12px 30px rgba(0,0,0,.05);
}
.athlete-mode .ap-w__head, .ap-dash .ap-w__head{
  background:transparent; border-bottom:1px solid var(--border); padding:12px 16px;
}
.athlete-mode .ap-w__title, .ap-dash .ap-w__title{
  font-family:"Barlow Semi Condensed", sans-serif; font-size:13px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
}
.athlete-mode .ap-w__body, .ap-dash .ap-w__body{ padding:14px 16px; }
.athlete-mode .ap-board, .ap-dash .ap-board{ gap:12px; }

.athlete-mode .ap-kpi, .ap-dash .ap-kpi{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:13px 14px; box-shadow:0 1px 2px rgba(0,0,0,.05), 0 10px 26px rgba(0,0,0,.06);
}
.athlete-mode .ap-kpi__ic, .ap-dash .ap-kpi__ic{ font-size:15px; opacity:.9; }

.athlete-mode .ap-seg, .ap-dash .ap-seg{ border-radius:12px; }
.athlete-mode .ap-seg__btn.is-active, .ap-dash .ap-seg__btn.is-active{
  background:color-mix(in srgb, var(--acc) 16%, var(--surface)); color:var(--text);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}

/* The «Απόδοση Προπόνησης» cells as a clean stat grid */
.ap-dash .ap-perf{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; }
.ap-dash .ap-perf__cell{ background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:10px 12px; }
.ap-dash .ap-perf__k{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.ap-dash .ap-perf__v{ font-family:"Archivo", sans-serif; font-size:19px; font-weight:800; display:block; margin-top:2px; }

/* Respect reduced motion for any entrance animation the shell applies. */
@media (prefers-reduced-motion: reduce){ .act *, .athlete-mode *, .ap-dash *{ animation:none !important; } }