/* /Components/Layout/ActiveSessions.razor.rz.scp.css */
/* Активни сесии — chip во хедерот + hover ролетна (само надредени ја имаат во DOM). */
.presence-wrap[b-czslee28ak] {
    position: relative;
    display: flex;
    align-items: center;
}

.presence-chip[b-czslee28ak] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    cursor: default;
    user-select: none;
}

.presence-dot[b-czslee28ak] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 5px #22c55e;
}

.presence-sep[b-czslee28ak] { opacity: 0.45; }

.presence-menu[b-czslee28ak] {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 400;
    min-width: 230px;
    max-height: 340px;
    overflow-y: auto;
    background: #1e2430;
    color: #eef1f6;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    padding: 8px 10px;
}

/* Mouse-over ја отвора; останува отворена додека курсорот е врз chip-от ИЛИ менито. */
.presence-wrap:hover .presence-menu[b-czslee28ak] { display: block; }

.presence-menu-title[b-czslee28ak] {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.6;
    margin-bottom: 4px;
}

.presence-row[b-czslee28ak] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font-size: 12.5px;
    padding: 2.5px 0;
}

.presence-role[b-czslee28ak] { opacity: 0.55; font-size: 11.5px; }
.presence-empty[b-czslee28ak] { opacity: 0.4; }

/* Мобилен: бројките остануваат, ролетната е hover-базирана и без hover не пречи. */
@media (max-width: 640px) {
    .presence-chip[b-czslee28ak] { padding: 3px 7px; font-size: 11.5px; }
}
/* /Components/Layout/ClientPortalLayout.razor.rz.scp.css */
/* B2B client portal app chrome (prototype #clientSidebarNav + the client viewport). The sidebar is
   REAL app chrome on the left — not inside the page body — so a client (and the staff preview) gets a
   self-contained client application, never the backoffice with an empty staff menu. */
.cportal-app[b-1okcwiv07t] {
    display: flex;
    min-height: 100vh;
    background: var(--mud-palette-background);
}

.cportal-sidebar[b-1okcwiv07t] {
    flex: 0 0 248px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
}

.cportal-brand[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px 14px;
}

.cportal-brand-mark[b-1okcwiv07t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--mud-palette-success);
    color: #fff;
    font-weight: 800;
}

.cportal-brand-name[b-1okcwiv07t] {
    font-weight: 800;
    font-size: 1.05rem;
}

.cportal-nav[b-1okcwiv07t] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Section header — tinted with the section's signature colour (set inline per section). */
.cportal-nav-section[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 12px 12px 4px;
}

.cnav-sec-ic[b-1okcwiv07t] {
    font-size: .9rem;
    line-height: 1;
}

.cportal-nav-divider[b-1okcwiv07t] {
    border-top: 1px solid var(--mud-palette-lines-default);
    margin: 8px 12px;
}

/* A module sub-link: a section-coloured bullet + icon + label, with the cart badge / "soon" chip pushed right. */
.cportal-link[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 12px 8px 14px;
    border-radius: 8px;
    font-size: .86rem;
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    user-select: none;
}

.cportal-link:hover[b-1okcwiv07t] {
    background: color-mix(in srgb, var(--cp-accent, var(--mud-palette-success)) 9%, transparent);
}

.cportal-link.active[b-1okcwiv07t] {
    background: color-mix(in srgb, var(--cp-accent, var(--mud-palette-success)) 15%, transparent);
    color: var(--cp-accent, var(--mud-palette-success));
    font-weight: 700;
}

/* A My Web module waiting on the Website builder. Dimmed and inert, still in its place in the order. */
.cportal-link.is-locked[b-1okcwiv07t] {
    opacity: .45;
    cursor: not-allowed;
}

.cportal-link.is-locked:hover[b-1okcwiv07t] {
    background: transparent;
}

.cnav-lock[b-1okcwiv07t] {
    flex: 0 0 auto;
    font-size: .72rem;
    line-height: 1;
}

/* Submenu bullet in the section's colour (dim until active/hover, solid when active). */
.cnav-bullet[b-1okcwiv07t] {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cp-accent, var(--mud-palette-success));
    opacity: .45;
}

.cportal-link:hover .cnav-bullet[b-1okcwiv07t],
.cportal-link.active .cnav-bullet[b-1okcwiv07t] {
    opacity: 1;
}

.cnav-ic[b-1okcwiv07t] {
    font-size: 1.02rem;
    line-height: 1;
}

