/* /Components/Layout/LoginLayout.razor.rz.scp.css */
/* ==========================================================================
   LoginLayout — split brand-panel auth shell
   Left: indigo brand panel · Right: form content area
   ========================================================================== */

.auth-split[b-wu1vpqm4xg] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    background: var(--bg);
}

/* ── Brand panel ─────────────────────────────────────────────────────────── */
.auth-brand[b-wu1vpqm4xg] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12);
    color: var(--on-primary);
    background: linear-gradient(150deg, var(--primary-deep), var(--primary));
    overflow: hidden;
}

/* Subtle grid texture + corner glows layered over the gradient. */
.auth-brand[b-wu1vpqm4xg]::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60% 50% at 85% 10%, color-mix(in oklab, var(--on-primary) 14%, transparent), transparent 70%),
        radial-gradient(45% 45% at 10% 95%, color-mix(in oklab, var(--on-primary) 10%, transparent), transparent 70%),
        linear-gradient(color-mix(in oklab, var(--on-primary) 6%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklab, var(--on-primary) 6%, transparent) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
    pointer-events: none;
}

/* Decorative dashed route line — spans the panel behind the content. */
.brand-route[b-wu1vpqm4xg] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.auth-brand-inner[b-wu1vpqm4xg] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 30rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
}

.brand-lockup[b-wu1vpqm4xg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.brand-tile[b-wu1vpqm4xg] {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-lg);
    background: color-mix(in oklab, #fff 16%, transparent);
}

.brand-mark[b-wu1vpqm4xg] {
    font-size: 26px;
    line-height: 1;
    color: var(--on-primary);
}

.brand-name[b-wu1vpqm4xg] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
}

.brand-pitch[b-wu1vpqm4xg] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.brand-headline[b-wu1vpqm4xg] {
    margin: 0;
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: -0.02em;
    color: var(--on-primary);
}

.brand-lede[b-wu1vpqm4xg] {
    margin: 0;
    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
    color: var(--on-primary);
    opacity: 0.88;
}

.brand-features[b-wu1vpqm4xg] {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.brand-features li[b-wu1vpqm4xg] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-base);
    color: var(--on-primary);
    opacity: 0.95;
}

.feature-icon[b-wu1vpqm4xg] {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: var(--r-md);
    background: color-mix(in oklab, var(--on-primary) 14%, transparent);
    color: var(--on-primary);
}

.brand-foot[b-wu1vpqm4xg] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--on-primary);
    opacity: 0.7;
}

/* ── Content area ────────────────────────────────────────────────────────── */
.auth-content[b-wu1vpqm4xg] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-12) var(--space-8);
    background: var(--bg);
}

.auth-content-inner[b-wu1vpqm4xg] {
    width: 100%;
    max-width: 25rem;
}

/* ── Responsive: stack below ~880px, brand collapses to a slim header ─────── */
@media (max-width: 880px) {
    .auth-split[b-wu1vpqm4xg] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .auth-brand[b-wu1vpqm4xg] {
        padding: var(--space-6) var(--space-6) var(--space-8);
    }

    /* The route graphic is tuned for the tall portrait panel; hide it once the
       brand panel collapses to a slim header. */
    .brand-route[b-wu1vpqm4xg] {
        display: none;
    }

    .auth-brand-inner[b-wu1vpqm4xg] {
        max-width: 30rem;
        gap: var(--space-6);
    }

    /* On narrow screens lead with a compact logo above the form;
       hide the long-form pitch to keep the header slim. */
    .brand-headline[b-wu1vpqm4xg] {
        font-size: var(--font-size-2xl);
    }

    .brand-lede[b-wu1vpqm4xg],
    .brand-features[b-wu1vpqm4xg],
    .brand-foot[b-wu1vpqm4xg] {
        display: none;
    }

    .auth-content[b-wu1vpqm4xg] {
        padding: var(--space-8) var(--space-5) var(--space-10);
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .auth-brand[b-wu1vpqm4xg] {
        padding: var(--space-5);
    }

    .brand-name[b-wu1vpqm4xg] {
        font-size: var(--font-size-lg);
    }

    .brand-mark[b-wu1vpqm4xg] {
        font-size: 32px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   Main Layout — Customer Portal shell (new IA, Task 17)
   Sidebar (fixed, ≥1024px) + sticky blurred top header + main content.
   ========================================================================== */

.app-layout[b-411svoove5] {
    --sidebar-width: 252px;
    display: flex;
    min-height: 100vh;
    background-color: var(--bg);
}

/* --------------------------------------------------------------------------
   Sidebar — fixed full-height, scrollable, shown ≥1024px
   -------------------------------------------------------------------------- */
.sidebar[b-411svoove5] {
    width: var(--sidebar-width);
    background: var(--surface);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    z-index: var(--z-fixed);
}

/* --------------------------------------------------------------------------
   Main content wrapper — offset by the sidebar width on desktop
   -------------------------------------------------------------------------- */
.main-wrapper[b-411svoove5] {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Sticky top header — translucent + blurred
   -------------------------------------------------------------------------- */
.top-header[b-411svoove5] {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--surface);
    background: color-mix(in oklab, var(--surface) 85%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
}

.header-content[b-411svoove5] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    max-width: 1400px;
    margin: 0 auto;
}

/* Search field — presentational only (no backend wiring) */
.header-search[b-411svoove5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;         /* allow shrink below content size on narrow screens */
    max-width: 420px;
    padding: 0 var(--space-3);
    height: 38px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink-3);
    transition: border-color .13s, box-shadow .13s;
}

.header-search:focus-within[b-411svoove5] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint);
}

.header-search .material-icons[b-411svoove5] {
    font-size: 20px;
    color: var(--ink-3);
}

.header-search-input[b-411svoove5] {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    outline: none;
    font-size: var(--font-size-sm);
    color: var(--ink);
}

.header-search-input[b-411svoove5]::placeholder {
    color: var(--ink-3);
}

.header-right[b-411svoove5] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-left: auto;
    flex: none;           /* never shrink — action buttons always fully visible */
}

/* The notifications bell + its unread dot now live in NotificationsPopover,
   which owns the .header-icon-btn / .notification-dot styles in its own scoped
   CSS. MainLayout's header no longer renders an icon-button directly, so those
   rules were removed here to avoid dead scoped CSS. */

.header-avatar[b-411svoove5] {
    cursor: default;
}

/* --------------------------------------------------------------------------
   Main content area
   -------------------------------------------------------------------------- */
.main-content[b-411svoove5] {
    flex: 1;
    padding: var(--space-6);
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   Blazor error UI
   -------------------------------------------------------------------------- */
#blazor-error-ui[b-411svoove5] {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-4);
    background: var(--err);
    color: var(--on-primary);
    text-align: center;
    z-index: var(--z-modal);
}

#blazor-error-ui .reload[b-411svoove5] {
    color: var(--on-primary);
    text-decoration: underline;
    margin: 0 var(--space-2);
}

#blazor-error-ui .dismiss[b-411svoove5] {
    cursor: pointer;
    margin-left: var(--space-4);
}

/* --------------------------------------------------------------------------
   Responsive — below 1024px the desktop sidebar is hidden.
   Mobile navigation is handled by the tab bar added in Task 18.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .sidebar[b-411svoove5] {
        display: none;
    }

    .main-wrapper[b-411svoove5] {
        margin-left: 0;
    }

    .header-content[b-411svoove5] {
        padding: var(--space-3) var(--space-4);
    }

    .main-content[b-411svoove5] {
        padding: var(--space-4);
        /* Clear the fixed bottom tab bar (Task 18) + iOS safe area. */
        padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}

/* Tablet / large-phone (521–640px): let search shrink, tighten spacing */
@media (max-width: 640px) {
    .header-content[b-411svoove5] {
        gap: var(--space-2);
        padding: var(--space-3) var(--space-3);
    }

    .header-search[b-411svoove5] {
        /* flex: 1 + min-width: 0 (set above) means it fills remaining space
           after the flex-none action cluster; max-width cap lifted so it
           doesn't wastefully constrain on mid-size phones. */
        max-width: none;
    }

    .header-right[b-411svoove5] {
        gap: var(--space-2);
    }
}

/* Very narrow screens (≤480px): hide search so 3×38px action buttons always
   fit on the same row without clipping. Math: 3×38 + 2×8(gap) + 2×12(pad)
   = 114 + 16 + 24 = 154px — well within 360px. */
@media (max-width: 480px) {
    .header-search[b-411svoove5] {
        display: none;
    }
}
/* /Components/Layout/MobileTabBar.razor.rz.scp.css */
/* ==========================================================================
   Mobile bottom tab bar (Task 18)
   Fixed bottom bar with a raised centre Book FAB. Shown ≤1023px only —
   the desktop sidebar owns ≥1024px, so the two never coexist.
   ========================================================================== */

.tabbar[b-d03mz03eg3] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-sticky, 1020);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: var(--surface);
    background: color-mix(in oklab, var(--surface) 88%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--line);
}

.tab-item[b-d03mz03eg3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    border: 0;
    background: transparent;
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-3);
    cursor: pointer;
    text-decoration: none;
    padding: 2px 0;
}

.tab-item .material-icons[b-d03mz03eg3] {
    font-size: 22px;
}

.tab-item.active[b-d03mz03eg3] {
    color: var(--primary-ink);
}

[data-theme="dark"] .tab-item.active[b-d03mz03eg3] {
    color: var(--primary);
}

.tab-item:focus-visible[b-d03mz03eg3] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
    border-radius: 8px;
}

.tab-fab[b-d03mz03eg3] {
    justify-self: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 0;
    background: var(--primary);
    color: var(--on-primary);
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow: var(--shadow-primary);
    margin-top: -22px;
    text-decoration: none;
}

.tab-fab .material-icons[b-d03mz03eg3] {
    font-size: 24px;
}

.tab-fab:focus-visible[b-d03mz03eg3] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* show only on mobile/tablet (sidebar territory is desktop) */
@media (min-width: 1024px) {
    .tabbar[b-d03mz03eg3] {
        display: none;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ==========================================================================
   Navigation Menu — Customer Portal sidebar (new IA, Task 17)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand lockup
   -------------------------------------------------------------------------- */
.nav-brand-wrap[b-54gfducplj] {
    padding: var(--space-5) var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--line);
}

.nav-brand[b-54gfducplj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--ink);
}

.nav-brand:hover[b-54gfducplj] {
    text-decoration: none;
    color: var(--ink);
}

.nav-brand-icon[b-54gfducplj] {
    width: 38px;
    height: 38px;
    background: linear-gradient(140deg, var(--primary), var(--primary-deep));
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--on-primary);
    flex-shrink: 0;
}

.nav-brand-icon .material-icons[b-54gfducplj] {
    font-size: 22px;
}

.nav-brand-text[b-54gfducplj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nav-brand-name[b-54gfducplj] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    line-height: 1.2;
}

.nav-brand-tagline[b-54gfducplj] {
    font-size: var(--font-size-xs);
    color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Body / layout — primary nav grows, foot pins to bottom
   -------------------------------------------------------------------------- */
.nav-body[b-54gfducplj] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.nav-primary[b-54gfducplj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4) var(--space-3) var(--space-2);
    overflow-y: auto;
    flex: 1;
}

.nav-spacer[b-54gfducplj] {
    height: var(--space-4);
}

/* --------------------------------------------------------------------------
   Book CTA — primary button look
   -------------------------------------------------------------------------- */
.nav-cta[b-54gfducplj] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 11px 14px;
    margin-bottom: var(--space-3);
    border-radius: var(--r-md);
    font-size: 14px;
    font-weight: var(--font-weight-semibold);
    color: var(--on-primary);
    background: linear-gradient(140deg, var(--primary), var(--primary-deep));
    text-decoration: none;
    transition: filter .13s, box-shadow .13s;
    box-shadow: var(--shadow-primary);
}

.nav-cta:hover[b-54gfducplj] {
    filter: brightness(1.05);
    color: var(--on-primary);
    text-decoration: none;
}

.nav-cta:focus-visible[b-54gfducplj] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.nav-cta .material-icons[b-54gfducplj] {
    font-size: 19px;
}

/* --------------------------------------------------------------------------
   Nav links
   -------------------------------------------------------------------------- */
.nav-link[b-54gfducplj] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: var(--r-md);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ink-2);
    text-decoration: none;
    transition: .13s;
    position: relative;
}

.nav-link .material-icons[b-54gfducplj] {
    font-size: 18px;
    flex-shrink: 0;
}

.nav-link:hover[b-54gfducplj] {
    background: var(--surface-2);
    color: var(--ink);
    text-decoration: none;
}

.nav-link.active[b-54gfducplj] {
    background: var(--primary-tint);
    color: var(--primary-ink);
    font-weight: 600;
}

[data-theme="dark"] .nav-link.active[b-54gfducplj] {
    color: var(--primary);
}

.nav-link.active[b-54gfducplj]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

.nav-link:focus-visible[b-54gfducplj] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Sidebar foot
   -------------------------------------------------------------------------- */
.nav-foot[b-54gfducplj] {
    margin-top: auto;
    padding: var(--space-3);
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.nav-user-section[b-54gfducplj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-2);
    background: var(--surface-2);
    border-radius: var(--r-md);
}

.user-info[b-54gfducplj] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.user-name[b-54gfducplj] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--ink);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-email[b-54gfducplj] {
    font-size: var(--font-size-xs);
    color: var(--ink-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Sign-out — form-wrapped link, full width */
.nav-foot form[b-54gfducplj] {
    margin: 0;
}

.logout-link[b-54gfducplj] {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--err);
}

.logout-link:hover[b-54gfducplj] {
    background: var(--err-bg);
    color: var(--err);
}
/* /Components/Layout/NotificationsPopover.razor.rz.scp.css */
/* ==========================================================================
   Notifications Popover — header bell + click-outside popover (stub data)
   Scoped CSS: the bell button's BASE look (size, border, hover, focus ring,
   icon size) now comes from the global `.header-icon-btn` utility in app.css.
   This file keeps ONLY popover-specific rules: positioning/stacking, the panel,
   and the unread dot.
   ========================================================================== */

.notif-popover[b-q7xo4sweja] {
    position: relative;
    display: inline-flex;
}

/* Unread indicator dot (popover-specific; anchored to the bell). */
.notification-dot[b-q7xo4sweja] {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 8px;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--err);
    border: 2px solid var(--surface);
}

/* Click-catcher behind the panel — closes on outside click. */
.notif-scrim[b-q7xo4sweja] {
    position: fixed;
    inset: 0;
    z-index: var(--z-popover);
    background: transparent;
}

/* Panel — anchored under the bell, right-aligned. */
.notif-panel[b-q7xo4sweja] {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    width: 360px;
    max-width: calc(100vw - var(--space-6));
    max-height: min(70vh, 480px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    z-index: calc(var(--z-popover) + 1);
}

.notif-head[b-q7xo4sweja] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 13px 15px;
    border-bottom: 1px solid var(--line);
}

.notif-head-title[b-q7xo4sweja] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.notif-mark-all[b-q7xo4sweja] {
    border: 0;
    background: transparent;
    padding: 2px 4px;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--primary);
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: background .12s;
}

.notif-mark-all:hover[b-q7xo4sweja] {
    background: var(--primary-tint);
}

.notif-mark-all:focus-visible[b-q7xo4sweja] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.notif-empty[b-q7xo4sweja] {
    padding: var(--space-4);
}

/* Notification rows -------------------------------------------------------- */
.notif[b-q7xo4sweja] {
    display: flex;
    gap: 12px;
    padding: 13px 15px;
    border-top: 1px solid var(--line);
    cursor: default;
    transition: .12s;
}

.notif:first-child[b-q7xo4sweja] {
    border-top: 0;
}

.notif:hover[b-q7xo4sweja] {
    background: var(--surface-2);
}

.notif.unread[b-q7xo4sweja] {
    background: color-mix(in oklab, var(--primary) 6%, var(--surface));
}

.notif-ic[b-q7xo4sweja] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
}

.notif-ic .material-icons[b-q7xo4sweja] {
    font-size: 19px;
}

.notif-ic.success[b-q7xo4sweja] {
    background: var(--ok-bg);
    color: var(--ok-ink);
}

.notif-ic.info[b-q7xo4sweja] {
    background: var(--info-bg);
    color: var(--info-ink);
}

.notif-ic.warning[b-q7xo4sweja] {
    background: var(--warn-bg);
    color: var(--warn-ink);
}

.notif-ic.error[b-q7xo4sweja] {
    background: var(--err-bg);
    color: var(--err-ink);
}

.notif-body[b-q7xo4sweja] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.notif-title[b-q7xo4sweja] {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
}

.notif-time[b-q7xo4sweja] {
    font-size: 11px;
    color: var(--ink-3);
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-67jrt556uy],
.components-reconnect-repeated-attempt-visible[b-67jrt556uy],
.components-reconnect-failed-visible[b-67jrt556uy],
.components-pause-visible[b-67jrt556uy],
.components-resume-failed-visible[b-67jrt556uy],
.components-rejoining-animation[b-67jrt556uy] {
    display: none;
}

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


#components-reconnect-modal[b-67jrt556uy] {
    background-color: var(--surface);
    color: var(--ink);
    width: 20rem;
    margin: 20vh auto;
    padding: var(--space-8);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
    font-family: var(--font-sans);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-67jrt556uy 0.5s both;
    &[open]

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

}

#components-reconnect-modal[b-67jrt556uy]::backdrop {
    background-color: color-mix(in oklab, var(--ink) 45%, transparent);
    animation: components-reconnect-modal-fadeInOpacity-b-67jrt556uy 0.5s ease-in-out;
    opacity: 1;
}

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-67jrt556uy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

#components-reconnect-modal p[b-67jrt556uy] {
    margin: 0;
    text-align: center;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
    color: var(--ink-2);
}

#components-reconnect-modal .components-reconnect-failed-visible[b-67jrt556uy],
#components-reconnect-modal .components-resume-failed-visible[b-67jrt556uy] {
    color: var(--err-ink);
    font-weight: var(--font-weight-medium);
}

#components-seconds-to-next-attempt[b-67jrt556uy] {
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

#components-reconnect-modal button[b-67jrt556uy] {
    border: 0;
    background-color: var(--primary);
    color: var(--on-primary);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    padding: var(--space-2) var(--space-6);
    border-radius: var(--r-md);
    cursor: pointer;
    box-shadow: var(--shadow-primary);
    transition: background-color var(--transition-fast);
}

    #components-reconnect-modal button:hover[b-67jrt556uy] {
        background-color: var(--primary-hover);
    }

    #components-reconnect-modal button:active[b-67jrt556uy] {
        background-color: var(--primary-press);
    }

    #components-reconnect-modal button:focus-visible[b-67jrt556uy] {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
    }

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

    .components-rejoining-animation div[b-67jrt556uy] {
        position: absolute;
        border: 3px solid var(--primary);
        opacity: 1;
        border-radius: var(--r-full);
        animation: components-rejoining-animation-b-67jrt556uy 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

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

@keyframes components-rejoining-animation-b-67jrt556uy {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Layout/TenantSwitcher.razor.rz.scp.css */
/* ==========================================================================
   Tenant Switcher — nav dropdown for multi-membership identities
   CSS-driven hover/focus-within reveal (no Blazor interactivity — the POST
   form mechanics must stay plain-HTML, ADR-0007).
   Lives in the dark sidebar foot; tokens flip automatically in dark mode.
   ========================================================================== */

.tenant-switcher[b-h3wbdirirp] {
    position: relative;
    margin: 0 var(--space-3) var(--space-3);
}

/* Current organisation row ------------------------------------------------- */
.tenant-switcher-label[b-h3wbdirirp] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 9px;
    border-radius: var(--r-md);
    background: var(--surface-2);
    cursor: pointer;
    color: var(--ink-2);
    user-select: none;
    transition: background .12s, color .12s;
}

.tenant-switcher:hover .tenant-switcher-label[b-h3wbdirirp],
.tenant-switcher:focus-within .tenant-switcher-label[b-h3wbdirirp] {
    background: color-mix(in oklab, var(--ink) 7%, var(--surface-2));
    color: var(--ink);
}

.tenant-switcher-avatar[b-h3wbdirirp] {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--primary-tint);
    color: var(--primary-ink);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
}

