@font-face {
    font-family: 'Inter';
    src: url('/fonts/Inter-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* Eliminate the iOS Safari ~300ms tap delay on every interactive element.
   With user-scalable=no in the viewport meta this delay shouldn't apply,
   but Safari is inconsistent — touch-action: manipulation removes any
   double-tap-to-zoom heuristic on these elements specifically. */
button,
[role="button"],
.bw-emp-card,
.bw-date-card,
.bw-time-slot,
.bw-service-card,
.bw-cycle-pill,
.home-tenant-card,
.home-category-chip,
a {
    touch-action: manipulation;
}


/* ============================================================
   Bookly Design System
   Inspired by Cal.com, Linear, and Vercel dashboards
   ============================================================ */

/* === VARIABLES === */

/* ── CSS Custom Properties ── */
/* THEME-CONTRACT: this :root block holds the LIGHT values of every design token.
   The dark values live in the single `:root[data-theme="dark"]` block further down
   (search "THEME-CONTRACT: DARK"). The attribute is written only by /js/theme-boot.js.
   Bookly.Core.Ui/src/Services/ThemeService.cs mirrors the dark neutrals into
   MudBlazor's PaletteDark by hand — keep the two in sync.
   This file deliberately contains ZERO OS-preference media queries: users who never
   opted in must stay light. The string itself is banned so a grep guard reads 0. */
:root {
    color-scheme: light;
    --primary: #4B3F72;
    --primary-hover: #3d3360;
    --primary-light: #ede9f5;
    --primary-lighten: #8a7cb8;
    --primary-tint: #f5f3f9;
    --primary-btn-text: #ffffff;
    --secondary: #2AB5A0;
    --secondary-hover: #229e8c;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-overlay: #ffffff;
    --surface-hover: rgba(0, 0, 0, 0.03);
    --surface-glass: rgba(255, 255, 255, 0.7);
    --surface-glass-strong: rgba(255, 255, 255, 0.85);
    --overlay-scrim: rgba(26, 26, 46, 0.5);
    --overlay-scrim-strong: rgba(10, 8, 16, 0.9);
    --bg: #F7F6F3;
    --bg-warm: #f5f4f0;
    --bg-subtle: #eeede9;
    --dark-base: #1A1A2E;
    --text: #1A1A2E;
    --text-secondary: #4a4a5a;
    --text-muted: #5c5c6c;
    --text-inverse: #ffffff;
    --border: #e0ddd8;
    --border-light: #eeedea;
    --success: #2AB5A0;
    --success-light: #e8f8f5;
    /* ALERT INK, measured (D25). These are the *-text tokens the MudBlazor text-variant
       alerts now bind to, and a text alert has a transparent background — so the ink sits on
       the PAGE background, which on /book/{slug} is the tenant's own colour. Measured against
       the sweep's real tenant bg rgb(205,196,174): the previous values scored 3.15 (success),
       3.73 (error) and 4.09 (warning), all under AA. Darkened to clear 4.5:1 there while
       staying well clear on white (9.5-10.1:1). Recompute both if these ever change. */
    --success-text: #0b4a45;   /* 5.82 on tenant bg, 10.10 on white (was #0f766e, 3.15) */
    --warning: #e6a817;
    --warning-text: #7c2d12;   /* 5.40 on tenant bg,  9.37 on white (was #92400e, 4.09) */
    --warning-light: #fdf6e3;
    --error: #d94f4f;
    --error-light: #fdf0f0;
    --error-text: #7f1d1d;     /* 5.77 on tenant bg, 10.02 on white (was #b91c1c, 3.73) */
    --info: var(--primary);
    --info-light: var(--primary-light);
    /* --info-text is NOT var(--primary), and must not become it: BookingWizard.razor
       redefines --primary in LIGHT mode to the tenant's raw unvetted PrimaryColorHex with no
       contrast floor (only the dark path launders it through ThemeColorMath.DarkAccent). A
       pastel tenant hex would then become alert ink on /book/{slug} — a regression from
       today's fixed MudBlazor blue. A concrete value, measured like the rest. */
    --info-text: #3B2F62;      /* 6.84 on tenant bg, 11.87 on white */
    /* Brand surfaces — MODE-INVARIANT (never flip with the theme). A large fill must
       never use --primary, which becomes a pale lavender in dark mode. */
    --brand-gradient: linear-gradient(135deg, #4B3F72 0%, #6B5DB8 55%, #8674CE 100%);
    --brand-ink: #4B3F72;
    --brand-ink-hover: #3d3360;
    --text-on-brand: #ffffff;
    --text-on-brand-secondary: rgba(255, 255, 255, 0.78);
    --glass-on-brand: rgba(255, 255, 255, 0.14);
    /* Neutral status pill */
    --pill-neutral-bg: rgba(100, 116, 139, 0.1);
    --pill-neutral-text: #64748b;
    /* Decorative accents */
    --accent-indigo: #6366f1;
    --accent-violet: #8b5cf6;
    /* Categorical slots for the ServicesList accent ramp. Their light values are the exact
       legacy hexes so existing tenants' service tiles do not change colour in light mode —
       folding them onto --accent-violet/--accent-indigo shifted two of eight slots. */
    --accent-plum: #6b5b9a;
    --accent-pink: #ec4899;
    --special-accent: #7C5CBF;
    --special-accent-bg: #f1ebfb;
    /* Feature-specific invariants */
    --brand-whatsapp: #25D366;
    --chat-bubble-out: #dcf8c6;
    --chat-bubble-in: #ffffff;
    --chat-unread: #2e7d32;
    --rating-gold: #d4af37;
    /* Calendar category palette (WeeklyCalendar) */
    --cat-1: #4B8BBE;
    --cat-2: #6BA368;
    --cat-3: #E88D4F;
    --cat-4: #9B72CF;
    --cat-5: #E06C75;
    --cat-6: #56B6C2;
    --cat-7: #D4A04E;
    --cat-8: #C678DD;
    --cat-label: #ffffff;
    --cal-series-l: 55%;
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.06), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
    --shadow-primary: 0 4px 14px rgba(75, 63, 114, 0.35);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --spacing-unit: 8px;
    /* Spacing scale (8px grid) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    /* Typography scale */
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.375rem;
    --text-3xl: 1.5rem;
    /* Touch targets */
    --touch-target-min: 44px;
    /* Status colors */
    --status-confirmed: #3b82f6;
    --status-confirmed-bg: rgba(59, 130, 246, 0.1);
    --status-completed: #16a34a;
    --status-completed-bg: rgba(22, 163, 74, 0.1);
    --status-canceled: #ef4444;
    --status-canceled-bg: rgba(239, 68, 68, 0.1);
    --status-noshow: #f59e0b;
    --status-noshow-bg: rgba(245, 158, 11, 0.1);
    --status-rescheduled: #8b5cf6;
    --status-rescheduled-bg: rgba(139, 92, 246, 0.1);
    --status-pending: #64748b;
    --status-pending-bg: rgba(100, 116, 139, 0.1);
    /* Table */
    --table-header-bg: #fafbfc;
}


/* ============================================================
   THEME-CONTRACT: DARK
   The one and only dark override block. It re-declares the SAME custom-property
   names — never per-element dark restyling, never an OS-preference media query.
   The `data-theme` attribute is written exclusively by /js/theme-boot.js
   (storage key 'bookly_theme', values light|dark|system; absent/invalid → light).
   MudBlazor is synchronized by hand in ThemeService.BuildTheme's PaletteDark.
   ============================================================ */
:root[data-theme="dark"] {
    color-scheme: dark;
    --primary: #9A89D2;
    --primary-hover: #AC9EDF;
    --primary-light: rgba(154, 137, 210, 0.16);
    /* THEME-CONTRACT: exactly what ThemeColorMath.DarkAccent("#4B3F72", targetL: 0.76)
       returns, so MudBlazor's --mud-palette-primary-lighten and this token render the
       same shade. Recompute if the default primary ever changes. */
    --primary-lighten: #B3A6DD;
    --primary-tint: rgba(154, 137, 210, 0.09);
    --primary-btn-text: #17141F;
    --secondary: #2AB5A0;
    --secondary-hover: #35C9B3;
    --surface: #1E1C27;
    --surface-raised: #282436;
    --surface-overlay: #343041;
    --surface-hover: rgba(255, 255, 255, 0.05);
    --surface-glass: rgba(30, 28, 39, 0.72);
    --surface-glass-strong: rgba(30, 28, 39, 0.9);
    --overlay-scrim: rgba(8, 6, 14, 0.65);
    --overlay-scrim-strong: rgba(10, 8, 16, 0.9);
    --bg: #15131B;
    --bg-warm: #17151E;
    --bg-subtle: #262332;
    --dark-base: #1A1A2E;
    --text: #E7E5F2;
    --text-secondary: #B7B4C7;
    --text-muted: #908DA3;
    --text-inverse: #15131B;
    --border: rgba(255, 255, 255, 0.14);
    --border-light: rgba(255, 255, 255, 0.08);
    --success: #3CC9B4;
    --success-light: rgba(60, 201, 180, 0.15);
    --success-text: #7FE3D2;
    --warning: #EDB53C;
    --warning-text: #F2C464;
    --warning-light: rgba(237, 181, 60, 0.15);
    --error: #EF6C6C;
    --error-light: rgba(239, 108, 108, 0.15);
    --error-text: #F49B9B;
    --info: var(--primary);
    --info-light: var(--primary-light);
    /* THEME-CONTRACT: the same constant as --primary-lighten above — both are
       ThemeColorMath.DarkAccent("#4B3F72", targetL: 0.76). Reused, not re-derived, so the two
       cannot drift. 8.14:1 on --bg. The other dark alert inks already clear AA comfortably
       (warning 11.12, error 8.66, success 11.95), so only this one is new. */
    --info-text: #B3A6DD;
    /* D27 — ink for text sitting ON a --primary-light tint rather than on --bg. --primary
       itself measures 4.80:1 over one tint and only 3.74:1 where two stack (an .eyebrow inside
       a tinted card), and 4.33:1 on the dashboard's active nav link — the primary navigation of
       a surface that is now server-rendered and used all day. Composited properly this measures
       5.12:1 on the double tint. Same THEME-CONTRACT constant as --primary-lighten and
       --info-text above; reused, never re-derived. DARK ONLY — every consumer writes
       var(--primary-on-tint, var(--primary)), so light mode keeps exactly what it has today. */
    --primary-on-tint: #B3A6DD;
    /* Brand surfaces stay INVARIANT — repeated here only so the contract is auditable
       in one place; the values are identical to the light block on purpose. */
    --brand-gradient: linear-gradient(135deg, #4B3F72 0%, #6B5DB8 55%, #8674CE 100%);
    --brand-ink: #4B3F72;
    --brand-ink-hover: #3d3360;
    --text-on-brand: #ffffff;
    --text-on-brand-secondary: rgba(255, 255, 255, 0.78);
    --glass-on-brand: rgba(255, 255, 255, 0.14);
    /* Neutral status pill */
    --pill-neutral-bg: rgba(148, 163, 184, 0.16);
    --pill-neutral-text: #A9B1C6;
    /* Decorative accents */
    --accent-indigo: #8B8DF5;
    --accent-violet: #A78BFA;
    /* Lightened one step, and kept clear of --primary's dark #9A89D2 so two categorical
       slots never collapse to the same swatch. */
    --accent-plum: #B0A3D8;
    --accent-pink: #F472B6;
    --special-accent: #A88FE3;
    --special-accent-bg: rgba(168, 143, 227, 0.15);
    /* Feature-specific invariants / dark counterparts */
    --brand-whatsapp: #25D366;
    --chat-bubble-out: #24422F;
    --chat-bubble-in: #282436;
    --chat-unread: #2e7d32;
    --rating-gold: #E3C55C;
    /* Calendar category palette (WeeklyCalendar) — lightened for dark surfaces */
    --cat-1: #6FA6D4;
    --cat-2: #86BC83;
    --cat-3: #EFA76F;
    --cat-4: #B592E0;
    --cat-5: #EA8A91;
    --cat-6: #7BCAD4;
    --cat-7: #E2BA6E;
    --cat-8: #D494E6;
    --cat-label: #17141F;
    --cal-series-l: 68%;
    /* Elevation on dark = surface step + translucent white ring, never a black
       drop shadow (invisible against a dark page). */
    --shadow-xs: 0 0 0 1px rgba(255, 255, 255, 0.06);
    --shadow-sm: 0 0 0 1px rgba(255, 255, 255, 0.07);
    --shadow-md: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 4px 12px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, 0.10), 0 12px 28px rgba(0, 0, 0, 0.45);
    --shadow-xl: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 24px 48px rgba(0, 0, 0, 0.55);
    --shadow-primary: 0 4px 14px rgba(0, 0, 0, 0.5);
    /* Status colors — solids unchanged except rescheduled/pending; tint alphas 0.1 → 0.18 */
    --status-confirmed: #3b82f6;
    --status-confirmed-bg: rgba(59, 130, 246, 0.18);
    --status-completed: #16a34a;
    --status-completed-bg: rgba(22, 163, 74, 0.18);
    --status-canceled: #ef4444;
    --status-canceled-bg: rgba(239, 68, 68, 0.18);
    --status-noshow: #f59e0b;
    --status-noshow-bg: rgba(245, 158, 11, 0.18);
    --status-rescheduled: #A78BFA;
    --status-rescheduled-bg: rgba(167, 139, 250, 0.18);
    --status-pending: #94A3B8;
    --status-pending-bg: rgba(148, 163, 184, 0.18);
    /* Table */
    --table-header-bg: #232030;
}


/* ── Mode-invariant utility classes ──
   These deliberately carry raw literals: they are the same in both themes.
   app.css is the ONE sanctioned home for such values (see R4/R8). */
.impersonation-banner {
    background: #92400e;
    color: #fff;
}

.medal-gold {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
}

.medal-silver {
    background: linear-gradient(135deg, #9ca3af, #6b7280);
}

.medal-bronze {
    background: linear-gradient(135deg, #d97706, #b45309);
}



/* === ACCESSIBILITY === */

/* ── Accessibility: Focus-visible styles ── */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 4px;
}

button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* === BASE & RESET === */

/* ── Base Reset & Typography ── */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
}

h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.025em;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.875rem; }
h3 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
h4 { font-size: 1.25rem; font-weight: 600; letter-spacing: normal; }
h5 { font-size: 1.125rem; font-weight: 600; letter-spacing: normal; }
h6 { font-size: 1rem; font-weight: 600; letter-spacing: normal; }

p {
    color: var(--text-secondary);
    line-height: 1.6;
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--primary-hover);
}

