/*
 * kerns Ergaenzungen zu Bootstrap 5.3 (Oberflaeche::kopf() laedt beides,
 * Bootstrap zuerst). Seiten bauen auf Bootstrap-Klassen; hier steht nur:
 *
 * 1. das Thema ueber wenige Variablen - im CSS des Projekts zu setzen:
 *
 *      :root { --kern-akzent: #c8102e; --kern-schrift: "Source Sans 3", sans-serif; --kern-radius: .5rem; }
 *
 *    --kern-akzent faerbt alles, was bei Bootstrap "primary" heisst (Knoepfe,
 *    aktive Navigation, Haken, Fokus, Blaettern, Marken) und die Links. Ohne Angabe bleibt
 *    es Bootstraps Blau. Hell/Dunkel: data-bs-theme="dark" am <html> - von selbst
 *    mit $this->oberflaeche(thema: true) (stil/thema.js).
 *
 * 2. was Bootstrap nicht mitbringt: Navigation der Verwaltung, Kacheln mit
 *    Lage, Tabellen als Karten auf dem Handy (data-spalte), Leerzustand,
 *    Gefahr-Aktionen mit Rueckfrage ohne JavaScript, schmale Kontokarte.
 */

/* ---------------------------------------------------------------- Thema --- */

:root {
    --bs-border-radius: var(--kern-radius, .375rem);
    --bs-border-radius-sm: calc(var(--kern-radius, .375rem) * .7);
    --bs-border-radius-lg: calc(var(--kern-radius, .375rem) * 1.35);
    --bs-body-font-family: var(--kern-schrift, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif);
    --k-akzent: var(--kern-akzent, #0d6efd);
    --k-auf-akzent: var(--kern-auf-akzent, #fff);
}

.btn-primary {
    --bs-btn-color: var(--k-auf-akzent);
    --bs-btn-bg: var(--k-akzent);
    --bs-btn-border-color: var(--k-akzent);
    --bs-btn-hover-color: var(--k-auf-akzent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--k-akzent) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--k-akzent) 80%, #000);
    --bs-btn-active-color: var(--k-auf-akzent);
    --bs-btn-active-bg: color-mix(in srgb, var(--k-akzent) 78%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--k-akzent) 75%, #000);
    --bs-btn-disabled-color: var(--k-auf-akzent);
    --bs-btn-disabled-bg: var(--k-akzent);
    --bs-btn-disabled-border-color: var(--k-akzent);
}
.btn-outline-primary {
    --bs-btn-color: var(--k-akzent);
    --bs-btn-border-color: var(--k-akzent);
    --bs-btn-hover-color: var(--k-auf-akzent);
    --bs-btn-hover-bg: var(--k-akzent);
    --bs-btn-hover-border-color: var(--k-akzent);
    --bs-btn-active-color: var(--k-auf-akzent);
    --bs-btn-active-bg: var(--k-akzent);
    --bs-btn-active-border-color: var(--k-akzent);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--k-akzent); --bs-nav-pills-link-active-color: var(--k-auf-akzent); }
.pagination { --bs-pagination-active-bg: var(--k-akzent); --bs-pagination-active-border-color: var(--k-akzent); --bs-pagination-active-color: var(--k-auf-akzent); }
.list-group { --bs-list-group-active-bg: var(--k-akzent); --bs-list-group-active-border-color: var(--k-akzent); }
.text-bg-primary { background-color: var(--k-akzent) !important; color: var(--k-auf-akzent) !important; }
.text-primary { color: var(--k-akzent) !important; }
.bg-primary { background-color: var(--k-akzent) !important; }
.border-primary { border-color: var(--k-akzent) !important; }

/* Die hellen Toene von "primary" (bg-primary-subtle, text-primary-emphasis, border-primary-subtle,
   alert-primary, list-group-item-primary) aus dem Akzent - gemischt wie Bootstrap sein Blau mischt.
   --bs-link-color(-hover) ist fuer Komponenten, die Links nachahmen (btn-link, nav-link, page-link);
   die a-Regel darunter rechnet mit -rgb und braucht ihre eigene Regel. */
