/* =====================================================================
   BackOffice sidebar (single-tier, PostHog-style)
   A labelled icon+text nav hosted inside one MudDrawer, with the
   workspace switcher pinned at the top and a footer at the bottom.
   Mud keeps handling positioning, responsive collapse and the
   main-content offset.
   ===================================================================== */

.bo-sidebar-drawer .mud-drawer-content {
    padding: 0;
    /* Visible so the absolutely-positioned flyout can overhang the drawer. */
    overflow: visible;
}

/* The drawer itself must not clip the overhanging flyout either. */
.bo-sidebar-drawer.mud-drawer {
    overflow: visible;
}

/* Positioning context for the flyout overlay (anchored to this column's
   right edge via left:100%, so it stays attached regardless of the
   drawer's margin-left). */
.bo-sidebar {
    display: flex;
    height: 100%;
    min-height: 0;
    position: relative;
}

.bo-sidebar-panel {
    width: 240px;
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background-color: var(--bo-surface-muted);
}

/* --- Workspace switcher (pinned top) ------------------------------- */
.bo-workspace {
    margin: 8px 10px 6px;
}

    /* MudBlazor's own `.mud-menu { display:inline }` (loaded after this file,
       equal specificity) would otherwise win and ignore width. Chain the mud
       class to outrank it so the menu becomes a block that fills the drawer. */
    .bo-workspace.mud-menu {
        display: block;
        width: stretch;
        min-width: 0;
    }

    /* The activator wrapper is `display:contents` by default, so it can't
       constrain width. Force it block + full-width with min-width:0 so the
       name can truncate. */
    .bo-workspace .mud-menu-activator {
        display: block;
        width: 100%;
        min-width: 0;
    }

/* Compact pill activator: [avatar] [caption + name] [unfold arrow]. */
.bo-workspace-btn {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius);
    background: var(--bo-surface-solid);
    color: var(--bo-text);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

    .bo-workspace-btn:hover {
        border-color: var(--bo-border-strong);
        background: var(--bo-surface-muted);
    }

    .bo-workspace-btn:focus-visible {
        outline: none;
        border-color: var(--bo-primary);
        box-shadow: 0 0 0 2px var(--bo-primary-soft);
    }

/* Square gradient chip with the workspace initial. */
.bo-workspace-avatar {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--bo-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;
}

.bo-workspace-text {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.bo-workspace-label {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bo-text-muted);
}

/* Long workspace names truncate with an ellipsis instead of growing
   the button height or pushing the arrow onto a new row. */
.bo-workspace-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.82rem;
    font-weight: 600;
}

.bo-workspace-icon {
    flex: 0 0 auto;
    color: var(--bo-text-muted);
}

/* --- Workspace dropdown -------------------------------------------- */
.bo-workspace-popover .mud-list {
    padding: 4px;
    min-width: 220px;
}

.bo-workspace-menu-head {
    padding: 4px 8px 6px;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--bo-text-muted);
}

.bo-workspace-popover .bo-workspace-item.mud-list-item {
    border-radius: var(--bo-radius);
    padding: 6px 8px;
    gap: 9px;
    min-height: 0;
}

    .bo-workspace-item-row {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
        width: 100%;
    }

    .bo-workspace-popover .bo-workspace-item:hover {
        background-color: var(--bo-primary-soft);
    }

    .bo-workspace-popover .bo-workspace-item.active {
        background-color: var(--bo-primary-soft);
    }

        .bo-workspace-popover .bo-workspace-item.active .bo-workspace-item-name {
            color: var(--bo-primary);
            font-weight: 600;
        }

.bo-workspace-avatar-sm {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    font-size: 0.65rem;
}

.bo-workspace-item-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.82rem;
}

.bo-workspace-item-check {
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--bo-primary);
}

/* --- Search / command palette trigger ------------------------------ */
.bo-search {
    margin: 0 10px 10px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    width: calc(100% - 20px);
    border: 1px solid var(--bo-border);
    border-radius: var(--bo-radius);
    background: transparent;
    color: var(--bo-text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.12s ease;
}

    .bo-search:hover {
        border-color: var(--bo-border-strong);
    }

    .bo-search .bo-kbd {
        margin-left: auto;
        border: 1px solid var(--bo-border);
        border-radius: 4px;
        padding: 1px 6px;
        font-size: 0.7rem;
        line-height: 1.4;
    }

/* --- Nav (icon + text) --------------------------------------------- */
.bo-nav {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

/* Multi-item section row: styled to match a MudNavLink, opens the flyout. */
.bo-nav-section {
    width: calc(100% - 16px);
    margin: 2px 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border: none;
    background: transparent;
    border-radius: var(--bo-radius);
    cursor: pointer;
    color: var(--bo-text);
    font-size: 0.875rem;
    text-align: left;
    transition: background-color 0.12s ease, color 0.12s ease;
}

    .bo-nav-section:hover {
        background-color: var(--bo-primary-soft);
    }

    .bo-nav-section.active {
        background-color: var(--bo-primary-soft);
        color: var(--bo-primary);
        font-weight: 500;
    }

    .bo-nav-section .bo-nav-section-label {
        flex: 1;
    }

    .bo-nav-section .bo-nav-section-chevron {
        font-size: 1rem;
        opacity: 0.6;
    }

/* =====================================================================
   Secondary flyout — the second tier shown beside (and attached to) the
   primary column when a multi-item section is selected. It lives inside
   the drawer, so it stays glued to the primary column and inherits the
   drawer's responsive/hamburger behaviour.
   ===================================================================== */
.bo-flyout-col {
    position: absolute;
    left: 100%;
    top: 0;
    bottom: 0;
    width: 240px;
    z-index: 10;
    overflow-y: auto;
    /* Same surface as the primary column so the two read as one menu. */
    background-color: var(--bo-surface-muted);
    box-shadow: 24px 0 24px rgba(0, 0, 0, 0.16);
    border-left: 1px solid var(--bo-border);
}

/* Transparent click-catcher: sits above page content but below the drawer
   (and its flyout child), so clicking anywhere outside dismisses the flyout. */
.bo-flyout-scrim {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: transparent;
}

.bo-flyout-inner {
    padding: 12px 0;
}

.bo-flyout-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bo-text-muted);
    padding: 6px 16px 8px;
}