/* ── Selection Color ── */
::selection {
    background-color: var(--primary-light);
    color: var(--primary-hover);
}

::-moz-selection {
    background-color: var(--primary-light);
    color: var(--primary-hover);
}


/* ── Custom Scrollbar ── */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background-color: var(--border);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--text-muted);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}


/* === FORMS & INPUTS === */

/* ── Form Validation ── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--success);
    outline-offset: -1px;
}

.invalid {
    outline: 1px solid var(--error);
    outline-offset: -1px;
}

.validation-message {
    color: var(--error);
    font-size: 0.8125rem;
    margin-top: 4px;
}


/* ── Blazor Error UI — Bookly-branded floating toast ── */
#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 440px;
    width: calc(100% - 32px);
    background: var(--surface-overlay);
    border: 1px solid var(--error-light);
    border-left: 4px solid var(--error);
    border-radius: 14px;
    padding: 16px 44px 16px 56px;
    box-shadow: var(--shadow-lg);
    z-index: 10000;
    font-size: 0.9375rem;
    color: var(--text);
    align-items: center;
    gap: 12px;
}

#blazor-error-ui::before {
    content: '!';
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: var(--error-light);
    color: var(--error);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
}

#blazor-error-ui .label {
    display: block;
    font-weight: 500;
    line-height: 1.4;
}

#blazor-error-ui .reload {
    display: inline-block;
    margin-top: 6px;
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.875rem;
}

#blazor-error-ui .reload:hover {
    text-decoration: underline;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 12px;
    top: 12px;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

#blazor-error-ui .dismiss:hover {
    color: var(--text);
    background: var(--bg-subtle);
}


/* === ANIMATIONS === */

/* ============================================================
   Animations
   ============================================================ */

/* Shimmer / Skeleton Loading */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-subtle) 25%,
        var(--border-light) 37%,
        var(--bg-subtle) 63%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

.skeleton-text {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 4px;
}

.skeleton-text.short {
    width: 60%;
}

.skeleton-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-card {
    height: 120px;
    border-radius: var(--radius-lg);
}

/* Page Fade-In */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Subtle float for decorative elements */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Pulse for notifications / badges */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Spin for loading indicators */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Scale on hover */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Slide up for toasts / alerts */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* === CARDS & PANELS === */

/* ============================================================
   Glass Card
   ============================================================ */
.glass-card {
    background: var(--surface-glass-strong);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.glass-card:hover {
    box-shadow: var(--shadow-md);
}


/* === LAYOUT === */

/* ============================================================
   Hero Section
   ============================================================ */
.hero-section {
    /* Brand-invariant surface: --brand-ink/--brand-ink-hover never flip (a --primary
       fill would turn this hero into a pale lavender slab in dark mode). The #818cf8
       accent stop and the pink orb below are part of the invariant brand artwork. */
    background: linear-gradient(135deg, var(--brand-ink) 0%, var(--brand-ink-hover) 40%, #818cf8 100%);
    padding: 120px 0;
    color: var(--text-on-brand);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Animated grain/noise texture overlay */
.hero-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
    pointer-events: none;
    z-index: 0;
}

/* Subtle gradient orbs for depth */
.hero-section::after {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(236, 72, 153, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.hero-section > * {
    position: relative;
    z-index: 1;
}

.hero-section h1 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: 16px;
    line-height: 1.1;
}

.hero-section p {
    font-size: 1.15rem;
    opacity: 0.9;
    max-width: 600px;
    margin: 0 auto 32px;
    color: var(--text-on-brand-secondary);
    line-height: 1.7;
}

.hero-section .hero-cta {
    display: inline-flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}


/* ============================================================
   Section Spacing & Layout
   ============================================================ */
.section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 48px;
}

.section-title h2,
.section-title h3,
.section-title h4 {
    margin-bottom: 8px;
}

.section-title p {
    max-width: 500px;
    margin: 0 auto;
    color: var(--text-secondary);
}


/* ============================================================
   Stat Card
   ============================================================ */
.stat-card {
    text-align: center;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.stat-card:hover {
    box-shadow: var(--shadow-sm);
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    background: var(--primary-light);
    color: var(--primary-on-tint, var(--primary));
}

.stat-card .stat-icon.success {
    background: var(--success-light);
    color: var(--success);
}

.stat-card .stat-icon.warning {
    background: var(--warning-light);
    color: var(--warning);
}

.stat-card .stat-icon.error {
    background: var(--error-light);
    color: var(--error);
}

.stat-card .stat-icon.info {
    background: var(--info-light);
    color: var(--info);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.stat-label {
    color: var(--text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 4px;
    letter-spacing: 0.01em;
}

.stat-change {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.stat-change.positive {
    color: var(--success);
    background: var(--success-light);
}

.stat-change.negative {
    color: var(--error);
    background: var(--error-light);
}


/* ============================================================
   Service Card
   ============================================================ */
.service-card {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-base);
    overflow: hidden;
}

.service-card:hover {
    border-color: var(--primary-lighten);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.service-card.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--primary);
}

.service-card.selected:hover {
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--primary);
}


/* ============================================================
   Employee Card
   ============================================================ */
.employee-card {
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
    text-align: center;
    transition: all var(--transition-base);
    overflow: hidden;
}

.employee-card:hover {
    border-color: var(--primary-lighten);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.employee-card.selected {
    border-color: var(--primary);
    background: var(--primary-light);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--primary);
}


/* ============================================================
   Tenant Card
   ============================================================ */
.tenant-card {
    cursor: pointer;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    overflow: hidden;
}

.tenant-card:hover {
    transform: translateY(-2px) scale(1.005);
    box-shadow: var(--shadow-lg);
    border-color: var(--border);
}

.tenant-card:active {
    transform: translateY(0) scale(1);
}


/* ============================================================
   Wizard Container
   ============================================================ */
.wizard-container {
    max-width: 640px;
    margin: 0 auto;
    animation: fadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.wizard-container .wizard-step {
    animation: fadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 32px;
}

.wizard-progress .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    position: relative;
}

.wizard-progress .step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    transition: all var(--transition-base);
    background: var(--border);
    color: var(--text-muted);
}

.wizard-progress .step.active .step-number,
.wizard-progress .step.completed .step-number {
    background: var(--primary);
    color: var(--primary-btn-text);
}

.wizard-progress .step-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    transition: color var(--transition-fast);
}

.wizard-progress .step.active .step-label {
    color: var(--primary);
    font-weight: 600;
}

.wizard-progress .step-connector {
    width: 32px;
    height: 2px;
    background: var(--border);
    transition: background var(--transition-base);
}

.wizard-progress .step-connector.completed {
    background: var(--primary);
}


/* ============================================================
   Time Slot Pill
   ============================================================ */
.time-slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-5);
    border-radius: var(--radius-full);
    border: 1.5px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-base);
    user-select: none;
    min-width: 100px;
}

