@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* OKLCH Color Tokens - Light Mode */
        --background: oklch(0.98 0 0);           /* Off-white background */
        --foreground: oklch(0.18 0 0);           /* Dark text */
        --card: oklch(0.99 0 0);                 /* Card/container background */
        --card-foreground: oklch(0.18 0 0);      /* Text on cards */
        --primary: oklch(0.55 0.22 260);         /* Purple - primary brand color */
        --primary-foreground: oklch(1 0 0);      /* White text on primary */
        --secondary: oklch(0.95 0 0);            /* Light gray background */
        --secondary-foreground: oklch(0.55 0.22 260); /* Purple text */
        --muted: oklch(0.93 0 0);                /* Disabled/inactive states */
        --muted-foreground: oklch(0.52 0 0);     /* Gray text */
        --accent: oklch(0.68 0.18 20);           /* Orange - for CTAs & highlights */
        --accent-foreground: oklch(1 0 0);       /* White text on accent */
        --destructive: oklch(0.577 0.245 27.325); /* Red - for dangerous actions */
        --destructive-foreground: oklch(1 0 0);  /* White text on destructive */
        --border: oklch(0.91 0 0);               /* Light borders */
        --input: oklch(0.96 0 0);                /* Input field background */
        --ring: oklch(0.55 0.22 260);            /* Focus ring (primary) */
        
        /* Chart Colors */
        --chart-1: oklch(0.55 0.22 260);  /* Purple */
        --chart-2: oklch(0.65 0.15 50);   /* Yellow */
        --chart-3: oklch(0.7 0.12 150);   /* Green */
        --chart-4: oklch(0.6 0.18 300);   /* Magenta */
        --chart-5: oklch(0.75 0.1 200);   /* Cyan */
        
        /* Sidebar Colors */
        --sidebar: oklch(0.985 0 0);                      /* Light sidebar background */
        --sidebar-foreground: oklch(0.145 0 0);           /* Sidebar text */
        --sidebar-primary: oklch(0.205 0 0);              /* Sidebar active item */
        --sidebar-primary-foreground: oklch(0.985 0 0);   /* Text on active sidebar item */
        --sidebar-accent: oklch(0.97 0 0);                /* Sidebar hover state */
        --sidebar-border: oklch(0.922 0 0);               /* Sidebar dividers */
        
        /* Border Radius Tokens */
        --radius: 0.625rem; /* 10px - Standard radius */
    }
    
    .dark {
        /* OKLCH Color Tokens - Dark Mode */
        --background: oklch(0.08 0 0);           /* Near-black background */
        --foreground: oklch(0.96 0 0);           /* Near-white text */
        --card: oklch(0.12 0 0);                 /* Dark card background */
        --card-foreground: oklch(0.96 0 0);      /* Light text on dark cards */
        --primary: oklch(0.7 0.22 260);          /* Lighter purple for contrast */
        --primary-foreground: oklch(0.08 0 0);   /* Dark text on primary */
        --secondary: oklch(0.15 0 0);            /* Dark gray background */
        --secondary-foreground: oklch(0.7 0.22 260); /* Light purple text */
        --muted: oklch(0.28 0 0);                /* Dark muted state */
        --muted-foreground: oklch(0.52 0 0);     /* Muted text */
        --accent: oklch(0.68 0.18 20);           /* Orange - same for dark */
        --accent-foreground: oklch(0.08 0 0);    /* Dark text on accent */
        --destructive: oklch(0.577 0.245 27.325); /* Red - same for dark */
        --destructive-foreground: oklch(1 0 0);  /* White text on destructive */
        --border: oklch(0.25 0 0);               /* Dark borders */
        --input: oklch(0.15 0 0);                /* Dark input background */
        --ring: oklch(0.7 0.22 260);             /* Lighter focus ring */
        
        /* Sidebar Colors - Dark Mode */
        --sidebar: oklch(0.1 0 0);                        /* Dark sidebar background */
        --sidebar-foreground: oklch(0.9 0 0);             /* Light sidebar text */
        --sidebar-primary: oklch(0.7 0.22 260);           /* Primary sidebar active */
        --sidebar-primary-foreground: oklch(0.08 0 0);    /* Dark text on active */
        --sidebar-accent: oklch(0.2 0 0);                 /* Dark sidebar hover */
        --sidebar-border: oklch(0.25 0 0);                /* Dark sidebar dividers */
    }

    html {
        @apply h-full;
    }
    
    body {
        @apply h-full font-sans antialiased bg-background text-foreground;
    }
}

@layer components {
    /* Typography */
    .heading-1 {
        @apply text-3xl font-bold text-foreground;
    }
    
    .heading-2 {
        @apply text-2xl font-semibold text-foreground;
    }
    
    .heading-3 {
        @apply text-xl font-semibold text-foreground;
    }
    
    .heading-4 {
        @apply text-lg font-semibold text-foreground;
    }
    
    .text-primary-content {
        @apply text-foreground;
    }
    
    .text-secondary-content {
        @apply text-muted-foreground;
    }
    
    .text-muted-content {
        @apply text-muted-foreground;
    }

    /* Layout Components */
    .page-container {
        @apply min-h-screen bg-background;
    }
    
    .page-header {
        @apply bg-card border-b border-border px-6 py-4;
    }
    
    .page-content {
        @apply p-6 space-y-6;
    }
    
    .section-spacing {
        @apply space-y-6;
    }

    /* Card Components */
    .card {
        @apply bg-card text-card-foreground rounded-lg shadow-sm border border-border transition-all duration-200;
    }
    
    .card-hover {
        @apply card hover:shadow-md;
    }
    
    .card-padding {
        @apply p-6;
    }
    
    .stat-card {
        @apply card card-padding hover:shadow-md transition-shadow;
    }
    
    .stat-card-icon {
        @apply w-10 h-10 rounded-lg flex items-center justify-center;
    }
    
    .stat-card-icon-primary {
        @apply stat-card-icon text-primary;
        background-color: oklch(0.55 0.22 260 / 0.1); /* Primary with 10% opacity */
    }
    
    .stat-card-icon-success {
        @apply stat-card-icon bg-success-100 text-success-600;
    }
    
    .stat-card-icon-warning {
        @apply stat-card-icon bg-warning-100 text-warning-600;
    }
    
    .stat-card-icon-danger {
        @apply stat-card-icon text-destructive;
        background-color: oklch(0.577 0.245 27.325 / 0.1); /* Destructive with 10% opacity */
    }
    
    .stat-card-icon-info {
        @apply stat-card-icon bg-info-100 text-info-600;
    }
    
    .stat-card-icon-accent {
        @apply stat-card-icon text-accent;
        background-color: oklch(0.68 0.18 20 / 0.1); /* Accent with 10% opacity */
    }

    /* Button Components */
    .btn-base {
        @apply inline-flex items-center justify-center px-4 py-2.5 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-ring;
    }
    
    .btn-primary {
        @apply btn-base bg-primary text-primary-foreground shadow-sm;
    }
    
    .btn-primary:hover {
        background-color: oklch(0.50 0.22 260); /* Darker primary for hover */
    }
    
    .btn-secondary {
        @apply btn-base bg-secondary text-secondary-foreground border border-border shadow-sm;
    }
    
    .btn-secondary:hover {
        background-color: oklch(0.92 0 0); /* Darker secondary for hover */
    }
    
    .btn-success {
        @apply btn-base text-white bg-success-600 hover:bg-success-700 focus:ring-success-500 shadow-sm;
    }
    
    .btn-warning {
        @apply btn-base text-white bg-warning-600 hover:bg-warning-700 focus:ring-warning-500 shadow-sm;
    }
    
    .btn-danger {
        @apply btn-base bg-destructive text-destructive-foreground shadow-sm;
    }
    
    .btn-danger:hover {
        background-color: oklch(0.52 0.245 27.325); /* Darker destructive for hover */
    }
    
    .btn-info {
        @apply btn-base text-white bg-info-600 hover:bg-info-700 focus:ring-info-500 shadow-sm;
    }
    
    .btn-ghost {
        @apply btn-base text-foreground hover:bg-accent hover:text-accent-foreground;
    }
    
    .btn-link {
        @apply text-primary font-medium transition-colors duration-200;
    }
    
    .btn-link:hover {
        color: oklch(0.50 0.22 260); /* Darker primary for hover */
    }
    
    .btn-accent {
        @apply btn-base bg-accent text-accent-foreground shadow-sm;
    }
    
    .btn-accent:hover {
        background-color: oklch(0.63 0.18 20); /* Darker accent for hover */
    }

    /* Form Components */
    .form-container {
        @apply card card-padding;
    }
    
    .form-spacing {
        @apply space-y-6;
    }
    
    .form-field {
        @apply space-y-2;
    }
    
    .form-label {
        @apply block text-sm font-medium text-foreground;
    }
    
    .form-input {
        @apply block w-full px-3 py-2 bg-input border border-border rounded-lg shadow-sm placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring transition-colors duration-200;
    }
    
    .form-select {
        @apply form-input;
    }
    
    .form-textarea {
        @apply form-input resize-y;
    }
    
    .form-error {
        @apply text-sm text-destructive;
    }
    
    .form-help {
        @apply text-sm text-muted-foreground;
    }

    /* Table Components */
    .table-container {
        @apply card overflow-hidden;
    }
    
    .table {
        @apply min-w-full divide-y divide-gray-200;
    }
    
    .table-header {
        @apply bg-gray-50;
    }
    
    .table-header-cell {
        @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider;
    }
    
    .table-body {
        @apply bg-white divide-y divide-gray-200;
    }
    
    .table-row {
        @apply hover:bg-gray-50 transition-colors duration-150;
    }
    
    .table-cell {
        @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
    }
    
    .table-cell-secondary {
        @apply table-cell text-gray-600;
    }

    /* Badge Components */
    .badge-base {
        @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
    }
    
    .badge-primary {
        @apply badge-base text-primary;
        background-color: oklch(0.55 0.22 260 / 0.1); /* Primary with 10% opacity */
    }
    
    .badge-secondary {
        @apply badge-base bg-secondary text-secondary-foreground;
    }
    
    .badge-success {
        @apply badge-base bg-success-100 text-success-800;
    }
    
    .badge-warning {
        @apply badge-base bg-warning-100 text-warning-800;
    }
    
    .badge-danger {
        @apply badge-base text-destructive;
        background-color: oklch(0.577 0.245 27.325 / 0.1); /* Destructive with 10% opacity */
    }
    
    .badge-info {
        @apply badge-base bg-info-100 text-info-800;
    }
    
    .badge-muted {
        @apply badge-base bg-muted text-muted-foreground;
    }
    
    .badge-accent {
        @apply badge-base text-accent;
        background-color: oklch(0.68 0.18 20 / 0.1); /* Accent with 10% opacity */
    }

    /* Navigation Components */
    .nav-container {
        @apply bg-white border-r border-gray-200 w-64 h-screen overflow-y-auto;
    }
    
    .nav-content {
        @apply p-6 flex flex-col h-full;
    }
    
    .nav-brand {
        @apply flex items-center space-x-3 mb-6;
    }
    
    .nav-brand-icon {
        @apply p-2 bg-primary-100 rounded-lg;
    }
    
    .nav-brand-text {
        @apply text-xl font-semibold text-gray-900;
    }
    
    .nav-menu {
        @apply space-y-2;
    }
    
    /* Modern Sidebar Navigation */
    .sidebar-group {
        @apply px-3 mb-4;
    }
    
    .sidebar-group-label {
        @apply text-xs font-semibold text-gray-400 uppercase tracking-wider mb-3 px-2;
    }
    
    .sidebar-menu {
        @apply space-y-1;
    }
    
    .sidebar-menu-item {
        @apply relative;
    }
    
    .sidebar-menu-button {
        @apply w-full flex items-center gap-3 px-3 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-all duration-200;
    }
    
    .sidebar-menu-button-active {
        @apply sidebar-menu-button bg-gray-100 text-gray-900 shadow-sm;
    }
    
    .sidebar-menu-icon {
        @apply w-5 h-5 flex-shrink-0;
    }
    
    .sidebar-menu-badge {
        @apply ml-auto inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600;
    }
    
    .sidebar-menu-badge-soon {
        @apply sidebar-menu-badge bg-blue-100 text-blue-600;
    }
    
    /* Legacy nav-item support */
    .nav-item {
        @apply sidebar-menu-button;
    }
    
    .nav-item-active {
        @apply sidebar-menu-button-active;
    }
    
    .nav-bar-item {
        @apply sidebar-menu-button;
    }
    
    .nav-footer {
        @apply mt-auto pt-6 border-t border-gray-200;
    }

    /* Grid Components */
    .stats-grid {
        @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6;
    }
    
    .content-grid {
        @apply grid grid-cols-1 lg:grid-cols-2 gap-6;
    }
    
    .card-grid {
        @apply grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6;
    }

    /* Empty State Components */
    .empty-state {
        @apply text-center py-12;
    }
    
    .empty-state-icon {
        @apply w-12 h-12 text-gray-400 mx-auto mb-4;
    }
    
    .empty-state-title {
        @apply text-lg font-semibold text-gray-900 mb-2;
    }
    
    .empty-state-description {
        @apply text-gray-600 mb-4;
    }

    /* Utility Classes */
    .focus-ring {
        @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2;
    }
    
    .transition-base {
        @apply transition-all duration-200;
    }
    
    .animate-fade-in {
        animation: fadeIn 0.5s ease-in-out;
    }
    
    .animate-slide-up {
        animation: slideUp 0.3s ease-out;
    }
    
    .animate-scale-in {
        animation: scaleIn 0.2s ease-out;
    }

    .animate-fade-out {
        animation: fadeOut 0.3s ease-in-out forwards;
    }

    .animate-scale-out {
        animation: scaleOut 0.3s ease-in-out forwards;
    }

    .animate-bounce-subtle {
        animation: bounceSubtle 0.6s ease-in-out;
    }

    /* Modal Backdrop Utility */
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }
    
    .modal-backdrop-dark {
        background-color: rgba(0, 0, 0, 0.6);
    }
    
    .modal-backdrop-light {
        background-color: rgba(0, 0, 0, 0.3);
    }

    /* Cash Payment Specific Styles */
    .cash-only-invoice {
        position: relative;
    }

    .cash-only-invoice::before {
        content: '';
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        background: linear-gradient(45deg, 
            oklch(0.68 0.18 20) 0%, 
            oklch(0.68 0.18 20) 25%, 
            transparent 25%, 
            transparent 50%, 
            oklch(0.68 0.18 20) 50%, 
            oklch(0.68 0.18 20) 75%, 
            transparent 75%);
        background-size: 8px 8px;
        border-radius: inherit;
        z-index: -1;
        opacity: 0.3;
    }

    .cash-available-invoice {
        border-left: 3px solid oklch(0.68 0.18 20);
    }

    .cash-payment-overdue {
        animation: pulse-warning 2s infinite;
    }

    @keyframes pulse-warning {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.7;
        }
    }

    /* Legacy Support (for gradual migration) */
    .card-hover-legacy {
        @apply transform transition-all duration-300 hover:scale-[1.02] hover:shadow-soft;
    }
    
    .form-input-legacy {
        @apply shadow-sm border-gray-300 rounded-lg w-full py-2.5 px-4 text-gray-900 placeholder-gray-500 focus:border-primary-500 focus:ring-primary-500;
    }
}