.bo-panel-footer {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border-top: 1px solid var(--bo-border);
}

/* Normalise all footer action icons (notifications, theme, logout) to one
   consistent, compact, aligned, tinted style regardless of the MudIconButton
   Size each one was declared with. */
.bo-panel-footer .mud-icon-button {
    width: 30px;
    height: 30px;
    padding: 6px;
    color: var(--bo-text-muted);
    transition: color 0.15s ease, background-color 0.15s ease;
}

.bo-panel-footer .mud-icon-button:hover {
    color: var(--bo-primary);
    background-color: var(--bo-primary-soft);
}

.bo-panel-footer .mud-icon-button .mud-icon-root {
    font-size: 1.125rem;
}

/* Keep the badge-wrapped notifications button vertically aligned with the
   plain icon buttons. */
.bo-panel-footer .mud-badge-root {
    display: inline-flex;
    align-items: center;
}

.bo-version {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--bo-text-muted);
}

/* =====================================================================
   Shell — the old MudAppBar + static brand header are gone (Phase 2).
   The static header now lives only in _StaticLayout (login/account
   Razor Pages); the authenticated Blazor app renders headerless, so the
   sidebar runs full-height. This defensively zeroes any residual
   main-content top offset.
   ===================================================================== */
.mud-layout-custom .mud-main-content {
    padding-top: 0;
}

/* =====================================================================
   Breadcrumb strip — the slim top bar that replaces the old MudAppBar,
   sitting above the page content.
   ===================================================================== */
