/*
 * App shell + navigation (WP9; UI-Design-Principles Sec. 5). Topbar (wordmark +
 * theme/lang/profile), a collapsible sidebar (off-canvas below md, Sec. 5.2), and
 * the content area (max 1200px). Active nav entry: Ember marker on the left
 * (Sec. 5.1). One shell for portal and management; density via data-density.
 *
 * Class schema: gtx-shell, gtx-topbar, gtx-topbar__brand, gtx-brand__dot,
 * gtx-topbar__spacer, gtx-topbar__actions, gtx-shell__body, gtx-sidebar,
 * gtx-sidebar__section, gtx-nav, gtx-nav__link, gtx-nav__link.is-active,
 * gtx-nav__icon, gtx-shell__main, gtx-shell__content, gtx-shell__scrim,
 * gtx-iconbtn.
 */

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

/* --- Topbar --- */
.gtx-topbar {
    position: sticky;
    top: 0;
    z-index: var(--gtx-z-sticky);
    display: flex;
    align-items: center;
    gap: var(--gtx-s3);
    height: 56px;
    padding: 0 var(--gtx-s4);
    background: var(--gtx-surface);
    border-bottom: 1px solid var(--gtx-line);
}

.gtx-topbar__brand {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--gtx-font-display);
    font-weight: 700;
    font-size: var(--gtx-fs-h3);
    color: var(--gtx-text);
    text-decoration: none;
}

.gtx-topbar__brand:hover {
    text-decoration: none;
}

/* Ember dot of the wordmark (D-0009 (5)). */
.gtx-brand__dot {
    color: var(--gtx-ember);
}

.gtx-topbar__spacer {
    flex: 1 1 auto;
}

.gtx-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--gtx-s1);
}

/* Icon button used in the topbar (theme/lang/menu). */
.gtx-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gtx-s1);
    min-width: 40px;
    height: 40px;
    padding: 0 var(--gtx-s2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--gtx-r-s);
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-ui);
    cursor: pointer;
    text-decoration: none;
}

.gtx-iconbtn:hover {
    color: var(--gtx-text);
    background: var(--gtx-surface-2);
    text-decoration: none;
}

.gtx-iconbtn svg {
    width: 20px;
    height: 20px;
}

/* The hamburger only shows below md (sidebar becomes off-canvas). */
.gtx-topbar__menu {
    display: none;
}

/* --- Body: sidebar + main --- */
.gtx-shell__body {
    flex: 1 1 auto;
    display: flex;
    align-items: stretch;
    min-height: 0;
}

.gtx-sidebar {
    flex: 0 0 240px;
    width: 240px;
    background: var(--gtx-surface);
    border-right: 1px solid var(--gtx-line);
    padding: var(--gtx-s4) var(--gtx-s2);
    overflow-y: auto;
}

.gtx-sidebar__heading {
    padding: var(--gtx-s3) var(--gtx-s3) var(--gtx-s1);
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-meta);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

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

.gtx-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gtx-s2);
    padding: var(--gtx-s2) var(--gtx-s3);
    border-radius: var(--gtx-r-s);
    color: var(--gtx-text-dim);
    font-size: var(--gtx-fs-ui);
    font-weight: 500;
    text-decoration: none;
}

.gtx-nav__link:hover {
    color: var(--gtx-text);
    background: var(--gtx-surface-2);
    text-decoration: none;
}

.gtx-nav__icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* Active entry: Ember marker on the left (Sec. 5.1). */
.gtx-nav__link.is-active {
    color: var(--gtx-text);
    background: var(--gtx-surface-2);
}

.gtx-nav__link.is-active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 2px 2px 0;
    background: var(--gtx-ember);
}

.gtx-shell__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.gtx-shell__content {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--gtx-s5) var(--gtx-s5) var(--gtx-s8);
}

/* Full-bleed content (wide management tables) opts out of the max width. */
.gtx-shell__content--wide {
    max-width: none;
}

/* Scrim behind the off-canvas sidebar (mobile). */
.gtx-shell__scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--gtx-z-dropdown);
    background: rgba(0, 0, 0, 0.5);
}

/* --- Responsive: sidebar off-canvas below md (Sec. 5.2) --- */
@media (max-width: 899px) {
    .gtx-topbar__menu {
        display: inline-flex;
    }

    .gtx-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: var(--gtx-z-modal);
        transform: translateX(-100%);
        transition: transform var(--gtx-t-med) var(--gtx-ease);
        box-shadow: var(--gtx-shadow-overlay);
    }

    .gtx-shell[data-sidebar="open"] .gtx-sidebar {
        transform: translateX(0);
    }

    .gtx-shell[data-sidebar="open"] .gtx-shell__scrim {
        display: block;
    }
}