/*
 * Manaki — eigenes Erscheinungsbild über Tabler.
 *
 * Tabler bringt Bootstrap 5.3 mit. Diese Datei wird NACH tabler.min.css geladen
 * und macht daraus Manaki: das Violett der Marke (manaki.ch) statt Tablers Blau.
 *
 * Grundsatz: so wenig eigenes CSS wie möglich. Was Tabler kann, macht Tabler.
 * Hier steht nur, was Manaki von Tabler unterscheidet — keine Reparaturen an
 * fremden Regeln (das war bei AdminDek nötig, bei Tabler nicht).
 *
 * Farbherkunft: das Logo auf manaki.ch trägt #9077DE auf #C5ADF3. #9077DE
 * erreicht auf Weiss aber nur 3.57:1 und fällt damit unter WCAG AA (4.5:1) —
 * als Leitfarbe für Knöpfe und Links ist es zu hell. Die Leitfarbe ist deshalb
 * zwei Stufen dunkler (#6D4FC9, 5.81:1); die hellen Logotöne leben als Flächen-
 * und Badge-Farben weiter.
 */

:root,
[data-bs-theme='light'] {
    /* Leitfarbe — ersetzt Tablers Blau überall, wo Tabler --tblr-primary nutzt */
    --tblr-primary: #6d4fc9;
    --tblr-primary-rgb: 109, 79, 201;
    --tblr-primary-fg: #ffffff;
    --tblr-link-color: #6d4fc9;
    --tblr-link-color-rgb: 109, 79, 201;
    --tblr-link-hover-color: #5b3fb8;

    /* Eigene Töne, auf die sich die Bauteile weiter unten beziehen */
    --manaki-violett: #6d4fc9;
    --manaki-violett-dunkel: #5b3fb8;
    --manaki-violett-tief: #2e2150;   /* Seitenleiste */
    --manaki-violett-marke: #9077de;  /* Logofarbe, für Akzente auf Dunkel */
    --manaki-violett-hell: #efe9fc;   /* Flächen, Badges */
    --manaki-violett-hell-2: #ddd2f7;
    --manaki-violett-text: #4a2fa0;   /* Text auf hellen Violettflächen */

    --manaki-warn: #b26a00;
    --manaki-warn-flaeche: #fdf0dd;
    --manaki-fehler: #b3261e;
    --manaki-fehler-flaeche: #fbeceb;
}

/* Tabler setzt die Akzentfarbe zusätzlich am body */
body {
    --tblr-primary: #6d4fc9;
    --tblr-primary-rgb: 109, 79, 201;
}

.btn-primary {
    --tblr-btn-bg: var(--manaki-violett);
    --tblr-btn-border-color: var(--manaki-violett);
    --tblr-btn-hover-bg: var(--manaki-violett-dunkel);
    --tblr-btn-hover-border-color: var(--manaki-violett-dunkel);
    --tblr-btn-active-bg: var(--manaki-violett-dunkel);
    --tblr-btn-active-border-color: var(--manaki-violett-dunkel);
}

.btn-outline-primary {
    --tblr-btn-color: var(--manaki-violett);
    --tblr-btn-border-color: var(--manaki-violett);
    --tblr-btn-hover-bg: var(--manaki-violett);
    --tblr-btn-hover-border-color: var(--manaki-violett);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--manaki-violett);
    box-shadow: 0 0 0 0.25rem rgba(109, 79, 201, 0.15);
}

.form-check-input:checked {
    background-color: var(--manaki-violett);
    border-color: var(--manaki-violett);
}

/* ------------------------------------------------------------- Seitenleiste */

.navbar-vertical.navbar-dark {
    --tblr-navbar-bg: var(--manaki-violett-tief);
    --tblr-navbar-color: rgba(255, 255, 255, 0.78);
    --tblr-navbar-active-color: #ffffff;
    border-right: 0;
}

.navbar-vertical .navbar-brand {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
}

/* Das „a" im Wortbild trägt auf manaki.ch die helle Markenfarbe. */
.navbar-brand .marke-akzent {
    color: var(--manaki-violett-marke);
}

.navbar-vertical .nav-link {
    border-radius: 0.5rem;
    margin: 0.1rem 0.5rem;
    padding: 0.55rem 0.75rem;
}

