/* =====================================================================
   Helfa Corporate Design — aufgesetzt auf Bootstrap 5.3.
   Primär  #1F8A4C (Grün)      Sekundär #202A33 (Anthrazit)
   Akzent  #F4A621 (Bernstein) Typo: Inter, runde Ecken, Touch-Flächen.
   Status: Grün = zugesagt, Gelb = offen, Rot = unterbesetzt.
   Umgesetzt über CSS-Variablen, kein eigener Sass-Build nötig.
   ===================================================================== */
:root {
    /* Markenfarben */
    --helfa-green: #1F8A4C;
    --helfa-green-dark: #176B3B;
    --helfa-green-soft: #E6F3EC;
    --helfa-anthra: #202A33;
    --helfa-anthra-soft: #2B3742;
    --helfa-amber: #F4A621;
    --helfa-amber-dark: #9A6608;
    --helfa-amber-soft: #FDF1DB;
    --helfa-red: #D7402B;
    --helfa-red-soft: #FBE7E3;

    /* Status-Ampel (Grün = zugesagt, Gelb = offen, Rot = unterbesetzt) */
    --helfa-status-ok: var(--helfa-green);
    --helfa-status-open: var(--helfa-amber);
    --helfa-status-short: var(--helfa-red);

    /* Themebare Flächen / Texte (Light = Default; Dark siehe unten).
       Seitenhintergrund über eine eigene Variable, NICHT über --bs-body-bg -
       sonst verlieren die Karten (deren Bootstrap-Default --bs-body-bg ist)
       ihren Kontrast zur Seite. */
    --helfa-page-bg: #F4F6F8;
    --helfa-navbar-bg: #ffffff;
    --helfa-card-header-bg: var(--helfa-green-soft);
    --helfa-label-color: var(--helfa-anthra);
    --helfa-status-ok-text: var(--helfa-green-dark);
    --helfa-status-open-text: var(--helfa-amber-dark);
    --helfa-status-short-text: var(--helfa-red);

    /* Bootstrap-Theming */
    --bs-primary: var(--helfa-green);
    --bs-primary-rgb: 31, 138, 76;
    --bs-success: var(--helfa-green);
    --bs-success-rgb: 31, 138, 76;
    --bs-warning: var(--helfa-amber);
    --bs-warning-rgb: 244, 166, 33;
    --bs-danger: var(--helfa-red);
    --bs-danger-rgb: 215, 64, 43;

    --bs-link-color: var(--helfa-green-dark);
    --bs-link-color-rgb: 23, 107, 59;
    --bs-link-hover-color: var(--helfa-green);
    --bs-link-hover-color-rgb: 31, 138, 76;

    /* Inter als Hausschrift (Textfarbe regelt Bootstrap je Theme) */
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* Runde Ecken */
    --bs-border-radius: 0.75rem;
    --bs-border-radius-sm: 0.5rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.125rem;
}

/* Dark-Mode: Markenfarben (Buttons, Punkte) bleiben, Flächen/Texte drehen.
   Statustexte werden aufgehellt, damit sie auf dunklem Grund lesbar sind.
   --bs-body-bg bleibt Bootstrap-Default (Kartenfläche); nur die etwas dunklere
   Seitenfläche setzen wir selbst, damit sich die Karten abheben. */
[data-bs-theme="dark"] {
    --helfa-page-bg: #181d23;
    --helfa-navbar-bg: #202a33;
    --helfa-card-header-bg: #25332c;
    --helfa-label-color: #e6e9ec;
    --helfa-status-ok-text: #4cc47e;
    --helfa-status-open-text: #f0b84e;
    --helfa-status-short-text: #f06a57;

    --bs-link-color: #4cc47e;
    --bs-link-color-rgb: 76, 196, 126;
    --bs-link-hover-color: #6fd497;
    --bs-link-hover-color-rgb: 111, 212, 151;
}

body {
    background-color: var(--helfa-page-bg);
}

h1, h2, h3, h4, h5, h6,
.card-title,
.navbar-brand {
    font-weight: 700;
}

/* ---- Buttons: grün, runder, größere Touch-Fläche ------------------- */
.btn {
    --bs-btn-border-radius: 0.75rem;
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-font-weight: 600;
}

.btn-lg {
    --bs-btn-padding-y: 0.85rem;
}

.btn-primary {
    --bs-btn-bg: var(--helfa-green);
    --bs-btn-border-color: var(--helfa-green);
    --bs-btn-hover-bg: var(--helfa-green-dark);
    --bs-btn-hover-border-color: var(--helfa-green-dark);
    --bs-btn-active-bg: var(--helfa-green-dark);
    --bs-btn-active-border-color: var(--helfa-green-dark);
    --bs-btn-disabled-bg: var(--helfa-green);
    --bs-btn-disabled-border-color: var(--helfa-green);
    --bs-btn-focus-shadow-rgb: 31, 138, 76;
}

/* Status-Buttons (RSVP): Zusage = grün, Offen = bernstein, Absage = rot.
   Bootstrap backt bei .btn-* die Farbe fest ein, daher hier explizit auf
   die Helfa-Palette setzen (ein --bs-danger am :root reicht nicht). */
.btn-success {
    --bs-btn-bg: var(--helfa-green);
    --bs-btn-border-color: var(--helfa-green);
    --bs-btn-hover-bg: var(--helfa-green-dark);
    --bs-btn-hover-border-color: var(--helfa-green-dark);
    --bs-btn-active-bg: var(--helfa-green-dark);
    --bs-btn-active-border-color: var(--helfa-green-dark);
    --bs-btn-disabled-bg: var(--helfa-green);
    --bs-btn-disabled-border-color: var(--helfa-green);
}

