/**
 * CARRÉ Design System
 * carrepetanque.de
 *
 * Vanilla CSS design system for the CARRÉ pétanque club management app.
 * Font is loaded via <link> in index.html (no duplicate @import).
 *
 * Sections:
 *   - CSS Variables (colors, fonts, spacing)
 *   - Reset
 *   - Login Screen
 *   - App Layout (topbar, sidebar, content)
 *   - Forms (inputs, selects, labels)
 *   - Buttons (primary, secondary, danger, icon, disabled)
 *   - Cards
 *   - Tables
 *   - Badges
 *   - Page Header
 *   - Tabs
 *   - Toast notifications
 *   - Modal dialogs
 *   - Loading states
 *   - Accessibility (focus-visible, reduced-motion)
 *   - Responsive
 */

/* ── CSS Variables (Legacy Aliases) ─────────────────────────── */
/* All canonical tokens live in tokens.css.
   These aliases map old variable names → new token names
   so existing code doesn't break during migration. */
:root {
  /* ─ Legacy color aliases → new tokens ─ */
  --color-primary:        var(--color-text-1);
  --color-secondary:      var(--color-text-2);
  /* --color-accent is defined in tokens.css — do NOT re-declare here */
  --color-surface-raised: var(--color-surface-2);
  --color-text-primary:   var(--color-text-1);
  --color-text-secondary: var(--color-text-2);
  --color-text-tertiary:  var(--color-text-3);
  --color-error:          var(--color-red);
  --color-focus:          var(--color-sky-text);

  /* ─ Club theming (overridden per org via JS) ─ */
  --club-primary:         #3C5A1E;
  --club-secondary:       #4E7228;

  /* ─ Legacy text sizes ─ */
  --text-xs:   9px;
  --text-sm:   11px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   15px;
  --text-xl:   20px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  40px;

  /* ─ Spacing scale (4px base) ─ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;

  /* ─ Shadows ─ */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.03);
  --shadow-md:  0 2px 8px rgba(0,0,0,0.04);
  --shadow-lg:  0 2px 8px rgba(0,0,0,0.08);

  /* ─ Legacy transitions ─ */
  --ease-fast:    0.1s ease;
  --ease-default: 0.15s ease;
  --ease-slow:    0.25s ease;

  /* ─ Layout ─ */
  --topbar-h:  56px;
  --sidebar-w: 220px;
  --radius:    var(--radius-sm);
}

/* ── Reset ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text-primary);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
input, button, select, textarea { font-family: var(--font-body); }

/* ── Accessibility: Focus-visible ────────────────────────────── */
/* Only show focus ring for keyboard navigation (not mouse clicks) */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Remove default outline since we use focus-visible */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Login Screen ────────────────────────────────────────────── */
#login-screen {
  min-height: 100vh;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-wrap {
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.login-logo {
  opacity: 0.9;
}

.login-brand {
  font-family: var(--font-display);
  font-size: 48px;
  color: var(--color-text-1);
  letter-spacing: 0.06em;
}

.login-card {
  width: 100%;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-2);
}

.login-err {
  color: var(--color-error);
  font-size: var(--text-base);
  min-height: 18px;
  text-align: center;
}

.login-forgot {
  font-size: 12px;
  color: var(--color-text-secondary);
  text-align: center;
  display: block;
  transition: color var(--ease-default);
}
.login-forgot:hover { color: var(--color-primary); }

/* ── App Layout ──────────────────────────────────────────────── */
#app { display: flex; flex-direction: column; min-height: 100vh; }

/* Desktop: hide topbar, sidebar has its own header */
@media (min-width: 769px) {
  .topbar { display: none; }
}

.topbar {
  height: var(--topbar-h);
  background: var(--color-surface);
  border-bottom: 0.5px solid var(--color-border);
  display: none; /* hidden on desktop — only mobile */
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-5);
  flex-shrink: 0;
  z-index: 100;
  position: sticky;
  top: 0;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar-left svg {
  position: relative;
  top: -1px;
}

.topbar-brand {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--color-text-1);
  letter-spacing: 0.06em;
}

.topbar-center {
  font-size: var(--text-base);
  color: var(--color-text-3);
  font-weight: 500;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.topbar-badge {
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--color-accent-dim);
  color: var(--color-accent);
  letter-spacing: 0.04em;
}