.cnav-label[b-1okcwiv07t] {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Cart count marker (mirrors the prototype header's cart badge) — in the B2B section colour. */
.cnav-badge[b-1okcwiv07t] {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--cp-accent, var(--mud-palette-success));
    color: #06210f;
    font-size: .68rem;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* "soon" chip on not-yet-built modules. */
.cnav-soon[b-1okcwiv07t] {
    flex: 0 0 auto;
    font-size: .58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-action-default-hover);
    border-radius: 5px;
    padding: 1px 5px;
}

/* Client viewport: a slim header + the section content area. */
.cportal-viewport[b-1okcwiv07t] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.cportal-header[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: var(--mud-palette-surface);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Staff preview/session client-identity chip (left of the search). */
.cportal-header-context[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Centered global search (prototype #global-search). */
.cportal-search-wrap[b-1okcwiv07t] {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    position: relative;
    min-width: 0;
}

.cportal-search-box[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 460px;
    padding: 7px 12px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: var(--mud-palette-background);
}

.cportal-search-box:focus-within[b-1okcwiv07t] {
    border-color: var(--mud-palette-success);
}

.cportal-search-ic[b-1okcwiv07t] {
    font-size: .82rem;
    opacity: .7;
}

.cportal-search-input[b-1okcwiv07t] {
    flex: 1 1 auto;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-size: .85rem;
    min-width: 0;
}

.cportal-search-kbd[b-1okcwiv07t] {
    font-family: var(--font-mono, monospace);
    font-size: .62rem;
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 1px 5px;
}

.cportal-search-results[b-1okcwiv07t] {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 460px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    padding: 6px;
    z-index: 1300;
}

.cportal-search-item[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
}

.cportal-search-item:hover[b-1okcwiv07t] {
    background: var(--mud-palette-action-default-hover);
}

.cportal-search-item-label[b-1okcwiv07t] {
    flex: 1 1 auto;
    font-size: .85rem;
    font-weight: 600;
}

.cportal-search-item-kind[b-1okcwiv07t] {
    font-size: .68rem;
    color: var(--mud-palette-text-secondary);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.cportal-header-actions[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Shared transparent click-away backdrop for the manual dropdowns (search + user-menu). */
.cportal-menu-backdrop[b-1okcwiv07t] {
    position: fixed;
    inset: 0;
    z-index: 1290;
}

/* Client user-menu (prototype renderClientUserMenu / toggleUserMenu): avatar + name + role + caret. */
.cportal-user-wrap[b-1okcwiv07t] {
    position: relative;
}

.cportal-user[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.cportal-user:hover[b-1okcwiv07t] {
    background: var(--mud-palette-action-default-hover);
    border-color: var(--mud-palette-success);
}

.cportal-avatar[b-1okcwiv07t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--mud-palette-success);
    color: #06231f;
    font-size: .74rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.cportal-user-meta[b-1okcwiv07t] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

.cportal-user-name[b-1okcwiv07t] {
    font-size: .78rem;
    font-weight: 700;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cportal-user-role[b-1okcwiv07t] {
    font-size: .66rem;
    font-family: var(--font-sans);
    color: var(--mud-palette-text-secondary);
}

.cportal-user-caret[b-1okcwiv07t] {
    font-size: .7rem;
    opacity: .6;
}

.cportal-user-pop[b-1okcwiv07t] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 200px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
    padding: 6px;
    z-index: 1300;
}

.cportal-menu-item[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border-radius: 8px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
}

.cportal-menu-item:hover[b-1okcwiv07t] {
    background: var(--mud-palette-action-default-hover);
}

.cportal-menu-item.logout[b-1okcwiv07t] {
    color: var(--mud-palette-error);
}

.cportal-content[b-1okcwiv07t] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 20px 24px;
}

/* Staff read-only client-portal PREVIEW banner (prototype #clientPreviewBanner · lines 1613-1616):
   a full-width bar across the top of the previewed client shell. */
.cportal-preview-banner[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: rgba(34, 197, 94, .10);
    border: 1px solid var(--mud-palette-success);
    border-radius: 10px;
    padding: 10px 16px;
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.cportal-preview-banner .cpb-tag[b-1okcwiv07t] {
    color: var(--mud-palette-text-secondary);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 400;
}

.cportal-preview-banner .cpb-sub[b-1okcwiv07t] {
    color: var(--mud-palette-text-secondary);
    font-size: 11px;
    font-weight: 400;
    margin-top: 2px;
}

.cportal-preview-banner .cpb-exit[b-1okcwiv07t] {
    cursor: pointer;
    white-space: nowrap;
    font-weight: 700;
    color: var(--mud-palette-success);
    user-select: none;
}

/* Authorised on-behalf SESSION banner (prototype showImpersonationBanner / directClientSession): a stronger,
   solid green bar — distinct from the muted read-only preview — signalling the portal is WRITABLE. */
.cportal-session-banner[b-1okcwiv07t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    background: rgba(34, 197, 94, .18);
    border: 1px solid var(--mud-palette-success);
    border-radius: 10px;
    padding: 10px 16px;
    margin: 0 0 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.cportal-session-banner .cpb-exit[b-1okcwiv07t] {
    cursor: pointer;
    white-space: nowrap;
    font-weight: 700;
    color: var(--mud-palette-success);
    user-select: none;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* The layout chrome (app bar, drawer, content) is MudLayout / MudAppBar / MudDrawer,
   which theme with MudThemeProvider. The old template rules (.page, main, .sidebar,
   .top-row) are no longer emitted by this component, so they were dead — and their
   hardcoded colors (e.g. the blue→purple .sidebar gradient, #f7f7f7 top-row) ignored
   the theme. Only the Blazor error banner below is still used. */

#blazor-error-ui[b-t91lzwixjr] {
    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-t91lzwixjr] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Sidebar styling — ported from the prototype's #mainSidebarNav (v2.174.0). Uses the shared design
   tokens already defined in app.css (--zenic-green, --surface-*, --text-*, --border, --font-mono). */

.zenic-sidebar[b-06gizxygol] {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
}

/* ── section header (collapsible, with − toggle + attention dot) ── */
.sidebar-section-label[b-06gizxygol] {
    font-family: var(--font-sans);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--text-secondary);
    padding: 20px 16px 6px;
    font-weight: 700;
}

.sidebar-section-label.collapsible[b-06gizxygol] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s;
}

.sidebar-section-label.collapsible:hover[b-06gizxygol] {
    color: var(--text-primary);
}

.sidebar-section-label .sec-toggle[b-06gizxygol] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1;
    color: var(--text-muted);
    background: var(--surface-3);
    transition: all 0.15s;
    flex-shrink: 0;
}

.sidebar-section-label.collapsible:hover .sec-toggle[b-06gizxygol] {
    color: var(--text-primary);
    background: var(--surface-2);
}

.sidebar-section-label .sec-label-text[b-06gizxygol] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.sec-attention-dot[b-06gizxygol] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--danger-strong);
    box-shadow: 0 0 0 2px var(--surface-1);
    display: none;
    flex-shrink: 0;
}

.sec-attention-dot.show[b-06gizxygol] {
    display: inline-block;
}

/* ── nav item ── */
.nav-link[b-06gizxygol] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    margin: 1px 8px;
    border-radius: 7px;
    border-left: 3px solid transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.nav-link:hover[b-06gizxygol] {
    background: var(--surface-3);
    color: var(--text-primary);
}

.nav-link svg[b-06gizxygol] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* active state (prototype .active-nav) */
.nav-link.active-nav[b-06gizxygol] {
    background: linear-gradient(90deg, var(--zenic-green-dim), transparent);
    color: var(--text-primary);
    font-weight: 700;
    border-left: 3px solid var(--zenic-green);
}

/* ── attention badge (prototype .nav-attention-badge): a red approval count on a nav item
   that needs the viewer's review. Hidden by default; .show reveals it with a subtle pulse. ── */
.nav-attention-badge[b-06gizxygol] {
    margin-left: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--danger-strong);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    font-family: var(--font-sans); font-variant-numeric: tabular-nums;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.5);
}

.nav-attention-badge.show[b-06gizxygol] {
    display: inline-flex;
    animation: attnPulse-b-06gizxygol 1.8s ease-in-out infinite;
}

@keyframes attnPulse-b-06gizxygol {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

.nav-caret[b-06gizxygol] {
    margin-left: auto;
    font-size: 10px;
    opacity: 0.5;
    transition: transform 0.15s;
}

/* Collapsed group: the caret points right (prototype parity). */
.nav-link.is-collapsed .nav-caret[b-06gizxygol] {
    transform: rotate(-90deg);
}

/* ── submenu ── */
.nav-submenu[b-06gizxygol] {
    display: flex;
    flex-direction: column;
}

.nav-submenu.group-collapsed[b-06gizxygol] {
    display: none !important;
}

.nav-sublink[b-06gizxygol] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 44px;
    font-size: 12.5px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.12s;
    border-left: 2px solid transparent;
    font-weight: 500;
    text-decoration: none;
}

.nav-sublink:hover[b-06gizxygol] {
    color: var(--text-primary);
    background: var(--surface-2);
}

.nav-sublink.active-sub[b-06gizxygol] {
    color: var(--text-primary);
    font-weight: 700;
    border-left-color: var(--zenic-green);
    background: var(--surface-2);
}

.nav-sublink .sub-dot[b-06gizxygol] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    /* --sub-dot-color is set per submenu to the section's signature colour (NavMenu.razor); falls back to text colour. */
    background: var(--sub-dot-color, currentColor);
    opacity: 0.9;
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-l6rri1qrza],
.components-reconnect-repeated-attempt-visible[b-l6rri1qrza],
.components-reconnect-failed-visible[b-l6rri1qrza],
.components-pause-visible[b-l6rri1qrza],
.components-resume-failed-visible[b-l6rri1qrza],
.components-rejoining-animation[b-l6rri1qrza] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-l6rri1qrza {
    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/Portal.razor.rz.scp.css */
/* B2B client self-service portal — the page renders only the active cview-* SECTION CONTENT; the
   sidebar + header + preview banner are the layout's chrome (ClientPortalLayout). */
.cportal-main[b-o7eice7ugh] {
    flex: 1 1 auto;
    min-width: 0;
}

.cportal-pay-opt[b-o7eice7ugh] {
    text-transform: none;
    padding: 14px;
    text-align: left;
    justify-content: flex-start;
}

/* Support ticket reply thread — staff replies tinted with the Support (teal) accent, client replies neutral. */
.ctk-reply[b-o7eice7ugh] {
    border-radius: 8px;
    padding: 7px 10px;
    margin-bottom: 6px;
    border: 1px solid var(--mud-palette-lines-default);
}

.ctk-reply.ctk-staff[b-o7eice7ugh] {
    background: color-mix(in srgb, var(--accent-teal) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-teal) 35%, transparent);
}

.ctk-reply.ctk-client[b-o7eice7ugh] {
    background: var(--mud-palette-surface);
}

/* My Profile (prototype renderClientProfile) — card titles, key/value rows, shipping-address rows. */
.cprof-title[b-o7eice7ugh] {
    font-size: .8rem;
    font-weight: 700;
    color: var(--mud-palette-success);
    font-family: var(--font-sans);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.cprof-row[b-o7eice7ugh] {
    display: flex;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: .85rem;
}

.cprof-row:last-child[b-o7eice7ugh] {
    border-bottom: none;
}

.cprof-key[b-o7eice7ugh] {
    color: var(--mud-palette-text-secondary);
    min-width: 140px;
}

.cprof-ship[b-o7eice7ugh] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
}

/* ── Builder: editor beside its preview ───────────────────────────────────────────────────────────────
   The preview is sticky and as tall as the viewport allows, because it is a reference the studio glances
   at while working the column next to it — a panel that scrolled away with the form would be a screenshot.
   One column below the drawer breakpoint: side-by-side on a phone gives two things too narrow to use. */
.cportal-builder-split[b-o7eice7ugh] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

/* The CMS keeps almost all of its width. Its editors are dense forms and tables — the very things the 14"
   responsive pass was about — and halving them to make room for a preview that is 390px wide by default would
   be trading the screen a studio types on for space the frame does not use. The builder's own column is a
   short form and can afford an even split; this one cannot. */
.cportal-builder-split.is-cms[b-o7eice7ugh] { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); }