/* Cash Payment Validation Animations */
@layer utilities {
  .animate-shake {
    animation: shake 0.5s ease-in-out;
  }
  
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }
  
  .animate-pulse-error {
    animation: pulse-error 1s ease-in-out infinite;
  }
  
  @keyframes pulse-error {
    0%, 100% { 
      background-color: rgb(254 242 242); /* bg-red-50 */
      border-color: rgb(239 68 68); /* border-red-500 */
    }
    50% { 
      background-color: rgb(254 226 226); /* bg-red-100 */
      border-color: rgb(220 38 38); /* border-red-600 */
    }
  }

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

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

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

  @keyframes scaleIn {
    from {
      transform: scale(0.95);
      opacity: 0;
    }
    to {
      transform: scale(1);
      opacity: 1;
    }
  }

  @keyframes scaleOut {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(0.95);
      opacity: 0;
    }
  }

  @keyframes bounceSubtle {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05);
    }
  }
  
  .field-message {
    transition: all 0.2s ease-in-out;
  }
  
  .field-message.entering {
    opacity: 0;
    transform: translateY(-10px);
  }
  
  .field-message.entered {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced form validation styles */
@layer components {
  .form-field-error {
    @apply border-destructive focus:ring-destructive bg-destructive/5;
  }
  
  .form-field-success {
    @apply border-green-500 focus:ring-green-500 bg-green-50;
  }
  
  .form-field-warning {
    @apply border-yellow-500 focus:ring-yellow-500 bg-yellow-50;
  }
  
  .validation-message {
    @apply text-xs mt-1 font-medium flex items-center gap-1;
  }
  
  .validation-message.error {
    @apply text-destructive;
  }
  
  .validation-message.success {
    @apply text-green-600;
  }
  
  .validation-message.warning {
    @apply text-yellow-600;
  }
}

/* ============================================================
   DESERT LABS DESIGN SYSTEM v2
   Editorial Precision — Dark Sidebar · Warm Content · Serif Numbers
   ============================================================ */

@layer base {
  :root {
    --font-display: 'Outfit', system-ui, sans-serif;
    --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* Clean slate surfaces — near-white, no tint, no clashing */
    --ev-surface:        oklch(0.976 0.002 260);
    --ev-surface-card:   oklch(1 0 0);
    --ev-surface-subtle: oklch(0.966 0.003 260);
    --ev-surface-raised: oklch(0.958 0.004 258);
    --ev-border:         oklch(0.912 0.004 258);
    --ev-border-light:   oklch(0.938 0.003 258);

    /* Convenience aliases — resolve broken references in views */
    --ev-text-muted:     oklch(0.52 0.010 258);
    --ev-text-secondary: oklch(0.46 0.018 258);

    /* Sidebar text ink */
    --ev-ink:            oklch(0.215 0.040 258);
    --ev-ink-border:     oklch(0.265 0.038 258);
    --ev-ink-fg:         oklch(0.680 0.018 258);
    --ev-ink-fg-muted:   oklch(0.440 0.020 258);
    --ev-ink-fg-bright:  oklch(0.955 0.003 240);
    --ev-ink-hover:      oklch(0.265 0.038 258);

    /* Deep vivid indigo — saturated, dark, unmistakably distinct from generic SaaS violet */
    --ev-primary:        oklch(0.46 0.28 270);
    --ev-primary-hover:  oklch(0.41 0.28 270);
    --ev-primary-tint:   oklch(0.46 0.28 270 / 0.09);
    --ev-primary-border: oklch(0.46 0.28 270 / 0.22);

    /* Semantic status colors */
    --ev-success:  oklch(0.52 0.18 155);
    --ev-warning:  oklch(0.62 0.20 42);
    --ev-danger:   oklch(0.56 0.22 27);

    /* Indigo-tinted shadows — depth that harmonizes with the primary */
    --ev-shadow-card:   0 1px 3px oklch(0.20 0.012 260 / 0.09), 0 1px 2px oklch(0.20 0.012 260 / 0.05);
    --ev-shadow-hover:  0 8px 24px oklch(0.46 0.28 270 / 0.15), 0 2px 8px oklch(0.20 0.012 260 / 0.06);

    /* Task 19: categorical chart tokens */
    /* Five series colors for analytics charts, spaced ~72deg apart around the
       brand indigo so adjacent donut slices and stacked-bar segments never read
       as one color. Every one sits at L 0.48 — dark enough that the white
       labels printed inside stacked bars clear 4.5:1 (6.3–7.3:1 measured) — and
       inside the sRGB gamut at the chroma given, so the declared value is what
       renders rather than a browser gamut-map of it. */
    --ev-chart-1: oklch(0.48 0.19 270);  /* indigo  */
    --ev-chart-2: oklch(0.48 0.08 198);  /* teal    */
    --ev-chart-3: oklch(0.48 0.12 54);   /* amber   */
    --ev-chart-4: oklch(0.48 0.19 342);  /* magenta */
    --ev-chart-5: oklch(0.48 0.12 126);  /* green   */

    /* Stat card accent — single indigo */
    --ev-accent-1: var(--ev-primary);
    --ev-accent-2: var(--ev-primary);
    --ev-accent-3: var(--ev-primary);
    --ev-accent-4: var(--ev-primary);
  }

  body {
    font-family: var(--font-ui);
  }
}

@layer components {
  /* ── Dark Sidebar Shell ──────────────────────────────────────── */

  /* ── Light Sidebar ───────────────────────────────────────── */

  .ev-sidebar {
    width: 15rem;
    flex-shrink: 0;
    display: none;
    flex-direction: column;
    height: 100vh;
    background: white;
    border-right: 1px solid var(--ev-border);
  }

  @media (min-width: 768px) {
    .ev-sidebar { display: flex; }
  }

  /* ── Turbo Native: hide web chrome when inside iOS/Android shell ── */
  .turbo-native .ev-sidebar {
    display: none !important;
  }

/* ── Mobile bottom navigation ── */
.ev-mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

@media (min-width: 768px) {
  .ev-mobile-nav {
    display: none;
  }
}

.turbo-native .ev-mobile-nav {
  display: none;
}

/* Drawers/overlays are content, not chrome, so they keep working inside the
   native shell -- but the panel runs to the bottom of the WebView and its
   contents must clear the device's gesture area. The inset goes on the panel
   alone: the overlay and the backdrop are the panel's containing block, so
   padding there would resolve `bottom: 0` against the padding box and leave an
   unshaded strip of page showing under the drawer. */
.turbo-native .ev-drawer-panel {
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ev-mobile-nav-tabs {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  background: var(--ev-surface-card);
  border-top: 1px solid var(--ev-border);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ev-mobile-nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  flex: 1;
  padding: 0.5rem 0 0.375rem;
  color: var(--ev-ink-fg-muted);
  font-size: 0.625rem;
  font-weight: 500;
  font-family: var(--font-ui);
  text-decoration: none;
  transition: color 150ms;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.ev-mobile-nav-tab:active {
  color: var(--ev-primary);
}

.ev-mobile-nav-tab--active {
  color: var(--ev-primary);
}

.ev-mobile-nav-tab svg {
  width: 1.375rem;
  height: 1.375rem;
}

.ev-mobile-nav-badge {
  position: absolute;
  top: 0.25rem;
  left: 50%;
  margin-left: 0.375rem;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: #ef4444;
  color: white;
  font-size: 0.5625rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* More sheet */
.ev-mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  z-index: 49;
  opacity: 0;
  transition: opacity 200ms;
  pointer-events: none;
}

.ev-mobile-nav-backdrop--visible {
  opacity: 1;
  pointer-events: auto;
}

.ev-mobile-nav-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 51;
  background: var(--ev-surface-card);
  border-radius: 0.75rem 0.75rem 0 0;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 70vh;
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.ev-mobile-nav-sheet--open {
  transform: translateY(0);
}

.ev-mobile-nav-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 0.5rem 0 0.25rem;
}

.ev-mobile-nav-sheet-handle::after {
  content: "";
  width: 2rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: var(--ev-border);
}

.ev-mobile-nav-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem 1.25rem 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ev-ink);
}

.ev-mobile-nav-sheet-close {
  color: var(--ev-primary);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-ui);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  -webkit-tap-highlight-color: transparent;
}

.ev-mobile-nav-more-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.25rem;
  color: var(--ev-ink-fg);
  font-size: 0.9375rem;
  font-family: var(--font-ui);
  text-decoration: none;
  border-bottom: 1px solid var(--ev-border-light);
  -webkit-tap-highlight-color: transparent;
}

.ev-mobile-nav-more-item:last-child {
  border-bottom: none;
}

.ev-mobile-nav-more-item:active {
  background: var(--ev-primary-tint);
}

.ev-mobile-nav-more-item svg {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--ev-ink-fg-muted);
  flex-shrink: 0;
}

/* Mobile content bottom padding — prevents content hiding behind nav.
   Applied to <main> so it covers every view (including those without .ev-page wrapper).
   Uses safe-area-inset-bottom so iPhone home indicator doesn't eat clearance. */
@media (max-width: 767px) {
  .ev-main-with-nav > .ev-page,
  .ev-main-with-nav > * > .ev-page,
  .ev-main-with-nav .ev-page {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0));
    flex-shrink: 0;
  }
}

.turbo-native .ev-main-with-nav {
  padding-bottom: 0;
}

/* Mobile sticky action bar — sits above the mobile nav for long forms.
   Hidden on desktop (header buttons remain accessible there).
   Pages using this should also add .ev-page-with-action-bar for extra bottom clearance. */
.ev-mobile-action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(4.5rem + env(safe-area-inset-bottom, 0));
  z-index: 30;
  background: var(--ev-surface-card);
  border-top: 1px solid var(--ev-border);
  padding: 0.625rem 1rem;
  display: flex;
  gap: 0.5rem;
}

.ev-mobile-action-bar .ev-btn {
  flex: 1;
  justify-content: center;
}

@media (min-width: 768px) {
  .ev-mobile-action-bar {
    display: none;
  }
}

.turbo-native .ev-mobile-action-bar {
  display: none;
}

@media (max-width: 767px) {
  .ev-page-with-action-bar {
    padding-bottom: 4rem;
  }
}

/* Scrollable pill/filter row — single-line scroll on mobile, wraps on desktop */
.ev-pill-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.125rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}

.ev-pill-bar::-webkit-scrollbar {
  display: none;
}

