/* /Components/Layout/AgentPanel.razor.rz.scp.css */
/* Host chrome for the embedded agent widget (ported from Sales, 2026-09-16). The widget ships
   without any (§8.2) — it fills its container at 100% and this file is the entire visual frame
   around it. */

.agent-panel[b-dmxm9tszoo] {
    display: flex;
    flex-direction: column;
    background-color: var(--cn-card-background);
    border-left: 1px solid var(--cn-border);
    flex: 0 0 auto;
    width: 22rem; /* default — the resize handle overrides inline and persists per browser */
    min-width: 0;
    position: relative;

    /* Theming crosses the shadow boundary through custom properties and the `theme` attribute,
       nothing else (§3). These are set on the HOST element so they inherit into the shadow root.
       Kept in one block so that if the bundle's names differ, only this changes. */
    --agent-foreground: var(--cn-foreground);
    --agent-accent: var(--cn-clickable);
    --agent-border: var(--cn-border);
    --agent-muted-background: var(--cn-muted-background, rgba(127, 127, 127, 0.16));
    --agent-input-background: var(--cn-input-background, transparent);
}

.agent-head[b-dmxm9tszoo] {
    align-items: center;
    border-bottom: 1px solid var(--cn-border);
    display: flex;
    flex: 0 0 auto;
    gap: 0.4rem;
    height: 3.5rem; /* matches .top-row, so the panel's header lines up with the app's */
    padding: 0 0.6rem;
}

.agent-title[b-dmxm9tszoo] {
    color: var(--cn-heading);
    font-weight: 700;
}

/* The company the conversation started on. Not uppercased like Sales' entity-type pill: this one
   holds a NAME rather than a record type, and "ACME DENTAL GROUP" reads like shouting. */
.agent-entity[b-dmxm9tszoo] {
    background-color: var(--cn-muted-background, rgba(127, 127, 127, 0.16));
    border-radius: 999px;
    color: var(--cn-muted-foreground);
    font-size: 0.72rem;
    max-width: 10rem;
    overflow: hidden;
    padding: 0.1rem 0.5rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agent-spacer[b-dmxm9tszoo] {
    flex: 1;
}

.agent-btn[b-dmxm9tszoo] {
    background: transparent;
    border: 1px solid var(--cn-border);
    border-radius: 0.35rem;
    color: var(--cn-foreground);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
}

    .agent-btn:hover[b-dmxm9tszoo] {
        background-color: var(--cn-clickable-hover-bg);
        border-color: var(--cn-clickable);
    }

    /* Reflects the widget's own sessionListOpen state, so the button reads as a toggle. */
    .agent-btn.on[b-dmxm9tszoo] {
        background-color: var(--cn-clickable);
        border-color: var(--cn-clickable);
        color: #fff;
    }

.agent-error[b-dmxm9tszoo] {
    align-items: center;
    background-color: var(--cn-muted-background, rgba(127, 127, 127, 0.16));
    color: var(--cn-muted-foreground);
    display: flex;
    flex: 0 0 auto;
    font-size: 0.8rem;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 0.4rem 0.6rem;
}

    .agent-error.fatal[b-dmxm9tszoo] {
        background-color: rgba(179, 38, 30, 0.15);
        color: var(--ob-tone-failed);
    }

/* The widget's container. min-height: 0 because a flex item's automatic minimum size is its
   content, and a scrolling chat inside would otherwise push the panel taller than the viewport
   instead of scrolling. */
.agent-body[b-dmxm9tszoo] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

@media (min-width: 641px) {
    .agent-panel[b-dmxm9tszoo] {
        height: 100vh;
        position: sticky;
        top: 0;
    }
}

@media (max-width: 640.98px) {
    .agent-panel[b-dmxm9tszoo] {
        border-left: none;
        border-top: 1px solid var(--cn-border);
        height: 70vh;
        width: auto;
    }
}

/* The drag handle riding the panel's left border — a slim hit target that widens the border's
   affordance without shifting layout. */
.agent-resize[b-dmxm9tszoo] {
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    width: 7px;
    cursor: col-resize;
    z-index: 5;
    touch-action: none;
}

    .agent-resize:hover[b-dmxm9tszoo] {
        background: linear-gradient(to right, transparent 2px, var(--cn-clickable) 2px, var(--cn-clickable) 4px, transparent 4px);
    }
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-e4mx11ahs9] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-e4mx11ahs9] {
    flex: 1;
}

.sidebar[b-e4mx11ahs9] {
    /* Brand menu surface — deliberately identical in light and dark themes */
    background-color: var(--cn-menu-background);
    /* The customer portal's menu renders in its DEFAULT font (Helvetica), not Lato — matched
       here so the two sidebars are typographically identical. Lato remains the app body font,
       exactly like the portal. */
    font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
}