.bo-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 0.8rem;
    color: var(--bo-text-muted);
    border-bottom: 1px solid var(--bo-border);
    background-color: var(--bo-surface-solid);
    margin-bottom: 15px;
}

    /* Hamburger only appears once the drawer collapses (below Md). */
    .bo-breadcrumb .bo-hamburger {
        display: none;
    }

    /* The crumb trail shrinks and truncates so a long path never pushes the
       hamburger or AI toggle off-screen (mostly an issue on narrow screens). */
    .bo-breadcrumb .bo-crumb-trail {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

        .bo-breadcrumb .bo-crumb-trail::-webkit-scrollbar {
            display: none;
        }

    .bo-breadcrumb .bo-crumb-home {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
    }

    .bo-breadcrumb .bo-crumb-sep {
        flex: 0 0 auto;
    }

    /* Labels stay on one line; the current page label takes the slack and
       truncates with an ellipsis rather than wrapping or overflowing. */
    .bo-breadcrumb .bo-crumb {
        white-space: nowrap;
    }

    .bo-breadcrumb .bo-crumb-current {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

        .bo-breadcrumb .bo-crumb-home .mud-icon-root {
            font-size: 1rem;
        }

    /* Clickable crumbs (every level except the current page). */
    .bo-breadcrumb .bo-crumb-link {
        color: var(--bo-text-muted);
        text-decoration: none;
        cursor: pointer;
    }

        .bo-breadcrumb .bo-crumb-link:hover {
            color: var(--bo-text);
            text-decoration: underline;
        }

@media (max-width: 959.98px) {
    .bo-breadcrumb .bo-hamburger {
        display: inline-flex;
    }
}

    .bo-breadcrumb .bo-crumb-sep {
        opacity: 0.5;
    }

    .bo-breadcrumb .bo-crumb-current {
        color: var(--bo-text);
        font-weight: 500;
    }

    /* Context-window toggle — pushed to the far right of the strip. */
    .bo-breadcrumb .bo-context-toggle {
        margin-left: auto;
        color: var(--bo-text-muted);
    }

        .bo-breadcrumb .bo-context-toggle:hover {
            color: var(--bo-primary);
            background-color: var(--bo-primary-soft);
        }

        .bo-breadcrumb .bo-context-toggle.active {
            color: var(--bo-primary);
            background-color: var(--bo-primary-soft);
        }

/* =====================================================================
   Context window — a reusable right-docked panel (PostHog-style). It
   slides in from the right; on desktop the main content is pushed left,
   on mobile it overlays full-width with a dismiss scrim. The active
   panel's content (AI chat for now) is swapped by the host component.
   ===================================================================== */
.bo-context-window {
    --bo-context-width: 410px;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--bo-context-width);
    max-width: 100vw;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    background-color: var(--bo-surface-solid);
    border-left: 1px solid var(--bo-border);
    transform: translateX(100%);
    transition: transform 0.22s ease;
}

    .bo-context-window.open {
        transform: translateX(0);
    }

/* Regular platform-style tabs (MudTabs) filling the docked panel. */
.bo-context-tabs {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

    /* Tab bar at the top, with the close button pinned at the far right.
       Height + horizontal padding mirror the breadcrumb bar (10px 24px around
       a Size.Small icon button ≈ 50px content + 1px border). */
    .bo-context-tabs .mud-tabs-tabbar {
        flex: 0 0 auto;
        padding-right: 10px;
        border-bottom: 1px solid var(--bo-border);
        background-color: var(--bo-surface-muted);
    }

        .bo-context-tabs.mud-tabs .mud-tabs-tabbar-inner {
            min-height: 46px;
        }

    /* Override the UI.Framework tabs.css 38px default so the bar matches the
       breadcrumb height (needs an extra class for specificity over that rule). */
    .bo-context-tabs.mud-tabs .mud-tab {
        min-height: 46px;
    }


    .bo-context-tabs .bo-context-close {
        margin-left: auto;
        align-self: center;
        color: var(--bo-text-muted);
    }

    /* Panels container and the active panel both fill the remaining height so
       inner panels (e.g. the AI chat) can pin their input to the bottom.
       Scoped under .mud-tabs-panels so it never touches the tab-bar buttons
       (which also carry a .mud-tab-panel wrapper around their icon + label). */
    .bo-context-tabs .mud-tabs-panels,
    .bo-context-tabs .mud-tabs-panels .mud-tab-panel {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

.bo-context-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Push the main content aside when the panel is open (desktop only). */
.mud-main-content.bo-context-pushed {
    margin-right: 410px;
    transition: margin-right 0.22s ease;
}

/* Dismiss scrim — only used on mobile, where the panel overlays content. */
.bo-context-scrim {
    display: none;
}

@media (max-width: 959.98px) {
    .bo-context-window {
        --bo-context-width: 100vw;
    }

    /* No push on mobile — the panel overlays the page instead. */
    .mud-main-content.bo-context-pushed {
        margin-right: 0;
    }

    .bo-context-scrim {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1290;
        background: rgba(0, 0, 0, 0.4);
    }
}

/* Inner chat panel — fills the context body; messages scroll, input pinned. */
.bo-ai-chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.bo-ai-chat-messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bo-ai-chat-input {
    flex: 0 0 auto;
    padding: 12px;
    border-top: 1px solid var(--bo-border);
    gap: 8px;
}

/* Search panel — fills the context body; input pinned at top, results scroll. */
.bo-search-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 16px;
    gap: 12px;
}

.bo-search-panel .bo-search-input {
    flex: 0 0 auto;
}

.bo-search-panel .bo-search-results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Connection-graph view — fills the context body; header pinned, tree scrolls. */
.bo-graph-view {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.bo-graph-view .bo-graph-header {
    flex: 0 0 auto;
}

.bo-graph-view .bo-graph-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* =====================================================================
   Command palette (Ctrl/Cmd + K) — a centred overlay over the app.
   ===================================================================== */
.bo-cmdk-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}

.bo-cmdk {
    width: 100%;
    max-width: 560px;
    background-color: var(--bo-surface-solid);
    border: 1px solid var(--bo-border-strong);
    border-radius: var(--bo-radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.bo-cmdk-input {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--bo-border);
    color: var(--bo-text-muted);
}

    .bo-cmdk-input input {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: 0.95rem;
        color: var(--bo-text);
    }

    .bo-cmdk-input .bo-kbd {
        border: 1px solid var(--bo-border);
        border-radius: 4px;
        padding: 1px 6px;
        font-size: 0.7rem;
    }

.bo-cmdk-results {
    max-height: 50vh;
    overflow-y: auto;
    padding: 6px;
}

.bo-cmdk-empty {
    padding: 16px;
    text-align: center;
    color: var(--bo-text-muted);
    font-size: 0.85rem;
}

.bo-cmdk-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: var(--bo-radius);
    cursor: pointer;
    color: var(--bo-text);
    font-size: 0.9rem;
    text-align: left;
}

    .bo-cmdk-item.active {
        background-color: var(--bo-primary-soft);
    }

    .bo-cmdk-item .bo-cmdk-label {
        flex: 1;
    }

    .bo-cmdk-item .bo-cmdk-section {
        font-size: 0.75rem;
        color: var(--bo-text-muted);
    }