[hidden] { display: none !important; }

:root {
  color-scheme: dark;
  --bg: #0f1115;
  --bg-soft: #141923;
  --card: #171c24;
  --text: #e7eaf0;
  --muted: #a4adbc;
  --accent: #e04b3f;
  --accent-2: #ff6a5e;
  --warning: #e0621c;
  --warning-2: #f07a2c;
  --border: #2a313d;
  --shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
  --radius: 14px;
  --radius-sm: 10px;
  --input: #10141b;
  --container-max: 2400px;
}

* {
  box-sizing: border-box;
}

/* App-level display size. CSS zoom affects layout and closely matches the
   browser zoom users lose when the app runs from the home screen. */
html[data-ui-scale="compact"] body {
  zoom: .9;
  width: 111.111111%;
}

html[data-ui-scale="large"] body {
  zoom: 1.1;
  width: 90.909091%;
}

/* iOS calculates percentage widths inconsistently while CSS zoom changes at
   runtime. Tie the compensated mobile canvas to the visual viewport instead,
   so every scale still occupies exactly one screen and cannot drift sideways. */
@media (max-width: 720px) {
  html[data-ui-scale] {
    max-width: 100%;
    overflow-x: hidden;
    overflow-x: clip;
    overscroll-behavior-x: none;
  }

  html[data-ui-scale="compact"] body {
    width: 111.111111vw;
    min-width: 111.111111vw;
    max-width: 111.111111vw;
    margin-inline: 0;
  }

  html[data-ui-scale="standard"] body {
    zoom: 1;
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    margin-inline: 0;
  }

  html[data-ui-scale="large"] body {
    width: 90.909091vw;
    min-width: 90.909091vw;
    max-width: 90.909091vw;
    margin-inline: 0;
  }
}

a, button, [role="button"], input[type="submit"], input[type="button"], input[type="reset"], label, select, [onclick] {
  touch-action: manipulation;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: "Space Grotesk", "IBM Plex Sans", "Manrope", sans-serif;
  background-color: #0b0d12;
  background-image: linear-gradient(135deg,
    rgba(224, 75, 63, 0.15) 0%,
    rgba(224, 75, 63, 0.132) 4%,
    rgba(224, 75, 63, 0.115) 9%,
    rgba(224, 75, 63, 0.1) 13%,
    rgba(224, 75, 63, 0.086) 17%,
    rgba(224, 75, 63, 0.073) 22%,
    rgba(224, 75, 63, 0.062) 26%,
    rgba(224, 75, 63, 0.052) 30%,
    rgba(224, 75, 63, 0.043) 35%,
    rgba(224, 75, 63, 0.035) 39%,
    rgba(224, 75, 63, 0.028) 43%,
    rgba(224, 75, 63, 0.022) 48%,
    rgba(224, 75, 63, 0.017) 52%,
    rgba(224, 75, 63, 0.013) 57%,
    rgba(224, 75, 63, 0.01) 61%,
    rgba(224, 75, 63, 0.0075) 65%,
    rgba(224, 75, 63, 0.0055) 70%,
    rgba(224, 75, 63, 0.004) 74%,
    rgba(224, 75, 63, 0.0028) 78%,
    rgba(224, 75, 63, 0.0019) 83%,
    rgba(224, 75, 63, 0.0012) 87%,
    rgba(224, 75, 63, 0.0007) 91%,
    rgba(224, 75, 63, 0.0003) 96%,
    rgba(224, 75, 63, 0) 100%);
  background-size: 100% 260px;
  background-repeat: repeat-y;
  background-attachment: fixed;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  right: -220px;
  bottom: -200px;
  width: 680px;
  height: 680px;
  background: url("/logo/logo-stflorian.svg") no-repeat center / contain;
  opacity: 0.015;
  filter: grayscale(1) blur(4px);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, rgba(224, 75, 63, 0.6) 0%, rgba(224, 75, 63, 0.15) 38%, rgba(224, 75, 63, 0) 72%);
  pointer-events: none;
  z-index: 0;
}


h1,
h2,
h3 {
  font-weight: 600;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

a {
  color: var(--accent);
  text-decoration: none;
}

@media (hover: hover) {
  a {
    transition: color 0.2s ease;
  }
  a:hover {
    color: var(--accent-2);
  }
}

.container {
  width: calc(100vw - 32px);
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.app-header {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 22px;
}

@media (max-width: 1100px) {
  .app-header {
    gap: 8px 12px;
    margin-bottom: 14px;
  }
  .logo {
    height: 48px;
  }
  .brand {
    gap: 10px;
  }
  .brand-title {
    font-size: 18px;
  }
  .page-title {
    font-size: 14px;
    margin-top: 2px;
  }
  .subtitle {
    font-size: 11px;
    margin-top: 2px;
  }
}

@media (max-width: 640px) {
  .logo {
    height: 36px;
  }
  .brand-title {
    font-size: 16px;
  }
  .page-title {
    font-size: 13px;
  }
  .subtitle {
    font-size: 10px;
  }
}

/* Drei echte Grid-Spalten (aussen gleich breit) statt Flex+Platzhalter-Trick:
   die Marke steht dadurch in jeder Fensterbreite exakt in der Mitte, unabhaengig
   davon, wie breit Trigger links bzw. Action-Buttons rechts sind. */
.app-header.has-account-menu {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

@media (min-width: 861px) {
  .app-header.has-account-menu .logo {
    height: 54px;
  }

  .app-header.has-account-menu .brand-title {
    font-size: 20px;
  }

  .app-header.has-account-menu .page-title {
    font-size: 14.5px;
  }

  .app-header.has-account-menu .subtitle {
    font-size: 11px;
  }

  /* Feste Breite statt content-abhaengiger Breite: haelt den Textblock (und damit
     das Logo daneben) auf jeder Seite an derselben horizontalen Position, egal wie
     lang Seitentitel/Untertitel gerade sind. Passt die meisten realen Untertitel auf
     eine Zeile; nur Ausreisser umbrechen zweizeilig. */
  .app-header.has-account-menu .brand > div {
    width: 460px;
  }
}

.app-header.has-account-menu .btn.nav-drawer-trigger {
  grid-column: 1;
  justify-self: start;
  order: initial;
}

.app-header.has-account-menu .brand {
  grid-column: 2;
  justify-self: center;
  min-width: 0;
}

.app-header.has-account-menu .actions {
  grid-column: 3;
  justify-self: end;
  margin-top: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
  overflow-x: visible;
}

.app-header.has-account-menu .actions .btn,
.app-header.has-account-menu .actions button {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.brand {
  display: flex;
  align-items: center;
  gap: 16px;
}

.brand.brand-with-meta {
  align-items: flex-start;
}

.nav-break {
  flex-basis: 100%;
  height: 0;
}

.logo-link {
  display: inline-flex;
  text-decoration: none;
}

.logo-link:hover {
  opacity: 0.9;
}

.logo {
  height: 68px;
  width: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}

.brand-with-meta .logo {
  height: 80px;
}

.account-menu {
  position: relative;
  margin-left: 2px;
  align-self: flex-start;
  order: 3;
  z-index: 50;
}

.app-header.has-account-menu .actions .action-menu {
  margin-left: 0;
  align-self: center;
  order: initial;
}

.app-header.has-account-menu .actions .action-menu-panel {
  right: 0;
  left: auto;
  min-width: 220px;
}

.app-header.has-account-menu .actions .action-menu-panel .btn,
.app-header.has-account-menu .actions .action-menu-panel button {
  width: 100%;
  justify-content: center;
}

.account-menu-trigger {
  min-width: 36px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.account-menu-icon {
  font-size: 20px;
  line-height: 1;
}

.account-menu.is-open .account-menu-trigger {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 75, 63, 0.18);
}

.account-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(16, 22, 32, 0.98);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-menu-panel[hidden] {
  display: none !important;
}

.account-menu-panel form {
  margin: 0;
  width: 100%;
}

.account-menu-panel .btn,
.account-menu-panel button {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  min-height: 36px;
  padding: 7px 14px;
  font-size: 14px;
  line-height: 1.2;
  justify-content: center;
}

.brand-title {
  margin: 0;
  font-size: 24px;
  line-height: 1.02;
  letter-spacing: 0.4px;
}

.page-title {
  margin: 3px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.12;
  color: var(--text);
}

.subtitle {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.brand-copy-with-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand-copy-with-meta .page-title,
.brand-copy-with-meta .subtitle,
.brand-copy-with-meta .header-meta {
  margin: 0;
}

.header-meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
  letter-spacing: 0.01em;
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 22px;
}

.nav a {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 15px;
  transition: all 0.2s ease;
}

.nav a.active,
.nav a:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 75, 63, 0.18);
  transform: translateY(-1px);
}

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.login-card {
  max-width: 720px;
  margin: 0 auto;
}

/* Begrenzt Tipp-/Auswahlfelder auf eine angenehme Breite, ohne die Karte selbst
   schmaler zu machen - so bleiben Formular-Cards proportional zu den übrigen
   (vollbreiten) Cards der Seite, nur die Eingabeelemente stauchen nicht die
   ganze Fensterbreite. Textareas bleiben bewusst ausgenommen (mehr Platz zum Tippen). */
.narrow-inputs input:not([type="checkbox"]):not([type="radio"]),
.narrow-inputs select {
  max-width: 420px;
}

/* .password-field-wrap ist ein Block-Div ohne eigene Breitenbegrenzung - das Augen-Icon (absolut
   positioniert relativ zum Wrap) landete dadurch am Rand des vollbreiten Wraps statt im schmaleren,
   auf 420px begrenzten Input selbst. */
.narrow-inputs .password-field-wrap {
  max-width: 420px;
}

/* Einheitlicher hierarchischer Kategorie-Picker fuer Budget-Formulare. */
.category-picker {
  position: relative;
}

/* Picker-Dropdowns duerfen nicht vom allgemeinen .field-Container abgeschnitten werden. */
.field.category-picker-field {
  position: relative;
  z-index: 2;
  overflow: visible;
}

.category-picker .category-picker-results {
  position: absolute;
  z-index: 60;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  max-height: 260px;
  margin-top: 4px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--input);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.category-picker .category-picker-results.is-open {
  display: block;
}

.category-picker .category-picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.category-picker .category-picker-item:hover {
  background: rgba(255, 255, 255, 0.04);
}

.category-picker .category-picker-crumb {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}

.category-picker .category-picker-back {
  min-height: auto;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 400;
  text-align: left;
}

.category-picker .category-picker-back:hover {
  color: var(--text);
  background: none;
  box-shadow: none;
  transform: none;
}

.category-picker .category-picker-current {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}

.category-picker .category-picker-drill {
  flex-shrink: 0;
  margin: -10px -12px -10px 0;
  padding: 12px 16px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
}

.category-picker .category-picker-drill:hover {
  color: var(--accent-2);
  background: rgba(255, 255, 255, 0.05);
}

.category-picker .category-picker-path {
  color: var(--muted);
  font-size: 12px;
}

.card+.card {
  margin-top: 12px;
}

.section-title {
  margin: 22px 0 10px;
}

.summary-value {
  font-size: 30px;
  margin: 4px 0 0;
  line-height: 1.2;
}

.summary-value strong {
  font-size: 1em;
}

.muted-note {
  margin-top: 6px;
}

.muted-tight {
  margin-top: 0;
}

.dashboard-card {
  padding: 24px;
}

.dashboard-headline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.dashboard-kicker {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 4px;
}

.dashboard-headline h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 400;
}

.dashboard-home-link {
  min-height: 40px;
  min-width: 160px;
  padding: 10px 18px;
  font-size: 16px;
  font-weight: 700;
}

.dashboard-actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

.dashboard-action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 62px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(16, 22, 32, 0.95), rgba(12, 16, 24, 0.95));
  color: var(--text);
}

@media (hover: hover) {
  .dashboard-action {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  .dashboard-action:hover {
    color: var(--text);
    transform: translateY(-1px);
    border-color: rgba(224, 75, 63, 0.65);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, rgba(24, 33, 47, 0.97), rgba(18, 25, 35, 0.97));
  }
}

.dashboard-action:active {
  opacity: 0.75;
  transform: scale(0.97);
}

.dashboard-action-title {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
}

.dashboard-action-meta {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.dashboard-group-label {
  grid-column: 1 / -1;
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
  margin-top: 8px;
}

.dashboard-group-label:first-child {
  margin-top: 0;
}

/* iOS-Settings-Stil Navigation */
.nav-groups-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

.nav-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

.nav-group-header {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted);
  padding: 9px 14px 8px;
  background: rgba(255, 255, 255, 0.02);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .nav-item {
    transition: background 0.12s ease;
  }
  .nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
  }
}

.nav-item:active,
.nav-item.is-loading {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}


.nav-item-title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.nav-item-chevron {
  color: var(--muted);
  font-size: 17px;
  opacity: 0.5;
  flex-shrink: 0;
}


@media (max-width: 700px) {
  .nav-groups-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Off-Canvas-Navigationsmenü ---------- */

.btn.nav-drawer-trigger {
  min-width: 36px;
  width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  order: -3;
}

.nav-drawer-hoverzone {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 8px;
  z-index: 890;
}

@media (max-width: 860px) {
  .nav-drawer-hoverzone {
    display: none;
  }
}

.nav-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 10, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 900;
}

.nav-drawer-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(340px, 86vw);
  background: var(--bg-soft);
  border-right: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateX(-100%);
  transition: transform 0.25s cubic-bezier(.32, .72, 0, 1);
  z-index: 901;
  display: flex;
  flex-direction: column;
}

.nav-drawer.is-open {
  transform: translateX(0);
}

.nav-drawer-head {
  position: relative;
  z-index: 10;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.nav-drawer-head-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.nav-drawer-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: var(--text);
}

.nav-drawer-brand-logo {
  width: 30px;
  height: 36px;
  object-fit: contain;
  flex: 0 0 auto;
}

.nav-drawer-brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.nav-drawer-team {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-drawer-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Das Konto-Menue nutzt den Drawer-Kopf als Positionierungs-Rahmen statt sich
   selbst zu positionieren, damit das Panel innerhalb der schmalen Drawer-Breite bleibt. */
.nav-drawer-head-actions .account-menu {
  position: static;
  order: initial;
  align-self: center;
  margin-left: 0;
}

.nav-drawer-head-actions .btn.account-menu-trigger {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: var(--radius-sm);
}

.nav-drawer-head-actions .account-menu-icon {
  font-size: 16px;
}

.nav-drawer-head .account-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 16px;
  right: 16px;
  width: auto;
  min-width: 0;
}

.nav-drawer-title {
  font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
}

.nav-drawer-close {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

.nav-drawer-close:hover {
  color: var(--text);
  border-color: var(--accent);
}

.nav-drawer-search input {
  width: 100%;
  box-sizing: border-box;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 12px;
}

.nav-drawer-search input::placeholder {
  color: var(--muted);
}

.nav-drawer-search input:focus {
  outline: none;
  border-color: rgba(224, 75, 63, 0.55);
  box-shadow: 0 0 0 3px rgba(224, 75, 63, 0.14);
}

.nav-drawer-body {
  overflow-y: auto;
  padding: 14px 12px 24px;
  flex: 1;
  transition: opacity 0.15s ease;
}

.nav-drawer:has(.account-menu.is-open) .nav-drawer-body {
  opacity: 0.12;
  pointer-events: none;
}

.nav-drawer-groups {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.nav-drawer-groups .nav-group-header {
  border-bottom: 1px solid var(--border);
  background: transparent;
}

.nav-drawer-groups .nav-group-personal {
  border-color: rgba(224, 75, 63, 0.3);
}

.nav-drawer-groups .nav-group-personal .nav-group-header {
  color: var(--accent-2);
  border-bottom-color: rgba(224, 75, 63, 0.22);
}

.nav-drawer-groups .nav-item.is-current {
  background: rgba(255, 255, 255, 0.04);
  border-left: 2px solid var(--accent-2);
  padding-left: 12px;
  font-weight: 600;
}

.nav-drawer-groups .nav-item.is-current .nav-item-chevron {
  color: var(--accent-2);
  opacity: 1;
}

.nav-drawer-groups .nav-item.is-hidden {
  display: none;
}

.nav-drawer-groups .nav-group.is-hidden {
  display: none;
}

.nav-drawer-empty {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 18px 8px 0;
}

@media (prefers-reduced-motion: reduce) {
  .nav-drawer,
  .nav-drawer-backdrop {
    transition: none;
  }
}

.dashboard-footer-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}

.dashboard-logout {
  min-width: 132px;
  margin-top: 0;
}

.team-switcher {
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid rgba(77, 109, 155, 0.38);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(17, 24, 36, 0.92), rgba(12, 18, 28, 0.95));
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 12px 16px;
}