.layout {
  display: flex;
  flex: 1;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.sidebar {
  width: 210px;
  background: var(--color-surface);
  border-right: 0.5px solid var(--color-border);
  display: flex;
  flex-direction: column;
  padding: 8px 0;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  overflow-y: auto;
  transition: width var(--dur-slow) var(--ease-spring);
}
.sidebar.collapsed { width: 56px; }
.sidebar.collapsed .sidebar-header { justify-content: center; padding: 8px 0 0; }
.sidebar.collapsed .sidebar-logo { justify-content: center; }

/* Collapsed: dividers short + centered */
.sidebar.collapsed .sidebar-divider {
  width: 32px;
  margin: 3px auto;
}

/* Collapsed nav items: center icons, same size as expanded */
.sidebar.collapsed .nav-item {
  justify-content: center;
  padding: 6px 0;
  margin: 1px 8px;
}

/* Footer items centered */
.sidebar.collapsed .sidebar-footer {
  margin: 6px 4px 0;
  padding: 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sidebar.collapsed .sidebar-theme-row {
  justify-content: center;
  padding-bottom: 6px;
  margin-bottom: 6px;
}
.sidebar.collapsed .sidebar-user {
  justify-content: center;
}
.sidebar.collapsed .sidebar-logout {
  justify-content: center;
}

/* Sidebar Header */
.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 12px;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.sidebar-logo svg {
  position: relative;
  top: -1px;
}
.sidebar-name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--color-text-1);
}
.sidebar-collapse-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-3);
  transition: background var(--dur-fast), transform var(--dur-normal) var(--ease-spring);
}
.sidebar-collapse-btn:hover { background: var(--color-surface-2); }

/* Expand button — only visible when collapsed, centered like nav icons */
.sidebar-expand-btn {
  display: none;
  width: 34px;
  height: 34px;
  margin: 2px auto;
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  color: var(--color-text-3);
  transition: background var(--dur-fast);
}
.sidebar-expand-btn:hover { background: var(--color-surface-2); }
.sidebar-expand-btn svg,
.sidebar-expand-btn svg * { stroke: var(--color-text-3); fill: none; }
.sidebar-expand-btn:hover svg,
.sidebar-expand-btn:hover svg * { stroke: var(--color-text-1); }
.sidebar.collapsed .sidebar-expand-btn { display: flex; }
.sidebar-collapse-btn svg,
.sidebar-collapse-btn svg * { stroke: var(--color-text-3); fill: none; }

/* Theme toggle row in sidebar footer */
.sidebar-theme-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 0.5px solid var(--color-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-3);
  cursor: pointer;
  transition: color var(--dur-fast);
}
.sidebar-theme-row:hover { color: var(--color-text-1); }
.sidebar-theme-row svg { width: 12px; height: 12px; }
.sidebar-theme-row svg,
.sidebar-theme-row svg * {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Theme icon toggle */
.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: none !important; }
[data-theme="dark"] .theme-icon-moon { display: block !important; }
[data-theme="dark"] .sidebar-theme-row span { font-size: 0; }
[data-theme="dark"] .sidebar-theme-row span::after { content: 'Light Mode'; font-size: 11px; }
.sidebar.collapsed .sidebar-collapse-btn { transform: rotate(180deg); }

/* Hide elements when collapsed */
.sidebar.collapsed .sidebar-name,
.sidebar.collapsed .sidebar-collapse-btn,
.sidebar.collapsed .sidebar-org-name,
.sidebar.collapsed .sidebar-section-label,
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-badge,
.sidebar.collapsed .nav-arrow,
.sidebar.collapsed .user-info,
.sidebar.collapsed .sidebar-org-switcher,
.sidebar.collapsed .sidebar-theme-row span,
.sidebar.collapsed .sidebar-logout span,
.sidebar.collapsed .submenu { display: none; }

/* Org name under CARRÉ logo */
.sidebar-org-name {
  font-size: 9.5px;
  font-weight: 600;
  color: var(--color-text-3);
  padding: 0 13px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Sidebar divider */
.sidebar-divider {
  height: 0.5px;
  background: var(--color-border);
  margin: 3px 9px;
}

/* Section labels */
.sidebar-section-label {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-3);
  padding: 8px 15px 2px;
}

/* Sidebar Nav */
.sidebar-nav { flex: 1; }

/* Nav items */
.nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px 6px 13px;
  margin: 1px 6px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-2);
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.nav-item:hover {
  background: var(--color-surface-2);
  color: var(--color-text-1);
}
.nav-item.active {
  background: var(--color-accent-dim);
  color: var(--color-accent);
  font-weight: 600;
}

