/*
 * RAGENAIZER THEME CONFIGURATION
 * ================================
 * Master theme file for white-label customization.
 * Modify these values to customize your brand.
 * Changes here will affect the entire application.
 *
 * To customize for your brand:
 * 1. Change --brand-primary to your main brand color
 * 2. Adjust --brand-primary-light and --brand-primary-dark accordingly
 * 3. Update --gradient-primary for button gradients
 * 4. Optionally adjust semantic colors, grays, and other values
 *
 * Example: To change to green brand:
 * --brand-primary: #059669;
 * --brand-primary-light: #10b981;
 * --brand-primary-dark: #047857;
 */

:root {
  /* ═══════════════════════════════════════════════════════════════════════════
     BRAND COLORS - Primary colors for your brand identity
     ═══════════════════════════════════════════════════════════════════════════ */
  --brand-primary: #3b82f6;           /* Main brand color (Blue) */
  --brand-primary-rgb: 59, 130, 246;  /* RGB values for rgba() usage */
  --brand-primary-light: #60a5fa;     /* Lighter variant - hover states */
  --brand-primary-dark: #2563eb;      /* Darker variant - active states */
  --brand-secondary: #8b5cf6;         /* Secondary accent (Purple) */
  --brand-accent: #6366f1;            /* Accent highlights (Indigo) */

  /* ═══════════════════════════════════════════════════════════════════════════
     SEMANTIC COLORS - Status and feedback colors
     ═══════════════════════════════════════════════════════════════════════════ */
  --color-success: #10b981;
  --color-success-light: #dcfce7;
  --color-success-dark: #059669;
  --color-success-text: #166534;

  --color-danger: #ef4444;
  --color-danger-light: #fee2e2;
  --color-danger-dark: #dc2626;
  --color-danger-text: #991b1b;

  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #d97706;
  --color-warning-text: #92400e;

  --color-info: #3b82f6;
  --color-info-light: #dbeafe;
  --color-info-dark: #2563eb;
  --color-info-text: #1e40af;

  --color-purple: #8b5cf6;
  --color-purple-light: #ede9fe;
  --color-purple-dark: #7c3aed;
  --color-purple-text: #5b21b6;

  /* Text colors for use on colored status backgrounds (consistent across themes) */
  --text-on-success-bg: #1e293b;           /* Dark slate for text on success-light backgrounds */
  --text-on-success-bg-secondary: #475569; /* Medium slate for secondary text */
  --text-on-danger-bg: #1e293b;            /* Dark slate for text on danger-light backgrounds */
  --text-on-danger-bg-secondary: #475569;  /* Medium slate for secondary text */
  --text-on-warning-bg: #1e293b;           /* Dark slate for text on warning-light backgrounds */
  --text-on-warning-bg-secondary: #475569; /* Medium slate for secondary text */

  /* Solid status card backgrounds (for cards that need predictable backgrounds) */
  --status-card-success-bg: #dcfce7;       /* Light green for success cards */
  --status-card-danger-bg: #fee2e2;        /* Light red for danger cards */
  --status-card-warning-bg: #fef3c7;       /* Light amber for warning cards */

  /* Accent variants for gradients */
  --color-success-light-accent: #34d399;
  --color-danger-light-accent: #f87171;
  --color-warning-light-accent: #fbbf24;
  --color-orange: #f97316;

  /* Additional accent colors
     DEPRECATION NOTE: Prefer --brand-* variables for new components.
     These legacy colors are kept for backward compatibility. */
  --color-primary: #6366f1;      /* Legacy - use --brand-primary instead */
  --color-cyan: #06b6d4;
  --color-cyan-dark: #0891b2;

  /* ═══════════════════════════════════════════════════════════════════════════
     NEUTRAL COLORS - Grayscale palette
     ═══════════════════════════════════════════════════════════════════════════ */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;

  /* ═══════════════════════════════════════════════════════════════════════════
     TEXT COLORS
     ═══════════════════════════════════════════════════════════════════════════ */
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --text-disabled: #cbd5e1;
  --text-inverse: #ffffff;
  --text-link: var(--brand-primary);
  --text-link-hover: var(--brand-primary-dark);

  /* ═══════════════════════════════════════════════════════════════════════════
     BACKGROUND COLORS
     ═══════════════════════════════════════════════════════════════════════════ */
  --bg-body: #f5f7fa;
  --bg-card: #ffffff;
  --bg-card-rgb: 255, 255, 255;        /* RGB values for rgba() glass usage */
  --bg-card-hover: #f9fafb;
  --bg-sidebar: #ffffff;
  --bg-navbar: #ffffff;
  --bg-input: #ffffff;
  --bg-input-disabled: #f3f4f6;
  --bg-modal-overlay: rgba(0, 0, 0, 0.5);
  --bg-tooltip: #1f2937;

  /* ═══════════════════════════════════════════════════════════════════════════
     BORDER COLORS & STYLES
     ═══════════════════════════════════════════════════════════════════════════ */
  --border-color: rgba(0, 0, 0, 0.1);
  --border-color-light: rgba(0, 0, 0, 0.06);
  --border-color-strong: rgba(0, 0, 0, 0.15);
  --border-color-focus: var(--brand-primary);
  --border-radius-xs: 4px;
  --border-radius-sm: 6px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --border-radius-full: 9999px;

  /* ═══════════════════════════════════════════════════════════════════════════
     SHADOWS
     ═══════════════════════════════════════════════════════════════════════════ */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.15);
  --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.2);
  --shadow-toast: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.05);

  /* ═══════════════════════════════════════════════════════════════════════════
     BUTTON GRADIENTS
     ═══════════════════════════════════════════════════════════════════════════ */
  --gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  --gradient-primary-hover: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--brand-secondary) 0%, #7c3aed 100%);
  --gradient-success: linear-gradient(135deg, var(--color-success) 0%, var(--color-success-dark) 100%);
  --gradient-danger: linear-gradient(135deg, var(--color-danger) 0%, var(--color-danger-dark) 100%);
  --gradient-warning: linear-gradient(135deg, var(--color-warning) 0%, var(--color-warning-dark) 100%);
  --gradient-info: linear-gradient(135deg, var(--color-info) 0%, var(--color-info-dark) 100%);
  --gradient-accent: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-secondary) 100%);

  /* ═══════════════════════════════════════════════════════════════════════════
     BACKGROUND GRADIENTS (for pages/sections)
     ═══════════════════════════════════════════════════════════════════════════ */
  --gradient-page-bg: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  --gradient-page-bg-alt: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  --gradient-header: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
  --gradient-sidebar: linear-gradient(180deg, var(--bg-sidebar) 0%, var(--gray-50) 100%);
  --gradient-card-highlight: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-secondary) 100%);

  /* ═══════════════════════════════════════════════════════════════════════════
     GLASSMORPHISM EFFECTS
     ═══════════════════════════════════════════════════════════════════════════ */
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-bg-light: rgba(255, 255, 255, 0.5);
  --glass-bg-strong: rgba(255, 255, 255, 0.9);
  --glass-bg-dark: rgba(0, 0, 0, 0.5);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-border-light: rgba(255, 255, 255, 0.1);
  --glass-blur: blur(20px);
  --glass-blur-light: blur(10px);
  --glass-blur-strong: blur(40px);

  /* ═══════════════════════════════════════════════════════════════════════════
     TYPOGRAPHY
     ═══════════════════════════════════════════════════════════════════════════ */
  --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-family-mono: 'SF Mono', 'Consolas', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;

  /* ═══════════════════════════════════════════════════════════════════════════
     SPACING SCALE
     ═══════════════════════════════════════════════════════════════════════════ */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ═══════════════════════════════════════════════════════════════════════════
     TRANSITIONS
     ═══════════════════════════════════════════════════════════════════════════ */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;
  --transition-colors: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
  --transition-transform: transform 200ms ease;
  --transition-all: all 200ms ease;

  /* ═══════════════════════════════════════════════════════════════════════════
     Z-INDEX SCALE
     ═══════════════════════════════════════════════════════════════════════════ */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;

  /* ═══════════════════════════════════════════════════════════════════════════
     ICON COLORS
     ═══════════════════════════════════════════════════════════════════════════ */
  --icon-primary: var(--text-primary);
  --icon-secondary: var(--text-secondary);
  --icon-muted: var(--text-muted);
  --icon-inverse: var(--text-inverse);
  --icon-folder: #f59e0b;
  --icon-file: var(--brand-secondary);
  --icon-default: var(--gray-500);

  /* ═══════════════════════════════════════════════════════════════════════════
     FOCUS & INTERACTION STATES
     ═══════════════════════════════════════════════════════════════════════════ */
  --focus-ring: 0 0 0 3px rgba(59, 130, 246, 0.3);
  --focus-ring-offset: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--brand-primary);
  --hover-overlay: rgba(0, 0, 0, 0.04);
  --hover-overlay-light: rgba(0, 0, 0, 0.02);
  --hover-overlay-subtle: rgba(0, 0, 0, 0.03);
  --hover-overlay-medium: rgba(0, 0, 0, 0.05);
  --hover-overlay-strong: rgba(0, 0, 0, 0.08);
  --hover-overlay-dark: rgba(0, 0, 0, 0.1);
  --hover-overlay-darker: rgba(0, 0, 0, 0.12);
  --active-overlay: rgba(0, 0, 0, 0.08);
  --selected-bg: rgba(59, 130, 246, 0.1);
  --selected-bg-light: rgba(59, 130, 246, 0.08);
  --selected-bg-strong: rgba(59, 130, 246, 0.15);
  --selected-bg-stronger: rgba(59, 130, 246, 0.2);
  --selected-border: var(--brand-primary);

  /* ═══════════════════════════════════════════════════════════════════════════
     OVERLAY & BACKDROP COLORS
     ═══════════════════════════════════════════════════════════════════════════ */
  --overlay-dark: rgba(0, 0, 0, 0.5);
  --overlay-darker: rgba(0, 0, 0, 0.6);
  --overlay-darkest: rgba(0, 0, 0, 0.7);
  --overlay-near-opaque: rgba(0, 0, 0, 0.8);
  --overlay-almost-opaque: rgba(0, 0, 0, 0.85);
  --overlay-opaque: rgba(0, 0, 0, 0.9);
  --overlay-light: rgba(0, 0, 0, 0.2);
  --overlay-lighter: rgba(0, 0, 0, 0.15);
  --overlay-medium: rgba(0, 0, 0, 0.3);
  --overlay-medium-strong: rgba(0, 0, 0, 0.35);
  --overlay-medium-dark: rgba(0, 0, 0, 0.4);
  --overlay-subtle: rgba(0, 0, 0, 0.3);

  /* ═══════════════════════════════════════════════════════════════════════════
     WHITE TRANSPARENCY (for glass/dark backgrounds)
     ═══════════════════════════════════════════════════════════════════════════ */
  --white-5: rgba(255, 255, 255, 0.05);
  --white-8: rgba(255, 255, 255, 0.08);
  --white-10: rgba(255, 255, 255, 0.1);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-25: rgba(255, 255, 255, 0.25);
  --white-30: rgba(255, 255, 255, 0.3);
  --white-40: rgba(255, 255, 255, 0.4);
  --white-50: rgba(255, 255, 255, 0.5);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-70: rgba(255, 255, 255, 0.7);
  --white-80: rgba(255, 255, 255, 0.8);
  --white-90: rgba(255, 255, 255, 0.9);
  --white-95: rgba(255, 255, 255, 0.95);
  --white-98: rgba(255, 255, 255, 0.98);

  /* ═══════════════════════════════════════════════════════════════════════════
     BRAND COLOR SHADOWS (for colored button shadows)
     ═══════════════════════════════════════════════════════════════════════════ */
  --shadow-primary-sm: 0 2px 8px rgba(59, 130, 246, 0.3);
  --shadow-primary-md: 0 4px 12px rgba(59, 130, 246, 0.4);
  --shadow-primary-lg: 0 4px 16px rgba(59, 130, 246, 0.4);
  --shadow-success-sm: 0 2px 8px rgba(16, 185, 129, 0.3);
  --shadow-success-md: 0 4px 12px rgba(16, 185, 129, 0.4);
  --shadow-success-lg: 0 4px 16px rgba(16, 185, 129, 0.4);
  --shadow-danger-sm: 0 2px 8px rgba(239, 68, 68, 0.3);
  --shadow-danger-md: 0 4px 12px rgba(239, 68, 68, 0.4);
  --shadow-danger-lg: 0 4px 16px rgba(239, 68, 68, 0.4);
  --shadow-warning-sm: 0 2px 8px rgba(245, 158, 11, 0.4);
  --shadow-warning-md: 0 4px 12px rgba(245, 158, 11, 0.4);

  /* ═══════════════════════════════════════════════════════════════════════════
     STATUS COLOR TRANSPARENCY VARIANTS
     ═══════════════════════════════════════════════════════════════════════════ */
  --success-alpha-10: rgba(16, 185, 129, 0.1);
  --success-alpha-20: rgba(16, 185, 129, 0.2);
  --success-alpha-30: rgba(16, 185, 129, 0.3);
  --success-alpha-40: rgba(16, 185, 129, 0.4);
  --danger-alpha-10: rgba(239, 68, 68, 0.1);
  --danger-alpha-15: rgba(239, 68, 68, 0.15);
  --danger-alpha-20: rgba(239, 68, 68, 0.2);
  --danger-alpha-30: rgba(239, 68, 68, 0.3);
  --warning-alpha-10: rgba(245, 158, 11, 0.1);
  --warning-alpha-20: rgba(245, 158, 11, 0.2);
  --purple-alpha-10: rgba(139, 92, 246, 0.1);
  --purple-alpha-20: rgba(139, 92, 246, 0.2);
  --purple-alpha-30: rgba(139, 92, 246, 0.3);
  --brand-alpha-10: rgba(59, 130, 246, 0.1);
  --brand-alpha-20: rgba(59, 130, 246, 0.2);
  --secondary-alpha-15: rgba(139, 92, 246, 0.15);
  --accent-alpha-5: rgba(99, 102, 241, 0.05);
  --accent-alpha-8: rgba(99, 102, 241, 0.08);
  --accent-alpha-15: rgba(99, 102, 241, 0.15);
  --accent-alpha-20: rgba(99, 102, 241, 0.2);

  /* Brand Color Transparent Variants (for backgrounds, borders) */
  --primary-transparent: rgba(59, 130, 246, 0.15);
  --primary-transparent-strong: rgba(59, 130, 246, 0.2);
  --primary-shadow: rgba(59, 130, 246, 0.3);
  --secondary-transparent: rgba(139, 92, 246, 0.15);
  --danger-transparent: rgba(239, 68, 68, 0.3);
  --success-transparent: rgba(16, 185, 129, 0.3);
  --success-transparent-strong: rgba(16, 185, 129, 0.4);
  --warning-transparent-strong: rgba(245, 158, 11, 0.4);

  /* Semantic Color Light Backgrounds (for status pills, tags) */
  --success-bg-light: rgba(34, 197, 94, 0.08);
  --success-border-light: rgba(34, 197, 94, 0.2);
  --accent-bg-light: rgba(99, 102, 241, 0.08);
  --accent-border-light: rgba(99, 102, 241, 0.2);
  --warning-bg-light: rgba(245, 158, 11, 0.08);
  --warning-border-light: rgba(245, 158, 11, 0.2);

  /* Input Alt Background */
  --bg-input-alt: rgba(250, 250, 250, 0.8);
  --bg-elevated: rgba(245, 245, 248, 0.95);

  /* Additional Brand Color Transparent Variants */
  --danger-alpha-40: rgba(239, 68, 68, 0.4);
  --secondary-alpha-5: rgba(139, 92, 246, 0.05);
  --overlay-light-strong: rgba(0, 0, 0, 0.25);

  /* Warning Color Variants */
  --warning-highlight: rgba(255, 193, 7, 0.9);
  --warning-bg-subtle: rgba(255, 243, 205, 0.5);
  --warning-border: rgba(255, 193, 7, 0.3);

  /* Additional Background Variants */
  --purple-bg-light: rgba(108, 92, 231, 0.08);
  --danger-bg-light: rgba(231, 76, 60, 0.08);
  --gray-overlay: rgba(107, 114, 128, 0.1);

  /* ═══════════════════════════════════════════════════════════════════════════
     FORM CONTROLS
     ═══════════════════════════════════════════════════════════════════════════ */
  --input-height-sm: 32px;
  --input-height-md: 40px;
  --input-height-lg: 48px;
  --input-padding-x: 12px;
  --input-padding-y: 8px;
  --input-border-width: 1px;
  --input-placeholder-color: var(--gray-400);

  /* ═══════════════════════════════════════════════════════════════════════════
     BUTTON SIZES
     ═══════════════════════════════════════════════════════════════════════════ */
  --btn-height-xs: 28px;
  --btn-height-sm: 32px;
  --btn-height-md: 40px;
  --btn-height-lg: 48px;
  --btn-height-xl: 56px;
  --btn-padding-x-sm: 12px;
  --btn-padding-x-md: 16px;
  --btn-padding-x-lg: 24px;

  /* ═══════════════════════════════════════════════════════════════════════════
     BUTTON TEXT COLORS (Accessibility - auto-contrast)
     These are overridden by theme.js for proper contrast based on background
     ═══════════════════════════════════════════════════════════════════════════ */
  --btn-primary-text: #ffffff;
  --btn-secondary-text: #ffffff;
  --btn-success-text: #ffffff;
  --btn-danger-text: #ffffff;
  --btn-warning-text: #000000;
  --btn-info-text: #ffffff;
  --btn-accent-text: #ffffff;
  --header-text: #ffffff;

  /* ═══════════════════════════════════════════════════════════════════════════
     AVATAR SIZES
     ═══════════════════════════════════════════════════════════════════════════ */
  --avatar-size-xs: 24px;
  --avatar-size-sm: 32px;
  --avatar-size-md: 40px;
  --avatar-size-lg: 48px;
  --avatar-size-xl: 64px;
  --avatar-size-2xl: 96px;

  /* Avatar colors - text is auto-calculated by theme.js for contrast */
  --avatar-bg: var(--brand-primary);
  --avatar-bg-hover: var(--brand-primary-dark);
  --avatar-text: #ffffff;  /* Overridden by theme.js getContrastColor() */

  /* ═══════════════════════════════════════════════════════════════════════════
     BADGE & TAG STYLES
     ═══════════════════════════════════════════════════════════════════════════ */
  --badge-padding-x: 8px;
  --badge-padding-y: 2px;
  --badge-font-size: 0.75rem;
  --badge-border-radius: var(--border-radius-full);

  /* ═══════════════════════════════════════════════════════════════════════════
     CARD STYLES
     ═══════════════════════════════════════════════════════════════════════════ */
  --card-padding: var(--space-6);
  --card-padding-sm: var(--space-4);
  --card-padding-lg: var(--space-8);
  --card-border-radius: var(--border-radius-lg);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  /* ═══════════════════════════════════════════════════════════════════════════
     MODAL STYLES
     ═══════════════════════════════════════════════════════════════════════════ */
  --modal-width-sm: 400px;
  --modal-width-md: 560px;
  --modal-width-lg: 720px;
  --modal-width-xl: 900px;
  --modal-padding: var(--space-6);
  --modal-border-radius: var(--border-radius-xl);

  /* ═══════════════════════════════════════════════════════════════════════════
     TABLE STYLES
     ═══════════════════════════════════════════════════════════════════════════ */
  --table-header-bg: var(--gray-50);
  --table-row-hover-bg: var(--gray-50);
  --table-border-color: var(--gray-200);
  --table-cell-padding-x: var(--space-4);
  --table-cell-padding-y: var(--space-3);

  /* ═══════════════════════════════════════════════════════════════════════════
     TOGGLE/SWITCH STYLES
     ═══════════════════════════════════════════════════════════════════════════ */
  --toggle-bg: var(--gray-300);
  --toggle-bg-checked: var(--brand-primary);
  --toggle-bg-partial: var(--color-warning);
  --toggle-knob-bg: var(--text-inverse);
  --toggle-width: 44px;
  --toggle-height: 24px;
  --toggle-width-sm: 36px;
  --toggle-height-sm: 20px;

  /* ═══════════════════════════════════════════════════════════════════════════
     BUTTON STYLES
     ═══════════════════════════════════════════════════════════════════════════ */
  --btn-primary-bg: var(--gray-900);
  --btn-primary-hover: var(--gray-700);
  /* --btn-primary-text is defined in BUTTON TEXT COLORS section above */
  --tooltip-bg: var(--gray-900);
  --tooltip-text: #ffffff;
  --tooltip-border: var(--gray-700);

  /* ═══════════════════════════════════════════════════════════════════════════
     SIDEBAR STYLES
     ═══════════════════════════════════════════════════════════════════════════ */
  --sidebar-width: 280px;
  --sidebar-width-collapsed: 64px;
  --sidebar-item-height: 40px;
  --sidebar-item-padding: var(--space-3) var(--space-4);

  /* ═══════════════════════════════════════════════════════════════════════════
     NAVBAR STYLES
     ═══════════════════════════════════════════════════════════════════════════ */
  --navbar-height: 64px;
  --navbar-height-sm: 56px;
  --navbar-padding-x: var(--space-6);

  /* ═══════════════════════════════════════════════════════════════════════════
     BREAKPOINTS (for reference in media queries)
     ═══════════════════════════════════════════════════════════════════════════ */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DARK MODE - Override variables when [data-theme="dark"] is set
   Usage: Theme.setMode('dark') or Theme.toggleDarkMode()
   ═══════════════════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Background colors */
  --bg-body: #0f172a;
  --bg-card: #1e293b;
  --bg-card-rgb: 30, 41, 59;           /* RGB values for rgba() glass usage */
  --bg-card-hover: #334155;
  --bg-elevated: #1e293b;
  --bg-sunken: #020617;
  --bg-hover: #334155;
  --bg-input: #1e293b;
  --bg-input-disabled: #0f172a;

  /* Text colors */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --text-inverse: #ffffff; /* Keep white for icons on colored backgrounds */

  /* Border colors */
  --border-color: #334155;
  --border-color-light: #475569;
  --border-color-strong: #64748b;

  /* Gray scale (inverted) */
  --gray-50: #1e293b;
  --gray-100: #334155;
  --gray-200: #475569;
  --gray-300: #64748b;
  --gray-400: #94a3b8;
  --gray-500: #94a3b8;
  --gray-600: #cbd5e1;
  --gray-700: #e2e8f0;
  --gray-800: #f1f5f9;
  --gray-900: #f8fafc;
  --gray-950: #ffffff;

  /* Overlays */
  --overlay-light: rgba(255, 255, 255, 0.05);
  --overlay-medium: rgba(255, 255, 255, 0.1);
  --overlay-strong: rgba(255, 255, 255, 0.2);
  --overlay-subtle: rgba(255, 255, 255, 0.03);
  --hover-overlay: rgba(255, 255, 255, 0.08);
  --hover-overlay-strong: rgba(255, 255, 255, 0.15);
  --active-overlay: rgba(255, 255, 255, 0.12);

  /* Shadows (subtle glow instead of drop shadow) */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.5);

  /* Glass morphism (darker) */
  --glass-bg: rgba(30, 41, 59, 0.8);
  --glass-bg-light: rgba(30, 41, 59, 0.5);
  --glass-bg-strong: rgba(30, 41, 59, 0.95);
  --glass-border: rgba(255, 255, 255, 0.1);

  /* Page background gradient */
  --gradient-page-bg: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  --gradient-page-bg-alt: linear-gradient(135deg, #020617 0%, #0f172a 100%);

  /* Input styling */
  --input-bg: #1e293b;
  --input-border: #475569;
  --input-focus-border: var(--brand-primary);
  --input-placeholder-color: #64748b;

  /* Semantic color light variants (for badges/tags in dark mode) */
  --color-success-light: rgba(16, 185, 129, 0.2);
  --color-danger-light: rgba(239, 68, 68, 0.2);
  --color-warning-light: rgba(245, 158, 11, 0.2);
  --color-info-light: rgba(59, 130, 246, 0.2);
  --color-purple-light: rgba(139, 92, 246, 0.25);

  /* Secondary/purple text for dark mode visibility */
  --color-purple-text: #a78bfa;

  /* Semantic text colors (brighter for dark backgrounds) */
  --color-success-text: #4ade80;  /* Bright green for dark mode visibility */
  --color-danger-text: #f87171;   /* Brighter red for dark mode */
  --color-warning-text: #fbbf24;  /* Brighter amber for dark mode */
  --color-info-text: #60a5fa;     /* Bright blue for dark mode visibility */

  /* Text on colored status backgrounds (light text for dark mode) */
  --text-on-success-bg: #f1f5f9;           /* Light text for semi-transparent success backgrounds */
  --text-on-success-bg-secondary: #cbd5e1; /* Light secondary text */
  --text-on-danger-bg: #f1f5f9;            /* Light text for semi-transparent danger backgrounds */
  --text-on-danger-bg-secondary: #cbd5e1;  /* Light secondary text */
  --text-on-warning-bg: #f1f5f9;           /* Light text for semi-transparent warning backgrounds */
  --text-on-warning-bg-secondary: #cbd5e1; /* Light secondary text */

  /* Solid status card backgrounds (darker solid colors for dark mode) */
  --status-card-success-bg: #065f46;       /* Dark green for success cards - contrasts with light text */
  --status-card-danger-bg: #991b1b;        /* Dark red for danger cards - contrasts with light text */
  --status-card-warning-bg: #92400e;       /* Dark amber for warning cards - contrasts with light text */

  /* Alpha variants for dark mode */
  --success-alpha-10: rgba(16, 185, 129, 0.15);
  --success-alpha-15: rgba(16, 185, 129, 0.2);
  --success-alpha-20: rgba(16, 185, 129, 0.25);
  --danger-alpha-10: rgba(239, 68, 68, 0.15);
  --warning-alpha-10: rgba(245, 158, 11, 0.15);
  --info-alpha-10: rgba(59, 130, 246, 0.15);
  --purple-alpha-10: rgba(139, 92, 246, 0.15);
  --purple-alpha-20: rgba(139, 92, 246, 0.25);
  --purple-alpha-30: rgba(139, 92, 246, 0.35);
  --brand-alpha-10: rgba(59, 130, 246, 0.15);
  --brand-alpha-20: rgba(59, 130, 246, 0.25);

  /* Button styles (inverted for dark mode) */
  --btn-primary-bg: #f1f5f9;
  --btn-primary-hover: #e2e8f0;
  --btn-primary-text: #0f172a;
  /* Tooltip stays dark for contrast in both modes */
  --tooltip-bg: #1e293b;
  --tooltip-text: #f1f5f9;
  --tooltip-border: #475569;

  /* Toggle/Switch - explicit dark mode colors for better visibility */
  --toggle-bg: #475569;
  --toggle-bg-checked: var(--brand-primary);
  --toggle-bg-partial: var(--color-warning);
  --toggle-knob-bg: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   DARK MODE COMPONENT OVERRIDES
   Specific component styling fixes for dark mode visibility
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Logo - Invert black logo to white in dark mode */
[data-theme="dark"] .navbar-logo,
[data-theme="dark"] .auth-logo-img,
[data-theme="dark"] .hero-logo,
[data-theme="dark"] .pre-meeting-logo,
[data-theme="dark"] .shared-logo,
[data-theme="dark"] .meeting-logo,
[data-theme="dark"] .theme-aware-logo {
  filter: invert(1);
  transition: filter var(--transition-base);
}

/* Light mode - ensure logo remains black (explicit for consistency) */
.navbar-logo,
.auth-logo-img,
.hero-logo,
.pre-meeting-logo,
.shared-logo,
.meeting-logo,
.theme-aware-logo {
  transition: filter var(--transition-base);
}

/* User Avatar - add ring effect for visibility in dark mode */
[data-theme="dark"] .user-avatar {
  background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
  border: 2px solid var(--white-50);
  box-shadow: 0 0 0 2px var(--info-alpha-10), 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .user-avatar:hover {
  border-color: var(--white-70);
  box-shadow: 0 0 0 3px var(--info-alpha-10), 0 6px 16px rgba(0, 0, 0, 0.5);
}

/* Search Box - fix background visibility in dark mode */
[data-theme="dark"] .search-box-modern {
  background: var(--bg-card);
  border-bottom-color: var(--border-color);
}

[data-theme="dark"] .search-box-modern input {
  color: var(--text-primary);
}

[data-theme="dark"] .search-box-modern input::placeholder {
  color: var(--text-muted);
}

/* Participants search in modals */
[data-theme="dark"] .participants-search {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .participants-search input {
  color: var(--text-primary);
}

/* Dropdown search */
[data-theme="dark"] .dropdown-search {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .dropdown-search input {
  color: var(--text-primary);
}

/* Auth dashboard search input - fix white background in dark mode */
[data-theme="dark"] .search-input {
  background: var(--bg-card) !important;
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .search-input:focus {
  background: var(--bg-elevated) !important;
  border-color: var(--brand-primary);
}

[data-theme="dark"] .search-input::placeholder {
  color: var(--text-muted);
}

/* User avatar small - fix white circles in dark mode */
[data-theme="dark"] .user-avatar-small {
  background: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%) !important;
  color: var(--text-inverse) !important;
}

/* Roles search input in modal */
[data-theme="dark"] .roles-search-input {
  background: var(--bg-card) !important;
  color: var(--text-primary);
  border-color: var(--border-color);
}

[data-theme="dark"] .roles-search-input:focus {
  background: var(--bg-elevated) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL SELECT/DROPDOWN DARK MODE STYLING
   Ensures all native select and option elements are theme-aware
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Dark mode - All select elements */
[data-theme="dark"] select,
[data-theme="dark"] .form-select {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Dark mode - All option elements */
[data-theme="dark"] select option,
[data-theme="dark"] .form-select option {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* Dark mode - Option hover states (where supported) */
[data-theme="dark"] select option:hover,
[data-theme="dark"] select option:focus,
[data-theme="dark"] select option:checked {
  background-color: var(--selected-bg) !important;
  color: var(--text-primary) !important;
}

/* Dark mode - Disabled options */
[data-theme="dark"] select option:disabled,
[data-theme="dark"] .form-select option:disabled {
  background-color: var(--bg-body) !important;
  color: var(--text-muted) !important;
}

/* Dark mode - Select focus state */
[data-theme="dark"] select:focus,
[data-theme="dark"] .form-select:focus {
  outline: none;
  border-color: var(--brand-primary) !important;
  box-shadow: var(--focus-ring);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOBAL INPUT DARK MODE STYLING
   Ensures all form inputs including date, text, number are theme-aware
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Dark mode - All form-control inputs (Bootstrap class) */
[data-theme="dark"] .form-control,
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="url"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"],
[data-theme="dark"] textarea {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-color) !important;
}

/* Dark mode - Input focus state */
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: var(--focus-ring);
  outline: none;
}

/* Dark mode - Input placeholder */
[data-theme="dark"] .form-control::placeholder,
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}

/* Dark mode - Disabled inputs */
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] input:disabled,
[data-theme="dark"] textarea:disabled {
  background-color: var(--bg-body) !important;
  color: var(--text-muted) !important;
  cursor: not-allowed;
}

/* Dark mode - Date input calendar icon */
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7);
  cursor: pointer;
}

/* Dark mode - Force color scheme for date/time inputs */
[data-theme="dark"] input[type="date"],
[data-theme="dark"] input[type="datetime-local"],
[data-theme="dark"] input[type="time"],
[data-theme="dark"] input[type="month"],
[data-theme="dark"] input[type="week"] {
  color-scheme: dark;
}

/* Dark mode - Date input inner elements (WebKit) */
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit,
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-fields-wrapper,
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-text,
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-month-field,
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-day-field,
[data-theme="dark"] input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--text-primary) !important;
  background-color: transparent !important;
}

