/* Infinity.AppShell — canonical application-shell styles.
   Global (not scoped) because the shell styles MudBlazor components (the temporary drawer) and a child
   navigation component; a scoped stylesheet cannot reach either. All classes are "infinity-" prefixed to avoid
   collisions, and every color/spacing value comes from Infinity.UI design tokens (--air-*) — never hard-coded.
   Consumed via <link href="_content/Infinity.AppShell/infinity-appshell.css" rel="stylesheet" />. */

.infinity-app-shell,
.infinity-sidebar-shell,
.infinity-nav-link,
.infinity-nav-heading,
.infinity-brand-name {
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* ── Frame ─────────────────────────────────────────────────────────────────── */
.infinity-app-shell {
    min-height: 100dvh;
    background: var(--air-bg);
}

.infinity-desktop-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--air-sidebar-w, 300px);
    height: 100dvh;
    z-index: 20;
    /* Optional product surface tokens: a sidebar tone distinct from the canvas and a hairline edge. Both fall
       back to the canvas / no edge, so a consumer that sets neither renders exactly as before. */
    background: var(--air-sidebar-bg, var(--air-bg));
    border-right: 1px solid var(--air-sidebar-border, transparent);
    box-sizing: border-box;
    color: var(--air-text);
    overflow: hidden;
}

.infinity-main {
    margin-left: var(--air-sidebar-w, 300px);
    background: var(--air-bg);
    min-height: 100dvh;
    overflow-x: hidden;
}

.infinity-main-immersive {
    margin-left: 0;
}

/* ── Sidebar surface ───────────────────────────────────────────────────────── */
.infinity-sidebar-drawer,
.infinity-sidebar-shell {
    background: var(--air-sidebar-bg, var(--air-bg)) !important;
    color: var(--air-text);
}

.infinity-sidebar-drawer {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
}

.infinity-sidebar-shell {
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.infinity-sidebar-header {
    /* The header holds the brand and the navigation tree. It may shrink (the navigation then scrolls inside it)
       so a long product menu on a short viewport never pushes the account region out of the sidebar. */
    flex: 0 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 12px 8px;
}

.infinity-brand {
    margin: 0 0 12px 4px;
    flex-shrink: 0;
}

.infinity-brand-name {
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: -0.02em;
    color: var(--air-text);
}

.infinity-sidebar-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 8px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--air-border-strong) transparent;
    -webkit-overflow-scrolling: touch;
}

    .infinity-sidebar-scroll::-webkit-scrollbar {
        width: 4px;
    }

    .infinity-sidebar-scroll::-webkit-scrollbar-track {
        background: transparent;
    }

    .infinity-sidebar-scroll::-webkit-scrollbar-thumb {
        background: var(--air-border-strong);
        border-radius: 4px;
    }

.infinity-sidebar-footer {
    flex-shrink: 0;
}

/* ── Navigation ────────────────────────────────────────────────────────────── */
.infinity-nav {
    display: block;
    /* Scrolls inside the (shrinkable) sidebar header when the menu is taller than the viewport allows. */
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--air-border-strong) transparent;
}

.infinity-nav-group {
    display: block;
    margin-bottom: 2px;
}

.infinity-nav-heading {
    display: block;
    padding: var(--air-nav-heading-padding, 18px 12px 8px);
    font-size: var(--air-nav-heading-size, 11px);
    font-weight: var(--air-nav-heading-weight, 500);
    line-height: 1.25;
    color: var(--air-sidebar-section, var(--air-text-subtle));
    letter-spacing: var(--air-nav-heading-tracking, 0.1em);
    text-transform: uppercase;
}

.infinity-nav-parent {
    display: block;
}

.infinity-nav-link {
    display: flex;
    align-items: center;
    gap: var(--air-nav-item-gap, 10px);
    width: 100%;
    min-height: var(--air-nav-item-height, 38px);
    padding: var(--air-nav-item-padding, 8px 12px);
    margin-bottom: 2px;
    border: none;
    border-radius: var(--air-nav-item-radius, 8px);
    background: transparent;
    /* Resting items use the calm secondary tone; hover and the active item carry the emphasis. */
    color: var(--air-sidebar-secondary, var(--air-text-muted));
    text-decoration: none;
    text-align: left;
    font-size: var(--air-nav-item-size, 14px);
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background .15s ease;
}

    .infinity-nav-link:hover {
        background: var(--air-sidebar-hover-bg, var(--air-hover));
        color: var(--air-text);
        text-decoration: none;
    }

.infinity-nav-link-active {
    background: var(--air-sidebar-active-bg);
    color: var(--air-sidebar-active-text);
    font-weight: var(--air-nav-active-weight, 500);
}

/* The parent of the active destination: CONTEXT, not a second active item — full-strength text only, no fill. */
.infinity-nav-link-context {
    color: var(--air-text);
}

.infinity-nav-toggle {
    justify-content: flex-start;
}

.infinity-nav-children {
    display: block;
}

.infinity-nav-icon,
.infinity-nav-link .air-icon {
    width: var(--air-nav-icon-size, 18px) !important;
    height: var(--air-nav-icon-size, 18px) !important;
    min-width: var(--air-nav-icon-size, 18px) !important;
    color: inherit;
    flex-shrink: 0;
    stroke-width: 1.75;
}

