/* Projektspezifische Ergänzungen zu Bootstrap (Präfix pp-).
   Bewusst schlank – nur Feinschliff, keine eigene Komponenten-Bibliothek. */

:root {
    --pp-bg: #f7f4f6;
    --pp-brand: #db2777;
    --pp-brand-dark: #b4205f;
    --pp-brand-2: #f59e0b;
    /* Grundton auch ohne eingestellte Farben (sonst Bootstrap-Blau);
       eingestellte Farben überschreibt layout.twig per <style>. */
    --bs-primary: #db2777;
    --bs-primary-rgb: 219, 39, 119;
    --bs-link-color: #db2777;
    --bs-link-color-rgb: 219, 39, 119;
    --bs-link-hover-color: #b4205f;
}

/* Dunkel-Modus (Bootstrap 5.3 [data-bs-theme=dark] auf <html>) */
[data-bs-theme="dark"] {
    --pp-bg: var(--bs-body-bg);
}
html[data-bs-theme="dark"] {
    --bs-link-color: #f9a8d4;
    --bs-link-color-rgb: 249, 168, 212;
    --bs-link-hover-color: #fbcfe8;
}
[data-bs-theme="dark"] .navbar.pp-navbar {
    background-color: var(--bs-body-bg);
    border-bottom-color: var(--bs-border-color);
}
[data-bs-theme="dark"] .card {
    border-color: var(--bs-border-color);
    box-shadow: none;
}
[data-bs-theme="dark"] .pp-hilfe-btn {
    border-color: #6b2a4a;
    background-color: #4d1733;
    color: #ffb3d6;
}

body {
    background-color: var(--pp-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1 0 auto;
}

/* Navbar */
.navbar.pp-navbar {
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.navbar.pp-navbar .navbar-brand {
    font-weight: 600;
    color: var(--pp-brand);
}
.navbar.pp-navbar .navbar-brand:hover {
    color: var(--pp-brand-dark);
}

/* Karten etwas weicher als der Bootstrap-Standard */
.card {
    border: 1px solid rgba(0, 0, 0, .06);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 16px rgba(16, 24, 40, .06);
}

.btn-primary {
    --bs-btn-bg: var(--pp-brand);
    --bs-btn-border-color: var(--pp-brand);
    --bs-btn-hover-bg: var(--pp-brand-dark);
    --bs-btn-hover-border-color: var(--pp-brand-dark);
    --bs-btn-active-bg: var(--pp-brand-dark);
    --bs-btn-active-border-color: var(--pp-brand-dark);
    --bs-btn-disabled-bg: var(--pp-brand);
    --bs-btn-disabled-border-color: var(--pp-brand);
}
.btn-outline-primary {
    --bs-btn-color: var(--pp-brand);
    --bs-btn-border-color: var(--pp-brand);
    --bs-btn-hover-bg: var(--pp-brand);
    --bs-btn-hover-border-color: var(--pp-brand);
    --bs-btn-active-bg: var(--pp-brand);
    --bs-btn-active-border-color: var(--pp-brand);
}

/* Anmelde- und Einstiegsseite: vertikal zentrierte, schmale Spalte */
.pp-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}
.pp-auth .card {
    width: 100%;
    max-width: 28rem;
}

/* Logo (public/assets/logo.svg) und Bildzeichen (favicon.svg) */
.pp-logo {
    display: block;
    width: 100%;
    max-width: 17rem;
    height: auto;
    margin: 0 auto;
}
.pp-zeichen {
    height: 1.7rem;
    width: 1.7rem;
}
.pp-zeichen-gross {
    height: 3.5rem;
    width: 3.5rem;
}

footer.pp-footer {
    flex-shrink: 0;
    padding: 1.25rem 0;
    color: #6b7280;
    font-size: .875rem;
}

/* Hilfe-Button: Pill. Standard = fixe Notlage-Position oben rechts;
   app.js verschiebt die Pill in den Seitenkopf und setzt .im-kopf. */
.pp-hilfe-btn {
    position: fixed;
    top: 4.5rem;
    right: 1rem;
    z-index: 1050;
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    padding: .25rem .8rem;
    border: 1px solid #f5b8d3;
    border-radius: 50rem;
    background-color: #fde2ef;
    color: #be185d;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}
.pp-hilfe-btn.im-kopf {
    position: static;
    z-index: auto;
}
.pp-hilfe-btn:hover,
.pp-hilfe-btn:focus-visible {
    background-color: #fbcfe3;
    color: #9d174d;
}

@media print {
    .pp-hilfe-btn,
    #ppHilfeModal { display: none !important; }
}

.pp-hilfe-text > :first-child { margin-top: 0; }
.pp-hilfe-text > :last-child { margin-bottom: 0; }
.pp-hilfe-text h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem 0 .35rem;
}
.pp-hilfe-text ol,
.pp-hilfe-text ul {
    padding-left: 1.25rem;
    margin-bottom: .5rem;
}
.pp-hilfe-text li { margin-bottom: .2rem; }

/* Platzhalter-Karten (noch leere Bereiche) */
.pp-leer { border-style: dashed; }

/* Menü-Buttons in der Navbar (Icon; Beschriftung nur im aufgeklappten Handy-Menü) */
.pp-nav-btns { gap: .25rem; }
.pp-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .55rem;
    border-radius: .5rem;
}
.pp-nav-btn svg { width: 1.1rem; height: 1.1rem; }
.pp-nav-name { font-size: .875rem; }
@media (min-width: 992px) {
    .pp-nav-text { display: none; }
    .pp-nav-btns { flex-direction: row; align-items: center; }
}
@media (max-width: 991.98px) {
    .pp-nav-btns .pp-nav-btn { width: 100%; justify-content: flex-start; }
    .pp-nav-btns .dropdown-toggle::after { margin-left: auto; }
}