@media (min-width: 640px) {
  .ev-pill-bar {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-bottom: 0;
  }
}

  /* Section labels — ultra-minimal */
  .ev-sidebar .sidebar-group-label {
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: oklch(0.62 0.010 258);
    margin-bottom: 0.25rem;
    padding-left: 0.875rem;
  }

  /* Nav items — dark text on white; use !important to override Tailwind @apply hover utilities */
  .ev-sidebar .sidebar-menu-button {
    color: oklch(0.32 0.020 258) !important;
    background-color: transparent !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
  }

  .ev-sidebar .sidebar-menu-button:hover {
    color: oklch(0.15 0.030 265) !important;
    background-color: oklch(0.962 0.005 260) !important;
  }

  /* Task 22: "coming soon" entries — inert links that must not read as
     clickable. Same !important reason as above, plus it has to beat the hover
     rule. Sits alongside .sidebar-menu-button rather than replacing it, so the
     item keeps its layout. */
  .ev-sidebar .sidebar-menu-button-disabled,
  .ev-sidebar .sidebar-menu-button-disabled:hover {
    color: var(--ev-ink-fg-muted) !important;
    background-color: transparent !important;
    cursor: not-allowed;
  }

  /* Task 22: attention count (unread leads). .sidebar-menu-badge is the muted
     variant; this is the one that wants to be noticed. */
  .ev-sidebar .sidebar-menu-badge-count {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 9999px;
    background: var(--ev-primary);
    color: white;
    font-size: 0.6875rem;
    font-weight: 600;
  }

  /* Active: primary tint + left border */
  .ev-sidebar .sidebar-menu-button-active {
    color: var(--ev-primary) !important;
    background-color: var(--ev-primary-tint) !important;
    border-left: 2px solid var(--ev-primary) !important;
    padding-left: calc(0.75rem - 2px) !important;
    font-weight: 600 !important;
  }

  .ev-sidebar .sidebar-menu-icon {
    opacity: 0.45;
    color: oklch(0.32 0.020 258);
  }

  .ev-sidebar .sidebar-menu-button:hover .sidebar-menu-icon {
    opacity: 0.75;
  }

  .ev-sidebar .sidebar-menu-button-active .sidebar-menu-icon {
    opacity: 1;
    color: var(--ev-primary);
  }

  /* Brand + footer borders match content area */
  .ev-sidebar-brand-border {
    border-bottom: 1px solid var(--ev-border-light);
  }

  /* Product switcher (CRM ↔ AI Agent) */
  .ev-product-switcher {
    display: flex;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--ev-border-light);
    background: oklch(0.975 0.003 260);
  }

  .ev-product-pill {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    font-family: var(--font-display);
    color: oklch(0.48 0.010 258);
    text-decoration: none;
    transition: all 0.15s ease;
  }

  .ev-product-pill:hover {
    background: oklch(0.945 0.008 260);
    color: oklch(0.30 0.020 265);
  }

  .ev-product-pill-active {
    background: white;
    color: var(--ev-primary);
    box-shadow: 0 1px 2px oklch(0.20 0.020 265 / 0.08);
  }

  .ev-product-pill-active:hover {
    background: white;
    color: var(--ev-primary);
  }

  .ev-sidebar-footer-border {
    border-top: 1px solid var(--ev-border-light);
  }

  /* User profile card at bottom */
  .ev-sidebar-user-card {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
  }

  .ev-sidebar-user-card:hover {
    background-color: oklch(0.962 0.005 260);
  }

  .ev-sidebar-user-avatar {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background: var(--ev-primary-tint);
    color: var(--ev-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    flex-shrink: 0;
    border: 1px solid var(--ev-primary-border);
    font-family: var(--font-display);
  }

  .ev-sidebar-user-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(0.18 0.025 265);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
  }

  .ev-sidebar-user-email {
    font-size: 0.6875rem;
    color: oklch(0.52 0.010 258);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.25;
  }

  .ev-sidebar-signout-link {
    display: block;
    padding: 0 1rem 0.875rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: oklch(0.55 0.010 258);
    transition: color 0.15s ease;
    text-decoration: none;
  }

  .ev-sidebar-signout-link:hover {
    color: oklch(0.50 0.20 27);
  }

  /* Mobile sidebar wrapper — fixed overlay below md */
  .ev-sidebar-mobile-wrapper {
    display: contents;
  }

  @media (max-width: 767px) {
    .ev-sidebar-mobile-wrapper {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 60;
      height: 100vh;
      transform: translateX(-100%);
      transition: transform 0.25s ease;
    }

    .ev-sidebar-mobile-wrapper .ev-sidebar {
      display: flex;
    }

    .ev-sidebar-mobile-wrapper.ev-sidebar--open {
      transform: translateX(0);
    }
  }

  /* Hide sidebar in native shell */
  .turbo-native .ev-sidebar-mobile-wrapper {
    display: none;
  }

  /* ── Page Shell ──────────────────────────────────────────────── */

  /* <main> is a fixed-height flex column. flex: 1 0 auto fills any leftover
     height without demanding it, so short pages still get a full-bleed
     background and tall ones grow and let <main> scroll rather than being
     squeezed until their cards clip. */
  .ev-page {
    background-color: var(--ev-surface);
    background-image: radial-gradient(circle, oklch(0.46 0.28 270 / 0.035) 1px, transparent 1px);
    background-size: 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    padding: 1.375rem 1.5rem 1.5rem;
  }

  @media (max-width: 639px) {
    .ev-page {
      padding: 1rem;
    }
  }

  /* Page title row — used on index/show pages for title + primary action */
  .ev-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.375rem;
    flex-wrap: wrap;
  }

  @media (max-width: 639px) {
    .ev-page-header {
      gap: 0.75rem;
      margin-bottom: 1rem;
    }

    .ev-page-title {
      font-size: 1.25rem;
    }

    .ev-page-subtitle {
      font-size: 0.75rem;
    }
  }

  .ev-page-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: oklch(0.12 0.04 265);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .ev-page-subtitle {
    font-size: 0.875rem;
    color: oklch(0.52 0.010 258);
    margin-top: 0.125rem;
  }

  /* Divider between page sections */
  .ev-section-gap {
    margin-bottom: 1.125rem;
  }

  /* Search / filter bar */
  .ev-filter-bar {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    padding: 1rem 1.375rem;
    box-shadow: var(--ev-shadow-card);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.125rem;
  }

  /* Mobile filter layout — stack search + toggle above, selects below */
  @media (max-width: 639px) {
    .ev-filter-bar {
      flex-direction: column;
      align-items: stretch;
    }

    .ev-filter-bar-search {
      width: 100%;
    }

    .ev-filter-bar-toggle {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .ev-filter-bar-filters {
      display: none;
      flex-direction: column;
      gap: 0.625rem;
      width: 100%;
    }

    .ev-filter-bar-filters--open {
      display: flex;
    }

    .ev-filter-bar-filters .ev-input {
      width: 100%;
    }
  }

  @media (min-width: 640px) {
    .ev-filter-bar-toggle {
      display: none;
    }

    .ev-filter-bar-filters {
      display: contents;
    }
  }

  /* Form input — used in search bars, filter selects */
  .ev-input {
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 0.5rem;
    padding: 0.4375rem 0.75rem;
    font-size: 0.8125rem;
    font-family: var(--font-ui);
    color: oklch(0.18 0.025 265);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
  }

  .ev-input:focus {
    border-color: var(--ev-primary);
    box-shadow: 0 0 0 3px var(--ev-primary-tint);
  }

  .ev-input::placeholder {
    color: oklch(0.65 0.008 258);
  }

  /* Task 22: invalid-field treatment, so a JS validator can mark a field
     without reaching for the shadcn palette (border-destructive / border-input,
     which resolve but belong to the other design vocabulary). One class, so a
     later-emitted utility of equal specificity still beats the border-color —
     callers on a shadcn-styled field have to drop border-input as well. */
  .ev-input--invalid,
  .ev-input--invalid:focus {
    border-color: var(--ev-danger);
    box-shadow: 0 0 0 3px oklch(0.56 0.22 27 / 0.12);
  }

  /* Inline card action button — "+ New Invoice" etc. in card headers */
  .ev-card-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--ev-primary);
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    background: var(--ev-primary-tint);
    border: 1px solid var(--ev-primary-border);
    transition: background-color 0.15s ease;
    white-space: nowrap;
  }

  .ev-card-action:hover {
    background-color: oklch(0.46 0.28 270 / 0.13);
    border-color: oklch(0.46 0.28 270 / 0.34);
  }

  /* ── Stat Cards ──────────────────────────────────────────────── */

  .ev-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }

  @media (min-width: 640px) {
    .ev-stats-grid { gap: 1rem; }
  }

  @media (min-width: 1024px) {
    .ev-stats-grid { grid-template-columns: repeat(4, 1fr); }
  }

  .ev-stat-card {
    background: var(--ev-surface-card);
    border-radius: 0.875rem;
    border: 1px solid var(--ev-border);
    border-top: 2px solid var(--ev-border);
    padding: 1.375rem 1.5rem 1.25rem;
    box-shadow: var(--ev-shadow-card);
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease, border-top-color 0.2s ease;
    opacity: 0;
    animation: ev-fade-up 0.45s ease forwards;
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .ev-stat-card:hover {
    box-shadow: var(--ev-shadow-hover);
    border-color: var(--ev-primary-border);
    border-top-color: var(--ev-primary);
    transform: translateY(-2px);
  }

  .ev-stat-card:nth-child(1) { animation-delay: 0.05s; }
  .ev-stat-card:nth-child(2) { animation-delay: 0.10s; }
  .ev-stat-card:nth-child(3) { animation-delay: 0.15s; }
  .ev-stat-card:nth-child(4) { animation-delay: 0.20s; }

  /* Task 22: tile-sized stat for use inside a card (dashboard widgets) rather
     than at page level — no lift on hover, no top accent rule, and a number
     scaled to sit three-up in a widget column. */
  .ev-stat-card--compact {
    padding: 0.75rem;
    border-radius: 0.5rem;
    border-top-width: 1px;
    background: var(--ev-surface-subtle);
    box-shadow: none;
    text-align: center;
    gap: 0.25rem;
  }

  .ev-stat-card--compact:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--ev-border);
    border-top-color: var(--ev-border);
  }

  .ev-stat-card--compact .ev-stat-number {
    font-size: 1.375rem;
    margin-bottom: 0;
  }

  .ev-stat-card--compact .ev-stat-label {
    font-size: 0.6875rem;
  }

  /* Icon row — tighter, more purposeful */
  .ev-stat-icon-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.875rem;
  }

  .ev-stat-icon {
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 0.4375rem;
    background: linear-gradient(135deg,
      oklch(0.46 0.28 270 / 0.13) 0%,
      oklch(0.46 0.28 270 / 0.05) 100%
    );
    border: 1px solid var(--ev-primary-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ev-primary);
    flex-shrink: 0;
  }

  .ev-stat-icon svg {
    width: 0.9375rem;
    height: 0.9375rem;
  }

  /* Label: proper case, legible, no shouting */
  .ev-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: oklch(0.46 0.018 258);
    display: block;
  }

  .ev-stat-number {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 1;
    color: oklch(0.12 0.04 265);
    letter-spacing: -0.025em;
    margin-bottom: 0.5rem;
    font-variant-numeric: tabular-nums;
  }

  /* Divider removed — kills the visual split */
  .ev-stat-divider { display: none; }

  .ev-stat-sub {
    font-size: 0.75rem;
    color: oklch(0.56 0.010 258);
    line-height: 1.4;
  }

  .ev-stat-body { flex: 1; }
  .ev-stat-footer { margin-top: auto; padding-top: 0.25rem; }

  /* Compact stat cards on mobile */
  @media (max-width: 639px) {
    .ev-stat-card {
      padding: 0.875rem 1rem 0.75rem;
      border-radius: 0.625rem;
    }

    /* The base re-assert above is a single class emitted after the modifier, so
       it takes padding/radius back off --compact at equal specificity. Restate
       the compact values here to keep the widget tiles tight below 640px. */
    .ev-stat-card--compact {
      padding: 0.75rem;
      border-radius: 0.5rem;
    }

    .ev-stat-icon-row {
      margin-bottom: 0.5rem;
    }

    .ev-stat-icon {
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 0.375rem;
    }

    .ev-stat-icon svg {
      width: 0.75rem;
      height: 0.75rem;
    }

    .ev-stat-label {
      font-size: 0.6875rem;
    }

    .ev-stat-number {
      font-size: 1.5rem;
      margin-bottom: 0.25rem;
    }

    .ev-stat-sub {
      font-size: 0.6875rem;
    }
  }

  /* ── Content Cards ───────────────────────────────────────────── */

  /* Grows into leftover page height but never shrinks below its content —
     flex-basis: 0 collapsed the grid to zero height on short viewports. */
  .ev-content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125rem;
    flex: 1 0 auto;
    min-height: auto;
  }

  @media (min-width: 1024px) {
    .ev-content-grid { grid-template-columns: 3fr 2fr; }
  }

  /* Wrapper that stretches to fill page height */
  .ev-content-zone {
    flex: 1;
    padding: 0 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
  }

  /* overflow: clip keeps children inside the corner radius without making the
     card a scroll container — hidden trapped wide tables in a box the user
     could never scroll. Inner scrollers (tables, message lists) still work. */
  .ev-card {
    background: var(--ev-surface-card);
    border-radius: 0.75rem;
    border: 1px solid var(--ev-border);
    box-shadow: var(--ev-shadow-card);
    overflow: clip;
    opacity: 0;
    animation: ev-fade-up 0.45s ease forwards;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
  }

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

  .ev-card-body {
    flex: 1;
  }

  .ev-card:nth-child(1) { animation-delay: 0.28s; }
  .ev-card:nth-child(2) { animation-delay: 0.34s; }

  .ev-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.375rem;
    border-bottom: 1px solid var(--ev-border-light);
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
  }

  .ev-card-header > * {
    min-width: 0;
  }

  @media (max-width: 639px) {
    .ev-card-header {
      flex-direction: column;
      align-items: flex-start;
    }

    /* Stacking is the right call for a title beside a labelled button, which
       needs the full width to stay readable. It is the wrong call for an
       icon-only affordance — a dismiss X, a disclosure chevron — which stacks
       into an orphaned bordered box below the description instead of sitting
       on the title's line. .ev-card-header-inline opts a header back into a
       row: the title block takes the slack, the icon keeps its intrinsic size. */
    .ev-card-header-inline {
      flex-direction: row;
      align-items: flex-start;
      flex-wrap: nowrap;
    }

    .ev-card-header-inline > :first-child { flex: 1 1 auto; }
    .ev-card-header-inline > :last-child  { flex: 0 0 auto; }
  }

  /* Section headers: proper case, readable weight — not all-caps metadata */
  .ev-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: oklch(0.18 0.025 265);
    font-family: var(--font-display);
  }

  .ev-card-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: oklch(0.50 0.26 270);
    transition: color 0.15s ease;
    letter-spacing: 0.01em;
  }

  .ev-card-link:hover {
    color: oklch(0.43 0.28 270);
  }

  /* ── List Rows ───────────────────────────────────────────────── */

  .ev-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.375rem;
    border-bottom: 1px solid var(--ev-border-light);
    border-left: 3px solid transparent;
    transition: background-color 0.12s ease;
  }

  .ev-list-row:last-child {
    border-bottom: none;
  }

  .ev-list-row:hover {
    background-color: var(--ev-surface-subtle);
  }

  /* Responsive list rows — stack on mobile */
  @media (max-width: 639px) {
    .ev-list-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
      padding: 0.875rem 1rem;
    }

    .ev-list-row .flex-shrink-0,
    .ev-list-row-end {
      flex-shrink: 1;
      flex-wrap: wrap;
      gap: 0.5rem;
      width: 100%;
      justify-content: flex-start;
    }

    .ev-list-row .flex-1 {
      margin-right: 0;
      width: 100%;
    }
  }

  /* Invoice row status left indicators (semantic) */
  .ev-list-row-paid    { border-left-color: var(--ev-success); }
  .ev-list-row-sent    { border-left-color: var(--ev-primary); }
  .ev-list-row-overdue { border-left-color: var(--ev-danger); }
  .ev-list-row-draft   { border-left-color: oklch(0.82 0.005 240); }

  .ev-list-primary {
    font-size: 0.875rem;
    font-weight: 500;
    color: oklch(0.18 0 0);
    transition: color 0.12s ease;
  }

  .ev-list-primary a:hover {
    color: oklch(0.46 0.28 270);
  }

  .ev-list-secondary {
    font-size: 0.75rem;
    color: oklch(0.52 0 0);
    margin-top: 0.125rem;
  }

  .ev-list-amount {
    font-size: 0.9375rem;
    font-weight: 600;
    color: oklch(0.18 0 0);
    font-variant-numeric: tabular-nums;
  }

  /* ── Avatar ──────────────────────────────────────────────────── */

  .ev-avatar {
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    background: var(--ev-primary-tint);
    color: var(--ev-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
    border: 1px solid var(--ev-primary-border);
    font-family: var(--font-display);
  }

  /* ── Status Badges ───────────────────────────────────────────── */

  .ev-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: 1px solid transparent;
  }

  .ev-badge-paid {
    background: oklch(0.56 0.18 162 / 0.10);
    color: oklch(0.32 0.16 162);
    border-color: oklch(0.56 0.18 162 / 0.28);
  }
  .ev-badge-overdue {
    background: oklch(0.58 0.22 27 / 0.10);
    color: oklch(0.40 0.20 27);
    border-color: oklch(0.58 0.22 27 / 0.28);
  }
  .ev-badge-sent {
    background: var(--ev-primary-tint);
    color: oklch(0.38 0.26 270);
    border-color: var(--ev-primary-border);
  }
  .ev-badge-draft {
    background: oklch(0.935 0.006 240);
    color: oklch(0.40 0.015 258);
    border-color: oklch(0.86 0.008 240);
  }
  .ev-badge-completed {
    background: oklch(0.56 0.18 250 / 0.10);
    color: oklch(0.38 0.16 250);
    border-color: oklch(0.56 0.18 250 / 0.28);
  }
  .ev-badge-no-show {
    background: oklch(0.58 0.22 27 / 0.10);
    color: oklch(0.40 0.20 27);
    border-color: oklch(0.58 0.22 27 / 0.28);
  }
  .ev-badge-warning {
    background: oklch(0.62 0.20 42 / 0.10);
    color: oklch(0.42 0.16 42);
    border-color: oklch(0.62 0.20 42 / 0.28);
  }

  /* ── Buttons ─────────────────────────────────────────────────── */

  .ev-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.15s ease;
    cursor: pointer;
  }

  /* A row of sibling buttons. .ev-btn sets white-space: nowrap, so a pair of
     full-label actions — "Connect Google Calendar" beside "Connect Microsoft
     Calendar" measures wider than a phone viewport — had nowhere to break, and
     a flex row defaults to nowrap, so the second button was clipped off-screen
     rather than reachable by scrolling. Let the row wrap below 640px and let a
     button that ends up alone on its line fill it. A pair short enough to fit
     still shares one line, and desktop is unchanged. */
  .ev-btn-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  @media (max-width: 639px) {
    .ev-btn-group {
      flex-wrap: wrap;
      width: 100%;
    }

    .ev-btn-group > .ev-btn {
      flex: 1 1 auto;
      justify-content: center;
    }
  }

  .ev-btn-primary {
    background: linear-gradient(135deg, oklch(0.48 0.28 270) 0%, oklch(0.44 0.30 274) 100%);
    color: white;
    box-shadow: 0 1px 4px oklch(0.46 0.28 270 / 0.35), 0 0 0 1px oklch(0.65 0.20 270 / 0.18) inset;
  }

  .ev-btn-primary:hover {
    background: linear-gradient(135deg, oklch(0.43 0.28 270) 0%, oklch(0.39 0.30 274) 100%);
    box-shadow: 0 4px 16px oklch(0.46 0.28 270 / 0.45), 0 0 0 1px oklch(0.65 0.20 270 / 0.18) inset;
    transform: translateY(-1px);
  }

  .ev-btn-ghost {
    background: transparent;
    color: oklch(0.30 0 0);
    border: 1px solid var(--ev-border);
  }

  .ev-btn-ghost:hover {
    background: var(--ev-surface-subtle);
    border-color: oklch(0.80 0 0);
  }

  /* Outlined neutral — reads as a button against the page, but clearly
     subordinate to primary. */
  .ev-btn-secondary {
    background: var(--ev-surface-card);
    color: oklch(0.30 0 0);
    border: 1px solid var(--ev-border);
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.04);
  }

  .ev-btn-secondary:hover {
    background: var(--ev-surface-subtle);
    border-color: oklch(0.80 0 0);
  }

  /* Filled red — destructive actions must never look like a back link. */
  .ev-btn-danger {
    background: var(--ev-danger);
    color: white;
    border: 1px solid transparent;
    box-shadow: 0 1px 4px oklch(0.56 0.22 27 / 0.30);
  }

  .ev-btn-danger:hover {
    background: oklch(0.49 0.22 27);
    box-shadow: 0 4px 12px oklch(0.56 0.22 27 / 0.40);
  }

  /* Mobile touch targets — ensure minimum 44px tap area */
  @media (max-width: 639px) {
    .ev-btn {
      min-height: 2.75rem;
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .ev-btn-sm {
      min-height: 2.5rem;
      padding-left: 0.75rem;
      padding-right: 0.75rem;
    }

    .ev-input, select.ev-input, textarea.ev-input {
      min-height: 2.75rem;
      font-size: 1rem; /* prevent iOS zoom on focus */
      width: 100%;
    }
  }

  /* Override inline grid columns on mobile */
  @media (max-width: 639px) {
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns:repeat(3"],
    [style*="grid-template-columns:repeat(4"] {
      grid-template-columns: repeat(2, 1fr) !important;
    }

    .grid-cols-12 {
      grid-template-columns: repeat(1, 1fr) !important;
    }
  }

  /* Form groups stack on mobile */
  @media (max-width: 639px) {
    .ev-form-group {
      flex-direction: column;
    }

    .ev-form-group > * {
      width: 100%;
    }
  }

  /* Settings page: sidebar + content on md+ */
  @media (min-width: 768px) {
    #settings-layout {
      grid-template-columns: 14rem 1fr;
    }
  }

  /* ── Detail / Show Page Layout ──────────────────────────────── */

  /* Two-column layout for show pages: main content + sidebar */
  .ev-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125rem;
  }

  @media (min-width: 1024px) {
    .ev-detail-grid { grid-template-columns: 2fr 1fr; }
  }

  /* Key-value pair row inside a card (for detail panels) */
  .ev-detail-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.625rem 1.375rem;
    border-bottom: 1px solid var(--ev-border-light);
    gap: 1rem;
  }

  .ev-detail-row:last-child { border-bottom: none; }

  .ev-detail-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: oklch(0.52 0.010 258);
    flex-shrink: 0;
  }

  .ev-detail-value {
    font-size: 0.875rem;
    font-weight: 400;
    color: oklch(0.18 0.025 265);
    text-align: right;
  }

  /* ── Form Layout ─────────────────────────────────────────────── */

  /* Card used to wrap forms (new/edit pages) */
  .ev-form-card {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    box-shadow: var(--ev-shadow-card);
    padding: 1.75rem 2rem;
  }

  .ev-form-group {
    margin-bottom: 1.25rem;
  }

  .ev-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: oklch(0.28 0.028 265);
    margin-bottom: 0.375rem;
  }

  .ev-label-hint {
    font-size: 0.75rem;
    color: oklch(0.55 0.008 258);
    margin-top: 0.25rem;
  }

  /* ── Empty States ────────────────────────────────────────────── */

  .ev-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    text-align: center;
    color: oklch(0.55 0 0);
  }

  .ev-empty-icon {
    width: 2.5rem;
    height: 2.5rem;
    opacity: 0.3;
    margin-bottom: 1rem;
  }

  .ev-empty-title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: oklch(0.25 0 0);
    margin-bottom: 0.375rem;
  }

  .ev-empty-desc {
    font-size: 0.8125rem;
    color: oklch(0.55 0 0);
    margin-bottom: 1.25rem;
  }

  /* ── Notice / Callout ────────────────────────────────────────── */

  .ev-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.625rem;
    border: 1px solid transparent;
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  .ev-notice-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
  }

  .ev-notice-info {
    background: var(--ev-primary-tint);
    border-color: var(--ev-primary-border);
    color: oklch(0.38 0.26 270);
  }

  .ev-notice-info .ev-notice-icon { color: var(--ev-primary); }

  .ev-notice-warning {
    background: oklch(0.62 0.20 42 / 0.08);
    border-color: oklch(0.62 0.20 42 / 0.28);
    color: oklch(0.35 0.16 42);
  }

  .ev-notice-warning .ev-notice-icon { color: var(--ev-warning); }

  .ev-notice-success {
    background: oklch(0.52 0.18 155 / 0.08);
    border-color: oklch(0.52 0.18 155 / 0.28);
    color: oklch(0.30 0.14 155);
  }

  .ev-notice-success .ev-notice-icon { color: var(--ev-success); }

  .ev-notice-danger {
    background: oklch(0.56 0.22 27 / 0.08);
    border-color: oklch(0.56 0.22 27 / 0.28);
    color: oklch(0.36 0.18 27);
  }

  .ev-notice-danger .ev-notice-icon { color: var(--ev-danger); }

  /* Task 22: flash notices. application.html.erb mounts the flash straight into
     a bare <main>, so the notice supplies its own gutters. The portal layout
     mounts it inside an already-padded container, where those gutters double up
     — .ev-flash-inset on that container collapses them. */
  .ev-notice-flash {
    margin: 1rem 1.5rem;
  }

  .ev-flash-inset .ev-notice-flash {
    margin: 0 0 1rem;
  }

  /* ── Progress Bar ─────────────────────────────────────────────── */

  .ev-progress {
    width: 7rem;
    height: 0.375rem;
    background: var(--ev-border-light);
    border-radius: 9999px;
    overflow: hidden;
  }

  .ev-progress-fill {
    height: 100%;
    background: var(--ev-primary);
    border-radius: 9999px;
    transition: width 0.3s ease;
  }

  .ev-progress-fill-success { background: var(--ev-success); }
  .ev-progress-fill-danger  { background: var(--ev-danger); }

  /* Task 22: the base bar is a fixed 7rem meter sized for table rows. The
     dashboard onboarding cards need it to span the card instead. */
  .ev-progress-full {
    width: 100%;
  }

  /* ── Analytics Trend Row ──────────────────────────────────────── */

  /* A horizontal bar chart drawn as a list of rows: a fixed-width label, a
     flexible .ev-progress track, and one or more fixed-width readouts. The
     fixed columns add up to more than a phone card's content width, which
     starved the flexible track down to zero and made every bar invisible.
     Below 768px the row wraps instead: label and headline amount share the
     first line, the track claims a full line of its own, and any secondary
     readouts fall to a third line. */

  .ev-trend-row {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .ev-trend-dot {
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
  }

  .ev-trend-label {
    flex: 0 0 5rem;
    font-weight: 500;
  }

  .ev-trend-label-wide { flex-basis: 6rem; }

  .ev-trend-track {
    flex: 1 1 auto;
    min-width: 0;
  }

  .ev-trend-value {
    flex: 0 0 6rem;
    text-align: right;
    font-size: 0.75rem;
  }

  .ev-trend-meta {
    flex: 0 0 4rem;
    text-align: right;
  }

  .ev-trend-meta-wide { flex-basis: 5rem; }

  /* The month-label + nested-rows variant: a label beside a stacked list of
     trend rows, which stacks outright rather than wrapping. */
  .ev-trend-group {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
  }

  .ev-trend-group-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  @media (max-width: 767px) {
    .ev-trend-row {
      flex-wrap: wrap;
      column-gap: 0.75rem;
      row-gap: 0.25rem;
    }

    .ev-trend-dot   { order: 1; }
    .ev-trend-label,
    .ev-trend-label-wide { flex: 1 1 auto; order: 1; }
    .ev-trend-value { flex: 0 0 auto; order: 2; margin-left: auto; }
    /* A 100% basis cannot share a line, so the track always breaks onto one. */
    .ev-trend-track { flex: 0 0 100%; order: 3; }
    .ev-trend-meta,
    .ev-trend-meta-wide { flex: 0 0 auto; order: 4; text-align: left; }

    .ev-trend-group {
      flex-direction: column;
      gap: 0.375rem;
    }

    .ev-trend-group-body { width: 100%; }
  }

  /* ── Card Table ───────────────────────────────────────────────── */

  .ev-table {
    width: 100%;
    border-collapse: collapse;
  }

  .ev-table-head { border-bottom: 1px solid var(--ev-border); }

  .ev-table-th {
    padding: 0.625rem 1.375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ev-ink-fg-muted);
    text-align: left;
    white-space: nowrap;
  }

  .ev-table-th:last-child { text-align: right; }

  .ev-table-row {
    border-bottom: 1px solid var(--ev-border-light);
    transition: background-color 0.12s ease;
  }

  .ev-table-row:last-child { border-bottom: none; }
  .ev-table-row:hover { background-color: var(--ev-surface-subtle); }

  .ev-table-td {
    padding: 0.75rem 1.375rem;
    font-size: 0.875rem;
    color: oklch(0.18 0.025 265);
  }

  .ev-table-td:last-child {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  .ev-table-td-muted {
    color: var(--ev-ink-fg-muted);
    font-size: 0.8125rem;
  }

  .ev-table-footer {
    border-top: 2px solid var(--ev-border);
    background: var(--ev-surface-subtle);
  }

  .ev-table-footer .ev-table-td { font-weight: 600; }

  /* ── Dropdown Action Menu ─────────────────────────────────────── */

  .ev-dropdown {
    position: relative;
    display: inline-block;
  }

  .ev-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.375rem;
    color: var(--ev-ink-fg);
    border: 1px solid transparent;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    cursor: pointer;
    background: transparent;
  }

  .ev-dropdown-trigger:hover {
    background: var(--ev-surface-subtle);
    border-color: var(--ev-border);
  }

  .ev-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    min-width: 10rem;
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.625rem;
    box-shadow: var(--ev-shadow-hover);
    z-index: 50;
    padding: 0.25rem;
    display: none;
  }

  .ev-dropdown-menu.is-open { display: block; }

  .ev-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: oklch(0.22 0.025 265);
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.1s ease;
  }

  .ev-dropdown-item:hover { background: var(--ev-surface-subtle); }

  .ev-dropdown-item-danger { color: var(--ev-danger); }
  .ev-dropdown-item-danger:hover { background: oklch(0.56 0.22 27 / 0.08); }

  .ev-dropdown-divider {
    height: 1px;
    background: var(--ev-border-light);
    margin: 0.25rem 0;
  }

  /* ── Pagy Pagination ──────────────────────────────────────────── */

  .ev-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 1.375rem;
    border-top: 1px solid var(--ev-border-light);
    gap: 0.25rem;
  }

  .ev-pagination nav {
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }

  .ev-pagination a,
  .ev-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.12s ease;
  }

  .ev-pagination a {
    color: oklch(0.28 0.028 265);
    border: 1px solid var(--ev-border);
  }

  .ev-pagination a:hover {
    background: var(--ev-surface-subtle);
    border-color: var(--ev-primary-border);
  }

  .ev-pagination span.current {
    background: var(--ev-primary-tint);
    border: 1px solid var(--ev-primary-border);
    color: var(--ev-primary);
    font-weight: 600;
  }

  .ev-pagination span.prev,
  .ev-pagination span.next,
  .ev-pagination span.gap {
    color: var(--ev-ink-fg-muted);
    border: 1px solid transparent;
  }

  /* ── Portal Page Shell ────────────────────────────────────────── */

  .ev-portal-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: 100%;
  }

  .ev-portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.375rem;
    flex-wrap: wrap;
  }

  @media (max-width: 639px) {
    .ev-portal-header {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .ev-portal-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: oklch(0.12 0.04 265);
    letter-spacing: -0.02em;
    line-height: 1.2;
  }

  .ev-portal-subtitle {
    font-size: 0.875rem;
    color: var(--ev-ink-fg-muted);
    margin-top: 0.125rem;
  }

  /* ── Portal Welcome Hero ──────────────────────────────────────── */

  .ev-portal-welcome {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
      135deg,
      oklch(0.46 0.28 270 / 0.10) 0%,
      oklch(0.46 0.28 270 / 0.05) 55%,
      oklch(0.46 0.28 270 / 0.02) 100%
    );
    border: 1px solid var(--ev-primary-border);
    border-left: 4px solid var(--ev-primary);
    border-radius: 1rem;
    padding: 1.625rem 2rem;
    margin-bottom: 1.375rem;
  }

  /* decorative orb top-right */
  .ev-portal-welcome::before {
    content: '';
    position: absolute;
    top: -3rem;
    right: -3rem;
    width: 12rem;
    height: 12rem;
    border-radius: 50%;
    background: radial-gradient(circle, oklch(0.46 0.28 270 / 0.15) 0%, transparent 65%);
    pointer-events: none;
  }

  /* decorative orb bottom-left */
  .ev-portal-welcome::after {
    content: '';
    position: absolute;
    bottom: -2rem;
    left: 30%;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: radial-gradient(circle, oklch(0.46 0.28 270 / 0.07) 0%, transparent 65%);
    pointer-events: none;
  }

  .ev-portal-welcome-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: oklch(0.14 0.06 265);
    margin-bottom: 0.375rem;
    letter-spacing: -0.025em;
    line-height: 1.15;
    position: relative; /* above ::before orbs */
  }

  .ev-portal-welcome-sub {
    font-size: 0.875rem;
    color: oklch(0.46 0.018 258);
    line-height: 1.5;
    position: relative;
  }

  @media (max-width: 639px) {
    .ev-portal-welcome {
      padding: 1.25rem 1rem;
    }

    .ev-portal-welcome-title {
      font-size: 1.25rem;
    }
  }

  /* ── Portal Stats Grid ────────────────────────────────────────── */

  .ev-portal-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }

  @media (min-width: 640px) { .ev-portal-stats { gap: 1rem; } }
  @media (min-width: 1024px) { .ev-portal-stats { grid-template-columns: repeat(3, 1fr); } }

  /* ── Portal Stat Card ─────────────────────────────────────────── */

  .ev-portal-stat-card {
    background: var(--ev-surface-card);
    border-radius: 0.875rem;
    border: 1px solid var(--ev-border);
    border-left: 4px solid var(--ev-primary);
    padding: 1.375rem 1.5rem 1.25rem;
    box-shadow: var(--ev-shadow-card);
    transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    display: flex;
    flex-direction: column;
  }

  .ev-portal-stat-card:hover {
    box-shadow: var(--ev-shadow-hover);
    border-color: var(--ev-border);
    border-left-color: var(--ev-primary-hover);
    transform: translateY(-2px);
  }

  @media (max-width: 639px) {
    .ev-portal-stat-card {
      padding: 0.875rem 1rem 0.75rem;
      border-radius: 0.625rem;
      border-left-width: 3px;
    }
  }

  /* ── Sticky Cart Summary ──────────────────────────────────────── */

  .ev-sticky-summary {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    box-shadow: var(--ev-shadow-card);
    overflow: hidden;
    position: sticky;
    top: 1.5rem;
    align-self: start;
  }

  /* ── Breadcrumb ───────────────────────────────────────────────── */

  .ev-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
    margin-bottom: 1.125rem;
  }

  .ev-breadcrumb-item {
    color: var(--ev-ink-fg-muted);
    text-decoration: none;
    transition: color 0.12s ease;
  }

  .ev-breadcrumb-item:hover { color: var(--ev-primary); }

  .ev-breadcrumb-sep {
    color: var(--ev-border);
    user-select: none;
  }

  .ev-breadcrumb-current {
    color: oklch(0.28 0.028 265);
    font-weight: 500;
  }

  /* ── Form Section Divider ─────────────────────────────────────── */

  /* The rule separates one section from the previous one, so it belongs to the
     section that follows — not to every section with a :first-child exemption.
     :first-child was too literal to survive real forms: form_for renders its
     hidden authenticity-token input ahead of the markup, and pages put an error
     summary above the first heading, so the opening section was never actually
     the first child and every such form drew a stray rule above its first
     heading. Keying on a preceding section instead is immune to whatever
     renders in front. */
  .ev-form-section {
    margin-bottom: 1.25rem;
  }

  .ev-form-section ~ .ev-form-section {
    padding-top: 1.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--ev-border-light);
  }

  /* A section separated from what precedes it by something the sibling selector
     cannot see through — a section that opens after a closed <form>, say — asks
     for the rule explicitly. */
  .ev-form-section-divided {
    padding-top: 1.5rem;
    margin-top: 0.25rem;
    border-top: 1px solid var(--ev-border-light);
  }

  .ev-form-section-title {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: oklch(0.22 0.030 265);
    letter-spacing: -0.01em;
  }

  .ev-form-section-desc {
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
    margin-top: 0.25rem;
  }

  /* ── Helper Hint Text ────────────────────────────────────────── */

  .ev-hint {
    font-size: 0.75rem;
    color: oklch(0.55 0.008 258);
    margin-top: 0.3rem;
    line-height: 1.45;
  }

  /* ── Toggle Switch ──────────────────────────────────────────── */

  .ev-toggle {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 2.5rem;
    height: 1.375rem;
    border-radius: 9999px;
    background: oklch(0.85 0.005 260);
    border: 1px solid oklch(0.80 0.008 260);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.15s ease;
    flex-shrink: 0;
  }

  .ev-toggle::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px oklch(0.15 0.02 260 / 0.15);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .ev-toggle:checked {
    background: var(--ev-primary);
    border-color: var(--ev-primary);
  }

  .ev-toggle:checked::before {
    transform: translateX(1.125rem);
  }

  .ev-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ev-primary-tint);
  }

  /* ── Toggle Row ─────────────────────────────────────────────── */

  .ev-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ev-border-light);
    border-radius: 0.625rem;
    transition: border-color 0.15s ease, background 0.15s ease;
  }

  .ev-toggle-row:hover {
    border-color: var(--ev-border);
    background: oklch(0.993 0.001 260);
  }

  .ev-toggle-row-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ev-ink);
    margin: 0;
  }

  .ev-toggle-row-desc {
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
    margin: 0.125rem 0 0;
    line-height: 1.45;
  }

  /* ── Refund Timeline Bar ────────────────────────────────────── */

  .ev-refund-bar {
    display: flex;
    height: 3.25rem;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid oklch(0.88 0.006 260);
  }

  .ev-refund-seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.5rem;
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
  }

  .ev-refund-seg + .ev-refund-seg {
    border-left: 1px solid oklch(1 0 0 / 0.35);
  }

  .ev-refund-seg-label {
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
  }

  .ev-refund-seg-sub {
    font-size: 0.625rem;
    font-weight: 500;
    opacity: 0.75;
    margin-top: 0.1875rem;
    line-height: 1;
    white-space: nowrap;
  }

  .ev-refund-seg--full {
    background: oklch(0.93 0.06 155);
    color: oklch(0.32 0.12 155);
  }

  .ev-refund-seg--partial {
    background: oklch(0.94 0.07 75);
    color: oklch(0.38 0.12 55);
  }

  .ev-refund-seg--none {
    background: oklch(0.94 0.05 20);
    color: oklch(0.42 0.12 20);
  }

  .ev-refund-legend {
    display: flex;
    justify-content: space-between;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    color: var(--ev-ink-fg-muted);
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 0 0.125rem;
  }

  .ev-refund-legend-start::before,
  .ev-refund-legend-end::after {
    display: inline;
    font-size: 0.75rem;
  }

  .ev-refund-legend-start::before { content: '\2190 '; }
  .ev-refund-legend-end::after    { content: ' \2192'; }

  /* ── Refund Tier Badges (compact) ───────────────────────────── */

  .ev-refund-tier-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 0.1875rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: 0.01em;
  }

  .ev-refund-tier-badge--full {
    background: oklch(0.93 0.06 155 / 0.6);
    border-color: oklch(0.82 0.08 155);
    color: oklch(0.32 0.12 155);
  }

  .ev-refund-tier-badge--partial {
    background: oklch(0.94 0.07 75 / 0.6);
    border-color: oklch(0.85 0.08 75);
    color: oklch(0.38 0.12 55);
  }

  .ev-refund-tier-badge--none {
    background: oklch(0.94 0.05 20 / 0.5);
    border-color: oklch(0.86 0.06 20);
    color: oklch(0.42 0.12 20);
  }

  /* ── Permission Indicator ──────────────────────────────────── */

  .ev-perm-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--ev-border-light);
  }

  .ev-perm-row:last-child {
    border-bottom: none;
  }

  .ev-perm-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ev-ink);
  }

  .ev-perm-icon {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
  }

  .ev-perm-icon--on  { color: oklch(0.52 0.18 155); }
  .ev-perm-icon--off { color: var(--ev-ink-fg-muted); opacity: 0.5; }

  .ev-perm-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
  }

  .ev-perm-meta {
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
  }

  /* ── Settings Tabs ─────────────────────────────────────────── */

  .ev-settings-tab,
  .ev-settings-tab--active {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    cursor: pointer;
  }

  .ev-settings-tab {
    color: var(--ev-ink-fg);
  }

  .ev-settings-tab:hover {
    background: var(--ev-surface-subtle);
    color: var(--ev-ink);
  }

  .ev-settings-tab--active {
    color: var(--ev-primary);
    background: var(--ev-primary-tint);
    font-weight: 600;
  }

  /* Task 22: top-toolbar affordances (AI credits link, notification bell).
     Both carried an onmouseover/onmouseout pair setting exactly these two
     properties. The base color has to live here rather than inline, because an
     inline color would beat the :hover rule that replaces those handlers — and
     unlike the handlers, :focus-visible works for keyboard users. */
  .ev-toolbar-action {
    color: var(--ev-ink-fg);
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  .ev-toolbar-action--muted {
    color: var(--ev-ink-fg-muted);
  }

  .ev-toolbar-action:hover,
  .ev-toolbar-action:focus-visible {
    background: var(--ev-primary-tint);
    color: var(--ev-primary);
  }

  /* Task 22: chat launcher lift, previously an onmouseover/onmouseout pair. The
     button's background stays inline — it is the org's configured widget color. */
  .ev-chat-fab {
    transition: transform 0.2s;
  }

  .ev-chat-fab:hover,
  .ev-chat-fab:focus-visible {
    transform: scale(1.1);
  }

  /* ── Collapsible Sync Table ─────────────────────────────────── */

  .ev-sync-section {
    border: 1px solid var(--ev-border);
    border-radius: 0.625rem;
    background: var(--ev-surface-card);
    overflow: hidden;
  }

  .ev-sync-section + .ev-sync-section {
    margin-top: 0.75rem;
  }

  .ev-sync-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background 0.12s;
  }

  .ev-sync-summary::-webkit-details-marker { display: none; }

  .ev-sync-summary:hover {
    background: var(--ev-surface-subtle);
  }

  .ev-sync-summary-left {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
  }

  .ev-sync-summary-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ev-ink);
    letter-spacing: -0.01em;
  }

  .ev-sync-summary-count {
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
    font-weight: 500;
  }

  .ev-sync-summary-right {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
  }

  .ev-sync-chevron {
    width: 1rem;
    height: 1rem;
    color: var(--ev-ink-fg-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  details[open] > .ev-sync-summary .ev-sync-chevron {
    transform: rotate(90deg);
  }

  .ev-sync-table-wrap {
    max-height: 22rem;
    overflow-y: auto;
    border-top: 1px solid var(--ev-border-light);
  }

  .ev-sync-table {
    width: 100%;
    border-collapse: collapse;
  }

  .ev-sync-table thead {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ev-surface-subtle);
  }

  .ev-sync-table th {
    padding: 0.5rem 1.25rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ev-ink-fg-muted);
    text-align: left;
    border-bottom: 1px solid var(--ev-border-light);
  }

  .ev-sync-table td {
    padding: 0.5rem 1.25rem;
    font-size: 0.8125rem;
    color: var(--ev-ink);
    border-bottom: 1px solid var(--ev-border-light);
    vertical-align: middle;
  }

  .ev-sync-table tr:last-child td {
    border-bottom: none;
  }

  .ev-sync-table tbody tr:hover {
    background: oklch(0.993 0.001 260);
  }

  /* ── Tab Bar ──────────────────────────────────────────────────── */

  .ev-tab-bar {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    border-bottom: 1px solid var(--ev-border-light);
    margin-bottom: 1.125rem;
  }

  .ev-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ev-ink-fg);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
  }

  .ev-tab:hover {
    color: oklch(0.22 0.025 265);
    border-bottom-color: var(--ev-border);
  }

  .ev-tab-active {
    color: var(--ev-primary);
    border-bottom-color: var(--ev-primary);
    font-weight: 600;
  }

  /* ── Checkout Page ───────────────────────────────────────────── */

  /* Step indicator */
  .ev-checkout-steps {
    display: flex;
    align-items: center;
  }

  .ev-checkout-step {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: oklch(0.60 0 0);
  }

  .ev-checkout-step-num {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6875rem;
    font-weight: 700;
    background: oklch(0.92 0 0);
    color: oklch(0.52 0 0);
    border: 1.5px solid oklch(0.84 0 0);
  }

  .ev-checkout-step-done {
    color: oklch(0.36 0.12 162);
  }

  .ev-checkout-step-done .ev-checkout-step-num {
    background: oklch(0.56 0.18 162 / 0.14);
    color: oklch(0.30 0.16 162);
    border-color: oklch(0.56 0.18 162 / 0.30);
  }

  .ev-checkout-step-active {
    color: oklch(0.26 0.028 265);
    font-weight: 600;
  }

  .ev-checkout-step-active .ev-checkout-step-num {
    background: var(--ev-primary);
    color: white;
    border-color: transparent;
    box-shadow: 0 0 0 3px oklch(0.46 0.28 270 / 0.18);
  }

  .ev-checkout-step-future {
    color: oklch(0.70 0 0);
  }

  .ev-checkout-step-connector {
    width: 2rem;
    height: 1.5px;
    background: var(--ev-border);
    margin: 0 0.375rem;
  }

  /* Item rows */
  .ev-checkout-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.375rem;
    border-top: 1px solid var(--ev-border-light);
    transition: background-color 0.1s ease;
  }

  .ev-checkout-item:first-child {
    border-top: none;
  }

  .ev-checkout-item:hover {
    background: var(--ev-surface-subtle);
  }

  .ev-checkout-item-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--ev-primary-tint);
    border: 1px solid var(--ev-primary-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ev-primary);
  }

  /* Totals section */
  .ev-checkout-totals {
    padding: 1rem 1.375rem;
    border-top: 1px solid var(--ev-border);
    background: var(--ev-surface-subtle);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .ev-checkout-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .ev-checkout-total-final {
    padding-top: 0.5rem;
    border-top: 1px solid var(--ev-border);
    margin-top: 0.125rem;
  }

  .ev-checkout-total-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: oklch(0.12 0.04 265);
    font-family: var(--font-display);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
  }

  /* Confirm panel card */
  .ev-checkout-confirm-card {
    background: var(--ev-surface-card);
    border-radius: 0.75rem;
    border: 1px solid var(--ev-border);
    box-shadow: var(--ev-shadow-card);
    overflow: hidden;
    opacity: 0;
    animation: ev-fade-up 0.45s ease 0.34s forwards;
    position: sticky;
    top: 1.5rem;
  }

  .ev-checkout-confirm-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 1rem 1.375rem;
    border-bottom: 1px solid var(--ev-border-light);
    background: linear-gradient(
      135deg,
      oklch(0.46 0.28 270 / 0.04) 0%,
      oklch(0.46 0.28 270 / 0.01) 100%
    );
  }

  .ev-checkout-confirm-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--ev-primary-tint);
    border: 1px solid var(--ev-primary-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ev-primary);
    flex-shrink: 0;
  }

  /* Total callout inside confirm card */
  .ev-checkout-confirm-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.875rem;
    background: oklch(0.46 0.28 270 / 0.04);
    border: 1px solid oklch(0.46 0.28 270 / 0.12);
    border-radius: 0.5rem;
    margin-bottom: 1.125rem;
  }

  /* CTA submit button */
  .ev-checkout-cta {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
  }

  /* Trust badges */
  .ev-checkout-trust {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--ev-border-light);
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
  }

  .ev-checkout-trust-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    color: oklch(0.50 0 0);
  }

  .ev-checkout-trust-item svg {
    color: oklch(0.48 0.16 162);
    flex-shrink: 0;
  }

  /* ── Payment Success State (payment_status=success redirect) ─── */

  .ev-pay-success-hero {
    /* Every green in the hero is mixed from --ev-success so an org that
       re-themes the success token re-themes the whole confirmation moment.
       Declared here rather than on :root so the block stays self-contained;
       custom properties inherit to the check mark, label and divider below. */
    --ev-pay-wash:    color-mix(in oklab, var(--ev-success)  7%, var(--ev-surface-card));
    --ev-pay-wash-2:  color-mix(in oklab, var(--ev-success)  2%, var(--ev-surface-card));
    --ev-pay-edge:    color-mix(in oklab, var(--ev-success) 22%, var(--ev-surface-card));
    --ev-pay-glow:    color-mix(in oklab, var(--ev-success)  8%, transparent);
    --ev-pay-glow-2:  color-mix(in oklab, var(--ev-success)  5%, transparent);
    --ev-pay-mark:    color-mix(in oklab, var(--ev-success) 88%, black);
    --ev-pay-label:   color-mix(in oklab, var(--ev-success) 68%, black);
    --ev-pay-rule:    color-mix(in oklab, var(--ev-success) 28%, var(--ev-surface-card));

    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--ev-pay-wash) 0%, var(--ev-pay-wash-2) 55%, var(--ev-surface-card) 100%);
    border: 1px solid var(--ev-pay-edge);
    border-radius: 1rem;
    padding: 2.75rem 2rem 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.625rem;
    box-shadow: 0 4px 32px var(--ev-pay-glow), 0 1px 4px oklch(0.20 0.012 260 / 0.05);
    animation: ev-pay-scale 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
    margin-bottom: 1.25rem;
  }

  .ev-pay-success-hero::before {
    content: '';
    position: absolute;
    top: -70px;
    right: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ev-pay-glow) 0%, transparent 70%);
    pointer-events: none;
  }

  .ev-pay-success-hero::after {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--ev-pay-glow-2) 0%, transparent 70%);
    pointer-events: none;
  }

  @keyframes ev-pay-scale {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }

  @keyframes ev-pay-check-circle {
    0%   { stroke-dashoffset: 166; opacity: 0; }
    20%  { opacity: 1; }
    100% { stroke-dashoffset: 0; }
  }

  @keyframes ev-pay-check-path {
    0%   { stroke-dashoffset: 48; }
    100% { stroke-dashoffset: 0; }
  }

  @keyframes ev-pay-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .ev-pay-check-wrap {
    width: 5rem;
    height: 5rem;
    animation: ev-pay-fade-up 0.4s 0.05s ease-out both;
  }

  .ev-pay-check-svg .ev-pay-circle {
    stroke: var(--ev-pay-mark);
    stroke-width: 2;
    stroke-dasharray: 166;
    stroke-dashoffset: 166;
    stroke-linecap: round;
    fill: none;
    animation: ev-pay-check-circle 0.55s 0.1s cubic-bezier(0.65, 0, 0.45, 1) forwards;
  }

  .ev-pay-check-svg .ev-pay-path {
    stroke: var(--ev-pay-mark);
    stroke-width: 2.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    fill: none;
    animation: ev-pay-check-path 0.3s 0.55s ease-out forwards;
  }

  .ev-pay-success-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ev-pay-label);
    animation: ev-pay-fade-up 0.4s 0.15s ease-out both;
  }

  .ev-pay-success-amount {
    font-family: 'Outfit', sans-serif;
    font-size: 3.25rem;
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--ev-ink);
    animation: ev-pay-fade-up 0.4s 0.2s ease-out both;
  }

  .ev-pay-success-service {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ev-ink);
    animation: ev-pay-fade-up 0.4s 0.25s ease-out both;
  }

  .ev-pay-success-meta {
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
    animation: ev-pay-fade-up 0.4s 0.28s ease-out both;
  }

  .ev-pay-divider {
    width: 3rem;
    height: 1px;
    background: var(--ev-pay-rule);
    margin: 0.375rem 0;
    animation: ev-pay-fade-up 0.4s 0.3s ease-out both;
  }

  .ev-pay-success-actions {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 0.25rem;
    animation: ev-pay-fade-up 0.4s 0.34s ease-out both;
  }

  /* Compact summary card below the hero */
  .ev-pay-summary-card {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.875rem;
    overflow: hidden;
    margin-bottom: 1.125rem;
    animation: ev-pay-fade-up 0.4s 0.38s ease-out both;
  }

  .ev-pay-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--ev-border-light);
  }

  .ev-pay-summary-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ev-ink);
    letter-spacing: 0.01em;
  }

  /* Compact line items (success view) */
  .ev-pay-items-list {
    padding: 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .ev-pay-item-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.875rem;
  }

  .ev-pay-item-name {
    color: var(--ev-ink);
    font-weight: 500;
    flex: 1;
    min-width: 0;
  }

  .ev-pay-item-qty {
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
    white-space: nowrap;
  }

  .ev-pay-item-amount {
    color: var(--ev-ink);
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
  }

  /* Total row in compact summary */
  .ev-pay-total-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--ev-border);
    background: var(--ev-surface-subtle);
  }

  .ev-pay-total-label {
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
    font-weight: 500;
  }

  .ev-pay-total-value {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ev-ink);
  }

  /* Payment detail pill row */
  .ev-pay-detail-strip {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--ev-border-light);
    flex-wrap: wrap;
  }

  .ev-pay-detail-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
  }

  .ev-pay-detail-chip svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
    color: oklch(0.48 0.18 155);
  }

  /* ── Task 14: promoted from portal/invoices/_payment_success ──── */

  .ev-recurring-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    margin-top: 0.375rem;
    padding: 0.1875rem 0.5625rem 0.1875rem 0.4375rem;
    background: var(--ev-primary-tint);
    border: 1px solid var(--ev-primary-border);
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ev-primary);
    letter-spacing: 0.01em;
  }

  .ev-recurring-pill svg {
    flex-shrink: 0;
  }

  .ev-appt-card {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1.125rem;
    animation: ev-pay-fade-up 0.4s 0.36s ease-out both;
  }

  .ev-appt-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--ev-border-light);
  }

  .ev-appt-header-icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.4375rem;
    background: var(--ev-primary-tint);
    border: 1px solid var(--ev-primary-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ev-primary);
  }

  .ev-appt-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ev-border-light);
  }

  .ev-appt-row:last-child {
    border-bottom: none;
  }

  .ev-appt-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ev-ink);
    margin-bottom: 0.1875rem;
  }

  .ev-appt-datetime {
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
  }

  .ev-appt-employee {
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
    margin-top: 0.125rem;
    opacity: 0.8;
  }

  .ev-timeline-card {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    padding: 1.25rem 1.375rem;
    margin-bottom: 1.125rem;
    animation: ev-pay-fade-up 0.4s 0.42s ease-out both;
  }

  .ev-timeline-heading {
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ev-ink-fg-muted);
    margin-bottom: 1.125rem;
  }

  .ev-timeline-list {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .ev-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    position: relative;
    padding-bottom: 1rem;
  }

  .ev-timeline-item:last-child {
    padding-bottom: 0;
  }

  .ev-timeline-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 1.375rem;
  }

  .ev-timeline-dot {
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--ev-surface-card);
    border: 1.5px solid var(--ev-border);
    color: var(--ev-ink-fg-muted);
    font-size: 0.625rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
  }

  .ev-timeline-connector {
    width: 1px;
    flex: 1;
    min-height: 0.75rem;
    background: var(--ev-border-light);
    margin-top: 0.1875rem;
  }

  .ev-timeline-item:last-child .ev-timeline-connector {
    display: none;
  }

  .ev-timeline-text {
    font-size: 0.875rem;
    color: var(--ev-ink-fg-muted);
    line-height: 1.55;
    padding-top: 0.125rem;
  }

  .ev-timeline-text strong {
    color: var(--ev-ink);
    font-weight: 500;
  }

  .ev-invoices-link {
    display: flex;
    justify-content: center;
    animation: ev-pay-fade-up 0.4s 0.48s ease-out both;
  }

  .ev-invoices-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ev-ink-fg-muted);
    text-decoration: none;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--ev-border);
    border-radius: 0.5rem;
    background: var(--ev-surface-card);
    transition: border-color 0.15s, color 0.15s;
  }

  .ev-invoices-link a:hover {
    border-color: var(--ev-ink-fg-muted);
    color: var(--ev-ink);
  }

  /* ── Checkout Calendar ───────────────────────────────────────── */

  /* Wrapper to constrain & center the grid */
  .ev-cal-wrap {
    display: flex;
    justify-content: center;
  }

  .ev-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 36px);
    gap: 2px;
    justify-content: center;
  }

  .ev-cal-header {
    width: 36px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ev-ink-fg-muted);
  }

  .ev-cal-day {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.8125rem;
    font-weight: 500;
    position: relative;
    transition: background 0.12s, color 0.12s;
    cursor: default;
    user-select: none;
  }

  .ev-cal-day--available {
    color: var(--ev-ink);
    font-weight: 600;
    cursor: pointer;
  }
  .ev-cal-day--available:hover {
    background: oklch(0.46 0.28 270 / 0.10);
    color: var(--ev-primary);
  }

  .ev-cal-day--selected {
    background: oklch(0.20 0.04 265) !important;
    color: #fff !important;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px oklch(0.20 0.04 265 / 0.30);
  }

  .ev-cal-day--disabled {
    color: var(--ev-ink-fg-muted);
    opacity: 0.28;
    cursor: default;
  }

  /* Today is a ring around the day, not a dot. The availability marker below is
     also a 3px primary circle in the same spot, so two dots separated only by
     opacity read as one indicator. A ring differs in shape, which survives both
     the size and the low contrast. Same outline treatment the mobile month grid
     uses for its today/selected states. inset box-shadow rather than a border so
     the 36px box is unchanged. */
  .ev-cal-day--today:not(.ev-cal-day--selected) {
    box-shadow: inset 0 0 0 1.5px var(--ev-primary);
  }

  /* Emphasise the numeral only when today can actually be picked — primary ink
     on a day with no slots reads as an invitation to click it. */
  .ev-cal-day--today.ev-cal-day--available:not(.ev-cal-day--selected) {
    color: var(--ev-primary);
    font-weight: 700;
  }

  /* --disabled fades the whole cell to 0.28, which all but erases the ring.
     Today has to stay findable in the grid even when it has no slots. */
  .ev-cal-day--today.ev-cal-day--disabled {
    opacity: 0.5;
  }

  /* Available date with a subtle dot indicator */
  .ev-cal-day--available:not(.ev-cal-day--selected)::before {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: oklch(0.46 0.28 270 / 0.45);
  }

  .ev-cal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 0;
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
  }

  .ev-cal-spinner {
    animation: ev-cal-spin 0.9s linear infinite;
    flex-shrink: 0;
  }

  .ev-cal-empty {
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
    text-align: center;
    padding: 1rem 0 0.25rem;
  }

  .ev-cal-prompt {
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
  }

  /* ── Time Slot Chip Grid ─────────────────────────────────────── */

  .ev-slots-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ev-ink-fg-muted);
    margin-bottom: 0.75rem;
  }

  .ev-slots-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
    gap: 0.5rem;
  }

  .ev-slot-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.375rem;
    border: 1.5px solid var(--ev-border);
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ev-ink);
    cursor: pointer;
    transition: all 0.12s;
    text-align: center;
    background: var(--ev-surface-card);
    line-height: 1;
  }

  .ev-slot-chip:hover {
    border-color: var(--ev-primary);
    color: var(--ev-primary);
    background: oklch(0.46 0.28 270 / 0.06);
  }

  .ev-slot-chip input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  .ev-slot-chip--selected,
  .ev-slot-chip:has(input:checked) {
    background: oklch(0.20 0.04 265);
    border-color: oklch(0.20 0.04 265);
    color: #fff;
    box-shadow: 0 2px 8px oklch(0.20 0.04 265 / 0.25);
  }

  /* ── Task 14: portal booking calendar + slot confirm ─────────── */

  /* Leading blank cells keep the 7-column grid aligned to the 1st. */
  .ev-cal-blank {
    width: 36px;
    height: 36px;
  }

  .ev-cal-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.375rem 0.875rem;
    margin-top: 0.75rem;
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
  }

  .ev-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }

  .ev-cal-legend-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: oklch(0.46 0.28 270 / 0.45);
    flex-shrink: 0;
  }

  /* Mirrors .ev-cal-day--today: a ring, sized up from the 5px dot so the 1.5px
     outline still reads at legend scale. */
  .ev-cal-legend-ring {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1.5px var(--ev-primary);
    flex-shrink: 0;
  }

  .ev-slot-confirm {
    margin-top: 1rem;
    padding: 1rem 1.125rem;
    background: var(--ev-surface);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
  }

  .ev-slot-confirm-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ev-ink);
    margin-bottom: 0.75rem;
  }

  .ev-slot-confirm-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  /* ── Checkout Slot Hint ──────────────────────────────────────── */

  .ev-checkout-slot-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: oklch(0.52 0.18 30);
    background: oklch(0.98 0.02 50);
    border: 1px solid oklch(0.88 0.06 50);
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
  }

  .ev-checkout-slot-hint--pulse {
    animation: ev-hint-pulse 0.6s ease;
  }

  @keyframes ev-hint-pulse {
    0%   { transform: scale(1);    box-shadow: none; }
    30%  { transform: scale(1.02); box-shadow: 0 0 0 3px oklch(0.88 0.12 30 / 0.4); }
    100% { transform: scale(1);    box-shadow: none; }
  }

  /* ── Booking Section ─────────────────────────────────────────── */

  .ev-booking-section {
    border-top: 1px solid var(--ev-border-light);
    background: oklch(0.975 0.008 265);
    padding: 1.25rem 1.5rem 1.5rem;
  }

  .ev-booking-section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ev-primary);
    margin-bottom: 1.125rem;
  }

  .ev-booking-section-label-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ev-primary);
    flex-shrink: 0;
  }

  .ev-booking-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.875rem;
  }

  .ev-booking-month-btn {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid var(--ev-border);
    background: var(--ev-surface-card);
    color: var(--ev-ink-fg-muted);
    cursor: pointer;
    transition: all 0.12s;
    flex-shrink: 0;
  }

  .ev-booking-month-btn:hover {
    border-color: var(--ev-ink);
    color: var(--ev-ink);
    background: var(--ev-surface);
  }

  .ev-booking-month-label {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ev-ink);
    letter-spacing: -0.02em;
  }

  .ev-booking-slots-divider {
    margin: 1.25rem 0 1rem;
    height: 1px;
    background: var(--ev-border-light);
  }

  .ev-booking-section--nudge {
    animation: ev-booking-nudge 0.7s ease;
  }

  @keyframes ev-booking-nudge {
    0%   { outline: 2px solid transparent; }
    20%  { outline: 2px solid oklch(0.55 0.22 260 / 0.6); background: oklch(0.96 0.02 265); }
    80%  { outline: 2px solid oklch(0.55 0.22 260 / 0.3); }
    100% { outline: 2px solid transparent; background: oklch(0.975 0.008 265); }
  }

  @keyframes ev-cal-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* ── Animations ──────────────────────────────────────────────── */

  @keyframes ev-fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
  }

  /* ── Appointments Calendar ───────────────────────────────────── */

  :root {
    --appt-confirmed-color: oklch(0.42 0.18 155);
    --appt-confirmed-bg:    oklch(0.93 0.07 155);
    --appt-pending-color:   oklch(0.48 0.16 60);
    --appt-pending-bg:      oklch(0.94 0.08 75);
    --appt-cancelled-color: oklch(0.48 0 0);
    --appt-cancelled-bg:    oklch(0.92 0 0);
  }

  .ev-appt-page-icon {
    width: 2rem; height: 2rem; border-radius: 0.5rem;
    background: var(--ev-primary-tint); border: 1px solid var(--ev-primary-border);
    display: flex; align-items: center; justify-content: center;
    color: var(--ev-primary); flex-shrink: 0;
  }

  /* Controls bar */
  .ev-appt-controls {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem;
  }

  /* View switcher */
  .ev-appt-view-switcher {
    display: flex; align-items: center; gap: 0.1875rem;
    background: var(--ev-surface); border: 1px solid var(--ev-border);
    border-radius: 0.5rem; padding: 0.1875rem;
  }
  .ev-appt-view-tab {
    padding: 0.3125rem 0.75rem; border-radius: 0.375rem;
    font-size: 0.8125rem; font-weight: 500; color: var(--ev-ink-fg-muted);
    text-decoration: none; transition: all 0.12s;
  }
  .ev-appt-view-tab:hover { color: var(--ev-ink); background: var(--ev-surface-card); }
  .ev-appt-view-tab--active {
    background: var(--ev-surface-card); color: var(--ev-ink); font-weight: 600;
    box-shadow: 0 1px 3px oklch(0.15 0.02 260 / 0.10);
  }

  /* Date nav */
  .ev-appt-date-nav { display: flex; align-items: center; gap: 0.5rem; }
  .ev-appt-nav-btn {
    width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; border: 1px solid var(--ev-border); background: var(--ev-surface-card);
    color: var(--ev-ink-fg-muted); text-decoration: none; transition: all 0.12s;
  }
  .ev-appt-nav-btn:hover { border-color: var(--ev-ink); color: var(--ev-ink); }
  .ev-appt-period-label {
    font-size: 0.9375rem; font-weight: 700; color: var(--ev-ink);
    min-width: 13rem; text-align: center; letter-spacing: -0.01em;
  }
  .ev-appt-today-btn { font-size: 0.8125rem; padding: 0.375rem 0.75rem; }

  /* Filters */
  .ev-appt-filters { display: flex; align-items: center; gap: 0.5rem; }
  .ev-appt-filter-select { font-size: 0.8125rem; padding: 0.375rem 0.625rem; min-width: 9rem; }

  /* Mobile: stack controls vertically */
  @media (max-width: 639px) {
    .ev-appt-controls {
      flex-direction: column;
      align-items: stretch;
      gap: 0.5rem;
    }

    .ev-appt-view-switcher {
      order: -1;
      align-self: flex-start;
    }

    .ev-appt-date-nav {
      justify-content: space-between;
    }

    .ev-appt-filters {
      flex-wrap: wrap;
      gap: 0.375rem;
    }

    .ev-appt-filter-select {
      flex: 1;
      min-width: 0;
      font-size: 1rem;
    }
  }

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

  /* Mini month grid */
  .ev-mobile-month-grid {
    padding: 0.5rem 1rem 0.75rem;
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .ev-mobile-month-dow-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--ev-ink-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.375rem;
  }

  .ev-mobile-month-week-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
  }

  .ev-mobile-month-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem 0;
    text-decoration: none;
    color: var(--ev-ink);
  }

  .ev-mobile-month-day--other {
    color: var(--ev-ink-fg-muted);
    opacity: 0.4;
  }

  .ev-mobile-month-day-num {
    font-size: 0.8125rem;
    font-weight: 500;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .ev-mobile-month-day--today .ev-mobile-month-day-num {
    background: var(--ev-primary);
    color: white;
    font-weight: 700;
  }

  .ev-mobile-month-day--selected .ev-mobile-month-day-num {
    border: 2px solid var(--ev-primary);
  }

  .ev-mobile-month-day--today.ev-mobile-month-day--selected .ev-mobile-month-day-num {
    border: none;
    box-shadow: 0 0 0 2px var(--ev-primary-tint);
  }

  .ev-mobile-month-dot {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--ev-primary);
  }

  /* Week day strip */
  .ev-mobile-week-strip {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .ev-mobile-week-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem 0.375rem;
    text-decoration: none;
    color: var(--ev-ink);
    border-radius: 0.5rem;
  }

  .ev-mobile-week-day-name {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--ev-ink-fg-muted);
  }

  .ev-mobile-week-day-num {
    font-size: 0.875rem;
    font-weight: 500;
    width: 1.75rem;
    height: 1.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
  }

  .ev-mobile-week-day--today .ev-mobile-week-day-num {
    background: var(--ev-primary);
    color: white;
    font-weight: 700;
  }

  .ev-mobile-week-day--today .ev-mobile-week-day-name {
    color: var(--ev-primary);
  }

  .ev-mobile-week-day--selected {
    background: var(--ev-primary-tint);
  }

  /* Agenda list (shared by all mobile views) */
  .ev-mobile-agenda {
    background: var(--ev-surface-card);
    border: 1px solid var(--ev-border);
    border-radius: 0.75rem;
    padding: 0.5rem 0;
    overflow: hidden;
  }

  .ev-mobile-agenda-day-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ev-primary);
  }

  .ev-mobile-agenda-today-badge {
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
    background: var(--ev-primary);
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
  }

  .ev-mobile-agenda-count {
    font-weight: 500;
    color: var(--ev-ink-fg-muted);
    margin-left: auto;
  }

  .ev-mobile-agenda-empty {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    color: var(--ev-ink-fg-muted);
    text-align: center;
  }

  /* Agenda card */
  .ev-mobile-agenda-card {
    margin: 0.25rem 0.75rem;
    padding: 0.75rem;
    background: var(--ev-surface);
    border-radius: 0.5rem;
    border-left: 3px solid var(--ev-border);
    cursor: pointer;
    transition: background-color 0.12s ease;
  }

  .ev-mobile-agenda-card:active {
    background: var(--ev-surface-subtle);
  }

  .ev-mobile-agenda-card-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .ev-mobile-agenda-card-info {
    flex: 1;
    min-width: 0;
  }

  .ev-mobile-agenda-card-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ev-ink);
    line-height: 1.3;
  }

  .ev-mobile-agenda-card-meta {
    font-size: 0.75rem;
    color: var(--ev-ink-fg-muted);
    margin-top: 0.125rem;
    line-height: 1.4;
  }

  .ev-mobile-agenda-card-notes {
    font-size: 0.75rem;
    color: var(--ev-ink-fg);
    font-style: italic;
    margin-top: 0.25rem;
  }

  .ev-mobile-agenda-card-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.375rem;
    flex-shrink: 0;
  }

  .ev-mobile-agenda-confirm {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ev-primary);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .ev-mobile-agenda-confirm:hover {
    text-decoration: underline;
  }

  /* ── Month View ──────────────────────────────────────────────── */
  .ev-appt-month-card { overflow: hidden; }
  .ev-appt-month-header-row {
    display: grid; grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--ev-border);
  }
  .ev-appt-month-dow {
    padding: 0.5rem 0; text-align: center;
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ev-ink-fg-muted);
  }
  .ev-appt-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
  .ev-appt-month-cell {
    min-height: 6rem; padding: 0.375rem 0.5rem;
    border-right: 1px solid var(--ev-border-light);
    border-bottom: 1px solid var(--ev-border-light);
    text-decoration: none; transition: background 0.1s; display: block;
  }
  .ev-appt-month-cell:nth-child(7n) { border-right: none; }
  .ev-appt-month-cell:hover { background: var(--ev-surface-subtle); }
  .ev-appt-month-cell--today { background: oklch(0.97 0.02 265); }
  .ev-appt-month-cell--today:hover { background: oklch(0.95 0.03 265); }
  .ev-appt-month-cell--other-month { background: oklch(0.985 0 0); }
  .ev-appt-month-day-num {
    display: block; font-size: 0.8125rem; font-weight: 600;
    color: var(--ev-ink-fg-muted); margin-bottom: 0.25rem;
  }
  .ev-appt-month-cell--today .ev-appt-month-day-num { color: var(--ev-primary); font-weight: 700; }
  .ev-appt-month-cell--other-month .ev-appt-month-day-num { opacity: 0.4; }
  .ev-appt-month-pills { display: flex; flex-direction: column; gap: 2px; }
  .ev-appt-month-overflow {
    font-size: 0.6875rem; color: var(--ev-ink-fg-muted); font-weight: 500; padding: 1px 4px;
  }

  /* Appointment pills (month) */
  .ev-appt-pill {
    display: block; width: 100%; text-align: left; border: none; cursor: pointer;
    padding: 2px 5px; border-radius: 3px; font-size: 0.6875rem; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border-left: 2.5px solid transparent; transition: opacity 0.1s; line-height: 1.4;
  }
  .ev-appt-pill:hover { opacity: 0.8; }
  .ev-appt-pill--confirmed {
    background: var(--appt-confirmed-bg); color: oklch(0.30 0.10 155);
    border-left-color: var(--appt-confirmed-color);
  }
  .ev-appt-pill--pending {
    background: var(--appt-pending-bg); color: oklch(0.35 0.10 60);
    border-left-color: var(--appt-pending-color);
  }
  .ev-appt-pill--cancelled {
    background: var(--appt-cancelled-bg); color: var(--appt-cancelled-color);
    border-left-color: var(--appt-cancelled-color); text-decoration: line-through; opacity: 0.6;
  }

  /* Live-update highlight animation */
  @keyframes booking-highlight {
    0%   { box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.5); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
  }
  .booking-highlighted {
    animation: booking-highlight 2s ease-out;
    border-radius: inherit;
  }

  /* ── Week View ───────────────────────────────────────────────── */
  .ev-appt-week-card { overflow: hidden; }
  .ev-appt-week-header {
    display: grid; grid-template-columns: 3.5rem repeat(7, 1fr);
    border-bottom: 2px solid var(--ev-border);
  }
  .ev-appt-time-gutter { border-right: 1px solid var(--ev-border-light); }
  .ev-appt-week-col-header {
    padding: 0.5rem 0; text-align: center; text-decoration: none;
    border-right: 1px solid var(--ev-border-light); transition: background 0.1s;
  }
  .ev-appt-week-col-header:last-child { border-right: none; }
  .ev-appt-week-col-header:hover { background: var(--ev-surface-subtle); }
  .ev-appt-week-col-header--today { background: oklch(0.97 0.02 265); }
  .ev-appt-week-dow {
    display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ev-ink-fg-muted);
  }
  .ev-appt-week-date-num {
    display: block; font-size: 1rem; font-weight: 700; color: var(--ev-ink); line-height: 1.2;
  }
  .ev-appt-week-col-header--today .ev-appt-week-date-num { color: var(--ev-primary); }

  .ev-appt-week-scroll { overflow-y: auto; max-height: calc(100vh - 240px); }
  .ev-appt-week-grid {
    display: grid; grid-template-columns: 3.5rem repeat(7, 1fr); position: relative;
  }
  .ev-appt-time-gutter-col { position: relative; border-right: 1px solid var(--ev-border-light); }
  .ev-appt-time-label {
    position: absolute; right: 0.375rem; font-size: 0.625rem;
    color: var(--ev-ink-fg-muted); transform: translateY(-50%); white-space: nowrap;
    font-weight: 500; letter-spacing: 0.02em;
  }
  .ev-appt-week-day-col {
    position: relative; border-right: 1px solid var(--ev-border-light);
  }
  .ev-appt-week-day-col:last-child { border-right: none; }
  .ev-appt-week-day-col--today { background: oklch(0.98 0.01 265); }
  .ev-appt-hour-line {
    position: absolute; left: 0; right: 0; height: 1px;
    background: var(--ev-border-light); pointer-events: none;
  }

  /* Appointment blocks (week + day) */
  .ev-appt-block {
    position: absolute; border: none; cursor: pointer; text-align: left;
    border-left: 3px solid transparent; border-radius: 5px; padding: 4px 6px;
    overflow: hidden; transition: opacity 0.1s, box-shadow 0.1s;
    box-shadow: 0 1px 3px oklch(0.15 0.03 260 / 0.08);
  }
  .ev-appt-block:hover {
    opacity: 0.92; box-shadow: 0 3px 8px oklch(0.15 0.03 260 / 0.14);
  }
  .ev-appt-block--confirmed {
    background: #dcfce7; border-left-color: #16a34a; color: #14532d;
  }
  .ev-appt-block--pending {
    background: #fef9c3; border-left-color: #ca8a04; color: #713f12;
  }
  .ev-appt-block--cancelled {
    background: #f3f4f6; border-left-color: #9ca3af; color: #6b7280; opacity: 0.6;
  }
  .ev-appt-block-time {
    display: block; font-size: 0.625rem; font-weight: 700; letter-spacing: 0.02em;
    color: inherit; opacity: 0.7;
  }
  .ev-appt-block-client {
    display: block; font-size: 0.75rem; font-weight: 700; color: inherit;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ev-appt-block-service {
    display: block; font-size: 0.6875rem; color: inherit; opacity: 0.75;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ev-appt-block--confirmed { color: var(--appt-confirmed-color); }
  .ev-appt-block--pending   { color: var(--appt-pending-color); }
  .ev-appt-block--cancelled { color: var(--appt-cancelled-color); }

  /* ── Day View ────────────────────────────────────────────────── */
  .ev-appt-day-card { overflow: hidden; }
  .ev-appt-day-header {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: 1rem 1.375rem; border-bottom: 1px solid var(--ev-border-light);
  }
  .ev-appt-day-title { font-size: 1rem; font-weight: 700; color: var(--ev-ink); letter-spacing: -0.01em; }
  .ev-appt-day-scroll { overflow-y: auto; max-height: calc(100vh - 240px); }
  .ev-appt-day-grid {
    display: grid; grid-template-columns: 3.5rem 1fr; position: relative;
  }
  .ev-appt-day-col { position: relative; }
  .ev-appt-day-block {
    position: absolute; border-left: 3px solid transparent; border-radius: 6px;
    padding: 8px 10px; box-shadow: 0 1px 4px oklch(0.15 0.03 260 / 0.10);
    display: flex; flex-direction: column; gap: 2px; overflow: hidden;
    transition: box-shadow 0.1s;
  }
  .ev-appt-day-block:hover { box-shadow: 0 3px 10px oklch(0.15 0.03 260 / 0.16); }
  .ev-appt-day-block.ev-appt-block--confirmed {
    background: #dcfce7; border-left-color: #16a34a; color: #14532d;
  }
  .ev-appt-day-block.ev-appt-block--pending {
    background: #fef9c3; border-left-color: #ca8a04; color: #713f12;
  }
  .ev-appt-day-block.ev-appt-block--cancelled {
    background: #f3f4f6; border-left-color: #9ca3af; color: #6b7280; opacity: 0.6;
  }
  .ev-appt-day-block-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
  .ev-appt-day-open-btn {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: var(--ev-ink-fg-muted); padding: 2px; border-radius: 4px;
    display: flex; align-items: center; justify-content: center; transition: color 0.1s;
  }
  .ev-appt-day-open-btn:hover { color: var(--ev-ink); }
  .ev-appt-day-block.ev-appt-block--confirmed { color: var(--appt-confirmed-color); }
  .ev-appt-day-block.ev-appt-block--pending   { color: var(--appt-pending-color); }
  .ev-appt-day-block.ev-appt-block--cancelled { color: var(--appt-cancelled-color); }
  .ev-appt-day-client { font-size: 0.9375rem; font-weight: 700; color: inherit; }
  .ev-appt-day-service { font-size: 0.8125rem; color: inherit; opacity: 0.8; }
  .ev-appt-day-notes { font-size: 0.75rem; color: var(--ev-ink-fg-muted); font-style: italic; }
  .ev-appt-day-actions { display: flex; gap: 0.375rem; margin-top: auto; padding-top: 0.375rem; }

  /* ── Appointment Drawer ──────────────────────────────────────── */
  .ev-drawer-overlay {
    position: fixed; inset: 0; z-index: 50; pointer-events: none;
    /* Closed drawers must leave the tab order and the accessibility tree, not
       just go transparent. The delay lets the close transition finish first. */
    visibility: hidden; transition: visibility 0s linear 0.3s;
  }
  .ev-drawer-overlay.is-open {
    pointer-events: auto; visibility: visible; transition-delay: 0s;
  }
  .ev-drawer-backdrop {
    position: absolute; inset: 0;
    background: oklch(0.15 0.02 260 / 0); pointer-events: none;
    transition: background 0.3s ease;
  }
  .ev-drawer-overlay.is-open .ev-drawer-backdrop {
    background: oklch(0.15 0.02 260 / 0.3); pointer-events: auto;
  }
  .ev-drawer-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 26rem; max-width: 100%;
    background: var(--ev-surface-card); border-left: 1px solid var(--ev-border);
    box-shadow: -4px 0 24px oklch(0.15 0.03 260 / 0.12);
    transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex; flex-direction: column;
  }
  .ev-drawer-overlay.is-open .ev-drawer-panel { transform: translateX(0); }

  .ev-drawer-content { display: flex; flex-direction: column; height: 100%; }
  .ev-drawer-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: 1.25rem 1.375rem; border-bottom: 1px solid var(--ev-border-light); flex-shrink: 0;
  }
  .ev-drawer-title { font-size: 1rem; font-weight: 700; color: var(--ev-ink); letter-spacing: -0.01em; }
  .ev-drawer-close-btn {
    width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--ev-border);
    background: var(--ev-surface); display: flex; align-items: center; justify-content: center;
    color: var(--ev-ink-fg-muted); cursor: pointer; transition: all 0.1s; flex-shrink: 0;
  }
  .ev-drawer-close-btn:hover { border-color: var(--ev-ink); color: var(--ev-ink); }
  .ev-drawer-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.375rem; }
  /* For bodies whose content brings its own padding -- a divided list wants to
     run edge to edge so the rules meet the panel walls. */
  .ev-drawer-body--flush { padding: 0; }
  .ev-drawer-footer {
    padding: 1rem 1.375rem; border-top: 1px solid var(--ev-border-light);
    display: flex; flex-direction: column; gap: 0.5rem; flex-shrink: 0;
  }
  .ev-drawer-footer--row { flex-direction: row; justify-content: flex-end; gap: 0.75rem; }
  /* Button group in a footer that also carries content above it, e.g. a total
     row. This 0.5rem plus the footer's own 0.5rem gap gives the buttons the
     1rem of separation the cart drawer had before it moved onto this pattern;
     the buttons stay 0.5rem apart from each other. */
  .ev-drawer-footer-actions {
    display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem;
  }

  /* Centered variant: a confirm dialog rather than an edge drawer. The panel
     leaves the absolutely-positioned flow so the overlay can flex-center it,
     and the gap around it is the panel's margin -- overlay padding would inset
     the backdrop too and leave an unshaded frame. */
  .ev-drawer-overlay--centered {
    display: flex; align-items: center; justify-content: center;
  }
  .ev-drawer-overlay--centered .ev-drawer-panel {
    position: relative; inset: auto; margin: 1rem;
    width: 100%; max-width: 28rem; height: auto; max-height: calc(100% - 2rem);
    border: 1px solid var(--ev-border); border-radius: 0.75rem;
    box-shadow: 0 12px 32px oklch(0.15 0.03 260 / 0.18);
    opacity: 0; transform: translateY(12px) scale(0.98);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .ev-drawer-overlay--centered.is-open .ev-drawer-panel {
    opacity: 1; transform: translateY(0) scale(1);
  }

  /* ── Portal My Appointments ──────────────────────────────────── */
  @keyframes ev-slide-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes ev-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .ev-portal-appt-page {
    animation: ev-fade-in 0.3s ease;
  }

  .ev-past-row { opacity: 0.65; transition: opacity 0.15s; }
  .ev-past-row:hover, .ev-past-row:focus-within { opacity: 1; }

  /* ── Task 14: portal appointments section headings + history rows ── */

  .ev-section-heading {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
  }

  .ev-section-heading-label {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ev-ink-fg-muted);
    margin: 0;
  }

  .ev-section-heading-rule {
    height: 1px;
    flex: 1;
    background: var(--ev-border-light);
  }

  .ev-section-heading-meta {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ev-ink-fg-muted);
  }

  .ev-appt-past-date {
    flex-shrink: 0;
    width: 2.75rem;
    margin-right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .ev-appt-past-month {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ev-ink-fg-muted);
  }

  .ev-appt-past-day {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--ev-ink);
  }

  .ev-appt-past-year {
    font-size: 0.5625rem;
    color: var(--ev-ink-fg-muted);
  }

  .ev-appt-card-ticket {
    display: flex; align-items: stretch;
    background: var(--ev-surface-card); border-radius: 0.875rem;
    border: 1px solid var(--ev-border-light);
    box-shadow: 0 1px 4px oklch(0.15 0.03 260 / 0.06), 0 4px 16px -4px oklch(0.15 0.03 260 / 0.08);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    animation: ev-slide-up 0.35s ease both;
  }
  .ev-appt-card-ticket:hover {
    box-shadow: 0 2px 8px oklch(0.15 0.03 260 / 0.08), 0 8px 24px -4px oklch(0.15 0.03 260 / 0.12);
    transform: translateY(-1px);
  }

  .ev-appt-ticket-date {
    flex-shrink: 0; width: 5rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 1.25rem 0.5rem; gap: 0.125rem;
    position: relative;
  }
  .ev-appt-ticket-date::after {
    content: '';
    position: absolute; right: 0; top: 1rem; bottom: 1rem;
    width: 1px;
    background: repeating-linear-gradient(to bottom, var(--ev-border-light) 0, var(--ev-border-light) 4px, transparent 4px, transparent 8px);
  }
  .ev-appt-ticket-month {
    font-size: 0.625rem; font-weight: 800; letter-spacing: 0.10em;
    text-transform: uppercase;
  }
  .ev-appt-ticket-day {
    font-size: 2rem; font-weight: 900; line-height: 1; letter-spacing: -0.04em;
  }
  .ev-appt-ticket-weekday {
    font-size: 0.625rem; font-weight: 500; letter-spacing: 0.06em;
    text-transform: uppercase; opacity: 0.7;
  }
  .ev-appt-ticket-body {
    flex: 1; min-width: 0; padding: 1rem 1.25rem;
    display: flex; flex-direction: column; justify-content: center; gap: 0.375rem;
  }
  .ev-appt-ticket-title {
    font-size: 1rem; font-weight: 700; color: var(--ev-ink); letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  }
  .ev-appt-ticket-meta {
    display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;
    font-size: 0.8125rem; color: var(--ev-ink-fg-muted);
  }
  .ev-appt-ticket-meta-item {
    display: flex; align-items: center; gap: 0.3rem;
  }
  .ev-appt-ticket-actions {
    flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end;
    justify-content: center; gap: 0.375rem; padding: 1rem 1.25rem 1rem 0.5rem;
  }

  /* Status color schemes for tickets */
  .ev-appt-ticket--confirmed .ev-appt-ticket-date {
    background: oklch(0.97 0.05 155); color: oklch(0.40 0.18 155);
  }
  .ev-appt-ticket--pending .ev-appt-ticket-date {
    background: oklch(0.97 0.06 60); color: oklch(0.50 0.16 60);
  }
  .ev-appt-ticket--cancelled .ev-appt-ticket-date {
    background: oklch(0.96 0.02 20); color: oklch(0.55 0.08 20);
  }
  .ev-appt-ticket--confirmed { border-left: 3px solid oklch(0.52 0.18 155); }
  .ev-appt-ticket--pending   { border-left: 3px solid oklch(0.60 0.16 60); }
  .ev-appt-ticket--cancelled { border-left: 3px solid oklch(0.70 0.04 20); opacity: 0.75; }

  /* Booking confirmation ticket */
  .ev-booking-confirm-wrap {
    max-width: 26rem; margin: 0 auto;
    animation: ev-slide-up 0.4s ease;
  }
  .ev-booking-confirm-card {
    background: white; border-radius: 1.25rem;
    box-shadow: 0 4px 32px -4px oklch(0.15 0.03 260 / 0.14), 0 1px 3px oklch(0.15 0.03 260 / 0.06);
    overflow: hidden;
  }
  .ev-booking-confirm-hero {
    padding: 2rem 1.5rem 1.75rem; text-align: center; position: relative;
  }
  .ev-booking-confirm-icon {
    width: 4.5rem; height: 4.5rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
  }
  .ev-booking-confirm-title {
    font-size: 1.375rem; font-weight: 800; color: var(--ev-ink);
    letter-spacing: -0.025em; margin: 0;
  }
  .ev-booking-confirm-ref {
    font-size: 0.75rem; color: var(--ev-ink-fg-muted);
    margin: 0.375rem 0 0; font-family: ui-monospace, monospace; letter-spacing: 0.05em;
  }
  .ev-booking-confirm-perforation {
    display: flex; align-items: center; margin: 0 -1px;
  }
  .ev-booking-confirm-notch {
    width: 1.25rem; height: 2.5rem; background: #F2F2F0; flex-shrink: 0;
  }
  .ev-booking-confirm-notch--left  { border-radius: 0 1.25rem 1.25rem 0; }
  .ev-booking-confirm-notch--right { border-radius: 1.25rem 0 0 1.25rem; }
  .ev-booking-confirm-dash {
    flex: 1; border-top: 2px dashed var(--ev-border-light);
  }
  .ev-booking-confirm-date-hero {
    padding: 1.25rem 1.5rem; text-align: center; border-bottom: 1px solid var(--ev-border-light);
  }
  .ev-booking-confirm-date-label {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em;
    color: var(--ev-ink-fg-muted); margin-bottom: 0.25rem;
  }
  .ev-booking-confirm-date-big {
    font-size: 1.625rem; font-weight: 900; color: var(--ev-ink);
    letter-spacing: -0.03em; line-height: 1.15;
  }
  .ev-booking-confirm-time {
    font-size: 1rem; font-weight: 600; margin-top: 0.25rem;
  }
  .ev-booking-confirm-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.875rem 1.5rem; border-bottom: 1px solid var(--ev-border-light);
  }
  .ev-booking-confirm-row:last-of-type { border-bottom: none; }
  .ev-booking-confirm-label {
    font-size: 0.8125rem; color: var(--ev-ink-fg-muted);
  }
  .ev-booking-confirm-value {
    font-size: 0.875rem; font-weight: 600; color: var(--ev-ink); text-align: right;
  }
  .ev-booking-confirm-actions {
    padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem;
    border-top: 1px solid var(--ev-border-light);
  }
  .ev-booking-confirm-btn-cancel {
    display: block; width: 100%; padding: 0.75rem;
    background: transparent; border: 1.5px solid var(--ev-danger); border-radius: 0.625rem;
    color: var(--ev-danger); font-size: 0.875rem; font-weight: 500;
    cursor: pointer; text-align: center; transition: background 0.15s;
  }
  .ev-booking-confirm-btn-cancel:hover { background: oklch(0.97 0.02 20); }
  .ev-booking-confirm-btn-secondary {
    display: block; padding: 0.75rem; text-align: center; text-decoration: none;
    background: var(--ev-surface); border-radius: 0.625rem;
    color: var(--ev-ink-fg-muted); font-size: 0.875rem; font-weight: 500;
    transition: background 0.15s;
  }
  .ev-booking-confirm-btn-secondary:hover { background: var(--ev-border-light); color: var(--ev-ink); }
}