[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-text,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-month-field,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-day-field,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-year-field,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
[data-theme="dark"] input[type="datetime-local"]::-webkit-datetime-edit-ampm-field {
  color: var(--text-primary) !important;
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITY CLASSES - Common patterns using CSS variables
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Hidden utility */
.hidden {
  display: none !important;
}

/* Text colors */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-inverse { color: var(--text-inverse) !important; }
.text-success { color: var(--color-success) !important; }
.text-success-dark { color: var(--color-success-text) !important; }
.text-danger { color: var(--color-danger) !important; }
.text-danger-dark { color: var(--color-danger-text) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-warning-dark { color: var(--color-warning-text) !important; }
.text-info { color: var(--color-info) !important; }
.text-info-dark { color: var(--color-info-text) !important; }
.text-brand { color: var(--brand-primary) !important; }

/* Background colors */
.bg-body { background-color: var(--bg-body) !important; }
.bg-card { background-color: var(--bg-card) !important; }
.bg-primary { background-color: var(--brand-primary) !important; }
.bg-secondary { background-color: var(--brand-secondary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-success-light { background-color: var(--color-success-light) !important; }
.bg-danger { background-color: var(--color-danger) !important; }
.bg-danger-light { background-color: var(--color-danger-light) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-warning-light { background-color: var(--color-warning-light) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-info-light { background-color: var(--color-info-light) !important; }
.bg-gray-50 { background-color: var(--gray-50) !important; }
.bg-gray-100 { background-color: var(--gray-100) !important; }
.bg-gray-200 { background-color: var(--gray-200) !important; }

/* Border colors */
.border-primary { border-color: var(--brand-primary) !important; }
.border-secondary { border-color: var(--brand-secondary) !important; }
.border-success { border-color: var(--color-success) !important; }
.border-danger { border-color: var(--color-danger) !important; }
.border-warning { border-color: var(--color-warning) !important; }
.border-default { border-color: var(--border-color) !important; }

/* Gradient backgrounds */
.bg-gradient-primary { background: var(--gradient-primary) !important; }
.bg-gradient-secondary { background: var(--gradient-secondary) !important; }
.bg-gradient-success { background: var(--gradient-success) !important; }
.bg-gradient-danger { background: var(--gradient-danger) !important; }
.bg-gradient-warning { background: var(--gradient-warning) !important; }

/* Glass effects */
.bg-glass {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.bg-glass-strong {
  background: var(--glass-bg-strong) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
.shadow-none { box-shadow: none !important; }

/* Border radius utilities */
.rounded-sm { border-radius: var(--border-radius-sm) !important; }
.rounded-md { border-radius: var(--border-radius-md) !important; }
.rounded-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-xl { border-radius: var(--border-radius-xl) !important; }
.rounded-full { border-radius: var(--border-radius-full) !important; }

/* Transition utilities */
.transition-fast { transition: var(--transition-fast) !important; }
.transition-base { transition: var(--transition-base) !important; }
.transition-slow { transition: var(--transition-slow) !important; }
.transition-colors { transition: var(--transition-colors) !important; }
.transition-all { transition: var(--transition-all) !important; }

/* Focus ring */
.focus-ring:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Hover overlay effect */
.hover-overlay {
  position: relative;
}

.hover-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hover-overlay);
  opacity: 0;
  transition: var(--transition-fast);
  pointer-events: none;
  border-radius: inherit;
}

.hover-overlay:hover::after {
  opacity: 1;
}