/* style.css */

:root{
    /* Consulting by Doing – Markenfarben (siehe One-Pager) */
    --brand-ink:      #000068;   /* Markenblau */
    --brand-ink-soft: #1a2296;   /* für Hover/Verläufe, falls gebraucht */
    --brand-accent:   #c2272c;   /* Markenrot, gedämpft */
}

body {
    font-family: 'Segoe UI', sans-serif;
    margin: 0;
}

/* ── Mobile-Topbar (nur < 768px) ─────────────────────────────────────── */
.mobile-topbar {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    background-color: var(--brand-ink);
    color: #ffffff;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    z-index: 1050;
}
.mobile-topbar .navbar-toggler {
    border: none;
    background: rgba(255,255,255,0.1);
    color: #fff;
    padding: 5px 11px;
    border-radius: 6px;
    font-size: 1.15rem;
    line-height: 1;
}
.mobile-topbar .navbar-toggler:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}
.mobile-topbar .brand {
    font-weight: 700;
    font-size: 0.95rem;
}

/* ── Sidebar ──────────────────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    background-color: var(--brand-ink);
    color: #c9d3e3;
    display: flex;
    flex-direction: column;
    z-index: 1000;
}

.sidebar-brand {
    padding: 24px 20px 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sidebar-brand h5 {
    color: #ffffff;
    font-weight: 700;
    margin: 0;
    font-size: 1.1rem;
}
.sidebar-brand small {
    color: #7a89a8;
    font-size: 0.75rem;
}

.sidebar-section-title {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    color: #5d6b8a;
    padding: 18px 20px 6px 20px;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 10px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: #c9d3e3;
    text-decoration: none;
    font-size: 0.92rem;
    transition: background-color 0.15s;
}
.sidebar-link:hover {
    background-color: rgba(255,255,255,0.06);
    color: #ffffff;
}
.sidebar-link.active {
    background-color: rgba(255,255,255,0.1);
    color: #ffffff;
    border-left: 3px solid var(--brand-accent);
    padding-left: 17px;
}

.sidebar-footer {
    border-top: 1px solid rgba(255,255,255,0.08);
    padding: 14px 20px;
}
.sidebar-footer .user-name {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
}
.sidebar-footer .user-role {
    color: #7a89a8;
    font-size: 0.75rem;
}
.sidebar-footer a {
    color: #8fa2c9;
    font-size: 0.82rem;
    text-decoration: none;
}
.sidebar-footer a:hover {
    color: #ffffff;
}

/* ── Hauptinhalt ──────────────────────────────────────────────────────── */
.main-content {
    margin-left: 240px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.content-body {
    flex: 1;
    padding: 30px;
}

footer.app-footer {
    font-size: 0.78rem;
    padding: 12px 30px;
    color: #9aa5b8;
    border-top: 1px solid #e5e8ee;
}

/* ── Karten (bestehend) ───────────────────────────────────────────────── */
.card {
    border: none;
    border-radius: 8px;
}
.btn-dark:hover {
    background-color: #333;
}

/* ── Mobile: Sidebar wird zum ausblendbaren Menü (Slide-in) ─────────────
   Statt fix sichtbar (und dem Screen Platz wegzunehmen) liegt die Sidebar
   auf Mobile standardmässig ausserhalb des sichtbaren Bereichs und fährt
   nur bei Bedarf über den Inhalt ein. Ein Tap auf den Hintergrund oder auf
   einen Menüpunkt schliesst sie automatisch wieder – man verliert also nie
   Platz, während man im Hauptbereich arbeitet.                            */
@media (max-width: 767.98px) {
    .mobile-topbar { display: flex; }

    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        width: 268px;
        box-shadow: 4px 0 24px rgba(0,0,0,0.28);
    }
    .sidebar.is-open {
        transform: translateX(0);
    }

    .sidebar-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.42);
        z-index: 999;
    }
    .sidebar-backdrop.is-visible { display: block; }

    .main-content {
        margin-left: 0;
        padding-top: 52px; /* Platz für die fixe Mobile-Topbar */
    }
}