.navbar-vertical .nav-link:hover {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.navbar-vertical .nav-item.active > .nav-link,
.navbar-vertical .nav-link.active {
    background: var(--manaki-violett);
    color: #fff;
}

.navbar-vertical .nav-link-icon {
    font-size: 1.15rem;
    opacity: 1;
}

/* Gruppentitel in der Seitenleiste („Allgemein", „Module", „Verwaltung").
   AdminDek hatte dafür ein eigenes Bauteil, Tabler nicht — hier ist es. */
.navbar-vertical .nav-gruppe {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 1.1rem 1.25rem 0.35rem;
}

.navbar-vertical .nav-gruppe:first-child {
    padding-top: 0.35rem;
}

/* Fusszeile der Seitenleiste: für wen man gerade arbeitet. */
.seitenleiste-mandant {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.seitenleiste-mandant strong {
    color: #fff;
    display: block;
}

/* ------------------------------------------------------------------ Badges */

/*
 * Sicherheitsnetz für Vollfarb-Badges.
 *
 * Tabler gibt `.badge` eine dunkle Schriftfarbe; Bootstraps `.bg-*` färbt nur
 * den Hintergrund. Zusammen ergibt das dunklen Text auf gesättigtem Grund —
 * praktisch unlesbar (ein `bg-secondary`-Badge war ein grauer Balken ohne
 * erkennbare Schrift). Manaki nutzt darum durchgehend Tablers `-lt`-Töne; diese
 * Regel fängt nur die Stellen ab, die künftig doch eine Vollfarbe erwischen.
 */
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-success,
.badge.bg-danger,
.badge.bg-info,
.badge.bg-dark {
    color: #fff;
}

/* ------------------------------------------------------------------ Karten */

/*
 * Karten, die untereinander stehen, brauchen Luft.
 *
 * Tabler gibt `.card` bewusst keinen Aussenabstand: vorgesehen ist das Raster
 * `row-cards`, dessen Zeilenabstand die Lücke setzt. Das greift aber nur, wenn
 * jede Karte in einer eigenen Spalte steht — in den meisten Ansichten hier
 * stehen sie schlicht untereinander, und dann kleben sie aneinander.
 *
 * Die letzte Karte bekommt keinen Abstand, damit unter ihr keine tote Lücke
 * entsteht. So funktioniert die Regel auch innerhalb von `row-cards`: dort ist
 * die unterste Karte einer Spalte `:last-child`, den Rest macht der Gutter.
 */
.page-body .card {
    margin-bottom: 1.5rem;
}

.page-body .card:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------ Vergleichstabelle */

/* Ein Wert ausserhalb seines Grenzwerts — das ist der Grund, warum man die
   Tabelle überhaupt ansieht, also darf er nicht dezent sein. Farbe allein
   genügt nicht: das Ausrufezeichen sagt es auch denen, die Rot nicht als Rot
   sehen. */
.vergleich-abweichung {
    background: var(--manaki-fehler-flaeche) !important;
    box-shadow: inset 3px 0 0 var(--manaki-fehler);
    color: var(--manaki-fehler);
    font-weight: 700;
}

.vergleich-abweichung::before {
    content: '⚠ ';
}

/* Die erste Spalte (Datum) bleibt beim seitlichen Scrollen stehen, sonst weiss
   man nach drei Spalten nicht mehr, welche Wartung man liest. */
.vergleich-tabelle th:first-child,
.vergleich-tabelle td:first-child {
    background: var(--tblr-bg-surface);
    left: 0;
    position: sticky;
    z-index: 1;
}

/* -------------------------------------------------------- Klappbare Karten */

/*
 * Ein Kartenkopf, der die Karte auf- und zuklappt.
 *
 * Listen aus Standorten oder Kategorien zeigen zugeklappt nur Name und Status;
 * das Formular erscheint erst auf Klick. Bei einem Dutzend Einträgen wäre die
 * Seite sonst meterlang, obwohl man meist nur nachsehen will, was es gibt.
 */
.klapp-kopf {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    user-select: none;
}

.klapp-kopf:hover {
    background: var(--manaki-violett-hell);
}

/* Der Pfeil zeigt, in welche Richtung es geht: nach unten heisst „öffnet
   sich", nach oben „schliesst sich". */
.klapp-pfeil {
    color: var(--tblr-secondary);
    transition: transform 0.15s ease-in-out;
}

.klapp-kopf:not(.collapsed) .klapp-pfeil {
    transform: rotate(180deg);
}

/* Tastaturbedienung sichtbar machen — der Kopf ist ein Bedienelement. */
.klapp-kopf:focus-visible {
    outline: 2px solid var(--manaki-violett);
    outline-offset: -2px;
}

/* ------------------------------------------------------------ Adresssuche */

.adress-suche {
    position: relative;
}

.adress-vorschlaege {
    background: var(--tblr-bg-surface);
    border: 1px solid var(--tblr-border-color);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: none;
    left: 0;
    max-height: 16rem;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: calc(100% + 2px);
    /* Über allem, was im Formular darunter liegt, aber unter der Kopfleiste. */
    z-index: 1030;
}

.adress-vorschlaege.offen {
    display: block;
}

.adress-vorschlag {
    background: none;
    border: 0;
    color: inherit;
    cursor: pointer;
    display: block;
    padding: 0.5rem 0.75rem;
    text-align: left;
    width: 100%;
}

.adress-vorschlag:hover,
.adress-vorschlag.aktiv {
    background: var(--manaki-violett-hell);
    color: var(--manaki-violett-text);
}

/* ------------------------------------------------------------------- Karte */

.karte {
    border-radius: 0.5rem;
    height: 420px;
    width: 100%;
    z-index: 0; /* sonst legt sich Leaflet über Dropdowns der Kopfleiste */
}

.karte-klein {
    height: 240px;
}

/* Eigene Nadel statt Leaflets Standardbild: sie trägt entweder ein Symbol für
   die Art des Orts oder die Anzahl der Objekte, die dort stehen. */
.karte-nadel-punkt {
    align-items: center;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    color: #fff;
    display: flex;
    font-size: 0.85rem;
    font-weight: 700;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.karte-liste {
    margin: 0.4rem 0 0;
    padding-left: 1.1rem;
}

.leaflet-popup-content {
    margin: 0.7rem 0.9rem;
    min-width: 12rem;
}

/* ------------------------------------------------------------------ Seiten */

/* Seitenkopf: Titel, Untertitel, Brotkrumen. */
.seiten-titel {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.seiten-untertitel {
    color: var(--tblr-secondary);
    font-size: 0.875rem;
}

/* Der Superadmin-Balken: sichtbar, aber nicht alarmierend — er ist ein
   Zustandshinweis, keine Fehlermeldung. */
.mandanten-balken {
    background: var(--manaki-violett-hell);
    border: 1px solid var(--manaki-violett-hell-2);
    border-radius: 0.5rem;
    color: var(--manaki-violett-text);
    padding: 0.65rem 1rem;
}

.mandanten-balken a {
    color: var(--manaki-violett-text);
    font-weight: 600;
}

/* -------------------------------------------------------------- Anmeldung */

/* Die Anmeldeseite steht auf einem violetten Verlauf statt auf Grau — sie ist
   das erste, was man von Manaki sieht. */
.anmelde-seite {
    background: linear-gradient(160deg, var(--manaki-violett-tief) 0%, #43307e 55%, var(--manaki-violett) 100%);
    min-height: 100vh;
}

.anmelde-marke {
    align-items: center;
    color: #fff;
    display: inline-flex;
    font-size: 1.75rem;
    font-weight: 700;
    gap: 0.5rem;
    letter-spacing: -0.01em;
}

.anmelde-marke i {
    font-size: 1.9rem;
}

/* Auf dem Verlauf braucht die Fusszeile mehr Kontrast als `text-secondary`. */
.anmelde-seite .text-secondary {
    color: rgba(255, 255, 255, 0.75) !important;
}

.anmelde-seite .card .text-secondary {
    color: var(--tblr-secondary) !important;
}

/* Links ausserhalb der Karte (Magic-Link) stehen auf dem violetten Verlauf —
   die Leitfarbe wäre dort dunkel auf dunkel. */
.anmelde-seite > .page > .container a:not(.anmelde-marke) {
    color: #fff;
    text-decoration: underline;
}

.anmelde-seite .card a {
    color: var(--manaki-violett);
    text-decoration: none;
}

/* Der helle Markenton trägt auf dem Verlauf zu wenig; hier bleibt das „a"
   weiss wie der Rest des Wortbilds. */
.anmelde-marke .marke-akzent {
    color: var(--manaki-violett-hell);
}

/* Die Kurzkennung eines Objekts — dieselbe Zeichenfolge, die mitten im
   QR-Code steht. Monospace und gesperrt, weil sie abgelesen und durchgegeben
   wird: so lässt sich Zeichen für Zeichen folgen. */
.kurzkennung {
    background: var(--manaki-violett-hell);
    border-radius: 0.375rem;
    color: var(--manaki-violett-text);
    font-family: var(--tblr-font-monospace);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    padding: 0.15rem 0.5rem 0.15rem 0.62rem;
}

/* In Listen darf sie kleiner sein. */
.kurzkennung-klein {
    font-size: 0.8125rem;
    padding: 0.05rem 0.4rem 0.05rem 0.5rem;
}

/* Leerzustand: wenn eine Liste noch nichts enthält. */
.leerzustand {
    color: var(--tblr-secondary);
    padding: 2.5rem 1rem;
    text-align: center;
}

.leerzustand-icon {
    color: var(--manaki-violett-hell-2);
    font-size: 2.5rem;
}

/* ------------------------------------------------------- Einführungs-Overlay */

/*
 * Abgedunkelte Fläche mit einem Loch um das erklärte Element. Die Abdunklung
 * entsteht aus dem sehr grossen Schlagschatten des Lochs, nicht aus einer
 * eigenen Fläche — deshalb darf das Loch nie ganz verschwinden.
 */
.guide {
    position: fixed;
    inset: 0;
    z-index: 2000;
}

.guide-loch {
    position: absolute;
    border-radius: 0.6rem;
    box-shadow: 0 0 0 9999px rgba(30, 22, 56, 0.62);
    transition: left 0.18s ease, top 0.18s ease, width 0.18s ease, height 0.18s ease;
    /* Der Scheinwerfer selbst fängt keine Klicks ab. */
    pointer-events: none;
}

.guide-blase {
    position: absolute;
    width: min(360px, calc(100vw - 24px));
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color);
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem;
    box-shadow: 0 12px 40px rgba(30, 22, 56, 0.35);
    transition: left 0.18s ease, top 0.18s ease;
}

.guide-zaehler {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--manaki-violett);
    margin-bottom: 0.35rem;
}

.guide-titel {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
}

.guide-text {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--tblr-secondary);
    margin: 0 0 1rem;
}

.guide-knoepfe {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.guide-nie {
    color: var(--tblr-secondary);
    text-decoration: none;
}

.guide-nie:hover {
    color: var(--tblr-body-color);
}

.guide-rechts {
    margin-left: auto;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .guide-blase {
        padding: 1rem;
    }

    .guide-knoepfe {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .guide-rechts {
        margin-left: 0;
        display: flex;
        gap: 0.5rem;
    }

    .guide-rechts .btn {
        flex: 1;
    }
}

/* Beim Drucken hat eine Einführung nichts verloren. */
@media print {
    .guide {
        display: none !important;
    }
}

/* --- PWA -----------------------------------------------------------------
   Hinweis auf eine wartende Fassung. Unten statt oben: auf dem Handy ist der
   Daumen dort, und die Kopfleiste ist im Standalone-Modus knapp. */

.pwa-hinweis {
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .75rem 1rem;
    border-radius: .5rem;
    background: var(--manaki-violett-tief);
    color: #fff;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .3);
    font-size: .875rem;
}

/* Im Standalone-Modus (vom Startbildschirm gestartet) reicht die Fläche bis
   in die Aussparungen des Geräts. Ohne diesen Abstand sitzt der Inhalt unter
   der Statusleiste beziehungsweise dem Indikatorbalken. */
@media (display-mode: standalone) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    .pwa-hinweis {
        bottom: calc(1rem + env(safe-area-inset-bottom));
    }
}