/* ================================================================
   Friendly Analytics — restyles the statistics page to match the
   landing page (Bricolage display type, rounded tinted cards, soft
   shadows, blue/green/orange/red semantics, hover lifts).

   Scoped entirely under #analyticsPage. No JS or DOM changes: it only
   overrides the base analytics classes in style.css. Uses :has() to
   tint each KPI card from its existing .stat-value colour class, so
   stats.js output is untouched.
   ================================================================ */
#analyticsPage{
  --fa-bg:#f1f4fb; --fa-line:#e4e7ee; --fa-line2:#d2d7e1;
  --fa-ink:#14171f; --fa-muted:#5b6270; --fa-faint:#8a909c;
  --fa-blue:#3a55e6; --fa-blue-deep:#2b40c4; --fa-blue-wash:#eef0fe;
  --fa-green:#0d7539; --fa-green-wash:#e6f6ec;
  --fa-orange:#a85117; --fa-orange-wash:#fdf1e8;
  --fa-red:#d3413a; --fa-red-wash:#fdeceb;
  --fa-display:'Bricolage Grotesque','Manrope',system-ui,sans-serif;
  --fa-mono:'JetBrains Mono',ui-monospace,monospace;
  --fa-shadow:0 12px 30px -18px rgba(20,23,31,.40);
  --fa-shadow-lg:0 26px 56px -30px rgba(20,23,31,.42);
}

/* ── page canvas ─────────────────────────────────────────────── */
#analyticsPage .analytics-view{background:var(--fa-bg)}

/* ── header ──────────────────────────────────────────────────── */
#analyticsPage .analytics-title{
  font-family:var(--fa-display);font-weight:800;font-size:30px;
  letter-spacing:-.03em;color:var(--fa-ink)
}
#analyticsPage .analytics-subtitle{font-size:14px;color:var(--fa-muted);font-weight:600;margin-top:4px}
#analyticsPage .btn-back{
  border-radius:13px;border:1px solid var(--fa-line2);background:#fff;
  color:var(--fa-ink);box-shadow:var(--fa-shadow);
  transition:transform .15s ease,background .15s ease
}
#analyticsPage .btn-back:hover{background:#fff;transform:translateY(-1px)}
#analyticsPage .btn-export{
  border-radius:13px;font-weight:800;
  transition:transform .15s ease,background .15s ease,box-shadow .15s ease
}
#analyticsPage .btn-export.csv{border:1px solid var(--fa-line2);background:#fff;color:var(--fa-ink);box-shadow:var(--fa-shadow)}
#analyticsPage .btn-export.csv:hover{background:#fff;transform:translateY(-1px)}
#analyticsPage .btn-export.pdf{background:var(--fa-blue);color:#fff;box-shadow:0 12px 26px -12px rgba(58,85,230,.9)}
#analyticsPage .btn-export.pdf:hover{background:var(--fa-blue-deep);transform:translateY(-1px)}

/* ── filters bar ─────────────────────────────────────────────── */
#analyticsPage .filters-bar{
  background:#fff;border:1px solid var(--fa-line);border-radius:18px;
  box-shadow:var(--fa-shadow);padding:15px 18px;gap:14px 18px
}
#analyticsPage .filter-label{color:var(--fa-faint);letter-spacing:.05em}
#analyticsPage .filter-select{
  border-radius:11px;border:1px solid var(--fa-line2);background:#fff;
  font-weight:600;color:var(--fa-ink)
}
#analyticsPage .filter-select:hover{border-color:var(--fa-faint)}
#analyticsPage .filter-select:focus{border-color:var(--fa-blue);box-shadow:0 0 0 3px rgba(58,85,230,.12)}