.time-slot:hover {
    border-color: var(--primary-lighten);
    background: var(--primary-light);
    color: var(--primary-on-tint, var(--primary));
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.time-slot.selected {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--primary-btn-text);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 30%, transparent);
}

.time-slot.selected:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.time-slot:disabled,
.time-slot.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}


/* ============================================================
   Message Bubble (Support Chat)
   ============================================================ */
.message-bubble {
    max-width: 75%;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
    font-size: 0.9375rem;
    line-height: 1.5;
    animation: slideUp 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    position: relative;
    word-wrap: break-word;
}

.message-bubble.own {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-hover) 100%);
    color: var(--primary-btn-text);
    margin-left: auto;
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--primary) 20%, transparent);
}

.message-bubble.other {
    background: var(--bg-subtle);
    color: var(--text);
    border-bottom-left-radius: 4px;
    box-shadow: var(--shadow-xs);
}

.message-bubble .message-time {
    font-size: 0.6875rem;
    opacity: 0.7;
    margin-top: 4px;
    display: block;
}

.message-bubble.own .message-time {
    text-align: right;
    /* Inherits var(--primary-btn-text) from .message-bubble.own so it tracks the
       bubble fill in both modes; .message-bubble .message-time already sets
       opacity: 0.7. A literal white here stayed light-on-light in dark mode. */
}

.message-bubble.other .message-time {
    color: var(--text-muted);
}


/* ============================================================
   Booking Success
   ============================================================ */
.booking-success {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    position: relative;
    overflow: hidden;
}

/* Confetti / celebration pattern background */
.booking-success::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--primary) 8%, transparent) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 10%, color-mix(in srgb, var(--success) 6%, transparent) 0%, transparent 40%),
        radial-gradient(circle at 10% 80%, color-mix(in srgb, var(--warning) 6%, transparent) 0%, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

.booking-success > * {
    position: relative;
    z-index: 1;
}

.booking-success .success-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--success-light);
    color: var(--success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    font-size: 2.5rem;
    animation: scaleIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.booking-success h2 {
    margin-bottom: 8px;
}

.booking-success p {
    color: var(--text-secondary);
    max-width: 400px;
    margin: 0 auto;
}


/* ============================================================
   Feature Card (Landing)
   ============================================================ */
.feature-card {
    text-align: center;
    padding: var(--space-8);
    border-radius: var(--radius-lg);
    background: var(--surface);
    border: 1px solid var(--border-light);
    transition: all var(--transition-base);
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--border);
}

.feature-card .feature-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 1.75rem;
}


/* ============================================================
   Page Content & Container Utilities
   ============================================================ */
.page-header {
    margin-bottom: 32px;
}

.page-header h1,
.page-header h2 {
    margin-bottom: 4px;
}

.page-header p {
    color: var(--text-secondary);
    margin: 0;
}

.content-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-6);
}


/* ============================================================
   Badge / Status Chip
   ============================================================ */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.status-badge.confirmed {
    background: var(--success-light);
    color: var(--success);
}

.status-badge.pending {
    background: var(--warning-light);
    color: var(--warning);
}

.status-badge.cancelled {
    background: var(--error-light);
    color: var(--error);
}

.status-badge.completed {
    background: var(--info-light);
    color: var(--info);
}

.status-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}


/* ============================================================
   Empty State
   ============================================================ */
.empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    color: var(--text-muted);
}

.empty-state .empty-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3 {
    color: var(--text);
    margin-bottom: 8px;
}

.empty-state p {
    max-width: 400px;
    margin: 0 auto;
}


/* === NAVIGATION === */

/* ── Switch/Toggle: minimal overrides ── */
.mud-switch .mud-button-root:hover {
    background-color: transparent !important;
}

/* ============================================================
   MudBlazor Overrides
   ============================================================ */

/* ── AppBar: glass effect ── */
.mud-appbar {
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    background: var(--surface-glass-strong) !important;
    border-bottom: 1px solid var(--border-light);
    box-shadow: none !important;
    transition: background var(--transition-base);
}

.mud-appbar.mud-appbar-dense {
    min-height: 56px;
}

/* ── Drawer: clean sidebar ── */
.mud-drawer {
    border-right: 1px solid var(--border-light) !important;
    box-shadow: none !important;
    background: var(--surface) !important;
    height: 100%;
    overflow-y: auto;
}

.mud-drawer .mud-nav-link {
    border-radius: var(--radius-sm);
    margin: 2px 0;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all var(--transition-fast);
}

.mud-drawer .mud-nav-link:hover {
    background: var(--bg-subtle);
    color: var(--text);
}

.mud-drawer .mud-nav-link.active {
    background: var(--primary-light);
    color: var(--primary-on-tint, var(--primary));
    font-weight: 600;
}

.mud-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: var(--primary);
}

.mud-drawer .mud-navmenu.mud-navmenu-bordered .mud-nav-link:not(:last-child)::after {
    display: none;
}

/* ── Nav Group ── */
.mud-nav-group .mud-nav-group-title {
    font-size: 0.875rem;
    font-weight: 500;
}

/* ── Table: modern styling ── */
.mud-table {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-xs) !important;
    overflow: hidden;
}

.mud-table .mud-table-head .mud-table-row .mud-table-cell {
    background: var(--bg-subtle) !important;
    border-bottom: 1px solid var(--border) !important;
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: var(--space-3) var(--space-4);
}

.mud-table .mud-table-body .mud-table-row .mud-table-cell {
    border-bottom: 1px solid var(--border-light) !important;
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem;
    vertical-align: middle;
}

.mud-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}

.mud-table .mud-table-body .mud-table-row:hover {
    background: var(--bg-subtle) !important;
}

/* ── Chip: pill shape ── */
.mud-chip {
    border-radius: var(--radius-full) !important;
    font-weight: 500;
    font-size: 0.8125rem;
    transition: all var(--transition-fast);
}

.mud-chip:hover {
    box-shadow: var(--shadow-sm);
}

/* ── Card: consistent radius and shadow ── */
.mud-card {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-sm) !important;
    border: 1px solid var(--border-light);
    transition: all var(--transition-base);
    overflow: hidden;
}

.mud-card:hover {
    box-shadow: var(--shadow-md) !important;
}

.mud-card.mud-elevation-0 {
    box-shadow: none !important;
}

.mud-card.mud-elevation-0:hover {
    box-shadow: none !important;
}

/* ── Button: smoother transitions ── */
.mud-button-root {
    transition: all var(--transition-base) !important;
    text-transform: none !important;
    font-weight: 500;
    letter-spacing: 0;
    border-radius: var(--radius-sm) !important;
}

.mud-button-root:hover {
    transform: translateY(-1px);
}

.mud-button-root:active {
    transform: translateY(0);
}

.mud-button-root.mud-button-filled {
    box-shadow: var(--shadow-sm);
}

.mud-button-root.mud-button-filled:hover {
    box-shadow: var(--shadow-md);
}

.mud-button-root.mud-button-outlined {
    border-width: 1.5px;
}

/* Prevent icon-only buttons from moving */
.mud-icon-button:hover {
    transform: none;
}

/* ── Dialog: glass effect ── */
.mud-dialog {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-xl) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-light);
}

.mud-dialog .mud-dialog-title {
    font-weight: 600;
    font-size: 1.125rem;
    padding: var(--space-4) var(--space-5) var(--space-2);
}

.mud-dialog .mud-dialog-content {
    padding: var(--space-2) var(--space-5);
}

.mud-dialog .mud-dialog-actions {
    padding: var(--space-2) var(--space-5) var(--space-4);
}

/* Dialog backdrops ONLY (.mud-overlay-dialog). MudBlazor v9 selects/menus open a
   modal popover with a bare .mud-overlay click-catcher stacked ABOVE the dialog —
   styling all .mud-overlay blurs/paints over the dialog the dropdown lives in. */
.mud-overlay.mud-overlay-dialog {
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ── Text Field: cleaner inputs ── */
.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--radius-sm);
    border-width: 1.5px;
    transition: border-color var(--transition-fast);
}

.mud-input-control:hover .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--primary-lighten);
}

/* ── Paper: consistent styling ── */
.mud-paper {
    border-radius: var(--radius-md);
}

/* ── Alert: softer styling ── */
.mud-alert {
    border-radius: var(--radius-sm) !important;
}

/* ── Alert ink: bind the text variants to OUR tokens (D25) ────────────────────────────────
   MudBlazor's text-variant alert colours itself from --mud-palette-{severity}, which the
   theme contract (R1) forbids us from aliasing — those are MudBlazor's own scale and
   MudThemeProvider does not exist at first paint, nor at all on the static pages. So each
   severity is bound explicitly to the app.css token instead, which is the one the rest of
   the design system already uses.

   !important is required, not stylistic: MudBlazor emits its own
   `.mud-alert-text-{severity} { color: ... }` from the component stylesheet, and the two
   selectors have identical specificity — without it the load order decides the colour, and
   the load order is not ours to control from a class library.

   The icon is a SEPARATE rule in MudBlazor 9.x (`.mud-alert-text-{severity} .mud-alert-icon`),
   so it needs its own binding or the icon and the words disagree. */
.mud-alert-text-warning,
.mud-alert-text-warning .mud-alert-icon { color: var(--warning-text) !important; }

.mud-alert-text-error,
.mud-alert-text-error .mud-alert-icon { color: var(--error-text) !important; }

.mud-alert-text-success,
.mud-alert-text-success .mud-alert-icon { color: var(--success-text) !important; }

.mud-alert-text-info,
.mud-alert-text-info .mud-alert-icon { color: var(--info-text) !important; }

/* ── Avatar: smooth transitions ── */
.mud-avatar {
    transition: all var(--transition-fast);
}

