/*
 * Ayva Design System - Centralized Theme Variables
 * Version: 1.1.0
 *
 * ╔═══════════════════════════════════════════════════════════════════════════╗
 * ║  ⚠️  MANDATORY: ALL STYLING MUST USE THESE VARIABLES  ⚠️                  ║
 * ║                                                                           ║
 * ║  NEVER hardcode colors, fonts, spacing, shadows, or any styling values.   ║
 * ║  If a variable doesn't exist, ADD IT HERE FIRST, then use it.             ║
 * ║                                                                           ║
 * ║  ❌ WRONG: color: #6366f1; background: rgba(255,255,255,0.1);             ║
 * ║  ✅ RIGHT: color: var(--accent-color); background: var(--bg-hover);       ║
 * ╚═══════════════════════════════════════════════════════════════════════════╝
 *
 * This file provides centralized control of all colors, spacing, and visual
 * properties across the entire application. To change the theme globally,
 * modify the values in this file.
 *
 * Usage: Import this file in your _Host.cshtml or app.css
 * Docs: See docs/UI_DESIGN.md for complete usage guidelines
 */

:root {
    /* ==========================================================================
       COLOR PALETTE - Primary Brand Colors
       ========================================================================== */

    /* Accent Colors - The primary interactive color scheme */
    --accent-color: #3b82f6;
    --accent-hover: #60a5fa;
    --accent-light: #93c5fd;
    --accent-dark: #2563eb;
    --accent-gradient: linear-gradient(135deg, #3b82f6, #06b6d4);
    --accent-gradient-hover: linear-gradient(135deg, #60a5fa, #22d3ee);

    /* Secondary accent for gradients and highlights */
    --secondary-accent: #06b6d4;
    --secondary-hover: #22d3ee;
    --accent-secondary: var(--secondary-accent);  /* Alias for backward compatibility */
    --accent-bg: rgba(59, 130, 246, 0.3);  /* Semi-transparent accent for active states */

    /* Secondary accent opacity variants */
    --secondary-accent-5: rgba(6, 182, 212, 0.05);
    --secondary-accent-10: rgba(6, 182, 212, 0.1);
    --secondary-accent-20: rgba(6, 182, 212, 0.2);
    --secondary-accent-30: rgba(6, 182, 212, 0.3);
    --secondary-accent-40: rgba(6, 182, 212, 0.4);
    --secondary-accent-50: rgba(6, 182, 212, 0.5);

    /* Primary color alias (deprecated - use --accent-color instead) */
    --primary-color: var(--accent-color);  /* Alias: prefer --accent-color */
    --primary-dark: var(--accent-dark);    /* Alias: prefer --accent-dark */

    /* ==========================================================================
       BACKGROUND COLORS
       ========================================================================== */

    /* Base backgrounds */
    --bg-base: #0f172a;  /* Slate-900 - matches MudBlazor Background */
    --bg-primary: rgba(15, 23, 42, 0.95);
    --bg-secondary: rgba(30, 41, 59, 0.8);
    --bg-tertiary: #1a1a2e;

    /* Card and surface backgrounds */
    --bg-card: rgba(51, 65, 85, 0.9);  /* Slightly lighter slate for better contrast */
    --bg-card-solid: #3d4f66;  /* Brighter slate for better visibility against dark background */
    --bg-hover: rgba(255, 255, 255, 0.1);
    --bg-active: rgba(59, 130, 246, 0.15);
    --bg-input: transparent;  /* Input field backgrounds - transparent to avoid dark artifacts */
    --bg-overlay-dark: #1F213A;  /* Dark overlay for sections */

    /* Glassmorphism backgrounds - Semantic names (preferred) */
    --glass-subtle: rgba(255, 255, 255, 0.15);   /* Subtle glass - barely visible */
    --glass-medium: rgba(255, 255, 255, 0.45);   /* Medium glass - readable overlay */
    --glass-strong: rgba(255, 255, 255, 0.75);    /* Strong glass - high contrast overlay */
    --glass-dark: rgba(1, 1, 1, 0.5);            /* Dark glass - headers/appbars */
    --glass-elevated: rgba(30, 41, 59, 0.6);     /* Elevated dark glass - cards */
    --glass-blur: blur(10px);                     /* Standard blur for glass effect */
    --glass-blur-strong: blur(16px);              /* Strong blur for sidebars */

    /* Legacy glass aliases (backward compatibility) */
    --glass-bg: rgba(1, 1, 1, 0.5);
    --glass-light: rgba(255, 255, 255, 0.3);

    /* Drawer/sidebar backgrounds */
    --bg-drawer: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --bg-drawer-header: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

    /* ==========================================================================
       BORDER COLORS
       ========================================================================== */

    --border-color: rgba(255, 255, 255, 0.1);
    --border-subtle: rgba(255, 255, 255, 0.05);  /* Subtle border - lighter than --border-color */
    --border-color-medium: rgba(255, 255, 255, 0.15);
    --border-color-strong: rgba(255, 255, 255, 0.2);
    --border-focus: rgba(59, 130, 246, 0.5);
    --border-accent: rgba(59, 130, 246, 0.3);

    /* ==========================================================================
       TEXT COLORS
       ========================================================================== */

    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --text-disabled: #475569;
    --text-inverse: #0f172a;

    /* ==========================================================================
       STATUS COLORS
       ========================================================================== */

    /* RGB variants for rgba() usage in inline styles */
    --primary-color-rgb: 59, 130, 246;
    --success-color-rgb: 16, 185, 129;
    --warning-color-rgb: 245, 158, 11;
    --error-color-rgb: 239, 68, 68;
    --info-color-rgb: 14, 165, 233;

    /* Success */
    --success-color: #10b981;
    --success-bg: rgba(16, 185, 129, 0.15);
    --success-border: rgba(16, 185, 129, 0.3);
    --success-text: #34d399;
    --success-color-light: rgba(16, 185, 129, 0.1);

    /* Warning */
    --warning-color: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.15);
    --warning-border: rgba(245, 158, 11, 0.3);
    --warning-text: #fbbf24;
    --warning-color-light: rgba(245, 158, 11, 0.1);

    /* Error */
    --error-color: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.15);
    --error-border: rgba(239, 68, 68, 0.3);
    --error-text: #f87171;
    --error-color-light: rgba(239, 68, 68, 0.1);

    /* Info */
    --info-color: #0ea5e9;
    --info-bg: rgba(14, 165, 233, 0.15);
    --info-border: rgba(14, 165, 233, 0.3);
    --info-text: #38bdf8;
    --info-color-light: rgba(14, 165, 233, 0.1);

    /* Dashboard-convention aliases — used by Ayva.Dashboard component CSS */
    --color-error: #ef4444;
    --color-error-rgb: 239,68,68;
    --color-warning: #f59e0b;
    --color-warning-rgb: 245,158,11;
    --color-success: #10b981;
    --color-overlay-light: rgba(255,255,255,0.02);   /* header/overlay micro-tint */
    --color-overlay-dark: rgba(255,255,255,0.3);     /* spinner border / strong overlay */

    /* RGB triple for the accent color — enables rgba(var(--accent-color-rgb), α) */
    --accent-color-rgb: 59,130,246;                  /* matches --accent-color: #3b82f6;
    --discord-color-5: rgba(88, 101, 242, 0.05);
    --discord-color-10: rgba(88, 101, 242, 0.1);
    --discord-bg: rgba(88, 101, 242, 0.15);
    --discord-color-20: rgba(88, 101, 242, 0.2);
    --discord-color-30: rgba(88, 101, 242, 0.3);

    /* Twilio brand color */
    --twilio-color: #F22F46;
    --twilio-bg: rgba(242, 47, 70, 0.15);

    /* Slack brand color */
    --slack-color: #4A154B;
    --slack-bg: rgba(74, 21, 75, 0.15);

    /* UISP/Ubiquiti brand color */
    --uisp-color: #0559C9;
    --uisp-bg: rgba(5, 89, 201, 0.15);

    /* Opacity variants for accent colors */
    --accent-color-2: rgba(59, 130, 246, 0.02);
    --accent-color-3: rgba(59, 130, 246, 0.03);
    --accent-color-4: rgba(59, 130, 246, 0.04);
    --accent-color-5: rgba(59, 130, 246, 0.05);   /* 5% opacity - very subtle highlights */
    --accent-color-6: rgba(59, 130, 246, 0.06);
    --accent-color-8: rgba(59, 130, 246, 0.08);
    --accent-color-10: rgba(59, 130, 246, 0.1);
    --accent-color-12: rgba(59, 130, 246, 0.12);
    --accent-color-15: rgba(59, 130, 246, 0.15);
    --accent-color-20: rgba(59, 130, 246, 0.2);
    --accent-color-25: rgba(59, 130, 246, 0.25);
    --accent-color-30: rgba(59, 130, 246, 0.3);
    --accent-color-40: rgba(59, 130, 246, 0.4);
    --accent-color-45: rgba(59, 130, 246, 0.45);
    --accent-color-50: rgba(59, 130, 246, 0.5);
    --accent-color-60: rgba(59, 130, 246, 0.6);
    --accent-color-65: rgba(59, 130, 246, 0.65);
    --accent-color-light: #93c5fd;

    /* Module Explorer Phase 4 - Recipe C / state halo / data transition (Task 1) */
    --glass-inset: var(--white-overlay-02);
    --shadow-inset-deep: var(--shadow-inset-light), inset 0 -1px 0 var(--black-overlay-25);

    /* Status alias bridge - convergence with spec section 5.8 names */
    --status-success-50: var(--success-color-50);
    --status-warning-50: rgba(245, 158, 11, 0.5);
    --status-danger-50:  var(--error-color-50);

    /* Hero halo glows - derived, no raw RGB */
    --state-loaded-glow:     0 0 12px var(--status-success-50);
    --state-quarantine-glow: 0 0 14px var(--status-warning-50);
    --state-failed-glow:     0 0 12px var(--status-danger-50);

    /* Data redraw transition (slower than --transition-smooth) */
    --transition-data: 0s;

    /* Opacity variants for success colors */
    --success-color-4: rgba(16, 185, 129, 0.04);
    --success-color-5: rgba(16, 185, 129, 0.05);
    --success-color-10: rgba(16, 185, 129, 0.1);
    --success-color-12: rgba(16, 185, 129, 0.12);
    --success-color-15: rgba(16, 185, 129, 0.15);
    --success-color-18: rgba(16, 185, 129, 0.18);
    --success-color-20: rgba(16, 185, 129, 0.2);
    --success-color-30: rgba(16, 185, 129, 0.3);
    --success-color-40: rgba(16, 185, 129, 0.4);
    --success-color-50: rgba(16, 185, 129, 0.5);

    /* Opacity variants for warning colors */
    --warning-color-5: rgba(245, 158, 11, 0.05);
    --warning-color-8: rgba(245, 158, 11, 0.08);
    --warning-color-10: rgba(245, 158, 11, 0.1);
    --warning-color-12: rgba(245, 158, 11, 0.12);
    --warning-color-15: rgba(245, 158, 11, 0.15);
    --warning-color-20: rgba(245, 158, 11, 0.2);
    --warning-color-25: rgba(245, 158, 11, 0.25);
    --warning-color-30: rgba(245, 158, 11, 0.3);
    --warning-color-40: rgba(245, 158, 11, 0.4);
    --warning-color-50: rgba(245, 158, 11, 0.5);

    /* Opacity variants for error colors */
    --error-color-4: rgba(239, 68, 68, 0.04);
    --error-color-5: rgba(239, 68, 68, 0.05);
    --error-color-6: rgba(239, 68, 68, 0.06);
    --error-color-8: rgba(239, 68, 68, 0.08);
    --error-color-10: rgba(239, 68, 68, 0.1);
    --error-color-12: rgba(239, 68, 68, 0.12);
    --error-color-15: rgba(239, 68, 68, 0.15);
    --error-color-20: rgba(239, 68, 68, 0.2);
    --error-color-30: rgba(239, 68, 68, 0.3);
    --error-color-40: rgba(239, 68, 68, 0.4);
    --error-color-50: rgba(239, 68, 68, 0.5);
    --error-color-60: rgba(239, 68, 68, 0.6);

    /* Opacity variants for info colors */
    --info-color-5: rgba(59, 130, 246, 0.05);
    --info-color-10: rgba(59, 130, 246, 0.1);
    --info-color-12: rgba(59, 130, 246, 0.12);
    --info-color-15: rgba(59, 130, 246, 0.15);
    --info-color-20: rgba(59, 130, 246, 0.2);
    --info-color-30: rgba(59, 130, 246, 0.3);
    --info-color-40: rgba(59, 130, 246, 0.4);

    /* Neutral/gray colors */
    --gray-neutral: #808080;
    --gray-light: #9ca3af;
    --gray-dark: #4b5563;

    /* ── Polymorph engine: channel colors ─────────────────────────────────
       Used by PolymorphPanel and ChannelMessage components to distinguish
       message sources in the live output stream. Previously hardcoded as hex
       literals across ~14 CSS files. */
    --channel-agent-color: #00d4ff;       /* agent stdout (cyan-blue) */
    --channel-user-color: #ce93d8;        /* user-injected messages (lavender) */
    --channel-orch-color: #ffaa00;        /* orchestrator guidance (amber) */
    --channel-sys-color: #bdbdbd;         /* system/internal (neutral grey) */

    /* ── Polymorph: auth badges ───────────────────────────────────────────
       Status indicators for the three Claude authentication modes. */
    --auth-sub-color: #fff176;            /* subscription (pro / yellow) */
    --auth-api-color: #4dd0e1;            /* API key (teal) */
    --auth-none-color: #ff4444;           /* no auth (red) */

    /* ── Polymorph: provider brand marks ──────────────────────────────────
       Reserved for provider-specific accents (gradients, glyph borders).
       Branding colors override theme-accent where vendor identity matters. */
    --brand-anthropic: #8b5cf6;           /* Claude purple */
    --brand-openai: #10a37f;              /* OpenAI green */
    --brand-gemini: #4285f4;              /* Google blue */
    --brand-copilot: #24292e;             /* GitHub near-black */
    --brand-ollama: #ff6b35;              /* Ollama orange */

    /* ── Polymorph: layout tokens ─────────────────────────────────────────
       Previously magic numbers in per-component CSS. */
    --polymorph-topbar-height: 220px;     /* reserved space for NOC hero bar */

    /* Table-specific */
    --bg-stripe: rgba(255, 255, 255, 0.02);
    --table-row-hover: var(--bg-hover);
    --table-header-bg: var(--bg-secondary);

    /* ==========================================================================
       DIALOG & MODAL BACKGROUNDS
       For consistent dark glassmorphism dialogs
       ========================================================================== */

    /* Dialog backgrounds - dark glassmorphism style */
    --dialog-bg: rgba(30, 41, 59, 0.98);
    --dialog-bg-solid: #1e293b;
    --dialog-bg-glass: rgba(30, 41, 59, 0.95);
    --dialog-backdrop: rgba(0, 0, 0, 0.7);
    --menu-backdrop: rgba(0, 0, 0, 0.12);
    --dialog-border: rgba(255, 255, 255, 0.1);
    --dialog-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(59, 130, 246, 0.1);
    --dialog-radius: var(--radius-3xl);

    /* State card backgrounds for dialogs (dark theme compatible) */
    --card-state-info-bg: rgba(59, 130, 246, 0.15);
    --card-state-info-border: rgba(59, 130, 246, 0.4);
    --card-state-info-text: #93c5fd;

    --card-state-success-bg: rgba(16, 185, 129, 0.15);
    --card-state-success-border: rgba(16, 185, 129, 0.4);
    --card-state-success-text: #6ee7b7;

    --card-state-warning-bg: rgba(245, 158, 11, 0.15);
    --card-state-warning-border: rgba(245, 158, 11, 0.4);
    --card-state-warning-text: #fcd34d;

    --card-state-error-bg: rgba(239, 68, 68, 0.15);
    --card-state-error-border: rgba(239, 68, 68, 0.4);
    --card-state-error-text: #fca5a5;

    /* Dialog text colors */
    --dialog-text-primary: var(--text-primary);
    --dialog-text-secondary: var(--text-secondary);
    --dialog-text-muted: var(--text-muted);

    /* Table in dialogs */
    --dialog-table-bg: var(--bg-secondary);
    --dialog-table-header-bg: rgba(59, 130, 246, 0.2);
    --dialog-table-row-hover: var(--bg-hover);
    --dialog-table-border: var(--border-color);

    /* Additional background variants */
    --bg-overlay: rgba(0, 0, 0, 0.2);
    --bg-elevated: rgba(255, 255, 255, 0.1);

    /* Additional text variants */
    --text-tertiary: rgba(255, 255, 255, 0.5);

    /* ==========================================================================
       SHADOWS
       ========================================================================== */

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 25px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 35px 60px rgba(0, 0, 0, 0.6);

    /* Glow effects */
    --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.2);
    --shadow-glow-strong: 0 0 40px rgba(59, 130, 246, 0.3);
    --shadow-accent: 0 8px 25px rgba(59, 130, 246, 0.3);
    --shadow-focus: 0 0 0 0.125rem rgba(59, 130, 246, 0.1);  /* Focus ring shadow */

    /* Inset shadows for depth effects */
    --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --shadow-inset-medium: inset 0 2px 4px rgba(0, 0, 0, 0.2);

    /* Glass card shadows */
    --glass-card-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --glass-card-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 20px rgba(59, 130, 246, 0.15);

    /* Glass paper shadows (MudPaper/layout overrides) */
    --glass-paper-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --glass-paper-shadow-hover: 0 8px 16px -2px rgba(0, 0, 0, 0.4), 0 4px 8px -2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 20px rgba(59, 130, 246, 0.1);
    --glass-elevated-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --glass-elevated-shadow-hover: 0 12px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 0 40px rgba(59, 130, 246, 0.15);
    --glass-dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(59, 130, 246, 0.1);
    --glass-dialog-shadow-inset: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(59, 130, 246, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --glass-appbar-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
    --glass-popover-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);

    /* Inset highlight variants */
    --shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.08);
    --shadow-inset-glow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --shadow-inset-glow-strong: inset 0 1px 0 rgba(255, 255, 255, 0.15);

    /* Inset top-edge gloss for filled glass buttons (hero CTAs etc.) */
    --inset-highlight-subtle: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    --inset-highlight-strong: inset 0 1px 0 rgba(255, 255, 255, 0.3);

    /* Glass-button border highlights */
    --border-glass-subtle: 1px solid rgba(255, 255, 255, 0.25);
    --border-glass-strong: 1px solid rgba(255, 255, 255, 0.4);

    /* Background overlay gradients */
    --bg-radial-accent: radial-gradient(ellipse at 20% 30%, rgba(59, 130, 246, 0.08) 0%, transparent 50%);
    --bg-radial-secondary: radial-gradient(ellipse at 80% 70%, rgba(6, 182, 212, 0.06) 0%, transparent 50%);
    --bg-radial-center: radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.03) 0%, transparent 70%);

    /* Decorative radial gradient for welcome cards etc. */
    --bg-radial-white-glow: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);

    /* Black overlay opacity variants */
    --black-overlay-04: rgba(0, 0, 0, 0.04);
    --black-overlay-05: rgba(0, 0, 0, 0.05);
    --black-overlay-06: rgba(0, 0, 0, 0.06);
    --black-overlay-10: rgba(0, 0, 0, 0.1);
    --black-overlay-12: rgba(0, 0, 0, 0.12);
    --black-overlay-15: rgba(0, 0, 0, 0.15);
    --black-overlay-20: rgba(0, 0, 0, 0.2);
    --black-overlay-25: rgba(0, 0, 0, 0.25);
    --black-overlay-30: rgba(0, 0, 0, 0.3);
    --black-overlay-40: rgba(0, 0, 0, 0.4);
    --black-overlay-50: rgba(0, 0, 0, 0.5);
    --black-overlay-60: rgba(0, 0, 0, 0.6);
    --black-overlay-85: rgba(0, 0, 0, 0.85);
    --black-overlay-90: rgba(0, 0, 0, 0.9);

    /* White overlay opacity variants */
    --white-overlay-015: rgba(255, 255, 255, 0.015); /* near-invisible scaffold tint */
    --white-overlay-02: rgba(255, 255, 255, 0.02);
    --white-overlay-03: rgba(255, 255, 255, 0.03);
    --white-overlay-04: rgba(255, 255, 255, 0.04);
    --white-overlay-05: rgba(255, 255, 255, 0.05);
    --white-overlay-06: rgba(255, 255, 255, 0.06);
    --white-overlay-07: rgba(255, 255, 255, 0.07);
    --white-overlay-08: rgba(255, 255, 255, 0.08);
    --white-overlay-10: rgba(255, 255, 255, 0.1);
    --white-overlay-15: rgba(255, 255, 255, 0.15);
    --white-overlay-20: rgba(255, 255, 255, 0.2);
    --white-overlay-30: rgba(255, 255, 255, 0.3);
    --white-overlay-40: rgba(255, 255, 255, 0.4);
    --white-overlay-50: rgba(255, 255, 255, 0.5);
    --white-overlay-60: rgba(255, 255, 255, 0.6);
    --white-overlay-70: rgba(255, 255, 255, 0.7);
    --white-overlay-80: rgba(255, 255, 255, 0.8);
    --white-overlay-90: rgba(255, 255, 255, 0.9);

    /* Slate border (fallback references) */
    --border-slate-20: rgba(148, 163, 184, 0.2);
    --border-slate-15: rgba(148, 163, 184, 0.15);
    --border-slate-10: rgba(148, 163, 184, 0.1);
    --border-slate-30: rgba(148, 163, 184, 0.3);

    /* Text shadows for overlay text */
    --text-shadow-dark: 1px 1px 4px rgba(0, 0, 0, 1);
    --text-shadow-soft: 1px 1px 3px rgba(0, 0, 0, 0.6);

    /* Drop shadows for images/logos */
    --drop-shadow-dark: drop-shadow(2px 4px 4px rgba(32, 32, 32, 1));
    --drop-shadow-soft: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.8));
    --drop-shadow-left: drop-shadow(-4px 0px 3px rgba(0, 0, 0, 0.8));

    /* Highlight/badge colors (for recommended plans, etc.) */
    --highlight-orange: #ff9800;
    --highlight-orange-dark: #f57c00;
    --highlight-orange-gradient: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    --highlight-orange-shadow: 0 8px 32px rgba(255, 152, 0, 0.3);
    --highlight-warm-bg: linear-gradient(180deg, #fffaf0 0%, #ffffff 100%);

    /* Network site specific colors */
    --text-hero-highlight: burlywood;  /* For subscriber text */
    --text-cta: darkorange;  /* Call to action text */
    --text-light: whitesmoke;  /* Light text on dark backgrounds */
    --text-white: #ffffff;
    --text-dark: #1a1a1a;  /* Dark text for light cards */
    --text-dark-muted: #666666;  /* Muted dark text */

    /* Card styles */
    --card-border-default: 1px solid #e0e0e0;
    --card-border-highlight: 3px solid var(--highlight-orange);
    --card-price-color: #1565c0;  /* Blue price text */
    --card-price-highlight: var(--highlight-orange-dark);  /* Orange for recommended */

    /* ==========================================================================
       BORDER RADIUS
       ========================================================================== */

    --radius-xs: 0.25rem;    /* 4px */
    --radius-sm: 0.375rem;   /* 6px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 0.875rem;   /* 14px */
    --radius-2xl: 1rem;      /* 16px */
    --radius-3xl: 1.25rem;   /* 20px */
    --radius-full: 9999px;   /* Keep px for full circles */

    /* ==========================================================================
       SPACING
       ========================================================================== */

    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 0.75rem;   /* 12px */
    --space-lg: 0.875rem;      /* 16px */
    --space-xl: 1rem;   /* 20px */
    --space-2xl: 1.25rem;   /* 24px */
    --space-3xl: 2rem;     /* 32px */
    --space-4xl: 2.5rem;   /* 40px */

    /* ==========================================================================
       TRANSITIONS
       ========================================================================== */

    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ==========================================================================
       TYPOGRAPHY
       ========================================================================== */

    --font-primary: var(--font-family);  /* CANONICAL name */
    --font-family: 'Comfortaa', system-ui, -apple-system, sans-serif;  /* Alias for backward compatibility */
    --font-mono: 'Fira Code', 'Cascadia Code', monospace;

    /* Font sizes */
    --text-xs: 0.75rem;     /* 12px */
    --text-sm: 0.875rem;    /* 14px */
    --text-base: 1rem;      /* 16px */
    --text-lg: 1.125rem;    /* 18px */
    --text-xl: 1.25rem;     /* 20px */
    --text-2xl: 1.5rem;     /* 24px */
    --text-3xl: 1.875rem;   /* 30px */
    --text-4xl: 2.25rem;    /* 36px */
    --text-5xl: 3rem;       /* 48px */
    --text-6xl: 3.75rem;    /* 60px */

    /* Font size aliases (for backward compatibility) */
    --font-xs: var(--text-xs);
    --font-sm: var(--text-sm);
    --font-base: var(--text-base);
    --font-lg: var(--text-lg);
    --font-xl: var(--text-xl);
    --font-2xl: var(--text-2xl);
    --font-3xl: var(--text-3xl);
    --font-4xl: var(--text-4xl);
    --font-5xl: var(--text-5xl);

    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* ==========================================================================
       LAYOUT DIMENSIONS
       ========================================================================== */

    --header-height: 3rem;       /* 48px */
    --footer-height: 2.125rem;   /* 34px */
    --drawer-width: 17.5rem;       /* 280px */
    --drawer-width-mini: 4rem;   /* 64px */
    --portal-max-width: 1400px;  /* Max width for customer portal content */

    /* ==========================================================================
       Z-INDEX LAYERS
       ========================================================================== */

    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-drawer: 1000;
    --z-fab-overlay: 1100;
    --z-modal-backdrop: 1100;
    --z-modal: 1200;
    --z-tooltip: 1300;
    --z-toast: 1400;

    /* ==========================================================================
       PANEL TRANSITION SYSTEM
       ========================================================================== */

    --panel-enter-duration: 0.35s;
    --panel-enter-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --stagger-delay: 60ms;

    /* ==========================================================================
       ENHANCED GLASSMORPHISM LEVELS
       ========================================================================== */

    --glass-panel: rgba(15, 23, 42, 0.7);
    --glass-panel-hover: rgba(15, 23, 42, 0.8);
    --glass-sidebar: rgba(10, 15, 30, 0.85);
    --glass-appbar: rgba(10, 15, 30, 0.9);
    --glass-card-elevated: rgba(30, 41, 59, 0.6);

    /* ==========================================================================
       GLOW EFFECTS
       ========================================================================== */

    --glow-accent: 0 0 20px rgba(59, 130, 246, 0.3);
    --glow-accent-strong: 0 0 30px rgba(59, 130, 246, 0.5);
    --glow-success: 0 0 15px rgba(34, 197, 94, 0.3);
    --glow-error: 0 0 15px rgba(239, 68, 68, 0.3);
    --glow-warning: 0 0 15px rgba(234, 179, 8, 0.3);
    --glow-info: 0 0 15px rgba(59, 130, 246, 0.3);

    /* Hero CTA blue glow — paired with --accent-gradient (which is blue→cyan despite --accent-color being indigo) */
    --cta-glow-md: 0 8px 24px rgba(59, 130, 246, 0.45);
    --cta-glow-lg: 0 12px 32px rgba(59, 130, 246, 0.55);

    /* ==========================================================================
       COVERAGE MAP COLORS
       ========================================================================== */

    --coverage-excellent: #4caf50;
    --coverage-excellent-glow: 0 0 8px rgba(76, 175, 80, 0.5);
    --coverage-good: #8bc34a;
    --coverage-good-glow: 0 0 8px rgba(139, 195, 74, 0.5);
    --coverage-moderate: #ffeb3b;
    --coverage-moderate-glow: 0 0 8px rgba(255, 235, 59, 0.5);
    --coverage-limited: #ff9800;
    --coverage-limited-glow: 0 0 8px rgba(255, 152, 0, 0.5);
    --coverage-tower: var(--accent-color);
    --coverage-tower-glow: 0 0 8px var(--accent-color-50);

    /* ==========================================================================
       MICRO-INTERACTION VALUES
       ========================================================================== */

    --click-scale: 0.97;
    --hover-lift: -2px;
    --active-press: 1px;

    /* ==========================================================================
       STATUS PULSE COLORS
       ========================================================================== */

    --pulse-online: rgba(34, 197, 94, 0.4);
    --pulse-offline: rgba(239, 68, 68, 0.4);
    --pulse-warning: rgba(234, 179, 8, 0.4);

    /* ==========================================================================
       ABOUT OVERLAY
       ========================================================================== */

    /* Credits text colour — warm orange, consistent with --highlight-orange */
    --about-credits-color: var(--highlight-orange);
    --about-credits-glow: 0 0 20px rgba(255, 152, 0, 0.45);

    /* Typewriter / animation micro-timings */
    --about-panel-enter-delay: 0.1s;    /* delay before credits panel slides in */
    --about-cursor-blink-duration: 1s;  /* typewriter cursor blink period */
    --about-hover-scale: 1.08;          /* close button hover lift (also used by other icon btns) */

    /* Panel glass background */
    --about-panel-bg: rgba(10, 14, 26, 0.72);
    --about-panel-border: rgba(255, 152, 0, 0.18);

    /* Overlay entrance animation */
    --about-fade-duration: 0.4s;
    --about-text-fade-duration: 0.6s;

    /* Close button */
    --about-close-size: 2.5rem;
    --about-close-bg: rgba(255, 255, 255, 0.06);
    --about-close-hover-bg: rgba(255, 255, 255, 0.14);
    --about-close-border: rgba(255, 255, 255, 0.12);
}