.infinity-nav-link .mud-icon-root {
    font-size: 18px;
    color: inherit;
}

/* Declared after the generic icon rules so the accent identity wins on active links (including the
   expandable parent toggle, which carries the same active class). */
.infinity-nav-link-active .infinity-nav-icon,
.infinity-nav-link-active .air-icon,
.infinity-nav-link-active .mud-icon-root {
    color: var(--air-sidebar-active-icon);
}

.infinity-nav-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.infinity-nav-chevron {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--air-text-muted);
}

.infinity-nav-badge {
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--air-hover);
    color: var(--air-text-muted);
}

    .infinity-nav-badge[data-tone="warning"] {
        background: var(--air-warning-surface, var(--air-hover));
        color: var(--air-warning-text, var(--air-text));
    }

    .infinity-nav-badge[data-tone="danger"] {
        background: var(--air-danger-surface, var(--air-hover));
        color: var(--air-danger-text, var(--air-text));
    }

/* ── Buttons / mobile top bar ──────────────────────────────────────────────── */
.infinity-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--air-text);
    cursor: pointer;
    padding: 0;
    transition: background .15s ease;
}

    .infinity-icon-button:hover {
        background: var(--air-hover);
    }

    .infinity-icon-button .air-icon {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        stroke-width: 2;
    }

/* ── Desktop global top bar (opt-in via Options.ShowDesktopTopBar) ─────────── */
.infinity-desktop-topbar {
    display: none;
}

.infinity-topbar-side {
    flex: 1 1 0;
    min-width: 0;
}

.infinity-topbar-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 0 1 344px;
    min-width: 280px;
    /* Optional centring offset: a negative value moves the pill (and the actions after it) toward the start. The
       two sides share the free space equally, so an offset of minus the sidebar width centres the pill on the
       viewport instead of the content area. Defaults to 0 (centred on the top bar, as before). */
    margin-left: var(--air-topbar-search-offset, 0px);
    height: 38px;
    padding: 0 8px 0 14px;
    border-radius: 999px;
    /* A recessed field: between the canvas and the raised panel surface. */
    background: color-mix(in srgb, var(--air-surface) 60%, var(--air-bg));
    border: 1px solid var(--air-border-strong);
    color: var(--air-text-muted);
    cursor: text;
}

    .infinity-topbar-search-icon {
        flex-shrink: 0;
        color: var(--air-text-muted);
    }

.infinity-topbar-search-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--air-text-muted);
}

.infinity-topbar-search-kbd {
    flex-shrink: 0;
    font-size: 11px;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 5px;
    background: transparent;
    border: 1px solid var(--air-border);
    color: var(--air-text-muted);
    white-space: nowrap;
}

.infinity-topbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
}

.infinity-mobile-topbar {
    display: none;
    position: fixed;
    inset: 0 0 auto 0;
    height: 56px;
    z-index: 30;
    background: var(--air-bg);
    color: var(--air-text);
    border-bottom: 1px solid var(--air-border);
    align-items: center;
    gap: 8px;
    padding: 0 12px;
}

.infinity-mobile-logo {
    font-weight: 700;
    font-size: 1.125rem;
    white-space: nowrap;
    color: var(--air-text);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (min-width: 960px) {
    .infinity-app-shell-has-topbar .infinity-desktop-topbar {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        left: var(--air-sidebar-w, 300px);
        height: var(--air-topbar-height, 76px);
        z-index: 19;
        background: var(--air-topbar-bg, var(--air-bg));
        border-bottom: 1px solid var(--air-topbar-border, transparent);
        box-sizing: border-box;
        align-items: center;
        gap: 16px;
        padding: 0 26px;
    }

    .infinity-app-shell-has-topbar .infinity-main {
        padding-top: var(--air-topbar-height, 76px);
    }

    /* When the desktop global top bar is shown, the sidebar brand row shares its optical centre:
       the row is exactly the top-bar height and vertically centres its content, so the brand, the
       centred search region and the top-bar action cluster sit on one baseline. Scoped to the
       top-bar state, so the no-top-bar layout — and the mobile drawer below 960px — is unchanged. */
    .infinity-app-shell-has-topbar .infinity-sidebar-header {
        padding-top: 0;
    }

    .infinity-app-shell-has-topbar .infinity-brand {
        display: flex;
        align-items: center;
        min-height: var(--air-topbar-height, 76px);
        margin: 0 0 0 4px;
    }
}

@media (max-width: 959.98px) {
    .infinity-desktop-sidebar {
        display: none;
    }

    .infinity-mobile-topbar {
        display: flex;
        height: calc(56px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
    }

    .infinity-main {
        margin-left: 0;
        padding-top: calc(56px + env(safe-area-inset-top));
        width: 100%;
        min-height: 100dvh;
    }

    .infinity-sidebar-drawer {
        width: min(300px, 86vw) !important;
    }

    .infinity-sidebar-header {
        padding-top: calc(14px + env(safe-area-inset-top));
    }
}