/* ── Snackbar: modern styling ── */
.mud-snackbar {
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ── Date Picker styling ── */
.mud-picker .mud-picker-calendar-header {
    font-weight: 600;
}

/* ── Tooltip: cleaner look ── */
.mud-tooltip {
    border-radius: var(--radius-sm) !important;
    font-size: 0.8125rem;
    padding: 6px 12px;
}

/* ── Progress / Loading ── */
.mud-progress-linear {
    border-radius: var(--radius-full) !important;
}

/* ── Tab: cleaner tabs ── */
.mud-tabs .mud-tab {
    text-transform: none !important;
    font-weight: 500;
    letter-spacing: 0;
}


/* === UTILITIES === */

/* ============================================================
   Utility Classes
   ============================================================ */
.cursor-pointer {
    cursor: pointer;
}

.transition-all {
    transition: all var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-2px);
}

.hover-glow:hover {
    box-shadow: 0 0 0 4px var(--primary-light);
}

.text-gradient {
    background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.border-subtle {
    border: 1px solid var(--border-light);
}

.bg-subtle {
    background: var(--bg-subtle);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
}


/* ============================================================
   Status Chips (by booking status)
   ============================================================ */
.status-chip--confirmed {
    background: var(--status-confirmed-bg);
    color: var(--status-confirmed);
}

.status-chip--completed {
    background: var(--status-completed-bg);
    color: var(--status-completed);
}

.status-chip--canceled {
    background: var(--status-canceled-bg);
    color: var(--status-canceled);
}

.status-chip--noshow {
    background: var(--status-noshow-bg);
    color: var(--status-noshow);
}

.status-chip--rescheduled {
    background: var(--status-rescheduled-bg);
    color: var(--status-rescheduled);
}

.status-chip--default {
    background: var(--status-pending-bg);
    color: var(--status-pending);
}

/* Status select pill (for inline status dropdowns) */
.status-select-pill {
    border-radius: var(--radius-xl);
    font-weight: 600;
    font-size: var(--text-xs);
    max-width: 140px;
    height: 30px;
}


/* ============================================================
   Filter Bar
   ============================================================ */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
}

.filter-bar .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border) !important;
    border-radius: 10px !important;
}

.filter-bar .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--text-muted) !important;
}

@media (max-width: 599px) {
    .filter-bar {
        flex-direction: column;
        padding: var(--space-4);
    }

    .filter-bar > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}


/* ============================================================
   Table Premium (unified table styling)
   ============================================================ */
.table-premium .mud-table-head .mud-table-row .mud-table-cell {
    border-bottom: 1px solid var(--border-light) !important;
    background: var(--table-header-bg) !important;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    padding: var(--space-3) var(--space-4);
}

.table-premium .mud-table-body .mud-table-row .mud-table-cell {
    border-bottom: 1px solid var(--bg) !important;
    font-size: var(--text-base);
    color: var(--text-secondary);
    padding: var(--space-3) var(--space-4);
}

.table-premium .mud-table-body .mud-table-row:hover {
    background-color: var(--bg) !important;
}

.table-premium .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}


/* ============================================================
   Card Responsive (stacks content on mobile)
   ============================================================ */
.card-responsive {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    transition: box-shadow var(--transition-base);
}

.card-responsive:hover {
    box-shadow: var(--shadow-sm);
}

/* Mobile card list (replaces table on small screens) */
.mobile-card-list {
    display: none;
}

.desktop-table {
    display: block;
}

@media (max-width: 599px) {
    .mobile-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }

    .desktop-table {
        display: none;
    }
}


/* ============================================================
   Touch Target
   ============================================================ */
.touch-target {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
}

/* Alias. Five components in Bookly.Core.Ui write `tap-target` rather than
   `touch-target` — SegmentedControl, UpcomingBookingCard, StickyDateHeader,
   Home and Login. That class was never defined anywhere, so all five silently
   got no minimum size at all. Defining the alias repairs them without touching
   the RCL; the call sites can be renamed later at leisure. */
.tap-target {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
}

/* ============================================================
   Press feedback
   ------------------------------------------------------------
   body sets -webkit-tap-highlight-color: transparent, so a tap produces no
   native flash anywhere in the app. The public booking wizard got a press
   primitive when it was fixed, but it was declared inside that page's own
   <style> block — and Bookly.Core.Ui ships no stylesheet of its own, so the
   class was physically unreachable from every other page. Hoisting it here
   makes it available app-wide: shells, calendar, list cards, dialogs.
   Transform + background only, so it composites and can never trigger layout.
   ============================================================ */
.bw-pressable {
    transition: transform 90ms cubic-bezier(.2, .7, .3, 1),
                background-color 180ms cubic-bezier(.2, .7, .3, 1),
                border-color 180ms cubic-bezier(.2, .7, .3, 1);
}

.bw-pressable:active {
    transform: scale(0.97);
}

/* Wide targets (full-width rows, nav items, bottom-bar buttons) need a
   shallower scale — 0.97 on a 360px-wide element reads as the page flinching. */
.bw-pressable--wide:active {
    transform: scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
    .bw-pressable:active,
    .bw-pressable--wide:active {
        transform: none;
        background-color: var(--primary-light);
    }
}

/* ============================================================
   Coarse-pointer touch target floor
   ------------------------------------------------------------
   Measured live on production 2026-08-01 at /admin/invoices:
     6x icon button   25x25px   nearest-neighbour gap  4px
     4x filter chip  ~51-98x32px             gap 12px
     11 of 14 small controls sit closer than 16px to another button.
   Same VISUAL-AUDIT-2026-07-31.md sweep: Size.Small buttons render 26-28px
   tall platform-wide (21 on /dashboard/settings alone, 9 on /admin/marketing).

   .tap-target (above) already floors five specific call sites at 44px, but
   applying that unconditionally to all 516 Size.Small instances across 126
   core.ui files would inflate every dense desktop admin table — nobody asked
   for a density change, and MudBlazor's own small-size classes are what most
   controls actually carry, not .tap-target.

   Why this can't be a hit-area pseudo-element instead: every MudBlazor button
   carries .mud-ripple { position:relative; overflow:hidden } and the ripple
   effect itself is implemented with generated content on the same box — a
   hit-extending generated-content layer would collide with it, and
   overflow:hidden clips anything outside the border box for hit-testing
   anyway. So growth has to happen in the LAYOUT BOX, not a phantom overlay.
   Consequence: hit area == border box, always. No generated-content hit
   extensions here, no negative margins — flex/table layout tiles border
   boxes disjointly, so two grown controls push each other apart instead of
   overlapping. At the measured 25x25px/4px case, a naive generated-content
   hit box centred on each icon would put two 44px targets 29px apart
   centre-to-centre — a 15px-wide overlap. Real layout growth cannot produce
   that: it can only widen the gap.

   Scope is the PRIMARY-pointer coarse media feature, never the broader
   "matches if ANY attached pointer is coarse" variant. A touchscreen laptop
   matches that broader variant but keeps a fine primary pointer (mouse is
   primary) and deliberately keeps desktop density under this rule — its
   occasional screen taps still meet the un-floored 25px targets, which is
   accepted because a precise pointer is present. Phones and detached tablets
   have coarse as their primary pointer and get the floor. iPads showing
   desktop tables grow under this — that IS the point, do not shrink the floor
   to avoid it. (Note the growth is not all new: the older
   `@media (hover: none) and (pointer: coarse)` block far below already floors
   every `.mud-icon-button` at 44x44 and every `.mud-button-root` at 44px tall,
   both with !important, on exactly those devices. What this block adds is
   min-WIDTH on small text / outlined / filled buttons, clickable chips, and
   coverage of coarse-primary devices that still report hover.)

   Chip scope is deliberately `.mud-chip.mud-clickable` only, never bare
   `.mud-chip` — non-interactive status chips (e.g. an inline height:22px badge
   in an invoice row) would be inflated by this too, because min-height beats
   an inline height declaration.

   The `.mud-input`/`.mud-input-adornment` exclusion sits OUTSIDE this media
   query and carries !important, and both of those are load-bearing. MudBlazor
   9.1.0 declares `.mud-input { display:inline-flex; align-items:center }` with
   no height, and `.mud-input-adornment { height:.01em; max-height:2em }` — so
   a 44px floor on a clear "x" or an adornment button either stretches the
   whole field or overflows the height-locked wrapper, on every dense search
   box (e.g. /admin/invoices). Three separate floors would otherwise beat a
   scoped, non-important carve-out: `.mud-button-root` (min-height) and
   `.mud-icon-button` (both axes), each 44px !important under
   `(hover: none) and (pointer: coarse)`, plus
   `.mud-icon-button.mud-icon-button-size-small` at 44px under
   `(max-width: 599px)` — that last one is equal in specificity but later in
   the file, so it wins on order. Between them they cover every phone and
   tablet, which is to say the carve-out had NO effect anywhere before it was
   given !important. It is scoped tightly to descendants of an input; nothing
   outside a field can match it.

   .action-cluster exists so a handful of call sites can widen 4px gaps to 8px
   under this same media query without a second, competing gap rule fighting
   app.css's own `gap-1` utility at equal specificity (link order would
   silently decide the winner). Base gap matches gap-1 (--space-1) so desktop
   is unchanged; only the coarse-pointer branch below widens it.
   ============================================================ */
.action-cluster {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

@media (pointer: coarse) {
    .mud-icon-button-size-small,
    .mud-button-text-size-small,
    .mud-button-outlined-size-small,
    .mud-button-filled-size-small,
    .mud-chip.mud-clickable {
        min-width: var(--touch-target-min);
        min-height: var(--touch-target-min);
    }

    .action-cluster {
        gap: var(--space-2);
    }
}

/* Buttons living INSIDE an input (clear "x", adornments) must stay unfloored.
   Unconditional and !important on purpose — see comment block above. */
.mud-input .mud-icon-button,
.mud-input-adornment .mud-icon-button {
    min-width: unset !important;
    min-height: unset !important;
}


/* ============================================================
   Dialog Modern (consistent dialog styling)
   ============================================================ */
.dialog-modern .mud-dialog-content {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-6) var(--space-6) !important;
}

.dialog-modern .mud-dialog-title {
    font-weight: 700;
    font-size: 1.125rem;
    padding: var(--space-5) var(--space-6) var(--space-2);
    letter-spacing: -0.01em;
}

