/* /Components/Company/CompanyDetail.razor.rz.scp.css */
/* Pilot: bold the active tab's label so it's easier to spot at a glance, especially now
   that tabs can also be in a disabled/greyed state - three visual states to tell apart
   instead of two. Scoped to Company only for now; roll out to the other entities' Detail
   components once confirmed. */
[b-tqsjuv6sw8] .e-toolbar-item .e-tab-text {
    font-weight: 400;
}

[b-tqsjuv6sw8] .e-toolbar-item.e-active .e-tab-text {
    font-weight: 700;
}
/* /Components/Layout/AllItemsPanel.razor.rz.scp.css */
.all-items-toggler[b-97a7i4r83r] {
    display: none;
}

.all-items-backdrop[b-97a7i4r83r],
.all-items-panel[b-97a7i4r83r] {
    display: none;
}

@media (max-width: 640.98px) {
    .all-items-backdrop[b-97a7i4r83r] {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1060;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .all-items-panel[b-97a7i4r83r] {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 82%;
        max-width: 340px;
        background-color: var(--cm-surface);
        box-shadow: -2px 0 12px rgba(0, 0, 0, 0.2);
        z-index: 1070;
        overflow-y: auto;
        transform: translateX(100%);
        transition: transform 0.25s ease;
    }

    .all-items-toggler:checked ~ .all-items-backdrop[b-97a7i4r83r] {
        opacity: 1;
        pointer-events: auto;
    }

    .all-items-toggler:checked ~ .all-items-panel[b-97a7i4r83r] {
        transform: translateX(0);
    }
}

.all-items-header[b-97a7i4r83r] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
    border-bottom: 1px solid var(--cm-border);
    flex-shrink: 0;
}

.all-items-close[b-97a7i4r83r] {
    cursor: pointer;
    color: var(--cm-text-muted);
    padding: 0.25rem;
}

.all-items-grid[b-97a7i4r83r] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 1rem;
}

.all-items-tile[b-97a7i4r83r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 0.25rem;
    text-decoration: none;
    color: var(--cm-text);
    text-align: center;
    border-radius: 8px;
}

    .all-items-tile:hover[b-97a7i4r83r] {
        background-color: rgba(var(--cm-accent-rgb), 0.06);
    }

.all-items-tile-icon[b-97a7i4r83r] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--cm-accent);
    color: var(--cm-on-accent);
    font-size: 1.2rem;
}

.all-items-tile-label[b-97a7i4r83r] {
    font-size: 0.75rem;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* /Components/Layout/BottomTabBar.razor.rz.scp.css */
.bottom-tab-bar[b-g6jod8z4fe] {
    display: none;
}

@media (max-width: 640.98px) {
    .bottom-tab-bar[b-g6jod8z4fe] {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3.75rem;
        background-color: var(--cm-surface);
        border-top: 1px solid var(--cm-border);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
        z-index: 1030;
    }

    .bottom-tab[b-g6jod8z4fe] {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.15rem;
        color: var(--cm-text-muted);
        text-decoration: none;
        background: none;
        border: none;
        font-size: 0.7rem;
        padding: 0.3rem 0;
    }

        .bottom-tab .bi[b-g6jod8z4fe],
        .bottom-tab .e-icons[b-g6jod8z4fe] {
            font-size: 1.15rem;
            line-height: 1;
            margin: 0;
        }

        .bottom-tab.active[b-g6jod8z4fe] {
            color: var(--cm-accent);
        }

    .bottom-tab-label[b-g6jod8z4fe] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-bz75y0gs9w] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-bz75y0gs9w] {
    flex: 1;
    min-width: 0;
}

.sidebar[b-bz75y0gs9w] {
    background-color: var(--cm-surface-alt3);
    border-right: 1px solid var(--cm-border);
}

.top-row[b-bz75y0gs9w] {
    background-color: var(--cm-surface-alt3);
    border-bottom: 1px solid var(--cm-border);
    justify-content: flex-end;
    /* Was a fixed 3.5rem with no wrapping, so nine controls simply ran off the right-hand edge
       of a narrow window and gave the whole page a horizontal scrollbar. It now keeps that
       height when everything fits and grows a row when it does not. */
    min-height: 3.5rem;
    display: flex;
    flex-wrap: wrap;
    row-gap: .35rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
    align-items: center;
}

    /* The tenant's name gives way first - the buttons are what people came for. */
    .top-row[b-bz75y0gs9w]  .topbar-sitename {
        min-width: 0;
        max-width: 45%;
    }

    .top-row[b-bz75y0gs9w]  .topbar-label {
        margin-left: .25rem;
    }

