:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  color: #172a35;
  background: #f3f6f7;
  --bg: #f3f6f7;
  --surface: #fff;
  --text: #172a35;
  --muted: #647783;
  --border: #dce5e8;
  --accent: #087f72;
  --accent-dark: #06665c;
  --accent-soft: #e3f3ef;
  --warn: #8d5b08;
  --warn-soft: #fff4dc;
  --danger: #b42318;
  --today: #edf7f4;
  --radius: 16px;
  --shadow: 0 8px 26px rgb(23 42 53 / 5%);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-width: 320px; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
a { color: var(--accent-dark); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 0.65rem; letter-spacing: -0.025em; }
h1 { font-size: clamp(1.7rem, 3vw, 2.35rem); font-weight: 720; }
h2 { font-size: 1.18rem; font-weight: 680; }
h3 { font-size: 1rem; font-weight: 650; }
p { margin: 0 0 0.65rem; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #43b9a7; outline-offset: 3px; }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  min-height: 70px;
  align-items: center;
  gap: 1.4rem;
  padding: 0.7rem max(1.25rem, calc((100vw - 1320px) / 2));
  border-bottom: 1px solid rgb(220 229 232 / 85%);
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 3px 14px rgb(23 42 53 / 3%);
  backdrop-filter: blur(14px);
}
.brand {
  flex: 0 0 auto;
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 780;
  letter-spacing: -0.04em;
  text-decoration: none;
}
.topbar nav { display: flex; flex: 1; align-items: center; gap: 0.35rem; }
.topbar nav a {
  border-radius: 999px;
  padding: 0.55rem 0.85rem;
  color: var(--muted);
  font-size: 0.94rem;
  font-weight: 580;
  text-decoration: none;
  transition: background-color 140ms ease, color 140ms ease;
}
.topbar nav a:hover, .topbar nav a.active { background: var(--accent-soft); color: var(--accent-dark); }
.topbar nav a.active { font-weight: 700; }
.logout { display: flex; align-items: center; gap: 0.8rem; margin: 0; }
.who { max-width: 220px; overflow: hidden; color: var(--muted); font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }

main { width: min(1320px, 100%); margin: 0 auto; padding: 2rem 1.5rem 3rem; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.page-head h1 { margin-bottom: 0.25rem; }
.breadcrumb { display: inline-block; margin-bottom: 0.55rem; color: var(--muted); font-size: 0.92rem; text-decoration: none; }
.breadcrumb:hover { color: var(--accent-dark); text-decoration: underline; }

.card {
  margin-bottom: 1.1rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.card-head h2 { margin: 0; }
.columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; }
.columns > .card { margin-bottom: 0; }
.stack > * + * { margin-top: 1rem; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); gap: 0.8rem; margin-bottom: 1.1rem; }
.kpi {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.22rem;
  padding: 1rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.kpi strong { color: var(--text); font-size: clamp(1.25rem, 2vw, 1.65rem); line-height: 1.25; letter-spacing: -0.035em; }
.kpi-label, .kpi-detail { color: var(--muted); font-size: 0.84rem; }
.kpi-label { font-weight: 620; }
.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
.error { color: var(--danger); }
.notice { margin-bottom: 1rem; border: 1px solid #f0d9a9; border-radius: 12px; padding: 0.8rem 1rem; background: var(--warn-soft); color: var(--warn); }
.observed-note { margin: 0.65rem 0 0; color: var(--muted); font-size: 0.8rem; }

button {
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 0.62rem 0.95rem;
  background: var(--accent);
  color: #fff;
  font-weight: 650;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
button:hover:not(:disabled) { border-color: var(--accent-dark); background: var(--accent-dark); }
button:active:not(:disabled) { transform: translateY(1px); }
button.secondary { border-color: var(--border); background: #fff; color: var(--text); }
button.secondary:hover:not(:disabled) { border-color: #b8cbc9; background: #f5faf8; color: var(--accent-dark); }
button.link { border: 0; padding: 0.25rem; background: transparent; color: var(--accent-dark); text-decoration: underline; }
button.link:hover:not(:disabled) { background: transparent; color: var(--accent); }
button.link.danger { color: var(--danger); }
button:disabled { opacity: 0.6; cursor: not-allowed; }
.button { display: inline-block; border-radius: 10px; padding: 0.62rem 0.95rem; background: var(--accent); color: #fff; font-weight: 650; text-decoration: none; }
.button:hover { background: var(--accent-dark); }

.table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.table th, .table td { border-bottom: 1px solid var(--border); padding: 0.72rem 0.55rem; text-align: left; vertical-align: top; }
.table th { color: var(--muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.035em; text-transform: uppercase; }
.table-wrap { overflow-x: auto; border-radius: 10px; }
.athlete-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.athlete-card { display: block; min-width: 0; margin: 0; color: inherit; text-decoration: none; transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease; }
.athlete-card:hover, .athlete-card:focus-visible { transform: translateY(-2px); border-color: #9dc9c2; box-shadow: 0 12px 30px rgb(23 42 53 / 8%); }
.athlete-card .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.55rem; margin: 0.9rem 0; }
.athlete-card .stats div { display: flex; min-width: 0; flex-direction: column; gap: 0.18rem; color: var(--muted); font-size: 0.78rem; }
.athlete-card .stats strong { color: var(--text); font-size: 1.1rem; }
.alerts { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.5rem 0 0; padding: 0; list-style: none; }
.alerts li { border-radius: 8px; padding: 0.4rem 0.6rem; background: var(--warn-soft); color: var(--warn); font-size: 0.83rem; }
.ok { color: var(--accent-dark); font-size: 0.86rem; }

.badge { display: inline-block; border-radius: 999px; padding: 0.2rem 0.58rem; background: #edf1f3; color: #526671; font-size: 0.74rem; font-weight: 680; line-height: 1.35; vertical-align: middle; }
.status-completed { background: var(--accent-soft); color: var(--accent-dark); }
.status-skipped { background: #fde9e7; color: var(--danger); }
.status-postponed { background: var(--warn-soft); color: var(--warn); }
.badge.key { background: #e9edff; color: #3948a5; }
.badge.draft { background: #f0f0f0; color: #555; }
.badge.source-garmin { margin-left: 0.4rem; background: #e3f3ef; color: #06665c; }
.garmin-connect-form { display: grid; gap: 0.8rem; margin-top: 0.8rem; }
.garmin-card .card-head { margin-bottom: 0.65rem; }
.garmin-card .form-status { min-height: 1.4em; }

.bars { display: grid; height: 170px; grid-template-columns: repeat(8, 1fr); align-items: end; gap: 0.5rem; }
.bar { display: flex; height: 100%; flex-direction: column; align-items: center; }
.bar-track { display: flex; width: 72%; flex: 1; align-items: flex-end; border-radius: 7px 7px 0 0; background: var(--bg); }
.bar-fill { width: 100%; min-height: 2px; border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #31a993, var(--accent)); }
.bar-value, .bar-label { color: var(--muted); font-size: 0.72rem; }

.week-nav { display: flex; align-items: center; gap: 0.45rem; }
.week { display: grid; grid-template-columns: repeat(7, minmax(126px, 1fr)); gap: 0.55rem; overflow-x: auto; padding: 0.2rem 0.1rem 0.65rem; }
.day { display: flex; min-height: 145px; flex-direction: column; gap: 0.45rem; border: 1px solid transparent; border-radius: 12px; padding: 0.65rem; background: #f5f8f8; }
.day.today { border-color: #9acfc4; background: var(--today); }
.day-name { display: block; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.day-name::first-letter { text-transform: uppercase; }
.workout-chip { width: 100%; border: 1px solid var(--border); border-radius: 9px; padding: 0.5rem; background: #fff; color: var(--text); font-size: 0.8rem; text-align: left; }
.workout-chip:hover, .workout-chip:focus-visible { border-color: #8dbfb7; background: #fbfefd; color: var(--text); }
.workout-chip .chip-title { display: block; margin-bottom: 0.2rem; font-weight: 680; }
.activity-chip { color: var(--accent-dark); font-size: 0.77rem; }
.today-workout h3 { font-size: 1.2rem; }
.details { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0.8rem 0; }
.details dt { color: var(--muted); font-size: 0.85rem; }
.details dd { min-width: 0; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.grid-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 0.85rem; }
.grid-form .wide, .grid-form .form-actions { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.88rem; }
.field span { color: var(--muted); }
.field.checkbox { flex-direction: row; align-items: center; gap: 0.55rem; }
input, select, textarea { width: 100%; border: 1px solid #cbd7dc; border-radius: 9px; padding: 0.62rem 0.7rem; background: #fff; color: var(--text); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 3px solid rgb(8 127 114 / 12%); }
.field.checkbox input { width: 1rem; height: 1rem; accent-color: var(--accent); }
textarea { resize: vertical; }
.form-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.form-status { margin: 0; color: var(--muted); font-size: 0.9rem; }

dialog { width: min(760px, calc(100vw - 2rem)); max-height: min(90vh, 900px); overflow: auto; border: 1px solid var(--border); border-radius: 18px; padding: 0; box-shadow: 0 25px 80px rgb(16 34 40 / 25%); }
dialog::backdrop { background: rgb(15 31 37 / 54%); backdrop-filter: blur(3px); }
.dialog-body { padding: 1.4rem; }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.notes { display: flex; flex-direction: column; gap: 0.65rem; margin: 0; padding: 0; list-style: none; }
.notes li { border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 0.85rem; background: #f7f9f9; white-space: pre-wrap; }
.notes .meta { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.35rem; color: var(--muted); font-size: 0.8rem; }
.landing { width: min(560px, calc(100% - 2rem)); margin: 12vh auto; text-align: center; }
.landing .card { padding: clamp(1.5rem, 5vw, 2.5rem); }

@media (max-width: 760px) {
  .topbar { min-height: 62px; flex-wrap: wrap; gap: 0.45rem 0.85rem; padding: 0.65rem 1rem; }
  .brand { margin-right: auto; }
  .topbar nav { order: 3; width: 100%; flex: 1 0 100%; gap: 0.25rem; overflow-x: auto; }
  .topbar nav a { flex: 0 0 auto; padding: 0.45rem 0.72rem; }
  .logout { gap: 0.3rem; }
  .who { display: none; }
  main { padding: 1.35rem 1rem 2rem; }
  .page-head { align-items: flex-start; }
  .page-head > button { width: 100%; }
  .columns { grid-template-columns: minmax(0, 1fr); }
  .week { grid-template-columns: repeat(7, minmax(145px, 1fr)); }
  .details { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; }
  .details dd { margin-bottom: 0.55rem; }
}

@media (max-width: 480px) {
  main { padding-right: 0.8rem; padding-left: 0.8rem; }
  .card { border-radius: 14px; padding: 1rem; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }
  .kpi { padding: 0.8rem; }
  .kpi strong { font-size: 1.2rem; }
  .athlete-card .stats { gap: 0.35rem; }
  .athlete-card .stats strong { font-size: 1rem; }
  .week-nav { width: 100%; justify-content: space-between; }
  .week-nav button { padding: 0.5rem 0.65rem; }
  .bars { gap: 0.25rem; }
  .bar-value, .bar-label { font-size: 0.65rem; }
  .dialog-body { padding: 1rem; }
  dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
}

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