/* =====================================================================
   Admin-Shell: Sidebar-Navigation + Kopfleiste (Umbau 2026-07-11).
   Lädt NACH base.css/app.css und übersteuert gezielt:
   - LK-CI-Farben (LK-Grün #007E46 statt Alt-Kammergrün #2E7D32)
   - Layout: fixe Sidebar links, Rest (Kopfleiste + main) rechts
   ===================================================================== */

:root {
    /* Echte LK-CI-Palette (wie Chat/Widgets/Medien-Studio) */
    /* --lk-gruen kommt aus token.css */
    /* --lk-gruen-dunkel kommt aus token.css */
    --lk-maigruen: #A4C337;
    --lk-orange: #E9A840;
    --lk-grau: #607D8B;
    /* Alt-Variable auf CI-Grün umbiegen - alle bestehenden Views
       (Buttons, Fokus-Ringe, Links, primary-Abstufungen via color-mix)
       ziehen damit automatisch nach. */
    --primary-green: var(--lk-gruen);
    --hover-green: var(--lk-gruen-dunkel);
    /* Seitenleiste: HELL, wie im Chat-Bereich. Die frühere dunkelgrüne Leiste
       war die einzige Fläche im ganzen Haus mit umgekehrtem Kontrast - sie
       zwang zu weißer Schrift, eigenen Hover-Tönen und einem zweiten
       Fokus-Ring und ließ die Verwaltung wie eine fremde Anwendung wirken.
       Breite gleich der Chat-Seitenleiste, damit beim Wechsel nichts springt. */
    --adm-side-breite: 280px;
    --adm-top-h: 56px;
}

/* --- Grundlayout: Sidebar fix, Rest scrollt --- */
body.adm {
    display: flex;
    min-height: 100vh;
}
.adm-side {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--adm-side-breite);
    display: flex;
    flex-direction: column;
    background: var(--lk-gruen-blass);
    border-right: 1px solid var(--lk-linie);
    color: var(--lk-text);
    z-index: 60;
}
.adm-rest {
    flex: 1;
    min-width: 0;
    margin-left: var(--adm-side-breite);
    display: flex;
    flex-direction: column;
}
body.adm main {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 20px 26px 32px;
}

/* --- Marke --- */
.adm-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--lk-a-5) var(--lk-a-5) var(--lk-a-4);
    border-bottom: 1px solid var(--lk-linie);
}
.adm-brand-logo {
    width: 36px;
    height: 36px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: linear-gradient(135deg, var(--lk-gruen) 0%, var(--lk-gruen-dunkel) 100%);
    color: var(--lk-auf-farbe);
    font-weight: 700;
    font-size: var(--lk-s-gross);
    letter-spacing: .03em;
}
.adm-brand-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adm-brand-text strong {
    font-size: var(--lk-s-gross);
    line-height: var(--lk-zeile-eng);
    color: var(--lk-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-brand-text .version {
    align-self: flex-start;
    font-size: var(--lk-s-mini);
    color: var(--lk-text-leise);
    background: var(--lk-flaeche);
    border: 1px solid var(--lk-linie);
    padding: 1px 8px;
    border-radius: var(--lk-radius-rund);
    cursor: pointer;
    font-family: inherit;
    transition: color var(--lk-dauer) var(--lk-kurve);
}
.adm-brand-text .version:hover { color: var(--lk-gruen-dunkel); }

/* --- Navigation --- */
.adm-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--lk-a-3) var(--lk-a-3) var(--lk-a-4);
    scrollbar-width: thin;
    scrollbar-color: var(--lk-linie) transparent;
}
/* Gruppentitel als Etikett - dieselbe Auszeichnung wie im Chat-Verlauf. */
.adm-gruppe {
    margin: var(--lk-a-5) var(--lk-a-2) var(--lk-a-1);
    font-size: var(--lk-etikett-groesse);
    font-weight: var(--lk-etikett-fett);
    letter-spacing: var(--lk-etikett-abstand);
    text-transform: uppercase;
    color: var(--lk-text-leise);
}
.adm-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--lk-a-2) var(--lk-a-3);
    margin: 1px 0;
    border-radius: var(--lk-radius-klein);
    color: var(--lk-text);
    font-size: var(--lk-s-text);
    font-weight: 500;
    line-height: var(--lk-zeile-eng);
    transition: background var(--lk-dauer) var(--lk-kurve);
}
.adm-nav a:hover {
    background: var(--lk-gruen-hell);
    text-decoration: none;
}
/* Der offene Eintrag ist eine weiße Fläche auf der getönten Leiste - genau
   wie im Chat-Verlauf. Ein farbiger Streifen links wäre ein zweites,
   konkurrierendes Zeichen für dieselbe Aussage. */