.dialog-modern .mud-dialog-actions {
    padding: var(--space-3) var(--space-6) var(--space-5);
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

.dialog-modern .mud-input-label {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

@media (max-width: 599px) {
    .dialog-modern .mud-dialog-content {
        gap: var(--space-4);
        padding: var(--space-3) var(--space-4) var(--space-4) !important;
    }
}


/* ============================================================
   Empty State with SVG Illustration
   ============================================================ */
.empty-state-modern {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.empty-state-modern svg {
    width: 120px;
    height: 120px;
    opacity: 0.85;
}

.empty-state-modern h3 {
    color: var(--text);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
}

.empty-state-modern p {
    color: var(--text-muted);
    font-size: 0.875rem;
    max-width: 320px;
    margin: 0 auto;
    line-height: 1.6;
}

@media (max-width: 599px) {
    .empty-state-modern {
        padding: var(--space-8) var(--space-4);
    }

    .empty-state-modern svg {
        width: 96px;
        height: 96px;
    }
}


/* === DASHBOARD === */

/* ============================================================
   Today Summary Strip (dashboard)
   ============================================================ */
.today-strip {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    padding: 14px 20px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
    overflow-x: auto;
}

.today-strip-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    white-space: nowrap;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

/* The today strip is the one thing a manager reads at a glance — how many bookings,
   how much money. The number carried the same font-size as its own label and was
   distinguished by weight alone, so nothing in the row won the eye. Sizing the value
   above the label makes the strip scannable without reading it. */
.today-strip-item strong {
    color: var(--text);
    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.2;
}

.today-strip-divider {
    width: 1px;
    height: 24px;
    background: var(--border);
    flex-shrink: 0;
}

@media (max-width: 599px) {
    .today-strip {
        gap: var(--space-3);
        padding: 10px 12px;
        border-radius: var(--radius-sm);
        margin-bottom: 12px;
    }

    .today-strip-item {
        gap: var(--space-2);
        font-size: 0.8rem;
    }

    /* Keep the value clearly above the 0.8rem label on mobile, where the strip
       matters most and horizontal room is tightest. */
    .today-strip-item strong {
        font-size: 1rem;
    }

    .today-strip-divider {
        height: 20px;
    }
}


/* ============================================================
   Notification Bell
   ============================================================ */
.notification-badge {
    position: relative;
}

.notification-badge-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    background: var(--error);
    color: var(--text-inverse);
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--surface);
    animation: chipPop 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.notification-dropdown {
    width: 360px;
    max-width: 100vw;
    max-height: 420px;
    overflow-y: auto;
    padding: 0;
}

.notification-item {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light);
    transition: background var(--transition-fast);
    cursor: pointer;
}

.notification-item:hover {
    background: var(--bg-subtle);
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item.unread {
    background: var(--primary-tint);
}


/* ============================================================
   Command Palette (Ctrl+K)
   ============================================================ */
.command-palette-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--overlay-scrim);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 20vh;
    animation: fadeIn 0.15s ease;
}

.command-palette {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border);
    overflow: hidden;
    animation: dialogEnter 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.command-palette-input {
    width: 100%;
    padding: var(--space-4) var(--space-5);
    border: none;
    outline: none;
    font-size: 1rem;
    font-family: inherit;
    background: transparent;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
}

.command-palette-input::placeholder {
    color: var(--text-muted);
}

.command-palette-results {
    max-height: 320px;
    overflow-y: auto;
    padding: var(--space-2);
}

.command-palette-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast);
    font-size: var(--text-base);
    color: var(--text);
}

.command-palette-item:hover,
.command-palette-item.active {
    background: var(--primary-light);
    color: var(--primary-on-tint, var(--primary));
}

@media (max-width: 599px) {
    .command-palette-overlay {
        padding-top: 10vh;
        padding: var(--space-4);
    }

    .command-palette {
        max-width: 100%;
    }
}


/* ============================================================
   Onboarding Checklist
   ============================================================ */
.onboarding-checklist {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: 24px;
}

.onboarding-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.onboarding-item:last-child {
    border-bottom: none;
}

.onboarding-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.onboarding-check.done {
    background: var(--success);
    border-color: var(--success);
    color: var(--text-inverse);
}

@media (max-width: 599px) {
    .onboarding-checklist {
        padding: var(--space-4);
        margin-bottom: 16px;
    }

    .onboarding-item {
        gap: var(--space-3);
        padding: 10px 0;
        flex-wrap: wrap;
    }

    .onboarding-item .mud-button-outlined {
        margin-left: 36px;
        font-size: 0.7rem !important;
        padding: 4px 10px !important;
    }
}


/* === CUSTOMER PORTAL === */

/* ============================================================
   Customer Side Panel
   ============================================================ */
.customer-panel-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-8) var(--space-6) var(--space-6);
    border-bottom: 1px solid var(--border-light);
}

.customer-panel-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    padding: var(--space-5) var(--space-6);
    border-bottom: 1px solid var(--border-light);
}

.customer-panel-stat {
    text-align: center;
}

.customer-panel-stat-value {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text);
}

.customer-panel-stat-label {
    font-size: var(--text-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}


/* ============================================================
   Employee Calendar (Fresha-style day view)
   ============================================================ */
.emp-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.emp-cal-columns {
    display: flex;
    overflow-x: auto;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.emp-cal-time-gutter {
    flex-shrink: 0;
    width: 60px;
    position: relative;
    border-right: 1px solid var(--border);
    background: var(--bg);
}

.emp-cal-column {
    flex: 1;
    min-width: 160px;
    position: relative;
    border-right: 1px solid var(--border-light);
}

.emp-cal-column:last-child {
    border-right: none;
}

.emp-cal-column-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 8px;
    border-bottom: 2px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 2;
    gap: var(--space-1);
}

.emp-cal-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary-on-tint, var(--primary));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 700;
}

.emp-cal-name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.emp-cal-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid var(--surface);
}

.emp-cal-status-dot.online {
    background: var(--success);
}

.emp-cal-status-dot.offline {
    background: var(--text-muted);
}

.emp-cal-column.day-off {
    opacity: 0.5;
    pointer-events: none;
}

.emp-cal-dayoff-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    background: var(--bg-subtle);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    z-index: 1;
}

.emp-cal-grid-area {
    position: relative;
    min-height: 780px;
}

@media (max-width: 599px) {
    .emp-cal-column {
        min-width: 120px;
    }

    .emp-cal-column-header {
        padding: 8px 4px;
    }

    .emp-cal-avatar {
        width: 30px;
        height: 30px;
        font-size: 0.6rem;
    }

    .emp-cal-name {
        font-size: 0.65rem;
    }

    .emp-cal-columns {
        border-radius: var(--radius-sm);
        max-height: 520px;
    }

    .emp-cal-header {
        flex-wrap: wrap;
    }
}


/* ============================================================
   Calendar Quick Book (Bottom Sheet)
   ============================================================ */
.quick-book-sheet {
    padding: var(--space-6);
}

.quick-book-sheet .quick-book-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.quick-book-prefill {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.quick-book-prefill-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 6px 12px;
    background: var(--primary-light);
    color: var(--primary-on-tint, var(--primary));
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
}


/* ============================================================
   Chat-Style Support Tickets
   ============================================================ */
.chat-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    max-height: calc(100vh - 300px);
    max-height: calc(100dvh - 300px);
    overflow-y: auto;
}

@media (max-width: 599px) {
    .chat-thread {
        max-height: calc(100dvh - 280px);
    }
}

.chat-reply-box {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--border-light);
    padding: var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: flex-end;
}

.chat-reply-box .mud-input-control {
    flex: 1;
}


/* ============================================================
   Calendar View Toggle
   ============================================================ */
.view-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}

.view-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-muted);
    transition: all var(--transition-fast);
}

.view-toggle-btn.active {
    background: var(--primary-light);
    color: var(--primary-on-tint, var(--primary));
}

.view-toggle-btn:hover:not(.active) {
    background: var(--bg-subtle);
    color: var(--text-secondary);
}


/* ============================================================
   FAB (Floating Action Button)
   ============================================================ */
.fab-new-booking {
    position: fixed !important;
    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    right: 20px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: var(--primary-btn-text);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent);
    display: none;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
    contain: none !important;
    transform: none !important;
}

.fab-new-booking:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 50%, transparent);
}

.fab-new-booking:active {
    transform: scale(0.95);
}

@media (max-width: 959px) {
    .fab-new-booking {
        display: flex;
    }
}

/* Prevent MudLayout from creating a containing block that breaks position:fixed on FAB */
.mud-layout,
.mud-main-content,
.mud-layout-content {
    transform: none !important;
    will-change: auto !important;
    contain: none !important;
}

/* Session expired dialog — never full-screen, always centered card */
.session-expired-dialog {
    max-height: none !important;
    height: auto !important;
    max-width: 400px !important;
    width: auto !important;
    border-radius: 16px !important;
    margin: auto !important;
}


/* === RESPONSIVE === */

/* ============================================================
   Responsive Breakpoints
   sm: 640px | md: 768px | lg: 1024px | xl: 1440px
   ============================================================ */

/* ── Phone (< 600px) ── */
@media (max-width: 599px) {
    html, body {
        font-size: 14px;
    }

    .hero-section {
        padding: 64px 16px;
    }

    .hero-section h1 {
        font-size: 1.875rem;
        letter-spacing: -0.02em;
    }

    .hero-section p {
        font-size: 0.9375rem;
    }

    .section {
        padding: var(--space-12) 0;
    }

    .section-title {
        margin-bottom: 32px;
    }

    .message-bubble {
        max-width: 85%;
    }

    .booking-success {
        padding: var(--space-8) var(--space-4);
    }

    .wizard-container {
        max-width: 100%;
    }

    /* Stack customer layout nav on mobile */
    .mud-appbar .mud-button-root {
        padding: 6px 8px;
        font-size: 0.75rem;
    }
}

/* ── Small (640px - 767px) ── */
@media (min-width: 640px) and (max-width: 767px) {
    .hero-section {
        padding: 80px 24px;
    }

    .hero-section h1 {
        font-size: 2.25rem;
    }

    .section {
        padding: 56px 0;
    }
}

/* ── Medium (768px - 1023px) ── */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-section {
        padding: 96px 32px;
    }

    .hero-section h1 {
        font-size: 2.5rem;
    }

    .section {
        padding: 64px 0;
    }
}

