/* WattsIsEverything — refined, Apple-inspired application skin.
   Loaded last so the product keeps its existing layout and business logic. */

:root,
[data-theme="dark"] {
  --apple-bg: #07080b;
  --apple-bg-elevated: rgba(22, 23, 29, 0.78);
  --apple-bg-solid: #15161b;
  --apple-bg-soft: rgba(255, 255, 255, 0.045);
  --apple-border: rgba(255, 255, 255, 0.105);
  --apple-border-soft: rgba(255, 255, 255, 0.065);
  --apple-text: #f5f5f7;
  --apple-secondary: #a1a1aa;
  --apple-tertiary: #6e6e78;
  --apple-blue: #0a84ff;
  --apple-blue-soft: rgba(10, 132, 255, 0.14);
  --apple-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  --apple-shadow-soft: 0 10px 35px rgba(0, 0, 0, 0.16);
  --apple-highlight: rgba(255, 255, 255, 0.07);
}

[data-theme="light"] {
  --apple-bg: #f5f5f7;
  --apple-bg-elevated: rgba(255, 255, 255, 0.78);
  --apple-bg-solid: #ffffff;
  --apple-bg-soft: rgba(0, 0, 0, 0.035);
  --apple-border: rgba(0, 0, 0, 0.105);
  --apple-border-soft: rgba(0, 0, 0, 0.065);
  --apple-text: #1d1d1f;
  --apple-secondary: #6e6e73;
  --apple-tertiary: #98989d;
  --apple-blue: #0071e3;
  --apple-blue-soft: rgba(0, 113, 227, 0.10);
  --apple-shadow: 0 24px 70px rgba(15, 23, 42, 0.09);
  --apple-shadow-soft: 0 10px 35px rgba(15, 23, 42, 0.07);
  --apple-highlight: rgba(255, 255, 255, 0.82);
}

html {
  background: var(--apple-bg);
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at 82% -10%, rgba(10, 132, 255, 0.10), transparent 28rem),
    var(--apple-bg) !important;
  color: var(--apple-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Navigation: quiet, translucent and spatially separated from content. */
.left-nav {
  /* A fixed backdrop blur forces continuous repainting while the page scrolls. */
  background: var(--apple-bg-solid) !important;
  border-right: 1px solid var(--apple-border-soft) !important;
  box-shadow: 10px 0 40px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.nav-logo {
  border-bottom-color: var(--apple-border-soft) !important;
}

.nav-logo img { opacity: 0.94; }

.left-nav .page-link {
  min-height: 40px;
  border: 1px solid transparent !important;
  border-radius: 11px !important;
  color: var(--apple-secondary) !important;
  font-size: 0.76rem !important;
  font-weight: 590 !important;
  letter-spacing: -0.005em !important;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, transform 180ms ease !important;
}

.left-nav .page-link:hover:not(.active) {
  color: var(--apple-text) !important;
  background: var(--apple-bg-soft) !important;
  border-color: var(--apple-border-soft) !important;
  transform: translateX(2px);
}

.left-nav .page-link.active {
  color: var(--apple-blue) !important;
  background: var(--apple-blue-soft) !important;
  border-color: color-mix(in srgb, var(--apple-blue) 24%, transparent) !important;
  box-shadow: inset 0 1px 0 var(--apple-highlight) !important;
}

.left-nav .athlete-select {
  min-height: 40px;
  border-radius: 11px !important;
  border-color: var(--apple-border) !important;
  background: var(--apple-bg-soft) !important;
  color: var(--apple-text) !important;
  box-shadow: inset 0 1px 0 var(--apple-highlight) !important;
}

/* Content rhythm and hierarchy. */
main { padding-top: clamp(24px, 3vw, 46px) !important; }

h1, h2, h3,
.athlete-name,
.section-title,
.card-title,
.month-label {
  color: var(--apple-text) !important;
  letter-spacing: -0.035em !important;
}

h1, .athlete-name { font-weight: 720 !important; }

.athlete-subtitle,
.section-subtitle,
.chart-label,
.kpi-label,
.count-info,
.loading,
.state-msg {
  color: var(--apple-secondary) !important;
}

/* Shared surfaces. The restrained border and top highlight provide depth without noise. */
.toolbar,
.filters,
.table-wrap,
.chart-card,
.chart-card-combo,
.chart-card-tsb,
.chart-wrap,
.chart-block,
.ppr-block,
.block,
.recap-block,
.sidebar,
.workout-block,
.decay-card,
.calendar-shell,
.kpi-card,
.cp-card,
.cp-wie-card,
.week-summary,
.week-stat,
.well-chip,
.cal-day,
.cal-workout,
.workout-row,
.card,
.modal,
.saved-dropdown-menu,
.fitness-card,
.quarter-card,
.sprint-card,
.vo2-summary,
.ia-inter-summary,
.analysis-tabs,
.records-help,
.durability-thresholds,
.laps-search-bar,
.laps-copy-bar,
.selection-inline,
.selection-panel,
.event-card,
.dash-header {
  border-color: var(--apple-border-soft) !important;
  background: var(--apple-bg-elevated) !important;
  box-shadow: inset 0 1px 0 var(--apple-highlight), var(--apple-shadow-soft) !important;
  /* No backdrop-filter on these in-flow surfaces: they sit on a plain page
     background (nothing to blur), and hundreds of blurred layers (every
     calendar day/card/chip) made scrolling stutter. */
}

/* Floating surfaces keep the frosted-glass effect. */
.modal,
.saved-dropdown-menu {
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.toolbar,
.filters,
.table-wrap,
.chart-card,
.chart-card-combo,
.chart-card-tsb,
.chart-block,
.ppr-block,
.block,
.recap-block,
.sidebar,
.workout-block,
.decay-card,
.calendar-shell,
.card,
.modal,
.fitness-card,
.quarter-card,
.selection-panel,
.event-card,
.dash-header {
  border-radius: 20px !important;
}

.kpi-card,
.cp-card,
.cp-wie-card,
.week-summary,
.week-stat,
.well-chip,
.cal-day,
.cal-workout,
.workout-row,
.sprint-card,
.vo2-summary,
.analysis-tabs,
.selection-inline {
  border-radius: 14px !important;
}

.table-wrap { box-shadow: inset 0 1px 0 var(--apple-highlight), var(--apple-shadow) !important; }

/* Controls feel tactile while remaining calm. */
button,
select,
input,
textarea,
.btn-header,
.page-link,
.filter-btn,
.disc-btn,
.month-nav-btn,
.btn-refresh,
.btn-refresh-dash,
.btn-compare,
.mode-btn,
.unit-btn,
.seg-ctrl button,
.analysis-tab-btn,
.back-btn {
  font-family: inherit !important;
}

.btn-header,
.filter-btn,
.disc-btn,
.month-nav-btn,
.btn-refresh,
.btn-refresh-dash,
.btn-compare,
.toggle-acwr,
.toggle-cp-wie,
.mode-btn,
.unit-btn,
.seg-ctrl button,
.analysis-tab-btn,
.durability-threshold-btn,
.vo2-series-btn,
.back-btn,
.btn-theme {
  border-color: var(--apple-border) !important;
  background: var(--apple-bg-soft) !important;
  color: var(--apple-secondary) !important;
  box-shadow: inset 0 1px 0 var(--apple-highlight) !important;
  transition: transform 160ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

.btn-run,
.btn-save,
.btn-add,
.search-btn,
.compare-btn,
.export-btn {
  border-radius: 999px !important;
  border-color: var(--apple-blue) !important;
  background: var(--apple-blue) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--apple-blue) 24%, transparent) !important;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease !important;
}

.btn-run:hover,
.btn-save:hover,
.btn-add:hover,
.search-btn:hover,
.compare-btn:hover,
.export-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

.btn-header:hover,
.filter-btn:hover,
.disc-btn:hover,
.month-nav-btn:hover,
.btn-refresh:hover,
.btn-refresh-dash:hover,
.btn-compare:hover,
.mode-btn:hover,
.unit-btn:hover,
.seg-ctrl button:hover,
.analysis-tab-btn:hover,
.back-btn:hover {
  color: var(--apple-blue) !important;
  border-color: color-mix(in srgb, var(--apple-blue) 34%, transparent) !important;
  background: var(--apple-blue-soft) !important;
  box-shadow: inset 0 1px 0 var(--apple-highlight), 0 8px 22px rgba(0, 113, 227, 0.10) !important;
  transform: translateY(-1px);
}

.active.filter-btn,
.active.disc-btn,
.active.mode-btn,
.active.unit-btn,
.seg-ctrl button.active,
.analysis-tab-btn.active {
  color: #fff !important;
  border-color: var(--apple-blue) !important;
  background: var(--apple-blue) !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--apple-blue) 25%, transparent) !important;
}

