/* ============================================================================
   MyFITContainer — design system (dark, modern)
   Tokens → base → layout/header → components (buttons, inputs, cards, tables)
   ============================================================================ */
:root {
  color-scheme: dark;
  /* surfaces */
  --bg:#0a0e13;
  --surface:#121823;       /* cards, header panel */
  --surface-2:#0e141d;     /* table / input fields */
  --surface-3:#19222e;     /* elevated / hover panel */
  --thead:#141c27;
  --hover:#1a2433;
  --zebra:rgba(255,255,255,.022);
  /* text */
  --fg:#e9eff7;
  --muted:#8b98ab;
  --faint:#5b6675;
  /* lines */
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.055);
  /* accent + states */
  --accent:#4f8cff;
  --accent-2:#7b6cff;
  --accent-ink:#ffffff;
  --accent-weak:rgba(79,140,255,.15);
  --ok:#35c08a;
  --danger:#ff5d57;
  --danger-weak:rgba(255,93,87,.14);
  /* shape + depth */
  --r:14px; --r-sm:9px; --r-xs:6px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -18px rgba(0,0,0,.7);
  --ring:0 0 0 3px var(--accent-weak);
  --header-h:3.5rem;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; min-height:100vh;
  font:15px/1.6 var(--font); color:var(--fg);
  background:var(--bg);
  background-image:radial-gradient(1100px 520px at 82% -8%, rgba(79,140,255,.10), transparent 60%),
                   radial-gradient(900px 500px at 0% 0%, rgba(123,108,255,.06), transparent 55%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:var(--accent-weak); color:var(--fg); }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
.muted { color:var(--muted); }
.error { color:var(--danger); }
hr { border:0; border-top:1px solid var(--line); margin:1.4rem 0; }

/* scrollbars */
* { scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.16) transparent; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.14); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.26); background-clip:padding-box; }

/* ---------- header / nav (sticky) ---------- */
header {
  position:sticky; top:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  height:var(--header-h); padding:0 1.25rem;
  background:rgba(12,17,24,.72);
  backdrop-filter:blur(14px) saturate(150%); -webkit-backdrop-filter:blur(14px) saturate(150%);
  border-bottom:1px solid var(--line);
}
.brand { display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.02rem;
         letter-spacing:.2px; color:var(--fg); }
.brand:hover { text-decoration:none; }
.brand::before {
  content:""; width:.7rem; height:.7rem; border-radius:4px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 0 16px rgba(79,140,255,.55);
}
nav { display:flex; align-items:center; gap:.2rem; }
.nav-link { color:var(--muted); padding:.42rem .72rem; border-radius:8px; font-size:.9rem;
            font-weight:500; transition:color .15s, background .15s; }
.nav-link:hover { color:var(--fg); background:rgba(255,255,255,.05); text-decoration:none; }
.nav-link.active { color:var(--fg); background:var(--accent-weak);
                   box-shadow:inset 0 0 0 1px rgba(79,140,255,.28); }
nav form { margin:0 0 0 .45rem; }

/* ---------- layout ---------- */
main { max-width:900px; margin:2.2rem auto 4rem; padding:0 1.25rem; }
body.stats main { max-width:1460px; }
h1 { font-size:1.55rem; font-weight:700; letter-spacing:-.015em; margin:0 0 1.2rem; }
h2 { font-size:1.08rem; font-weight:650; letter-spacing:-.005em; margin:1.9rem 0 .7rem; }
h3 { font-size:.95rem; font-weight:600; color:var(--fg); margin:1.3rem 0 .5rem; }
footer { margin-top:3rem; padding:1.4rem 1.25rem; border-top:1px solid var(--line);
         color:var(--faint); font-size:.78rem; text-align:center; }

/* ---------- cards ---------- */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
        padding:1.15rem 1.3rem; margin:0 0 1.2rem; box-shadow:var(--shadow-sm); }
.card.row { display:flex; gap:.7rem; align-items:center; }
.card.row input { flex:1; }
.card.row label { margin:0; color:var(--fg); }
form.card label { display:block; margin:0 0 .9rem; font-size:.82rem; color:var(--muted); font-weight:500; }
.flash { border-color:rgba(79,140,255,.45); background:var(--accent-weak); color:var(--fg); }