/* ==========================================================================
   ANIMATIONS - Reusable keyframes
   ========================================================================== */

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

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-0.625rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(1.25rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-1.25rem);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px var(--accent-color), 0 0 10px var(--accent-color);
    }
    50% {
        box-shadow: 0 0 15px var(--accent-color), 0 0 25px var(--accent-color);
    }
}

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

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

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

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

@keyframes statusPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--pulse-online);
    }
    50% {
        box-shadow: 0 0 0 6px transparent;
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.85;
    }
    50% {
        opacity: 1;
    }
}

@keyframes barFill {
    from {
        width: 0;
    }
}

@keyframes numberTick {
    from {
        opacity: 0;
        transform: scale(1.2);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes slideInFromLeft {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes breathe {
    0%, 100% {
        box-shadow: var(--glow-accent);
    }
    50% {
        box-shadow: var(--glow-accent-strong);
    }
}

@keyframes shimmerSweep {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes ringFill {
    from {
        stroke-dashoffset: var(--ring-circumference, 283);
    }
}

/* ==========================================================================
   UTILITY CLASSES
   ========================================================================== */

/* Animation utilities */
.animate-fade-in { animation: fadeIn 0.3s ease-out; }
.animate-fade-in-up { animation: fadeInUp 0.3s ease-out; }
.animate-fade-in-down { animation: fadeInDown 0.3s ease-out; }
.animate-slide-in-right { animation: slideInRight 0.3s ease-out; }
.animate-slide-in-left { animation: slideInLeft 0.3s ease-out; }
.animate-scale-in { animation: scaleIn 0.3s ease-out; }
.animate-pulse { animation: pulse 1.5s ease-in-out infinite; }
.animate-spin { animation: spin 0.8s linear infinite; }

/* Panel and card animation utilities */
.animate-panel-enter { animation: panelEnter var(--panel-enter-duration) var(--panel-enter-easing) both; }
.animate-panel-exit { animation: panelExit 0.15s ease-out both; }
.animate-card-reveal { animation: cardReveal 0.4s var(--panel-enter-easing) both; }
.animate-stat-count { animation: statCountUp 0.5s var(--panel-enter-easing) both; }
.animate-slide-from-left { animation: slideInFromLeft 0.3s var(--panel-enter-easing) both; }
.animate-bar-fill { animation: barFill 0.8s var(--panel-enter-easing) both; }
.animate-number-tick { animation: numberTick 0.3s ease-out; }
.animate-breathe { animation: breathe 3s ease-in-out infinite; }
.animate-glow-pulse { animation: glowPulse 2s ease-in-out infinite; }
.animate-status-pulse { animation: statusPulse 2s ease-in-out infinite; }
.animate-shimmer-sweep {
    background: linear-gradient(90deg, transparent 25%, var(--bg-hover) 50%, transparent 75%);
    background-size: 200% 100%;
    animation: shimmerSweep 1.5s infinite;
}

/* Stagger delay utilities */
.animate-stagger-1 { animation-delay: calc(var(--stagger-delay) * 1); }
.animate-stagger-2 { animation-delay: calc(var(--stagger-delay) * 2); }
.animate-stagger-3 { animation-delay: calc(var(--stagger-delay) * 3); }
.animate-stagger-4 { animation-delay: calc(var(--stagger-delay) * 4); }
.animate-stagger-5 { animation-delay: calc(var(--stagger-delay) * 5); }
.animate-stagger-6 { animation-delay: calc(var(--stagger-delay) * 6); }
.animate-stagger-7 { animation-delay: calc(var(--stagger-delay) * 7); }
.animate-stagger-8 { animation-delay: calc(var(--stagger-delay) * 8); }
.animate-stagger-9 { animation-delay: calc(var(--stagger-delay) * 9); }
.animate-stagger-10 { animation-delay: calc(var(--stagger-delay) * 10); }
.animate-stagger-11 { animation-delay: calc(var(--stagger-delay) * 11); }
.animate-stagger-12 { animation-delay: calc(var(--stagger-delay) * 12); }

/* Hover interaction utilities */
.hover-lift {
    transition: transform var(--transition-fast);
}
.hover-lift:hover {
    transform: translateY(var(--hover-lift));
}

.click-press:active {
    transform: scale(var(--click-scale));
}

.glow-on-hover {
    transition: box-shadow var(--transition-normal);
}
.glow-on-hover:hover {
    box-shadow: var(--glow-accent);
}

.glow-on-hover-success:hover {
    box-shadow: var(--glow-success);
}

.glow-on-hover-error:hover {
    box-shadow: var(--glow-error);
}

.glow-on-hover-warning:hover {
    box-shadow: var(--glow-warning);
}

/* Glass background utilities */
.glass-panel {
    background: var(--glass-panel);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.glass-sidebar {
    background: var(--glass-sidebar);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.glass-appbar {
    background: var(--glass-appbar);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.glass-card-elevated {
    background: var(--glass-card-elevated);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Section header glass banner - reusable for section titles over video/dark backgrounds */
.section-header-glass {
    background: var(--glass-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl) var(--space-3xl);
    text-align: center;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: var(--glass-card-shadow);
}

@media (max-width: 640px) {
    .section-header-glass {
        padding: var(--space-xl) var(--space-lg);
    }
}

/* Text utilities */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--accent-color) !important; }
.text-success { color: var(--success-color) !important; }
.text-warning { color: var(--warning-color) !important; }
.text-error { color: var(--error-color) !important; }
.text-info { color: var(--info-color) !important; }

/* Text overflow utilities */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Scroll utilities */
.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Touch target utility - enforces 44px minimum for mobile accessibility */
.touch-target-44 {
    min-width: 44px;
    min-height: 44px;
}

/* Card hover lift effect */
.card-hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.card-hover-lift:hover {
    transform: translateY(var(--hover-lift));
    box-shadow: var(--glass-card-shadow-hover);
}

/* Background utilities */
.bg-card { background: var(--bg-card) !important; }
.bg-card-solid { background: var(--bg-card-solid) !important; }
.bg-hover { background: var(--bg-hover) !important; }
.bg-accent { background: var(--accent-color) !important; }
.bg-accent-gradient { background: var(--accent-gradient) !important; }

/* Hero CTA primary — azure gradient with a warm amber rim + glow so it
   pops off the cyan / blue hero background. The mudblazor-overrides
   default ".mud-button-filled-primary { border-radius: --radius-md }"
   would force 8px; matching the Plans / Coverage-Map siblings at 4px
   needs the higher-specificity 3-class selector below. */
.cta-hero-primary {
    background: var(--accent-gradient) !important;
    color: var(--text-white) !important;
    border: 1px solid rgba(251, 191, 36, 0.55) !important;
    box-shadow:
        var(--inset-highlight-subtle),
        0 0 0 1px rgba(251, 191, 36, 0.22),
        0 8px 22px rgba(245, 158, 11, 0.32),
        0 4px 12px rgba(59, 130, 246, 0.22);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    font-weight: var(--font-semibold) !important;
    letter-spacing: 0.02em;
}

.cta-hero-primary:hover {
    background: var(--accent-gradient-hover) !important;
    border-color: rgba(253, 230, 138, 0.75) !important;
    box-shadow:
        var(--inset-highlight-strong),
        0 0 0 1px rgba(253, 230, 138, 0.4),
        0 12px 30px rgba(245, 158, 11, 0.45),
        0 6px 16px rgba(59, 130, 246, 0.3);
    transform: translateY(-1px);
}

/* Lift .cta-hero-secondary (Plans, Coverage Map) from the MudButton
   default 4px up to the same --radius-md (8px) that the primary CTA
   already inherits from mudblazor-overrides, so all three hero buttons
   share a single corner-rounding. */
.mud-button-filled.mud-button-filled-default.cta-hero-secondary {
    border-radius: var(--radius-md, 8px) !important;
}

/* ==========================================================================
   Marketing contact-section panels — frosted glass over the bg SVG
   --------------------------------------------------------------------------
   The /net Index ContactSection renders the policies + support panels
   over an absolutely-positioned mountain SVG (assets/images/net/
   contactbg.svg) and a 20vw inline down-arrow icon. Earlier iterations
   hit one of two failure modes:

     - With a translucent base + light blur, the SVG silhouettes and
       arrow stroke showed through the panel as visible high-frequency
       edges (the original Chrome rendering glitch the user reported).
     - With a fully opaque base + no blur, the panels lost the frosted-
       glass character that the rest of the page leans on.

   Resolution: pair a translucent slate base with a heavy 24px
   blur + saturate(140%). The blur kernel is wide enough that the
   sharp mountain ridges / arrow stroke smear into a smooth light
   wash before they ever hit the panel paint, so the panel still
   reads as glass (you can see warm + cool tones bleeding through
   from below) without ever rendering recognizable silhouettes.
   isolation: isolate forces the panel into its own compositor layer
   so the layered shadow + animated entry don't produce moiré along
   the edge, and z-index: 1 keeps the panel above the bg image and
   the arrow icon at z-index: 0.

   ContactSection.razor.css's `::deep .contact-panel` rules never
   take effect at runtime — MudPaper is a child Blazor component, so
   the scoped b-attr doesn't propagate onto the .mud-paper element
   the .contact-panel class lives on. The host's scoped bundle
   (Ayva.Business.Web.styles.css) carries an `[b-...] .mud-paper`
   rule with !important at specificity 0,2,0, and loads AFTER this
   file in the cascade. We need a stronger selector or it ties on
   specificity and loses on order. Adding .mud-elevation-0 (always
   present on MudPaper Elevation="0") brings us to 0,3,0 and wins on
   specificity outright — the class is only used by ContactSection
   so the global widening is safe.
   ========================================================================== */
.mud-paper.mud-elevation-0.contact-panel {
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(15, 23, 42, 0.55) 55%,
            rgba(15, 23, 42, 0.68) 100%) !important;
    backdrop-filter: blur(24px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--radius-2xl) !important;
    box-shadow:
        var(--glass-card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;
    position: relative;
    z-index: 1;
    isolation: isolate;
}

.mud-paper.mud-elevation-0.contact-panel:hover {
    border-color: rgba(255, 255, 255, 0.22) !important;
    box-shadow:
        var(--glass-card-shadow-hover),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.24) !important;
}

/* ==========================================================================
   Plan cards — glass paint on the .plan-grid-item parent (not the card)
   --------------------------------------------------------------------------
   Why on the parent, not on .plan-card:
   The .plan-grid-item runs the global cardReveal keyframe animation,
   which animates `transform: translateY/scale` ending at `transform:
   none`. Under animation-fill-mode: both, Chrome retains the computed
   transform as `matrix(1,0,0,1,0,0)` (identity) after the animation
   completes. Identity-or-not, ANY transform makes the element a
   stacking-context owner — and backdrop-filter on a descendant of a
   stacking-context owner only samples content WITHIN that ancestor
   stacking context, not the page beneath. Putting backdrop-filter on
   .plan-card (the descendant) collapsed the blur to empty (the parent
   was a hollow box). Putting it on .plan-grid-item itself works fine,
   because backdrop-filter on the stacking-context owner samples from
   that owner's PARENT stacking context (the body / page root), which
   is what we want.

   Values mirror .mud-paper.mud-elevation-0.contact-panel verbatim so
   the policies-panel glass and the plan-card glass composite as the
   same surface language. border-radius + overflow:hidden on
   .plan-grid-item keep the blur edge matched to the card silhouette.

   .plan-card itself stays a transparent shape (padding + flex layout
   only) in PlanCard.razor.css — the glass paint lives on the parent.
   ========================================================================== */
.plan-grid-item {
    background:
        linear-gradient(160deg,
            rgba(255, 255, 255, 0.06) 0%,
            rgba(15, 23, 42, 0.55) 55%,
            rgba(15, 23, 42, 0.68) 100%);
    backdrop-filter: blur(24px) saturate(140%);
    -webkit-backdrop-filter: blur(24px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-2xl);
    box-shadow:
        var(--glass-card-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
    overflow: hidden;
    transition:
        border-color var(--transition-smooth),
        box-shadow var(--transition-smooth);
}

.plan-grid-item:hover {
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        var(--glass-card-shadow-hover),
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -1px 0 rgba(0, 0, 0, 0.24);
}

/* The down-arrow between the contact header and the panel row uses
   width: 20vw / height: 20vh inline, large enough that its SVG stroke
   sits BEHIND the panels at certain viewport ratios. Push it firmly
   behind the panels so the panel paint doesn't sample it during blur. */
.contact-arrow-icon {
    position: relative;
    z-index: 0;
}

/* Hero CTA secondary — DARK glass with strong border + light text.
   Uses --glass-elevated (dark slate ~rgba(30,41,59,0.6)) NOT --glass-strong
   (~rgba(255,255,255,0.75) — that's a LIGHT overlay and produces white-on-white
   with --text-primary). Dark glass + white text gives WCAG-AA contrast against
   the video background. */
.cta-hero-secondary {
    background: var(--glass-elevated) !important;
    color: var(--text-primary) !important;
    border: var(--border-glass-strong) !important;
    box-shadow: var(--glass-card-shadow);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    font-weight: var(--font-medium) !important;
}

.cta-hero-secondary:hover {
    background: var(--glass-panel) !important; /* even darker on hover for clear affordance */
    border-color: var(--accent-color) !important;
    box-shadow: var(--glass-card-shadow-hover);
    transform: translateY(-1px);
}

.cta-hero-secondary:disabled,
.cta-hero-secondary[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--glass-elevated) !important;
    border-color: var(--border-color) !important;
    transform: none !important;
    box-shadow: none;
}

.cta-hero-secondary:disabled:hover,
.cta-hero-secondary[disabled]:hover {
    background: var(--glass-elevated) !important;
    border-color: var(--border-color) !important;
    transform: none !important;
}

/* Border utilities */
.border-default { border: 1px solid var(--border-color) !important; }
.border-accent { border: 1px solid var(--border-accent) !important; }
.border-focus { border: 1px solid var(--border-focus) !important; }

/* ==========================================================================
   COMPONENT BASE STYLES
   ========================================================================== */

/* Card base */
.ayva-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    transition: all var(--transition-normal);
}

.ayva-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
}

/* Panel base */
.ayva-panel {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
}

/* Section base */
.ayva-section {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
}

.ayva-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.ayva-section-header h3,
.ayva-section-header .section-title {
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin: 0;
}

.ayva-section-header .mud-icon-root,
.ayva-section-header svg {
    color: var(--accent-color);
}

/* Button base */
.ayva-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-lg);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: all var(--transition-normal);
    border: none;
}

.ayva-btn-primary {
    background: var(--accent-gradient);
    color: white;
}

.ayva-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}