.cportal-builder-edit[b-o7eice7ugh] { min-width: 0; }

.cportal-builder-preview[b-o7eice7ugh] {
    min-width: 0;
    position: sticky;

    /* Under the portal's own sticky header, not beneath it. At top: 0 the header slid over the panel once the
       page scrolled and took the toolbar with it — the device sizes, refresh and full screen, the controls the
       studio reaches for mid-scroll. The height leaves the panel's foot on screen at the same offset. */
    top: 72px;
    height: min(calc(100vh - 88px), 900px);
}

/* The split asks how much room it actually HAS, not how wide the window is. The two are not the same here:
   the portal's sidebar takes some 380px, so a 1280px laptop leaves this column under 900px — wide enough for
   a media query to keep two columns, and nowhere near wide enough to put an editor and a preview in them.
   Measuring the wrong thing is how a split that reads well on a designer's monitor ends up with the editor
   narrower than the preview beside it.

   1040px is the smallest width at which the CMS's tables and a phone-width frame can both be themselves. The
   builder's own form would fit in less, but one rule both halves obey is worth more than the hundred pixels a
   second breakpoint would win back. */
.cportal-split-frame[b-o7eice7ugh] {
    container-type: inline-size;
    container-name: cportal;
}

/* container-type brings layout containment with it, and layout containment makes this element the containing
   block for any fixed-position descendant — which would trap the preview's full-screen shell in this column
   instead of letting it cover the window. Dropping the containment while it is full is what lets inset: 0
   mean the viewport again. The same shape of trap as the sticky one noted below, in a different disguise. */
.cportal-split-frame:has(.sp-shell.is-full)[b-o7eice7ugh] { container-type: normal; }

@container cportal (max-width: 1040px) {
    .cportal-builder-split[b-o7eice7ugh],
    .cportal-builder-split.is-cms[b-o7eice7ugh] { grid-template-columns: minmax(0, 1fr); }
    .cportal-builder-preview[b-o7eice7ugh] { position: static; height: 70vh; }
}

/* position: sticky creates a stacking context even with z-index: auto — a quiet rule, and the reason the
   panel's own z-index: 1300 could not lift it over a header sitting at 5: it was competing inside this
   column's context, not in the root. Dropping sticky while the panel is full-screen lets its fixed shell
   escape to the root, where its z-index means what it says. Static only while full, so the column still
   follows the editor's scroll the rest of the time. */
.cportal-builder-preview:has(.sp-shell.is-full)[b-o7eice7ugh] { position: static; }
/* /Components/Shared/MeetingSlotPicker.razor.rz.scp.css */
/* Слот-пикер (компактен): час + траење како дропдауни; зафатен термин = посив и прецртан. */
.msp-error[b-w01haskdjl] {
    font-size: 12.5px;
    color: var(--mud-palette-error);
    padding: 4px 0;
}
/* /Components/Sites/SiteCms.razor.rz.scp.css */
/* The CMS section list. Same story as the wizard: the markup carried these class names from the start and
   the rules never got written, so a studio was handed its sections as a run of bare words with two arrows
   and a button loose beside them, and no way to tell where one row ended and the next began.

   What the rules have to answer is small: which sections there are, which one is open, and what the two
   arrows act on. Everything below is that and nothing else. */

