@import '_content/DentaFlow.Web.Shared/DentaFlow.Web.Shared.p2y3be216c.bundle.scp.css';

/* /Components/Layout/ClinicStatusNotice.razor.rz.scp.css */
.clinic-notice[b-x9r9sbjofw] {
    margin: 1.25rem 0 0;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    border-left-width: 4px;
    background-color: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

.clinic-notice-title[b-x9r9sbjofw] {
    font-weight: 600;
    margin-bottom: 0.15rem;
}

.clinic-notice-text[b-x9r9sbjofw],
.clinic-notice-reason[b-x9r9sbjofw] {
    font-size: 0.92rem;
    color: color-mix(in srgb, var(--color-text) 80%, transparent);
}

.clinic-notice-reason[b-x9r9sbjofw] {
    margin-top: 0.35rem;
    font-style: italic;
}

.clinic-notice-suspended[b-x9r9sbjofw],
.clinic-notice-closed[b-x9r9sbjofw] {
    border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
    background-color: color-mix(in srgb, var(--color-danger) 7%, var(--color-surface));
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-6bng6dgbbb] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-6bng6dgbbb] {
    flex: 1;
}

.top-row[b-6bng6dgbbb] {
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-divider);
    justify-content: flex-end;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
}

/* ---- account row: same style as the patient site's header ----
   CulturePicker and ThemeToggle style themselves (DentaFlow.Web.Shared). The template's
   old blanket `.top-row ::deep a` rules (left margin, underline on hover, ellipsis on the
   first link) are gone - they reached into CulturePicker's links too. */

.top-row-actions[b-6bng6dgbbb] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.top-row-divider[b-6bng6dgbbb] {
    width: 1px;
    height: 1.5rem;
    background-color: var(--color-divider);
}

.top-row-form[b-6bng6dgbbb] {
    display: flex;
    margin: 0;
}

/* NavLink is a framework component, so its <a> carries no scope attribute from this file;
   ::deep reaches it (and the logout button) through .top-row. */
.top-row[b-6bng6dgbbb]  .top-row-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0;
    border: 0;
    background: none;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.top-row[b-6bng6dgbbb]  .top-row-link:hover {
    color: var(--color-link-hover);
}

.top-row[b-6bng6dgbbb]  .top-row-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.top-row[b-6bng6dgbbb]  .top-row-link svg {
    flex-shrink: 0;
}

.top-row[b-6bng6dgbbb]  .top-row-link.active {
    color: var(--color-accent);
    font-weight: 600;
}

.top-row[b-6bng6dgbbb]  .top-row-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.3rem;
    height: 3px;
    border-radius: 3px;
    background-color: var(--color-accent);
}

@media (max-width: 480px) {
    .top-row-actions[b-6bng6dgbbb] {
        gap: 0.75rem;
    }

    .top-row-divider[b-6bng6dgbbb] {
        display: none;
    }

    /* Icons only on phones. Visually hidden, not display:none, so "My profile" and
       "Log out" stay the accessible names of their controls. */
    .top-row[b-6bng6dgbbb]  .top-row-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
}

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

    .sidebar[b-6bng6dgbbb] {
        width: 300px;
        max-width: 100%;
        height: 100vh;
        position: sticky;
        top: 0;
    }

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

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

#blazor-error-ui[b-6bng6dgbbb] {
    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-6bng6dgbbb] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* ── Chrome artwork ───────────────────────────────────────────────────────
   Three background plates in the portal palette: a radar bloom entering the
   account row from the left, the sidebar radar anchored to its bottom, and a
   page wash behind the content. Each plate is raster art painted on a solid
   ground, so one file cannot serve both themes — light and dark are separate
   images, declared for the media query *and* the explicit toggle so the toggle
   wins in both directions. The page wash has no dark plate yet; dark simply
   keeps the flat ground, which is what the portal looked like before. */

.top-row[b-6bng6dgbbb] {
    background-image: url("/images/topbar-light.png");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: cover;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .top-row[b-6bng6dgbbb] {
        background-image: url("/images/topbar-dark.png");
    }
}

:root[data-theme="dark"] .top-row[b-6bng6dgbbb] {
    background-image: url("/images/topbar-dark.png");
}

/* Below 641px the sidebar collapses to a full-width header and the content is
   one narrow column: art anchored to the bottom of a tall panel has nowhere to
   go, and a fixed attachment is a known scroll-performance trap on phones. So
   both plates are desktop-only. */