/* ---------- form controls ---------- */
input, select, textarea {
  width:100%; padding:.55rem .7rem; border:1px solid var(--line); border-radius:var(--r-sm);
  font:inherit; margin-top:.3rem; background:var(--surface-2); color:var(--fg);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder { color:var(--faint); }
input:hover, select:hover, textarea:hover { border-color:rgba(255,255,255,.2); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); box-shadow:var(--ring); }
select {
  appearance:none; -webkit-appearance:none; padding-right:1.9rem; cursor:pointer;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238b98ab' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 4.5 6 8l3.5-3.5'/></svg>");
  background-repeat:no-repeat; background-position:right .65rem center;
}

/* ---------- buttons & action links (one consistent system) ---------- */
button, .btn, .btn-ghost, .btn-danger, .csv, .reset, .pager a {
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.55rem .95rem; border:1px solid transparent; border-radius:var(--r-sm);
  font:inherit; font-weight:600; font-size:.9rem; line-height:1.1; white-space:nowrap;
  cursor:pointer; text-decoration:none;
  transition:filter .15s, background .15s, border-color .15s, color .15s, transform .04s, box-shadow .15s;
}
/* primary (default <button> + .btn) */
button, .btn-primary {
  background:linear-gradient(180deg, #5b95ff, #3f78ee); color:var(--accent-ink);
  box-shadow:0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12);
}
button:hover, .btn-primary:hover { filter:brightness(1.07); text-decoration:none; }
button:active, .btn-primary:active { transform:translateY(1px); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline:none; box-shadow:var(--ring); }
/* secondary / ghost (Reset, CSV export, exports, pager …) */
.btn-ghost, .csv, .reset, .pager a {
  background:rgba(255,255,255,.02); color:var(--fg); border-color:rgba(255,255,255,.16);
  font-weight:500; box-shadow:none;
}
.btn-ghost:hover, .csv:hover, .reset:hover, .pager a:hover {
  background:rgba(255,255,255,.05); color:var(--fg); filter:none; text-decoration:none;
}
/* danger */
button.danger, .btn-danger {
  background:linear-gradient(180deg, #ff6a64, #ec463f); color:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.14);
}
button.danger:hover { filter:brightness(1.06); }
.btn-sm { padding:.4rem .7rem; font-size:.84rem; }

/* header logout = quiet ghost */
nav button { background:transparent; color:var(--muted); border-color:var(--line);
             box-shadow:none; font-weight:500; padding:.4rem .7rem; }
nav button:hover { color:var(--fg); background:rgba(255,255,255,.05); filter:none; }

/* ---------- tables ---------- */
table { width:100%; border-collapse:collapse; background:var(--surface-2);
        border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow-sm); }
th, td { text-align:left; padding:.62rem .85rem; border-bottom:1px solid var(--line-2);
         font-variant-numeric:tabular-nums; }
th { font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; font-weight:600;
     color:var(--muted); background:var(--thead); }
tbody tr { transition:background .12s; }
tbody tr:nth-child(even) { background:var(--zebra); }
tbody tr:hover { background:var(--hover); }
tbody tr:last-child td { border-bottom:0; }
tfoot td { font-weight:650; border-top:1px solid var(--line); background:var(--thead); }
td:not(:first-child), th:not(:first-child) { text-align:right; }
table.summary { max-width:560px; }
table.detail { font-size:.9rem; }
table.detail th a { color:var(--muted); text-decoration:none; white-space:nowrap; }
table.detail th a:hover { color:var(--fg); }
.tablewrap { overflow-x:auto; border-radius:var(--r); }
table.detail th, table.detail td { white-space:nowrap; }
table.detail th.workout, table.detail td.workout {
    white-space:normal; text-align:left; min-width:18rem; max-width:60ch; }
table.detail th.loc, table.detail td.loc, table.detail th.comp, table.detail td.comp { text-align:left; }