/* ── KPI cards ───────────────────────────────────────────────── */
#analyticsPage .stats-grid{gap:16px}
#analyticsPage .stat-card{
  background:#fff;border:1px solid var(--fa-line);border-radius:20px;
  box-shadow:var(--fa-shadow);padding:22px 24px;overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease
}
#analyticsPage .stat-card::before{display:none}          /* drop the grey left bar */
#analyticsPage .stat-card:hover{transform:translateY(-3px);box-shadow:var(--fa-shadow-lg)}
#analyticsPage .stat-label{
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--fa-muted);font-weight:800;margin-bottom:12px
}
#analyticsPage .stat-value{
  font-family:var(--fa-display);font-weight:800;font-size:46px;
  line-height:1;letter-spacing:-.03em;margin-bottom:6px;font-variant-numeric:tabular-nums
}
#analyticsPage .stat-value.blue{color:var(--fa-blue)}
#analyticsPage .stat-value.green{color:var(--fa-green)}
#analyticsPage .stat-value.orange{color:var(--fa-orange)}
#analyticsPage .stat-value.red{color:var(--fa-red)}
#analyticsPage .stat-detail{font-family:var(--fa-mono);font-size:11.5px;color:var(--fa-faint);margin-top:6px}
/* soft tint per semantic, read from the existing value colour class */
#analyticsPage .stat-card:has(.stat-value.blue){background:linear-gradient(165deg,#fff 55%,var(--fa-blue-wash));border-color:#dbe1fb}
#analyticsPage .stat-card:has(.stat-value.green){background:linear-gradient(165deg,#fff 55%,var(--fa-green-wash));border-color:#cce6d6}
#analyticsPage .stat-card:has(.stat-value.orange){background:linear-gradient(165deg,#fff 55%,var(--fa-orange-wash));border-color:#f4dcc3}
#analyticsPage .stat-card:has(.stat-value.red){background:linear-gradient(165deg,#fff 55%,var(--fa-red-wash));border-color:#f4d3d0}

/* ── section cards + tables ──────────────────────────────────── */
#analyticsPage .player-stats-section{
  background:#fff;border:1px solid var(--fa-line);border-radius:22px;
  box-shadow:var(--fa-shadow);padding:24px 26px
}
#analyticsPage .section-title{
  font-family:var(--fa-display);font-weight:800;font-size:19px;
  letter-spacing:-.02em;color:var(--fa-ink)
}
#analyticsPage .section-title::before{background:var(--fa-blue);border-radius:99px;width:6px;height:19px}
#analyticsPage .stats-table thead{background:var(--fa-bg)}
#analyticsPage .stats-table th{color:var(--fa-faint);border-bottom:1px solid var(--fa-line2);letter-spacing:.04em}
#analyticsPage .stats-table td{border-bottom:1px solid var(--fa-line);color:var(--fa-ink)}
#analyticsPage .stats-table tbody tr{transition:background .12s ease}
#analyticsPage .stats-table tbody tr:hover{background:#f6f8fd}
#analyticsPage .stats-table tbody tr:last-child{background:var(--fa-blue-wash);font-weight:800}
#analyticsPage .stats-table.no-totals tbody tr:last-child{background:transparent;font-weight:inherit}

/* ── season: KPI cards with trend, record + form ─────────────── */
/* .sk-card is a .stat-card, so the tinting and display face above already
   apply. Only the extras below need dressing. */
#analyticsPage .sk-card .stat-value{font-size:36px}
#analyticsPage .sk-delta,#analyticsPage .sk-b,#analyticsPage .sk-w,
#analyticsPage .season-totals b,#analyticsPage .sf-sub,#analyticsPage .sf-ax,
#analyticsPage .sf-opp,#analyticsPage .sf-when{font-family:var(--fa-mono)}
#analyticsPage .sk-ex{color:var(--fa-muted);border-top-color:var(--fa-line)}
#analyticsPage .sk-b{color:var(--fa-green)} #analyticsPage .sk-w{color:var(--fa-red)}
#analyticsPage .sk-delta.up{color:var(--fa-green)} #analyticsPage .sk-delta.down{color:var(--fa-red)}
/* Waterline: the skin gives the plot a slightly taller stage and its own
   line/ink values. Bars stay flat-filled — the shape is the signature, and a
   wash would blunt the read of how convincing each result was. */
