/* Structural layout: the app shell (sidebar · optional panel · main · rail),
   containers, stacks/grids, topbar (mobile), footer. Component styling lives in
   components/; this file only positions things.

   Desktop (≥ 800px):
   ┌──────────┬────────────┬──────────────────────────┬────┐
   │ sidebar  │ panel      │ main                     │rail│
   │ (nav)    │ (optional) │                          │    │
   └──────────┴────────────┴──────────────────────────┴────┘
   Mobile: sidebar becomes an off-canvas drawer, the panel stacks above the
   content, the rail becomes a bottom bar. */
.app-shell {
    display: grid;
    grid-template-columns: var(--app-sidebar-width) auto minmax(0, 1fr) var(--app-rail-width);
    grid-template-areas: "sidebar panel main rail";
    min-height: 100vh;
}

.is-sidebar-collapsed .app-shell {
    grid-template-columns: var(--app-sidebar-collapsed) auto minmax(0, 1fr) var(--app-rail-width);
}

/* Sidebar --------------------------------------------------------------- */
.app-sidebar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    height: 100vh;
    flex-direction: column;
    grid-area: sidebar;
    overflow: hidden auto;
    border-right: 1px solid var(--app-border);
    background: rgba(12, 9, 7, 0.92);
}

.app-sidebar__brand {
    display: flex;
    min-height: var(--app-topbar-height);
    align-items: center;
    padding: 0 var(--app-space-4);
    border-bottom: 1px solid var(--app-border);
}

.app-sidebar__nav {
    flex: 1;
    padding: var(--app-space-3) var(--app-space-2);
}

.app-sidebar__section {
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-sidebar__section + .app-sidebar__section {
    margin-top: var(--app-space-4);
    padding-top: var(--app-space-4);
    border-top: 1px solid var(--app-border);
}

.app-sidebar__heading {
    padding: 0 var(--app-space-3);
    margin-bottom: var(--app-space-2);
    color: var(--app-faint);
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.app-sidebar__footer {
    padding: var(--app-space-2);
    border-top: 1px solid var(--app-border);
}

/* Collapsed state: icons only, labels hidden, brand shows only the mark. */
.is-sidebar-collapsed .app-sidebar__label,
.is-sidebar-collapsed .app-sidebar__heading,
.is-sidebar-collapsed .app-brand__text {
    display: none;
}

.is-sidebar-collapsed .app-sidebar__brand {
    justify-content: center;
    padding: 0;
}

.is-sidebar-collapsed .app-nav-link {
    justify-content: center;
    padding-inline: 0;
}

.is-sidebar-collapsed .app-sidebar__collapse .app-icon {
    transform: rotate(180deg);
}

/* Secondary panel (context tree, filters) – rendered only when a page fills it. */
.app-panel {
    position: sticky;
    top: 0;
    display: flex;
    width: var(--app-panel-width);
    height: 100vh;
    flex-direction: column;
    grid-area: panel;
    overflow: hidden auto;
    border-right: 1px solid var(--app-border);
    background: rgba(18, 13, 10, 0.9);
}

.app-panel__header {
    display: flex;
    min-height: var(--app-topbar-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-2);
    padding: 0 var(--app-space-4);
    border-bottom: 1px solid var(--app-border);
    font-weight: 500;
}

.app-panel__body {
    flex: 1;
    padding: var(--app-space-3) var(--app-space-2);
}

.app-panel__footer {
    padding: var(--app-space-3);
    border-top: 1px solid var(--app-border);
}

/* Main column ----------------------------------------------------------- */
.app-main-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    grid-area: main;
}

.app-main {
    flex: 1;
    padding-block: var(--app-space-6) var(--app-space-7);
}

.app-container {
    width: min(100% - 3rem, var(--app-container));
    margin-inline: auto;
}

.app-container--narrow {
    width: min(100% - 3rem, 44rem);
}

.app-container--wide {
    width: min(100% - 3rem, 1400px);
}

/* Topbar: only on mobile, holds the drawer toggle and the brand. */
.app-topbar {
    display: none;
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: var(--app-topbar-height);
    align-items: center;
    gap: var(--app-space-3);
    padding: 0 var(--app-space-3);
    border-bottom: 1px solid var(--app-border);
    background: rgba(12, 9, 7, 0.92);
    backdrop-filter: blur(14px);
}

/* Rail: session actions on the right edge. */
.app-rail {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    height: 100vh;
    flex-direction: column;
    align-items: center;
    grid-area: rail;
    padding: var(--app-space-2) 0;
    border-left: 1px solid var(--app-border);
    background: rgba(12, 9, 7, 0.92);
}

.app-rail__group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--app-space-2);
}