/* Nav icons — explicit child selectors so SVG sub-elements inherit stroke */
.nav-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  transition: stroke var(--dur-fast) var(--ease-standard);
}
.nav-icon,
.nav-icon rect,
.nav-icon path,
.nav-icon circle,
.nav-icon line,
.nav-icon polyline {
  stroke: var(--color-text-3);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item:hover .nav-icon,
.nav-item:hover .nav-icon rect,
.nav-item:hover .nav-icon path,
.nav-item:hover .nav-icon circle,
.nav-item:hover .nav-icon line,
.nav-item:hover .nav-icon polyline { stroke: var(--color-text-1); }
.nav-item.active .nav-icon,
.nav-item.active .nav-icon rect,
.nav-item.active .nav-icon path,
.nav-item.active .nav-icon circle,
.nav-item.active .nav-icon line,
.nav-item.active .nav-icon polyline { stroke: var(--color-accent); fill: none; }

/* Nav arrow (submenu toggle) */
.nav-arrow {
  margin-left: auto;
  width: 12px;
  height: 12px;
  transition: transform var(--dur-normal) var(--ease-spring);
}
.nav-arrow,
.nav-arrow path,
.nav-arrow polyline,
.nav-arrow line {
  stroke: var(--color-text-3);
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.nav-item.sub-open .nav-arrow { transform: rotate(90deg); }

/* Nav label (text next to icon) */
.nav-label {
  font-size: 12.5px;
  font-weight: 500;
  color: inherit;
}

/* Nav badge (notification count in sidebar) */
.nav-badge {
  margin-left: auto;
  background: var(--color-accent);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  transition: transform var(--dur-fast) var(--ease-spring);
}

/* Submenu */
.submenu {
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--dur-normal) var(--ease-out);
}
.submenu.open { max-height: 300px; }
.submenu-inner {
  position: relative;
  margin: 2px 6px 2px 22px;
  padding-left: 16px;
}
/* SVG bracket drawn by JS into .submenu-inner */
.sub-item {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-text-3);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.sub-item:hover {
  background: var(--color-surface-2);
  color: var(--color-text-1);
}
.sub-item.active { color: var(--color-accent); font-weight: 600; }

/* Sidebar spacer */
.sidebar-spacer { flex: 1; }

/* Sidebar Footer */
.sidebar-footer {
  margin: 6px 7px 0;
  padding: 9px;
  background: var(--color-surface-2);
  border-radius: 10px;
  border: 0.5px solid var(--color-border);
}
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 8px;
}
.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-accent-dim);
  border: 1.5px solid var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-accent);
  flex-shrink: 0;
}
.user-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.user-info { min-width: 0; }
.user-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.user-role {
  font-size: 10px;
  color: var(--color-text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-logout {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 0.5px solid var(--color-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-3);
  text-decoration: none;
  transition: color var(--dur-fast);
}
/* Org switcher in sidebar footer (superadmin / multi-org) */
.sidebar-org-switcher {
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 0.5px solid var(--color-border);
}
.sidebar-org-select {
  width: 100%;
  background: var(--color-surface);
  border: 1.5px solid var(--color-border-2);
  border-radius: var(--radius-md);
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-1);
  cursor: pointer;
  outline: none;
}
.sidebar-org-select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-dim);
}

.sidebar-logout:hover { color: var(--color-purple); }
.sidebar-logout svg { width: 12px; height: 12px; }
.sidebar-logout svg,
.sidebar-logout svg * { stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }

/* Main content offset for fixed sidebar */
.content {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8);
  margin-left: 210px;
  transition: margin-left var(--dur-slow) var(--ease-spring);
}
body.sidebar-collapsed .content { margin-left: 56px; }

/* Legacy nav-sub-items compat */
.nav-sub-items {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.nav-sub-items.open {
  max-height: 500px;
}

/* ── Forms ───────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 6px; }

.form-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
}

.form-input {
  width: 100%;
  padding: 10px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-md);
  color: var(--color-text-primary);
  background: var(--color-bg);
  transition: border-color var(--ease-default), background var(--ease-default), box-shadow var(--ease-default);
  outline: none;
}
.form-input:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 3px rgba(13, 13, 13, 0.06);
}
.form-input::placeholder { color: var(--color-text-tertiary); }

/* Error state for form inputs (apply via JS) */
.form-input.is-error {
  border-color: var(--color-error);
}
.form-input.is-error:focus {
  box-shadow: 0 0 0 3px rgba(197, 43, 43, 0.1);
}

.form-select {
  width: 100%;
  padding: 10px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-md);
  background: var(--color-bg);
  cursor: pointer;
  outline: none;
  transition: border-color var(--ease-default);
}
.form-select:focus { border-color: var(--color-primary); }

