/* =========================================================================
   gitref – App Styles
   High-fidelity redesign per design_handoff_besetzung/README.md
   Design tokens, Dark + Light theme (.gr-light), responsive Mobile + Desktop.
   ========================================================================= */

/* ---------- Design Tokens ---------- */
:root {
  /* Theme surfaces (Dark default) */
  --bg:     #0a0c10;
  --panel:  #11141b;
  --panel2: #171b24;
  --modal:  #13161e;
  --input:  #0d1016;
  --text:   #e6e9ef;
  --wash:   255,255,255;   /* neutral surfaces/borders as rgba(var(--wash), α) */
  --vig:    10,12,16;      /* translucent nav backdrop base */

  /* Accents (identical in both themes) */
  --blue:   #4f8cff;
  --violet: #7b5cff;
  --amber:  #f5a524;

  /* Ampel */
  --green:  #2ea043;
  --yellow: #d6a514;
  --red:    #e5484d;

  /* Status text */
  --st-draft:     #8b92a0;
  --st-pending:   #d6a514;
  --st-confirmed: #5fd97e;
  --st-declined:  #ff7b7e;

  /* Geometry */
  --sidebar: 232px;
  --r-card:  18px;
  --r-slot:  13px;
  --r-chip:  12px;
  --r-btn:   12px;
  --r-pill:  99px;

  /* Shadows */
  --sh-card:  0 4px 24px rgba(0,0,0,.3);
  --sh-modal: 0 30px 80px rgba(0,0,0,.6);

  /* Glass (verschiebbare, leicht transparente Fenster) */
  --glass:    rgba(17,20,27,.80);
  --sh-float: 0 24px 70px rgba(0,0,0,.55);
}

body.gr-light {
  --bg:     #f0ebe1;
  --panel:  #fdfaf3;
  --panel2: #f0ebe1;
  --modal:  #fdfaf3;
  --input:  #e8e2d3;
  --text:   #241c0e;
  --wash:   36,28,14;
  --vig:    240,235,225;
  --sh-card:  0 4px 24px rgba(60,40,10,.10);
  --sh-modal: 0 30px 80px rgba(60,40,10,.22);
  --glass:    rgba(253,250,243,.88);
  --sh-float: 0 24px 70px rgba(60,40,10,.22);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; }

body {
  font-family: 'Manrope', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}

h1, h2, h3, .num, .matchup, .stat-value, .brand-word {
  font-family: 'Space Grotesk', 'Manrope', sans-serif;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

::selection { background: rgba(79,140,255,.32); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(var(--wash),.18); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes gr-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes gr-pulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes gr-pop { 0% { transform: scale(.85); } 60% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes gr-modal-in { from { opacity: 0; transform: scale(.94) translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- App Layout ---------- */
body.has-sidebar { display: grid; grid-template-columns: var(--sidebar) 1fr; min-height: 100vh; }
body.no-sidebar .main-content { max-width: 460px; margin: 0 auto; padding: 40px 20px; }
body.landing-page { display: block; }
body.landing-page .main-content { padding: 0; max-width: none; overflow: visible; }

/* ---------- Mobile top bar (hidden on desktop) ---------- */
.mobile-bar {
  display: none;
  position: sticky; top: 0; z-index: 45;
  align-items: center; gap: 12px;
  height: 56px; padding: 0 14px;
  background: rgba(var(--vig),.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(var(--wash),.08);
}
.mobile-bar .hamburger {
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(var(--wash),.06); border: 1px solid rgba(var(--wash),.1);
  display: grid; place-items: center; cursor: pointer; color: var(--text);
  font-size: 18px; padding: 0;
}
.mobile-bar .mobile-brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 17px; font-family: 'Space Grotesk', sans-serif; }

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--panel);
  border-right: 1px solid rgba(var(--wash),.07);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 22px 0 16px;
  z-index: 50;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 0 20px 18px; font-weight: 700; font-size: 19px;
  font-family: 'Space Grotesk', sans-serif; letter-spacing: -.5px;
  border-bottom: 1px solid rgba(var(--wash),.07); margin-bottom: 14px;
}
.brand-word .ref { color: var(--blue); }
.zebra {
  width: 30px; height: 30px; border-radius: 8px; overflow: hidden;
  display: flex; flex-shrink: 0;
  border: 1px solid rgba(var(--wash),.14);
  box-shadow: 0 0 0 3px rgba(79,140,255,.12);
}
.zebra i { flex: 1; }
.zebra i:nth-child(odd)  { background: #0e0e12; }
.zebra i:nth-child(even) { background: #f4f4f6; }

.sidebar ul { list-style: none; margin: 0; padding: 0 10px; flex: 1; }
.sidebar li { margin: 2px 0; }
.sidebar li.nav-section {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: rgba(var(--wash),.4); padding: 14px 10px 4px;
}
.sidebar li a, .sidebar .nav-link-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  color: rgba(var(--wash),.62); font-size: 14px; font-weight: 600;
  transition: background .15s, color .15s;
}
.sidebar li a:hover, .sidebar .nav-link-btn:hover {
  background: rgba(var(--wash),.05); color: var(--text); text-decoration: none;
}
.sidebar li a.active { background: rgba(79,140,255,.14); color: #9cc0ff; }
.sidebar li a.active .nav-icon { opacity: 1; }
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: .65; transition: opacity .15s; }
.sidebar li a:hover .nav-icon, .sidebar .nav-link-btn:hover .nav-icon { opacity: 1; }
.nav-label { flex: 1; }

.sidebar-footer {
  border-top: 1px solid rgba(var(--wash),.07);
  padding: 14px 20px calc(10px + env(safe-area-inset-bottom)); margin-top: auto;
  display: flex; flex-direction: column; gap: 10px;
}
.user-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.user-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 11px; text-transform: capitalize; }
.logout-form { display: contents; }
.logout {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: rgba(var(--wash),.5);
  transition: color .15s;
  background: none; border: none; padding: 0; font-family: inherit; cursor: pointer;
}
.logout:hover { color: var(--red); text-decoration: none; }

/* Scrim for mobile drawer */
.nav-scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 49; }

/* ---------- Main Content ---------- */
.main-content { padding: 26px 28px; min-width: 0; }

/* Desktop header bar (bell/chat/theme) sitting inside the scrollable content pane */
.content-topbar {
  position: sticky; top: 0; z-index: 40;
  margin: -26px -28px 20px; padding: 0 28px;
  height: 56px;
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  background: rgba(var(--vig),.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(var(--wash),.08);
}
@media (max-width: 860px) {
  /* mobile-bar already covers bell/chat/theme up top */
  .content-topbar { display: none; }
}

/* ---------- Legal Footer ---------- */
.legal-footer {
  padding: 16px 28px 24px; text-align: center; font-size: 12px;
  color: rgba(var(--wash),.5);
}
.legal-footer a { color: inherit; text-decoration: underline; }
.legal-footer span { margin: 0 6px; }

/* ---------- Flash Messages ---------- */
.flash {
  padding: 12px 16px; border-radius: var(--r-btn);
  margin-bottom: 16px; font-size: 14px; font-weight: 500;
  transition: opacity .4s; border: 1px solid transparent;
}
.flash.success { background: rgba(46,160,67,.12); border-color: rgba(46,160,67,.4); color: var(--st-confirmed); }
.flash.error   { background: rgba(229,72,77,.12); border-color: rgba(229,72,77,.4); color: var(--st-declined); }
.flash.info    { background: rgba(79,140,255,.12); border-color: rgba(79,140,255,.4); color: var(--blue); }

/* ---------- Page Header ---------- */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.page-header h2 { margin: 0; font-size: 26px; letter-spacing: -.5px; }
.muted { color: rgba(var(--wash),.5); }

/* ---------- Auth / Centered Cards ---------- */
.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--panel); border: 1px solid rgba(var(--wash),.08);
  border-radius: var(--r-card); padding: 32px;
  box-shadow: var(--sh-card);
}
.auth-brand { text-align: center; margin-bottom: 28px; }
.auth-brand .zebra { margin: 0 auto 12px; width: 42px; height: 42px; }
.auth-brand h1 { margin: 0 0 4px; font-size: 24px; }
.auth-brand .sub { color: rgba(var(--wash),.5); font-size: 13px; margin: 0; }
.welcome { color: rgba(var(--wash),.5); font-size: 14px; margin-bottom: 20px; }

.status-card { text-align: center; }
.status-icon {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; margin: 0 auto 16px;
}
.status-card.ok   .status-icon { background: rgba(46,160,67,.2);  color: var(--green); }
.status-card.bad  .status-icon { background: rgba(229,72,77,.2);  color: var(--red); }
.status-card.warn .status-icon { background: rgba(214,165,20,.2); color: var(--yellow); }

/* ---------- Forms ---------- */
form { display: flex; flex-direction: column; gap: 16px; }
label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
label span { color: rgba(var(--wash),.6); }
label small { font-size: 11px; }
input[type="email"], input[type="password"], input[type="text"],
input[type="date"], input[type="tel"], input[type="search"], input[type="number"], select, textarea {
  background: var(--input); color: var(--text);
  border: 1px solid rgba(var(--wash),.12); border-radius: 9px;
  padding: 7px 11px; font: inherit; font-size: 13.5px; width: 100%;
  transition: border-color .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue); }