.team-switcher-current {
  min-width: 0;
}

.team-switcher-kicker {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.team-switcher-name {
  margin-top: 4px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
}

.team-switcher-form {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}

.team-switcher-form .field {
  min-width: 240px;
}

.team-switcher-form .field label {
  margin-bottom: 5px;
}

.team-switcher-form .btn {
  min-height: 44px;
}

.team-switcher-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.account-menu-panel-wide {
  min-width: 300px;
}

.account-menu-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 2px;
  border-bottom: 1px solid rgba(77, 109, 155, 0.28);
}

.account-menu-section-kicker {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.account-menu-section-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
}

.account-team-switch-form {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-team-switch-form .field {
  min-width: 0;
}

.account-team-switch-form .field label {
  margin-bottom: 5px;
}

.account-menu-section-note {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* Settings structure shared by the existing drawer and the redesign slice. */
.drawer-settings-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.drawer-settings-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* Theme switching is introduced on the three redesign pages first. */
.theme-segmented-control {
  display: none;
}

.ui-scale-segmented-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-soft);
}

.ui-scale-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  min-height: 48px;
  padding: 5px 4px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
}

.ui-scale-option strong {
  color: inherit;
  font-size: 12px;
}

.ui-scale-option span {
  font-size: 9px;
  font-weight: 600;
}

.ui-scale-option.is-selected {
  background: var(--card);
  color: var(--accent);
}

.redesign-page .theme-segmented-control,
.login-page .theme-segmented-control {
  display: grid;
}

/* User-Ansicht: Bankdaten dezent platzieren */
.bank-info {
  padding: 18px;
}

.bank-info .bank-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 8px;
}

.bank-info .bank-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 19px;
}

.duty-card {
  border-color: rgba(77, 109, 155, 0.38);
}

.duty-card h3 {
  margin-bottom: 8px;
}

.duty-card-active {
  border-color: rgba(224, 75, 63, 0.65);
  background: linear-gradient(180deg, rgba(68, 28, 30, 0.55), rgba(24, 20, 28, 0.95));
}

.duty-kicker {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 4px;
}

.duty-names {
  margin: 8px 0 0;
  font-size: 20px;
}

.duty-grid {
  align-items: end;
}

.duty-slot-item {
  margin-bottom: 10px;
}

.duty-slot-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  margin-bottom: 6px;
}

.duty-slot-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.duty-slot-row .btn {
  flex-shrink: 0;
}

.field label {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.field {
  min-width: 0;
  overflow: hidden;
}

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid.grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid.grid-1 {
  grid-template-columns: 1fr;
}

.grid.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid>.field {
  min-width: 0;
}

input,
select,
textarea {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.2;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  max-width: 100%;
}

/* Ankreuzfelder sind keine Textfelder: die Breitenregel oben blaeht sie sonst auf
   volle Spaltenbreite auf. Spezifischere Regeln (.switch, .checkbox-label) gewinnen
   weiterhin, weil sie spaeter stehen. */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-width: 0;
  max-width: none;
  min-height: 0;
  padding: 0;
  accent-color: var(--accent);
}

textarea {
  min-height: unset;
  resize: vertical;
}

input:disabled,
select:disabled,
textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--muted);
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
}

.checkbox input {
  width: 18px;
  height: 18px;
  margin: 0;
  min-height: auto;
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 6px;
}

.checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  user-select: none;
}

.checkbox-label input[type="checkbox"],
.checkbox-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.checkbox-label span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid var(--border);
  color: var(--muted);
  background: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.checkbox-label input:checked ~ span {
  background: rgba(224, 75, 63, 0.18);
  border-color: var(--accent);
  color: var(--accent-2);
}

/* ── AE-Terminart Toggle-Chips ── */
.ae-type-toggle-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ae-type-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  user-select: none;
}

.ae-type-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ae-type-toggle span {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  border: 1.5px solid var(--border);
  color: var(--text-muted);
  background: transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ae-type-toggle input:checked + span {
  color: #fff;
}

.ae-type-training input:checked + span {
  background: rgba(63, 185, 80, 0.25);
  border-color: #3fb950;
  color: #3fb950;
}

.ae-type-heimspiel input:checked + span {
  background: rgba(248, 81, 73, 0.2);
  border-color: #f85149;
  color: #f85149;
}

.ae-type-auswaerts input:checked + span {
  background: rgba(88, 166, 255, 0.2);
  border-color: #58a6ff;
  color: #58a6ff;
}

.ae-type-event input:checked + span {
  background: rgba(227, 176, 54, 0.2);
  border-color: #e3b036;
  color: #e3b036;
}

/* Physio kommt in der AE-Auswahl nicht vor, wohl aber in der Belastungssteuerung. Ohne eigene
   Regel bliebe der angehakte Zustand unsichtbar: die Grundregel darueber setzt nur eine weisse
   Schrift, und die stuende auf durchsichtigem Grund. Violett ist die Farbe, die das Physio-Modul
   ohnehin traegt. */
.ae-type-physio input:checked + span {
  background: rgba(173, 89, 199, 0.2);
  border-color: #ad59c7;
  color: #ad59c7;
}

.ae-status-anwesend input:checked + span {
  background: rgba(122, 223, 154, 0.2);
  border-color: #7adf9a;
  color: #7adf9a;
}

.ae-status-individuell input:checked + span {
  background: rgba(139, 148, 255, 0.2);
  border-color: #8b94ff;
  color: #8b94ff;
}

.ae-status-entschuldigt input:checked + span {
  background: rgba(240, 199, 101, 0.2);
  border-color: #f0c765;
  color: #f0c765;
}

.ae-status-fehlend input:checked + span {
  background: rgba(255, 123, 109, 0.2);
  border-color: #ff7b6d;
  color: #ff7b6d;
}

.ae-type-toggle:hover span {
  border-color: var(--text-muted);
  color: var(--text);
}

.ae-toggle-bool span {
  border-color: rgba(248,81,73,0.5);
  color: #f85149;
  background: rgba(248,81,73,0.08);
}
.ae-toggle-bool span::after {
  content: "Inaktiv";
}
.ae-toggle-bool input:checked + span {
  background: rgba(63,185,80,0.18);
  border-color: #3fb950;
  color: #3fb950;
}
.ae-toggle-bool input:checked + span::after {
  content: "Aktiv";
}

.table-row-link {
  color: var(--text);
  text-decoration: none;
}

.table-row-link:hover {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--text-muted);
  text-underline-offset: 2px;
}

.ae-override-select {
  font-size: 13px;
  padding: 4px 6px;
  min-width: 100px;
}