input,
textarea,
select {
  border-color: var(--apple-border) !important;
  background-color: var(--apple-bg-soft) !important;
  color: var(--apple-text) !important;
  border-radius: 10px !important;
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--apple-blue) 32%, transparent) !important;
  outline-offset: 2px;
}

/* Tables become lighter and easier to scan. */
table thead tr,
.mmp-table thead th,
.laps-table thead th,
.vo2-table th,
.block-table th {
  background: var(--apple-bg-soft) !important;
}

table th {
  color: var(--apple-tertiary) !important;
  font-size: 0.66rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.075em !important;
}

table td,
table th,
table tr { border-color: var(--apple-border-soft) !important; }

table tbody tr { transition: background 140ms ease; }
table tbody tr:hover { background: var(--apple-blue-soft) !important; }

/* Dashboard top bar follows the same glass language as the side navigation. */
body > header {
  background: color-mix(in srgb, var(--apple-bg-solid) 80%, transparent) !important;
  border-bottom-color: var(--apple-border-soft) !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
}

/* Mobile navigation resembles a floating system tab bar. */
@media (max-width: 768px) {
  body.mobile-nav-enabled main {
    padding: 14px 12px calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .mobile-nav-bottom,
  .mobile-nav-sheet,
  .mobile-bottom-nav,
  .mobile-more-sheet {
    border-color: var(--apple-border) !important;
    background: var(--apple-bg-solid) !important;
    box-shadow: inset 0 1px 0 var(--apple-highlight), 0 18px 45px rgba(0, 0, 0, 0.22) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: translateZ(0);
    backface-visibility: hidden;
  }

  .mobile-nav-bottom { border-radius: 24px !important; }
  .mobile-nav-sheet { border-radius: 24px !important; }

  .mobile-nav-link,
  .mobile-nav-more { color: var(--apple-tertiary) !important; }

  .mobile-nav-link.active,
  .mobile-nav-more.active {
    color: var(--apple-blue) !important;
    background: var(--apple-blue-soft) !important;
    box-shadow: none !important;
  }

  .toolbar,
  .filters,
  .table-wrap,
  .chart-card,
  .chart-block,
  .calendar-shell,
  .card,
  .dash-header { border-radius: 16px !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}