.tenant-switcher-current[b-h3wbdirirp] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
}

.tenant-switcher-chevron[b-h3wbdirirp] {
    flex: none;
    font-size: 18px !important;
    color: var(--ink-3) !important;
    transition: transform .12s;
}

.tenant-switcher:hover .tenant-switcher-chevron[b-h3wbdirirp],
.tenant-switcher:focus-within .tenant-switcher-chevron[b-h3wbdirirp] {
    transform: rotate(180deg);
}

/* Dropdown surface card ---------------------------------------------------- */
.tenant-switcher-dropdown[b-h3wbdirirp] {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: var(--space-1);
    padding: var(--space-1);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-2);
    z-index: var(--z-dropdown, 1000);
}

.tenant-switcher:hover .tenant-switcher-dropdown[b-h3wbdirirp],
.tenant-switcher:focus-within .tenant-switcher-dropdown[b-h3wbdirirp] {
    display: block;
}

.tenant-switcher-item-form[b-h3wbdirirp] {
    margin: 0;
    padding: 0;
}

/* Membership row (submit button) ------------------------------------------- */
.tenant-switcher-item[b-h3wbdirirp] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 9px;
    border-radius: 10px;
    cursor: pointer;
    transition: .12s;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
}

.tenant-switcher-item:hover[b-h3wbdirirp] {
    background: var(--surface-2);
}

.tenant-switcher-item.active[b-h3wbdirirp] {
    background: var(--primary-tint);
}

.tenant-switcher-item:focus-visible[b-h3wbdirirp] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.tenant-switcher-item-avatar[b-h3wbdirirp] {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: var(--r-md);
    display: grid;
    place-items: center;
    background: var(--primary-tint);
    color: var(--primary-ink);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
}

.tenant-switcher-item-text[b-h3wbdirirp] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tenant-switcher-item-org[b-h3wbdirirp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
}

.tenant-switcher-item-company[b-h3wbdirirp] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-xs);
    color: var(--ink-2);
}

.tenant-switcher-item-check[b-h3wbdirirp] {
    flex: none;
    font-size: 18px !important;
    color: var(--primary) !important;
}
/* /Components/Pages/AcceptInvite.razor.rz.scp.css */
/* ==========================================================================
   Accept Invite page — form card inside LoginLayout's split brand panel.
   Mirrors Login.razor.css (.auth-card / .auth-heading / .input-group …).
   ========================================================================== */

.auth-card[b-x6bklz1cis] {
    width: 100%;
}

/* Compact logo shown above the form only on narrow screens, where the
   brand panel collapses to a slim header. Hidden on wide layouts. */
.auth-mobile-logo[b-x6bklz1cis] {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
}

.auth-mobile-logo .material-icons[b-x6bklz1cis] {
    font-size: 28px;
    color: var(--primary);
}

/* ── Heading ─────────────────────────────────────────────────────────────── */
.auth-heading[b-x6bklz1cis] {
    margin-bottom: var(--space-8);
}

.auth-heading h1[b-x6bklz1cis] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 var(--space-2);
}

.auth-heading p[b-x6bklz1cis] {
    color: var(--ink-2);
    margin: 0;
    font-size: var(--font-size-base);
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.login-form[b-x6bklz1cis] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.input-group[b-x6bklz1cis] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.input-label[b-x6bklz1cis] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
}

.required-mark[b-x6bklz1cis] {
    color: var(--err);
    margin-left: 2px;
}

.input-wrapper[b-x6bklz1cis] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper.has-icon .input-control[b-x6bklz1cis] {
    padding-left: 2.5rem;
}

.input-icon[b-x6bklz1cis] {
    position: absolute;
    left: var(--space-3);
    color: var(--ink-3);
    font-size: 18px;
    pointer-events: none;
}

.input-control[b-x6bklz1cis] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--surface);
    color: var(--ink);
}

.input-control:focus[b-x6bklz1cis] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px var(--primary-tint);
}

.input-control[b-x6bklz1cis]::placeholder {
    color: var(--ink-3);
}

/* ── Read-only email field ───────────────────────────────────────────────── */
.readonly-field[b-x6bklz1cis] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    color: var(--ink-2);
    font-size: var(--font-size-base);
}

.readonly-field .input-icon[b-x6bklz1cis] {
    position: static;
    color: var(--ink-3);
    font-size: 18px;
}

.readonly-value[b-x6bklz1cis] {
    flex: 1;
    word-break: break-all;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.auth-footer[b-x6bklz1cis] {
    text-align: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.auth-footer p[b-x6bklz1cis] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin: 0;
}

.auth-footer a[b-x6bklz1cis] {
    color: var(--primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.auth-footer a:hover[b-x6bklz1cis] {
    text-decoration: underline;
}

/* ==========================================================================
   Responsive — show the compact logo once the brand panel collapses
   ========================================================================== */
@media (max-width: 880px) {
    .auth-mobile-logo[b-x6bklz1cis] {
        display: flex;
    }

    .auth-heading h1[b-x6bklz1cis] {
        font-size: var(--font-size-2xl);
    }
}
/* /Components/Pages/BookingDetail.razor.rz.scp.css */
/* Booking Detail Page Styles */

.booking-detail-container[b-bfqh1rsrm3] {
    max-width: 1000px;
    margin: 0 auto;
    padding: var(--space-8);
}

/* Error / not-found state */
.bd-error[b-bfqh1rsrm3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-12) var(--space-8);
    text-align: center;
}

/* Title row: reference + status */
.bd-title-row[b-bfqh1rsrm3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: calc(var(--space-2) * -1) 0 var(--space-6);
    flex-wrap: wrap;
}

.bd-ref[b-bfqh1rsrm3] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    letter-spacing: 0.01em;
}

.bd-status-alert[b-bfqh1rsrm3] {
    margin-bottom: var(--space-6);
}

/* Grid of detail cards */
.detail-grid[b-bfqh1rsrm3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-6);
}

.detail-grid[b-bfqh1rsrm3]  .bd-card {
    height: 100%;
}

.detail-grid[b-bfqh1rsrm3]  .bd-card.full-width {
    grid-column: 1 / -1;
}

/* Journey times under the route timeline */
.bd-journey-times[b-bfqh1rsrm3] {
    display: flex;
    gap: var(--space-6);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
    flex-wrap: wrap;
}

.bd-time-item[b-bfqh1rsrm3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.bd-time-label[b-bfqh1rsrm3] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bd-time-value[b-bfqh1rsrm3] {
    font-size: var(--font-size-sm);
    color: var(--ink);
}

/* Info grid (booking information) */
.info-grid[b-bfqh1rsrm3] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.info-item[b-bfqh1rsrm3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.info-label[b-bfqh1rsrm3] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.info-value[b-bfqh1rsrm3] {
    font-size: var(--font-size-base);
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Driver card */
.bd-person[b-bfqh1rsrm3] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.bd-person-info[b-bfqh1rsrm3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.bd-person-name[b-bfqh1rsrm3] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.bd-person-sub[b-bfqh1rsrm3] {
    font-size: var(--font-size-sm);
    color: var(--ink-2);
}

.bd-person-meta[b-bfqh1rsrm3] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--ink-2);
    text-decoration: none;
}

.bd-person-meta:hover[b-bfqh1rsrm3] {
    color: var(--primary);
}

.bd-person-meta .material-icons[b-bfqh1rsrm3] {
    font-size: 16px;
}

/* Vehicle card */
.bd-vehicle[b-bfqh1rsrm3] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
}

.bd-vehicle-model[b-bfqh1rsrm3] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.bd-plate[b-bfqh1rsrm3] {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--primary-tint);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    color: var(--primary-ink);
    text-transform: uppercase;
}

/* Price breakdown */
.bd-price[b-bfqh1rsrm3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bd-price-row[b-bfqh1rsrm3] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
}

.bd-price-label[b-bfqh1rsrm3] {
    font-size: var(--font-size-sm);
    color: var(--ink-2);
}

.bd-price-amt[b-bfqh1rsrm3] {
    font-size: var(--font-size-base);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.bd-price-divider[b-bfqh1rsrm3] {
    height: 1px;
    background: var(--line);
}

.bd-price-total .bd-price-label[b-bfqh1rsrm3] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.bd-price-total .bd-price-amt[b-bfqh1rsrm3] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
}

/* Action buttons */
.bd-actions[b-bfqh1rsrm3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.bd-actions-row[b-bfqh1rsrm3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
}

.bd-actions[b-bfqh1rsrm3]  .bd-action-track {
    width: 100%;
}

.bd-actions[b-bfqh1rsrm3]  .bd-action-cancel {
    width: 100%;
    color: var(--err);
}

.bd-actions[b-bfqh1rsrm3]  .bd-action-cancel:hover {
    color: var(--err-ink);
}

/* Waypoints timeline */
.waypoints-timeline[b-bfqh1rsrm3] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.waypoint-item[b-bfqh1rsrm3] {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    position: relative;
    padding-bottom: var(--space-5);
}

.waypoint-item:not(:last-child)[b-bfqh1rsrm3]::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: 0;
    width: 2px;
    background: var(--line);
}

.waypoint-item:last-child[b-bfqh1rsrm3] {
    padding-bottom: 0;
}

.waypoint-marker[b-bfqh1rsrm3] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: var(--r-full);
    background: var(--primary);
    color: var(--on-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.waypoint-seq[b-bfqh1rsrm3] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.waypoint-info[b-bfqh1rsrm3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-1);
}

.waypoint-header[b-bfqh1rsrm3] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.waypoint-location[b-bfqh1rsrm3] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
}

.waypoint-type[b-bfqh1rsrm3] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-ink);
    background: var(--primary-tint);
    padding: 0.125rem var(--space-2);
    border-radius: var(--r-full);
}

.waypoint-times[b-bfqh1rsrm3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.waypoint-time[b-bfqh1rsrm3] {
    font-size: var(--font-size-sm);
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.waypoint-time.actual[b-bfqh1rsrm3] {
    color: var(--ok-ink);
}

.waypoint-time .info-icon[b-bfqh1rsrm3] {
    font-size: 16px;
}

.info-icon[b-bfqh1rsrm3] {
    font-size: 18px;
    color: var(--ink-2);
}

/* Notes */
.notes-content[b-bfqh1rsrm3] {
    padding: var(--space-4);
    background: var(--surface-2);
    border-radius: var(--r-md);
    color: var(--ink-2);
    line-height: var(--line-height-relaxed);
}

/* Cancel modal extras */
.bd-modal-text[b-bfqh1rsrm3] {
    color: var(--ink-2);
    margin: 0 0 var(--space-5);
}

.modal-field[b-bfqh1rsrm3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.modal-textarea[b-bfqh1rsrm3] {
    width: 100%;
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    color: var(--ink);
    resize: vertical;
    box-sizing: border-box;
}

.modal-textarea:focus[b-bfqh1rsrm3] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px var(--primary-tint);
}

/* Responsive */
@media (max-width: 640px) {
    .booking-detail-container[b-bfqh1rsrm3] {
        padding: var(--space-4);
    }

    .info-grid[b-bfqh1rsrm3] {
        grid-template-columns: 1fr;
    }

    .bd-journey-times[b-bfqh1rsrm3] {
        flex-direction: column;
        gap: var(--space-3);
    }
}
/* /Components/Pages/BookingFeedback.razor.rz.scp.css */
/* Booking Feedback — multi-dimension trip feedback form, restyled to the design system.
   Form fields, validation, rating logic and the submit handler are unchanged; CSS only. */

.material-icons[b-wn9zjwb0hn] {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

.feedback-container[b-wn9zjwb0hn] {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--space-8);
}

.loading-spinner[b-wn9zjwb0hn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-16);
}

/* Empty / not-completed / thank-you states */
.feedback-state[b-wn9zjwb0hn] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-1);
    padding: var(--space-6) var(--space-4);
}

.thanks-text[b-wn9zjwb0hn] {
    color: var(--ink-2);
    margin-bottom: var(--space-4);
}

/* Header subtitle (sits below the shared PageHeader) */
.feedback-subtitle[b-wn9zjwb0hn] {
    color: var(--ink-2);
    margin: calc(var(--space-4) * -1) 0 var(--space-6);
}

.feedback-alert[b-wn9zjwb0hn] {
    margin-bottom: var(--space-4);
}

/* Form */
.feedback-form[b-wn9zjwb0hn] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-1);
    padding: var(--space-6);
}

.form-section[b-wn9zjwb0hn] {
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--line-2);
}

.form-section:first-child[b-wn9zjwb0hn] {
    padding-top: 0;
}

.form-section:last-of-type[b-wn9zjwb0hn] {
    border-bottom: none;
}

.form-label[b-wn9zjwb0hn] {
    display: block;
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    margin-bottom: var(--space-1);
}

.form-label.required[b-wn9zjwb0hn]::after {
    content: " *";
    color: var(--err);
}

.form-hint[b-wn9zjwb0hn] {
    color: var(--ink-3);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-2);
}

.field-error[b-wn9zjwb0hn] {
    display: block;
    color: var(--err-ink);
    font-size: var(--font-size-sm);
    margin-top: var(--space-2);
}

/* Star rating */
.star-rating[b-wn9zjwb0hn] {
    display: inline-flex;
    gap: var(--space-1);
}

.star[b-wn9zjwb0hn] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: var(--line);
    line-height: 0;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.star:hover[b-wn9zjwb0hn] {
    color: var(--warn);
    transform: scale(1.05);
}

.star.filled[b-wn9zjwb0hn] {
    color: var(--warn);
}

.star-rating.small .material-icons[b-wn9zjwb0hn] {
    font-size: 20px;
}

/* Sub-ratings */
.subratings[b-wn9zjwb0hn] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.subrating-row[b-wn9zjwb0hn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.subrating-label[b-wn9zjwb0hn] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
}

/* Recommend toggle */
.recommend-toggle[b-wn9zjwb0hn] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
}

.toggle-btn[b-wn9zjwb0hn] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all var(--transition-fast);
}

.toggle-btn:hover[b-wn9zjwb0hn] {
    border-color: var(--ink-3);
}

.toggle-btn.active-yes[b-wn9zjwb0hn] {
    background: var(--ok-bg);
    border-color: var(--ok);
    color: var(--ok-ink);
}

.toggle-btn.active-no[b-wn9zjwb0hn] {
    background: var(--err-bg);
    border-color: var(--err);
    color: var(--err-ink);
}

.toggle-clear[b-wn9zjwb0hn] {
    background: none;
    border: none;
    color: var(--ink-2);
    cursor: pointer;
    font-size: var(--font-size-sm);
    text-decoration: underline;
}

/* Textareas */
.form-textarea[b-wn9zjwb0hn] {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--ink);
    background: var(--surface);
    resize: vertical;
    margin-top: var(--space-2);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-textarea[b-wn9zjwb0hn]::placeholder {
    color: var(--ink-3);
}

.form-textarea:focus[b-wn9zjwb0hn] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint);
}

/* Checkbox */
.checkbox-label[b-wn9zjwb0hn] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.checkbox-label input[b-wn9zjwb0hn] {
    margin-top: 3px;
    accent-color: var(--primary);
}

/* Actions */
.form-actions[b-wn9zjwb0hn] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding-top: var(--space-5);
}

@media (max-width: 600px) {
    .feedback-container[b-wn9zjwb0hn] {
        padding: var(--space-4);
    }

    .subrating-row[b-wn9zjwb0hn] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-1);
    }
}
/* /Components/Pages/Bookings.razor.rz.scp.css */
/* Trips list page (/bookings) — layout only.
   Tab strip, trip cards, badges, buttons, empty-state and spinner all live in
   their own shared components (scoped CSS); this file styles only the page shell. */

.bookings-container[b-a3jzkfo8ow] {
    padding: 0;
    max-width: 1200px;
    margin: 0 auto;
}

/* Segmented control spacing under the page header */
.bookings-tabs[b-a3jzkfo8ow] {
    margin: var(--space-5) 0 var(--space-4);
}

/* Filters card (All tab only) */
.filters-card[b-a3jzkfo8ow] {
    margin-bottom: var(--space-6);
}

.filters-section[b-a3jzkfo8ow] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
    align-items: end;
}

/* Trip list — stacked full-width trip cards */
.bookings-grid[b-a3jzkfo8ow] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Pager */
.bookings-pager[b-a3jzkfo8ow] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-6);
}

.pager-label[b-a3jzkfo8ow] {
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink-2);
}

@media (max-width: 768px) {
    .bookings-container[b-a3jzkfo8ow] {
        padding: var(--space-4);
    }

    .filters-section[b-a3jzkfo8ow] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/BookingTracking.razor.rz.scp.css */
/* Live Booking Tracking — restyled chrome around the Epic 4 Leaflet + SignalR map.
   Map tiles are Leaflet's own; only the overlay chrome and docked panel are tokenized here. */

/* Material Icons (raw spans still used for call / send / share / vehicle placeholder) */
.material-icons[b-m8pqc0q2ev] {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

.tracking-page[b-m8pqc0q2ev] {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--bg);
}

/* Full-bleed map layer */
.map-layer[b-m8pqc0q2ev] {
    position: absolute;
    inset: 0;
    z-index: var(--z-sticky);
}

.tracking-map[b-m8pqc0q2ev] {
    width: 100%;
    height: 100%;
}

/* Floating overlay chrome */
.overlay-top-left[b-m8pqc0q2ev] {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: var(--z-fixed);
}

.overlay-top-right[b-m8pqc0q2ev] {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-fixed);
}

.overlay-eta[b-m8pqc0q2ev] {
    position: absolute;
    top: 50%;
    right: 30%;
    transform: translateY(-50%);
    z-index: var(--z-fixed);
}

/* Docked bottom panel */
.bottom-sheet[b-m8pqc0q2ev] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top-left-radius: var(--r-xl);
    border-top-right-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
    z-index: var(--z-modal);
    max-height: 50vh;
    overflow-y: auto;
    transition: max-height var(--transition-slow);
}

.bottom-sheet.expanded[b-m8pqc0q2ev] {
    max-height: 80vh;
}

/* While the journey chat (a BottomSheet at --z-modal-backdrop 1040) is open, drop the docked
   driver panel BELOW the chat backdrop so it can't paint over / block the chat. SCRUM-158. */
.bottom-sheet.behind-chat[b-m8pqc0q2ev] {
    z-index: var(--z-fixed);
}

.sheet-handle[b-m8pqc0q2ev] {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0 var(--space-2);
    cursor: pointer;
}

.handle-bar[b-m8pqc0q2ev] {
    width: 40px;
    height: 4px;
    background: var(--line);
    border-radius: var(--r-full);
}

/* Status Banner */
.status-banner[b-m8pqc0q2ev] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    margin: 0 var(--space-4) var(--space-4);
    border-radius: var(--r-lg);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
}

.spinner-sm[b-m8pqc0q2ev] {
    width: 20px;
    height: 20px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-m8pqc0q2ev 1s linear infinite;
}

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

/* Driver & Vehicle Section */
.driver-vehicle-section[b-m8pqc0q2ev] {
    padding: 0 var(--space-4) var(--space-4);
    border-bottom: 1px solid var(--line);
}

.vehicle-badges[b-m8pqc0q2ev] {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.badge[b-m8pqc0q2ev] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--r-sm);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.badge-reg[b-m8pqc0q2ev] {
    background: var(--warn-bg);
    color: var(--warn-ink);
    letter-spacing: 0.04em;
}

.badge-vehicle[b-m8pqc0q2ev] {
    background: var(--ink);
    color: var(--surface);
}

.driver-row[b-m8pqc0q2ev] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-4);
}

.driver-details[b-m8pqc0q2ev] {
    display: flex;
    flex-direction: column;
}

.driver-name[b-m8pqc0q2ev] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.vehicle-colour[b-m8pqc0q2ev] {
    display: inline-block;
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--ink-2);
    text-transform: capitalize;
}

.not-trackable-panel[b-m8pqc0q2ev] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-3) var(--space-4);
    padding: var(--space-4);
    background: var(--info-bg);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
}