.fine-type-aggregate-control {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.fine-type-aggregate-cell {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fine-type-aggregate-switch {
  margin: 0;
}

.fine-type-aggregate-control .switch {
  display: inline-flex;
  width: 42px;
  height: 24px;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: inherit;
}

.fine-type-aggregate-control .switch-slider::before {
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
}

.fine-type-aggregate-control .switch input[type="checkbox"]:checked + .switch-slider::before {
  transform: translateX(18px);
}

.admin-fine-types-table th:nth-child(2),
.admin-fine-types-table td:nth-child(2),
.user-fine-types-table th:nth-child(2),
.user-fine-types-table td:nth-child(2) {
  width: 88px;
  max-width: 88px;
  text-align: right;
  padding-left: 6px;
  padding-right: 6px;
}

.admin-fine-types-table td:nth-child(2) input {
  text-align: right;
}

.admin-fine-types-table th:nth-child(3),
.admin-fine-types-table td:nth-child(3) {
  width: 126px;
  text-align: center;
  padding-left: 8px;
  padding-right: 8px;
}

.admin-fine-types-table th:nth-child(4),
.admin-fine-types-table td:nth-child(4) {
  width: 124px;
  padding-left: 8px;
  padding-right: 8px;
}

.admin-fine-types-table .inline.mobile-actions {
  justify-content: center;
}

.users-table th:nth-child(5),
.users-table td:nth-child(5) {
  width: 108px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;
}

.users-table td[data-label="Trainingskader"] .user-attendance-switch-row {
  justify-content: center;
}

.deleted-row {
  opacity: 0.65;
}

select {
  height: 36px;
}

input[type="date"] {
  text-align: left;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

input[type="datetime-local"] {
  text-align: left;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}

input[type="datetime-local"]::-webkit-date-and-time-value {
  text-align: left;
}

@media (max-width: 560px) {
  input[type="datetime-local"] {
    text-align: center;
  }
  input[type="datetime-local"]::-webkit-date-and-time-value {
    text-align: center;
  }
}

input[type="time"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

input[type="month"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

/* Keep number spinner controls visible and light on dark inputs. */
input[type="number"] {
  color-scheme: dark;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
  filter: invert(1);
}

input:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(224, 75, 63, 0.2);
}

.input-sm {
  max-width: 240px;
}

button {
  min-height: 36px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  touch-action: manipulation;
}

@media (hover: hover) {
  button {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  }
  button:hover {
    transform: translateY(-1px);
    background: var(--accent-2);
    box-shadow: 0 10px 24px rgba(224, 75, 63, 0.35);
  }
}

button:active {
  opacity: 0.75;
  transform: scale(0.97);
}

button.secondary {
  background: rgba(15, 20, 29, 0.8);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}

button.secondary:hover {
  border-color: var(--accent);
  color: var(--text);
}

button.warning {
  background: rgba(224, 98, 28, 0.16);
  border: 1px solid rgba(224, 98, 28, 0.55);
  color: #ffd3b0;
  box-shadow: none;
}

button.warning:hover {
  background: rgba(224, 98, 28, 0.32);
  border-color: rgba(224, 98, 28, 0.8);
}

button.danger {
  background: rgba(255, 106, 94, 0.15);
  border: 1px solid rgba(255, 106, 94, 0.4);
  color: #ffd7d3;
  box-shadow: none;
}

button.danger:hover {
  background: rgba(255, 106, 94, 0.3);
  border-color: rgba(255, 106, 94, 0.7);
}

button:disabled,
button[aria-disabled="true"] {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

button.is-loading,
.btn.is-loading,
.dashboard-action.is-loading,
.nav a.is-loading,
.nav-item.is-loading {
  opacity: 1;
  transform: translateY(-1px);
  border-color: var(--accent);
  background: var(--accent-2);
  color: #fff;
  box-shadow: 0 10px 24px rgba(224, 75, 63, 0.35);
  pointer-events: none;
}

.btn.secondary.is-loading,
button.secondary.is-loading,
.nav a.is-loading,
.nav-item.is-loading {
  background: rgba(224, 75, 63, 0.18);
  color: var(--text);
}

.nav-item.is-loading {
  transform: none;
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
}

button:disabled:hover,
button[aria-disabled="true"]:hover {
  transform: none;
  box-shadow: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(20, 25, 35, 0.95);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}

@media (hover: hover) {
  .btn {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }
  .btn:hover {
    transform: translateY(-1px);
    border-color: var(--accent);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35);
  }
}

.btn:active {
  opacity: 0.75;
  transform: scale(0.97);
}

.btn.secondary {
  background: rgba(15, 20, 29, 0.8);
}

.view-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 14px;
}

.view-toggle-btn[data-mode="stack"] {
  border-color: rgba(224, 75, 63, 0.58);
}


.table .btn,
.table td .btn,
.inline .btn {
  min-height: 40px;
  padding: 7px 12px;
  font-size: 14px;
}

.inline form input,
.inline form select {
  min-height: 40px;
  height: 40px;
}

.inline .btn,
.inline form .btn {
  white-space: nowrap;
}

.btn.warning {
  background: rgba(224, 98, 28, 0.12);
  border-color: rgba(224, 98, 28, 0.55);
  color: #ffd3b0;
}

.btn.warning:hover {
  background: rgba(224, 98, 28, 0.26);
  border-color: rgba(224, 98, 28, 0.8);
}

.btn.danger {
  background: rgba(255, 106, 94, 0.12);
  border-color: rgba(255, 106, 94, 0.5);
  color: #ffd7d3;
}

.btn.danger:hover {
  background: rgba(255, 106, 94, 0.28);
  border-color: rgba(255, 106, 94, 0.8);
}

.btn.ghost {
  background: transparent;
  border-style: dashed;
  border-color: rgba(255, 255, 255, 0.2);
  color: var(--muted);
}

.btn.ghost:hover {
  border-color: var(--accent);
  color: var(--text);
}

.tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.tab-btn {
  border: 1px solid var(--border);
  background: var(--bg-soft);
  color: var(--text);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
}

.tab-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.batch-section {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.attendance-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 8px;
}

.attendance-load-actions {
  width: 100%;
  justify-content: space-between;
}

.attendance-load-actions .attendance-load-day {
  margin-right: auto;
}

.attendance-load-actions .attendance-load-month {
  margin-left: auto;
}

.stats-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin-top: 20px;
}

.stat-card {
  padding: 16px 18px;
}

.stat-label {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
}

.stat-value {
  font-size: 28px;
  font-weight: 600;
  margin-top: 6px;
}

.stats-grid-user {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.stats-grid-user > .card + .card {
  margin-top: 0;
}

.stats-grid-user .stat-card {
  padding: 12px 14px;
}

.stats-grid-user .stat-label {
  font-size: 10px;
  letter-spacing: 0.09em;
}

.stats-grid-user .stat-value {
  font-size: 24px;
  line-height: 1.2;
  margin-top: 4px;
}

@media (max-width: 1360px) {
  .stats-grid-user {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .stats-grid-user {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.batch-title {
  font-weight: 600;
  font-size: 16px;
}

.batch-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.batch-row {
  display: grid;
  gap: 12px;
  align-items: end;
  padding: 14px 14px 4px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.02);
}

.batch-row-player {
  grid-template-columns: 1.8fr 1.8fr 1fr 0.7fr auto;
}

.batch-row-type {
  grid-template-columns: 2fr 0.7fr auto;
}

.batch-row-list {
  grid-template-columns: 2fr 2fr 0.7fr auto;
}

.amount-input-wrap {
  position: relative;
}

.amount-input-wrap .amount-input {
  padding-right: 34px;
}

.amount-sign-toggle {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  min-height: unset;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--input);
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.amount-sign-toggle:hover,
.amount-sign-toggle:focus-visible {
  transform: translateY(-50%);
  color: var(--text);
  border-color: var(--accent);
}

.amount-sign-toggle:active {
  transform: translateY(-50%) scale(0.97);
}

.field-actions {
  display: flex;
  justify-content: flex-end;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

input.readonly {
  opacity: 0.85;
  background: #0f141d;
}

.row-actions form {
  display: inline;
}

.table-wrap td .account-menu,
.table-scroll td .account-menu,
.week-grid td .account-menu {
  z-index: 1;
}

.table-wrap td .account-menu.is-open,
.table-scroll td .account-menu.is-open,
.week-grid td .account-menu.is-open {
  z-index: 280;
}

.table-wrap {
  width: 100%;
}

.ticketing-table-wrap {
  overflow-x: auto;
}

.ticketing-table {
  table-layout: fixed;
}

.ticketing-table th,
.ticketing-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.ticketing-table .ticketing-actions {
  text-align: right;
  white-space: nowrap;
  overflow: visible;
}

.ticketing-table .ticketing-actions form {
  margin-left: 4px;
}

.table-wrap > table {
  border-collapse: separate;
  border-spacing: 0;
  overflow: visible;
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.table th,
.table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: middle;
}

.table td {
  font-size: 13px;
}

.eq-table th {
  padding: 8px 12px;
}

.table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  background: #121723;
}

.table td code {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(93, 164, 255, 0.35);
  background: rgba(93, 164, 255, 0.12);
  color: #d7e6ff;
  font-size: 0.88em;
  line-height: 1.25;
}

.table td.empty {
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  font-style: italic;
  padding: 14px 12px;
}


/* Nur fuer Geraete mit echtem Zeiger: Auf Touch bleibt :hover nach einem Tipp
   haften, und die Zeile behaelt ihre Hervorhebung, bis woanders getippt wird.
   Farbe aus dem Token, damit sie im hellen Theme nicht dunkel bleibt. */
@media (hover: hover) {
  .table tbody tr:hover {
    background: var(--hover-bg, #1c2230);
  }
}

.table tbody tr.current-week {
  background: rgba(224, 75, 63, 0.16);
  box-shadow: inset 0 0 0 1px rgba(224, 75, 63, 0.45);
}

.table tbody tr.current-week:hover {
  background: rgba(224, 75, 63, 0.24);
}

.table tbody tr.current-week td:first-child {
  border-left: 3px solid var(--accent-2);
}

.table tbody tr.squad-own-row {
  background: rgba(224, 75, 63, 0.16);
  box-shadow: inset 0 0 0 1px rgba(224, 75, 63, 0.45);
}

.table tbody tr.squad-own-row:hover {
  background: rgba(224, 75, 63, 0.24);
}

.table tbody tr.squad-own-row td:first-child {
  border-left: 3px solid var(--accent-2);
}

.btn.secondary.is-current {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(224, 75, 63, 0.2);
}

.actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

.actions form {
  margin: 0;
}

.actions.mt-0 {
  margin-top: 0;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
}

.app-modal-backdrop {
  position: fixed;
  inset: 0;
  /* iOS (v.a. als "Zum Home-Bildschirm"-PWA im Standalone-Modus): inset:0 auf einem fixed-Element
     berechnet die Hoehe teils gegen den falschen Viewport (Layout- statt Visual-Viewport), wodurch
     der untere Rand abgeschnitten und unerreichbar wird, obwohl overflow-y:auto gesetzt ist. Explizite
     dvh-Hoehe (faellt auf 100vh zurueck, wo dvh nicht unterstuetzt wird) erzwingt die tatsaechlich
     sichtbare Hoehe. */
  height: 100vh;
  height: 100dvh;
  background: rgba(4, 8, 18, 0.72);
  display: flex;
  flex-direction: column;
  /* "safe center": faellt bei Ueberlauf auf Start-Ausrichtung zurueck statt zu zentrieren -
     reines "center" macht den Bereich vor der zentrierten Position bei hohem Modal-Inhalt
     (z.B. Schnellticket mit vielen Feldern) auf manchen Mobile-Browsern unerreichbar/unscrollbar. */
  align-items: safe center;
  padding: 16px;
  z-index: 1000;
  /* Kein eigener Scroll-Container hier: verschachteltes overflow-y:auto (Backdrop UND Modal-Karte)
     wird von iOS im PWA-Standalone-Modus teils gar nicht als scrollbar erkannt (Touch-Geste komplett
     wirkungslos, kein Rubberbanding). Die Modal-Karte (.app-modal) ist der alleinige Scroll-Container. */
  overscroll-behavior: contain;
}

/* Verhindert, dass auf Mobile die Seite hinter einem offenen Modal scrollt,
   statt des Modal-Inhalts selbst (fehlender Body-Scroll-Lock war Root Cause). */
body:has(.app-modal-backdrop:not([hidden])) {
  overflow: hidden;
}

.app-modal-backdrop[hidden] {
  display: none !important;
}

.app-modal {
  width: min(860px, 100%);
  margin: auto;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Scroll direkt auf der Modal-Karte, als einziger Scroll-Container (siehe Kommentar am Backdrop).
     overflow-y:scroll statt auto + eigener Compositing-Layer (translateZ), da iOS im PWA-Standalone-
     Modus "auto" auf verschachtelten Containern teils erst nach Reflow als scrollbar erkennt und die
     Touch-Geste bis dahin ins Leere läuft. */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  transform: translateZ(0);
}

/* Die Modal-Karte traegt zusaetzlich die Klasse .card. Deren Mobile-Regel (".card { overflow:hidden }"
   unter @media max-width:640px) hat dieselbe Spezifitaet wie ".app-modal" und steht spaeter in der
   Datei, gewinnt also im Cascade und hebelt overflow-y:scroll komplett aus - genau auf Handy-Breiten,
   wo das Modal-Scrollen gebraucht wird. Hoehere Spezifitaet (zwei Klassen) erzwingt die Aufhebung. */
.card.app-modal {
  overflow-y: scroll;
}

.app-modal-body {
  width: 100%;
  min-width: 0;
}

.app-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.app-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color, #2a2d36);
}

.ticket-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .ticket-actions {
    flex-direction: column;
  }

  .ticket-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.app-modal-footer {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color, #2a2d36);
}

.app-modal .field {
  margin-bottom: 12px;
}

tr[data-invoice-detail-id],
tr[data-expense-claim-detail-id] {
  cursor: pointer;
}

.invoice-detail-modal {
  width: min(1000px, 100%);
}

.invoice-detail-subtitle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.invoice-detail-loading {
  padding: 32px 0;
  color: var(--muted);
  text-align: center;
}

.invoice-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.invoice-detail-section {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.015);
}

.invoice-detail-grid + .invoice-detail-section,
.invoice-detail-section + .invoice-detail-section,
.invoice-detail-section + .invoice-detail-actions {
  margin-top: 12px;
}

.invoice-detail-grid .invoice-detail-section {
  margin-top: 0;
}

.invoice-detail-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
}

.invoice-detail-primary {
  font-weight: 600;
}

.invoice-detail-muted {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}

.invoice-detail-facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.invoice-detail-facts > div {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 10px;
}

.invoice-detail-facts dt {
  color: var(--muted);
  font-size: 12px;
}

.invoice-detail-facts dd {
  margin: 0;
  font-weight: 600;
}

/* Modifier fuer kurze skalare Werte (Datum, Zaehler, Status): Fakten nebeneinander statt
   je eine volle Zeile - nutzt die Breite der Sektion aus, statt sie ungenutzt zu lassen. */
.invoice-detail-facts--row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.invoice-detail-facts--row > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.invoice-detail-facts--row dt {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.invoice-detail-facts > .detail-open-balance {
  margin: 2px -8px -6px;
  padding: 7px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
}

.invoice-detail-facts > .detail-open-balance.is-outstanding {
  background: rgba(248, 113, 113, 0.08);
  border-color: rgba(248, 113, 113, 0.22);
}

.detail-open-balance.is-outstanding dt {
  color: #f5a09a;
}

.detail-open-balance.is-outstanding dd,
.detail-open-balance.is-settled dd {
  font-weight: 700;
}

.invoice-detail-facts > .detail-open-balance.is-settled {
  background: rgba(74, 222, 128, 0.06);
  border-color: rgba(74, 222, 128, 0.16);
}

.detail-open-balance.is-settled dt {
  color: #87dca0;
}

/* Liste zugeordneter Geldbewegungen in den Detail-Dialogen. Wird sowohl vom Auslagen-Modal
   (Erstattungen/Rückzahlungen) als auch vom Rechnungs-Modal (Teil- und Rückzahlungen) genutzt -
   daher der neutrale Name statt des ursprünglichen expense-claim-Präfixes. */
.detail-booking-list {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.012);
}

.detail-booking-item {
  padding: 12px 14px;
}

.detail-booking-item + .detail-booking-item {
  border-top: 1px solid var(--border);
}

.detail-booking-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 16px;
  align-items: baseline;
}

.detail-booking-header > :last-child {
  white-space: nowrap;
}

.detail-booking-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.detail-booking-meta span + span::before {
  content: "Zeitraum ";
  color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.detail-booking-purpose {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid color-mix(in srgb, var(--border) 74%, transparent);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.invoice-detail-note > div {
  white-space: pre-wrap;
}

.overpayment-origin {
  border-color: color-mix(in srgb, var(--border) 72%, #c99048 28%);
  background:
    linear-gradient(135deg, rgba(201, 144, 72, 0.055), transparent 52%),
    rgba(255, 255, 255, 0.012);
}

.overpayment-origin-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}

.overpayment-origin-header h3 {
  margin-bottom: 0;
}

.overpayment-origin-label {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.035em;
}

.overpayment-origin-ledger {
  margin-top: 10px;
}

.overpayment-origin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 20px;
  padding: 11px 12px;
  border-top: 1px solid var(--border);
}

.overpayment-origin-row--booking {
  border-top: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: rgba(67, 195, 123, 0.045);
}

.overpayment-origin-row--invoice {
  background: rgba(255, 255, 255, 0.012);
}

.overpayment-origin-row--result {
  border-top-color: color-mix(in srgb, var(--border) 62%, #c99048 38%);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: rgba(201, 78, 72, 0.06);
}

.overpayment-origin-copy {
  min-width: 0;
}

.overpayment-origin-copy > * {
  display: block;
}

.overpayment-origin-copy strong {
  margin-top: 2px;
}

.overpayment-origin-copy small {
  margin-top: 3px;
  overflow-wrap: anywhere;
  color: var(--muted);
}

.overpayment-origin-type {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.overpayment-origin-deduction {
  color: var(--text);
  white-space: nowrap;
}

.invoice-detail-positions {
  width: 100%;
  min-width: 680px;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
}

.invoice-detail-positions th,
.invoice-detail-positions td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.invoice-detail-positions th {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.invoice-detail-positions th:nth-child(n + 2),
.invoice-detail-positions td:nth-child(n + 2) {
  width: 140px;
  text-align: right;
  white-space: nowrap;
}

.invoice-detail-positions tfoot td {
  border-bottom: none;
  font-weight: 700;
}

.invoice-detail-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.invoice-detail-actions form {
  margin: 0;
}

.invoice-detail-status-issued {
  color: #ffe5c2;
  border-color: rgba(207, 137, 48, 0.35);
  background: rgba(207, 137, 48, 0.2);
}

@media (max-width: 680px) {
  .invoice-detail-grid {
    grid-template-columns: 1fr;
  }

  .overpayment-origin-header {
    display: block;
  }

  .overpayment-origin-label {
    display: block;
    margin-top: 4px;
  }

  .overpayment-origin-row {
    gap: 10px;
    padding-inline: 8px;
  }
}

.calendar-settings-layout {
  display: grid;
  gap: 18px;
}

.calendar-settings-form {
  margin-top: 16px;
}

.calendar-settings-colors-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
}

.calendar-settings-color-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  color: var(--muted);
}

.calendar-settings-color-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.calendar-settings-color-input-wrap input[type="color"] {
  width: 42px;
  height: 42px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  background: var(--input);
}

.calendar-settings-share-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.calendar-settings-share-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr);
  gap: 14px;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-soft);
  padding: 14px;
}

.calendar-settings-team-name {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0;
}

.calendar-settings-share-types {
  display: grid;
  grid-template-columns: repeat(4, minmax(135px, 1fr));
  gap: 10px;
}

.calendar-settings-share-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  font-size: 0.85rem;
  min-height: 44px;
}

.calendar-settings-share-chip:hover {
  border-color: var(--accent);
}

.calendar-settings-share-chip input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.calendar-settings-share-chip input[type="checkbox"]:checked + span {
  color: var(--accent);
}

.calendar-settings-share-chip span {
  white-space: nowrap;
}

@media (max-width: 900px) {
  .calendar-settings-colors-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .calendar-settings-share-row {
    grid-template-columns: 1fr;
  }

  .calendar-settings-share-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .calendar-settings-colors-row {
    grid-template-columns: 1fr;
  }

  .calendar-settings-share-types {
    grid-template-columns: 1fr;
  }
}

.calendar-settings-save-actions {
  margin-top: 16px;
}

.calendar-settings-empty-state {
  margin-top: 0;
}

.empty-state {
  margin-top: 10px;
  padding: 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: rgba(12, 16, 24, 0.45);
  color: var(--muted);
}

.empty-state p {
  margin: 0;
}

.hint {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--muted);
}

.remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  color: var(--muted);
  font-size: 13px;
}

.pagination .actions {
  margin-top: 0;
}

.inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.inline form {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.inline.season-drafts-generate-controls,
.inline.season-drafts-publish-actions {
  justify-content: flex-start;
}

.season-drafts-generate-form {
  display: block;
}

.season-drafts-generate-dates {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.season-drafts-generate-actions,
.season-drafts-publish-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  width: auto;
}

.season-drafts-edit-time-field {
  margin-bottom: 10px;
}

.inline.season-drafts-publish-actions form {
  width: auto;
}

.inline.inline-actions .btn,
.inline.inline-actions button,
.inline.mobile-actions .btn,
.inline.mobile-actions button {
  min-height: 40px;
  padding: 7px 12px;
  font-size: 14px;
  line-height: 1.2;
}

.strafen-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.strafen-row-actions form {
  margin: 0;
}

.strafen-row-actions button {
  white-space: nowrap;
  min-height: 40px;
  padding: 7px 12px;
  font-size: 14px;
}

.strafen-row-actions .row-action-menu {
  margin-left: 0;
  align-self: center;
  position: relative;
  z-index: 1;
}

.strafen-row-actions .row-action-menu.is-open {
  z-index: 280;
}

.strafen-row-actions .row-action-trigger {
  min-width: 40px;
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
}

.strafen-row-actions .row-action-trigger-icon {
  font-size: 22px;
  line-height: 1;
}

.strafen-row-actions .row-action-panel {
  right: 0;
  left: auto;
  min-width: 190px;
  z-index: 290;
  background: rgba(16, 22, 32, 0.995);
}

.strafen-row-actions .row-action-menu.open-up .row-action-panel {
  top: auto;
  bottom: calc(100% + 8px);
}

/* Ruhige, einheitliche Aktionsspalte fuer Tabellen mit klickbaren Zeilen. */
.compact-row-actions {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
}

.compact-row-actions .row-action-menu {
  position: relative;
  z-index: 1;
  margin-left: 0;
  align-self: center;
}

.compact-row-actions .row-action-menu.is-open {
  z-index: 280;
}

.compact-row-actions .row-action-trigger {
  width: 38px;
  min-width: 38px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
}

.compact-row-actions .row-action-trigger-icon {
  position: relative;
  top: -2px;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 1px;
}

.compact-row-actions .row-action-panel {
  right: 0;
  left: auto;
  min-width: 190px;
  z-index: 290;
  background: rgba(16, 22, 32, 0.995);
}

.compact-row-actions .row-action-panel .btn,
.compact-row-actions .row-action-panel button {
  justify-content: flex-start;
  text-align: left;
}

.compact-row-actions .row-action-menu.open-up .row-action-panel {
  top: auto;
  bottom: calc(100% + 8px);
}

.strafen-list-table th:last-child,
.strafen-list-table td:last-child {
  white-space: nowrap;
}

.teams-table td:last-child,
.team-members-table td:last-child,
.team-sharing-table td:last-child,
.calendar-sharing-rules-table td:last-child {
  white-space: nowrap;
}

.team-members-table th:nth-child(4),
.team-members-table td:nth-child(4),
.team-members-table th:nth-child(5),
.team-members-table td:nth-child(5) {
  width: 1%;
  white-space: nowrap;
  padding-left: 6px;
  padding-right: 6px;
}

.team-members-table th:nth-child(5),
.team-members-table td:nth-child(5) {
  text-align: center;
}

.team-sharing-table td[data-label="Bereich"] {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calendar-sharing-policy-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 8px;
}

.calendar-sharing-policy-head h3 {
  margin: 0;
}

.calendar-sharing-policy-subtitle {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.calendar-sharing-rules-table td[data-label="Termintyp"] {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.calendar-sharing-rules-table td[data-label="Farbe"] {
  text-align: center;
}

.calendar-target-label {
  min-width: 180px;
}

.calendar-color-field {
  width: 48px;
  min-width: 48px;
  height: 40px;
  min-height: 40px;
  padding: 4px;
  margin: 0 auto;
  display: block;
  cursor: pointer;
}

.calendar-sharing-save-actions {
  justify-content: flex-end;
}

.user-create-grid {
  align-items: end;
}

.user-create-password-note {
  margin-top: 10px;
  margin-bottom: 0;
}

.user-password-grid {
  align-items: start;
}

.user-password-current-field {
  grid-column: 1 / -1;
}

/* Userverwaltung: Actions als 2-zeiliges Grid (Desktop) */
.user-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas:
    "tag tag tag"
    "left passsave reset"
    "left save del";
  gap: 8px;
  width: 100%;
  align-items: stretch;
}

.user-actions .tag {
  grid-area: tag;
  justify-self: center;
}

.user-actions .user-left-stack {
  grid-area: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-self: center;
}

.user-actions .user-left-stack .input-sm {
  max-width: none;
}

.user-actions input,
.user-actions button {
  width: 100%;
}

.user-actions .user-pass-save {
  grid-area: passsave;
}

.user-actions .user-pass-reset {
  grid-area: reset;
}

.user-actions .user-save {
  grid-area: save;
}

.user-actions .user-delete {
  grid-area: del;
}

.user-edit-security-grid {
  align-items: start;
}

.user-edit-account-grid {
  align-items: stretch;
}

.user-edit-master-grid + .user-edit-master-grid {
  margin-top: 14px;
}

.user-edit-security-grid .field,
.user-edit-account-grid .field {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
  background: rgba(12, 16, 24, 0.45);
}

.user-edit-account-grid .field {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.user-account-password-field {
  min-height: 220px;
}

.user-account-actions-field {
  min-height: 220px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.user-account-action-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(10, 15, 24, 0.5);
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.user-account-action-title {
  margin: 0;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.user-account-action-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 34px;
  margin-bottom: 10px;
}

.user-master-attendance-row {
  min-height: 44px;
  padding-left: 12px;
  padding-right: 8px;
  display: flex;
  align-items: center;
}

.user-master-attendance-row.user-attendance-switch-row {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: flex-start;
  gap: 10px;
}

.user-edit-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.user-edit-security-grid .user-edit-stack .input-sm {
  max-width: 100%;
}

.user-account-password-form {
  margin-top: 10px;
}

.user-account-password-field > .user-account-password-form:first-of-type {
  margin-top: 6px;
}

.user-account-password-form input,
.user-account-password-form button {
  width: 100%;
}

.user-account-access-content,
.user-account-delete-content {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  text-align: left;
  gap: 10px;
  flex: 1;
}

.user-account-access-content form,
.user-account-delete-content form {
  width: 100%;
  display: flex;
  justify-content: stretch;
}

.user-account-access-content button,
.user-account-delete-content button {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

.user-account-access-content button.warning {
  background: rgba(240, 199, 101, 0.15);
  border-color: rgba(240, 199, 101, 0.4);
  color: #f0c765;
}

.user-account-access-content button.warning:hover {
  background: rgba(240, 199, 101, 0.28);
  border-color: rgba(240, 199, 101, 0.65);
}

.user-rights-actions {
  margin-top: 8px;
}

.user-teamdata-grid {
  align-items: start;
}

.user-teamdata-switch-field {
  grid-column: 1 / -1;
  max-width: 340px;
}

.user-teamdata-actions {
  margin-top: 14px;
  width: 100%;
  justify-content: space-between;
  align-items: stretch;
  gap: 14px;
}

.user-teamdata-actions-main {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.user-teamdata-actions-main form,
.user-teamdata-inline-switch form {
  margin: 0;
}

.user-teamdata-inline-switch {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.user-teamdata-inline-switch-form {
  display: inline-flex;
  align-items: center;
}

.user-teamdata-inline-switch-label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.user-teamdata-actions > button,
.user-teamdata-actions > .btn {
  min-height: 44px;
  padding-top: 9px;
  padding-bottom: 9px;
  justify-content: center;
}

.user-teamdata-link {
  min-width: 170px;
}

.user-delete-note {
  margin-top: 0;
}

.user-attendance-switch-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 860px) {
  .user-teamdata-actions {
    justify-content: flex-start;
  }

  .user-teamdata-inline-switch {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
  }
}

.user-attendance-switch-form {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.user-attendance-switch {
  margin: 0;
}

.user-attendance-switch-status {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1;
}

.user-master-attendance-row .user-attendance-switch-status {
  height: 22px;
  line-height: 22px;
  transform: translateY(-3px);
}

.user-attendance-switch-status.is-active {
  color: #9ee6b7;
}

.user-attendance-switch-status.is-inactive {
  color: #ffcfab;
}

.user-account-status {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.2;
}

.user-account-status-badge {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.user-account-status.is-active {
  color: #9ee6b7;
}

.user-account-status.is-inactive {
  color: #ffcfab;
}

.user-account-status-badge.is-active {
  background: rgba(122, 223, 154, 0.12);
  border-color: rgba(122, 223, 154, 0.38);
}

.user-account-status-badge.is-inactive {
  background: rgba(255, 123, 109, 0.12);
  border-color: rgba(255, 123, 109, 0.35);
}

.user-attendance-switch-disabled {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.users-table tr.user-inactive-row {
  opacity: 0.7;
}

@media (max-width: 980px) {
  .user-edit-account-grid .field {
    min-height: 0;
  }

  .user-account-password-field {
    min-height: 0;
  }

  .user-account-actions-field {
    min-height: 0;
    grid-template-rows: auto;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  .season-drafts-header {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .season-drafts-add-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    margin: 0;
  }

  .season-drafts-header > span {
    min-width: 0;
    text-align: left;
  }

  .inline.season-drafts-generate-controls,
  .inline.season-drafts-publish-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
  }

  .season-drafts-generate-form,
  .season-drafts-generate-dates,
  .season-drafts-generate-actions,
  .season-drafts-publish-actions {
    width: 100%;
  }

  .season-drafts-generate-dates,
  .season-drafts-generate-actions,
  .season-drafts-publish-actions {
    max-width: 420px;
    margin: 0 auto;
  }

  .season-drafts-generate-dates,
  .season-drafts-generate-actions,
  .season-drafts-publish-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    justify-items: stretch;
    align-items: center;
  }

  .season-drafts-generate-dates input,
  .season-drafts-generate-actions .btn,
  .season-drafts-publish-actions form,
  .season-drafts-publish-actions form button {
    width: 100%;
  }

  .season-drafts-generate-actions .btn,
  .season-drafts-publish-actions form button {
    justify-content: center;
    text-align: center;
  }

  .season-drafts-generate-dates input {
    text-align: center;
  }

  .season-drafts-generate-dates input::-webkit-date-and-time-value {
    text-align: center;
  }

  .season-drafts-publish-actions form {
    display: block;
    margin: 0;
  }
}

.msg {
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: .875rem;
  border-left: 3px solid;
}

.msg.success {
  color: #7adf9a;
  background: rgba(74, 222, 128, .08);
  border-color: #4ade80;
}

.msg.error {
  color: #ff7b6d;
  background: rgba(248, 113, 113, .08);
  border-color: #f87171;
}

.msg.warning {
  color: #f59e0b;
  background: rgba(245, 158, 11, .08);
  border-color: #f59e0b;
}

.text-success {
  color: #7adf9a;
}

.text-danger {
  color: #ff7b6d;
}

.text-warning {
  color: #f0c765;
}

/* Sortable Table Styles */
table[data-sortable] th {
  cursor: pointer;
  position: relative;
  padding-right: 20px;
  user-select: none;
}

table[data-sortable] th {
  user-select: none;
}

table[data-sortable] th:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

table[data-sortable] th.sort-asc::after,
table[data-sortable] th.sort-desc::after {
  content: attr(data-sort-label);
  position: absolute;
  right: 4px;
  font-size: 0.7em;
  opacity: 0.7;
}

:is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table) thead th {
  position: sticky;
  top: -1px;
  z-index: 30;
  background: var(--card);
  box-shadow: 0 1px 0 var(--border);
}

:is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table)[data-sortable] thead th:hover {
  background: var(--card);
}

:is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table) th:first-child,
:is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table) td:first-child {
  position: sticky;
  left: 0;
  background: var(--card);
}

:is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table) thead th:first-child {
  z-index: 31;
  border-top-left-radius: var(--radius);
  box-shadow: 0 1px 0 var(--border);
}

:is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table) thead th:last-child {
  border-top-right-radius: var(--radius);
}

:is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table) tbody td:first-child {
  z-index: 1;
  background: var(--card);
}


@media (hover: hover) {
  :is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table) tbody tr:hover td,
  :is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table) tbody tr:hover td:first-child {
    background: var(--hover-bg, #1c2230);
  }
}

:is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table) tbody tr.current-week td:first-child,
:is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table) tbody tr.squad-own-row td:first-child {
  background: #372428;
}

:is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table) tbody tr.current-week:hover td:first-child,
:is(.table-wrap > table, .table-scroll > table, .table-scroll > form > table, .week-grid > table) tbody tr.squad-own-row:hover td:first-child {
  background: #47272b;
}

.sticky-table-head-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  z-index: 9000;
  pointer-events: none;
  background: #0b0d12;
}

.sticky-table-head-mask.is-visible {
  visibility: visible;
}

.sticky-table-head {
  position: absolute;
  top: 0;
  display: block;
  overflow: hidden;
  pointer-events: none;
  border: 1px solid var(--border);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--card);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
}

.sticky-table-head.is-visible {
  display: block;
}

.sticky-table-head-scroll {
  overflow: hidden;
  max-width: 100%;
}

.sticky-table-head-first {
  position: absolute;
  top: 0;
  overflow: hidden;
  z-index: 3;
  border-top-left-radius: var(--radius);
  background: var(--card);
  box-shadow: 4px 0 0 var(--card);
}

.sticky-table-head table {
  border-collapse: collapse;
  margin: 0;
}

/* Das Skript misst jede Kopfzelle der echten Tabelle und schreibt ihre Breite
   auf die Kopie. Ohne festes Layout behandelt der Browser diese Angaben nur als
   Vorschlag und verteilt die Spalten nach Inhalt – die Trennlinien des
   mitlaufenden Kopfes lagen dadurch neben denen der Tabelle. */
.sticky-table-head-table {
  table-layout: fixed;
}

.sticky-table-head th {
  position: relative;
  background: var(--card);
  box-shadow: 0 1px 0 var(--border);
}

.sticky-table-head th:first-child {
  z-index: 2;
}

/* Attendance Sort Controls */
.attendance-sort-divider {
  color: var(--muted);
  opacity: 0.4;
  user-select: none;
  align-self: center;
}

.js-sort-attendance.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.attendance-sort-readonly {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

/* Attendance Day Stats */
.attendance-day-stats {
  margin: 12px 0;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.attendance-day-stats:empty {
  display: none;
}

.day-stats-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  font-size: 14px;
}

.day-stats-line+.day-stats-line {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.day-stat {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
}

.day-stat-label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.day-stat-value {
  font-weight: 700;
  font-size: 16px;
}

.stat-anwesend {
  color: #7adf9a;
}

.stat-entschuldigt {
  color: #f0c765;
}

.stat-fehlend {
  color: #ff7b6d;
}

.stat-individuell {
  color: #8b94ff;
}

.day-stat-pos {
  display: inline-flex;
  gap: 3px;
  padding: 2px 8px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  font-size: 13px;
}

.day-stats-summary {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px 18px;
  align-items: baseline;
  overflow-x: auto;
  scrollbar-width: thin;
}

.day-stats-summary .day-stat {
  min-width: 0;
  white-space: nowrap;
}

.day-stats-positions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  scrollbar-width: thin;
}

.day-stats-positions .day-stat-label,
.day-stats-positions .day-stat-pos {
  white-space: nowrap;
}

.day-stats-pos-divider {
  color: var(--border);
  padding: 0 4px;
  font-size: 13px;
  user-select: none;
  align-self: center;
}

@media(max-width:600px) {
  .attendance-day-stats {
    padding: 10px 12px;
  }

  .day-stats-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
  }

  .day-stats-summary .day-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
    white-space: normal;
  }

  .day-stats-summary .day-stat-label {
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
  }

  .day-stats-summary .day-stat-value {
    font-size: 18px;
    line-height: 1;
  }

  .day-stats-positions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
  }

  .day-stats-positions .day-stat-pos {
    gap: 2px;
    min-width: 0;
    padding: 2px 4px;
    font-size: 11px;
    white-space: nowrap;
  }
}

.tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(224, 75, 63, 0.18);
  border: 1px solid rgba(224, 75, 63, 0.4);
  color: #ffd7d3;
  margin-left: 6px;
}

.muted {
  color: var(--muted);
}

.app-footer {
  margin-top: 28px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  opacity: 0.75;
}

@media (max-width: 980px) {
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-actions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-action-title {
    font-size: 18px;
  }

  .dashboard-home-link {
    min-height: 58px;
    font-size: 20px;
  }

  .stats-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .logo {
    height: 80px;
  }

  .brand-title {
    font-size: 32px;
  }

  .page-title {
    font-size: 22px;
  }
}

@media (min-width: 961px) {
  .dashboard-card {
    padding: 30px;
  }

  .dashboard-logout {
    min-height: 54px;
    padding: 14px 24px;
    font-size: 16px;
  }
}