@media (min-width: 641px) {
    .sidebar[b-6bng6dgbbb] {
        background-image: url("/images/nav-light.png");
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: cover;
    }

    :root[data-theme="dark"] .sidebar[b-6bng6dgbbb] {
        background-image: url("/images/nav-dark.png");
    }

    .content[b-6bng6dgbbb] {
        /* The wash is clipped to this box, so a short page would show only a
           sliver of it — fill the viewport under the account row. */
        min-height: calc(100vh - var(--topbar-height));
        background-image: url("/images/dashboard.png");
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: cover;
        /* Fixed, so the wash stays put instead of sliding up a long case list. */
        background-attachment: fixed;
    }

    :root[data-theme="dark"] .content[b-6bng6dgbbb] {
        background-image: none;
    }
}

@media (min-width: 641px) and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .sidebar[b-6bng6dgbbb] {
        background-image: url("/images/nav-dark.png");
    }

    :root:not([data-theme="light"]) .content[b-6bng6dgbbb] {
        background-image: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* The phone menu button, in the same round style as ThemeToggle. It is a checkbox with
   appearance:none, so it can't hold an inline <svg> or a ::before - the icon has to be a
   background image, and a data-URI SVG can't use currentColor. Hence one image per theme,
   declared for the media query and the explicit toggle, like the chrome plates.
   (The previous icon never drew at all: its stroke was a malformed `rgba%23e9e9ed, 0.7%29`,
   and a pale stroke would have been invisible on the light surface anyway.) */
.navbar-toggler[b-bm61uu4v3n] {
    appearance: none;
    cursor: pointer;
    width: 2.75rem;
    height: 2.75rem;
    position: absolute;
    top: calc((var(--topbar-height) - 2.75rem) / 2);
    right: 1rem;
    border: 0;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%231e2130' stroke-linecap='round' stroke-width='2' d='M4.5 7h15M4.5 12h15M4.5 17h15'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.25rem;
    transition: background-color 0.15s ease;
}

.navbar-toggler:hover[b-bm61uu4v3n],
.navbar-toggler:checked[b-bm61uu4v3n] {
    background-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface));
}

.navbar-toggler:focus-visible[b-bm61uu4v3n] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

:root[data-theme="dark"] .navbar-toggler[b-bm61uu4v3n] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%23e9e9ed' stroke-linecap='round' stroke-width='2' d='M4.5 7h15M4.5 12h15M4.5 17h15'/%3e%3c/svg%3e");
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .navbar-toggler[b-bm61uu4v3n] {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e%3cpath fill='none' stroke='%23e9e9ed' stroke-linecap='round' stroke-width='2' d='M4.5 7h15M4.5 12h15M4.5 17h15'/%3e%3c/svg%3e");
    }
}

.top-row[b-bm61uu4v3n] {
    height: var(--topbar-height);
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-divider);
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

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

.nav-item[b-bm61uu4v3n] {
    padding-bottom: 0.35rem;
    width: 100%;
}

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

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

    .nav-item[b-bm61uu4v3n]  .nav-link {
        box-sizing: border-box;
        color: color-mix(in srgb, var(--color-text) 75%, transparent) !important;
        background: transparent;
        border: 0;
        border-radius: var(--radius-sm);
        height: auto;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        line-height: 1.4;
        padding: 0.85rem 1.1rem;
        margin: 0.15rem 0.5rem;
        font-weight: 500;
        font-size: 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: left;
        width: calc(100% - 1rem);
        transition: background 0.15s ease, color 0.15s ease;
    }

/* The icons are inline SVG since 2026-11-07 (BrandIcon). They were `bi-*` spans, which
   rendered as EMPTY BOXES the whole time — bootstrap-icons is loaded in neither app —
   so this rule used to reserve space for nothing. The svg is display:block, hence the
   flex alignment the span never needed. */
.nav-item[b-bm61uu4v3n]  .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.nav-item[b-bm61uu4v3n]  .nav-link .brand-icon {
    color: var(--color-accent);
    flex: none;
}

/* The active item writes in the accent, and the icon follows the text rather than
   staying a fixed hue — otherwise it is the one part of the row that does not react. */
.nav-item[b-bm61uu4v3n]  a.active .brand-icon {
    color: currentColor;
}

.nav-item[b-bm61uu4v3n]  a.active {
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
    color: var(--color-accent) !important;
    font-weight: 600;
    border-left: 0.25rem solid var(--color-accent);
    padding-left: calc(1.1rem - 0.25rem);
    box-shadow: none;
}