.tablehead { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.tablehead h1, .tablehead h2 { margin-bottom:0; }
.pager { display:flex; gap:.6rem; align-items:center; justify-content:center; margin:1.2rem 0; color:var(--muted); }
.pager span { font-size:.85rem; }

/* detail table: zebra by class so expanded note rows don't shift the pattern */
table.detail tbody tr:nth-child(even) { background:transparent; }
table.detail tbody tr.zebra { background:var(--zebra); }
table.detail tbody tr:hover { background:var(--hover); }
table.detail tr.descrow, table.detail tr.descrow:hover { background:var(--surface-3); }
table.detail tr.descrow td { white-space:normal; padding:.5rem .85rem; }
.descrow pre { margin:0; white-space:pre-wrap; overflow-x:auto; max-width:100%;
               font:13px/1.5 var(--mono); color:var(--fg); }
.notebtn { background:transparent; border:0; color:var(--muted); cursor:pointer; box-shadow:none;
           line-height:0; padding:.28rem; border-radius:7px; vertical-align:middle;
           transition:color .12s, background .12s; }
.notebtn:hover { color:var(--accent); background:rgba(255,255,255,.06); filter:none; }
.notebtn svg { display:block; }
table.detail td.note { text-align:center; width:1%; white-space:nowrap; color:var(--muted); }
table.detail td.comp a { color:var(--accent); }
table.detail a.rowlink { color:var(--fg); }
table.detail a.rowlink:hover { color:var(--accent); text-decoration:none; }
table.detail td.dbid { text-align:right; color:var(--muted); }
table.detail td.sha { white-space:nowrap; }
table.detail td.sha code { font-size:.8em; color:var(--muted); font-family:var(--mono); cursor:help; }
td form { margin:0; }

/* token / monospace value */
tr.revoked { color:var(--muted); }
tr.revoked td { text-decoration:line-through; }
.token { display:block; margin-top:.5rem; padding:.6rem .7rem; background:#070b11; color:#7ee787;
         border:1px solid var(--line); border-radius:var(--r-sm); word-break:break-all; font-family:var(--mono); }

/* ---------- stats filter bar (3 rows: search · filters · reset) ---------- */
.filterbar { display:flex; flex-direction:column; align-items:flex-start; gap:.9rem; }
.filterbar .search-row { width:100%; }
.filterbar .filter-row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.7rem 1rem; width:100%; }
.filterbar label { margin:0; font-size:.76rem; color:var(--muted); font-weight:500;
                   display:flex; flex-direction:column; gap:.3rem; }
.filterbar select { margin-top:0; padding:.45rem 1.8rem .45rem .6rem; }
.filterbar input { margin-top:0; padding:.45rem .6rem; }
.filterbar input[type=search] { width:28rem; max-width:100%; }
.filterbar .searchhelp { font-size:.78rem; margin:.45rem 0 0; max-width:64rem; line-height:1.5; }
.filterbar .reset-row { display:flex; flex-wrap:wrap; gap:.6rem; width:100%; }

/* ---------- stats: KPI summary cards ---------- */
.kpis { display:flex; flex-wrap:wrap; gap:.8rem; margin:0 0 1.4rem; }
.kpi { display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
       padding:.85rem 1.05rem; min-width:9.5rem; box-shadow:var(--shadow-sm);
       transition:border-color .15s, transform .06s, background .15s; }
a.kpi:hover { border-color:rgba(79,140,255,.55); text-decoration:none; transform:translateY(-1px); }
a.kpi.active { border-color:rgba(79,140,255,.7); background:var(--accent-weak); }
.kpi .label { font-size:.7rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); }
.kpi .value { font-size:1.5rem; font-weight:750; letter-spacing:-.02em; margin:.12rem 0;
              color:var(--fg); font-variant-numeric:tabular-nums; }