.site-cms[b-8uri2fpojf] {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ── One page of the site ───────────────────────────────────────────────────────────────────────────
   A small label over the sections that page draws. Quiet on purpose: it groups the rows, and the rows are
   still what a studio reads down. */
.cms-page[b-8uri2fpojf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cms-page-title[b-8uri2fpojf] {
    margin: 0 0 2px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* A row and, when it is the open one, its form straight under it. */
.cms-item[b-8uri2fpojf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Scrolled to the top when opened; the margin keeps it clear of the portal's sticky top bar. */
.cms-item > .cms-row[b-8uri2fpojf] {
    scroll-margin-top: 88px;
}

.cms-row.is-open[b-8uri2fpojf] {
    border-color: var(--mud-palette-primary);
}

.cms-item > .cms-editor[b-8uri2fpojf] {
    border-left-color: var(--mud-palette-primary);
}

/* ── One section ────────────────────────────────────────────────────────────────────────────────────
   A row, not a list item: the name takes the space, and the controls sit at the end where the eye can
   run down them in a column instead of hunting for them at a different offset on every line. */
.cms-row[b-8uri2fpojf] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-1);
}

.cms-name[b-8uri2fpojf] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: .9rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* The arrows are the one pair of controls a section may not have — a section alone on its own page is
   offered none. Reserving their width keeps the EDIT buttons in a straight line down the list anyway,
   instead of letting one row's button slide left under the others. */
.cms-row[b-8uri2fpojf]  .mud-icon-button {
    flex: 0 0 auto;
}

.cms-row[b-8uri2fpojf]  [data-edit] {
    flex: 0 0 auto;
    margin-left: 8px;
}

/* ── The open section ───────────────────────────────────────────────────────────────────────────────
   Indented and boxed so it reads as belonging to the row above it rather than as a second screen that
   happens to have appeared underneath the list. */
.cms-editor[b-8uri2fpojf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-left: 12px;
    padding: 16px 18px 18px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-left-width: 3px;
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-0);
}

.cms-editor > h4[b-8uri2fpojf] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* ── The section's photograph ───────────────────────────────────────────────────────────────────────
   The thumbnail, the file picker and the size it should be, on one line while there is room for one.
   The hint wraps rather than the row scrolling: it is a sentence, and a sentence cut off mid-word is
   worse than a sentence on two lines. */
.cms-hero-photo[b-8uri2fpojf] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cms-hero-thumb[b-8uri2fpojf] {
    flex: 0 0 auto;
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

.cms-hint[b-8uri2fpojf] {
    flex: 1 1 220px;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* ── Narrow ─────────────────────────────────────────────────────────────────────────────────────────
   Measured on the split frame, not on the window: this sits in half a split screen, so the window being
   wide says nothing about how much room the row actually has. Below the frame width at which the split
   folds to one column, the name takes a line of its own and the controls fall under it — the only way the
   two arrows and the button stay large enough to hit. */
@container cportal (max-width: 560px) {
    .cms-row[b-8uri2fpojf] {
        flex-wrap: wrap;
        row-gap: 2px;
    }

    .cms-name[b-8uri2fpojf] {
        flex: 1 0 100%;
    }

    .cms-editor[b-8uri2fpojf] {
        margin-left: 0;
        padding: 12px 14px 14px;
    }
}
/* /Components/Sites/SiteContactInbox.razor.rz.scp.css */
/* The enquiries left on the site's contact page. Class names without rules again: the name, the time, the
   address and the message all ran together as one paragraph per enquiry, which is the one thing an inbox
   must not do — a studio scanning for who wrote and when could not find either.

   Read-only by design, so there is nothing here to click except the address and the phone number. Those
   two are the whole point of the screen and are styled as what they are: the way to answer. */

.site-contact-inbox[b-dvd6wrybf0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px 18px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-1);
}

.site-contact-inbox > h4[b-dvd6wrybf0] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.sci-message[b-dvd6wrybf0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
}

/* Who, and when — on one line, the time pushed to the far end. Both are what a studio reads first, and
   neither is what it reads second. */
.sci-head[b-dvd6wrybf0] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
}

.sci-name[b-dvd6wrybf0] {
    font-size: .88rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.sci-when[b-dvd6wrybf0] {
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    color: var(--text-muted);
}

/* How to answer. Wrapping rather than truncating: half an email address is no email address. */
.sci-contact[b-dvd6wrybf0] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: .8rem;
    overflow-wrap: anywhere;
}

.sci-contact a[b-dvd6wrybf0] {
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.sci-contact a:hover[b-dvd6wrybf0],
.sci-contact a:focus-visible[b-dvd6wrybf0] {
    text-decoration: underline;
}

/* What the visitor typed. Line breaks kept — somebody who wrote three short lines meant three lines —
   but rendered as text, never as markup. */
.sci-body[b-dvd6wrybf0] {
    margin: 0;
    font-size: .84rem;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Sites/SiteFooterSettings.razor.rz.scp.css */
/* The footer's social links and the payment marks. Class names without rules again: a bare <label> wrapping
   a <span> and an <input> lays out inline, so every platform's name ran into the box beside it and the next
   platform started on whatever was left of the same line. Eight of them did that at once.

   A grid fixes it properly rather than by nudging: the names line up in one column whatever their length,
   which is what makes the list scannable in Greek and English both. */

.site-footer-settings[b-fh4uilg5od] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px 18px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-1);
}

.site-footer-settings > h4[b-fh4uilg5od] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.site-footer-settings h5[b-fh4uilg5od] {
    margin: 0 0 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Social profiles ────────────────────────────────────────────────────────────────────────────────
   One row per platform. The name column is sized to the longest of them rather than to each row's own
   text, so the boxes start at the same place down the list. */
.sf-social[b-fh4uilg5od] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
}

.sf-social h5[b-fh4uilg5od] {
    grid-column: 1 / -1;
}

.sf-row[b-fh4uilg5od] {
    display: grid;
    grid-template-columns: minmax(88px, max-content) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.sf-label[b-fh4uilg5od] {
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
}

.sf-input[b-fh4uilg5od] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .85rem;
}

.sf-input[b-fh4uilg5od]::placeholder {
    color: var(--text-muted);
}

.sf-input:focus-visible[b-fh4uilg5od] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* ── Payment marks ──────────────────────────────────────────────────────────────────────────────────
   A statement about what the studio accepts, not a switch that turns a payment on — so they read as a
   set of ticks, wrapping across the width rather than running down thirteen lines. */
.sf-payments[b-fh4uilg5od] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
}

.sf-payments h5[b-fh4uilg5od] {
    flex: 1 0 100%;
    margin-bottom: 0;
}

.sf-check[b-fh4uilg5od] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

/* ── Narrow ─────────────────────────────────────────────────────────────────────────────────────────
   Measured on the split frame: below the width at which the editor stops sharing the screen with the
   preview, a name column and a box on the same line leave the box too short to read a URL in. */
@container cportal (max-width: 560px) {
    .sf-row[b-fh4uilg5od] {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
}
/* /Components/Sites/SiteLocations.razor.rz.scp.css */
/* The studio's branches and when each one opens. Class names without rules again: six unstyled inputs in a
   row collapsed to the browser's default width and wrapped mid-way, so a branch read as a jumble of small
   boxes with nothing saying which was the postcode and which the AADE number.

   The placeholders are the only labels these fields have, which is why the boxes have to be wide enough to
   show one. Below, that is what the minimum column width is for. */

.site-locations[b-utav56qj37] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-1);
}

.site-locations > h4[b-utav56qj37] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

/* ── One branch ─────────────────────────────────────────────────────────────────────────────────────
   Boxed, because everything below hangs off it: resources, calendars, stock and fiscal documents all
   name a branch, and a studio editing two of them at once must never be in doubt which it is in. */
.sl-location[b-utav56qj37] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
}

/* The name, and which branch answers for the site. */
.sl-head[b-utav56qj37] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sl-head .sl-input[b-utav56qj37] {
    flex: 1 1 200px;
    font-size: .9rem;
    font-weight: 600;
}

/* Told, not offered: the branch that already answers for the site gets a mark rather than a button that
   would change nothing. */
.sl-primary[b-utav56qj37] {
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--mud-palette-success);
}

/* ── Address, contact, AADE number ──────────────────────────────────────────────────────────────────
   As many columns as fit at a width that still shows a placeholder — the placeholder is the only thing
   naming these fields, so a column too narrow to read one leaves them unlabelled. */
.sl-fields[b-utav56qj37] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}

.sl-input[b-utav56qj37] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-1);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .85rem;
}

.sl-input[b-utav56qj37]::placeholder {
    color: var(--text-muted);
}

.sl-input:focus-visible[b-utav56qj37] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* Save and the opening hours to the left, the delete away at the far end — it is the one control here
   that cannot be undone by typing the old value back in. */
.sl-actions[b-utav56qj37] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sl-active[b-utav56qj37] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 4px;
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
}

.sl-actions[b-utav56qj37]  [data-remove] {
    margin-left: auto;
}

/* ── When it opens ──────────────────────────────────────────────────────────────────────────────────
   Seven rows, one per day, each a name and however many windows that day has. The name column is fixed
   so the times line up down the week — a studio checks its hours by running an eye down that column,
   and it can only do that if Wednesday's opening time sits under Tuesday's. */
.sl-hours[b-utav56qj37] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

.sl-day[b-utav56qj37] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.sl-day-name[b-utav56qj37] {
    flex: 0 0 96px;
    font-size: .8rem;
    color: var(--mud-palette-text-primary);
}

/* No window at all is what closed means. It is said in words rather than left as a gap, so an empty day
   reads as a decision instead of as something that failed to load. */
.sl-closed[b-utav56qj37] {
    font-size: .78rem;
    font-style: italic;
    color: var(--text-muted);
}

/* Open, closed over lunch, open again — so a day holds more than one of these. */
.sl-window[b-utav56qj37] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 6px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-1);
}

.sl-time[b-utav56qj37] {
    padding: 4px 6px;
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: var(--font-mono, monospace);
    font-size: .8rem;
}

.sl-time:focus-visible[b-utav56qj37] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* ── Narrow ─────────────────────────────────────────────────────────────────────────────────────────
   The day name takes its own line rather than squeezing the times, which are the part being read. */
@container cportal (max-width: 560px) {
    .sl-day-name[b-utav56qj37] {
        flex: 1 0 100%;
    }
}

