/* =========================================================================
   Settings hub — HubSpot-style dual-sidebar settings experience.

   Layout: the main app sidebar (unchanged) sits to the left of .global-app-content.
   Inside .global-app-content we render a SECOND sidebar (.settings-hub-nav) flush
   against a content pane (.settings-hub-content). We zero .global-app-content's
   default gutter only on pages that contain .settings-hub — same :has() trick
   milestones.css uses for full-bleed tables — so the secondary sidebar can run
   flush and full-height like HubSpot's.
   ========================================================================= */

.global-app-main:has(.settings-hub) .global-app-content {
    padding: 0;
    display: flex;
    min-height: 0;
}

.settings-hub {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.settings-hub-nav {
    flex: 0 0 240px;
    width: 240px;
    /* Stretch to the content's full height so the border-right and card
       background read as one continuous full-height rail (HubSpot style). The
       nav LIST inside — not this aside — carries the sticky pin: a stretched
       flex item resolves to the container's (scroll) height, which leaves it
       no room to stick, so pinning it here made the whole rail scroll away and
       took Profile off-screen. Chrome here, pin on the list below. */
    align-self: stretch;
    box-sizing: border-box;
    padding: var(--spacing-mdlg) var(--spacing-smd) var(--spacing-xl);
    border-right: 1px solid var(--color-border);
    background: var(--color-card-bg);
    /* Fill the viewport height even when the page's content is short, so the
       rail never stops mid-screen. */
    min-height: calc(100vh - var(--drawer-top));
}

.settings-hub-nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2xs);
    /* Pin flush under the sticky .global-app-header (top: safe-top + header height) so
       every item stays in view as the page scrolls. Capped to the space below
       the header and scrollable only if a short viewport can't fit all items;
       the scrollbar is hidden to match the rest of the hub chrome. */
    position: sticky;
    top: var(--drawer-top);
    max-height: calc(100vh - var(--drawer-top));
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    overscroll-behavior: contain;
}

.settings-hub-nav-list::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

.settings-hub-nav-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-smd);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-smd);
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--bs-body-color);
    font-size: var(--font-size-md);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.settings-hub-nav-item:hover {
    background: color-mix(in srgb, var(--color-action) 8%, transparent);
    color: var(--color-action);
}

.settings-hub-nav-item[aria-current="page"] {
    background: color-mix(in srgb, var(--color-action) 12%, transparent);
    color: var(--color-action);
    font-weight: var(--font-weight-medium);
}

.settings-hub-nav-item i {
    font-size: var(--font-size-base);
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.85;
}

.settings-hub-content {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--spacing-lg);
    /* clip, NOT hidden — the same trap main.css calls out on .global-app-main. `hidden`
       on one axis computes the other to `auto`, so this pane became a scroll
       container and started clipping vertically too. It is only as tall as its
       content, so on a page whose content had not arrived yet that cut the
       page-ready sheet off at 318px and hid the loading mark at y=482
       completely. `clip` still contains a wide table without ever clipping the
       vertical axis. */
    overflow-x: clip;
}

.core-settings-hub-content-inner {
    max-width: 1120px;
    margin: 0 auto;
    width: 100%;
}

/* The header-clearing offset (start the drawer at the header's bottom edge so a
   full-height offcanvas can't hide its own title behind the sticky header) now
   lives on the shared .global-drawer-offcanvas skin in components/drawer.css, which
   every settings offcanvas here also carries. Nothing settings-specific left. */

/* Wide pages (notifications, permissions, integrations, automations, pipelines)
   opt out of the 1120px reading cap: their rows, tables, and side-by-side cards
   want the room. Other settings keep the narrower cap so forms don't stretch. */
.settings-hub-content-inner--wide {
    max-width: 1440px;
}

/* A .global-tabs strip in the hub column has ~265px less width than a full-width
   page (the 240px second sidebar + its border + gutter), so the shared
   component's flex-wrap:wrap breaks the tab row onto two lines here. Keep the
   strip on one row and let it scroll if it ever runs long. Scoped to the hub
   column so the shared page-tabs component stays ancestor-agnostic. The few
   short strips that land here (worker self-view, properties, templates,
   referrals) fit without a scrollbar; the scrollbar-hiding matches
   .settings-hub-nav above. */
.core-settings-hub-content-inner .global-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.core-settings-hub-content-inner .global-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

@media (max-width: 768px) {
    .settings-hub {
        flex-direction: column;
    }
    .settings-hub-nav {
        flex-basis: auto;
        width: 100%;
        min-height: 0;
        max-height: none;
        position: static;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }
    /* One row that scrolls sideways, so the page starts near the top
       instead of under a wall of wrapped chips. */
    .settings-hub-nav-list {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: var(--spacing-xs);
        position: static;
        max-height: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }
    .settings-hub-nav-list::-webkit-scrollbar {
        display: none;
    }
    .settings-hub-nav-item {
        width: auto;
        flex-shrink: 0;
        white-space: nowrap;
    }
    /* Stacked layout: the pane must fill the column so its cards clamp to the
       phone width. Without this it sizes to its own widest content, so that
       content never scrolls inside its card and the whole page pans. */
    .settings-hub-content {
        align-self: stretch;
        /* The hub zeroes .global-app-content's padding above, which also
           drops the room main.css leaves for the phone's bottom bar. Put
           it back here so the last card never sits under the bar. */
        padding-bottom: calc(var(--bottom-bar-h) + var(--spacing-lg));
    }
}