.ayva-btn-secondary {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.ayva-btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--accent-color);
}

.ayva-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.ayva-btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Input base */
.ayva-input {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-lg);
    color: var(--text-primary);
    font-size: var(--text-sm);
    transition: all var(--transition-normal);
}

.ayva-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

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

/* Status badge */
.ayva-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.3125rem;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: var(--font-semibold);
}

.ayva-badge-success { background: var(--success-color); color: white; }
.ayva-badge-warning { background: var(--warning-color); color: var(--text-inverse); }
.ayva-badge-error { background: var(--error-color); color: white; }
.ayva-badge-info { background: var(--info-color); color: white; }

/* Status dot */
.ayva-status-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.ayva-status-dot.online {
    background: var(--success-color);
    box-shadow: 0 0 0.5rem rgba(16, 185, 129, 0.5);
}

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

.ayva-status-dot.warning {
    background: var(--warning-color);
    animation: pulse 1.5s ease-in-out infinite;
}

.ayva-status-dot.error {
    background: var(--error-color);
}

/* Loading spinner */
.ayva-spinner {
    width: 1.5rem;
    height: 1.5rem;
    border: 0.1875rem solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.ayva-spinner.large {
    width: 2rem;
    height: 2rem;
}

.ayva-spinner.small {
    width: 1rem;
    height: 1rem;
    border-width: 0.125rem;
}

/* Skeleton loading */
.ayva-skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 25%,
        var(--bg-hover) 50%,
        var(--bg-card) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* Skeleton variants */
.ayva-skeleton.skeleton-text {
    height: 1rem;
    width: 100%;
    margin-bottom: var(--space-xs);
}

.ayva-skeleton.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: var(--space-sm);
}