.nav-item[b-bm61uu4v3n]  .nav-link:hover {
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-text) !important;
}

.nav-item[b-bm61uu4v3n]  .nav-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.nav-scrollable[b-bm61uu4v3n] {
    display: none;
    background: var(--color-bg);
}

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

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

    .nav-scrollable[b-bm61uu4v3n] {
        display: block;
        height: calc(100vh - var(--topbar-height));
        overflow-y: auto;
        /* Let the sidebar plate show through. Below this width the panel is a
           dropdown over the page and has to stay opaque. */
        background: transparent;
    }
}

/* Heading above the SuperAdmin links, so the operator's tools read as a separate area. */
.nav-section[b-bm61uu4v3n] {
    margin: 1.25rem 1.1rem 0.25rem 1.6rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-4607l23eob],
.components-reconnect-repeated-attempt-visible[b-4607l23eob],
.components-reconnect-failed-visible[b-4607l23eob],
.components-pause-visible[b-4607l23eob],
.components-resume-failed-visible[b-4607l23eob],
.components-rejoining-animation[b-4607l23eob] {
    display: none;
}

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


#components-reconnect-modal[b-4607l23eob] {
    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-4607l23eob 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

#components-reconnect-modal button[b-4607l23eob] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

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

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

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

    .components-rejoining-animation div[b-4607l23eob] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-4607l23eob 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-4607l23eob {
    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/Admin/AdminShell.razor.rz.scp.css */
/* ---- frame ---- */

.admin-head[b-iwmkkd66fq] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
}

/* Makes "I am in the operator's console" unmistakable at a glance - these pages act on
   every clinic, not on one. */
.admin-badge[b-iwmkkd66fq] {
    align-self: flex-start;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    color: #fff;
    background-color: var(--color-accent-2);
}

.admin-gate[b-iwmkkd66fq] {
    margin-top: 1rem;
    padding: 1.25rem;
    max-width: 38rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
    background-color: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface));
}

.admin-stats[b-iwmkkd66fq] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.admin-stat[b-iwmkkd66fq] {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.admin-stat-value[b-iwmkkd66fq] {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-accent);
}

.admin-stat-label[b-iwmkkd66fq] {
    font-size: 0.82rem;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

@media (max-width: 720px) {
    .admin-stats[b-iwmkkd66fq] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---- tabs (NavLink is a framework component: reach it with ::deep) ---- */

.admin-tabs[b-iwmkkd66fq] {
    display: flex;
    gap: 1.5rem;
    border-bottom: 1px solid var(--color-divider);
    margin-bottom: 1.25rem;
}

.admin-tabs[b-iwmkkd66fq]  .admin-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0;
    font-weight: 500;
    text-decoration: none;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}

.admin-tabs[b-iwmkkd66fq]  .admin-tab:hover {
    color: var(--color-link-hover);
}

.admin-tabs[b-iwmkkd66fq]  .admin-tab.active {
    color: var(--color-accent);
    font-weight: 600;
}

.admin-tabs[b-iwmkkd66fq]  .admin-tab.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    border-radius: 3px;
    background-color: var(--color-accent);
}

.admin-tab-count[b-iwmkkd66fq] {
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 1.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    text-align: center;
    color: #fff;
    background-color: var(--color-danger);
}

/* ---- shared by the admin pages ----
   The pages' own markup carries *their* scope attribute, not this component's, so these
   rules reach into ChildContent through ::deep. */

.admin-shell[b-iwmkkd66fq]  .admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-shell[b-iwmkkd66fq]  .admin-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-shell[b-iwmkkd66fq]  .admin-filter {
    border: 1px solid var(--color-divider);
    background-color: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.75rem;
    font-size: 0.88rem;
    cursor: pointer;
}

.admin-shell[b-iwmkkd66fq]  .admin-filter:hover {
    background-color: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}