.not-trackable-icon[b-m8pqc0q2ev] {
    color: var(--info);
    font-size: 28px;
}

.not-trackable-text[b-m8pqc0q2ev] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--ink-2);
}

.driver-visual[b-m8pqc0q2ev] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.vehicle-placeholder[b-m8pqc0q2ev] {
    width: 70px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: calc(var(--space-2) * -1);
}

.vehicle-placeholder .material-icons[b-m8pqc0q2ev] {
    font-size: 36px;
    color: var(--ink);
}

/* Communication Row */
.communication-row[b-m8pqc0q2ev] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.btn-call[b-m8pqc0q2ev] {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--surface);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-call .material-icons[b-m8pqc0q2ev] {
    font-size: 22px;
    color: var(--primary);
}

.btn-call:hover[b-m8pqc0q2ev] {
    background: var(--surface-2);
}

/* Journey Section */
.journey-section[b-m8pqc0q2ev] {
    padding: var(--space-4);
}

.journey-header[b-m8pqc0q2ev] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}

.pickup-time[b-m8pqc0q2ev] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.btn-share[b-m8pqc0q2ev] {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-share .material-icons[b-m8pqc0q2ev] {
    font-size: 22px;
    color: var(--primary);
}

.journey-label[b-m8pqc0q2ev] {
    color: var(--primary-ink);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: block;
    margin-bottom: var(--space-3);
}

/* Fare Section */
.fare-section[b-m8pqc0q2ev] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4);
    border-top: 1px solid var(--line);
}

.fare-info[b-m8pqc0q2ev] {
    display: flex;
    flex-direction: column;
}

.fare-total[b-m8pqc0q2ev] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
}

.fare-method[b-m8pqc0q2ev] {
    font-size: var(--font-size-sm);
    color: var(--ink-2);
}

.btn-details[b-m8pqc0q2ev] {
    background: none;
    border: none;
    color: var(--ink);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Rating Section */
.rating-section[b-m8pqc0q2ev] {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    border-top: 1px solid var(--line);
}

.rating-avatar[b-m8pqc0q2ev] {
    margin: 0 auto var(--space-4);
}

.rating-prompt[b-m8pqc0q2ev] {
    font-size: var(--font-size-base);
    color: var(--ink);
    margin-bottom: var(--space-4);
}

.star-rating[b-m8pqc0q2ev] {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.star[b-m8pqc0q2ev] {
    color: var(--line-2);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform var(--transition-fast);
}

.star .material-icons[b-m8pqc0q2ev] {
    font-size: 36px;
}

.star:hover[b-m8pqc0q2ev] {
    transform: scale(1.1);
}

.star.filled[b-m8pqc0q2ev],
.star.filled .material-icons[b-m8pqc0q2ev] {
    color: var(--warn);
}

.rating-comment[b-m8pqc0q2ev] {
    width: 100%;
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    resize: none;
    min-height: 80px;
    margin-bottom: var(--space-3);
    font-family: inherit;
    color: var(--ink);
    background: var(--surface);
}

.btn-skip[b-m8pqc0q2ev] {
    display: block;
    margin: var(--space-3) auto 0;
    color: var(--primary-ink);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-sm);
}

/* Loading & Error States */
.loading-state[b-m8pqc0q2ev],
.error-state[b-m8pqc0q2ev] {
    padding: var(--space-10) var(--space-5);
    text-align: center;
}

.error-state h3[b-m8pqc0q2ev] {
    color: var(--ink);
    margin-bottom: var(--space-4);
}

/* Responsive — centre the docked panel on wider viewports */
@media (min-width: 768px) {
    .bottom-sheet[b-m8pqc0q2ev] {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Journey chat button (replaces the inline message-input-container) */
.btn-message-driver[b-m8pqc0q2ev] {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: none;
    border-radius: 1.5rem;
    background: var(--accent, #2563eb);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.btn-message-driver .material-icons[b-m8pqc0q2ev] {
    font-size: 1.1rem;
}

.journey-chat-loading[b-m8pqc0q2ev] {
    padding: 2rem;
    text-align: center;
}
/* /Components/Pages/CreateBooking.razor.rz.scp.css */
/* Create Booking — stepped flow */

.material-icons[b-phao0z43s9] {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

.cb-page[b-phao0z43s9] {
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-8);
}

.cb-shell[b-phao0z43s9] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-2);
    overflow: hidden;
}

/* ── Header + stepper ──────────────────────────────────────────────────── */
.cb-header[b-phao0z43s9] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-8);
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    flex-wrap: wrap;
}

.cb-header-title[b-phao0z43s9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
    color: var(--ink);
}

.cb-back[b-phao0z43s9] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink-2);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.cb-back:hover[b-phao0z43s9] {
    background: var(--surface-2);
    border-color: var(--ink-3);
}

.cb-back .material-icons[b-phao0z43s9] {
    font-size: 20px;
}

.cb-stepper[b-phao0z43s9] {
    margin-left: auto;
}

/* ── Body: form column + summary rail ──────────────────────────────────── */
.cb-body[b-phao0z43s9] {
    display: grid;
    grid-template-columns: 1fr 340px;
    min-height: 0;
}

.cb-form-col[b-phao0z43s9] {
    padding: var(--space-8);
    min-width: 0;
}

.cb-alert[b-phao0z43s9] {
    margin-bottom: var(--space-5);
}

.validation-summary[b-phao0z43s9] {
    background: var(--err-bg);
    border: 1px solid var(--err);
    border-radius: var(--r-md);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    color: var(--err-ink);
    list-style: none;
}

/* ── Panel headings ────────────────────────────────────────────────────── */
.cb-panel-h[b-phao0z43s9] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 var(--space-1);
}

.cb-panel-sub[b-phao0z43s9] {
    font-size: var(--font-size-sm);
    color: var(--ink-2);
    margin: 0 0 var(--space-6);
    line-height: var(--line-height-normal);
}

/* ── Fields ────────────────────────────────────────────────────────────── */
.cb-fields[b-phao0z43s9] {
    display: grid;
    gap: var(--space-4);
    max-width: 520px;
}

.cb-field[b-phao0z43s9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.cb-fields .cb-field[b-phao0z43s9] {
    margin-bottom: 0;
}

.cb-label[b-phao0z43s9] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink-2);
}

.cb-req[b-phao0z43s9] {
    color: var(--accent-ink);
}

.cb-group-label[b-phao0z43s9] {
    margin: var(--space-5) 0 var(--space-3);
}

.cb-input[b-phao0z43s9] {
    width: 100%;
    padding: 0.6rem 0.85rem;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
    background: var(--surface);
    color: var(--ink);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.cb-input:focus[b-phao0z43s9] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint);
}

.cb-input:disabled[b-phao0z43s9] {
    background: var(--surface-2);
    cursor: not-allowed;
}

.cb-textarea[b-phao0z43s9] {
    resize: vertical;
    min-height: 88px;
}

[b-phao0z43s9] .validation-message {
    color: var(--err-ink);
    font-size: var(--font-size-xs);
}

/* ── Leading-icon-inside-field (mirrors the Login page pattern) ─────────── */
.input-wrapper[b-phao0z43s9] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.input-wrapper.has-icon .input-control[b-phao0z43s9] {
    padding-left: 40px;
}

.input-icon[b-phao0z43s9] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-size: 18px;
    pointer-events: none;
}

/* ── Step 1: mesh route "map" with route line ──────────────────────────── */
.cb-map[b-phao0z43s9] {
    position: relative;
    overflow: hidden;
    height: 190px;
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    background: radial-gradient(120% 120% at 20% 10%, color-mix(in oklab, var(--primary) 16%, var(--surface-2)), var(--surface-2));
}

.cb-map[b-phao0z43s9]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in oklab, var(--ink) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklab, var(--ink) 7%, transparent) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask: radial-gradient(120% 100% at 50% 40%, #000, transparent 92%);
    mask: radial-gradient(120% 100% at 50% 40%, #000, transparent 92%);
}

.cb-map-svg[b-phao0z43s9] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.cb-route-line[b-phao0z43s9] {
    stroke: var(--primary);
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--primary) 50%, transparent));
}

.cb-map-ic[b-phao0z43s9] {
    position: absolute;
    right: var(--space-4);
    bottom: var(--space-4);
    font-size: 22px;
    color: var(--ink-3);
    opacity: 0.7;
}

/* ── Step 2: when ──────────────────────────────────────────────────────── */
.cb-when-grid[b-phao0z43s9] {
    display: grid;
    gap: var(--space-5);
    max-width: 560px;
}

.cb-day-chips[b-phao0z43s9] {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Full date picker beneath the quick-pick chips — lets the customer choose ANY future day. */
.cb-date-input[b-phao0z43s9] {
    margin-top: var(--space-3);
    max-width: 16rem;
}

.cb-when-row[b-phao0z43s9] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.cb-when-row .cb-field[b-phao0z43s9] {
    margin-bottom: 0;
}

.cb-triptype[b-phao0z43s9] {
    display: inline-flex;
    padding: 3px;
    gap: 3px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}

.cb-triptype-btn[b-phao0z43s9] {
    padding: 0.45rem 1rem;
    border: none;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.cb-triptype-btn.on[b-phao0z43s9] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-1);
}

/* ── Step 3: vehicle ───────────────────────────────────────────────────── */
.cb-vtype-field[b-phao0z43s9] {
    max-width: 560px;
}

.cb-cards[b-phao0z43s9] {
    display: grid;
    gap: var(--space-3);
    max-width: 560px;
    margin-bottom: var(--space-5);
}

.cb-card-title[b-phao0z43s9] {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.cb-card-sub[b-phao0z43s9] {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--ink-2);
    margin-top: 2px;
}

.cb-fleet-status[b-phao0z43s9] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--r-md);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-5);
    background: var(--info-bg);
    color: var(--info-ink);
}

.cb-fleet-status[b-phao0z43s9]  .loading-container {
    padding: 0;
}

.cb-fleet-hint[b-phao0z43s9] {
    font-size: var(--font-size-sm);
    color: var(--ink-2);
    background: var(--surface-2);
    border: 1px dashed var(--line);
    border-radius: var(--r-md);
    padding: var(--space-4);
    margin: 0 0 var(--space-5);
    max-width: 560px;
}

/* ── Step 4: review ────────────────────────────────────────────────────── */
.cb-review[b-phao0z43s9] {
    display: grid;
    gap: var(--space-5);
    max-width: 560px;
}

.cb-review-section[b-phao0z43s9] {
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--space-5);
    background: var(--surface-3);
}

.cb-review-section h4[b-phao0z43s9] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    margin: 0 0 var(--space-3);
}

.cb-review-list[b-phao0z43s9] {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: var(--space-2) var(--space-5);
    margin: 0;
}

.cb-review-list dt[b-phao0z43s9] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink-3);
}

.cb-review-list dd[b-phao0z43s9] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--ink);
    word-break: break-word;
}

/* ── Summary rail ──────────────────────────────────────────────────────── */
.cb-rail[b-phao0z43s9] {
    border-left: 1px solid var(--line);
    background: var(--surface-3);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: start;
}

.cb-rail-eyebrow[b-phao0z43s9] {
    font-size: 11px;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--space-4);
}

.cb-rail-route[b-phao0z43s9] {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

/* Two-node route timeline: origin ring → connector → destination dot. */
.cb-rail-timeline[b-phao0z43s9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 5px;
}

.cb-rail-node[b-phao0z43s9] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: none;
}

.cb-rail-node-start[b-phao0z43s9] {
    border: 3px solid var(--primary);
    background: var(--surface);
}

.cb-rail-node-end[b-phao0z43s9] {
    background: var(--primary);
}

.cb-rail-connector[b-phao0z43s9] {
    flex: 1;
    width: 2px;
    background: linear-gradient(var(--primary), color-mix(in oklab, var(--primary) 40%, var(--line)));
    min-height: 30px;
    margin: 4px 0;
    border-radius: 1px;
}

.cb-rail-route-body[b-phao0z43s9] {
    flex: 1;
    min-width: 0;
    font-size: var(--font-size-sm);
    display: flex;
    flex-direction: column;
}

.cb-rail-place[b-phao0z43s9] {
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cb-rail-place-end[b-phao0z43s9] {
    margin-top: auto;
}

.cb-rail-meta[b-phao0z43s9] {
    color: var(--ink-3);
    margin: var(--space-2) 0;
    font-size: var(--font-size-xs);
}

.cb-rail-rows[b-phao0z43s9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.cb-rail-row[b-phao0z43s9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--font-size-sm);
    color: var(--ink-2);
}

/* Honest "Quote: Operator-assigned" row — a deliberate state, not a price gap.
   Our booking model carries no line-items, so this reads as a clean label + value
   rather than a fabricated total. */
.cb-rail-quote[b-phao0z43s9] {
    border-top: 1px solid var(--line);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
}

.cb-rail-quote-val[b-phao0z43s9] {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--space-2);
    border-radius: var(--r-sm);
    background: var(--primary-tint);
    color: var(--primary-ink);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
}

.cb-rail-actions[b-phao0z43s9] {
    display: flex;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-6);
}

.cb-rail-next[b-phao0z43s9] {
    flex: 1;
}

/* ── Success panel ─────────────────────────────────────────────────────── */
.cb-success[b-phao0z43s9] {
    text-align: center;
    padding: var(--space-12) var(--space-8);
}

.cb-success-icon[b-phao0z43s9] {
    font-size: 56px;
    color: var(--ok);
}

.cb-success h2[b-phao0z43s9] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin: var(--space-3) 0 var(--space-2);
}

.cb-success-ref[b-phao0z43s9] {
    font-size: var(--font-size-base);
    color: var(--ink);
    margin: 0 0 var(--space-2);
}

.cb-success-msg[b-phao0z43s9] {
    color: var(--ink-2);
    margin: 0 0 var(--space-6);
}

.cb-success-actions[b-phao0z43s9] {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
}

.cb-link-btn[b-phao0z43s9] {
    display: inline-flex;
    align-items: center;
    padding: 0.6rem 1.4rem;
    background: var(--primary);
    color: var(--on-primary);
    border-radius: var(--r-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    text-decoration: none;
    transition: background var(--transition-fast);
}

.cb-link-btn:hover[b-phao0z43s9] {
    background: var(--primary-hover);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .cb-page[b-phao0z43s9] {
        padding: var(--space-4);
    }

    .cb-body[b-phao0z43s9] {
        grid-template-columns: 1fr;
    }

    .cb-rail[b-phao0z43s9] {
        border-left: none;
        border-top: 1px solid var(--line);
        position: static;
    }

    .cb-form-col[b-phao0z43s9] {
        padding: var(--space-6);
    }

    .cb-when-row[b-phao0z43s9] {
        grid-template-columns: 1fr;
    }

    .cb-success-actions[b-phao0z43s9] {
        flex-direction: column;
    }
}
/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* ==========================================================================
   Dashboard — balanced hub home
   ========================================================================== */

.dashboard-container[b-kiyqq6sw74] {
    max-width: 1100px;
    margin: 0 auto;
}

/* ==========================================================================
   Greeting
   ========================================================================== */
.hub-greeting[b-kiyqq6sw74] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.hub-greeting-text[b-kiyqq6sw74] {
    min-width: 0;
}

.hub-title[b-kiyqq6sw74] {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin: 0;
    line-height: var(--line-height-tight);
}

.hub-sub[b-kiyqq6sw74] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--ink-2);
    margin: var(--space-1) 0 0;
}

.hub-sub-dot[b-kiyqq6sw74] {
    color: var(--ink-3);
}

.hub-countdown[b-kiyqq6sw74] {
    color: var(--primary-ink);
    font-weight: var(--font-weight-semibold);
}

/* ==========================================================================
   Balanced grid: main (~1.55fr) + aside (1fr)
   ========================================================================== */
.hub-grid[b-kiyqq6sw74] {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.hub-main[b-kiyqq6sw74],
.hub-aside[b-kiyqq6sw74] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

@media (max-width: 880px) {
    .hub-grid[b-kiyqq6sw74] {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Shared card shell
   ========================================================================== */
.hub-card[b-kiyqq6sw74] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-1);
}

.hub-card-head[b-kiyqq6sw74] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.hub-card-title[b-kiyqq6sw74] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    margin: 0;
}

/* ==========================================================================
   Next trip hero card
   ========================================================================== */
.next-trip-head[b-kiyqq6sw74] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
}

.next-trip-heading[b-kiyqq6sw74] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    min-width: 0;
}

.next-trip-when[b-kiyqq6sw74] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink-2);
}

.next-trip-ref[b-kiyqq6sw74] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--ink-3);
    white-space: nowrap;
}

/* hero body: route (left) + mesh map (right) */
.next-trip-body[b-kiyqq6sw74] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    gap: var(--space-4);
    align-items: stretch;
    margin-bottom: var(--space-4);
}

.next-trip-route[b-kiyqq6sw74] {
    padding: var(--space-4);
    background: var(--surface-2);
    border-radius: var(--r-lg);
    align-self: center;
}

@media (max-width: 560px) {
    .next-trip-body[b-kiyqq6sw74] {
        grid-template-columns: 1fr;
    }

    /* Stack the header so the badge/date and the booking ref never collide
       in the narrow column. */
    .next-trip-head[b-kiyqq6sw74] {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ---- mesh mini-map (decorative) ---- */
.dash-map[b-kiyqq6sw74] {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    border-radius: var(--r-lg);
    background: radial-gradient(120% 120% at 20% 10%, color-mix(in oklab, var(--primary) 16%, var(--surface-2)), var(--surface-2));
    border: 1px solid var(--line);
}

.dash-map[b-kiyqq6sw74]::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in oklab, var(--ink) 7%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklab, var(--ink) 7%, transparent) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask: radial-gradient(120% 100% at 50% 40%, #000, transparent 92%);
    mask: radial-gradient(120% 100% at 50% 40%, #000, transparent 92%);
}

.dash-map-svg[b-kiyqq6sw74] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.dash-route-line[b-kiyqq6sw74] {
    stroke: var(--primary);
    stroke-width: 4;
    fill: none;
    stroke-linecap: round;
    filter: drop-shadow(0 2px 6px color-mix(in oklab, var(--primary) 50%, transparent));
}

.dash-map-float[b-kiyqq6sw74] {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-2);
}

.dash-map-float-label[b-kiyqq6sw74] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}

.dash-map-float-time[b-kiyqq6sw74] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    line-height: var(--line-height-tight);
}

/* ---- footer: driver / vehicle row + actions ---- */
.next-trip-foot[b-kiyqq6sw74] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin: 0 calc(-1 * var(--space-5)) calc(-1 * var(--space-5));
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--line);
    background: var(--surface-3);
    border-radius: 0 0 var(--r-xl) var(--r-xl);
}

.next-trip-crew[b-kiyqq6sw74] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.next-trip-crew-icon[b-kiyqq6sw74] {
    font-size: 28px;
    color: var(--primary);
}

.next-trip-crew-text[b-kiyqq6sw74] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.next-trip-crew-primary[b-kiyqq6sw74] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.next-trip-crew-secondary[b-kiyqq6sw74] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-xs);
    color: var(--ink-2);
}

.next-trip-crew-mid[b-kiyqq6sw74] {
    color: var(--ink-3);
}

.next-trip-actions[b-kiyqq6sw74] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ==========================================================================
   Recent bookings list
   ========================================================================== */
.recent-list[b-kiyqq6sw74] {
    display: flex;
    flex-direction: column;
}

/* ==========================================================================
   "Going somewhere?" card
   ========================================================================== */
.going-somewhere[b-kiyqq6sw74] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    background: linear-gradient(150deg, var(--primary-tint), var(--surface));
    border-color: var(--primary-tint-2);
}

.going-icon[b-kiyqq6sw74] {
    font-size: 32px;
    color: var(--primary);
}

.going-copy[b-kiyqq6sw74] {
    font-size: var(--font-size-sm);
    color: var(--ink-2);
    margin: 0;
}

.going-chips[b-kiyqq6sw74] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    width: 100%;
}

.going-chip[b-kiyqq6sw74] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
    cursor: pointer;
    transition: border-color var(--transition-fast), color var(--transition-fast);
}