.app-rail__group--bottom {
    margin-top: auto;
}

.app-rail__divider {
    width: 1.5rem;
    height: 1px;
    margin: var(--app-space-2) 0;
    background: var(--app-border-strong);
}

/* Drawer backdrop (mobile). */
.app-backdrop {
    position: fixed;
    inset: 0;
    z-index: 55;
    display: none;
    background: rgba(0, 0, 0, 0.55);
}

.app-shell.is-drawer-open .app-backdrop {
    display: block;
}

/* Helpers --------------------------------------------------------------- */
.app-stack {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-4);
}

.app-stack--tight {
    gap: var(--app-space-2);
}

.app-stack--loose {
    gap: var(--app-space-6);
}

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

.app-cluster--between {
    justify-content: space-between;
}

.app-cluster--end {
    justify-content: flex-end;
}

.app-cluster--center {
    justify-content: center;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--app-space-4);
}

.app-grid--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.app-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--app-space-5);
}

@media (min-width: 1100px) {
    .app-split {
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
    }
}

.app-centered {
    width: min(100%, 44rem);
    margin-inline: auto;
}

/* Footer ---------------------------------------------------------------- */
.app-footer {
    padding-block: var(--app-space-4);
    border-top: 1px solid var(--app-border);
    background: rgba(8, 5, 3, 0.35);
    color: var(--app-muted);
    font-size: var(--app-text-sm);
}

.app-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-3);
}

.app-footer a {
    color: var(--app-muted);
    text-decoration: none;
}

.app-footer a:hover {
    color: var(--app-text-strong);
}

.app-version-badge {
    color: var(--app-faint);
    font-family: var(--app-font-mono);
    font-size: var(--app-text-xs);
    letter-spacing: 0.04em;
}

/* Mobile ---------------------------------------------------------------- */
@media (max-width: 799.98px) {
    .app-shell,
    .is-sidebar-collapsed .app-shell {
        display: flex;
        flex-direction: column;
        padding-bottom: var(--app-rail-width);
    }

    .app-topbar {
        display: flex;
    }

    .app-main-column {
        flex: 1;
    }

    .app-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 70;
        width: min(80vw, var(--app-sidebar-width));
        transform: translateX(-100%);
        transition: transform var(--app-transition);
        background: var(--app-bg-soft);
        box-shadow: var(--app-shadow-lg);
    }

    .app-shell.is-drawer-open .app-sidebar {
        transform: translateX(0);
    }

    /* The collapsed state is a desktop concept: the drawer always shows labels. */
    .is-sidebar-collapsed .app-sidebar__label,
    .is-sidebar-collapsed .app-sidebar__heading,
    .is-sidebar-collapsed .app-brand__text {
        display: initial;
    }

    .is-sidebar-collapsed .app-nav-link {
        justify-content: flex-start;
        padding-inline: 0.8rem;
    }

    .app-sidebar__footer {
        display: none;
    }

    .app-panel {
        position: static;
        width: auto;
        height: auto;
        max-height: 50vh;
        border-right: none;
        border-bottom: 1px solid var(--app-border);
    }

    .app-rail {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        height: var(--app-rail-width);
        flex-direction: row;
        justify-content: space-between;
        padding: 0 var(--app-space-3);
        border-left: none;
        border-top: 1px solid var(--app-border);
    }

    .app-rail__group,
    .app-rail__group--bottom {
        flex-direction: row;
        margin-top: 0;
    }

    .app-rail__divider {
        width: 1px;
        height: 1.5rem;
        margin: 0 var(--app-space-2);
    }

    .app-container,
    .app-container--narrow,
    .app-container--wide {
        width: min(100% - 1.5rem, var(--app-container));
    }

    .app-main {
        padding-block: var(--app-space-4) var(--app-space-6);
    }
}