@media (max-width: 860px) {
  .container {
    max-width: none;
    width: 100%;
    padding: 22px 12px 44px;
  }

  .app-header {
    align-items: flex-start;
  }

  .app-header.has-account-menu {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand trigger"
      "actions actions";
    column-gap: 6px;
    row-gap: 8px;
    align-items: center;
  }

  .app-header.has-account-menu::before {
    display: none;
  }

  .app-header.has-account-menu .btn.nav-drawer-trigger {
    grid-area: trigger;
    align-self: center;
    order: initial;
  }

  .app-header.has-account-menu .brand {
    grid-area: brand;
    flex: none;
    min-width: 0;
    justify-self: start;
  }

  .actions {
    width: 100%;
    justify-content: flex-start;
  }

  .app-header.has-account-menu .actions {
    grid-area: actions;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    align-self: start;
    justify-content: flex-end;
    overflow-x: visible;
    overflow-y: visible;
  }

  .app-header.has-account-menu.actions-split-lines .actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
  }

  .app-header.has-account-menu.actions-split-lines .actions .actions-secondary-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
  }

  .app-header.has-account-menu .actions .action-menu-panel {
    right: auto;
    left: 0;
  }

  .actions.attendance-load-actions {
    justify-content: space-between;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 13px;
  }

  /* iOS Safari zoomt beim Fokussieren von Inputs mit font-size < 16px automatisch
     hinein und bleibt danach gezoomt, wodurch der untere Seitenbereich nicht mehr
     erreichbar ist (Scroll bezieht sich auf den ungezoomten Layout-Viewport). */
  input,
  select,
  textarea {
    font-size: 16px;
  }

  .container {
    width: min(100vw - 14px, var(--container-max));
    padding: 10px 7px 28px;
  }

  .app-header {
    gap: 10px 12px;
  }

  .brand {
    gap: 14px;
  }

  .dashboard-headline {
    align-items: flex-start;
  }

  .dashboard-headline .btn {
    width: 100%;
  }

  .dashboard-home-link {
    font-size: 16px;
    min-height: 48px;
    min-width: 0;
  }

  .dashboard-actions-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-action {
    min-height: 76px;
    padding: 11px 12px;
  }

  .dashboard-action-title {
    font-size: 16px;
  }

  .dashboard-action-meta {
    font-size: 13px;
  }

  .team-switcher {
    padding: 12px;
    gap: 10px;
  }

  .team-switcher-name {
    font-size: 20px;
  }

  .team-switcher-form {
    width: 100%;
  }

  .team-switcher-form .field,
  .team-switcher-form .btn {
    width: 100%;
  }

  .logo {
    height: 60px;
  }

  .brand-with-meta .logo {
    height: 68px;
  }

  .brand-title {
    font-size: 19px;
  }

  .page-title {
    font-size: 15px;
  }

  .subtitle {
    font-size: 9px;
  }

  .dashboard-headline h3 {
    font-size: 20px;
  }

  .dashboard-footer-actions {
    justify-content: stretch;
  }

  .dashboard-footer-actions form,
  .dashboard-footer-actions button {
    width: 100%;
  }

  input,
  select {
    min-height: 40px;
    font-size: 15px;
    padding: 7px 10px;
  }

  select {
    height: 40px;
  }

  button {
    min-height: 40px;
    font-size: 13px;
    padding: 7px 10px;
  }

  .bank-info .bank-details {
    font-size: 15px;
  }

  .summary-value {
    font-size: 25px;
  }

  .duty-names {
    font-size: 17px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .grid.grid-2,
  .grid.grid-3 {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
  }

  .stat-value {
    font-size: 20px;
  }

  .input-sm {
    max-width: 100%;
  }

  .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .app-header.has-account-menu .actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    overflow-x: visible;
  }

  .actions.attendance-load-actions {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .actions .btn,
  .actions button {
    width: 100%;
    justify-content: center;
  }

  .app-header.has-account-menu .actions .btn,
  .app-header.has-account-menu .actions button {
    width: auto;
    min-height: 38px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .account-menu-trigger {
    min-width: 38px;
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .actions.attendance-load-actions .btn,
  .actions.attendance-load-actions button {
    width: calc(50% - 5px);
  }

  /* Tab-Leisten stapeln auf dem Handy nicht mehr; sie teilen sich die Breite
     (siehe app-redesign.css, Abschnitt Tab-Leisten). */

  .attendance-toolbar {
    flex-direction: column;
  }

  .attendance-toolbar .btn {
    width: 100%;
    justify-content: center;
  }

  .batch-row,
  .batch-row-player,
  .batch-row-type,
  .batch-row-list {
    grid-template-columns: 1fr;
  }

  .field-actions {
    justify-content: stretch;
  }

  .field-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .inline {
    flex-direction: column;
    align-items: stretch;
  }

  .inline form {
    width: 100%;
  }

  .inline form input,
  .inline form select,
  .inline form button {
    width: 100%;
  }

  .inline.inline-actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .inline.inline-actions form {
    width: auto;
    flex: 0 1 auto;
  }

  .inline.inline-actions form button {
    width: auto;
  }

  .inline.mobile-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  .inline.mobile-actions form {
    width: 100%;
  }

  .inline.mobile-actions form button {
    width: 100%;
  }

  .action-center {
    justify-items: center;
    align-items: center;
  }

  .user-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "tag tag"
      "left left"
      "passsave reset"
      "save del";
  }

  .user-action-form {
    display: none;
  }

  .user-attendance-switch-form {
    min-width: 0;
    width: 100%;
    justify-content: space-between;
  }

  .nav a {
    flex: 1 1 100%;
    text-align: center;
  }

  .card {
    padding: 12px;
    overflow: hidden;
  }

  .card h3 {
    font-size: 21px;
    margin-bottom: 10px;
  }
}

@media (max-width: 720px) {
  .app-modal .table-wrap {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .app-modal .table,
  .app-modal .table tbody,
  .app-modal .table tr {
    min-width: 100%;
    box-sizing: border-box;
  }

  .table thead {
    display: none;
  }

  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
    width: 100%;
  }

  .table tr {
    margin-bottom: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #121723;
  }

  .table td {
    border: none;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 16px;
    font-size: 14px;
  }

  .table td::before {
    content: attr(data-label);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
  }

  .table td:last-child {
    border-bottom: none;
  }

  .table td.empty {
    display: block;
    text-align: center;
  }

  .table td.empty::before {
    display: none;
  }

  .teams-table td:last-child .inline,
  .team-members-table td:last-child .inline,
  .team-sharing-table td:last-child .inline,
  .calendar-sharing-rules-table td:last-child .inline {
    width: 100%;
  }

  .calendar-target-label {
    min-width: 0;
  }

  .calendar-color-field {
    margin: 0;
  }

  .app-modal-actions {
    flex-direction: column-reverse;
  }

  .app-modal-actions .btn,
  .app-modal-actions button {
    width: 100%;
    justify-content: center;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 1024px) {
  .season-template-table input[type="time"],
  #editPanel input[type="time"] {
    appearance: auto;
    -webkit-appearance: auto;
    background: var(--input);
    color: var(--text);
    color-scheme: dark;
  }

  .season-template-table input[type="time"]::-webkit-date-and-time-value,
  #editPanel input[type="time"]::-webkit-date-and-time-value {
    text-align: left;
  }

  .user-create-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .view-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .stats-grid-user {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .stats-grid-user .stat-card {
    flex: 0 0 122px;
    min-width: 122px;
    margin-top: 0;
  }

  .app-header .actions {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .app-header .actions .btn,
  .app-header .actions button {
    width: auto;
    min-height: 38px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .account-menu-trigger {
    min-width: 38px;
    width: 38px;
    height: 38px;
    min-height: 38px;
  }

  .account-menu-panel .btn,
  .account-menu-panel button {
    min-height: 38px;
    padding: 7px 10px;
    font-size: 13px;
  }

  .account-menu-panel {
    width: min(240px, calc(100vw - 28px));
  }

  .account-menu-panel.account-menu-panel-wide {
    width: min(320px, calc(100vw - 28px));
  }

  .table-wrap,
  .table-scroll,
  .week-grid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--card);
    border-radius: var(--radius);
  }

  .users-table {
    min-width: 760px;
  }

  .attendance-user-table {
    min-width: 620px;
  }

  .user-home-table {
    min-width: 560px;
  }

  .user-fine-types-table {
    min-width: 420px;
  }

  .admin-fine-types-table {
    min-width: 500px;
  }

  .attendance-stats-table {
    min-width: 680px;
  }

  .strafen-list-table {
    min-width: 700px;
  }

  .duties-table {
    min-width: 660px;
  }

  .season-template-table {
    min-width: 560px;
  }

  .season-drafts-table {
    min-width: 500px;
  }

  .summary-table {
    min-width: 500px;
  }

  .table thead,
  .users-table thead,
  .attendance-user-table thead,
  .user-home-table thead,
  .user-fine-types-table thead,
  .admin-fine-types-table thead,
  .attendance-stats-table thead,
  .strafen-list-table thead,
  .duties-table thead,
  .season-template-table thead,
  .season-drafts-table thead,
  .summary-table thead,
  .teams-table thead,
  .team-members-table thead,
  .eq-table thead {
    display: table-header-group;
  }

  .table,
  .users-table,
  .attendance-user-table,
  .user-home-table,
  .user-fine-types-table,
  .admin-fine-types-table,
  .attendance-stats-table,
  .strafen-list-table,
  .duties-table,
  .season-template-table,
  .season-drafts-table,
  .summary-table,
  .teams-table,
  .team-members-table,
  .eq-table {
    display: table;
    width: max-content;
    border-collapse: collapse;
  }

  .teams-table {
    min-width: 450px;
  }

  .team-members-table {
    min-width: 550px;
  }

  .user-home-table,
  .user-fine-types-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
  }

  .eq-table {
    width: 100%;
    min-width: 0;
  }

  .strafen-list-table {
    width: 100%;
    min-width: 0;
  }

  .table tbody,
  .users-table tbody,
  .attendance-user-table tbody,
  .user-home-table tbody,
  .user-fine-types-table tbody,
  .admin-fine-types-table tbody,
  .attendance-stats-table tbody,
  .strafen-list-table tbody,
  .duties-table tbody,
  .season-template-table tbody,
  .season-drafts-table tbody,
  .summary-table tbody,
  .teams-table tbody,
  .team-members-table tbody,
  .eq-table tbody {
    display: table-row-group;
  }

  .table tr,
  .users-table tr,
  .attendance-user-table tr,
  .user-home-table tr,
  .user-fine-types-table tr,
  .admin-fine-types-table tr,
  .attendance-stats-table tr,
  .strafen-list-table tr,
  .duties-table tr,
  .season-template-table tr,
  .season-drafts-table tr,
  .summary-table tr,
  .teams-table tr,
  .team-members-table tr,
  .eq-table tr {
    display: table-row;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
  }

  .table th,
  .table td,
  .users-table th,
  .users-table td,
  .attendance-user-table th,
  .attendance-user-table td,
  .user-home-table th,
  .user-home-table td,
  .user-fine-types-table th,
  .user-fine-types-table td,
  .admin-fine-types-table th,
  .admin-fine-types-table td,
  .attendance-stats-table th,
  .attendance-stats-table td,
  .strafen-list-table th,
  .strafen-list-table td,
  .duties-table th,
  .duties-table td,
  .season-template-table th,
  .season-template-table td,
  .season-drafts-table th,
  .season-drafts-table td,
  .summary-table th,
  .summary-table td,
  .teams-table th,
  .teams-table td,
  .team-members-table th,
  .team-members-table td,
  .eq-table th,
  .eq-table td {
    display: table-cell;
    width: auto;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    white-space: nowrap;
    vertical-align: middle;
  }

  .table td::before,
  .users-table td::before,
  .attendance-user-table td::before,
  .user-home-table td::before,
  .user-fine-types-table td::before,
  .admin-fine-types-table td::before,
  .attendance-stats-table td::before,
  .season-template-table td::before,
  .season-drafts-table td::before,
  .strafen-list-table td::before,
  .duties-table td::before,
  .summary-table td::before,
  .teams-table td::before,
  .team-members-table td::before,
  .eq-table td::before {
    display: none;
    content: none;
  }

  /* Keep row separators visible in compact table mode even at high zoom. */
  .table td:last-child {
    border-bottom: 1px solid var(--border);
  }

  .user-home-table th,
  .user-home-table td,
  .user-fine-types-table th,
  .user-fine-types-table td {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .users-table td[data-label="Name"] {
    min-width: 150px;
    white-space: normal;
  }

.users-table .user-attendance-switch-form {
    gap: 0;
  }

  .users-table .user-attendance-switch-row {
    justify-content: flex-start;
  }

}


@media (max-width: 420px) {
  body.mobile-layout-stack .user-create-grid {
    grid-template-columns: 1fr;
  }

  body.mobile-layout-stack .stats-grid-user {
    grid-template-columns: 1fr;
  }
}


/* ── Status-colored selects ── */
select.status-anwesend {
  background-color: rgba(122, 223, 154, 0.15);
  color: #7adf9a;
  border-color: rgba(122, 223, 154, 0.4);
}

select.status-entschuldigt {
  background-color: rgba(240, 199, 101, 0.15);
  color: #f0c765;
  border-color: rgba(240, 199, 101, 0.4);
}

select.status-fehlend {
  background-color: rgba(255, 123, 109, 0.15);
  color: #ff7b6d;
  border-color: rgba(255, 123, 109, 0.4);
}

select.status-individuell {
  background-color: rgba(139, 148, 255, 0.15);
  color: #8b94ff;
  border-color: rgba(139, 148, 255, 0.4);
}

/* Read-only status text colors */
.status-text-anwesend {
  color: #7adf9a;
  font-weight: 600;
}

.status-text-entschuldigt {
  color: #f0c765;
  font-weight: 600;
}

.status-text-fehlend {
  color: #ff7b6d;
  font-weight: 600;
}

/* Attendance note row (note input + action buttons inline) */
.attendance-note-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.attendance-note-row > .field {
  flex: 1 1 180px;
  min-width: 0;
}

.attendance-note-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
}

.attendance-note-actions-separator {
  display: inline-block;
  width: 1px;
  height: 24px;
  background: rgba(164, 173, 188, 0.45);
  border-radius: 999px;
  align-self: center;
  margin: 0 2px;
}

.attendance-note-row > .field input {
  min-height: 44px;
  padding: 9px 14px;
  font-size: 15px;
}

.attendance-note-actions .btn {
  min-height: 44px;
  padding: 9px 14px;
}

.attendance-note-actions-spaced {
  margin-bottom: 8px;
}

@media (max-width: 640px) {
  .attendance-note-row {
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
  }

  .attendance-note-row > .field {
    width: 100%;
    flex: 0 0 auto;
    min-height: 0;
  }

  .attendance-note-actions {
    width: 100%;
  }

  .attendance-note-actions .btn {
    flex: 1 1 calc(50% - 4px);
    justify-content: center;
  }

  .attendance-note-actions-separator {
    display: none;
  }
}

/* ── Global mobile-layout-stack rules (activated via toggle on all devices) ── */
body.mobile-layout-stack .user-create-grid {
  grid-template-columns: 1fr;
}

body.mobile-layout-stack .stats-grid-user {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
  padding-bottom: 0;
}

body.mobile-layout-stack .stats-grid-user .stat-card {
  min-width: 0;
  flex: initial;
}

body.mobile-layout-stack .table-wrap {
  overflow: visible;
  max-height: none;
  scrollbar-gutter: auto;
}

body.mobile-layout-stack .users-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .attendance-user-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .user-home-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .user-fine-types-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .admin-fine-types-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .attendance-stats-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .season-template-table,
body.mobile-layout-stack .season-drafts-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .strafen-list-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .duties-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .summary-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .teams-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .team-members-table,
body.mobile-layout-stack .eq-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .table thead,
body.mobile-layout-stack .users-table thead,
body.mobile-layout-stack .attendance-user-table thead,
body.mobile-layout-stack .user-home-table thead,
body.mobile-layout-stack .user-fine-types-table thead,
body.mobile-layout-stack .admin-fine-types-table thead,
body.mobile-layout-stack .attendance-stats-table thead,
body.mobile-layout-stack .season-template-table thead,
body.mobile-layout-stack .season-drafts-table thead,
body.mobile-layout-stack .strafen-list-table thead,
body.mobile-layout-stack .duties-table thead,
body.mobile-layout-stack .summary-table thead,
body.mobile-layout-stack .teams-table thead,
body.mobile-layout-stack .team-members-table thead,
body.mobile-layout-stack .eq-table thead,
body.mobile-layout-stack .absence-table thead {
  display: none;
}

body.mobile-layout-stack .table,
body.mobile-layout-stack .table tbody,
body.mobile-layout-stack .table tr,
body.mobile-layout-stack .table td,
body.mobile-layout-stack .users-table,
body.mobile-layout-stack .users-table tbody,
body.mobile-layout-stack .users-table tr,
body.mobile-layout-stack .users-table td,
body.mobile-layout-stack .attendance-user-table,
body.mobile-layout-stack .attendance-user-table tbody,
body.mobile-layout-stack .attendance-user-table tr,
body.mobile-layout-stack .attendance-user-table td,
body.mobile-layout-stack .user-home-table,
body.mobile-layout-stack .user-home-table tbody,
body.mobile-layout-stack .user-home-table tr,
body.mobile-layout-stack .user-home-table td,
body.mobile-layout-stack .user-fine-types-table,
body.mobile-layout-stack .user-fine-types-table tbody,
body.mobile-layout-stack .user-fine-types-table tr,
body.mobile-layout-stack .user-fine-types-table td,
body.mobile-layout-stack .admin-fine-types-table,
body.mobile-layout-stack .admin-fine-types-table tbody,
body.mobile-layout-stack .admin-fine-types-table tr,
body.mobile-layout-stack .admin-fine-types-table td,
body.mobile-layout-stack .attendance-stats-table,
body.mobile-layout-stack .attendance-stats-table tbody,
body.mobile-layout-stack .attendance-stats-table tr,
body.mobile-layout-stack .attendance-stats-table td,
body.mobile-layout-stack .season-template-table,
body.mobile-layout-stack .season-template-table tbody,
body.mobile-layout-stack .season-template-table tr,
body.mobile-layout-stack .season-template-table td,
body.mobile-layout-stack .season-drafts-table,
body.mobile-layout-stack .season-drafts-table tbody,
body.mobile-layout-stack .season-drafts-table tr,
body.mobile-layout-stack .season-drafts-table td,
body.mobile-layout-stack .strafen-list-table,
body.mobile-layout-stack .strafen-list-table tbody,
body.mobile-layout-stack .strafen-list-table tr,
body.mobile-layout-stack .strafen-list-table td,
body.mobile-layout-stack .duties-table,
body.mobile-layout-stack .duties-table tbody,
body.mobile-layout-stack .duties-table tr,
body.mobile-layout-stack .duties-table td,
body.mobile-layout-stack .summary-table,
body.mobile-layout-stack .summary-table tbody,
body.mobile-layout-stack .summary-table tr,
body.mobile-layout-stack .summary-table td,
body.mobile-layout-stack .teams-table,
body.mobile-layout-stack .teams-table tbody,
body.mobile-layout-stack .teams-table tr,
body.mobile-layout-stack .teams-table td,
body.mobile-layout-stack .team-members-table,
body.mobile-layout-stack .team-members-table tbody,
body.mobile-layout-stack .team-members-table tr,
body.mobile-layout-stack .team-members-table td,
body.mobile-layout-stack .eq-table,
body.mobile-layout-stack .eq-table tbody,
body.mobile-layout-stack .eq-table tr,
body.mobile-layout-stack .eq-table td,
body.mobile-layout-stack .absence-table,
body.mobile-layout-stack .absence-table tbody,
body.mobile-layout-stack .absence-table tr,
body.mobile-layout-stack .absence-table td {
  display: block;
  width: 100%;
}