/* ── Buttons (overrides moved to components.css) ────────────── */
/* Only keep layout/disabled helpers here — all colors/radii in components.css */

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-sm { padding: 6px 12px; font-size: 12px; }

.topbar .btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-3);
  padding: 6px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.topbar .btn-icon:hover { color: var(--color-text-1); background: var(--color-surface-2); }

/* (Theme toggle moved to sidebar header) */

/* ── Cards ───────────────────────────────────────────────────── */
/* .card base is in components.css — only keep additions here */

.card-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

th {
  text-align: left;
  padding: 10px 14px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--color-bg); transition: background var(--ease-fast); }

/* ── Badges ──────────────────────────────────────────────────── */
/* Base .badge is defined in components.css with CI-correct values.
   Only keep team-specific badge classes here. */
.badge-blue      { background: var(--color-sky-dim);  color: var(--color-sky-text); }

/* Team color badges (1-4) */
.badge-t1 { background: var(--color-red-dim);     color: var(--color-red); }
.badge-t2 { background: var(--color-success-dim); color: var(--color-success); }
.badge-t3 { background: var(--color-warning-dim); color: var(--color-warning); }
.badge-t4 { background: var(--color-purple-dim);  color: var(--color-purple); }

/* ── Page Header ─────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-7);
  gap: var(--space-4);
}

.page-title {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-1);
}

.page-subtitle {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

/* ── Tabs ────────────────────────────────────────────────────── */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-6);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-btn {
  padding: 10px 18px;
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-secondary);
  border: none;
  background: none;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-body);
  transition: color var(--ease-default), border-color var(--ease-default);
  white-space: nowrap;
}
.tab-btn:hover { color: var(--color-text-1); }
.tab-btn.active {
  color: var(--color-accent);
  font-weight: 600;
  border-bottom-color: var(--color-accent);
}

/* ── Toast ───────────────────────────────────────────────────── */
#toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--color-accent-dark);
  color: #FFFFFF;
  padding: 10px var(--space-5);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  transition: transform var(--dur-normal) var(--ease-spring);
  z-index: 9999;
  white-space: nowrap;
  pointer-events: none;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-6);
  animation: modal-fade-in var(--dur-fast) var(--ease-out);
}
[data-theme="dark"] .modal-overlay { background: rgba(0,0,0,0.65); }

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius);
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  overflow-y: auto;
  /* Scale-up entrance animation */
  animation: modal-scale-in 0.15s ease-out;
}

@keyframes modal-scale-in {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--color-border);
}

.modal-title {
  font-size: var(--text-lg);
  font-weight: 600;
}

.modal-body { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.modal-footer { padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border); display: flex; gap: var(--space-2); justify-content: flex-end; }

/* ── Loading ─────────────────────────────────────────────────── */
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: var(--color-text-secondary);
  font-size: var(--text-md);
  animation: loading-pulse 1.5s ease-in-out infinite;
}

/* Pulsing animation for loading text */
@keyframes loading-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ── Org Switcher ─────────────────────────────────────────────── */
.org-switcher {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  color: var(--color-text-1);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  font-size: var(--text-base);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background var(--dur-fast);
}
.org-switcher:hover { background: var(--color-surface-3); }

/* Club theming is handled via --club-primary / --club-secondary on :root.
   JS sets these when org.farbe_primary / farbe_secondary are available.
   The topbar already reads var(--club-primary) from its background rule. */

/* ── Dashboard Grid ──────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}

/* .stat-card base is in components.css */

.stat-value {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  color: var(--color-accent);
}

.stat-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ── Drag & Drop: Planung ────────────────────────────────────── */

/* Board: horizontaler Flex-Container für Team-Spalten */
.plan-board {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-2);
  align-items: flex-start;
}

/* Einzelne Team-Spalte / Drop-Zone */
.plan-column {
  min-width: 220px;
  max-width: 280px;
  flex: 1 0 220px;
  background: var(--color-bg);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  min-height: 200px;
  transition: border-color var(--ease-default), background var(--ease-default);
}