:root, [data-bs-theme=light] {
    --bs-primary: var(--k-akzent);
    --bs-primary-text-emphasis: color-mix(in srgb, var(--k-akzent) 40%, #000);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--k-akzent) 20%, #fff);
    --bs-primary-border-subtle: color-mix(in srgb, var(--k-akzent) 40%, #fff);
    --bs-link-color: var(--k-akzent);
    --bs-link-hover-color: color-mix(in srgb, var(--k-akzent) 80%, #000);
}
[data-bs-theme=dark] {
    --bs-primary-text-emphasis: color-mix(in srgb, var(--k-akzent) 60%, #fff);
    --bs-primary-bg-subtle: color-mix(in srgb, var(--k-akzent) 20%, #000);
    --bs-primary-border-subtle: color-mix(in srgb, var(--k-akzent) 60%, #000);
    --bs-link-color: color-mix(in srgb, var(--k-akzent) 60%, #fff);
    --bs-link-hover-color: color-mix(in srgb, var(--k-akzent) 45%, #fff);
}
.form-check-input:checked { background-color: var(--k-akzent); border-color: var(--k-akzent); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: color-mix(in srgb, var(--k-akzent) 55%, var(--bs-body-bg));
    box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--k-akzent) 25%, transparent);
}
/* Nur hell / nur dunkel sichtbar - nach dem Thema der Seite (data-bs-theme am <html>, thema.js),
   z. B. Mond und Sonne im Knopf data-kern-thema oder zwei Logos. Ohne Skript, folgt jeder Wahl. */
:root[data-bs-theme=dark] .kern-nur-hell, :root:not([data-bs-theme=dark]) .kern-nur-dunkel { display: none !important; }
/* Umrandete Knoepfe im Hellen: auf hellgrauem Grund (#f8f9fa) haben secondary 4,45:1, danger und
   success 4,3:1 - die Schrift nimmt Bootstraps eigene Hover-Toene (ueber 5,5:1, Fund geschenkideen). */
.btn-outline-secondary { --bs-btn-color: #5c636a; }
.btn-outline-success { --bs-btn-color: #157347; }
.btn-outline-danger { --bs-btn-color: #bb2d3b; }
/* Umrandete Knoepfe im Dunkeln: Bootstraps Grundfarben haben auf dunklem Grund zu wenig
   Kontrast (secondary 3,8:1, danger 3,9:1 - Fund geschenkideen) - die Schrift nimmt die helle Variante. */
[data-bs-theme=dark] .btn-outline-primary { --bs-btn-color: var(--bs-primary-text-emphasis); }
[data-bs-theme=dark] .btn-outline-secondary { --bs-btn-color: var(--bs-secondary-text-emphasis); }
[data-bs-theme=dark] .btn-outline-success { --bs-btn-color: var(--bs-success-text-emphasis); }
[data-bs-theme=dark] .btn-outline-danger { --bs-btn-color: var(--bs-danger-text-emphasis); }
.btn:focus-visible { box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--k-akzent) 35%, transparent); }

/* Links in der Akzentfarbe - dunkel aufgehellt wie Bootstraps eigenes Dunkel (#0d6efd -> #6ea8fe).
   Bootstraps a-Regel rechnet mit --bs-link-color-rgb, das laesst sich aus einer Farbe nicht ableiten.
   Komponenten (.btn, .nav-link, .page-link ...) und .link-*-Klassen setzen ihre Farbe selbst.
   Alle vier Regeln haben die Spezifitaet eines nackten a (0,0,1): sie schlagen Bootstraps a
   (kern.css laedt danach), jede Klasse des Projekts (.marke { color: ... }) schlaegt sie. */
a { color: color-mix(in srgb, var(--k-akzent) calc(var(--bs-link-opacity, 1) * 100%), transparent); }
a:where(:hover) { color: color-mix(in srgb, var(--k-akzent) 80%, #000); }
:where([data-bs-theme=dark]) a { color: color-mix(in srgb, color-mix(in srgb, var(--k-akzent) 60%, #fff) calc(var(--bs-link-opacity, 1) * 100%), transparent); }
:where([data-bs-theme=dark]) a:where(:hover) { color: color-mix(in srgb, var(--k-akzent) 45%, #fff); }

/* ----------------------------------------------------------- Verwaltung --- */

.kern-navi .kern-navi-gruppe {
    margin: 1rem .75rem .3rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--bs-secondary-color);
}
.kern-navi .nav-link { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .75rem; color: var(--bs-body-color); }
.kern-navi .nav-link:hover { background: var(--bs-tertiary-bg); }
.kern-navi .nav-link.active { color: var(--k-auf-akzent); }
.kern-navi .nav-link.active .badge { background: var(--k-auf-akzent) !important; color: var(--k-akzent) !important; }
@media (min-width: 992px) {
    .kern-navi { position: sticky; top: 1rem; }
}

.kern-kachel { color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.kern-kachel:hover { color: inherit; border-color: var(--k-akzent); box-shadow: var(--bs-box-shadow-sm); }
.kern-lage { display: flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 600; }
.kern-lage::before { content: ""; flex: none; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
.kern-lage.text-secondary { font-weight: 400; }

.kern-leer {
    padding: 1.25rem; margin: 0 0 1rem;
    text-align: center; color: var(--bs-secondary-color);
    border: 1px dashed var(--bs-border-color); border-radius: var(--bs-border-radius);
}

/* Befund, Aufgabe: Karte mit farbigem Rand links - kern-befund-gut|warnung|fehler, ohne Wertung: -akzent */
.kern-befund { border-left-width: 4px; }
.kern-befund-gut { border-left-color: var(--bs-success); }
.kern-befund-warnung { border-left-color: var(--bs-warning); }
.kern-befund-fehler, .kern-befund-kritisch { border-left-color: var(--bs-danger); }
.kern-befund-akzent { border-left-color: var(--k-akzent); }
.kern-befund > .card-body > :last-child { margin-bottom: 0; }

/* Tabellen auf dem Handy als Karten: Spaltenname aus data-spalte, data-spalte="" ist der Kopf der Karte.
   Lange Woerter (Mailadressen, Adressen) brechen um, sonst scrollt die Seite seitlich. */
@media (max-width: 575.98px) {
    .kern-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .kern-tabelle, .kern-tabelle > tbody, .kern-tabelle > tbody > tr, .kern-tabelle > tbody > tr > td { display: block; width: 100%; }
    .kern-tabelle > tbody > tr { margin: 0 0 .6rem; padding: .5rem .75rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); }
    .kern-tabelle > tbody > tr > td { padding: .2rem 0; border: 0; text-align: left !important; box-shadow: none; overflow-wrap: anywhere; }
    .kern-tabelle > tbody > tr > td[data-spalte] { position: relative; padding-left: max(7rem, 36%); min-height: 1.9rem; }
    .kern-tabelle > tbody > tr > td[data-spalte]::before {
        content: attr(data-spalte);
        position: absolute; left: 0; top: .3rem; width: calc(max(7rem, 36%) - .75rem);
        color: var(--bs-secondary-color); font-size: .85rem; line-height: 1.3;
    }
    .kern-tabelle > tbody > tr > td[data-spalte=""] { padding-left: 0; }
    .kern-tabelle > tbody > tr > td[data-spalte=""]::before { content: none; }
}

/* Gefahr: ein Knopf, der erst eine Rueckfrage aufklappt (<details>, ohne JavaScript). */
details.kern-gefahr { display: inline-block; vertical-align: middle; }
details.kern-gefahr > summary { list-style: none; }
details.kern-gefahr > summary::-webkit-details-marker { display: none; }
details.kern-gefahr[open] {
    display: block; margin: .5rem 0; padding: .75rem .9rem;
    border: var(--bs-border-width) solid var(--bs-danger-border-subtle);
    border-radius: var(--bs-border-radius);
    background: var(--bs-danger-bg-subtle);
}
details.kern-gefahr[open] > summary { margin-bottom: .5rem; }
details.kern-gefahr form > :last-child { margin-bottom: 0; }

details.kern-klapp > summary { cursor: pointer; }

/* ---------------------------------------------------------------- Konto --- */

.kern-konto { max-width: 48rem; margin-left: auto; margin-right: auto; }
.kern-konto .card { scroll-margin-top: 1rem; }
.kern-schmal { max-width: 27rem; margin: 1.5rem auto; }

/* Navigation der Verwaltung auf schmalen Bildschirmen: aufklappen ohne JavaScript */
details.kern-navi-klapp > summary { list-style: none; cursor: pointer; }
details.kern-navi-klapp > summary::-webkit-details-marker { display: none; }
details.kern-navi-klapp > summary::after { content: "▾"; margin-left: auto; color: var(--bs-secondary-color); }
details.kern-navi-klapp[open] > summary::after { content: "▴"; }