/* ── Large (1024px - 1439px) ── */
@media (min-width: 1024px) and (max-width: 1439px) {
    .hero-section {
        padding: 112px 0;
    }

    .hero-section h1 {
        font-size: 2.75rem;
    }

    .section {
        padding: 72px 0;
    }
}

/* ── Extra Large (1440px+) ── */
@media (min-width: 1440px) {
    .hero-section {
        padding: 120px 0;
    }

    .hero-section h1 {
        font-size: 3rem;
    }

    .section {
        padding: 80px 0;
    }
}

/* ── Hover effects only for non-touch devices ── */
@media (hover: hover) and (pointer: fine) {
    .tenant-card:hover {
        transform: translateY(-2px) scale(1.005);
        box-shadow: var(--shadow-lg);
    }

    .service-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .employee-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .time-slot:hover {
        transform: translateY(-1px);
    }
}

/* ── Touch devices: remove hover transforms ──
   On touch, :hover latches after a tap and only clears when the next tap lands
   elsewhere, so a lifted card stays lifted with no way to un-hover.
   .an-stat-card is the dashboard's only hover-transform (the authenticated
   pages express hover as colour, not movement) — verified by grep rather than
   assumed, so this list stays honest instead of speculatively long. */
@media (hover: none) {
    .tenant-card:hover,
    .service-card:hover,
    .employee-card:hover,
    .time-slot:hover,
    .an-stat-card:hover,
    .mud-button-root:hover {
        transform: none;
    }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .hero-section::before,
    .hero-section::after {
        animation: none;
    }
}

/* ── Print ── */
@media print {
    .mud-appbar,
    .mud-drawer,
    .mud-snackbar-provider,
    #blazor-error-ui {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
    }

    .glass-card,
    .mud-card {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
}


/* ============================================================
   LOGIN PAGE — Split Screen Premium Design
   ============================================================ */

.login-page {
    display: flex;
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
}

.login-page-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 56px);
    min-height: calc(100dvh - 56px);
    background: linear-gradient(135deg, var(--bg) 0%, var(--primary-tint) 100%);
    padding: var(--space-6);
}

.login-form-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
    padding: var(--space-6);
}

.login-form-wrapper {
    width: 100%;
    max-width: 440px;
}

.login-form-card {
    background: var(--surface);
    border-radius: var(--radius-xl);
    padding: 40px 36px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
}

.login-mobile-logo {
    display: block;
    margin-bottom: 24px;
    text-align: center;
}

.login-field-group {
    margin-bottom: 20px;
}

.login-field-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: 0.01em;
}

/* Make MudTextField inputs taller in login form */
.login-input .mud-input-outlined .mud-input-slot {
    padding-top: 14px;
    padding-bottom: 14px;
}

.login-input .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 14px !important;
}

.login-input .mud-input-control:hover .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--primary-lighten) !important;
}

.login-input .mud-input.mud-input-outlined.mud-input-adorned-start .mud-input-slot {
    padding-left: 12px;
}

.login-error {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 14px;
    background: var(--error-light);
    border: 1px solid var(--error-light);
    border-radius: var(--radius-md);
    margin-bottom: 4px;
}

.login-submit-btn:hover:not(:disabled) {
    box-shadow: 0 6px 20px color-mix(in srgb, var(--primary) 50%, transparent) !important;
    transform: translateY(-1px);
}

.login-submit-btn:active:not(:disabled) {
    transform: translateY(0);
}

.login-submit-btn.mud-button-filled.mud-disabled,
.login-submit-btn[disabled] {
    background-color: var(--primary) !important;
    color: var(--primary-btn-text) !important;
    opacity: 0.5;
    pointer-events: none;
}

/* Desktop: wider form panel */
@media (min-width: 960px) {
    .login-form-panel {
        flex: 0 0 520px;
    }

    .login-mobile-logo {
        display: none;
    }

    .login-form-card {
        padding: 48px 44px;
    }
}

@media (max-width: 599px) {
    .login-form-card {
        padding: 28px 20px;
        border-radius: var(--radius-lg);
    }
}


/* === HOME PAGE === */

/* ============================================================
   HOME PAGE — Premium Landing
   ============================================================ */

/* ── Hero ── */
.home-hero {
    background: linear-gradient(180deg, var(--bg) 0%, var(--primary-light) 50%, var(--bg) 100%);
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}

.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--primary) 6%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events: none;
    z-index: 0;
}

.home-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, color-mix(in srgb, var(--secondary) 6%, transparent) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: -200px -600px 0 0 color-mix(in srgb, var(--secondary) 4%, transparent),
                400px -200px 200px 100px color-mix(in srgb, var(--primary) 3%, transparent);
}

.home-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-12);
    position: relative;
    z-index: 1;
}

.home-hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.home-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--primary-light);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 6px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-on-tint, var(--primary));
    letter-spacing: 0.01em;
    margin-bottom: 28px;
}

.home-hero-title {
    font-size: 3.25rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.08;
    letter-spacing: -1.5px;
    margin: 0 0 20px;
    max-width: 700px;
    text-align: center;
    outline: none;
}

.home-hero-subtitle {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 36px;
    max-width: 560px;
    font-weight: 400;
    text-align: center;
}

.home-hero-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    justify-content: center;
}

.home-btn-primary {
    background: var(--primary) !important;
    color: var(--primary-btn-text) !important;
    text-transform: none !important;
    font-weight: 700 !important;
    padding: var(--space-3) var(--space-8) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.9375rem !important;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 30%, transparent) !important;
    transition: background var(--transition-fast), box-shadow var(--transition-fast) !important;
}

.home-btn-primary:hover {
    background: var(--primary-hover) !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

.home-btn-secondary {
    border: 1.5px solid var(--border) !important;
    color: var(--text-secondary) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    padding: var(--space-3) var(--space-8) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.9375rem !important;
    background: transparent !important;
    transition: border-color var(--transition-fast), color var(--transition-fast) !important;
}

.home-btn-secondary:hover {
    border-color: var(--primary-lighten) !important;
    color: var(--primary) !important;
}

/* Hero mockup / visual */
.home-hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-hero-mockup {
    width: 100%;
    max-width: 420px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.home-mockup-header {
    display: flex;
    gap: var(--space-2);
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
}

.home-mockup-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
}

.home-mockup-body {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.home-mockup-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: 14px 16px;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

.home-mockup-avatar-sm {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-lighten));
}

.home-mockup-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.home-mockup-line {
    height: 8px;
    border-radius: 4px;
    background: var(--border);
}

.home-mockup-line-light {
    background: var(--border-light);
    height: 6px;
}

.home-mockup-badge-confirmed {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--success);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-mockup-badge-pending {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--warning);
    flex-shrink: 0;
}

/* ── Hero Floating Cards ── */
.home-floating-cards {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 340px;
    margin: 0 auto;
}

.home-float-card {
    position: absolute;
    background: var(--surface-raised);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-md);
    transition: transform 0.3s ease;
}

.home-float-card-1 {
    top: 0;
    left: 0;
    width: 240px;
    border-left: 4px solid var(--success);
    animation: floatCard1 6s ease-in-out infinite;
}

.home-float-card-2 {
    top: 30px;
    left: 50%;
    transform: translateX(-50%) rotate(-2deg);
    width: 280px;
    z-index: 2;
    box-shadow: var(--shadow-lg);
    animation: floatCard2 6s ease-in-out infinite;
}

.home-float-card-3 {
    bottom: 0;
    right: 0;
    width: 220px;
    border-top: 3px solid var(--secondary);
    transform: rotate(2deg);
    animation: floatCard3 6s ease-in-out infinite;
}

@keyframes floatCard1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes floatCard2 {
    0%, 100% { transform: translateX(-50%) rotate(-2deg) translateY(0); }
    50% { transform: translateX(-50%) rotate(-2deg) translateY(-6px); }
}

@keyframes floatCard3 {
    0%, 100% { transform: rotate(2deg) translateY(0); }
    50% { transform: rotate(2deg) translateY(-10px); }
}

/* ── Social Proof Strip ── */
.home-social-proof {
    background: var(--surface);
    padding: var(--space-8) 0;
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.home-social-proof-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    flex-wrap: wrap;
}

.home-proof-stat {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.home-proof-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.03em;
}

.home-proof-label {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
}

.home-proof-divider {
    width: 1px;
    height: 28px;
    background: var(--border);
}

/* ── How it Works ── */
.home-how-section {
    background: var(--bg);
}

.home-steps-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    position: relative;
}

.home-steps-row::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.home-step-card {
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: 36px 28px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.home-step-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border);
    transform: scale(1.03);
}

.home-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--primary-btn-text);
    font-size: 0.8125rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.home-step-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.home-step-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px;
}

.home-step-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ── Features ── */
.home-features-section {
    background: var(--surface);
    padding: 80px 0;
    position: relative;
}

.home-features-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--primary) 4%, transparent) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

.home-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
}

.home-feature-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--primary);
    border-radius: var(--radius-lg);
    padding: 28px 24px;
    position: relative;
    z-index: 1;
    transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.home-feature-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border);
    transform: translateY(-4px);
}

.home-feature-icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-feature-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 6px;
    letter-spacing: -0.25px;
}

.home-feature-desc {
    font-size: 0.875rem;
    color: var(--text-muted);
    line-height: 1.7;
    margin: 0;
}

/* ── Tenants Section ── */
.home-tenants-section {
    padding: 80px 0;
    background: var(--bg);
}

.home-category-chips {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: 4px 16px 12px;
    -webkit-overflow-scrolling: touch;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.home-category-chips::-webkit-scrollbar {
    display: none;
}

.home-category-chip {
    padding: var(--space-2) var(--space-4);
    min-height: 44px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--border);
    background: var(--surface);
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    color: var(--text);
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    font-family: inherit;
    line-height: 1.4;
}

.home-category-chip:hover {
    border-color: var(--primary);
}

.home-category-chip.active {
    background: var(--primary);
    color: var(--primary-btn-text);
    border-color: var(--primary);
}

.home-category-chip-icon {
    margin-right: 4px;
}

.home-tenant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 260px));
    gap: var(--space-4);
    justify-content: center;
}

.home-tenant-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.home-tenant-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--primary);
    transform: translateY(-4px);
}

.home-tenant-card:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.home-tenant-card:active {
    transform: translateY(-1px);
}

.home-tenant-card-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.home-tenant-name {
    font-weight: 700 !important;
    color: var(--text);
    line-height: 1.3;
    word-break: break-word;
}

