/* ============================================
   APP-SHELL — Grid: Sidebar | Main | (Right on-demand)
   ============================================ */

#appShell {
    display: grid;
    grid-template-columns: 248px 1fr;
    height: 100vh;
    height: 100dvh; /* dynamische Viewport-Höhe: iOS-Adressleiste schneidet nichts ab */
    overflow: hidden;
}

#appShell.sidebar-collapsed {
    grid-template-columns: 56px 1fr;
}

/* --- SIDEBAR --- */
.shell-sidebar {
    background: #faf9fc;
    border-right: 1px solid var(--gray-200);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

[data-theme="dark"] .shell-sidebar {
    background: var(--background);
    border-right: 1px solid rgba(64, 64, 64, 0.6);
}

.shell-sidebar-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 12px 14px;
    min-height: 48px;
}

/* LOTS-Logo als Button → zurück zur Zeiterfassung. */
.logo-home {
    display: inline-flex; align-items: center; gap: var(--spacing-sm);
    background: none; border: none; padding: 0; margin: 0; cursor: pointer; color: inherit;
    min-width: 0;
}
.logo-home:hover .logo-text { color: var(--primary); }
#appShell.sidebar-collapsed .shell-sidebar-head .logo-home { justify-content: center; }

/* Fester 28px-Slot, damit das Logo-Icon in beiden Zuständen dieselbe Mitte hat. */
.shell-sidebar-head .logo-icon {
    width: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.shell-sidebar-head .logo-text { white-space: nowrap; }
#appShell.sidebar-collapsed .shell-sidebar-head .logo-text { display: none; }

.sidebar-toggle {
    margin-left: auto;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--gray-200); border-radius: var(--radius-md);
    background: var(--white); color: var(--gray-600); cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.sidebar-toggle:hover { background: var(--primary-lighter); color: var(--primary); border-color: var(--primary-lighter); }
[data-theme="dark"] .sidebar-toggle { background: var(--dark-light); border-color: rgba(64, 64, 64, 0.6); }

/* Eingeklappt: Logo oben, Toggle darunter — beide zentriert + klar sichtbar */
#appShell.sidebar-collapsed .shell-sidebar-head { flex-direction: column; gap: 8px; }
#appShell.sidebar-collapsed .sidebar-toggle { margin: 0 auto; }

/* View-Umschalter */
.shell-nav { padding: 4px 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.shell-nav-item {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 8px;
    color: var(--gray-600); font-size: 0.8125rem; font-weight: 500;
    background: transparent; border: none; cursor: pointer; text-align: left;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}
.shell-nav-item:hover { background: var(--primary-lighter); color: var(--primary); }
.shell-nav-item.active { background: var(--primary); color: #fff; font-weight: 600; }
.shell-nav-item .shell-nav-icon { width: 16px; text-align: center; flex-shrink: 0; }
.shell-nav-item .shell-nav-label { white-space: nowrap; }
#appShell.sidebar-collapsed .shell-nav-item { justify-content: center; padding: 7px 0; }
#appShell.sidebar-collapsed .shell-nav-item .shell-nav-label { display: none; }
.shell-nav-badge {
    margin-left: auto;
    min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--error); color: #fff;
    font-size: 0.65rem; font-weight: 700; line-height: 18px; text-align: center;
}
#appShell.sidebar-collapsed .shell-nav-badge {
    position: absolute; top: 2px; right: 4px; margin: 0;
    min-width: 14px; height: 14px; line-height: 14px; padding: 0 3px; font-size: 0.55rem;
}

/* Platzhalter für Phase 2 (Kundenbaum) */
.shell-sidebar-filter { flex: 1; overflow-y: auto; min-height: 0; }

/* Sidebar-Footer: Bell + Gear am unteren Rand der Sidebar */
.shell-sidebar-foot {
    display: flex; align-items: center; gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-top: 1px solid var(--gray-200);
    flex-shrink: 0;
}
[data-theme="dark"] .shell-sidebar-foot { border-top-color: rgba(64,64,64,.6); }

/* Eingeklappt (56px Rail): Icons zentriert, kein Label vorhanden */
#appShell.sidebar-collapsed .shell-sidebar-foot { justify-content: center; flex-wrap: wrap; }

/* Notification-Panel öffnet aus dem Sidebar-Footer nach oben. position:fixed,
   damit es NICHT vom overflow:hidden der Sidebar geclippt wird (Panel 340px >
   Sidebar 248px). Unten-links über dem Footer verankert. */
.shell-sidebar-foot .notification-panel {
    position: fixed;
    left: var(--spacing-md);
    bottom: 56px;
    top: auto;
    right: auto;
    z-index: 1200;
}
@media (max-width: 768px) {
    .shell-sidebar-foot .notification-panel { left: 12px; bottom: 12px; }
}

/* --- MAIN --- */
.shell-main {
    display: flex; flex-direction: column;
    overflow: hidden; min-width: 0;
}

/* Flex-Spalte, damit der Footer im Flow unten andockt (kurze Seite → unten am
   Rand, lange Seite → erst nach Scrollen). */
.shell-content { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0; min-height: 0; display: flex; flex-direction: column; }
/* Kinder füllen die Breite (sonst kollabieren .section-Blöcke mit margin:0 auto
   in der Flex-Spalte auf Content-Breite). max-width/Zentrierung bleibt erhalten. */
.shell-content > * { width: 100%; }
/* Footer fließt direkt nach dem Inhalt (kein Pinnen an den Boden) — sonst klafft
   bei kurzem Inhalt eine große Lücke darüber und die Seite wirkt „halbiert".
   flex-shrink:0, damit der Footer nicht zusammengedrückt wird. */
.shell-content > .footer { flex: 0 0 auto; }

/* View-Panels: nur die aktive sichtbar (hidden steuert lotsShell) */
[data-view-panel] { display: block; }
[data-view-panel][hidden] { display: none; }