/* Below this the labels go and the icons stay: every action is still reachable, in one row,
   without the page scrolling sideways. Each button keeps its title for the tooltip. */
@media (max-width: 1100px) {
    .top-row[b-bz75y0gs9w]  .topbar-label {
        display: none;
    }
}

    /* Spacing between the header buttons is the container's 8px gap alone. This used to add
       1.5rem before every LINK (a Blazor template leftover) but not before real buttons, so the
       gaps came out 32 / 32 / 8 / 32... (owner, 2026-09-22: "evenly"). */
    .top-row[b-bz75y0gs9w]  a, .top-row[b-bz75y0gs9w]  .btn-link {
        white-space: nowrap;
        text-decoration: none;
    }

    /* The small separation before "you": your picture and Sign out. */
    .top-row[b-bz75y0gs9w]  .topbar-me {
        margin-left: .75rem;
    }

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

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

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

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

    /* Room for BottomTabBar's fixed 3.75rem height, so it never overlaps page content */
    main[b-bz75y0gs9w] {
        padding-bottom: 3.75rem;
    }
}

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

    .sidebar[b-bz75y0gs9w] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
        transition: width 0.15s ease;
    }

    /* Desktop icon-rail toggle (NavMenu's chevron button) - the mobile hamburger drawer below
       640.98px is untouched and uses a completely different mechanism (overlay, not width). */
    .sidebar.collapsed[b-bz75y0gs9w] {
        width: 64px;
    }

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

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

    .top-row[b-bz75y0gs9w], article[b-bz75y0gs9w] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-bz75y0gs9w] {
    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-bz75y0gs9w] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavGroup.razor.rz.scp.css */
.nav-item[b-23lzwmspaw] {
    /* --cm-nav-font, not --cm-ui-font: the menu runs one step below the forms (app.css explains
       why). Was a hardcoded 0.9rem, which is why the group headers ignored the density entirely. */
    font-size: var(--cm-nav-font);
    padding-bottom: 0;
}

.nav-group-header[b-23lzwmspaw] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* ::deep for the same reason as the child rows below: on the plain-link branch (Reference Admin)
   .nav-group-header-main is on a <NavLink> COMPONENT, which never receives the scope attribute -
   so without ::deep that one row got none of this and sat at Bootstrap's own size. On the
   collapsible branch it is a real <span>, and this still matches it. */
.nav-group-header[b-23lzwmspaw]  .nav-group-header-main {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    color: var(--cm-text-strong) !important;
    text-decoration: none !important;
    font-weight: 500;
    min-height: var(--cm-nav-row);
    padding-top: var(--cm-nav-pad);
    padding-bottom: var(--cm-nav-pad);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}

    .nav-group-header[b-23lzwmspaw]  .nav-group-header-main .bi,
    .nav-group-header[b-23lzwmspaw]  .nav-group-header-main .e-icons {
        display: inline-block;
        width: 1.25rem;
        margin-right: 0.6rem;
        text-align: center;
        flex-shrink: 0;
    }

    .nav-group-header[b-23lzwmspaw]  .nav-group-header-main .e-icons {
        font-size: var(--cm-nav-icon);
        line-height: 1.2;
    }

    .nav-group-header[b-23lzwmspaw]  .nav-group-header-main:hover {
        background-color: var(--cm-hover-wash);
        color: var(--cm-text);
    }

/* Sits right next to the label, not flushed to the row's far edge - overriding the shared
   .nav-group-header-main's flex:1 (meant for the chevron-branch layout) only on rows that
   actually have an info icon, so the chevron branch's own far-right icon is untouched. */
.nav-group-header:has(.nav-group-info)[b-23lzwmspaw]  .nav-group-header-main {
    flex: 0 1 auto;
}

.nav-group-info[b-23lzwmspaw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 1.5rem;
    margin-left: 0.35rem;
    color: var(--cm-accent) !important;
    padding: 0 0.3rem;
    font-size: 1rem;
    line-height: 1;
}

.nav-group-view-all[b-23lzwmspaw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    height: 1.5rem;
    color: var(--cm-text-muted) !important;
    padding: 0 0.4rem;
    font-size: 1rem;
    line-height: 1;
}