.home-tenant-avatar {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary-lighten));
    color: var(--primary);
    font-weight: 700;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-tenant-avatar-lg {
    width: 96px;
    height: 96px;
    min-width: 96px;
    border-radius: 20px;
    font-size: 2.25rem;
}

.home-empty-state {
    text-align: center;
    padding: var(--space-16) var(--space-6);
    background: var(--bg);
    border-radius: var(--radius-xl);
    border: 2px dashed var(--border);
}

/* ── CTA Banner ── */
.home-cta-banner {
    padding: 96px 0;
    /* Brand-invariant surface (see .hero-section) */
    background: linear-gradient(135deg, var(--brand-ink) 0%, var(--brand-ink-hover) 100%);
}

.home-btn-cta-primary {
    background: var(--text-on-brand) !important;
    color: var(--brand-ink) !important;
    text-transform: none !important;
    font-weight: 700 !important;
    padding: var(--space-3) var(--space-8) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.9375rem !important;
    box-shadow: var(--shadow-md) !important;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast) !important;
}

.home-btn-cta-primary:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-1px);
}

.home-btn-cta-secondary {
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    color: var(--text-on-brand) !important;
    text-transform: none !important;
    font-weight: 600 !important;
    padding: var(--space-3) var(--space-8) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.9375rem !important;
    background: transparent !important;
    transition: border-color var(--transition-fast), background var(--transition-fast) !important;
}

.home-btn-cta-secondary:hover {
    border-color: rgba(255,255,255,0.7) !important;
    background: rgba(255,255,255,0.1) !important;
}

/* ── Footer ── */
.home-footer {
    background: var(--surface);
    border-top: 2px solid var(--secondary);
    padding: var(--space-6) 0;
}

.home-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}