textarea { resize: vertical; }
.char-counter { font-size: 11px; color: rgba(var(--wash),.5); text-align: right; }

/* ---------- Buttons ---------- */
button, .btn-primary, .btn-danger {
  cursor: pointer; font: inherit; border-radius: var(--r-btn);
  padding: 7px 14px; border: none; font-weight: 700; font-size: 13px;
  transition: transform .12s ease, background .18s ease, box-shadow .2s ease, border-color .18s ease, filter .18s;
}
.btn-primary {
  background: var(--blue); color: #fff;
  box-shadow: 0 8px 24px rgba(79,140,255,.35);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-secondary {
  display: inline-block; cursor: pointer; font: inherit; font-weight: 700; font-size: 13px;
  padding: 7px 14px; border-radius: var(--r-btn);
  background: rgba(var(--wash),.05); color: var(--text);
  border: 1px solid rgba(var(--wash),.14);
  transition: transform .12s ease, border-color .18s ease;
}
.btn-secondary:hover { text-decoration: none; }
.btn-secondary:hover { transform: translateY(-1px); border-color: var(--blue); }
.btn-danger  { background: var(--red); color: #fff; }
.btn-danger:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-ghost {
  background: rgba(var(--wash),.05); color: var(--text);
  border: 1px solid rgba(var(--wash),.12); border-radius: 10px;
  padding: 8px 13px; cursor: pointer; font: inherit; font-weight: 600;
}
.btn-ghost:hover { border-color: var(--blue); }
.btn-ghost:disabled { opacity: .35; cursor: default; }
.btn-link-danger { background: none; border: none; color: rgba(var(--wash),.5); cursor: pointer; font-size: 16px; padding: 0 4px; }
.btn-link-danger:hover { color: var(--red); }
.full { width: 100%; }

/* Anchor-styled buttons must never show the link underline */
a.btn-primary, a.btn-secondary, a.btn-danger, a.btn-ghost,
a.btn-confirm, a.btn-decline, a.btn-send,
a.btn-primary:hover, a.btn-secondary:hover, a.btn-danger:hover, a.btn-ghost:hover,
a.btn-confirm:hover, a.btn-decline:hover, a.btn-send:hover { text-decoration: none; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid rgba(var(--wash),.08); border-radius: var(--r-card); }
/* Wie .table-wrap, aber ohne Panel-Optik – für Tabellen, die bereits in einer
   .admin-section o. Ä. stecken. Breite Tabellen scrollen dann im Wrapper statt
   die ganze Seite horizontal aufzuziehen (Mobile/PWA). */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { color: rgba(var(--wash),.5); font-weight: 700; text-align: left; padding: 11px 14px; border-bottom: 1px solid rgba(var(--wash),.08); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
table.data td { padding: 12px 14px; border-bottom: 1px solid rgba(var(--wash),.06); }
table.data tr:last-child td { border-bottom: none; }
table.data th[data-sort] { user-select: none; }
table.data th[data-sort]::after { content: ''; display: inline-block; width: 0; height: 0; margin-left: 5px; border-left: 4px solid transparent; border-right: 4px solid transparent; vertical-align: middle; }
table.data th[data-sort].sort-asc::after { border-bottom: 5px solid currentColor; }
table.data th[data-sort].sort-desc::after { border-top: 5px solid currentColor; }
table.data tr.row-link { cursor: pointer; }
table.data tr.row-link:hover { background: rgba(var(--wash),.04); }

/* ---------- Badges ---------- */
.badge { font-size: 11px; padding: 3px 9px; border-radius: var(--r-pill); font-weight: 700; border: 1px solid rgba(var(--wash),.15); }
.badge-ok   { color: var(--st-confirmed); border-color: rgba(46,160,67,.4); background: rgba(46,160,67,.1); }
.badge-warn { color: var(--st-pending);   border-color: rgba(214,165,20,.4); background: rgba(214,165,20,.1); }
.badge-bad  { color: var(--st-declined);  border-color: rgba(229,72,77,.4); background: rgba(229,72,77,.1); }
.badge-muted { color: rgba(var(--wash),.55); }

/* ---------- Avatar (shared) ---------- */
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 12px;
  color: #fff; flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif;
}

/* ---------- Team-Badge (Logo oder Initialen-Platzhalter) ---------- */
.team-badge {
  border-radius: 50%; flex-shrink: 0; vertical-align: middle;
  object-fit: cover; background: rgba(var(--wash),.06);
}
.team-badge-fallback {
  display: inline-grid; place-items: center; font-weight: 700;
  color: #fff; font-family: 'Space Grotesk', sans-serif; line-height: 1;
}

/* ---------- Two-col Admin ---------- */
.two-col-admin { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.three-col-admin { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.admin-section { background: var(--panel); border: 1px solid rgba(var(--wash),.08); border-radius: var(--r-card); padding: 20px; }
.admin-section h3 { margin: 0 0 14px; font-size: 16px; }

/* Ausklappbare Gruppen unter Bewerbe & Teams: Mannschaften je Bewerb,
   Vereine mit Bewerbs-Übersicht in der zugeklappten Zeile. */
.div-group { border: 1px solid rgba(var(--wash),.08); border-radius: var(--r-card); overflow: hidden; margin-top: 12px; }
.div-group > summary {
  list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; cursor: pointer; user-select: none;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 14px;
  background: rgba(var(--wash),.03);
}
.div-group > summary::-webkit-details-marker { display: none; }
.div-group > summary::before {
  content: '▶'; font-size: 10px; color: rgba(var(--wash),.4);
  transition: transform .18s; flex-shrink: 0;
}
.div-group[open] > summary::before { transform: rotate(90deg); }
.div-group-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.div-group-count { font-size: 12px; font-weight: 400; color: rgba(var(--wash),.45); flex-shrink: 0; text-align: right; }
.div-group-body { padding: 4px 12px 12px; }
.div-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.inline-form { display: flex; flex-direction: row; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 0; }
.inline-form input, .inline-form select { flex: 1; min-width: 100px; }
.time-selects { display: flex; align-items: center; gap: 4px; }
.time-selects select { flex: none; width: auto; min-width: 0; padding: 10px 8px; }
.time-sep { font-weight: 700; color: rgba(var(--wash),.5); user-select: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.form-actions { display: flex; gap: 10px; align-items: center; padding-top: 4px; }
.fieldset { border: 1px solid rgba(var(--wash),.12); border-radius: 10px; padding: 14px; margin: 0; }
.fieldset legend { font-size: 12px; color: rgba(var(--wash),.5); padding: 0 6px; text-transform: uppercase; letter-spacing: .5px; }
.view-value { font-size: 15px; font-weight: 600; }

/* =========================================================================
   BESETZUNGS-BOARD
   ========================================================================= */
.board-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar-group { display: flex; align-items: center; gap: 6px; }
.toolbar-group--wrap { flex-wrap: wrap; }
.toolbar-label { font-size: 12px; font-weight: 700; color: rgba(var(--wash),.5); margin-right: 2px; text-transform: uppercase; letter-spacing: .04em; }

/* Sort-/Filter-/Ansicht-Buttons + Bewerbs-Chips (hatten vorher keinerlei
   Styles – der active-Zustand war dadurch unsichtbar). */
.sort-btn, .filter-btn, .view-btn, .expand-btn, .div-chip {
  background: var(--panel); border: 1px solid rgba(var(--wash),.14);
  color: rgba(var(--wash),.75); border-radius: var(--r-pill);
  padding: 6px 12px; font-size: 13px; font-family: inherit; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.sort-btn:hover, .filter-btn:hover, .view-btn:hover, .expand-btn:hover, .div-chip:hover { border-color: rgba(var(--wash),.3); color: rgba(var(--wash),.95); }
.sort-btn.active, .filter-btn.active, .view-btn.active {
  background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700;
}
.div-chip { --chip: 79,140,255; display: inline-flex; align-items: center; gap: 7px; }
.div-chip::before {
  content: ''; width: 9px; height: 9px; border-radius: 50%;
  background: rgb(var(--chip)); flex-shrink: 0;
}
.div-chip.active {
  background: rgba(var(--chip),.16); border-color: rgb(var(--chip));
  color: rgba(var(--wash),.95); font-weight: 700;
}
/* "Alle"-Chip hat keinen Farb-Punkt */
.div-chip:first-child::before { display: none; }

/* Farb-Punkt in Bewerbs-Accordion-Titeln */
.div-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: rgb(var(--chip, 79,140,255)); margin-right: 8px; vertical-align: baseline;
}

/* Tages-Zwischenüberschrift innerhalb einer Wochen-/Bewerbs-Sektion */
.day-header {
  font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: rgba(var(--wash),.45);
  padding: 10px 2px 2px; border-bottom: 1px solid rgba(var(--wash),.08);
  margin-bottom: 6px;
}

/* Slot-Fokus (Kandidaten-Panel aktiv) */
.slot.focused {
  outline: 2px solid var(--blue); outline-offset: 1px;
  background: rgba(79,140,255,.08);
}

/* Kandidaten-Kontext im Pool */
.pool-context {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(79,140,255,.12); border: 1px solid rgba(79,140,255,.45);
  border-radius: 8px; padding: 8px 10px; margin: 0 0 10px;
  font-size: 12px; font-weight: 700;
}
.pool-context[hidden] { display: none; }
.pool-context button {
  background: none; border: none; color: inherit; font-size: 16px;
  cursor: pointer; line-height: 1; padding: 0 2px;
}

/* Kandidaten-Karten (Slot-Fokus-Modus) */
.candidate-card {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--panel); border: 1px solid rgba(var(--wash),.12);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 8px;
  cursor: grab; position: relative;
}
.candidate-card.ok   { border-left: 3px solid var(--green); }
.candidate-card.warn { border-left: 3px solid var(--orange, #f5a524); }
.candidate-card.bad  { border-left: 3px solid var(--red); opacity: .45; cursor: default; }
.candidate-card .cand-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.candidate-card .cand-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.cand-status { font-size: 11.5px; line-height: 1.35; }
.cand-status.ok   { color: var(--green); }
.cand-status.warn { color: var(--orange, #f5a524); }
.cand-status.bad  { color: var(--red); }
.cand-meta { font-size: 11px; color: rgba(var(--wash),.5); }
.cand-assign {
  align-self: center; flex-shrink: 0;
  background: var(--blue); border: none; color: #fff;
  border-radius: var(--r-pill); padding: 6px 14px;
  font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.cand-assign:hover { filter: brightness(1.1); }

.pool-search { display: flex; gap: 6px; }
.pool-search input { flex: 1; min-width: 0; width: auto; }
.pool-search select { flex-shrink: 0; width: auto; max-width: 112px; font-size: 12px; }
.weekend-nav { display: flex; align-items: center; gap: 8px; background: var(--panel); border: 1px solid rgba(var(--wash),.08); border-radius: var(--r-pill); padding: 4px; }
.weekend-nav .btn-ghost { border: none; background: transparent; padding: 6px 10px; font-size: 16px; }
.weekend-label { font-weight: 700; min-width: 200px; text-align: center; font-size: 14px; }

.assignment-layout { display: grid; grid-template-columns: 1fr 312px; gap: 22px; align-items: start; max-width: 1620px; }
.games-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* Woche (collapsible) */
.week-section { background: var(--panel); border: 1px solid rgba(var(--wash),.08); border-radius: var(--r-card); overflow: hidden; }
.week-section > summary {
  list-style: none; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer; user-select: none;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px;
  background: rgba(var(--wash),.03);
}
.week-section > summary::-webkit-details-marker { display: none; }
.week-section > summary::before {
  content: '▶'; font-size: 11px; color: rgba(var(--wash),.4);
  transition: transform .18s; flex-shrink: 0;
}
.week-section[open] > summary::before { transform: rotate(90deg); }
.week-summary-label { flex: 1; min-width: 0; }
.week-summary-sub { font-size: 12px; font-weight: 400; color: rgba(var(--wash),.45); margin-top: 2px; }
.week-meta { font-size: 12px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; flex-shrink: 0; }
.week-meta.full  { color: var(--green); }
.week-meta.partial { color: var(--amber); }
.week-meta.empty { color: rgba(var(--wash),.3); }
.week-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 14px; }
.week-body-loading { padding: 24px 18px; color: rgba(var(--wash),.4); font-size: 13px; }
.week-expand-all {
  background: none; border: none; color: rgba(var(--wash),.45); font-size: 11px;
  font-weight: 700; cursor: pointer; padding: 2px 6px; border-radius: 5px; margin-left: auto;
}
.week-expand-all:hover { color: var(--blue); background: rgba(79,140,255,.08); }

/* Bewerbs-Untergruppen innerhalb einer Woche (Wochenende zuerst, dann Division) */
.division-sub { border: 1px solid rgba(var(--wash),.08); border-radius: 10px; overflow: hidden; }
.division-sub > summary {
  list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; cursor: pointer; user-select: none;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 13.5px;
  background: rgba(var(--wash),.02);
}
.division-sub > summary::-webkit-details-marker { display: none; }
.division-sub > summary::before {
  content: '▶'; font-size: 10px; color: rgba(var(--wash),.4);
  transition: transform .18s; flex-shrink: 0;
}
.division-sub[open] > summary::before { transform: rotate(90deg); }
.division-sub-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.division-sub-meta { font-size: 12px; font-weight: 400; color: rgba(var(--wash),.45); flex-shrink: 0; }
.division-sub-body { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px 12px; }

/* Spiel-Karte */
.game-card {
  background: var(--panel); border: 1px solid rgba(var(--wash),.08);
  border-radius: var(--r-card); padding: 10px 14px; box-shadow: var(--sh-card);
}
/* Noch nicht an die Crew ausgeschickte Board-Änderungen (Entwurf, vorgemerkte
   Entfernung oder Positionswechsel) – siehe gameHasUncommitted() in drag-drop.js. */
.game-card--pending {
  border-color: rgba(245,165,36,.45);
  box-shadow: var(--sh-card), inset 3px 0 0 var(--amber);
}
.pending-badge {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-pill);
  font-family: 'Space Grotesk', sans-serif; white-space: nowrap;
  background: rgba(245,165,36,.14); border: 1px solid rgba(245,165,36,.4); color: var(--amber);
}
.game-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 0; cursor: pointer; }
.game-crew-section { padding-top: 10px; }
.game-crew-section[hidden] { display: none; }
.game-toggle {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; padding: 0;
  background: rgba(var(--wash),.05); border: 1px solid rgba(var(--wash),.1);
  color: rgba(var(--wash),.45); cursor: pointer; display: grid; place-items: center;
  transition: border-color .15s, color .15s;
}
.game-toggle:hover { border-color: var(--blue); color: var(--blue); }
.game-toggle svg { transition: transform .2s; }
.game-toggle.open svg { transform: rotate(180deg); }
.week-expand-ctrl { display: flex; justify-content: flex-end; margin-bottom: 2px; }
.div-badge {
  font-size: 12px; font-weight: 700; padding: 4px 11px; border-radius: var(--r-pill);
  font-family: 'Space Grotesk', sans-serif; letter-spacing: .3px;
  background: rgba(var(--div, 79,140,255),.14); border: 1px solid rgba(var(--div, 79,140,255),.4);
  color: rgb(var(--div, 79,140,255));
}
.matchup { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 17px; }

/* Jubiläums-Badge: markiert Spiele-Meilensteine (50er/100er) in der Besetzung. */
.milestone-badge {
  font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill);
  font-family: 'Space Grotesk', sans-serif; white-space: nowrap; margin-left: 6px;
  background: rgba(155,89,182,.14); border: 1px solid rgba(155,89,182,.4); color: #9b59b6;
}
.milestone-badge--100 {
  font-size: 11px; padding: 3px 9px;
  background: rgba(245,165,36,.18); border: 1px solid rgba(245,165,36,.55); color: var(--amber);
  box-shadow: 0 0 0 1px rgba(245,165,36,.15);
}
.matchup .vs { color: rgba(var(--wash),.4); font-weight: 500; margin: 0 6px; }
.game-meta { color: rgba(var(--wash),.55); font-size: 12.5px; }
.fill-counter { font-size: 12.5px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.fill-counter.full { color: var(--green); }
.fill-counter.partial { color: var(--amber); }
.game-head-spacer { margin-left: auto; }
.btn-send {
  background: var(--blue); color: #fff; border: none; border-radius: 8px;
  padding: 5px 11px; font: 700 12px/1 'Manrope', sans-serif; cursor: pointer;
  box-shadow: 0 4px 14px rgba(79,140,255,.3); white-space: nowrap;
}
.btn-send:hover { filter: brightness(1.06); transform: translateY(-1px); }
.btn-send:disabled { opacity: .35; cursor: default; filter: none; box-shadow: none; transform: none; background: rgba(var(--wash),.1); color: rgba(var(--wash),.45); }

/* Crew-Varianten-Leiste */
.crew-variants { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 10px; }
.crew-variant-btn {
  padding: 3px 9px; border-radius: 7px; font-size: 12px; font-weight: 700; cursor: pointer;
  background: rgba(var(--wash),.05); border: 1px solid rgba(var(--wash),.1); color: rgba(var(--wash),.6);
}
.crew-variant-btn:hover { border-color: rgba(79,140,255,.4); }
.crew-variant-btn.active { background: rgba(79,140,255,.16); border-color: rgba(79,140,255,.5); color: #9cc0ff; }

/* Slot-Grid */
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 8px; }
.slot {
  border-radius: var(--r-slot); padding: 7px 10px; min-height: 58px;
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid rgba(var(--wash),.09); background: rgba(var(--wash),.018);
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.slot.dragover { border-color: var(--blue) !important; transform: translateY(-2px); }
.slot.ok   { background: rgba(46,160,67,.05);  border-color: rgba(46,160,67,.4); }
.slot.warn { background: rgba(214,165,20,.06); border-color: rgba(214,165,20,.5); }
.slot.bad  { background: rgba(229,72,77,.07);  border-color: rgba(229,72,77,.55); }
.slot.tap-target { outline: 2px dashed var(--blue); outline-offset: 2px; }
.slot.just-filled { animation: gr-pop .32s cubic-bezier(.34,1.56,.64,1); }

.slot-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.slot-pos { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: rgba(var(--wash),.55); }
.slot-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.slot-dot.ok   { background: var(--green);  box-shadow: 0 0 8px rgba(46,160,67,.7); }
.slot-dot.warn { background: var(--yellow); box-shadow: 0 0 8px rgba(214,165,20,.7); }
.slot-dot.bad  { background: var(--red);    box-shadow: 0 0 8px rgba(229,72,77,.7); }

.slot-body { display: flex; align-items: center; gap: 9px; cursor: grab; }
.slot-body:active { cursor: grabbing; }
.slot-body.dragging { opacity: .45; }
.slot-body .avatar { width: 26px; height: 26px; font-size: 10px; }
.slot-ref { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.slot-name { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slot-status-label { font-size: 10.5px; font-weight: 600; }
.st-draft     { color: var(--st-draft); }
.st-pending   { color: var(--st-pending); }
.st-confirmed { color: var(--st-confirmed); }
.st-declined  { color: var(--st-declined); }
.slot-feldseminarist-position {
  margin-top: 2px; font-size: 10.5px; font-weight: 600; max-width: 100%;
  background: rgba(var(--wash),.06); border: 1px solid rgba(var(--wash),.16); border-radius: 4px;
  color: inherit; padding: 1px 3px;
}
.slot-feldseminarist-position.bad { border-color: rgba(229,72,77,.55); color: var(--red); }
.slot-remove { background: transparent; border: none; color: rgba(var(--wash),.45); font-size: 17px; cursor: pointer; padding: 0 2px; line-height: 1; flex-shrink: 0; }
.slot-remove:hover { color: var(--red); }
.slot-empty { font-style: italic; color: rgba(var(--wash),.35); font-size: 13px; }
.slot-note { font-size: 11px; line-height: 1.35; }
.slot-note.warn { color: var(--yellow); }
.slot-note.bad  { color: var(--red); }
.slot-note.info { color: var(--blue); }
.declined-list { border-top: 1px solid rgba(var(--wash),.1); margin-top: 8px; padding-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.declined-item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--st-declined); opacity: .85; }
.declined-item em { color: rgba(var(--wash),.55); font-style: normal; }
.avatar-sm { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; flex-shrink: 0; }

/* ---------- Pool ---------- */
.pool-col {
  position: sticky; top: 86px;
  background: var(--panel); border: 1px solid rgba(var(--wash),.08);
  border-radius: var(--r-card); padding: 16px; box-shadow: var(--sh-card);
}
.pool-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.pool-head strong { font-size: 15px; font-family: 'Space Grotesk', sans-serif; }
.pool-count { font-size: 12px; color: rgba(var(--wash),.45); font-weight: 700; }
.pool-search { margin-bottom: 10px; }
.pool-search input { padding: 8px 12px; }
.pool-hint { color: rgba(var(--wash),.4); font-size: 11.5px; margin: 0 0 10px; }
.pool-discard {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px dashed rgba(var(--wash),.18); border-radius: 10px;
  padding: 8px 12px; margin: 0 0 12px; cursor: default;
  color: rgba(var(--wash),.35); font-size: 12px; font-style: italic;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pool-discard-icon { font-size: 15px; flex-shrink: 0; }
.pool-discard.discard-over {
  border-color: var(--red); background: rgba(229,72,77,.08); color: var(--red);
}
.pool-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 270px); overflow: auto; }
.pool-card {
  display: flex; align-items: center; gap: 11px;
  background: var(--panel2); border: 1px solid rgba(var(--wash),.07);
  border-radius: var(--r-chip); padding: 9px 11px; cursor: grab;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.pool-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.pool-card:active { cursor: grabbing; }
.pool-card.dragging { opacity: .5; }
.pool-card.assigned { opacity: .55; }
.pool-card.selected { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(79,140,255,.35); }
.pool-info { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1; }
.pool-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pool-sub { font-size: 11px; color: rgba(var(--wash),.45); }
.pool-stars { display: flex; gap: 1px; font-size: 11px; line-height: 1; margin-top: 3px; }
.pool-stars .on  { color: var(--amber); }
.pool-stars .off { color: rgba(var(--wash),.18); }

/* ---------- Floating windows (Konflikt / Absage / Compose) ----------
   Layover-Fenster: leicht transparent, frei verschiebbar, NICHT blockierend. */
.modal-backdrop { position: fixed; inset: 0; background: transparent; pointer-events: none; display: grid; place-items: center; z-index: 60; padding: 18px; }
.modal-backdrop[hidden] { display: none; }
.modal {
  pointer-events: auto;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(var(--wash),.14);
  border-radius: var(--r-card); width: min(460px, 96vw);
  padding: 0 22px 22px;
  box-shadow: var(--sh-float); animation: gr-modal-in .2s ease;
}
/* Titel = voll­breiter Drag-Griff */
.modal h3 {
  margin: 0 -22px 16px; padding: 13px 22px; font-size: 17px;
  display: flex; align-items: center; gap: 9px; cursor: move; user-select: none;
  border-bottom: 1px solid rgba(var(--wash),.1);
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.modal h3::before { content: '⠿'; opacity: .45; font-size: 15px; }
.gr-dragging { box-shadow: 0 36px 90px rgba(0,0,0,.6) !important; transition: none !important; }
.gr-draggable-handle { touch-action: none; }
.conflict-reasons { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.conflict-reasons li { padding: 9px 12px; border-radius: 10px; font-size: 13px; line-height: 1.4; }
.conflict-reasons li.bad  { background: rgba(229,72,77,.1);  color: var(--red); border: 1px solid rgba(229,72,77,.3); }
.conflict-reasons li.warn { background: rgba(214,165,20,.1); color: var(--yellow); border: 1px solid rgba(214,165,20,.3); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Command Palette (Strg+K) ---------- */
.cmdk-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: grid; place-items: start center; z-index: 80; padding: 12vh 18px 18px;
}
.cmdk-backdrop[hidden] { display: none; }
.cmdk {
  width: min(560px, 96vw); max-height: 70vh; display: flex; flex-direction: column;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(var(--wash),.14); border-radius: var(--r-card);
  box-shadow: var(--sh-float); animation: gr-modal-in .16s ease; overflow: hidden;
}
.cmdk-input-wrap {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  border-bottom: 1px solid rgba(var(--wash),.1); flex-shrink: 0;
}
.cmdk-input-wrap svg { flex-shrink: 0; opacity: .5; }
.cmdk-input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); font-size: 16px; font-family: inherit;
}
.cmdk-input::placeholder { color: rgba(var(--wash),.4); }
.cmdk-esc {
  flex-shrink: 0; font-size: 11px; padding: 2px 6px; border-radius: 5px;
  background: rgba(var(--wash),.1); border: 1px solid rgba(var(--wash),.14);
  color: rgba(var(--wash),.6); font-family: inherit;
}
.cmdk-list { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }
.cmdk-section {
  padding: 8px 12px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: rgba(var(--wash),.4);
}
.cmdk-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  cursor: pointer; font-size: 14px;
}
.cmdk-item.active, .cmdk-item:hover { background: rgba(var(--wash),.08); }
.cmdk-item-icon { display: flex; flex-shrink: 0; opacity: .7; }
.cmdk-item-icon svg { width: 16px; height: 16px; }
.cmdk-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-empty { padding: 22px 18px; text-align: center; color: rgba(var(--wash),.5); font-size: 13px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 10px; z-index: 70; align-items: center; }
.toast {
  background: var(--panel); border: 1px solid rgba(var(--wash),.1);
  border-left: 4px solid var(--blue); border-radius: var(--r-chip);
  padding: 12px 18px; max-width: 92vw; font-size: 14px; font-weight: 500;
  box-shadow: 0 12px 34px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: none; }
.toast.ok   { border-left-color: var(--green); }
.toast.info { border-left-color: var(--blue); }
.toast.warn { border-left-color: var(--amber); }
.toast.bad  { border-left-color: var(--red); }

/* =========================================================================
   DASHBOARD
   ========================================================================= */
.dashboard { max-width: 1320px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 16px; margin-bottom: 22px; }
.stat-card {
  position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid rgba(var(--wash),.08);
  border-radius: var(--r-card); padding: 20px; box-shadow: var(--sh-card);
}
.stat-card .glow { position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%; filter: blur(40px); opacity: .5; }
.stat-card .glow.blue   { background: var(--blue); }
.stat-card .glow.violet { background: var(--violet); }
.stat-card .glow.amber  { background: var(--amber); }
.stat-card .glow.green  { background: var(--green); }
.stat-card .glow.red    { background: var(--red); }
.stat-label { font-size: 13px; color: rgba(var(--wash),.55); font-weight: 600; position: relative; }
.stat-value { font-size: 38px; font-weight: 700; line-height: 1.1; margin: 6px 0 2px; position: relative; }
.stat-value.red   { color: var(--red); }
.stat-value.green { color: var(--green); }
.stat-sub { font-size: 12px; color: rgba(var(--wash),.45); position: relative; }

.dash-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 18px; align-items: start; }
.dash-panel { background: var(--panel); border: 1px solid rgba(var(--wash),.08); border-radius: var(--r-card); padding: 20px; box-shadow: var(--sh-card); }
.dash-panel h3 { margin: 0 0 16px; font-size: 17px; }
.dash-game-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(var(--wash),.06); cursor: pointer; }
.dash-game-row:first-of-type { border-top: none; }
.dash-game-row .num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: rgba(var(--wash),.4); font-size: 13px; }
.dash-game-title { font-weight: 600; font-size: 14px; }
.dash-game-date { font-size: 12px; color: rgba(var(--wash),.45); }
.dash-game-right { text-align: right; min-width: 120px; }
.progress { height: 7px; border-radius: 99px; background: rgba(var(--wash),.1); overflow: hidden; margin-top: 6px; }
.progress > i { display: block; height: 100%; border-radius: 99px; }
.progress > i.full    { background: var(--green); }
.progress > i.partial { background: var(--amber); }
.progress > i.empty   { background: var(--red); }
.conflict-row { display: flex; align-items: flex-start; gap: 10px; padding: 11px 0; border-top: 1px solid rgba(var(--wash),.06); }
.conflict-row:first-of-type { border-top: none; }
.conflict-row .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.conflict-row .dot.bad  { background: var(--red); }
.conflict-row .dot.warn { background: var(--yellow); }
.conflict-where { font-weight: 600; font-size: 13.5px; }
.conflict-why { font-size: 12px; color: rgba(var(--wash),.5); margin-top: 2px; }
.empty-state { text-align: center; color: rgba(var(--wash),.45); padding: 24px; font-size: 14px; }

/* =========================================================================
   MEINE SPIELE (Referee view)
   ========================================================================= */
.referee-view { max-width: 880px; }
.referee-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.referee-head .avatar { width: 52px; height: 52px; font-size: 18px; }
.referee-head .rh-name { font-size: 20px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.referee-head .rh-meta { font-size: 13px; color: rgba(var(--wash),.5); }
.assignment-cards { display: flex; flex-direction: column; gap: 14px; }
.assign-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  background: var(--panel); border: 1px solid rgba(var(--wash),.08);
  border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--sh-card);
}
.date-block { text-align: center; min-width: 56px; }
.date-block .dow { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: rgba(var(--wash),.45); font-weight: 700; }
.date-block .day { font-size: 28px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; line-height: 1; }
.assign-main { min-width: 0; }
.assign-title { font-weight: 700; font-size: 15px; font-family: 'Space Grotesk', sans-serif; }
.assign-sub { font-size: 12.5px; color: rgba(var(--wash),.5); margin-top: 3px; }
.assign-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.assign-actions { display: flex; gap: 8px; }
.btn-confirm { background: rgba(46,160,67,.16); border: 1px solid rgba(46,160,67,.45); color: var(--st-confirmed); border-radius: 10px; padding: 8px 13px; font-weight: 700; font-size: 13px; cursor: pointer; }
.btn-confirm:hover { background: rgba(46,160,67,.25); }
.btn-decline { background: rgba(229,72,77,.14); border: 1px solid rgba(229,72,77,.45); color: var(--st-declined); border-radius: 10px; padding: 8px 13px; font-weight: 700; font-size: 13px; cursor: pointer; }
.btn-decline:hover { background: rgba(229,72,77,.24); }
.assign-links { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.icon-btn { background: none; border: none; cursor: pointer; font-size: 16px; padding: 0; line-height: 1; color: inherit; }
.icon-btn:hover { transform: translateY(-1px); }

/* =========================================================================
   LANDING
   ========================================================================= */
.landing { min-height: 100vh; display: flex; flex-direction: column; }
.landing-nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; }
.landing-nav .brand { display: flex; align-items: center; gap: 11px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: -.5px; }
.landing-nav .nav-actions { display: flex; align-items: center; gap: 12px; }
.landing-hero {
  flex: 1; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center;
  gap: 40px; max-width: 1200px; margin: 0 auto; width: 100%; padding: 20px 48px 60px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: var(--r-pill);
  background: rgba(79,140,255,.10); border: 1px solid rgba(79,140,255,.25);
  color: #9cc0ff; font-size: 13px; font-weight: 600; margin-bottom: 24px;
}
.hero-badge .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--blue); animation: gr-pulse 2s infinite; }
.hero h1 {
  font-size: clamp(54px, 8vw, 104px); line-height: .95; letter-spacing: -3px;
  font-weight: 700; margin: 0 0 22px;
}
.hero h1 .accent { color: var(--blue); }
.hero p { font-size: clamp(17px, 2vw, 21px); color: #a9b0bd; max-width: 560px; margin: 0 0 30px; line-height: 1.5; }
body.gr-light .hero p { color: #4a5364; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px; }
.hero-stats { display: flex; gap: 44px; flex-wrap: wrap; }
.hero-stat .v { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 30px; }
.hero-stat .l { font-size: 13px; color: rgba(var(--wash),.5); margin-top: 2px; }
.hero-art { display: flex; justify-content: center; animation: gr-float 7s ease-in-out infinite; }

/* =========================================================================
   CHAT
   ========================================================================= */
.chat-wrap { display: flex; flex-direction: column; max-width: 700px; height: calc(100vh - 160px); }
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 0; }
.chat-msg { display: flex; flex-direction: column; max-width: 70%; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-author { font-size: 11px; color: rgba(var(--wash),.5); margin-bottom: 3px; }
.chat-bubble { background: var(--panel); border: 1px solid rgba(var(--wash),.1); border-radius: 12px; padding: 9px 13px; font-size: 14px; word-break: break-word; }
.chat-msg.mine .chat-bubble { background: var(--blue); border-color: var(--blue); color: #fff; }
.chat-ts { font-size: 10px; color: rgba(var(--wash),.4); margin-top: 3px; }
.chat-form { display: flex; gap: 10px; padding: 12px 0 0; border-top: 1px solid rgba(var(--wash),.08); }
.chat-form input { flex: 1; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
  .assignment-layout { grid-template-columns: 1fr; }
  .pool-col { position: static; max-height: none; }
  .pool-list { max-height: 320px; }
  .dash-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  /* Backstop gegen horizontales Seiten-Scrollen: breite Inhalte scrollen in
     ihren eigenen Wrappern (.table-wrap/.table-scroll), nie die ganze Seite. */
  html, body { overflow-x: clip; }
  body.has-sidebar { display: block; }
  .mobile-bar { display: flex; }
  .sidebar {
    position: fixed; top: 0; left: 0; width: 280px; height: 100vh; height: 100dvh;
    transform: translateX(-100%); transition: transform .28s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.5);
  }
  body.nav-open .sidebar { transform: translateX(0); }
  body.nav-open .nav-scrim { display: block; }
  .main-content { padding: 18px 16px; }
  .page-header h2 { font-size: 22px; }

  .landing-nav { padding: 16px 20px; }
  .landing-hero { grid-template-columns: 1fr; padding: 10px 20px 50px; gap: 24px; }
  .hero-art { display: none; }
  .hero-stats { gap: 28px; }

  .assign-card { grid-template-columns: auto 1fr; }
  .assign-side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
  .two-col-admin { grid-template-columns: 1fr; }
  .three-col-admin { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .slots { grid-template-columns: 1fr; }
  .stat-value { font-size: 32px; }
  .weekend-label { min-width: 140px; font-size: 13px; }
  .hero h1 { letter-spacing: -1.5px; }
}

/* =========================================================================
   CHAT WIDGET + NOTIFICATION BELL (bar triggers + panels)
   ========================================================================= */
.mobile-bar-actions { margin-left: auto; display: flex; gap: 6px; }
.tool-buttons { display: flex; align-items: center; gap: 8px; }

.bar-action {
  position: relative; width: 38px; height: 38px; border-radius: 10px; padding: 0;
  background: rgba(var(--wash),.06); border: 1px solid rgba(var(--wash),.1);
  color: var(--text); cursor: pointer; font-size: 17px; display: grid; place-items: center;
}
.bar-action:hover { border-color: var(--blue); }
.bar-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 99px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; line-height: 1;
  font-family: 'Manrope', sans-serif;
}
.bar-badge[hidden] { display: none; }

/* Chat trigger inside the sidebar nav list */
.nav-link-btn {
  width: 100%; text-align: left; border: none; background: transparent;
  font: inherit; cursor: pointer;
}
.bar-badge.inline { position: static; margin-left: auto; }

/* ---- Notification panel ---- */
.notif-panel {
  position: fixed; z-index: 80; display: none; flex-direction: column;
  width: min(360px, 94vw); max-height: 70vh;
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(var(--wash),.14);
  border-radius: var(--r-card); box-shadow: var(--sh-float); overflow: hidden;
  top: 70px; right: 24px;
}
.notif-panel.open { display: flex; }
.notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid rgba(var(--wash),.08); cursor: move; user-select: none; }
.notif-head strong { font-size: 15px; }
.notif-mark-all { background: none; border: none; color: var(--blue); font-size: 12px; font-weight: 700; cursor: pointer; padding: 4px 6px; }
.notif-list { overflow-y: auto; }
.notif-item { display: block; position: relative; padding: 12px 16px 12px 22px; border-bottom: 1px solid rgba(var(--wash),.06); color: inherit; text-decoration: none; }
.notif-item:hover { background: rgba(var(--wash),.04); text-decoration: none; }
.notif-item.unread { background: rgba(79,140,255,.06); }
.notif-item.unread::before { content: ''; position: absolute; left: 9px; top: 16px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); }
.notif-title { font-weight: 700; font-size: 13px; }
.notif-body { font-size: 12px; color: rgba(var(--wash),.6); margin-top: 2px; }
.notif-time { font-size: 11px; color: rgba(var(--wash),.4); margin-top: 4px; }
.notif-empty { padding: 28px 16px; text-align: center; color: rgba(var(--wash),.45); font-size: 13px; }

/* ---- Chat panel ---- */
.chat-panel {
  position: fixed; z-index: 80; right: 18px; bottom: 18px;
  width: min(680px, 94vw); height: min(560px, 80vh);
  background: var(--glass);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(var(--wash),.14);
  border-radius: var(--r-card); box-shadow: var(--sh-float);
  display: none; flex-direction: column; overflow: hidden;
  resize: both; min-width: 360px; min-height: 320px;
}
.chat-panel.open { display: flex; }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid rgba(var(--wash),.08); cursor: move; user-select: none; }
.chat-head strong::before { content: '⠿ '; opacity: .4; }
.chat-head strong { font-size: 15px; }
.chat-actions { display: flex; align-items: center; gap: 6px; }
.btn-mini { background: rgba(var(--wash),.05); border: 1px solid rgba(var(--wash),.12); color: var(--text); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; }
.btn-mini:hover { border-color: var(--blue); }
.chat-close { background: none; border: none; color: rgba(var(--wash),.5); font-size: 24px; cursor: pointer; padding: 0 4px; line-height: 1; }
.chat-body { display: flex; flex: 1; min-height: 0; }
.chat-sidebar { width: 230px; border-right: 1px solid rgba(var(--wash),.08); overflow-y: auto; flex-shrink: 0; }
.chat-convs { display: flex; flex-direction: column; }
.chat-conv-item { padding: 11px 13px; border-bottom: 1px solid rgba(var(--wash),.05); cursor: pointer; }
.chat-conv-item:hover { background: rgba(var(--wash),.04); }
.chat-conv-item.active { background: rgba(79,140,255,.1); border-left: 3px solid var(--blue); }
.conv-title { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.conv-type-icon { font-size: 14px; }
.conv-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.conv-preview { display: block; font-size: 12px; color: rgba(var(--wash),.5); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-stream { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.chat-conv-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 11px 14px; border-bottom: 1px solid rgba(var(--wash),.08); font-weight: 700; font-size: 14px; }
.chat-back { display: none; background: none; border: none; color: var(--text); font-size: 18px; cursor: pointer; padding: 0 4px; }
.chat-info { background: none; border: 1px solid rgba(var(--wash),.14); border-radius: 7px; padding: 3px 9px; font-size: 13px; cursor: pointer; color: rgba(var(--wash),.6); }
.chat-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 14px; }
.chat-msg { position: relative; max-width: 80%; display: flex; flex-direction: column; gap: 2px; }
.chat-msg.own { align-self: flex-end; align-items: flex-end; }
.msg-sender { font-size: 11px; color: rgba(var(--wash),.5); font-weight: 600; }
.msg-bubble { background: var(--panel2); border: 1px solid rgba(var(--wash),.07); border-radius: 12px; padding: 8px 12px; font-size: 14px; word-break: break-word; }
.chat-msg.own .msg-bubble { background: var(--blue); border-color: var(--blue); color: #fff; }
.msg-time { font-size: 10px; color: rgba(var(--wash),.4); }
.msg-read { margin-left: 4px; }
.msg-read.read-all { color: var(--blue); font-weight: 700; }
.msg-footer { display: flex; align-items: center; gap: 4px; }
.chat-msg.own .msg-footer { flex-direction: row-reverse; }
.msg-react-btn { background: none; border: none; font-size: 12px; opacity: .35; cursor: pointer; padding: 0 2px; line-height: 1; }
.msg-react-btn:hover { opacity: 1; }
.msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; }
.msg-reactions:empty { display: none; }
.msg-reaction-pill { display: inline-flex; align-items: center; gap: 3px; background: var(--panel2); border: 1px solid rgba(var(--wash),.12); border-radius: 99px; padding: 1px 7px; font-size: 12px; cursor: pointer; }
.msg-reaction-pill span { font-size: 10px; opacity: .7; }
.msg-reaction-pill.mine { border-color: var(--blue); background: rgba(79,140,255,.15); }
.msg-react-picker { position: absolute; display: flex; align-items: center; gap: 3px; background: var(--panel); border: 1px solid rgba(var(--wash),.14); border-radius: 10px; padding: 4px 6px; box-shadow: 0 4px 14px rgba(0,0,0,.18); z-index: 6; margin-top: 2px; }
.msg-react-picker button[data-e] { background: none; border: none; font-size: 16px; cursor: pointer; padding: 2px 3px; }
.msg-react-picker button[data-e]:hover { transform: scale(1.15); }
.msg-react-picker .react-custom { width: 56px; font-size: 13px; padding: 3px 6px; }
.msg-react-picker .react-custom-add { background: none; border: 1px solid rgba(var(--wash),.16); border-radius: 6px; font-size: 12px; font-weight: 700; cursor: pointer; padding: 2px 6px; color: var(--text); }
.msg-react-picker .react-custom-add:hover { border-color: var(--blue); }
.chat-empty { padding: 28px 14px; text-align: center; color: rgba(var(--wash),.45); font-size: 13px; }
/* flex-direction explizit: die globale form-Regel (column) würde Eingabefeld
   und Senden-Button sonst untereinander stapeln. */
.chat-input-form { display: flex; flex-direction: row; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid rgba(var(--wash),.08); }
.chat-input-form input { flex: 1; }
.chat-input-form button { background: var(--blue); color: #fff; border: none; border-radius: 10px; padding: 9px 16px; font-weight: 700; cursor: pointer; }

/* Picker / info overlay inside the stream */
.chat-picker { position: absolute; inset: 0; background: var(--panel); padding: 16px; overflow-y: auto; z-index: 5; display: flex; flex-direction: column; gap: 10px; }
.chat-picker h4 { margin: 0; font-size: 15px; }
.chat-picker .picker-name { width: 100%; }
.icon-picker { display: flex; align-items: center; gap: 6px; }
.icon-picker .icon-input { width: 56px; text-align: center; }
.picker-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; flex: 1; }
.picker-item { display: flex; align-items: center; gap: 6px; padding: 9px 11px; border-radius: 9px; background: var(--panel2); border: 1px solid rgba(var(--wash),.06); cursor: pointer; font-size: 13.5px; }
.picker-item:hover { border-color: var(--blue); }
.picker-actions { display: flex; gap: 8px; justify-content: flex-end; }
.picker-actions button { background: rgba(var(--wash),.05); border: 1px solid rgba(var(--wash),.12); color: var(--text); border-radius: 9px; padding: 8px 14px; font-weight: 700; font-size: 13px; cursor: pointer; }
.picker-actions button.primary { background: var(--blue); color: #fff; border-color: var(--blue); }

@media (max-width: 860px) {
  /* Vollbild-Chat: !important schlägt auch Inline-Styles, die grMakeDraggable /
     resize am Desktop gesetzt haben könnten. dvh statt %/vh, damit die
     Eingabezeile bei dynamischer Browser-UI (iOS/Android) sichtbar bleibt,
     Safe-Area-Insets für Notch & Home-Indicator im PWA-Standalone-Modus. */
  .chat-panel {
    position: fixed !important; inset: 0 !important;
    width: 100% !important; max-width: none !important; min-width: 0 !important;
    height: 100% !important; height: 100dvh !important; max-height: none !important; min-height: 0 !important;
    border-radius: 0; border: none; resize: none;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .chat-sidebar { width: 100%; }
  .chat-body.show-stream .chat-sidebar { display: none; }
  .chat-body:not(.show-stream) .chat-stream { display: none; }
  .chat-back { display: inline-flex; align-items: center; }
  .notif-panel {
    left: 8px !important; right: 8px !important; top: calc(64px + env(safe-area-inset-top)) !important;
    bottom: auto !important; width: auto !important; max-height: 70dvh;
  }
}

/* =========================================================================
   MAILBOX (Microsoft 365 / Graph)
   ========================================================================= */
.connect-card {
  max-width: 520px; margin: 40px auto; text-align: center;
  background: var(--panel); border: 1px solid rgba(var(--wash),.08);
  border-radius: var(--r-card); padding: 40px 32px; box-shadow: var(--sh-card);
}
.connect-card .connect-icon { font-size: 44px; margin-bottom: 12px; }
.connect-card h3 { margin: 0 0 10px; font-size: 20px; }
.connect-card p { margin: 0 0 20px; line-height: 1.5; }
.connect-card code { background: rgba(var(--wash),.08); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }

.mailbox {
  display: grid; grid-template-columns: 210px 340px 1fr; gap: 0;
  height: calc(100vh - 130px); min-height: 420px;
  background: var(--panel); border: 1px solid rgba(var(--wash),.08);
  border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-card);
}
.mb-folders { border-right: 1px solid rgba(var(--wash),.08); overflow-y: auto; padding: 8px; }
.mb-folders ul { list-style: none; margin: 0; padding: 0; }
.mb-folder { display: flex; align-items: center; gap: 8px; padding: 9px 11px; border-radius: 9px; cursor: pointer; font-size: 14px; font-weight: 600; }
.mb-folder:hover { background: rgba(var(--wash),.05); }
.mb-folder.active { background: rgba(79,140,255,.12); color: #2f6fdb; }
.mb-folder-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-folder-badge { background: var(--blue); color: #fff; font-size: 10px; font-weight: 700; border-radius: 99px; padding: 1px 7px; }

.mb-list { border-right: 1px solid rgba(var(--wash),.08); display: flex; flex-direction: column; min-width: 0; }
.mb-list-head { padding: 10px; border-bottom: 1px solid rgba(var(--wash),.08); }
.mb-list-head input { padding: 8px 12px; }
.mb-list ul { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.mb-msg { padding: 11px 14px; border-bottom: 1px solid rgba(var(--wash),.06); cursor: pointer; }
.mb-msg:hover { background: rgba(var(--wash),.04); }
.mb-msg.unread { background: rgba(79,140,255,.05); }
.mb-msg.unread .mb-msg-from, .mb-msg.unread .mb-msg-subject { font-weight: 700; }
.mb-msg-top { display: flex; justify-content: space-between; gap: 8px; }
.mb-msg-from { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-msg-date { font-size: 11.5px; color: rgba(var(--wash),.45); flex-shrink: 0; }
.mb-msg-subject { font-size: 13.5px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mb-msg-preview { font-size: 12px; color: rgba(var(--wash),.45); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mb-reader { display: flex; flex-direction: column; min-width: 0; }
.mb-reader-empty { display: grid; place-items: center; height: 100%; font-size: 14px; }
.mb-reader-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px; border-bottom: 1px solid rgba(var(--wash),.08); }
.mb-back { display: none; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--text); padding: 0 4px; }
.mb-reader-meta { flex: 1; min-width: 0; }
.mb-reader-subject { font-size: 18px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; }
.mb-reader-from { font-size: 13.5px; margin-top: 6px; }
.mb-reader-to { font-size: 12px; margin-top: 2px; }
.mb-reader-actions { display: flex; gap: 8px; flex-shrink: 0; }
.mb-reader-body { flex: 1; width: 100%; border: none; background: #fff; }

@media (max-width: 1080px) {
  .mailbox { grid-template-columns: 170px 1fr; }
  .mailbox .mb-reader { display: none; }
  .mailbox.show-reader { grid-template-columns: 1fr; }
  .mailbox.show-reader .mb-folders, .mailbox.show-reader .mb-list { display: none; }
  .mailbox.show-reader .mb-reader { display: flex; }
  .mb-back { display: inline-block; }
}
@media (max-width: 680px) {
  .mailbox { grid-template-columns: 1fr; height: calc(100vh - 150px); }
  .mailbox .mb-folders { display: none; }
}

/* =========================================================================
   SETTINGS PAGE TABS
   ========================================================================= */
.settings-tabs {
  display: flex; gap: 4px; margin-bottom: 24px;
  border-bottom: 1px solid rgba(var(--wash),.1); padding-bottom: 0;
}
.stab {
  background: none; border: none; padding: 10px 18px; font: inherit;
  font-size: 14px; font-weight: 700; cursor: pointer; color: rgba(var(--wash),.55);
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0;
  transition: color .15s, border-color .15s;
}
.stab:hover { color: var(--text); }
.stab.active { color: var(--blue); border-bottom-color: var(--blue); }

/* =========================================================================
   NOTIFICATION PREFERENCE TOGGLES
   ========================================================================= */
.notif-section-head {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; margin-bottom: 10px; margin-top: 8px;
}
.notif-section-head svg { opacity: .7; }
.notif-prefs { background: var(--panel); border: 1px solid rgba(var(--wash),.08); border-radius: var(--r-card); overflow: hidden; }
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 16px; border-bottom: 1px solid rgba(var(--wash),.06);
  cursor: pointer;
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row[class~="toggle-row"]:has(input[disabled]) { cursor: default; }
.toggle-label { font-size: 14px; user-select: none; flex: 1; }
.toggle-label small { display: block; font-size: 12px; color: rgba(var(--wash),.5); margin-top: 2px; font-weight: 400; }

.toggle-switch {
  position: relative; display: inline-flex; align-items: center;
  width: 42px; height: 24px; flex-shrink: 0;
}
.toggle-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: rgba(var(--wash),.18); border-radius: 24px;
  transition: background .2s;
}
.toggle-slider::before {
  content: ""; position: absolute;
  width: 18px; height: 18px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); transition: transform .2s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--blue); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }
.toggle-switch--disabled { opacity: .45; pointer-events: none; }

/* =========================================================================
   OPENSTREETMAP ADDRESS AUTOCOMPLETE
   ========================================================================= */
.osm-wrap { position: relative; }
.osm-suggestions {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 120;
  background: var(--panel); border: 1px solid rgba(var(--wash),.14);
  border-radius: 12px; list-style: none; margin: 0; padding: 4px;
  box-shadow: var(--sh-float); max-height: 240px; overflow-y: auto;
}
.osm-suggestions[hidden] { display: none; }
.osm-suggestions li {
  padding: 9px 13px; border-radius: 9px; cursor: pointer;
  font-size: 13px; color: var(--text); line-height: 1.4;
  transition: background .12s;
}
.osm-suggestions li:hover { background: rgba(var(--wash),.06); }

/* ---------- Honorar-Stammdaten (Ratings, Spielort-Zuordnung) ----------
   Vorher fixe Inline-Grids (1fr 130px 90px …), die auf Mobil die Seite
   horizontal aufgezogen haben – jetzt Klassen mit Umbruch-Layout. */
.hon-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 130px 90px 60px auto;
  gap: 6px 10px; align-items: center;
}
form.hon-grid { margin: 4px 0; }
form.hon-grid--new { margin: 10px 0 0; border-top: 1px solid rgba(var(--wash),.12); padding-top: 10px; }
.map-grid {
  display: grid; grid-template-columns: minmax(0,1fr) 60px minmax(0,1fr) auto;
  gap: 6px 10px; align-items: center;
}
form.map-grid { margin: 4px 0; }
.hon-grid-head, .map-grid-head { font-size: .8rem; color: rgba(var(--wash),.5); padding: 0 2px; }
.hon-grid input, .hon-grid select, .map-grid input, .map-grid select { min-width: 0; }

@media (max-width: 700px) {
  .hon-grid-head, .map-grid-head { display: none; }
  .hon-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .hon-grid input[name="name"] { grid-column: 1 / -1; }
  .map-grid { grid-template-columns: minmax(0,1fr) auto; }
}

/* ---------- Honorar-Abwicklung (Issue #17) ---------- */
.abw-intro { max-width: 760px; font-size: 13px; }
.abw-bank-note {
  max-width: 760px; margin: 14px 0 4px; padding: 10px 14px;
  border-radius: var(--r-chip); font-size: 13px;
  background: rgba(214,165,20,.1); border: 1px solid rgba(214,165,20,.4); color: var(--st-pending);
}
.abw-liga { background: var(--panel); border: 1px solid rgba(var(--wash),.08); border-radius: var(--r-card); overflow: hidden; margin-bottom: 18px; }
.abw-liga > summary {
  list-style: none; display: flex; align-items: center; gap: 12px;
  padding: 14px 18px; cursor: pointer; user-select: none;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px;
  background: rgba(var(--wash),.03);
}
.abw-liga > summary::-webkit-details-marker { display: none; }
.abw-liga > summary::before {
  content: '▶'; font-size: 11px; color: rgba(var(--wash),.4);
  transition: transform .18s; flex-shrink: 0;
}
.abw-liga[open] > summary::before { transform: rotate(90deg); }
.abw-liga-label { flex: 1; min-width: 0; }
.abw-liga-meta { font-size: 12px; font-weight: 700; font-family: 'Space Grotesk', sans-serif; flex-shrink: 0; color: rgba(var(--wash),.5); }
.abw-liga-body { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px 16px; }

.abw-game { border: 1px solid rgba(var(--wash),.08); border-radius: var(--r-chip); overflow: hidden; }
.abw-game > summary {
  list-style: none; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; cursor: pointer; user-select: none; font-size: 14px;
}
.abw-game > summary::-webkit-details-marker { display: none; }
.abw-game > summary::before {
  content: '▶'; font-size: 10px; color: rgba(var(--wash),.4);
  transition: transform .18s; flex-shrink: 0;
}
.abw-game[open] > summary::before { transform: rotate(90deg); }
.abw-game.ready { border-color: rgba(46,160,67,.4); }
.abw-game-title { font-weight: 600; }
.abw-game-sub { font-size: 12px; color: rgba(var(--wash),.55); }
.abw-game-meta { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.abw-game-body { padding: 6px 14px 14px; overflow-x: auto; }
.abw-game-body table.data { font-size: 0.84rem; }
.abw-num { text-align: right; white-space: nowrap; }

.abw-bar {
  position: sticky; bottom: 0; z-index: 5; margin-top: 18px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--glass); backdrop-filter: blur(14px);
  border: 1px solid rgba(var(--wash),.12); border-radius: var(--r-card);
  padding: 14px 18px; box-shadow: var(--sh-card);
}
.abw-bar-sum { font-family: 'Space Grotesk', sans-serif; font-weight: 700; }
.abw-bar-sum strong { font-size: 18px; }
.abw-bar .spacer { flex: 1; }

.abw-code {
  font-family: 'Space Grotesk', monospace; font-size: 26px; font-weight: 700;
  letter-spacing: 6px; text-align: center; padding: 10px;
  background: rgba(var(--wash),.06); border-radius: 10px; margin: 6px 0 14px;
}
.abw-modal-list { list-style: none; margin: 0 0 14px; padding: 0; max-height: 200px; overflow-y: auto; font-size: 13px; }
.abw-modal-list li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid rgba(var(--wash),.07); }

/* =========================================================================
   OBSERVER-BOGEN (docs/Observer-Bogen.pdf)
   ========================================================================= */
.obs-card {
  background: var(--panel); border: 1px solid rgba(var(--wash),.08);
  border-radius: var(--r-card); padding: 18px 20px; box-shadow: var(--sh-card);
  margin-bottom: 16px; max-width: 900px;
}
.obs-card h3 { margin: 0 0 14px; font-size: 16px; }
.obs-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.obs-missing {
  background: rgba(214,165,20,.08); border: 1px solid rgba(214,165,20,.35);
  border-radius: var(--r-card); padding: 12px 16px; margin-bottom: 16px; max-width: 900px; font-size: 13px;
}
.obs-missing ul { margin: 6px 0 0; padding-left: 18px; }
.obs-missing li { margin: 2px 0; }

/* Positions-Abschnitt (details/summary, wie .week-section) */
.obs-section { padding: 0; overflow: hidden; }
.obs-section > summary {
  list-style: none; display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 14px 20px; cursor: pointer; user-select: none;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 15px;
  background: rgba(var(--wash),.03);
}
.obs-section > summary::-webkit-details-marker { display: none; }
.obs-section-title { flex: 1; min-width: 0; }
.obs-grade-badge {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px;
  background: rgba(79,140,255,.14); color: var(--blue); border-radius: var(--r-pill);
  padding: 3px 12px; flex-shrink: 0;
}
.obs-section-body { padding: 16px 20px 20px; }

.obs-grade-items { display: flex; flex-direction: column; gap: 12px; }
.obs-grade-item { display: flex; flex-direction: column; gap: 4px; }
.obs-grade-item-label { font-size: 13.5px; color: rgba(var(--wash),.7); }

.obs-comment-box {
  margin-top: 16px; padding: 12px 14px; border-radius: 10px;
  background: rgba(79,140,255,.08); border: 1px solid rgba(79,140,255,.3);
}
.obs-comment-box p { margin: 6px 0; white-space: pre-wrap; }

.time-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
table.obs-score-table td input, table.obs-penalty-table td input { width: 100%; padding: 5px 7px; font-size: 12.5px; }
table.obs-score-table th, table.obs-penalty-table th { white-space: nowrap; }

/* ---- Grade-Slider ("Schieber") ---- */
.grade-slider { margin: 6px 0 4px; }
.grade-slider .gs-current { font-weight: 700; font-size: 13px; margin-bottom: 6px; color: var(--blue); }
.grade-slider .gs-current.unset { color: rgba(var(--wash),.45); font-weight: 600; }
.grade-slider.gs-required .gs-current.unset::after { content: ' (Pflicht)'; color: var(--red); font-weight: 600; }
.grade-slider .gs-readout { font-weight: 700; font-size: 13px; color: var(--text); }
.grade-slider input[type="range"] {
  width: 100%; height: 32px; margin: 0; padding: 0; cursor: pointer;
  accent-color: var(--blue); background: transparent;
}
.grade-slider .gs-scale { display: flex; justify-content: space-between; gap: 4px; font-size: 10.5px; color: rgba(var(--wash),.45); margin-top: 2px; }
.grade-slider .gs-scale span { flex: 1; text-align: center; }
.grade-slider .gs-scale span:first-child { text-align: left; }
.grade-slider .gs-scale span:last-child { text-align: right; }

@media (max-width: 700px) {
  .time-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .obs-section > summary { padding: 12px 14px; }
  .obs-section-body { padding: 14px; }
}

@media print {
  .obs-card, .obs-status, .obs-missing, .obs-section { display: none !important; }
}

/* ---- Persona-non-grata-Picker: Such-Dropdown mit Chips (statt Checkbox-Raster) ---- */
.ng-picker-fallback[hidden] { display: none; }
.ng-picker-count { font-weight: 400; color: rgba(var(--wash),.5); }
.ng-selected { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; min-height: 26px; }
.ng-empty { font-size: 0.85rem; color: rgba(var(--wash),.45); }
.ng-chip {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(79,140,255,.14);
  border: 1px solid rgba(79,140,255,.4); color: rgba(var(--wash),.95);
  border-radius: var(--r-pill); padding: 4px 6px 4px 12px; font-size: 0.82rem; line-height: 1.3;
}
.ng-chip button {
  all: unset; display: flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 13px;
  color: rgba(var(--wash),.6);
}
.ng-chip button:hover { background: rgba(229,72,77,.2); color: var(--red); }
.ng-combo { position: relative; }
.ng-search {
  width: 100%; box-sizing: border-box; background: var(--input); color: var(--text);
  border: 1px solid rgba(var(--wash),.15); border-radius: var(--r-btn);
  padding: 8px 12px; font-size: 0.88rem; font-family: inherit;
}
.ng-search:focus { outline: none; border-color: var(--blue); }
.ng-dropdown {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  max-height: 260px; overflow-y: auto; background: var(--panel);
  border: 1px solid rgba(var(--wash),.16); border-radius: var(--r-btn);
  box-shadow: var(--sh-card); padding: 4px;
}
.ng-dropdown[hidden] { display: none; }
.ng-option {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 0.86rem;
}
.ng-option:hover, .ng-option.active { background: rgba(79,140,255,.14); }
.ng-option .ng-option-hint { font-size: 0.76rem; color: rgba(var(--wash),.45); }
.ng-option .ng-option-plus {
  flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; color: var(--blue);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.ng-dropdown .ng-no-results { padding: 10px 9px; font-size: 0.84rem; color: rgba(var(--wash),.45); }