#analyticsPage .sf-chart{--sf-half:82px}
#analyticsPage .sf-wl{font-family:var(--fa-display);font-size:30px;letter-spacing:-.04em}
#analyticsPage .sf-ax,#analyticsPage .sf-when{color:var(--fa-muted)}
#analyticsPage .sf-line{border-top-color:var(--fa-line)}
#analyticsPage .sf-water{border-top-color:var(--fa-ink);opacity:.34}
#analyticsPage .sf-col.win  .sf-bar{background:var(--fa-green)}
#analyticsPage .sf-col.loss .sf-bar{background:var(--fa-red)}
#analyticsPage .sf-col.win  .sf-opp{color:var(--fa-green)}
#analyticsPage .sf-col.loss .sf-opp{color:var(--fa-red)}
#analyticsPage .sf-thin,#analyticsPage .season-totals{color:var(--fa-muted)}
#analyticsPage .sf-thin{border-top-color:var(--fa-line)}

/* ── season: rotation heat + zone drift ──────────────────────── */
#analyticsPage .rh-cell{border-radius:14px;border-color:var(--fa-line)}
#analyticsPage .rh-cell.good{background:var(--fa-green-wash);border-color:#cce6d6}
#analyticsPage .rh-cell.bad{background:var(--fa-red-wash);border-color:#f4d3d0}
#analyticsPage .rh-cell.is-worst{outline-color:var(--fa-red)}
#analyticsPage .rh-rot,#analyticsPage .rh-n,#analyticsPage .rh-bp,
#analyticsPage .zd-d{font-family:var(--fa-mono)}
#analyticsPage .rh-pct{font-family:var(--fa-display);letter-spacing:-.03em}
#analyticsPage .rh-call{color:var(--fa-ink)}
#analyticsPage .zd-d.up{color:var(--fa-green)} #analyticsPage .zd-d.down{color:var(--fa-red)}

/* ── attack origin court ─────────────────────────────────────── */
#analyticsPage .ao-sub{color:var(--fa-muted)}
#analyticsPage .ao-team-name{font-family:var(--fa-display);font-size:16px;letter-spacing:-.02em}
#analyticsPage .ao-team-total,#analyticsPage .ao-att,#analyticsPage .ao-tag b,
#analyticsPage .ao-none{font-family:var(--fa-mono)}
#analyticsPage .ao-team-total{color:var(--fa-faint)}
#analyticsPage .ao-ball{font-family:var(--fa-display);font-weight:800;letter-spacing:-.04em}
#analyticsPage .ao-takeaway{color:var(--fa-ink)}
#analyticsPage .ao-legend,#analyticsPage .ao-note{color:var(--fa-muted)}
#analyticsPage .ao-legend{border-top-color:var(--fa-line)}

/* season summary reuses .stat-card, so it inherits the friendly cards */

/* ── phone: compact friendly type + pill tabs ────────────────── */
@media (max-width:700px){
  #analyticsPage .analytics-title{font-size:24px}
  #analyticsPage .analytics-subtitle{font-size:13px}
  #analyticsPage .filters-bar{border-radius:16px;padding:12px 14px}
  #analyticsPage .stat-card{border-radius:18px;padding:18px 18px}
  #analyticsPage .stat-value{font-size:36px}
  #analyticsPage .player-stats-section{border-radius:18px;padding:18px 16px}
  #analyticsPage .section-title{font-size:17px}
  #analyticsPage .section-title::before{height:16px}
  /* mobile stat tabs read as friendly chips */
  #analyticsPage .mob-tab-btn{
    background:#fff;border-color:var(--fa-line2);color:var(--fa-muted);
    font-weight:800;
  }
  #analyticsPage .mob-tab-btn.active{
    background:var(--fa-blue);border-color:var(--fa-blue);color:#fff;
    box-shadow:0 8px 16px -8px rgba(58,85,230,.9);
  }
  /* the match scoreboard card above the KPIs */
  #analyticsPage .match-scoreboard{border-radius:18px;box-shadow:var(--fa-shadow)}
  #analyticsPage .msb-score{font-family:var(--fa-mono)}
}