.plan-column.drop-target {
  border-color: var(--color-accent);
}

.plan-column.drag-over {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
}

/* Spalten-Header: Team-Name + Anzahl */
.plan-column-header {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  margin-bottom: 10px;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plan-column-header .plan-count {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.plan-column-header .plan-count.warn {
  color: var(--color-warning);
}

.plan-column-header .plan-count.ok {
  color: var(--color-success);
}

/* Draggbare Spieler-Karte */
.plan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-2) var(--space-3);
  margin-bottom: 6px;
  cursor: grab;
  font-size: 12px;
  transition: box-shadow var(--ease-default), opacity var(--ease-default);
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.plan-card:active { cursor: grabbing; }

.plan-card:hover {
  box-shadow: var(--shadow-lg);
}

.plan-card.dragging {
  opacity: 0.3;
}

/* Nicht verfügbarer Spieler */
.plan-card.unavailable {
  opacity: 0.45;
  background: var(--color-red-dim);
  border-color: var(--color-red);
  cursor: grab;
}

/* Festgespielter Höherspieler — border-left inline in Teamfarbe */

/* Höherspieler-Marker */
.plan-card .hoeher-badge {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-warning);
  letter-spacing: 0.03em;
}

/* Spieler-Info innerhalb der Karte */
.plan-card-name {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plan-card-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

/* ── Aufstellung: Positions-Slots ────────────────────────────── */

.aufstellung-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

.aufstellung-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.aufstellung-slot {
  background: var(--color-surface);
  border: 2px dashed var(--color-border);
  border-radius: var(--radius);
  padding: 6px var(--space-2);
  min-height: 36px;
  transition: border-color var(--ease-default), background var(--ease-default);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 4px;
}

.aufstellung-slot.drag-over {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
}

.aufstellung-slot.filled {
  border-style: solid;
  border-color: var(--color-accent);
  background: var(--color-surface);
  cursor: pointer;
}

.aufstellung-slot.filled:hover {
  border-color: var(--color-red);
  background: var(--color-red-dim);
}

.aufstellung-slot .slot-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}

.aufstellung-slot .slot-player {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Reusable Component Classes ──────────────────────────────── */

/* Player avatar circle (used in spieler, team-detail, verfuegbarkeit tables) */
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}
.avatar-initials {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* Team number badge (inline in tables & plan cards) */
.team-nr {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--space-1);
  font-size: var(--text-sm);
  font-weight: 700;
}
.team-nr-sm {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  font-size: var(--text-xs);
}
.team-nr-md {
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
}

/* Section divider (used in modals & forms) */
.section-divider {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-4);
}

/* Section label (used in modals for section headings) */
.section-label {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* Clickable card variant (teams, dashboard items) */
button.card {
  font-family: var(--font-body);
  transition: box-shadow var(--ease-default), border-color var(--ease-default), transform var(--ease-fast);
}
button.card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--color-accent);
}
button.card:active {
  transform: scale(0.98);
}

/* Card without padding (used around tables) */
.card-flush { padding: 0; }

/* Form grid layouts (replaces inline grid styles) */
.form-row { display: grid; gap: var(--space-4); }
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

/* Flex row with gap (replaces inline display:flex;gap:8px) */
.flex-row   { display: flex; align-items: center; gap: var(--space-2); }
.flex-col   { display: flex; flex-direction: column; gap: var(--space-4); }

/* Margin-bottom utilities */
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }

/* Sort arrow (replaces inline style on sort icons) */
.sort-arrow { opacity: 0.3; font-size: 10px; }
.sort-arrow.active { opacity: 1; }

/* Check/cross indicators (used for TL, Höher, Account status) */
.icon-check { color: var(--color-success); font-weight: 700; }
.icon-cross { color: var(--color-error); font-weight: 700; }
.icon-check-blue { color: var(--color-focus); font-weight: 700; }

/* Text utilities */
.text-muted     { color: var(--color-text-secondary); }
.text-tertiary  { color: var(--color-text-tertiary); }
.text-error     { color: var(--color-error); }
.text-sm        { font-size: 12px; }
.text-xs        { font-size: var(--text-sm); }
.text-truncate  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-nowrap    { white-space: nowrap; }
.font-bold      { font-weight: 600; }