.top-row[b-e4mx11ahs9] {
    background-color: var(--cn-topbar-background);
    border-bottom: 1px solid var(--cn-border);
    justify-content: space-between;
    gap: 1rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

.app-context[b-e4mx11ahs9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* Absorb ALL free width so the theme + Assistant buttons sit pinned at the right edge —
       with space-between alone the theme toggle floated mid-bar and shifted with every
       breadcrumb change. */
    flex: 1;
    min-width: 0; /* lets the trail ellipsize instead of pushing the toggle out */
    white-space: nowrap;
    overflow: hidden;
}

.app-title[b-e4mx11ahs9] {
    font-weight: 700;
    color: var(--cn-heading);
}

.crumb-sep[b-e4mx11ahs9] {
    color: var(--cn-muted-foreground);
}

.app-context a.crumb[b-e4mx11ahs9] {
    margin-left: 0; /* overrides the template's top-row link margin */
    text-decoration: none;
}

    .app-context a.crumb:hover[b-e4mx11ahs9] {
        text-decoration: underline;
    }

.crumb-current[b-e4mx11ahs9] {
    color: var(--cn-muted-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
}

    .top-row[b-e4mx11ahs9]  a, .top-row[b-e4mx11ahs9]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-e4mx11ahs9]  a:hover, .top-row[b-e4mx11ahs9]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-e4mx11ahs9]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-e4mx11ahs9] {
        justify-content: space-between;
    }

    .top-row[b-e4mx11ahs9]  a, .top-row[b-e4mx11ahs9]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-e4mx11ahs9] {
        flex-direction: row;
    }

    /* Without this, wide content (a pricing grid) sets main's automatic minimum size to its own
       width and pushes the agent panel off the viewport instead of scrolling inside main. */
    main[b-e4mx11ahs9] {
        min-width: 0;
    }

    .sidebar[b-e4mx11ahs9] {
        /* Collapsed/expanded is decided in app.css — see the --cn-nav-* block. */
        width: var(--cn-nav-w);
        transition: width 0.12s ease-out;
        height: 100vh;
        position: sticky;
        top: 0;
        /* Column flex so NavMenu's nav-scrollable can flex-fill and pin the user card to the
           bottom regardless of the brand row's height. */
        display: flex;
        flex-direction: column;
    }

    .top-row[b-e4mx11ahs9] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-e4mx11ahs9]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-e4mx11ahs9], article[b-e4mx11ahs9] {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

.theme-toggle[b-e4mx11ahs9] {
    background: transparent;
    color: var(--cn-foreground);
    border: 1px solid var(--cn-border);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

    /* Reuses the theme toggle's pill shape — same class of control, same corner of the bar. */
    .agent-toggle.on[b-e4mx11ahs9] {
        background-color: var(--cn-clickable);
        border-color: var(--cn-clickable);
        color: #fff;
    }

    .theme-toggle:hover[b-e4mx11ahs9] {
        background: var(--cn-clickable-hover-bg);
    }

    .theme-toggle:focus-visible[b-e4mx11ahs9] {
        outline: 2px solid var(--cn-focus-ring);
        outline-offset: 1px;
    }

#blazor-error-ui[b-e4mx11ahs9] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-e4mx11ahs9] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ── Breadcrumbs (2026-09-14, the Acquisitions top bar): the page title lives here, after the
   "Onboarding" root ── */
.app-context[b-e4mx11ahs9] { min-width: 0; flex: 1 1 auto; }

.top-row[b-e4mx11ahs9]  .crumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
}

    /* The top-row's generic link rule adds a left margin for its right-side links; crumbs are
       inline text and take none of it. */
    .top-row[b-e4mx11ahs9]  .crumbs a.crumb,
    .top-row[b-e4mx11ahs9]  .crumbs a.crumb:first-child {
        margin-left: 0;
        color: var(--cn-clickable);
        text-decoration: none;
        overflow: hidden;
        text-overflow: ellipsis;
        flex: 0 1 auto;
        width: auto;
        text-align: left;
    }

    .top-row[b-e4mx11ahs9]  .crumbs a.crumb:hover { text-decoration: underline; }

    .top-row[b-e4mx11ahs9]  .crumb-root { font-weight: 700; }

    .top-row[b-e4mx11ahs9]  .crumb-current {
        font-weight: 700;
        color: var(--cn-heading);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .top-row[b-e4mx11ahs9]  .crumb-sep { color: var(--cn-muted-foreground); flex: none; }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-gu4rlw2pal] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-gu4rlw2pal] {
    background-color: rgba(255, 255, 255, 0.5);
}

/* Brand header, portal-style: centered logo on the plain menu background (no darkened band),
   with a partial-width separator below (the portal's mx-auto w-4/5 SidebarSeparator). */
.top-row[b-gu4rlw2pal] {
    min-height: 3.5rem;
    background-color: transparent;
    position: relative;
    padding-left: 0;
    padding-right: 0;
}

    /* Bootstrap's gutter is symmetric, so it centres fine — but it eats 12px a side, which on a
       3.75rem rail is most of the room the mark has. */
    .top-row .container-fluid[b-gu4rlw2pal] {
        padding-left: 0;
        padding-right: 0;
    }

    .top-row[b-gu4rlw2pal]::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 10%;
        right: 10%;
        height: 1px;
        background-color: var(--cn-menu-separator, #3f5264);
    }

.navbar-brand[b-gu4rlw2pal] {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem 0;
    /* Bootstrap gives .navbar-brand a 1rem right margin, which shortens the centring box on one
       side only — it was cancelling half of the ps-3 above, so removing that padding turned an
       8px right offset into an 8px left one. Zero both and the mark lands on the icon column. */
    margin: 0;
}

/* The logo's intrinsic aspect is ~2.9:1 (stacked wordmark + tagline) — sizing it by HEIGHT
   shrinks it to a postage stamp. Size by width and let the top row's min-height grow. */
.brand-logo[b-gu4rlw2pal] {
    display: var(--cn-nav-label);
    width: 80%; /* portal: w-[80%] centered */
    max-width: 12rem;
    height: auto;
}

/* Collapsed rail only: the icon mark, sized to the same 1.25rem grid as the nav icons so the
   header reads as part of the same column rather than a shrunken banner. */
.brand-mark[b-gu4rlw2pal] {
    display: var(--cn-nav-mark);
    width: 1.75rem;
    height: auto;
}

.bi[b-gu4rlw2pal] {
    display: inline-block;
    flex: none;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: var(--cn-nav-icon-gap); /* portal: [&>svg]:mr-4 */
    top: -1px;
    background-size: cover;
}

.nav-text[b-gu4rlw2pal] {
    display: var(--cn-nav-label);
}

.bi-house-door-fill-nav-menu[b-gu4rlw2pal] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-file-earmark-text-fill-nav-menu[b-gu4rlw2pal] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-file-earmark-text-fill' viewBox='0 0 16 16'%3E%3Cpath d='M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0zM9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1zM4.5 9a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM4.5 10.5a.5.5 0 0 1 0-1h7a.5.5 0 0 1 0 1h-7zM4.5 12a.5.5 0 0 1 0-1h4a.5.5 0 0 1 0 1h-4z'/%3E%3C/svg%3E");
}

.bi-diagram-3-fill-nav-menu[b-gu4rlw2pal] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-diagram-3-fill' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6 3.5A1.5 1.5 0 0 1 7.5 2h1A1.5 1.5 0 0 1 10 3.5v1A1.5 1.5 0 0 1 8.5 6v1H14a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0V8h-5v.5a.5.5 0 0 1-1 0v-1A.5.5 0 0 1 2 7h5.5V6A1.5 1.5 0 0 1 6 4.5v-1zm-6 8A1.5 1.5 0 0 1 1.5 10h1A1.5 1.5 0 0 1 4 11.5v1A1.5 1.5 0 0 1 2.5 14h-1A1.5 1.5 0 0 1 0 12.5v-1zm6 0A1.5 1.5 0 0 1 7.5 10h1a1.5 1.5 0 0 1 1.5 1.5v1A1.5 1.5 0 0 1 8.5 14h-1A1.5 1.5 0 0 1 6 12.5v-1zm6 0a1.5 1.5 0 0 1 1.5-1.5h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5v-1z'/%3E%3C/svg%3E");
}