/* ── On the map ─────────────────────────────────────────────────────────────────────────────────────
   The frame the contact page will draw, what placed it, and one box to correct it. */
.sl-map[b-utav56qj37] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sl-map-title[b-utav56qj37] {
    font-size: .78rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.sl-map-frame[b-utav56qj37] {
    width: 100%;
    height: 220px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
}

.sl-map-status[b-utav56qj37],
.sl-map-help[b-utav56qj37] {
    margin: 0;
    font-size: .78rem;
    color: var(--mud-palette-text-secondary);
}

.sl-map-paste[b-utav56qj37] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.sl-map-paste .sl-input[b-utav56qj37] {
    flex: 1 1 280px;
}
/* /Components/Sites/SitePackages.razor.rz.scp.css */
/* The package's picture: a thumbnail, the file picker and the way to remove it on one wrapping row — the same
   slot the products screen has, cropped wide because the Offers card is. */
.pk-picture[b-c0sw12gy93] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}

.pk-thumb[b-c0sw12gy93] {
    width: 128px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    flex: none;
}
/* /Components/Sites/SitePageEditor.razor.rz.scp.css */
/* The pages a studio writes itself — About, the legal pages, delivery, the loyalty scheme. As with the
   section list next door, the class names were in the markup from the start and the rules were never
   written, which is why every page name in the row of buttons read as ABOUT USEMPTY: the badge saying
   the page has nothing in it yet was a bare inline word sitting flush against the name.

   That badge is the reason this row exists at all — it is how a studio sees, at a glance, which of its
   pages are still blank. It has to read as a separate thing from the name. */

.page-editor[b-q4v1abcqns] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Which page ─────────────────────────────────────────────────────────────────────────────────────
   Wrapping rather than scrolling: there are six or seven of these and they are the navigation of this
   editor. A page pushed off the end of a scroller is a page a studio does not know it has. */
.pe-pages[b-q4v1abcqns] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pe-empty[b-q4v1abcqns] {
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--text-muted);
}

/* ── The page being written ─────────────────────────────────────────────────────────────────────────
   Boxed, for the same reason the open section is: so it reads as what the button above it opened. */
.pe-body[b-q4v1abcqns] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-0);
}

/* ── One block ──────────────────────────────────────────────────────────────────────────────────────
   A paragraph, a heading, a list item, a picture or an embed. They stack, they are reordered by the
   arrows at the foot of each, and the whole point of the border is that a studio can see where the
   block it is about to move up actually ends. */
.pe-block[b-q4v1abcqns] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-1);
}

/* Which kind of block this is. Quiet: it labels the box, it is not part of what the studio wrote. */
.pe-block-kind[b-q4v1abcqns] {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* The plain controls — a native select, a text input, the textarea. Deliberately not MudBlazor (the
   editor has to keep working on a slow phone), which is exactly why they need dressing by hand: left
   bare they inherit the browser's white box and sit in a dark panel glowing. */
.pe-input[b-q4v1abcqns] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    color: var(--mud-palette-text-primary);
    font: inherit;
    line-height: 1.5;
}

.pe-input:focus-visible[b-q4v1abcqns] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

textarea.pe-input[b-q4v1abcqns] {
    resize: vertical;
    min-height: 72px;
}

/* B and I, above the text they act on. */
.pe-toolbar[b-q4v1abcqns] {
    display: flex;
    gap: 2px;
}

/* Move up, move down, delete — at the end of the block's own row, away from the toolbar above so the
   delete is nowhere near the buttons a studio presses while writing. */
.pe-block-actions[b-q4v1abcqns] {
    display: flex;
    justify-content: flex-end;
    gap: 2px;
}

/* Said at the moment it matters: an embed loads a third party's script on the studio's page. */
.pe-note[b-q4v1abcqns] {
    font-size: .75rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.pe-add[b-q4v1abcqns] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
/* /Components/Sites/SitePreviewPanel.razor.rz.scp.css */
/*
    The preview panel.

    What the device buttons change is the WIDTH of the frame, and only the width. That is the honest control:
    a template answers to the viewport width, so 390px here produces the same layout a 390px phone produces.
    Height simply fills the panel — pinning it to 844px would draw a prettier picture of a phone while showing
    less of the site, and the studio is here to see the site.
*/

.sp-shell[b-75k3r9fz9e] {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
}

/* Full screen without a dialog: nothing to trap focus in, nothing to restore, and the editor underneath
   keeps its scroll position for when the studio folds it back down. */
.sp-shell.is-full[b-75k3r9fz9e] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    border-radius: 0;
    border: none;
}

.sp-bar[b-75k3r9fz9e] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
    flex-shrink: 0;
}

.sp-devices[b-75k3r9fz9e], .sp-actions[b-75k3r9fz9e] { display: flex; align-items: center; gap: 4px; }

.sp-device[b-75k3r9fz9e], .sp-btn[b-75k3r9fz9e] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 28px;
    border: 1px solid transparent; border-radius: var(--radius-md, 8px);
    background: transparent; color: var(--text-muted);
    font-size: 13px; line-height: 1; cursor: pointer; padding: 0;
    transition: color .15s, background .15s, border-color .15s;
}

.sp-device:hover[b-75k3r9fz9e], .sp-btn:hover[b-75k3r9fz9e] { color: var(--text-primary); background: var(--surface-3); }

.sp-device.is-on[b-75k3r9fz9e] {
    color: var(--zenic-green-mid);
    background: color-mix(in srgb, var(--zenic-green-mid) 14%, transparent);
    border-color: color-mix(in srgb, var(--zenic-green-mid) 40%, transparent);
}

.sp-device:focus-visible[b-75k3r9fz9e], .sp-btn:focus-visible[b-75k3r9fz9e] {
    outline: 2px solid var(--zenic-green-mid);
    outline-offset: 1px;
}

/* The one worded control on the bar, because it leaves the panel: an icon here would read as one more way to
   resize the frame. */
.sp-site[b-75k3r9fz9e] {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-md, 8px);
    background: transparent;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.sp-site:hover[b-75k3r9fz9e] { background: var(--surface-3); border-color: var(--zenic-green-mid); }

.sp-site:focus-visible[b-75k3r9fz9e] {
    outline: 2px solid var(--zenic-green-mid);
    outline-offset: 1px;
}

/* The stage is the neutral surround a device sits on, and it scrolls sideways rather than squeezing the
   frame: a desktop preview inside a narrow panel must stay a desktop preview. */
.sp-stage[b-75k3r9fz9e] {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    padding: 12px;
    background: var(--surface-0);
    overflow: auto;
}

.sp-frame[b-75k3r9fz9e] {
    display: flex;
    flex-shrink: 0;
    height: 100%;
    min-height: 320px;
    background: #fff;
    border: 1px solid var(--border-bright);
    border-radius: var(--radius-md, 8px);
    overflow: hidden;
}

/* Widths a real device reports to CSS, not the hardware pixel counts. */
.sp-frame.is-phone[b-75k3r9fz9e]   { width: 390px; }
.sp-frame.is-tablet[b-75k3r9fz9e]  { width: 834px; }
.sp-frame.is-desktop[b-75k3r9fz9e] { width: 100%; min-width: 0; }

.sp-iframe[b-75k3r9fz9e] {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.sp-empty[b-75k3r9fz9e] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}

/* Below the drawer breakpoint the panel is the whole screen when open; a device frame inside a phone is a
   picture of a phone on a phone. */