.admin-shell[b-iwmkkd66fq]  .admin-filter.active {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.admin-shell[b-iwmkkd66fq]  .admin-filter-count {
    margin-left: 0.3rem;
    font-size: 0.76rem;
    opacity: 0.75;
}

.admin-shell[b-iwmkkd66fq]  .admin-search {
    max-width: 18rem;
}

.admin-shell[b-iwmkkd66fq]  .admin-table-wrap {
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.admin-shell[b-iwmkkd66fq]  .admin-table {
    margin-bottom: 0;
    --bs-table-bg: transparent;
    --bs-table-color: var(--color-text);
    --bs-table-border-color: var(--color-divider);
}

.admin-shell[b-iwmkkd66fq]  .admin-table th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.admin-shell[b-iwmkkd66fq]  .admin-actions {
    white-space: nowrap;
}

.admin-shell[b-iwmkkd66fq]  .admin-actions .btn + .btn {
    margin-left: 0.35rem;
}

.admin-shell[b-iwmkkd66fq]  .admin-confirm-row td {
    background-color: color-mix(in srgb, var(--color-danger) 6%, var(--color-surface));
}

.admin-shell[b-iwmkkd66fq]  .admin-muted {
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

.admin-shell[b-iwmkkd66fq]  .admin-warn {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--color-danger) 75%, var(--color-text));
}

/* Status chips: clinic statuses, case statuses and offer statuses share one look. */
.admin-shell[b-iwmkkd66fq]  .status-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-divider);
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
}

.admin-shell[b-iwmkkd66fq]  .status-chip.is-good {
    border-color: color-mix(in srgb, #2e8b57 45%, transparent);
    background-color: color-mix(in srgb, #4caf6f 16%, transparent);
    color: color-mix(in srgb, #2e8b57 70%, var(--color-text));
}

.admin-shell[b-iwmkkd66fq]  .status-chip.is-waiting {
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    background-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: color-mix(in srgb, var(--color-accent) 80%, var(--color-text));
}

.admin-shell[b-iwmkkd66fq]  .status-chip.is-bad {
    border-color: color-mix(in srgb, var(--color-danger) 40%, transparent);
    background-color: color-mix(in srgb, var(--color-danger) 10%, transparent);
    color: color-mix(in srgb, var(--color-danger) 75%, var(--color-text));
}

.admin-shell[b-iwmkkd66fq]  .proc-chip {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
    color: color-mix(in srgb, var(--color-accent) 82%, var(--color-text));
}

/* The body of a contact message, on the operator's screen. Kept as typed — pre-wrap, so
   the line breaks somebody used to lay out an address or a list survive being read here.
   ::deep because the markup lives in the page inside this shell's ChildContent. */
[b-iwmkkd66fq] .contact-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-width: 70ch;
    padding: 0.85rem 1rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
    color: var(--color-text);
}
/* /Components/Pages/Admin/OfferList.razor.rz.scp.css */
.admin-offers[b-893lsmjpgd] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0 0.25rem 1rem;
    border-left: 3px solid color-mix(in srgb, var(--color-accent) 35%, transparent);
}

.admin-offer[b-893lsmjpgd] {
    padding: 0.6rem 0.8rem;
    border-radius: var(--radius-sm);
    background-color: color-mix(in srgb, var(--color-accent) 5%, var(--color-surface));
}

.admin-offer-head[b-893lsmjpgd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.15rem;
}

.admin-offer-message[b-893lsmjpgd] {
    margin-top: 0.35rem;
    font-size: 0.9rem;
    white-space: pre-line;
}
/* /Components/Pages/Admin/PlatformDashboard.razor.rz.scp.css */
/* Same visual language as the clinic dashboard (Home.razor.css), which a child component
   can't borrow - scoped styles stop at the component boundary. */

.platform-badge[b-smo992c1ua] {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-sm);
    color: #fff;
    background-color: var(--color-accent-2);
}

.platform-attention[b-smo992c1ua] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--radius-md);
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
    border-left-width: 4px;
    background-color: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

.plat-value[b-smo992c1ua] {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-text);
}

.plat-value.is-warn[b-smo992c1ua] {
    color: color-mix(in srgb, var(--color-danger) 80%, var(--color-text));
}

.plat-label[b-smo992c1ua] {
    font-size: 0.8rem;
    margin-top: 0.25rem;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.plat-breakdown[b-smo992c1ua] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    margin: 0.5rem 0 0.75rem;
}