body.mobile-layout-stack .table tr,
body.mobile-layout-stack .users-table tr,
body.mobile-layout-stack .attendance-user-table tr,
body.mobile-layout-stack .user-home-table tr,
body.mobile-layout-stack .user-fine-types-table tr,
body.mobile-layout-stack .admin-fine-types-table tr,
body.mobile-layout-stack .attendance-stats-table tr,
body.mobile-layout-stack .season-template-table tr,
body.mobile-layout-stack .season-drafts-table tr,
body.mobile-layout-stack .strafen-list-table tr,
body.mobile-layout-stack .duties-table tr,
body.mobile-layout-stack .summary-table tr,
body.mobile-layout-stack .teams-table tr,
body.mobile-layout-stack .team-members-table tr,
body.mobile-layout-stack .eq-table tr,
body.mobile-layout-stack .absence-table tr {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #121723;
}

body.mobile-layout-stack .table td,
body.mobile-layout-stack .users-table td,
body.mobile-layout-stack .attendance-user-table td,
body.mobile-layout-stack .user-home-table td,
body.mobile-layout-stack .user-fine-types-table td,
body.mobile-layout-stack .admin-fine-types-table td,
body.mobile-layout-stack .attendance-stats-table td,
body.mobile-layout-stack .season-template-table td,
body.mobile-layout-stack .season-drafts-table td,
body.mobile-layout-stack .strafen-list-table td,
body.mobile-layout-stack .duties-table td,
body.mobile-layout-stack .summary-table td,
body.mobile-layout-stack .teams-table td,
body.mobile-layout-stack .team-members-table td,
body.mobile-layout-stack .eq-table td,
body.mobile-layout-stack .absence-table td {
  border: none;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  font-size: 14px;
}

body.mobile-layout-stack .table td::before,
body.mobile-layout-stack .users-table td::before,
body.mobile-layout-stack .attendance-user-table td::before,
body.mobile-layout-stack .user-home-table td::before,
body.mobile-layout-stack .user-fine-types-table td::before,
body.mobile-layout-stack .admin-fine-types-table td::before,
body.mobile-layout-stack .attendance-stats-table td::before,
body.mobile-layout-stack .season-template-table td::before,
body.mobile-layout-stack .season-drafts-table td::before,
body.mobile-layout-stack .strafen-list-table td::before,
body.mobile-layout-stack .duties-table td::before,
body.mobile-layout-stack .summary-table td::before,
body.mobile-layout-stack .teams-table td::before,
body.mobile-layout-stack .team-members-table td::before,
body.mobile-layout-stack .eq-table td::before,
body.mobile-layout-stack .absence-table td::before {
  content: attr(data-label);
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

body.mobile-layout-stack .table td:last-child,
body.mobile-layout-stack .users-table td:last-child,
body.mobile-layout-stack .attendance-user-table td:last-child,
body.mobile-layout-stack .user-home-table td:last-child,
body.mobile-layout-stack .user-fine-types-table td:last-child,
body.mobile-layout-stack .admin-fine-types-table td:last-child,
body.mobile-layout-stack .attendance-stats-table td:last-child,
body.mobile-layout-stack .season-template-table td:last-child,
body.mobile-layout-stack .season-drafts-table td:last-child,
body.mobile-layout-stack .strafen-list-table td:last-child,
body.mobile-layout-stack .duties-table td:last-child,
body.mobile-layout-stack .summary-table td:last-child,
body.mobile-layout-stack .teams-table td:last-child,
body.mobile-layout-stack .team-members-table td:last-child,
body.mobile-layout-stack .eq-table td:last-child,
body.mobile-layout-stack .absence-table td:last-child {
  border-bottom: none;
}

body.mobile-layout-stack .table td.empty,
body.mobile-layout-stack .users-table td.empty,
body.mobile-layout-stack .attendance-user-table td.empty,
body.mobile-layout-stack .user-home-table td.empty,
body.mobile-layout-stack .user-fine-types-table td.empty,
body.mobile-layout-stack .admin-fine-types-table td.empty,
body.mobile-layout-stack .attendance-stats-table td.empty,
body.mobile-layout-stack .season-template-table td.empty,
body.mobile-layout-stack .season-drafts-table td.empty,
body.mobile-layout-stack .strafen-list-table td.empty,
body.mobile-layout-stack .duties-table td.empty,
body.mobile-layout-stack .summary-table td.empty,
body.mobile-layout-stack .teams-table td.empty,
body.mobile-layout-stack .team-members-table td.empty,
body.mobile-layout-stack .eq-table td.empty,
body.mobile-layout-stack .absence-table td.empty {
  display: block;
  text-align: center;
}

body.mobile-layout-stack .table td.empty::before,
body.mobile-layout-stack .users-table td.empty::before,
body.mobile-layout-stack .attendance-user-table td.empty::before,
body.mobile-layout-stack .user-home-table td.empty::before,
body.mobile-layout-stack .user-fine-types-table td.empty::before,
body.mobile-layout-stack .admin-fine-types-table td.empty::before,
body.mobile-layout-stack .attendance-stats-table td.empty::before {
  content: none;
  display: none;
}

body.mobile-layout-stack .season-template-table td.empty::before,
body.mobile-layout-stack .season-drafts-table td.empty::before,
body.mobile-layout-stack .strafen-list-table td.empty::before,
body.mobile-layout-stack .duties-table td.empty::before,
body.mobile-layout-stack .summary-table td.empty::before,
body.mobile-layout-stack .teams-table td.empty::before,
body.mobile-layout-stack .team-members-table td.empty::before,
body.mobile-layout-stack .eq-table td.empty::before {
  display: none;
}

/* ── Ticketing tables (ticket-table, batch-table, rec-table, cfg-table) ── */
body.mobile-layout-stack .ticket-table,
body.mobile-layout-stack .batch-table,
body.mobile-layout-stack .rec-table,
body.mobile-layout-stack .cfg-table {
  min-width: 0;
  width: 100%;
}

body.mobile-layout-stack .ticket-table thead,
body.mobile-layout-stack .batch-table thead,
body.mobile-layout-stack .rec-table thead,
body.mobile-layout-stack .cfg-table thead {
  display: none;
}

body.mobile-layout-stack .ticket-table,
body.mobile-layout-stack .ticket-table tbody,
body.mobile-layout-stack .ticket-table tr,
body.mobile-layout-stack .ticket-table td,
body.mobile-layout-stack .batch-table,
body.mobile-layout-stack .batch-table tbody,
body.mobile-layout-stack .batch-table tr,
body.mobile-layout-stack .batch-table td,
body.mobile-layout-stack .rec-table,
body.mobile-layout-stack .rec-table tbody,
body.mobile-layout-stack .rec-table tr,
body.mobile-layout-stack .rec-table td,
body.mobile-layout-stack .cfg-table,
body.mobile-layout-stack .cfg-table tbody,
body.mobile-layout-stack .cfg-table tr,
body.mobile-layout-stack .cfg-table td {
  display: block;
  width: 100%;
}

body.mobile-layout-stack .ticket-table tr,
body.mobile-layout-stack .batch-table tr,
body.mobile-layout-stack .rec-table tr,
body.mobile-layout-stack .cfg-table tr {
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #121723;
}

body.mobile-layout-stack .ticket-table td,
body.mobile-layout-stack .batch-table td,
body.mobile-layout-stack .rec-table td,
body.mobile-layout-stack .cfg-table td {
  border: none;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px 16px;
  font-size: 14px;
}

body.mobile-layout-stack .ticket-table td::before,
body.mobile-layout-stack .batch-table td::before,
body.mobile-layout-stack .rec-table td::before,
body.mobile-layout-stack .cfg-table td::before {
  content: attr(data-label);
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

body.mobile-layout-stack .ticket-table td:last-child,
body.mobile-layout-stack .batch-table td:last-child,
body.mobile-layout-stack .rec-table td:last-child,
body.mobile-layout-stack .cfg-table td:last-child {
  border-bottom: none;
}

body.mobile-layout-stack .ticket-table td.empty,
body.mobile-layout-stack .batch-table td.empty,
body.mobile-layout-stack .rec-table td.empty,
body.mobile-layout-stack .cfg-table td.empty {
  display: block;
  text-align: center;
}

body.mobile-layout-stack .ticket-table td.empty::before,
body.mobile-layout-stack .batch-table td.empty::before,
body.mobile-layout-stack .rec-table td.empty::before,
body.mobile-layout-stack .cfg-table td.empty::before {
  display: none;
}

body.mobile-layout-stack .users-table .user-attendance-switch-form {
  width: 100%;
  min-width: 0;
  justify-content: flex-start;
}

@media (max-width: 640px) {
  .strafen-list-table {
    width: max-content;
    min-width: 780px;
  }

  .strafen-list-table th:last-child,
  .strafen-list-table td:last-child {
    min-width: 196px;
  }
}

body.mobile-layout-stack .strafen-list-table .inline.mobile-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

body.mobile-layout-stack .strafen-list-table .inline.mobile-actions form,
body.mobile-layout-stack .strafen-list-table .inline.mobile-actions form button {
  width: 100%;
}

body.mobile-layout-stack .strafen-list-table .inline.mobile-actions form:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

body.mobile-layout-stack .strafen-row-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: 100%;
}

body.mobile-layout-stack .strafen-row-actions > form,
body.mobile-layout-stack .strafen-row-actions .row-action-menu {
  width: 100%;
}

body.mobile-layout-stack .strafen-row-actions > form button,
body.mobile-layout-stack .strafen-row-actions .row-action-trigger {
  width: 100%;
  min-width: 0;
  justify-content: center;
}

body.mobile-layout-stack .strafen-row-actions > form:only-child,
body.mobile-layout-stack .strafen-row-actions .row-action-menu:only-child {
  grid-column: 1 / -1;
}

/* Rechteverwaltung (admin/user_permissions) */
.permissions-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.permissions-category-header {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.permissions-category-header h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.permission-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #121723;
  padding: 10px 12px;
}

.permission-row.is-mandatory {
  border-color: rgba(224, 75, 63, 0.35);
  background: rgba(224, 75, 63, 0.08);
}

.permission-row.is-active:not(.is-mandatory) {
  border-color: rgba(48, 181, 94, 0.35);
  background: rgba(48, 181, 94, 0.08);
}

.permission-row.has-revoke:not(.is-mandatory) {
  border-color: rgba(207, 137, 48, 0.35);
  background: rgba(207, 137, 48, 0.08);
}

.permission-main {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.permission-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.permission-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}

.permission-subtext {
  font-size: 12px;
  line-height: 1.25;
}

.permission-badges {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
}

.badge[hidden] {
  display: none !important;
}

.badge-green {
  color: #d8f7df;
  background: rgba(48, 181, 94, 0.2);
  border-color: rgba(48, 181, 94, 0.36);
}

.badge-gray {
  color: #d3d9e5;
  background: rgba(141, 154, 177, 0.18);
  border-color: rgba(141, 154, 177, 0.34);
}

.badge-mandatory {
  color: #ffd8d4;
  background: rgba(224, 75, 63, 0.2);
  border-color: rgba(224, 75, 63, 0.35);
}

.badge-role {
  color: #d7e6ff;
  background: rgba(93, 164, 255, 0.18);
  border-color: rgba(93, 164, 255, 0.32);
}

.badge-grant {
  color: #d8f7df;
  background: rgba(48, 181, 94, 0.2);
  border-color: rgba(48, 181, 94, 0.36);
}

.badge-revoke {
  color: #ffe5c2;
  background: rgba(207, 137, 48, 0.2);
  border-color: rgba(207, 137, 48, 0.35);
}

.switch {
  position: relative;
  display: inline-flex;
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
}

.switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.switch-slider {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: #3a4457;
  border: 1px solid #5c6881;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.switch-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f7f9ff;
  transition: transform 0.2s ease;
}

.switch input[type="checkbox"]:checked + .switch-slider {
  background: rgba(48, 181, 94, 0.45);
  border-color: rgba(48, 181, 94, 0.75);
}

.switch input[type="checkbox"]:checked + .switch-slider::before {
  transform: translateX(16px);
}

.switch input[type="checkbox"]:disabled + .switch-slider {
  opacity: 0.6;
}

.switch input[type="checkbox"]:focus {
  outline: none;
  box-shadow: none;
}

.switch input[type="checkbox"]:focus + .switch-slider {
  box-shadow: 0 0 0 2px rgba(224, 75, 63, 0.24);
}

@media (max-width: 980px) {
  .permissions-grid {
    grid-template-columns: 1fr;
  }
}


/* ══════════════════════════════════════════════════════
   Equipment – gemeinsame Komponenten
   ══════════════════════════════════════════════════════ */

/* Badges */
.eq-badge {
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--bg-soft);
  white-space: nowrap;
}
.eq-badge.returned { opacity: 0.5; text-decoration: line-through; }
.eq-badge.partial {
  border-color: rgba(240,199,101,0.6);
  color: #f0c765;
  background: rgba(240,199,101,0.1);
}

