/**
 * Purpose:    Page structure: shell, topbar, sidebar, container.
 * Depends on: tokens.css
 * Used by:    Linked third, after base.css, in views/layout/app.php and
 *             views/layout/guest.php.
 * UI rules:   Class selectors only, same rule as components.css — see
 *             _docs/design-system.md.
 * Note:       Mobile-first: the base rules apply to narrow viewports, and
 *             @media (min-width) adds rules for larger screens on top.
 *             Breakpoints: 640 / 900 / 1200.
 */

/* ============================================================
   Container
   ============================================================ */

.container {
    width: 100%;
    margin-inline: auto;
}

/* Feste Lesebreite statt der frueheren 80%-Regel: dort waren Textzeilen auf
   einem 1900px-Monitor 1520px lang, auf einem 1100px-Monitor 880px — die
   Zeilenlaenge haing also am Fenster statt an der Lesbarkeit. */
.container--page {
    max-width: var(--container-page);
}

.container--narrow {
    max-width: var(--container-narrow);
}

/* ============================================================
   Umgebungs-Banner
   ============================================================ */

/* Flush against the viewport edge, above everything else (topbar included) —
   deliberately not shaped like a normal .alert instance (see env-banner.php),
   since this one is a permanent page-wide notice, not content inside a page. */
.env-banner {
    border-radius: 0;
    border-inline: none;
    text-align: center;
}

/* ============================================================
   Shell
   ============================================================ */

.shell {
    display: flex;
}

.shell--guest {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6) var(--space-4) var(--space-10);
}

.shell--guest .container--narrow {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-4);
}

.shell--app {
    flex-direction: column;
    align-items: stretch;
    min-height: calc(100vh - var(--topbar-h));
}

.main {
    flex: 1;
    min-width: 0;
    padding: var(--space-6) var(--space-4) var(--space-16);
}

@media (min-width: 900px) {
    .shell--app {
        flex-direction: row;
    }

    .main {
        padding: var(--space-8) var(--space-8) var(--space-20);
    }
}

/* ============================================================
   Marke
   ============================================================ */

.brand {
    display: inline-flex;
    align-items: center;
    /* Der Schriftzug im Inline-SVG erbt diese Farbe ueber currentColor —
       deshalb traegt er in beiden Themes. Siehe brandLogo() in helpers.php. */
    color: var(--text-strong);
    text-decoration: none;
    flex-shrink: 0;
}

.brand:hover {
    text-decoration: none;
}

.brand__logo {
    height: 1.75rem;
    width: auto;
    display: block;
}

.brand--guest {
    align-self: center;
    margin-bottom: var(--space-1);
}

.brand--guest .brand__logo {
    height: 2.25rem;
}

.guest-controls {
    justify-content: center;
    margin-bottom: var(--space-2);
}

/* ============================================================
   Topbar
   ============================================================ */

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    min-height: var(--topbar-h);
    padding: var(--space-2) var(--space-4);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.topbar__nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
}

.topbar__label {
    color: var(--text-muted);
    font-size: var(--text-sm);
}

.topbar__account {
    display: inline-flex;
    align-items: center;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-default);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.topbar__account:hover {
    color: var(--accent-text);
    text-decoration: none;
}

/* Test-database warning, merged into the topbar itself instead of a separate
   banner row (see env-banner.php for the guest-layout equivalent, which has
   no topbar to merge into). The gradient layer keeps the topbar opaque —
   --warning-bg alone is translucent (see tokens.css), and this header is
   position: sticky, so page content would show through while scrolling. */
.topbar--env-test {
    background:
        linear-gradient(var(--warning-bg), var(--warning-bg)),
        var(--bg-surface);
    border-bottom-color: var(--warning-border);
}

.topbar__env {
    color: var(--warning-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: 0.02em;
}

@media (min-width: 900px) {
    .topbar {
        padding-inline: var(--space-6);
    }
}

/* ============================================================
   Sidebar

   Unter 900px ein einklappbares <details>-Panel, ab 900px eine feste Spalte.
   Der offene/geschlossene Zustand wird von app.js an den Breakpoint gekoppelt;
   ohne JavaScript bleibt das Panel schlicht offen — die Navigation ist dann
   wie bisher vollstaendig sichtbar, nur eben laenger.
   ============================================================ */

.sidebar {
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
}

.sidebar__summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    color: var(--text-default);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    /* list-style:none blendet den nativen Marker browseruebergreifend aus;
       die -webkit-Regel allein reicht in Firefox nicht. */
    list-style: none;
}

.sidebar__summary::-webkit-details-marker {
    display: none;
}

.sidebar__summary:hover {
    background: var(--bg-subtle);
}

.sidebar__nav {
    padding: var(--space-2) var(--space-3) var(--space-4);
}

@media (min-width: 900px) {
    .sidebar {
        position: sticky;
        top: var(--topbar-h);
        align-self: flex-start;
        width: var(--sidebar-w);
        flex-shrink: 0;
        height: calc(100vh - var(--topbar-h));
        overflow-y: auto;
        border-bottom: none;
        border-right: 1px solid var(--border-subtle);
    }

    .sidebar__summary {
        display: none;
    }

    .sidebar__nav {
        padding: var(--space-5) var(--space-3);
    }
}

.sidebar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sidebar__link,
.sidebar__group-summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-default);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: background var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
}

.sidebar__link:hover,
.sidebar__group-summary:hover {
    background: var(--bg-subtle);
    color: var(--text-strong);
    text-decoration: none;
}

/* Aktiver Eintrag: Akzentkante links statt vollflaechiger Pille — ruhiger und
   auch dann eindeutig, wenn mehrere Eintraege untereinanderstehen. */
.sidebar__link.is-active {
    background: var(--accent-subtle);
    color: var(--accent-text);
    font-weight: var(--weight-semibold);
}

.sidebar__link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1.25rem;
    border-radius: var(--radius-full);
    background: var(--accent);
}

.sidebar__link.is-active .sidebar__icon {
    color: var(--accent-text);
}

.sidebar__group-summary {
    cursor: pointer;
    color: var(--text-muted);
    font-weight: var(--weight-semibold);
    list-style: none;
}

.sidebar__group-summary::-webkit-details-marker {
    display: none;
}

.sidebar__icon,
.sidebar__chevron {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--text-subtle);
}

.sidebar__chevron {
    transition: transform var(--duration-fast) var(--ease-out);
}

.sidebar__group[open] > .sidebar__group-summary .sidebar__chevron {
    transform: rotate(90deg);
}

.sidebar__label {
    flex: 1;
    min-width: 0;
}

.sidebar__group > .sidebar__list {
    margin: 2px 0 var(--space-2) var(--space-5);
    padding-left: var(--space-3);
    border-left: 1px solid var(--border-subtle);
}