@media (max-width: 860px) {
    .sp-stage[b-75k3r9fz9e] { padding: 0; }
    .sp-frame[b-75k3r9fz9e], .sp-frame.is-phone[b-75k3r9fz9e], .sp-frame.is-tablet[b-75k3r9fz9e] { width: 100%; border: none; border-radius: 0; }
    .sp-devices[b-75k3r9fz9e] { display: none; }
}
/* /Components/Sites/SitePublishPanel.razor.rz.scp.css */
/* The publish panel. The markup carried these class names from the start and no rule ever existed for them,
   so the last screen before a salon goes live listed what was stopping it as a plain bulleted list — the same
   gap the wizard had.

   The two lists here say different things and so must not look the same: one is a refusal, the other is a
   note. A studio that reads a warning as a blocker goes looking for something to fix that is not broken; one
   that reads a blocker as a warning presses publish and is refused. */

.sp-status[b-gthmj1qzlr] {
    margin: 0 0 12px;
    font-family: var(--font-mono, monospace);
    font-size: .82rem;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--text-muted);
}

.sp-blockers[b-gthmj1qzlr],
.sp-warnings[b-gthmj1qzlr] {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sp-blockers li[b-gthmj1qzlr],
.sp-warnings li[b-gthmj1qzlr] {
    padding: 9px 12px 9px 34px;
    position: relative;
    border-radius: var(--radius-md, 8px);
    font-size: .85rem;
    line-height: 1.45;
}

/* Stopped. Stated twice over — the colour and the mark — so it does not depend on seeing the difference
   between red and amber, which is the most common colour blindness there is. */
.sp-blockers li[b-gthmj1qzlr] {
    background: color-mix(in srgb, var(--mud-palette-error) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 35%, transparent);
    color: var(--mud-palette-text-primary);
}

.sp-blockers li[b-gthmj1qzlr]::before {
    content: "✕";
    position: absolute;
    inset-inline-start: 12px;
    color: var(--mud-palette-error);
    font-weight: 700;
}

/* Not stopped — worth knowing. Quieter on purpose: this list is normal on a site that is still being
   written, and a panel that shouts at every ordinary state stops being read. */
.sp-warnings li[b-gthmj1qzlr] {
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 30%, transparent);
    color: var(--mud-palette-text-secondary, var(--text-muted));
}

.sp-warnings li[b-gthmj1qzlr]::before {
    content: "!";
    position: absolute;
    inset-inline-start: 14px;
    color: var(--mud-palette-warning);
    font-weight: 700;
}
/* /Components/Sites/SiteSectionItems.razor.rz.scp.css */
/* The repeating content of a section — team members, gallery photos, testimonials, carousel slides. One
   component for all four, and the last of the CMS editors to be carrying class names with no rules behind
   them: an entry's photograph, its title, its role line and its paragraph all ran together with nothing
   saying where one team member ended and the next began.

   This is NOT a panel card. It opens INSIDE the section editor, which is already a card, and a card drawn
   inside a card reads as a second screen rather than as the contents of the one already open. */

.section-items[b-cmj393ll3i] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ── One entry ──────────────────────────────────────────────────────────────────────────────────────
   Stacked, not a row: an entry holds a photograph, a name, a role and a paragraph, and laying those
   along one line is what made four team members read as one run of text. A step lighter than the
   editor around it, which is the only thing separating the list from its container. */
.si-item[b-cmj393ll3i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-1);
}

/* ── Its photograph ─────────────────────────────────────────────────────────────────────────────────
   Thumbnail, file picker and the size it should be, on one line while there is room. The hint wraps
   rather than the row scrolling — it is a sentence, and half a sentence helps nobody. */
.si-photo[b-cmj393ll3i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.si-thumb[b-cmj393ll3i] {
    flex: 0 0 auto;
    width: 96px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-md, 8px);
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

/* What the picture has to be, said before a file is chosen rather than after one is refused. Also the
   line saying how many entries the design is drawn around. */
.si-hint[b-cmj393ll3i] {
    font-size: .78rem;
    line-height: 1.4;
    color: var(--text-muted);
}

/* ── Its words ──────────────────────────────────────────────────────────────────────────────────────
   Plain native controls, like everywhere else in this editor, and dressed by hand for the same reason:
   left bare they take the browser's white box and glow inside a dark card. */
.si-input[b-cmj393ll3i] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .85rem;
    line-height: 1.5;
}

.si-input[b-cmj393ll3i]::placeholder {
    color: var(--text-muted);
}

.si-input:focus-visible[b-cmj393ll3i] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

textarea.si-input[b-cmj393ll3i] {
    resize: vertical;
    min-height: 64px;
}

/* ── Its controls ───────────────────────────────────────────────────────────────────────────────────
   Move up, move down, save — and the delete away at the far end, because it is the only one here that
   cannot be undone by typing the old value back in. */
.si-actions[b-cmj393ll3i] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.si-actions[b-cmj393ll3i]  [data-remove] {
    margin-left: auto;
}

/* The button that adds one more entry. A column stretches its children, which
   turned "Add an entry" into a full-width bar reading as the most important
   thing in the list — and it is the least. Only the direct child: the arrows
   and the save inside an entry sit in a row and are already aligned there. */
.section-items[b-cmj393ll3i] >  .mud-button-root {
    align-self: flex-start;
}
/* /Components/Sites/SiteSeoEditor.razor.rz.scp.css */
/* What search engines are told, and the studio's own measurement ids. Class names without rules again.

   This screen has a problem the others do not: nothing on it is visible on the studio's own site, so the
   only feedback it can give is on the screen itself. That is what the character count is for, and a count
   sitting flush against the box it counts is a count nobody reads — it needs to be where the eye lands
   when the typing stops, which is the right-hand end of the field. */

.site-seo[b-gbsxethlyn] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 18px 18px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-1);
}

.site-seo > h4[b-gbsxethlyn] {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.site-seo h5[b-gbsxethlyn] {
    margin: 0 0 8px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Which page's meta text ─────────────────────────────────────────────────────────────────────────
   Plain buttons, so they take their whole appearance from here. Wrapping, not scrolling: a page pushed
   off the end is a page whose title nobody ever writes. */
.seo-pages[b-gbsxethlyn] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.seo-page[b-gbsxethlyn] {
    padding: 5px 12px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-pill, 999px);
    background: var(--surface-0);
    color: var(--text-muted);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.seo-page:hover[b-gbsxethlyn] {
    color: var(--mud-palette-text-primary);
}

/* The one being edited. Everything on this screen is invisible elsewhere, so which page is open has to
   be unmistakable here — otherwise a studio writes the home page's title onto the contact page. */
.seo-page.is-selected[b-gbsxethlyn] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 55%, transparent);
    background: color-mix(in srgb, var(--mud-palette-primary) 16%, transparent);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.seo-page:focus-visible[b-gbsxethlyn] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* ── A field, and how much room is left in it ───────────────────────────────────────────────────────
   The count is placed under the box at its right-hand end: that is where a line of text ends, so it is
   where the eye already is at the moment the count starts to matter. */
.seo-field[b-gbsxethlyn] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.seo-field > span:first-child[b-gbsxethlyn] {
    font-size: .82rem;
    color: var(--mud-palette-text-primary);
}

.seo-input[b-gbsxethlyn] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: .85rem;
    line-height: 1.5;
}

textarea.seo-input[b-gbsxethlyn] {
    resize: vertical;
}

.seo-input[b-gbsxethlyn]::placeholder {
    color: var(--text-muted);
}

.seo-input:focus-visible[b-gbsxethlyn] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

.seo-count[b-gbsxethlyn] {
    align-self: flex-end;
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    color: var(--text-muted);
}

/* What the page will carry whether or not the studio words it. Quiet, and monospaced because it is the
   literal string that will be sent — not a sentence about it. */
