/* Signal: app shell, sidebar, topbar, page head, subnav. */
.superadmin-body {
    background: var(--sa-color-bg);
    color: var(--sa-color-text);
    font-feature-settings: "cv11", "ss01";
    -webkit-font-smoothing: antialiased;
}

.superadmin-body .superadmin-content {
    min-width: 0;
    padding: 0 clamp(1rem, 2.6vw, 2.5rem) 4rem;
    background: var(--sa-color-bg);
}

.superadmin-body .superadmin-content > * {
    width: 100%;
    max-width: 78rem;
    margin-inline: auto;
}

/* ---------- Topbar ---------- */
.superadmin-body .superadmin-content > .superadmin-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: auto;
    max-width: none;
    min-height: var(--sx-topbar-height);
    margin: 0 calc(clamp(1rem, 2.6vw, 2.5rem) * -1) 1.25rem;
    padding: 0 clamp(1rem, 2.6vw, 2.5rem);
    background: rgba(238, 241, 239, 0.82);
    border-bottom: 1px solid var(--sa-color-border);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
}

.superadmin-topbar__crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: var(--sa-color-muted);
    font-size: 0.8125rem;
}

.superadmin-topbar__crumbs strong {
    overflow: hidden;
    color: var(--sa-color-text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.superadmin-topbar__tools {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.superadmin-topbar__clock {
    color: var(--sa-color-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

.superadmin-command-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.25rem;
    padding: 0 0.5rem 0 0.75rem;
    color: var(--sa-color-muted);
    background: var(--sa-color-panel);
    border: 1px solid var(--sa-color-border);
    border-radius: var(--sx-radius-control);
    font: inherit;
    font-size: 0.8125rem;
    cursor: pointer;
    transition:
        border-color var(--sx-dur-fast) var(--sx-ease-soft),
        box-shadow var(--sx-dur-fast) var(--sx-ease-soft);
}

.superadmin-command-trigger:hover {
    border-color: var(--sa-color-border-strong);
    box-shadow: var(--sx-shadow-rest);
}

.superadmin-command-trigger:focus-visible {
    outline: 2px solid var(--sa-color-focus);
    outline-offset: 2px;
}

.superadmin-command-trigger kbd,
.superadmin-command__hint kbd {
    padding: 0.125rem 0.375rem;
    color: var(--sa-color-label);
    background: var(--sa-color-panel-soft);
    border: 1px solid var(--sa-color-border);
    border-radius: 0.375rem;
    font:
        600 0.6875rem / 1.2 ui-monospace,
        SFMono-Regular,
        Menlo,
        monospace;
}

/* ---------- Page head ---------- */
.superadmin-body .superadmin-pagehead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0 0;
    border: 0;
}

.superadmin-body .superadmin-pagehead h1 {
    margin: 0;
    font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.superadmin-body .superadmin-pagehead__description {
    max-width: 44rem;
    margin: 0.5rem 0 0;
    color: var(--sa-color-muted);
    font-size: 0.9375rem;
}

/* ---------- Subnav as segmented tabs ---------- */
.superadmin-body .superadmin-subnav,
.superadmin-body .superadmin-tenant-subnav {
    display: flex;
    gap: 0.25rem;
    margin: 0 auto 1.5rem;
    padding: 0.25rem;
    overflow-x: auto;
    background: var(--sa-color-panel);
    border: 1px solid var(--sa-color-border);
    border-radius: 0.875rem;
    scrollbar-width: none;
}

.superadmin-body .superadmin-subnav a,
.superadmin-body .superadmin-tenant-subnav a {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.25rem;
    padding: 0 0.875rem;
    color: var(--sa-color-muted);
    border: 0;
    border-radius: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    transition:
        background var(--sx-dur-fast) var(--sx-ease-soft),
        color var(--sx-dur-fast) var(--sx-ease-soft);
}

.superadmin-body .superadmin-subnav a:hover,
.superadmin-body .superadmin-tenant-subnav a:hover,
.superadmin-body .superadmin-subnav a.is-current,
.superadmin-body .superadmin-tenant-subnav a.is-current {
    color: var(--sa-color-text);
    background: var(--sa-color-panel-soft);
}

/* ---------- Sidebar (desktop) ---------- */
@media (min-width: 56.3125rem) {
    .superadmin-body .superadmin-app {
        display: grid;
        grid-template-columns: var(--sx-sidebar-width) minmax(0, 1fr);
        min-height: 100vh;
    }

    .superadmin-body .superadmin-sidebar {
        position: sticky;
        top: 0;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        height: 100vh;
        padding: 1.25rem 0.875rem;
        overflow-y: auto;
        background: var(--sa-color-sidebar);
        border-right: 1px solid rgba(255, 255, 255, 0.04);
    }
}

.superadmin-body .superadmin-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.25rem 0.5rem 1rem;
    color: var(--sa-color-sidebar-active);
    text-decoration: none;
}

.superadmin-body .superadmin-brand__mark {
    display: grid;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    color: #ffffff;
    background: var(--sa-color-primary);
    border-radius: 0.75rem;
    font-size: 1.125rem;
    box-shadow: 0 6px 16px -6px rgba(195, 38, 45, 0.7);
    transition: transform var(--sx-dur) var(--sx-ease);
}

.superadmin-body .superadmin-brand:hover .superadmin-brand__mark {
    transform: rotate(-6deg) scale(1.06);
}

.superadmin-body .superadmin-brand__text strong {
    display: block;
    font-size: 1rem;
    letter-spacing: -0.01em;
}

.superadmin-body .superadmin-brand__text small {
    color: var(--sa-color-sidebar-text);
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.superadmin-body .superadmin-sidebar__env {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    color: var(--sa-color-sidebar-text);
    background: var(--sa-color-sidebar-hover);
    border-radius: 0.625rem;
    font-size: 0.75rem;
}

.superadmin-body .superadmin-sidebar__env-lamp {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--sa-color-lamp-ok);
    border-radius: 50%;
    animation: sx-pulse 2.4s var(--sx-ease-soft) infinite;
}

.superadmin-body .superadmin-sidebar__nav {
    display: grid;
    flex: 1;
    align-content: start;
    gap: 1rem;
}

.superadmin-body .superadmin-sidebar__nav-group {
    display: grid;
    gap: 0.125rem;
}

.superadmin-body .superadmin-sidebar__nav-label {
    margin: 0 0 0.25rem;
    padding: 0 0.75rem;
    color: #6f8379;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.superadmin-body .superadmin-sidebar__nav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.5rem;
    padding: 0 0.75rem;
    color: var(--sa-color-sidebar-text);
    border-radius: 0.625rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition:
        background var(--sx-dur-fast) var(--sx-ease-soft),
        color var(--sx-dur-fast) var(--sx-ease-soft),
        transform var(--sx-dur) var(--sx-ease);
}

.superadmin-body .superadmin-sidebar__nav a::before {
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: -0.875rem;
    width: 0.1875rem;
    content: "";
    background: var(--sa-color-primary);
    border-radius: 0 0.25rem 0.25rem 0;
    transform: scaleY(0);
    transition: transform var(--sx-dur) var(--sx-ease);
}

.superadmin-body .superadmin-sidebar__nav a:hover {
    color: var(--sa-color-sidebar-active);
    background: var(--sa-color-sidebar-hover);
    transform: translateX(2px);
}

.superadmin-body .superadmin-sidebar__nav a.is-active {
    color: var(--sa-color-sidebar-active);
    background: var(--sa-color-sidebar-hover);
}

.superadmin-body .superadmin-sidebar__nav a.is-active::before {
    transform: scaleY(1);
}

.superadmin-body .superadmin-sidebar__nav a .bi {
    font-size: 1.0625rem;
}

.superadmin-body .superadmin-sidebar__nav a.superadmin-sidebar__nav-action {
    margin-top: 0.25rem;
    color: #ffffff;
    border: 1px dashed rgba(255, 255, 255, 0.22);
}

.superadmin-body .superadmin-sidebar__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 0.5rem 0;
    color: var(--sa-color-sidebar-text);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 0.8125rem;
}

.superadmin-body .superadmin-sidebar__user,
.superadmin-body .superadmin-sidebar__logout {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: inherit;
    text-decoration: none;
}

.superadmin-body .superadmin-sidebar__logout:hover {
    color: var(--sa-color-sidebar-active);
}

@media (max-width: 56.25rem) {
    .superadmin-topbar__clock,
    .superadmin-command-trigger kbd {
        display: none;
    }

    .superadmin-body .superadmin-sidebar {
        background: var(--sa-color-sidebar);
    }
}

@media (max-width: 56.25rem) {
    .superadmin-body .superadmin-sidebar__nav,
    .superadmin-body .superadmin-sidebar__footer,
    .superadmin-body .superadmin-sidebar__env {
        display: none;
    }

    .superadmin-body .superadmin-sidebar.is-menu-open .superadmin-sidebar__nav {
        display: grid;
        gap: 0.75rem;
    }

    .superadmin-body .superadmin-sidebar.is-menu-open .superadmin-sidebar__footer {
        display: flex;
    }

    .superadmin-body .superadmin-sidebar.is-menu-open .superadmin-sidebar__env {
        display: flex;
    }

    .superadmin-body .superadmin-sidebar__nav a::before {
        display: none;
    }
}