.nav-group-chevron[b-23lzwmspaw] {
    margin-left: auto;
    transition: transform 0.15s ease;
    font-size: 1.1rem;
}

    .nav-group-chevron.expanded[b-23lzwmspaw] {
        transform: rotate(90deg);
    }

.nav-group-children[b-23lzwmspaw] {
    /* Indent so a child row's ICON starts where the parent's TEXT starts, giving the
       usual nested-list look instead of stacking child icons flush under the parent's
       own icon column. Value found empirically (measured via getBoundingClientRect on
       the rendered nav): the box model here has ~1rem of unaccounted offset beyond the
       parent icon's own width+margin, so this is NOT simply "parent icon width + margin" -
       re-measure live before changing it rather than recomputing from the CSS alone. */
    padding-left: 0.85rem;
}

.nav-group-placeholder[b-23lzwmspaw] {
    display: block;
    font-size: 0.8rem;
    font-style: italic;
    color: var(--cm-text-subtle);
    padding: 0.3rem 0;
}

/* THE ONLY RULES THAT REACH A CHILD ROW.
   A child row is a <NavLink> COMPONENT, and Blazor's scoped-CSS attribute is only ever stamped
   onto HTML elements - never onto a component tag. So the <a> NavLink renders carries no
   b-xxxxxxxxxx attribute, NavMenu.razor.css's own `.nav-link` block (display:flex, the padding
   overrides, line-height) never matched a single one of them, and Bootstrap's untouched
   `.nav-link { display: block; padding: .5rem 1rem }` was what actually applied: 16px of dead
   vertical padding per row, plus a 20px icon floor, on rows whose text is 14px.

   ::deep drops the scope requirement for descendants, which is why this block worked when the
   one next door did not - so the full box model has to be restated here rather than inherited. */
.nav-group-children[b-23lzwmspaw]  .nav-link {
    font-size: var(--cm-nav-font);
    min-height: var(--cm-nav-row);
    display: flex;
    align-items: center;
    line-height: 1.2;
    /* Replaces Bootstrap's .5rem/1rem outright. The left side is zero so a child row's icon
       lines up with the column .nav-group-children's own padding-left establishes. */
    padding: var(--cm-nav-pad) 0.5rem var(--cm-nav-pad) 0;
}

    .nav-group-children[b-23lzwmspaw]  .nav-link .e-icons {
        font-size: var(--cm-nav-icon);
        line-height: 1.2;
    }

/* A NESTED GROUP lines up with the plain rows it sits among.
   Custom Fields is a NavGroup inside Site Admin's children, and it renders its own
   <div class="nav-item px-3"> - 1rem of Bootstrap padding stacked on top of the indent this
   container already applies, so its header sat 1rem to the right of All Sites, Site Settings and
   Current Users, which are plain rows with no such wrapper. !important because Bootstrap's px-3
   utility is itself !important and nothing weaker would beat it.
   Its OWN children keep their indent - they get it from a fresh .nav-group-children below. */
.nav-group-children[b-23lzwmspaw]  .nav-item {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-uo13x8639l] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--cm-text);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(0, 0, 0, 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%2833, 37, 41, 0.65%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem var(--cm-hover-wash);
}

.navbar-toggler:checked[b-uo13x8639l] {
    background-color: rgba(0, 0, 0, 0.1);
}

.top-row[b-uo13x8639l] {
    min-height: 3.5rem;
    background-color: var(--cm-surface-alt3);
    border-bottom: 1px solid var(--cm-border);
}

.navbar-brand[b-uo13x8639l] {
    font-size: 1.1rem;
}

.bi[b-uo13x8639l],
.e-icons[b-uo13x8639l] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    margin-right: 0.6rem;
    text-align: center;
    flex-shrink: 0;
}

.e-icons[b-uo13x8639l] {
    /* Was 1.05rem on a 1.25rem line - a 20px floor under every row it appeared in, which kept the
       row from following the font down. Moves with the density now. */
    font-size: var(--cm-nav-icon);
    line-height: 1.2;
}

.nav-item[b-uo13x8639l] {
    /* --cm-nav-font, not --cm-ui-font: the menu runs one step below the forms (app.css explains
       why). Was a hardcoded 0.9rem. */
    font-size: var(--cm-nav-font);
    padding-bottom: 0;
}

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

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

