/*
 * 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: #6366f1;
    --accent-hover: #818cf8;
    --accent-light: #a5b4fc;
    --accent-dark: #4f46e5;
    --accent-gradient: linear-gradient(135deg, #6366f1, #8b5cf6);
    --accent-gradient-hover: linear-gradient(135deg, #818cf8, #a78bfa);

    /* Secondary accent for gradients and highlights */
    --secondary-accent: #8b5cf6;
    --secondary-hover: #a78bfa;
    --accent-secondary: var(--secondary-accent);  /* Alias for backward compatibility */
    --accent-bg: rgba(99, 102, 241, 0.3);  /* Semi-transparent accent for active states */

    /* Secondary accent opacity variants */
    --secondary-accent-5: rgba(139, 92, 246, 0.05);
    --secondary-accent-10: rgba(139, 92, 246, 0.1);
    --secondary-accent-20: rgba(139, 92, 246, 0.2);
    --secondary-accent-30: rgba(139, 92, 246, 0.3);
    --secondary-accent-40: rgba(139, 92, 246, 0.4);
    --secondary-accent-50: rgba(139, 92, 246, 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(99, 102, 241, 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(99, 102, 241, 0.5);
    --border-accent: rgba(99, 102, 241, 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: 99, 102, 241;
    --success-color-rgb: 16, 185, 129;
    --warning-color-rgb: 245, 158, 11;
    --error-color-rgb: 239, 68, 68;
    --info-color-rgb: 59, 130, 246;

    /* 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: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.15);
    --info-border: rgba(59, 130, 246, 0.3);
    --info-text: #60a5fa;
    --info-color-light: rgba(59, 130, 246, 0.1);

    /* Discord brand color */
    --discord-color: #5865F2;
    --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-5: rgba(99, 102, 241, 0.05);   /* 5% opacity - very subtle highlights */
    --accent-color-10: rgba(99, 102, 241, 0.1);
    --accent-color-15: rgba(99, 102, 241, 0.15);
    --accent-color-20: rgba(99, 102, 241, 0.2);
    --accent-color-30: rgba(99, 102, 241, 0.3);
    --accent-color-40: rgba(99, 102, 241, 0.4);
    --accent-color-50: rgba(99, 102, 241, 0.5);
    --accent-color-light: #a5b4fc;

    /* Opacity variants for success colors */
    --success-color-5: rgba(16, 185, 129, 0.05);
    --success-color-10: rgba(16, 185, 129, 0.1);
    --success-color-15: rgba(16, 185, 129, 0.15);
    --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-10: rgba(245, 158, 11, 0.1);
    --warning-color-15: rgba(245, 158, 11, 0.15);
    --warning-color-20: rgba(245, 158, 11, 0.2);
    --warning-color-30: rgba(245, 158, 11, 0.3);
    --warning-color-40: rgba(245, 158, 11, 0.4);

    /* Opacity variants for error colors */
    --error-color-5: rgba(239, 68, 68, 0.05);
    --error-color-10: rgba(239, 68, 68, 0.1);
    --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);

    /* 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-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);

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

    /* 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(99, 102, 241, 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(99, 102, 241, 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(99, 102, 241, 0.2);
    --shadow-glow-strong: 0 0 40px rgba(99, 102, 241, 0.3);
    --shadow-accent: 0 8px 25px rgba(99, 102, 241, 0.3);
    --shadow-focus: 0 0 0 0.125rem rgba(99, 102, 241, 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(99, 102, 241, 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(99, 102, 241, 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(99, 102, 241, 0.15);
    --glass-dialog-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 0.1);
    --glass-dialog-shadow-inset: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 40px rgba(99, 102, 241, 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);

    /* Background overlay gradients */
    --bg-radial-accent: radial-gradient(ellipse at 20% 30%, rgba(99, 102, 241, 0.08) 0%, transparent 50%);
    --bg-radial-secondary: radial-gradient(ellipse at 80% 70%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);
    --bg-radial-center: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 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-10: rgba(0, 0, 0, 0.1);
    --black-overlay-15: rgba(0, 0, 0, 0.15);
    --black-overlay-20: rgba(0, 0, 0, 0.2);
    --black-overlay-30: rgba(0, 0, 0, 0.3);
    --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-02: rgba(255, 255, 255, 0.02);
    --white-overlay-03: rgba(255, 255, 255, 0.03);
    --white-overlay-05: rgba(255, 255, 255, 0.05);
    --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-50: rgba(255, 255, 255, 0.5);
    --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 */

    /* 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 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-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(99, 102, 241, 0.3);
    --glow-accent-strong: 0 0 30px rgba(99, 102, 241, 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);

    /* ==========================================================================
       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);
}

/* ==========================================================================
   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; }

/* 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 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !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(99, 102, 241, 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: #a78bfa;
    --mud-palette-secondary-hover: rgba(139, 92, 246, 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(99, 102, 241, 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(139, 92, 246, 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(99, 102, 241, 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;
    gap: var(--space-2xl);
    width: 100%;
    min-height: 100%;
    padding: var(--space-xl);
    justify-content: center;
    overflow-y: auto;
}

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

.reconnect-card {
    background: var(--glass-elevated);
    backdrop-filter: var(--glass-blur-strong);
    -webkit-backdrop-filter: var(--glass-blur-strong);
    border: 1px solid rgba(255, 152, 0, 0.25);
    border-radius: var(--radius-2xl);
    padding: var(--space-2xl) var(--space-2xl);
    box-shadow: var(--shadow-lg), 0 0 24px rgba(255, 152, 0, 0.08);
    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),
               borderGlow 4s ease-in-out infinite;
}

@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(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
   -------------------------------------------------------------------------- */

.error-details-panel {
    background: var(--glass-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 152, 0, 0.15);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 800px;
    min-height: 100px;
    max-height: 35vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cardFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.15s both,
               panelBorderGlow 4s ease-in-out 0.15s infinite;
}

@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-md) var(--space-lg);
    border-bottom: 1px solid rgba(255, 152, 0, 0.1);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--highlight-orange);
    flex-shrink: 0;
}

.error-details-content {
    padding: var(--space-lg);
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--text-secondary);
    line-height: 1.7;
    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, 152, 0, 0.2) transparent;
}

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

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

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

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

    .error-details-panel {
        max-height: 28vh;
    }

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

}