/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── Sidebar ─────────────────────────────────────────────────────────── */
.sidebar[b-v3am7464vk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 224px;
    height: 100vh;
    background: var(--card-bg, #fff);
    border-right: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    flex-direction: column;
    z-index: 200;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Brand ───────────────────────────────────────────────────────────── */
.sidebar-brand[b-v3am7464vk] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.1rem 1rem 1rem;
    text-decoration: none;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    margin-bottom: 0.5rem;
    flex-shrink: 0;
}

.sidebar-brand-icon[b-v3am7464vk] {
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--primary-color, #4f46e5), var(--secondary-color, #7c3aed));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sidebar-brand-name[b-v3am7464vk] {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 1.05rem;
    background: linear-gradient(135deg, var(--primary-color, #4f46e5), var(--secondary-color, #7c3aed));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.01em;
}

/* ── Nav ─────────────────────────────────────────────────────────────── */
.sidebar-nav[b-v3am7464vk] {
    flex: 1;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.sidebar-divider[b-v3am7464vk] {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin: 0.5rem 0.5rem;
}

/* ── Nav item ────────────────────────────────────────────────────────── */
/* Layout & structure — applies to both <a> (NavLink) and <span> (locked) */
.sidebar-item[b-v3am7464vk] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.55rem;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.13s ease, color 0.13s ease;
}

/*
 * Colour rules use ::deep so they pierce the NavLink component boundary
 * and beat Bulma's global  a { color }  rule.
 * Generated as:  .sidebar-nav[b-xxxx] .sidebar-item  (specificity 0-2-0)
 */
/* Full normalisation via ::deep — overrides Bulma + browser <a> defaults */
.sidebar-nav[b-v3am7464vk]  .sidebar-item,
.sidebar-footer[b-v3am7464vk]  .sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.55rem 0.75rem;
    margin: 0;
    line-height: 1.4;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.55rem;
    background: transparent;
    color: var(--text-muted, #64748b);
    text-decoration: none;
    box-sizing: border-box;
    width: 100%;
}

.sidebar-nav[b-v3am7464vk]  .sidebar-item:hover,
.sidebar-footer[b-v3am7464vk]  .sidebar-item:hover {
    background: rgba(79, 70, 229, 0.07);
    color: var(--text-main, #1e293b);
}

.sidebar-nav[b-v3am7464vk]  .sidebar-item.sidebar-item--active {
    background: rgba(79, 70, 229, 0.1);
    color: var(--primary-color, #4f46e5);
    font-weight: 600;
}

/* Icon inherits colour from the item so hover/active cascade automatically */
.sidebar-item-icon[b-v3am7464vk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    color: inherit;
    transition: color 0.13s ease;
}

.sidebar-item-label[b-v3am7464vk] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Logout button red-on-hover */
.sidebar-footer[b-v3am7464vk]  .sidebar-logout:hover {
    color: #dc2626 !important;
    background: rgba(220, 38, 38, 0.06);
}

/* ── Locked items ────────────────────────────────────────────────────── */
.nav-locked[b-v3am7464vk] {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.locked-item[b-v3am7464vk] {
    opacity: 0.38;
    cursor: not-allowed !important;
    filter: grayscale(0.6);
    user-select: none;
}

.lock-icon[b-v3am7464vk] {
    font-size: 0.58rem;
    opacity: 0.8;
    margin-left: auto;
    flex-shrink: 0;
}

/* Tooltip appears to the RIGHT of the sidebar item */
.nav-locked[b-v3am7464vk]::after {
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    left: calc(100% + 10px);
    transform: translateY(-50%);
    background: #1f2937;
    color: #f9fafb;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.38rem 0.72rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.16s ease;
    z-index: 9999;
}

/* Arrow pointing LEFT toward the sidebar */
.nav-locked[b-v3am7464vk]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(100% + 5px);
    transform: translateY(-50%);
    border: 5px solid transparent;
    border-right-color: #1f2937;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.16s ease;
    z-index: 9999;
}

.nav-locked:hover[b-v3am7464vk]::after,
.nav-locked:hover[b-v3am7464vk]::before {
    opacity: 1;
}

/* ── Sidebar footer ──────────────────────────────────────────────────── */
.sidebar-footer[b-v3am7464vk] {
    padding: 0.75rem 0.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex-shrink: 0;
}

.sidebar-lang-row[b-v3am7464vk] {
    padding: 0.3rem 0.75rem;
}

.sidebar-logout[b-v3am7464vk] {
    color: var(--text-muted, #6b7280);
}

/* ── Page wrapper (offset for sidebar) ──────────────────────────────── */
.page-wrapper[b-v3am7464vk] {
    margin-left: 224px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content[b-v3am7464vk] {
    flex: 1;
}

.site-footer[b-v3am7464vk] {
    padding: 1.25rem 1rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
    background-color: var(--card-bg, #fff);
}

.brand-footer[b-v3am7464vk] {
    color: var(--primary-color, #4f46e5);
}

/* ── Language switcher ────────────────────────────────────────────────── */
.lang-switcher[b-v3am7464vk] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.lang-btn[b-v3am7464vk] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted, #64748b);
    text-decoration: none;
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
    letter-spacing: 0.04em;
}

.lang-btn:hover[b-v3am7464vk] {
    color: var(--primary-color, #4f46e5);
    background: rgba(79, 70, 229, 0.08);
}

.lang-btn--active[b-v3am7464vk] {
    color: var(--primary-color, #4f46e5);
    font-weight: 800;
}

.lang-sep[b-v3am7464vk] {
    /* #94A3B8 on white → 3.5:1 (large-text AA) — decorative separator,
       also marked aria-hidden so it is excluded from a11y contrast checks */
    color: #94A3B8;
    font-size: 0.75rem;
    user-select: none;
}

/* ── Notification badge ───────────────────────────────────────────────── */
/*
 * Placed as a sibling after .sidebar-item-label so it sits at the far right
 * on desktop (where the label is visible) and right beside the icon on mobile
 * (where the label is hidden via display:none).
 */
.nav-badge[b-v3am7464vk] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: auto;
    flex-shrink: 0;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    border-radius: 999px;
    line-height: 1;
    letter-spacing: 0;
    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.45);
    animation: badge-pop-b-v3am7464vk 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes badge-pop-b-v3am7464vk {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

/* Pulse when count is high (> 9) to draw extra attention */
.nav-badge--urgent[b-v3am7464vk] {
    animation: badge-pop-b-v3am7464vk 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both,
               badge-pulse-b-v3am7464vk 2s 0.3s ease-in-out infinite alternate;
}

@keyframes badge-pulse-b-v3am7464vk {
    from { box-shadow: 0 1px 4px rgba(239, 68, 68, 0.45); }
    to   { box-shadow: 0 0 10px rgba(239, 68, 68, 0.75); }
}

/* ── Blazor error UI ──────────────────────────────────────────────────── */
#blazor-error-ui[b-v3am7464vk] {
    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-v3am7464vk] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Mobile top bar (desktop: hidden) ─────────────────────────────────── */
.mobile-topbar[b-v3am7464vk] { display: none; }

/* ── Sidebar overlay/backdrop (desktop: hidden, transitions in on mobile) */
.sidebar-overlay[b-v3am7464vk] {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 300;
    pointer-events: none;
    transition: background 0.25s ease;
}

/* ── Mobile: hamburger drawer ─────────────────────────────────────────── */
@media (max-width: 768px) {
    /* ── Sticky top bar with brand + hamburger ───────────────────────── */
    .mobile-topbar[b-v3am7464vk] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 250;
        background: var(--card-bg, #fff);
        border-bottom: 1px solid var(--border-color, #e5e7eb);
        padding: 0.6rem 1rem;
        gap: 0.75rem;
    }

    /* The brand inside the topbar uses the same .sidebar-brand styles */
    .mobile-topbar .sidebar-brand[b-v3am7464vk] {
        border-bottom: none;
        margin-bottom: 0;
        padding: 0;
    }

    .mobile-hamburger[b-v3am7464vk] {
        background: transparent;
        border: 1.5px solid var(--border-color, #e5e7eb);
        border-radius: 8px;
        padding: 0.4rem 0.75rem;
        font-size: 1rem;
        color: var(--text-main, #1e293b);
        cursor: pointer;
        line-height: 1;
        flex-shrink: 0;
        transition: background 0.15s ease, border-color 0.15s ease;
    }

    .mobile-hamburger:hover[b-v3am7464vk] {
        background: #f1f5f9;
        border-color: #cbd5e1;
    }

    /* Icon swap — pure CSS, immune to Blazor re-renders */
    .nav-icon-close[b-v3am7464vk]              { display: none; }
    body.nav-open .nav-icon-bars[b-v3am7464vk]  { display: none; }
    body.nav-open .nav-icon-close[b-v3am7464vk] { display: inline-block; }

    /* ── Sidebar: full-height slide-out drawer ───────────────────────── */
    .sidebar[b-v3am7464vk] {
        position: fixed;
        top: 0;
        left: 0;
        width: 272px;
        height: 100%;
        flex-direction: column;  /* restore column layout inside drawer */
        overflow-y: auto;
        overflow-x: hidden;
        border-right: 1px solid var(--border-color, #e5e7eb);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 400;
    }

    /* Driven by JS — `body.nav-open` is toggled without touching Blazor state */
    body.nav-open .sidebar[b-v3am7464vk] {
        transform: translateX(0);
    }

    /* Labels and lock icons are visible inside the open drawer */
    .sidebar-item-label[b-v3am7464vk] { display: inline; }
    .lock-icon[b-v3am7464vk]          { display: inline; }

    /* Restore nav to column layout within drawer */
    .sidebar-nav[b-v3am7464vk] {
        flex-direction: column;
        padding: 0 0.5rem;
        gap: 0.1rem;
        overflow-x: visible;
    }

    .sidebar-divider[b-v3am7464vk] {
        width: auto;
        height: 1px;
        margin: 0.5rem 0.5rem;
    }

    /* Restore footer to column layout */
    .sidebar-footer[b-v3am7464vk] {
        border-top: 1px solid var(--border-color, #e5e7eb);
        border-left: none;
        flex-direction: column;
        padding: 0.75rem 0.5rem;
        gap: 0.25rem;
    }

    .sidebar-lang-row[b-v3am7464vk] { padding: 0.3rem 0.75rem; }

    /* ── Backdrop overlay ─────────────────────────────────────────────── */
    .sidebar-overlay[b-v3am7464vk] {
        display: block;  /* make it part of the layout so the transition fires */
    }

    body.nav-open .sidebar-overlay[b-v3am7464vk] {
        background: rgba(0, 0, 0, 0.45);
        pointer-events: all;
    }

    /* ── Page wrapper: no sidebar offset ─────────────────────────────── */
    .page-wrapper[b-v3am7464vk] { margin-left: 0 !important; }

    /* ── Locked item tooltip: below icon on mobile ────────────────────── */
    .nav-locked[b-v3am7464vk]::after {
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%);
    }

    .nav-locked[b-v3am7464vk]::before {
        top: calc(100% + 3px);
        left: 50%;
        transform: translateX(-50%);
        border-right-color: transparent;
        border-bottom-color: #1f2937;
    }
}
/* /Components/Pages/AdminHub.razor.rz.scp.css */
/* ── Admin Hub page ──────────────────────────────────────────────────── */

.admin-loading[b-q332gib0p1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4rem;
    color: var(--text-muted, #64748b);
    font-size: 1.1rem;
    gap: .6rem;
}

/* ── Hero / header ───────────────────────────────────────────────────── */
.admin-hero[b-q332gib0p1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 2rem 2rem 1rem;
}

.admin-title[b-q332gib0p1] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.admin-subtitle[b-q332gib0p1] {
    color: var(--text-muted, #64748b);
    font-size: .95rem;
}

.admin-badge[b-q332gib0p1] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: linear-gradient(135deg, #4F46E5, #0EA5E9);
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: .2rem .55rem;
    border-radius: 99px;
    vertical-align: middle;
    margin-left: .4rem;
}

/* ── Card ────────────────────────────────────────────────────────────── */
.admin-card[b-q332gib0p1] {
    margin: 0 2rem 2rem;
    padding: 1.75rem 2rem;
}

.admin-card-header[b-q332gib0p1] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.admin-card-title[b-q332gib0p1] {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.admin-card-meta[b-q332gib0p1] {
    font-size: .85rem;
    color: var(--text-muted, #64748b);
}

.stat.accepted[b-q332gib0p1] { color: #10b981; }
.stat.pending[b-q332gib0p1]  { color: #f59e0b; }

/* ── Alert ───────────────────────────────────────────────────────────── */
.admin-alert[b-q332gib0p1] {
    padding: .75rem 1rem;
    border-radius: .5rem;
    margin-bottom: 1rem;
    font-size: .9rem;
}

.admin-alert--error[b-q332gib0p1] {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}

/* ── Add form ────────────────────────────────────────────────────────── */
.admin-add-form[b-q332gib0p1] {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.admin-input[b-q332gib0p1] {
    flex: 1 1 200px;
    padding: .55rem .85rem;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: .5rem;
    font-size: .9rem;
    background: var(--bg-input, #f8fafc);
    color: var(--text-primary, #1e293b);
    min-width: 0;
    transition: border-color .15s;
}

.admin-input:focus[b-q332gib0p1] {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79,70,229,.12);
}

.admin-input--link[b-q332gib0p1] {
    flex: 1 1 320px;
    font-size: .8rem;
    color: var(--text-muted, #64748b);
}

/* ── New invite link row ─────────────────────────────────────────────── */
.admin-invite-link-row[b-q332gib0p1] {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: .75rem 1rem;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: .5rem;
}

.admin-invite-link-label[b-q332gib0p1] {
    font-size: .85rem;
    font-weight: 600;
    color: #166534;
    white-space: nowrap;
}

/* ── Table ───────────────────────────────────────────────────────────── */
.admin-table-wrap[b-q332gib0p1] {
    overflow-x: auto;
}

.admin-table[b-q332gib0p1] {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.admin-table th[b-q332gib0p1] {
    text-align: left;
    padding: .55rem .75rem;
    font-weight: 600;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted, #64748b);
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

.admin-table td[b-q332gib0p1] {
    padding: .65rem .75rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    vertical-align: middle;
}

.admin-table tr:last-child td[b-q332gib0p1] {
    border-bottom: none;
}

.admin-email[b-q332gib0p1] { font-weight: 500; }
.admin-note[b-q332gib0p1]  { color: var(--text-muted, #64748b); font-size: .85rem; }
.admin-date[b-q332gib0p1]  { color: var(--text-muted, #64748b); font-size: .85rem; white-space: nowrap; }

/* ── Status badges ───────────────────────────────────────────────────── */
.status-badge[b-q332gib0p1] {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 99px;
    font-size: .78rem;
    font-weight: 600;
}

.status-badge--accepted[b-q332gib0p1] {
    background: #d1fae5;
    color: #065f46;
}

.status-badge--pending[b-q332gib0p1] {
    background: #fef3c7;
    color: #92400e;
}

/* ── Action icons ────────────────────────────────────────────────────── */
.admin-actions[b-q332gib0p1] {
    display: flex;
    gap: .35rem;
}

.icon-btn[b-q332gib0p1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: .4rem;
    cursor: pointer;
    font-size: .85rem;
    transition: background .15s, color .15s;
}

.icon-btn--link[b-q332gib0p1] {
    background: #eff6ff;
    color: #3b82f6;
}

.icon-btn--link:hover[b-q332gib0p1] {
    background: #dbeafe;
}

.icon-btn--danger[b-q332gib0p1] {
    background: #fef2f2;
    color: #ef4444;
}

.icon-btn--danger:hover[b-q332gib0p1] {
    background: #fee2e2;
}

.icon-btn:disabled[b-q332gib0p1] {
    opacity: .45;
    cursor: not-allowed;
}

/* ── Empty state ─────────────────────────────────────────────────────── */
.admin-empty[b-q332gib0p1] {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted, #64748b);
    font-size: .95rem;
}

/* ── sidebar accent for admin link ──────────────────────────────────── */
:global(.sidebar-item--admin)[b-q332gib0p1] {
    color: #a78bfa !important;
}

:global(.sidebar-item--admin:hover)[b-q332gib0p1],
:global(.sidebar-item--admin.sidebar-item--active)[b-q332gib0p1] {
    background: rgba(167, 139, 250, .12) !important;
    color: #7c3aed !important;
}
/* /Components/Pages/AppointmentCard.razor.rz.scp.css */
/* ── Page ─────────────────────────────────────────────────────────────── */
.appt-page[b-oqem6b9gb3] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2rem 1rem 4rem;
    background-color: var(--tenant-bg, #EEF2FF);
    font-family: var(--tenant-font, 'Inter', system-ui, sans-serif);
}

@media (min-height: 600px) {
    .appt-page[b-oqem6b9gb3] { align-items: center; }
}

/* ── Card shell ───────────────────────────────────────────────────────── */
.appt-card[b-oqem6b9gb3] {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 28px;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.13),
        0 8px 32px  rgba(0, 0, 0, 0.07),
        0 2px 8px   rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.appt-header[b-oqem6b9gb3] {
    position: relative;
    overflow: hidden;
    padding: 2rem 1.75rem 1.875rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* Dot-grid texture */
}

/* Dot-grid overlay */
.appt-header[b-oqem6b9gb3]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.16) 1.5px, transparent 1.5px);
    background-size: 22px 22px;
    pointer-events: none;
    z-index: 0;
}

/* Decorative large soft circle — bottom-right */
.appt-header[b-oqem6b9gb3]::after {
    content: '';
    position: absolute;
    bottom: -56px;
    right: -56px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.07);
    pointer-events: none;
    z-index: 0;
}

/* Every direct child stacks above the decorative layers */
.appt-header > *[b-oqem6b9gb3] { position: relative; z-index: 1; }

.appt-header--primary[b-oqem6b9gb3] {
    background: linear-gradient(
        140deg,
        var(--tenant-primary, #4F46E5) 0%,
        color-mix(in srgb, var(--tenant-primary, #4F46E5) 72%, #0f0f1a) 100%
    );
}

.appt-header--warning[b-oqem6b9gb3] {
    background: linear-gradient(140deg, #F59E0B 0%, #B45309 100%);
}

.appt-header--success[b-oqem6b9gb3] {
    background: linear-gradient(140deg, #10B981 0%, #065F46 100%);
}

/* ── Header brand row ─────────────────────────────────────────────────── */
.appt-header-brand[b-oqem6b9gb3] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.appt-header-icon-wrap[b-oqem6b9gb3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
    backdrop-filter: blur(4px);
}

.appt-header-brand-name[b-oqem6b9gb3] {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

.appt-header-logo[b-oqem6b9gb3] {
    height: 42px;
    max-width: 150px;
    object-fit: contain;
    border-radius: 8px;
}

/* ── Header content ───────────────────────────────────────────────────── */
.appt-header-content[b-oqem6b9gb3] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.appt-header-eyebrow[b-oqem6b9gb3] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.58);
    margin: 0;
}

.appt-header-greeting[b-oqem6b9gb3] {
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.28;
    letter-spacing: -0.01em;
}

/* ── Status badge (lives inside the header) ───────────────────────────── */
.appt-status-badge[b-oqem6b9gb3] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.8rem;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    width: fit-content;
    backdrop-filter: blur(8px);
}

.appt-status-badge--pending[b-oqem6b9gb3]   { background: rgba(255,255,255,0.92); color: #B45309; }
.appt-status-badge--confirmed[b-oqem6b9gb3] { background: rgba(255,255,255,0.92); color: #0369A1; }
.appt-status-badge--cancelled[b-oqem6b9gb3] { background: rgba(255,255,255,0.92); color: #DC2626; }
.appt-status-badge--completed[b-oqem6b9gb3] { background: rgba(255,255,255,0.92); color: #059669; }

/* ── Tear-line separator ──────────────────────────────────────────────── */
/* The wrapper is overflow:hidden on the card, so we fake the side-notch
   effect with small circles at the inset edges of the container.          */
.appt-separator-wrap[b-oqem6b9gb3] {
    position: relative;
    display: flex;
    align-items: center;
    height: 28px;
    padding: 0;
    background: #ffffff;
    /* Pull flush to the card edges */
    margin: 0;
}

.appt-separator-line[b-oqem6b9gb3] {
    flex: 1;
    border-top: 2px dashed #D1D5DB;
    margin: 0 28px;
}

.appt-separator-notch[b-oqem6b9gb3] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--tenant-bg, #EEF2FF);
    border: 2px solid #D1D5DB;
    /* box-shadow keeps the edge crisp */
    box-shadow: inset 0 0 0 3px #ffffff;
    flex-shrink: 0;
}

.appt-separator-notch--l[b-oqem6b9gb3] { left: -14px; }
.appt-separator-notch--r[b-oqem6b9gb3] { right: -14px; }

/* ── Body ─────────────────────────────────────────────────────────────── */
.appt-body[b-oqem6b9gb3] {
    padding: 1.375rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

/* ── Date / time showcase ─────────────────────────────────────────────── */
.appt-datetime-block[b-oqem6b9gb3] {
    display: flex;
    align-items: stretch;
    background: color-mix(in srgb, var(--tenant-primary, #4F46E5) 7%, #F8FAFC);
    border: 1.5px solid color-mix(in srgb, var(--tenant-primary, #4F46E5) 18%, #E2E8F0);
    border-radius: 18px;
    overflow: hidden;
}

.appt-date-col[b-oqem6b9gb3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1.25rem;
    gap: 0.05rem;
    min-width: 108px;
    flex-shrink: 0;
}

.appt-date-dow[b-oqem6b9gb3] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--tenant-primary, #4F46E5);
    opacity: 0.75;
}

.appt-date-day[b-oqem6b9gb3] {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    color: var(--tenant-primary, #4F46E5);
    letter-spacing: -0.03em;
}

.appt-date-moy[b-oqem6b9gb3] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748B;
    margin-top: 0.15rem;
}

.appt-datetime-vdiv[b-oqem6b9gb3] {
    width: 1.5px;
    background: color-mix(in srgb, var(--tenant-primary, #4F46E5) 22%, #E2E8F0);
    margin: 14px 0;
    flex-shrink: 0;
}

.appt-time-col[b-oqem6b9gb3] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem 1.375rem;
    gap: 0.05rem;
    flex: 1;
}

.appt-time-eyebrow[b-oqem6b9gb3] {
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #94A3B8;
}

.appt-time-hm[b-oqem6b9gb3] {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: #1E293B;
    letter-spacing: -0.03em;
    margin-top: 0.1rem;
}

.appt-time-ampm[b-oqem6b9gb3] {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748B;
    margin-top: 0.2rem;
}

/* ── Practitioner chip ────────────────────────────────────────────────── */
.appt-practitioner-chip[b-oqem6b9gb3] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 16px;
}

.appt-practitioner-avatar[b-oqem6b9gb3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tenant-primary, #4F46E5) 14%, white);
    color: var(--tenant-primary, #4F46E5);
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 2px solid color-mix(in srgb, var(--tenant-primary, #4F46E5) 22%, transparent);
}

.appt-practitioner-info[b-oqem6b9gb3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.appt-practitioner-eyebrow[b-oqem6b9gb3] {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #94A3B8;
}

.appt-practitioner-name[b-oqem6b9gb3] {
    font-size: 0.975rem;
    font-weight: 600;
    color: #1E293B;
}

/* ── Reference row ────────────────────────────────────────────────────── */
.appt-ref-row[b-oqem6b9gb3] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.125rem;
}

.appt-ref-label[b-oqem6b9gb3] {
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #CBD5E1;
}

.appt-ref-value[b-oqem6b9gb3] {
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'Courier New', 'Menlo', monospace;
    color: #94A3B8;
    background: #F1F5F9;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    letter-spacing: 0.06em;
}

/* ── Map thumbnail ────────────────────────────────────────────────────── */
.appt-map-wrap[b-oqem6b9gb3] {
    border-radius: 14px;
    overflow: hidden;
    border: 1.5px solid #E2E8F0;
    height: 160px;
    position: relative;
}

.appt-map-frame[b-oqem6b9gb3] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Action row ───────────────────────────────────────────────────────── */
.appt-action-row[b-oqem6b9gb3] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding-top: 0.25rem;
}

/* ── Buttons ──────────────────────────────────────────────────────────── */
.appt-btn[b-oqem6b9gb3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-radius: 13px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, color 0.15s ease, opacity 0.15s ease;
    text-decoration: none;
    line-height: 1;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
}

.appt-btn--full[b-oqem6b9gb3] { width: 100%; }

.appt-btn--primary[b-oqem6b9gb3] {
    background: var(--tenant-primary, #4F46E5);
    color: #ffffff;
    box-shadow:
        0 4px 16px color-mix(in srgb, var(--tenant-primary, #4F46E5) 38%, transparent),
        0 1px 4px  color-mix(in srgb, var(--tenant-primary, #4F46E5) 22%, transparent);
}

.appt-btn--primary:hover:not(:disabled)[b-oqem6b9gb3] {
    filter: brightness(0.9);
    box-shadow:
        0 6px 22px color-mix(in srgb, var(--tenant-primary, #4F46E5) 46%, transparent),
        0 2px 8px  color-mix(in srgb, var(--tenant-primary, #4F46E5) 26%, transparent);
    transform: translateY(-2px);
    color: #ffffff;
}

.appt-btn--primary:active:not(:disabled)[b-oqem6b9gb3] { transform: translateY(0); }

.appt-btn--primary:disabled[b-oqem6b9gb3] { opacity: 0.42; cursor: not-allowed; }

.appt-btn--ghost[b-oqem6b9gb3] {
    background: #F8FAFC;
    color: #475569;
    border: 1.5px solid #E2E8F0;
}

.appt-btn--ghost:hover[b-oqem6b9gb3] {
    background: #F1F5F9;
    color: #1E293B;
    border-color: #CBD5E1;
}

.appt-btn--outline[b-oqem6b9gb3] {
    background: transparent;
    color: #1E293B;
    border: 1.5px solid #E2E8F0;
}

.appt-btn--outline:hover[b-oqem6b9gb3] {
    border-color: var(--tenant-primary, #4F46E5);
    color: var(--tenant-primary, #4F46E5);
}

.appt-btn--running-late[b-oqem6b9gb3] {
    background: #FFF7ED;
    color: #C2410C;
    border: 1.5px solid #FED7AA;
}

.appt-btn--running-late:hover:not(:disabled)[b-oqem6b9gb3] {
    background: #FFEDD5;
    border-color: #FB923C;
    transform: translateY(-2px);
}

.appt-btn--running-late:disabled[b-oqem6b9gb3] { opacity: 0.45; cursor: not-allowed; }

.appt-btn--outline-danger[b-oqem6b9gb3] {
    background: transparent;
    color: #DC2626;
    border: 1.5px solid #FECACA;
}

.appt-btn--outline-danger:hover[b-oqem6b9gb3] {
    background: #FEF2F2;
    border-color: #FCA5A5;
}

.appt-btn-group[b-oqem6b9gb3] {
    display: flex;
    gap: 0.75rem;
}

.appt-btn-group .appt-btn[b-oqem6b9gb3] {
    flex: 1;
    min-width: 0;
}

/* ── Messages ─────────────────────────────────────────────────────────── */
.appt-success-msg[b-oqem6b9gb3] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.825rem;
    color: #15803D;
    line-height: 1.4;
}

.appt-error-msg[b-oqem6b9gb3] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.825rem;
    color: #DC2626;
    line-height: 1.4;
}

/* ── Footnote ─────────────────────────────────────────────────────────── */
.appt-footnote[b-oqem6b9gb3] {
    font-size: 0.7rem;
    color: #CBD5E1;
    text-align: center;
    margin: 0;
    line-height: 1.6;
    padding-top: 0.25rem;
}

/* ── Card footer — profile section ───────────────────────────────────── */
.appt-card-footer[b-oqem6b9gb3] {
    padding: 1.25rem 1.75rem 1.625rem;
    background: #F8FAFC;
    border-top: 1.5px dashed #E2E8F0;
}

/* ── Profile opt-in ───────────────────────────────────────────────────── */
.appt-profile-optin[b-oqem6b9gb3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-align: center;
}

.appt-profile-optin__icon[b-oqem6b9gb3] {
    font-size: 1.75rem;
    color: var(--tenant-primary, #4F46E5);
    opacity: 0.6;
    line-height: 1;
}

.appt-profile-optin__text[b-oqem6b9gb3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.appt-profile-optin__text strong[b-oqem6b9gb3] {
    font-size: 0.875rem;
    color: #1E293B;
    font-weight: 600;
}

.appt-profile-optin__text span[b-oqem6b9gb3] {
    font-size: 0.75rem;
    color: #64748B;
    line-height: 1.5;
}

.appt-btn--optin[b-oqem6b9gb3] {
    margin-top: 0.375rem;
    background: var(--tenant-primary, #4F46E5);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.7rem 1.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    transition: filter 0.15s, transform 0.12s;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--tenant-primary, #4F46E5) 32%, transparent);
}

.appt-btn--optin:hover:not(:disabled)[b-oqem6b9gb3] { filter: brightness(0.9); transform: translateY(-1px); }
.appt-btn--optin:disabled[b-oqem6b9gb3] { opacity: 0.55; cursor: not-allowed; }

/* Profile linked chip */
.appt-profile-linked[b-oqem6b9gb3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #059669;
}

/* ── Feedback / rating view ───────────────────────────────────────────── */
.appt-star-rating[b-oqem6b9gb3] {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.star-icon[b-oqem6b9gb3] {
    cursor: pointer;
    font-size: 2.35rem;
    line-height: 1;
    transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    -webkit-tap-highlight-color: transparent;
}

.star-icon:hover[b-oqem6b9gb3] { transform: scale(1.28); }
.star-active[b-oqem6b9gb3] { color: var(--tenant-accent, #F59E0B); filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tenant-accent, #F59E0B) 65%, transparent)); }
.star-inactive[b-oqem6b9gb3] { color: #E2E8F0; }

.appt-field[b-oqem6b9gb3] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.appt-label[b-oqem6b9gb3] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
}

.appt-textarea[b-oqem6b9gb3] {
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-family: var(--tenant-font, 'Inter', sans-serif);
    color: #1E293B;
    background: #ffffff;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

.appt-textarea:focus[b-oqem6b9gb3] {
    border-color: var(--tenant-primary, #4F46E5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-primary, #4F46E5) 15%, transparent);
    outline: none;
}

/* ── Typography (feedback / thank-you view body) ──────────────────────── */
.appt-title[b-oqem6b9gb3] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
    line-height: 1.25;
}

.appt-subtitle[b-oqem6b9gb3] {
    font-size: 0.875rem;
    color: #64748B;
    margin: 0;
    line-height: 1.6;
}

/* ── Promo card (review links) ────────────────────────────────────────── */
.appt-promo-card[b-oqem6b9gb3] {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 1.125rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.appt-promo-label[b-oqem6b9gb3] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0;
}

.appt-internal-note[b-oqem6b9gb3] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: color-mix(in srgb, var(--tenant-primary, #4F46E5) 8%, transparent);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    font-size: 0.8rem;
    color: var(--tenant-primary, #4F46E5);
    line-height: 1.5;
}

/* ── Loading / error states ───────────────────────────────────────────── */
.appt-state-panel[b-oqem6b9gb3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 4.5rem 2rem;
    text-align: center;
}

.appt-state-panel--error .appt-state-icon[b-oqem6b9gb3] {
    font-size: 2.75rem;
    color: #EF4444;
}

.appt-state-title[b-oqem6b9gb3] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
}

.appt-state-text[b-oqem6b9gb3] {
    font-size: 0.875rem;
    color: #64748B;
    margin: 0;
}

.appt-spinner[b-oqem6b9gb3] {
    width: 36px;
    height: 36px;
    border: 3px solid #E2E8F0;
    border-top-color: var(--tenant-primary, #4F46E5);
    border-radius: 50%;
    animation: appt-spin-b-oqem6b9gb3 0.75s linear infinite;
}

@keyframes appt-spin-b-oqem6b9gb3 {
    to { transform: rotate(360deg); }
}

/* ── Animations ───────────────────────────────────────────────────────── */
.animate-fade-in[b-oqem6b9gb3] {
    animation: apptFadeIn-b-oqem6b9gb3 0.35s ease-out forwards;
}

@keyframes apptFadeIn-b-oqem6b9gb3 {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.star-glow[b-oqem6b9gb3] {
    animation: starGlowEffect-b-oqem6b9gb3 2s ease-in-out infinite alternate;
}

@keyframes starGlowEffect-b-oqem6b9gb3 {
    from { color: #fff; filter: drop-shadow(0 0 3px rgba(255,255,255,0.3)); }
    to   { color: #FDE68A; filter: drop-shadow(0 0 14px rgba(253,230,138,0.8)); }
}

.icon-success-pulse[b-oqem6b9gb3] {
    animation: successPulseEffect-b-oqem6b9gb3 2s ease-in-out infinite alternate;
}

@keyframes successPulseEffect-b-oqem6b9gb3 {
    from { filter: drop-shadow(0 0 2px rgba(255,255,255,0.3)); }
    to   { filter: drop-shadow(0 0 14px rgba(255,255,255,0.9)); }
}

/* ── Mobile — full-bleed card ─────────────────────────────────────────── */
@media (max-width: 480px) {
    .appt-page[b-oqem6b9gb3] {
        padding: 0;
        align-items: flex-start;
        background: #ffffff;
    }

    .appt-card[b-oqem6b9gb3] {
        max-width: 100%;
        border-radius: 0;
        min-height: 100vh;
        box-shadow: none;
    }

    .appt-header[b-oqem6b9gb3] {
        padding: 2.5rem 1.5rem 2rem;
    }

    .appt-body[b-oqem6b9gb3] {
        padding: 1.25rem 1.5rem 1.75rem;
    }

    .appt-card-footer[b-oqem6b9gb3] {
        padding: 1.125rem 1.5rem 1.5rem;
    }

    .appt-separator-notch--l[b-oqem6b9gb3] { left: 0; }
    .appt-separator-notch--r[b-oqem6b9gb3] { right: 0; }
}

/* ── PWA Push Notification Banner (Glassmorphism & Harmonious Colors) ── */
.appt-push-banner[b-oqem6b9gb3] {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1.5px solid rgba(226, 232, 240, 0.8);
    border-radius: 20px;
    padding: 1.25rem;
    margin-top: 0.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.appt-push-banner-content[b-oqem6b9gb3] {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.appt-push-banner-icon[b-oqem6b9gb3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tenant-primary, #4F46E5) 12%, transparent);
    color: var(--tenant-primary, #4F46E5);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.appt-push-banner-text[b-oqem6b9gb3] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.appt-push-banner-title[b-oqem6b9gb3] {
    font-size: 0.875rem;
    font-weight: 700;
    color: #1E293B;
    margin: 0;
}

.appt-push-banner-desc[b-oqem6b9gb3] {
    font-size: 0.75rem;
    color: #64748B;
    line-height: 1.4;
    margin: 0;
}

.appt-btn--push[b-oqem6b9gb3] {
    background: linear-gradient(135deg, var(--tenant-primary, #4F46E5) 0%, color-mix(in srgb, var(--tenant-primary, #4F46E5) 80%, #000) 100%);
    color: #ffffff;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--tenant-primary, #4F46E5) 24%, transparent);
    border-radius: 12px;
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
}

.appt-btn--push:hover:not(:disabled)[b-oqem6b9gb3] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--tenant-primary, #4F46E5) 32%, transparent);
}

.appt-push-success-banner[b-oqem6b9gb3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    font-size: 0.825rem;
    color: #15803D;
    font-weight: 600;
    margin-top: 0.5rem;
}

.appt-push-error[b-oqem6b9gb3] {
    margin-top: 0.25rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    border-radius: 8px;
}

/* ── Micro-animations ── */
.animate-swing[b-oqem6b9gb3] {
    animation: bellSwing-b-oqem6b9gb3 2.5s ease-in-out infinite;
    transform-origin: top center;
}

@keyframes bellSwing-b-oqem6b9gb3 {
    0%, 100% { transform: rotate(0); }
    10% { transform: rotate(15deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(8deg); }
    40% { transform: rotate(-6deg); }
    50% { transform: rotate(4deg); }
    60% { transform: rotate(-2deg); }
    70% { transform: rotate(0); }
}
/* /Components/Pages/BillingCallback.razor.rz.scp.css */
.bc-page[b-njx5wjw4iy] {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: #f9fafb; padding: 1.5rem;
}
.bc-card[b-njx5wjw4iy] {
    background: #fff; border-radius: 1.25rem;
    box-shadow: 0 8px 40px rgba(0,0,0,.10);
    width: 100%; max-width: 420px; overflow: hidden;
}
.bc-header[b-njx5wjw4iy] {
    background: linear-gradient(135deg, #10b981, #059669);
    padding: 2rem; display: flex; justify-content: center;
}
.bc-icon[b-njx5wjw4iy] { font-size: 3rem; color: #fff; }
.bc-body[b-njx5wjw4iy] { padding: 1.75rem 1.5rem 2rem; text-align: center; }
.bc-title[b-njx5wjw4iy]  { font-size: 1.5rem; font-weight: 700; color: #111827; margin: 0 0 0.5rem; }
.bc-subtitle[b-njx5wjw4iy] { color: #6b7280; font-size: 0.95rem; margin: 0 0 1.25rem; line-height: 1.5; }
.bc-note[b-njx5wjw4iy] {
    background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 0.5rem;
    padding: 0.65rem 0.9rem; color: #1d4ed8; font-size: 0.85rem;
    margin-bottom: 1.25rem; text-align: left;
}
.bc-btn[b-njx5wjw4iy] {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.4rem; padding: 0.75rem 1.25rem; border-radius: 0.6rem;
    font-size: 0.95rem; font-weight: 600; cursor: pointer; border: none;
    transition: filter .15s;
}
.bc-btn--primary[b-njx5wjw4iy] { background: #10b981; color: #fff; }
.bc-btn--primary:hover[b-njx5wjw4iy] { filter: brightness(1.07); }
.bc-btn--full[b-njx5wjw4iy] { width: 100%; }

.animate-fade-in[b-njx5wjw4iy] { animation: bc-fade-b-njx5wjw4iy .35s ease-out; }
@keyframes bc-fade-b-njx5wjw4iy { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
/* /Components/Pages/BillingUpgrade.razor.rz.scp.css */
.bl-page[b-eiuiyg6db8] { padding: 2rem 0 3rem; }

/* ── Header ─────────────────────────────────────────────────────────── */
.bl-header[b-eiuiyg6db8] {
    display: flex; align-items: center; gap: 1.25rem; margin-bottom: 2rem;
}
.bl-header-icon[b-eiuiyg6db8] {
    width: 52px; height: 52px;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; color: #fff; flex-shrink: 0;
}
.bl-title[b-eiuiyg6db8]  { font-size: 1.75rem; font-weight: 800; margin: 0 0 0.2rem; }
.bl-subtitle[b-eiuiyg6db8] { color: #6b7280; font-size: 0.95rem; margin: 0; }

/* ── Current plan strip ──────────────────────────────────────────────── */
.bl-current-plan[b-eiuiyg6db8] {
    display: flex; align-items: center; gap: 0.75rem;
    background: #f9fafb; border: 1px solid #e5e7eb;
    border-radius: 0.75rem; padding: 0.75rem 1.25rem;
    margin-bottom: 2rem; font-size: 0.9rem;
}
.bl-current-label[b-eiuiyg6db8] { color: #6b7280; font-weight: 600; }
.bl-current-badge[b-eiuiyg6db8] {
    padding: 0.2rem 0.75rem; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
}
.bl-tier-freetrial[b-eiuiyg6db8] { background: #f3f4f6; color: #374151; }
.bl-tier-starter[b-eiuiyg6db8]   { background: #dbeafe; color: #1d4ed8; }
.bl-tier-premium[b-eiuiyg6db8]   { background: #fef3c7; color: #92400e; }
.bl-expires[b-eiuiyg6db8] { color: #9ca3af; font-size: 0.82rem; margin-left: auto; }

/* ── Plan cards grid ─────────────────────────────────────────────────── */
.bl-plans[b-eiuiyg6db8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: 780px;
}

/* ── Individual card ─────────────────────────────────────────────────── */
.bl-plan-card[b-eiuiyg6db8] {
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 1.25rem;
    padding: 2rem 1.75rem;
    position: relative;
    display: flex; flex-direction: column; gap: 1.25rem;
    transition: box-shadow .2s, border-color .2s;
}
.bl-plan-card:hover[b-eiuiyg6db8]       { box-shadow: 0 8px 32px rgba(0,0,0,.08); }
.bl-plan-card--premium[b-eiuiyg6db8]    { border-color: #a78bfa; }
.bl-plan-card--current[b-eiuiyg6db8]    { border-color: #10b981; background: #f0fdf4; }

/* ── Badge ───────────────────────────────────────────────────────────── */
.bl-plan-badge[b-eiuiyg6db8] {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: #10b981; color: #fff;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
    padding: 0.2rem 0.9rem; border-radius: 999px;
}
.bl-plan-badge--premium[b-eiuiyg6db8] { background: #7c3aed; }

/* ── Plan header ─────────────────────────────────────────────────────── */
.bl-plan-header[b-eiuiyg6db8] { display: flex; align-items: center; gap: 0.6rem; }
.bl-plan-icon[b-eiuiyg6db8]   { font-size: 1.4rem; color: #6366f1; }
.bl-plan-card--premium .bl-plan-icon[b-eiuiyg6db8] { color: #a78bfa; }
.bl-plan-name[b-eiuiyg6db8]   { font-size: 1.25rem; font-weight: 700; margin: 0; }

/* ── Price ───────────────────────────────────────────────────────────── */
.bl-plan-price[b-eiuiyg6db8]  { display: flex; align-items: baseline; gap: 0.2rem; }
.bl-price-amount[b-eiuiyg6db8] { font-size: 2.5rem; font-weight: 800; color: #111827; line-height: 1; }
.bl-price-period[b-eiuiyg6db8] { font-size: 0.9rem; color: #9ca3af; }

/* ── Feature list ────────────────────────────────────────────────────── */
.bl-feature-list[b-eiuiyg6db8] {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.55rem; flex: 1;
}
.bl-feature-list li[b-eiuiyg6db8] { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; }
.bl-feature-list .fa-check[b-eiuiyg6db8] { color: #10b981; }
.bl-feature-list .fa-times[b-eiuiyg6db8]  { color: #d1d5db; }
.bl-feature-dim[b-eiuiyg6db8] { color: #9ca3af; }

/* ── CTA button ──────────────────────────────────────────────────────── */
.bl-btn[b-eiuiyg6db8] {
    display: flex; align-items: center; justify-content: center; gap: 0.4rem;
    padding: 0.8rem 1.25rem; border-radius: 0.75rem;
    font-size: 0.95rem; font-weight: 600; border: none; cursor: pointer;
    transition: filter .15s, transform .1s;
}
.bl-btn:disabled[b-eiuiyg6db8] { opacity: 0.55; cursor: not-allowed; }
.bl-btn:not(:disabled):active[b-eiuiyg6db8] { transform: scale(.98); }

.bl-btn--primary[b-eiuiyg6db8] {
    background: #6366f1; color: #fff;
}
.bl-btn--primary:hover:not(:disabled)[b-eiuiyg6db8] { filter: brightness(1.08); }

.bl-btn--premium[b-eiuiyg6db8] {
    background: linear-gradient(135deg, #7c3aed, #a78bfa); color: #fff;
}
.bl-btn--premium:hover:not(:disabled)[b-eiuiyg6db8] { filter: brightness(1.08); }

@media (max-width: 600px) {
    .bl-plans[b-eiuiyg6db8] { grid-template-columns: 1fr; }
    .bl-expires[b-eiuiyg6db8] { display: none; }
}

/* ── Internal account banner ─────────────────────────────────────────── */
.bl-internal-banner[b-eiuiyg6db8] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
    color: #fff;
}

.bl-internal-banner__icon[b-eiuiyg6db8] {
    font-size: 1.75rem;
    color: #a5b4fc;
    flex-shrink: 0;
    padding-top: 0.1rem;
}

.bl-internal-banner__body[b-eiuiyg6db8] {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.bl-internal-banner__body strong[b-eiuiyg6db8] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #e0e7ff;
}

.bl-internal-banner__body span[b-eiuiyg6db8] {
    font-size: 0.82rem;
    color: #a5b4fc;
    line-height: 1.5;
}

/* Unlocked plan cards (display-only, no button) */
.bl-plan-card--unlocked[b-eiuiyg6db8] {
    opacity: 1;
    border-color: #a5b4fc !important;
    background: linear-gradient(160deg, #f8f9ff 0%, #eef2ff 100%) !important;
}

.bl-plan-badge--unlocked[b-eiuiyg6db8] {
    background: linear-gradient(135deg, #4f46e5, #7c3aed) !important;
    color: #fff !important;
}
/* /Components/Pages/BookingStorefront.razor.rz.scp.css */
/* ── Page ─────────────────────────────────────────────────────────────── */
.bs-page[b-8ckpor2naj] {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 1.5rem 1rem 3rem;
    background-color: var(--tenant-bg, #F8FAFC);
    font-family: var(--tenant-font, 'Inter', system-ui, sans-serif);
}

@media (min-height: 560px) {
    .bs-page[b-8ckpor2naj] { align-items: center; }
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.bs-card[b-8ckpor2naj] {
    width: 100%;
    max-width: 440px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 4px 28px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.04);
    overflow: hidden;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.bs-header[b-8ckpor2naj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem 1.75rem;
    gap: 0.5rem;
    background: var(--tenant-primary, #4F46E5);
    color: #fff;
}

.bs-header-icon[b-8ckpor2naj] { font-size: 2.25rem; line-height: 1; }

.bs-logo[b-8ckpor2naj] {
    height: 52px;
    max-width: 160px;
    object-fit: contain;
    border-radius: 8px;
}

.bs-header-brand[b-8ckpor2naj] {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.85;
}

/* ── Body ─────────────────────────────────────────────────────────────── */
.bs-body[b-8ckpor2naj] {
    padding: 1.75rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* ── State panels ─────────────────────────────────────────────────────── */
.bs-state-panel[b-8ckpor2naj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-muted, #64748B);
}

.bs-state-panel--error .bs-error-icon[b-8ckpor2naj] { font-size: 2.25rem; color: #EF4444; }

.bs-spinner[b-8ckpor2naj] {
    width: 34px;
    height: 34px;
    border: 3px solid #E2E8F0;
    border-top-color: var(--tenant-primary, #4F46E5);
    border-radius: 50%;
    animation: bs-spin-b-8ckpor2naj 0.7s linear infinite;
}

.bs-spinner--sm[b-8ckpor2naj] { width: 18px; height: 18px; border-width: 2px; }

@keyframes bs-spin-b-8ckpor2naj { to { transform: rotate(360deg); } }

/* ── Typography ───────────────────────────────────────────────────────── */
.bs-title[b-8ckpor2naj] {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-main, #1E293B);
    margin: 0;
}

.bs-subtitle[b-8ckpor2naj] {
    font-size: 0.875rem;
    color: var(--text-muted, #64748B);
    margin: 0;
    line-height: 1.55;
}

.bs-label[b-8ckpor2naj] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    margin-bottom: 0.3rem;
}

.bs-required[b-8ckpor2naj] { color: #EF4444; }

/* ── Fields ───────────────────────────────────────────────────────────── */
.bs-field[b-8ckpor2naj] { display: flex; flex-direction: column; }

.bs-input[b-8ckpor2naj], .bs-select[b-8ckpor2naj] {
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    border: 1.5px solid #E2E8F0;
    font-size: 0.9rem;
    color: var(--text-main, #1E293B);
    background: #fff;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.bs-input:focus[b-8ckpor2naj], .bs-select:focus[b-8ckpor2naj] {
    border-color: var(--tenant-primary, #4F46E5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-primary, #4F46E5) 15%, transparent);
}

.bs-error-msg[b-8ckpor2naj] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    color: #DC2626;
    line-height: 1.4;
}

/* ── Slot picker ──────────────────────────────────────────────────────── */
.bs-slots-label[b-8ckpor2naj] {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #64748B);
    margin: 0;
}

.bs-slots-grid[b-8ckpor2naj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.bs-slot[b-8ckpor2naj] {
    padding: 0.55rem 0.3rem;
    border-radius: 8px;
    border: 1.5px solid #E2E8F0;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}

.bs-slot:hover[b-8ckpor2naj] {
    border-color: var(--tenant-primary, #4F46E5);
    color: var(--tenant-primary, #4F46E5);
}

.bs-slot--active[b-8ckpor2naj] {
    background: var(--tenant-primary, #4F46E5);
    border-color: var(--tenant-primary, #4F46E5);
    color: #fff;
}

.bs-slots-loading[b-8ckpor2naj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted, #64748B);
}

.bs-no-slots[b-8ckpor2naj] {
    font-size: 0.875rem;
    color: var(--text-muted, #64748B);
    text-align: center;
    margin: 0.5rem 0;
}

.bs-slot-summary[b-8ckpor2naj] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: color-mix(in srgb, var(--tenant-primary, #4F46E5) 10%, transparent);
    border-left: 4px solid var(--tenant-primary, #4F46E5);
    border-radius: 0 10px 10px 0;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main, #1E293B);
}

.bs-slot-summary i[b-8ckpor2naj] { color: var(--tenant-primary, #4F46E5); }

/* ── OTP input ────────────────────────────────────────────────────────── */
.bs-otp-row[b-8ckpor2naj] { display: flex; justify-content: center; }

.bs-otp-input[b-8ckpor2naj] {
    width: 130px;
    padding: 0.8rem;
    border-radius: 12px;
    border: 2px solid #E2E8F0;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.3em;
    color: var(--text-main, #1E293B);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    -moz-appearance: textfield;
}

.bs-otp-input[b-8ckpor2naj]::-webkit-inner-spin-button,
.bs-otp-input[b-8ckpor2naj]::-webkit-outer-spin-button { -webkit-appearance: none; }

.bs-otp-input:focus[b-8ckpor2naj] {
    border-color: var(--tenant-primary, #4F46E5);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tenant-primary, #4F46E5) 15%, transparent);
}

/* ── Success ──────────────────────────────────────────────────────────── */
.bs-success[b-8ckpor2naj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.bs-success-icon[b-8ckpor2naj] { font-size: 3rem; color: #10B981; }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.bs-btn[b-8ckpor2naj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: filter 0.15s, box-shadow 0.15s, background 0.15s;
    text-decoration: none;
    line-height: 1;
}

.bs-btn--full[b-8ckpor2naj] { width: 100%; }

.bs-btn--primary[b-8ckpor2naj] {
    background: var(--tenant-primary, #4F46E5);
    color: #fff;
}

.bs-btn--primary:hover:not(:disabled)[b-8ckpor2naj] {
    filter: brightness(0.88);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--tenant-primary, #4F46E5) 40%, transparent);
}

.bs-btn--primary:disabled[b-8ckpor2naj] { opacity: 0.45; cursor: not-allowed; }

.bs-btn--ghost[b-8ckpor2naj] {
    background: transparent;
    color: var(--text-muted, #64748B);
    border: 1.5px solid #E2E8F0;
}

.bs-btn--ghost:hover[b-8ckpor2naj] { background: #F8FAFC; color: var(--text-main, #1E293B); }

.mt-4[b-8ckpor2naj] { margin-top: 1rem; }

/* ── Animations ───────────────────────────────────────────────────────── */
.animate-fade-in[b-8ckpor2naj] {
    animation: bsFadeIn-b-8ckpor2naj 0.3s ease-out forwards;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@keyframes bsFadeIn-b-8ckpor2naj {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .bs-page[b-8ckpor2naj] { padding: 0; align-items: flex-start; }
    .bs-card[b-8ckpor2naj] { max-width: 100%; border-radius: 0; min-height: 100vh; box-shadow: none; }
    .bs-slots-grid[b-8ckpor2naj] { grid-template-columns: repeat(3, 1fr); }
}
/* /Components/Pages/BrandCustomizer.razor.rz.scp.css */
/* ── Page Layout ─────────────────────────────────────────────────── */
.bc-page[b-0openwwxg4] {
    padding: 2rem 0 4rem;
}

.bc-header[b-0openwwxg4] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.bc-header-icon[b-0openwwxg4] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.bc-title[b-0openwwxg4] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.bc-subtitle[b-0openwwxg4] {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

.bc-save-btn[b-0openwwxg4] {
    margin-left: auto;
}

/* ── Body (split layout) ─────────────────────────────────────────── */
.bc-body[b-0openwwxg4] {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 960px) {
    .bc-body[b-0openwwxg4] {
        grid-template-columns: 1fr;
    }
}

/* ── Controls panel ─────────────────────────────────────────────── */
.bc-controls[b-0openwwxg4] {
    padding: 1.75rem;
}

.bc-section-label[b-0openwwxg4] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-color);
    margin-bottom: 0.9rem;
}

.bc-field[b-0openwwxg4] {
    margin-bottom: 1.1rem;
}

.bc-field--color[b-0openwwxg4] {
    flex: 1;
    min-width: 140px;
}

.bc-label[b-0openwwxg4] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.35rem;
}

.bc-input[b-0openwwxg4] {
    width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,0.12);
    background: rgba(255,255,255,0.06);
    color: var(--text-main);
    font-size: 0.9rem;
    transition: border-color 0.2s;
    outline: none;
}

.bc-input:focus[b-0openwwxg4] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.bc-input--hex[b-0openwwxg4] {
    width: 90px;
    font-family: monospace;
    font-size: 0.82rem;
    padding: 0.45rem 0.6rem;
}

.bc-hint[b-0openwwxg4] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

.bc-field-row[b-0openwwxg4] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.bc-booking-link[b-0openwwxg4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.bc-booking-url[b-0openwwxg4] {
    flex: 1;
    font-size: 0.78rem;
    font-family: monospace;
    color: var(--primary-color);
    word-break: break-all;
}

.bc-copy-btn[b-0openwwxg4] {
    background: transparent;
    border: none;
    color: var(--primary-color);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.2rem;
    flex-shrink: 0;
    transition: color 0.15s;
}

.bc-copy-btn:hover[b-0openwwxg4] { color: var(--secondary-color); }

.bc-color-row[b-0openwwxg4] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.bc-color-wrap[b-0openwwxg4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bc-color-picker[b-0openwwxg4] {
    width: 44px;
    height: 36px;
    border: none;
    border-radius: 8px;
    padding: 2px;
    cursor: pointer;
    background: none;
    flex-shrink: 0;
}

/* ── Toggles ─────────────────────────────────────────────────────── */
.bc-toggle-row[b-0openwwxg4] {
    margin-bottom: 0.85rem;
}

.bc-toggle-label[b-0openwwxg4] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-main);
    user-select: none;
}

.bc-toggle-label input[type="checkbox"][b-0openwwxg4] {
    display: none;
}

.bc-toggle-track[b-0openwwxg4] {
    position: relative;
    width: 40px;
    height: 22px;
    background: #d1d5db;
    border-radius: 11px;
    flex-shrink: 0;
    transition: background 0.25s;
}

.bc-toggle-track[b-0openwwxg4]::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.bc-toggle-label input[type="checkbox"]:checked + .bc-toggle-track[b-0openwwxg4] {
    background: var(--primary-color);
}

.bc-toggle-label input[type="checkbox"]:checked + .bc-toggle-track[b-0openwwxg4]::after {
    transform: translateX(18px);
}

/* ── Preview pane ────────────────────────────────────────────────── */
.bc-preview-pane[b-0openwwxg4] {
    position: sticky;
    top: 5rem;
}

.bc-preview-title[b-0openwwxg4] {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

.bc-preview-note[b-0openwwxg4] {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 1.2rem;
}

/* Phone shell */
.bc-phone-shell[b-0openwwxg4] {
    width: 260px;
    min-height: 520px;
    background: #1a1a2e;
    border-radius: 36px;
    padding: 16px 10px 20px;
    box-shadow:
        0 0 0 2px #333,
        0 20px 60px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
}

.bc-phone-notch[b-0openwwxg4] {
    width: 80px;
    height: 20px;
    background: #111;
    border-radius: 0 0 14px 14px;
    margin-bottom: 8px;
    flex-shrink: 0;
}

.bc-phone-screen[b-0openwwxg4] {
    width: 100%;
    flex: 1;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: background-color 0.3s;
}

.bc-phone-home[b-0openwwxg4] {
    width: 80px;
    height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    margin-top: 12px;
}

/* ── Card inside phone ──────────────────────────────────────────── */

/* Header */
.bc-prev-header[b-0openwwxg4] {
    position: relative;
    overflow: hidden;
    padding: 12px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex-shrink: 0;
    transition: background-color 0.3s;
}

/* Gradient darkening overlay */
.bc-prev-header[b-0openwwxg4]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(145deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.22) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Dot-grid texture */
.bc-prev-header[b-0openwwxg4]::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.14) 1px, transparent 1px);
    background-size: 12px 12px;
    pointer-events: none;
    z-index: 0;
}

.bc-prev-header > *[b-0openwwxg4] { position: relative; z-index: 1; }

.bc-prev-header-top[b-0openwwxg4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bc-prev-eyebrow[b-0openwwxg4] {
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
}

.bc-prev-status-badge[b-0openwwxg4] {
    font-size: 0.52rem;
    font-weight: 700;
    background: rgba(255,255,255,0.92);
    color: #0369A1;
    padding: 2px 6px;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.bc-prev-greeting[b-0openwwxg4] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.25;
}

.bc-prev-logo[b-0openwwxg4] {
    height: 20px;
    max-width: 70px;
    object-fit: contain;
    border-radius: 3px;
}

/* Tear separator */
.bc-prev-separator[b-0openwwxg4] {
    position: relative;
    height: 16px;
    flex-shrink: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
}

.bc-prev-sep-line[b-0openwwxg4] {
    flex: 1;
    border-top: 1.5px dashed #D1D5DB;
    margin: 0 16px;
}

.bc-prev-notch[b-0openwwxg4] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #1a1a2e; /* matches phone shell */
    z-index: 2;
}

.bc-prev-notch--l[b-0openwwxg4] { left:  -8px; }
.bc-prev-notch--r[b-0openwwxg4] { right: -8px; }

/* Date block */
.bc-prev-date-block[b-0openwwxg4] {
    display: flex;
    align-items: stretch;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    margin: 8px 10px 0;
    overflow: hidden;
    flex-shrink: 0;
}

.bc-prev-date-col[b-0openwwxg4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    gap: 1px;
    min-width: 58px;
    flex-shrink: 0;
}

.bc-prev-dow[b-0openwwxg4] {
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94A3B8;
}

.bc-prev-day[b-0openwwxg4] {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    transition: color 0.3s;
}

.bc-prev-moy[b-0openwwxg4] {
    font-size: 0.46rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #64748B;
}

.bc-prev-vdiv[b-0openwwxg4] {
    width: 1.5px;
    margin: 10px 0;
    flex-shrink: 0;
}

.bc-prev-time-col[b-0openwwxg4] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 12px;
    gap: 1px;
    flex: 1;
}

.bc-prev-time-eyebrow[b-0openwwxg4] {
    font-size: 0.46rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: #94A3B8;
    text-transform: uppercase;
}

.bc-prev-time[b-0openwwxg4] {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    transition: color 0.3s;
}

.bc-prev-ampm[b-0openwwxg4] {
    font-size: 0.48rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #64748B;
    text-transform: uppercase;
    margin-top: 1px;
}

/* Practitioner chip */
.bc-prev-chip[b-0openwwxg4] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    margin: 6px 10px 0;
    padding: 7px 10px;
    flex-shrink: 0;
}

.bc-prev-avatar[b-0openwwxg4] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    flex-shrink: 0;
}

.bc-prev-chip-info[b-0openwwxg4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.bc-prev-chip-eyebrow[b-0openwwxg4] {
    font-size: 0.44rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #94A3B8;
    text-transform: uppercase;
}

.bc-prev-chip-name[b-0openwwxg4] {
    font-size: 0.7rem;
    font-weight: 600;
    color: #1E293B;
}

/* Reference */
.bc-prev-ref-row[b-0openwwxg4] {
    display: flex;
    padding: 0 10px;
    margin-top: 5px;
    flex-shrink: 0;
}

.bc-prev-ref-pill[b-0openwwxg4] {
    font-size: 0.52rem;
    font-weight: 600;
    font-family: 'Courier New', monospace;
    color: #94A3B8;
    background: #F1F5F9;
    padding: 2px 8px;
    border-radius: 5px;
    letter-spacing: 0.06em;
}

/* Map placeholder */
.bc-prev-map[b-0openwwxg4] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 6px 10px 0;
    padding: 6px 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    flex-shrink: 0;
}

.bc-prev-map-text[b-0openwwxg4] {
    font-size: 0.54rem;
    color: #64748B;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

/* Footer */
.bc-prev-footer[b-0openwwxg4] {
    margin-top: auto;
    padding: 7px 10px 8px;
    background: #F8FAFC;
    border-top: 1.5px dashed #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.bc-prev-footer-link[b-0openwwxg4] {
    font-size: 0.58rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    transition: color 0.3s;
}

.bc-prev-stars[b-0openwwxg4] {
    display: flex;
    gap: 2px;
    font-size: 0.65rem;
}
/* /Components/Pages/CalendarView.razor.rz.scp.css */
/* ── Page ─────────────────────────────────────────────────────────────── */
.cv-page[b-58ul7r4tmz] {
    padding: 2rem 0 3rem;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.cv-header[b-58ul7r4tmz] {
    margin-bottom: 1rem;
}

/* ── Centred date navigation ──────────────────────────────────────────── */
.cv-date-nav[b-58ul7r4tmz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 1.25rem;
}

/* Big, prominent date label */
.cv-date-label[b-58ul7r4tmz] {
    font-family: 'Outfit', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text-main, #1E293B);
    min-width: 220px;
    text-align: center;
    letter-spacing: -0.02em;
}

/* Shared nav button base */
.cv-nav-btn[b-58ul7r4tmz] {
    padding: 0.4rem 0.85rem;
    font-size: 0.875rem;
    border-radius: 8px;
    line-height: 1;
}

/* Arrow buttons: square-ish, icon only */
.cv-nav-arrow[b-58ul7r4tmz] {
    padding: 0.4rem 0.65rem;
}

.cv-nav-btn--today[b-58ul7r4tmz] {
    font-weight: 600;
}

/* ── Grid column wrapper (switcher + calendar card stacked) ───────────── */
.cv-grid-col[b-58ul7r4tmz] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* ── Body layout ──────────────────────────────────────────────────────── */
.cv-body[b-58ul7r4tmz] {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
}

.cv-grid-card[b-58ul7r4tmz] {
    /* flex: 1 removed — now a block child of cv-grid-col (column flex).
       Width is determined by the parent column, not by row flex. */
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* ── Loading overlay ──────────────────────────────────────────────────── */
.cv-loading[b-58ul7r4tmz] {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted, #64748B);
    z-index: 5;
    border-radius: 12px;
}

.cv-spinner[b-58ul7r4tmz] {
    width: 20px;
    height: 20px;
    border: 2px solid #E2E8F0;
    border-top-color: #4F46E5;
    border-radius: 50%;
    animation: cvSpin-b-58ul7r4tmz 0.7s linear infinite;
}

@keyframes cvSpin-b-58ul7r4tmz { to { transform: rotate(360deg); } }

/* ── Weekday headers ──────────────────────────────────────────────────── */
.cv-weekdays[b-58ul7r4tmz] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--border-color, #E2E8F0);
}

.cv-weekday[b-58ul7r4tmz] {
    padding: 0.6rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748B);
    text-align: center;
}

.cv-weekday--weekend[b-58ul7r4tmz] {
    color: #94A3B8;
}

/* ── Grid ─────────────────────────────────────────────────────────────── */
.cv-grid[b-58ul7r4tmz] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

/* ── Cell ─────────────────────────────────────────────────────────────── */
.cv-cell[b-58ul7r4tmz] {
    min-height: 100px;
    padding: 6px;
    border-right: 1px solid var(--border-color, #E2E8F0);
    border-bottom: 1px solid var(--border-color, #E2E8F0);
    cursor: pointer;
    transition: background 0.12s ease;
    overflow: hidden;
}

.cv-cell:nth-child(7n)[b-58ul7r4tmz] { border-right: none; }

.cv-cell:hover[b-58ul7r4tmz] {
    background: #F8FAFC;
}

.cv-cell--faded[b-58ul7r4tmz] {
    background: #FAFAFA;
}

.cv-cell--faded .cv-day-num[b-58ul7r4tmz] {
    color: #CBD5E1;
}

.cv-cell--today .cv-day-num[b-58ul7r4tmz] {
    background: #4F46E5;
    color: #ffffff;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cv-cell--selected[b-58ul7r4tmz] {
    background: #EEF2FF;
}

.cv-cell--selected:hover[b-58ul7r4tmz] {
    background: #E0E7FF;
}

/* Non-working day (closed per schedule) — subtle gray wash */
.cv-cell--nonworking[b-58ul7r4tmz] {
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 6px,
        rgba(0,0,0,0.018) 6px,
        rgba(0,0,0,0.018) 12px
    );
    background-color: #f8f9fb;
}

.cv-cell--nonworking .cv-day-num[b-58ul7r4tmz] {
    color: var(--text-muted, #94a3b8);
    font-weight: 500;
}

.cv-cell--nonworking:hover[b-58ul7r4tmz] {
    background-color: #f1f3f6;
}

/* ── Day number ───────────────────────────────────────────────────────── */
.cv-day-num[b-58ul7r4tmz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    margin-bottom: 4px;
    line-height: 1;
}

/* ── Appointment pills ────────────────────────────────────────────────── */
.cv-pills[b-58ul7r4tmz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cv-pill[b-58ul7r4tmz] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.68rem;
    line-height: 1.3;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cv-pill-time[b-58ul7r4tmz] {
    font-weight: 700;
    flex-shrink: 0;
}

.cv-pill-name[b-58ul7r4tmz] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-pill--pending[b-58ul7r4tmz]   { background: #DBEAFE; color: #1E40AF; }
.cv-pill--confirmed[b-58ul7r4tmz] { background: #DCFCE7; color: #166534; }
.cv-pill--cancelled[b-58ul7r4tmz] { background: #FEE2E2; color: #991B1B; }
.cv-pill--completed[b-58ul7r4tmz] { background: #FEF9C3; color: #854D0E; }

.cv-pill-overflow[b-58ul7r4tmz] {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted, #64748B);
    padding: 1px 5px;
}

/* ── Detail panel ─────────────────────────────────────────────────────── */
.cv-panel[b-58ul7r4tmz] {
    width: 300px;
    flex-shrink: 0;
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cv-panel-header[b-58ul7r4tmz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.cv-panel-weekday[b-58ul7r4tmz] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted, #64748B);
    margin: 0;
}

.cv-panel-date[b-58ul7r4tmz] {
    font-family: 'Outfit', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main, #1E293B);
    margin: 0.2rem 0 0;
}

.cv-panel-close[b-58ul7r4tmz] {
    background: transparent;
    border: none;
    color: var(--text-muted, #64748B);
    cursor: pointer;
    padding: 4px;
    font-size: 0.9rem;
    line-height: 1;
    border-radius: 6px;
    transition: color 0.12s, background 0.12s;
}

.cv-panel-close:hover[b-58ul7r4tmz] {
    color: var(--text-main, #1E293B);
    background: #F1F5F9;
}

.cv-panel-count[b-58ul7r4tmz] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted, #64748B);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border-color, #E2E8F0);
}

.cv-panel-empty[b-58ul7r4tmz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 0;
    color: var(--text-muted, #64748B);
    font-size: 0.875rem;
    text-align: center;
}

.cv-panel-empty i[b-58ul7r4tmz] {
    font-size: 1.75rem;
    opacity: 0.4;
}

.cv-panel-new-btn[b-58ul7r4tmz] {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    margin-top: 0.25rem;
}

/* ── Appointment rows in panel ────────────────────────────────────────── */
.cv-panel-list[b-58ul7r4tmz] {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.cv-appt-row[b-58ul7r4tmz] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    background: #F8FAFC;
    border: 1px solid var(--border-color, #E2E8F0);
}

.cv-appt-time-col[b-58ul7r4tmz] {
    flex-shrink: 0;
}

.cv-appt-time[b-58ul7r4tmz] {
    font-size: 0.8rem;
    font-weight: 700;
    color: #4F46E5;
    font-family: 'Outfit', sans-serif;
}

.cv-appt-info[b-58ul7r4tmz] {
    flex: 1;
    min-width: 0;
}

.cv-appt-name[b-58ul7r4tmz] {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cv-appt-phone[b-58ul7r4tmz] {
    font-size: 0.73rem;
    color: var(--text-muted, #64748B);
    margin: 0;
}

.cv-appt-badge[b-58ul7r4tmz] {
    flex-shrink: 0;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 100px;
}

.cv-appt-badge--pending[b-58ul7r4tmz]   { background: #DBEAFE; color: #1E40AF; }
.cv-appt-badge--confirmed[b-58ul7r4tmz] { background: #DCFCE7; color: #166534; }
.cv-appt-badge--cancelled[b-58ul7r4tmz] { background: #FEE2E2; color: #991B1B; }
.cv-appt-badge--completed[b-58ul7r4tmz] { background: #FEF9C3; color: #854D0E; }

/* ── Legend ───────────────────────────────────────────────────────────── */
.cv-legend[b-58ul7r4tmz] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.cv-legend-item[b-58ul7r4tmz] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted, #64748B);
}

.cv-legend-dot[b-58ul7r4tmz] {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.cv-legend-dot--pending[b-58ul7r4tmz]   { background: #93C5FD; }
.cv-legend-dot--confirmed[b-58ul7r4tmz] { background: #86EFAC; }
.cv-legend-dot--cancelled[b-58ul7r4tmz] { background: #FCA5A5; }
.cv-legend-dot--completed[b-58ul7r4tmz] { background: #FDE68A; }

/* ── View Switcher ────────────────────────────────────────────────────── */
/* Sits as the first child of cv-grid-col, aligned to the left edge.      */
.cv-view-switcher[b-58ul7r4tmz] {
    display: inline-flex;
    background: var(--border-color, #E2E8F0);
    border-radius: 8px;
    padding: 3px;
    align-self: flex-start;  /* don't stretch to full column width */
}

.cv-switch-btn[b-58ul7r4tmz] {
    background: transparent;
    border: none;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted, #64748B);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cv-switch-btn:hover[b-58ul7r4tmz] {
    color: var(--text-main, #1E293B);
}

.cv-switch-btn.active[b-58ul7r4tmz] {
    background: white;
    color: var(--primary-color, #4F46E5);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ── Day View ─────────────────────────────────────────────────────────── */
.cv-day-view-card[b-58ul7r4tmz] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02), 0 10px 15px rgba(0,0,0,0.03);
    border: 1px solid rgba(255,255,255,0.8);
}

.cv-day-list[b-58ul7r4tmz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cv-day-appt-card[b-58ul7r4tmz] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    background: #F8FAFC;
    border: 1px solid var(--border-color, #E2E8F0);
    border-left: 4px solid var(--border-color, #E2E8F0);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.cv-day-appt-card:hover[b-58ul7r4tmz] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.cv-day-appt-time[b-58ul7r4tmz] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color, #4F46E5);
    font-family: 'Outfit', sans-serif;
    min-width: 60px;
}

.cv-day-appt-content[b-58ul7r4tmz] {
    flex: 1;
}

.cv-day-appt-name[b-58ul7r4tmz] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    margin-bottom: 0.25rem;
}

.cv-day-appt-phone[b-58ul7r4tmz] {
    font-size: 0.85rem;
    color: var(--text-muted, #64748B);
    margin: 0;
}

.cv-day-appt-actions[b-58ul7r4tmz] {
    flex-shrink: 0;
}

.cv-day-appt-card--pending[b-58ul7r4tmz] { border-left-color: #93C5FD; }
.cv-day-appt-card--confirmed[b-58ul7r4tmz] { border-left-color: #86EFAC; }
.cv-day-appt-card--cancelled[b-58ul7r4tmz] { border-left-color: #FCA5A5; background: #FEF2F2; }
.cv-day-appt-card--completed[b-58ul7r4tmz] { border-left-color: #FDE68A; }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* ── Page ────────────────────────────────────────────────────────── */
    .cv-page[b-58ul7r4tmz] {
        padding: 1rem 0 2rem;
    }

    /* ── Date navigation: compress label, keep centred ───────────────── */
    .cv-date-label[b-58ul7r4tmz] {
        font-size: 1.1rem;
        min-width: 150px;
    }

    /* View switcher fills full width with equal-width buttons */
    .cv-view-switcher[b-58ul7r4tmz] {
        width: 100%;
        align-self: stretch;
    }

    .cv-switch-btn[b-58ul7r4tmz] {
        flex: 1;
        text-align: center;
        padding: 0.4rem 0.5rem;
    }

    /* ── Month grid ──────────────────────────────────────────────────── */
    .cv-body[b-58ul7r4tmz] {
        flex-direction: column;
        gap: 1rem;
    }

    .cv-panel[b-58ul7r4tmz] {
        width: 100%;
    }

    .cv-cell[b-58ul7r4tmz] {
        min-height: 64px;
        padding: 4px;
    }

    .cv-pill-name[b-58ul7r4tmz] {
        display: none; /* show only time on small screens */
    }

    .cv-pill[b-58ul7r4tmz] {
        justify-content: center;
    }

    /* ── Day view cards ──────────────────────────────────────────────── */
    /* Compact padding and let the actions row wrap below content */
    .cv-day-appt-card[b-58ul7r4tmz] {
        flex-wrap: wrap;
        padding: 0.875rem 1rem;
        gap: 0.6rem 1rem;
    }

    .cv-day-appt-time[b-58ul7r4tmz] {
        font-size: 1rem;
        min-width: 48px;
    }

    /* Force action buttons onto a full-width second row */
    .cv-day-appt-actions[b-58ul7r4tmz] {
        width: 100%;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.5rem !important;
    }
}

/* ── Note toggle button ─────────────────────────────────────────────────── */
.cv-note-toggle[b-58ul7r4tmz] {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-muted, #9ca3af);
    font-size: 0.85rem;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
    line-height: 1;
}

.cv-note-toggle:hover[b-58ul7r4tmz] {
    color: #4F46E5;
    background: rgba(79,70,229,0.07);
}

.cv-note-toggle--has-note[b-58ul7r4tmz] {
    color: #F59E0B;
}

.cv-note-toggle--has-note:hover[b-58ul7r4tmz] {
    color: #D97706;
    background: rgba(245,158,11,0.1);
}

/* ── Note preview (collapsed) ───────────────────────────────────────────── */
.cv-appt-note-preview[b-58ul7r4tmz] {
    font-size: 0.72rem;
    color: #D97706;
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

/* ── Inline note editor ─────────────────────────────────────────────────── */
.cv-appt-row--note-open[b-58ul7r4tmz],
.cv-day-appt-card--note-open[b-58ul7r4tmz] {
    flex-wrap: wrap;
}

.cv-note-editor[b-58ul7r4tmz] {
    width: 100%;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.cv-note-editor--day[b-58ul7r4tmz] {
    padding-left: 0;
}

.cv-note-textarea[b-58ul7r4tmz] {
    width: 100%;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.83rem;
    font-family: inherit;
    resize: vertical;
    min-height: 70px;
    color: #374151;
    background: #fafafa;
    transition: border-color 0.15s;
    box-sizing: border-box;
}

.cv-note-textarea:focus[b-58ul7r4tmz] {
    outline: none;
    border-color: #4F46E5;
    background: #fff;
}

.cv-note-actions[b-58ul7r4tmz] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

.cv-note-btn[b-58ul7r4tmz] {
    padding: 0.3rem 0.75rem;
    font-size: 0.78rem;
}

.cv-note-saved[b-58ul7r4tmz] {
    font-size: 0.78rem;
    color: #16a34a;
    font-weight: 600;
    margin-right: auto;
}

/* ════════════════════════════════════════════════════════════════════════════
   Week View
   ════════════════════════════════════════════════════════════════════════════ */

/* Outer card — no padding so the time grid reaches the edges */
.wv-card[b-58ul7r4tmz] {
    /* flex: 1 removed — now a block child of cv-grid-col */
    padding: 0;
    overflow: hidden;
    position: relative;
}

/* Wrapper: column flex — wrapper scrolls, header sticks inside it.
   Both header and body share the same scrollable width, so vertical
   column dividers always line up regardless of scrollbar presence. */
.wv-wrapper[b-58ul7r4tmz] {
    display: flex;
    flex-direction: column;
    height: 620px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ── Sticky column-header row ─────────────────────────────────────────── */
.wv-header-row[b-58ul7r4tmz] {
    display: grid;
    grid-template-columns: 52px repeat(7, 1fr);
    flex-shrink: 0;
    border-bottom: 2px solid var(--border-color, #E2E8F0);
    background: #fff;
    /* Stick to the top of .wv-wrapper (the scroll container) so the header
       stays visible while the time grid scrolls. position activates z-index. */
    position: sticky;
    top: 0;
    z-index: 4;
}

.wv-gutter-header[b-58ul7r4tmz] {
    border-right: 1px solid var(--border-color, #E2E8F0);
}

.wv-col-header[b-58ul7r4tmz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.25rem;
    gap: 0.2rem;
    border-right: 1px solid var(--border-color, #E2E8F0);
    cursor: default;
}

.wv-col-header:last-child[b-58ul7r4tmz] { border-right: none; }

.wv-col-dow[b-58ul7r4tmz] {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-muted, #64748B);
}

.wv-col-date-num[b-58ul7r4tmz] {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main, #1E293B);
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}

.wv-col-date-num--today[b-58ul7r4tmz] {
    background: #4F46E5;
    color: #fff;
}

.wv-col-header--today .wv-col-dow[b-58ul7r4tmz] {
    color: #4F46E5;
}

.wv-col-header--closed .wv-col-dow[b-58ul7r4tmz],
.wv-col-header--closed .wv-col-date-num[b-58ul7r4tmz] {
    color: #CBD5E1;
}

/* ── Body row (gutter + day columns) ─────────────────────────────────── */
/* Scrolling is now handled by .wv-wrapper; body just needs to be tall
   enough so the wrapper has content to scroll through. */
.wv-body-scroll[b-58ul7r4tmz] {
    display: flex;
    flex: 1;
    min-height: fit-content; /* grow to content height, not flex-allocated height */
    overflow: visible;
}

/* ── Time gutter ──────────────────────────────────────────────────────── */
.wv-gutter[b-58ul7r4tmz] {
    width: 52px;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color, #E2E8F0);
}

.wv-hour-label[b-58ul7r4tmz] {
    height: 60px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 4px 8px 0 0;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted, #94A3B8);
    box-sizing: border-box;
}

/* ── 7-column grid ────────────────────────────────────────────────────── */
.wv-cols-grid[b-58ul7r4tmz] {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    min-width: 0;
}

/* ── Individual day column ────────────────────────────────────────────── */
.wv-day-col[b-58ul7r4tmz] {
    position: relative;
    border-right: 1px solid var(--border-color, #E2E8F0);
    box-sizing: border-box;
}

.wv-day-col:last-child[b-58ul7r4tmz] { border-right: none; }

.wv-day-col--closed[b-58ul7r4tmz] {
    background: repeating-linear-gradient(
        135deg,
        transparent,
        transparent 6px,
        rgba(0,0,0,0.018) 6px,
        rgba(0,0,0,0.018) 12px
    );
    background-color: #f8f9fb;
}

/* ── Hour cells (grid lines inside each day column) ──────────────────── */
.wv-hour-cell[b-58ul7r4tmz] {
    height: 60px;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
    box-sizing: border-box;
}

/* ── Appointment blocks ───────────────────────────────────────────────── */
.wv-appt[b-58ul7r4tmz] {
    position: absolute;
    left: 3px;
    right: 3px;
    min-height: 28px;
    border-radius: 5px;
    padding: 3px 6px;
    font-size: 0.7rem;
    line-height: 1.3;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 1px;
    z-index: 1;
    border-left: 3px solid transparent;
    transition: transform 0.1s, box-shadow 0.1s, z-index 0s;
}

.wv-appt:hover[b-58ul7r4tmz] {
    transform: scale(1.03);
    box-shadow: 0 3px 10px rgba(0,0,0,0.12);
    z-index: 3;
}

.wv-appt--selected[b-58ul7r4tmz] {
    outline: 2px solid #4F46E5;
    outline-offset: 1px;
    z-index: 4;
}

.wv-appt--pending[b-58ul7r4tmz]   { background: #DBEAFE; color: #1E40AF; border-left-color: #3B82F6; }
.wv-appt--confirmed[b-58ul7r4tmz] { background: #DCFCE7; color: #166534; border-left-color: #22C55E; }
.wv-appt--cancelled[b-58ul7r4tmz] { background: #FEE2E2; color: #991B1B; border-left-color: #EF4444; opacity: 0.75; }
.wv-appt--completed[b-58ul7r4tmz] { background: #FEF9C3; color: #854D0E; border-left-color: #EAB308; }

.wv-appt-time[b-58ul7r4tmz] {
    font-weight: 700;
    font-size: 0.67rem;
    opacity: 0.8;
}

.wv-appt-name[b-58ul7r4tmz] {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wv-appt-note-icon[b-58ul7r4tmz] {
    font-size: 0.6rem;
    opacity: 0.7;
    margin-top: 1px;
}

/* ── Week detail panel ────────────────────────────────────────────────── */
.wv-detail-panel[b-58ul7r4tmz] {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* ── Tablet: shrink week view height, reduce header text ─────────────── */
@media (max-width: 900px) {
    .wv-wrapper[b-58ul7r4tmz] {
        height: 480px;
        overflow-y: auto;
    }

    .wv-appt-name[b-58ul7r4tmz] {
        display: none;  /* show only time at this width */
    }

    .wv-col-dow[b-58ul7r4tmz] {
        font-size: 0.58rem;
    }

    .wv-col-date-num[b-58ul7r4tmz] {
        font-size: 0.9rem;
        width: 26px;
        height: 26px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   Now Serving — Day view
   ════════════════════════════════════════════════════════════════════════════ */

.cv-day-appt-card--now-serving[b-58ul7r4tmz] {
    background: #f0fdf9;
    border-left-color: #0d9488 !important;
    box-shadow: 0 0 0 1px rgba(13,148,136,0.25), 0 4px 14px rgba(13,148,136,0.12);
    animation: cvNowServingPulse-b-58ul7r4tmz 2.5s ease-in-out infinite;
}

@keyframes cvNowServingPulse-b-58ul7r4tmz {
    0%, 100% { box-shadow: 0 0 0 1px rgba(13,148,136,0.25), 0 4px 14px rgba(13,148,136,0.12); }
    50%       { box-shadow: 0 0 0 3px rgba(13,148,136,0.18), 0 4px 18px rgba(13,148,136,0.22); }
}

/* Pulsing dot in the time column */
.cv-now-dot[b-58ul7r4tmz] {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0d9488;
    margin-left: 4px;
    vertical-align: middle;
    animation: cvDotPulse-b-58ul7r4tmz 1.4s ease-in-out infinite;
}

@keyframes cvDotPulse-b-58ul7r4tmz {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%       { transform: scale(1.55); opacity: 0.7; }
}

/* Inline "NOW" badge in the name */
.cv-now-label[b-58ul7r4tmz] {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #fff;
    background: #0d9488;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    vertical-align: middle;
    line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════════════════════
   Now Serving — Week view
   ════════════════════════════════════════════════════════════════════════════ */

.wv-appt--now-serving[b-58ul7r4tmz] {
    background: #ccfbf1 !important;
    color: #134e4a !important;
    border-left-color: #0d9488 !important;
    box-shadow: 0 0 0 1.5px rgba(13,148,136,0.35), 0 2px 8px rgba(13,148,136,0.15);
    animation: wvNowServingPulse-b-58ul7r4tmz 2.5s ease-in-out infinite;
    z-index: 2;
}

@keyframes wvNowServingPulse-b-58ul7r4tmz {
    0%, 100% { box-shadow: 0 0 0 1.5px rgba(13,148,136,0.35), 0 2px 8px rgba(13,148,136,0.15); }
    50%       { box-shadow: 0 0 0 3px   rgba(13,148,136,0.25), 0 2px 12px rgba(13,148,136,0.28); }
}

/* Tiny pulsing dot for week view blocks */
.wv-now-dot[b-58ul7r4tmz] {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #0d9488;
    flex-shrink: 0;
    animation: cvDotPulse-b-58ul7r4tmz 1.4s ease-in-out infinite;
}

/* ── Phone: horizontal scroll so 7 columns stay readable ─────────────── */
/* .wv-card becomes the horizontal scroll container.                       */
/* .wv-wrapper expands to its min-width, overflowing the card.             */
/* The sticky header is demoted to relative so it moves with H-scroll.    */
@media (max-width: 768px) {
    .wv-card[b-58ul7r4tmz] {
        overflow-x: auto;
        overflow-y: hidden;      /* vertical scroll is .wv-wrapper's job */
        -webkit-overflow-scrolling: touch;
    }

    .wv-wrapper[b-58ul7r4tmz] {
        min-width: 540px;        /* 52px gutter + 7 × ~70px columns */
        height: 460px;
        overflow-y: auto;
        overflow-x: visible;     /* card handles the horizontal overflow */
    }

    /* Disable position:sticky inside a multi-axis scroll container to
       avoid undefined browser behaviour — header scrolls with content */
    .wv-header-row[b-58ul7r4tmz] {
        position: relative;
        top: auto;
    }
}
/* /Components/Pages/Contacts.razor.rz.scp.css */
.contacts-container[b-udc9jxlpju] {
    padding: 0.25rem 0;
}

/* ── Shared utility styles (scoped — not global) ──────────────────────── */

.sc-section-title[b-udc9jxlpju] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main, #1E293B);
    margin-bottom: 1rem;
}

.sc-section-title .fas[b-udc9jxlpju] {
    color: #4F46E5;
}

.sc-capacity-label[b-udc9jxlpju] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, #64748B);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.glass-input[b-udc9jxlpju] {
    background: var(--card-bg, #fff);
    border: 1.5px solid var(--border-color, #E2E8F0);
    color: var(--text-main, #1E293B);
    border-radius: 8px;
    padding: 0.55rem 0.85rem;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    display: block;
}

.glass-input:focus[b-udc9jxlpju] {
    border-color: #4F46E5;
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.sc-open-count[b-udc9jxlpju] {
    font-size: 0.75rem;
    font-weight: 600;
    color: #16A34A;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.sc-empty-state[b-udc9jxlpju] {
    text-align: center;
    padding: 3rem 1rem;
    color: #94A3B8;
    font-size: 0.875rem;
}

/* ── Page header — tighter on mobile ─────────────────────────────────── */
/* Override Bulma mt-5 / mb-5 only inside this component */
.contacts-header-row[b-udc9jxlpju] {
    margin-bottom: 1.25rem;
}

/* ── Import action bar ────────────────────────────────────────────────── */
.contacts-import-bar[b-udc9jxlpju] {
    margin-bottom: 1rem;
}

.contacts-import-actions[b-udc9jxlpju] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

/* Each import method card */
.contacts-import-btn[b-udc9jxlpju] {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 1rem;
    border: 1.5px solid #E0E7FF;
    border-radius: 10px;
    background: #F8FAFF;
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    min-width: 220px;
    flex: 1;
}

.contacts-import-btn:hover[b-udc9jxlpju] {
    border-color: #818CF8;
    background: #EEF2FF;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.1);
}

.contacts-import-btn:disabled[b-udc9jxlpju] {
    cursor: not-allowed;
    opacity: 0.6;
}

.contacts-import-btn--disabled[b-udc9jxlpju] {
    cursor: default;
    opacity: 0.45;
    filter: grayscale(0.5);
}

.contacts-import-btn-icon[b-udc9jxlpju] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.contacts-import-btn-icon--google[b-udc9jxlpju] {
    background: linear-gradient(135deg, #EA4335, #FBBC05);
}

.contacts-import-btn-body[b-udc9jxlpju] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.contacts-import-btn-label[b-udc9jxlpju] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    line-height: 1.3;
}

.contacts-import-btn-hint[b-udc9jxlpju] {
    font-size: 0.75rem;
    color: var(--text-muted, #64748B);
    line-height: 1.4;
}

/* ── Manual add form ──────────────────────────────────────────────────── */
.contacts-add-row[b-udc9jxlpju] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: flex-end;
}

.contacts-add-field[b-udc9jxlpju] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
    min-width: 180px;
}

.contacts-add-submit[b-udc9jxlpju] {
    flex-shrink: 0;
    align-self: flex-end;
}

/* ── Search bar ───────────────────────────────────────────────────────── */
.contacts-search-row[b-udc9jxlpju] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.contacts-search-wrap[b-udc9jxlpju] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.contacts-search-icon[b-udc9jxlpju] {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 0.85rem;
    pointer-events: none;
}

.contacts-search-input[b-udc9jxlpju] {
    width: 100%;
    border: 1.5px solid #E2E8F0;
    border-radius: 9px;
    padding: 0.55rem 0.75rem 0.55rem 2.1rem;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    color: var(--text-main, #1E293B);
    background: #fff;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.contacts-search-input:focus[b-udc9jxlpju] {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* ── Contact rows ─────────────────────────────────────────────────────── */
.contacts-list[b-udc9jxlpju] {
    display: flex;
    flex-direction: column;
}

.contacts-row[b-udc9jxlpju] {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.5rem;
    border-bottom: 1px solid var(--border-color, #F1F5F9);
    transition: background 0.12s ease;
    border-radius: 8px;
}

.contacts-row:last-child[b-udc9jxlpju] {
    border-bottom: none;
}

.contacts-row:hover[b-udc9jxlpju] {
    background: #F8FAFF;
}

/* Trash button — hidden until row is hovered; always visible on touch devices */
.contacts-delete-btn[b-udc9jxlpju] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #CBD5E1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    opacity: 0;           /* hidden by default on desktop */
    padding: 0;
}

.contacts-row:hover .contacts-delete-btn[b-udc9jxlpju] {
    opacity: 1;
}

.contacts-delete-btn:hover[b-udc9jxlpju] {
    background: #FEE2E2;
    color: #EF4444;
}

.contacts-delete-btn:disabled[b-udc9jxlpju] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Always show delete btn on touch / small screens */
@media (hover: none), (max-width: 768px) {
    .contacts-delete-btn[b-udc9jxlpju] {
        opacity: 1;
        color: #CBD5E1;
    }
}

.contacts-avatar[b-udc9jxlpju] {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #C7D2FE, #A5B4FC);
    color: #3730A3;
    font-size: 0.9rem;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

.contacts-info[b-udc9jxlpju] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.contacts-name[b-udc9jxlpju] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.contacts-phone[b-udc9jxlpju] {
    font-size: 0.78rem;
    color: var(--text-muted, #64748B);
    font-family: 'Inter', monospace;
    letter-spacing: 0.01em;
}

.contacts-meta[b-udc9jxlpju] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    flex-shrink: 0;
}

.contacts-meta-label[b-udc9jxlpju] {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94A3B8;
}

.contacts-meta-value[b-udc9jxlpju] {
    font-size: 0.75rem;
    color: var(--text-muted, #64748B);
    white-space: nowrap;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Pull the whole page up — Bulma's .mt-5 (3rem) is too large on phone */
    .container[b-udc9jxlpju] {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        margin-top: 1rem !important;
    }

    /* Compact header row */
    .contacts-header-row[b-udc9jxlpju] {
        margin-bottom: 0.85rem;
    }

    /* Shrink the gradient title on small screens */
    .title.is-2[b-udc9jxlpju] {
        font-size: 1.6rem !important;
    }

    .subtitle.is-6[b-udc9jxlpju] {
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Tighten glass-card spacing */
    .glass-card[b-udc9jxlpju] {
        padding: 1rem !important;
    }

    /* Reduce gap between page sections */
    .contacts-import-bar[b-udc9jxlpju] {
        margin-bottom: 0.75rem;
    }

    /* Stack import buttons full-width */
    .contacts-import-btn[b-udc9jxlpju] {
        min-width: 100%;
        flex: none;
        width: 100%;
    }

    /* Tighten the import button padding on phone */
    .contacts-import-btn[b-udc9jxlpju] {
        padding: 0.65rem 0.85rem;
    }

    /* Stack add-form fields */
    .contacts-add-row[b-udc9jxlpju] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .contacts-add-field[b-udc9jxlpju] {
        min-width: 100%;
    }

    /* Submit button full-width on mobile */
    .contacts-add-submit[b-udc9jxlpju] {
        width: 100%;
        align-self: stretch;
    }

    .contacts-add-submit .action-btn[b-udc9jxlpju] {
        width: 100%;
        justify-content: center;
    }

    /* Hide date metadata on small screens */
    .contacts-meta[b-udc9jxlpju] {
        display: none;
    }

    /* Wrap count chip below search on very narrow screens */
    .contacts-search-row[b-udc9jxlpju] {
        flex-wrap: wrap;
    }

    .sc-open-count[b-udc9jxlpju] {
        margin-left: 0;
    }
}
/* /Components/Pages/CsvUpload.razor.rz.scp.css */
/* Page container */
.csv-upload-container[b-wogjdrky0u] {
    padding: 0.25rem 0;
}

/* Form inputs */
.glass-input[b-wogjdrky0u] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.9rem;
}

.glass-input:focus[b-wogjdrky0u] {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Drop zone */
.drop-zone[b-wogjdrky0u] {
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    background: var(--bg-main);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.drop-zone:hover[b-wogjdrky0u],
.drop-zone.drag-over[b-wogjdrky0u] {
    border-color: var(--primary-color);
    background: rgba(79, 70, 229, 0.04);
}

.drop-zone i[b-wogjdrky0u] {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
    transition: transform 0.3s ease;
    display: block;
}

.drop-zone:hover i[b-wogjdrky0u] {
    transform: translateY(-5px);
}

/* Micro animation */
.micro-animation[b-wogjdrky0u] {
    animation: fadeIn-b-wogjdrky0u 0.4s ease-out;
}

@keyframes fadeIn-b-wogjdrky0u {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stats badges */
.stats-badge[b-wogjdrky0u] {
    padding: 0.4rem 0.85rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    display: inline-block;
    margin-right: 0.75rem;
    margin-bottom: 0.75rem;
}

.badge-total[b-wogjdrky0u]    { background: var(--bg-main); color: var(--text-main); border: 1px solid var(--border-color); }
.badge-imported[b-wogjdrky0u] { background: rgba(16, 185, 129, 0.09); color: #059669; border: 1px solid rgba(16, 185, 129, 0.25); }
.badge-duplicate[b-wogjdrky0u] { background: rgba(245, 158, 11, 0.09); color: #D97706; border: 1px solid rgba(245, 158, 11, 0.25); }
.badge-failed[b-wogjdrky0u]   { background: rgba(239, 68, 68, 0.09); color: var(--danger-color); border: 1px solid rgba(239, 68, 68, 0.25); }

/* Error list */
.error-list[b-wogjdrky0u] {
    background: rgba(239, 68, 68, 0.04);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 10px;
    padding: 1rem;
    max-height: 200px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--danger-color);
}

.error-item[b-wogjdrky0u] {
    margin-bottom: 0.25rem;
    border-bottom: 1px solid rgba(239, 68, 68, 0.08);
    padding-bottom: 0.25rem;
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Page container */
.dashboard-container[b-zo3u7tti5h] {
    padding: 0.25rem 0;
}

/* ── First-time setup banner ─────────────────────────────────────────── */
.setup-banner[b-zo3u7tti5h] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);
    border: 1.5px solid #C7D2FE;
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
}

.setup-banner-icon[b-zo3u7tti5h] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
}

.setup-banner-body[b-zo3u7tti5h] {
    flex: 1;
}

.setup-banner-title[b-zo3u7tti5h] {
    font-weight: 700;
    font-size: 0.975rem;
    color: #3730A3;
    margin: 0 0 0.2rem;
}

.setup-banner-text[b-zo3u7tti5h] {
    font-size: 0.85rem;
    color: #4338CA;
    margin: 0;
    opacity: 0.85;
}

.setup-banner-cta[b-zo3u7tti5h] {
    flex-shrink: 0;
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    color: #fff !important;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1.25rem;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.setup-banner-cta:hover[b-zo3u7tti5h] {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* ── Subscription-gated dashboard cards ──────────────────────────────── */
.card-locked[b-zo3u7tti5h] {
    position: relative;
    opacity: 0.45;
    filter: grayscale(0.6);
    cursor: not-allowed;
}

.card-locked *[b-zo3u7tti5h] {
    pointer-events: none;
}

.card-lock-badge[b-zo3u7tti5h] {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
}

/* Tooltip above the card */
.card-locked[b-zo3u7tti5h]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 9px);
    left: 50%;
    transform: translateX(-50%);
    background: #1f2937;
    color: #f9fafb;
    font-size: 0.74rem;
    font-weight: 500;
    padding: 0.42rem 0.8rem;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .16s ease;
    z-index: 50;
}

.card-locked[b-zo3u7tti5h]::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f2937;
    pointer-events: none;
    opacity: 0;
    transition: opacity .16s ease;
    z-index: 51;
}

.card-locked:hover[b-zo3u7tti5h]::after,
.card-locked:hover[b-zo3u7tti5h]::before {
    opacity: 1;
}

/* Alert card animation on top of global .alert-card-active */
.alert-card-active[b-zo3u7tti5h] {
    animation: alertPulse-b-zo3u7tti5h 3s infinite alternate;
}

@keyframes alertPulse-b-zo3u7tti5h {
    0%  { box-shadow: none; }
    100% { box-shadow: 0 0 16px rgba(239, 68, 68, 0.12); }
}

/* ── Cancellation panel header ─────────────────────────────────── */
.cancel-panel-header[b-zo3u7tti5h] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.cancel-panel-title[b-zo3u7tti5h] {
    font-size: 1rem;
    font-weight: 700;
    color: #dc2626;
}

.cancel-panel-sub[b-zo3u7tti5h] {
    font-size: 0.75rem;
    color: var(--text-muted, #64748b);
}

/* ── Cancellation grid ─────────────────────────────────────────── */
.cancellation-grid[b-zo3u7tti5h] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.5rem;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 2px; /* prevent scrollbar overlap */
}

/* ── Individual row ────────────────────────────────────────────── */
.cancellation-row[b-zo3u7tti5h] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cancellation-row:hover[b-zo3u7tti5h] {
    border-color: rgba(220, 38, 38, 0.3);
    box-shadow: 0 1px 6px rgba(220, 38, 38, 0.06);
}

.cancellation-row-info[b-zo3u7tti5h] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.cr-name[b-zo3u7tti5h] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-meta[b-zo3u7tti5h] {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-cancelled[b-zo3u7tti5h] {
    font-size: 0.7rem;
    color: #dc2626;
}

/* ── Acknowledge button (icon-only, compact) ──────────────────── */
.cr-ack-btn[b-zo3u7tti5h] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: none;
    background: rgba(220, 38, 38, 0.1);
    color: #dc2626;
    font-size: 0.75rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
}

.cr-ack-btn:hover[b-zo3u7tti5h] {
    background: #dc2626;
    color: #fff;
}

.cr-ack-btn:active[b-zo3u7tti5h] { transform: scale(0.92); }

/* Floating alert container */
.floating-alert-container[b-zo3u7tti5h] {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 360px;
    max-width: 90vw;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Floating alert — light mode */
.floating-alert[b-zo3u7tti5h] {
    background: var(--card-bg);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 12px;
    padding: 1.25rem 1.25rem 1.25rem 1.5rem;
    color: var(--text-main);
    box-shadow: var(--shadow-lg);
    animation: slideIn-b-zo3u7tti5h 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: relative;
    overflow: hidden;
}

.floating-alert--confirm[b-zo3u7tti5h] {
    border-color: rgba(21, 128, 61, 0.35);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08), 0 0 12px rgba(21, 128, 61, 0.12);
}

.floating-alert--confirm[b-zo3u7tti5h]::before {
    background: #15803d !important;
}

.floating-alert--running-late[b-zo3u7tti5h] {
    border-color: rgba(194, 65, 12, 0.35);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08), 0 0 12px rgba(194, 65, 12, 0.15);
}

.floating-alert--running-late[b-zo3u7tti5h]::before {
    background: #c2410c !important;
}

.floating-alert--walkin[b-zo3u7tti5h] {
    border-color: rgba(14, 165, 233, 0.35);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08), 0 0 12px rgba(14, 165, 233, 0.15);
}

.floating-alert--walkin[b-zo3u7tti5h]::before {
    background: #0ea5e9 !important;
}

.floating-alert--now-serving[b-zo3u7tti5h] {
    border-color: rgba(13, 148, 136, 0.4);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08), 0 0 14px rgba(13, 148, 136, 0.2);
}

.floating-alert--now-serving[b-zo3u7tti5h]::before {
    background: #0d9488 !important;
}

/* Pulsing dot indicator for "Now Serving" */
.now-serving-pulse[b-zo3u7tti5h] {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #0d9488;
    margin-right: 6px;
    vertical-align: middle;
    animation: nowServingPulse-b-zo3u7tti5h 1.5s ease-in-out infinite;
}

@keyframes nowServingPulse-b-zo3u7tti5h {
    0%, 100% { transform: scale(1);   opacity: 1;   box-shadow: 0 0 0 0 rgba(13,148,136,0.5); }
    50%       { transform: scale(1.2); opacity: 0.9; box-shadow: 0 0 0 5px rgba(13,148,136,0); }
}

.floating-alert[b-zo3u7tti5h]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--danger-color);
}

@keyframes slideIn-b-zo3u7tti5h {
    from {
        opacity: 0;
        transform: translateX(100%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

.close-alert[b-zo3u7tti5h] {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.close-alert:hover[b-zo3u7tti5h] {
    color: var(--danger-color);
}

/* ── System Health Card ─────────────────────────────────────────────── */
.sh-header[b-zo3u7tti5h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    gap: 1rem;
}

.sh-last-checked[b-zo3u7tti5h] {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0.2rem 0 0;
}

.sh-refresh-btn[b-zo3u7tti5h] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    background: var(--card-bg);
    color: var(--text-main);
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
}
.sh-refresh-btn:hover:not(:disabled)[b-zo3u7tti5h] {
    background: var(--bg-main);
    border-color: #4f46e5;
}
.sh-refresh-btn:disabled[b-zo3u7tti5h] { opacity: 0.5; cursor: not-allowed; }

.sh-grid[b-zo3u7tti5h] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 0.85rem;
}

.sh-tile[b-zo3u7tti5h] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    transition: box-shadow .15s;
}
.sh-tile:hover[b-zo3u7tti5h] { box-shadow: 0 2px 10px rgba(0,0,0,.06); }

.sh-tile-icon[b-zo3u7tti5h] {
    width: 38px;
    height: 38px;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.sh-icon--green[b-zo3u7tti5h] { background: #d1fae5; color: #059669; }
.sh-icon--red[b-zo3u7tti5h]   { background: #fee2e2; color: #dc2626; }
.sh-icon--amber[b-zo3u7tti5h] { background: #fef3c7; color: #d97706; }
.sh-icon--blue[b-zo3u7tti5h]  { background: #dbeafe; color: #2563eb; }

.sh-tile-label[b-zo3u7tti5h] { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; margin: 0; text-transform: uppercase; letter-spacing: 0.04em; }
.sh-tile-value[b-zo3u7tti5h] { font-size: 0.9rem; font-weight: 700; margin: 0.15rem 0 0; color: var(--text-main); }
.sh-tile-sub[b-zo3u7tti5h]   { font-size: 0.72rem; margin: 0.1rem 0 0; }

.sh-count[b-zo3u7tti5h] { font-size: 1.6rem; line-height: 1.1; }
.sh-green[b-zo3u7tti5h] { color: #059669; }
.sh-red[b-zo3u7tti5h]   { color: #dc2626; }
.sh-amber[b-zo3u7tti5h] { color: #d97706; }
.sh-muted[b-zo3u7tti5h] { color: var(--text-muted); }

@media (max-width: 600px) {
    .sh-grid[b-zo3u7tti5h] { grid-template-columns: 1fr 1fr; }
}
/* /Components/Pages/InviteLanding.razor.rz.scp.css */
/* ── Invite Landing page ───────────────────────────────────────────────────
   Temporary: remove this file after the public launch.
   ───────────────────────────────────────────────────────────────────────── */

.il-page[b-eu5kqggzy0] {
    display: flex;
    min-height: 100vh;
    background: var(--bg-main, #F8FAFC);
    font-family: 'Inter', system-ui, sans-serif;
}

/* ── Left panel ──────────────────────────────────────────────────────────── */

.il-left[b-eu5kqggzy0] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
}

.il-content[b-eu5kqggzy0] {
    max-width: 480px;
    width: 100%;
    animation: slideInUp 0.5s ease both;
}

/* Brand */
.il-brand[b-eu5kqggzy0] {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 2rem;
}

.il-brand-icon[b-eu5kqggzy0] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4F46E5, #0EA5E9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
}

.il-brand-name[b-eu5kqggzy0] {
    font-family: 'Outfit', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-main, #1E293B);
    letter-spacing: -0.5px;
}

/* Early Access badge */
.il-badge[b-eu5kqggzy0] {
    display: inline-block;
    background: linear-gradient(90deg, #4F46E5, #0EA5E9);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 0.25rem 0.875rem;
    margin-bottom: 1rem;
}

/* Headline */
.il-headline[b-eu5kqggzy0] {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--text-main, #1E293B);
    margin: 0 0 1rem;
    letter-spacing: -0.5px;
}

.il-sub[b-eu5kqggzy0] {
    color: var(--text-muted, #64748B);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 1.25rem;
}

.il-launch-row[b-eu5kqggzy0] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(79, 70, 229, 0.07);
    border: 1px solid rgba(79, 70, 229, 0.15);
    border-radius: 8px;
    padding: 0.4rem 0.875rem;
    font-size: 0.875rem;
    color: #4F46E5;
    margin-bottom: 2rem;
}

.il-cta[b-eu5kqggzy0] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    font-size: 1rem;
    padding: 0.875rem 1.75rem;
    margin-bottom: 1.25rem;
}

.il-fine[b-eu5kqggzy0] {
    font-size: 0.8rem;
    color: var(--text-muted, #64748B);
    line-height: 1.5;
    margin: 0;
}

/* ── Right gradient panel ─────────────────────────────────────────────────── */

.il-right[b-eu5kqggzy0] {
    width: 44%;
    background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.il-hero-content[b-eu5kqggzy0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.il-confetti-icon[b-eu5kqggzy0] {
    font-size: 5rem;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.18));
    animation: heroFloat 3.5s ease-in-out infinite;
}

.il-rings[b-eu5kqggzy0] {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.il-ring[b-eu5kqggzy0] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.12);
}

.il-ring--1[b-eu5kqggzy0] { width: 260px; height: 260px; }
.il-ring--2[b-eu5kqggzy0] { width: 420px; height: 420px; }
.il-ring--3[b-eu5kqggzy0] { width: 580px; height: 580px; }

.il-hero-tagline[b-eu5kqggzy0] {
    color: rgba(255,255,255,0.9);
    font-family: 'Outfit', sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
    text-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .il-page[b-eu5kqggzy0] { flex-direction: column; }

    .il-right[b-eu5kqggzy0] {
        width: 100%;
        min-height: 200px;
        order: -1;
    }

    .il-confetti-icon[b-eu5kqggzy0] { font-size: 3.5rem; }
    .il-hero-tagline[b-eu5kqggzy0]  { font-size: 1.1rem; }
    .il-headline[b-eu5kqggzy0]      { font-size: 2rem; }
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ── Page container ───────────────────────────────────────────────────────── */
.login-page[b-oku7cgsxpk] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #EEF2FF 0%, #E0E7FF 40%, #F0F9FF 100%);
    padding: 3.5rem 1rem 1.5rem;
    box-sizing: border-box;
}

/* Wrapper adds top-padding so the binding bar (absolute) has room */
.login-wrap[b-oku7cgsxpk] {
    position: relative;
    width: 100%;
    max-width: 900px;
    padding-top: 36px;
}

/* ── Spiral binding bar ───────────────────────────────────────────────────── */
.cal-binding[b-oku7cgsxpk] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 36px;
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
    border-radius: 16px 16px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    z-index: 10;
}

.cal-ring[b-oku7cgsxpk] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #334155;
    border: 3px solid #475569;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .45), 0 1px 2px rgba(255, 255, 255, .08);
    position: relative;
    flex-shrink: 0;
}

.cal-ring[b-oku7cgsxpk]::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #64748B, #1E293B);
}

/* ── Main card ────────────────────────────────────────────────────────────── */
.login-card[b-oku7cgsxpk] {
    display: flex;
    width: 100%;
    height: 560px;
    border-radius: 0 0 24px 24px;
    overflow: hidden;
    box-shadow:
        0 2px 0 #0F172A,
        0 28px 72px rgba(79, 70, 229, .20),
        0 6px 24px rgba(0, 0, 0, .10);
}

/* ── Left panel ───────────────────────────────────────────────────────────── */
.login-left[b-oku7cgsxpk] {
    flex: 0 0 420px;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2.75rem 2.5rem;
    position: relative;
    overflow: hidden;
}

/* Faint ruled-paper lines in the background */
.login-left[b-oku7cgsxpk]::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 47px,
        rgba(79, 70, 229, 0.055) 48px
    );
    pointer-events: none;
}

/* ── Red date corner tab ──────────────────────────────────────────────────── */
.cal-date-tab[b-oku7cgsxpk] {
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(160deg, #EF4444, #B91C1C);
    color: white;
    padding: 0.7rem 1.1rem 0.85rem 1.4rem;
    border-radius: 0 0 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    box-shadow: -3px 3px 16px rgba(239, 68, 68, .35);
    z-index: 2;
}

.cal-dt-day[b-oku7cgsxpk] {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
}

.cal-dt-mon[b-oku7cgsxpk] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .85;
    margin-top: 2px;
}

/* ── Brand ────────────────────────────────────────────────────────────────── */
.login-brand[b-oku7cgsxpk] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 1.75rem;
    position: relative;
    z-index: 1;
}

.login-brand-icon[b-oku7cgsxpk] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #4F46E5, #0EA5E9);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    box-shadow: 0 4px 14px rgba(79, 70, 229, .40);
}

.login-brand-name[b-oku7cgsxpk] {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    color: #1E293B;
    letter-spacing: -.4px;
}

/* ── Heading ──────────────────────────────────────────────────────────────── */
.login-title[b-oku7cgsxpk] {
    font-family: 'Outfit', sans-serif;
    font-size: 2rem;
    font-weight: 800;
    color: #1E293B;
    line-height: 1.15;
    margin: 0 0 .35rem;
    position: relative;
    z-index: 1;
}

.login-subtitle[b-oku7cgsxpk] {
    color: #64748B;
    font-size: .93rem;
    margin: 0 0 1.75rem;
    position: relative;
    z-index: 1;
}

/* ── Sign-in buttons ──────────────────────────────────────────────────────── */
.login-form-row[b-oku7cgsxpk] {
    margin-bottom: .8rem;
}

.login-btn[b-oku7cgsxpk] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.2rem;
    border-radius: 14px;
    border: 1.5px solid #E2E8F0;
    background: white;
    font-size: .92rem;
    font-weight: 600;
    color: #1E293B;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .06);
    transition: border-color .18s, box-shadow .18s, transform .18s;
    position: relative;
    z-index: 1;
    font-family: 'Inter', system-ui, sans-serif;
    text-align: left;
}

.login-btn:hover[b-oku7cgsxpk] {
    border-color: #4F46E5;
    box-shadow: 0 4px 18px rgba(79, 70, 229, .16);
    transform: translateY(-1px);
}

.login-btn-icon[b-oku7cgsxpk] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.login-btn-icon-fa[b-oku7cgsxpk] {
    font-size: 1.2rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* ── Terms ────────────────────────────────────────────────────────────────── */
.login-terms[b-oku7cgsxpk] {
    font-size: .71rem;
    color: #94A3B8;
    text-align: center;
    margin-top: 1.25rem;
    position: relative;
    z-index: 1;
}

/* ── Right panel ──────────────────────────────────────────────────────────── */
.login-right[b-oku7cgsxpk] {
    flex: 1;
    background: linear-gradient(160deg, #4338CA 0%, #2563EB 55%, #0284C7 100%);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.login-right[b-oku7cgsxpk]::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    bottom: -150px;
    right: -130px;
    pointer-events: none;
}

.login-right[b-oku7cgsxpk]::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    top: 20px;
    right: -40px;
    pointer-events: none;
}

/* Month header */
.cal-month-bar[b-oku7cgsxpk] {
    padding: 1.6rem 1.8rem 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.cal-month-label[b-oku7cgsxpk] {
    font-family: 'Outfit', sans-serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: white;
}

.cal-year-label[b-oku7cgsxpk] {
    font-size: .95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .6);
    margin-left: .5rem;
}

.cal-header-icon[b-oku7cgsxpk] {
    color: rgba(255, 255, 255, .25);
    font-size: 1.4rem;
}

/* Calendar grid */
.cal-grid-area[b-oku7cgsxpk] {
    padding: 0 1.8rem 1rem;
    position: relative;
    z-index: 1;
}

.cal-weekdays[b-oku7cgsxpk] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-bottom: 5px;
}

.cal-weekdays span[b-oku7cgsxpk] {
    text-align: center;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .07em;
    color: rgba(255, 255, 255, .45);
}

.cal-days-grid[b-oku7cgsxpk] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.cal-day[b-oku7cgsxpk] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .72);
    border-radius: 8px;
}

.cal-day.is-dim[b-oku7cgsxpk] { color: rgba(255, 255, 255, .22); }

.cal-day.is-busy[b-oku7cgsxpk] { position: relative; }

.cal-day.is-busy[b-oku7cgsxpk]::after {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .65);
}

.cal-day.is-today[b-oku7cgsxpk] {
    background: white;
    color: #4338CA;
    font-weight: 800;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .25);
}

/* Tagline */
.login-tagline[b-oku7cgsxpk] {
    margin-top: auto;
    padding: 1.25rem 1.8rem 2rem;
    position: relative;
    z-index: 1;
}

.cal-tagline-text[b-oku7cgsxpk] {
    font-family: 'Outfit', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: white;
    line-height: 1.4;
}

.cal-tagline-sub[b-oku7cgsxpk] {
    font-size: .76rem;
    color: rgba(255, 255, 255, .5);
    display: block;
    margin-top: .3rem;
}

/* ── Responsive (MUST stay in scoped CSS — higher specificity than app.css) ─ */
@media (max-width: 768px) {
    .login-page[b-oku7cgsxpk] {
        padding: 0;
        align-items: flex-start;
        background: white;
    }

    .login-wrap[b-oku7cgsxpk] {
        padding-top: 0;
        max-width: 100%;
    }

    .cal-binding[b-oku7cgsxpk] {
        display: none;
    }

    .login-card[b-oku7cgsxpk] {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }

    .login-left[b-oku7cgsxpk] {
        flex: none;
        padding: 2rem 1.5rem;
        justify-content: flex-start;
        padding-top: 3rem;
    }

    .login-right[b-oku7cgsxpk] {
        display: none;
    }
}
/* /Components/Pages/NewAppointment.razor.rz.scp.css */
/* ── Page wrapper ─────────────────────────────────────────────────────── */
.na-page[b-vmeb91io1g] {
    max-width: 560px;
    margin: 2.5rem auto;
    padding: 0 1rem;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.na-header[b-vmeb91io1g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.na-header-icon[b-vmeb91io1g] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #4F46E5, #0EA5E9);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.na-title[b-vmeb91io1g] {
    font-family: 'Outfit', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-main, #1E293B);
    margin: 0;
    line-height: 1.2;
}

.na-subtitle[b-vmeb91io1g] {
    font-size: 0.85rem;
    color: var(--text-muted, #64748B);
    margin: 0.2rem 0 0;
}

/* ── Card ─────────────────────────────────────────────────────────────── */
.na-card[b-vmeb91io1g] {
    padding: 2rem;
}

/* ── Field ────────────────────────────────────────────────────────────── */
.na-field[b-vmeb91io1g] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
}

.na-label[b-vmeb91io1g] {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.na-optional[b-vmeb91io1g] {
    font-weight: 400;
    color: var(--text-muted, #64748B);
    font-size: 0.75rem;
}

/* ── Inputs ───────────────────────────────────────────────────────────── */
/* ::deep is required for InputText / InputDate — they are Blazor child     */
/* components whose rendered <input> doesn't receive the parent scope attr. */
[b-vmeb91io1g] .na-input {
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    padding: 0.65rem 0.875rem;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    color: var(--text-main, #1E293B);
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

[b-vmeb91io1g] .na-input:focus {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Phone field with prefix icon */
.na-input-icon-wrap[b-vmeb91io1g] {
    position: relative;
}

.na-input-prefix[b-vmeb91io1g] {
    position: absolute;
    left: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #64748B);
    font-size: 0.8rem;
    pointer-events: none;
}

[b-vmeb91io1g] .na-input--prefixed {
    padding-left: 2.2rem;
}

/* ── Date + Time row ──────────────────────────────────────────────────── */
.na-date-row[b-vmeb91io1g] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.na-date-row .na-field[b-vmeb91io1g] {
    margin-bottom: 0;
}

/* ── Submit button ────────────────────────────────────────────────────── */
.na-submit-btn[b-vmeb91io1g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.8rem 1.5rem;
    margin-top: 0.25rem;
    background: var(--primary-color, #4F46E5);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    box-shadow: 0 2px 6px rgba(79, 70, 229, 0.2);
}

.na-submit-btn:hover:not(:disabled)[b-vmeb91io1g] {
    background: var(--primary-hover, #4338CA);
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    transform: translateY(-1px);
}

.na-submit-btn:disabled[b-vmeb91io1g] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Feedback messages ────────────────────────────────────────────────── */
.na-feedback[b-vmeb91io1g] {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    font-size: 0.875rem;
    line-height: 1.45;
}

.na-feedback--success[b-vmeb91io1g] {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    color: #166534;
}

.na-feedback--error[b-vmeb91io1g] {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #DC2626;
}

/* ── Practitioner availability feedback ──────────────────────────────── */
.na-avail-spinner[b-vmeb91io1g] {
    font-size: 0.72rem;
    color: #94A3B8;
    font-weight: 500;
    margin-left: 0.2rem;
}

.na-avail-ok[b-vmeb91io1g] {
    font-size: 0.72rem;
    color: #16A34A;
    font-weight: 600;
    margin-left: 0.2rem;
}

.na-avail-error[b-vmeb91io1g] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    color: #DC2626;
    font-weight: 500;
    line-height: 1.4;
}

[b-vmeb91io1g] .na-input--invalid {
    border-color: #FCA5A5 !important;
    background-color: #FFF5F5;
}

[b-vmeb91io1g] .na-input--invalid:focus {
    border-color: #EF4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* ── 24-hour time picker ─────────────────────────────────────────────── */
.na-time-select[b-vmeb91io1g] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: #ffffff;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    padding: 0.55rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.na-time-select:focus-within[b-vmeb91io1g] {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.na-time-part[b-vmeb91io1g] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 0.1rem;
}

.na-time-colon[b-vmeb91io1g] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted, #64748B);
    line-height: 1;
    margin: 0 1px;
    user-select: none;
}

/* ── Validation summary ───────────────────────────────────────────────── */
[b-vmeb91io1g] .na-validation-summary {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-size: 0.825rem;
    color: #DC2626;
    margin-bottom: 1.25rem;
}

/* ── Contact autocomplete ─────────────────────────────────────────────── */
.na-contact-search-field[b-vmeb91io1g] {
    position: relative;
}

.na-contact-search-wrap[b-vmeb91io1g] {
    position: relative;
}

.na-contact-spinner[b-vmeb91io1g] {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #64748B);
    font-size: 0.8rem;
    pointer-events: none;
}

.na-contact-dropdown[b-vmeb91io1g] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--card-bg, #fff);
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    z-index: 200;
    overflow: hidden;
}

.na-contact-option[b-vmeb91io1g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    cursor: pointer;
    transition: background 0.12s ease;
}

.na-contact-option:hover[b-vmeb91io1g] {
    background: #EEF2FF;
}

.na-contact-option + .na-contact-option[b-vmeb91io1g] {
    border-top: 1px solid #F1F5F9;
}

.na-contact-option-name[b-vmeb91io1g] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.na-contact-option-phone[b-vmeb91io1g] {
    font-size: 0.775rem;
    color: var(--text-muted, #64748B);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Global profile badge — shown next to the contact name in the dropdown */
.na-global-badge[b-vmeb91io1g] {
    display: inline-flex;
    align-items: center;
    margin-left: 0.35rem;
    font-size: 0.7rem;
    color: #4F46E5;
    opacity: 0.85;
    vertical-align: middle;
}

/* Selected contact badge */
.na-contact-badge[b-vmeb91io1g] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 0.35rem 0.75rem;
    background: #EEF2FF;
    border: 1px solid #C7D2FE;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #3730A3;
}

.na-contact-badge-clear[b-vmeb91io1g] {
    background: none;
    border: none;
    cursor: pointer;
    color: #6366F1;
    font-size: 0.75rem;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    margin-left: 0.15rem;
    transition: color 0.12s;
}
.na-contact-badge-clear:hover[b-vmeb91io1g] { color: #DC2626; }

/* OR divider */
.na-or-divider[b-vmeb91io1g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 1.25rem;
    color: var(--text-muted, #94A3B8);
    font-size: 0.78rem;
    font-weight: 500;
}

.na-or-divider[b-vmeb91io1g]::before,
.na-or-divider[b-vmeb91io1g]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color, #E2E8F0);
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .na-page[b-vmeb91io1g] {
        margin: 1.5rem auto;
        padding: 0 0.75rem;
    }

    .na-card[b-vmeb91io1g] {
        padding: 1.5rem 1.25rem;
    }

    .na-date-row[b-vmeb91io1g] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .na-date-row .na-field[b-vmeb91io1g] {
        margin-bottom: 1.25rem;
    }
}

/* ── Notes textarea ───────────────────────────────────────────────────── */
[b-vmeb91io1g] .na-textarea {
    resize: vertical;
    min-height: 72px;
    line-height: 1.5;
}

/* ── Split phone input (prefix badge + national number) ───────────────── */
.na-phone-wrap[b-vmeb91io1g] {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.na-phone-wrap:focus-within[b-vmeb91io1g] {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Read-only prefix badge */
.na-phone-prefix[b-vmeb91io1g] {
    display: flex;
    align-items: center;
    padding: 0 0.8rem;
    background: #F1F5F9;
    border-right: 1.5px solid #E2E8F0;
    font-size: 0.875rem;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
    color: #4F46E5;
    white-space: nowrap;
    user-select: none;
    letter-spacing: 0.01em;
    cursor: default;
}

/* Editable national-number part */
.na-phone-national[b-vmeb91io1g] {
    flex: 1;
    border: none;
    outline: none;
    padding: 0.65rem 0.875rem;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    color: var(--text-main, #1E293B);
    background: transparent;
    width: 100%;
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
}

.na-phone-national[b-vmeb91io1g]::placeholder {
    color: #CBD5E1;
    font-weight: 400;
}
/* /Components/Pages/OnboardingIntake.razor.rz.scp.css */
/* ── Page ─────────────────────────────────────────────────────────────────── */
.ob-page[b-bt4dxoer9e] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tenant-bg, #F9FAFB);
    padding: 1.5rem;
    font-family: var(--tenant-font, Inter, system-ui, sans-serif);
}

/* ── Card ────────────────────────────────────────────────────────────────── */
.ob-card[b-bt4dxoer9e] {
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.10);
    width: 100%;
    max-width: 420px;
    overflow: hidden;
}

/* ── Header band ─────────────────────────────────────────────────────────── */
.ob-header[b-bt4dxoer9e] {
    padding: 1.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ob-header--primary[b-bt4dxoer9e] {
    background: var(--tenant-primary, #4F46E5);
}

.ob-header--success[b-bt4dxoer9e] {
    background: linear-gradient(135deg, #10b981, #059669);
}

.ob-header-icon[b-bt4dxoer9e] {
    font-size: 2rem;
    color: #fff;
}

.ob-header-brand[b-bt4dxoer9e] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.02em;
}

.ob-header-logo[b-bt4dxoer9e] {
    height: 48px;
    max-width: 200px;
    object-fit: contain;
}

/* ── Body ────────────────────────────────────────────────────────────────── */
.ob-body[b-bt4dxoer9e] {
    padding: 1.75rem 1.5rem 2rem;
}

.ob-title[b-bt4dxoer9e] {
    font-size: 1.45rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.35rem;
}

.ob-subtitle[b-bt4dxoer9e] {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}

/* ── Form fields ─────────────────────────────────────────────────────────── */
.ob-field[b-bt4dxoer9e] {
    margin-bottom: 1rem;
}

.ob-label[b-bt4dxoer9e] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.35rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ob-optional[b-bt4dxoer9e] {
    font-weight: 400;
    color: #9ca3af;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
}

.ob-input[b-bt4dxoer9e] {
    width: 100%;
    padding: 0.7rem 1rem;
    border: 1.5px solid #d1d5db;
    border-radius: 0.6rem;
    font-size: 1rem;
    transition: border-color .2s, box-shadow .2s;
    background: #fff;
    box-sizing: border-box;
}

.ob-input:focus[b-bt4dxoer9e] {
    outline: none;
    border-color: var(--tenant-primary, #4F46E5);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tenant-primary, #4F46E5) 15%, transparent);
}

.ob-input--error[b-bt4dxoer9e] {
    border-color: #ef4444;
}

.ob-field-error[b-bt4dxoer9e] {
    font-size: 0.78rem;
    color: #ef4444;
    margin-top: 0.3rem;
}

/* ── Error banner ────────────────────────────────────────────────────────── */
.ob-error-msg[b-bt4dxoer9e] {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 0.5rem;
    padding: 0.65rem 0.9rem;
    color: #dc2626;
    font-size: 0.87rem;
    margin-bottom: 1rem;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ob-btn[b-bt4dxoer9e] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: filter .15s, transform .1s;
    line-height: 1;
}

.ob-btn:disabled[b-bt4dxoer9e] {
    opacity: 0.6;
    cursor: not-allowed;
}

.ob-btn:not(:disabled):active[b-bt4dxoer9e] {
    transform: scale(0.98);
}

.ob-btn--primary[b-bt4dxoer9e] {
    background: var(--tenant-primary, #4F46E5);
    color: #fff;
}

.ob-btn--primary:hover:not(:disabled)[b-bt4dxoer9e] {
    filter: brightness(1.08);
}

.ob-btn--full[b-bt4dxoer9e] {
    width: 100%;
    margin-top: 0.5rem;
}

/* ── Loading / state panels ──────────────────────────────────────────────── */
.ob-state-panel[b-bt4dxoer9e] {
    padding: 3rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    color: #6b7280;
}

.ob-spinner[b-bt4dxoer9e] {
    width: 36px;
    height: 36px;
    border: 3px solid #e5e7eb;
    border-top-color: var(--tenant-primary, #4F46E5);
    border-radius: 50%;
    animation: ob-spin-b-bt4dxoer9e 0.7s linear infinite;
}

/* ── Animations ──────────────────────────────────────────────────────────── */
@keyframes ob-spin-b-bt4dxoer9e {
    to { transform: rotate(360deg); }
}

.animate-fade-in[b-bt4dxoer9e] {
    animation: ob-fade-in-b-bt4dxoer9e 0.35s ease-out;
}

@keyframes ob-fade-in-b-bt4dxoer9e {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── GDPR Consent row ────────────────────────────────────────────────────── */
.ob-consent-row[b-bt4dxoer9e] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: border-color 0.2s;
}

.ob-consent-row--error[b-bt4dxoer9e] {
    border-color: rgba(239, 68, 68, 0.5);
    background: rgba(239, 68, 68, 0.05);
}

.ob-consent-label[b-bt4dxoer9e] {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    cursor: pointer;
}

.ob-consent-check[b-bt4dxoer9e] {
    margin-top: 0.2rem;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    accent-color: var(--tenant-primary, #4F46E5);
    cursor: pointer;
}

.ob-consent-text[b-bt4dxoer9e] {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-muted, #94a3b8);
}

/* ── Ghost / secondary button ────────────────────────────────────────────── */
.ob-btn--ghost[b-bt4dxoer9e] {
    background: transparent;
    color: var(--text-muted, #6b7280);
    border: 1.5px solid #e5e7eb;
    font-size: 0.85rem;
    padding: 0.45rem 0.9rem;
}

.ob-btn--ghost:hover:not(:disabled)[b-bt4dxoer9e] {
    background: #f9fafb;
    color: #374151;
}

/* ── OTP input — big, centred, numeric ───────────────────────────────────── */
.ob-input--otp[b-bt4dxoer9e] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.5em;
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid #d1d5db;
    color: #111827;
    caret-color: var(--tenant-primary, #4F46E5);
}

.ob-input--otp:focus[b-bt4dxoer9e] {
    border-color: var(--tenant-primary, #4F46E5);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--tenant-primary, #4F46E5) 15%, transparent);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .ob-page[b-bt4dxoer9e] { padding: 1rem; }
    .ob-body[b-bt4dxoer9e] { padding: 1.25rem 1rem 1.5rem; }
}
/* /Components/Pages/QrCodeManager.razor.rz.scp.css */
/* ── Print sheet: hidden on screen ──────────────────────────────────────── */
.qr-print-sheet[b-5anj7xbsi4] {
    display: none;
}

/* ── Print sheet: fills the page, hides everything else ─────────────────── */
@media print {
    /* Cover the entire page — sits above the Blazor shell */
    .qr-print-sheet[b-5anj7xbsi4] {
        display: flex !important;
        position: fixed;
        inset: 0;
        background: #ffffff;
        z-index: 99999;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10mm;
        padding: 18mm 20mm;
        box-sizing: border-box;
        text-align: center;
        font-family: Inter, system-ui, sans-serif;
    }

    .qp-logo[b-5anj7xbsi4] {
        height: 18mm;
        max-width: 80mm;
        object-fit: contain;
    }

    .qp-business-name[b-5anj7xbsi4] {
        font-size: 26pt;
        font-weight: 800;
        color: #111827;
        margin: 0;
        line-height: 1.2;
    }

    /* QR takes up roughly a third of an A4 page height */
    .qp-qr[b-5anj7xbsi4] {
        width: 65mm;
        height: 65mm;
    }

    .qp-qr svg[b-5anj7xbsi4] {
        width: 100%;
        height: 100%;
    }

    .qp-tagline[b-5anj7xbsi4] {
        font-size: 14pt;
        color: #374151;
        margin: 0;
        font-weight: 500;
    }

    .qp-url[b-5anj7xbsi4] {
        font-size: 9pt;
        color: #9ca3af;
        font-family: 'SFMono-Regular', Consolas, monospace;
        margin: 0;
        word-break: break-all;
    }

    /* Force a clean single-page print */
    @page {
        size: A4 portrait;
        margin: 0;
    }
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Screen styles                                                              */
/* ══════════════════════════════════════════════════════════════════════════ */

.qr-page[b-5anj7xbsi4] {
    padding: 2rem 0 3rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.qr-header[b-5anj7xbsi4] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

.qr-header-icon[b-5anj7xbsi4] {
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #4F46E5, #7c3aed);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
}

.qr-title[b-5anj7xbsi4] {
    font-size: 1.75rem;
    font-weight: 800;
    margin: 0 0 0.2rem;
}

.qr-subtitle[b-5anj7xbsi4] {
    color: #6b7280;
    font-size: 0.95rem;
    margin: 0;
    max-width: 55ch;
    line-height: 1.5;
}

/* ── Card body ───────────────────────────────────────────────────────────── */
.qr-body[b-5anj7xbsi4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2.5rem;
    max-width: 520px;
}

/* ── QR display ──────────────────────────────────────────────────────────── */
.qr-display[b-5anj7xbsi4] {
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    box-sizing: border-box;
}

.qr-display svg[b-5anj7xbsi4] {
    width: 100%;
    height: 100%;
}

.qr-placeholder[b-5anj7xbsi4] {
    font-size: 5rem;
    color: #d1d5db;
}

/* ── URL row ─────────────────────────────────────────────────────────────── */
.qr-url-row[b-5anj7xbsi4] {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.qr-url-label[b-5anj7xbsi4] {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.qr-url-box[b-5anj7xbsi4] {
    display: flex;
    align-items: center;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 0.6rem;
    padding: 0.55rem 0.75rem;
    gap: 0.5rem;
}

.qr-url-text[b-5anj7xbsi4] {
    flex: 1;
    font-size: 0.88rem;
    color: #111827;
    word-break: break-all;
    font-family: 'SFMono-Regular', Consolas, monospace;
}

.qr-copy-btn[b-5anj7xbsi4] {
    background: none;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 1rem;
    padding: 0 0.25rem;
    transition: color .15s;
    flex-shrink: 0;
}

.qr-copy-btn:hover[b-5anj7xbsi4] {
    color: #4F46E5;
}

/* ── Action buttons ──────────────────────────────────────────────────────── */
.qr-actions[b-5anj7xbsi4] {
    width: 100%;
    display: flex;
    gap: 0.75rem;
}

.qr-actions .action-btn[b-5anj7xbsi4],
.qr-actions a.action-btn[b-5anj7xbsi4] {
    flex: 1;
    justify-content: center;
    text-decoration: none;
}

.action-btn--secondary[b-5anj7xbsi4] {
    background: #f3f4f6;
    color: #374151;
    border: 1.5px solid #e5e7eb;
}

.action-btn--secondary:hover[b-5anj7xbsi4] {
    background: #e5e7eb;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .qr-body[b-5anj7xbsi4] {
        padding: 1.5rem 1rem;
    }

    .qr-display[b-5anj7xbsi4] {
        width: 240px;
        height: 240px;
    }

    .qr-actions[b-5anj7xbsi4] {
        flex-direction: column;
    }
}
/* /Components/Pages/RosterManagement.razor.rz.scp.css */
/* ── Input ────────────────────────────────────────────────────────────── */
.glass-input[b-od43bbekkc] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.9rem;
}

.glass-input:focus[b-od43bbekkc] {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* Make the add-practitioner row a proper flex row */
.rm-add-row[b-od43bbekkc] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.rm-add-row .glass-input[b-od43bbekkc] {
    flex: 1;
    min-width: 0;
    border-radius: 8px;
}

.rm-add-row .rm-add-btn[b-od43bbekkc] {
    flex-shrink: 0;
    padding: 0.5rem 0.9rem;
    border: none;
    border-radius: 8px;
    background: var(--primary-color);
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: filter 0.15s;
    line-height: 1;
}

.rm-add-row .rm-add-btn:hover[b-od43bbekkc] { filter: brightness(0.9); }

/* ── Practitioners list ───────────────────────────────────────────────── */
.practitioner-item[b-od43bbekkc] {
    padding: 0.875rem 1rem;
    border-radius: 10px;
    background: var(--card-bg);
    margin-bottom: 0.5rem;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.practitioner-item:hover[b-od43bbekkc] {
    border-color: rgba(79, 70, 229, 0.3);
    box-shadow: var(--shadow-sm);
}

.practitioner-item.active[b-od43bbekkc] {
    background: rgba(79, 70, 229, 0.04);
    border-color: rgba(79, 70, 229, 0.4);
}

/* ── Delete button ────────────────────────────────────────────────────── */
.delete-btn[b-od43bbekkc] {
    background: rgba(239, 68, 68, 0.07);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--danger-color);
    border-radius: 8px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-btn:hover[b-od43bbekkc] {
    background: rgba(239, 68, 68, 0.14);
    border-color: var(--danger-color);
}

/* ── Day rows ─────────────────────────────────────────────────────────── */
.day-row[b-od43bbekkc] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}
.day-row:last-child[b-od43bbekkc] {
    border-bottom: none;
}

.glass-checkbox[b-od43bbekkc] {
    cursor: pointer;
    display: flex;
    align-items: center;
    user-select: none;
}

.glass-checkbox input[b-od43bbekkc] {
    margin-right: 0.5rem;
    accent-color: var(--primary-color);
}

/* ── 24-hour select picker ───────────────────────────────────────────── */
.sc-time-select[b-od43bbekkc] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: var(--card-bg, #fff);
    border: 1.5px solid var(--border-color, #E2E8F0);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sc-time-select:focus-within[b-od43bbekkc] {
    border-color: var(--primary-color, #4F46E5);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.sc-select[b-od43bbekkc] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 0.1rem;
}

.sc-time-colon[b-od43bbekkc] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted, #64748B);
    line-height: 1;
    margin: 0 1px;
}
/* /Components/Pages/ScheduleConfiguration.razor.rz.scp.css */
/* Page container */
.schedule-container[b-see1nr4fgb] {
    padding: 0.25rem 0;
}

/* Tabs */
.tabs-container[b-see1nr4fgb] {
    border-bottom: 2px solid var(--border-color);
    margin-bottom: 2rem;
    display: flex;
    flex-wrap: wrap;
}

.tab-btn[b-see1nr4fgb] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s ease;
}

.tab-btn:hover[b-see1nr4fgb] {
    color: var(--primary-color);
}

.tab-btn.active[b-see1nr4fgb] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

/* Day rows */
.day-row[b-see1nr4fgb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s ease;
}

.day-row:hover[b-see1nr4fgb] {
    background: var(--bg-main);
}

/* Form inputs */
.glass-input[b-see1nr4fgb] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    font-size: 0.9rem;
}

.glass-input:focus[b-see1nr4fgb] {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.glass-checkbox[b-see1nr4fgb] {
    cursor: pointer;
    display: flex;
    align-items: center;
    user-select: none;
}

.glass-checkbox input[b-see1nr4fgb] {
    margin-right: 0.5rem;
    accent-color: var(--primary-color);
}

/* Practitioners list */
.practitioner-item[b-see1nr4fgb] {
    padding: 0.875rem 1rem;
    border-radius: 10px;
    background: var(--card-bg);
    margin-bottom: 0.5rem;
    cursor: pointer;
    border: 1px solid var(--border-color);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.practitioner-item:hover[b-see1nr4fgb] {
    border-color: rgba(79, 70, 229, 0.3);
    box-shadow: var(--shadow-sm);
}

.practitioner-item.active[b-see1nr4fgb] {
    background: rgba(79, 70, 229, 0.04);
    border-color: rgba(79, 70, 229, 0.4);
}

/* Delete button */
.delete-btn[b-see1nr4fgb] {
    background: rgba(239, 68, 68, 0.07);
    border: 1px solid rgba(239, 68, 68, 0.2);
    color: var(--danger-color);
    border-radius: 8px;
    padding: 0.25rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.delete-btn:hover[b-see1nr4fgb] {
    background: rgba(239, 68, 68, 0.14);
    border-color: var(--danger-color);
}

/* ── Info banner ──────────────────────────────────────────────────────── */
.sc-info-banner[b-see1nr4fgb] {
    display: flex;
    gap: 1rem;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 12px;
    padding: 1.125rem 1.25rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}

.sc-info-icon[b-see1nr4fgb] {
    flex-shrink: 0;
    color: #3B82F6;
    font-size: 1.1rem;
    margin-top: 0.1rem;
}

.sc-info-body[b-see1nr4fgb] {
    flex: 1;
}

.sc-info-title[b-see1nr4fgb] {
    font-weight: 700;
    font-size: 0.875rem;
    color: #1E3A5F;
    margin: 0 0 0.35rem;
}

.sc-info-text[b-see1nr4fgb] {
    font-size: 0.825rem;
    color: #374151;
    margin: 0 0 0.6rem;
    line-height: 1.5;
}

.sc-info-list[b-see1nr4fgb] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.sc-info-list li[b-see1nr4fgb] {
    font-size: 0.8rem;
    color: #374151;
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.sc-info-list li .fas.fa-check[b-see1nr4fgb] { color: #16A34A; }
.sc-info-list li .fas.fa-times[b-see1nr4fgb] { color: #DC2626; }
.sc-info-list li .fas.fa-user-md[b-see1nr4fgb] { color: #4F46E5; }

/* ── Section title ────────────────────────────────────────────────────── */
.sc-section-title[b-see1nr4fgb] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Outfit', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main, #1E293B);
    margin: 0 0 1.5rem;
}

.sc-section-title .fas[b-see1nr4fgb] {
    color: #4F46E5;
}

.sc-open-count[b-see1nr4fgb] {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: #16A34A;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 20px;
    padding: 0.2rem 0.65rem;
    font-family: 'Inter', sans-serif;
}

/* ── Day rows ─────────────────────────────────────────────────────────── */
.sc-days-list[b-see1nr4fgb] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sc-day-row[b-see1nr4fgb] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    margin-bottom: 0.4rem;
    transition: background 0.15s ease;
    gap: 0.55rem;
}

/* Inner row: toggle + primary time window + add-slot button */
.sc-day-main-row[b-see1nr4fgb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* ── Split-session (extra slot) row ─────────────────────────────────── */
.sc-extra-slot-row[b-see1nr4fgb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* indent to sit under the time selects, past the day-toggle area */
    padding-left: 156px;
    animation: fadeIn-b-see1nr4fgb 0.2s ease-out;
}

.sc-extra-slot-label[b-see1nr4fgb] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94A3B8;
    min-width: 64px;
    text-align: right;
}

/* ── Add-slot button ─────────────────────────────────────────────────── */
.sc-add-slot-btn[b-see1nr4fgb] {
    background: transparent;
    border: 1.5px dashed #C7D2FE;
    border-radius: 8px;
    color: #4F46E5;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    padding: 0.28rem 0.7rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.sc-add-slot-btn:hover[b-see1nr4fgb] {
    background: rgba(79, 70, 229, 0.06);
    border-color: #4F46E5;
}

/* ── Remove-slot button ──────────────────────────────────────────────── */
.sc-remove-slot-btn[b-see1nr4fgb] {
    background: transparent;
    border: none;
    color: #94A3B8;
    font-size: 0.8rem;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    line-height: 1;
}

.sc-remove-slot-btn:hover[b-see1nr4fgb] {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.08);
}

.sc-day-row--open[b-see1nr4fgb] {
    background: #F8FAFF;
    border: 1px solid #E0E7FF;
}

.sc-day-row--open:hover[b-see1nr4fgb] {
    background: #EEF2FF;
    border-color: #C7D2FE;
}

.sc-day-row--closed[b-see1nr4fgb] {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    opacity: 0.7;
}

/* Toggle + day name */
.sc-day-toggle[b-see1nr4fgb] {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    user-select: none;
    min-width: 140px;
}

.sc-checkbox[b-see1nr4fgb] {
    display: none; /* hidden — we use the custom track below */
}

.sc-toggle-track[b-see1nr4fgb] {
    width: 36px;
    height: 20px;
    border-radius: 10px;
    background: #D1D5DB;
    flex-shrink: 0;
    position: relative;
    transition: background 0.2s ease;
}

.sc-toggle-track[b-see1nr4fgb]::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.sc-day-row--open .sc-toggle-track[b-see1nr4fgb] {
    background: #4F46E5;
}

.sc-day-row--open .sc-toggle-track[b-see1nr4fgb]::after {
    transform: translateX(16px);
}

.sc-day-name[b-see1nr4fgb] {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-main, #1E293B);
}

.sc-day-row--closed .sc-day-name[b-see1nr4fgb] {
    color: #9CA3AF;
}

/* Time range */
.sc-time-range[b-see1nr4fgb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sc-time-group[b-see1nr4fgb] {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
}

.sc-time-label[b-see1nr4fgb] {
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94A3B8;
}

.sc-time-input[b-see1nr4fgb] {
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.4rem 0.6rem;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    color: var(--text-main, #1E293B);
    background: #fff;
    width: 108px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.sc-time-input:focus[b-see1nr4fgb] {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

/* ── 24-hour select picker ───────────────────────────────────────────── */
.sc-time-select[b-see1nr4fgb] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    background: #fff;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sc-time-select:focus-within[b-see1nr4fgb] {
    border-color: #4F46E5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.sc-select[b-see1nr4fgb] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--text-main, #1E293B);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 0.1rem;
}

.sc-time-colon[b-see1nr4fgb] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--text-muted, #64748B);
    line-height: 1;
    margin: 0 1px;
}

.sc-time-sep[b-see1nr4fgb] {
    color: #94A3B8;
    font-size: 0.75rem;
    padding-top: 1.2rem; /* align with inputs, below labels */
}

.sc-closed-badge[b-see1nr4fgb] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #9CA3AF;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

/* Empty state */
.sc-empty-state[b-see1nr4fgb] {
    text-align: center;
    padding: 3rem 1rem;
    color: #94A3B8;
    font-size: 0.875rem;
}

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .sc-info-banner[b-see1nr4fgb] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .sc-day-row[b-see1nr4fgb] {
        gap: 0.75rem;
    }

    .sc-day-main-row[b-see1nr4fgb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    /* Remove desktop indent — everything is already stacked */
    .sc-extra-slot-row[b-see1nr4fgb] {
        padding-left: 0;
    }

    .sc-extra-slot-label[b-see1nr4fgb] {
        min-width: 0;
        text-align: left;
    }

    .sc-time-range[b-see1nr4fgb] {
        width: 100%;
    }

    .sc-time-input[b-see1nr4fgb] {
        width: 90px;
    }

    .sc-section-title[b-see1nr4fgb] {
        flex-wrap: wrap;
    }
}

/* ── Micro animation */
.micro-animation[b-see1nr4fgb] {
    animation: fadeIn-b-see1nr4fgb 0.4s ease-out;
}

@keyframes fadeIn-b-see1nr4fgb {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ── Booking Capacity card ───────────────────────────────────────────── */
.sc-capacity-card[b-see1nr4fgb] {
    margin-bottom: 1.25rem;
}

.sc-capacity-help[b-see1nr4fgb] {
    font-size: 0.82rem;
    color: var(--text-muted, #64748b);
    margin: -0.25rem 0 1rem;
    line-height: 1.5;
}

.sc-capacity-row[b-see1nr4fgb] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    align-items: flex-end;
}

.sc-capacity-field[b-see1nr4fgb] {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sc-capacity-label[b-see1nr4fgb] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sc-capacity-select-wrap[b-see1nr4fgb] {
    display: flex;
    align-items: center;
}

.sc-capacity-select[b-see1nr4fgb] {
    min-width: 120px;
}

.sc-capacity-number[b-see1nr4fgb] {
    width: 90px;
    text-align: center;
}

/* Auto-detected timezone badge */
.sc-tz-detected-badge[b-see1nr4fgb] {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.75rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    vertical-align: middle;
}
/* /Components/Pages/Statistics.razor.rz.scp.css */
/* ── Page shell ──────────────────────────────────────────────────────────── */
.stats-page[b-ujczqafkq8] {
    padding-bottom: 3rem;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.stats-header[b-ujczqafkq8] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 1.75rem;
}

.stats-header-icon[b-ujczqafkq8] {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.35rem;
    flex-shrink: 0;
}

.stats-title[b-ujczqafkq8] {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
}

.stats-subtitle[b-ujczqafkq8] {
    font-size: 0.85rem;
    color: #64748B;
    margin: 0.2rem 0 0;
}

/* ── Period selector ─────────────────────────────────────────────────────── */
.stats-period-bar[b-ujczqafkq8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.75rem;
}

.stats-period-btn[b-ujczqafkq8] {
    padding: 0.45rem 1rem;
    border: 1.5px solid #E2E8F0;
    border-radius: 999px;
    background: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.stats-period-btn:hover[b-ujczqafkq8]   { border-color: #4F46E5; color: #4F46E5; }
.stats-period-btn.active[b-ujczqafkq8]  { background: #4F46E5; border-color: #4F46E5; color: #fff; }

.stats-custom-range[b-ujczqafkq8] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.stats-date-input[b-ujczqafkq8] {
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    padding: 0.4rem 0.65rem;
    font-size: 0.82rem;
    color: #334155;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.stats-date-input:focus[b-ujczqafkq8] { border-color: #4F46E5; }

.stats-date-sep[b-ujczqafkq8] {
    color: #94A3B8;
    font-size: 0.9rem;
}

.stats-go-btn[b-ujczqafkq8] {
    padding: 0.4rem 1rem;
    background: #4F46E5;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s;
}

.stats-go-btn:hover[b-ujczqafkq8] { opacity: 0.88; }

/* ── Loading / empty states ──────────────────────────────────────────────── */
.stats-loading[b-ujczqafkq8],
.stats-empty[b-ujczqafkq8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    padding: 4rem 1rem;
    color: #94A3B8;
    font-size: 0.95rem;
}

/* ── KPI grid ────────────────────────────────────────────────────────────── */
.stats-kpi-grid[b-ujczqafkq8] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stats-kpi-card[b-ujczqafkq8] {
    background: #fff;
    border: 1px solid #E8EDF2;
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: transform 0.15s, box-shadow 0.15s;
}

.stats-kpi-card:hover[b-ujczqafkq8] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.stats-kpi-icon[b-ujczqafkq8] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    color: #fff;
}

.stats-kpi-icon--blue[b-ujczqafkq8]   { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.stats-kpi-icon--green[b-ujczqafkq8]  { background: linear-gradient(135deg, #10B981, #059669); }
.stats-kpi-icon--red[b-ujczqafkq8]    { background: linear-gradient(135deg, #EF4444, #DC2626); }
.stats-kpi-icon--amber[b-ujczqafkq8]  { background: linear-gradient(135deg, #F59E0B, #D97706); }

.stats-kpi-body[b-ujczqafkq8] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.stats-kpi-value[b-ujczqafkq8] {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1;
}

.stats-kpi-value small[b-ujczqafkq8] {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748B;
    margin-left: 1px;
}

.stats-kpi-value--muted[b-ujczqafkq8] { color: #94A3B8; }

.stats-kpi-label[b-ujczqafkq8] {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Chart rows ──────────────────────────────────────────────────────────── */
.stats-chart-row[b-ujczqafkq8] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.stats-chart-row--tables[b-ujczqafkq8] {
    grid-template-columns: 3fr 2fr;
}

.stats-chart-card[b-ujczqafkq8] {
    padding: 1.25rem 1.3rem 1.4rem;
}

.stats-chart-title[b-ujczqafkq8] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #334155;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Donut */
.stats-donut-wrap[b-ujczqafkq8] {
    max-width: 280px;
    margin: 0 auto;
}

/* Bar / line */
.stats-bar-wrap[b-ujczqafkq8] {
    position: relative;
    height: 220px;
}

/* ── Heatmap ─────────────────────────────────────────────────────────────── */
.stats-heatmap[b-ujczqafkq8] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
    margin-bottom: 0.5rem;
}

.stats-heatmap-cell[b-ujczqafkq8] {
    aspect-ratio: 1;
    background: #4F46E5;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: transform 0.1s;
}

.stats-heatmap-cell:hover[b-ujczqafkq8] { transform: scale(1.12); }

.stats-heatmap-cell:not(.has-data)[b-ujczqafkq8] { background: #E2E8F0; opacity: 1 !important; }

.stats-heatmap-hour[b-ujczqafkq8] {
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.stats-heatmap-cell:not(.has-data) .stats-heatmap-hour[b-ujczqafkq8] { color: #94A3B8; }

.stats-heatmap-count[b-ujczqafkq8] {
    font-size: 0.65rem;
    font-weight: 800;
    color: rgba(255,255,255,0.9);
    line-height: 1;
}

.stats-heatmap-legend[b-ujczqafkq8] {
    font-size: 0.72rem;
    color: #94A3B8;
    margin: 0;
    text-align: center;
}

/* ── No data placeholder ─────────────────────────────────────────────────── */
.stats-no-data[b-ujczqafkq8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2.5rem 1rem;
    color: #CBD5E1;
    font-size: 0.85rem;
}

.stats-no-data i[b-ujczqafkq8] { font-size: 1.8rem; }

/* ── Tables ──────────────────────────────────────────────────────────────── */
.stats-table-card[b-ujczqafkq8] { padding: 1.25rem 1.3rem 1.4rem; }

.stats-table[b-ujczqafkq8] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.stats-table th[b-ujczqafkq8] {
    font-size: 0.73rem;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0 0 0.6rem;
    border-bottom: 1.5px solid #F1F5F9;
}

.stats-table td[b-ujczqafkq8] {
    padding: 0.6rem 0 0.6rem;
    border-bottom: 1px solid #F8FAFC;
    color: #334155;
    vertical-align: middle;
}

.stats-table tbody tr:last-child td[b-ujczqafkq8] { border-bottom: none; }

.text-right[b-ujczqafkq8] { text-align: right; }

.stats-practitioner-name[b-ujczqafkq8] {
    font-weight: 600;
    color: #0F172A;
}

.stats-pill[b-ujczqafkq8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 0 6px;
    height: 20px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}

.stats-pill--green[b-ujczqafkq8] { background: #D1FAE5; color: #065F46; }
.stats-pill--red[b-ujczqafkq8]   { background: #FEE2E2; color: #991B1B; }

.stats-rate[b-ujczqafkq8] {
    font-size: 0.72rem;
    color: #94A3B8;
    margin-left: 4px;
}

.stats-star-val[b-ujczqafkq8] {
    color: #D97706;
    font-weight: 700;
    font-size: 0.82rem;
}

.stats-muted[b-ujczqafkq8] { color: #CBD5E1; }

/* ── Top contacts list ───────────────────────────────────────────────────── */
.stats-contact-list[b-ujczqafkq8] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.stats-contact-row[b-ujczqafkq8] {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #F8FAFC;
}

.stats-contact-row:last-child[b-ujczqafkq8] { border-bottom: none; }

.stats-contact-rank[b-ujczqafkq8] {
    font-size: 0.75rem;
    font-weight: 800;
    color: #CBD5E1;
    width: 22px;
    flex-shrink: 0;
}

.stats-contact-info[b-ujczqafkq8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.stats-contact-name[b-ujczqafkq8] {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-contact-phone[b-ujczqafkq8] {
    font-size: 0.72rem;
    color: #94A3B8;
}

.stats-contact-count[b-ujczqafkq8] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #4F46E5;
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .stats-kpi-grid[b-ujczqafkq8] { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .stats-chart-row[b-ujczqafkq8],
    .stats-chart-row--tables[b-ujczqafkq8] { grid-template-columns: 1fr; }
    .stats-kpi-grid[b-ujczqafkq8]           { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .stats-kpi-grid[b-ujczqafkq8]   { grid-template-columns: 1fr 1fr; }
    .stats-kpi-value[b-ujczqafkq8]  { font-size: 1.35rem; }
    .stats-heatmap[b-ujczqafkq8]    { grid-template-columns: repeat(6, 1fr); }
}
/* /Components/Pages/WaitlistClaim.razor.rz.scp.css */
/* Page container */
.waitlist-claim-container[b-07h2wviec4] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    padding: 2rem 1.5rem;
    font-family: 'Outfit', 'Inter', sans-serif;
}

/* Claim card — clean white */
.claim-card[b-07h2wviec4] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    padding: 3rem;
    max-width: 480px;
    width: 100%;
    color: var(--text-main);
}

/* Loading spinner */
.loading-spinner[b-07h2wviec4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

.spinner[b-07h2wviec4] {
    width: 48px;
    height: 48px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-07h2wviec4 0.9s linear infinite;
}

@keyframes spin-b-07h2wviec4 {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Appointment details card */
.appointment-details-card[b-07h2wviec4] {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    text-align: left;
}

.detail-row[b-07h2wviec4] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-07h2wviec4] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    font-weight: 600;
}

.detail-value[b-07h2wviec4] {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-main);
}

/* Confirmation box */
.confirmation-box[b-07h2wviec4] {
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: 14px;
    padding: 1.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.confirmed-item[b-07h2wviec4] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #059669;
}

.w-100[b-07h2wviec4] { width: 100%; }

/* Micro animation */
.micro-animation[b-07h2wviec4] {
    animation: cardEntrance-b-07h2wviec4 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes cardEntrance-b-07h2wviec4 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Glow animations */
.info-pulse[b-07h2wviec4] {
    animation: infoGlow-b-07h2wviec4 2.5s infinite alternate;
}

@keyframes infoGlow-b-07h2wviec4 {
    0%   { filter: drop-shadow(0 0 2px rgba(79, 70, 229, 0.2)); }
    100% { filter: drop-shadow(0 0 10px rgba(79, 70, 229, 0.5)); }
}

.icon-success-pulse[b-07h2wviec4] {
    animation: successGlow-b-07h2wviec4 2s infinite alternate;
}

@keyframes successGlow-b-07h2wviec4 {
    0%   { filter: drop-shadow(0 0 2px rgba(16, 185, 129, 0.2)); }
    100% { filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.6)); }
}

.animate-success[b-07h2wviec4] {
    animation: popSuccess-b-07h2wviec4 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes popSuccess-b-07h2wviec4 {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
/* /Components/Pages/WaitlistManager.razor.rz.scp.css */
/* ── Page ─────────────────────────────────────────────────────────────── */
.wl-page[b-c1kyxa80df] {
    padding: 2rem 0 4rem;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.wl-header[b-c1kyxa80df] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.75rem;
    flex-wrap: wrap;
}

.wl-header-icon[b-c1kyxa80df] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.wl-title[b-c1kyxa80df] {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.wl-subtitle[b-c1kyxa80df] {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
}

/* ── Body layout ──────────────────────────────────────────────────────── */
.wl-body[b-c1kyxa80df] {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 2rem;
    align-items: start;
}

@media (max-width: 960px) {
    .wl-body[b-c1kyxa80df] {
        grid-template-columns: 1fr;
    }
}

/* ── Shared section label ─────────────────────────────────────────────── */
.wl-section-label[b-c1kyxa80df] {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

/* ── Add card ─────────────────────────────────────────────────────────── */
.wl-add-card[b-c1kyxa80df] {
    padding: 1.75rem;
    margin-bottom: 1.25rem;
}

.wl-field[b-c1kyxa80df] {
    margin-bottom: 1rem;
}

.wl-field-row[b-c1kyxa80df] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

/* Prevent datetime-local intrinsic width from blowing out the grid cell */
.wl-field-row > .wl-field[b-c1kyxa80df] {
    min-width: 0;
}

/* Collapse to single column when the panel is too narrow */
@media (max-width: 500px) {
    .wl-field-row[b-c1kyxa80df] {
        grid-template-columns: 1fr;
    }
}

.wl-label[b-c1kyxa80df] {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.3rem;
}

.wl-required[b-c1kyxa80df] {
    color: #EF4444;
}

.wl-input[b-c1kyxa80df] {
    width: 100%;
    padding: 0.55rem 0.85rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-main);
    font-size: 0.9rem;
    transition: border-color 0.2s;
    outline: none;
    box-sizing: border-box;
}

.wl-input:focus[b-c1kyxa80df] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.wl-error-msg[b-c1kyxa80df] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    font-size: 0.82rem;
    color: #DC2626;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

.wl-add-btn[b-c1kyxa80df] {
    width: 100%;
    justify-content: center;
}

/* ── Info card ────────────────────────────────────────────────────────── */
.wl-info-card[b-c1kyxa80df] {
    padding: 1.5rem 1.75rem;
}

.wl-how-steps[b-c1kyxa80df] {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-bottom: 0.875rem;
}

.wl-step[b-c1kyxa80df] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.wl-step-num[b-c1kyxa80df] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wl-step-text[b-c1kyxa80df] {
    font-size: 0.85rem;
    color: var(--text-main);
    line-height: 1.4;
}

.wl-info-note[b-c1kyxa80df] {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    padding-top: 0.75rem;
}

/* ── List card ────────────────────────────────────────────────────────── */
.wl-list-card[b-c1kyxa80df] {
    padding: 1.5rem 1.75rem;
}

.wl-list-header[b-c1kyxa80df] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.wl-empty[b-c1kyxa80df] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 3rem 1rem;
    gap: 0.75rem;
    text-align: center;
    color: var(--text-muted);
}

.wl-empty-icon[b-c1kyxa80df] {
    font-size: 2.25rem;
    opacity: 0.35;
}

.wl-table-wrap[b-c1kyxa80df] {
    overflow-x: auto;
}

.wl-table[b-c1kyxa80df] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.wl-table thead th[b-c1kyxa80df] {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    padding: 0.5rem 0.75rem;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.07);
    white-space: nowrap;
}

.wl-table tbody tr[b-c1kyxa80df] {
    transition: background 0.1s;
}

.wl-table tbody tr:hover[b-c1kyxa80df] {
    background: rgba(79, 70, 229, 0.035);
}

.wl-table tbody td[b-c1kyxa80df] {
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    color: var(--text-main);
    vertical-align: middle;
}

.wl-name[b-c1kyxa80df] {
    font-weight: 600;
}

.wl-phone[b-c1kyxa80df] {
    font-family: monospace;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.wl-date-col[b-c1kyxa80df] {
    white-space: nowrap;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.wl-remove-btn[b-c1kyxa80df] {
    background: transparent;
    border: 1.5px solid #FECACA;
    color: #DC2626;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.75rem;
    transition: background 0.15s, border-color 0.15s;
}

.wl-remove-btn:hover[b-c1kyxa80df] {
    background: #FEF2F2;
    border-color: #DC2626;
}

/* ── Contact search ───────────────────────────────────────────────── */
.wl-optional[b-c1kyxa80df] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 0.35rem;
}

.wl-contact-search-field[b-c1kyxa80df] {
    position: relative;
}

.wl-contact-search-wrap[b-c1kyxa80df] {
    position: relative;
    display: flex;
    align-items: center;
}

.wl-search-prefix[b-c1kyxa80df] {
    position: absolute;
    left: 0.7rem;
    color: var(--text-muted);
    font-size: 0.82rem;
    pointer-events: none;
    z-index: 1;
}

.wl-input--prefixed[b-c1kyxa80df] {
    padding-left: 2.1rem;
}

.wl-search-spinner[b-c1kyxa80df] {
    position: absolute;
    right: 0.75rem;
    color: var(--primary-color);
    font-size: 0.82rem;
    pointer-events: none;
}

.wl-contact-dropdown[b-c1kyxa80df] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface-color, #ffffff);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 50;
    overflow: hidden;
    margin-top: 4px;
}

.wl-contact-option[b-c1kyxa80df] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.875rem;
    cursor: pointer;
    transition: background 0.12s;
    gap: 0.5rem;
}

.wl-contact-option:hover[b-c1kyxa80df] {
    background: rgba(79, 70, 229, 0.06);
}

.wl-contact-option + .wl-contact-option[b-c1kyxa80df] {
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.wl-contact-option-name[b-c1kyxa80df] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-main);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wl-global-badge[b-c1kyxa80df] {
    font-size: 0.7rem;
    color: var(--primary-color);
    opacity: 0.8;
}

.wl-contact-option-phone[b-c1kyxa80df] {
    font-size: 0.78rem;
    font-family: monospace;
    color: var(--text-muted);
    flex-shrink: 0;
}

.wl-contact-badge[b-c1kyxa80df] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(79, 70, 229, 0.07);
    border: 1px solid rgba(79, 70, 229, 0.2);
    border-radius: 8px;
    padding: 0.45rem 0.75rem;
    font-size: 0.82rem;
    color: var(--primary-color);
    margin-top: 0.5rem;
}

.wl-contact-badge span[b-c1kyxa80df] {
    flex: 1;
    font-weight: 600;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wl-contact-badge-clear[b-c1kyxa80df] {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.1rem 0.2rem;
    border-radius: 4px;
    transition: color 0.15s;
    flex-shrink: 0;
}

.wl-contact-badge-clear:hover[b-c1kyxa80df] { color: #DC2626; }

/* Or-divider */
.wl-or-divider[b-c1kyxa80df] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0 0.5rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.wl-or-divider[b-c1kyxa80df]::before,
.wl-or-divider[b-c1kyxa80df]::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}