/**
 * KSV Wolfenbüttel — Gemeinsame Styles (alle Module)
 *
 * Baut auf theme.css (Custom Properties) und Bootstrap 5.3 auf.
 * Nur Ergänzungen/Overrides — Bootstrap wird nicht dupliziert.
 */

/* ── Grundlagen ──────────────────────────────────────────────────── */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    color: var(--color-ink);
    background-color: var(--color-paper);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* ── Typografie ──────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-secondary);
}

h1 { font-size: 2rem; }
h2 { font-size: 1.625rem; }
h3 { font-size: 1.375rem; }

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

/* Bootstrap-Link-Variablen auf Theme-Farben mappen — wirkt auf
   alle Bootstrap-Komponenten, die das Link-Token nutzen
   (.btn-link, .link-primary, .nav-link etc.). */
:root {
    /* Primary global — wirkt auf .text-primary, .bg-primary, .border-primary,
       .alert-primary, .badge.bg-primary etc. */
    --bs-primary:                  var(--color-primary);
    --bs-primary-rgb:              var(--color-primary-rgb);

    /* Links + Nav-Links */
    --bs-link-color:               var(--color-primary);
    --bs-link-hover-color:         var(--color-primary-hover);
    --bs-link-color-rgb:           var(--color-primary-rgb);
    --bs-link-hover-color-rgb:     var(--color-primary-hover-rgb);
    --bs-nav-link-color:           var(--color-primary);
    --bs-nav-link-hover-color:     var(--color-primary-hover);

    /* Bootstrap-Border-Token auf Theme abstimmen (dezenter Wasser-Ton).
       Wirkt auf .border, .table, .card-Default etc. */
    --bs-border-color:             rgba(var(--color-secondary-rgb), 0.12);
    --bs-border-color-translucent: rgba(var(--color-secondary-rgb), 0.08);
}

.btn-link {
    --bs-btn-color:        var(--color-primary);
    --bs-btn-hover-color:  var(--color-primary-hover);
}

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

/* ── Buttons (Bootstrap-Overrides über Custom Properties) ────────── */

.btn-primary {
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
}

.btn-secondary {
    --bs-btn-bg: var(--color-secondary);
    --bs-btn-border-color: var(--color-secondary);
    --bs-btn-hover-bg: var(--color-secondary-hover);
    --bs-btn-hover-border-color: var(--color-secondary-hover);
    --bs-btn-active-bg: var(--color-secondary-hover);
    --bs-btn-active-border-color: var(--color-secondary-hover);
}

.btn-accent {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.btn-accent:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-text);
}

/* ── Themed Tabs (Sub-Navigation) ────────────────────────────────── */
/* Genutzt z.B. in admin/modules/content/_nav.php als Sub-Nav. */