/* Navbar-Buttons mit Farbverlauf wie das Logo (Pink → Orange, diagonal).
   Inaktiv 20 % heller, aktiv (aktuelle Seite / offenes Menü) volle Farbe. */
.pp-navbar .pp-nav-btn {
    --pp-v1: color-mix(in srgb, var(--pp-brand) 80%, #fff);
    --pp-v2: color-mix(in srgb, var(--pp-brand-2) 80%, #fff);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-border-color: transparent;
    background: linear-gradient(135deg, var(--pp-v1), var(--pp-v2));
    color: #fff;
    border-color: transparent;
}
.pp-navbar .pp-nav-btn:hover {
    --pp-v1: color-mix(in srgb, var(--pp-brand) 90%, #fff);
    --pp-v2: color-mix(in srgb, var(--pp-brand-2) 90%, #fff);
    color: #fff;
}
.pp-navbar .pp-nav-btn:active,
.pp-navbar .pp-nav-btn.active,
.pp-navbar .pp-nav-btn.show {
    --pp-v1: var(--pp-brand);
    --pp-v2: var(--pp-brand-2);
    color: #fff;
}

/* ---------------- Partys ---------------- */

/* Kalenderblatt (Tag + Monat) in Listen und im Kopf der Detailseite */
.pp-datum {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 3.4rem;
    height: 3.6rem;
    border-radius: .7rem;
    background: linear-gradient(135deg, var(--pp-brand), var(--pp-brand-2));
    color: #fff;
    line-height: 1;
    text-align: center;
}
.pp-datum-tag { font-size: 1.35rem; font-weight: 700; }
.pp-datum-monat { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; margin-top: .2rem; }
.pp-datum-vorbei { background: var(--bs-secondary-bg); color: var(--bs-secondary-color); }

/* Partykarte in der Übersicht (ganze Karte ist der Link) */
.pp-partykarte {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .12s ease, transform .12s ease;
}
.pp-partykarte:hover {
    color: inherit;
    box-shadow: 0 2px 6px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .12);
    transform: translateY(-1px);
}
.pp-kennzahl { font-size: .8rem; color: var(--bs-secondary-color); white-space: nowrap; }
.pp-kennzahl svg { width: .85rem; height: .85rem; margin-right: .15rem; }

/* Kopf der Detailseite */
.pp-kopf {
    border: 0;
    color: #fff;
    background: linear-gradient(135deg, var(--pp-brand), var(--pp-brand-2));
}
.pp-kopf a { color: #fff; }
.pp-kopf .pp-datum { background: rgba(255, 255, 255, .22); }
.pp-kopf .btn-light { --bs-btn-color: var(--pp-brand-dark); }
.pp-beschreibung { white-space: pre-line; }

/* Statusfarben der Zu-/Absage */
.pp-status-zugesagt   { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.pp-status-vielleicht { background: var(--bs-warning-bg-subtle); color: var(--bs-warning-text-emphasis); }
.pp-status-abgesagt   { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger-text-emphasis); }
.pp-status-offen      { background: var(--bs-secondary-bg);      color: var(--bs-secondary-color); }

/* Antwort-Knöpfe (input.btn-check + label) */
.pp-antwort .btn { flex: 1 1 0; white-space: nowrap; }
.btn-check:checked + .btn.pp-wahl-zugesagt   { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.btn-check:checked + .btn.pp-wahl-vielleicht { background: var(--bs-warning); border-color: var(--bs-warning); color: #000; }
.btn-check:checked + .btn.pp-wahl-abgesagt   { background: var(--bs-danger);  border-color: var(--bs-danger);  color: #fff; }

/* Reiter der Detailseite: am Handy waagerecht scrollbar */
.pp-reiter {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .25rem;
    scrollbar-width: none;
}
.pp-reiter::-webkit-scrollbar { display: none; }
.pp-reiter .nav-link { white-space: nowrap; }
.pp-reiter .nav-link.active { background: linear-gradient(135deg, var(--pp-brand), var(--pp-brand-2)); }
.pp-reiter .badge { font-weight: 500; }

/* Einträge (Essen/Aufgaben) */
.pp-eintrag + .pp-eintrag { border-top: 1px solid var(--bs-border-color-translucent); }
.pp-erledigt .pp-eintrag-titel { text-decoration: line-through; color: var(--bs-secondary-color); }
.pp-person {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 50rem;
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    font-size: .8rem;
    font-weight: 500;
}
.pp-person-ich { background: linear-gradient(135deg, var(--pp-brand), var(--pp-brand-2)); color: #fff; }
.pp-notiz { white-space: pre-line; }

/* Pinnwand */
.pp-nachricht + .pp-nachricht { border-top: 1px solid var(--bs-border-color-translucent); }
.pp-nachricht-text { white-space: pre-line; overflow-wrap: anywhere; }

/* Einstieg über den Einladungslink: Namensliste */
.pp-namen {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .5rem;
}
.pp-namen .btn { text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pp-mini { width: .9rem; height: .9rem; }

/* Flex-Kinder dürfen schrumpfen (lange Titel umbrechen statt überlaufen) */
.min-w-0 { min-width: 0; }

/* Kopf: heller Knopf mit dunkler Schrift (die Link-Regel .pp-kopf a macht sonst weiss) */
.pp-kopf a.btn-light { color: var(--pp-brand-dark); }
.pp-kopf a.btn-light:hover { color: var(--pp-brand); }

/* Reiterinhalt: kein Fokusrahmen nach dem Umschalten */
.tab-pane:focus { outline: none; }

/* Häkchen, Schalter und Fokus im Grundton */
.form-check-input:checked { background-color: var(--pp-brand); border-color: var(--pp-brand); }
.form-check-input:focus, .form-control:focus, .form-select:focus { border-color: color-mix(in srgb, var(--pp-brand) 50%, #fff); box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .2); }