/* ── Portal Dashboard Additions ──────────────────────────────
   Classes below support the portal dashboard view and are
   additive to the existing portal section above.
   ─────────────────────────────────────────────────────────── */

.ev-portal-content {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.ev-notice-body {
  flex: 1;
  min-width: 0;
}

.ev-notice-heading {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
}

.ev-notice-sub {
  font-size: 0.8125rem;
  color: var(--ev-ink-fg-muted);
  margin-top: 0.125rem;
  line-height: 1.5;
}

.ev-notice-link {
  color: var(--ev-primary);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.12s ease;
}

.ev-notice-link:hover {
  color: var(--ev-primary-hover);
}

.ev-stat-number--compact {
  font-size: 1.125rem;
  letter-spacing: -0.015em;
}

.ev-stat-number--muted {
  color: var(--ev-ink-fg-muted);
}

.ev-stat-number--danger {
  color: var(--ev-danger);
}

.ev-list-row-main {
  flex: 1;
  min-width: 0;
  margin-right: 1rem;
}

.ev-list-row-end {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}

.ev-btn-sm {
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
}

.ev-appt-tickets {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.875rem 1.375rem;
}

.ev-workflow-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.75rem;
}

.ev-workflow-progress-wrap {
  margin-top: 0.5rem;
}