.btn-warning {
    --bs-btn-color: var(--helfa-anthra);
    --bs-btn-bg: var(--helfa-amber);
    --bs-btn-border-color: var(--helfa-amber);
    --bs-btn-hover-color: var(--helfa-anthra);
    --bs-btn-hover-bg: #DB9216;
    --bs-btn-hover-border-color: #DB9216;
    --bs-btn-active-bg: #DB9216;
    --bs-btn-active-border-color: #DB9216;
    --bs-btn-disabled-bg: var(--helfa-amber);
    --bs-btn-disabled-border-color: var(--helfa-amber);
}

.btn-danger {
    --bs-btn-bg: var(--helfa-red);
    --bs-btn-border-color: var(--helfa-red);
    --bs-btn-hover-bg: #B83523;
    --bs-btn-hover-border-color: #B83523;
    --bs-btn-active-bg: #B83523;
    --bs-btn-active-border-color: #B83523;
    --bs-btn-disabled-bg: var(--helfa-red);
    --bs-btn-disabled-border-color: var(--helfa-red);
}

/* Fokus-Ring von Formularfeldern passend zur Primärfarbe. */
.form-control:focus,
.form-select:focus {
    border-color: #8FC4A6;
    box-shadow: 0 0 0 0.25rem rgba(31, 138, 76, 0.25);
}

/* ---- Karten: weicher Schatten (Rahmen/Flächen regelt Bootstrap) --- */
.card {
    box-shadow: 0 4px 18px rgba(32, 42, 51, 0.08);
}

.card-header {
    background-color: var(--helfa-card-header-bg);
}

/* ---- Navbar: themebare Fläche mit bernsteinfarbener Akzentlinie --- */
.navbar.fixed-top {
    background-color: var(--helfa-navbar-bg) !important;
    border-bottom: 3px solid var(--helfa-amber);
}

.navbar-brand {
    color: var(--helfa-label-color);
    font-size: 1.35rem;
    letter-spacing: -0.01em;
}

/* "H"-Bildmarke (Navbar-Wortzeichen und Landing-/Login-Hero). */
.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 0.6rem;
    background: var(--helfa-green);
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
}

.navbar-brand .brand-mark {
    margin-right: 0.5rem;
}

/* Große Variante für die Landing-/Login-Seite. */
.brand-mark-lg {
    width: 64px;
    height: 64px;
    border-radius: 1rem;
    font-size: 2.25rem;
}

/* Aktiver Menüpunkt grün hervorheben, größere Touch-Fläche. */
.navbar .nav-link {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    font-weight: 500;
}

.navbar .nav-link.active {
    color: var(--helfa-status-ok-text);
    font-weight: 600;
}

/* ---- Status-Ampel: farbiger Punkt + Label ------------------------- */
.helfa-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.helfa-status .dot {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    flex: none;
}

.helfa-status.is-ok {
    color: var(--helfa-status-ok-text);
}

.helfa-status.is-ok .dot {
    background: var(--helfa-status-ok);
}

.helfa-status.is-open {
    color: var(--helfa-status-open-text);
}

.helfa-status.is-open .dot {
    background: var(--helfa-status-open);
}

.helfa-status.is-short {
    color: var(--helfa-status-short-text);
}

.helfa-status.is-short .dot {
    background: var(--helfa-status-short);
}

/* Bereitschaftsliste: nur die Zahlen (mit Punkt) farbig, die Erklärung in
   normaler Textfarbe. Die Zahlenspalte hat feste Breite, damit alle
   Erklärungen sauber untereinander beginnen. */
.readiness-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    line-height: 1.3;
}

.readiness-count {
    flex: none;
    min-width: 3.5em;
    font-variant-numeric: tabular-nums;
}

.readiness-label {
    color: var(--helfa-label-color);
}

/* Tab-Container der Eventkarte: Rahmen unter den Tabs, theme-adaptiv
   (heller Rahmen im Light-, dunkler im Dark-Mode). */
.event-tab-content {
    border: 1px solid var(--bs-border-color);
    border-top: 0;
    padding: 5px;
    border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
    margin-bottom: 5px;
}

/* ---- Mehrtägige Veranstaltung: Rahmen um zusammengehörige Schichten - */
.event-series {
    border: 1px solid var(--bs-border-color);
    border-left: 4px solid var(--helfa-amber);
    border-radius: var(--bs-border-radius-lg);
    background: var(--bs-tertiary-bg);
    padding: 0.85rem;
}

.event-series .series-header h2 {
    margin-bottom: 0.1rem;
}

/* Zusammenfassung der Gesamtveranstaltung. */
.series-summary {
    font-size: 0.9rem;
    margin: 0.25rem 0 0.85rem;
}

.series-summary .row > div {
    margin-bottom: 0.15rem;
}

/* Die Schicht-Karten sitzen ohne Doppel-Abstand im Rahmen. */
.event-series .card:last-child {
    margin-bottom: 0 !important;
}

/* ---- Bestehende funktionale Regeln -------------------------------- */

/* Lange deutsche Begriffe (Startzeitpunkt, Treffzeitpunkt, ...) in den
   schmalen Label-Spalten sauber mit Bindestrich trennen, statt sie mitten
   im Wort umzubrechen oder über den Rand laufen zu lassen. */
.card-body b {
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* RSVP-Buttongruppe: alle Buttons gleich breit, dürfen schrumpfen und
   ihren Text umbrechen - die Gruppe ragt damit nie über die Karte hinaus
   (Verhalten der früheren Bootstrap-3-Klasse btn-group-justified). */
.rsvp-btn-group .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}