.plat-breakdown span[b-smo992c1ua] {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.plat-breakdown strong[b-smo992c1ua] {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
}
/* /Components/Pages/Cases.razor.rz.scp.css */
.case-proc[b-5fqurp2owf] {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
    color: color-mix(in srgb, var(--color-accent) 82%, var(--color-text));
    white-space: nowrap;
}

.case-meta[b-5fqurp2owf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.case-meta span:not(:last-child)[b-5fqurp2owf]::after {
    content: "·";
    margin-left: 0.75rem;
    color: color-mix(in srgb, var(--color-text) 35%, transparent);
}

.case-actions[b-5fqurp2owf] {
    display: flex;
    justify-content: flex-end;
}

/* ── expanded case ─────────────────────────────────────────────── */

.case-overlay[b-5fqurp2owf] {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(11, 13, 26, 0.62);
    overflow-y: auto;
}

.case-overlay:focus[b-5fqurp2owf],
.case-overlay:focus-visible[b-5fqurp2owf] {
    outline: none;
}

.case-modal[b-5fqurp2owf] {
    width: min(1100px, 100%);
    max-height: calc(100vh - 2.5rem);
    overflow-y: auto;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.case-modal-head[b-5fqurp2owf] {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-divider);
}

/* The sections carry the padding, so each can own its full-width background. */
.case-modal-body[b-5fqurp2owf] {
    padding: 0;
}

.case-section[b-5fqurp2owf] {
    padding: 1.25rem;
}

/* Reading the case and answering it are two different jobs, so the offer sits on its own
   ground rather than after a rule: a tint of the accent over the page colour, which is a
   shade off the card in both themes. */
.case-section-offer[b-5fqurp2owf] {
    background-color: color-mix(in srgb, var(--color-accent) 5%, var(--color-bg));
    border-top: 1px solid var(--color-divider);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.case-section-title[b-5fqurp2owf] {
    margin-bottom: 0.9rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.case-status[b-5fqurp2owf] {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-divider);
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    white-space: nowrap;
}

.case-close[b-5fqurp2owf] {
    border: 0;
    background: transparent;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 0.25rem;
    cursor: pointer;
}

.case-close:hover[b-5fqurp2owf] {
    color: var(--color-text);
}

.case-details[b-5fqurp2owf] {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: 0.4rem 1rem;
    margin: 0;
    font-size: 0.92rem;
}

.case-details dt[b-5fqurp2owf] {
    font-weight: 600;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
}

.case-details dd[b-5fqurp2owf] {
    margin: 0;
}


.case-xray[b-5fqurp2owf] {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-divider);
    background: var(--color-bg);
}

.pagination[b-5fqurp2owf] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    list-style: none;
    padding: 0;
}

.page-link[b-5fqurp2owf] {
    border: 1px solid var(--color-divider);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.page-link:hover:not(:disabled)[b-5fqurp2owf] {
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}

.page-link:disabled[b-5fqurp2owf] {
    opacity: 0.45;
    cursor: default;
}

.page-item.active .page-link[b-5fqurp2owf] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

/* The favourite heart, on the card and in the modal head. Outline until it is on, then
   filled — the shape alone carries the state, so it stays readable in both themes and for
   anyone who cannot tell the accent from the muted ink. The button is transparent and
   square so it sits on the card without becoming a second call to action beside "Expand". */
.fav-btn[b-5fqurp2owf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
    cursor: pointer;
    transition: color 0.12s ease, background-color 0.12s ease;
}

.fav-btn svg[b-5fqurp2owf] {
    width: 1.15rem;
    height: 1.15rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
}

.fav-btn:hover[b-5fqurp2owf],
.fav-btn:focus-visible[b-5fqurp2owf] {
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.fav-btn:focus-visible[b-5fqurp2owf] {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.fav-btn.is-on[b-5fqurp2owf] {
    color: var(--color-danger);
}

.fav-btn.is-on svg[b-5fqurp2owf] {
    fill: currentColor;
}

.fav-btn:disabled[b-5fqurp2owf] {
    cursor: default;
    opacity: 0.6;
}

/* The filter version: a labelled toggle sized like the selects it sits beside. */
.fav-filter[b-5fqurp2owf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.4;
    cursor: pointer;
}

.fav-filter svg[b-5fqurp2owf] {
    width: 1.05rem;
    height: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linejoin: round;
    flex: none;
}

.fav-filter:hover[b-5fqurp2owf] {
    border-color: color-mix(in srgb, var(--color-danger) 45%, var(--color-divider));
}

.fav-filter:focus-visible[b-5fqurp2owf] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.fav-filter.is-on[b-5fqurp2owf] {
    border-color: var(--color-danger);
    color: var(--color-danger);
    background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
}

.fav-filter.is-on svg[b-5fqurp2owf] {
    fill: currentColor;
}

/* A case this clinic has already answered. The ground says so before the card is opened —
   the same trick the modal uses to tell "the case" from "your offer", and the second hue
   rather than the accent so it doesn't read as selected. background-color, not the
   shorthand: the shared .card rule sets a background and a colour, and only the ground is
   meant to change here. Any offer counts, including a withdrawn one, because (CaseId,
   ClinicId) is unique and the clinic cannot send a second one either way. */
.card.is-answered[b-5fqurp2owf] {
    background-color: color-mix(in srgb, var(--color-accent-2) 14%, var(--color-surface));
    border-color: color-mix(in srgb, var(--color-accent-2) 30%, var(--color-divider));
}
/* /Components/Pages/Home.razor.rz.scp.css */
.stat-value[b-35oz3iq623] {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--color-text);
}

.stat-label[b-35oz3iq623] {
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
    margin-top: 0.25rem;
}

.badge-soon[b-35oz3iq623] {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: color-mix(in srgb, var(--color-accent) 82%, var(--color-text));
    white-space: nowrap;
}

.offer-breakdown[b-35oz3iq623] {
    display: flex;
    gap: 1.5rem;
    margin: 0.5rem 0 1rem;
}

.offer-breakdown span[b-35oz3iq623] {
    display: flex;
    flex-direction: column;
    font-size: 0.8rem;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.offer-breakdown strong[b-35oz3iq623] {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
}

.checklist[b-35oz3iq623] {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1.25rem;
}

.checklist li[b-35oz3iq623] {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.92rem;
}

.checklist li[b-35oz3iq623]::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 1.15rem;
    height: 1.15rem;
    text-align: center;
    line-height: 1.15rem;
    font-size: 0.8rem;
    border-radius: 50%;
}

.checklist li.done[b-35oz3iq623] {
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

.checklist li.done[b-35oz3iq623]::before {
    content: "\2713";
    background: color-mix(in srgb, #4caf6f 22%, transparent);
    color: color-mix(in srgb, #2e8b57 70%, var(--color-text));
}

.checklist li.todo[b-35oz3iq623]::before {
    content: "";
    border: 1.5px solid var(--color-divider);
}

.checklist li.soon[b-35oz3iq623] {
    color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

.checklist li.soon[b-35oz3iq623]::after {
    content: "coming soon";
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-left: 0.5rem;
    color: color-mix(in srgb, var(--color-text) 40%, transparent);
}

.checklist li.soon[b-35oz3iq623]::before {
    content: "";
    border: 1.5px dashed var(--color-divider);
}
/* /Components/Pages/Offers.razor.rz.scp.css */
.case-proc[b-v1q1snm7m7] {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface));
    color: color-mix(in srgb, var(--color-accent) 82%, var(--color-text));
    white-space: nowrap;
}

.offer-status[b-v1q1snm7m7] {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-divider);
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    white-space: nowrap;
}

.offer-status.offer-accepted[b-v1q1snm7m7] {
    border-color: color-mix(in srgb, #2e8b57 45%, transparent);
    background: color-mix(in srgb, #4caf6f 16%, transparent);
    color: color-mix(in srgb, #2e8b57 70%, var(--color-text));
}

.offer-status.offer-declined[b-v1q1snm7m7],
.offer-status.offer-withdrawn[b-v1q1snm7m7] {
    border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);
    color: color-mix(in srgb, var(--color-danger) 70%, var(--color-text));
}

.offer-meta[b-v1q1snm7m7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
}

.offer-meta span:not(:last-child)[b-v1q1snm7m7]::after {
    content: "·";
    margin-left: 0.75rem;
    color: color-mix(in srgb, var(--color-text) 35%, transparent);
}

.offer-tabs[b-v1q1snm7m7] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.offer-tab[b-v1q1snm7m7] {
    border: 1px solid var(--color-divider);
    background: var(--color-surface);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.offer-tab:hover[b-v1q1snm7m7] {
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
}

.offer-tab.active[b-v1q1snm7m7] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.offer-tab-count[b-v1q1snm7m7] {
    display: inline-block;
    margin-left: 0.35rem;
    font-size: 0.78rem;
    opacity: 0.75;
}

.offer-contact[b-v1q1snm7m7] {
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-md);
    background: color-mix(in srgb, #4caf6f 10%, var(--color-surface));
    border: 1px solid color-mix(in srgb, #2e8b57 30%, transparent);
    font-size: 0.9rem;
}

.offer-contact-title[b-v1q1snm7m7] {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 0.3rem;
    color: color-mix(in srgb, var(--color-text) 60%, transparent);
}