/* ── Skeleton Loading ────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface-raised) 25%, var(--color-bg) 50%, var(--color-surface-raised) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius);
}
.skeleton-text {
  height: 14px;
  margin-bottom: 8px;
  border-radius: var(--radius-sm);
}
.skeleton-stat {
  height: 36px;
  width: 60px;
  border-radius: var(--radius);
}

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Smooth Content Transitions ─────────────────────────────── */
.content {
  /* Scroll behavior for anchor navigation */
  scroll-behavior: smooth;
}

/* Button loading state */
.btn.loading {
  pointer-events: none;
  opacity: 0.7;
}
.btn.loading::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin-fast 0.6s linear infinite;
  margin-left: 6px;
}
@keyframes spin-fast { to { transform: rotate(360deg); } }

/* ── Accessibility: Reduced motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Mobile Menu Button ──────────────────────────────────────── */
/* Hidden on desktop, shown on mobile */
.mobile-menu-btn { display: none; }

/* ── Sidebar Backdrop (mobile overlay) ───────────────────────── */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 199;
}

/* ── Search Bar ────────────────────────────────────────────────── */
.search-bar {
  margin-bottom: var(--space-4);
}
.search-bar .form-input {
  max-width: 320px;
  padding-left: var(--space-4);
}

/* ── Spieler Mobile Cards ──────────────────────────────────────── */
/* Hidden on desktop, shown on mobile via @media below */
.spieler-cards-mobile { display: none; }

.spieler-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: box-shadow var(--ease-fast);
}
.spieler-card:active {
  box-shadow: var(--shadow-md);
}
.spieler-card-top {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.spieler-card-name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-base);
  line-height: 1.3;
}
.spieler-card-name strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spieler-card-meta {
  display: block;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}
.spieler-card-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.spieler-card-level {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-secondary);
}
.spieler-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
  gap: var(--space-2);
}
.spieler-card-tags {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

/* ── Zone System ─────────────────────────────────────────────── */
.page-zone-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.page-zone-footer {
  position: sticky;
  bottom: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  z-index: 10;
}

/* ── CRUD Cards (Mobile) ─────────────────────────────────────── */
.crud-cards-mobile { display: none; }

.crud-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
}

.crud-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-base);
}

.crud-card-meta {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}

.crud-card-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
}

/* ── Bottom Tab Bar ──────────────────────────────────────────── */
.bottom-tab-bar {
  display: none; /* shown only on mobile */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 300;
  justify-content: space-around;
  align-items: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.bottom-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 0;
  min-width: 56px;
  min-height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 10px;
  font-weight: 500;
  transition: color var(--ease-default);
}
.bottom-tab-item svg { width: 22px; height: 22px; }
.bottom-tab-item.active { color: var(--color-accent); font-weight: 600; }

/* ── More-Menu Overlay ───────────────────────────────────────── */
.more-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 299;
  display: none;
}
.more-menu-overlay.open { display: block; }

.more-menu {
  position: fixed;
  bottom: 60px;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: var(--space-3) 0;
  z-index: 300;
  display: none; /* nur auf Mobile sichtbar */
  transform: translateY(100%);
  transition: transform var(--ease-slow);
}
.more-menu.open { transform: translateY(0); }

.more-menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.more-menu-item:hover { background: var(--color-bg); }
.more-menu-item svg { width: 20px; height: 20px; color: var(--color-text-secondary); }

/* ── Verfügbarkeit Tabelle ───────────────────────────────────── */
.verf-table {
  font-size: 12px;
  width: 100%;
  table-layout: fixed;
}
.verf-col-spieltag {
  /* alle Spieltag-Spalten gleich breit — berechnet aus verfügbarem Platz */
}
.verf-bubble-cell {
  text-align: center;
  padding: 10px 4px;
}
/* avail-bubble is display:flex which ignores text-align — force centering via margin */
.verf-bubble-cell .avail-bubble {
  margin: 0 auto;
}

/* ── Verfügbarkeit Mobile ────────────────────────────────────── */
.verf-mobile { display: none; }

.verf-mobile-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.verf-mobile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.verf-mobile-name {
  font-weight: 500;
  font-size: var(--text-base);
}

.verf-mobile-btn {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ease-default);
}

