/* Gemeinsames Design-System für Schriftführer-App und Admin-Backend.
   Farben aus dem Vereinslogo (Grün) abgeleitet, eine Schriftart (Inter)
   für beide Bereiche, damit Front- und Backend wie ein Produkt wirken.

   WICHTIG: Diese Datei ist Teil von sw.js' PRECACHE_URLS und wird per
   cacheFirst ausgeliefert. Jede Änderung hier braucht ein SHELL_VERSION++
   in sw.js, sonst bleiben Geräte mit bereits installiertem Service Worker
   auf dem alten Stand hängen – unabhängig davon, wie oft danach noch
   gepusht wird. (Genau das ist am 2026-08-17 zweimal in Folge vergessen
   worden.) */

:root{
  /* Logo-Grün (#2E9E4A) ist für weiße Schrift zu hell (WCAG-Kontrast
     < 4.5:1). --bs-primary ist deshalb eine abgedunkelte, barrierefreie
     Variante; --brand-accent bleibt das originale Logo-Grün für Akzente
     mit dunkler Schrift (Tints, Badges). */
  --bs-primary: #1F7A38;
  --bs-primary-rgb: 31,122,56;
  --brand-primary-dark: #15612B;
  --brand-accent: #2E9E4A;
  --brand-primary-tint: #E6F4EA;

  --bs-success: #1F7A38;
  --bs-success-rgb: 31,122,56;
  --bs-danger: #C0392B;
  --bs-danger-rgb: 192,57,43;
  --bs-warning: #C67C1E;
  --bs-warning-rgb: 198,124,30;

  --bs-body-bg: #F6F7F6;
  --bs-body-color: #1A1C1A;
  --bs-secondary-color: #5B615C;
  --bs-border-color: #E2E5E1;
  --bs-border-radius: .65rem;
  --bs-border-radius-sm: .5rem;
  --bs-border-radius-lg: .85rem;

  --bs-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-link-color: #1F7A38;
  --bs-link-hover-color: #15612B;

  --shadow-sm: 0 1px 2px rgba(20,25,20,.06), 0 1px 1px rgba(20,25,20,.04);
  --shadow-md: 0 4px 14px rgba(20,25,20,.08);
}