/* ── Home page responsive ── */
@media (max-width: 599px) {
    .home-hero {
        padding: 64px 0 48px;
    }

    .home-hero-inner {
        gap: var(--space-8);
    }

    .home-hero-title {
        font-size: 2.25rem;
        letter-spacing: -0.75px;
    }

    .home-hero-visual {
        display: flex;
        justify-content: center;
        margin-top: 16px;
    }

    .home-social-proof-inner {
        gap: var(--space-5);
    }

    .home-proof-divider {
        display: none;
    }

    .home-steps-row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .home-features-section {
        padding: var(--space-12) 0;
    }

    .home-features-grid {
        grid-template-columns: 1fr;
    }

    .home-tenants-section {
        padding: var(--space-12) 0;
    }

    .home-tenant-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .home-category-chips {
        gap: var(--space-2);
        padding: 4px 12px 12px;
    }

    .home-category-chip {
        padding: 6px 12px;
        font-size: 0.8125rem;
    }

    .home-floating-cards {
        height: 200px;
        max-width: 320px;
    }

    .home-float-card-1 {
        width: 180px;
        padding: 10px 14px;
        font-size: 0.85em;
    }

    .home-float-card-2 {
        width: 220px;
        padding: var(--space-3) var(--space-4);
        top: 20px;
    }

    .home-float-card-3 {
        width: 170px;
        padding: 10px 14px;
        font-size: 0.85em;
    }

    .home-steps-row::before {
        display: none;
    }

    .home-cta-banner {
        padding: 56px 0;
    }

    .home-btn-cta-primary,
    .home-btn-cta-secondary {
        width: 100% !important;
        justify-content: center !important;
    }

    .home-footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

@media (min-width: 640px) and (max-width: 959px) {
    .home-hero-inner {
        gap: var(--space-10);
    }

    .home-hero-title {
        font-size: 2.75rem;
    }

    .home-hero-visual {
        justify-content: center;
    }

    .home-hero-mockup {
        max-width: 420px;
    }

    .home-features-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   Booking Wizard Calendar
   ============================================================ */
.wizard-calendar-wrapper {
    display: flex;
    justify-content: center;
}

.wizard-calendar-wrapper .mud-picker {
    width: 100%;
    max-width: 380px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: none;
}

.wizard-calendar-wrapper .mud-picker-calendar-header {
    padding: 12px 16px 4px;
}

.wizard-calendar-wrapper .mud-picker-calendar-header-switch {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text);
}

.wizard-calendar-wrapper .mud-picker-calendar .mud-button-root {
    border-radius: 10px;
    font-weight: 500;
    transition: all 0.15s ease;
}

.wizard-calendar-wrapper .mud-picker-calendar .mud-button-root:hover {
    transform: none;
}

.wizard-calendar-wrapper .mud-picker-calendar .mud-picker-calendar-day.mud-selected {
    font-weight: 700;
}

.wizard-calendar-wrapper .mud-picker .mud-picker-content {
    padding: 0 12px 12px;
}


/* ============================================================
   Page Transitions & Micro-animations
   ============================================================ */

/* Page enter animation - apply to main content wrappers.
   NOTE: no `forwards` fill and no transform in the resting state — a retained transform
   (even translateY(0)) makes the wrapper a containing block + stacking context, which
   trapped position:fixed MudBlazor picker dialogs UNDER the backdrop overlay (the
   "calendar opens but only dims the screen" bug on /dashboard/analytics). */
.page-enter {
    animation: pageEnter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pageEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Stagger children animation */
.stagger-enter > * {
    opacity: 0;
    animation: staggerItem 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.stagger-enter > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-enter > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-enter > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-enter > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-enter > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-enter > *:nth-child(6) { animation-delay: 0.3s; }

@keyframes staggerItem {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card hover micro-interaction */
.card-interactive {
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-interactive:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card-interactive:active {
    transform: translateY(0);
}

/* Button press feedback */
.mud-button-root:active {
    transform: scale(0.97) !important;
    transition: transform 0.1s ease !important;
}

/* Smooth number counter animation */
.count-up {
    animation: countPulse 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes countPulse {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

/* Status chip entrance */
.chip-enter {
    animation: chipPop 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes chipPop {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Sidebar nav item hover glow */
.mud-drawer .mud-nav-link:hover {
    transition: all 0.15s ease !important;
}

/* Table row entrance */
.mud-table-body .mud-table-row {
    animation: rowSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

.mud-table-body .mud-table-row:nth-child(1) { animation-delay: 0.02s; }
.mud-table-body .mud-table-row:nth-child(2) { animation-delay: 0.04s; }
.mud-table-body .mud-table-row:nth-child(3) { animation-delay: 0.06s; }
.mud-table-body .mud-table-row:nth-child(4) { animation-delay: 0.08s; }
.mud-table-body .mud-table-row:nth-child(5) { animation-delay: 0.1s; }
.mud-table-body .mud-table-row:nth-child(6) { animation-delay: 0.12s; }
.mud-table-body .mud-table-row:nth-child(7) { animation-delay: 0.14s; }
.mud-table-body .mud-table-row:nth-child(8) { animation-delay: 0.16s; }
.mud-table-body .mud-table-row:nth-child(9) { animation-delay: 0.18s; }
.mud-table-body .mud-table-row:nth-child(10) { animation-delay: 0.2s; }

@keyframes rowSlide {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: translateX(0); }
}

/* Dialog entrance — desktop: scale, mobile: slide-up */
.mud-dialog {
    animation: dialogEnter 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes dialogEnter {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes dialogSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Snackbar entrance */
.mud-snackbar {
    animation: snackEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes snackEnter {
    from { opacity: 0; transform: translateY(16px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Smooth skeleton pulse (override default) */
.mud-skeleton {
    animation: skeletonPulse 1.5s ease-in-out infinite !important;
}

@keyframes skeletonPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* FAB/CTA button glow on hover */
.mud-button-filled:hover {
    box-shadow: 0 4px 15px color-mix(in srgb, var(--primary) 35%, transparent) !important;
}

/* Avatar hover scale */
.mud-avatar:hover {
    transform: scale(1.05);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .page-enter,
    .stagger-enter > *,
    .mud-table-body .mud-table-row,
    .mud-dialog,
    .mud-snackbar,
    .count-up,
    .chip-enter {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   Mobile Responsiveness — Consolidated
   ============================================================ */

/* ── Table → Card on mobile ── */
@media (max-width: 599px) {
    .mud-table .mud-table-head {
        display: none !important;
    }

    .mud-table .mud-table-body {
        display: flex !important;
        flex-direction: column !important;
        gap: var(--space-3) !important;
        padding: 8px !important;
    }

    .mud-table .mud-table-body .mud-table-row {
        display: flex !important;
        flex-wrap: wrap !important;
        padding: 14px 16px !important;
        background: var(--surface) !important;
        border: 1px solid var(--border-light) !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-xs);
        animation: none !important;
        opacity: 1 !important;
    }

    .mud-table .mud-table-body .mud-table-row:hover {
        background: var(--surface) !important;
    }

    .mud-table .mud-table-body .mud-table-row .mud-table-cell {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 5px 0 !important;
        border-bottom: none !important;
        font-size: 0.85rem !important;
    }

    .mud-table .mud-table-body .mud-table-row .mud-table-cell[data-label]::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--text-muted);
        font-size: 0.8rem;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .mud-table .mud-table-body .mud-table-row .mud-table-cell:first-child {
        font-weight: 600 !important;
        font-size: 0.92rem !important;
        color: var(--text) !important;
        padding-bottom: 8px !important;
        border-bottom: 1px solid var(--border-light) !important;
        margin-bottom: 4px !important;
    }

    .mud-table .mud-table-footer {
        border-top: none !important;
    }

    .mud-table .mud-table-pagination {
        border-top: none !important;
        justify-content: center !important;
    }
}

/* ── Phone global fixes (< 600px) ── */
@media (max-width: 599px) {
    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden;
    }

    /* Hide scrollbars on touch devices */
    ::-webkit-scrollbar {
        display: none !important;
    }
    * {
        scrollbar-width: none !important;
    }

    /* Container padding - tighter on mobile */
    .dashboard-content-area {
        padding: 14px !important;
    }

    /* Font scaling */
    .mud-typography-h4 { font-size: 1.35rem !important; }
    .mud-typography-h5 { font-size: 1.15rem !important; }
    .mud-typography-h6 { font-size: 1rem !important; }

    /* Grid gaps - tighter */
    .mud-grid { margin: -6px !important; }
    .mud-grid > .mud-grid-item { padding: 6px !important; }

    /* Page headers stack with full-width button */
    .page-header, .bl-page-header {
        flex-wrap: wrap !important;
        gap: var(--space-3) !important;
    }
    .page-header .mud-button-filled,
    .bl-page-header .mud-button-filled {
        width: 100%;
    }

    /* Stack page headers vertically */
    .d-flex.justify-space-between.align-center.flex-wrap {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--space-3) !important;
    }

    /* Full-width buttons on mobile */
    .d-flex.justify-space-between.align-center.flex-wrap > .mud-button-filled {
        width: 100%;
    }

    /* Cards compact */
    .content-card {
        padding: 14px;
    }
    .mud-card .mud-card-content {
        padding: 14px !important;
    }

    /* Stat cards compact */
    .stat-card {
        padding: 14px;
    }
    .stat-value {
        font-size: 1.35rem;
    }
    .stat-label {
        font-size: 0.7rem;
    }

    /* MudPaper sections: reduce padding */
    .mud-paper {
        padding: var(--space-4);
    }

    /* Filter rows stack vertically */
    .d-flex.flex-wrap.gap-3 {
        flex-direction: column;
    }

    /* Quick action buttons full width */
    .d-flex.flex-wrap.gap-3 > .mud-button-outlined {
        width: 100%;
        justify-content: flex-start;
    }

    /* Dialog on mobile — full-screen with slide-up animation */
    .mud-dialog {
        max-height: 100dvh !important;
        height: 100dvh !important;
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        animation: dialogSlideUp 0.3s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    .mud-dialog .mud-dialog-content {
        flex: 1 1 auto !important;
        overflow-y: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
    }

    .mud-dialog .mud-dialog-title {
        flex: 0 0 auto !important;
        padding-top: max(16px, env(safe-area-inset-top)) !important;
    }

    .mud-dialog .mud-dialog-actions {
        flex: 0 0 auto !important;
        padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    }

    .mud-dialog-container {
        align-items: stretch !important;
    }

    /* Dialog backdrop fade-in on mobile — dialog backdrops ONLY (.mud-overlay-dialog).
       A MudSelect inside a dialog opens a modal popover whose bare .mud-overlay
       click-catcher sits above the dialog — an opaque var(--surface) background on
       all .mud-overlay whites out the whole dialog, leaving only the floating
       options panel visible in the corner. */
    .mud-overlay.mud-overlay-dialog {
        background: var(--surface) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        animation: overlayFadeIn 0.2s ease-out !important;
    }

    /* Confirm/delete dialogs — bottom sheet, not full-screen */
    .confirm-bottom-sheet {
        height: auto !important;
        max-height: 50dvh !important;
        border-radius: 16px 16px 0 0 !important;
        animation: dialogSlideUp 0.25s cubic-bezier(0.32, 0.72, 0, 1) !important;
    }

    /* CONTRACT: ConfirmDialog in bookly.core.ui emits confirm-stacked-actions when ConfirmColor is
       Error. Nothing spans the two repos to check that — a rename there silently stops this rule
       matching, with a green build on both sides, which is why core.ui pins the exact class list in
       a test. Destructive confirms only: an ordinary one keeps the compact right-aligned row.

       ConfirmDialog.razor renders Cancel FIRST in the DOM and Confirm second, and column-reverse
       is what turns that into Confirm ABOVE Cancel on screen — so the destructive button sits away
       from the thumb while tab order and screen-reader order still reach Cancel first. The order
       in that file is load-bearing: swap the two <MudButton>s and this rule puts the red button in
       the thumb zone AND makes Tab land on it first, with green builds and green bUnit tests on
       both repos, because bUnit applies no CSS.

       Specificity (0,2,0) beats MudBlazor's own (0,1,0) without !important. padding-bottom is
       deliberately NOT set: .mud-dialog .mud-dialog-actions above already applies
       max(16px, env(safe-area-inset-bottom)) !important and would win regardless. */
    .confirm-stacked-actions .mud-dialog-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        justify-content: flex-start;
        gap: 10px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .confirm-stacked-actions .mud-dialog-actions .mud-button {
        width: 100%;
        /* !important, and not because of MudBlazor. This file's own
           `.mud-button-root { min-height: 44px !important }` under
           `(hover: none) and (pointer: coarse)` sits LATER and wins on !important regardless of
           this rule's higher specificity — so on a phone, the one device this targets, the buttons
           rendered 44px and the declaration did nothing at all. The identical trap is already
           documented against this file at the `.mud-input .mud-icon-button` carve-out above, which
           "had NO effect anywhere before it was given !important". */
        min-height: 52px !important;
    }

    /* Touch feedback on interactive elements */
    .mud-card:active,
    .card-interactive:active,
    .tenant-card:active,
    .service-card:active,
    .employee-card:active,
    .mud-list-item:active {
        transform: scale(0.98) !important;
        opacity: 0.9 !important;
        transition: transform 100ms ease, opacity 100ms ease !important;
    }

    /* Login page: full width form */
    .login-form-card {
        padding: var(--space-6) var(--space-4);
    }

    /* Booking wizard: tighter wizard container */
    .wizard-container {
        padding: 0 4px;
    }

    /* Time slot grid: 3 columns on mobile */
    .wizard-calendar-wrapper + div > div[style*="grid-template-columns"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    /* Appbar: tighter on mobile */
    .mud-appbar .mud-toolbar {
        padding: 0 8px !important;
    }

    /* Hide less important table columns */
    .hide-mobile {
        display: none !important;
    }

    /* Bottom safe area for iOS — main padding handled by DashboardLayout scoped styles */
    .mud-main-content {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    /* Expansion panels */
    .mud-expand-panel .mud-expand-panel-header {
        padding: 12px 16px !important;
    }

    /* Reduce section spacing */
    .section {
        padding: var(--space-10) 0;
    }

    /* Hero section mobile */
    .home-hero-title {
        font-size: 1.75rem;
    }
}

/* ── Mobile / Desktop visibility utilities ── */
@media (max-width: 599px) {
    .hide-on-mobile { display: none !important; }
}
@media (min-width: 600px) {
    .hide-on-desktop { display: none !important; }
}

/* ── Tablet adjustments (600-959px) ── */
@media (min-width: 600px) and (max-width: 959px) {
    .mud-typography-h4 {
        font-size: 1.5rem !important;
    }

    /* Two-column stat cards */
    .mud-grid > .mud-grid-item-xs-12.mud-grid-item-sm-6.mud-grid-item-md-3 {
        max-width: 50%;
        flex-basis: 50%;
    }
}

/* ── Touch-friendly improvements ── */
@media (hover: none) and (pointer: coarse) {
    /* Larger touch targets */
    .mud-nav-link {
        min-height: 48px !important;
    }

    .mud-button-root {
        min-height: 44px !important;
    }

    .mud-icon-button {
        min-width: 44px !important;
        min-height: 44px !important;
    }

    /* Remove hover effects that look stuck on touch */
    .card-interactive:hover,
    .tenant-card:hover,
    .service-card:hover,
    .employee-card:hover {
        transform: none !important;
    }

    /* Disable hover shadows on touch */
    .mud-card:hover {
        box-shadow: var(--shadow-sm) !important;
        transform: none !important;
    }
}

/* ── Landscape phone ── */
@media (max-height: 500px) and (orientation: landscape) {
    .home-hero {
        padding: var(--space-10) var(--space-4) !important;
    }

    .login-page-centered {
        min-height: auto;
        padding: var(--space-4) var(--space-6);
        align-items: flex-start;
    }

    .login-form-card {
        padding: var(--space-4) var(--space-5) !important;
    }

    .login-form-card .mb-1 {
        margin-bottom: 4px !important;
    }

    .login-form-card .mb-8 {
        margin-bottom: 12px !important;
    }

    .login-form-card .mt-8 {
        margin-top: 12px !important;
    }

    .login-submit-btn {
        margin-top: 16px !important;
    }
}

/* ── Customer/Portal mobile polish ── */
@media (max-width: 599px) {
    /* Tighter card padding on customer pages */
    .customer-main-content .mud-paper {
        padding: var(--space-4) !important;
    }

    /* Profile avatar card: smaller avatar on mobile */
    .customer-main-content .mud-avatar {
        width: 52px !important;
        height: 52px !important;
        font-size: 1.1rem !important;
    }

    /* Reduce h3 heading on MyBookings */
    .mb-header .mud-typography-h3 {
        font-size: 1.5rem !important;
    }

    /* Tighter bottom margin for page headers */
    .mb-6 {
        margin-bottom: 16px !important;
    }

    /* Full-width save/action buttons on mobile */
    .customer-main-content .d-flex.justify-end .mud-button-filled {
        width: 100%;
    }

    .customer-main-content .d-flex.justify-end {
        justify-content: stretch !important;
    }
}

/* ── Enforce 44px touch targets on mobile ── */
@media (max-width: 599px) {
    /* MudBlazor v9 emits `mud-icon-button-size-small`, not `mud-button-size-small`.
       This selector was written with the latter and therefore never matched a single
       element — the rule has been dead since it was added, leaving every small icon
       button (the row actions on the customers/services/employees/bookings lists,
       ~33 of them) at ~25px on narrow screens.
       Real touch devices were still covered by the (pointer: coarse) block above,
       which sizes ALL icon buttons; this rule is what covers narrow non-touch and
       anything the coarse-pointer query misses. Both spellings are matched so a
       future MudBlazor rename cannot silently kill it again. */
    .mud-icon-button.mud-icon-button-size-small,
    .mud-icon-button.mud-button-size-small {
        min-width: 44px;
        min-height: 44px;
    }

    footer a, .home-footer a, .mud-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ── Print cleanup ── */
@media print {
    .mud-appbar, .mud-drawer, .mud-snackbar-provider,
    .mud-fab, .language-switcher, #blazor-error-ui {
        display: none !important;
    }

    .mud-main-content {
        padding: 0 !important;
        margin: 0 !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }
}

/* Weekly calendar mobile — global for reliability (Blazor WASM inline styles may load late) */
.wc-mobile { display: none; }
.wc-mobile-selector { display: none; }
@media (max-width: 959px) {
    .wc-desktop { display: none !important; }
    /* MUST be flex column — otherwise the inner .wc-scroll-area's flex:1 silently degrades
       to natural content height, making scrollHeight === clientHeight and breaking mobile
       vertical scroll entirely. See Playwright instrumentation 2026-05-17 confirming this
       was the actual root cause that PRs #65/#66/#70 misdiagnosed as a touch-event trap. */
    .wc-mobile { display: flex !important; flex-direction: column !important; }
    .wc-mobile-selector { display: block !important; }
}