/* ============================================================================
 * FSX-Layout — Style-Definition aus FSXVereinskasse (Stand 2026-05-14)
 *
 * Drop-in-CSS für Schwester-Apps (FSXTurnierIT etc.), damit das UI das
 * gleiche Aussehen kriegt wie die Vereinskasse — ohne Tailwind als
 * Dependency.
 *
 * Pixel-Äquivalent zu den Tailwind-Klassen, die in der Vereinskasse-
 * `base.html` benutzt werden. Slate-Palette aus Tailwind 3.4
 * (https://tailwindcss.com/docs/customizing-colors).
 *
 * Einbau in einem App-Template:
 *   <link rel="stylesheet" href="/static/css/fsxbk-layout.css">
 *
 * HTML-Struktur: siehe `fsxbk-layout-snippet.html` im selben Ordner.
 * ========================================================================== */

/* ----- Farb-Variablen (Slate + Amber + Blue, wie in Vereinskasse) -------- */
:root {
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --blue-50:   #eff6ff;
  --blue-100:  #dbeafe;
  --blue-300:  #93c5fd;
  --blue-500:  #3b82f6;
  --blue-700:  #1d4ed8;
  --blue-900:  #1e3a8a;

  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-300: #fcd34d;
  --amber-500: #f59e0b;
  --amber-700: #b45309;
  --amber-800: #92400e;
  --amber-900: #78350f;

  --emerald-100: #d1fae5;
  --emerald-300: #6ee7b7;
  --emerald-700: #047857;
  --emerald-900: #064e3b;

  --rose-100:  #ffe4e6;
  --rose-300:  #fda4af;
  --rose-700:  #be123c;
  --rose-900:  #881337;

  /* Topbar-Höhe — global referenzierbar für sticky-Aside-Berechnung. */
  --topbar-h: 52px;
}

/* ----- Body-Reset + Background ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  overflow-x: hidden; max-width: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  background: var(--slate-50);
  color: var(--slate-900);
}

/* ----- Optionaler Staging-Banner ---------------------------------------- */
.staging-banner {
  background: var(--amber-500);
  color: #000;
  text-align: center;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
}

/* ----- Topbar (slate-800, sticky) --------------------------------------- */
.topbar {
  background: var(--slate-800);
  color: #fff;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--topbar-h);
}
.topbar-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar .brand {
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
}
.topbar .brand:hover { color: #fff; }
.topbar-context-divider {
  color: var(--slate-400);
}
.topbar-context-label {
  font-size: 13px;
  color: var(--slate-200);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Clickables in der Topbar = kleine, dunkle Buttons.
   `.topbar-user` (span) bleibt davon unberührt — er erbt seine
   Text-Optik weiter unten. */
.topbar-right a,
.topbar-right button,
.topbar-right .topbar-btn {
  background: var(--slate-700);
  color: #fff;
  border: 1px solid var(--slate-600);
  border-radius: 4px;
  padding: 4px 10px;
  font: inherit;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.topbar-right a:hover,
.topbar-right button:hover,
.topbar-right .topbar-btn:hover {
  background: var(--slate-600);
  border-color: var(--slate-500);
  color: #fff;
  text-decoration: none;
}
/* Primärer Topbar-Button (Blau, z. B. „Anmelden") */
.topbar-right .topbar-btn-primary,
.topbar-right a.is-primary,
.topbar-right button.is-primary {
  background: var(--blue-700);
  border-color: var(--blue-700);
}
.topbar-right .topbar-btn-primary:hover,
.topbar-right a.is-primary:hover,
.topbar-right button.is-primary:hover {
  background: var(--blue-900);
  border-color: var(--blue-900);
}
.topbar-user {
  font-size: 13px;
  color: var(--slate-300);
  /* Wenn jemand <span class="topbar-user"> innerhalb von
     .topbar-right setzt: keine Button-Optik erben. */
  background: none;
  border: 0;
  padding: 0;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Burger-Toggle: nur Mobile sichtbar */
.nav-toggle {
  background: none;
  border: 1px solid var(--slate-600);
  color: #fff;
  font: inherit;
  font-size: 16px;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}
.nav-toggle:hover { background: var(--slate-700); }

/* ----- App-Shell: Grid (Sidebar + Main) ---------------------------------- */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - var(--topbar-h));
}

/* Backdrop nur auf Mobile sichtbar — sonst aus dem Flow! */
.nav-backdrop { display: none; }

/* ----- Sidebar (weiß, slate-200-Border, sticky) ------------------------- */
.sidebar {
  background: #fff;
  border-right: 1px solid var(--slate-200);
  padding: 12px;
  overflow-y: auto;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
}
.nav-group {
  margin-bottom: 16px;
}
.nav-group + .nav-group {
  padding-top: 12px;
  border-top: 1px solid var(--slate-200);
}
.nav-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--slate-500);
  padding: 0 12px;
  margin-bottom: 6px;
}
.nav-group-label.accent-zentrale { color: var(--amber-700); }
.nav-group-label.accent-verein   { color: var(--blue-700); }
.nav-link {
  display: block;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  color: var(--slate-700);
  text-decoration: none;
  line-height: 1.2;
}
.nav-link:hover {
  background: var(--slate-100);
}
.nav-link.is-active {
  background: var(--slate-800);
  color: #fff;
}
.nav-link.is-active:hover {
  background: var(--slate-700);
}