/* Nummern-Widget */
.number-widget {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.number-box { display: flex; flex-direction: column; gap: 2px; }
.number-box .label { font-size: 12px; color: var(--muted); }
.number-box .value { font-size: 28px; font-weight: 700; }

/* Zentrierte Variante für equipment/my.html */
.number-widget-centered { justify-content: center; }
.number-widget-centered .number-box { align-items: center; }
.number-widget-centered .number-box .value { font-size: 36px; }

/* Card-Header mit Aktion rechts */
.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.card-header-row h3 { margin: 0; }

/* Zebra-Filter für JS-gefilterte Tabellen */
.table.is-filtered tr:nth-child(even) { background: transparent; }
.table.is-filtered tr.filter-even { background: #131926; }

/* Negativbestand */
.inv-negative { color: #f85149; }

/* Admin-Tab-Navigation: aktiver Tab rot gefüllt */
.eq-section-tabs .btn.secondary.is-current {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Admin-Tab-Navigation */
.eq-section-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.eq-section { display: none; }
.eq-section.active { display: block; }

/* Artikelkatalog-Tabelle */
.catalog-table th,
.catalog-table td { text-align: center; }
.catalog-table th:first-child,
.catalog-table td:first-child { text-align: left; }
.catalog-table .col-category { width: 120px; }
.catalog-table .col-stock    { width: 80px; }
.catalog-table .col-actions  { width: 100px; }
.catalog-edit-row td {
  background: var(--bg-soft);
  padding: 12px 16px !important;
  text-align: left;
}

/* Equipment: Mitglieder-Tabelle Spalten */
.member-table th:nth-child(3), .member-table td:nth-child(3) { width: 60px; text-align: center; }
.member-table th:nth-child(4), .member-table td:nth-child(4) { width: 80px; text-align: center; }
.member-table th:nth-child(5), .member-table td:nth-child(5) { width: 100px; text-align: center; }
.member-table th:nth-child(6), .member-table td:nth-child(6) { width: 100px; text-align: center; }
.member-table th:nth-child(7), .member-table td:nth-child(7) { width: 100px; text-align: right; }

/* Equipment: Übersicht-Tabelle Spalten */
.overview-col-issued   { width: 120px; text-align: center; }
.overview-col-returned { width: 130px; text-align: center; }
.overview-col-net      { width: 120px; text-align: center; }

/* Equipment: Bestandstabelle Spalten */
.inv-col-cat      { width: 120px; }
.inv-col-total    { width: 80px; text-align: center; }
.inv-col-issued   { width: 100px; text-align: center; }
.inv-col-returned { width: 80px; text-align: center; }
.inv-col-net      { width: 90px; text-align: center; }
.inv-col-available { width: 90px; text-align: center; }

/* Equipment: Ausgaben-Tabelle Spalten */
.issues-table th:nth-child(2), .issues-table td:nth-child(2) { width: 110px; text-align: center; }
.issues-table th:nth-child(3), .issues-table td:nth-child(3) { width: 70px; text-align: center; }
.issues-table th:nth-child(4), .issues-table td:nth-child(4) { width: 80px; text-align: center; }
.issues-table th:nth-child(5), .issues-table td:nth-child(5) { width: 150px; }
.issues-table th:nth-child(7), .issues-table td:nth-child(7) { width: 140px; text-align: center; white-space: nowrap; }

/* Ausgabe-Formular */
.eq-issue-grid { }

/* Bulk-Ausgabe Zeilen */
.bulk-row {
  display: grid;
  gap: 8px;
  align-items: end;
  margin-bottom: 8px;
}
.bulk-row-player     { grid-template-columns: 1fr 70px 90px auto; }
.bulk-row-pkg        { grid-template-columns: 1fr 70px auto; }
.bulk-row-pkg-player { grid-template-columns: 1fr 70px 90px auto; }
.bulk-row .field { margin: 0; }
.bulk-row .field label { font-size: 12px; }
.bulk-row .field-actions { display: flex; align-items: flex-end; }

/* Rückgabe-Modal */
#eq-return-modal,
#eq-edit-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

/* Bereichswechsel läuft überall über die Tab-Leiste. Das frühere Ausweichmenü
   für schmale Bildschirme entfällt: Die Leiste teilt sich dort die Breite und
   zeigt alle vier Bereiche gleichzeitig. */
.eq-tab-menu { display: none; }

/* ── Equipment Mobile ─────────────────────────────────── */
@media (max-width: 600px) {
  /* Tab-Navigation: kompaktere Buttons */
  .eq-section-tabs .btn,
  .eq-section-tabs .btn.secondary {
    font-size: 13px;
    padding: 6px 8px;
  }

  /* Alle .btn in Equipment-Seiten (inkl. <a class="btn">) auf Input-Höhe */
  .eq-page .btn {
    height: 40px;
    min-height: 40px;
    font-size: 13px;
    padding: 7px 10px;
    box-sizing: border-box;
  }

  /* Artikelkatalog inline-edit */
  .catalog-edit-row .grid {
    grid-template-columns: 1fr !important;
  }

  /* Ausgabe-Formular einspaltüg */
  .eq-issue-grid {
    grid-template-columns: 1fr !important;
  }
  .eq-issue-submit {
    width: 100%;
  }

  /* Nummern-Widget: Schrift etwas kleiner */
  .number-box .value { font-size: 22px; }

  /* Bulk – Spieler zuerst: Artikel full-width, Menge+Größe nebeneinander */
  .bulk-row-player { grid-template-columns: 1fr 1fr; }
  .bulk-row-player .field:first-child { grid-column: 1 / -1; }
  .bulk-row-player .field-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  /* Bulk – Paket: Artikel full-width, Menge+Entfernen in einer Zeile */
  .bulk-row-pkg { grid-template-columns: 2fr 1fr; }
  .bulk-row-pkg .field:first-child { grid-column: 1 / -1; }

  /* Bulk – Spieler: Spieler full-width, Pakete|Größe|Entfernen in einer Zeile */
  .bulk-row-pkg-player { grid-template-columns: 1fr 1fr 1fr; }
  .bulk-row-pkg-player .field:first-child { grid-column: 1 / -1; }
  .bulk-row-pkg-player .field-actions { grid-column: auto; }

  /* Bulk – Touch-Zielgröße: Button UND Inputs gleich hoch */
  .bulk-row .field-actions .btn,
  .batch-section .btn.ghost,
  .bulk-row input,
  .bulk-row select { height: 38px; min-height: 38px; box-sizing: border-box; }

  /* Rückgabe-Modal: volle Breite mit Seitenabstand */
  #eq-return-modal .card,
  #eq-edit-modal .card {
    margin: 16px;
    width: calc(100% - 32px);
    max-width: none;
  }

  /* Gewand-Übersicht: Artikel-Select + Historie-Button einzeilig */
  .eq-overview-header {
    flex-wrap: nowrap;
  }
  .eq-overview-header form {
    min-width: 0 !important;
    max-width: none !important;
  }
  .eq-overview-header select {
    min-width: 0;
    font-size: 13px;
  }
  .eq-overview-header .btn {
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Bestandsübersicht: Historie-Button kleiner auf Mobile */
  .eq-inventory-header .btn {
    font-size: 12px;
    padding: 6px 8px;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Filter-Toggle Button zentriert und full-width */
  .eq-filter-toggle-wrap {
    display: flex;
    justify-content: center;
    margin-top: 4px;
  }
  .eq-filter-toggle-wrap .btn {
    width: 100%;
    max-width: 320px;
  }
}

/* Filter-Fix: hidden-Attribut wird von display:block in mobile-layout-stack überschrieben */
.eq-table tr.eq-row-hidden { display: none !important; }
body.mobile-layout-stack tr[hidden] { display: none !important; }
tr.filter-row-hidden { display: none !important; }


/* ══════════════════════════════════════════════════════
   Physio – gemeinsame Komponenten (portal + admin)
   ══════════════════════════════════════════════════════ */

/* Nested-Picker braucht höheren z-index als app-modal-backdrop (1000) */
.app-modal-backdrop--nested { z-index: 1010; }
/* Schmalere Modals für Physio-Formulare */
.app-modal--narrow { width: min(480px, 100%); }

/* ── Team-Picker ── */
.cal-team-picker-trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  background: var(--bg-soft);
  text-align: left;
  font-family: inherit;
  transition: border-color .15s, background .15s;
}
.cal-team-picker-trigger:hover { border-color: var(--accent); background: var(--bg-soft); }
.cal-team-picker-trigger-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cal-team-picker-summary { font-size: 15px; font-weight: 600; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-team-picker-meta { font-size: 13px; color: var(--muted); }
.cal-team-picker-trigger-icon { flex: 0 0 auto; color: var(--muted); font-size: 18px; line-height: 1.2; margin-top: 2px; }
.cal-team-picker-error { color: #ff7b72; font-size: 13px; margin-top: 6px; }
.cal-team-picker-modal { width: min(540px, 100%); }
.cal-team-picker-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cal-team-picker-header h3 { margin-bottom: 4px; }
.cal-team-picker-count { display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 20px; border: 1px solid var(--border); font-size: 13px; white-space: nowrap; background: var(--bg-soft); flex-shrink: 0; }
.cal-team-picker-list { display: grid; gap: 8px; max-height: min(46vh, 360px); overflow-y: auto; scrollbar-gutter: stable; margin-top: 8px; margin-bottom: 14px; }
.cal-team-picker-option {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  cursor: pointer;
  transition: border-color .15s;
  overflow: hidden;
}
.cal-team-picker-option:hover { border-color: var(--accent); }
.cal-team-picker-option.selected { border-color: var(--accent); background: rgba(var(--accent-rgb), .04); }
.cal-team-picker-option-main { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cal-team-picker-option-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cal-team-picker-option-name { color: var(--fg); font-weight: 600; font-size: 14px; }
.cal-team-picker-option-status { color: var(--muted); font-size: 12px; }
.cal-team-picker-empty { color: var(--muted); font-size: 13px; padding: 10px 4px; }

.utensil-qty-row .cal-team-picker-option-main { justify-content: space-between; }
.utensil-qty-controls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.utensil-qty-btn {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--fg);
  font-size: 16px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.utensil-qty-btn:hover { border-color: var(--accent); }
.utensil-qty-input {
  width: 48px; height: 28px; text-align: center; padding: 0 4px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--bg-soft); color: var(--fg);
}

/* ── Freigabe-Optionen pro Team (inline im Picker) ── */
.team-release-section {
  display: none;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg-soft);
  gap: 8px;
  flex-direction: column;
}
.cal-team-picker-option.selected .team-release-section { display: flex; }
.team-release-label { font-size: 12px; color: var(--muted); font-weight: 500; margin-bottom: 2px; }
.team-release-radios { display: flex; gap: 6px; flex-wrap: wrap; }
.team-release-radio-btn {
  padding: 4px 10px;
  border-radius: 5px;
  border: 1px solid var(--border);
  font-size: 12px;
  cursor: pointer;
  background: var(--bg-soft);
  color: var(--muted);
  user-select: none;
  transition: border-color .12s, color .12s, background .12s;
}
.team-release-radio-btn.active-none { border-color: rgba(248,81,73,.5);  color: rgba(248,81,73,.8); background: rgba(248,81,73,.06); }
.team-release-radio-btn.active-now  { border-color: rgba(63,185,80,.5);  color: #3fb950; background: rgba(63,185,80,.07); }
.team-release-radio-btn.active-at   { border-color: rgba(240,199,101,.5);color: #f0c765; background: rgba(240,199,101,.07); }
.team-release-date-wrap { display: none; margin-top: 4px; }
.team-release-date-wrap.show { display: block; }
.team-release-date-row { display: flex; gap: 6px; }
.team-release-date-field { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.team-release-date-field > span { font-size: 11px; color: var(--muted); }
.team-release-date-field input { width: 100%; font-size: 13px; box-sizing: border-box; text-align: center; }
.cal-team-picker-modal .app-modal-actions { flex-direction: row !important; }
.cal-team-picker-modal .app-modal-actions .btn,
.cal-team-picker-modal .app-modal-actions button { width: auto !important; flex: 1; }
.team-badges-wrap { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Slot-Zeilen (Physio-Admin) ── */
.slots-list { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.slot-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 5px 8px 5px 10px;
  border-radius: 4px;
  font-size: 13px;
  border-left: 2px solid transparent;
}
.slot-row.free     { border-left-color: rgba(63,185,80,.45);  background: rgba(63,185,80,.05); }
.slot-row.booked   { border-left-color: rgba(248,81,73,.45);  background: rgba(248,81,73,.05); }
.slot-row.reserved { border-left-color: rgba(240,199,101,.45);background: rgba(240,199,101,.05); }
.slot-row.disabled { border-left-color: var(--border); background: transparent; opacity: .4; }
.slot-time  { font-weight: 500; color: var(--fg); white-space: nowrap; }
.slot-label { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-row.booked .slot-label { color: var(--fg); }
.slot-reason-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 3px; margin-left: 6px; vertical-align: middle;
}
.slot-reason-badge.MASSAGE { background: rgba(63,185,80,.15);  color: #3fb950; }
.slot-reason-badge.INJURY  { background: rgba(248,81,73,.15);  color: #f85149; }
.slot-note-row {
  grid-column: 1 / -1; font-size: 12px; color: var(--muted);
  padding: 2px 0 4px 54px; font-style: italic;
}
.slot-row-btn { background: none; border: none; cursor: pointer; font-size: 15px; padding: 0 4px; line-height: 1; flex-shrink: 0; }
.slot-row-btn.cancel { color: rgba(248,81,73,.8); }
.slot-row-btn.add    { color: rgba(63,185,80,.8); font-weight: bold; }

/* ── Availability-Reihen ── */
.physio-avail-row { border-bottom: 1px solid var(--border); padding: 12px 0; }
.physio-avail-row:last-child { border-bottom: none; }
.physio-avail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.physio-avail-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; min-width: 0; }
.physio-avail-meta strong { font-size: 15px; }
.physio-avail-actions { display: flex; gap: 8px; flex-shrink: 0; align-items: center; }
.physio-today-row { border-left: 3px solid var(--accent); padding-left: 10px; margin-left: -13px; }
.physio-today-badge { display: inline-block; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 4px; letter-spacing: .04em; text-transform: uppercase; }

.team-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
  border: 1px solid var(--border); color: var(--muted);
  cursor: pointer; transition: opacity .15s;
}
.team-badge:hover { opacity: .7; }
.team-badge.released  { border-color: rgba(63,185,80,.5);  color: #3fb950; }
.team-badge.locked    { border-color: rgba(248,81,73,.4);  color: rgba(248,81,73,.7); }
.team-badge.scheduled { border-color: rgba(240,199,101,.5);color: #f0c765; }

/* ── Slot-Aktions-Panel ── */
#physio-slot-panel {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 20px; z-index: 500; width: min(340px,92vw);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
#physio-slot-panel h4 { margin: 0 0 16px 0; font-size: 15px; }
.physio-panel-actions { display: flex; flex-direction: column; gap: 10px; }
.physio-panel-assign  { display: flex; gap: 8px; align-items: center; }
.physio-panel-assign select { flex: 1; min-width: 0; }
#physio-slot-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 499; }

/* ── Physio Pagination ── */
.physio-pagination { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.physio-pagination .page-info { text-align: center; font-size: 13px; color: var(--muted); }
.physio-pagination .pagination-actions { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.physio-pagination .pagination-slot { display: flex; }
.physio-pagination .pagination-slot.left   { justify-content: flex-start; }
.physio-pagination .pagination-slot.center { justify-content: center; }
.physio-pagination .pagination-slot.right  { justify-content: flex-end; }
.physio-pagination .btn { min-width: 100px; justify-content: center; }

/* ── Create/Edit Form Layout ── */
.physio-form-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.physio-form-grid .field-full { grid-column: span 3; }
.physio-form-grid .field-half { grid-column: span 1; }

@media (max-width: 560px) {
  .cal-team-picker-header { flex-direction: column; align-items: stretch; }
  .physio-avail-header { flex-wrap: wrap; }
  .physio-avail-meta { width: 100%; }
  .physio-avail-actions { margin-left: auto; }
  .physio-form-grid { grid-template-columns: 1fr 1fr; }
  .physio-form-grid .field-full { grid-column: span 2; }
  .physio-form-grid .field-date { grid-column: span 1; order: 1; }
  .physio-form-grid .field-slot { order: 2; }
  .physio-form-grid .field-von  { order: 3; }
  .physio-form-grid .field-bis  { order: 4; }
  .physio-form-grid .field-date input,
  .physio-form-grid .field-date input[type="date"],
  .physio-form-grid .field-date input[type="date"]::-webkit-date-and-time-value,
  .physio-form-grid .field-slot input { text-align: center; }
}


/* ══════════════════════════════════════════════════════
   Physio-Portal (physio/portal)
   ══════════════════════════════════════════════════════ */

.physio-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}

.physio-slot-btn {
  padding: 10px 6px;
  border-radius: 6px;
  border: 1.5px solid var(--border);
  font-size: 14px;
  cursor: pointer;
  background: var(--bg-soft);
  color: var(--fg);
  text-align: center;
  transition: background 0.15s, border-color 0.15s;
}
.physio-slot-btn.free        { border-color: rgba(63,185,80,0.6);   color: #3fb950; background: rgba(63,185,80,0.07); }
.physio-slot-btn.free:hover  { background: rgba(63,185,80,0.15); }
.physio-slot-btn.booked-other { border-color: var(--border); color: var(--muted); cursor: not-allowed; background: var(--bg-soft); opacity: 0.4; }
.physio-slot-btn.mine        { border-color: rgba(240,199,101,0.6); color: #f0c765; background: rgba(240,199,101,0.1); }
.physio-slot-btn.mine:hover  { background: rgba(240,199,101,0.2); }

.physio-locked-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 6px;
  margin-top: 12px;
  background: rgba(248,81,73,0.07);
  border: 1px solid rgba(248,81,73,0.25);
  font-size: 13px;
  color: rgba(248,81,73,0.85);
}
.physio-locked-banner.scheduled {
  background: rgba(240,199,101,0.07);
  border-color: rgba(240,199,101,0.3);
  color: #f0c765;
}

.physio-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--muted); }
.physio-legend-item { display: flex; align-items: center; gap: 5px; }
.physio-legend-dot { width: 10px; height: 10px; border-radius: 2px; border: 1.5px solid; flex-shrink: 0; }
.physio-legend-dot.free  { border-color: rgba(63,185,80,0.6);   background: rgba(63,185,80,0.07); }
.physio-legend-dot.mine  { border-color: rgba(240,199,101,0.6); background: rgba(240,199,101,0.1); }
.physio-legend-dot.taken { border-color: var(--border);         background: var(--bg-soft); opacity: 0.4; }

.physio-cal-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: 20px; }
.physio-nav-center { display: flex; align-items: center; gap: 12px; justify-content: center; }
.physio-nav-center h3 { margin: 0; min-width: 160px; text-align: center; white-space: nowrap; }
.physio-nav-jump { font-size: 13px; white-space: nowrap; }
.physio-nav-desktop { justify-self: start; width: fit-content; }
.physio-nav-desktop.physio-nav-prev { justify-self: end; }
.physio-nav-placeholder { display: block; }
.physio-nav-mobile { display: none; }

@media (max-width: 600px) {
  .physio-cal-nav { display: flex; flex-direction: column; gap: 8px; }
  .physio-nav-center { width: 100%; justify-content: center; }
  .physio-nav-center h3 { font-size: 15px; min-width: 0; }
  .physio-nav-jumps { display: flex; gap: 8px; width: 100%; justify-content: space-between; }
  .physio-nav-jump { font-size: 12px; flex: 1; text-align: center; justify-content: center; }
  .physio-nav-desktop { display: none; }
  .physio-nav-mobile { display: flex; }
}

#physio-book-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 199;
}
#physio-book-dialog {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 20px; z-index: 200; width: min(340px,92vw);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
#physio-book-dialog h4 { margin: 0 0 14px 0; font-size: 15px; }
.book-reason-group { display: flex; gap: 10px; margin-bottom: 12px; }
.book-reason-btn {
  flex: 1; padding: 10px 6px; border-radius: 6px; border: 1.5px solid var(--border);
  font-size: 13px; cursor: pointer; background: var(--bg-soft); color: var(--fg); text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.book-reason-btn.selected.massage { border-color: rgba(63,185,80,0.6);  background: rgba(63,185,80,0.1);  color: #3fb950; }
.book-reason-btn.selected.injury  { border-color: rgba(248,81,73,0.5);  background: rgba(248,81,73,0.08); color: #f85149; }
#physio-book-note {
  width: 100%; resize: vertical; font-size: 13px; padding: 7px 10px; border-radius: 5px;
  border: 1px solid var(--border); background: var(--bg-soft); color: var(--fg);
  margin-bottom: 12px; min-height: 60px;
}
.book-dialog-actions { display: flex; flex-direction: column; gap: 8px; }
.book-dialog-actions .book-dialog-primary { display: flex; gap: 8px; }
.book-dialog-actions .book-dialog-primary button { flex: 1; justify-content: center; }
.book-dialog-actions .book-dialog-secondary { width: 100%; justify-content: center; }

.my-booking-note {
  font-size: 12px; color: var(--muted); margin-top: 4px; font-style: italic;
  padding: 4px 8px; border-left: 2px solid rgba(240,199,101,0.4);
}


/* ══════════════════════════════════════════════════════
   Benutzerverwaltung (admin/users, admin/users_team_scope)
   ══════════════════════════════════════════════════════ */

.user-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
}

.users-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

.users-modal-backdrop[hidden] { display: none !important; }

.users-modal {
  width: min(980px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  margin: 0;
}

.users-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.users-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.team-user-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.team-user-role { white-space: nowrap; }


/* ══════════════════════════════════════════════════════
   Strafenliste (admin/strafen_list)
   ══════════════════════════════════════════════════════ */

.strafen-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
}

.pagination-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 100%;
  gap: 12px;
}

.pagination-actions .pagination-slot {
  display: flex;
}

.pagination-actions .pagination-slot.left  { justify-content: flex-start; }
.pagination-actions .pagination-slot.right { justify-content: flex-end; }

.pagination-actions .btn {
  width: auto !important;
  min-width: 120px;
  justify-content: center;
}


/* ══════════════════════════════════════════════════════
   Offene Summen (admin/summary)
   ══════════════════════════════════════════════════════ */

.summary-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
}

.summary-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.summary-total-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
}


/* ══════════════════════════════════════════════════════
   Strafenkatalog (admin/fine_types)
   ══════════════════════════════════════════════════════ */

.fine-type-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  align-items: end;
}

.fine-types-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 18, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 1000;
}

.fine-types-modal-backdrop[hidden] {
  display: none !important;
}

.fine-types-modal {
  width: min(980px, 100%);
  max-height: calc(100vh - 32px);
  overflow: auto;
  margin: 0;
}

.fine-types-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.fine-types-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}


/* ══════════════════════════════════════════════════════
   Dashboard – Kacheln & Termin-Komponenten (user/home)
   ══════════════════════════════════════════════════════ */

.db-grid { display: grid; gap: 10px; margin-top: 4px; }

.db-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.db-row-2 > * { min-width: 0; }

@media (max-width: 600px) {
  .db-row-2 .sess-header { flex-direction: column; align-items: flex-start; }
}

.db-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}

.db-card-session-group {
  overflow: hidden;
  padding: 0;
}

.db-card-slim.db-card-session-group {
  padding: 0;
}

.sess-item-colored {
  position: relative;
  padding: 14px 16px 14px 26px;
}

.db-card-slim .sess-item-colored {
  padding: 10px 16px 10px 26px;
}

.sess-item-colored + .sess-item-colored {
  border-top: 1px solid var(--border);
}

.sess-item-colored::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--sess-color);
}

.db-card h3 { margin: 0 0 2px 0; font-size: 15px; font-weight: 600; }
.db-card p  { margin: 0; font-size: 13px; color: var(--muted); }

/* Allgemeiner Kicker (kompakt, für Dashboard-Widgets) */
.db-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}