.kpi .sub { font-size:.8rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.kpi.total { background:linear-gradient(180deg, rgba(79,140,255,.13), rgba(123,108,255,.05));
             border-color:rgba(79,140,255,.4); }
.kpi.total .value { color:#fff; }

/* ---------- stats: activities table with fixed header/footer + scroll ---------- */
.tablewrap.scroll { max-height:60vh; overflow:auto; border:1px solid var(--line);
                    border-radius:var(--r); box-shadow:var(--shadow-sm); }
/* overflow:visible overrides the base table's overflow:hidden — an ancestor
   with overflow:hidden would otherwise break position:sticky on the header. */
.tablewrap.scroll table { border:0; border-radius:0; box-shadow:none; overflow:visible; }
.tablewrap.scroll thead th { position:sticky; top:0; z-index:3; }
.tablewrap.scroll tfoot td { position:sticky; bottom:0; z-index:3; }

/* ---------- wide page (competitions list) + action groups ---------- */
body.wide main { max-width:1180px; }
.actions { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; }
.actions form { margin:0; }

/* ---------- sectioned edit form (competitions) ---------- */
form.card h3 { margin:1.6rem 0 .8rem; padding-top:1.2rem; border-top:1px solid var(--line-2);
               font-size:.95rem; color:var(--fg); }
form.card h3.first { border-top:0; padding-top:0; margin-top:.1rem; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(11rem,1fr)); gap:.7rem 1rem;
             align-items:end; }
form.card .form-grid label { margin:0; }
textarea { resize:vertical; min-height:2.6rem; }

/* placement matrix (Overall / Men / Age group × Rank / Field size) */
.placement { display:grid; grid-template-columns:8rem 6.5rem 6.5rem; gap:.5rem .7rem;
             align-items:center; max-width:23rem; margin:.3rem 0 .2rem; }
.placement .ph { font-size:.7rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); text-align:right; }
.placement .rl { color:var(--fg); font-size:.9rem; }
.placement input { margin:0; text-align:right; }

/* splits / segments list */
.splits { display:flex; flex-direction:column; gap:.4rem; margin:.2rem 0 .7rem; max-width:32rem; }
.split { display:flex; gap:.5rem; align-items:center; }
.split input { margin:0; }
.split input:first-child { flex:2; }
.split input:nth-child(2) { flex:1; }
.split .x { background:transparent; border:1px solid var(--line); color:var(--muted);
            padding:.45rem .65rem; box-shadow:none; }
.split .x:hover { color:var(--danger); border-color:rgba(255,93,87,.5); background:var(--danger-weak); filter:none; }
.form-actions { margin-top:1.4rem; }

/* ---------- activity detail page ---------- */
.detailhead { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem;
              flex-wrap:wrap; margin-bottom:1.2rem; }
.detailhead h1 { margin:0; }
.badge { display:inline-block; padding:.15rem .55rem; border-radius:999px; background:var(--accent-weak);
         color:var(--fg); font-size:.76rem; font-weight:600; border:1px solid rgba(79,140,255,.3);
         vertical-align:middle; }
.statgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(9.5rem,1fr)); gap:.1rem 1.4rem;
            padding:.4rem 1.3rem; }