/* NOTE: this block does NOT reach the menu's child rows. Those are <NavLink> COMPONENTS, and a
   scoped-CSS attribute is never stamped onto a component tag, so `.nav-link[b-xxxxxxxxxx]` cannot
   match them - NavGroup.razor.css's ::deep block is what styles them. This still applies to plain
   <a class="nav-link"> elements written directly in NavMenu.razor, so it is kept in step with it. */
.nav-link[b-uo13x8639l] {
    color: var(--cm-text-body);
    background: none;
    border: none;
    border-radius: 4px;
    min-height: var(--cm-nav-row);
    display: flex;
    align-items: center;
    line-height: 1.2;
    width: 100%;
    padding-top: var(--cm-nav-pad);
    padding-bottom: var(--cm-nav-pad);
    /* Bootstrap's own .nav-link sets padding-left/right: 1rem via its shorthand - override
       both explicitly so a child link's icon starts flush with the parent header's icon
       (which uses no Bootstrap .nav-link heritage), keeping the two text columns aligned. */
    padding-left: 0;
    padding-right: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .nav-link .bi[b-uo13x8639l] {
        flex-shrink: 0;
        top: 0;
    }

a.active[b-uo13x8639l] {
    background-color: rgba(var(--cm-accent-rgb), 0.12);
    color: var(--cm-accent);
}

.nav-link:hover[b-uo13x8639l] {
    background-color: var(--cm-hover-wash);
    color: var(--cm-text);
}

.nav-expand-collapse-all[b-uo13x8639l] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    font-size: var(--cm-nav-font);
    color: var(--cm-text-muted);
    padding-bottom: 0.5rem;
}

    .nav-expand-collapse-all[b-uo13x8639l]  .nav-link-plain {
        background: none;
        border: none;
        color: var(--cm-text-muted);
        font-size: var(--cm-nav-font);
        padding: 0;
        cursor: pointer;
    }

        .nav-expand-collapse-all[b-uo13x8639l]  .nav-link-plain:hover {
            color: var(--cm-text);
            text-decoration: underline;
        }

.nav-backdrop[b-uo13x8639l] {
    display: none;
}

/* Desktop icon-rail collapse (MainLayout's chevron toggle button, not the mobile hamburger
   drawer above/below) - hides every text label, including inside child NavGroup components via
   ::deep since those render under their own component scope. Icons stay visible and centered;
   each item's own title="" attribute (set in NavGroup.razor / MobileTabSelector-style markup)
   is what surfaces the name on hover, not a separate tooltip component. */
.nav-collapsed .nav-item[b-uo13x8639l] {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.nav-collapsed .nav-profile-name[b-uo13x8639l],
.nav-collapsed[b-uo13x8639l]  .nav-group-header-text,
.nav-collapsed[b-uo13x8639l]  .nav-group-chevron,
.nav-collapsed[b-uo13x8639l]  .nav-group-view-all,
.nav-collapsed[b-uo13x8639l]  .nav-group-info {
    display: none !important;
}

.nav-collapsed[b-uo13x8639l]  .nav-group-header-main {
    justify-content: center;
}

    .nav-collapsed[b-uo13x8639l]  .nav-group-header-main .bi,
    .nav-collapsed[b-uo13x8639l]  .nav-group-header-main .e-icons {
        margin-right: 0;
    }

.nav-collapsed .nav-profile-chip[b-uo13x8639l] {
    justify-content: center;
}

.nav-profile-chip[b-uo13x8639l] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    /* Shrinks to make room for the bell button instead of pushing it out - min-width: 0
       overrides flex's default "never shrink below content size", which is what actually lets
       .nav-profile-name's ellipsis below take effect rather than just overflowing. */
    flex: 1 1 auto;
    min-width: 0;
}

.nav-profile-avatar[b-uo13x8639l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--cm-accent);
    color: var(--cm-on-accent);
    font-weight: 600;
    font-size: 0.9rem;
}

