/* ============================================================
   COACHLY 3.0 — Design System
   iOS 26 Liquid Glass × Medical Dark Navy
   ============================================================ */

:root {
  /* ── Core Backgrounds ── */
  --bg:           #060d1a;
  --bg-up:        #0a1628;
  --bg-glass:     rgba(255,255,255,0.045);
  --bg-glass-h:   rgba(255,255,255,0.075);
  --bg-input:     rgba(255,255,255,0.06);
  --bg-input-f:   rgba(255,255,255,0.09);
  --bg-overlay:   rgba(6, 13, 26, 0.85);

  /* ── Blues ── */
  --blue:         #2563eb;
  --blue-dim:     rgba(37,99,235,0.18);
  --blue-glow:    rgba(37,99,235,0.35);
  --blue-light:   #60a5fa;
  --blue-xlight:  #93c5fd;

  /* ── Semantic ── */
  --success:      #10b981;
  --success-dim:  rgba(16,185,129,0.15);
  --warning:      #f59e0b;
  --warning-dim:  rgba(245,158,11,0.15);
  --danger:       #ef4444;
  --danger-dim:   rgba(239,68,68,0.15);

  /* ── Text ── */
  --t1:           rgba(255,255,255,0.93);
  --t2:           rgba(255,255,255,0.60);
  --t3:           rgba(255,255,255,0.35);
  --t-inv:        rgba(10,20,40,0.92);

  /* ── Borders ── */
  --border:       rgba(255,255,255,0.08);
  --border-focus: rgba(96,165,250,0.55);

  /* ── Shape ── */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl:32px;

  /* ── Motion ── */
  --ease:    cubic-bezier(.22,.68,0,1.2);
  --ease-out:cubic-bezier(0,0,.2,1);

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.35);
  --shadow:    0 8px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 20px 60px rgba(0,0,0,.6);
  --shadow-blue: 0 4px 24px rgba(37,99,235,.35);

  /* ── Blur ── */
  --blur: blur(24px) saturate(180%);
}

/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { height:100%; -webkit-text-size-adjust:100% }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--t1);
  min-height: 100vh;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── Subtle mesh background ── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(37,99,235,.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(37,99,235,.08) 0%, transparent 60%);
  pointer-events:none;
}

/* ── Typography ── */
h1,h2,h3,h4 {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display",
               "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--t1);
}
h1 { font-size: clamp(1.6rem,4vw,2.2rem); font-weight:700; }
h2 { font-size: clamp(1.2rem,3vw,1.6rem); }
h3 { font-size: 1.1rem; }
h4 { font-size: .95rem; }
p  { color: var(--t2); line-height:1.65; }
a  { color: var(--blue-light); text-decoration:none; }
a:hover { color: var(--blue-xlight); }

/* ── Layout ── */
.app {
  display:flex; flex-direction:column;
  min-height:100vh; max-width:1200px;
  margin:0 auto; padding:0 16px;
}

/* ── Header ── */
.app-header {
  position:sticky; top:0; z-index:50;
  background: rgba(6,13,26,0.75);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--border);
  padding: 0 16px;
}
.app-header-inner {
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height: 58px; gap:16px;
}
.header-logo {
  font-size:1.25rem; font-weight:700;
  letter-spacing:-.03em; color:var(--t1);
  display:flex; align-items:center; gap:8px;
}
.header-logo .logo-icon { font-size:1.4rem; }
.header-right { display:flex; align-items:center; gap:12px; }
.header-user-name {
  font-size:.85rem; color:var(--t2); font-weight:500;
}

/* ── Navigation ── */
.app-nav {
  display:flex; gap:4px; overflow-x:auto;
  padding:12px 16px 0; scrollbar-width:none;
  -ms-overflow-style:none;
  max-width:1200px; margin:0 auto; width:100%;
}
.app-nav::-webkit-scrollbar { display:none }
.nav-item {
  display:flex; align-items:center; gap:6px;
  padding:8px 14px; border-radius:var(--r-md);
  font-size:.875rem; font-weight:500;
  color:var(--t2); white-space:nowrap;
  transition: all .18s var(--ease-out);
  cursor:pointer; border:none; background:none;
  text-decoration:none;
}
.nav-item:hover { background:var(--bg-glass); color:var(--t1); }
.nav-item.active {
  background: var(--blue-dim);
  color: var(--blue-light);
  border: 1px solid rgba(96,165,250,.2);
}