body{
  padding-bottom: 40px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6{ font-weight: 700; letter-spacing: -0.01em; }

.app-wrap{ max-width: 560px; margin: 0 auto; }
.admin-wrap{ max-width: 980px; margin: 0 auto; }

/* Beibehaltene Klassennamen aus dem Frontend-Code, neu belegt: kein
   zweites/drittes Font-Family mehr laden – "display" ist einfach fetter
   Inter, "mono" sind tabellarische Ziffern derselben Schrift, damit
   Beträge sauber untereinanderstehen ohne einen Monospace-Font zu laden. */
.font-display{ font-weight: 700; letter-spacing: -0.01em; }
.font-mono{ font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.topbar{ background: var(--bs-primary); color: #fff; }
.topbar a{ color: #fff; text-decoration: none; }
.topbar a:hover{ color: #fff; text-decoration: underline; }
/* Der "abmelden"-Link sitzt in einer hellen Badge (bg-light) innerhalb der
   dunkelgrünen Topbar – ohne diese Regel erbt er das weiße Topbar-Linkweiß
   und ist auf hellem Grund praktisch unsichtbar (Kontrast < 1.2:1). */
.topbar .badge a{ color: var(--bs-body-color); text-decoration: underline; }
.topbar .badge a:hover{ color: var(--bs-primary); }
/* Gleiches Kontrastproblem für das Benutzer-Dropdown: dessen Menü hängt
   ebenfalls im (dunkelgrünen) .topbar-Baum, die Links darin brauchen also
   dieselbe Korrektur, sonst wären sie weiß auf dem hellen Menühintergrund. */
.topbar .dropdown-menu a{ color: var(--bs-body-color); text-decoration: none; }
.topbar .dropdown-menu a:hover{ color: var(--bs-primary); }

.card{
  background: #fff;
  border: 1px solid var(--bs-border-color);
  box-shadow: var(--shadow-sm);
}

/* Erklärtext, der jeder Aktion vorangestellt ist */
.action-info{
  font-size: .85rem;
  color: #33362F;
  background: var(--brand-primary-tint);
  border: 1px solid #CFE7D5;
  border-radius: var(--bs-border-radius-sm);
  padding: .6rem .8rem;
  margin-bottom: .7rem;
}
.action-info i{ color: var(--brand-primary-dark); margin-right: .35rem; }

.participant-header{ cursor: pointer; padding-top: .9rem; padding-bottom: .9rem; }
.participant-header.static{ cursor: default; }
.participant-header .chevron{ transition: transform .18s ease; color: var(--bs-secondary-color); }
.participant-header[aria-expanded="true"] .chevron{ transform: rotate(180deg); }

.cat-row{ display:flex; align-items:center; justify-content:space-between; padding:.55rem 0; border-bottom:1px dashed var(--bs-border-color); }
.cat-row:last-child{ border-bottom:none; }
.cat-row .cat-label{ font-size:.85rem; color:#40443C; }
.cat-row .cat-price{ font-variant-numeric: tabular-nums; font-size:.74rem; color: var(--bs-warning); margin-left:.4rem; }

.total-figure{ font-variant-numeric: tabular-nums; font-weight:700; }
.paid-yes{ color: var(--bs-success); }
.paid-no{ color: var(--bs-secondary-color); }

/* Gleich breite Aktions-Buttons (Sonderwürfe & Strafen) statt eines
   flex-wrap-Rasters, in dem jeder Button so breit wie sein Text ist. */
.action-btn-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
.action-btn-grid .btn{ width: 100%; }

/* Spiel-Eingabemasken */
.game-row{ display:flex; align-items:center; justify-content:space-between; padding:.5rem 0; border-bottom:1px dashed var(--bs-border-color); gap:.5rem; }
.game-row:last-child{ border-bottom:none; }
.type-toggle .btn.active{ background: var(--bs-primary); color:#fff; }

/* Aufklappbare Spielhistorie je Teilnehmer */
.game-history-item{ display:flex; justify-content:space-between; align-items:center; padding:.4rem 0; border-bottom:1px dashed var(--bs-border-color); font-size:.83rem; }
.game-history-item:last-child{ border-bottom:none; }
.game-history-item .badge-won{ background: var(--bs-success); color:#fff; }
.game-history-item .badge-lost{ background: var(--bs-danger); color:#fff; }

.summary-alert{ background: var(--brand-primary-tint); border: 1px solid #CFE7D5; color:#233A28; }

/* Offline-Warteschlange: additive "wartet"-Markierung neben einem Zähler,
   und der Online/Offline-Status-Badge in der Topbar. */
.pending-badge{
  font-size:.68rem; font-weight:600; color: var(--bs-warning);
  background: #F7ECDC; border-radius: var(--bs-border-radius-sm);
  padding: .1rem .4rem;
}
#offlineStatus{ font-weight:600; }

/* Touch-Ziele: Buttons überall groß genug für Finger/iPad, nicht nur Maus. */
.btn{ min-height: 40px; display:inline-flex; align-items:center; justify-content:center; }
.btn-sm{ min-height: 34px; }
.list-group-item-action{ min-height: 44px; display:flex; align-items:center; }

/* ── Admin: einheitliche Navigation ─────────────────────────── */
.admin-nav{
  display:flex; flex-wrap:wrap; gap:.4rem;
  background:#fff; border:1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
  padding:.4rem;
}
.admin-nav a{
  flex:1 1 auto; text-align:center; white-space:nowrap;
  padding:.55rem .9rem; border-radius: var(--bs-border-radius-sm);
  font-size:.88rem; font-weight:600; color: var(--bs-secondary-color); text-decoration:none;
  min-height:44px; display:flex; align-items:center; justify-content:center;
}
.admin-nav a:hover{ background: var(--brand-primary-tint); color: var(--brand-primary-dark); }
.admin-nav a.active{ background: var(--bs-primary); color:#fff; }

/* Unternavigation innerhalb "Verwaltung": gleiche Card-Optik wie .admin-nav
   direkt darüber (weißer Rahmen um die ganze Zeile), damit sie erkennbar als
   zusammengehörige Nav-Leiste wirkt statt als lose Textlinks. Mehr Punkte als
   die 2 Haupt-Tabs vertragen, deshalb horizontal scrollbar statt umbrechend –
   vermeidet eine mehrzeilige Pillenwand auf schmalen Bildschirmen. */
.admin-subnav{
  display:flex; gap:.3rem; overflow-x:auto; -webkit-overflow-scrolling:touch;
  background:#fff; border:1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
  padding:.35rem;
}
.admin-subnav a{
  flex:0 0 auto; white-space:nowrap;
  padding:.45rem .8rem; border-radius: var(--bs-border-radius-sm);
  font-size:.82rem; font-weight:600; color: var(--bs-secondary-color); text-decoration:none;
  min-height:36px; display:flex; align-items:center;
}
.admin-subnav a:hover{ background: var(--brand-primary-tint); color: var(--brand-primary-dark); }
.admin-subnav a.active{ background: var(--bs-primary); color:#fff; }

/* Admin: Listen-Karte als Ersatz für dichte Desktop-Tabellen, gleiche
   Optik wie die Teilnehmerkarten im Schriftführer-Bereich. */
.list-card{
  background:#fff; border:1px solid var(--bs-border-color); border-radius: var(--bs-border-radius);
  box-shadow: var(--shadow-sm);
  padding: .9rem 1rem;
  margin-bottom: .6rem;
  display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
}
.list-card .list-card-title{ font-weight:700; }
.list-card .list-card-meta{ font-size:.82rem; color: var(--bs-secondary-color); }
.list-card .list-card-actions{ display:flex; gap:.4rem; flex-wrap:wrap; margin-left:auto; }

@media (max-width: 420px){
  .list-card .list-card-actions{ width:100%; margin-left:0; }
  .list-card .list-card-actions .btn{ flex:1 1 auto; }
}