.ayva-skeleton.skeleton-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
}

.ayva-skeleton.skeleton-button {
    height: 2.5rem;
    width: 6rem;
    border-radius: var(--radius-lg);
}

.ayva-skeleton.skeleton-card {
    height: 8rem;
    border-radius: var(--radius-xl);
}

/* ==========================================================================
   INTERACTIVE ELEMENT PATTERNS
   Standard interaction patterns for all interactive components.
   Use these classes as a base for interactive elements.
   ========================================================================== */

/* Interactive base - adds standard hover/focus transitions */
.interactive {
    transition: all var(--transition-fast);
    cursor: pointer;
}

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

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

.interactive:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Card interactive pattern - for clickable cards */
.interactive-card {
    transition: all var(--transition-normal);
    cursor: pointer;
}

.interactive-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

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

.interactive-card:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Button interactive pattern */
.interactive-btn {
    transition: all var(--transition-fast);
    cursor: pointer;
}

.interactive-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.interactive-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.interactive-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

.interactive-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* List item interactive pattern */
.interactive-list-item {
    transition: background var(--transition-fast), color var(--transition-fast);
    cursor: pointer;
}

.interactive-list-item:hover {
    background: var(--bg-hover);
}

.interactive-list-item:active {
    background: var(--bg-active);
}

.interactive-list-item.active {
    background: var(--bg-active);
    color: var(--accent-color);
}

.interactive-list-item:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: -2px;
}

/* Icon button interactive pattern */
.interactive-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.interactive-icon-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.interactive-icon-btn:active {
    background: var(--bg-active);
}

.interactive-icon-btn:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Row highlight on hover */
.interactive-row {
    transition: background var(--transition-fast);
}

.interactive-row:hover {
    background: var(--bg-hover);
}

.interactive-row:active {
    background: var(--bg-active);
}

/* Input focus ring pattern */
.interactive-input {
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.interactive-input:hover {
    border-color: var(--accent-color);
}

.interactive-input:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    outline: none;
}

/* ==========================================================================
   DIALOG ANIMATIONS
   Standard entrance/exit animations for dialogs and modals.
   ========================================================================== */