/* ----- Main-Spalte ------------------------------------------------------- */
.app-main {
  min-width: 0; /* erlaubt Schrumpfen unter min-content (z.B. lange Tabellen) */
}
.app-main > main {
  max-width: 80rem; /* tailwind max-w-7xl = 80rem */
  margin: 0 auto;
  padding: 24px 16px;
}

/* ----- Kontext-Bar (Verein/Veranstaltung/Operator) ---------------------- */
.context-bar {
  border-bottom: 4px solid;
  padding: 8px 0;
}
.context-bar.is-veranstaltung { background: var(--amber-50);  border-color: var(--amber-500); }
.context-bar.is-verein        { background: var(--blue-50);   border-color: var(--blue-500);  }
.context-bar.is-operator      { background: var(--slate-100); border-color: var(--slate-400); }
.context-bar-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.context-bar-icon {
  font-size: 24px;
  line-height: 1;
}
.context-bar-text {
  flex: 1;
  min-width: 0;
}
.context-bar-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}
.context-bar.is-veranstaltung .context-bar-eyebrow { color: var(--amber-700); }
.context-bar.is-verein        .context-bar-eyebrow { color: var(--blue-700);  }
.context-bar.is-operator      .context-bar-eyebrow { color: var(--slate-600); }
.context-bar-title {
  font-size: 16px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.context-bar.is-veranstaltung .context-bar-title { color: var(--amber-900); }
.context-bar.is-verein        .context-bar-title { color: var(--blue-900);  }
.context-bar.is-operator      .context-bar-title { color: var(--slate-800); }

/* ----- Breadcrumbs ------------------------------------------------------- */
.breadcrumbs {
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
}
.breadcrumbs-inner {
  max-width: 80rem;
  margin: 0 auto;
  padding: 6px 16px;
  font-size: 12px;
  color: var(--slate-500);
  display: flex;
  gap: 4px;
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
}
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { color: var(--slate-800); text-decoration: underline; }
.breadcrumbs .sep { color: var(--slate-300); }
.breadcrumbs .current { color: var(--slate-700); font-weight: 500; }

/* ----- Form-Inputs (innerhalb des Hauptbereichs) -----------------------
 * Globale Default-Optik für `<input>`, `<select>`, `<textarea>` im
 * `.app-main`-Scope. Padding/Font werden bewusst etwas großzügiger
 * gesetzt als CSS-Default (entspricht Tailwind `px-3 py-2 text-base`,
 * wie es in der Vereinskasse via Inline-Klassen verwendet wird).
 *
 * Spezial-Inputs (Checkbox/Radio/Submit/File/Range/Color/Image/
 * Hidden) werden explizit ausgenommen — die behalten Browser-Default,
 * sonst sehen Toggles seltsam aus.
 *
 * Breite (`width: 100%`) wird hier NICHT gesetzt — pro Form selbst
 * managen (`.form` macht das via `flex: 1 1 auto`). So bleiben Filter-
 * Inputs und Tabellen-Inputs flexibel.
 * ----------------------------------------------------------------------- */
.app-main input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="image"]):not([type="hidden"]),
.app-main select,
.app-main textarea {
  padding: 8px 12px;
  border: 1px solid var(--slate-300);
  border-radius: 4px;
  font-size: 16px;
  line-height: 1.5;
  background: #fff;
  color: var(--slate-900);
  font-family: inherit;
  min-width: 0;
  max-width: 100%;
  transition: border-color 120ms, box-shadow 120ms;
}
.app-main input:focus,
.app-main select:focus,
.app-main textarea:focus {
  outline: none;
  border-color: var(--blue-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}
.app-main input::placeholder,
.app-main textarea::placeholder {
  color: var(--slate-400);
}
/* Spezial-Inputs: keine Border/Padding/etc. erben — Browser-Default. */
.app-main input[type="checkbox"]:focus,
.app-main input[type="radio"]:focus,
.app-main input[type="file"]:focus {
  box-shadow: revert;
  outline: revert;
}

/* ----- Card-Helper (für Inhalts-Boxen) ---------------------------------- */
.card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
  padding: 24px;
}
.card + .card { margin-top: 16px; }
.card-header {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

/* ----- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.4;
}
.btn-primary {
  background: var(--slate-800);
  color: #fff;
}
.btn-primary:hover { background: var(--slate-700); }
.btn-secondary {
  background: var(--slate-100);
  color: var(--slate-800);
  border-color: var(--slate-300);
}
.btn-secondary:hover { background: var(--slate-200); }
.btn-danger {
  background: var(--rose-700);
  color: #fff;
}
.btn-danger:hover { background: var(--rose-900); }

/* ----- Flash-Meldungen --------------------------------------------------- */
.flash {
  padding: 12px 16px;
  border-radius: 6px;
  border: 1px solid;
  font-size: 14px;
  margin-bottom: 16px;
}
.flash.is-success {
  background: var(--emerald-100);
  border-color: var(--emerald-300);
  color: var(--emerald-900);
}
.flash.is-warning {
  background: var(--amber-100);
  border-color: var(--amber-300);
  color: var(--amber-900);
}
.flash.is-danger {
  background: var(--rose-100);
  border-color: var(--rose-300);
  color: var(--rose-900);
}

/* ----- Mandanten-Wechsler (Topbar-Dropdown) ----------------------------
 * Drop-in-Component für Apps mit mehreren Mandanten pro User. Hängt
 * in `.topbar-inner`, nutzt `<details>`/`<summary>` für die State-
 * Verwaltung ohne JavaScript. Optionen werden als <form>-Buttons
 * gerendert (ein POST pro Wechsel).
 *
 * Beispiel-Markup siehe fsxbk-layout-snippet.html.
 * ----------------------------------------------------------------------- */
.mandant-switcher {
  position: relative;
  flex-shrink: 0;
}
.mandant-switcher details { position: relative; }
.mandant-switcher summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 10px;
  border: 1px solid var(--slate-600);
  border-radius: 4px;
  background: var(--slate-700);
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.mandant-switcher summary::-webkit-details-marker { display: none; }
.mandant-switcher summary:hover {
  background: var(--slate-600);
  border-color: var(--slate-500);
}
.mandant-switcher-label {
  color: var(--slate-300);
  font-size: 12px;
  margin-right: 2px;
}
.mandant-switcher-caret {
  color: var(--slate-300);
  font-size: 10px;
  margin-left: 4px;
}
.mandant-switcher-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  min-width: 260px;
  max-height: 70vh;
  overflow-y: auto;
  z-index: 110;
  padding: 4px 0;
}
.mandant-switcher-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--slate-900);
  cursor: pointer;
  display: block;
  line-height: 1.3;
  font: inherit;
}
.mandant-switcher-item:hover {
  background: var(--slate-100);
}
.mandant-switcher-item.is-active {
  background: var(--slate-800);
  color: #fff;
  font-weight: 500;
}
.mandant-switcher-item.is-active small {
  color: rgba(255, 255, 255, 0.75);
}
.mandant-switcher-divider {
  border-top: 1px solid var(--slate-200);
  margin: 4px 0;
}