.bi-layers-fill-nav-menu[b-gu4rlw2pal] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-layers-fill' viewBox='0 0 16 16'%3E%3Cpath d='M7.765 1.559a.5.5 0 0 1 .47 0l7.5 4a.5.5 0 0 1 0 .882l-7.5 4a.5.5 0 0 1-.47 0l-7.5-4a.5.5 0 0 1 0-.882l7.5-4z'/%3E%3Cpath d='m2.125 8.567-1.86.992a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882l-1.86-.992-5.17 2.756a1.5 1.5 0 0 1-1.41 0l-5.17-2.756z'/%3E%3C/svg%3E");
}

.bi-box-arrow-up-right-nav-menu[b-gu4rlw2pal] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-box-arrow-up-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
}

/* Points left to collapse; --cn-nav-chevron flips it to point right (expand) whenever the rail is
   collapsed, whether the user chose that or the viewport did. */
.bi-chevrons-left-nav-menu[b-gu4rlw2pal] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17-5-5 5-5'/%3E%3Cpath d='m18 17-5-5 5-5'/%3E%3C/svg%3E");
    transform: rotate(var(--cn-nav-chevron));
    transition: transform 0.12s ease-out;
}

.nav-collapse[b-gu4rlw2pal] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

/* A <button> styled as a nav row: the rail's own control, not a destination. */
.nav-collapse-btn[b-gu4rlw2pal] {
    background: none;
    border: none;
    color: var(--cn-light-azure, #f5f8fa);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.bi-database-fill-nav-menu[b-gu4rlw2pal] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-database-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3.904 1.777C4.978 1.289 6.427 1 8 1s3.022.289 4.096.777C13.125 2.245 14 2.993 14 4s-.875 1.755-1.904 2.223C11.022 6.711 9.573 7 8 7s-3.022-.289-4.096-.777C2.875 5.755 2 5.007 2 4s.875-1.755 1.904-2.223Z'/%3E%3Cpath d='M2 6.161V7c0 1.007.875 1.755 1.904 2.223C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777C13.125 8.755 14 8.007 14 7v-.839c-.457.432-1.004.751-1.49.972C11.278 7.693 9.682 8 8 8s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972Z'/%3E%3Cpath d='M2 9.161V10c0 1.007.875 1.755 1.904 2.223C4.978 12.711 6.427 13 8 13s3.022-.289 4.096-.777C13.125 11.755 14 11.007 14 10v-.839c-.457.432-1.004.751-1.49.972-1.232.56-2.828.867-4.51.867s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972Z'/%3E%3Cpath d='M2 12.161V13c0 1.007.875 1.755 1.904 2.223C4.978 15.711 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13v-.839c-.457.432-1.004.751-1.49.972-1.232.56-2.828.867-4.51.867s-3.278-.307-4.51-.867c-.486-.22-1.033-.54-1.49-.972Z'/%3E%3C/svg%3E");
}

.bi-briefcase-fill-nav-menu[b-gu4rlw2pal] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-briefcase-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 1A1.5 1.5 0 0 0 5 2.5V3H1.5A1.5 1.5 0 0 0 0 4.5v1.384l7.614 2.03a1.5 1.5 0 0 0 .772 0L16 5.884V4.5A1.5 1.5 0 0 0 14.5 3H11v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5z'/%3E%3Cpath d='M0 12.5A1.5 1.5 0 0 0 1.5 14h13a1.5 1.5 0 0 0 1.5-1.5V6.85L8.129 8.947a.5.5 0 0 1-.258 0L0 6.85v5.65z'/%3E%3C/svg%3E");
}