.going-chip .material-icons[b-kiyqq6sw74] {
    font-size: 16px;
    color: var(--primary);
}

.going-chip:hover[b-kiyqq6sw74] {
    border-color: var(--primary);
    color: var(--primary-ink);
}

/* ==========================================================================
   Account card
   ========================================================================== */
.account-head-link[b-kiyqq6sw74] {
    background: transparent;
    border: none;
    padding: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--primary-ink);
    cursor: pointer;
}

.account-head-link:hover[b-kiyqq6sw74] {
    text-decoration: underline;
}

.account-stats[b-kiyqq6sw74] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.account-stat[b-kiyqq6sw74] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition-fast);
}

.account-stat:hover[b-kiyqq6sw74] {
    border-color: var(--primary);
}

.account-stat-value[b-kiyqq6sw74] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    line-height: var(--line-height-tight);
}

.account-stat-label[b-kiyqq6sw74] {
    font-size: var(--font-size-xs);
    color: var(--ink-2);
}

.account-links[b-kiyqq6sw74] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-top: 1px solid var(--line);
    padding-top: var(--space-3);
}

.account-link[b-kiyqq6sw74] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    background: transparent;
    border: none;
    border-radius: var(--r-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.account-link:hover[b-kiyqq6sw74] {
    background: var(--surface-2);
}

.account-link > .material-icons:first-child[b-kiyqq6sw74] {
    font-size: 20px;
    color: var(--primary);
}

.account-link-chev[b-kiyqq6sw74] {
    margin-left: auto;
    font-size: 18px;
    color: var(--ink-3);
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page[b-m8lj5i7fow] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--space-8) var(--space-4);
}

.error-card[b-m8lj5i7fow] {
    width: 100%;
    max-width: 34rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-2);
    padding: var(--space-10) var(--space-8);
}

.error-glyph[b-m8lj5i7fow] {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto var(--space-5);
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    background: var(--err-bg);
    color: var(--err-ink);
}

.error-glyph .material-icons[b-m8lj5i7fow] {
    font-size: 2.25rem;
    line-height: 1;
}

.error-title[b-m8lj5i7fow] {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--ink);
}

.error-text[b-m8lj5i7fow] {
    margin: var(--space-3) auto 0;
    max-width: 26rem;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--ink-2);
}

.error-requestid[b-m8lj5i7fow] {
    margin: var(--space-6) auto 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--r-md);
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.error-requestid-label[b-m8lj5i7fow] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-3);
}

.error-requestid-value[b-m8lj5i7fow] {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--ink);
    word-break: break-all;
}

.error-actions[b-m8lj5i7fow] {
    margin-top: var(--space-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.error-btn[b-m8lj5i7fow] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.error-btn .material-icons[b-m8lj5i7fow] {
    font-size: var(--font-size-lg);
}

.error-btn-primary[b-m8lj5i7fow] {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-primary);
}

.error-btn-primary:hover[b-m8lj5i7fow] {
    background: var(--primary-hover);
}

.error-btn-primary:active[b-m8lj5i7fow] {
    background: var(--primary-press);
}

.error-btn-ghost[b-m8lj5i7fow] {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--line);
}

.error-btn-ghost:hover[b-m8lj5i7fow] {
    background: var(--surface-3);
    border-color: var(--line-2);
}

.error-btn:focus-visible[b-m8lj5i7fow] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.error-dev[b-m8lj5i7fow] {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
    text-align: left;
}

.error-dev-heading[b-m8lj5i7fow] {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
}

.error-dev-text[b-m8lj5i7fow] {
    margin: var(--space-2) 0 0;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    color: var(--ink-2);
}

.error-dev-text strong[b-m8lj5i7fow] {
    color: var(--ink);
    font-weight: var(--font-weight-semibold);
}
/* /Components/Pages/ForgotPassword.razor.rz.scp.css */
/* ==========================================================================
   Forgot Password page — request-reset card inside LoginLayout's brand panel.
   Mirrors Login.razor.css (.auth-card / .auth-heading / .input-group …).
   ========================================================================== */

.auth-card[b-n9d3p0vpl0] {
    width: 100%;
}

/* Compact logo shown above the form only on narrow screens, where the
   brand panel collapses to a slim header. Hidden on wide layouts. */
.auth-mobile-logo[b-n9d3p0vpl0] {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
}

.auth-mobile-logo .material-icons[b-n9d3p0vpl0] {
    font-size: 28px;
    color: var(--primary);
}

/* ── Heading ─────────────────────────────────────────────────────────────── */
.auth-heading[b-n9d3p0vpl0] {
    margin-bottom: var(--space-8);
}

.auth-heading h1[b-n9d3p0vpl0] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 var(--space-2);
}

.auth-heading p[b-n9d3p0vpl0] {
    color: var(--ink-2);
    margin: 0;
    font-size: var(--font-size-base);
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.login-form[b-n9d3p0vpl0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.form-hint[b-n9d3p0vpl0] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin: 0;
}

.input-group[b-n9d3p0vpl0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.input-label[b-n9d3p0vpl0] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
}

.required-mark[b-n9d3p0vpl0] {
    color: var(--err);
    margin-left: 2px;
}

.input-wrapper[b-n9d3p0vpl0] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper.has-icon .input-control[b-n9d3p0vpl0] {
    padding-left: 2.5rem;
}

.input-icon[b-n9d3p0vpl0] {
    position: absolute;
    left: var(--space-3);
    color: var(--ink-3);
    font-size: 18px;
    pointer-events: none;
}

.input-control[b-n9d3p0vpl0] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--surface);
    color: var(--ink);
}

.input-control:focus[b-n9d3p0vpl0] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px var(--primary-tint);
}

.input-control[b-n9d3p0vpl0]::placeholder {
    color: var(--ink-3);
}

/* ── Success panel ───────────────────────────────────────────────────────── */
.success-panel[b-n9d3p0vpl0] {
    text-align: center;
    padding: var(--space-6) 0;
}

.success-icon[b-n9d3p0vpl0] {
    font-size: 56px;
    color: var(--ok);
    margin-bottom: var(--space-4);
    display: block;
}

.success-panel h2[b-n9d3p0vpl0] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin: 0 0 var(--space-3);
}

.success-panel p[b-n9d3p0vpl0] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-2);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.auth-footer[b-n9d3p0vpl0] {
    text-align: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.auth-footer p[b-n9d3p0vpl0] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin: 0;
}

.auth-footer a[b-n9d3p0vpl0] {
    color: var(--primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.auth-footer a:hover[b-n9d3p0vpl0] {
    text-decoration: underline;
}

/* ==========================================================================
   Responsive — show the compact logo once the brand panel collapses
   ========================================================================== */
@media (max-width: 880px) {
    .auth-mobile-logo[b-n9d3p0vpl0] {
        display: flex;
    }

    .auth-heading h1[b-n9d3p0vpl0] {
        font-size: var(--font-size-2xl);
    }
}
/* /Components/Pages/InvoiceDetail.razor.rz.scp.css */
.invoice-detail-container[b-99k4h439fq] {
    max-width: 640px;
    margin: 0 auto;
    padding-bottom: 32px;
}

.inv-card[b-99k4h439fq] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Header */
.inv-head[b-99k4h439fq] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.inv-head-main[b-99k4h439fq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.inv-number[b-99k4h439fq] {
    font-family: var(--font-mono);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    word-break: break-word;
}

.inv-dates[b-99k4h439fq] {
    font-size: 0.8rem;
    color: var(--ink-3);
}

/* Amount hero */
.inv-amount[b-99k4h439fq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px;
    border-radius: var(--r-md);
    background: var(--primary-tint);
}

.inv-amount.is-paid[b-99k4h439fq] {
    background: var(--ok-bg);
}

.inv-amount-label[b-99k4h439fq] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}

.inv-amount-value[b-99k4h439fq] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

/* Sections */
.inv-section-title[b-99k4h439fq] {
    margin: 0 0 10px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ink);
}

.inv-empty-lines[b-99k4h439fq] {
    margin: 0;
    font-size: 0.85rem;
    color: var(--ink-3);
}

.inv-lines[b-99k4h439fq] {
    display: flex;
    flex-direction: column;
}

.inv-line[b-99k4h439fq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.inv-line:last-child[b-99k4h439fq] {
    border-bottom: none;
}

.inv-line-desc[b-99k4h439fq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.inv-line-name[b-99k4h439fq] {
    font-size: 0.9rem;
    color: var(--ink);
    word-break: break-word;
}

.inv-line-qty[b-99k4h439fq] {
    font-size: 0.78rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.inv-line-total[b-99k4h439fq] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Totals */
.inv-totals[b-99k4h439fq] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.inv-total-row[b-99k4h439fq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.inv-total-grand[b-99k4h439fq] {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
}

/* Notes */
.inv-notes[b-99k4h439fq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: var(--r-md);
    background: var(--surface-2);
}

.inv-notes-label[b-99k4h439fq] {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-3);
}

.inv-notes p[b-99k4h439fq] {
    margin: 0;
    font-size: 0.86rem;
    color: var(--ink-2);
    white-space: pre-wrap;
}
/* /Components/Pages/Invoices.razor.rz.scp.css */
.invoices-container[b-lgcjpeewki] {
    max-width: 640px;
    margin: 0 auto;
}

.invoice-list[b-lgcjpeewki] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.invoice-row[b-lgcjpeewki] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    text-align: left;
    font: inherit;
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    cursor: pointer;
    transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
}

.invoice-row:hover[b-lgcjpeewki] {
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
    border-color: var(--primary);
}

.invoice-row:focus-visible[b-lgcjpeewki] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.invoice-row-main[b-lgcjpeewki] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.invoice-number[b-lgcjpeewki] {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--ink);
    word-break: break-word;
}

.invoice-sub[b-lgcjpeewki] {
    font-size: 0.78rem;
    color: var(--ink-3);
}

.invoice-row-right[b-lgcjpeewki] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.invoice-amount[b-lgcjpeewki] {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.invoice-chevron[b-lgcjpeewki] {
    color: var(--ink-3);
    font-size: 20px;
    flex-shrink: 0;
}
/* /Components/Pages/Login.razor.rz.scp.css */
/* ==========================================================================
   Login page — premium form card, sits in LoginLayout's right content area
   ========================================================================== */

.auth-card[b-qmhfag4r4t] {
    width: 100%;
}

/* Compact logo shown above the form only on narrow screens, where the
   brand panel collapses to a slim header. Hidden on wide layouts. */
.auth-mobile-logo[b-qmhfag4r4t] {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
}

.auth-mobile-logo .material-icons[b-qmhfag4r4t] {
    font-size: 28px;
    color: var(--primary);
}

/* ── Heading ─────────────────────────────────────────────────────────────── */
.auth-heading[b-qmhfag4r4t] {
    margin-bottom: var(--space-6);
}

.auth-heading h1[b-qmhfag4r4t] {
    font-size: 26px;
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.025em;
    color: var(--ink);
    margin: 0 0 var(--space-2);
}

.auth-heading p[b-qmhfag4r4t] {
    color: var(--ink-2);
    margin: 0;
    font-size: var(--font-size-sm);
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.login-form[b-qmhfag4r4t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.input-group[b-qmhfag4r4t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.input-label[b-qmhfag4r4t] {
    font-size: 12.5px;
    font-weight: var(--font-weight-semibold);
    color: var(--ink-2);
}

.required-mark[b-qmhfag4r4t] {
    color: var(--err);
    margin-left: 2px;
}

/* Password label row: label left, "Forgot password?" pushed to the right. */
.label-row[b-qmhfag4r4t] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

.label-row .input-label[b-qmhfag4r4t] {
    margin: 0;
}

.label-row .forgot-link[b-qmhfag4r4t] {
    font-size: 12px;
    color: var(--primary-ink);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.label-row .forgot-link:hover[b-qmhfag4r4t] {
    text-decoration: underline;
}

.input-wrapper[b-qmhfag4r4t] {
    position: relative;
    display: flex;
    align-items: center;
}

/* THE FIX: left padding so the field text/placeholder clears the leading icon
   (previously the icon rendered on top of "Enter your email"). */
.input-wrapper.has-icon .input-control[b-qmhfag4r4t] {
    padding-left: 40px;
}

.input-icon[b-qmhfag4r4t] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    font-size: 18px;
    pointer-events: none;
}

.input-control[b-qmhfag4r4t] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--surface);
    color: var(--ink);
}

.input-control:focus[b-qmhfag4r4t] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px var(--primary-tint);
}

.input-control[b-qmhfag4r4t]::placeholder {
    color: var(--ink-3);
}

/* ── Keep-me-signed-in row ───────────────────────────────────────────────── */
.form-options[b-qmhfag4r4t] {
    display: flex;
    align-items: center;
    margin: var(--space-1) 0 var(--space-2);
}

.checkbox-label[b-qmhfag4r4t] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--ink-2);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"][b-qmhfag4r4t] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.auth-footer[b-qmhfag4r4t] {
    text-align: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.auth-footer p[b-qmhfag4r4t] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin: 0;
}

.auth-footer a[b-qmhfag4r4t] {
    color: var(--primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.auth-footer a:hover[b-qmhfag4r4t] {
    text-decoration: underline;
}

/* ==========================================================================
   Tenant picker (step 2 of multi-membership login)
   ========================================================================== */
.picker-hint[b-qmhfag4r4t] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
}

.radio-option[b-qmhfag4r4t] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    margin-bottom: var(--space-2);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.radio-option:hover[b-qmhfag4r4t] {
    border-color: var(--primary);
    background: var(--primary-tint);
}

.radio-option input[type="radio"][b-qmhfag4r4t] {
    margin-top: 3px;
    accent-color: var(--primary);
    flex-shrink: 0;
}

.radio-label[b-qmhfag4r4t] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    flex: 1;
}

.radio-org[b-qmhfag4r4t] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.radio-company[b-qmhfag4r4t] {
    font-size: var(--font-size-xs);
    color: var(--ink-2);
}

.picker-back[b-qmhfag4r4t] {
    text-align: center;
    margin-top: var(--space-3);
}

.picker-back a[b-qmhfag4r4t] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    text-decoration: none;
}

.picker-back a:hover[b-qmhfag4r4t] {
    color: var(--primary);
    text-decoration: underline;
}

/* ==========================================================================
   Responsive — show the compact logo once the brand panel collapses
   ========================================================================== */
@media (max-width: 880px) {
    /* The collapsed brand panel already shows the logo + headline on mobile,
       so the separate .auth-mobile-logo would duplicate it — keep it hidden. */
    .auth-heading h1[b-qmhfag4r4t] {
        font-size: var(--font-size-2xl);
        letter-spacing: -0.02em;
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.notfound[b-nw10gzytfk] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: var(--space-8) var(--space-4);
}

.notfound-card[b-nw10gzytfk] {
    width: 100%;
    max-width: 28rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    box-shadow: var(--shadow-2);
    padding: var(--space-10) var(--space-8);
}

.notfound-glyph[b-nw10gzytfk] {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto var(--space-5);
    display: grid;
    place-items: center;
    border-radius: var(--r-full);
    background: var(--primary-tint);
    color: var(--primary-ink);
}

.notfound-glyph .material-icons[b-nw10gzytfk] {
    font-size: 2.25rem;
    line-height: 1;
}

.notfound-code[b-nw10gzytfk] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.18em;
    color: var(--ink-3);
}

.notfound-title[b-nw10gzytfk] {
    margin: var(--space-2) 0 0;
    font-family: var(--font-sans);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--ink);
}

.notfound-text[b-nw10gzytfk] {
    margin: var(--space-3) auto 0;
    max-width: 22rem;
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--ink-2);
}

.notfound-actions[b-nw10gzytfk] {
    margin-top: var(--space-8);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    justify-content: center;
}

.notfound-btn[b-nw10gzytfk] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--r-md);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.notfound-btn .material-icons[b-nw10gzytfk] {
    font-size: var(--font-size-lg);
}

.notfound-btn-primary[b-nw10gzytfk] {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-primary);
}

.notfound-btn-primary:hover[b-nw10gzytfk] {
    background: var(--primary-hover);
}

.notfound-btn-primary:active[b-nw10gzytfk] {
    background: var(--primary-press);
}

.notfound-btn-ghost[b-nw10gzytfk] {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--line);
}

.notfound-btn-ghost:hover[b-nw10gzytfk] {
    background: var(--surface-3);
    border-color: var(--line-2);
}

.notfound-btn:focus-visible[b-nw10gzytfk] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}
/* /Components/Pages/Profile.razor.rz.scp.css */
/* ==========================================================================
   Profile — account hub (Profile + Settings tabs)
   ========================================================================== */

.profile-container[b-l2zvu4rebp] {
    padding: var(--space-4);
    max-width: 800px;
    margin: 0 auto;
}

/* ── Account header band ──────────────────────────────────────────────────
   Premium hero card: large avatar + name + email, on a soft tinted gradient. */
.account-header[b-l2zvu4rebp] {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
    padding: var(--space-6);
    background: linear-gradient(150deg, var(--primary-tint), var(--surface));
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-1);
}

.account-header[b-l2zvu4rebp]  .account-avatar {
    box-shadow: var(--shadow-primary);
}

.account-identity[b-l2zvu4rebp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.account-name[b-l2zvu4rebp] {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    letter-spacing: -0.01em;
    line-height: var(--line-height-tight);
}

.account-email[b-l2zvu4rebp] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--ink-2);
}

.account-email .material-icons[b-l2zvu4rebp] {
    font-size: 17px;
    color: var(--ink-3);
}

.account-meta[b-l2zvu4rebp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.account-chip[b-l2zvu4rebp] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--r-full);
    background: var(--surface);
    border: 1px solid var(--line);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--ink-2);
}

.account-chip .material-icons[b-l2zvu4rebp] {
    font-size: 15px;
    color: var(--ink-3);
}

.account-chip-primary[b-l2zvu4rebp] {
    background: var(--primary-tint);
    border-color: transparent;
    color: var(--primary-ink);
}

.account-chip-primary .material-icons[b-l2zvu4rebp] {
    color: var(--primary);
}

/* Profile tab: stack the section cards */
.profile-tab[b-l2zvu4rebp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ── Section header inside each Card ──────────────────────────────────────── */
.section-header[b-l2zvu4rebp] {
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line-2);
}

.section-header h3[b-l2zvu4rebp] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.section-header h3 .material-icons[b-l2zvu4rebp] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    background: var(--primary-tint);
    font-size: 19px;
    color: var(--primary-ink);
}

/* ── Form body ───────────────────────────────────────────────────────────── */
.section-content[b-l2zvu4rebp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.form-row[b-l2zvu4rebp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.section-actions[b-l2zvu4rebp] {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--space-5);
}

/* ── Read-only info rows (Organisation) ──────────────────────────────────── */
.info-row[b-l2zvu4rebp] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line-2);
}

.info-row:last-child[b-l2zvu4rebp] {
    border-bottom: none;
}

.info-label[b-l2zvu4rebp] {
    font-size: var(--font-size-sm);
    color: var(--ink-2);
}

.info-value[b-l2zvu4rebp] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
    text-align: right;
}

/* ── Hint footer ─────────────────────────────────────────────────────────── */
.section-hint[b-l2zvu4rebp] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: var(--info-bg);
    border-radius: var(--r-md);
    font-size: var(--font-size-xs);
    color: var(--info-ink);
}

.section-hint .hint-icon[b-l2zvu4rebp] {
    font-size: 18px;
    color: var(--info);
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .form-row[b-l2zvu4rebp] {
        grid-template-columns: 1fr;
    }

    .account-header[b-l2zvu4rebp] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
        padding: var(--space-5);
    }
}
/* /Components/Pages/Register.razor.rz.scp.css */
/* ==========================================================================
   Register page — form card inside LoginLayout's split brand panel.
   Mirrors Login.razor.css (.auth-card / .auth-heading / .input-group …).
   ========================================================================== */

.auth-card[b-4ay502b5jb] {
    width: 100%;
}

/* Compact logo shown above the form only on narrow screens, where the
   brand panel collapses to a slim header. Hidden on wide layouts. */
.auth-mobile-logo[b-4ay502b5jb] {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
}