/* ----- Footer (App-Footer mit API-Docs/Health) -------------------------
 * Zentriert, dezent (slate-400), klein. Pro App kann der Inhalt
 * (Links, Versionsnummer, Environment-Tag) frei zusammengestellt
 * werden — die Klasse liefert nur die Optik.
 * ----------------------------------------------------------------------- */
.fsx-footer {
  text-align: center;
  color: var(--slate-400);
  padding: 24px 16px 32px;
  font-size: 12px;
  line-height: 1.5;
}
.fsx-footer a {
  color: var(--slate-400);
  text-decoration: none;
}
.fsx-footer a:hover {
  color: var(--slate-700);
  text-decoration: underline;
}
.fsx-footer .sep {
  color: var(--slate-300);
  margin: 0 6px;
}
.fsx-footer code {
  background: var(--slate-100);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--slate-600);
  font-size: 11px;
}

/* ----- Mobile-Breakpoint (< 1101px) ------------------------------------- */
@media (max-width: 1100px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    bottom: 0;
    width: 80%;
    max-width: 320px;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    z-index: 90;
    box-shadow: 2px 0 12px rgba(0,0,0,0.08);
  }
  body.nav-open .sidebar { transform: translateX(0); }

  .nav-backdrop {
    display: block;
    position: fixed;
    top: var(--topbar-h);
    left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 80;
  }
  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Desktop-only-Hilfsklassen */
  .topbar-context-divider,
  .topbar-context-label,
  .topbar-user,
  .mandant-switcher-label { display: none; }

  /* Mandanten-Switcher bleibt sichtbar, wird kompakter:
     Dropdown öffnet rechtsbündig und passt auf kleine Screens. */
  .mandant-switcher-menu {
    left: auto;
    right: 0;
    min-width: 220px;
  }
}
@media (min-width: 1101px) {
  .nav-toggle { display: none; }
}