/* ==========================================================================
   layout.css — Application shell: header, sidebar, content area.

   Mobile-first. The sidebar is an off-canvas drawer by default and becomes a
   fixed column from 900px up, where there is room for it to stay open.
   ========================================================================== */

.app {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Header --- */
.header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    height: var(--header-h);
    padding: 0 var(--sp-3);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.header__hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.header__hamburger:hover {
    background: var(--surface-hover);
}

.header__brand {
    display: flex;
    align-items: center;
    height: 30px;
}

.header__brand svg {
    height: 30px;
    width: auto;
}

.header__spacer {
    flex: 1;
}

.header__user {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.header__identity {
    display: none;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.header__username {
    font-size: var(--fs-sm);
    font-weight: 600;
}

.header__role {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* --- Body: sidebar + content --- */
.body {
    display: flex;
    flex: 1;
    min-height: 0;
}

/* Applied while the panel detail is open: it lets the chart claim whatever
   vertical space is left between the tables and the bottom of the page. */
.content--fill {
    display: flex;
    flex-direction: column;
}

/* The panel detail is meant to be read at a glance: reading tables, chart and
   summary all on screen at once. So the shell stops growing with its content
   and the chart absorbs whatever height is left over.

   Only from 1000px up. Below that the tables drop to two columns and then to
   one, and forcing that into a single screen would leave the chart a sliver;
   there the page scrolls as usual. */
@media (min-width: 1000px) {
    body.is-fill,
    body.is-fill .app {
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    body.is-fill .content {
        min-height: 0;
        overflow: hidden;
    }

    /* The 260px floor is what pushed the summary off screen: inside the lock
       the chart has to be free to shrink. */
    body.is-fill .detail-chart {
        min-height: 0;
    }

    /* Every pixel saved between the bands goes to the chart. */
    body.is-fill .panel-detail {
        gap: var(--sp-3);
    }
}

.sidebar {
    position: fixed;
    top: var(--header-h);
    bottom: 0;
    left: 0;
    z-index: 25;
    width: var(--sidebar-w);
    padding: var(--sp-4) var(--sp-3);
    overflow-y: auto;
    background: var(--surface);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform var(--transition);
}

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

.nav-section {
    margin: var(--sp-5) 0 var(--sp-2);
    padding: 0 var(--sp-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 1.2px;
    color: var(--text-faint);
    text-transform: uppercase;
}

.nav-section:first-child {
    margin-top: 0;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    width: 100%;
    padding: var(--sp-3);
    margin-bottom: var(--sp-1);
    font-size: var(--fs-base);
    font-family: inherit;
    color: var(--text-muted);
    text-align: left;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.nav-link svg {
    flex: none;
    width: 18px;
    height: 18px;
}

.nav-link:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.nav-link.is-active {
    color: var(--accent);
    background: var(--accent-dim);
    font-weight: 600;
}

.nav-link[hidden] {
    display: none;
}

/* Overlay shown behind the drawer on small screens. */
.scrim {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: var(--scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.scrim.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.content {
    flex: 1;
    min-width: 0;
    padding: var(--sp-4);
}

.view-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.view-title {
    font-size: var(--fs-lg);
}

.view-subtitle {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

/* --- Desktop --- */
@media (min-width: 900px) {
    .header {
        padding: 0 var(--sp-4);
    }

    .header__hamburger {
        display: none;
    }

    .header__identity {
        display: flex;
    }

    .sidebar {
        position: sticky;
        top: var(--header-h);
        height: calc(100vh - var(--header-h));
        transform: none;
        transition: none;
    }

    .scrim {
        display: none;
    }

    .content {
        padding: var(--sp-5) var(--sp-6);
    }
}

/* --- Login screen --- */
.auth {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--sp-4);
}

.auth__card {
    width: 100%;
    max-width: 380px;
    padding: var(--sp-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.auth__brand {
    display: flex;
    justify-content: center;
    margin-bottom: var(--sp-2);
}

.auth__brand svg {
    height: 38px;
    width: auto;
}

.auth__tagline {
    margin: 0 0 var(--sp-5);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: 1.4px;
    text-align: center;
    text-transform: uppercase;
    color: var(--text-faint);
}

.auth__footer {
    display: flex;
    justify-content: center;
    margin-top: var(--sp-4);
}