/* ==========================================================================
   Plantric – Design System
   Dark Mode · Glassmorphism · Gradient Accents
   ========================================================================== */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #09111f;
  color: #fff;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: #00d4ff; text-decoration: none; transition: opacity 0.2s; }
a:hover { opacity: 0.85; }
ul, ol { list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.22); }

/* ── App Layout (Sidebar + Main) ───────────────────────────────────────── */
.site-shell {
  min-height: 100vh;
}
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ───────────────────────────────────────────────────────────── */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 240px;
  background: rgba(8,14,28,0.97);
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255,255,255,0.07);
  display: flex;
  flex-direction: column;
  z-index: 200;
  transition: width 0.25s ease, transform 0.25s ease;
  overflow: hidden;
}
.sidebar.collapsed { width: 64px; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-arrow,
.sidebar.collapsed .nav-dropdown,
.sidebar.collapsed .sidebar-brand-text,
.sidebar.collapsed .user-info { display: none; }
.sidebar.collapsed .sidebar-header { justify-content: center; }
.sidebar.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
.sidebar.collapsed .user-profile { justify-content: center; }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.sidebar-brand-icon {
  font-size: 1.5rem;
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.sidebar-brand-text {
  font-size: 1.15rem;
  font-weight: 700;
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap;
}
.sidebar-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.1rem;
  cursor: pointer;
  max-height: 3rem;
  padding: 0.35rem;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: rgba(255,255,255,0.08); color: #fff; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 0;
}
.nav-section { margin-bottom: 0.5rem; }
.nav-section-label {
  display: block;
  padding: 0.5rem 1.25rem 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.3);
  white-space: nowrap;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.25rem;
  color: rgba(255,255,255,0.6);
  font-size: 0.88rem;
  border-radius: 0;
  transition: all 0.15s;
  cursor: pointer;
  max-height: 3rem;
  text-decoration: none;
  position: relative;
  white-space: nowrap;
}
.nav-item:hover { color: #fff; background: rgba(255,255,255,0.06); opacity: 1; }
.nav-item.active {
  color: #00d4ff;
  background: rgba(0,212,255,0.08);
  border-right: 3px solid #00d4ff;
}
.nav-item.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.nav-icon { font-size: 1.15rem; flex-shrink: 0; width: 1.5rem; text-align: center; }
.nav-label { white-space: nowrap; }
.nav-badge {
  font-size: 0.6rem;
  background: rgba(255,255,255,0.1);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  color: rgba(255,255,255,0.4);
  margin-left: auto;
}

/* Neuer Eintrag dropdown */
.nav-dropdown-trigger { cursor: pointer;
  max-height: 3rem; position: relative; }
.nav-dropdown-trigger .nav-arrow {
  margin-left: auto;
  font-size: 1rem;
  opacity: 0.4;
  transition: transform 0.2s;
}
.nav-dropdown-trigger.open .nav-arrow { transform: rotate(90deg); opacity: 0.8; }
.nav-dropdown {
  display: none;
  padding: 0.25rem 0 0.25rem 1rem;
}
.nav-dropdown.open { display: block; }
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  max-height: 3rem;
  border-radius: 0.375rem;
  transition: background 0.15s;
}
.nav-dropdown-item:hover:not(.disabled) { background: rgba(255,255,255,0.08); color: #fff; }
.nav-dropdown-item.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.nav-dropdown-divider {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin: 0.25rem 0.75rem;
}
.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.dot-run { background: #4ecdc4; }
.dot-training { background: #ff6b6b; }
.dot-competition { background: #ffd93d; }
.dot-disabled { background: rgba(255,255,255,0.2); }
.dot-swimming { background: #3498db; }
.dot-cycling { background: #e67e22; }
.dot-hiking { background: #8b6914; }
.dot-strength { background: #9b59b6; }
.dot-yoga { background: #1abc9c; }
.dot-absence { background: #95a5a6; }
.nav-dropdown-group-label { display:block; padding:4px 12px 2px; font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:600; }

.sidebar-footer {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding: 0.5rem 0;
}
.user-profile {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1.25rem;
  cursor: pointer;
  max-height: 3rem;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.user-profile:hover { background: rgba(255,255,255,0.06); }
.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  flex-shrink: 0;
}
.user-name { font-size: 0.85rem; color: rgba(255,255,255,0.7); white-space: nowrap; }
.user-info { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.user-info .role-badge { align-self: flex-start; }
.role-badge { font-size: 0.65rem; font-weight: 600; white-space: nowrap; }
.role-trainer { color: #b07aff; }
.role-trainee { color: #00d4ff; }
.sidebar.collapsed .role-badge { display: none; }
.sidebar.collapsed .user-info { display: none; }

.profile-value {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  margin: 0.25rem 0 0 0;
}

.notification-badge {
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

/* ── Mobile Header ──────────────────────────────────────────────────── */
.mobile-header {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 56px;
  background: rgba(8,14,28,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  z-index: 150;
  padding: 0 1rem;
  align-items: center;
  gap: 0.75rem;
}
.hamburger {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 1.4rem;
  cursor: pointer;
  max-height: 3rem;
  padding: 0.25rem;
}
.hamburger:hover { color: #fff; }
.mobile-brand {
  font-size: 1.1rem;
  font-weight: 700;
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 190;
}
.sidebar-overlay.open { display: block; }

/* ── Main Content ──────────────────────────────────────────────────── */
.main-content {
  flex: 1;
  margin-left: 240px;
  min-height: 100vh;
  overflow-y: scroll;
  transition: margin-left 0.25s ease;
}
.page-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.sidebar.collapsed ~ .main-content { margin-left: 64px; }
.container { max-width: 1100px; margin: 0; padding: 2rem 2rem; }

/* ── Page Title ────────────────────────────────────────────────────── */
.page-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  margin: 0 0 1rem 0;
  letter-spacing: 0.02em;
}

/* ── Flash Messages ────────────────────────────────────────────────── */
.flash-container { padding: 0 2rem; max-width: 1100px; margin: 0; }
.flash-msg {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  font-size: 0.88rem;
}
.flash-msg.success { background: rgba(0,212,100,0.12); border: 1px solid rgba(0,212,100,0.25); color: #00d464; }
.flash-msg.error { background: rgba(255,60,60,0.12); border: 1px solid rgba(255,60,60,0.25); color: #ff5555; }
.flash-msg.info { background: rgba(0,212,255,0.12); border: 1px solid rgba(0,212,255,0.25); color: #00d4ff; }

/* ── Glass Cards ───────────────────────────────────────────────────── */
.glass-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 1.5rem;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.2rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  max-height: 3rem;
  font-family: inherit;
  transition: all 0.2s;
  color: #fff;
  text-decoration: none;
}
.btn:hover { opacity: 0.85; text-decoration: none; }
.btn-primary { background: linear-gradient(135deg, #00d4ff, #7b2ff7); }
.btn-secondary { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
.btn-danger { background: rgba(255,60,60,0.15); border: 1px solid rgba(255,60,60,0.25); color: #ff5555; }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.78rem; }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Form Controls ─────────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.6);
  font-weight: 500;
}
.form-control {
  width: 100%;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #fff;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-control:focus { border-color: #00d4ff; box-shadow: 0 0 0 2px rgba(0,212,255,0.15); }
.form-control::placeholder { color: rgba(255,255,255,0.3); }
/* ── Custom Select Component ────────────────────────────────────────────── */
select.form-control[data-customized] { display: none !important; }
.cs-wrap { position: relative; width: 100%; }
.cs-wrap.form-control { padding: 0; border: none; background: none; }
.cs-trigger {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; padding: 0.55rem 0.8rem; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #fff; font-size: 0.88rem; cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 2.5rem; box-sizing: border-box;
}
.cs-trigger:hover { border-color: rgba(0,212,255,0.4); }
.cs-wrap.open .cs-trigger,
.cs-trigger:focus { border-color: #00d4ff; box-shadow: 0 0 0 2px rgba(0,212,255,0.15); outline: none; }
.cs-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-label.cs-placeholder { color: rgba(255,255,255,0.35); }
.cs-arrow { flex-shrink: 0; margin-left: 0.5rem; transition: transform 0.2s; display:flex; }
.cs-wrap.open .cs-arrow { transform: rotate(180deg); }
.cs-list {
  display: none; position: absolute; left: 0; right: 0; top: 100%;
  margin-top: 4px; max-height: 240px; overflow-y: auto;
  background: rgba(22,22,42,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0,212,255,0.2); border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5); z-index: 9999;
  scrollbar-width: thin; scrollbar-color: rgba(0,212,255,0.3) transparent;
}
.cs-wrap.open .cs-list { display: block; animation: csFadeIn 0.15s ease; }
.cs-list.cs-above { top: auto; bottom: 100%; margin-top: 0; margin-bottom: 4px; }
.cs-item {
  padding: 0.55rem 0.9rem; cursor: pointer; font-size: 0.88rem;
  color: rgba(255,255,255,0.8); transition: background 0.12s, color 0.12s;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cs-item:last-child { border-bottom: none; }
.cs-item:hover { background: rgba(0,212,255,0.1); color: #fff; }
.cs-item.selected { color: #00d4ff; background: rgba(0,212,255,0.08); font-weight: 500; }
.cs-item.disabled { color: rgba(255,255,255,0.25); cursor: default; }
.cs-item.disabled:hover { background: none; }
@keyframes csFadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }

/* ── Custom Select: Scrollbar ── */
.cs-list::-webkit-scrollbar { width: 6px; }
.cs-list::-webkit-scrollbar-track { background: transparent; }
.cs-list::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.25); border-radius: 3px; }

/* ── Custom Select: Mobile ── */
@media (max-width: 768px) {
  .cs-trigger { min-height: 2.75rem; padding: 0.6rem 0.8rem; font-size: 16px !important; }
  .cs-item { padding: 0.7rem 0.9rem; font-size: 16px !important; }
  .cs-list { max-height: 50vh; }
}



textarea.form-control { resize: vertical; min-height: 80px; }

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  cursor: pointer;
  max-height: 3rem;
  color: rgba(255,255,255,0.75);
  background: transparent;
  border: none;
  padding: 0;
  margin-bottom: 0 !important;
  transition: color 0.15s;
  user-select: none;
  white-space: nowrap;
}
.checkbox-label:hover { color: rgba(255,255,255,0.9); }
.checkbox-label input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  cursor: pointer;
  max-height: 3rem;
  position: relative;
  flex-shrink: 0;
  transition: all 0.15s;
}
.checkbox-label input[type="checkbox"]:hover {
  border-color: rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.12);
}
.checkbox-label input[type="checkbox"]:checked {
  background: rgba(255,255,255,0.1);
  border-color: rgba(0,212,255,0.5);
}
.checkbox-label input[type="checkbox"]:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 13px;
  color: #00d4ff;
  font-weight: 700;
}

/* ── Segmented Buttons ─────────────────────────────────────────────── */
.segmented {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 0.35rem;
}
.segmented::-webkit-scrollbar { display: none; }
/* ── Segmented: ensure scrollable within parent ── */
.form-group .segmented,
.modal-content .segmented {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.form-group .segmented::-webkit-scrollbar,
.modal-content .segmented::-webkit-scrollbar { display: none; }
.segmented button {
  padding: 0.4rem 0.85rem;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.6);
  font-size: 0.82rem;
  cursor: pointer;
  max-height: 3rem;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}
.segmented button:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); }
.segmented button.active {
  background-image: linear-gradient(#0c1525, #0c1525), linear-gradient(135deg, #00d4ff, #7b2ff7);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  border: 2px solid transparent;
  color: #fff;
  font-weight: 600;
}

/* ── Tab Pills (navigation tabs: period, view, sport category) ───── */
.tab-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.tab-pills button {
  padding: 0.5rem 1.1rem;
  background: rgba(255,255,255,0.06);
  border: none;
  border-radius: 20px;
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  white-space: nowrap;
}
.tab-pills button:hover {
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
}
.tab-pills button.active {
  background: rgba(255,255,255,0.88);
  color: #0c1525;
  font-weight: 600;
}

/* ── Stat Cards ────────────────────────────────────────────────────── */
.stat-card { text-align: center; padding: 1.25rem; }
.stat-card .stat-value {
  font-size: 1.7rem;
  font-weight: 700;
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-card .stat-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin-top: 0.2rem;
}

/* ── Tabs ──────────────────────────────────────────────────────────── */
.tab-nav {
  display: flex;
  gap: 0.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.tab-btn {
  padding: 0.55rem 1.2rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 0.88rem;
  font-family: inherit;
  cursor: pointer;
  max-height: 3rem;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.tab-btn:hover { color: rgba(255,255,255,0.75); }
.tab-btn.active { color: #00d4ff; border-bottom-color: #00d4ff; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ── Timeline / Feed ───────────────────────────────────────────────── */
.timeline { }
.timeline-date {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1.25rem 0 0.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  margin-bottom: 0.75rem;
}
.timeline-date:first-child { padding-top: 0; }

.timeline-card {
  position: relative;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 0.75rem 1.25rem;
  margin-bottom: 0.6rem;
  transition: all 0.2s ease;
  cursor: pointer;
  overflow: hidden;
}
.timeline-card:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  margin-bottom: 0.65rem;
}
.card-header .card-type-badge {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.card-sport-icon { font-size: 1.4rem; }
.card-type {
  font-weight: 700;
  font-size: 0.95rem;
}
.card-meta {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-surface {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 5px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.55);
}
.card-time-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
}
.card-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.card-stat {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
}
.card-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: #fff;
}
.card-stat-value.pace {
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.card-stat-label {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.card-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.card-detail.open {
  max-height: 1200px;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.card-actions {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.65rem;
}
.card-feedback {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  margin-top: 0.5rem;
  background: rgba(123,47,247,0.08);
  border-left: 3px solid #7b2ff7;
  border-radius: 0.5rem;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.8rem;
}

/* ── Filter Bar ────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-bottom: 1.25rem;
}
.filter-bar .form-control { width: auto; min-width: 130px; }
.filter-bar input[type="text"] { min-width: 200px; }

.sort-btns { display: flex; gap: 0.25rem; align-items: center; }
.sort-btn {
  padding: 0.3rem 0.7rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  color: rgba(255,255,255,0.5);
  font-size: 0.78rem;
  cursor: pointer;
  max-height: 3rem;
  font-family: inherit;
  transition: all 0.15s;
}
.sort-btn:hover { border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.7); }
.sort-btn.active { color: #00d4ff; border-color: rgba(0,212,255,0.3); background: rgba(0,212,255,0.06); }
.sort-btn .sort-arrow { font-size: 0.65rem; margin-left: 0.2rem; }

/* ── Grids ─────────────────────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }

/* ── Progress Bars ─────────────────────────────────────────────────── */
.progress-bar-bg {
  width: 100%; height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #00d4ff, #7b2ff7);
  transition: width 0.4s;
}

/* ── Charts ────────────────────────────────────────────────────────── */
.chart-container { position: relative; height: 300px; margin-bottom: 1.5rem; }

/* ── Star Rating & Feedback ────────────────────────────────────────── */
.star-rating { display: inline-flex; gap: 0.15rem; font-size: 1.2rem; cursor: pointer;
  max-height: 3rem; }
.star-rating .star { color: rgba(255,255,255,0.15); transition: color 0.15s; }
.star-rating .star.filled { color: #ffc107; }
.star-rating .star:hover { color: #ffc107; }
.feedback-indicator { color: #ffc107; font-size: 0.78rem; }

/* ── Tables (kept for trainer/plan views) ──────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td {
  padding: 0.6rem 0.7rem;
  text-align: left;
  font-size: 0.83rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.data-table th {
  color: rgba(255,255,255,0.4);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.data-table tr:hover { background: rgba(255,255,255,0.03); }

/* ── Copy Field ────────────────────────────────────────────────────── */
.copy-field { display: flex; gap: 0.5rem; }
.copy-field input { flex: 1; }

/* ── Collapsible ───────────────────────────────────────────────────── */
.collapsible { display: none; }
.collapsible.open { display: block; }

/* ── Utilities ─────────────────────────────────────────────────────── */
.text-muted { color: rgba(255,255,255,0.45); }
.text-sm { font-size: 0.83rem; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }

/* ── Auth Pages (no sidebar) ───────────────────────────────────────── */
.auth-page {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding: 5rem 2rem 2rem;
}
.auth-card {
  width: 100%;
  max-width: 420px;
}
.auth-brand {
  text-align: center;
  margin-bottom: 2rem;
}
.auth-brand h1 {
  font-size: 2rem;
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.auth-subtitle {
  margin-top: 0.5rem;
  font-size: 0.95rem;
  color: rgba(255,255,255,0.5);
}
.auth-page ~ .site-footer .site-footer-inner {
  max-width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ── Landing Page ──────────────────────────────────────────────────── */
.landing-hero {
  text-align: center;
  padding: 6rem 1rem 4rem;
}
.landing-hero h1 {
  font-size: 3rem;
  font-weight: 800;
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}
.landing-hero p {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 2.5rem;
}

/* ── Footer ────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: auto;
  padding: 0 0 1.5rem;
}
.site-footer-inner {
  max-width: 1100px;
  margin: 0;
  padding: 0.9rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.4);
  font-size: 0.8rem;
}
.site-footer-brand {
  color: rgba(255,255,255,0.2);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.site-footer-nav {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.site-footer-nav a {
  color: rgba(255,255,255,0.28);
}
.site-footer-nav a:hover {
  color: #00d4ff;
  opacity: 1;
}

/* ── Legal Pages ───────────────────────────────────────────────────── */
.legal-page {
  max-width: 900px;
}
.legal-header {
  margin-bottom: 1.5rem;
}
.legal-eyebrow {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
.legal-header h1 {
  font-size: 2.15rem;
  margin-bottom: 0.5rem;
}
.legal-card {
  margin-bottom: 1rem;
}
.legal-card h2 {
  font-size: 1rem;
  margin-bottom: 0.75rem;
}
.legal-card p + p {
  margin-top: 0.35rem;
}
.legal-note {
  background: rgba(0,212,255,0.05);
  border-color: rgba(0,212,255,0.14);
  color: rgba(255,255,255,0.82);
}
.legal-list {
  list-style: disc;
  padding-left: 1.1rem;
  color: rgba(255,255,255,0.72);
}
.legal-list li + li {
  margin-top: 0.35rem;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    transform: translateX(-100%);
    width: 260px;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar.collapsed { width: 260px; }
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-section-label,
  .sidebar.collapsed .nav-badge,
  .sidebar.collapsed .sidebar-brand-text,
  .sidebar.collapsed .user-info { display: flex; }
  .sidebar.collapsed .sidebar-header { justify-content: space-between; }
  .sidebar.collapsed .nav-item { justify-content: flex-start; padding-left: 1.25rem; padding-right: 1.25rem; }
  .sidebar.collapsed .user-profile { justify-content: flex-start; }

  .mobile-header { display: flex; }
  .main-content { margin-left: 0; padding-top: 56px; }
  .sidebar.collapsed ~ .main-content { margin-left: 0; }
  .container { padding: 1.25rem 1rem; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar .form-control { width: 100%; min-width: 0; }
  .card-stats { gap: 1rem; }
  .landing-hero h1 { font-size: 2rem; }
  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (min-width: 769px) {
  .mobile-header { display: none !important; }
  .sidebar-overlay { display: none !important; }
}

/* ===== PROMINENT ACTIVITY TABS ===== */
.activity-tabs {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, rgba(123,47,247,0.06) 0%, rgba(224,64,251,0.04) 100%) !important;
  border: 1px solid rgba(255,255,255,0.06);
  border-color: rgba(123,47,247,0.12) !important;
  border-radius: 1.25rem;
  padding: 0.5rem;
}
.activity-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.85rem 0.75rem !important;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 1rem;
  cursor: pointer;
  max-height: 3rem;
  transition: all 0.25s ease;
  color: rgba(255,255,255,0.45);
  font-family: inherit;
}
.activity-tab:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.7);
}
.activity-tab.active {
  background: rgba(0,212,255,0.06);
  border-color: rgba(0,212,255,0.35);
  color: #fff;
  box-shadow: 0 0 15px rgba(0,212,255,0.06), inset 0 0 20px rgba(0,212,255,0.03);
}
.activity-tab-icon { font-size: 1.3rem !important; }
.activity-tab-label { font-size: 0.88rem !important; font-weight: 600; letter-spacing: 0.02em; }
.activity-tab-count { font-size: 0.8rem; opacity: 0.55; display: none; }

/* ===== ADD BUTTONS ===== */
.add-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ===== FORM GRID ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.time-inputs { display: flex; align-items: center; gap: 0.3rem; }
.time-inputs span { color: rgba(255,255,255,0.3); font-weight: 600; }

/* ===== WHEEL PICKER (iOS-style) ===== */
.wheel-compact {
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.8rem;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  max-height: 3rem;
  transition: border-color 0.2s, background 0.15s, opacity 0.2s, max-height 0.25s, padding 0.25s;
}
.wheel-compact:hover {
  border-color: rgba(0,212,255,0.35);
  background: rgba(0,212,255,0.06);
}
.wheel-compact.hidden { display: none; }
.wheel-compact { transition: opacity 0.15s ease; }
.wheel-picker-wrap {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.25s ease;
}
.wheel-picker-wrap.open {
  max-height: 220px;
  opacity: 1;
}
.wheel-picker {
  display: inline-flex;
  align-items: flex-start;
  gap: 0;
  user-select: none;
  -webkit-user-select: none;
  background: rgba(0,0,0,0.25);
  border-radius: 1rem;
  padding: 0 0.25rem;
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.wheel-sep {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255,255,255,0.25);
  height: 96px;
  display: flex;
  align-items: center;
  padding: 0 0.1rem;
}
.wheel-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wheel-viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  min-width: 2.5rem; width: auto; padding: 0 0.4rem;
}
.wheel-viewport:active { cursor: grabbing; }
.wheel-highlight-band {
  position: absolute;
  left: 4px; right: 4px;
  background: rgba(0,212,255,0.1);
  border-top: 1.5px solid rgba(0,212,255,0.25);
  border-bottom: 1.5px solid rgba(0,212,255,0.25);
  border-radius: 0.5rem;
  z-index: 1;
  pointer-events: none;
}
.wheel-list {
  position: relative;
  z-index: 2;
  will-change: transform;
}
.wheel-item {
  text-align: center;
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  transition: opacity 0.05s, transform 0.05s;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.wheel-item.wheel-pad {
  visibility: hidden;
}
.wheel-fade {
  position: absolute;
  left: 0; right: 0;
  height: 40%;
  z-index: 3;
  pointer-events: none;
}
.wheel-fade-top {
  top: 0;
  background: linear-gradient(to bottom, rgba(10,10,20,0.85) 0%, transparent 100%);
}
.wheel-fade-bot {
  bottom: 0;
  background: linear-gradient(to top, rgba(10,10,20,0.85) 0%, transparent 100%);
}
.wheel-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  border: none;
  background: rgba(0,212,255,0.15);
  color: #00d4ff;
  cursor: pointer;
  max-height: 3rem;
  transition: background 0.15s;
  flex-shrink: 0;
  margin-top: 1.8rem;
}
.wheel-confirm:hover { background: rgba(0,212,255,0.25); }
.wheel-confirm .icon { width: 1.1rem; height: 1.1rem; }

/* ===== CHIP GROUP (for forms) ===== */
.chip-group { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 2rem;
  font-size: 0.9rem;
  cursor: pointer;
  max-height: 3rem;
  transition: all 0.2s;
  color: rgba(255,255,255,0.6);
}
.chip:has(input:checked) {
  background: rgba(0,212,255,0.15);
  border-color: rgba(0,212,255,0.4);
  color: #fff;
}
.chip input { display: none; }

/* ===== CARD TYPE BADGES ===== */
.card-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border-radius: 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.timeline.filter-active .card-type-badge {
  display: none;
}
.run-badge {
  background: rgba(0,212,255,0.12);
  color: #00d4ff;
  border: 1px solid rgba(0,212,255,0.25);
}
.training-badge {
  background: rgba(123,47,247,0.12);
  color: #b07aff;
  border: 1px solid rgba(123,47,247,0.25);
}
.plan-badge {
  background: rgba(76,175,80,0.12);
  color: #81c784;
  border: 1px solid rgba(76,175,80,0.25);
}
.competition-badge {
  background: rgba(255,193,7,0.12);
  color: #ffd54f;
  border: 1px solid rgba(255,193,7,0.25);
}
.swimming-badge { background: rgba(52, 152, 219, 0.15); color: #3498db; }
.cycling-badge { background: rgba(230, 126, 34, 0.15); color: #e67e22; }
.hiking-badge { background: rgba(139, 105, 20, 0.15); color: #c9a83c; }
.strength-badge { background: rgba(155, 89, 182, 0.15); color: #9b59b6; }
.yoga-badge { background: rgba(26, 188, 156, 0.15); color: #1abc9c; }
.absence-badge { background: rgba(149, 165, 166, 0.15); color: #95a5a6; }
.timeline-card-absence { }
.timeline-card-absence .card-type-label,
.timeline-card-absence .card-left-meta > span:first-child,
.timeline-card-absence .card-right,
.timeline-card-absence .card-divider { opacity: 0.7; }
.timeline-card-absence .card-left-icons .icon-inactive { opacity: 1; }

/* ===== TAGS ===== */
.card-tags { display: flex; gap: 0.4rem; align-items: center; flex-wrap: nowrap; flex: 1; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.card-tags::-webkit-scrollbar { display: none; }
.tag {
  white-space: nowrap;
  flex-shrink: 0;
  padding: 0.15rem 0.55rem;
  background: rgba(255,255,255,0.08);
  border-radius: 0.4rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: rgba(255,255,255,0.75);
}
.tag-muted { opacity: 0.6; }

/* ===== CARD STATS ===== */
.card-stat strong {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
}

/* ===== CARD CHIPS DISPLAY ===== */
.card-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.chip-display {
  padding: 0.15rem 0.5rem;
  background: rgba(123,47,247,0.1);
  border: 1px solid rgba(123,47,247,0.2);
  border-radius: 1rem;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
}

/* ===== TIMELINE CARD ENHANCEMENTS ===== */
.timeline-card.planned {
  border-style: dashed;
  border-color: rgba(0,212,255,0.25);
  background: rgba(0,212,255,0.02);
  opacity: 0.75;
  position: relative;
}
.timeline-card.planned:hover {
  opacity: 0.9;
  border-color: rgba(0,212,255,0.4);
}
.timeline-card.planned::after {
  content: 'Geplant';
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(0,212,255,0.12);
  color: rgba(0,212,255,0.8);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.timeline-card.completed-assigned {
  position: relative;
  border-color: rgba(78,205,196,0.25);
  background: rgba(78,205,196,0.03);
}
.timeline-card.completed-assigned::after {
  content: '\2713 Abgeschlossen';
  position: absolute;
  top: 0.35rem;
  right: 0.5rem;
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(78,205,196,0.12);
  color: rgba(78,205,196,0.8);
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.soll-ist-table {
  margin: 0.75rem 0;
  width: 100%;
}
.soll-ist-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.soll-ist-table th {
  text-align: left;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.4);
  padding: 0 0.5rem 0.3rem;
  font-weight: 500;
}
.soll-ist-table td {
  padding: 0.25rem 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.si-label { color: rgba(255,255,255,0.5); font-weight: 500; }
.si-soll { color: rgba(0,212,255,0.7); }
.si-ist { color: rgba(255,255,255,0.9); font-weight: 600; }
.soll-ist-match .si-ist { color: rgba(78,205,196,0.9); }
.soll-ist-diff .si-ist { color: rgba(255,190,60,0.9); }
.timeline-card.expanded {
  max-height: none;
  border-color: rgba(0,212,255,0.3);
  background: rgba(0,212,255,0.03);
}

/* ===== RESPONSIVE TABS ===== */
@media (max-width: 768px) {
  .activity-tabs { gap: 0.5rem; }
  .activity-tab { padding: 0.85rem 0.5rem; }
  .activity-tab-icon { font-size: 1.3rem; }
  .activity-tab-label { font-size: 0.85rem; }
  .form-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== ADD BUTTON (prominent, centered) ===== */
.add-button-container {
  display: flex;
  justify-content: center;
}
.btn-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 2.5rem;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 0.75rem;
  border: none;
  cursor: pointer;
  max-height: 3rem;
  transition: all 0.25s ease;
  letter-spacing: 0.02em;
}
.btn-add-run {
  background: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0,212,255,0.25);
}
.btn-add-run:hover {
  box-shadow: 0 6px 25px rgba(0,212,255,0.35);
  transform: translateY(-1px);
}
.btn-add-training {
  background: linear-gradient(135deg, #00d4ff 0%, #7b2ff7 100%);
  color: #fff;
  box-shadow: 0 4px 15px rgba(0,212,255,0.25);
}
.btn-add-training:hover {
  box-shadow: 0 6px 25px rgba(0,212,255,0.35);
  transform: translateY(-1px);
}

/* ===== CENTERED STATS GRID ===== */
.stats-grid-centered {
  /* full width */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .stats-grid-centered {
  /* full width */ grid-template-columns: repeat(2, 1fr); max-width: 100%; }
}

/* ===== INLINE EDIT FORM IN CARD ===== */
.timeline-card.editing {
  border-color: rgba(0,212,255,0.4);
  background: rgba(0,212,255,0.04);
  box-shadow: 0 0 25px rgba(0,212,255,0.08);
}
.card-edit-form {
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  margin-top: 0.5rem;
}
.card-edit-form .form-group { margin-bottom: 0.6rem; }
.card-edit-form label {
  display: block;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.25rem;
}
.card-edit-form .form-control {
  padding: 0.45rem 0.65rem;
  font-size: 0.88rem;
}
.seg-btn {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  font-size: 0.78rem;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 0.4rem;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  max-height: 3rem;
  transition: all 0.15s;
  font-family: inherit;
  margin: 0.15rem;
}
.seg-btn:hover { background: rgba(255,255,255,0.1); }
.seg-btn.active {
  background: rgba(0,212,255,0.15);
  border-color: rgba(0,212,255,0.4);
  color: #fff;
}
.card-detail-summary { /* container for summary + actions before edit */ }

/* ===== UNIFIED DETAIL LAYOUT ===== */
.detail-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 1rem;
  margin-bottom: 0.5rem;
}
.detail-grid .detail-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
}
.detail-grid .detail-value {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
  font-weight: 500;
}
.detail-section {
  margin-bottom: 0.5rem;
}
.detail-section-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.1rem;
  margin-top: 0.4rem;
}
.detail-section-title:first-child {
  margin-top: 0;
}
.detail-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 0.5rem;
}
.detail-table th {
  text-align: left;
  padding: 0.3rem 0.5rem;
  font-weight: 600;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.detail-table td {
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.detail-note {
  font-size: 0.9rem;
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0.35rem 0 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  line-height: 1.3;
}
.detail-note .note-icon {
  width: 0.95em;
  height: 0.95em;
  flex-shrink: 0;
  align-self: center;
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  -webkit-mask-image: url('/static/images/message-circle.svg');
  mask-image: url('/static/images/message-circle.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.detail-soll-ist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: rgba(255,255,255,0.03);
  border-radius: 0.5rem;
  border: 1px solid rgba(255,255,255,0.06);
}
.detail-soll-ist .soll-col,
.detail-soll-ist .ist-col {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.detail-soll-ist .col-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}
.detail-soll-ist .soll-col .col-title { color: rgba(123,47,247,0.7); }
.detail-soll-ist .ist-col .col-title { color: rgba(0,212,255,0.7); }
.detail-soll-ist .col-row {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.65);
}

/* spacer to prevent layout jump between tabs */
.add-button-spacer, .add-button-container { min-height: 3.5rem; display: flex; align-items: center; justify-content: center; }

/* period filter buttons - larger */
.period-btn { padding: 0.5rem 1.1rem !important; font-size: 0.92rem !important; border-radius: 0.5rem; }

/* ===== ACTION BAR (counts + add button) ===== */
.action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
}
.action-bar-center { flex: 1; display: flex; justify-content: center; }
.count-label {
  font-size: 1.2rem !important;
  color: rgba(255,255,255,0.4);
  white-space: nowrap;
  min-width: 6rem;
  font-weight: 600;
  background: linear-gradient(135deg, rgba(0,212,255,0.85), rgba(123,47,247,0.85));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.count-label:last-child { text-align: right; }
.count-label span {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: rgba(255,255,255,0.65);
  background: linear-gradient(135deg, rgba(0,212,255,1.0), rgba(123,47,247,1.0));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}


/* ===== MODAL OVERLAY ===== */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.modal-content {
  background: var(--card-bg, #1a1a2e);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 1.25rem 1.25rem 0 0;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.5rem;
  cursor: pointer;
  max-height: 3rem;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  z-index: 1;
  transition: color 0.15s;
}
.modal-close:hover { color: #fff; }
.modal-overlay.open .modal-content {
  transform: translateY(0);
}
@media (min-width: 768px) {
  .modal-overlay {
    align-items: flex-start; padding-top: 5vh;
  }
  .modal-content {
    border-radius: 1.25rem;
    max-height: 85vh;
  }
}

/* ===== TWO-COLUMN STATS LAYOUT ===== */
.stats-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 768px) {
  .stats-two-col {
    grid-template-columns: 1fr;
  }
}
.stats-col {
  min-width: 0;
}
.stats-col-header {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  padding-left: 0.25rem;
  background: linear-gradient(90deg, #00d4ff, #7b2ff7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.stats-grid-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.stats-grid-inner .stat-card {
  padding: 1rem;
}
.stats-grid-inner .stat-value {
  font-size: 1.3rem;
}
.stats-grid-inner .stat-label {
  font-size: 0.7rem;
}

/* ===== NOTIFICATIONS ===== */
.notif-card {
  margin-bottom: 0.5rem;
  cursor: pointer;
  padding: 1rem 1.25rem;
  transition: background 0.2s, transform 0.15s;
}
.notif-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateX(2px);
}
.notif-unread {
  border-left: 3px solid #7b2ff7;
}
.notif-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.notif-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
}
.notif-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.notif-message {
  font-size: 0.95rem;
  line-height: 1.3;
}
.notif-time {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
}
.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #7b2ff7;
  flex-shrink: 0;
}

/* ===== DIARY / TRAININGSTAGEBUCH ===== */
.diary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.diary-header-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.filter-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border-radius: 8px;
  border: none;
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.filter-toggle-btn .icon { width:14px; height:14px; background-color:#fff; }
.filter-toggle-btn:hover { opacity:0.85; }
.filter-toggle-btn.disabled { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.25); cursor: default; pointer-events: none; }
.filter-toggle-btn.disabled .icon { background-color: rgba(255,255,255,0.25); }
.filter-toggle-btn.active { box-shadow: 0 0 0 2px rgba(123,47,247,0.4); }
.filter-active-icons {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.filter-active-icons .icon { width:16px; height:16px; }
.diary-filter-chips {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.filter-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.6);
  font-size: 0.8rem;
  cursor: pointer;
  max-height: 3rem;
  transition: all 0.15s;
}
.filter-chip:hover { background: rgba(255,255,255,0.08); color: #fff; }
.filter-chip::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: transparent;
  transition: background 0.15s;
  flex-shrink: 0;
}
.filter-chip.active {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}
.filter-chip.active::before {
  background: #4ecdc4;
}
/* Plan entry type chips – horizontal scroll, gradient fill */
.plan-entry-chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
  flex-wrap: nowrap;
}
.plan-entry-chips::-webkit-scrollbar { display: none; }
.plan-entry-chips .filter-chip {
  flex-shrink: 0;
  white-space: nowrap;
  background: linear-gradient(135deg, #7b2ff7, #00d4ff);
  color: #fff;
  border: none;
  font-weight: 500;
}
.plan-entry-chips .filter-chip::before { display: none; }
.plan-entry-chips .filter-chip:hover {
  background: linear-gradient(135deg, #8b3ff7, #10e4ff);
  color: #fff;
}
.plan-entry-chips .filter-chip .icon { background-color: #fff; }

.diary-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.diary-nav-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.7);
  width: 36px;
  height: 36px;
  border-radius: 8px;
  cursor: pointer;
  max-height: 3rem;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.diary-nav-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.diary-nav-label {
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  max-height: 3rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  transition: background 0.15s;
  white-space: nowrap;
}
.diary-nav-label:hover { background: rgba(255,255,255,0.06); }

.diary-day {
  padding: 0.25rem 0;
  border-left: 3px solid transparent;
  margin-bottom: 0.25rem;
  border-radius: 0 8px 8px 0;
  transition: background 0.15s;
}
.diary-day-today {
  border-left-color: #00d4ff;
  background: rgba(0,212,255,0.04);
}
.diary-day-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
  padding-left: 0.75rem;
}
.diary-day-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}
.diary-day-date {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
}
.diary-day-empty {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.2);
  font-style: italic;
  padding-left: 0.75rem;
}
.diary-day-entries {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Summary cards for month/year views */
.summary-card {
  margin-bottom: 0.6rem;
}
.summary-card .card-body {
  display: flex;
  align-items: stretch;
  min-height: 4.2rem;
}
.summary-card-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 150px;
  flex-shrink: 0;
  gap: 0.15rem;
}
.summary-card-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
}
.summary-card-range {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.35);
}
.summary-card-stats {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  margin-top: 0.1rem;
}
.summary-card-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 0.75rem;
}
.summary-card-empty { opacity: 0.45; }

/* Sport icon row */
.sport-icon-row {
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.sport-icon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  opacity: 0.18;
  transition: opacity 0.15s;
}
.sport-icon-cell.active { opacity: 1; }
.sport-icon-cell .icon {
  width: 32px;
  height: 32px;
}
.sport-icon-count {
  font-size: 0.88rem;
  font-weight: 700;
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.sport-icon-cell:not(.active) .sport-icon-count {
  background: none;
  -webkit-text-fill-color: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.12);
}

.diary-entry {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none;
  color: rgba(255,255,255,0.85);
  font-size: 0.85rem;
  transition: all 0.15s;
  cursor: pointer;
  max-height: 3rem;
  width: fit-content;
}
.diary-entry:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
.diary-entry-run .diary-entry-icon { color: #00d4ff; }
.diary-entry-training .diary-entry-icon { color: #7b2ff7; }
.diary-entry-icon { display: flex; align-items: center; }
.diary-entry-icon .icon { width: 16px; height: 16px; }
.diary-entry-label { font-weight: 600; font-size: 0.82rem; }
.diary-entry-info { font-size: 0.78rem; color: rgba(255,255,255,0.45); }

.diary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.diary-grid-months {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.diary-card {
  cursor: pointer;
  padding: 1.1rem;
  transition: all 0.15s;
}
.diary-card:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.diary-card-empty { opacity: 0.5; }
.diary-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  margin-bottom: 0.2rem;
}
.diary-card-range {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.35);
  margin-bottom: 0.5rem;
}
.diary-card-summary {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
}

@media (max-width: 768px) {
  .diary-header { flex-direction: column; align-items: stretch; }
  .diary-nav { justify-content: center; }
  .diary-view-switch { justify-content: center; }
  .diary-grid { grid-template-columns: 1fr 1fr; }
}

/* ===== FEEDBACK ON CARDS ===== */
.feedback-badge,
.feedback-badge-placeholder {
  width: 1.5rem;
  text-align: right;
  font-size: 1rem;
  flex-shrink: 0;
}
.feedback-badge-placeholder {
  visibility: hidden;
}
.feedback-item {
  margin-bottom: 0.5rem;
}
.feedback-item:last-child {
  margin-bottom: 0;
}
.feedback-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.2rem;
}
.feedback-trainer {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
}
.feedback-rating {
  font-size: 0.85rem;
  color: #fbbf24;
}
.feedback-comment {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  margin: 0.2rem 0 0 0;
  line-height: 1.3;
}

/* ── Icon System ── */
.icon {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.15em;
  background-color: currentColor;
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  flex-shrink: 0;
}
.icon-menu { -webkit-mask-image: url('/static/images/menu.svg'); mask-image: url('/static/images/menu.svg'); }
.icon-run { -webkit-mask-image: url('/static/images/run.svg'); mask-image: url('/static/images/run.svg'); }
.icon-swim { -webkit-mask-image: url('/static/images/swim.svg'); mask-image: url('/static/images/swim.svg'); }
.icon-bike { -webkit-mask-image: url('/static/images/bike.svg'); mask-image: url('/static/images/bike.svg'); }
.icon-clipboard { -webkit-mask-image: url('/static/images/clipboard.svg'); mask-image: url('/static/images/clipboard.svg'); }
.icon-chart { -webkit-mask-image: url('/static/images/chart.svg'); mask-image: url('/static/images/chart.svg'); }
.icon-users { -webkit-mask-image: url('/static/images/users.svg'); mask-image: url('/static/images/users.svg'); }
.icon-bell { -webkit-mask-image: url('/static/images/bell.svg'); mask-image: url('/static/images/bell.svg'); }
.icon-handshake { -webkit-mask-image: url('/static/images/handshake.svg'); mask-image: url('/static/images/handshake.svg'); }
.icon-target { -webkit-mask-image: url('/static/images/target.svg'); mask-image: url('/static/images/target.svg'); }
.icon-training { -webkit-mask-image: url('/static/images/training.svg'); mask-image: url('/static/images/training.svg'); }
.icon-inbox { -webkit-mask-image: url('/static/images/inbox.svg'); mask-image: url('/static/images/inbox.svg'); }
.icon-message-circle { -webkit-mask-image: url('/static/images/message-circle.svg'); mask-image: url('/static/images/message-circle.svg'); }
.icon-edit { -webkit-mask-image: url('/static/images/edit.svg'); mask-image: url('/static/images/edit.svg'); }
.icon-trash { -webkit-mask-image: url('/static/images/trash.svg'); mask-image: url('/static/images/trash.svg'); }
.icon-save { -webkit-mask-image: url('/static/images/save.svg'); mask-image: url('/static/images/save.svg'); }
.icon-sparkle { -webkit-mask-image: url('/static/images/sparkle.svg'); mask-image: url('/static/images/sparkle.svg'); }
.icon-user { -webkit-mask-image: url('/static/images/user.svg'); mask-image: url('/static/images/user.svg'); }
.icon-calendar { -webkit-mask-image: url('/static/images/calendar.svg'); mask-image: url('/static/images/calendar.svg'); }
.icon-star-outline { -webkit-mask-image: url('/static/images/star-outline.svg'); mask-image: url('/static/images/star-outline.svg'); }
.icon-file-text { -webkit-mask-image: url('/static/images/file-text.svg'); mask-image: url('/static/images/file-text.svg'); }
.icon-star-active { -webkit-mask-image: url('/static/images/star-active.svg'); mask-image: url('/static/images/star-active.svg'); }
.icon-moon { -webkit-mask-image: url('/static/images/moon.svg'); mask-image: url('/static/images/moon.svg'); }
.icon-pin { -webkit-mask-image: url('/static/images/pin.svg'); mask-image: url('/static/images/pin.svg'); }
.icon-check { -webkit-mask-image: url('/static/images/check.svg'); mask-image: url('/static/images/check.svg'); }
.icon-trophy { -webkit-mask-image: url('/static/images/trophy.svg'); mask-image: url('/static/images/trophy.svg'); }
.icon-close { -webkit-mask-image: url('/static/images/close.svg'); mask-image: url('/static/images/close.svg'); }
.icon-filter { -webkit-mask-image: url('/static/images/filter.svg'); mask-image: url('/static/images/filter.svg'); }
.icon-stretch { -webkit-mask-image: url('/static/images/stretch.svg'); mask-image: url('/static/images/stretch.svg'); }
.icon-zap { -webkit-mask-image: url('/static/images/zap.svg'); mask-image: url('/static/images/zap.svg'); }
.icon-mountain { -webkit-mask-image: url('/static/images/mountain.svg'); mask-image: url('/static/images/mountain.svg'); }
.icon-plus { -webkit-mask-image: url("/static/images/plus.svg"); mask-image: url("/static/images/plus.svg"); }

/* Dropdown category icons */
.cat-icon { width: 14px; height: 14px; flex-shrink: 0; }
.cat-icon.icon-run { background-color: #4ecdc4; }
.cat-icon.icon-zap { background-color: #ff6b6b; }
.cat-icon.icon-trophy { background-color: #ffd93d; }
.cat-icon.icon-swim { background-color: #3498db; }
.cat-icon.icon-bike { background-color: #e67e22; }
.cat-icon.icon-mountain { background-color: #8b6914; }
.cat-icon.icon-training { background-color: #9b59b6; }
.cat-icon.icon-stretch { background-color: #1abc9c; }
.cat-icon.icon-moon { background-color: #95a5a6; }

/* === Unified card layout === */
.card-body { display:flex; align-items:stretch; }
.card-left { display:flex; flex-direction:column; justify-content:center; width:auto; padding-right:0; flex-shrink:0; }
.card-type-label { font-weight:700; font-size:0.8rem; letter-spacing:0.03em; display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
#plans-grid .card-type-label,
#assigned-items-list .card-type-label { white-space:normal; word-break:break-word; }
#plans-grid .card-left-meta,
#assigned-items-list .card-left-meta { white-space:normal; word-break:break-word; }
.card-left-meta { display:flex; align-items:center; gap:0.4rem; margin-top:0.3rem; font-size:0.8rem; color:rgba(255,255,255,0.5); white-space:nowrap; }
.card-left-meta > span:first-child { display:inline-block; width:3.2em; }
.card-left-icons { display:inline-flex; gap:0.25rem; }
.card-left-icons .icon { width:14px; height:14px; }
.card-left-icons .icon-file-text { background-color:#8e8e93; }
.card-left-icons .icon-message-circle { background-color:#f39c12; }
.card-left-icons .icon-inactive { background-color:rgba(255,255,255,0.07) !important; }
.card-divider { width:1px; background:rgba(255,255,255,0.12); align-self:stretch; flex-shrink:0; margin:0.5rem 0.6rem; }
.card-right { flex:1; padding-left:0.75rem; display:flex; flex-direction:column; justify-content:center; }
.card-tags { min-height:1.3em; display:flex; align-items:center; gap:0.4rem; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; margin-bottom:0.15rem; }
.card-tags::-webkit-scrollbar { display: none; }
.card-stats { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; }
.label-run { color:#4ecdc4; }
.label-training { color:#ff6b6b; }
.label-competition { color:#ffd93d; }
.label-swimming { color:#3498db; }
.label-cycling { color:#e67e22; }
.label-hiking { color:#8b6914; }
.label-strength { color:#9b59b6; }
.label-yoga { color:#1abc9c; }
.label-absence { color:#95a5a6; }

/* Plan entry cards - match timeline-card style */
#entries-container .glass-card {
  padding: 0.75rem 1.25rem;
  border-radius: 12px;
}

/* Dim other elements when picker is active */
.picker-active .form-group:not(.picker-source),
.picker-active > h3,
.picker-active > .flex,
.picker-active > .segmented {
  opacity: 0.25;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.picker-active .form-group.picker-source {
  opacity: 1;
  pointer-events: auto;
}

/* Form title: icon + colored name + white action */
.form-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.15rem;
  font-weight: 600;
}
.form-title .cat-icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
}
.form-title-action {
  color: rgba(255,255,255,0.85);
  font-weight: 400;
}

/* ── Profile Page ──────────────────────────────────────────────────── */
.profile-avatar {
  width: 84px; height: 84px; border-radius: 50%;
  background: linear-gradient(135deg, #00d4ff, #7b2ff7);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 700; color: #fff;
  margin: 0 auto 0.75rem;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 20px rgba(0,212,255,0.2);
  position: relative; overflow: hidden; cursor: pointer;
}
.profile-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}
.profile-avatar-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s;
}
.profile-avatar-overlay .icon { background-color: #fff; }
.profile-avatar:hover .profile-avatar-overlay { opacity: 1; }
.profile-header { text-align: center; margin-bottom: 1.5rem; }
.profile-header-name { font-size: 1.15rem; font-weight: 600; color: #fff; margin-bottom: 0.2rem; }
.profile-meta {
  font-size: 0.8rem; color: rgba(255,255,255,0.35); margin-top: 0.3rem;
  display: flex; align-items: center; justify-content: center; gap: 0.35rem;
}
.profile-section-title {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.3); margin-bottom: 0.85rem;
}
.profile-fields-row { display: flex; gap: 1rem; }
.profile-fields-row .form-group { flex: 1; min-width: 0; }
.profile-form-label { display: flex; align-items: center; gap: 0.35rem; }
.profile-form-label .icon { width: 13px; height: 13px; opacity: 0.4; }
.profile-logout-btn {
  background: none; border: none; color: rgba(255,255,255,0.4);
  font-size: 0.85rem; font-weight: 500; cursor: pointer;
  padding: 0.4rem 0.8rem; transition: color 0.2s; font-family: inherit;
}
.profile-logout-btn:hover { color: rgba(255,255,255,0.7); }
.profile-danger-title {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,60,60,0.5); margin-bottom: 0.75rem;
}
.profile-delete-actions { display: flex; gap: 0.5rem; }
.user-avatar-img {
  width: 32px; height: 32px; object-fit: cover; border-radius: 50%; flex-shrink: 0;
}
@media (max-width: 500px) {
  .profile-fields-row { flex-direction: column; gap: 0; }
}

/* ── Connections Page ──────────────────────────────────────────────── */
.conn-section-title {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.3); margin-bottom: 0.75rem;
}
.conn-invite-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.conn-invite-header .icon { width: 18px; height: 18px; background: linear-gradient(135deg, #00d4ff, #7b2ff7); }
.conn-invite-header h3 { margin: 0; font-size: 0.95rem; }
.conn-card {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 1rem 1.25rem; transition: background 0.2s;
}
.conn-card:hover { background: rgba(255,255,255,0.06); }
.conn-avatar {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; font-weight: 700; color: #fff;
}
.conn-avatar-trainer { background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(123,47,247,0.25)); }
.conn-avatar-trainee { background: linear-gradient(135deg, rgba(0,212,255,0.25), rgba(78,205,196,0.25)); }
.conn-info { flex: 1; min-width: 0; }
.conn-name { font-weight: 600; font-size: 0.92rem; color: #fff; }
.conn-role-badge {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.1rem 0.5rem; border-radius: 12px;
  font-size: 0.7rem; font-weight: 600;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.55);
  margin-left: 0.4rem; vertical-align: middle;
}
.conn-role-badge .icon { width: 11px; height: 11px; }
.conn-meta {
  font-size: 0.78rem; color: rgba(255,255,255,0.35); margin-top: 0.15rem;
  display: flex; align-items: center; gap: 0.3rem;
}
.conn-meta .icon { width: 11px; height: 11px; opacity: 0.5; }
.conn-empty { text-align: center; padding: 2.5rem 1rem; }
.conn-empty-icon { width: 40px; height: 40px; margin: 0 auto 0.75rem; opacity: 0.2; }

/* ── Scrollable Athlete Chips ── */
.athlete-scroll-chips {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 -1rem 0.75rem;
  padding: 0 1rem 0.25rem;
  mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 1.5rem), transparent 100%);
}
.athlete-scroll-chips::-webkit-scrollbar { display: none; }
.athlete-scroll-chips .filter-chip { flex-shrink: 0; white-space: nowrap; }

/* ── Pace FAB ── */
.pace-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #ff8c00, #ff5500);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(255, 140, 0, 0.4);
  z-index: 200;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pace-fab:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(255, 140, 0, 0.55);
}
.pace-fab .icon {
  background: #fff;
}

/* ── Pace Modal ── */
.pace-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 310;
  background: rgba(0, 0, 0, 0.75);
  padding: 2rem;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.pace-modal-overlay.open {
  opacity: 1;
  pointer-events: auto;
}
.pace-modal-content {
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 4rem);
  overflow: hidden auto;
  padding: 1.2rem 1.5rem 0;
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}
.pace-modal-overlay.open .pace-modal-content {
  transform: translateY(0) scale(1);
}
.pace-modal-content #pace-modal-body {
  margin: 0 -1.5rem;
}

/* ── Pace Readonly Table ── */
.pace-readonly-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: 0;
}
.pace-readonly-table th {
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.1), rgba(123, 47, 247, 0.1));
  color: #00d4ff;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0;
  padding: 0.7rem 0.8rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pace-readonly-table td {
  font-size: 0.9rem;
  padding: 0.65rem 0.8rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.8);
  background: none;
  font-weight: 400;
}
.pace-readonly-table td:first-child {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}
.pace-readonly-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
.pace-readonly-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.05);
}
.pace-readonly-table tbody tr:last-child td {
  border-bottom: none;
}
.pace-note-display {
  margin: 0;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 140, 0, 0.08);
  border-left: none;
  border-top: 1px solid rgba(255, 140, 0, 0.2);
  border-radius: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

/* ── Pace Editor (Trainer) ── */
#pace-columns .form-control { font-size: 0.85rem; padding: 0.35rem 0.6rem; }
#pace-rows-table .form-control-sm { font-size: 0.82rem; padding: 0.25rem 0.4rem; }
#pace-rows-table th { font-size: 0.8rem; white-space: nowrap; }

@media (max-width: 768px) {
  .pace-fab { bottom: 1.2rem; right: 1.2rem; width: 50px; height: 50px; }
  .pace-modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .pace-modal-content {
    margin: 0;
    max-height: 75vh;
    border-radius: 1.25rem 1.25rem 0 0;
    padding-bottom: calc(1rem + 50px + 1.2rem + env(safe-area-inset-bottom, 0px));
    background: linear-gradient(135deg, rgba(255, 140, 0, 0.08), rgba(255, 85, 0, 0.05)), var(--card-bg, #1a1a2e);
    border: 1px solid rgba(255, 140, 0, 0.15);
    border-bottom: none;
  }
  .pace-modal-overlay.open .pace-modal-content {
    transform: translateY(0) scale(1);
  }
  .pace-modal-content .flex-between h3 {
    color: #ff8c00;
  }
}

/* ── Trainer Dashboard Card Link ── */
.trainee-card-link { transition: transform 0.15s, box-shadow 0.15s; }
.trainee-card-link:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0, 212, 255, 0.15); }

/* Trainee plan progress */
.trainee-plan-row { display:flex; align-items:center; gap:0.4rem; margin-top:0.35rem; padding-top:0.35rem; border-top:1px solid rgba(255,255,255,0.07); }
.trainee-plan-title { font-size:0.78rem; color:rgba(255,255,255,0.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:140px; }
.trainee-plan-progress-wrap { display:flex; align-items:center; gap:0.35rem; }
.trainee-plan-bar { width:60px; height:5px; background:rgba(255,255,255,0.1); border-radius:3px; overflow:hidden; }
.trainee-plan-fill { display:block; height:100%; background:linear-gradient(90deg,#7b2ff7,#00d4ff); border-radius:3px; transition:width 0.3s; }

/* Sport type icons row */
.trainee-sports { display:flex; gap:0.4rem; align-items:center; }
.trainee-sports .icon { width:18px; height:18px; }

/* ── Stats View Tabs ── */
.stats-view-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  padding: 0.3rem;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0.6rem;
  justify-content: center;
}
.stats-view-tab {
  padding: 0.4rem 0.8rem;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.82rem;
  border-radius: 0.4rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}
.stats-view-tab:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.stats-view-tab.active {
  background: linear-gradient(135deg, #7b2ff7, #00d4ff);
  color: #fff;
  font-weight: 600;
}
.stats-view-tab .icon { background: currentColor; }
.stats-sub-tabs {
  display: flex;
  gap: 0.3rem;
  overflow: hidden;
  max-width: 0;
  opacity: 0;
  transition: max-width 0.35s ease, opacity 0.25s ease;
}
.stats-sub-tabs.open {
  max-width: 400px;
  opacity: 1;
}
.stats-view-tab-sub {
  font-size: 0.78rem;
  padding: 0.3rem 0.6rem;
}
.stats-view-tab-sub.active {
  background: rgba(123, 47, 247, 0.3);
  color: #fff;
  font-weight: 600;
}

/* ── Pace Table WYSIWYG Editor ── */
.pace-col-header { vertical-align: top; padding: 0.4rem 0.3rem !important; min-width: 100px; }
.pace-col-name {
  background: transparent; border: 1px solid rgba(255,255,255,0.1); color: #fff;
  font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.4rem; border-radius: 4px;
  width: 100%; margin-bottom: 0.25rem;
}
.pace-col-name:focus { border-color: rgba(255,255,255,0.3); outline: none; }
.pace-col-name::placeholder { color: rgba(255,255,255,0.3); }
.pace-col-meta { display: flex; align-items: center; gap: 0.25rem; }
.pace-col-type {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6); font-size: 0.65rem; padding: 0.1rem 0.2rem;
  border-radius: 3px; flex: 1;
}
.pace-col-remove {
  background: none; border: none; color: rgba(255,255,255,0.25); font-size: 1rem;
  cursor: pointer; padding: 0 0.2rem; line-height: 1;
}
.pace-col-remove:hover { color: #f87171; }
.pace-add-col-cell { vertical-align: top; padding: 0.4rem 0.2rem !important; width: 36px; }
.pace-add-col-btn {
  background: rgba(255,255,255,0.05); border: 1px dashed rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.4); font-size: 1.1rem; width: 32px; height: 32px;
  border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.pace-add-col-btn:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.3); }
.pace-row-remove {
  background: none; border: none; color: rgba(255,255,255,0.2); font-size: 1rem;
  cursor: pointer; padding: 0.2rem 0.4rem; line-height: 1;
}
.pace-row-remove:hover { color: #f87171; }
.pace-add-row-cell { padding: 0.3rem !important; }
.pace-add-row-btn {
  background: none; border: 1px dashed rgba(255,255,255,0.12); color: rgba(255,255,255,0.35);
  font-size: 0.75rem; padding: 0.35rem 0; width: 100%; border-radius: 4px; cursor: pointer;
}
.pace-add-row-btn:hover { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.6); border-color: rgba(255,255,255,0.25); }


/* ============================================================================
   MOBILE OPTIMIZATION
   All rules below target mobile only – desktop stays untouched.
   ========================================================================== */

/* ── 1. iOS Auto-Zoom Fix ── */

/* ── Mobile: Larger Select Touch Targets ── */
@media (max-width: 768px) {
  select.form-control {
    min-height: 2.75rem;
    padding: 0.6rem 2.2rem 0.6rem 0.8rem;
    background-position: right 0.6rem center;
  }
}
@media (max-width: 768px) {
  .form-control,
  select.form-control,
  textarea.form-control,
  input[type="text"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="email"],
  input[type="password"],
  .opt-inline-input {
    font-size: 16px !important;
  }
}

/* ── 2. Touch Target Sizes (min 44px) ── */
@media (max-width: 768px) {
  .btn-sm {
    min-height: 44px;
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
  }
  .filter-chip {
    min-height: 40px;
    padding: 0.5rem 0.85rem;
  }
  .segmented button {
    min-height: 40px;
    padding: 0.5rem 0.85rem;
  }
  .modal-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .diary-nav-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .tab-pills button {
    min-height: 40px;
  }
  .card-actions .btn {
    min-height: 40px;
    padding: 0.4rem 0.7rem;
  }
  .sort-btn {
    min-height: 40px;
  }
}

/* ── 3. Hover → Touch Fallbacks ── */
@media (hover: none) {
  /* Settings: remove buttons always visible on touch */
  .opt-remove-btn {
    display: block !important;
    opacity: 0.5;
  }
  .opt-btn-wrap:active .opt-remove-btn {
    opacity: 1;
  }
  /* No transform on hover for cards (prevents sticky hover) */
  .timeline-card:hover {
    transform: none;
  }
  .timeline-card.planned:hover {
    transform: none;
  }
  .diary-card:hover {
    transform: none;
  }
  .trainee-card-link:hover {
    transform: none;
    box-shadow: none;
  }
  .btn-add-run:hover,
  .btn-add-training:hover {
    transform: none;
  }
  /* Pace editor: remove/add buttons always visible */
  .pace-col-remove { color: rgba(255,255,255,0.3); }
  .pace-row-remove { color: rgba(255,255,255,0.3); }
}

/* ── 4. Modal Fullscreen on Mobile ── */
@media (max-width: 768px) {
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal-content {
    max-height: 95vh;
    height: 95vh;
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 1.25rem;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
  .modal-content .form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── 5. Container & Card Padding ── */
@media (max-width: 768px) {
  .container {
    padding: 1rem 0.75rem;
  }
  .glass-card {
    padding: 1.1rem;
    border-radius: 12px;
  }
}

/* ── 6. Diary Grid – Single Column on Small Screens ── */
@media (max-width: 480px) {
  .diary-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 7. Diary Header Kompakter ── */
@media (max-width: 768px) {
  .diary-header {
    gap: 0.5rem;
    margin-bottom: 0.75rem;
  }
  .diary-header-filters {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .filter-toggle-btn {
    min-height: 40px;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
  }
  #planned-toggle {
    margin-left: auto;
  }
}

/* ── 8. Timeline Cards Kompakter ── */
@media (max-width: 768px) {
  .timeline-card {
    padding: 0.65rem 1rem;
    margin-bottom: 0.5rem;
  }
  .card-stats {
    gap: 0.6rem;
  }
  .card-stat-value {
    font-size: 1.05rem;
  }
  .card-stat-label {
    font-size: 0.65rem;
  }
}

/* ── 9. Segmented Controls → Horizontal Scroll ── */
@media (max-width: 768px) {
  .segmented {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.15rem;
  }
  .segmented::-webkit-scrollbar { display: none; }
  .segmented button {
    flex-shrink: 0;
  }
}

/* ── 10 + 11. Safe Area Insets ── */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .pace-fab {
      bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
    }
    .site-footer {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .pace-modal-content {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }
  }
}

/* ── 12. Connections kompakter ── */
@media (max-width: 768px) {
  .conn-card {
    padding: 0.75rem 1rem;
    gap: 0.65rem;
  }
  .conn-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.7rem;
  }
  .conn-name {
    font-size: 0.88rem;
  }
}

/* ── 13. Settings Options Scroll ── */
@media (max-width: 768px) {
  .segmented.own-options-container {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .segmented.own-options-container::-webkit-scrollbar { display: none; }
}

/* ── 14. Trainer Detail Tabs ── */
@media (max-width: 768px) {
  .activity-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .activity-tabs::-webkit-scrollbar { display: none; }
  .activity-tab {
    flex-shrink: 0;
    padding: 0.7rem 0.4rem;
  }
  .activity-tab-label {
    font-size: 0.78rem;
  }
}

/* ── 15. Sticky Diary Navigation ── */
@media (max-width: 768px) {
  .diary-header {
    position: sticky;
    top: 56px;
    z-index: 50;
    background: #09111f;
    padding: 0.5rem 0;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ── Mobile Fix: Settings option × buttons clipping ── */
@media (max-width: 768px) {
  .segmented {
    padding-top: 0.5rem;
  }
  /* Hinzufügen button: override touch-target size, keep small */
  .segmented + .btn-sm,
  .segmented ~ .btn-sm,
  button[onclick*="addNewOption"] {
    min-height: unset !important;
    padding: 0.2rem 0.5rem !important;
    font-size: 0.68rem !important;
  }
}

/* ── Mobile: Horizontal scroll for pill/chip containers ── */
@media (max-width: 768px) {
  .tab-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-pills::-webkit-scrollbar { display: none; }
  .tab-pills button { flex-shrink: 0; }

  .stats-view-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .stats-view-tabs::-webkit-scrollbar { display: none; }
  .stats-sub-tabs {
    flex-shrink: 0;
  }
  .stats-sub-tabs.open {
    max-width: none;
  }

  .diary-filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .diary-filter-chips::-webkit-scrollbar { display: none; }
  .diary-filter-chips .filter-chip { flex-shrink: 0; }
}


/* ── Mobile: Larger sidebar dropdown items ── */
@media (max-width: 768px) {
  .nav-dropdown-item {
    padding: 0.65rem 1rem;
    font-size: 0.95rem;
    gap: 0.65rem;
    min-height: 44px;
  }
  .nav-dropdown-item .icon {
    width: 20px;
    height: 20px;
  }
}

/* ── Mobile: hamburger clickable when sidebar open ── */
@media (max-width: 768px) {
  .mobile-header {
    z-index: 200;
  }
}

/* ── Mobile pace modal: slide from bottom ── */
@media (max-width: 768px) {
  .pace-modal-content {
    transform: translateY(100%) scale(1) !important;
  }
  .pace-modal-overlay.open .pace-modal-content {
    transform: translateY(0) scale(1) !important;
  }
}

/* ── Mobile: sport icon row scrollable, card divider tighter ── */
@media (max-width: 768px) {
  .summary-card-right {
    min-width: 0;
    overflow: hidden;
  }
  .summary-card-left {
    width: 110px;
  }
  .sport-icon-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    justify-content: flex-start;
    gap: 0.6rem;
    padding-bottom: 0.15rem;
  }
  .sport-icon-row::-webkit-scrollbar { display: none; }
  .sport-icon-cell {
    flex-shrink: 0;
  }
  .sport-icon-cell .icon {
    width: 22px;
    height: 22px;
  }
  .sport-icon-count {
    font-size: 0.72rem;
  }
  .card-divider {
    margin: 0.2rem 0.15rem;
  }
}


/* ── Mobile: Plan views – comprehensive fixes ── */
@media (max-width: 768px) {
  /* Date/field grids → single column */
  .plan-date-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  /* Plan header action buttons → wrap */
  .flex-between {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  .flex-between > .flex.gap-1 {
    flex-wrap: wrap;
    gap: 0.35rem;
    width: 100%;
  }
  .flex-between > .flex.gap-1 .btn {
    flex: 1;
    justify-content: center;
    min-width: 0;
  }

  /* Entry card inner padding tighter */
  #entries-container .glass-card {
    padding: 0.75rem;
  }

  /* Entry card header: date + buttons */
  .glass-card .e-scheduled-date {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Action buttons in entry cards: proper touch size */
  #entries-container .btn-sm,
  #plan-entries .btn-sm {
    min-height: 38px;
    min-width: 38px;
    padding: 0.3rem 0.45rem;
    justify-content: center;
  }

  /* Comp rows: keep 2-col + trash */
  .comp-row.form-grid {
    grid-template-columns: 1fr 1fr auto !important;
    gap: 0.4rem !important;
  }
  .comp-row.form-grid .form-control { min-width: 0; }

  /* Strength rows: horizontal scroll */
  .str-row.form-grid {
    display: flex !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.4rem;
  }
  .str-row.form-grid::-webkit-scrollbar { display: none; }
  .str-row.form-grid > * { flex-shrink: 0; }
  .str-row.form-grid > input:first-child { min-width: 120px; }
  .str-row.form-grid > input:not(:first-child) { min-width: 70px; width: 70px; }

  /* form-grid: tighter */
  .form-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.6rem;
  }

  /* Segmented inside entries: clip to card width */
  #entries-container .segmented,
  .collapsible .segmented,
  .glass-card .segmented {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    max-width: 100%;
  }
  #entries-container .segmented::-webkit-scrollbar,
  .collapsible .segmented::-webkit-scrollbar,
  .glass-card .segmented::-webkit-scrollbar { display: none; }
  /* Ensure form-groups clip overflow */
  .glass-card .form-group {
    overflow: hidden;
    min-width: 0;
  }

  /* Bottom margin of last form-group in entry cards */
  #entries-container .glass-card .form-group:last-child {
    margin-bottom: 0;
  }

  /* Wheel picker: don't overflow */
  .wheel-compact { max-width: 100%; }
  .wheel-picker { max-width: calc(100vw - 3rem); overflow-x: auto; }

  /* Plan detail entry rows */
  #plan-entries [style*="display:flex"][style*="gap:0.75rem"] {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Assign modal: full width */
  #assign-modal > .glass-card,
  #assign-plan-modal > .glass-card {
    max-width: 100% !important;
    margin: 1rem !important;
  }

  /* Add-entry chips: scrollable */
  #add-entry-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  #add-entry-chips::-webkit-scrollbar { display: none; }
  #add-entry-chips .filter-chip { flex-shrink: 0; }

  /* Container overflow safety */
  .container { overflow-x: hidden; }
}

/* Ensure custom-select dropdown is not clipped by parent cards */
.glass-card:has(.cs-wrap.open) { overflow: visible; z-index: 100; position: relative; }
#entries-container .glass-card:has(.cs-wrap.open) { overflow: visible; z-index: 100; }
.site-footer-version{font-size:0.7rem;color:rgba(255,255,255,0.25);margin-top:0.25rem;}


/* Donate sidebar + modal */
.sidebar-donate {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
  border-top: 1px solid rgba(255,255,255,0.06);
  margin-top: 0.25rem;
}
.sidebar-donate:hover {
  background: rgba(247,121,125,0.08);
}
.donate-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #f7797d, #fbd786);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.donate-label {
  font-size: 0.85rem;
  font-weight: 600;
  background: linear-gradient(135deg, #f7797d, #fbd786);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.donate-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(247,121,125,0.3);
}
.sidebar-footer .notification-badge { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.5); }

/* Feedback sidebar */
.sidebar-feedback {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.2rem;
  cursor: pointer;
  transition: background 0.2s;
}
.sidebar-feedback:hover { background: rgba(255,255,255,0.04); }
.feedback-icon { width: 20px; height: 20px; opacity: 0.35; }
.feedback-label { font-size: 0.85rem; color: rgba(255,255,255,0.35); font-weight: 500; }
.sidebar-feedback:hover .feedback-icon { opacity: 0.55; }
.sidebar-feedback:hover .feedback-label { color: rgba(255,255,255,0.55); }

/* Feedback footer link */
.site-footer-nav a[id="feedback-footer-trigger"] {
  font-weight: 600;
  color: rgba(255,255,255,0.4);
}
.site-footer-nav a[id="feedback-footer-trigger"]:hover {
  color: rgba(255,255,255,0.7);
}