.ev-workflow-progress-wrap .ev-list-secondary {
  margin-top: 0.25rem;
}

/* ── Auth Pages ──────────────────────────────────────────────── */

.ev-auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: #FDFBF7;
  position: relative;
  overflow: hidden;
}

.ev-auth-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.ev-auth-bg-mesa {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 400px;
}

.ev-auth-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.ev-auth-container.ev-auth-container--wide {
  max-width: 52rem;
}

.ev-auth-container--wide .ev-auth-card {
  padding: 2rem;
}

.ev-auth-container--wide .ev-auth-card h2 {
  text-align: left;
}

.ev-auth-container--wide .ev-auth-card .ev-auth-subtitle {
  text-align: left;
}

@media (max-width: 767px) {
  .ev-auth-container.ev-auth-container--wide {
    max-width: 26rem;
  }
  .ev-auth-container--wide .ev-auth-card h2,
  .ev-auth-container--wide .ev-auth-card .ev-auth-subtitle {
    text-align: center;
  }
}

.ev-auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: opacity 0.2s;
}

.ev-auth-brand:hover {
  opacity: 0.85;
}

.ev-auth-logo {
  width: 3rem;
  height: 3rem;
  filter: drop-shadow(0 2px 8px oklch(0.46 0.28 270 / 0.15));
}