.seo-effective[b-gbsxethlyn] {
    margin: 0;
    padding: 8px 10px;
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    font-family: var(--font-mono, monospace);
    font-size: .74rem;
    line-height: 1.45;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

/* ── The studio's own measurement ids ───────────────────────────────────────────────────────────────
   Set apart from the meta text above: this is somebody else's script on the studio's page, and it is
   governed by what the visitor agreed to. Not the same kind of decision as wording a title. */
.seo-analytics[b-gbsxethlyn] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

.seo-analytics h5[b-gbsxethlyn] {
    margin-bottom: 0;
}
/* /Components/Sites/SiteShopProducts.razor.rz.scp.css */
/* The product's picture beside its name. A thumbnail, not the photograph: uploads arrive at up to 2000px on the
   long edge, and drawn at their own size one picture would push the rest of the shop off the screen. */
.sp-picture[b-tlr8ydxv39] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}

.sp-thumb[b-tlr8ydxv39] {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 6px;
    flex: none;
}
/* /Components/Sites/SiteTemplateSwitcher.razor.rz.scp.css */
/* The Template module. The card grid is the wizard's, deliberately: a studio that chose its template once
   should meet the same nine drawings in the same arrangement when it changes its mind, rather than having to
   work out which of these is the one it has. */

.tpl-intro[b-dlbc99acjg] {
    margin: 0;
    max-width: 68ch;
    font-size: .8rem;
    line-height: 1.5;
    color: var(--text-muted);
}

/* ── The nine ───────────────────────────────────────────────────────────────────────────────────────
   Sized so a whole row is visible at once wherever possible: comparing templates means looking at them
   together, and a grid that scrolls turns that into remembering. */
.tpl-grid[b-dlbc99acjg] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.tpl-card[b-dlbc99acjg] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.tpl-card:hover[b-dlbc99acjg] {
    border-color: color-mix(in srgb, var(--mud-palette-primary) 45%, transparent);
}

.tpl-card:focus-visible[b-dlbc99acjg] {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 1px;
}

/* The template in use. Marked by a border rather than by a tint, so it stays legible while a DIFFERENT
   card is being considered — the two states have to be tellable apart at a glance, and both are on
   screen at the same time. */
.tpl-card.is-current[b-dlbc99acjg] {
    border-color: color-mix(in srgb, var(--mud-palette-success) 60%, transparent);
}

/* The one being considered. Filled, because this is the one the preview beside it is showing. */
.tpl-card.is-candidate[b-dlbc99acjg] {
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 12%, transparent);
}

.tpl-thumb[b-dlbc99acjg] {
    display: block;
    line-height: 0;
}

.tpl-thumb[b-dlbc99acjg]  svg {
    width: 100%;
    height: auto;
    border-radius: var(--radius-sm, 5px);
}

.tpl-name[b-dlbc99acjg] {
    font-size: .8rem;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--mud-palette-text-primary);
}

.tpl-current[b-dlbc99acjg] {
    align-self: flex-start;
    padding: 1px 7px;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: uppercase;
    color: var(--mud-palette-success);
}

/* ── What it would cost ─────────────────────────────────────────────────────────────────────────────
   Not a dialog. A studio deciding this wants to read the list and look at the preview at the same
   time, and a modal covers the very thing the decision is about. */
.tpl-effects[b-dlbc99acjg] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    background: var(--surface-0);
}

.tpl-effects > h5[b-dlbc99acjg] {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    text-transform: capitalize;
    color: var(--mud-palette-text-primary);
}

.tpl-effect-list[b-dlbc99acjg] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Each line is something that stops being drawn. Amber, not red: nothing here is an error and nothing
   is a refusal — the studio may do this, and it is being told what it means. */
.tpl-effect-list li[b-dlbc99acjg] {
    position: relative;
    padding: 7px 12px 7px 30px;
    border-radius: var(--radius-md, 8px);
    background: color-mix(in srgb, var(--mud-palette-warning) 9%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
    font-size: .82rem;
    line-height: 1.45;
    color: var(--mud-palette-text-primary);
}

.tpl-effect-list li[b-dlbc99acjg]::before {
    content: "!";
    position: absolute;
    inset-inline-start: 13px;
    font-weight: 700;
    color: var(--mud-palette-warning);
}

/* "Nothing is deleted" is the opposite of a warning and must not be dressed as one — a studio scanning
   amber boxes reads the reassurance as one more thing going wrong. */
.tpl-effect-list li.is-reassurance[b-dlbc99acjg] {
    background: color-mix(in srgb, var(--mud-palette-success) 10%, transparent);
    border-color: color-mix(in srgb, var(--mud-palette-success) 30%, transparent);
}

.tpl-effect-list li.is-reassurance[b-dlbc99acjg]::before {
    content: "✓";
    color: var(--mud-palette-success);
}

.tpl-actions[b-dlbc99acjg] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
/* /Components/Sites/SiteWizard.razor.rz.scp.css */
/* The website-builder wizard. The markup carried these class names from the start; the rules never got
   written, so a studio was handed nine template names run together as one unbroken word and no sign of
   which one it had picked. Everything here exists to answer three questions the bare form could not:
   where am I, what am I choosing, and did that click do anything. */

.site-wizard[b-3roroy5i74] {
    counter-reset: wiz;
    max-width: 880px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ── Steps ──────────────────────────────────────────────────────────────────────────────────────────
   The brief's order is logo -> template -> colours -> details -> preview. Numbering them off a CSS
   counter rather than writing the digits in the markup means a step added or reordered renumbers
   itself, and a step hidden behind a feature flag never leaves a gap in the sequence. */
.wiz-step[b-3roroy5i74] {
    background: var(--surface-1);
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-lg, 12px);
    padding: 18px 20px 20px;
}

.wiz-step > h3[b-3roroy5i74] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 14px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

.wiz-step > h3[b-3roroy5i74]::before {
    counter-increment: wiz;
    content: counter(wiz);
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill, 999px);
    background: color-mix(in srgb, var(--mud-palette-success) 16%, transparent);
    color: var(--mud-palette-success);
    font-family: var(--font-mono, monospace);
    font-size: .72rem;
    font-weight: 700;
}

/* ── Template picker ────────────────────────────────────────────────────────────────────────────────
   A grid, because nine choices in a row is a list to scan and nine choices wrapped is a set to compare.
   Each card carries a chip standing in for the page: the template's own ground, a line of its ink, and
   the studio's two brand colours. An honest stand-in, not a substitute — a picture of the layout is
   still what belongs here, and the chip is shaped so a real thumbnail can take the space without the
   card moving. */
.wiz-templates[b-3roroy5i74] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
    gap: 12px;
}

.wiz-template[b-3roroy5i74] {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
    background: var(--surface-0);
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    text-align: left;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.wiz-template:hover[b-3roroy5i74] {
    border-color: color-mix(in srgb, var(--mud-palette-success) 55%, transparent);
    transform: translateY(-2px);
}

.wiz-template:focus-visible[b-3roroy5i74] {
    outline: 2px solid var(--mud-palette-success);
    outline-offset: 2px;
}

/* The drawing inside carries the template's own ground, so this box sets no background of its own.
   position is for the selected tick that sits in its corner. The height matches the drawing's aspect
   (148×88), so nothing is letterboxed. */
.wiz-swatch[b-3roroy5i74] {
    width: 100%;
    aspect-ratio: 148 / 88;
    position: relative;
}

.wiz-template-name[b-3roroy5i74] {
    display: block;
    padding: 9px 11px;
    font-family: var(--font-mono, monospace);
    font-size: .78rem;
    letter-spacing: var(--tracking-label, .08em);
    text-transform: capitalize;
    color: var(--mud-palette-text-primary);
    border-top: 1px solid var(--mud-palette-lines-default, var(--border-bright));
}

/* Selected. The click already worked before this rule existed — it set is-selected and saved the choice.
   What was missing was any way for the studio to see that, so it is stated twice over: a ring the eye
   catches across the grid, and a tick that survives being colour-blind to the ring. */
.wiz-template.is-selected[b-3roroy5i74] {
    border-color: var(--mud-palette-success);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--mud-palette-success) 45%, transparent);
}