.auth-mobile-logo .material-icons[b-4ay502b5jb] {
    font-size: 28px;
    color: var(--primary);
}

/* ── Heading ─────────────────────────────────────────────────────────────── */
.auth-heading[b-4ay502b5jb] {
    margin-bottom: var(--space-8);
}

.auth-heading h1[b-4ay502b5jb] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 var(--space-2);
}

.auth-heading p[b-4ay502b5jb] {
    color: var(--ink-2);
    margin: 0;
    font-size: var(--font-size-base);
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.login-form[b-4ay502b5jb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.form-row[b-4ay502b5jb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

.input-group[b-4ay502b5jb] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.input-label[b-4ay502b5jb] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
}

.required-mark[b-4ay502b5jb] {
    color: var(--err);
    margin-left: 2px;
}

.optional-mark[b-4ay502b5jb] {
    color: var(--ink-3);
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xs);
}

.input-wrapper[b-4ay502b5jb] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper.has-icon .input-control[b-4ay502b5jb] {
    padding-left: 2.5rem;
}

.input-icon[b-4ay502b5jb] {
    position: absolute;
    left: var(--space-3);
    color: var(--ink-3);
    font-size: 18px;
    pointer-events: none;
}

.input-control[b-4ay502b5jb] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--surface);
    color: var(--ink);
}

.input-control:focus[b-4ay502b5jb] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px var(--primary-tint);
}

.input-control[b-4ay502b5jb]::placeholder {
    color: var(--ink-3);
}

/* ── Success panel ───────────────────────────────────────────────────────── */
.success-panel[b-4ay502b5jb] {
    text-align: center;
    padding: var(--space-6) 0;
}

.success-icon[b-4ay502b5jb] {
    font-size: 56px;
    color: var(--ok);
    margin-bottom: var(--space-4);
    display: block;
}

.success-panel h2[b-4ay502b5jb] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin: 0 0 var(--space-3);
}

.success-panel p[b-4ay502b5jb] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-2);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.auth-footer[b-4ay502b5jb] {
    text-align: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.auth-footer p[b-4ay502b5jb] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin: 0;
}

.auth-footer a[b-4ay502b5jb] {
    color: var(--primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.auth-footer a:hover[b-4ay502b5jb] {
    text-decoration: underline;
}

/* ==========================================================================
   Responsive — show the compact logo once the brand panel collapses
   ========================================================================== */
@media (max-width: 880px) {
    .auth-mobile-logo[b-4ay502b5jb] {
        display: flex;
    }

    .auth-heading h1[b-4ay502b5jb] {
        font-size: var(--font-size-2xl);
    }
}

@media (max-width: 480px) {
    .form-row[b-4ay502b5jb] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
/* ==========================================================================
   Reset Password page — new-password card inside LoginLayout's brand panel.
   Mirrors Login.razor.css (.auth-card / .auth-heading / .input-group …).
   ========================================================================== */

.auth-card[b-va2uaa7ya1] {
    width: 100%;
}

/* Compact logo shown above the form only on narrow screens, where the
   brand panel collapses to a slim header. Hidden on wide layouts. */
.auth-mobile-logo[b-va2uaa7ya1] {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
}

.auth-mobile-logo .material-icons[b-va2uaa7ya1] {
    font-size: 28px;
    color: var(--primary);
}

/* ── Heading ─────────────────────────────────────────────────────────────── */
.auth-heading[b-va2uaa7ya1] {
    margin-bottom: var(--space-8);
}

.auth-heading h1[b-va2uaa7ya1] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 var(--space-2);
}

.auth-heading p[b-va2uaa7ya1] {
    color: var(--ink-2);
    margin: 0;
    font-size: var(--font-size-base);
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.login-form[b-va2uaa7ya1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.input-group[b-va2uaa7ya1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.input-label[b-va2uaa7ya1] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
}

.required-mark[b-va2uaa7ya1] {
    color: var(--err);
    margin-left: 2px;
}

.input-wrapper[b-va2uaa7ya1] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper.has-icon .input-control[b-va2uaa7ya1] {
    padding-left: 2.5rem;
}

.input-icon[b-va2uaa7ya1] {
    position: absolute;
    left: var(--space-3);
    color: var(--ink-3);
    font-size: 18px;
    pointer-events: none;
}

.input-control[b-va2uaa7ya1] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--surface);
    color: var(--ink);
}

.input-control:focus[b-va2uaa7ya1] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px var(--primary-tint);
}

.input-control[b-va2uaa7ya1]::placeholder {
    color: var(--ink-3);
}

/* ── Success panel ───────────────────────────────────────────────────────── */
.success-panel[b-va2uaa7ya1] {
    text-align: center;
    padding: var(--space-6) 0;
}

.success-icon[b-va2uaa7ya1] {
    font-size: 56px;
    color: var(--ok);
    margin-bottom: var(--space-4);
    display: block;
}

.success-panel h2[b-va2uaa7ya1] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin: 0 0 var(--space-3);
}

.success-panel p[b-va2uaa7ya1] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-2);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.auth-footer[b-va2uaa7ya1] {
    text-align: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.auth-footer p[b-va2uaa7ya1] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin: 0;
}

.auth-footer a[b-va2uaa7ya1] {
    color: var(--primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.auth-footer a:hover[b-va2uaa7ya1] {
    text-decoration: underline;
}

/* ==========================================================================
   Responsive — show the compact logo once the brand panel collapses
   ========================================================================== */
@media (max-width: 880px) {
    .auth-mobile-logo[b-va2uaa7ya1] {
        display: flex;
    }

    .auth-heading h1[b-va2uaa7ya1] {
        font-size: var(--font-size-2xl);
    }
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* ==========================================================================
   Settings — standalone /settings shell.
   The settings body itself lives in the shared SettingsSection component
   (SettingsSection.razor.css). This page only owns the page container.
   ========================================================================== */

.settings-container[b-vix8c3rs2b] {
    padding: var(--space-4);
    max-width: 800px;
    margin: 0 auto;
}
/* /Components/Pages/SettingsSection.razor.rz.scp.css */
/* ==========================================================================
   SettingsSection — shared account-preferences body
   (rendered by both /settings and the Profile "Settings" tab)
   ========================================================================== */

.settings-body[b-xtd1k1eynd] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ── Group header inside each Card ───────────────────────────────────────── */
.settings-group-head[b-xtd1k1eynd] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--line-2);
}

.settings-group-head h3[b-xtd1k1eynd] {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.settings-group-head .material-icons[b-xtd1k1eynd] {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-md);
    background: var(--primary-tint);
    font-size: 19px;
    color: var(--primary-ink);
}

.settings-group-head.danger h3[b-xtd1k1eynd] {
    color: var(--err-ink);
}

.settings-group-head.danger .material-icons[b-xtd1k1eynd] {
    background: var(--err-bg);
    color: var(--err);
}

/* ── Settings list ───────────────────────────────────────────────────────── */
.settings-list[b-xtd1k1eynd] {
    display: flex;
    flex-direction: column;
}

.setting-item[b-xtd1k1eynd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line-2);
}

.setting-item:last-child[b-xtd1k1eynd] {
    border-bottom: none;
}

.setting-item.clickable[b-xtd1k1eynd] {
    cursor: pointer;
    margin: 0 calc(-1 * var(--space-2));
    padding-left: var(--space-2);
    padding-right: var(--space-2);
    border-radius: var(--r-md);
    transition: background var(--transition-fast);
}

.setting-item.clickable:hover[b-xtd1k1eynd] {
    background: var(--surface-2);
}

.setting-item.danger .setting-title[b-xtd1k1eynd] {
    color: var(--err-ink);
}

.setting-info[b-xtd1k1eynd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.setting-title[b-xtd1k1eynd] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
}

.setting-description[b-xtd1k1eynd] {
    font-size: var(--font-size-xs);
    color: var(--ink-3);
}

.setting-item .chev[b-xtd1k1eynd] {
    font-size: 20px;
    color: var(--ink-3);
    flex-shrink: 0;
}

/* ── Toggle switch ───────────────────────────────────────────────────────── */
.toggle-switch[b-xtd1k1eynd] {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
    cursor: pointer;
}

.toggle-switch input[b-xtd1k1eynd] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider[b-xtd1k1eynd] {
    position: absolute;
    inset: 0;
    cursor: pointer;
    background: var(--ink-3);
    transition: background var(--transition-base);
    border-radius: var(--r-full);
}

.toggle-slider[b-xtd1k1eynd]::before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: var(--surface);
    transition: transform var(--transition-base);
    border-radius: var(--r-full);
    box-shadow: var(--shadow-1);
}

.toggle-switch input:checked + .toggle-slider[b-xtd1k1eynd] {
    background: var(--primary);
}

.toggle-switch input:checked + .toggle-slider[b-xtd1k1eynd]::before {
    transform: translateX(18px);
}

.toggle-switch input:focus-visible + .toggle-slider[b-xtd1k1eynd] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* ── Theme options ───────────────────────────────────────────────────────── */
.theme-options[b-xtd1k1eynd] {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--line-2);
}

.theme-option[b-xtd1k1eynd] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface);
    border: 1.5px solid var(--line);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.theme-option:hover[b-xtd1k1eynd] {
    border-color: var(--primary);
}

.theme-option.selected[b-xtd1k1eynd] {
    border-color: var(--primary);
    background: var(--primary-tint);
}

.theme-option .material-icons[b-xtd1k1eynd] {
    font-size: 26px;
    color: var(--primary);
}

.theme-option span:last-child[b-xtd1k1eynd] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
}

/* ── Language options ────────────────────────────────────────────────────── */
.language-options[b-xtd1k1eynd] {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--line-2);
}

.language-option[b-xtd1k1eynd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3);
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--ink);
    transition: background var(--transition-fast);
}

.language-option:hover[b-xtd1k1eynd] {
    background: var(--surface-2);
}

.language-option.selected[b-xtd1k1eynd] {
    background: var(--primary);
    color: var(--on-primary);
}

.language-option .material-icons[b-xtd1k1eynd] {
    font-size: 20px;
}

/* ── Danger card accent ──────────────────────────────────────────────────── */
.settings-danger-card[b-xtd1k1eynd]  .card {
    border-color: var(--err-bg);
}

/* ── Save ────────────────────────────────────────────────────────────────── */
.settings-save[b-xtd1k1eynd] {
    margin-top: var(--space-1);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .theme-options[b-xtd1k1eynd] {
        flex-direction: column;
    }

    .theme-option[b-xtd1k1eynd] {
        flex-direction: row;
        justify-content: flex-start;
        padding: var(--space-3) var(--space-4);
    }

    .theme-option .material-icons[b-xtd1k1eynd] {
        font-size: 22px;
    }
}
/* /Components/Pages/Support.razor.rz.scp.css */
/* Support / Live Chat — redesign tokens throughout.
   Layout: full-height two-panel chat (conversations list + thread).
   Mobile: stacked (list above thread). */

/* ── Page shell ─────────────────────────────────────────────────────────────── */
.support-page[b-p3nfl8xgqf] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 64px); /* full height minus nav bar */
    max-width: 960px;
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.support-loading[b-p3nfl8xgqf] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

/* ── Two-panel chat layout ──────────────────────────────────────────────────── */
.chat-layout[b-p3nfl8xgqf] {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-4);
    flex: 1;
    min-height: 0;
    padding-bottom: var(--space-4);
}

/* ── Conversations panel (left) ─────────────────────────────────────────────── */
.conversations-panel[b-p3nfl8xgqf] {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.conversations-header[b-p3nfl8xgqf] {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line-2);
}

.conversations-title[b-p3nfl8xgqf] {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.conversations-list[b-p3nfl8xgqf] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* ── Conversation item ──────────────────────────────────────────────────────── */
.conversation-item[b-p3nfl8xgqf] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--line-2);
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--ink);
    transition: background var(--transition-fast);
    position: relative;
}

.conversation-item:last-child[b-p3nfl8xgqf] {
    border-bottom: none;
}

.conversation-item:hover[b-p3nfl8xgqf] {
    background: var(--surface-2);
}

.conversation-item.active[b-p3nfl8xgqf] {
    background: var(--primary-tint);
    border-left: 3px solid var(--primary);
    padding-left: calc(var(--space-4) - 3px);
}

.conv-icon-wrap[b-p3nfl8xgqf] {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: var(--r-md);
    background: var(--primary-tint);
    color: var(--primary-ink);
}

.conversation-item.active .conv-icon-wrap[b-p3nfl8xgqf] {
    background: color-mix(in oklab, var(--primary) 20%, transparent);
}

[data-theme="dark"] .conv-icon-wrap[b-p3nfl8xgqf] {
    color: var(--primary);
}

.conv-icon[b-p3nfl8xgqf] {
    font-size: 18px;
}

.conv-details[b-p3nfl8xgqf] {
    flex: 1;
    min-width: 0;
}

.conv-top[b-p3nfl8xgqf] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-1);
}

.conv-title-wrap[b-p3nfl8xgqf] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    min-width: 0;
}