.nav-profile-name[b-uo13x8639l] {
    font-weight: 500;
    color: var(--cm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Below the desktop breakpoint, the nav slides in as a true overlay drawer (not an
   inline block that pushes page content down) with a dimmed backdrop behind it,
   matching the legacy COT app's mobile pattern. */
@media (max-width: 640.98px) {
    /* THE HAMBURGER IS ABSOLUTELY POSITIONED AND .top-row IS NOT A POSITIONED ANCESTOR, so it is
       laid out against the page and sits OVER whatever the header flows into that corner. It is
       3.5rem wide at right: 1rem, and its background is an SVG of three lines - so the middle
       line (M4 15h22) drew straight through the "Show Guide" text at mid-height and looked for
       all the world like a strikethrough. It was also on top, so tapping the word Guide opened
       the drawer instead of starting the tour.

       Reserving the footprint fixes the class of bug rather than this one instance: anything
       added to the header from now on stops short of the toggler instead of sliding under it. */
    .top-row .container-fluid[b-uo13x8639l] {
        padding-right: 5rem;
    }

    /* And the button goes, because even with the room reserved it does not fit beside the logo
       and the collapse control at 375px - it would simply wrap to a second row. Replaying the
       navigation tour is a desktop onboarding affordance; nothing else reaches it from here. */
    .tour-replay[b-uo13x8639l] {
        display: none;
    }

    .nav-scrollable[b-uo13x8639l] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 80%;
        max-width: 300px;
        background-color: var(--cm-surface-alt3);
        box-shadow: 2px 0 12px rgba(0, 0, 0, 0.2);
        z-index: 1050;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    .navbar-toggler:checked ~ .nav-scrollable[b-uo13x8639l] {
        transform: translateX(0);
    }

    .nav-backdrop[b-uo13x8639l] {
        display: block;
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1040;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.25s ease;
    }

    .navbar-toggler:checked ~ .nav-backdrop[b-uo13x8639l] {
        opacity: 1;
        pointer-events: auto;
    }
}

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

    .nav-scrollable[b-uo13x8639l] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}

/* Flow headings inside a nav group (Real Estate's Rental / Sales). Quiet on purpose: it is a
   label for the items under it, not another thing to click. Hidden on the collapsed icon rail,
   where there is no room for a word. */
.nav-flow-label[b-uo13x8639l] {
    padding: 0.5rem 1rem 0.15rem 1.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.55;
    white-space: nowrap;
}

.nav-collapsed .nav-flow-label[b-uo13x8639l] {
    display: none;
}
/* /Components/Layout/PortalLayout.razor.rz.scp.css */
nav .btn[b-trzgc9rjsw] {
    color: var(--cm-text);
    background-color: var(--cm-surface-alt3);
}

nav .btn:hover[b-trzgc9rjsw] {
    background-color: var(--cm-surface-alt2);
}

nav .btn.active[b-trzgc9rjsw] {
    background-color: var(--bs-primary, var(--cm-accent));
    color: var(--cm-on-accent);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-s61t961bzl],
.components-reconnect-repeated-attempt-visible[b-s61t961bzl],
.components-reconnect-failed-visible[b-s61t961bzl],
.components-pause-visible[b-s61t961bzl],
.components-resume-failed-visible[b-s61t961bzl],
.components-rejoining-animation[b-s61t961bzl] {
    display: none;
}

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


#components-reconnect-modal[b-s61t961bzl] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-s61t961bzl 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-s61t961bzl]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-s61t961bzl 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

#components-reconnect-modal p[b-s61t961bzl] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-s61t961bzl] {
    border: 0;
    background-color: var(--cm-accent);
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-s61t961bzl] {
        background-color: var(--cm-accent-border);
    }

    #components-reconnect-modal button:active[b-s61t961bzl] {
        background-color: var(--cm-accent);
    }