.ev-auth-wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: -0.03em;
  color: #161029;
}

.ev-auth-card {
  width: 100%;
  background: white;
  border-radius: 1rem;
  border: 1px solid oklch(0.92 0.006 260);
  box-shadow:
    0 1px 2px oklch(0 0 0 / 0.04),
    0 4px 16px oklch(0 0 0 / 0.04),
    0 12px 40px oklch(0.46 0.28 270 / 0.04);
  padding: 2.25rem 2rem;
}

@media (min-width: 640px) {
  .ev-auth-card {
    padding: 2.5rem;
  }
}

.ev-auth-card h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: #161029;
  text-align: center;
  margin: 0;
}

.ev-auth-card .ev-auth-subtitle {
  text-align: center;
  font-size: 0.9375rem;
  color: oklch(0.52 0 0);
  margin: 0.5rem 0 0;
  line-height: 1.5;
}

.ev-auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  font-size: 0.8125rem;
  color: oklch(0.58 0 0);
}

.ev-auth-divider::before,
.ev-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: oklch(0.92 0 0);
}

/* Auth form inputs */
.ev-auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ev-auth-field label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: oklch(0.35 0 0);
  letter-spacing: 0.01em;
}

.ev-auth-field input[type="text"],
.ev-auth-field input[type="email"],
.ev-auth-field input[type="password"] {
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  color: #161029;
  background: #FDFBF7;
  border: 1.5px solid oklch(0.88 0.006 260);
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ev-auth-field input:focus {
  border-color: oklch(0.55 0.22 260);
  box-shadow: 0 0 0 3px oklch(0.55 0.22 260 / 0.1);
  background: white;
}

.ev-auth-field input::placeholder {
  color: oklch(0.68 0 0);
}

.ev-auth-field .ev-auth-hint {
  font-size: 0.75rem;
  color: oklch(0.58 0 0);
  margin-top: 0.125rem;
}

/* Auth CTA button */
.ev-auth-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0.6875rem 1.5rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: white;
  background: oklch(0.46 0.28 270);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 1px 3px oklch(0.46 0.28 270 / 0.25);
}