/* Dialog entrance animation */
@keyframes dialogEnter {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Dialog exit animation */
@keyframes dialogExit {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
}

/* Backdrop fade */
@keyframes backdropEnter {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Slide from bottom (mobile-friendly) */
@keyframes slideFromBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideToBottom {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* Dialog animation classes */
.dialog-enter {
    animation: dialogEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dialog-exit {
    animation: dialogExit 0.2s ease-out forwards;
}

.dialog-backdrop-enter {
    animation: backdropEnter 0.3s ease-out;
}

.dialog-backdrop-exit {
    animation: backdropExit 0.2s ease-out forwards;
}

.dialog-slide-enter {
    animation: slideFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dialog-slide-exit {
    animation: slideToBottom 0.2s ease-out forwards;
}

/* ==========================================================================
   LOADING STATES
   Patterns for showing loading/pending states in UI elements.
   ========================================================================== */

/* Loading overlay for containers */
.loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(4px);
    z-index: 10;
    border-radius: inherit;
}

/* Inline loading indicator */
.loading-inline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
}

/* Button loading state */
.btn-loading {
    position: relative;
    pointer-events: none;
}

.btn-loading::after {
    content: '';
    position: absolute;
    width: 1rem;
    height: 1rem;
    top: 50%;
    left: 50%;
    margin: -0.5rem 0 0 -0.5rem;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

.btn-loading > * {
    visibility: hidden;
}

/* Pulsing dot loading indicator */
.loading-dots {
    display: inline-flex;
    gap: 0.25rem;
}

.loading-dots span {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--accent-color);
    border-radius: 50%;
    animation: dotPulse 1.4s ease-in-out infinite;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.2s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes dotPulse {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    30% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   FEEDBACK ANIMATIONS
   Animations for providing visual feedback on user actions.
   ========================================================================== */

/* Success checkmark animation */
@keyframes checkmark {
    0% {
        stroke-dashoffset: 50;
    }
    100% {
        stroke-dashoffset: 0;
    }
}

/* Shake animation for errors */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

/* Bounce animation for attention */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

/* Ripple effect animation */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* Feedback utility classes */
.animate-shake {
    animation: shake 0.5s ease-in-out;
}

.animate-bounce {
    animation: bounce 0.5s ease-out;
}

/* Ripple effect container */
.ripple-container {
    position: relative;
    overflow: hidden;
}

.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

/* ==========================================================================
   TABLE INTERACTION PATTERNS
   Enhanced hover and selection states for tables.
   ========================================================================== */

/* Row hover with accent border */
.table-row-interactive {
    transition: background var(--transition-fast), border-color var(--transition-fast);
    border-left: 3px solid transparent;
}

.table-row-interactive:hover {
    background: var(--bg-hover);
    border-left-color: var(--accent-color);
}

.table-row-interactive.selected {
    background: var(--bg-active);
    border-left-color: var(--accent-color);
}

/* Clickable table cell */
.table-cell-action {
    cursor: pointer;
    transition: color var(--transition-fast);
}

.table-cell-action:hover {
    color: var(--accent-color);
}

/* ==========================================================================
   TOOLTIP ANIMATIONS
   ========================================================================== */

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

.tooltip-animate {
    animation: tooltipEnter 0.2s ease-out;
}

/* ==========================================================================
   DROPDOWN ANIMATIONS
   ========================================================================== */

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

.dropdown-animate {
    animation: dropdownEnter 0.15s ease-out;
}

/* ==========================================================================
   NOTIFICATION/TOAST ANIMATIONS
   ========================================================================== */

@keyframes toastEnter {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes toastExit {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast-enter {
    animation: toastEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.toast-exit {
    animation: toastExit 0.2s ease-out forwards;
}

/* ==========================================================================
   SCROLLBAR STYLING
   ========================================================================== */

/* Webkit scrollbars */
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.4);
    border-radius: 0.25rem;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.6);
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Global focus visible state for all interactive elements */
:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Focus visible states (legacy selectors retained for specificity) */
.ayva-btn:focus-visible,
.ayva-card:focus-visible,
.ayva-input:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Reduced motion */
/* Global reduced-motion escape — disable all animations + transitions + transforms */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    /* Specific transforms that should be disabled on hover/select */
    .cta-hero-primary:hover,
    .cta-hero-secondary:hover,
    .signup-plan-card-wrapper:hover,
    .signup-plan-card-wrapper.selected,
    .plan-card:hover,
    .feature-card:hover,
    .animate-card-reveal {
        transform: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Mobile (max 480px) */
@media (max-width: 480px) {
    :root {
        --space-lg: 0.875rem;    /* 10px - reduced from 14px */
        --space-xl: 1rem;     /* 12px - reduced from 16px */
        --space-2xl: 1.25rem;       /* 16px - reduced from 20px */
    }
}

/* Tablet (max 768px) */
@media (max-width: 768px) {
    :root {
        --drawer-width: 17.5rem;   /* 240px - narrower than desktop 280px */
    }
}

/* ==========================================================================
   DIALOG BASE CLASSES
   Reusable classes for consistent dialog styling across the application.
   ========================================================================== */

/* Base dialog styling - dark glassmorphism */
.ayva-dialog,
.mud-dialog.ayva-dialog {
    background: var(--dialog-bg) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid var(--dialog-border) !important;
    border-radius: var(--dialog-radius) !important;
    box-shadow: var(--dialog-shadow) !important;
    color: var(--dialog-text-primary) !important;
}

/* Dialog title styling */
.ayva-dialog-title {
    color: var(--text-primary) !important;
    font-weight: var(--font-semibold) !important;
}

/* State info card (for notices, instructions) */
.ayva-state-info {
    background: var(--card-state-info-bg) !important;
    border: 1px solid var(--card-state-info-border) !important;
    border-left: 4px solid var(--info-color) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--card-state-info-text) !important;
}

.ayva-state-info .mud-icon-root,
.ayva-state-info svg {
    color: var(--info-color) !important;
}

/* State success card (for confirmations, completed steps) */
.ayva-state-success {
    background: var(--card-state-success-bg) !important;
    border: 1px solid var(--card-state-success-border) !important;
    border-left: 4px solid var(--success-color) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--card-state-success-text) !important;
}

.ayva-state-success .mud-icon-root,
.ayva-state-success svg {
    color: var(--success-color) !important;
}

/* State warning card (for cautions, pending items) */
.ayva-state-warning {
    background: var(--card-state-warning-bg) !important;
    border: 1px solid var(--card-state-warning-border) !important;
    border-left: 4px solid var(--warning-color) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--card-state-warning-text) !important;
}

.ayva-state-warning .mud-icon-root,
.ayva-state-warning svg {
    color: var(--warning-color) !important;
}

/* State error card (for errors, not found) */
.ayva-state-error {
    background: var(--card-state-error-bg) !important;
    border: 1px solid var(--card-state-error-border) !important;
    border-left: 4px solid var(--error-color) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--card-state-error-text) !important;
}

.ayva-state-error .mud-icon-root,
.ayva-state-error svg {
    color: var(--error-color) !important;
}

/* Dialog footer/helper area */
.ayva-dialog-footer {
    background: var(--bg-secondary) !important;
    border-radius: var(--radius-lg) !important;
    color: var(--text-secondary) !important;
}

/* Table in dialog */
.ayva-dialog-table,
.ayva-dialog-table.mud-simple-table {
    background: var(--dialog-table-bg) !important;
    border-radius: var(--radius-lg) !important;
}

.ayva-dialog-table thead tr,
.ayva-dialog-table .mud-table-head {
    background: var(--dialog-table-header-bg) !important;
}

.ayva-dialog-table th,
.ayva-dialog-table td {
    color: var(--text-primary) !important;
    border-color: var(--dialog-table-border) !important;
}

.ayva-dialog-table tbody tr:hover {
    background: var(--dialog-table-row-hover) !important;
}

/* ==========================================================================
   SUPPORT HUB DIALOG - Global Overrides
   MudDialog renders outside component scope, so these must be global.
   ========================================================================== */

/* Target the dialog paper element - this is the main dark box */
.support-hub-dialog-desktop.mud-paper.mud-dialog,
.mud-paper.mud-dialog.support-hub-dialog-desktop,
.support-hub-dialog-desktop.mud-paper,
.support-hub-dialog-desktop.mud-dialog,
.support-hub-dialog-desktop {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    max-width: fit-content !important;
    width: auto !important;
}

/* Target the dialog content area */
.support-hub-dialog-desktop .mud-dialog-content,
.mud-dialog-content.support-hub-dialog-content-desktop,
.support-hub-dialog-content-desktop {
    padding: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* Target the dialog container that holds our dialog */
.mud-dialog-container:has(.support-hub-dialog-desktop) {
    background: transparent !important;
}

/* Ensure no dark backgrounds from MudBlazor theme */
.mud-theme-dark .support-hub-dialog-desktop,
.mud-theme-dark .support-hub-dialog-desktop.mud-paper {
    background: transparent !important;
    background-color: transparent !important;
}

/* Override MudPaper styles specifically for support-hub-dialog to ensure transparency */
.support-hub-dialog-desktop.mud-paper.mud-elevation-0,
.support-hub-dialog-desktop.mud-paper.mud-elevation-1,
.support-hub-dialog-desktop.mud-paper.mud-elevation-2,
.support-hub-dialog-desktop.mud-paper.mud-elevation-3,
.support-hub-dialog-desktop.mud-paper.mud-elevation-4,
.support-hub-dialog-desktop.mud-paper.mud-elevation-5,
.support-hub-dialog-desktop.mud-paper.mud-elevation-6,
.support-hub-dialog-desktop.mud-paper.mud-elevation-7,
.support-hub-dialog-desktop.mud-paper.mud-elevation-8,
.support-hub-dialog-desktop.mud-paper.mud-elevation-24,
.support-hub-dialog-desktop.mud-paper.mud-elevation-25 {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Ensure support hub dialog wrapper has no background in any theme */
.support-hub-dialog-wrapper {
    background: transparent !important;
}

/* ==========================================================================
   MUDBLAZOR GLOBAL OVERRIDES
   Global styling for MudBlazor components to match Ayva Design System.
   These eliminate the need for component-level ::deep overrides.
   ========================================================================== */

/* ==========================================================================
   GLOBAL FLEX SCROLL FIX
   Critical fix for nested flex containers to scroll properly
   ========================================================================== */

/* Ensure flex children can scroll by setting min-height: 0 */
.admin-layout-wrapper,
.admin-content-area,
.admin-main-content,
.admin-panel-container {
    min-height: 0;
}

/* MudDrawerContainer needs proper flex behavior */
.mud-drawer-container {
    display: flex;
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* ==========================================================================
   MUDBLAZOR CSS VARIABLE OVERRIDES
   Complete mapping of MudBlazor theme variables to Ayva Design System.
   These variables are used by MudBlazor components for consistent theming.
   ========================================================================== */

:root,
.mud-theme-dark {
    /* Primary Palette - Maps to Ayva accent colors */
    --mud-palette-primary: var(--accent-color);
    --mud-palette-primary-text: var(--text-white);
    --mud-palette-primary-darken: var(--accent-hover);
    --mud-palette-primary-lighten: var(--accent-light);
    --mud-palette-primary-hover: rgba(59, 130, 246, 0.08);

    /* Secondary Palette */
    --mud-palette-secondary: var(--secondary-accent);
    --mud-palette-secondary-text: var(--text-white);
    --mud-palette-secondary-darken: #7c3aed;
    --mud-palette-secondary-lighten: #22d3ee;
    --mud-palette-secondary-hover: rgba(6, 182, 212, 0.08);

    /* Tertiary Palette */
    --mud-palette-tertiary: var(--info-color);
    --mud-palette-tertiary-text: var(--text-white);
    --mud-palette-tertiary-darken: #2563eb;
    --mud-palette-tertiary-lighten: #60a5fa;
    --mud-palette-tertiary-hover: rgba(59, 130, 246, 0.08);

    /* Status Colors - Info */
    --mud-palette-info: var(--info-color);
    --mud-palette-info-text: var(--text-white);
    --mud-palette-info-darken: #2563eb;
    --mud-palette-info-lighten: #60a5fa;
    --mud-palette-info-hover: rgba(59, 130, 246, 0.08);

    /* Status Colors - Success */
    --mud-palette-success: var(--success-color);
    --mud-palette-success-text: var(--text-white);
    --mud-palette-success-darken: #059669;
    --mud-palette-success-lighten: #34d399;
    --mud-palette-success-hover: rgba(16, 185, 129, 0.08);

    /* Status Colors - Warning */
    --mud-palette-warning: var(--warning-color);
    --mud-palette-warning-text: var(--text-dark);
    --mud-palette-warning-darken: #d97706;
    --mud-palette-warning-lighten: #fbbf24;
    --mud-palette-warning-hover: rgba(245, 158, 11, 0.08);

    /* Status Colors - Error */
    --mud-palette-error: var(--error-color);
    --mud-palette-error-text: var(--text-white);
    --mud-palette-error-darken: #dc2626;
    --mud-palette-error-lighten: #f87171;
    --mud-palette-error-hover: rgba(239, 68, 68, 0.08);

    /* Dark Palette */
    --mud-palette-dark: var(--bg-base);
    --mud-palette-dark-text: var(--text-primary);
    --mud-palette-dark-darken: #0f172a;
    --mud-palette-dark-lighten: #334155;

    /* Text Colors */
    --mud-palette-text-primary: var(--text-primary);
    --mud-palette-text-secondary: var(--text-secondary);
    --mud-palette-text-disabled: var(--text-disabled);

    /* Action Colors */
    --mud-palette-action-default: var(--text-secondary);
    --mud-palette-action-default-hover: rgba(255, 255, 255, 0.1);
    --mud-palette-action-disabled: var(--text-disabled);
    --mud-palette-action-disabled-background: rgba(255, 255, 255, 0.12);

    /* Background Colors */
    --mud-palette-background: var(--bg-base);
    --mud-palette-background-gray: var(--bg-secondary);

    /* Surface Colors */
    --mud-palette-surface: var(--bg-card);
    --mud-palette-drawer-background: var(--bg-drawer);
    --mud-palette-drawer-text: var(--text-primary);
    --mud-palette-drawer-icon: var(--text-secondary);
    --mud-palette-appbar-background: var(--bg-header);
    --mud-palette-appbar-text: var(--text-primary);

    /* Dividers & Borders */
    --mud-palette-divider: var(--border-color);
    --mud-palette-divider-light: rgba(255, 255, 255, 0.06);

    /* Overlays */
    --mud-palette-overlay-dark: rgba(15, 23, 42, 0.7);
    --mud-palette-overlay-light: rgba(255, 255, 255, 0.5);

    /* Other UI Elements */
    --mud-palette-gray-default: var(--text-muted);
    --mud-palette-gray-light: var(--border-color);
    --mud-palette-gray-lighter: rgba(255, 255, 255, 0.12);
    --mud-palette-gray-dark: #475569;
    --mud-palette-gray-darker: #334155;

    /* Lines & Table */
    --mud-palette-lines-default: var(--border-color);
    --mud-palette-lines-inputs: var(--border-color);
    --mud-palette-table-lines: var(--border-color);
    --mud-palette-table-striped: rgba(255, 255, 255, 0.02);
    --mud-palette-table-hover: rgba(59, 130, 246, 0.08);

    /* White/Black */
    --mud-palette-white: #ffffff;
    --mud-palette-black: #000000;

    /* Chip colors */
    --mud-palette-chip-default: var(--bg-secondary);

    /* Skeleton */
    --mud-palette-skeleton: rgba(255, 255, 255, 0.11);

    /* ==========================================================================
       MUDBLAZOR TYPOGRAPHY OVERRIDES
       ========================================================================== */

    /* Default Typography */
    --mud-typography-default-family: var(--font-primary);
    --mud-typography-default-size: var(--text-base);
    --mud-typography-default-weight: var(--font-normal);
    --mud-typography-default-lineheight: 1.5;
    --mud-typography-default-letterspacing: normal;

    /* Headings */
    --mud-typography-h1-family: var(--font-primary);
    --mud-typography-h1-size: 2.5rem;
    --mud-typography-h1-weight: var(--font-bold);
    --mud-typography-h1-lineheight: 1.2;

    --mud-typography-h2-family: var(--font-primary);
    --mud-typography-h2-size: 2rem;
    --mud-typography-h2-weight: var(--font-bold);
    --mud-typography-h2-lineheight: 1.25;

    --mud-typography-h3-family: var(--font-primary);
    --mud-typography-h3-size: 1.75rem;
    --mud-typography-h3-weight: var(--font-semibold);
    --mud-typography-h3-lineheight: 1.3;

    --mud-typography-h4-family: var(--font-primary);
    --mud-typography-h4-size: 1.5rem;
    --mud-typography-h4-weight: var(--font-semibold);
    --mud-typography-h4-lineheight: 1.35;

    --mud-typography-h5-family: var(--font-primary);
    --mud-typography-h5-size: 1.25rem;
    --mud-typography-h5-weight: var(--font-medium);
    --mud-typography-h5-lineheight: 1.4;

    --mud-typography-h6-family: var(--font-primary);
    --mud-typography-h6-size: 1.125rem;
    --mud-typography-h6-weight: var(--font-medium);
    --mud-typography-h6-lineheight: 1.4;

    /* Subtitles */
    --mud-typography-subtitle1-family: var(--font-primary);
    --mud-typography-subtitle1-size: 1rem;
    --mud-typography-subtitle1-weight: var(--font-medium);
    --mud-typography-subtitle1-lineheight: 1.5;

    --mud-typography-subtitle2-family: var(--font-primary);
    --mud-typography-subtitle2-size: 0.875rem;
    --mud-typography-subtitle2-weight: var(--font-medium);
    --mud-typography-subtitle2-lineheight: 1.5;

    /* Body Text */
    --mud-typography-body1-family: var(--font-primary);
    --mud-typography-body1-size: 1rem;
    --mud-typography-body1-weight: var(--font-normal);
    --mud-typography-body1-lineheight: 1.5;

    --mud-typography-body2-family: var(--font-primary);
    --mud-typography-body2-size: 0.875rem;
    --mud-typography-body2-weight: var(--font-normal);
    --mud-typography-body2-lineheight: 1.5;

    /* Button & UI Text */
    --mud-typography-button-family: var(--font-primary);
    --mud-typography-button-size: 0.875rem;
    --mud-typography-button-weight: var(--font-medium);
    --mud-typography-button-lineheight: 1.75;
    --mud-typography-button-letterspacing: 0.02857em;
    --mud-typography-button-text-transform: uppercase;

    --mud-typography-caption-family: var(--font-primary);
    --mud-typography-caption-size: 0.75rem;
    --mud-typography-caption-weight: var(--font-normal);
    --mud-typography-caption-lineheight: 1.4;

    --mud-typography-overline-family: var(--font-primary);
    --mud-typography-overline-size: 0.625rem;
    --mud-typography-overline-weight: var(--font-medium);
    --mud-typography-overline-lineheight: 2.5;
    --mud-typography-overline-letterspacing: 0.08333em;
    --mud-typography-overline-text-transform: uppercase;

    /* ==========================================================================
       MUDBLAZOR LAYOUT OVERRIDES
       ========================================================================== */

    /* Z-Index Layers */
    --mud-zindex-drawer: var(--z-drawer);
    --mud-zindex-popover: 1200;
    --mud-zindex-appbar: 1300;
    --mud-zindex-dialog: var(--z-modal);
    --mud-zindex-snackbar: var(--z-toast);
    --mud-zindex-tooltip: var(--z-tooltip);

    /* Border Radius */
    --mud-default-borderradius: var(--radius-md);

    /* Shadows - Map to Ayva shadow system */
    --mud-elevation-0: none;
    --mud-elevation-1: var(--shadow-xs);
    --mud-elevation-2: var(--shadow-sm);
    --mud-elevation-3: var(--shadow-sm);
    --mud-elevation-4: var(--shadow-md);
    --mud-elevation-6: var(--shadow-md);
    --mud-elevation-8: var(--shadow-lg);
    --mud-elevation-12: var(--shadow-lg);
    --mud-elevation-16: var(--shadow-xl);
    --mud-elevation-24: var(--shadow-xl);
}

/* Paper/Card styling - Override MudBlazor elevation classes
   CRITICAL: These rules apply to ALL .mud-paper elements (with or without .mud-theme-dark ancestor)
   to ensure consistent dark theme styling across the application */
.mud-paper,
.mud-paper.mud-elevation-0,
.mud-paper.mud-elevation-1,
.mud-paper.mud-elevation-2,
.mud-paper.mud-elevation-3,
.mud-paper.mud-elevation-4,
.mud-paper.mud-elevation-5,
.mud-paper.mud-elevation-6,
.mud-paper.mud-elevation-7,
.mud-paper.mud-elevation-8,
.mud-paper.mud-elevation-9,
.mud-paper.mud-elevation-10,
.mud-paper.mud-elevation-11,
.mud-paper.mud-elevation-12,
.mud-paper.mud-elevation-13,
.mud-paper.mud-elevation-14,
.mud-paper.mud-elevation-15,
.mud-paper.mud-elevation-16,
.mud-paper.mud-elevation-17,
.mud-paper.mud-elevation-18,
.mud-paper.mud-elevation-19,
.mud-paper.mud-elevation-20,
.mud-paper.mud-elevation-21,
.mud-paper.mud-elevation-22,
.mud-paper.mud-elevation-23,
.mud-paper.mud-elevation-24,
.mud-paper.mud-elevation-25 {
    background: var(--bg-card-solid) !important;
    background-color: var(--bg-card-solid) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--radius-xl) !important;
    color: var(--text-primary) !important;
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.5),
        0 2px 4px -1px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

.mud-paper:hover {
    border-color: rgba(99, 102, 241, 0.4) !important;
    box-shadow:
        0 8px 16px -2px rgba(0, 0, 0, 0.6),
        0 4px 8px -2px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 0 20px rgba(99, 102, 241, 0.15) !important;
}

/* Maintain .mud-theme-dark compatibility for any pages that use it */
.mud-theme-dark .mud-paper,
.mud-theme-dark .mud-paper.mud-elevation-2 {
    background: var(--bg-card-solid) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* ==========================================================================
   MUDBLAZOR COMPONENT OVERRIDES
   These rules apply globally to ensure dark theme styling works everywhere.
   Selectors are duplicated without .mud-theme-dark for pages that don't use it.
   ========================================================================== */

/* Table styling */
.mud-table,
.mud-theme-dark .mud-table {
    background: var(--bg-card-solid) !important;
    border-radius: var(--radius-lg);
}

.mud-table-row,
.mud-theme-dark .mud-table-row {
    background: var(--bg-card-solid) !important;
    transition: background var(--transition-fast);
}

.mud-table-row:hover,
.mud-theme-dark .mud-table-row:hover {
    background: var(--bg-hover) !important;
}

.mud-table-head,
.mud-theme-dark .mud-table-head {
    background: var(--bg-secondary) !important;
}

.mud-table-cell,
.mud-table-head-cell,
.mud-theme-dark .mud-table-cell,
.mud-theme-dark .mud-table-head-cell {
    color: var(--text-primary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* Input styling */
.mud-input-outlined .mud-input-slot,
.mud-theme-dark .mud-input-outlined .mud-input-slot {
    background: var(--bg-input) !important;
}

.mud-input-outlined .mud-input-outlined-border,
.mud-theme-dark .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border-color) !important;
}

.mud-input-outlined:hover .mud-input-outlined-border,
.mud-theme-dark .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent-color) !important;
}

.mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.mud-theme-dark .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--accent-light) !important;
}

.mud-input-label,
.mud-theme-dark .mud-input-label {
    color: var(--text-secondary) !important;
}

.mud-input,
.mud-theme-dark .mud-input {
    color: var(--text-primary) !important;
}

.mud-input-helper-text,
.mud-theme-dark .mud-input-helper-text {
    color: var(--text-muted) !important;
}

.mud-select-input,
.mud-theme-dark .mud-select-input {
    color: var(--text-primary) !important;
}

/* Checkbox styling */
.mud-checkbox-label,
.mud-theme-dark .mud-checkbox-label {
    color: var(--text-primary) !important;
}

/* Alert styling - severity-specific backgrounds are in mudblazor-overrides.css */

/* Chip styling */
.mud-chip,
.mud-theme-dark .mud-chip {
    font-size: var(--text-xs) !important;
}

/* Button enhancements */
.mud-button-filled-primary,
.mud-theme-dark .mud-button-filled-primary {
    background: var(--accent-gradient) !important;
    transition: all var(--transition-normal);
}

.mud-button-filled-primary:hover,
.mud-theme-dark .mud-button-filled-primary:hover {
    transform: translateY(-0.125rem);
    box-shadow: var(--shadow-accent);
}

.mud-button-filled-warning:hover,
.mud-button-filled-info:hover,
.mud-theme-dark .mud-button-filled-warning:hover,
.mud-theme-dark .mud-button-filled-info:hover {
    transform: translateY(-0.125rem);
}

/* Tabs styling */
.mud-tabs-header,
.mud-theme-dark .mud-tabs-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.mud-tab,
.mud-theme-dark .mud-tab {
    color: var(--text-secondary);
    transition: all var(--transition-normal);
}

.mud-tab:hover,
.mud-theme-dark .mud-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.mud-tab.mud-tab-active,
.mud-theme-dark .mud-tab.mud-tab-active {
    color: var(--accent-light);
    background: rgba(var(--primary-color-rgb), 0.1);
}

/* AppBar styling */
.mud-appbar,
.mud-theme-dark .mud-appbar {
    background: var(--bg-drawer) !important;
    border-bottom: 1px solid var(--border-accent) !important;
}

/* Drawer styling */
.mud-drawer,
.mud-theme-dark .mud-drawer {
    background: var(--bg-drawer) !important;
    border-right: 1px solid var(--border-accent) !important;
}

.mud-drawer-header,
.mud-theme-dark .mud-drawer-header {
    background: var(--bg-drawer-header);
    border-bottom: 1px solid var(--border-color);
}

/* Nav menu styling */
.mud-nav-link,
.mud-theme-dark .mud-nav-link {
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    transition: all var(--transition-normal);
}

.mud-nav-link:hover,
.mud-theme-dark .mud-nav-link:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Icon buttons */
.mud-icon-button:hover,
.mud-theme-dark .mud-icon-button:hover {
    background: var(--bg-hover);
}

/* Typography defaults */
.mud-typography,
.mud-theme-dark .mud-typography {
    color: var(--text-primary);
}

/* ==========================================================================
   NEURAL INTERFACE - Command Center Specific Variables
   ========================================================================== */

:root {
    /* Neural Interface layout */
    --neural-sidebar-width: 280px;
    --neural-sidebar-width-collapsed: 48px;
    --neural-inspector-width: 320px;
    --neural-inspector-width-collapsed: 48px;
    --neural-tab-height: 48px;
    --neural-statusbar-height: 32px;
    --neural-composer-min-height: 100px;
    --neural-composer-max-height: 300px;
    --neural-resizer-width: 6px;

    /* Message bubbles */
    --message-user-bg: var(--accent-gradient);
    --message-assistant-bg: var(--bg-secondary);
    --message-system-bg: rgba(6, 182, 212, 0.1);
    --message-tool-bg: rgba(16, 185, 129, 0.1);
    --message-tool-border: rgba(16, 185, 129, 0.3);

    /* Tool execution states */
    --tool-pending-color: var(--warning-color);
    --tool-pending-bg: rgba(245, 158, 11, 0.1);
    --tool-running-color: var(--info-color);
    --tool-running-bg: rgba(59, 130, 246, 0.1);
    --tool-success-color: var(--success-color);
    --tool-success-bg: rgba(16, 185, 129, 0.1);
    --tool-error-color: var(--error-color);
    --tool-error-bg: rgba(239, 68, 68, 0.1);

    /* Cost tracking */
    --cost-low-color: var(--success-color);
    --cost-medium-color: var(--warning-color);
    --cost-high-color: var(--error-color);

    /* Neural workspace colors */
    --neural-panel-bg: rgba(30, 41, 59, 0.6);
    --neural-panel-border: rgba(255, 255, 255, 0.08);
    --neural-active-tab-bg: var(--bg-active);
    --neural-hover-bg: rgba(59, 130, 246, 0.08);

    /* Viewport zoom - scales the entire UI proportionally */
    --viewport-zoom: 0.8;
}

/* ==========================================================================
   VIEWPORT ZOOM (Admin Panel Only)
   Scales the admin UI to var(--viewport-zoom). Applied via .viewport-zoom
   class on the AILayout wrapper. Customer-facing pages render at 1:1.
   ========================================================================== */

.viewport-zoom {
    zoom: var(--viewport-zoom);
}

/* ==========================================================================
   DIALOG GLOBALS - MudDialog renders outside component trees,
   so CSS isolation can't reach these. Styles that target the dialog
   container itself must be global.
   ========================================================================== */

.mud-dialog.ayva-dialog {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-2xl);
    backdrop-filter: var(--glass-blur-strong);
    box-shadow: var(--shadow-lg);
    max-width: 1440px;
    width: 96vw;
}

.mud-dialog.ayva-dialog .mud-dialog-title {
    padding: 0;
    border-bottom: 1px solid var(--border-color);
}

.mud-dialog.ayva-dialog .mud-dialog-content {
    padding: var(--space-xl);
    overflow-y: auto;
}

.mud-dialog.ayva-dialog .mud-dialog-actions {
    padding: var(--space-md) var(--space-xl) var(--space-lg);
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
}

/* Comparison Dialog - specific overrides */
.mud-dialog.comparison-dialog {
    background: var(--dialog-bg) !important;
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: 1px solid var(--dialog-border);
    border-radius: var(--dialog-radius) !important;
    box-shadow: var(--glass-dialog-shadow-inset);
    max-width: 56.25rem !important;
    min-width: 60vw;
    width: 95vw !important;
    overflow: hidden;
}

.mud-dialog.comparison-dialog .mud-dialog-content {
    padding: 0 !important;
    overflow-y: auto;
    max-height: 80vh;
    min-height: 30rem;
}

.mud-dialog.comparison-dialog .mud-dialog-title {
    padding: 0 !important;
    background: transparent;
}

.mud-dialog.comparison-dialog .mud-dialog-actions {
    padding: 0 !important;
    background: transparent;
}

@media (max-width: 768px) {
    .mud-dialog.comparison-dialog {
        max-width: 100% !important;
        min-width: unset;
        width: 100% !important;
        margin: 0;
        border-radius: 0 !important;
        height: 100vh;
        max-height: 100vh;
    }

    .mud-dialog.comparison-dialog .mud-dialog-content {
        max-height: calc(100vh - 14rem);
        min-height: unset;
    }
}

/* ==========================================================================
   NEURAL COMMAND CENTER - Global Styles
   These must be global because the component is dynamically rendered via
   RenderFragment, and CSS isolation's ::deep doesn't work across this boundary.
   ========================================================================== */

/* Neural Command Center fills its flex container */
.panel-viewport.neural-fullscreen > .neural-command-center,
.panel-content-wrapper.neural-fullscreen > .neural-command-center {
    flex: 1;
    display: flex;
    min-height: 0;
}

/* MudTabs within workspace needs flex layout for height propagation */
.neural-command-center .workspace-tabs .mud-tabs {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Tab panels container fills remaining space */
.neural-command-center .workspace-tabs .mud-tabs-panels {
    flex: 1;
    min-height: 0;
    position: relative;
}

/* Each tab panel fills its container */
.neural-command-center .workspace-tabs .mud-tab-panel {
    height: 100%;
}

/* Workspace tab panel class applied by MudTabs PanelClass */
.workspace-tab-panel {
    height: 100%;
    padding: 0;
    overflow: hidden;
}

/* ==========================================================================
   MONACO EDITOR - Global Styles
   These styles must be global (not CSS isolation) because Monaco is JS-rendered
   BlazorMonaco uses .monaco-editor-container as its wrapper class
   ========================================================================== */

/* Monaco container - ensure proper height propagation */
.monaco-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

/* BlazorMonaco's container wrapper */
.monaco-editor-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
}

/* Monaco editor full-height class for Content Editor Modal */
.monaco-editor-full {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
}

.monaco-editor-full .monaco-editor-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
}