.conv-subject[b-p3nfl8xgqf] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-tag-trip[b-p3nfl8xgqf] {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    line-height: 1;
    padding: 2px 6px;
    border-radius: var(--r-sm, 6px);
    background: var(--primary-soft, #e0edff);
    color: var(--primary, #2563eb);
    font-weight: var(--font-weight-semibold);
}

.conv-time[b-p3nfl8xgqf] {
    font-size: var(--font-size-xs);
    color: var(--ink-3);
    white-space: nowrap;
    flex-shrink: 0;
}

.conv-preview[b-p3nfl8xgqf] {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--ink-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Unread badge ───────────────────────────────────────────────────────────── */
.unread-badge[b-p3nfl8xgqf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 var(--space-1);
    border-radius: var(--r-full);
    background: var(--primary);
    color: var(--on-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
    line-height: 1;
    align-self: center;
}

/* ── Thread panel (right) ───────────────────────────────────────────────────── */
.thread-panel[b-p3nfl8xgqf] {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    min-height: 0;
}

.thread-empty[b-p3nfl8xgqf] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* ── Responsive — mobile: stack panels ─────────────────────────────────────── */
@media (max-width: 640px) {
    .support-page[b-p3nfl8xgqf] {
        height: auto;
        padding: 0 var(--space-3);
    }

    .chat-layout[b-p3nfl8xgqf] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .conversations-panel[b-p3nfl8xgqf] {
        max-height: 220px;
    }

    .thread-panel[b-p3nfl8xgqf] {
        min-height: 400px;
        height: 60vh;
    }

}
/* /Components/Pages/VehicleTracking.razor.rz.scp.css */
/* Vehicle Tracking — restyled chrome around the live Leaflet + SignalR vehicle map.
   Map tiles are Leaflet's own; only the overlay chrome and docked panel are tokenized here.
   The realtime/SignalR/JS-interop pipeline and the #map div hook are untouched. */

.material-icons[b-advs7u0pe9] {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

.tracking-page[b-advs7u0pe9] {
    position: relative;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    background: var(--bg);
}

/* Loading / not-found states fill the viewport */
.full-state[b-advs7u0pe9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    padding: var(--space-6);
}

/* Full-bleed map layer */
.map-layer[b-advs7u0pe9] {
    position: absolute;
    inset: 0;
    z-index: var(--z-sticky);
}

.map[b-advs7u0pe9] {
    width: 100%;
    height: 100%;
}

.map-placeholder[b-advs7u0pe9] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-3);
    text-align: center;
}

.map-placeholder .material-icons[b-advs7u0pe9] {
    font-size: 40px;
}

.map-placeholder p[b-advs7u0pe9] {
    margin: 0;
    color: var(--ink-3);
}

/* Floating overlay chrome */
.overlay-top-left[b-advs7u0pe9] {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    z-index: var(--z-fixed);
}

.overlay-top-right[b-advs7u0pe9] {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    z-index: var(--z-fixed);
}

.overlay-eta[b-advs7u0pe9] {
    position: absolute;
    top: 50%;
    right: var(--space-4);
    transform: translateY(-50%);
    z-index: var(--z-fixed);
}

/* Docked bottom panel */
.bottom-sheet[b-advs7u0pe9] {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top-left-radius: var(--r-xl);
    border-top-right-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
    z-index: var(--z-modal);
    max-height: 50vh;
    overflow-y: auto;
}

.sheet-handle[b-advs7u0pe9] {
    display: flex;
    justify-content: center;
    padding: var(--space-3) 0 var(--space-2);
}

.handle-bar[b-advs7u0pe9] {
    width: 40px;
    height: 4px;
    background: var(--line);
    border-radius: var(--r-full);
}

/* Vehicle section */
.vehicle-section[b-advs7u0pe9] {
    padding: 0 var(--space-5) var(--space-5);
}

.vehicle-header[b-advs7u0pe9] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--line);
    margin-bottom: var(--space-4);
}

.vehicle-icon[b-advs7u0pe9] {
    font-size: 40px;
    color: var(--ink);
}

.vehicle-details[b-advs7u0pe9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.vehicle-details h3[b-advs7u0pe9] {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    letter-spacing: 0.04em;
}

.location-details[b-advs7u0pe9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.detail-row[b-advs7u0pe9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-label[b-advs7u0pe9] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
}

.detail-value[b-advs7u0pe9] {
    font-weight: var(--font-weight-medium);
    color: var(--ink);
    font-size: var(--font-size-sm);
}

/* Leaflet overrides for this page */
[b-advs7u0pe9] .leaflet-container {
    font-family: inherit;
}

[b-advs7u0pe9] .leaflet-popup-content-wrapper {
    border-radius: var(--r-md);
}

[b-advs7u0pe9] .leaflet-popup-content {
    margin: var(--space-3) var(--space-4);
}

/* Responsive — centre the docked panel on wider viewports */
@media (min-width: 768px) {
    .bottom-sheet[b-advs7u0pe9] {
        max-width: 480px;
        left: 50%;
        transform: translateX(-50%);
    }
}
/* /Components/Pages/VerifyEmail.razor.rz.scp.css */
/* ==========================================================================
   Verify Email page — status + resend card inside LoginLayout's brand panel.
   Mirrors Login.razor.css (.auth-card / .auth-heading / .input-group …).
   ========================================================================== */

.auth-card[b-5ofvw5jmfp] {
    width: 100%;
}

/* Compact logo shown above the content only on narrow screens, where the
   brand panel collapses to a slim header. Hidden on wide layouts. */
.auth-mobile-logo[b-5ofvw5jmfp] {
    display: none;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
}

.auth-mobile-logo .material-icons[b-5ofvw5jmfp] {
    font-size: 28px;
    color: var(--primary);
}

/* ── Heading ─────────────────────────────────────────────────────────────── */
.auth-heading[b-5ofvw5jmfp] {
    margin-bottom: var(--space-8);
}

.auth-heading h1[b-5ofvw5jmfp] {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.02em;
    color: var(--ink);
    margin: 0 0 var(--space-2);
}

.auth-heading p[b-5ofvw5jmfp] {
    color: var(--ink-2);
    margin: 0;
    font-size: var(--font-size-base);
}

/* ── Form ────────────────────────────────────────────────────────────────── */
.login-form[b-5ofvw5jmfp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.form-hint[b-5ofvw5jmfp] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin: 0;
}

.input-group[b-5ofvw5jmfp] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.input-label[b-5ofvw5jmfp] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
}

.required-mark[b-5ofvw5jmfp] {
    color: var(--err);
    margin-left: 2px;
}

.input-wrapper[b-5ofvw5jmfp] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-wrapper.has-icon .input-control[b-5ofvw5jmfp] {
    padding-left: 2.5rem;
}

.input-icon[b-5ofvw5jmfp] {
    position: absolute;
    left: var(--space-3);
    color: var(--ink-3);
    font-size: 18px;
    pointer-events: none;
}

.input-control[b-5ofvw5jmfp] {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-size: var(--font-size-base);
    border: 1px solid var(--line-2);
    border-radius: var(--r-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    background: var(--surface);
    color: var(--ink);
}

.input-control:focus[b-5ofvw5jmfp] {
    outline: none;
    border-color: var(--ring);
    box-shadow: 0 0 0 3px var(--primary-tint);
}

.input-control[b-5ofvw5jmfp]::placeholder {
    color: var(--ink-3);
}

/* ── Success panel ───────────────────────────────────────────────────────── */
.success-panel[b-5ofvw5jmfp] {
    text-align: center;
    padding: var(--space-6) 0;
}

.success-icon[b-5ofvw5jmfp] {
    font-size: 56px;
    color: var(--ok);
    margin-bottom: var(--space-4);
    display: block;
}

.success-panel h2[b-5ofvw5jmfp] {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
    margin: 0 0 var(--space-3);
}

.success-panel p[b-5ofvw5jmfp] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin: 0 0 var(--space-2);
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.auth-footer[b-5ofvw5jmfp] {
    text-align: center;
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line);
}

.auth-footer p[b-5ofvw5jmfp] {
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    margin: 0;
}

.auth-footer a[b-5ofvw5jmfp] {
    color: var(--primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.auth-footer a:hover[b-5ofvw5jmfp] {
    text-decoration: underline;
}

/* ==========================================================================
   Responsive — show the compact logo once the brand panel collapses
   ========================================================================== */
@media (max-width: 880px) {
    .auth-mobile-logo[b-5ofvw5jmfp] {
        display: flex;
    }

    .auth-heading h1[b-5ofvw5jmfp] {
        font-size: var(--font-size-2xl);
    }
}
/* /Components/Shared/Alert.razor.rz.scp.css */
/* Alert Component Styles */
.alert[b-ak7f9s5wd8] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 15px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    margin-bottom: var(--space-4);
    font-size: 13.5px;
    line-height: 1.45;
    animation: alertSlideIn-b-ak7f9s5wd8 0.2s ease-out;
}

@keyframes alertSlideIn-b-ak7f9s5wd8 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Type Variants — success→ok, error/danger→err */
.alert-info[b-ak7f9s5wd8] {
    background: var(--info-bg);
    color: var(--info-ink);
    border-color: color-mix(in oklab, var(--info) 28%, transparent);
}

.alert-success[b-ak7f9s5wd8] {
    background: var(--ok-bg);
    color: var(--ok-ink);
    border-color: color-mix(in oklab, var(--ok) 28%, transparent);
}

.alert-warning[b-ak7f9s5wd8] {
    background: var(--warn-bg);
    color: var(--warn-ink);
    border-color: color-mix(in oklab, var(--warn) 30%, transparent);
}

.alert-error[b-ak7f9s5wd8] {
    background: var(--err-bg);
    color: var(--err-ink);
    border-color: color-mix(in oklab, var(--err) 30%, transparent);
}

/* Icon — Material icon rendered as a span; size + flex-none to match svg spec */
.alert-icon[b-ak7f9s5wd8] {
    flex: none;
    font-size: 18px;
    line-height: 1;
    margin-top: 1px;
}

/* Content */
.alert-content[b-ak7f9s5wd8] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.alert-title[b-ak7f9s5wd8] {
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
}

.alert-message[b-ak7f9s5wd8] {
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

/* Dismiss Button */
.alert-dismiss[b-ak7f9s5wd8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: var(--space-1);
    margin: calc(-1 * var(--space-1));
    cursor: pointer;
    border-radius: var(--r-sm);
    opacity: 0.7;
    transition: opacity var(--transition-fast), background-color var(--transition-fast);
    color: inherit;
}

.alert-dismiss:hover[b-ak7f9s5wd8] {
    opacity: 1;
    background-color: color-mix(in oklab, currentColor 12%, transparent);
}

.alert-dismiss .material-icons[b-ak7f9s5wd8] {
    font-size: 18px;
}
/* /Components/Shared/Avatar.razor.rz.scp.css */
/* Avatar Component Styles */
.avatar[b-7qfv1dxpbc] {
    position: relative;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    flex: none;
    overflow: hidden;
}

/* Size Variants */
.avatar-xs[b-7qfv1dxpbc] {
    width: 24px;
    height: 24px;
    font-size: 10px;
}

.avatar-sm[b-7qfv1dxpbc] {
    width: 32px;
    height: 32px;
    font-size: 12px;
}

.avatar-md[b-7qfv1dxpbc] {
    width: 40px;
    height: 40px;
    font-size: 14px;
}

.avatar-lg[b-7qfv1dxpbc] {
    width: 56px;
    height: 56px;
    font-size: 18px;
}

.avatar-xl[b-7qfv1dxpbc] {
    width: 80px;
    height: 80px;
    font-size: 24px;
}

/* Image */
.avatar-image[b-7qfv1dxpbc] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* Initials — gradient + white text, no inline background */
.avatar-initials[b-7qfv1dxpbc] {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    color: #fff;
    font-weight: 600;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    background: linear-gradient(140deg, var(--primary), var(--primary-deep));
    border-radius: 50%;
}

/* Online Status Indicator */
.avatar-status[b-7qfv1dxpbc] {
    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    border: 2px solid var(--surface);
}

.avatar-xs .avatar-status[b-7qfv1dxpbc] {
    width: 8px;
    height: 8px;
    border-width: 1px;
}

.avatar-sm .avatar-status[b-7qfv1dxpbc] {
    width: 10px;
    height: 10px;
}

.avatar-md .avatar-status[b-7qfv1dxpbc] {
    width: 12px;
    height: 12px;
}

.avatar-lg .avatar-status[b-7qfv1dxpbc] {
    width: 14px;
    height: 14px;
}

.avatar-xl .avatar-status[b-7qfv1dxpbc] {
    width: 18px;
    height: 18px;
    border-width: 3px;
}

.status-online[b-7qfv1dxpbc] {
    background-color: var(--ok);
}

.status-offline[b-7qfv1dxpbc] {
    background-color: var(--ink-3);
}

/* Avatar Group (for stacking) */
.avatar-group[b-7qfv1dxpbc] {
    display: flex;
    flex-direction: row-reverse;
}

.avatar-group .avatar[b-7qfv1dxpbc] {
    margin-left: -8px;
    border: 2px solid var(--surface);
}

.avatar-group .avatar:last-child[b-7qfv1dxpbc] {
    margin-left: 0;
}
/* /Components/Shared/BookingCard.razor.rz.scp.css */
/* BookingCard Component Styles — trip-card (full) + booking-row (compact) */

/* ============================================================
   Full trip card
   ============================================================ */
.trip-card[b-r5n0pe7czs] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.trip-card:hover[b-r5n0pe7czs] {
    border-color: var(--primary);
    box-shadow: var(--shadow-2);
    transform: translateY(-1px);
}

/* Completed / cancelled trips read slightly muted */
.trip-card.is-muted[b-r5n0pe7czs] {
    opacity: 0.86;
}

.trip-card.is-muted:hover[b-r5n0pe7czs] {
    opacity: 1;
}

/* Date badge */
.trip-day[b-r5n0pe7czs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: var(--r-md);
    background: var(--primary-tint);
    color: var(--primary-ink);
    line-height: 1.05;
}

[data-theme="dark"] .trip-day[b-r5n0pe7czs] {
    color: var(--primary);
}

/* Completed trips tint the badge to the success palette */
.trip-day.is-completed[b-r5n0pe7czs] {
    background: var(--ok-bg);
    color: var(--ok-ink);
}

.trip-day b[b-r5n0pe7czs] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.trip-day span[b-r5n0pe7czs] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
}

/* Body: route + meta */
.trip-body[b-r5n0pe7czs] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.trip-route[b-r5n0pe7czs] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.trip-place[b-r5n0pe7czs] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 38%;
}

.trip-arrow[b-r5n0pe7czs] {
    font-size: var(--font-size-base);
    color: var(--ink-3);
    flex: none;
}

.trip-meta[b-r5n0pe7czs] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    font-size: var(--font-size-xs);
    color: var(--ink-2);
    min-width: 0;
}

.trip-time[b-r5n0pe7czs],
.trip-pax[b-r5n0pe7czs],
.trip-vehicle[b-r5n0pe7czs] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trip-vehicle[b-r5n0pe7czs] {
    color: var(--ink-2);
}

/* Right: price + reference */
.trip-right[b-r5n0pe7czs] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-1);
    flex: none;
    text-align: right;
}

.trip-amt[b-r5n0pe7czs] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
}

.trip-ref[b-r5n0pe7czs] {
    font-size: var(--font-size-xs);
    color: var(--ink-3);
}

/* Contextual action (Track / Manage / Rebook) */
.trip-action[b-r5n0pe7czs] {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.trip-action:hover[b-r5n0pe7czs] {
    background: var(--surface-2);
    border-color: var(--primary);
    color: var(--primary-ink);
}

.trip-action:focus-visible[b-r5n0pe7czs] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Narrow viewports: date badge + route own row 1 (full remaining width, no
   squashing); price/ref + action drop to row 2. The route place names and the
   meta chips are allowed to wrap rather than being crushed onto one line. */
@media (max-width: 640px) {
    .trip-card[b-r5n0pe7czs] {
        flex-wrap: wrap;
        gap: var(--space-3);
        align-items: flex-start;
    }

    .trip-body[b-r5n0pe7czs] {
        flex: 1 1 0;
        min-width: 0;
    }

    .trip-route[b-r5n0pe7czs] {
        flex-wrap: wrap;
    }

    .trip-place[b-r5n0pe7czs] {
        max-width: 100%;
        white-space: normal;
    }

    .trip-meta[b-r5n0pe7czs] {
        gap: var(--space-1) var(--space-3);
    }

    /* Row 2: amount + ref on the left, action on the right. */
    .trip-right[b-r5n0pe7czs] {
        order: 3;
        flex: 0 1 auto;
        flex-direction: row;
        align-items: baseline;
        gap: var(--space-3);
        text-align: left;
    }

    .trip-action[b-r5n0pe7czs] {
        order: 4;
        margin-left: auto;
    }
}

/* ============================================================
   Compact recent-booking row
   ============================================================ */
.rb-row[b-r5n0pe7czs] {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 12px 18px;
    border-top: 1px solid var(--line);
    cursor: pointer;
    transition: background var(--transition-fast);
}

.rb-row:first-child[b-r5n0pe7czs] {
    border-top: 0;
}

.rb-row:hover[b-r5n0pe7czs] {
    background: var(--surface-2);
}

/* Date badge */
.rb-date[b-r5n0pe7czs] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 10px;
    background: var(--surface-2);
    font-size: 10px;
    color: var(--ink-2);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    line-height: 1.1;
}

.rb-date b[b-r5n0pe7czs] {
    font-size: 16px;
    color: var(--ink);
    font-weight: var(--font-weight-bold);
}

/* Route */
.rb-route[b-r5n0pe7czs] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rb-route-line[b-r5n0pe7czs] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.rb-place[b-r5n0pe7czs] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 44%;
}

.rb-arrow[b-r5n0pe7czs] {
    font-size: 15px;
    color: var(--ink-3);
    flex: none;
}

.rb-meta[b-r5n0pe7czs] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.rb-ref[b-r5n0pe7czs] {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--primary);
}

/* Price */
.rb-amt[b-r5n0pe7czs] {
    margin-left: auto;
    font-weight: var(--font-weight-semibold);
    font-size: 13px;
    color: var(--ink);
    flex: none;
}

.rb-chev[b-r5n0pe7czs] {
    width: 16px;
    height: 16px;
    font-size: 18px;
    color: var(--ink-3);
    flex: none;
}
/* /Components/Shared/BottomSheet.razor.rz.scp.css */
.sheet-backdrop[b-p3p461w9u4] {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal-backdrop, 1040);
    background: color-mix(in oklab, var(--ink) 45%, transparent);
    display: flex;
    align-items: flex-end;
}

.sheet[b-p3p461w9u4] {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    background: var(--surface);
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
    padding: 10px 18px calc(22px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 40px -12px color-mix(in oklab, var(--ink) 28%, transparent);
    border-top: 1px solid var(--line);
    max-height: 88vh;
    overflow-y: auto;
    animation: sheetUp-b-p3p461w9u4 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    outline: none;
}

.sheet-grab[b-p3p461w9u4] {
    width: 38px;
    height: 4px;
    border-radius: 3px;
    background: var(--line);
    margin: 2px auto 14px;
}

.sheet-title[b-p3p461w9u4] {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin: 0 0 12px;
}

@keyframes sheetUp-b-p3p461w9u4 {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sheet[b-p3p461w9u4] {
        animation: none;
    }
}
/* /Components/Shared/Button.razor.rz.scp.css */
/* Button Component Styles */

.btn[b-doq9p33mzh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 42px;
    padding: 0 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    cursor: pointer;
    white-space: nowrap;
    transition: transform .08s, background .15s, box-shadow .15s, border-color .15s;
    letter-spacing: -0.01em;
}

.btn:active[b-doq9p33mzh] {
    transform: translateY(1px) scale(.99);
}

.btn:focus-visible[b-doq9p33mzh] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.btn svg[b-doq9p33mzh] {
    width: 17px;
    height: 17px;
    flex: none;
}

.btn-icon[b-doq9p33mzh] {
    font-size: 17px;
    line-height: 1;
    flex: none;
}

/* Disabled / loading */
.btn[disabled][b-doq9p33mzh],
.btn.btn-loading[b-doq9p33mzh] {
    opacity: .7;
    pointer-events: none;
}

/* Loading spinner */
.btn-spinner[b-doq9p33mzh] {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin-b-doq9p33mzh .6s linear infinite;
    flex: none;
}

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

/* ── Variants ── */

.btn-primary[b-doq9p33mzh] {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: var(--shadow-primary);
}

.btn-primary:hover:not([disabled]):not(.btn-loading)[b-doq9p33mzh] {
    background: var(--primary-hover);
}

.btn-secondary[b-doq9p33mzh] {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line);
    box-shadow: var(--shadow-1);
}

.btn-secondary:hover:not([disabled]):not(.btn-loading)[b-doq9p33mzh] {
    background: var(--surface-2);
    border-color: var(--ink-3);
}

.btn-ghost[b-doq9p33mzh] {
    background: transparent;
    color: var(--ink-2);
}

.btn-ghost:hover:not([disabled]):not(.btn-loading)[b-doq9p33mzh] {
    background: var(--surface-2);
    color: var(--ink);
}

.btn-danger[b-doq9p33mzh] {
    background: var(--err);
    color: #fff;
}

[data-theme="dark"] .btn-danger[b-doq9p33mzh] {
    color: #1a0808;
}

.btn-danger:hover:not([disabled]):not(.btn-loading)[b-doq9p33mzh] {
    filter: brightness(1.06);
}

/* Preserved variants (Success, Warning, Link) */

.btn-success[b-doq9p33mzh] {
    background: var(--ok);
    color: var(--on-primary);
    border-color: var(--ok);
}

.btn-success:hover:not([disabled]):not(.btn-loading)[b-doq9p33mzh] {
    filter: brightness(1.06);
}

.btn-warning[b-doq9p33mzh] {
    background: var(--warn);
    color: var(--on-primary);
    border-color: var(--warn);
}

.btn-warning:hover:not([disabled]):not(.btn-loading)[b-doq9p33mzh] {
    filter: brightness(1.06);
}

.btn-link[b-doq9p33mzh] {
    background: none;
    color: var(--primary);
    border: none;
    padding: 0;
    height: auto;
    text-decoration: underline;
    letter-spacing: inherit;
}

.btn-link:hover:not([disabled]):not(.btn-loading)[b-doq9p33mzh] {
    color: var(--primary-hover);
}

/* ── Sizes ── */

.btn-sm[b-doq9p33mzh] {
    height: 34px;
    padding: 0 13px;
    font-size: 13px;
    border-radius: 9px;
}

.btn-sm .btn-icon[b-doq9p33mzh] {
    font-size: 14px;
}

.btn-sm .btn-spinner[b-doq9p33mzh] {
    width: 13px;
    height: 13px;
}

.btn-lg[b-doq9p33mzh] {
    height: 50px;
    padding: 0 22px;
    font-size: 15px;
    border-radius: 12px;
}

.btn-lg .btn-icon[b-doq9p33mzh] {
    font-size: 20px;
}

.btn-lg .btn-spinner[b-doq9p33mzh] {
    width: 17px;
    height: 17px;
}

/* Full-width */
.btn-block[b-doq9p33mzh] {
    width: 100%;
}
/* /Components/Shared/Card.razor.rz.scp.css */
.card[b-2wl58o4fkq] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-1);
    overflow: hidden;
}

.card.clickable[b-2wl58o4fkq] {
    cursor: pointer;
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card.clickable:hover[b-2wl58o4fkq] {
    box-shadow: var(--shadow-2);
    transform: translateY(-2px);
}

.card-header[b-2wl58o4fkq] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    background: var(--surface-2);
}

.card-title[b-2wl58o4fkq] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
}

.card-title .material-icons[b-2wl58o4fkq] {
    font-size: 20px;
    color: var(--primary);
}

.card-header-actions[b-2wl58o4fkq] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body[b-2wl58o4fkq] {
    padding: 16px;
}

.card-body.no-padding[b-2wl58o4fkq] {
    padding: 0;
}

.card-footer[b-2wl58o4fkq] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    background: var(--surface-2);
}
/* /Components/Shared/Chip.razor.rz.scp.css */
.chip[b-hrz6lsxy7s] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--r-full);
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-2);
    white-space: nowrap;
}

.day-chip[b-hrz6lsxy7s] {
    min-width: 70px;
    padding: 9px 12px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--line);
    background: var(--surface);
    font-size: 11.5px;
    color: var(--ink-2);
    text-align: center;
    cursor: pointer;
    line-height: 1.4;
    transition: .13s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.day-chip b[b-hrz6lsxy7s] {
    font-size: 14px;
    color: var(--ink);
    font-weight: 700;
}

.day-chip:hover[b-hrz6lsxy7s] {
    border-color: var(--ink-3);
}

.day-chip.on[b-hrz6lsxy7s] {
    border-color: var(--primary);
    background: var(--primary-tint);
    color: var(--primary-ink);
}

.day-chip.on b[b-hrz6lsxy7s] {
    color: var(--primary-ink);
}

[data-theme="dark"] .day-chip.on b[b-hrz6lsxy7s],
[data-theme="dark"] .day-chip.on[b-hrz6lsxy7s] {
    color: var(--primary);
}

.day-chip:focus-visible[b-hrz6lsxy7s] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}
/* /Components/Shared/ConversationChat.razor.rz.scp.css */
/* ── Header ─────────────────────────────────────────────────────────────────── */
.chat-header[b-yr94atpffi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line-2);
    flex-shrink: 0;
}

.chat-header-icon[b-yr94atpffi] {
    color: var(--primary);
}

.chat-header-meta[b-yr94atpffi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.chat-header-title[b-yr94atpffi] {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
}

.chat-header-sub[b-yr94atpffi] {
    font-size: var(--font-size-xs);
    color: var(--ink-3);
}

.chat-header-status[b-yr94atpffi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
}

.chat-header-status.online[b-yr94atpffi] {
    color: var(--ok);
}

.chat-header-status.offline[b-yr94atpffi] {
    color: var(--ink-3);
}

.chat-header-status .status-dot[b-yr94atpffi] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

/* ── Messages area ──────────────────────────────────────────────────────────── */
.messages-area[b-yr94atpffi] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-height: 0;
}

.messages-loading[b-yr94atpffi],
.messages-empty[b-yr94atpffi] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Message rows / bubbles ─────────────────────────────────────────────────── */
.message-row[b-yr94atpffi] {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.message-row.customer[b-yr94atpffi] {
    flex-direction: row-reverse; /* avatar right, bubble left of avatar */
}

.msg-avatar[b-yr94atpffi] {
    flex-shrink: 0;
    align-self: flex-end;
}

.bubble-wrap[b-yr94atpffi] {
    display: flex;
    flex-direction: column;
    max-width: 68%;
    gap: 3px;
}

.message-row.customer .bubble-wrap[b-yr94atpffi] {
    align-items: flex-end;
}

.message-row.operator .bubble-wrap[b-yr94atpffi] {
    align-items: flex-start;
}

.bubble-author[b-yr94atpffi] {
    font-size: var(--font-size-xs);
    color: var(--ink-3);
    padding: 0 var(--space-2);
}

.bubble[b-yr94atpffi] {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--r-xl);
    word-break: break-word;
    line-height: var(--line-height-relaxed);
}