.verf-mobile-summary {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3);
  font-weight: 600;
  font-size: var(--text-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Dashboard ──────────────────────────────────────────────── */
.dash-next-countdown {
  min-width: 56px;
  text-align: center;
  flex-shrink: 0;
}

/* Stat cards: clickable feel */
.stat-card {
  cursor: default;
  position: relative;
  overflow: hidden;
}

/* Empty state pattern */
.empty-state {
  text-align: center;
  padding: var(--space-8);
  color: var(--color-text-secondary);
}
.empty-state-icon {
  font-size: 32px;
  margin-bottom: var(--space-3);
}
.empty-state-title {
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.empty-state-text {
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.5;
}

/* ── Tap-to-Move (Touch-Fallback für D&D) ─────────────────────── */
.plan-card.tap-selected {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  background: var(--color-accent-dim);
  box-shadow: var(--shadow-md);
}

.plan-column.tap-target .plan-column-header {
  cursor: pointer;
  background: var(--color-accent-dim);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast);
}

.plan-column.tap-target .plan-column-header:active {
  background: var(--color-surface-3);
}

/* ── Dark Mode Overrides ──────────────────────────────────────── */

/* Login — uses tokens, adapts automatically */
[data-theme="dark"] .login-card { background: var(--color-surface-2); border: 0.5px solid var(--color-border); }

/* Cards */
[data-theme="dark"] .card { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .stat-card { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] button.card:hover { border-color: var(--color-accent); }

/* Forms */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select {
  background: var(--color-surface-2);
  border-color: var(--color-border-2);
  color: var(--color-text-1);
}
[data-theme="dark"] .form-input::placeholder { color: var(--color-text-3); }

/* Tables */
[data-theme="dark"] th { background: var(--color-surface-2); border-color: var(--color-border); color: var(--color-text-2); }
[data-theme="dark"] td { border-color: var(--color-border); }
[data-theme="dark"] tr:hover td { background: var(--color-surface-2); }

/* Tabs */
[data-theme="dark"] .tabs { border-color: var(--color-border); }
[data-theme="dark"] .tab-btn { color: var(--color-text-3); }
[data-theme="dark"] .tab-btn:hover { color: var(--color-text-1); }
[data-theme="dark"] .tab-btn.active { color: var(--color-accent); border-color: var(--color-accent); }

/* Toast */
[data-theme="dark"] #toast { background: var(--color-surface-2); color: var(--color-text-1); border: 0.5px solid var(--color-border); }

/* Modal */
[data-theme="dark"] .modal { background: var(--color-surface); border: 0.5px solid var(--color-border); }
[data-theme="dark"] .modal-header { border-color: var(--color-border); }
[data-theme="dark"] .modal-footer { border-color: var(--color-border); }

/* Sidebar */
[data-theme="dark"] .sidebar { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .sidebar-footer { background: var(--color-surface-2); border-color: var(--color-border); }
[data-theme="dark"] .sidebar-collapse-btn { border-color: var(--color-border); background: var(--color-surface-2); }

/* Org Switcher — uses tokens, adapts automatically */

/* Badges — semantic colors adapt automatically via tokens, but ensure bg contrast */
[data-theme="dark"] .badge-primary { background: var(--color-accent-dim); color: var(--color-accent); }
[data-theme="dark"] .badge-sand { background: var(--color-warning-dim); color: var(--color-warning); }

/* Plan board */
[data-theme="dark"] .plan-column { background: var(--color-surface-2); border-color: var(--color-border); }
[data-theme="dark"] .plan-card { background: var(--color-surface); border-color: var(--color-border); }

/* Bottom tab bar + more menu */
[data-theme="dark"] .bottom-tab-bar { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .more-menu { background: var(--color-surface); border-color: var(--color-border); }

/* Spieler cards */
[data-theme="dark"] .spieler-card { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .crud-card { background: var(--color-surface); border-color: var(--color-border); }

/* Aufstellung */
[data-theme="dark"] .aufstellung-slot { border-color: var(--color-border); background: var(--color-surface); }
[data-theme="dark"] .aufstellung-slot.filled { border-color: var(--color-accent); }

/* Search bar */
[data-theme="dark"] .search-bar .form-input { background: var(--color-surface-2); border-color: var(--color-border-2); }

/* Loading state */
[data-theme="dark"] .loading-state { color: var(--color-text-3); }

/* Empty state */
[data-theme="dark"] .empty-state { color: var(--color-text-3); }
[data-theme="dark"] .empty-state-title { color: var(--color-text-1); }

/* Verf mobile */
[data-theme="dark"] .verf-mobile-row { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .verf-mobile-btn { background: var(--color-surface); border-color: var(--color-border); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  /* Topbar visible on mobile */
  .topbar { display: flex !important; }

  /* Topbar + hamburger visible on mobile */
  .topbar { display: flex; }
  .mobile-menu-btn { display: flex; }

  /* Sidebar: slide-out drawer on mobile */
  .sidebar {
    width: 260px;
    min-height: auto;
    top: var(--topbar-h);
    bottom: 0;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform var(--dur-normal) var(--ease-spring);
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
  }
  .sidebar-header { display: none; }
  .sidebar.collapsed { width: 260px; }
  .sidebar.collapsed .sidebar-section-label,
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .nav-arrow,
  .sidebar.collapsed .user-info,
  .sidebar.collapsed .sidebar-logout span,
  .sidebar.collapsed .submenu { display: revert; }

  /* Backdrop visible when sidebar open */
  .sidebar-backdrop.open {
    display: block;
  }
  [data-theme="dark"] .sidebar-backdrop.open { background: rgba(0,0,0,0.6); }

  /* Content adjustments */
  .content { margin-left: 0 !important; padding: var(--space-4); padding-bottom: 76px; /* room for bottom-tab-bar */ }
  .page-title { font-size: var(--text-xl); }
  .page-header { flex-direction: column; gap: var(--space-3); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .aufstellung-grid { grid-template-columns: 1fr; }

  /* Tabs: horizontal scrollable on mobile */
  .tabs { gap: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab-btn { padding: var(--space-2) var(--space-3); font-size: 12px; white-space: nowrap; flex-shrink: 0; }

  /* Topbar: hide org name on very small screens */
  .topbar-center { display: none; }

  /* Bottom tab bar: show on mobile */
  .bottom-tab-bar { display: flex; }
  .more-menu { display: block; }

  /* Spieler: show cards, hide table */
  .spieler-table-desktop { display: none; }
  .spieler-cards-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* CRUD: show cards, hide table */
  .crud-table-desktop { display: none; }
  .crud-cards-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Verfügbarkeit: show mobile, hide desktop */
  .verf-desktop { display: none; }
  .verf-mobile { display: block; }

  /* Tables: horizontal scroll with smooth momentum */
  .table-wrap {
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--space-4));
    padding: 0 var(--space-4);
  }

  /* Plan board: full width with horizontal scroll */
  .plan-board { padding-bottom: var(--space-4); }
  .plan-column { min-width: 200px; }

  /* Team detail: stack grid on mobile */
  .td-grid-layout { grid-template-columns: 1fr !important; }
  .td-sidebar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
  }

  /* Aufstellung: stack partie grids on mobile */
  .auf-partie-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .aufstellung-slot input[type="number"] { min-height: 44px; font-size: 16px; }

  /* Sticky footer for actions */
  .page-zone-footer {
    position: fixed;
    bottom: 60px;
    left: 0;
    right: 0;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  }

  /* Search bar: full width on mobile */
  .search-bar .form-input { max-width: 100%; }

  /* ── Bottom-Sheet Modals ──────────────────────────────────── */
  .modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .modal {
    max-width: 100%;
    max-height: 85vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    animation: modal-slide-up 0.25s ease-out;
  }
  @keyframes modal-slide-up {
    from { transform: translateY(100%); opacity: 0.8; }
    to   { transform: translateY(0);    opacity: 1; }
  }
  .modal-header { padding: 16px 20px 12px; }
  .modal-body { padding: var(--space-4) var(--space-5); }
  .modal-footer { padding: var(--space-3) var(--space-5); padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0)); }

  /* Drag-handle indicator for bottom-sheet */
  .modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    margin: var(--space-2) auto 0;
  }

  /* ── Touch-Targets: min 44px ──────────────────────────────── */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }
  .form-input, .form-select { min-height: 44px; font-size: 16px; /* prevents iOS zoom */ }
  .tab-btn { min-height: 44px; padding: var(--space-3) var(--space-4); }
  .nav-item { min-height: 44px; }
  td, th { padding: 12px 14px; }
  .badge { padding: 4px 8px; }

  /* Plan cards: bigger touch target on mobile */
  .plan-card { min-height: 44px; padding: var(--space-3); }

  /* D&D disabled on mobile — tap-to-move only */
  .plan-card { cursor: pointer; }
  .plan-card:active { cursor: pointer; }
  .plan-column-header { min-height: 44px; cursor: pointer; }

  /* Toast above bottom-tab-bar */
  #toast { bottom: 80px; }
}