.ev-auth-submit:hover {
  background: oklch(0.41 0.28 270);
  box-shadow: 0 2px 8px oklch(0.46 0.28 270 / 0.3);
}

.ev-auth-submit:active {
  transform: scale(0.985);
}

/* Checkbox row */
.ev-auth-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ev-auth-checkbox input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: oklch(0.46 0.28 270);
  border-radius: 0.25rem;
}

.ev-auth-checkbox label {
  font-size: 0.875rem;
  color: oklch(0.35 0 0);
}

/* Error box */
.ev-auth-errors {
  background: oklch(0.97 0.015 25);
  border: 1px solid oklch(0.90 0.04 25);
  border-radius: 0.5rem;
  padding: 0.875rem 1rem;
}

.ev-auth-errors h3 {
  font-size: 0.8125rem;
  font-weight: 600;
  color: oklch(0.45 0.15 25);
  margin: 0 0 0.375rem;
}

.ev-auth-errors ul {
  list-style: disc inside;
  margin: 0;
  padding: 0;
}

.ev-auth-errors li {
  font-size: 0.8125rem;
  color: oklch(0.50 0.12 25);
  line-height: 1.5;
}

/* Footer links */
.ev-auth-footer {
  text-align: center;
}

.ev-auth-footer a {
  font-size: 0.8125rem;
  color: oklch(0.50 0.18 270);
  text-decoration: none;
  transition: color 0.15s;
}