/* Customer bubble: primary filled */
.bubble-customer[b-yr94atpffi] {
    background: var(--primary);
    color: var(--on-primary);
    border-bottom-right-radius: var(--r-sm);
}

/* Operator / driver / system bubble: surface */
.bubble-operator[b-yr94atpffi] {
    background: var(--surface-2);
    color: var(--ink);
    border: 1px solid var(--line);
    border-bottom-left-radius: var(--r-sm);
}

.bubble-body[b-yr94atpffi] {
    font-size: var(--font-size-sm);
    display: block;
}

.bubble-time[b-yr94atpffi] {
    font-size: var(--font-size-xs);
    color: var(--ink-3);
    padding: 0 var(--space-2);
}

/* ── Compose bar ────────────────────────────────────────────────────────────── */
.compose-bar[b-yr94atpffi] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line-2);
    background: var(--surface);
    flex-shrink: 0;
}

.compose-input[b-yr94atpffi] {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--r-full);
    font-family: inherit;
    font-size: var(--font-size-sm);
    color: var(--ink);
    background: var(--surface-2);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.compose-input[b-yr94atpffi]::placeholder {
    color: var(--ink-3);
}

.compose-input:focus[b-yr94atpffi] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint);
    background: var(--surface);
}

.compose-input:disabled[b-yr94atpffi] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Closed / read-only state ───────────────────────────────────────────────── */
.chat-closed-note[b-yr94atpffi] {
    padding: var(--space-4);
    text-align: center;
    color: var(--ink-3);
    font-size: var(--font-size-sm);
}

.contact-support-link[b-yr94atpffi] {
    display: inline-block;
    margin-left: var(--space-1);
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
}

/* ── Attach button ──────────────────────────────────────────────────────────── */
.compose-attach[b-yr94atpffi] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--ink-3);
    border-radius: var(--r-md);
    padding: var(--space-1);
    flex-shrink: 0;
    transition: color var(--transition-fast);
}

.compose-attach:hover[b-yr94atpffi] {
    color: var(--primary);
}

.compose-attach .material-icons[b-yr94atpffi] {
    font-size: 22px;
}

/* Hide the native file input visually — the label click triggers it.
   ::deep reaches the <input> rendered by the InputFile child component,
   which does not carry this component's CSS-isolation scope attribute. */
.compose-attach[b-yr94atpffi]  input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

/* ── Inline attach error (oversize / failed stage) ──────────────────────────── */
.compose-attach-error[b-yr94atpffi] {
    flex-basis: 100%;
    color: var(--danger);
    font-size: var(--font-size-xs);
    margin-top: var(--space-1);
}

/* ── Pending attachment chip (own row above the compose bar) ────────────────── */
.compose-pending-row[b-yr94atpffi] {
    padding: var(--space-2) var(--space-4) 0;
    background: var(--surface);
    flex-shrink: 0;
}

.compose-pending[b-yr94atpffi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: var(--primary-tint);
    color: var(--primary);
    border-radius: var(--r-full);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    max-width: 100%;
    flex-shrink: 0;
}

.compose-pending .material-icons[b-yr94atpffi] {
    font-size: 16px;
    flex-shrink: 0;
}

.compose-pending-name[b-yr94atpffi] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compose-pending button[b-yr94atpffi] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    font-size: var(--font-size-sm);
    line-height: 1;
    flex-shrink: 0;
}

/* ── Attachment chip inside a message bubble ────────────────────────────────── */
.attachment-chip[b-yr94atpffi] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    padding: var(--space-1) var(--space-2);
    background: rgba(0, 0, 0, 0.1);
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    font-size: var(--font-size-xs);
    color: inherit;
    width: 100%;
    text-align: left;
    transition: background var(--transition-fast);
}

.attachment-chip:hover[b-yr94atpffi] {
    background: rgba(0, 0, 0, 0.18);
}

.attachment-chip .material-icons[b-yr94atpffi] {
    font-size: 16px;
    flex-shrink: 0;
}

.attachment-name[b-yr94atpffi] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .bubble-wrap[b-yr94atpffi] {
        max-width: 82%;
    }
}
/* /Components/Shared/Counter.razor.rz.scp.css */
/* Counter Component — ± numeric stepper */

.step-counter[b-qjss70rzlb] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.step-counter > span[b-qjss70rzlb] {
    font-size: 12.5px;
    color: var(--ink-2);
    font-weight: 500;
}

.counter[b-qjss70rzlb] {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    overflow: hidden;
    width: fit-content;
}

.counter-btn[b-qjss70rzlb] {
    width: 38px;
    height: 40px;
    border: 0;
    background: var(--surface);
    color: var(--ink);
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
    display: grid;
    place-items: center;
    transition: background var(--transition-fast);
}

.counter-btn:hover:not(:disabled)[b-qjss70rzlb] {
    background: var(--surface-2);
}

.counter-btn:disabled[b-qjss70rzlb] {
    opacity: .4;
    cursor: not-allowed;
}

.counter-btn:focus-visible[b-qjss70rzlb] {
    outline: 2px solid var(--ring);
    outline-offset: -2px;
}

.counter-btn[b-qjss70rzlb]  .material-icons {
    font-size: 18px;
}

.counter b[b-qjss70rzlb] {
    width: 42px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
/* /Components/Shared/DataTable.razor.rz.scp.css */
/* DataTable Component Styles */
.data-table-wrapper[b-ukayjjz2fj] {
    background: var(--surface);
    border-radius: var(--r-lg);
    border: 1px solid var(--line);
    overflow: hidden;
}

.data-table-container[b-ukayjjz2fj] {
    overflow-x: auto;
}

.data-table[b-ukayjjz2fj] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

/* Header */
.data-table thead[b-ukayjjz2fj] {
    background: var(--surface-3);
    border-bottom: 1px solid var(--line);
}

.data-table th[b-ukayjjz2fj] {
    text-align: left;
    padding: 11px 8px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

/* Body */
.data-table td[b-ukayjjz2fj] {
    padding: 0 8px;
    height: 46px;
    color: var(--ink);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}

.data-table tbody tr:last-child td[b-ukayjjz2fj] {
    border-bottom: none;
}

/* Striped */
.data-table.striped tbody tr:nth-child(even)[b-ukayjjz2fj] {
    background: var(--surface-3);
}

/* Hoverable */
.data-table.hoverable tbody tr[b-ukayjjz2fj] {
    transition: background-color var(--transition-fast);
}

.data-table.hoverable tbody tr:hover[b-ukayjjz2fj] {
    background: var(--surface-2);
}

/* Selected row */
.data-table tbody tr.selected[b-ukayjjz2fj] {
    background: var(--primary-tint);
    box-shadow: inset 3px 0 0 var(--primary);
}

/* Clickable Rows */
.data-table tbody tr.clickable[b-ukayjjz2fj] {
    cursor: pointer;
}

/* Loading State */
.data-table-loading[b-ukayjjz2fj] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-10);
}

/* Pagination */
.data-table-pagination[b-ukayjjz2fj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--line);
    background: var(--surface-3);
}

.pagination-info[b-ukayjjz2fj] {
    font-size: var(--font-size-sm);
    color: var(--ink-2);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.pagination-controls[b-ukayjjz2fj] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.pagination-btn[b-ukayjjz2fj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 var(--space-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font-size: var(--font-size-sm);
    color: var(--ink);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.pagination-btn:hover:not(:disabled)[b-ukayjjz2fj] {
    border-color: var(--primary);
    color: var(--primary);
}

.pagination-btn:disabled[b-ukayjjz2fj] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-btn.active[b-ukayjjz2fj] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.pagination-btn .material-icons[b-ukayjjz2fj] {
    font-size: 18px;
}

/* Responsive */
@media (max-width: 768px) {
    .data-table-pagination[b-ukayjjz2fj] {
        flex-direction: column;
        gap: var(--space-3);
    }
}
/* /Components/Shared/DocumentList.razor.rz.scp.css */
/* DocumentList — file rows with a colour-coded type tile + subtle icon actions.
   Uses the portal design tokens (light + dark aware). */

.doc-list[b-1v2i4krw8h] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.doc-row[b-1v2i4krw8h] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.doc-row:hover[b-1v2i4krw8h] {
    border-color: var(--primary);
    box-shadow: var(--shadow-1);
    transform: translateY(-1px);
}

/* Type tile */
.doc-row__icon[b-1v2i4krw8h] {
    flex: none;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-sm);
    background: var(--surface-3);
    color: var(--ink-2);
}

.doc-row__icon .material-icons[b-1v2i4krw8h] {
    font-size: 22px;
}

.doc-row__icon.is-pdf[b-1v2i4krw8h] { background: var(--err-bg); color: var(--err-ink); }
.doc-row__icon.is-img[b-1v2i4krw8h] { background: var(--ok-bg); color: var(--ok-ink); }
.doc-row__icon.is-doc[b-1v2i4krw8h] { background: var(--primary-tint); color: var(--primary-ink); }
.doc-row__icon.is-xls[b-1v2i4krw8h] { background: var(--warn-bg); color: var(--warn-ink); }

/* Info: name + meta */
.doc-row__info[b-1v2i4krw8h] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.doc-row__name[b-1v2i4krw8h] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.doc-row__meta[b-1v2i4krw8h] {
    font-size: var(--font-size-xs);
    color: var(--ink-3);
}

/* Actions: icon-only ghost buttons that tint on hover */
.doc-row__actions[b-1v2i4krw8h] {
    flex: none;
    display: flex;
    gap: var(--space-1);
}

.doc-row__btn[b-1v2i4krw8h] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--ink-2);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.doc-row__btn .material-icons[b-1v2i4krw8h] {
    font-size: 20px;
}

.doc-row__btn:hover:not(:disabled)[b-1v2i4krw8h] {
    background: var(--primary-tint);
    color: var(--primary-ink);
}

.doc-row__btn--danger:hover:not(:disabled)[b-1v2i4krw8h] {
    background: var(--err-bg);
    color: var(--err-ink);
}

.doc-row__btn:focus-visible[b-1v2i4krw8h] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.doc-row__btn:disabled[b-1v2i4krw8h] {
    opacity: 0.5;
    cursor: default;
}

/* Delete-confirmation dialog (self-contained; centred over a dimmed backdrop) */
.doc-confirm-backdrop[b-1v2i4krw8h] {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgba(0, 0, 0, 0.45);
    animation: doc-confirm-fade-b-1v2i4krw8h var(--transition-fast) ease;
}

.doc-confirm[b-1v2i4krw8h] {
    width: 100%;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-3);
    animation: doc-confirm-pop-b-1v2i4krw8h var(--transition-fast) ease;
}

.doc-confirm__title[b-1v2i4krw8h] {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--ink);
}

.doc-confirm__text[b-1v2i4krw8h] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--ink-2);
    line-height: var(--line-height-normal);
}

.doc-confirm__actions[b-1v2i4krw8h] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.doc-confirm__btn[b-1v2i4krw8h] {
    height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast), filter var(--transition-fast);
}

.doc-confirm__btn:disabled[b-1v2i4krw8h] {
    opacity: 0.6;
    cursor: default;
}

.doc-confirm__btn--ghost[b-1v2i4krw8h] {
    background: var(--surface);
    border-color: var(--line);
    color: var(--ink);
}

.doc-confirm__btn--ghost:hover:not(:disabled)[b-1v2i4krw8h] {
    background: var(--surface-2);
}

.doc-confirm__btn--danger[b-1v2i4krw8h] {
    background: var(--err);
    color: #fff;
}

.doc-confirm__btn--danger:hover:not(:disabled)[b-1v2i4krw8h] {
    filter: brightness(0.95);
}

@keyframes doc-confirm-fade-b-1v2i4krw8h {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes doc-confirm-pop-b-1v2i4krw8h {
    from { opacity: 0; transform: translateY(6px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Narrow screens: tighten padding, keep the row on one line */
@media (max-width: 480px) {
    .doc-row[b-1v2i4krw8h] {
        padding: var(--space-3);
        gap: var(--space-2);
    }

    .doc-row__icon[b-1v2i4krw8h] {
        width: 38px;
        height: 38px;
    }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty-state[b-x38rhp9ake] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 34px 20px;
    text-align: center;
}

/* Icon glyph container — rounded square, muted background */
.empty-icon-wrap[b-x38rhp9ake] {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    background: var(--surface-2);
    color: var(--ink-3);
    display: grid;
    place-items: center;
    margin: 0 auto 14px;
}

.empty-icon[b-x38rhp9ake] {
    font-size: 28px;
    color: var(--ink-3);
    line-height: 1;
}

.empty-message[b-x38rhp9ake] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 500;
    color: var(--ink);
}

.empty-description[b-x38rhp9ake] {
    margin: 8px 0 0 0;
    font-size: 0.875rem;
    color: var(--ink-2);
    max-width: 280px;
}

.empty-state .btn[b-x38rhp9ake] {
    margin-top: 20px;
}

.empty-actions[b-x38rhp9ake] {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
/* /Components/Shared/EtaFloat.razor.rz.scp.css */
.eta-float[b-b88fyrh9fl]{display:inline-block;background:var(--primary);color:var(--on-primary);padding:9px 18px;border-radius:var(--r-lg);
  text-align:center;box-shadow:var(--shadow-primary);border:2px solid color-mix(in oklab,var(--surface) 40%,transparent);}
.eta-float .eta-big[b-b88fyrh9fl]{font-size:18px;font-weight:700;font-family:var(--font-mono);font-variant-numeric:tabular-nums;line-height:1.1;}
.eta-float .eta-lbl[b-b88fyrh9fl]{font-size:11px;font-weight:600;opacity:.85;}
/* /Components/Shared/GlassButton.razor.rz.scp.css */
.glass-btn[b-y1p5jhhon6]{width:40px;height:40px;border-radius:13px;border:1px solid color-mix(in oklab,var(--ink) 12%,transparent);
  background:color-mix(in oklab,var(--surface) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-2);}
.glass-btn .material-icons[b-y1p5jhhon6]{font-size:19px;}
.glass-btn:focus-visible[b-y1p5jhhon6]{outline:2px solid var(--ring);outline-offset:2px;}
/* /Components/Shared/GlassPill.razor.rz.scp.css */
.glass-pill[b-l3gm883s0h]{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:var(--r-full);
  background:color-mix(in oklab,var(--surface) 80%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid color-mix(in oklab,var(--ink) 10%,transparent);font-size:12.5px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-2);}
.glass-pill .live-dot[b-l3gm883s0h]{width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 color-mix(in oklab,var(--ok) 70%,transparent);animation:gp-livedot-b-l3gm883s0h 1.8s ease infinite;}
@keyframes gp-livedot-b-l3gm883s0h{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--ok) 60%,transparent);}70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
@media(prefers-reduced-motion:reduce){.glass-pill .live-dot[b-l3gm883s0h]{animation:none;}}
/* /Components/Shared/Input.razor.rz.scp.css */
/* Input Component Styles — design-token restyle */

.input-group[b-25qg9c1ywy] {
    margin-bottom: var(--space-5);
}

/* Field label — maps to .field-label in export */
.input-label[b-25qg9c1ywy] {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-2);
    margin-bottom: 6px;
    letter-spacing: 0;
}

.required-mark[b-25qg9c1ywy] {
    color: var(--err);
    margin-left: 2px;
}

/* Wrapper — maps to .input-wrap in export */
.input-wrapper[b-25qg9c1ywy] {
    position: relative;
}

/* Leading icon — maps to .lead in export */
.input-icon[b-25qg9c1ywy] {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-3);
    width: 18px;
    height: 18px;
    font-size: 18px;
    pointer-events: none;
    /* Material Icons renders via font; line-height 1 keeps it centred */
    line-height: 1;
    display: flex;
    align-items: center;
}

/* Shift input right when icon present */
.input-wrapper.has-icon .input-control[b-25qg9c1ywy] {
    padding-left: 40px;
}

/* The input element — maps to .input in export */
.input-control[b-25qg9c1ywy] {
    display: block;
    height: 44px;
    width: 100%;
    padding: 0 13px;
    font-family: inherit;
    font-size: 14px;
    font-weight: var(--font-weight-normal);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .15s, box-shadow .15s;
    /* reset browser defaults */
    appearance: none;
    -webkit-appearance: none;
}

.input-control[b-25qg9c1ywy]::placeholder {
    color: var(--ink-3);
}

/* iOS WebKit collapses date/time inputs to their (empty) content width and ignores
   `height`, so an empty <input type="date"> renders as a tiny box on mobile Safari.
   Force them to fill the field and left-align the value/placeholder. */
.input-control[type="date"][b-25qg9c1ywy],
.input-control[type="time"][b-25qg9c1ywy],
.input-control[type="datetime-local"][b-25qg9c1ywy],
.input-control[type="month"][b-25qg9c1ywy] {
    min-width: 100%;
    min-height: 44px;
}

.input-control[type="date"][b-25qg9c1ywy]::-webkit-date-and-time-value,
.input-control[type="time"][b-25qg9c1ywy]::-webkit-date-and-time-value,
.input-control[type="datetime-local"][b-25qg9c1ywy]::-webkit-date-and-time-value {
    text-align: left;
    margin: 0;
}

.input-control[b-25qg9c1ywy]::-webkit-datetime-edit {
    width: 100%;
    padding: 0;
}

/* Focus — keyboard and pointer */
.input-control:focus[b-25qg9c1ywy],
.input-control:focus-visible[b-25qg9c1ywy] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
}

/* Pointer focus drops the default UA outline; keyboard focus keeps an explicit a11y ring */
.input-control:focus[b-25qg9c1ywy] {
    outline: none;
}

.input-control:focus-visible[b-25qg9c1ywy] {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

/* Disabled */
.input-control:disabled[b-25qg9c1ywy] {
    background: var(--surface-2);
    color: var(--ink-3);
    cursor: not-allowed;
    opacity: 0.7;
}

/* Read-only */
.input-control:read-only[b-25qg9c1ywy] {
    background: var(--surface-3);
}

/* Error state — maps to .input.is-error in export */
.has-error .input-control[b-25qg9c1ywy] {
    border-color: var(--err);
    box-shadow: 0 0 0 3px var(--err-bg);
}

.has-error .input-control:focus[b-25qg9c1ywy],
.has-error .input-control:focus-visible[b-25qg9c1ywy] {
    border-color: var(--err);
    box-shadow: 0 0 0 3px var(--err-bg);
}

/* Icon tint in error state */
.has-error .input-icon[b-25qg9c1ywy] {
    color: var(--err);
}

/* Field error text — maps to .field-err in export */
.input-error[b-25qg9c1ywy] {
    color: var(--err);
    font-size: 12px;
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Help text */
.input-help[b-25qg9c1ywy] {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--ink-3);
}
/* /Components/Shared/LoadingSpinner.razor.rz.scp.css */
.loading-container[b-snre2xo94p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.spinner[b-snre2xo94p] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--line);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin-b-snre2xo94p .6s linear infinite;
    /* Primary colour on the visible arc */
    border-top-color: var(--primary);
    border-left-color: var(--primary);
    border-bottom-color: var(--primary);
}

.loading-message[b-snre2xo94p] {
    margin: 16px 0 0 0;
    color: var(--ink-2);
    font-size: var(--font-size-sm);
    font-family: var(--font-sans);
}

/* Size variants */
.spinner-sm .spinner[b-snre2xo94p] {
    width: 24px;
    height: 24px;
    border-width: 3px;
}

.spinner-sm .loading-message[b-snre2xo94p] {
    font-size: var(--font-size-xs);
    margin-top: 8px;
}

.spinner-sm[b-snre2xo94p] {
    padding: 16px;
}

.spinner-lg .spinner[b-snre2xo94p] {
    width: 56px;
    height: 56px;
    border-width: 5px;
}

.spinner-lg .loading-message[b-snre2xo94p] {
    font-size: var(--font-size-base);
    margin-top: 20px;
}

.spinner-lg[b-snre2xo94p] {
    padding: 60px;
}

