/* /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: #fff;
        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 #dee2e6;
    flex-shrink: 0;
}

.all-items-close[b-97a7i4r83r] {
    cursor: pointer;
    color: #6c757d;
    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: #212529;
    text-align: center;
    border-radius: 8px;
}

    .all-items-tile:hover[b-97a7i4r83r] {
        background-color: rgba(13, 110, 253, 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: #0d6efd;
    color: #fff;
    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: #fff;
        border-top: 1px solid #dee2e6;
        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: #6c757d;
        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: #0d6efd;
        }

    .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: #f8f9fa;
    border-right: 1px solid #dee2e6;
}

.top-row[b-bz75y0gs9w] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    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;
    }
}

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

    .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: #343a40 !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: rgba(0, 0, 0, 0.05);
        color: #212529;
    }

/* 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: #0d6efd !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: #6c757d !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: #adb5bd;
    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: #212529;
    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 rgba(0, 0, 0, 0.05);
}

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

.top-row[b-uo13x8639l] {
    min-height: 3.5rem;
    background-color: #eef0f2;
    border-bottom: 1px solid #dee2e6;
}

.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: #495057;
    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(13, 110, 253, 0.12);
    color: #0d6efd;
}

.nav-link:hover[b-uo13x8639l] {
    background-color: rgba(0, 0, 0, 0.05);
    color: #212529;
}

.nav-expand-collapse-all[b-uo13x8639l] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    font-size: 0.75rem;
    color: #6c757d;
    padding-bottom: 0.5rem;
}

    .nav-expand-collapse-all[b-uo13x8639l]  .nav-link-plain {
        background: none;
        border: none;
        color: #6c757d;
        font-size: 0.75rem;
        padding: 0;
        cursor: pointer;
    }

        .nav-expand-collapse-all[b-uo13x8639l]  .nav-link-plain:hover {
            color: #212529;
            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: #0d6efd;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
}

.nav-profile-name[b-uo13x8639l] {
    font-weight: 500;
    color: #212529;
    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) {
    .nav-scrollable[b-uo13x8639l] {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 80%;
        max-width: 300px;
        background-color: #f7f7f7;
        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;
    }
}
/* /Components/Layout/PortalLayout.razor.rz.scp.css */
nav .btn[b-trzgc9rjsw] {
    color: #212529;
    background-color: #f8f9fa;
}

nav .btn:hover[b-trzgc9rjsw] {
    background-color: #e9ecef;
}

nav .btn.active[b-trzgc9rjsw] {
    background-color: var(--bs-primary, #0d6efd);
    color: #fff;
}
/* /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: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-s61t961bzl] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-s61t961bzl] {
        background-color: #6b9ed2;
    }

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

    .components-rejoining-animation div[b-s61t961bzl] {
        position: absolute;
        border: 3px solid #0087ff;
        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 #dee2e6;
    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: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    font-size: 0.85rem;
}

.custom-calendar-day-cell[b-eg033y1u6g] {
    min-height: 100px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding: 0.25rem;
}

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

.custom-calendar-day-outside[b-eg033y1u6g] {
    background: #fafafa;
    color: #adb5bd;
}

.custom-calendar-day-today[b-eg033y1u6g] {
    background: #eef6ff;
}

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

.custom-calendar-event[b-eg033y1u6g] {
    background: #0d6efd;
    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: #0b5ed7;
    }

.custom-calendar-event-more[b-eg033y1u6g] {
    font-size: 0.7rem;
    color: #6c757d;
}
/* /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 #dee2e6;
    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: #f1f3f5;
}

[b-kxsflf62rh] .chat-inbox-item.active {
    background-color: #e7f1ff;
}

[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: #f1f3f5;
}

[b-kxsflf62rh] .chat-message.mine {
    margin-left: auto;
    background-color: #e7f1ff;
}

[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 #dee2e6;
    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 #dee2e6;
}

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

    .nav-category-row:hover[b-gip6smul2h] {
        background-color: rgba(0, 0, 0, 0.03);
    }

.nav-category-row-icon[b-gip6smul2h] {
    font-size: 1.15rem;
    color: #0d6efd;
    width: 1.5rem;
    flex-shrink: 0;
    text-align: center;
}

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

.nav-category-row-chevron[b-gip6smul2h] {
    color: #adb5bd;
    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;
}