.stat { padding:.55rem .1rem; border-bottom:1px solid var(--line-2); }
.stat .k { font-size:.68rem; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.stat .v { font-size:1.02rem; font-weight:600; font-variant-numeric:tabular-nums; margin-top:.12rem; }
#map { height:380px; border-radius:var(--r-sm); overflow:hidden; z-index:0; }
.chartcard { margin:.3rem 0 1.1rem; }
.chartcard:last-child { margin-bottom:.2rem; }
.chart-title { font-size:.8rem; color:var(--muted); margin:.1rem 0 .25rem; font-weight:500; }
.chart { width:100%; }
.note-text { margin:0; white-space:pre-wrap; word-break:break-word; font:13px/1.55 var(--mono); color:var(--fg); }
/* lap-swimming: pace bars (HealthFit-style) + interval table */
.swimstats { display:flex; gap:1.5rem; font-size:.85rem; color:var(--muted); }
.swimstats b { color:var(--accent); font-size:1.05rem; font-variant-numeric:tabular-nums; }
.swimpace { position:relative; height:220px; display:flex; align-items:flex-end; gap:1px; padding-top:10px; }
.swimpace > div.pbar, .swimpace > div.prest { flex:1 1 0; }
.swimpace .pbar { min-width:2px; border-radius:3px 3px 0 0; }
.swimpace .prest { background:transparent; }
.swimpace .pref { position:absolute; left:0; right:0; height:0; border-top:1px solid; opacity:.75; pointer-events:none; }
.swimpace .pref.avg { border-top-style:dashed; border-color:var(--muted) !important; opacity:.9; }
.swimpace .hrsvg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.hrtoggle { display:inline-flex; align-items:center; gap:.35rem; color:var(--muted); cursor:pointer; }
.hrtoggle input { width:auto; margin:0; }
.swimlegend { display:flex; flex-wrap:wrap; gap:1rem; margin-top:.75rem; font-size:.8rem; color:var(--muted); }
.swimlegend .sw { display:inline-flex; align-items:center; gap:.4rem; }
.swimlegend .dot { width:.85rem; height:.85rem; border-radius:3px; display:inline-block; }
/* uPlot dark tweaks */
.uplot, .uplot * { font-family:var(--font); }
.u-legend { font-size:.75rem; color:var(--muted); margin-top:.2rem; }
.u-legend .u-value { color:var(--fg); font-variant-numeric:tabular-nums; }
/* Leaflet on dark */
.leaflet-container { background:var(--surface-2); }
.leaflet-control-attribution { background:rgba(0,0,0,.5) !important; color:var(--muted) !important; }
.leaflet-control-attribution a { color:var(--accent) !important; }

/* Dropbox page */
.badge.muted { background:var(--line-2); color:var(--muted); border-color:var(--line-2); }
.badge.danger { background:rgba(255,93,87,.18); color:var(--danger); border-color:rgba(255,93,87,.4); }
.inline-fields { display:flex; gap:1.2rem; flex-wrap:wrap; }
label.checkbox, label.radio { display:flex; align-items:flex-start; gap:.55rem; font-weight:400;
                              margin:.5rem 0; cursor:pointer; }
label.checkbox input, label.radio input { width:auto; margin-top:.2rem; }
.progress { height:.55rem; background:var(--line-2); border-radius:999px; overflow:hidden; margin-top:.8rem; }
.progress > div { height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .3s ease; }
.folderrow { display:flex; gap:.6rem; align-items:center; margin:.1rem 0 .7rem; }
.folderrow input { flex:1; margin:0; }
.folderrow .btn-sm { white-space:nowrap; }
/* folder picker modal */
.modal { position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.55);
         display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal[hidden] { display:none; }
.modal-box { background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
             width:min(540px,100%); max-height:80vh; display:flex; flex-direction:column;
             box-shadow:0 20px 60px rgba(0,0,0,.5); }
.modal-head { display:flex; align-items:center; justify-content:space-between;
              padding:.9rem 1.1rem; border-bottom:1px solid var(--line); }
.modal-path { padding:.6rem 1.1rem; font-size:.85rem; color:var(--muted); }
.modal-path code { color:var(--fg); }
.dbxlist { list-style:none; margin:0; padding:0; overflow:auto; flex:1; }
.dbxlist li { padding:.55rem 1.1rem; border-bottom:1px solid var(--line-2); cursor:pointer; }
.dbxlist li:hover:not(.muted) { background:var(--accent-weak); }
.dbxlist li.up { color:var(--muted); }
.dbxlist li.muted { cursor:default; }
.modal-foot { display:flex; gap:.6rem; align-items:center; padding:.8rem 1.1rem;
              border-top:1px solid var(--line); }
.modal-foot input { margin:0; flex:0 1 14rem; }

/* combined activity chart: series chips + x-axis toggle */
.serieschips { display:flex; flex-wrap:wrap; gap:.45rem; margin:.2rem 0 .8rem; }
.chip { display:inline-flex; align-items:center; gap:.45rem; padding:.3rem .7rem;
        border-radius:999px; background:transparent; border:1px solid var(--line);
        color:var(--muted); font-size:.78rem; cursor:pointer; }
.chip:hover { border-color:rgba(79,140,255,.45); }
.chip .dot { width:.7rem; height:.7rem; border-radius:50%; display:inline-block; opacity:.3; }
.chip.on { color:var(--fg); border-color:rgba(79,140,255,.45); background:var(--accent-weak); }
.chip.on .dot { opacity:1; }
.xtoggle { display:inline-flex; border:1px solid var(--line); border-radius:999px; overflow:hidden; }
.xtoggle button { background:transparent; border:0; border-radius:0; padding:.3rem .85rem;
                  font-size:.78rem; color:var(--muted); box-shadow:none; }
.xtoggle button.active { background:var(--accent-weak); color:var(--fg); }
#combochart { width:100%; }
/* Legende = reine Wertanzeige: nicht klickbar (Toggles sind die Chips oben),
   ausgeblendete Serien tauchen gar nicht auf */
#combochart .u-legend { pointer-events:none; }
#combochart .u-legend .u-series.u-off { display:none; }

@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; scroll-behavior:auto; }
}