@keyframes spin-b-snre2xo94p {
    to { transform: rotate(360deg); }
}
/* /Components/Shared/Modal.razor.rz.scp.css */
/* Modal Component Styles */
.modal-backdrop[b-1d0lhvr1d6] {
    position: fixed;
    inset: 0;
    background: color-mix(in oklab, var(--ink) 55%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    padding: var(--space-4);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}

.modal-backdrop.open[b-1d0lhvr1d6] {
    opacity: 1;
    visibility: visible;
}

.modal[b-1d0lhvr1d6] {
    background: var(--surface);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-3);
    border: 1px solid var(--line);
    width: 100%;
    max-height: calc(100vh - var(--space-8));
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(-10px);
    transition: transform var(--transition-base);
}

.modal-backdrop.open .modal[b-1d0lhvr1d6] {
    transform: scale(1) translateY(0);
}

/* Size Variants */
.modal-sm[b-1d0lhvr1d6] { max-width: 400px; }
.modal-md[b-1d0lhvr1d6] { max-width: 560px; }
.modal-lg[b-1d0lhvr1d6] {
    max-width: 800px;
    border-radius: var(--r-2xl);
}
.modal-fullscreen[b-1d0lhvr1d6] {
    max-width: calc(100vw - var(--space-8));
    max-height: calc(100vh - var(--space-8));
    height: 100%;
}

/* Header */
.modal-header[b-1d0lhvr1d6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.modal-title[b-1d0lhvr1d6] {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--ink);
    margin: 0;
}

.modal-close[b-1d0lhvr1d6] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    border-radius: var(--r-md);
    cursor: pointer;
    color: var(--ink-3);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.modal-close:hover[b-1d0lhvr1d6] {
    background-color: var(--surface-2);
    color: var(--ink);
}

.modal-close .material-icons[b-1d0lhvr1d6] {
    font-size: 20px;
}

/* Body */
.modal-body[b-1d0lhvr1d6] {
    padding: var(--space-5);
    overflow-y: auto;
    flex: 1;
}

/* Footer */
.modal-footer[b-1d0lhvr1d6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--line);
    flex-shrink: 0;
}
/* /Components/Shared/PageHeader.razor.rz.scp.css */
/* PageHeader Component Styles */
.page-header[b-mxn9s3yu31] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-5);
    border-bottom: 1px solid var(--line);
}

.header-content[b-mxn9s3yu31] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.header-title[b-mxn9s3yu31] {
    margin: 0;
    font-size: var(--font-size-2xl);
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ink);
    line-height: 1.15;
}

.header-subtitle[b-mxn9s3yu31] {
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--ink-2);
    line-height: var(--line-height-normal);
}

.btn-back[b-mxn9s3yu31] {
    background: none;
    border: none;
    padding: var(--space-2);
    border-radius: var(--r-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-3);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.btn-back:hover[b-mxn9s3yu31] {
    background-color: var(--surface-2);
    color: var(--ink);
}

.btn-back .material-icons[b-mxn9s3yu31] {
    font-size: 24px;
}

.header-actions[b-mxn9s3yu31] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
/* /Components/Shared/RouteTimeline.razor.rz.scp.css */
.route-tl[b-l7wj5s2stz]{display:flex;flex-direction:column;}
.route-row[b-l7wj5s2stz]{display:flex;gap:12px;}
.route-rail[b-l7wj5s2stz]{display:flex;flex-direction:column;align-items:center;}
.route-dot[b-l7wj5s2stz]{width:12px;height:12px;border-radius:50%;background:var(--primary);border:2px solid var(--surface);box-shadow:0 0 0 3px var(--primary-tint);flex:none;margin-top:3px;}
.route-dot.stop[b-l7wj5s2stz]{background:var(--surface);border:2px solid var(--primary);}
.route-dot.dest[b-l7wj5s2stz]{width:24px;height:24px;border-radius:50%;background:var(--surface);border:2px solid var(--primary);box-shadow:0 0 0 3px var(--primary-tint);display:grid;place-items:center;margin-top:0;}
.route-dot.dest .material-icons[b-l7wj5s2stz]{font-size:15px;color:var(--primary);}
.route-line[b-l7wj5s2stz]{width:2px;flex:1;background:var(--line);margin:2px 0;min-height:22px;}
.route-label[b-l7wj5s2stz]{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);}
.route-addr[b-l7wj5s2stz]{font-size:13.5px;color:var(--ink);font-weight:500;line-height:1.35;}
.route-body[b-l7wj5s2stz]{padding-bottom:14px;min-width:0;}
.route-body.last[b-l7wj5s2stz]{padding-bottom:0;}
/* /Components/Shared/Select.razor.rz.scp.css */
/* Select Component Styles */
.select-wrapper[b-og7mdhapu7] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.select-wrapper.disabled[b-og7mdhapu7] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Label */
.select-label[b-og7mdhapu7] {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--ink);
}

.select-required[b-og7mdhapu7] {
    color: var(--err);
    margin-left: var(--space-1);
}

/* Container */
.select-container[b-og7mdhapu7] {
    position: relative;
    display: flex;
    align-items: center;
}

/* Icon */
.select-icon[b-og7mdhapu7] {
    position: absolute;
    left: var(--space-3);
    font-size: 20px;
    color: var(--ink-3);
    pointer-events: none;
    z-index: 1;
}

/* Arrow — rendered by a Material icon span; no SVG needed */
.select-arrow[b-og7mdhapu7] {
    position: absolute;
    right: var(--space-3);
    font-size: 20px;
    color: var(--ink-3);
    pointer-events: none;
    transition: transform var(--transition-fast);
}

/* Select Input */
.select-input[b-og7mdhapu7] {
    width: 100%;
    height: 44px;
    padding: 0 var(--space-10) 0 var(--space-3);
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    color: var(--ink);
    background-color: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    appearance: none;
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.select-input.has-icon[b-og7mdhapu7] {
    padding-left: var(--space-10);
}

.select-input:hover:not(:disabled)[b-og7mdhapu7] {
    border-color: var(--ink-3);
}

.select-input:focus[b-og7mdhapu7] {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 22%, transparent);
}

/* Keyboard focus — explicit a11y ring */
.select-input:focus-visible[b-og7mdhapu7] {
    outline: 2px solid var(--ring);
    outline-offset: 1px;
}

.select-input:disabled[b-og7mdhapu7] {
    background-color: var(--surface-2);
    cursor: not-allowed;
    color: var(--ink-3);
}

/* Placeholder (first option) */
.select-input option[value=""][disabled][b-og7mdhapu7] {
    color: var(--ink-3);
}

/* Error State */
.select-container.has-error .select-input[b-og7mdhapu7] {
    border-color: var(--err);
}

.select-container.has-error .select-input:focus[b-og7mdhapu7] {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--err) 22%, transparent);
}

/* Help & Error Text */
.select-help[b-og7mdhapu7],
.select-error[b-og7mdhapu7] {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-tight);
}

.select-help[b-og7mdhapu7] {
    color: var(--ink-3);
}

.select-error[b-og7mdhapu7] {
    color: var(--err);
}
/* /Components/Shared/SelectableCard.razor.rz.scp.css */
/* vehicle (default) */
.sel-card[b-8cn1u6wozu] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 16px;
    width: 100%;
    text-align: left;
    border: 1.5px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: border-color .13s, box-shadow .13s;
    position: relative;
}

.sel-card:hover[b-8cn1u6wozu] {
    border-color: var(--ink-3);
}

.sel-card.on[b-8cn1u6wozu] {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-tint);
}

.sel-card:focus-visible[b-8cn1u6wozu] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* leading icon block (sized for a ~26px Material icon) */
.sel-ic[b-8cn1u6wozu] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--surface-2);
    color: var(--ink);
    display: grid;
    place-items: center;
    flex: none;
}

.sel-ic[b-8cn1u6wozu]  .material-icons {
    font-size: 26px;
}

.sel-card.on .sel-ic[b-8cn1u6wozu] {
    background: var(--primary-tint);
    color: var(--primary-ink);
}

[data-theme="dark"] .sel-card.on .sel-ic[b-8cn1u6wozu] {
    color: var(--primary);
}

/* compact (payment) */
.sel-card.compact[b-8cn1u6wozu] {
    gap: 12px;
    padding: 13px 15px;
    border-radius: var(--r-md);
}

/* main body */
.sel-body[b-8cn1u6wozu] {
    flex: 1;
    min-width: 0;
}

/* optional trailing slot (e.g. a price) */
.sel-trail[b-8cn1u6wozu] {
    flex: none;
}

/* trailing checkbox indicator */
.sel-check[b-8cn1u6wozu] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    color: transparent;
    flex: none;
}

.sel-card.on .sel-check[b-8cn1u6wozu] {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--on-primary);
}

.sel-check-icon[b-8cn1u6wozu] {
    font-size: 14px;
    color: var(--on-primary);
}
/* /Components/Shared/StatCard.razor.rz.scp.css */
/* StatCard Component Styles */

/* Colour-variant tick token — overridden per variant below */
.stat-card[b-qfndposn5j] { --tick: var(--ink-3); }
.stat-card-primary[b-qfndposn5j] { --tick: var(--primary); }
.stat-card-success[b-qfndposn5j]  { --tick: var(--ok); }
.stat-card-warning[b-qfndposn5j]  { --tick: var(--warn); }
.stat-card-error[b-qfndposn5j]    { --tick: var(--err); }

.stat-card[b-qfndposn5j] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 13px 15px 14px;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

/* Left accent tick */
.stat-card[b-qfndposn5j]::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--tick, var(--ink-3));
}

.stat-card:hover[b-qfndposn5j] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-2);
}

/* Header with Icon and Trend */
.stat-card-header[b-qfndposn5j] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

/* Icon container — colour driven by variant token */
.stat-card-icon[b-qfndposn5j] {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-md);
    background: color-mix(in oklab, var(--tick, var(--ink-3)) 12%, var(--surface));
}

.stat-card-icon .material-icons[b-qfndposn5j] {
    font-size: 22px;
    color: var(--tick, var(--ink-3));
}

/* Trend Indicator */
.stat-card-trend[b-qfndposn5j] {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11.5px;
    font-weight: var(--font-weight-medium);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--r-full);
}

.trend-icon[b-qfndposn5j] {
    font-size: 16px;
}

.trend-up[b-qfndposn5j] {
    background: var(--ok-bg);
    color: var(--ok-ink);
}

.trend-down[b-qfndposn5j] {
    background: var(--err-bg);
    color: var(--err-ink);
}

.trend-neutral[b-qfndposn5j] {
    background: var(--surface-2);
    color: var(--ink-2);
}

/* Body — stat label above, value below */
.stat-card-body[b-qfndposn5j] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* The component renders value then title; restyle to match spec label/value order visually */
.stat-card-title[b-qfndposn5j] {
    font-size: 11px;
    color: var(--ink-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    order: -1; /* push label above value */
}

.stat-card-value[b-qfndposn5j] {
    font-size: 27px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
    color: var(--ink);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

/* Footer — change/subtitle row */
.stat-card-footer[b-qfndposn5j] {
    margin-top: 6px;
    padding-top: 0;
    border-top: none;
}

.stat-card-subtitle[b-qfndposn5j] {
    font-size: 11.5px;
    color: var(--ink-2);
    display: flex;
    align-items: center;
    gap: 5px;
}
/* /Components/Shared/StatusBadge.razor.rz.scp.css */
/* Base badge */
.status-badge[b-vzcnh78zmn] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--r-full);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-transform: capitalize;
}

/* Dot */
.status-badge .dot[b-vzcnh78zmn] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Size variants */
.badge-sm[b-vzcnh78zmn] {
    height: 20px;
    padding: 0 8px;
    font-size: 10px;
}

.badge-lg[b-vzcnh78zmn] {
    height: 28px;
    padding: 0 14px;
    font-size: 14px;
}

/* ── Status colours (all token-based) ──────────────────────────────────── */

.status-pending[b-vzcnh78zmn] {
    background: var(--warn-bg);
    color: var(--warn-ink);
}

.status-confirmed[b-vzcnh78zmn] {
    background: var(--info-bg);
    color: var(--info-ink);
}

/* In Progress — primary tint + pulsing dot */
.status-inprogress[b-vzcnh78zmn] {
    background: var(--primary-tint);
    color: var(--primary-ink);
}

.status-inprogress .dot[b-vzcnh78zmn] {
    animation: badge-pulse-b-vzcnh78zmn 1.6s ease infinite;
}

.status-completed[b-vzcnh78zmn] {
    background: var(--ok-bg);
    color: var(--ok-ink);
}

/* Cancelled / neutral */
.status-cancelled[b-vzcnh78zmn] {
    background: var(--surface-2);
    color: var(--ink-3);
}

/* Delayed → warn-adjacent (slightly less prominent — err bucket) */
.status-delayed[b-vzcnh78zmn] {
    background: var(--err-bg);
    color: var(--err-ink);
}

/* Unknown / fallback */
.status-default[b-vzcnh78zmn] {
    background: var(--surface-2);
    color: var(--ink-3);
}

/* Pulse animation (in-progress dot only) */
@keyframes badge-pulse-b-vzcnh78zmn {
    0%, 100% { opacity: 1; }
    50%       { opacity: .35; }
}
/* /Components/Shared/Stepper.razor.rz.scp.css */
/* Stepper Component — horizontal step indicator */

.stepper[b-mw83ddv1yc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Step wrapper ─────────────────────────────────────────────────────────── */
.step[b-mw83ddv1yc] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Dot (circle) ─────────────────────────────────────────────────────────── */
.step-dot[b-mw83ddv1yc] {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--ink-3);
    border: 1.5px solid var(--line);
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
    flex-shrink: 0;
}

/* Material icon inside the done dot */
.step-check[b-mw83ddv1yc] {
    font-size: 14px;
    line-height: 1;
}

/* ── Label ────────────────────────────────────────────────────────────────── */
.step-lbl[b-mw83ddv1yc] {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-3);
    white-space: nowrap;
    transition: color .2s;
}

/* ── Connector line ───────────────────────────────────────────────────────── */
.step-line[b-mw83ddv1yc] {
    width: 26px;
    height: 2px;
    background: var(--line);
    border-radius: 1px;
    flex-shrink: 0;
}

/* ── State: active ────────────────────────────────────────────────────────── */
.step.is-active .step-dot[b-mw83ddv1yc] {
    background: var(--primary);
    color: var(--on-primary);
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-tint);
}

.step.is-active .step-lbl[b-mw83ddv1yc] {
    color: var(--ink);
}

/* ── State: done ──────────────────────────────────────────────────────────── */
.step.is-done .step-dot[b-mw83ddv1yc] {
    background: var(--primary-tint);
    color: var(--primary-ink);
    border-color: transparent;
}

[data-theme="dark"] .step.is-done .step-dot[b-mw83ddv1yc] {
    color: var(--primary);
}

.step.is-done .step-lbl[b-mw83ddv1yc] {
    color: var(--ink-2);
}

/* ── Mobile: hide labels to keep the stepper compact ─────────────────────── */
@media (max-width: 560px) {
    .step-lbl[b-mw83ddv1yc] {
        display: none;
    }
}
/* /Components/Shared/Tabs.razor.rz.scp.css */
/* Tabs Component Styles */
.tabs-container[b-dglo3xw9n7] {
    display: flex;
    flex-direction: column;
}

/* ── Default mode: segmented control ─────────────────────────────────────── */
.tabs-header[b-dglo3xw9n7] {
    display: flex;
    gap: 2px;
    background: var(--surface-2);
    padding: 3px;
    border-radius: var(--r-md);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* remove old underline border */
    border-bottom: none;
}

.tabs-header[b-dglo3xw9n7]::-webkit-scrollbar {
    display: none;
}

.tab-button[b-dglo3xw9n7] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--space-4);
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-family: var(--font-sans);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-2);
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, background .15s, box-shadow .15s;
    margin-bottom: 0;
}

.tab-button:hover[b-dglo3xw9n7] {
    color: var(--ink);
}

.tab-button.active[b-dglo3xw9n7] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-1);
    /* remove old underline */
    border-bottom-color: transparent;
}

[data-theme="dark"] .tab-button.active[b-dglo3xw9n7] {
    background: var(--surface-3);
}

.tab-button:focus-visible[b-dglo3xw9n7] {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* Tab Content */
.tabs-content[b-dglo3xw9n7] {
    padding: var(--space-5) 0;
}

/* ── Icon & badge ─────────────────────────────────────────────────────────── */
.tab-icon[b-dglo3xw9n7] {
    font-size: 18px;
}

.tab-title[b-dglo3xw9n7] {
    line-height: 1;
}

.tab-badge[b-dglo3xw9n7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    background: var(--primary);
    color: var(--on-primary);
    font-size: 10px;
    font-weight: var(--font-weight-semibold);
    border-radius: var(--r-full);
}

.tab-button:not(.active) .tab-badge[b-dglo3xw9n7] {
    background: var(--ink-3);
    color: var(--surface);
}

/* ── Variant: Contained ───────────────────────────────────────────────────── */
/* Aligns to the same segmented look; content panel gets a bordered box. */
.tabs-container.contained .tabs-header[b-dglo3xw9n7] {
    background: var(--surface-2);
    border-radius: var(--r-md) var(--r-md) 0 0;
    border-bottom: none;
}

.tabs-container.contained .tab-button[b-dglo3xw9n7] {
    border-radius: 7px;
    border-bottom: none;
    margin-bottom: 0;
}

.tabs-container.contained .tab-button.active[b-dglo3xw9n7] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-1);
}

[data-theme="dark"] .tabs-container.contained .tab-button.active[b-dglo3xw9n7] {
    background: var(--surface-3);
}

.tabs-container.contained .tabs-content[b-dglo3xw9n7] {
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 var(--r-md) var(--r-md);
    padding: var(--space-5);
}

/* ── Variant: Pills ───────────────────────────────────────────────────────── */
.tabs-container.pills .tabs-header[b-dglo3xw9n7] {
    background: transparent;
    padding: 0;
    border-bottom: none;
    gap: var(--space-2);
}

.tabs-container.pills .tab-button[b-dglo3xw9n7] {
    flex: unset;
    border-radius: var(--r-full);
    border-bottom: none;
    margin-bottom: 0;
    padding: var(--space-2) var(--space-4);
    height: auto;
}

.tabs-container.pills .tab-button.active[b-dglo3xw9n7] {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: none;
}

[data-theme="dark"] .tabs-container.pills .tab-button.active[b-dglo3xw9n7] {
    background: var(--primary);
    color: var(--on-primary);
}

.tabs-container.pills .tab-button.active .tab-badge[b-dglo3xw9n7] {
    background: color-mix(in srgb, var(--on-primary) 30%, transparent);
}
/* /Components/Shared/Toast.razor.rz.scp.css */
.toast-stack[b-xweynwwcze] {
    position: fixed;
    z-index: var(--z-popover, 1060);
    top: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
}

@media (max-width: 640px) {
    .toast-stack[b-xweynwwcze] {
        left: 16px;
        right: 16px;
        top: auto;
        bottom: calc(16px + env(safe-area-inset-bottom));
        max-width: none;
    }
}

.toast[b-xweynwwcze] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 15px;
    border-radius: var(--r-md);
    background: var(--ink);
    color: var(--bg);
    font-size: 13.5px;
    font-weight: 500;
    box-shadow: var(--shadow-3);
    animation: toast-in-b-xweynwwcze .18s ease-out;
}

@keyframes toast-in-b-xweynwwcze {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.toast-ic[b-xweynwwcze] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    color: #fff; /* glyph #fff allowed — reads on all four status backgrounds */
    font-size: 16px;
}

.toast-ic.success[b-xweynwwcze] { background: var(--ok); }
.toast-ic.error[b-xweynwwcze]   { background: var(--err); }
.toast-ic.warning[b-xweynwwcze] { background: var(--warn); }
.toast-ic.info[b-xweynwwcze]    { background: var(--info); }

.toast .msg[b-xweynwwcze] {
    flex: 1;
    min-width: 0;
}

.toast .x[b-xweynwwcze] {
    background: transparent;
    border: 0;
    color: var(--bg);
    opacity: .6;
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.toast .x:hover[b-xweynwwcze] { opacity: 1; }