/* ── Main ── */
.app-main {
  flex:1; padding:24px 16px 32px;
  max-width:1200px; margin:0 auto; width:100%;
}

/* ── Cards / Glass Panels ── */
.card {
  background: var(--bg-glass);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 24px;
  transition: border-color .2s;
}
.card:hover { border-color: rgba(255,255,255,.13) }
.card-sm { padding:16px; border-radius:var(--r-lg) }

/* ── Page Header ── */
.page-header {
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; margin-bottom:24px;
}
.page-title { font-size:1.5rem; font-weight:700; }
.page-subtitle { font-size:.875rem; color:var(--t2); margin-top:2px; }

/* ── Stats Grid ── */
.stats-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap:14px; margin-bottom:28px;
}
.stat-card {
  background:var(--bg-glass);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px 20px;
  display:flex; align-items:center; gap:14px;
  transition: transform .18s var(--ease), border-color .18s;
}
.stat-card:hover { transform:translateY(-2px); border-color:rgba(96,165,250,.2) }
.stat-icon { font-size:2rem; flex-shrink:0; }
.stat-val { font-size:1.8rem; font-weight:700; line-height:1; color:var(--blue-light); }
.stat-lbl { font-size:.8rem; color:var(--t2); margin-top:3px; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:7px; padding:10px 18px;
  font-size:.875rem; font-weight:600;
  border-radius:var(--r-md); border:none;
  cursor:pointer; transition: all .18s var(--ease);
  white-space:nowrap; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.btn:active { transform:scale(.96) }
.btn-primary {
  background: var(--blue);
  color:#fff;
  box-shadow: var(--shadow-blue);
}
.btn-primary:hover { background:#1d4ed8; box-shadow:0 6px 28px rgba(37,99,235,.5) }
.btn-secondary {
  background: var(--bg-glass);
  color: var(--t1);
  border: 1px solid var(--border);
}
.btn-secondary:hover { background:var(--bg-glass-h); border-color:rgba(255,255,255,.14) }
.btn-success { background:var(--success); color:#fff }
.btn-success:hover { background:#059669 }
.btn-danger  { background:var(--danger);  color:#fff }
.btn-danger:hover  { background:#dc2626 }
.btn-warning { background:var(--warning); color:var(--t-inv) }
.btn-sm { padding:7px 13px; font-size:.8rem; border-radius:var(--r-sm) }
.btn-lg { padding:13px 24px; font-size:.95rem; border-radius:var(--r-lg) }
.btn-icon { padding:9px; border-radius:var(--r-sm) }
.btn:disabled { opacity:.4; cursor:not-allowed; pointer-events:none }

/* ── Forms ── */
.form-group { margin-bottom:18px }
label {
  display:block; margin-bottom:6px;
  font-size:.85rem; font-weight:500; color:var(--t2);
}
.input, select.input, textarea.input {
  width:100%; padding:12px 14px;
  background: var(--bg-input);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  color: var(--t1); font-size:.95rem;
  font-family: inherit;
  transition: border-color .18s, background .18s;
  outline:none;
  -webkit-appearance:none;
}
.input::placeholder { color:var(--t3) }
.input:focus {
  border-color: var(--border-focus);
  background: var(--bg-input-f);
}
textarea.input { resize:vertical; min-height:100px }
select.input { cursor:pointer }
.input-hint { font-size:.78rem; color:var(--t3); margin-top:5px }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px }

/* ── Tables ── */
.table-wrap { overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--border) }
table { width:100%; border-collapse:collapse; font-size:.875rem }
thead th {
  padding:12px 16px; text-align:left;
  font-size:.75rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:var(--t3);
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--border);
}
tbody td {
  padding:13px 16px; border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle;
}
tbody tr:last-child td { border-bottom:none }
tbody tr { transition:background .13s }
tbody tr:hover { background:var(--bg-glass) }
.td-actions { display:flex; gap:6px; justify-content:flex-end }

/* ── Badges ── */
.badge {
  display:inline-flex; align-items:center;
  padding:3px 10px; border-radius:999px;
  font-size:.73rem; font-weight:600; letter-spacing:.03em;
}
.badge-blue    { background:var(--blue-dim);    color:var(--blue-light) }
.badge-green   { background:var(--success-dim); color:var(--success) }
.badge-red     { background:var(--danger-dim);  color:var(--danger) }
.badge-yellow  { background:var(--warning-dim); color:var(--warning) }
.badge-gray    { background:rgba(255,255,255,.07); color:var(--t2) }

/* ── Alerts ── */
.alert {
  padding:14px 18px; border-radius:var(--r-md);
  font-size:.875rem; display:flex; align-items:flex-start; gap:12px;
  margin-bottom:16px;
}
.alert-error   { background:var(--danger-dim);  border:1px solid rgba(239,68,68,.25);  color:#fca5a5 }
.alert-success { background:var(--success-dim); border:1px solid rgba(16,185,129,.25); color:#6ee7b7 }
.alert-warning { background:var(--warning-dim); border:1px solid rgba(245,158,11,.25); color:#fcd34d }
.alert-info    { background:var(--blue-dim);     border:1px solid rgba(37,99,235,.25);  color:var(--blue-light) }

/* ── Modal ── */
.modal-backdrop {
  position:fixed; inset:0; z-index:200;
  background:rgba(6,13,26,.75);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  padding:20px;
  animation: fadeIn .2s var(--ease-out);
}
.modal-backdrop.open { display:flex }
.modal {
  background: var(--bg-up);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  width:100%; max-width:520px;
  max-height:90vh; overflow-y:auto;
  animation: slideUp .28s var(--ease);
}
.modal-lg { max-width:720px }
.modal-header {
  padding:20px 24px 0;
  display:flex; align-items:center; justify-content:space-between;
}
.modal-title { font-size:1.1rem; font-weight:600 }
.modal-close {
  background:none; border:none; cursor:pointer;
  color:var(--t2); font-size:1.4rem; line-height:1;
  padding:4px; border-radius:var(--r-sm);
  transition:color .15s, background .15s;
}
.modal-close:hover { color:var(--t1); background:var(--bg-glass) }
.modal-body  { padding:20px 24px }
.modal-footer {
  padding:0 24px 20px;
  display:flex; gap:10px; justify-content:flex-end;
  flex-wrap:wrap;
}

/* ── Toast ── */
.toast-container {
  position:fixed; bottom:24px; left:50%;
  transform:translateX(-50%);
  z-index:500; display:flex; flex-direction:column;
  align-items:center; gap:8px; pointer-events:none;
  width: min(90vw, 380px);
}
.toast {
  background: rgba(15,26,46,.95);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 12px 18px;
  font-size: .875rem; font-weight:500;
  color: var(--t1);
  box-shadow: var(--shadow);
  opacity:0; transform:translateY(12px);
  transition: opacity .22s, transform .22s var(--ease);
  pointer-events:auto; text-align:center;
}
.toast.show { opacity:1; transform:translateY(0) }
.toast.success { border-color:rgba(16,185,129,.3); color:#6ee7b7 }
.toast.error   { border-color:rgba(239,68,68,.3);  color:#fca5a5 }
.toast.warning { border-color:rgba(245,158,11,.3); color:#fcd34d }

/* ── Welcome Popup ── */
.welcome-popup {
  position:fixed; inset:0; z-index:300;
  display:flex; align-items:center; justify-content:center;
  padding:24px; pointer-events:none;
  opacity:0; transition:opacity .3s var(--ease-out);
}
.welcome-popup.show { opacity:1 }
.welcome-popup-card {
  background: rgba(10,22,40,.95);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border:1px solid rgba(96,165,250,.25);
  border-radius: var(--r-2xl);
  padding:28px 32px; max-width:400px; width:100%;
  text-align:center;
  box-shadow: 0 0 0 1px rgba(37,99,235,.15), var(--shadow-lg);
  transform:scale(.96); transition: transform .3s var(--ease);
}
.welcome-popup.show .welcome-popup-card { transform:scale(1) }
.welcome-icon { font-size:2.5rem; margin-bottom:12px }
.welcome-role-badge {
  display:inline-block; padding:4px 14px;
  background:var(--blue-dim); color:var(--blue-light);
  border-radius:999px; font-size:.8rem; font-weight:600;
  margin:8px 0 12px;
}
.welcome-verein { font-size:.82rem; color:var(--t3); margin-top:8px }
.welcome-progress {
  height:3px; background:rgba(255,255,255,.08);
  border-radius:2px; margin-top:16px; overflow:hidden;
}
.welcome-progress-bar {
  height:100%; background:var(--blue);
  border-radius:2px;
  animation: progressBar 4s linear forwards;
}
@keyframes progressBar {
  from { width:100% } to { width:0% }
}

/* ── Offline Banner ── */
.offline-banner {
  display:none; position:sticky; top:58px; z-index:49;
  background: var(--warning); color:var(--t-inv);
  text-align:center; padding:9px 16px;
  font-size:.85rem; font-weight:600;
}
.offline-banner.show { display:block }

/* ── Offline Sync Info ── */
.sync-info-card {
  background:var(--warning-dim); border:1px solid rgba(245,158,11,.25);
  border-radius:var(--r-lg); padding:20px; margin:16px 0; text-align:center;
}

/* ── Empty State ── */
.empty-state {
  text-align:center; padding:60px 20px;
  color:var(--t2);
}
.empty-icon { font-size:3rem; margin-bottom:12px; opacity:.5 }
.empty-title { font-size:1rem; font-weight:600; color:var(--t2); margin-bottom:6px }
.empty-sub { font-size:.875rem; color:var(--t3) }

/* ── Info Card (Kursdetails) ── */
.info-card {
  background:var(--bg-glass); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:16px 20px; margin-bottom:20px;
}
.info-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px }
.info-item {}
.info-label { font-size:.73rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--t3) }
.info-value { font-size:.95rem; font-weight:500; color:var(--t1); margin-top:2px }

/* ── Teilnehmer / Mitglieder Liste ── */
.mitglied-list { display:flex; flex-direction:column; gap:8px }
.mitglied-item {
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:13px 16px;
  background:var(--bg-glass); border:1px solid var(--border);
  border-radius:var(--r-lg);
  transition: border-color .15s, background .15s;
}
.mitglied-item:hover { background:var(--bg-glass-h); border-color:rgba(255,255,255,.12) }
.mitglied-checkbox-label {
  display:flex; align-items:center; gap:12px;
  cursor:pointer; flex:1; min-width:0;
}
.mitglied-checkbox-label input[type=checkbox] { display:none }
.checkbox-box {
  width:22px; height:22px; flex-shrink:0;
  border:2px solid var(--border);
  border-radius:6px; background:var(--bg-input);
  display:flex; align-items:center; justify-content:center;
  transition: all .15s var(--ease);
}
.mitglied-checkbox-label input:checked + .checkbox-box {
  background:var(--blue); border-color:var(--blue);
}
.mitglied-checkbox-label input:checked + .checkbox-box::after {
  content:'✓'; color:#fff; font-size:.75rem; font-weight:700;
}
.mitglied-info {}
.mitglied-name { font-size:.95rem; font-weight:600; color:var(--t1) }
.mitglied-meta { font-size:.78rem; color:var(--t2); margin-top:2px }
.mitglied-note { font-size:.78rem; color:var(--blue-light); margin-top:2px }

/* ── Pulswerte Modal & Tabelle ── */
.puls-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap:8px; margin-top:4px;
}
.puls-cell {}
.puls-cell label {
  font-size:.7rem; text-align:center; display:block;
  color:var(--t3); margin-bottom:4px;
  font-weight:600; letter-spacing:.04em;
}
.puls-cell .input {
  text-align:center; padding:10px 6px;
  font-size:1rem; font-weight:600;
}

/* ── Login / Install Pages ── */
.center-page {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(ellipse 80% 60% at 30% -20%, rgba(37,99,235,.14) 0%, transparent 60%),
    radial-gradient(ellipse 70% 50% at 80% 120%, rgba(37,99,235,.10) 0%, transparent 55%),
    var(--bg);
}
.auth-card {
  width:100%; max-width:420px;
  background: rgba(10,22,40,.8);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--r-2xl);
  padding: 36px 32px;
  box-shadow: var(--shadow-lg);
  animation: slideUp .35s var(--ease);
}
.auth-logo {
  text-align:center; font-size:2.8rem;
  margin-bottom:8px;
}
.auth-title {
  text-align:center; font-size:1.5rem; font-weight:700;
  margin-bottom:4px;
}
.auth-subtitle {
  text-align:center; font-size:.875rem; color:var(--t2);
  margin-bottom:28px;
}
.auth-divider {
  height:1px; background:var(--border);
  margin:20px 0;
}
.auth-type-hint {
  text-align:center; font-size:.78rem; color:var(--t3);
  margin-top:-12px; margin-bottom:16px;
  min-height:1.2em; transition:color .2s;
}
.auth-type-hint.detected { color:var(--blue-light) }

/* ── Install Steps ── */
.install-card { max-width:560px }
.step-bar {
  display:flex; gap:6px; margin-bottom:28px;
}
.step-dot {
  flex:1; height:4px; border-radius:2px;
  background:rgba(255,255,255,.1);
  transition:background .3s;
}
.step-dot.done  { background:var(--success) }
.step-dot.active{ background:var(--blue) }

/* ── Footer ── */
.app-footer {
  padding:20px 16px; border-top:1px solid var(--border);
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  font-size:.8rem; color:var(--t3);
}
.app-footer a { color:var(--t3); transition:color .15s }
.app-footer a:hover { color:var(--t2) }

/* ── Animations ── */
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes slideUp {
  from { opacity:0; transform:translateY(18px) }
  to   { opacity:1; transform:translateY(0) }
}
@keyframes spin { to { transform:rotate(360deg) } }
.spin { animation:spin .8s linear infinite }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:rgba(255,255,255,.12); border-radius:10px }

/* ── Touch / iPad ── */
@media (hover:none) {
  .btn, .nav-item, .mitglied-item { -webkit-tap-highlight-color:transparent }
}
.btn, .nav-item { min-height:44px }
.puls-cell .input { min-height:44px }

/* ── Responsive ── */
@media (max-width:640px) {
  .form-row, .form-row-3 { grid-template-columns:1fr }
  .modal { max-width:100%; border-radius:var(--r-xl) var(--r-xl) 0 0 }
  .modal-backdrop { align-items:flex-end; padding:0 }
  .auth-card { padding:28px 20px }
  .page-header { flex-direction:column; align-items:flex-start }
}

/* ── Print ── */
@media print {
  body { background:#fff; color:#000 }
  .app-header,.app-nav,.app-footer,.btn,
  .offline-banner,.toast-container,.welcome-popup { display:none!important }
  .card { background:#fff; border:1px solid #ddd; box-shadow:none }
}

/* ── Utility ── */
.mt-1{margin-top:6px} .mt-2{margin-top:12px} .mt-3{margin-top:20px} .mt-4{margin-top:28px}
.mb-1{margin-bottom:6px} .mb-2{margin-bottom:12px} .mb-3{margin-bottom:20px}
.flex{display:flex} .flex-1{flex:1} .items-center{align-items:center}
.justify-between{justify-content:space-between}
.gap-1{gap:6px} .gap-2{gap:12px} .gap-3{gap:20px}
.text-sm{font-size:.875rem} .text-xs{font-size:.78rem}
.text-muted{color:var(--t2)} .text-dim{color:var(--t3)}
.text-blue{color:var(--blue-light)} .text-success{color:var(--success)}
.text-danger{color:var(--danger)} .text-warning{color:var(--warning)}
.font-semibold{font-weight:600} .font-bold{font-weight:700}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-full{width:100%} .hidden{display:none!important}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}