.components-rejoining-animation[b-s61t961bzl] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-s61t961bzl] {
        position: absolute;
        border: 3px solid var(--cm-accent);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-s61t961bzl 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-s61t961bzl] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-s61t961bzl {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/AllSites.razor.rz.scp.css */
/* pointer-events:none is an inherited CSS property, so this single wrapper is enough to
   make every descendant inert (inputs, buttons, grid edit links) - including elements
   rendered by child components (SiteSettingsTabsContent and everything under it), no
   ::deep needed since inheritance isn't selector-based. */
.readonly-overlay[b-grfi0wcsiv] {
    pointer-events: none;
    user-select: none;
}

/* ::deep pierces into child components (everything under SiteSettingsTabsContent) since
   plain descendant selectors can't cross a CSS-isolation boundary - dims anything that
   normally invites a click, so the read-only state reads as "disabled", not "broken".
   Grid/label text is deliberately left untouched so the actual data stays fully legible. */
.readonly-overlay[b-grfi0wcsiv]  button,
.readonly-overlay[b-grfi0wcsiv]  .e-btn,
.readonly-overlay[b-grfi0wcsiv]  input,
.readonly-overlay[b-grfi0wcsiv]  textarea,
.readonly-overlay[b-grfi0wcsiv]  .e-input-group,
.readonly-overlay[b-grfi0wcsiv]  .e-upload {
    opacity: 0.55;
    filter: grayscale(40%);
}

/* The Website field's "open in a new tab" icon stays live even in the read-only view - it's
   a navigation, not an edit, so there's no reason to block it the way every other control is. */
.readonly-overlay[b-grfi0wcsiv]  .website-link-icon {
    pointer-events: auto;
}
/* /Components/Pages/EventInfo.razor.rz.scp.css */
.custom-calendar[b-eg033y1u6g] {
    border: 1px solid var(--cm-border);
    border-radius: 4px;
    overflow: hidden;
}

.custom-calendar-row[b-eg033y1u6g] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.custom-calendar-header-cell[b-eg033y1u6g] {
    padding: 0.5rem;
    text-align: center;
    font-weight: 600;
    background: var(--cm-surface-alt3);
    border-bottom: 1px solid var(--cm-border);
    font-size: 0.85rem;
}

.custom-calendar-day-cell[b-eg033y1u6g] {
    min-height: 100px;
    border-right: 1px solid var(--cm-border-subtle);
    border-bottom: 1px solid var(--cm-border-subtle);
    padding: 0.25rem;
}

    .custom-calendar-day-cell:nth-child(7n)[b-eg033y1u6g] {
        border-right: none;
    }

.custom-calendar-day-outside[b-eg033y1u6g] {
    background: var(--cm-surface-alt3);
    color: var(--cm-text-subtle);
}

.custom-calendar-day-today[b-eg033y1u6g] {
    background: var(--cm-accent-wash);
}

.custom-calendar-day-number[b-eg033y1u6g] {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.custom-calendar-event[b-eg033y1u6g] {
    background: var(--cm-accent);
    color: white;
    font-size: 0.75rem;
    padding: 1px 4px;
    border-radius: 3px;
    margin-bottom: 2px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

    .custom-calendar-event:hover[b-eg033y1u6g] {
        background: var(--cm-accent-border);
    }

.custom-calendar-event-more[b-eg033y1u6g] {
    font-size: 0.7rem;
    color: var(--cm-text-muted);
}
/* /Components/Pages/Messages.razor.rz.scp.css */
.messages-page[b-kxsflf62rh] {
    display: flex;
    gap: 1.5rem;
    height: calc(100vh - 120px);
}

.messages-inbox-pane[b-kxsflf62rh] {
    width: 320px;
    flex-shrink: 0;
    overflow-y: auto;
    border-right: 1px solid var(--cm-border);
    padding-right: 1rem;
}

.messages-thread-pane[b-kxsflf62rh] {
    flex-grow: 1;
    overflow-y: auto;
}

[b-kxsflf62rh] .chat-inbox-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

[b-kxsflf62rh] .chat-inbox-item {
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    cursor: pointer;
}

[b-kxsflf62rh] .chat-inbox-item:hover {
    background-color: var(--cm-surface-alt2);
}

[b-kxsflf62rh] .chat-inbox-item.active {
    background-color: var(--cm-accent-wash);
}

[b-kxsflf62rh] .chat-inbox-preview {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

[b-kxsflf62rh] .chat-thread {
    display: flex;
    flex-direction: column;
    height: 100%;
}

[b-kxsflf62rh] .chat-thread-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 0.5rem;
}

[b-kxsflf62rh] .chat-message {
    max-width: 65%;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--cm-surface-alt2);
}

[b-kxsflf62rh] .chat-message.mine {
    margin-left: auto;
    background-color: var(--cm-accent-wash);
}

[b-kxsflf62rh] .chat-message-meta {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

[b-kxsflf62rh] .chat-message-body {
    white-space: pre-wrap;
}

[b-kxsflf62rh] .chat-message-project {
    display: inline-block;
    margin-top: 0.35rem;
}

[b-kxsflf62rh] .chat-thread-compose {
    border-top: 1px solid var(--cm-border);
    padding-top: 0.75rem;
}
/* /Components/Pages/NavCategory.razor.rz.scp.css */
.nav-category-list[b-gip6smul2h] {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--cm-border);
}

.nav-category-row[b-gip6smul2h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 0.25rem;
    border-bottom: 1px solid var(--cm-border);
    color: var(--cm-text);
    text-decoration: none;
    font-size: 1rem;
}

    .nav-category-row:hover[b-gip6smul2h] {
        background-color: var(--cm-hover-wash);
    }

.nav-category-row-icon[b-gip6smul2h] {
    font-size: 1.15rem;
    color: var(--cm-accent);
    width: 1.5rem;
    flex-shrink: 0;
    text-align: center;
}

.nav-category-row-title[b-gip6smul2h] {
    flex: 1;
}

.nav-category-row-chevron[b-gip6smul2h] {
    color: var(--cm-text-subtle);
    font-size: 0.9rem;
}
/* /Components/Pages/ReferenceAdmin.razor.rz.scp.css */
.ref-admin-directory[b-bsjrrm5vw2] {
    /* A fixed-row CSS grid (grid-auto-flow: column) forces every column to share the same
       row heights, so any one entry with a taller cell (e.g. one with a Description line)
       stretches that row across all columns, leaving ragged gaps next to shorter entries in
       the same row. A real multi-column layout lets each column flow independently instead -
       one tall entry only affects its own column, never its neighbors. */
    column-width: 230px;
    column-gap: 2rem;
}

.ref-admin-entry[b-bsjrrm5vw2] {
    break-inside: avoid;
    margin-bottom: 0.75rem;
}
/* /Components/Site/DocumentBrandingForm.razor.rz.scp.css */
/* Columns inside a header or footer section.

   A letterhead must not print gridlines, so the tables these editors insert are borderless.
   That leaves nothing on screen to aim at - you cannot click a column you cannot see. These
   rules draw the cell boundaries IN THE EDITOR ONLY.

   They are page CSS, never inline style, so none of it reaches the saved section HTML or the
   generated PDF. What is stored stays exactly what was typed. */

[b-4tl6uip4s3] .e-richtexteditor .e-rte-content table td,
[b-4tl6uip4s3] .e-richtexteditor .e-rte-content table th {
    outline: 1px dashed var(--bs-border-color, #c9d3de);
    outline-offset: -1px;
    min-height: 1.5rem;
}

/* The cell the caret is in. A contenteditable keeps focus on its host rather than the cell, so
   :focus-within does not fire on a td - this highlights on hover instead, which is what tells
   you which column a click is about to land in. */
[b-4tl6uip4s3] .e-richtexteditor .e-rte-content table td:hover {
    outline-color: var(--bs-primary, #2b5f8a);
    outline-width: 2px;
    background: rgba(43, 95, 138, 0.04);
}

/* Syncfusion's resize handles sit on the column edges. Without a little room they are hard to
   grab in a box this narrow. */
[b-4tl6uip4s3] .e-richtexteditor .e-rte-content table {
    margin: 0.15rem 0;
}

/* The editor inserts <p> on its own - it rewrote an inserted div into <p><strong> - and a <p>
   carries a default margin top and bottom. In a letterhead that reads as a blank line under the
   company name and as the name sitting low beside the logo.

   TidySection converts <p> to <div> on save, so the PDF is right. This is the editor's half: it
   makes what you are looking at match what will print, instead of showing spacing the document
   will not have. */
[b-4tl6uip4s3] .e-richtexteditor .e-rte-content p {
    margin: 0;
}
/* /Components/Site/SiteSettingsTabsContent.razor.rz.scp.css */
/* Locks one tab's content while the rest of the dialog is editable. pointer-events is
   inherited, so this single wrapper covers everything the tab renders; ::deep is needed
   because that content belongs to child components, not to this file's own markup. */
.tab-readonly[b-xemqv34fab] {
    pointer-events: none;
    opacity: 0.65;
}

/* Without this a disabled-looking control still shows a pointer cursor, which reads as
   "broken" rather than "not available". */
.tab-readonly[b-xemqv34fab]  button,
.tab-readonly[b-xemqv34fab]  .e-btn,
.tab-readonly[b-xemqv34fab]  input,
.tab-readonly[b-xemqv34fab]  textarea,
.tab-readonly[b-xemqv34fab]  select,
.tab-readonly[b-xemqv34fab]  .e-input-group,
.tab-readonly[b-xemqv34fab]  .e-upload {
    cursor: not-allowed;
}