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

:root {
    --kp-bg: #f4f5f7;
    --kp-brand: #4f46e5;
    --kp-brand-dark: #4338ca;
}

/* Dunkel-Modus (Bootstrap 5.3 [data-bs-theme=dark] auf <html>, siehe
   layout.twig + Mein Profil). Bootstraps eigene Komponenten (Karten,
   Formulare, Tabellen, Navbar-Basis usw.) passen sich über seine eigenen
   CSS-Variablen automatisch an - hier nur die projekteigenen, fest
   verdrahteten Farben aus dieser Datei fuer den dunklen Modus nachziehen. */
[data-bs-theme="dark"] {
    --kp-bg: var(--bs-body-bg);
}
[data-bs-theme="dark"] .navbar.kp-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"] .kp-hilfe-btn {
    border-color: #2a4a6b;
    background-color: #17324d;
    color: #8ecbff;
}
[data-bs-theme="dark"] .kp-hilfe-btn:hover,
[data-bs-theme="dark"] .kp-hilfe-btn:focus-visible {
    background-color: #1d3f60;
    color: #aedaff;
}
[data-bs-theme="dark"] tr.pp-persoenlich td {
    background-color: #33355c;
}

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

main {
    flex: 1 0 auto;
}

/* Marken-Akzent für die Navbar */
.navbar.kp-navbar {
    background-color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.navbar.kp-navbar .navbar-brand {
    font-weight: 600;
    color: var(--kp-brand);
}

.navbar.kp-navbar .navbar-brand:hover {
    color: var(--kp-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(--kp-brand);
    --bs-btn-border-color: var(--kp-brand);
    --bs-btn-hover-bg: var(--kp-brand-dark);
    --bs-btn-hover-border-color: var(--kp-brand-dark);
    --bs-btn-active-bg: var(--kp-brand-dark);
    --bs-btn-active-border-color: var(--kp-brand-dark);
}

/* Login-Seite: vertikal zentrierte, schmale Spalte */
.kp-auth {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
}

.kp-auth .card {
    width: 100%;
    max-width: 26rem;
}

.kp-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: .9rem;
    background: linear-gradient(135deg, var(--kp-brand), #7c3aed);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}

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

/* Hilfe-Button: hellblaue Pill. Standard = fixe Notlage-Position oben rechts;
   personenfeld.js verschiebt die Pill in den Seitenkopf und setzt .im-kopf. */
.kp-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 #a9d3f5;
    border-radius: 50rem;
    background-color: #d7ecff;
    color: #0b5ed7;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
}
.kp-hilfe-btn.im-kopf {
    position: static;
    z-index: auto;
}
.kp-hilfe-btn:hover,
.kp-hilfe-btn:focus-visible {
    background-color: #bfe0ff;
    color: #094db5;
}

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

.kp-hilfe-text > :first-child { margin-top: 0; }
.kp-hilfe-text > :last-child { margin-bottom: 0; }
.kp-hilfe-text h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem 0 .35rem;
}
.kp-hilfe-text ol,
.kp-hilfe-text ul {
    padding-left: 1.25rem;
    margin-bottom: .5rem;
}
.kp-hilfe-text li { margin-bottom: .2rem; }
/* Programmpunkt "Entfaellt": in allen Report-Ansichten durchgestrichen/kursiv/grau.
   Kein !important -> in der Ansicht "Gruppiert" bleibt die inline gesetzte
   Kontrastfarbe der Art-Zeile erhalten. */
tr.pp-entfaellt td,
tr.pp-entfaellt td a,
.pp-entfaellt {
    text-decoration: line-through;
    font-style: italic;
}
tr.pp-entfaellt td,
tr.pp-entfaellt td a {
    color: #6c757d;
}

/* Ansicht "Persoenlich": Programmpunkte, an denen die eigene verknuepfte
   Person beteiligt ist (ohne An-/Absage) - dieselbe Hintergrundfarbe wie
   die Ansage-/Absage-Hinweiszeilen im Allgemeinen Programm-PDF (#d0d3f2). */
tr.pp-persoenlich td {
    background-color: #d0d3f2;
}

/* Startseite: klickbare Bereichs-Kacheln (ganze Karte ist der Link, kein
   separater "oeffnen"-Button). */
.dash-card {
    transition: box-shadow .12s ease, transform .12s ease;
}
.dash-card:hover {
    box-shadow: 0 2px 6px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .12);
    transform: translateY(-1px);
}
.dash-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: .625rem;
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), .12);
    color: var(--kp-brand, var(--bs-primary, #0d6efd));
}
.dash-icon svg {
    width: 1.4rem;
    height: 1.4rem;
}

/* Profil: Schaubild fuer die vier PDF-Seitenraender. Das "Blatt" in der
   Mitte, die Eingabefelder an den vier Seiten. */
.rand-schaubild {
    display: grid;
    grid-template-columns: 1fr minmax(6rem, 9rem) 1fr;
    grid-template-rows: auto minmax(6rem, 8rem) auto;
    gap: .5rem .75rem;
    align-items: center;
    justify-items: center;
    max-width: 24rem;
    margin: 0 auto;
}
.rand-schaubild .rand-feld { width: 5rem; text-align: center; }
.rand-schaubild .rand-feld .form-label { display: block; }
.rand-oben  { grid-column: 2; grid-row: 1; }
.rand-links { grid-column: 1; grid-row: 2; }
.rand-blatt { grid-column: 2; grid-row: 2; }
.rand-rechts { grid-column: 3; grid-row: 2; }
.rand-unten { grid-column: 2; grid-row: 3; }
.rand-blatt {
    width: 100%;
    align-self: stretch;
    border: 2px dashed rgba(var(--bs-primary-rgb, 13, 110, 253), .5);
    border-radius: .25rem;
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), .06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bs-secondary-color, #6c757d);
    font-size: .8rem;
    letter-spacing: .05em;
}

/* Veranstaltungs-Kalender (Monatsansicht) */
.kp-kalender {
    width: 100%;
    min-width: 40rem;
    table-layout: fixed;
    border-collapse: collapse;
}
.kp-kalender th {
    padding: .4rem .5rem;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color, #6c757d);
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.kp-kalender td {
    border: 1px solid rgba(0, 0, 0, .08);
    vertical-align: top;
    padding: .3rem;
    height: 6.5rem;
}
.kp-kalender td.ausser-monat { background: rgba(0, 0, 0, .025); }
.kp-kalender td.ausser-monat .kp-tag-nr { opacity: .5; }
.kp-kalender td.heute { outline: 2px solid var(--bs-primary, #0d6efd); outline-offset: -2px; }
.kp-kalender td.heute .kp-tag-nr { font-weight: 700; color: var(--bs-primary, #0d6efd); }
.kp-tag-nr {
    display: block;
    font-size: .8rem;
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: .2rem;
}
.kp-termin {
    display: block;
    font-size: .8rem;
    line-height: 1.25;
    padding: .12rem .35rem;
    margin-bottom: .15rem;
    border-radius: .25rem;
    background: rgba(var(--bs-primary-rgb, 13, 110, 253), .12);
    color: var(--bs-primary, #0d6efd);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
a.kp-termin:hover { background: rgba(var(--bs-primary-rgb, 13, 110, 253), .24); }
.kp-termin-nolink { background: rgba(0, 0, 0, .06); color: var(--bs-body-color); }
@media (max-width: 575.98px) {
    .kp-kalender td { height: auto; min-height: 3.25rem; }
}