/* BlazorMonaco wraps editor in a div - ensure it fills container */
.monaco-editor-full .monaco-editor,
.monaco-editor-full > .monaco-editor,
.monaco-editor-container .monaco-editor {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
}

/* The overflow guard is the actual visible area */
.monaco-editor-full .monaco-editor .overflow-guard,
.monaco-editor-full .overflow-guard,
.monaco-editor-container .overflow-guard {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
}

/* Ensure textarea (which Monaco creates) fills properly */
.monaco-editor-full textarea.inputarea,
.monaco-editor-full .monaco-editor textarea.inputarea,
.monaco-editor-container textarea.inputarea {
    height: auto !important;
}

/* Content editor modal specific fixes */
.editor-modal-overlay .monaco-container {
    flex: 1;
    min-height: 400px;
    height: 100%;
    position: relative;
}

/* Ensure the editor pane has proper height context */
.editor-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    overflow: hidden;
}

.editor-pane .monaco-container {
    flex: 1;
    position: relative;
    min-height: 400px;
}

/* Modal editor container - use ID selector for specificity */
#content-editor-modal {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
}

#content-editor-modal .monaco-editor {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
}

#content-editor-modal .overflow-guard {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
}

/* ==========================================================================
   GOOGLE PLACES AUTOCOMPLETE (PlaceAutocompleteElement)
   Global styles needed because the web component uses shadow DOM
   ========================================================================== */