.adm-nav a.active {
    background: var(--lk-flaeche);
    box-shadow: var(--lk-schatten-1);
    color: var(--lk-gruen-dunkel);
    font-weight: 600;
}
.adm-nav a.active .adm-ico { color: var(--lk-gruen); }
.adm-ico {
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--lk-text-leise);
    transition: color var(--lk-dauer) var(--lk-kurve);
}
.adm-nav a:hover .adm-ico { color: var(--lk-gruen-dunkel); }

/* --- Sidebar-Fußzeile --- */
.adm-side-fuss {
    padding: var(--lk-a-3);
    border-top: 1px solid var(--lk-linie);
}
.adm-demo {
    display: flex;
    align-items: center;
    gap: var(--lk-a-3);
    padding: var(--lk-a-2) var(--lk-a-3);
    border-radius: var(--lk-radius-klein);
    background: var(--lk-flaeche);
    color: var(--lk-text);
    font-size: var(--lk-s-text);
    font-weight: 500;
    border: 1px solid var(--lk-linie);
    transition: border-color var(--lk-dauer) var(--lk-kurve),
                color var(--lk-dauer) var(--lk-kurve);
}
.adm-demo:hover {
    border-color: var(--lk-gruen);
    color: var(--lk-gruen-dunkel);
    text-decoration: none;
}
.adm-demo .adm-ico { color: inherit; }

/* --- Kopfleiste --- */
.adm-top {
    position: sticky;
    top: 0;
    z-index: 40;
    height: var(--adm-top-h);
    display: flex;
    align-items: center;
    gap: var(--lk-a-4);
    padding: 0 var(--lk-a-7) 0 var(--lk-a-5);
    background: var(--lk-flaeche);
    border-bottom: 1px solid var(--lk-linie);
}
.adm-titel {
    margin: 0;
    font-size: var(--lk-s-titel);
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-top .status {
    margin-left: auto;
    font-size: .82rem;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.adm-top .status.ok::before { content: "●"; color: var(--lk-gruen); margin-right: 4px; }
.adm-top .status.err::before { content: "●"; color: var(--lk-fehler); margin-right: 4px; }
.adm-top .status .status-sep { opacity: .5; }
.adm-top .status .status-model { font-weight: 600; color: var(--text-dark); }
.adm-top .status .status-link {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 3px;
}
.adm-top .status .status-link:hover { color: var(--lk-gruen); text-decoration-style: solid; }
.adm-top .status .status-phones { cursor: help; }

/* PIN-Abmelden auf heller Kopfleiste (übersteuert den Alt-Stil aus app.css,
   der für die dunkle Topbar mit weißem Text gedacht war). */
.adm-top .pin-logout {
    background: var(--surface-2);
    color: var(--text-dark);
    border: 1px solid var(--border-strong);
    margin-left: 0;
}
.adm-top .pin-logout:hover:not(:disabled) {
    background: var(--primary-10);
    border-color: var(--lk-gruen);
    color: var(--lk-gruen-dunkel);
}

/* --- Burger (nur mobil) --- */
.adm-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: var(--lk-hoehe);
    height: var(--lk-hoehe);
    padding: 8px;
    border: 1px solid var(--border-strong);
    border-radius: var(--lk-radius-klein);
    background: var(--lk-flaeche);
    cursor: pointer;
}
.adm-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--lk-text);
}