.nav-tabs-themed {
    border-bottom: 2px solid var(--color-border, #dee2e6);
    gap: 0;
}

.nav-tabs-themed .nav-link {
    color: var(--color-text-muted, #6c757d);
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    margin-bottom: -2px;
    padding: 0.5rem 1rem;
    font-weight: 500;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.nav-tabs-themed .nav-link:hover {
    color: var(--color-primary);
    border-bottom-color: rgba(var(--color-primary-rgb), 0.3);
}

.nav-tabs-themed .nav-link.active {
    color: var(--color-primary);
    background: transparent;
    border-bottom-color: var(--color-primary);
}

/* ── Navbar ──────────────────────────────────────────────────────── */

.navbar-ksv {
    background-color: var(--color-bg);
    box-shadow: var(--shadow-sm);
    min-height: var(--header-height);
}

.navbar-ksv .navbar-brand {
    font-weight: 700;
    color: var(--color-secondary);
}

.navbar-ksv .navbar-brand:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.navbar-ksv .nav-link {
    color: var(--color-text);
    font-weight: 500;
    font-size: var(--font-size-sm);
    padding: 0.5rem 0.75rem;
    transition: color var(--transition-fast);
}

.navbar-ksv .nav-link:hover,
.navbar-ksv .nav-link.active {
    color: var(--color-primary);
}

/* ── Oeffentliche Navbar (Design 2026-05-01) ───────────────────────
   Gilt fuer nav_public.php und damit fuer www, Buchung, Kalender und
   Einwilligung — deshalb hier und nicht in www/assets/css/website.css,
   die nur www laedt (vorher standen Wortmark und Link-Groesse dort und
   fehlten in den anderen Modulen).

   Gescopet auf .navbar-public, weil die Admin-Topbar (nav_admin.php)
   dieselbe Basisklasse .navbar-ksv verwendet. Sie hat ihren eigenen
   Block weiter unten (.navbar-ksv:not(.navbar-public)) und traegt seit
   2026-08-28 dieselbe Logo-Groesse.

   Die doppelte Klasse (.navbar-ksv.navbar-public) ist Absicht: sie liegt
   eine Stufe ueber den generischen .navbar-ksv-Regeln und damit auch
   ueber der Mobile-Media-Query am Dateiende. */

.navbar-ksv.navbar-public {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid rgba(var(--color-secondary-rgb), 0.08);
    box-shadow: 0 1px 3px rgba(var(--color-water-deep-rgb), 0.04);
    min-height: var(--header-height);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* Logo ohne Schriftzug daneben (ab 2026-08-26).
   Das zweizeilige Wortmark (.brand-text / .brand-line-1 / .brand-line-2) ist
   entfallen, weil das Logo den Schriftzug „KSV Wolfenbüttel" selbst traegt.
   Ein Wortmark-Logo ist breiter und flacher als das reine Signet und braucht
   deshalb mehr Hoehe, damit die Schrift darin lesbar bleibt.

   ⚠ Die Logo-Hoehe haengt an einer Rechnung — nicht frei waehlbar (2026-08-28).
     Die Kopfzeile ist genau --header-height (72px) hoch, und zwar per min-height
     bei box-sizing:border-box. Was davon dem Logo bleibt:

         72px  Kopfzeile
         -16   Polsterung der Navbar (2 x 0.5rem, s. oben)
         - 1   border-bottom
         -----
         55px  fuer die Marke

     Bootstrap gibt .navbar-brand zusaetzlich 2 x 0.3125rem = 10px Polsterung.
     Die ist hier ABGESCHALTET (Regel direkt darunter) — die Marke enthaelt nur
     ein Bild, senkrecht zentriert per d-flex/align-items-center, das Polster
     hat also keine Aufgabe. Ohne die Abschaltung waeren bei 46px Schluss und
     die Kopfzeile fienge an mitzuwachsen.

     Damit ist 55px das Maximum. 52px laesst 3px Reserve fuer Zoomstufen und
     Rundung — wer hoeher geht, macht die Kopfzeile hoeher, nicht das Logo. */
.navbar-ksv.navbar-public .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-ksv.navbar-public .navbar-brand img {
    height: 52px;
    width: auto;
    max-width: 60vw;   /* mobil nie bis an den Burger-Knopf heran */
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .navbar-ksv.navbar-public .navbar-brand img {
        height: 44px;
    }
}

.navbar-ksv.navbar-public .nav-link {
    color: var(--color-ink-soft);
    font-weight: 500;
    font-size: 0.92rem;
    padding: 0.5rem 0.9rem;
    transition: color var(--transition-fast);
}

.navbar-ksv.navbar-public .nav-link:hover {
    color: var(--color-water-deep);
}

.navbar-ksv.navbar-public .nav-link.active {
    color: var(--color-water-deep);
    border-bottom: none;
}

@media (max-width: 991.98px) {
    .navbar-ksv.navbar-public {
        background-color: rgba(255, 255, 255, 0.96);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .navbar-ksv.navbar-public .nav-link {
        padding: 0.75rem 0.5rem;
    }
}

/* ── Admin-Topbar (nav_admin.php) ──────────────────────────────────
   Ab 2026-08-28 traegt das Logo im Admin dieselbe Groesse wie auf der
   oeffentlichen Seite. Vorher stand hier ein 32px-Logo neben dem Wort
   „Admin"; mit dem Wortmark-Logo war der Schriftzug darin nicht mehr
   lesbar. Das Wort „Admin" bleibt — es unterscheidet die Verwaltung von
   der oeffentlichen Seite, wenn beide Tabs offen sind.

   :not(.navbar-public) grenzt gegen die oeffentliche Navbar ab, die
   dieselbe Basisklasse .navbar-ksv benutzt.

   ⚠ Die Hoehe haengt an derselben Rechnung wie oben — die Topbar ist
     ebenfalls --header-height (72px) hoch:

         72px  Kopfzeile
         -16   Polsterung der Navbar (Bootstrap, 2 x 0.5rem)
         - 1   border-bottom (Klasse .border-bottom im Markup)
         -----
         55px  fuer die Marke

     Bootstraps .navbar-brand-Polster (2 x 0.3125rem = 10px) ist auch hier
     abgeschaltet — die Marke wird per d-flex/align-items-center zentriert,
     das Polster hat keine Aufgabe. Ohne die Abschaltung waere bei 45px
     Schluss und die Topbar fienge an mitzuwachsen.

     Nachgemessen (headless Chrome, Wortmark-Logo 772 x 251):
     bei 1440/1280/1024/768/576/430/390/360/320px bleibt die Topbar
     exakt 72,00px. Logo 159,7px breit (mobil 135,1px) — kein Zusammenstoss
     mit dem Menue-Knopf (bei 320px: Logo endet bei 151px, Knopf ab 288px).

   ⚠ nav_admin.php traegt height="52" als Attribut — bei Aenderung mitziehen. */
.navbar-ksv:not(.navbar-public) .navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.navbar-ksv:not(.navbar-public) .navbar-brand img {
    height: 52px;
    width: auto;
    max-width: 60vw;   /* mobil nie bis an den Menue-Knopf heran */
    object-fit: contain;
}

@media (max-width: 575.98px) {
    .navbar-ksv:not(.navbar-public) .navbar-brand img {
        height: 44px;
    }
}

/* Bereichs-Label „Admin" neben der Wortmarke.
   Das Logo traegt selbst schon „KSV Wolfenbuettel" in Fettschrift. Ein zweites
   Wort in derselben Staerke direkt daneben liest sich als vierte Zeile der
   Wortmarke — genau das war der Zustand bis 2026-08-28 (Bootstrap vererbt aus
   .navbar-brand Gewicht 700 und 17,5px; die Utilities .small/.text-muted im
   Markup kamen dagegen nicht an).

   Deshalb: untergeordnet setzen statt danebenstellen. Haarlinie als Zaesur,
   gesperrte Versalien in halber Groesse, mittleres Gewicht, gedeckte Farbe.
   Die Linie ist 26px hoch = halbe Logohoehe.

   Abstand steckt komplett hier (16px links und rechts der Linie), nicht in
   einem gap-Utility — sonst waere er unsymmetrisch. */
.navbar-ksv:not(.navbar-public) .navbar-brand .navbar-admin-tag {
    height: 26px;
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(var(--color-secondary-rgb), 0.22);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-soft);
    white-space: nowrap;
}

/* Der Brand-Hover faerbt den ganzen Link um — das Label bleibt bewusst ruhig. */
.navbar-ksv:not(.navbar-public) .navbar-brand:hover .navbar-admin-tag {
    color: var(--color-ink-soft);
}

/* Breite der Admin-Seitenleiste. EIN Wert fuer zwei Stellen: das style-Attribut
   des <aside> in nav_admin.php und die Ausrichtung der Trennlinie hier drunter.
   Wer die Sidebar breiter macht, aendert nur diesen Wert. */
:root {
    --admin-sidebar-width: 250px;
}

/* Ab der Breite, ab der die Seitenleiste ueberhaupt steht (offcanvas-lg klappt
   sie darunter weg), sitzt die Trennlinie des Labels GENAU auf der Kante der
   Seitenleiste — beide bilden dann eine durchgehende Senkrechte.

   Dafuer bekommt die Logo-Zone eine feste Breite, statt dass die Linie hinter
   dem Logo herlaeuft:

       250px  Seitenleiste
       -  1   ihr border-end (box-sizing: border-box, liegt also innen)
       - 16   linke Polsterung der Navbar (.container-fluid.px-3)
       -----
       233px  Logo-Zone  →  Linie landet bei x = 249px = Sidebar-Kante

   Das Logo wird darin linksbuendig gezeichnet (object-position), es waechst
   NICHT auf 233px mit — die Hoehe von 52px bleibt massgebend.

   padding-left: 1.5rem entspricht dem p-lg-4 des Inhaltsbereichs. Dadurch
   beginnt „ADMIN" auf derselben Achse wie die Seitenueberschrift darunter. */
@media (min-width: 992px) {
    .navbar-ksv:not(.navbar-public) .navbar-brand img {
        width: calc(var(--admin-sidebar-width) - 1px - 1rem);
        object-position: left center;
    }

    .navbar-ksv:not(.navbar-public) .navbar-brand .navbar-admin-tag {
        margin-left: 0;
        padding-left: 1.5rem;
    }
}

/* ── Cards ───────────────────────────────────────────────────────── */

.card-ksv {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

.card-ksv:hover {
    box-shadow: var(--shadow);
}

/* ── Footer ──────────────────────────────────────────────────────── */

.footer-ksv {
    background-color: var(--footer-bg);
    color: var(--color-text-light);
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    margin-top: auto;
}

.footer-ksv a {
    color: rgba(255, 255, 255, 0.75);
}

.footer-ksv a:hover {
    color: var(--color-text-light);
    text-decoration: none;
}

.footer-ksv .footer-heading {
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--spacing-md);
    color: rgba(255, 255, 255, 0.5);
}

.footer-ksv .footer-divider {
    border-color: rgba(255, 255, 255, 0.15);
}

.footer-ksv .footer-copyright {
    color: rgba(255, 255, 255, 0.5);
}

.footer-ksv .footer-meta {
    color: rgba(255, 255, 255, 0.5);
}

/* Admin-Footer-Variante: kompakt, einzeilig. */
.footer-ksv.footer-admin {
    padding: var(--spacing-md) 0;
}

/* ── Formulare ───────────────────────────────────────────────────── */

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--focus-ring-color);
}

/* ── Tabellen ────────────────────────────────────────────────────── */

.table-ksv thead {
    background-color: var(--color-bg-light);
}

.table-ksv thead th {
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom-width: 2px;
}

/* ── Alerts / Status-Badges ──────────────────────────────────────── */

.badge-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25em 0.6em;
    border-radius: var(--border-radius-sm);
}

/* ── Page-Header ─────────────────────────────────────────────────── */

.page-header {
    padding: var(--spacing-xl) 0 var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.page-header h1 {
    margin-bottom: 0.25rem;
}

.page-header .lead {
    color: var(--color-text-muted);
    margin-bottom: 0;
}

/* ── Cookie-Banner ───────────────────────────────────────────────── */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
    padding: var(--spacing-md) var(--spacing-lg);
    z-index: 1050;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

.cookie-banner a {
    color: var(--color-primary-light);
}

/* ── Interaktive Elemente ────────────────────────────────────────── */

.card-ksv:hover {
    cursor: default;
}

a.card-ksv,
.card-ksv[onclick],
.card-ksv[data-href] {
    cursor: pointer;
}

.badge-status {
    cursor: default;
}

.btn,
.nav-link,
.dropdown-item,
.accordion-button,
.form-check-input,
.form-check-label,
[role="button"],
[data-confirm] {
    cursor: pointer;
}

/* ── Focus-Styles (Accessibility) ────────────────────────────────── */

:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.btn:focus-visible {
    box-shadow: 0 0 0 0.25rem var(--focus-ring-color);
}

/* ── Utilities ───────────────────────────────────────────────────── */

.text-primary-ksv {
    color: var(--color-primary);
}

.text-secondary-ksv {
    color: var(--color-secondary);
}

.bg-primary-ksv {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

.bg-light-ksv {
    background-color: var(--color-bg-light);
}

.shadow-ksv {
    box-shadow: var(--shadow);
}

/* ── Responsive ──────────────────────────────────────────────────── */

@media (max-width: 767.98px) {
    h1 { font-size: 1.625rem; }
    h2 { font-size: 1.375rem; }
    h3 { font-size: 1.175rem; }

    .page-header {
        padding: var(--spacing-lg) 0 var(--spacing-md);
    }

    /* Mobile Nav: groessere Touch-Targets (min. 44px) */
    .navbar-ksv .nav-link {
        padding: 0.75rem 1rem;
        font-size: var(--font-size-base);
        border-bottom: 1px solid var(--border-color);
    }

    .navbar-ksv .nav-link:last-child {
        border-bottom: none;
    }

    .navbar-ksv .nav-link.active {
        border-bottom-color: var(--border-color);
        border-left: 3px solid var(--color-primary);
        background-color: var(--color-bg-light);
    }
}

/* ── Reduced Motion ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}