gmp-place-autocomplete {
    width: 100%;
    display: block;
    --gmp-mat-color-surface: var(--bg-secondary);
    --gmp-mat-color-on-surface: var(--text-primary);
    --gmp-mat-color-primary: var(--accent-color);
}

/* Ensure the autocomplete suggestion list renders above dialogs */
.pac-container {
    z-index: 100000 !important;
}

/* ==========================================================================
   RECONNECT / ERROR / OFFLINE MODALS
   Glassmorphism overlay with animated shader background
   ========================================================================== */

.reconnect-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   Layout wrapper
   -------------------------------------------------------------------------- */

.reconnect-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100%;
    padding: var(--space-xl);
    padding-bottom: calc(42px + var(--space-xl) + var(--space-xl));
    overflow-y: auto;
    position: relative;
}

/* --------------------------------------------------------------------------
   Main card - glassmorphism with accent glow
   -------------------------------------------------------------------------- */

.reconnect-card {
    background: rgba(20, 28, 45, 0.92);
    border: 1px solid rgba(255, 152, 0, 0.20);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl) var(--space-2xl);
    box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 152, 0, 0.06);
    text-align: center;
    max-width: 460px;
    width: 100%;
    position: relative;
    z-index: 1;
    animation: cardFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

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

@keyframes borderGlow {
    0%, 100% {
        border-color: rgba(255, 152, 0, 0.2);
        box-shadow: var(--shadow-lg), 0 0 20px rgba(255, 152, 0, 0.06);
    }
    50% {
        border-color: rgba(255, 152, 0, 0.4);
        box-shadow: var(--shadow-lg), 0 0 30px rgba(255, 152, 0, 0.12);
    }
}

/* --------------------------------------------------------------------------
   Card logo canvas — inline glitching logo replacing the spinner
   -------------------------------------------------------------------------- */

.card-logo-canvas {
    display: block;
    width: clamp(140px, 60%, 200px);
    height: auto;
    aspect-ratio: 1395 / 540;
    margin: 0 auto var(--space-lg);
    pointer-events: none;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Title and subtitle
   -------------------------------------------------------------------------- */

.reconnect-title {
    font-family: var(--font-primary);
    font-weight: var(--font-bold);
    font-size: var(--text-2xl);
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.reconnect-subtitle {
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--space-xl) 0;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   Reconnect progress dots
   -------------------------------------------------------------------------- */

.reconnect-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.reconnect-dot {
    width: 6px;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--accent-color);
    opacity: 0.3;
    animation: dotBounce 1.4s ease-in-out infinite;
}

.reconnect-dot:nth-child(2) { animation-delay: 0.16s; }
.reconnect-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes dotBounce {
    0%, 80%, 100% { opacity: 0.25; transform: scale(1); }
    40%           { opacity: 1;    transform: scale(1.6); }
}

/* --------------------------------------------------------------------------
   Connected success state
   -------------------------------------------------------------------------- */

.reconnect-success-icon {
    color: var(--accent-color);
    font-size: 1.5rem;
    animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes successPop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* --------------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------------- */

.reconnect-divider {
    width: 48px;
    height: 1px;
    background: var(--border-color-medium);
    margin: 0 auto var(--space-lg);
}

/* --------------------------------------------------------------------------
   CTA label
   -------------------------------------------------------------------------- */

.reconnect-cta-label {
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin: 0 0 var(--space-sm) 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.reconnect-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

.reconnect-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-lg);
    background: var(--accent-color-5);
    border: 1px solid var(--accent-color-20);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-smooth);
    position: relative;
    z-index: 2;
}

.reconnect-btn:hover {
    background: var(--accent-color-15);
    border-color: var(--accent-color-40);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--accent-color-10);
}

.reconnect-btn--primary {
    background: var(--accent-color-15);
    border-color: var(--accent-color-30);
    color: var(--accent-light);
}

.reconnect-btn--primary:hover {
    background: var(--accent-color-20);
    border-color: var(--accent-color-50);
    color: var(--text-primary);
    box-shadow: 0 4px 16px var(--accent-color-20);
}

/* --------------------------------------------------------------------------
   Error action buttons (used inside #blazor-error-ui)
   -------------------------------------------------------------------------- */

.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Error Details / Diagnostic Log panel — collapsible
   -------------------------------------------------------------------------- */

.error-details-panel {
    background: rgba(15, 22, 38, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    bottom: var(--space-xl);
    left: 0;
    right: 0;
    margin: 0 auto;
    animation: panelFadeIn 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s ease,
                border-color 0.3s ease;
}

.error-details-panel.log-collapsed {
    max-height: 42px;
}

.error-details-panel.log-expanded {
    max-height: 30vh;
    background: rgba(15, 22, 38, 0.88);
    border-color: rgba(255, 255, 255, 0.10);
}

@keyframes panelBorderGlow {
    0%, 100% {
        border-color: rgba(255, 152, 0, 0.12);
    }
    50% {
        border-color: rgba(255, 152, 0, 0.28);
    }
}

.error-details-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: var(--font-medium);
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.error-details-header:hover {
    color: rgba(255, 255, 255, 0.50);
}

.log-expanded .error-details-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.45);
}

.log-toggle-chevron {
    margin-left: auto;
    font-size: 0.55rem;
    opacity: 0.3;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.error-details-header:hover .log-toggle-chevron {
    opacity: 0.5;
}

.log-expanded .log-toggle-chevron {
    transform: rotate(180deg);
    opacity: 0.5;
}

.error-details-content {
    padding: var(--space-md) var(--space-lg);
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.6;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    white-space: pre-wrap;
    word-break: break-word;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    opacity: 0;
    transition: opacity 0.35s ease 0.15s;
}

.log-expanded .error-details-content {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Log entry — scan-line typing reveal
   -------------------------------------------------------------------------- */

.log-entry {
    padding: 2px 0 2px var(--space-sm);
    border-left: 1px solid rgba(255, 255, 255, 0.10);
    margin-bottom: 2px;
    clip-path: inset(0 100% 0 0);
    animation: logScanReveal 0.5s steps(16) forwards;
    position: relative;
}

.log-entry::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 1px;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.15);
    opacity: 1;
    animation: logCursorFade 0.3s ease-out 0.5s forwards;
}