.adm-schleier {
    position: fixed;
    inset: 0;
    background: var(--lk-schleier);
    z-index: 55;
}
.adm-schleier[hidden] { display: none; }

/* --- Responsive: Sidebar als Off-Canvas --- */
@media (max-width: 900px) {
    .adm-side {
        transform: translateX(-100%);
        transition: transform var(--lk-dauer-lang) var(--lk-kurve);
        box-shadow: var(--lk-schatten-3);
        width: min(280px, 84vw);
    }
    body.adm.adm-side-offen .adm-side { transform: translateX(0); }
    .adm-rest { margin-left: 0; }
    .adm-burger { display: flex; }
    .adm-top { padding: 0 14px; }
    body.adm main { padding: 14px 14px 28px; }
    .adm-top .status .status-link,
    .adm-top .status .status-phones,
    .adm-top .status .status-sep { display: none; }
}

/* ---------- Wechsel der Oberfläche im Kopf ----------
   Arbeitsplatz | Verwaltung | Demo. Die aktuelle Stelle ist kein Link,
   sondern trägt die Fläche - ein Link auf die Seite, auf der man steht,
   ist eine Sackgasse mit Zeigefinger. */
.adm-wechsel {
    display: flex; align-items: center; gap: 2px;
    margin-left: var(--lk-a-5);
    padding: 3px;
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-rund);
    background: var(--lk-gruen-blass);
    font-size: var(--lk-s-klein);
}
.adm-wechsel a, .adm-wechsel-hier {
    padding: var(--lk-a-1) var(--lk-a-4);
    border-radius: var(--lk-radius-rund);
    color: var(--lk-text-leise);
    text-decoration: none;
    white-space: nowrap;
}
.adm-wechsel a:hover { color: var(--lk-gruen-dunkel); text-decoration: none; }
.adm-wechsel-hier {
    background: var(--lk-flaeche);
    box-shadow: var(--lk-schatten-1);
    color: var(--lk-gruen-dunkel);
    font-weight: 700;
}

/* Der Fuß trägt jetzt einen Hinweis statt zweier Links. */
.adm-side-fuss {
    font-size: var(--lk-s-mini);
    line-height: var(--lk-zeile);
    color: var(--lk-text-leise);
}

@media (max-width: 900px) {
    /* Schmal fällt der Wechsel weg - Titel und Zustand haben Vorrang. */
    .adm-wechsel { display: none; }
}

/* Zähler am Navigationseintrag - dieselbe Blase wie an den Bereichs-Reitern
   des Arbeitsplatzes. Sie steht rechts, damit die Namen bündig bleiben. */
.adm-n {
    margin-left: auto;
    padding: 0 6px;
    min-width: 18px;
    border-radius: var(--lk-radius-rund);
    background: var(--lk-gruen-hell);
    color: var(--lk-gruen-dunkel);
    font-size: var(--lk-s-mini);
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
.adm-nav a.active .adm-n { background: var(--lk-gruen-hell); }

/* Filterfeld über der Navigation - gleiche Anmutung wie das Suchfeld im
   Arbeitsplatz, damit der Wechsel zwischen beiden nichts Neues verlangt. */
.adm-suche {
    display: flex; align-items: center; gap: var(--lk-a-2);
    flex-shrink: 0;
    margin: 0 var(--lk-a-3) var(--lk-a-2);
    padding: var(--lk-a-2) var(--lk-a-3);
    border: 1px solid var(--lk-linie);
    border-radius: var(--lk-radius-klein);
    background: var(--lk-flaeche);
    color: var(--lk-text-schwach);
}
.adm-suche:focus-within { border-color: var(--lk-gruen); }
.adm-suche .adm-ico { width: 16px; height: 16px; }
.adm-suche input {
    flex: 1; min-width: 0;
    border: 0; background: none; outline: none;
    font-family: inherit; font-size: var(--lk-s-klein);
    color: var(--lk-text);
}
.adm-suche input::placeholder { color: var(--lk-text-schwach); }