.nav-item[b-gu4rlw2pal] {
    font-size: 1rem; /* portal: text-base */
    padding-bottom: 0.25rem; /* portal: mb-1 */
}

    .nav-item:first-of-type[b-gu4rlw2pal] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-gu4rlw2pal] {
        padding-bottom: 1rem;
    }

    .nav-item[b-gu4rlw2pal]  .nav-link {
        color: var(--cn-light-azure, #f5f8fa);
        background: none;
        border: none;
        border-radius: 0.375rem; /* portal: rounded-md */
        padding: var(--cn-nav-link-pad); /* portal: py-2 pl-4 */
        display: flex;
        align-items: center;
        justify-content: var(--cn-nav-justify);
        line-height: 1.5;
        width: 100%;
    }

.nav-item[b-gu4rlw2pal]  a.active {
    /* Portal's sidebar-accent maps to menu-HOVER; active is distinguished by weight + chevron. */
    background-color: var(--cn-menu-hover, #425b76);
    color: white;
    font-weight: 500;
}

    .nav-item[b-gu4rlw2pal]  a.active::after {
        content: "";
        display: var(--cn-nav-caret); /* no room for it on the rail; the fill already reads active */
        flex: none;
        width: 1rem;
        height: 1rem;
        margin-left: auto;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") no-repeat center / contain;
    }

.nav-item[b-gu4rlw2pal]  .nav-link:hover {
    background-color: var(--cn-menu-hover, #425b76);
    color: white;
}

.nav-scrollable[b-gu4rlw2pal] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-gu4rlw2pal] {
    display: block;
}

/* ── Bottom block: Customer Portal link + signed-in user card, pinned as ONE unit ──
   Mobile (collapsed menu): in-flow, renders after the nav items.
   Desktop: absolutely positioned against the sidebar (see the media query below) — deliberately
   NOT margin-top:auto flex pinning, which proved fragile around responsive boundaries and
   partial-render frames (the card flashed under the nav items mid-navigation). */
.nav-bottom[b-gu4rlw2pal] {
    background-color: var(--cn-menu-background, #213343);
    border-top: 1px solid var(--cn-menu-separator, #3f5264);
}

/* Two classes: must outrank .nav-item:first-of-type (a pseudo-class counts as a class), which
   otherwise re-imposes 1rem top padding — the link IS the first .nav-item inside .nav-bottom —
   and skews the centering between the separators. */
.nav-item.nav-portal-link[b-gu4rlw2pal] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.nav-user[b-gu4rlw2pal] {
    border-top: 1px solid var(--cn-menu-separator, #3f5264);
    padding: 0.75rem var(--cn-nav-icon-gap);
}

    .nav-user[b-gu4rlw2pal]  .nav-user-link {
        display: flex;
        align-items: center;
        justify-content: var(--cn-nav-justify);
        gap: 0.65rem;
        text-decoration: none;
        border-radius: 4px;
        padding: 0.4rem 0.5rem;
        color: var(--cn-light-azure, #f5f8fa);
        min-width: 0;
    }

        .nav-user[b-gu4rlw2pal]  .nav-user-link:hover,
        .nav-user[b-gu4rlw2pal]  .nav-user-link.active {
            background-color: var(--cn-menu-hover, #425b76);
            color: white;
        }

.nav-user-avatar[b-gu4rlw2pal] {
    flex: none;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 50%;
    background-color: var(--cn-menu-active, #516f90);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    position: relative;
    overflow: hidden;
}

.nav-user-photo[b-gu4rlw2pal] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-user-meta[b-gu4rlw2pal] {
    display: var(--cn-nav-meta);
    flex-direction: column;
    min-width: 0; /* lets the ellipsis actually apply inside the flex row */
}

.nav-user-name[b-gu4rlw2pal] {
    font-size: 0.85rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-user-email[b-gu4rlw2pal] {
    font-size: 0.72rem;
    color: rgba(245, 248, 250, 0.65);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 641px) {
    .navbar-toggler[b-gu4rlw2pal] {
        display: none;
    }

    .nav-scrollable[b-gu4rlw2pal] {
        /* Never collapse the sidebar for wide screens. Flex-fills the sidebar column so tall
           menus scroll; bottom padding keeps the last item clear of the pinned bottom block. */
        display: block;
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 7.5rem;
    }

    .nav-bottom[b-gu4rlw2pal] {
        /* The pin. The sidebar (position:sticky, height:100vh) is the containing block, so
           this holds regardless of flex layout state, sibling heights, or merge timing. */
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
}

/* ── Onboardings in flight (2026-09-14): the Acquisitions rail, companies in place of deals ── */
.nav-empty[b-gu4rlw2pal] {
    padding-top: 1rem;
    color: rgba(245, 248, 250, 0.6);
    font-size: 0.9rem;
}

/* The company's monogram in a rounded tile, sized to the icon grid so the collapsed rail reads as a
   column of tiles; expanded, it sits where an icon would. */
.nav-code[b-gu4rlw2pal] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.2rem;
    margin-right: var(--cn-nav-icon-gap);
    border-radius: 0.25rem;
    background-color: var(--cn-menu-active, #516f90);
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1;
    top: -1px;
    position: relative;
}

.nav-deal[b-gu4rlw2pal] {
    padding-top: 0.75rem;
    padding-bottom: 0;
}

    .nav-deal[b-gu4rlw2pal]  .nav-link {
        font-weight: 600;
    }

    /* The list is bold throughout; the open company is not, active or not. Two classes, so these outrank the
       generic `.nav-item a.active` weight above. */
    .nav-deal.nav-deal-listed[b-gu4rlw2pal]  .nav-link {
        font-weight: 600;
    }

    .nav-deal.nav-deal-open[b-gu4rlw2pal]  .nav-link {
        font-weight: 500;
    }

.nav-deal-text[b-gu4rlw2pal] {
    display: var(--cn-nav-label);
    min-width: 0;
}

.nav-deal-name[b-gu4rlw2pal] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-deal-phase[b-gu4rlw2pal] {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(245, 248, 250, 0.6);
}

.nav-deal-phase.nav-attention[b-gu4rlw2pal] {
    color: #ffc46b;
}

/* Sub-rows: indented under the company while the rail is expanded; centred like every other icon
   when it is collapsed (the indent variable goes to zero with the labels, see app.css). */
.nav-sub[b-gu4rlw2pal] {
    padding-bottom: 0.1rem;
    font-size: 0.92rem;
}

    .nav-sub[b-gu4rlw2pal]  .nav-link {
        padding-left: calc(var(--cn-nav-sub-indent, 1.5rem) + 0.75rem);
    }

/* Menu options (2026-09-14): a small gear in the logo header's bottom-right corner, hidden with the
   labels on the collapsed rail. It opens the Rewst app's two switches in a popover; an invisible
   backdrop closes it on the next click anywhere else. */
.nav-settings-btn[b-gu4rlw2pal] {
    display: var(--cn-nav-meta);
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0.5rem;
    bottom: 0.4rem;
    z-index: 2;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: 0.3rem;
    background: transparent;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.12s ease-out;
}

    .nav-settings-btn:hover[b-gu4rlw2pal],
    .nav-settings-btn:focus-visible[b-gu4rlw2pal],
    .nav-settings-btn[aria-expanded="true"][b-gu4rlw2pal] {
        opacity: 1;
        background-color: var(--cn-menu-hover, #425b76);
    }

    /* A hide option is on: some steps are not in the list. */
    .nav-settings-btn.is-filtering[b-gu4rlw2pal] {
        opacity: 0.9;
    }

        .nav-settings-btn.is-filtering[b-gu4rlw2pal]::after {
            content: "";
            position: absolute;
            top: 0.1rem;
            right: 0.1rem;
            width: 0.4rem;
            height: 0.4rem;
            border-radius: 50%;
            background-color: var(--cn-bold-orange, #f37021);
        }

.nav-gear[b-gu4rlw2pal] {
    display: block;
    width: 0.95rem;
    height: 0.95rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M9.405 1.05c-.413-1.4-2.397-1.4-2.81 0l-.1.34a1.464 1.464 0 0 1-2.105.872l-.31-.17c-1.283-.698-2.686.705-1.987 1.987l.169.311c.446.82.023 1.841-.872 2.105l-.34.1c-1.4.413-1.4 2.397 0 2.81l.34.1a1.464 1.464 0 0 1 .872 2.105l-.17.31c-.698 1.283.705 2.686 1.987 1.987l.311-.169a1.464 1.464 0 0 1 2.105.872l.1.34c.413 1.4 2.397 1.4 2.81 0l.1-.34a1.464 1.464 0 0 1 2.105-.872l.31.17c1.283.698 2.686-.705 1.987-1.987l-.169-.311a1.464 1.464 0 0 1 .872-2.105l.34-.1c1.4-.413 1.4-2.397 0-2.81l-.34-.1a1.464 1.464 0 0 1-.872-2.105l.17-.31c.698-1.283-.705-2.686-1.987-1.987l-.311.169a1.464 1.464 0 0 1-2.105-.872zM8 10.93a2.929 2.929 0 1 1 0-5.86 2.929 2.929 0 0 1 0 5.858z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.nav-options-backdrop[b-gu4rlw2pal] {
    position: fixed;
    inset: 0;
    z-index: 1040;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: default;
}

.nav-options[b-gu4rlw2pal] {
    position: absolute;
    top: calc(100% - 0.2rem);
    right: 0.5rem;
    z-index: 1050;
    min-width: 11rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.6rem 0.85rem 0.7rem;
    background-color: var(--cn-menu-background, #213343);
    border: 1px solid var(--cn-menu-separator, #3f5264);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    font-size: 0.85rem;
    color: rgba(245, 248, 250, 0.9);
    text-align: left;
}

.nav-options-title[b-gu4rlw2pal] {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 248, 250, 0.55);
}

    .nav-options .form-check[b-gu4rlw2pal] {
        display: flex;
        align-items: center;
        gap: 0.55rem;
        min-height: 0;
        margin: 0;
        padding-left: 0;
    }

    .nav-options .form-check-input[b-gu4rlw2pal] {
        float: none;
        margin: 0;
        cursor: pointer;
        background-color: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.35);
        --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 0.8%29'/%3e%3c/svg%3e");
    }

    .nav-options .form-check-input:checked[b-gu4rlw2pal] {
        background-color: var(--cn-vivid-azure, #1398b2);
        border-color: var(--cn-vivid-azure, #1398b2);
    }

    .nav-options .form-check-label[b-gu4rlw2pal] {
        cursor: pointer;
    }

/* A step row: its status icon where the nav icon goes, its name, and the Rewst warning or error line
   beneath it in the same orange and red. */
.nav-step[b-gu4rlw2pal] {
    padding-bottom: 0.15rem;
    font-size: 0.88rem;
}

    /* More air between the rows (Chris, 2026-09-16): at 0.3rem a two-line step and the one below it read as one
       block. The hover fill grows with it, so each row is also an easier target. */
    .nav-step[b-gu4rlw2pal]  .nav-link {
        align-items: flex-start;
        padding-top: 0.45rem;
        padding-bottom: 0.45rem;
        line-height: 1.35;
    }

/* The rail's own icon grid is 1.25rem — what .bi uses, what the monogram tile is sized to, and what
   the Acquisitions rail this one was modelled on uses throughout (Chris, 2026-09-16). The step and page
   rows were drawing their status glyphs at 1rem, which is why this menu read denser and smaller than
   that one at the same rail width. The rows stay at 0.88rem: there are eleven steps here, each able to
   carry a second line, where a deal has eight pages. */
.nav-si[b-gu4rlw2pal] {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: var(--cn-nav-icon-gap);
    margin-top: 0;
}

/* The selected row's chevron (2026-09-16: it sat slightly high). Step and page rows align to the top so a second line
   can follow the name, which put the 1rem chevron on the row's top edge while the 1.25rem icon beside the name sat
   centred 2px lower. Half the difference down centres it on the icon's line, and a wrapped note does not move it. */
.nav-step[b-gu4rlw2pal]  a.active::after {
    margin-top: calc((1.25rem - 1rem) / 2);
}

.nav-step-text[b-gu4rlw2pal] {
    display: var(--cn-nav-label);
    min-width: 0;
    /* Its capitals sat a pixel above the icon's centre (measured 2026-09-16): the 0.88rem line is a pixel shorter than
       the 1.25rem icon, and a capital's middle is above its line's. Down by that pixel, the name, icon and chevron
       share one centre line; the row keeps its height. */
    position: relative;
    top: 0.0625rem;
}

.nav-step-name[b-gu4rlw2pal],
.nav-step-note[b-gu4rlw2pal] {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-step-note[b-gu4rlw2pal] {
    font-size: 0.74rem;
    font-weight: 400;
}

.nav-step-warning[b-gu4rlw2pal] { color: #ffb366; }
.nav-step-error[b-gu4rlw2pal] { color: #ff8a80; }

.nav-step-dim[b-gu4rlw2pal]  .nav-link {
    color: rgba(245, 248, 250, 0.55);
}

/* Status colours for the dark band — lighter than the page tones so they hold their contrast. */
.nav-si-done[b-gu4rlw2pal], .nav-si-manual[b-gu4rlw2pal] { color: #6fd39a; }
.nav-si-ready[b-gu4rlw2pal], .nav-si-notstarted[b-gu4rlw2pal] { color: rgba(245, 248, 250, 0.9); }
.nav-si-inprogress[b-gu4rlw2pal] { color: #8fd3ff; }
.nav-si-failed[b-gu4rlw2pal] { color: #ff8a80; }
.nav-si-unknown[b-gu4rlw2pal] { color: #ffc46b; }
.nav-si-blocked[b-gu4rlw2pal], .nav-si-notapplicable[b-gu4rlw2pal], .nav-si-skipped[b-gu4rlw2pal] { color: rgba(245, 248, 250, 0.45); }

.nav-quiet[b-gu4rlw2pal] {
    font-size: 0.78rem;
    color: rgba(245, 248, 250, 0.55);
}

    .nav-quiet > .nav-text[b-gu4rlw2pal] {
        display: var(--cn-nav-label);
        padding: 0.2rem 0 0.2rem calc(var(--cn-nav-sub-indent, 1.5rem) + 0.75rem);
    }

    .nav-quiet[b-gu4rlw2pal]  .nav-link {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }

/* The Manage group at the bottom: a small caption, then its rows. */
.nav-manage-head[b-gu4rlw2pal] {
    padding: 0.6rem 1rem 0.1rem calc(var(--cn-nav-icon-gap) + 1rem);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(245, 248, 250, 0.55);
}

    .nav-manage-head > .nav-text[b-gu4rlw2pal] {
        display: var(--cn-nav-label);
    }

.nav-item.nav-manage[b-gu4rlw2pal] {
    padding-top: 0;
    padding-bottom: 0.1rem;
}

.bi-plus-circle-nav-menu[b-gu4rlw2pal] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z'/%3E%3C/svg%3E");
}

.bi-list-check-nav-menu[b-gu4rlw2pal] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-check' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zM3.854 2.146a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 3.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 1 1 .708-.708L2 7.293l1.146-1.147a.5.5 0 0 1 .708 0zm0 4a.5.5 0 0 1 0 .708l-1.5 1.5a.5.5 0 0 1-.708 0l-.5-.5a.5.5 0 0 1 .708-.708l.146.147 1.146-1.147a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* ── Fit (2026-09-14): the rail wraps long labels instead of cutting them off ──
   Bootstrap's .nav is flex-wrap: wrap, and a wrapping column flexbox sizes its line to the widest
   row's max-content width. One long nowrap label therefore made every row wider than the rail, and
   the scroller clipped the ends before any ellipsis could apply. A single-line column takes the
   rail's width, and the labels wrap the way the Rewst app's menu does. */
.nav-scrollable > .nav[b-gu4rlw2pal] {
    flex-wrap: nowrap;
}

.nav-item[b-gu4rlw2pal] {
    min-width: 0;
}

.nav-deal-name[b-gu4rlw2pal],
.nav-deal-phase[b-gu4rlw2pal],
.nav-step-name[b-gu4rlw2pal],
.nav-step-note[b-gu4rlw2pal] {
    white-space: normal;
    overflow-wrap: break-word;
}

/* Step rows get most of their indent back: at 250px the rail cannot spare a sub-indent, a full icon
   gap and the item padding in front of every step name. */
.nav-step[b-gu4rlw2pal]  .nav-link {
    padding-left: calc(var(--cn-nav-sub-indent, 1.5rem) + 0.1rem);
}

.nav-si[b-gu4rlw2pal] {
    margin-right: min(var(--cn-nav-icon-gap), 0.55rem);
}

/* ── Scrolling (2026-09-14): the list scrolls, the bottom block does not ──
   The bottom block was pinned absolutely over the scroller's lower edge, with padding to clear it.
   The Manage group made it taller than that padding, so the scrollbar ran on underneath it and was
   cut off, and the last rows scrolled out of reach behind it. The nav list is now the scroller, and
   the bottom block follows it in the sidebar's column, so the scrollbar ends where the block begins.
   The list takes the column's remaining height, so the block cannot ride up under the rows.
   The checked-toggler selector matters: every click in the rail toggles the phone menu's hidden
   checkbox, and its display:block rule outranks a bare .nav-scrollable, which silently undid this
   after the first click. */
@media (min-width: 641px) {
    .nav-scrollable[b-gu4rlw2pal],
    .navbar-toggler:checked ~ .nav-scrollable[b-gu4rlw2pal] {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding-bottom: 0;
    }

        .nav-scrollable > .nav[b-gu4rlw2pal] {
            flex: 1 1 auto;
            min-height: 0;
            overflow-y: auto;
        }

            .nav-scrollable > .nav > *[b-gu4rlw2pal] {
                flex-shrink: 0;
            }

    .nav-bottom[b-gu4rlw2pal] {
        position: static;
        flex: none;
    }
}

/* ── The onboarding's pages (2026-09-14): rows that are not steps, under the company and above its
   checklist: the overview (2026-09-15), the device list and the customer view. The last one keeps a gap above the steps. */
.nav-page-last[b-gu4rlw2pal] {
    margin-bottom: 0.25rem;
}

/* The company's icon in place of its monogram (2026-09-15). */
.nav-code-img[b-gu4rlw2pal] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0.25rem;
}

/* A company's own icon, on the Acquisitions rail's treatment (Chris, 2026-09-16): a white tile at the
   icon grid's size. The slate monogram square it replaces was the complaint — it showed around a square
   logo — but nothing behind it is worse on this rail, where a dark mark simply disappears. White reads
   as a deliberate chip, the way a favicon does, and every logo survives it. */
.nav-code-image[b-gu4rlw2pal] {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    padding: 0.1rem;
    background-color: #fff;
    border-radius: 0.3rem;
}

/* With an onboarding open, Back returns to every onboarding in flight (2026-09-15). */
.nav-back[b-gu4rlw2pal] {
    margin-bottom: 0.25rem;
}

.nav-back-icon[b-gu4rlw2pal] {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath fill-rule='evenodd' d='M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.85;
}

.nav-page-overview[b-gu4rlw2pal] {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.85;
}

.nav-page-customer[b-gu4rlw2pal] {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'/%3E%3Cpath d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.85;
}

.nav-page-devices[b-gu4rlw2pal] {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1 .5-.5zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2zM0 12.5h16a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.85;
}
/* /Components/Layout/PlainLayout.razor.rz.scp.css */
.plain-main[b-6d7036nj9p] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
/* Visibility contract with blazor.web.js — the framework stamps state classes on the dialog and
   these rules decide what shows in each state. Do not rename ids or state classes. */
.components-reconnect-first-attempt-visible[b-52epl1thry],
.components-reconnect-repeated-attempt-visible[b-52epl1thry],
.components-reconnect-failed-visible[b-52epl1thry],
.components-reconnect-rejected-visible[b-52epl1thry],
.components-pause-visible[b-52epl1thry],
.components-resume-failed-visible[b-52epl1thry],
.components-rejoining-animation[b-52epl1thry],
.reconnect-title[b-52epl1thry],
.reconnect-title-rejected[b-52epl1thry] {
    display: none;
}

/* REJECTED: reached the server, circuit gone, the page is reloading (see the .js). Its own title
   and copy, and the rings keep spinning — something IS still happening. */
#components-reconnect-modal.components-reconnect-rejected .components-reconnect-rejected-visible[b-52epl1thry],
#components-reconnect-modal.components-reconnect-rejected .components-rejoining-animation[b-52epl1thry],
#components-reconnect-modal.components-reconnect-rejected .reconnect-title-rejected[b-52epl1thry] {
    display: block;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-52epl1thry],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-52epl1thry],
#components-reconnect-modal.components-reconnect-show .reconnect-title[b-52epl1thry],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-52epl1thry],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-52epl1thry],
#components-reconnect-modal.components-reconnect-retrying[b-52epl1thry],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-52epl1thry],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-52epl1thry],
#components-reconnect-modal.components-reconnect-retrying .reconnect-title[b-52epl1thry],
#components-reconnect-modal.components-reconnect-failed[b-52epl1thry],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-52epl1thry],
#components-reconnect-modal.components-reconnect-failed .reconnect-title[b-52epl1thry] {
    display: block;
}

/* ── Presentation: portal card + tokens (light/dark follow the global --cn-* palette) ───────── */

#components-reconnect-modal[b-52epl1thry] {
    background-color: var(--cn-card-background, #ffffff);
    color: var(--cn-foreground, #213343);
    width: 22rem;
    margin: 20vh auto;
    padding: 1.75rem 2rem;
    border: 1px solid var(--cn-border, #dde5ec);
    border-top: 4px solid var(--cn-vivid-azure, #1398b2);
    border-radius: 0.5rem;
    box-shadow: 0 8px 28px rgba(13, 23, 33, 0.35);
    font-size: 0.9rem;
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-52epl1thry 0.5s both;
}

#components-reconnect-modal[open][b-52epl1thry] {
    animation: components-reconnect-modal-slideUp-b-52epl1thry 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-52epl1thry 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

#components-reconnect-modal[b-52epl1thry]::backdrop {
    background-color: rgba(13, 23, 33, 0.5);
    backdrop-filter: blur(2px);
    animation: components-reconnect-modal-fadeInOpacity-b-52epl1thry 0.5s ease-in-out;
    opacity: 1;
}

.reconnect-title[b-52epl1thry],
.reconnect-title-rejected[b-52epl1thry] {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--cn-muted-foreground, #5b7183);
    text-align: center;
}

@keyframes components-reconnect-modal-slideUp-b-52epl1thry {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-52epl1thry {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-52epl1thry {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-52epl1thry] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.875rem;
}

#components-reconnect-modal p[b-52epl1thry] {
    margin: 0;
    text-align: center;
    color: var(--cn-foreground, #213343);
}

#components-reconnect-modal button[b-52epl1thry] {
    border: 0;
    background-color: var(--cn-vivid-azure, #1398b2);
    color: #ffffff;
    padding: 6px 28px;
    border-radius: 4px;
    font-weight: 500;
}

#components-reconnect-modal button:hover[b-52epl1thry] {
    background-color: var(--cn-heading, #1b5f7a);
}

#components-reconnect-modal button:active[b-52epl1thry] {
    background-color: var(--cn-vivid-azure, #1398b2);
}


/* The rings themselves live in app.css (.cn-rings) — shared with LoadingPane so the wait state
   looks the same wherever the reader meets it. Only the state-driven show/hide above is ours. */
/* /Components/Notifications/UpdateRequestCallout.razor.rz.scp.css */
/* A customer is waiting on us (2026-09-16): the one panel on the onboarding page drawn with the brand's accent,
   so it reads as something to act on rather than something to read. */
.ob-update-request[b-vl5yiyhxl4] {
    border-left: 4px solid #f37021;
}

/* Only colleagues asked (Chris, 2026-09-16: staff test the button end to end): still a request, but not a customer
   waiting, so it does not wear the customer's colour. */
.ob-update-request-test[b-vl5yiyhxl4] {
    border-left-color: rgba(128, 128, 128, .5);
}

.ob-update-test-badge[b-vl5yiyhxl4] {
    margin-left: .35rem;
    font-size: .75rem;
    background: rgba(128, 128, 128, .15);
}

.ob-update-asks[b-vl5yiyhxl4] {
    list-style: none;
    margin: 0 0 .75rem;
    padding: 0;
}

.ob-update-asks li + li[b-vl5yiyhxl4] {
    margin-top: .75rem;
    padding-top: .75rem;
    border-top: 1px solid rgba(128, 128, 128, .2);
}

.ob-update-message[b-vl5yiyhxl4] {
    margin: .35rem 0;
    padding: .5rem .8rem;
    border-left: 3px solid rgba(128, 128, 128, .4);
    background: rgba(128, 128, 128, .08);
    border-radius: 0 .35rem .35rem 0;
    overflow-wrap: anywhere;
}

.ob-update-foot[b-vl5yiyhxl4] {
    margin: 0;
}
/* /Components/Pages/FormDesigner.razor.rz.scp.css */
/* The template library's list. Only what the shared ob- vocabulary does not already carry: a retired
   template reads as retired without being hidden, because "why can I not create this one" is exactly the
   question the row has to answer. */
.ob-muted-row td[b-4uhaz706wg] {
    opacity: .6;
}
/* /Components/Pages/FormDesignerEdit.razor.rz.scp.css */
/* The designer's outline. Everything else on this page is the portal's own ob- vocabulary; this is the
   one shape it does not already have — a tree of rows where the indent IS the nesting, because a
   repeating group inside a panel inside a page has to read at a glance.

   ::deep, because the rows below the first level are rendered by FormDesignerNode and CSS isolation would
   otherwise scope them away from this file. */

.ob-designer[b-phlcaikpzb] {
    border: 1px solid rgba(128, 128, 128, .3);
    border-radius: .5rem;
    overflow: hidden;
}

.ob-designer[b-phlcaikpzb]  .ob-designer-page {
    border-top: 1px solid rgba(128, 128, 128, .25);
}

.ob-designer[b-phlcaikpzb]  .ob-designer-page:first-child {
    border-top: 0;
}

/* The row: a target that fills the width, its tools on the right and out of the way until wanted. */
.ob-designer[b-phlcaikpzb]  .ob-designer-row {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .4rem .15rem calc(.4rem + var(--ob-designer-depth, 0) * 1.1rem);
    border-top: 1px solid rgba(128, 128, 128, .12);
}

.ob-designer[b-phlcaikpzb]  .ob-designer-row:hover {
    background: var(--cn-clickable-hover-bg, #eaf0f6);
}

.ob-designer[b-phlcaikpzb]  .ob-designer-row.selected {
    background: var(--cn-clickable-hover-bg, #eaf0f6);
    box-shadow: inset 3px 0 0 var(--cn-clickable, #1398b2);
}

.ob-designer[b-phlcaikpzb]  .ob-designer-pick {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: .3rem 0;
    font: inherit;
    text-align: left;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

/* The kind reads first and the label reads second: when you are looking for "the drop-down", the type is
   what you are scanning for. */
.ob-designer[b-phlcaikpzb]  .ob-designer-kind {
    flex: none;
    width: 8.5rem;
    font-size: .75rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--cn-muted-foreground, #5b7183);
}

.ob-designer[b-phlcaikpzb]  .ob-designer-name {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 600;
}

.ob-designer[b-phlcaikpzb]  .ob-designer-tools {
    display: inline-flex;
    flex: none;
    gap: .1rem;
    opacity: .35;
}

.ob-designer[b-phlcaikpzb]  .ob-designer-row:hover .ob-designer-tools,
.ob-designer[b-phlcaikpzb]  .ob-designer-row:focus-within .ob-designer-tools {
    opacity: 1;
}

.ob-designer[b-phlcaikpzb]  .ob-designer-tools button {
    font: inherit;
    font-size: .8rem;
    line-height: 1;
    padding: .25rem .4rem;
    color: var(--cn-muted-foreground, #5b7183);
    background: none;
    border: 0;
    border-radius: .25rem;
    cursor: pointer;
}

.ob-designer[b-phlcaikpzb]  .ob-designer-tools button:hover:not(:disabled) {
    color: var(--cn-foreground, inherit);
    background: rgba(128, 128, 128, .18);
}

.ob-designer[b-phlcaikpzb]  .ob-designer-tools button:disabled {
    opacity: .4;
    cursor: default;
}

.ob-designer[b-phlcaikpzb]  .ob-designer-add {
    padding: .3rem .4rem .45rem calc(.4rem + var(--ob-designer-depth, 0) * 1.1rem);
}

.ob-designer[b-phlcaikpzb]  .ob-designer-add select {
    max-width: 24rem;
}
/* /Components/Pages/SettingsApplicability.razor.rz.scp.css */
/* The applicability rules (2026-09-16). One card per step; only what the shared ob- vocabulary does not carry. A
   changed rule is marked down its left edge, the device list's way of making a row read at a glance. */
.ob-rule[b-qsq8tf7cpq] {
    padding: .6rem .75rem;
    margin-bottom: .5rem;
    border: 1px solid rgba(128, 128, 128, .3);
    border-radius: .5rem;
    box-shadow: inset 4px 0 0 transparent;
}

.ob-rule-changed[b-qsq8tf7cpq] {
    box-shadow: inset 4px 0 0 var(--ob-tone-progress);
}

.ob-rule-head[b-qsq8tf7cpq] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .25rem .6rem;
    margin-bottom: .35rem;
}

.ob-rule-name[b-qsq8tf7cpq] {
    font-weight: 600;
}

.ob-rule-head code[b-qsq8tf7cpq] {
    font-size: .8em;
}

.ob-rule-mode[b-qsq8tf7cpq] {
    max-width: 24rem;
    margin-bottom: .35rem;
}

.ob-rule-add[b-qsq8tf7cpq] {
    max-width: 28rem;
    margin-bottom: .35rem;
}

.ob-rule-explain[b-qsq8tf7cpq] {
    font-size: .9em;
}

.ob-rule-products[b-qsq8tf7cpq] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .25rem .4rem;
    margin-top: .6rem;
    font-size: .9em;
}

.ob-rule-product[b-qsq8tf7cpq] {
    padding: .05rem .4rem;
    border-radius: .25rem;
    background: rgba(128, 128, 128, .14);
}

.ob-rule-agreement td[b-qsq8tf7cpq] {
    font-weight: 600;
    background: rgba(128, 128, 128, .06);
}

.ob-rule-impact[b-qsq8tf7cpq] {
    margin: 0;
    padding-left: 1.2rem;
    font-size: .9em;
}

.ob-rule-impact ul[b-qsq8tf7cpq] {
    padding-left: 1.1rem;
}

/* The preview: a step the draft would move is marked the way the device list marks a discrepancy. */
.ob-preview-becomesapplicable td:first-child[b-qsq8tf7cpq] {
    box-shadow: inset 4px 0 0 var(--ob-tone-done);
}

.ob-preview-stopsapplying td:first-child[b-qsq8tf7cpq] {
    box-shadow: inset 4px 0 0 var(--ob-tone-failed);
}

.ob-preview-keptbyhand td:first-child[b-qsq8tf7cpq] {
    box-shadow: inset 4px 0 0 var(--ob-tone-muted);
}
/* /Components/Pages/SettingsReferenceData.razor.rz.scp.css */
/* The reference data (2026-09-16): wider cells than a step run form, because each field carries its help, its
   shipped value and what reads it. A field only Rewst reads is dimmed rather than hidden: it is still editable,
   and still the value the document will hand over when its step goes native. */
.ob-ref-grid[b-w9rsyevaka] {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1rem 1.25rem;
}

.ob-ref-field .ob-step-error[b-w9rsyevaka],
.ob-ref-field .ob-ref-meta[b-w9rsyevaka] {
    font-weight: 400;
}

.ob-ref-meta[b-w9rsyevaka] {
    font-size: .85em;
}

.ob-ref-rewst > label[b-w9rsyevaka] {
    opacity: .75;
}
/* /Components/Pages/SignIn.razor.rz.scp.css */
/* The Unavailable card's shape, so the two pages outside the signed-in chrome read as one family. */
.signin-card[b-5dzjgfokeu] {
    max-width: 30rem;
    text-align: center;
    background-color: var(--cn-card-background);
    border: 1px solid var(--cn-border);
    border-radius: 0.75rem;
    padding: 3rem 2.5rem;
    box-shadow: 0 4px 24px rgba(33, 51, 67, 0.08);
}

.signin-logo[b-5dzjgfokeu] {
    width: 4rem;
    height: auto;
    margin-bottom: 1.5rem;
}

.signin-card h1[b-5dzjgfokeu] {
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
}

.signin-card p[b-5dzjgfokeu] {
    color: var(--cn-muted-foreground);
}

.signin-welcome[b-5dzjgfokeu] {
    display: block;
    width: 100%;
    margin: 1.25rem 0 1.75rem;
}

/* Deliberately quieter than the button: staff know where it is; customers should not have to choose
   between two equal-looking options. */
.signin-staff[b-5dzjgfokeu] {
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--cn-border);
    font-size: 0.9rem;
}

.signin-failed[b-5dzjgfokeu] {
    color: #b3261e !important;
}
/* /Components/Pages/Unavailable.razor.rz.scp.css */
.unavailable-card[b-8djpitc185] {
    max-width: 30rem;
    text-align: center;
    background-color: var(--cn-card-background);
    border: 1px solid var(--cn-border);
    border-radius: 0.75rem;
    padding: 3rem 2.5rem;
    box-shadow: 0 4px 24px rgba(33, 51, 67, 0.08);
}

.unavailable-logo[b-8djpitc185] {
    width: 4rem;
    height: auto;
    margin-bottom: 1.5rem;
}

.unavailable-card h1[b-8djpitc185] {
    font-size: 1.35rem;
    margin-bottom: 0.75rem;
}

.unavailable-card p[b-8djpitc185] {
    color: var(--cn-muted-foreground);
    margin-bottom: 0;
}