/* Card-Titelzeile mit optionalem Aktions-Button rechts */
.card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.card-title-row .card-title { margin-bottom: 0; }

/* Card-Abschnittsüberschrift (für Formular- und Listenseiten) */
.card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 10px;
}

/* Termin-Header: kicker + badge in einer Zeile */
.sess-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  overflow: hidden;
}

.sess-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.sess-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Nächster Termin (groß) */
.sess-date-big {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
  margin-bottom: 6px;
}
.sess-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 13px;
  color: var(--muted);
}
.sess-meta span { display: flex; align-items: center; gap: 4px; }

/* Kleiner Termin */
.sess-date-small {
  font-size: 16px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 3px;
}
.sess-meta-small { font-size: 12px; color: var(--muted); }

.sess-cal-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.sess-cal-link:hover { color: var(--text); }

.sess-cal-link-header {
  margin-top: 0;
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  opacity: 0.85;
  white-space: nowrap;
}
.sess-cal-link-header:hover { opacity: 1; color: inherit !important; }

/* Morgen-Karte (schmal) */
.db-card-slim {
  padding: 10px 16px;
}
.db-card-slim .sess-date-small {
  margin: 4px 0 2px;
}
.db-card-slim .sess-meta-small {
  margin-top: 2px;
}

/* Team-Hinweis fuer Springer-Termine (fremdes Team) */
.guest-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  background: #2a2010;
  color: #e8a020;
  border: 1px solid rgba(232, 160, 32, 0.27);
}

/* "Frei"-Badge */
.sess-badge-free {
  color: var(--muted);
  background: transparent;
  border-color: var(--border);
}

/* Physio-Hinweis */
.db-card-physio { padding: 10px 16px; }
.physio-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Utensilien-Zuständigkeit */
.db-card-duty-active {
  border-color: rgba(240,199,101,0.35);
  background: linear-gradient(90deg, rgba(240,199,101,0.05) 0%, var(--card) 50%);
}
.duty-names { font-size: 15px; font-weight: 600; color: var(--fg); margin: 4px 0 2px; }
.duty-week  { font-size: 12px; color: var(--muted); }
.duty-you-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: #f0c765;
  background: rgba(240,199,101,0.12);
  border: 1px solid rgba(240,199,101,0.3);
  border-radius: 4px;
  padding: 2px 8px;
  margin-top: 5px;
}

/* Utensil-Tags */
.utensil-tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.utensil-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
}

/* Competition / Wettbewerbsliste */
.competition-score {
  font-size: 18px;
  font-weight: 700;
  color: var(--fg);
}
.competition-score-positive { color: #3fb950; }
.competition-score-negative { color: #f85149; }

.competition-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 8px;
}
.competition-badge-positive {
  color: #3fb950;
  background: rgba(63,185,80,0.1);
  border: 1px solid rgba(63,185,80,0.3);
}
.competition-badge-negative {
  color: #f85149;
  background: rgba(248,81,73,0.1);
  border: 1px solid rgba(248,81,73,0.3);
}

.competition-row-positive td:first-child { border-left: 3px solid #3fb950; }
.competition-row-negative td:first-child { border-left: 3px solid #f85149; }

.competition-table td:first-child,
.competition-table th:first-child {
  text-align: center;
}

.competition-admin-table {
  table-layout: fixed;
}

.competition-admin-table td:last-child,
.competition-admin-table th:last-child {
  width: 230px;
}

.competition-admin-table td:nth-child(3),
.competition-admin-table th:nth-child(3) {
  width: 110px;
}

.competition-admin-table td:nth-child(4),
.competition-admin-table th:nth-child(4) {
  width: 25%;
}

.competition-admin-table .inline-actions {
  flex-wrap: nowrap;
  gap: 8px;
}

/* Die Auswahlkaestchen der Rangliste hatten hier eine eigene, dunkle Sonderoptik.
   Sie stammte aus der Zeit vor dem Redesign, wurde von ".redesign-page input"
   ueberschrieben und blies das Kaestchen zur grossen Box auf. Die Optik kommt jetzt
   aus der zentralen .app-select-cb (app-redesign.css), .competition-select-cb bleibt
   reiner JavaScript-Haken. */

.competition-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

/* Bankdaten kompakt */
.bank-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 20px;
  margin-top: 5px;
}
.bank-item { display: flex; flex-direction: column; gap: 1px; }
.bank-lbl { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.bank-val { font-size: 12px; font-weight: 500; color: var(--fg); word-break: break-all; }

/* Offene Strafen */
.fines-sum {
  font-size: 30px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
  margin: 4px 0 8px;
}
.fines-sum.red { color: #f85149; }

.fines-toggle {
  font-size: 10px;
  background: none;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  padding: 0 6px;
  height: 18px;
  line-height: 18px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}
.fines-toggle:hover { border-color: var(--fg); color: var(--fg); }

.fines-list { display: none; margin-top: 10px; }
.fines-list.open {
  display: block;
  max-height: min(50vh, 420px);
  overflow: auto;
  scrollbar-gutter: stable;
}

.fines-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fines-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  padding: 0 6px 5px 0;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 1px 0 var(--border);
}
.fines-table td { padding: 5px 6px 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.fines-table tr:last-child td { border-bottom: none; }
.fines-table th:nth-child(2), .fines-table td:nth-child(2) { text-align: right; }
.fines-table th:nth-child(3), .fines-table td:nth-child(3) { text-align: right; white-space: nowrap; }

/* Trikotnummer im Header */
.jersey-number {
  font-family: 'Georgia', serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1;
  color: var(--muted);
}

@media (max-width: 640px) {
  .jersey-number { font-size: 12px; }
}

/* Utensilien-Übersicht: aktuelle Woche hervorheben */
tr.duty-current-week td {
  background: rgba(240,199,101,0.07);
}
tr.duty-current-week td:first-child {
  border-left: 3px solid rgba(240,199,101,0.6);
}

/* ══════════════════════════════════════════════════════
   Budget – Übersicht (IST-Aggregation)
   ══════════════════════════════════════════════════════ */

.budget-overview-table .text-right {
  text-align: right;
}

tr.budget-total-row td {
  font-weight: 600;
  border-top: 2px solid var(--border);
  background: rgba(255,255,255,0.03);
}

/* Buchungsquelle: Handkassa, Rechnung, Rechnungsstorno oder Auslagenerstattung */
.booking-source-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.25;
}

.booking-source-badge--cash {
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.15);
}

.booking-source-badge--invoice {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.15);
}

.booking-source-badge--cancellation {
  color: #f87171;
  background: rgba(248, 113, 113, 0.15);
}

.booking-source-badge--expense {
  color: #f0c765;
  background: rgba(240, 199, 101, 0.15);
}

.booking-source-badge--allocation {
  color: #5eead4;
  background: rgba(45, 212, 191, 0.14);
}

.booking-source-badge--remainder {
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.14);
}

/* Filter-Zeile */
.filter-form {
  padding: var(--space-3) 0 0;
}
.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: flex-end;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.filter-group label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.filter-actions {
  flex-direction: row;
  gap: var(--space-2);
  padding-top: 1.25rem;
}

/* ── Persönliche Daten: Profil-Formular & Erinnerungs-Modal ─────────────── */

.personal-data-intro {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 18px;
}

.personal-data-intro-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 8px 20px rgba(224, 75, 63, 0.35);
}

.personal-data-intro-icon svg {
  width: 20px;
  height: 20px;
  color: #fff;
}

.personal-data-intro-text {
  margin: 0;
  padding-top: 2px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.personal-data-reminder-backdrop {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.personal-data-reminder-backdrop.is-visible {
  opacity: 1;
}

.personal-data-reminder-card {
  text-align: center;
  transform: translateY(14px) scale(0.97);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.personal-data-reminder-backdrop.is-visible .personal-data-reminder-card {
  transform: translateY(0) scale(1);
}

.personal-data-reminder-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 12px 28px rgba(224, 75, 63, 0.4);
}

.personal-data-reminder-icon svg {
  width: 26px;
  height: 26px;
  color: #fff;
}

.personal-data-reminder-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.personal-data-reminder-card p {
  margin: 0 0 22px;
}

.personal-data-reminder-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.personal-data-reminder-actions .btn-later {
  background: none;
  border: none;
  box-shadow: none;
  color: var(--muted);
  font-weight: 500;
  padding: 10px;
  min-height: auto;
}

.personal-data-reminder-actions .btn-later:hover {
  color: var(--text);
  transform: none;
  background: none;
  box-shadow: none;
}

/* ── Passwort-Sichtbarkeits-Umschalter ───────────────────────────────────── */

.password-field-wrap {
  position: relative;
}

.password-field-wrap input {
  padding-right: 40px;
}

.password-toggle {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  min-height: 30px;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--muted);
  cursor: pointer;
}

.password-toggle:hover {
  background: none;
  box-shadow: none;
  transform: translateY(-50%);
  color: var(--text);
}

.password-toggle:active {
  transform: translateY(-50%) scale(0.92);
}

.password-toggle svg {
  width: 18px;
  height: 18px;
}

.password-toggle .icon-eye-off {
  display: none;
}

.password-field-wrap.is-visible .password-toggle .icon-eye {
  display: none;
}

.password-field-wrap.is-visible .password-toggle .icon-eye-off {
  display: block;
}