/* =====================================================================
   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
   Die alten header.topbar-Regeln in app.css sind inert (Markup entfernt).
   ===================================================================== */

:root {
    /* Echte LK-CI-Palette (wie Chat/Widgets/Medien-Studio) */
    --lk-gruen: #007E46;
    --lk-gruen-dunkel: #00612F;
    --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: #1d9560;
    /* Sidebar-Töne */
    --adm-side-bg: #0d2b1d;
    --adm-side-bg2: #113626;
    --adm-side-breite: 232px;
    --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: linear-gradient(180deg, var(--adm-side-bg2) 0%, var(--adm-side-bg) 55%);
    color: #e6efe9;
    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: 16px 16px 14px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.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: #fff;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: .03em;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.adm-brand-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.adm-brand-text strong {
    font-size: .95rem;
    line-height: 1.15;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.adm-brand-text .version {
    align-self: flex-start;
    font-size: .68rem;
    color: rgba(230,239,233,.75);
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.16);
    padding: 1px 8px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, color .15s;
}
.adm-brand-text .version:hover { background: rgba(255,255,255,.18); color: #fff; }
.adm-brand-text .version:focus-visible { outline: 2px solid var(--lk-maigruen); outline-offset: 1px; }

/* --- Navigation --- */
.adm-nav {
    flex: 1;
    overflow-y: auto;
    padding: 10px 10px 12px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.25) transparent;
}
.adm-gruppe {
    margin: 16px 8px 5px;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--lk-maigruen);
    opacity: .85;
}
.adm-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin: 1px 0;
    border-radius: 8px;
    color: rgba(230,239,233,.88);
    font-size: .92rem;
    font-weight: 500;
    line-height: 1.2;
    border-left: 3px solid transparent;
    transition: background .13s, color .13s;
}
.adm-nav a:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none;
}
.adm-nav a:focus-visible {
    outline: 2px solid var(--lk-maigruen);
    outline-offset: -2px;
}
.adm-nav a.active {
    background: rgba(164,195,55,.14);
    border-left-color: var(--lk-maigruen);
    color: #fff;
}
.adm-nav a.active .adm-ico { color: var(--lk-maigruen); }
.adm-ico {
    width: 18px;
    height: 18px;
    flex: none;
    color: rgba(230,239,233,.6);
    transition: color .13s;
}
.adm-nav a:hover .adm-ico { color: #fff; }

/* --- Sidebar-Fußzeile --- */
.adm-side-fuss {
    padding: 10px;
    border-top: 1px solid rgba(255,255,255,.08);
}
.adm-demo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: rgba(230,239,233,.85);
    font-size: .88rem;
    font-weight: 500;
    border: 1px solid rgba(255,255,255,.14);
    transition: background .13s, border-color .13s;
}
.adm-demo:hover {
    background: var(--lk-gruen);
    border-color: var(--lk-gruen);
    color: #fff;
    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: 14px;
    padding: 0 26px 0 20px;
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--border-color);
}
.adm-titel {
    margin: 0;
    font-size: 1.05rem;
    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: #c62828; 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: 38px;
    height: 38px;
    padding: 8px;
    border: 1px solid var(--border-strong);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}
.adm-burger span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: var(--text-dark);
}
.adm-burger:focus-visible { outline: 2px solid var(--lk-gruen); outline-offset: 2px; }

.adm-schleier {
    position: fixed;
    inset: 0;
    background: rgba(13,43,29,.45);
    z-index: 55;
}
.adm-schleier[hidden] { display: none; }

/* --- Responsive: Sidebar als Off-Canvas --- */
@media (max-width: 900px) {
    .adm-side {
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: 0 0 40px rgba(0,0,0,.35);
        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; }
}