@import '_content/Lib.Core/Lib.Core.xjbnlvu9d9.bundle.scp.css';
@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.boiwgh0w5b.bundle.scp.css';

/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-gau1us81jw] {
    position: relative;
    display: flex;
    flex-direction: column;
}

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

.sidebar[b-gau1us81jw] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-gau1us81jw] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

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

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

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

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

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

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

    .sidebar[b-gau1us81jw] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

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

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

#blazor-error-ui[b-gau1us81jw] {
    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-gau1us81jw] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-1y9tfgp1oa] {
    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-1y9tfgp1oa] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-1y9tfgp1oa] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

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

.bi[b-1y9tfgp1oa] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-1y9tfgp1oa] {
    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-plus-square-fill-nav-menu[b-1y9tfgp1oa] {
    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-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.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 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-1y9tfgp1oa] {
    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-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.bi-lock-nav-menu[b-1y9tfgp1oa] {
    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-nested' viewBox='0 0 16 16'%3E%3Cpath d='M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}

.bi-person-nav-menu[b-1y9tfgp1oa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person' viewBox='0 0 16 16'%3E%3Cpath d='M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4Zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10Z'/%3E%3C/svg%3E");
}

.bi-person-badge-nav-menu[b-1y9tfgp1oa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-badge' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1h-3zM11 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'/%3E%3Cpath d='M4.5 0A2.5 2.5 0 0 0 2 2.5V14a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2.5A2.5 2.5 0 0 0 11.5 0h-7zM3 2.5A1.5 1.5 0 0 1 4.5 1h7A1.5 1.5 0 0 1 13 2.5v10.795a4.2 4.2 0 0 0-.776-.492C11.392 12.387 10.063 12 8 12s-3.392.387-4.224.803a4.2 4.2 0 0 0-.776.492V2.5z'/%3E%3C/svg%3E");
}

.bi-person-fill-nav-menu[b-1y9tfgp1oa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-person-fill' viewBox='0 0 16 16'%3E%3Cpath d='M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3Zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3C/svg%3E");
}

.bi-arrow-bar-left-nav-menu[b-1y9tfgp1oa] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-arrow-bar-left' viewBox='0 0 16 16'%3E%3Cpath d='M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5ZM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5Z'/%3E%3C/svg%3E");
}

.nav-item[b-1y9tfgp1oa] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

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

    .nav-item[b-1y9tfgp1oa]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-1y9tfgp1oa]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-1y9tfgp1oa]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

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

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

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

    .nav-scrollable[b-1y9tfgp1oa] {
        /* 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/Pages/Home.razor.rz.scp.css */
/*  Scoped to Home. app.css carries .page-header, .split, .tile and .tile-grid;
    everything below is specific to this console's landing screen and is kept
    here rather than widening the shared sheet for one page. */

.sw-sub[b-c74nnkr9io] {
    color: var(--muted, #94a3b8);
    font-size: .82rem;
    margin-top: 2px;
}

.sw-hero[b-c74nnkr9io] {
    border: 1px solid var(--bd, #24303d);
    border-left: 3px solid var(--teal, #2dd4bf);
    border-radius: 12px;
    background: var(--bg2, #131c26);
    padding: 14px 18px;
}

.sw-k[b-c74nnkr9io] {
    font-size: .66rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted, #94a3b8);
}

.sw-v[b-c74nnkr9io] {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text, #e2e8f0);
    margin-top: 5px;
    /*  Seven tier names wrap on a phone rather than forcing the card wide. */
    line-height: 1.45;
}

.sw-s[b-c74nnkr9io] {
    font-size: .78rem;
    color: var(--muted, #94a3b8);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.sw-empty[b-c74nnkr9io] {
    border: 1px dashed var(--bd, #24303d);
    border-radius: 12px;
    padding: 26px 20px;
    text-align: center;
    color: var(--muted, #94a3b8);
}

.sw-empty h2[b-c74nnkr9io] {
    margin: 0 0 6px;
    font-size: 1.05rem;
    color: var(--text, #e2e8f0);
}

.sw-empty p[b-c74nnkr9io] {
    margin: 0;
    font-size: .85rem;
    max-width: 46ch;
    margin-inline: auto;
    line-height: 1.55;
}

/*  .tile is a flex row in app.css; these two stack inside it. */
.sw-tn[b-c74nnkr9io] {
    display: block;
    font-weight: 600;
    color: var(--text, #e2e8f0);
}

.sw-td[b-c74nnkr9io] {
    display: block;
    font-size: .78rem;
    color: var(--muted, #94a3b8);
    margin-top: 3px;
    line-height: 1.5;
}
/* /Components/Pages/Members.razor.rz.scp.css */
/*  Scoped to Members. Shares .page-header, .btn and the .sw-* helpers with
    Home; everything list-specific lives here. */

.mb-bar[b-aq6h5v3ia2] {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    /*  Wrap rather than overflow. At 410px the select, the search box and the
        count do not fit on one line, and a filter bar that pushes the page
        sideways is worse than one that takes two rows. */
    flex-wrap: wrap;
}

.mb-sel[b-aq6h5v3ia2],
.mb-find[b-aq6h5v3ia2] {
    background: var(--bg2, #131c26);
    border: 1px solid var(--bd, #24303d);
    color: var(--text, #e2e8f0);
    border-radius: 9px;
    padding: 9px 11px;
    font-size: .86rem;
    min-width: 0;
}

.mb-find[b-aq6h5v3ia2] { flex: 1 1 9rem; }

/*  app.css:183 gives every select width:100%. Combined with flex:0 0 auto that
    made this one 378px on a 410px screen and unshrinkable, so it pushed the
    search box and the count off-screen and scrolled the whole document. Both
    halves have to be undone: the width AND the refusal to shrink. */
.mb-sel[b-aq6h5v3ia2] {
    flex: 0 1 auto;
    width: auto;
    max-width: 48%;
}

.mb-find:focus[b-aq6h5v3ia2],
.mb-sel:focus[b-aq6h5v3ia2] {
    outline: 2px solid var(--teal, #2dd4bf);
    outline-offset: -1px;
}

.mb-count[b-aq6h5v3ia2] {
    font-size: .75rem;
    color: var(--muted, #94a3b8);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
    min-width: 3ch;
    text-align: right;
}

.mb-list[b-aq6h5v3ia2] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mb-row[b-aq6h5v3ia2] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    border: 1px solid var(--bd, #24303d);
    border-radius: 12px;
    /*  A hair lighter at the top than the bottom: enough to lift the card off a
        flat dark list without becoming a gradient anyone notices. */
    background: linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,0) 60%), var(--bg2, #131c26);
    padding: 12px 14px 12px 17px;
    overflow: hidden;
    transition: border-color .15s, transform .12s;
}

/*  Layer rail. A list mixing booth, sector and assembly accounts reads by tier
    from the edge colour alone, before any text is parsed. Colours match the
    per-layer brand already used on each app's topbar. */
.mb-row[b-aq6h5v3ia2]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--rail, #3f5061);
}

.mb-row.lay-booth[b-aq6h5v3ia2]         { --rail: #f59e0b; }
.mb-row.lay-sector[b-aq6h5v3ia2]        { --rail: #10b981; }
.mb-row.lay-assembly[b-aq6h5v3ia2]      { --rail: #ef4444; }
.mb-row.lay-parliamentary[b-aq6h5v3ia2] { --rail: #3b82f6; }
.mb-row.lay-district[b-aq6h5v3ia2]      { --rail: #a855f7; }
.mb-row.lay-community[b-aq6h5v3ia2]     { --rail: #ec4899; }
.mb-row.lay-streaming[b-aq6h5v3ia2]     { --rail: #06b6d4; }

.mb-row:hover[b-aq6h5v3ia2] { border-color: rgba(45,212,191,.35); }

.mb-row.on[b-aq6h5v3ia2] {
    border-color: var(--teal, #2dd4bf);
    --rail: var(--teal, #2dd4bf);
}

.mb-id[b-aq6h5v3ia2] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 0 0 auto;
    min-width: 8.5rem;
}

.mb-id-top[b-aq6h5v3ia2] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.mb-code[b-aq6h5v3ia2] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--text, #e2e8f0);
}

.mb-geo[b-aq6h5v3ia2] {
    font-size: .68rem;
    color: var(--muted, #94a3b8);
    font-variant-numeric: tabular-nums;
}

.mb-vals[b-aq6h5v3ia2] {
    display: flex;
    flex-direction: column;
    flex: 1 1 8rem;
    min-width: 0;
    font-size: .84rem;
    color: var(--text, #e2e8f0);
}

.mb-tel[b-aq6h5v3ia2] {
    font-variant-numeric: tabular-nums;
    color: var(--muted, #94a3b8);
    font-size: .78rem;
}

/*  A blank field is a fact worth seeing -- these are the rows the operator is
    here to fill in -- so it reads as absent rather than as an empty gap. */
.mb-none[b-aq6h5v3ia2] {
    color: var(--muted, #94a3b8);
    font-style: italic;
    opacity: .72;
    font-size: .78rem;
}

.mb-edit[b-aq6h5v3ia2] {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mb-in[b-aq6h5v3ia2] {
    background: var(--bg, #0b1219);
    border: 1px solid var(--bd, #24303d);
    color: var(--text, #e2e8f0);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: .84rem;
    flex: 1 1 9rem;
    min-width: 0;
}

.mb-in:focus[b-aq6h5v3ia2] {
    outline: 2px solid var(--teal, #2dd4bf);
    outline-offset: -1px;
}

.mb-act[b-aq6h5v3ia2] {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.mb-err[b-aq6h5v3ia2] {
    flex: 1 1 100%;
    font-size: .76rem;
    color: var(--red, #f87171);
}

.mb-more[b-aq6h5v3ia2] {
    margin-top: 10px;
    font-size: .76rem;
    color: var(--muted, #94a3b8);
    text-align: center;
}

@media (max-width: 520px) {
    .mb-id[b-aq6h5v3ia2] { min-width: 100%; }
    .mb-vals[b-aq6h5v3ia2] { flex-basis: 100%; }
}

/* ── credential issue panel ───────────────────────────────────────────────── */

.mb-cred[b-aq6h5v3ia2] {
    flex: 1 1 100%;
    border-top: 1px dashed var(--bd, #24303d);
    margin-top: 8px;
    padding-top: 10px;
}


.mb-issued[b-aq6h5v3ia2] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--bg, #0b1219);
    border: 1px solid var(--teal, #2dd4bf);
    border-radius: 9px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.mb-il[b-aq6h5v3ia2],
.mb-ip[b-aq6h5v3ia2] {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1rem;
    letter-spacing: .06em;
}

.mb-il[b-aq6h5v3ia2] { color: var(--muted, #94a3b8); }

/*  The password is the one thing being read off this screen, often aloud, so it
    is the largest element in the row and selectable on its own. */
.mb-ip[b-aq6h5v3ia2] {
    color: var(--teal, #2dd4bf);
    font-weight: 700;
    font-size: 1.15rem;
    user-select: all;
}

/*  The post label ("Booth 1"), shown beside the login code as context. Quieter
    than the code and quieter than the member's name, because it is the one
    thing on this row the operator cannot change. */
/*  The post, as a chip tinted by the layer rail -- it belongs to the seat, so
    it carries the seat's colour rather than the member's neutral tone. */
.mb-post[b-aq6h5v3ia2] {
    font-size: .68rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--rail, #94a3b8);
    background: color-mix(in srgb, var(--rail, #3f5061) 14%, transparent);
    /*  Fallback first: color-mix voids the whole declaration where unsupported,
        which would leave the chip with no background at all. */
    background-color: rgba(148,163,184,.12);
    background-image: linear-gradient(color-mix(in srgb, var(--rail, #3f5061) 16%, transparent), color-mix(in srgb, var(--rail, #3f5061) 16%, transparent));
    white-space: nowrap;
}

/* ── contact actions ──────────────────────────────────────────────────────── */

/*  Icon-only and square, so three of them plus two text buttons still fit on a
    phone row. Each carries its own colour: at a glance the operator is picking
    a channel, not reading labels. */
.mb-ico[b-aq6h5v3ia2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: 0 0 auto;
    text-decoration: none;
    border: 1px solid transparent;
}

.mb-ico svg[b-aq6h5v3ia2] {
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.mb-ico.call[b-aq6h5v3ia2] { background: rgba(34,197,94,.16);  color: #4ade80; border-color: rgba(34,197,94,.35); }
.mb-ico.sms[b-aq6h5v3ia2]  { background: rgba(56,189,248,.16); color: #7dd3fc; border-color: rgba(56,189,248,.35); }
.mb-ico.wa[b-aq6h5v3ia2]   { background: rgba(37,211,102,.16); color: #25d366; border-color: rgba(37,211,102,.38); }

.mb-ico:active[b-aq6h5v3ia2] { transform: translateY(1px); }

/*  Six controls: Edit, three contact icons, Send App, Send User Details.
    flex-wrap alone was not enough -- .mb-act sized itself to its content and the
    card's overflow:hidden clipped the last button instead of moving it down.
    Claiming a full row is what actually lets it wrap inside itself. */
.mb-act[b-aq6h5v3ia2] {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

/*  Text buttons shrink before they truncate; the icons never shrink because a
    17px glyph in a squeezed box stops reading as a phone or a chat bubble. */
.mb-act .btn[b-aq6h5v3ia2] {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
}

/* ── labelled fields ──────────────────────────────────────────────────────── */

/*  Label above value rather than beside it: the values here have wildly
    different widths (a login code, a name, a 10-digit number) and a label
    column wide enough for "Display Name" would strand the short ones. */
.mb-f[b-aq6h5v3ia2] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mb-k[b-aq6h5v3ia2] {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted, #94a3b8);
    opacity: .72;
}

/*  Two columns on anything but the narrowest phone: four identity fields
    stacked one per line pushes the buttons below the fold. */
.mb-id[b-aq6h5v3ia2],
.mb-vals[b-aq6h5v3ia2] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    flex: 1 1 100%;
}

.mb-lay[b-aq6h5v3ia2] {
    font-size: .8rem;
    color: var(--text, #e2e8f0);
}

.mb-name[b-aq6h5v3ia2] {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text, #e2e8f0);
    overflow-wrap: anywhere;
}

.mb-tel[b-aq6h5v3ia2] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
    color: var(--text, #e2e8f0);
}

.mb-tel svg[b-aq6h5v3ia2] {
    width: 12px;
    height: 12px;
    fill: #4ade80;
    flex: 0 0 auto;
}

/*  Decorated splitter: a hairline that fades out at both ends and carries a
    single tick at its centre, so the card reads as two blocks -- the seat above,
    the person below -- without a hard rule cutting it in half. */
.mb-split[b-aq6h5v3ia2] {
    position: relative;
    flex: 1 1 100%;
    height: 1px;
    margin: 2px 0 4px;
    background: linear-gradient(90deg, transparent, var(--bd, #24303d) 18%, var(--bd, #24303d) 82%, transparent);
}

.mb-split[b-aq6h5v3ia2]::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -2px;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--rail, #3f5061);
    opacity: .55;
}

@media (max-width: 400px) {
    .mb-id[b-aq6h5v3ia2],
    .mb-vals[b-aq6h5v3ia2] { grid-template-columns: 1fr; }
}

/* ── grid + pager ─────────────────────────────────────────────────────────── */

/*  QuickGrid renders a table; the card lives in a single cell, so the table
    chrome has to get out of the way entirely. */
.mb-grid[b-aq6h5v3ia2] { width: 100%; border-collapse: collapse; }
.mb-grid thead[b-aq6h5v3ia2] { display: none; }
.mb-grid td[b-aq6h5v3ia2] { padding: 0 0 6px; border: 0; }

/*  Pager. Sits below the last card and above the bottom bar, which is fixed --
    hence the trailing room, or the last page's control hides behind it. */
.mb-pager[b-aq6h5v3ia2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0 0;
    padding-top: 12px;
    padding-bottom: 12px;
    border-top: 1px solid var(--bd, #24303d);
}

.mb-p-total[b-aq6h5v3ia2] {
    font-size: .9rem;
    font-weight: 700;
    color: var(--text, #e2e8f0);
    font-variant-numeric: tabular-nums;
}

.mb-p-lbl[b-aq6h5v3ia2] { font-size: .74rem; font-weight: 400; color: var(--muted, #94a3b8); }

.mb-p-nav[b-aq6h5v3ia2] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.mb-p-btn[b-aq6h5v3ia2] {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--bd, #24303d);
    background: var(--bg2, #131c26);
    color: var(--text, #e2e8f0);
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

.mb-p-btn:not(:disabled):hover[b-aq6h5v3ia2] { border-color: var(--teal, #2dd4bf); }

/*  The current page is a state, not a target -- it reads as filled and does not
    invite a click that would do nothing. */
.mb-p-btn.on[b-aq6h5v3ia2] {
    background: rgba(45, 212, 191, .16);
    border-color: var(--teal, #2dd4bf);
    color: var(--teal, #2dd4bf);
    font-weight: 700;
}

.mb-p-btn:disabled[b-aq6h5v3ia2] { opacity: .35; cursor: default; }

.mb-p-gap[b-aq6h5v3ia2] {
    min-width: 18px;
    text-align: center;
    color: var(--muted, #94a3b8);
}

@media (max-width: 480px) {
    .mb-pager[b-aq6h5v3ia2] { justify-content: center; }
    .mb-p-btn[b-aq6h5v3ia2] { min-width: 30px; height: 30px; padding: 0 6px; font-size: .76rem; }
}
/* /Components/Pages/Tickets.razor.rz.scp.css */
/*  Scoped to Tickets. Reuses .mb-sel / .mb-find from the Members bar via
    app.css-level siblings is not possible across scopes, so the two inputs are
    restated here at the same metrics. */

.mb-sel[b-5ncao59d8h],
.mb-find[b-5ncao59d8h] {
    background: var(--bg2, #131c26);
    border: 1px solid var(--bd, #24303d);
    color: var(--text, #e2e8f0);
    border-radius: 9px;
    padding: 9px 11px;
    font-size: .86rem;
    min-width: 0;
}

.mb-find[b-5ncao59d8h] { flex: 1 1 8rem; }

/*  Same trap as Members: app.css sets select{width:100%}, and this bar has two
    of them. Without an explicit width they each claim the full row. */
.mb-sel[b-5ncao59d8h] {
    flex: 0 1 auto;
    width: auto;
    max-width: 48%;
}

.tk-bar[b-5ncao59d8h] {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.tk-list[b-5ncao59d8h] { display: flex; flex-direction: column; gap: 6px; }

.tk-row[b-5ncao59d8h] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--bd, #24303d);
    border-radius: 10px;
    background: var(--bg2, #131c26);
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
}

.tk-row:hover[b-5ncao59d8h] { border-color: var(--teal, #2dd4bf); }

/*  Category is the fastest thing to scan for, so it carries the colour and sits
    first; status is the slower read and sits at the end with the timestamp. */
.tk-cat[b-5ncao59d8h] {
    flex: 0 0 auto;
    font-size: .62rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 5px;
    background: var(--bd, #24303d);
    color: var(--text, #e2e8f0);
}

.c-issue[b-5ncao59d8h]      { background: rgba(239,68,68,.16);  color: #fca5a5; }
.c-technical[b-5ncao59d8h]  { background: rgba(249,115,22,.16); color: #fdba74; }
.c-feedback[b-5ncao59d8h]   { background: rgba(56,189,248,.16); color: #7dd3fc; }
.c-suggestion[b-5ncao59d8h] { background: rgba(34,197,94,.16);  color: #86efac; }

.tk-r-main[b-5ncao59d8h] { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

.tk-r-subj[b-5ncao59d8h] {
    font-size: .86rem;
    color: var(--text, #e2e8f0);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tk-r-sub[b-5ncao59d8h], .tk-r-at[b-5ncao59d8h] {
    font-size: .7rem;
    color: var(--muted, #94a3b8);
}

.tk-r-end[b-5ncao59d8h] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    gap: 3px;
}

.tk-st[b-5ncao59d8h] {
    font-size: .64rem;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.s-open[b-5ncao59d8h]       { background: rgba(239,68,68,.16);  color: #fca5a5; }
.s-inprogress[b-5ncao59d8h] { background: rgba(250,204,21,.16); color: #fde047; }
.s-resolved[b-5ncao59d8h]   { background: rgba(34,197,94,.16);  color: #86efac; }
.s-closed[b-5ncao59d8h]     { background: var(--bd, #24303d);   color: var(--muted, #94a3b8); }

/* ── detail ───────────────────────────────────────────────────────────────── */

.tk-head[b-5ncao59d8h] { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.tk-h-main[b-5ncao59d8h] { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-subj[b-5ncao59d8h] { font-size: 1rem; font-weight: 600; color: var(--text, #e2e8f0); }

.tk-h-meta[b-5ncao59d8h] {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    font-size: .72rem;
    color: var(--muted, #94a3b8);
}

.tk-code[b-5ncao59d8h] { font-family: ui-monospace, Consolas, monospace; }

.tk-status[b-5ncao59d8h] { display: flex; gap: 6px; flex-wrap: wrap; }

.tk-sbtn[b-5ncao59d8h] {
    background: var(--bg2, #131c26);
    border: 1px solid var(--bd, #24303d);
    color: var(--muted, #94a3b8);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: .76rem;
    cursor: pointer;
}

.tk-sbtn.on[b-5ncao59d8h] {
    border-color: var(--teal, #2dd4bf);
    color: var(--text, #e2e8f0);
    background: rgba(45,212,191,.12);
}

.tk-sbtn:disabled[b-5ncao59d8h] { opacity: .5; cursor: default; }

.tk-thread[b-5ncao59d8h] { display: flex; flex-direction: column; gap: 8px; }

.tk-msg[b-5ncao59d8h] {
    border: 1px solid var(--bd, #24303d);
    border-radius: 10px;
    background: var(--bg2, #131c26);
    padding: 9px 12px;
}

/*  An internal note must never be mistaken for something the raiser can see, so
    it is marked twice: a dashed edge and an explicit label. */
.tk-msg.int[b-5ncao59d8h] {
    border-style: dashed;
    border-color: var(--amber, #f59e0b);
    background: rgba(245,158,11,.06);
}

.tk-m-head[b-5ncao59d8h] {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: .7rem;
    color: var(--muted, #94a3b8);
    margin-bottom: 4px;
}

.tk-m-who[b-5ncao59d8h] { font-weight: 600; color: var(--text, #e2e8f0); }
.tk-m-at[b-5ncao59d8h] { margin-left: auto; font-variant-numeric: tabular-nums; }

.tk-int[b-5ncao59d8h] {
    background: rgba(245,158,11,.18);
    color: var(--amber, #f59e0b);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.tk-m-body[b-5ncao59d8h] {
    font-size: .85rem;
    color: var(--text, #e2e8f0);
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.tk-reply[b-5ncao59d8h] { margin-top: 12px; }

.tk-ta[b-5ncao59d8h] {
    width: 100%;
    background: var(--bg2, #131c26);
    border: 1px solid var(--bd, #24303d);
    color: var(--text, #e2e8f0);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
    font-size: .85rem;
    resize: vertical;
}

.tk-ta:focus[b-5ncao59d8h] { outline: 2px solid var(--teal, #2dd4bf); outline-offset: -1px; }

.tk-r-act[b-5ncao59d8h] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.tk-chk[b-5ncao59d8h] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
    color: var(--muted, #94a3b8);
    cursor: pointer;
}

.tk-r-act .btn[b-5ncao59d8h] { margin-left: auto; }