.ev-auth-footer a:hover {
  color: oklch(0.42 0.28 270);
}

/* Product choice cards (signup) */
.ev-auth-product-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1.5px solid oklch(0.90 0.006 260);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  background: white;
}

.ev-auth-product-card:hover {
  border-color: oklch(0.70 0.14 270);
  background: oklch(0.46 0.28 270 / 0.02);
}

.ev-auth-product-card:has(input:checked) {
  border-color: oklch(0.46 0.28 270);
  background: oklch(0.46 0.28 270 / 0.04);
}

.ev-auth-product-card input[type="radio"] {
  accent-color: oklch(0.46 0.28 270);
}

/* Inline link within auth card */
.ev-auth-link {
  font-size: 0.8125rem;
  color: oklch(0.50 0.18 270);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.ev-auth-link:hover {
  color: oklch(0.42 0.28 270);
}

/* Auth icon circle (used on verification/confirmation) */
.ev-auth-icon-circle {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  background: oklch(0.46 0.28 270 / 0.08);
}

.ev-auth-icon-circle svg {
  width: 1.75rem;
  height: 1.75rem;
  stroke: oklch(0.46 0.28 270);
}

/* Auth info box (used on verification) */
.ev-auth-info-box {
  background: #FDFBF7;
  border-radius: 0.5rem;
  padding: 1rem;
  border: 1px solid oklch(0.92 0.006 260);
}

.ev-auth-info-box strong {
  font-size: 0.8125rem;
  color: oklch(0.30 0 0);
}

.ev-auth-info-box ol {
  list-style: decimal inside;
  margin: 0.375rem 0 0;
  padding: 0;
}

.ev-auth-info-box li {
  font-size: 0.8125rem;
  color: oklch(0.45 0 0);
  line-height: 1.6;
}

/* Invite-only lockout */
.ev-auth-lockout {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.ev-auth-lockout h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  color: #161029;
  margin: 0;
}

.ev-auth-lockout p {
  font-size: 0.9375rem;
  color: oklch(0.52 0 0);
  line-height: 1.55;
  margin: 0;
}

.ev-auth-accent-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.6875rem 1.75rem;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: white;
  background: oklch(0.68 0.18 20);
  border: none;
  border-radius: 0.5rem;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  box-shadow: 0 1px 3px oklch(0.68 0.18 20 / 0.25);
}

.ev-auth-accent-btn:hover {
  background: oklch(0.62 0.18 20);
}

.ev-auth-accent-btn:active {
  transform: scale(0.985);
}

/* Task 21 — the two literal colors of the Desert Labs mark. These are fixed
   brand values, not theme tokens: the logo must render identically wherever it
   appears, so they deliberately do not follow --ev-primary. Declared here so the
   inline SVG in devise/shared/_auth_wrapper can reference them instead of
   carrying raw hex (SVG presentation attributes do not resolve var(), so the
   wrapper applies them through style="fill: ...", not fill="..."). */
:root {
  --ev-brand-sun: #ea7c4d;
  --ev-brand-indigo: #4f46e5;
}

/* Task 21 — a pickable option row (2FA "choose another way to verify"). Three
   copies of the same 200-character inline style, one of which was a <button>
   needing the extra resets. */
.ev-auth-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--ev-border);
  border-radius: 0.5rem;
  background: none;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.ev-auth-option:hover {
  border-color: var(--ev-primary-border);
  background: var(--ev-primary-tint);
}

/* .ev-auth-card .ev-auth-subtitle centres itself, which is right for a screen
   subtitle and wrong for the description line of a left-aligned option row. */
.ev-auth-option .ev-auth-subtitle {
  text-align: left;
}

/* Task 21 — secondary auth CTA. Same geometry as .ev-auth-submit, quiet fill.
   Replaces the inline background/color/border/box-shadow overrides that were
   hung off .ev-auth-submit at the two "second choice" call sites. */
.ev-auth-submit--secondary {
  color: var(--ev-ink);
  background: white;
  border: 1.5px solid var(--ev-border);
  box-shadow: none;
}

.ev-auth-submit--secondary:hover {
  background: oklch(0.97 0.005 270);
  box-shadow: none;
}

/* Task 21 — unordered lists in an auth info box. The block already styled <ol>
   (numbered "what to do next" steps); the reasons list on confirmations/invalid
   is a <ul> and was carrying the same rules inline. */
.ev-auth-info-box ul {
  list-style: disc inside;
  margin: 0.375rem 0 0;
  padding: 0;
}

/* Task 21 — notices inside an auth card. The auth screens centre their body
   text, which leaves a multi-line notice ragged; notices read left-aligned
   everywhere else in the app, so pin that here instead of per-screen inline
   styles. */
.ev-auth-card .ev-notice {
  text-align: left;
}

/* Task 21 — promoted verbatim from the <style> block that lived inside
   app/views/users/onboarding/workspace_setup.html.erb, so the workspace step's
   CSS is auditable by bin/check_ui_drift like every other component. The
   .ev-ws-* classes layer entrance animation and the subdomain input group on
   top of the .ev-auth-* family; the view composes both (e.g. the subtitle
   carries .ev-auth-subtitle .ev-ws-subtitle) rather than restating auth rules. */
@keyframes ev-step-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes ev-step-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.ev-ws-progress-bar { display: flex; gap: 0.375rem; margin-bottom: 2rem; }

.ev-ws-progress-seg {
  flex: 1; height: 3px; border-radius: 2px;
  background: oklch(0.92 0 0);
  overflow: hidden;
}

.ev-ws-progress-seg--done { background: oklch(0.46 0.28 270); }

.ev-ws-progress-seg--active {
  background: oklch(0.92 0 0);
}

.ev-ws-progress-seg--active::after {
  content: '';
  display: block;
  width: 100%; height: 100%;
  background: oklch(0.46 0.28 270);
  border-radius: 2px;
  transform-origin: left;
  animation: ev-step-fill 0.6s ease-out forwards;
}

.ev-ws-step-label {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.ev-ws-step-badge {
  font-size: 0.6875rem; font-weight: 600;
  color: oklch(0.46 0.28 270);
  background: oklch(0.95 0.02 270);
  padding: 0.125rem 0.5rem;
  border-radius: 1rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.ev-ws-heading {
  animation: ev-step-fade-up 0.4s ease-out both;
}

.ev-ws-subtitle {
  animation: ev-step-fade-up 0.4s 0.08s ease-out both;
}

.ev-ws-form-body {
  animation: ev-step-fade-up 0.4s 0.16s ease-out both;
}

.ev-ws-url-group {
  display: flex; align-items: stretch;
  border: 1px solid oklch(0.87 0 0);
  border-radius: 0.5rem;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
  background: white;
}

.ev-ws-url-group:focus-within {
  border-color: oklch(0.55 0.22 260);
  box-shadow: 0 0 0 3px oklch(0.55 0.22 260 / 0.1);
}

.ev-ws-url-group input[type="text"] {
  flex: 1; min-width: 0;
  padding: 0.625rem 0.875rem;
  font-size: 0.9375rem;
  border: none; outline: none;
  background: transparent;
  color: oklch(0.25 0 0);
  font-weight: 500;
}

.ev-ws-url-group input[type="text"]::placeholder {
  color: oklch(0.68 0 0); font-weight: 400;
}

.ev-ws-url-suffix {
  display: flex; align-items: center;
  padding: 0 0.75rem;
  background: oklch(0.97 0.005 270);
  border-left: 1px solid oklch(0.92 0 0);
  font-size: 0.8125rem;
  color: oklch(0.5 0.02 270);
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: -0.01em;
  user-select: none;
}

.ev-ws-url-preview {
  display: flex; align-items: center; gap: 0.375rem;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  color: oklch(0.55 0 0);
}

.ev-ws-url-preview svg {
  width: 0.875rem; height: 0.875rem;
  color: oklch(0.6 0.08 155);
  flex-shrink: 0;
}

.ev-ws-icon-wrap {
  width: 3rem; height: 3rem;
  margin: 0 auto 0.75rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, oklch(0.95 0.03 270), oklch(0.92 0.05 270));
  display: flex; align-items: center; justify-content: center;
  animation: ev-step-fade-up 0.35s ease-out both;
}

.ev-ws-icon-wrap svg {
  width: 1.5rem; height: 1.5rem;
  color: oklch(0.46 0.28 270);
}

/* ── Conversation messages ───────────────────────────────────── */
/* Own/other is applied by the message-own Stimulus controller: a Turbo broadcast renders
   once for every subscriber, so the server cannot bake the viewer's side into the markup. */

.ev-msg {
  display: flex;
  align-items: flex-end;
  gap: 0.375rem;
  margin-top: 0.75rem;
}

.ev-msg--grouped {
  margin-top: 0.125rem;
}

.ev-msg--own {
  flex-direction: row-reverse;
}

.ev-msg-avatar-slot {
  width: 1.625rem;
  flex-shrink: 0;
}

.ev-msg-avatar {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: white;
  background: oklch(0.55 0.012 258);
}

.ev-msg--own .ev-msg-avatar {
  background: var(--ev-primary);
}

.ev-msg-col {
  max-width: 70%;
  display: flex;
  flex-direction: column;
}

.ev-msg--own .ev-msg-col {
  align-items: flex-end;
}

.ev-msg-bubble {
  padding: 0.4375rem 0.6875rem;
  line-height: 1.4;
  border-radius: 1rem;
  border-bottom-left-radius: 0.25rem;
  background: var(--ev-surface-raised);
  color: var(--ev-ink);
}

.ev-msg--own .ev-msg-bubble {
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 0.25rem;
}

.ev-msg-body {
  font-size: 0.8125rem;
  white-space: pre-wrap;
  margin: 0;
}

.ev-msg-attachments {
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ev-msg-attachment-link {
  font-size: 0.6875rem;
  color: var(--ev-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.ev-msg-meta {
  font-size: 0.5625rem;
  color: var(--ev-ink-fg-muted);
  margin-top: 0.0625rem;
  padding: 0 0.25rem;
}

/* Read receipts: staff always see them; everyone sees them on their own messages. */
.ev-msg-read {
  display: none;
}

.ev-msg-read--visible,
.ev-msg--own .ev-msg-read {
  display: inline;
}

.ev-msg-read-label {
  color: var(--ev-success);
}