.wiz-template.is-selected .wiz-swatch[b-3roroy5i74]::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill, 999px);
    background: var(--mud-palette-success);
    color: var(--surface-0);
    font-size: .8rem;
    font-weight: 700;
    line-height: 1;
}

.wiz-template.is-selected .wiz-template-name[b-3roroy5i74] {
    color: var(--mud-palette-success);
    font-weight: 700;
}

/* ── Colours ────────────────────────────────────────────────────────────────────────────────────────
   Two native colour inputs. Sized up because the browser default is a thin strip that reads as a form
   control rather than as the colour it is about to put on the studio's website. */
.wiz-colours[b-3roroy5i74] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.wiz-colours input[type="color"][b-3roroy5i74] {
    inline-size: 62px;
    block-size: 44px;
    padding: 0;
    background: none;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
}

/* Chrome and Firefox each wrap the chosen colour in their own box; both need the padding taken off or
   the swatch floats in a grey frame. */
.wiz-colours input[type="color"][b-3roroy5i74]::-webkit-color-swatch-wrapper { padding: 3px; }
.wiz-colours input[type="color"][b-3roroy5i74]::-webkit-color-swatch { border: none; border-radius: 5px; }
.wiz-colours input[type="color"][b-3roroy5i74]::-moz-color-swatch { border: none; border-radius: 5px; }

/* ── Logo ───────────────────────────────────────────────────────────────────────────────────────────
   The native file input said "Choose File / No file chosen" in English whatever language the portal was
   in, gave no hint of what a logo has to be, and showed the mark on one ground only.

   It is still a native input — the browser's own file dialog and its own drop handling are worth more
   than anything hand-rolled, and they are what a phone knows how to open. It is simply stretched over
   the panel below at zero opacity, so all of that keeps working and none of its wording is ever seen. */
.wiz-logo[b-3roroy5i74] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* The same mark on the two grounds the nine templates are drawn on. A transparent logo in dark ink
   vanishes on Portfolio; a white one vanishes on the other eight. Both are worth finding out here
   rather than after publishing. */
.wiz-logo-on[b-3roroy5i74] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 64px;
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default, var(--border-bright));
    border-radius: var(--radius-md, 8px);
}

.wiz-logo-on img[b-3roroy5i74] {
    max-height: 100%;
    max-width: 180px;
    object-fit: contain;
}

.wiz-logo-on-light[b-3roroy5i74] { background: #ffffff; }

/* Portfolio's ground, from its own stylesheet, so this is a real answer rather than a generic dark. */
.wiz-logo-on-dark[b-3roroy5i74] { background: #17151a; }

.wiz-drop[b-3roroy5i74] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 16px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-text-primary) 28%, transparent);
    border-radius: var(--radius-lg, 12px);
    background: var(--surface-0);
    text-align: center;
    transition: border-color .15s ease, background .15s ease;
}

.wiz-drop:hover[b-3roroy5i74],
.wiz-drop:focus-within[b-3roroy5i74],
.wiz-drop.is-over[b-3roroy5i74] {
    border-color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 7%, var(--surface-0));
}

.wiz-drop.is-over[b-3roroy5i74] { border-style: solid; }

.wiz-drop.is-busy[b-3roroy5i74] { cursor: progress; }

/* The whole panel is the control. Opacity rather than display:none or visibility:hidden, because both of
   those take it out of the tab order and off the accessibility tree — this way it is still a file input
   a keyboard reaches and a screen reader announces, and :focus-within above is what draws its focus. */
.wiz-drop[b-3roroy5i74]  input[type="file"],
.wiz-drop-input[b-3roroy5i74] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.wiz-drop.is-busy[b-3roroy5i74]  input[type="file"] { cursor: progress; }

.wiz-drop-face[b-3roroy5i74] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;   /* every click belongs to the input underneath */
}

.wiz-drop-icon[b-3roroy5i74] {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--mud-palette-success);
}

.wiz-drop-title[b-3roroy5i74] {
    font-size: .88rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

/* A line of advice under a step's title, before its controls. */
.wiz-note[b-3roroy5i74] {
    margin: -6px 0 12px;
    font-size: .82rem;
    color: var(--mud-palette-text-secondary);
    max-width: 70ch;
}

.wiz-drop-hint[b-3roroy5i74] {
    font-size: .78rem;
    color: var(--text-muted);
    max-width: 46ch;
}

/* ── Errors ─────────────────────────────────────────────────────────────────────────────────────────
   Sits next to the field it is about, which is the whole reason the wizard validates the name locally
   as well as in the API. */
.wiz-error[b-3roroy5i74] {
    margin-top: 8px;
    padding: 8px 11px;
    border-radius: var(--radius-md, 8px);
    background: color-mix(in srgb, var(--mud-palette-error) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-error) 40%, transparent);
    color: var(--mud-palette-error);
    font-size: .82rem;
}

/* ── Details + preview ──────────────────────────────────────────────────────────────────────────────
   The MudBlazor controls in these two steps render outside the scope, so their spacing is set through
   ::deep rather than by wrapping each one in a div that exists only to be styled. */
.wiz-step[b-3roroy5i74]  .mud-input-control { margin-bottom: 14px; }
.wiz-step[b-3roroy5i74]  .mud-switch { display: flex; margin-bottom: 6px; }

/* Approval mode: a short label over its two choices, under the slot interval it belongs with. */
.wiz-approval[b-3roroy5i74] { display: flex; flex-direction: column; gap: 2px; margin: 10px 0 4px; }
.wiz-approval-label[b-3roroy5i74] { font-size: .8rem; font-weight: 600; color: var(--mud-palette-text-secondary); }


/* Narrower cards on a phone, but not narrower than a layout can still be read at — nine slivers tell a
   studio less than three cards and a scroll. The thumbnail keeps its own aspect and simply scales. */
@media (max-width: 560px) {
    .wiz-step[b-3roroy5i74] { padding: 14px 14px 16px; }
    .wiz-templates[b-3roroy5i74] { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); }
}

/* ── The thumbnail inside a template card ─────────────────────────────────────────────────────────────
   A drawing of what the template lays out, in its own ground and ink with the studio's two colours in it.
   The SVG carries its own background, so this holds no colour of its own — and when real thumbnails
   arrive, an <img> drops into exactly this box without the card moving. */
.wiz-swatch[b-3roroy5i74] {
    display: block;
    padding: 0;
    overflow: hidden;
}

.wiz-swatch[b-3roroy5i74]  svg,
.wiz-swatch > svg[b-3roroy5i74] {
    display: block;
    width: 100%;
    height: 100%;
}

/* A consequence said beside the switch that causes it, rather than discovered on the live site. Sits under
   its control and reads as belonging to it — indented past the switch, and quiet, because it explains rather
   than warns: nothing here is wrong, it is simply worth knowing before the site is announced abroad. */
.wiz-hint[b-3roroy5i74] {
    margin: -6px 0 4px 36px;
    max-width: 62ch;
    font-size: .78rem;
    line-height: 1.5;
    color: var(--text-muted);
}