@keyframes logScanReveal {
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes logCursorFade {
    to {
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   Log shader — scrambled hex text inline with "Diagnostic Log" header.
   JS continuously regenerates garbled text; CSS styles and animates it.
   -------------------------------------------------------------------------- */

.log-shader-inline {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    margin: 0 var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.6em;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.15);
    transition: opacity 0.3s ease;
}

.log-expanded .log-shader-inline {
    opacity: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .reconnect-layout {
        padding: var(--space-md);
        padding-bottom: 0;
        gap: var(--space-lg);
    }

    .reconnect-card {
        padding: var(--space-xl) var(--space-lg);
    }

    .reconnect-buttons {
        flex-direction: column;
    }

    .error-details-panel {
        max-width: 100%;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        bottom: 0;
    }

    .error-details-panel.log-expanded {
        max-height: 25vh;
    }

    .error-details-panel.log-collapsed {
        max-height: 38px;
    }

    .error-details-header {
        padding: var(--space-xs) var(--space-md);
        font-size: 0.6rem;
    }

    .reconnect-title {
        font-size: var(--text-xl);
    }
}

/* ═══════════════════════════════════════════════════════════════
   POLYMORPH QUEUE V3 TOKENS (Phase 11)
   Priority glow colors + category chip palette.
   Reference: docs/superpowers/plans/2026-04-11-polymorph-queue-v3/
              appendices/A5-ui-redesign.md § CSS Tokens
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Queue Priority Glow Colors */
    --priority-p0-glow: var(--error-color);
    --priority-p1-glow: color-mix(in srgb, var(--error-color) 40%, var(--warning-color) 60%);
    --priority-p2-glow: var(--warning-color);
    --priority-p3-glow: color-mix(in srgb, var(--warning-color) 40%, var(--accent-color) 60%);
    --priority-p4-glow: var(--accent-color);
    --priority-p5-glow: var(--text-muted);

    /* Queue Category Colors */
    --category-repair:         color-mix(in srgb, var(--error-color) 55%, var(--accent-color) 45%);
    --category-repair-bg:      color-mix(in srgb, var(--error-color) 15%, var(--bg-card) 85%);
    --category-maintenance:    color-mix(in srgb, var(--warning-color) 60%, var(--info-color) 40%);
    --category-maintenance-bg: color-mix(in srgb, var(--warning-color) 15%, var(--bg-card) 85%);
    --category-enhancement:    var(--info-color);
    --category-enhancement-bg: color-mix(in srgb, var(--info-color) 15%, var(--bg-card) 85%);
    --category-refactor:       color-mix(in srgb, var(--accent-color) 80%, var(--info-color) 20%);
    --category-refactor-bg:    color-mix(in srgb, var(--accent-color) 15%, var(--bg-card) 85%);
    --category-feature:        var(--success-color);
    --category-feature-bg:     color-mix(in srgb, var(--success-color) 15%, var(--bg-card) 85%);
}

/* ═══════════════════════════════════════════════════════════════
   POLYMORPH PIPELINE DASHBOARD TOKENS
   Stage colors, agent state indicators, animation durations,
   and glassmorphism intensities for the pipeline visualization.
   ═══════════════════════════════════════════════════════════════ */
:root {
    /* Pipeline Stage Colors — used in PipelineFlow and PipelineTimeline */
    --stage-queued:         var(--text-muted);
    --stage-security:       var(--warning-color);
    --stage-architecture:   var(--info-color);
    --stage-implementation: var(--accent-color);
    --stage-build:          var(--success-color);
    --stage-testing:        color-mix(in srgb, var(--secondary-accent) 80%, var(--info-color) 20%);
    --stage-review:         color-mix(in srgb, var(--warning-color) 60%, var(--accent-color) 40%);
    --stage-complete:       var(--success-color);
    --stage-failed:         var(--error-color);

    /* Pipeline Stage Background Variants (15% opacity) */
    --stage-queued-bg:         color-mix(in srgb, var(--text-muted) 15%, transparent);
    --stage-security-bg:       color-mix(in srgb, var(--warning-color) 15%, transparent);
    --stage-architecture-bg:   color-mix(in srgb, var(--info-color) 15%, transparent);
    --stage-implementation-bg: color-mix(in srgb, var(--accent-color) 15%, transparent);
    --stage-build-bg:          color-mix(in srgb, var(--success-color) 15%, transparent);
    --stage-testing-bg:        color-mix(in srgb, var(--secondary-accent) 15%, transparent);
    --stage-review-bg:         color-mix(in srgb, var(--warning-color) 12%, transparent);
    --stage-complete-bg:       color-mix(in srgb, var(--success-color) 15%, transparent);
    --stage-failed-bg:         color-mix(in srgb, var(--error-color) 15%, transparent);

    /* Agent State Indicators — used in AgentCard for pulse/glow effects */
    --agent-idle:       var(--text-muted);
    --agent-active:     var(--accent-color);
    --agent-completed:  var(--success-color);
    --agent-errored:    var(--error-color);
    --agent-waiting:    var(--warning-color);

    /* Pipeline Dashboard Glass Surfaces */
    --pipeline-glass:       rgba(30, 41, 59, 0.5);
    --pipeline-glass-hover: rgba(30, 41, 59, 0.65);
    --pipeline-glass-blur:  blur(12px);

    /* Pipeline Animation Durations (respect prefers-reduced-motion in components) */
    --pipeline-pulse-duration: 2s;
    --pipeline-flow-duration:  1.5s;
    --pipeline-stagger-delay:  0.05s;

    /* Pipeline VFX — Enhanced animation system for flagship visual effects */
    --pipeline-ambient-duration: 4s;
    --pipeline-ambient-easing: cubic-bezier(0.4, 0, 0.6, 1);
    --pipeline-card-enter-duration: 0.5s;
    --pipeline-card-enter-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --pipeline-error-shake-duration: 0.5s;
    --pipeline-data-flow-speed: 2s;
    --pipeline-heartbeat-duration: 3s;
    --pipeline-border-glow-duration: 4s;
    --pipeline-shimmer-duration: 2s;
    --pipeline-particle-duration: 8s;

    /* Pipeline Glass Depth Layers — increasing blur/opacity for depth */
    --pipeline-glass-deep:         rgba(15, 23, 42, 0.8);
    --pipeline-glass-deep-blur:    blur(20px);
    --pipeline-glass-surface:      rgba(30, 41, 59, 0.4);
    --pipeline-glass-surface-blur: blur(10px);
    --pipeline-glass-elevated:     rgba(45, 60, 80, 0.35);
    --pipeline-glass-elevated-blur: blur(8px);

    /* Pipeline Glow Effects — ambient glows for state indicators */
    --pipeline-glow-active:    0 0 20px color-mix(in srgb, var(--accent-color) 25%, transparent);
    --pipeline-glow-active-strong: 0 0 35px color-mix(in srgb, var(--accent-color) 40%, transparent);
    --pipeline-glow-success:   0 0 16px color-mix(in srgb, var(--success-color) 20%, transparent);
    --pipeline-glow-error:     0 0 16px color-mix(in srgb, var(--error-color) 25%, transparent);
    --pipeline-glow-warning:   0 0 16px color-mix(in srgb, var(--warning-color) 20%, transparent);

    /* Pipeline Border Luminance — accent borders for interactive elements */
    --pipeline-border-glow: color-mix(in srgb, var(--accent-color) 40%, transparent);
    --pipeline-border-glow-secondary: color-mix(in srgb, var(--secondary-accent) 30%, transparent);

    /* ═══════════════════════════════════════════════════════════════
       EVENT ENGINE V2 — workflow designer / canvas tokens
       ═══════════════════════════════════════════════════════════════ */
    --ee-canvas-bg: var(--bg-base, #0a0a0a);
    --ee-canvas-grid-size: 24px;
    --ee-canvas-grid-dot-size: 1.5px;
    --ee-canvas-grid-color: var(--border-color);

    --ee-node-bg: var(--glass-elevated, rgba(45, 60, 80, 0.35));
    --ee-node-border: var(--border-color);
    --ee-node-blur: var(--glass-blur, blur(12px));
    --ee-node-radius: var(--radius-lg);
    --ee-node-width: 256px;
    --ee-node-width-ai: 288px;
    --ee-node-stripe: 3px;
    --ee-node-shadow: var(--shadow-md);

    /* Per-node module accent color — overridden by component .razor.css with style="--ee-node-accent: …" */
    --ee-node-accent: var(--accent-color);

    /* Per-state (idle/hovered/selected/executing/succeeded/failed/skipped/ghost) */
    --ee-state-idle: var(--text-muted);
    --ee-state-hover: var(--accent-color);
    --ee-state-selected: var(--accent-color);
    --ee-state-executing: var(--accent-color);
    --ee-state-succeeded: var(--success-color);
    --ee-state-failed: var(--error-color);
    --ee-state-skipped: var(--text-muted);
    --ee-state-ghost: var(--accent-color);

    /* Edge / port colors */
    --ee-edge-success: var(--success-color);
    --ee-edge-failure: var(--error-color);
    --ee-edge-branch-yes: var(--success-color);
    --ee-edge-branch-no: var(--error-color);
    --ee-edge-generic: var(--accent-color);
    --ee-edge-stroke-width: 2px;
    --ee-edge-flow-dot-size: 4px;
    --ee-edge-flow-dot-duration: 1.5s;

    /* Port hit-target — N5b: bumped to 18px so the new ring-with-inner-dot
       marker reads cleanly. Hit-target stays 24px (handled by the port's
       `::before` -5px inset in WorkflowNodeCard.razor.css). */
    --ee-port-size: 14px;
    --ee-port-hit-target: 24px;

    /* Pulses + animations */
    --ee-pulse-duration: 4s;
    --ee-port-snap-duration: 0.4s;
    --ee-node-drop-duration: 0.3s;
    --ee-save-pulse-duration: 0.6s;
    --ee-ghost-shimmer-duration: 2s;

    /* Indigo-reasserted accent for the ee-root scope (admin shell uses orange globally) */
    --ee-accent: #3b82f6;
    --ee-accent-gradient: linear-gradient(135deg, #3b82f6, #06b6d4);

    /* Layout dimensions */
    --ee-toolbar-height: 2.75rem;
    --ee-monitor-height: 3rem;
    --ee-palette-width: 17.5rem;
    --ee-palette-rail-width: 3rem;
    --ee-properties-width: 22rem;

    /* AI dock */
    --ee-ai-dock-width: 380px;
    --ee-ai-dock-height: 480px;
}

/* Event Engine indigo accent reassertion (admin shell scopes accent to orange) */
.ee-root {
    --accent-color: #3b82f6;
    --accent-gradient: linear-gradient(135deg, #3b82f6, #06b6d4);
}

/* Module Explorer Phase 4 - Critical #C21 reduced-motion globally zeroes
   data-redraw transitions. Component-level reduced-motion blocks remain
   for animation-specific zeroing, but the tokens flatten globally here. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-data: 0s;
        --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* ═══════════════════════════════════════════════════════════════
   EVENT ENGINE V2 — schema-driven form field tokens (Task 12 Part A)
   ═══════════════════════════════════════════════════════════════
   Cross-cutting form-field styles consumed by the eight leaf field
   components under modules/Ayva.EventEngine/Components/Properties/
   Fields/. These are GLOBAL (non-scoped) so the components can stay
   dumb and the panel container can theme them by scope override
   later. All values resolve through the shared design tokens — zero
   hardcoded colors, fonts, spacing, or motion. */

.ee-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-sm) 0;
}

.ee-field-label {
    color: var(--text-primary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}

.ee-field-label-inline {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-direction: row;
}

.ee-field-required {
    color: var(--error-color);
    margin-left: 0.125rem;
}

.ee-field-optional {
    color: var(--text-muted);
    font-size: var(--text-xs);
    font-weight: var(--font-normal);
    margin-left: var(--space-xs);
}

.ee-field-description {
    color: var(--text-secondary);
    font-size: var(--text-xs);
    line-height: 1.4;
}

.ee-field-input {
    position: relative;
}

.ee-field-input input,
.ee-field-input textarea,
.ee-field-input select {
    width: 100%;
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast);
}

.ee-field-input input:focus,
.ee-field-input textarea:focus,
.ee-field-input select:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.ee-field-error {
    color: var(--error-color);
    font-size: var(--text-xs);
}

/* Code field — monospace + grow-with-content textarea. */
.ee-field-input .ee-field-code-textarea {
    font-family: var(--font-mono);
    min-height: 8rem;
    resize: vertical;
    line-height: 1.5;
}

/* Template field — chip on the right edge of the input. */
.ee-field-input-with-chip {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.ee-field-input-with-chip input,
.ee-field-input-with-chip select {
    flex: 1;
}

.ee-field-template-chip {
    flex: 0 0 auto;
    padding: var(--space-xs) var(--space-sm);
    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
    border-radius: var(--radius-sm);
    color: var(--accent-color);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.ee-field-template-chip:hover,
.ee-field-template-chip:focus {
    background: color-mix(in srgb, var(--accent-color) 25%, transparent);
    border-color: var(--accent-color);
    outline: none;
}

/* Boolean field — toggle switch styling on top of a real <input type="checkbox"> for a11y. */
.ee-field-boolean .ee-field-label {
    cursor: pointer;
}

.ee-field-toggle {
    position: relative;
    display: inline-block;
    width: 2.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
}

.ee-field-toggle input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.ee-field-toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    cursor: pointer;
}

.ee-field-toggle-slider::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.25rem - 6px);
    height: calc(1.25rem - 6px);
    background: var(--text-primary);
    border-radius: 50%;
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.ee-field-toggle input:checked + .ee-field-toggle-slider {
    background: color-mix(in srgb, var(--accent-color) 25%, var(--bg-secondary));
    border-color: var(--accent-color);
}

.ee-field-toggle input:checked + .ee-field-toggle-slider::before {
    transform: translateX(1rem);
    background: var(--accent-color);
}

.ee-field-toggle input:focus-visible + .ee-field-toggle-slider {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 30%, transparent);
}

.ee-field-toggle-text {
    display: inline-flex;
    align-items: center;
}

/* KeyValuePairs field — row layout + add/remove controls. */
.ee-field-kv {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.ee-field-kv-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: var(--space-xs);
    align-items: center;
}

.ee-field-kv-row input {
    padding: var(--space-xs) var(--space-sm);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    transition: border-color var(--transition-fast);
}

.ee-field-kv-row input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent);
}

.ee-field-kv-remove {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    font-size: var(--text-base);
    line-height: 1;
}

.ee-field-kv-remove:hover,
.ee-field-kv-remove:focus {
    color: var(--error-color);
    border-color: var(--error-color);
    outline: none;
}

.ee-field-kv-add {
    align-self: flex-start;
    padding: var(--space-xs) var(--space-sm);
    background: transparent;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--accent-color);
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}

.ee-field-kv-add:hover,
.ee-field-kv-add:focus {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    outline: none;
}

.ee-field-kv-warning {
    padding: var(--space-xs) var(--space-sm);
    background: color-mix(in srgb, var(--warning-color) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning-color) 35%, transparent);
    border-radius: var(--radius-sm);
    color: var(--warning-color);
    font-size: var(--text-xs);
}

/* Secret field — empty state CTA + redacted indicator. */
.ee-field-secret-empty {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--bg-secondary);
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--text-xs);
}

.ee-field-secret-empty .material-icons {
    color: var(--text-muted);
    font-size: var(--text-base);
}

.ee-field-secret-empty a {
    color: var(--accent-color);
    text-decoration: underline;
}

.ee-field-secret-redacted {
    color: var(--accent-color);
    font-size: var(--text-base);
}

/* ─────────────────────────────────────────────────────────────────────────
   Landing primitives — utilities shared across marketing landing sections.
   Moved out of the old monolithic LandingPage.razor.css into the global
   theme so every isolated section component can reference them.

   Scoped under .ayva-landing to avoid colliding with .section-title
   definitions in Ayva.Onboarding / Ayva.Network.Monitoring isolated CSS.
   ───────────────────────────────────────────────────────────────────────── */

:root {
    --landing-section-min-vh: 80vh;
    --landing-rail-stagger: 120ms;
    --landing-mesh-pulse-duration: 3s;
    --landing-orbit-rotation: 60s;
}

.ayva-landing .gradient-text {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.ayva-landing .section-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-md);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-color);
    background: var(--accent-color-8);
    border: 1px solid var(--accent-color-20);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-md);
}

.ayva-landing .section-title {
    font-family: var(--font-primary);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: var(--font-bold);
    line-height: 1.15;
    color: var(--text-primary);
    margin: 0 0 var(--space-md);
}

.ayva-landing .section-subtitle {
    font-size: clamp(1rem, 1.25vw, 1.25rem);
    line-height: 1.6;
    color: var(--text-secondary);
    max-width: 60ch;
    margin: 0 auto var(--space-xl);
}

.ayva-landing .glow-line {
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--accent-color-30) 50%,
        transparent 100%
    );
    opacity: 0;
    transition: opacity var(--transition-normal);
}

.ayva-landing .glow-line:hover,
.ayva-landing *:hover > .glow-line {
    opacity: 1;
}

/* IntersectionObserver-driven entry animation. Components add this class
   to elements that should fade-up on scroll; landing-helpers.js toggles
   .reveal-visible when the element enters the viewport. */
.ayva-landing .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.ayva-landing .reveal.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

.ayva-landing .reveal-delay-1 { transition-delay: 100ms; }
.ayva-landing .reveal-delay-2 { transition-delay: 200ms; }
.ayva-landing .reveal-delay-3 { transition-delay: 300ms; }
.ayva-landing .reveal-delay-4 { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
    .ayva-landing .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────
   AI rails — shared layout for ResponsiveProactiveRail, MemoryAdaptationRail,
   SecurityGatingRail (Tasks 17, 19, 21). Selectors scoped under .ayva-landing
   to prevent global cascade. Using .razor.css isolation would triplicate this
   block; keeping it here matches the pattern already established for
   .section-title, .reveal, etc. above.
   ───────────────────────────────────────────────────────────────────────── */

.ayva-landing .ai-rail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-2xl);
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
    min-height: 80vh;
}

.ayva-landing .ai-rail--visual-left .ai-rail-visual { order: -1; }
.ayva-landing .ai-rail--visual-right .ai-rail-visual { order: 1; }

.ayva-landing .ai-rail-headline {
    font-family: var(--font-primary);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    line-height: 1.15;
    margin: 0 0 var(--space-md);
    position: relative;
    padding-bottom: var(--space-sm);
}

.ayva-landing .ai-rail-headline::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 3px;
    background: var(--accent-gradient);
    border-radius: var(--radius-full);
}

.ayva-landing .ai-rail-body {
    color: var(--text-secondary);
    font-size: var(--text-base);
    line-height: 1.65;
    margin: 0 0 var(--space-md);
    max-width: 56ch;
}

.ayva-landing .ai-rail-proof {
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--accent-color-5);
    border-left: 2px solid var(--accent-color);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.ayva-landing .ai-rail-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1.3 / 1;
}

@media (max-width: 1024px) {
    .ayva-landing .ai-rail {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
    .ayva-landing .ai-rail--visual-left .ai-rail-visual,
    .ayva-landing .ai-rail--visual-right .ai-rail-visual { order: 1; }
}