@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
:root {
  /* ===== CORE COLOR PALETTE ===== */
  /* Gray Scale */
  --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;
  /* Primary Colors */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #9ca3af; /* Change from #3b82f6 to heather gray */
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  /* Success Colors */
  --success-50: #ecfdf5;
  --success-100: #d1fae5;
  --success-200: #a7f3d0;
  --success-300: #6ee7b7;
  --success-400: #34d399;
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;
  --success-800: #065f46;
  --success-900: #064e3b;
  /* Warning Colors */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;
  /* Error Colors */
  --error-50: #fef2f2;
  --error-100: #fee2e2;
  --error-200: #fecaca;
  --error-300: #fca5a5;
  --error-400: #f87171;
  --error-500: #ef4444;
  --error-600: #dc2626;
  --error-700: #b91c1c;
  --error-800: #991b1b;
  --error-900: #7f1d1d;
  /* ===== MISSING SEMANTIC COLOR ASSIGNMENTS ===== */
  /* Primary Semantic Colors */
  --color-primary: var(--primary-500);
  --color-primary-light: var(--primary-400);
  --color-primary-dark: var(--primary-600);
  --color-primary-contrast: #ffffff;
  /* Secondary Semantic Colors */
  --color-secondary: var(--gray-500);
  --color-secondary-light: var(--gray-400);
  --color-secondary-dark: var(--gray-600);
  --color-secondary-contrast: #ffffff;
  /* Success Semantic Colors */
  --color-success: var(--success-500);
  --color-success-light: var(--success-400);
  --color-success-dark: var(--success-600);
  --color-success-contrast: #ffffff;
  /* Warning Semantic Colors */
  --color-warning: var(--warning-500);
  --color-warning-light: var(--warning-400);
  --color-warning-dark: var(--warning-600);
  --color-warning-contrast: #ffffff;
  /* Danger/Error Semantic Colors */
  --color-danger: var(--error-500);
  --color-danger-light: var(--error-400);
  --color-danger-dark: var(--error-600);
  --color-danger-contrast: #ffffff;
  /* Info Semantic Colors */
  --color-info: var(--primary-500);
  --color-info-light: var(--primary-400);
  --color-info-dark: var(--primary-600);
  --color-info-contrast: #ffffff;
  /* ===== SURFACE COLORS ===== */
  /* Surface Colors for Components */
  --surface-1: var(--color-bg-secondary);
  --surface-2: var(--color-bg-tertiary);
  --surface-3: var(--gray-200);
  --surface-hover: var(--gray-100);
  --surface-active: var(--gray-200);
  --surface-selected: var(--primary-50);
  --surface-disabled: var(--gray-100);
  /* Enhanced Surface Hierarchy */
  --bg-primary-dark: var(--gray-900);
  --bg-secondary-dark: var(--gray-800);
  --bg-tertiary-dark: var(--gray-700);
  --surface-dark: var(--gray-800);
  --surface-elevated-dark: var(--gray-700);
  /* Text Hierarchy */
  --text-primary-dark: var(--gray-100);
  --text-secondary-dark: var(--gray-300);
  --text-muted-dark: var(--gray-500);
  /* Border Colors */
  --border-primary-dark: var(--gray-700);
  --border-secondary-dark: var(--gray-600);
  /* Interactive States */
  --hover-dark: var(--gray-700);
  --active-dark: var(--gray-600);
  --focus-dark: var(--primary-400);
  /* ===== DARK MODE COLOR PALETTE ===== */
  /* Dark Mode Base Colors */
  --dark-bg-primary: #0f0f0f; /* Main background */
  --dark-bg-secondary: #1a1a1a; /* Secondary surfaces */
  --dark-bg-tertiary: #262626; /* Elevated surfaces */
  --dark-bg-elevated: #2d2d2d; /* Cards, modals */
  --dark-surface: #333333; /* Interactive surfaces */
  --dark-surface-hover: #404040; /* Hover states */
  /* Text Colors */
  --dark-text-primary: #ffffff; /* Primary text */
  --dark-text-secondary: #e5e5e5; /* Secondary text */
  --dark-text-muted: #a3a3a3; /* Muted text */
  --dark-text-disabled: #737373; /* Disabled text */
  /* Border Colors */
  --dark-border-primary: #404040;
  --dark-border-secondary: #525252;
  /* Text Colors (Semantic Aliases) */
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-tertiary);
  --text-inverse: var(--color-text-inverse);
  --text-muted: var(--color-text-muted);
  /* Border Colors (Semantic Aliases) */
  --border-primary: var(--color-border-primary);
  --border-secondary: var(--color-border-secondary);
  --border-hover: var(--gray-300);
  --border-focus: var(--color-border-focus);
  --border-error: var(--color-border-error);
  --border-success: var(--color-border-success);
  /* ===== LAYOUT VARIABLES ===== */
  /* Header Heights */
  --header-height: 60px;
  --toolbar-height: 48px;
  --footer-height: 40px;
  /* Sidebar Widths */
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 60px;
  --properties-panel-width: 320px;
  /* Z-Index Scale */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  /* ===== ALPHA COLOR VARIABLES ===== */
  /* Adding missing alpha variables referenced in the original file */
  --color-primary-alpha-10: rgba(59, 130, 246, 0.1);
  --color-primary-alpha-20: rgba(59, 130, 246, 0.2);
  --color-primary-alpha-50: rgba(59, 130, 246, 0.5);
  --color-error-alpha-20: rgba(239, 68, 68, 0.2);
  --color-error-alpha-50: rgba(239, 68, 68, 0.5);
  --color-success-alpha-20: rgba(16, 185, 129, 0.2);
  --color-success-alpha-50: rgba(16, 185, 129, 0.5);
  --color-warning-alpha-20: rgba(245, 158, 11, 0.2);
  --color-warning-alpha-50: rgba(245, 158, 11, 0.5);
  /* ===== SEMANTIC COLOR ASSIGNMENTS ===== */
  /* Background Colors */
  --color-bg-primary: var(--gray-50);
  --color-bg-secondary: #ffffff;
  --color-bg-tertiary: var(--gray-100);
  --color-bg-overlay: rgba(0, 0, 0, 0.5);
  /* Text Colors */
  --color-text-primary: var(--gray-900);
  --color-text-secondary: var(--gray-700);
  --color-text-tertiary: var(--gray-500);
  --color-text-inverse: #ffffff;
  --color-text-muted: var(--gray-400);
  /* Border Colors */
  --color-border-primary: var(--gray-200);
  --color-border-secondary: var(--gray-300);
  --color-border-focus: var(--primary-500);
  --color-border-error: var(--error-500);
  --color-border-success: var(--success-500);
  /* Interactive Colors */
  --color-interactive-primary: var(--primary-500);
  --color-interactive-primary-hover: var(--primary-600);
  --color-interactive-primary-active: var(--primary-700);
  --color-interactive-secondary: var(--gray-100);
  --color-interactive-secondary-hover: var(--gray-200);
  --color-interactive-secondary-active: var(--gray-300);
  /* Icon Colors */
  --icon-color-primary: var(--gray-700);
  --icon-color-secondary: var(--gray-500);
  --icon-color-tertiary: var(--gray-400);
  --icon-color-active: var(--primary-500);
  --icon-color-inactive: var(--gray-400);
  --icon-color-hover: var(--gray-900);
  /* ===== ICON SIZES ===== */
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;
  /* Shadow Colors */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-color-light: rgba(0, 0, 0, 0.05);
  --shadow-color-medium: rgba(0, 0, 0, 0.15);
  --shadow-color-heavy: rgba(0, 0, 0, 0.25);
  /* ===== SPACING SYSTEM ===== */
  /* Base Grid System */
  --grid-base: 8px;
  --grid-unit: var(--grid-base);
  /* Spacing Scale (8px Grid) */
  --spacing-0: 0;
  --spacing-1: calc(var(--grid-base) * 0.125); /* 1px */
  --spacing-2: calc(var(--grid-base) * 0.25); /* 2px */
  --spacing-xs: calc(var(--grid-base) * 0.5); /* 4px */
  --spacing-sm: var(--grid-base); /* 8px */
  --spacing-md: calc(var(--grid-base) * 2); /* 16px */
  --spacing-lg: calc(var(--grid-base) * 3); /* 24px */
  --spacing-xl: calc(var(--grid-base) * 4); /* 32px */
  --spacing-2xl: calc(var(--grid-base) * 5); /* 40px */
  --spacing-3xl: calc(var(--grid-base) * 6); /* 48px */
  --spacing-4xl: calc(var(--grid-base) * 8); /* 64px */
  --spacing-5xl: calc(var(--grid-base) * 10); /* 80px */
  --spacing-6xl: calc(var(--grid-base) * 12); /* 96px */
  /* Component Spacing */
  --spacing-component-xs: var(--spacing-xs); /* 4px - tight spacing */
  --spacing-component-sm: var(--spacing-sm); /* 8px - compact spacing */
  --spacing-component-md: var(--spacing-md); /* 16px - default spacing */
  --spacing-component-lg: var(--spacing-lg); /* 24px - loose spacing */
  --spacing-component-xl: var(--spacing-xl); /* 32px - extra loose */
  /* Layout Spacing */
  --spacing-section: var(--spacing-lg); /* 24px - between sections */
  --spacing-panel: var(--spacing-md); /* 16px - panel padding */
  --spacing-panel-compact: var(--spacing-sm); /* 8px - compact panel padding */
  --spacing-container: var(--spacing-xl); /* 32px - container padding */
  --spacing-page: var(--spacing-2xl); /* 40px - page margins */
  /* Form Spacing */
  --form-group-spacing: var(--spacing-md); /* 16px - between form groups */
  --form-label-spacing: var(--spacing-xs); /* 4px - label to input */
  --form-help-spacing: var(--spacing-xs); /* 4px - input to help text */
  --form-section-spacing: var(--spacing-lg); /* 24px - between form sections */
  /* List Spacing */
  --list-item-padding: var(--spacing-sm); /* 8px - list item padding */
  --list-item-spacing: var(--spacing-xs); /* 4px - between list items */
  --list-section-spacing: var(--spacing-md); /* 16px - between list sections */
  /* Card Spacing */
  --card-padding: var(--spacing-md); /* 16px - card content padding */
  --card-padding-sm: var(--spacing-sm); /* 8px - compact card padding */
  --card-padding-lg: var(--spacing-lg); /* 24px - spacious card padding */
  --card-spacing: var(--spacing-md); /* 16px - between cards */
  /* Navigation Spacing */
  --nav-item-padding: var(--spacing-sm); /* 8px - nav item padding */
  --nav-item-spacing: var(--spacing-xs); /* 4px - between nav items */
  --nav-section-spacing: var(--spacing-md); /* 16px - between nav sections */
  /* Responsive Spacing Adjustments */
  --spacing-mobile-reduction: 0.75; /* 75% of desktop spacing on mobile */
  --spacing-tablet-reduction: 0.875; /* 87.5% of desktop spacing on tablet */
  /* ===== GRID LAYOUT SYSTEM ===== */
  /* Grid Layout Variables */
  --grid-columns: 12;
  --grid-gap: var(--spacing-md); /* 16px */
  --grid-gap-sm: var(--spacing-sm); /* 8px */
  --grid-gap-lg: var(--spacing-lg); /* 24px */
  /* Container Widths */
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-fluid: 100%;
  /* Breakpoints */
  --breakpoint-xs: 480px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  /* ===== COMPONENT DIMENSIONS ===== */
  /* Component Heights */
  --height-input: calc(var(--grid-base) * 4); /* 32px */
  --height-input-sm: calc(var(--grid-base) * 3); /* 24px */
  --height-input-lg: calc(var(--grid-base) * 5); /* 40px */
  --height-button: calc(var(--grid-base) * 4); /* 32px */
  --height-button-sm: calc(var(--grid-base) * 3); /* 24px */
  --height-button-lg: calc(var(--grid-base) * 5); /* 40px */
  --height-header: calc(var(--grid-base) * 6); /* 48px */
  --height-toolbar: calc(var(--grid-base) * 5); /* 40px */
  --height-tab: calc(var(--grid-base) * 4); /* 32px */
  /* Width Constraints */
  --width-sidebar: calc(var(--grid-base) * 32); /* 256px */
  --width-sidebar-collapsed: calc(var(--grid-base) * 6); /* 48px */
  --width-panel: calc(var(--grid-base) * 40); /* 320px */
  --width-panel-wide: calc(var(--grid-base) * 50); /* 400px */
  --width-modal-sm: calc(var(--grid-base) * 50); /* 400px */
  --width-modal-md: calc(var(--grid-base) * 75); /* 600px */
  --width-modal-lg: calc(var(--grid-base) * 100); /* 800px */
  --width-modal-xl: calc(var(--grid-base) * 125); /* 1000px */
  /* Minimum Touch Targets */
  --touch-target-min: calc(var(--grid-base) * 5.5); /* 44px - iOS/Android minimum */
  --touch-target-comfortable: calc(var(--grid-base) * 6); /* 48px - comfortable touch */
  /* ===== TYPOGRAPHY SYSTEM ===== */
  /* Font Families */
  --font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  --font-family-serif: "Georgia", "Times New Roman", "Times", serif;
  --font-family-mono: "JetBrains Mono", "SF Mono", "Monaco", "Inconsolata", "Roboto Mono", "Source Code Pro", "Menlo", "Consolas", "DejaVu Sans Mono", monospace;
  --font-family-display: var(--font-family-sans);
  --font-family-body: var(--font-family-sans);
  --font-family-code: var(--font-family-mono);
  /* Font Weights */
  --font-weight-thin: 100;
  --font-weight-extralight: 200;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  /* Semantic Font Weights */
  --font-weight-body: var(--font-weight-normal);
  --font-weight-heading: var(--font-weight-semibold);
  --font-weight-label: var(--font-weight-medium);
  --font-weight-button: var(--font-weight-medium);
  --font-weight-emphasis: var(--font-weight-semibold);
  --font-weight-strong: var(--font-weight-bold);
  /* Font Sizes (Type Scale) */
  --font-size-2xs: 0.625rem; /* 10px */
  --font-size-xs: 0.6875rem; /* 11px */
  --font-size-sm: 0.75rem; /* 12px */
  --font-size-base: 0.8125rem; /* 13px */
  --font-size-md: 0.875rem; /* 14px */
  --font-size-lg: 1rem; /* 16px */
  --font-size-xl: 1.125rem; /* 18px */
  --font-size-2xl: 1.25rem; /* 20px */
  --font-size-3xl: 1.5rem; /* 24px */
  --font-size-4xl: 1.75rem; /* 28px */
  --font-size-5xl: 2rem; /* 32px */
  --font-size-6xl: 2.5rem; /* 40px */
  --font-size-7xl: 3rem; /* 48px */
  --font-size-8xl: 4rem; /* 64px */
  --font-size-9xl: 5rem; /* 80px */
  /* Semantic Font Sizes */
  --font-size-caption: var(--font-size-xs); /* 11px - captions, help text */
  --font-size-small: var(--font-size-sm); /* 12px - small text, labels */
  --font-size-body: var(--font-size-base); /* 13px - body text, inputs */
  --font-size-body-large: var(--font-size-md); /* 14px - larger body text */
  --font-size-button: var(--font-size-sm); /* 12px - button text */
  --font-size-input: var(--font-size-base); /* 13px - form inputs */
  --font-size-label: var(--font-size-sm); /* 12px - form labels */
  /* Heading Sizes */
  --font-size-h1: var(--font-size-3xl); /* 24px */
  --font-size-h2: var(--font-size-2xl); /* 20px */
  --font-size-h3: var(--font-size-xl); /* 18px */
  --font-size-h4: var(--font-size-lg); /* 16px */
  --font-size-h5: var(--font-size-md); /* 14px */
  --font-size-h6: var(--font-size-base); /* 13px */
  /* Display Sizes */
  --font-size-display-sm: var(--font-size-4xl); /* 28px */
  --font-size-display-md: var(--font-size-5xl); /* 32px */
  --font-size-display-lg: var(--font-size-6xl); /* 40px */
  --font-size-display-xl: var(--font-size-7xl); /* 48px */
  /* Line Heights */
  --line-height-none: 1;
  --line-height-tight: 1.1;
  --line-height-snug: 1.2;
  --line-height-normal: 1.3;
  --line-height-relaxed: 1.4;
  --line-height-loose: 1.5;
  --line-height-extra-loose: 1.6;
  /* Semantic Line Heights */
  --line-height-heading: var(--line-height-snug); /* 1.2 - headings */
  --line-height-body: var(--line-height-normal); /* 1.3 - body text */
  --line-height-caption: var(--line-height-normal); /* 1.3 - captions */
  --line-height-button: var(--line-height-normal); /* 1.3 - buttons */
  --line-height-input: var(--line-height-normal); /* 1.3 - form inputs */
  --line-height-display: var(--line-height-tight); /* 1.1 - large display text */
  /* Letter Spacing */
  --letter-spacing-tighter: -0.05em;
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;
  /* Semantic Letter Spacing */
  --letter-spacing-heading: var(--letter-spacing-tight); /* -0.025em */
  --letter-spacing-body: var(--letter-spacing-normal); /* 0 */
  --letter-spacing-caption: var(--letter-spacing-normal); /* 0 */
  --letter-spacing-button: var(--letter-spacing-normal); /* 0 */
  --letter-spacing-label: var(--letter-spacing-normal); /* 0 */
  --letter-spacing-uppercase: var(--letter-spacing-wide); /* 0.025em */
  --letter-spacing-display: var(--letter-spacing-tighter); /* -0.05em */
  /* Text Decoration */
  --text-decoration-thickness: 1px;
  --text-decoration-offset: 2px;
  --text-underline-offset: 0.125em;
  /* Component-Specific Typography */
  /* Panel Headers */
  --typography-panel-header-size: var(--font-size-md);
  --typography-panel-header-weight: var(--font-weight-semibold);
  --typography-panel-header-line-height: var(--line-height-heading);
  --typography-panel-header-spacing: var(--letter-spacing-normal);
  /* Section Labels */
  --typography-label-size: var(--font-size-sm);
  --typography-label-weight: var(--font-weight-medium);
  --typography-label-line-height: var(--line-height-normal);
  --typography-label-spacing: var(--letter-spacing-normal);
  /* Form Inputs */
  --typography-input-size: var(--font-size-base);
  --typography-input-weight: var(--font-weight-normal);
  --typography-input-line-height: var(--line-height-input);
  --typography-input-spacing: var(--letter-spacing-normal);
  /* Buttons */
  --typography-button-size: var(--font-size-sm);
  --typography-button-weight: var(--font-weight-medium);
  --typography-button-line-height: var(--line-height-button);
  --typography-button-spacing: var(--letter-spacing-normal);
  /* Help Text */
  --typography-help-size: var(--font-size-xs);
  --typography-help-weight: var(--font-weight-normal);
  --typography-help-line-height: var(--line-height-normal);
  --typography-help-spacing: var(--letter-spacing-normal);
  /* Navigation */
  --typography-nav-size: var(--font-size-sm);
  --typography-nav-weight: var(--font-weight-normal);
  --typography-nav-line-height: var(--line-height-normal);
  --typography-nav-spacing: var(--letter-spacing-normal);
  /* Menu Items */
  --typography-menu-size: var(--font-size-sm);
  --typography-menu-weight: var(--font-weight-normal);
  --typography-menu-line-height: var(--line-height-relaxed);
  --typography-menu-spacing: var(--letter-spacing-normal);
  /* Modal Headers */
  --typography-modal-header-size: var(--font-size-lg);
  --typography-modal-header-weight: var(--font-weight-semibold);
  --typography-modal-header-line-height: var(--line-height-heading);
  --typography-modal-header-spacing: var(--letter-spacing-normal);
  /* Code Text */
  --typography-code-size: var(--font-size-sm);
  --typography-code-weight: var(--font-weight-normal);
  --typography-code-line-height: var(--line-height-relaxed);
  --typography-code-spacing: var(--letter-spacing-normal);
  --typography-code-family: var(--font-family-mono);
  /* Responsive Typography */
  --typography-scale-mobile: 0.9; /* 90% of desktop sizes on mobile */
  --typography-scale-tablet: 0.95; /* 95% of desktop sizes on tablet */
  /* Text Rendering Optimization */
  --text-rendering: optimizeLegibility;
  --font-smoothing: antialiased;
  --webkit-font-smoothing: antialiased;
  --moz-osx-font-smoothing: grayscale;
  /* ===== BORDER & SHADOW SYSTEM ===== */
  /* Border Widths */
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --border-width-8: 8px;
  /* Semantic Border Widths */
  --border-width-thin: var(--border-width-1); /* 1px - default borders */
  --border-width-medium: var(--border-width-2); /* 2px - emphasized borders */
  --border-width-thick: var(--border-width-4); /* 4px - heavy borders */
  --border-width-focus: var(--border-width-2); /* 2px - focus indicators */
  --border-width-divider: var(--border-width-1); /* 1px - dividers */
  /* Border Radius */
  --border-radius-none: 0;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --border-radius-lg: 8px;
  --border-radius-xl: 12px;
  --border-radius-2xl: 16px;
  --border-radius-3xl: 24px;
  --border-radius-full: 9999px;
  /* Semantic Border Radius */
  --border-radius-button: var(--border-radius-sm); /* 4px - buttons */
  --border-radius-input: var(--border-radius-sm); /* 4px - form inputs */
  --border-radius-card: var(--border-radius-md); /* 6px - cards */
  --border-radius-panel: var(--border-radius-lg); /* 8px - panels */
  --border-radius-modal: var(--border-radius-xl); /* 12px - modals */
  --border-radius-tooltip: var(--border-radius-sm); /* 4px - tooltips */
  --border-radius-badge: var(--border-radius-full); /* full - badges */
  --border-radius-avatar: var(--border-radius-full); /* full - avatars */
  --border-radius-image: var(--border-radius-md); /* 6px - images */
  /* Border Styles */
  --border-style-solid: solid;
  --border-style-dashed: dashed;
  --border-style-dotted: dotted;
  --border-style-none: none;
  /* Semantic Border Styles */
  --border-style-default: var(--border-style-solid);
  --border-style-focus: var(--border-style-solid);
  --border-style-divider: var(--border-style-solid);
  --border-style-disabled: var(--border-style-dashed);
  /* Shadow Blur Values */
  --shadow-blur-xs: 2px;
  --shadow-blur-sm: 4px;
  --shadow-blur-md: 8px;
  --shadow-blur-lg: 16px;
  --shadow-blur-xl: 24px;
  --shadow-blur-2xl: 40px;
  /* Shadow Spread Values */
  --shadow-spread-none: 0;
  --shadow-spread-xs: 1px;
  --shadow-spread-sm: 2px;
  --shadow-spread-md: 4px;
  /* Shadow Offset Values */
  --shadow-offset-x-none: 0;
  --shadow-offset-x-xs: 1px;
  --shadow-offset-x-sm: 2px;
  --shadow-offset-x-md: 4px;
  --shadow-offset-x-lg: 8px;
  --shadow-offset-y-none: 0;
  --shadow-offset-y-xs: 1px;
  --shadow-offset-y-sm: 2px;
  --shadow-offset-y-md: 4px;
  --shadow-offset-y-lg: 8px;
  --shadow-offset-y-xl: 12px;
  --shadow-offset-y-2xl: 16px;
  /* Shadow Presets */
  --shadow-xs: 0 1px 2px 0 var(--shadow-color-light);
  --shadow-sm: 0 1px 3px 0 var(--shadow-color-light), 0 1px 2px -1px var(--shadow-color-light);
  --shadow-md: 0 4px 6px -1px var(--shadow-color), 0 2px 4px -2px var(--shadow-color-light);
  --shadow-lg: 0 10px 15px -3px var(--shadow-color), 0 4px 6px -4px var(--shadow-color-light);
  --shadow-xl: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color-light);
  --shadow-2xl: 0 25px 50px -12px var(--shadow-color-heavy);
  --shadow-inner: inset 0 2px 4px 0 var(--shadow-color-light);
  --shadow-none: none;
  /* Semantic Shadows */
  --shadow-button: var(--shadow-xs); /* subtle button shadow */
  --shadow-button-hover: var(--shadow-sm); /* button hover shadow */
  --shadow-button-active: var(--shadow-inner); /* button active shadow */
  --shadow-card: var(--shadow-sm); /* card shadow */
  --shadow-card-hover: var(--shadow-md); /* card hover shadow */
  --shadow-panel: var(--shadow-md); /* panel shadow */
  --shadow-modal: var(--shadow-xl); /* modal shadow */
  --shadow-dropdown: var(--shadow-lg); /* dropdown shadow */
  --shadow-tooltip: var(--shadow-md); /* tooltip shadow */
  --shadow-focus: 0 0 0 3px var(--color-primary-alpha-20); /* focus ring */
  --shadow-error: 0 0 0 3px var(--color-error-alpha-20); /* error focus ring */
  --shadow-success: 0 0 0 3px var(--color-success-alpha-20); /* success focus ring */
  /* Elevation System */
  --elevation-0: var(--shadow-none); /* flat */
  --elevation-1: var(--shadow-xs); /* slightly raised */
  --elevation-2: var(--shadow-sm); /* raised */
  --elevation-3: var(--shadow-md); /* elevated */
  --elevation-4: var(--shadow-lg); /* highly elevated */
  --elevation-5: var(--shadow-xl); /* floating */
  --elevation-6: var(--shadow-2xl); /* overlay */
  /* Component-Specific Borders */
  /* Form Elements */
  --border-input: var(--border-width-thin) var(--border-style-default) var(--color-border-primary);
  --border-input-focus: var(--border-width-focus) var(--border-style-focus) var(--color-primary);
  --border-input-error: var(--border-width-focus) var(--border-style-focus) var(--color-error);
  --border-input-success: var(--border-width-focus) var(--border-style-focus) var(--color-success);
  --border-input-disabled: var(--border-width-thin) var(--border-style-disabled) var(--color-border-secondary);
  /* Buttons */
  --border-button: var(--border-width-thin) var(--border-style-default) transparent;
  --border-button-primary: var(--border-width-thin) var(--border-style-default) var(--color-primary);
  --border-button-secondary: var(--border-width-thin) var(--border-style-default) var(--color-border-primary);
  --border-button-outline: var(--border-width-thin) var(--border-style-default) var(--color-primary);
  --border-button-focus: var(--border-width-focus) var(--border-style-focus) var(--color-primary);
  /* Cards & Panels */
  --border-card: var(--border-width-thin) var(--border-style-default) var(--color-border-primary);
  --border-panel: var(--border-width-thin) var(--border-style-default) var(--color-border-primary);
  --border-modal: var(--border-width-thin) var(--border-style-default) var(--color-border-secondary);
  /* Dividers */
  --border-divider: var(--border-width-divider) var(--border-style-divider) var(--color-border-secondary);
  --border-divider-strong: var(--border-width-divider) var(--border-style-divider) var(--color-border-primary);
  /* Navigation */
  --border-nav-item: var(--border-width-thin) var(--border-style-default) transparent;
  --border-nav-item-active: var(--border-width-medium) var(--border-style-default) var(--color-primary);
  --border-tab: var(--border-width-thin) var(--border-style-default) var(--color-border-primary);
  --border-tab-active: var(--border-width-medium) var(--border-style-default) var(--color-primary);
  /* Outline System */
  --outline-width: 2px;
  --outline-offset: 2px;
  --outline-style: solid;
  --outline-color-focus: var(--color-primary);
  --outline-color-error: var(--color-error);
  --outline-color-success: var(--color-success);
  /* Semantic Outlines */
  --outline-focus: var(--outline-width) var(--outline-style) var(--outline-color-focus);
  --outline-error: var(--outline-width) var(--outline-style) var(--outline-color-error);
  --outline-success: var(--outline-width) var(--outline-style) var(--outline-color-success);
  --outline-none: none;
  /* Ring System (Alternative to Outline) */
  --ring-width-0: 0;
  --ring-width-1: 1px;
  --ring-width-2: 2px;
  --ring-width-4: 4px;
  --ring-width-8: 8px;
  --ring-offset-width: 2px;
  --ring-offset-color: var(--color-bg-primary);
  /* Semantic Rings */
  --ring-focus: 0 0 0 var(--ring-width-2) var(--color-primary-alpha-50);
  --ring-error: 0 0 0 var(--ring-width-2) var(--color-error-alpha-50);
  --ring-success: 0 0 0 var(--ring-width-2) var(--color-success-alpha-50);
  --ring-warning: 0 0 0 var(--ring-width-2) var(--color-warning-alpha-50);
  /* Backdrop Filters */
  --backdrop-blur-none: blur(0);
  --backdrop-blur-xs: blur(2px);
  --backdrop-blur-sm: blur(4px);
  --backdrop-blur-md: blur(8px);
  --backdrop-blur-lg: blur(16px);
  --backdrop-blur-xl: blur(24px);
  --backdrop-blur-2xl: blur(40px);
  /* Semantic Backdrop Filters */
  --backdrop-modal: var(--backdrop-blur-sm);
  --backdrop-dropdown: var(--backdrop-blur-xs);
  --backdrop-overlay: var(--backdrop-blur-md);
  /* ===== ANIMATION & TRANSITION SYSTEM ===== */
  /* Transition Durations */
  --duration-instant: 0ms;
  --duration-fast: 100ms;
  --duration-normal: 150ms;
  --duration-medium: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;
  --duration-slowest: 750ms;
  --duration-ultra-slow: 1000ms;
  /* Semantic Durations */
  --duration-micro: var(--duration-fast); /* 100ms - micro interactions */
  --duration-quick: var(--duration-normal); /* 150ms - quick transitions */
  --duration-standard: var(--duration-medium); /* 200ms - standard transitions */
  --duration-deliberate: var(--duration-slow); /* 300ms - deliberate animations */
  --duration-entrance: var(--duration-slower); /* 500ms - entrance animations */
  --duration-complex: var(--duration-slowest); /* 750ms - complex animations */
  /* Transition Timing Functions */
  --ease-linear: linear;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-sharp: cubic-bezier(0.4, 0, 0.6, 1);
  --ease-acceleration: cubic-bezier(0.4, 0, 1, 1);
  --ease-deceleration: cubic-bezier(0, 0, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-legacy: cubic-bezier(0.4, 0, 0.2, 1);
  /* Bounce Easings */
  --ease-bounce-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-bounce-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-bounce-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Elastic Easings */
  --ease-elastic-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-elastic-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-elastic-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  /* Back Easings */
  --ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-back-in-out: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* Semantic Timing Functions */
  --ease-ui: var(--ease-standard); /* Standard UI transitions */
  --ease-hover: var(--ease-out); /* Hover state transitions */
  --ease-focus: var(--ease-emphasized); /* Focus state transitions */
  --ease-modal: var(--ease-emphasized-decelerate); /* Modal animations */
  --ease-dropdown: var(--ease-out); /* Dropdown animations */
  --ease-tooltip: var(--ease-out); /* Tooltip animations */
  --ease-slide: var(--ease-standard); /* Slide animations */
  --ease-fade: var(--ease-out); /* Fade animations */
  --ease-scale: var(--ease-back-out); /* Scale animations */
  --ease-bounce: var(--ease-bounce-out); /* Bounce animations */
  /* Animation Delays */
  --delay-none: 0ms;
  --delay-xs: 50ms;
  --delay-sm: 100ms;
  --delay-md: 150ms;
  --delay-lg: 200ms;
  --delay-xl: 300ms;
  --delay-2xl: 500ms;
  /* Stagger Delays */
  --stagger-delay: 50ms; /* Base stagger delay */
  --stagger-delay-sm: 25ms; /* Small stagger delay */
  --stagger-delay-lg: 75ms; /* Large stagger delay */
  --stagger-delay-xl: 100ms; /* Extra large stagger delay */
  /* Component Transitions */
  /* Button Transitions */
  --transition-button: all var(--duration-quick) var(--ease-ui);
  --transition-button-hover: all var(--duration-fast) var(--ease-hover);
  --transition-button-focus: all var(--duration-fast) var(--ease-focus);
  --transition-button-active: all var(--duration-micro) var(--ease-sharp);
  /* Form Element Transitions */
  --transition-input: border-color var(--duration-quick) var(--ease-ui), box-shadow var(--duration-quick) var(--ease-ui);
  --transition-input-focus: border-color var(--duration-fast) var(--ease-focus), box-shadow var(--duration-fast) var(--ease-focus);
  --transition-checkbox: all var(--duration-quick) var(--ease-ui);
  --transition-radio: all var(--duration-quick) var(--ease-ui);
  --transition-switch: all var(--duration-standard) var(--ease-ui);
  /* Navigation Transitions */
  --transition-nav: all var(--duration-quick) var(--ease-ui);
  --transition-tab: all var(--duration-quick) var(--ease-ui);
  --transition-menu: all var(--duration-quick) var(--ease-ui);
  --transition-sidebar: transform var(--duration-standard) var(--ease-ui);
  /* Modal & Overlay Transitions */
  --transition-modal: all var(--duration-standard) var(--ease-modal);
  --transition-modal-backdrop: opacity var(--duration-standard) var(--ease-fade);
  --transition-dropdown: all var(--duration-quick) var(--ease-dropdown);
  --transition-tooltip: all var(--duration-fast) var(--ease-tooltip);
  --transition-popover: all var(--duration-quick) var(--ease-dropdown);
  /* Card & Panel Transitions */
  --transition-card: all var(--duration-quick) var(--ease-ui);
  --transition-card-hover: all var(--duration-quick) var(--ease-hover);
  --transition-panel: all var(--duration-quick) var(--ease-ui);
  --transition-accordion: all var(--duration-standard) var(--ease-ui);
  /* Icon & Image Transitions */
  --transition-icon: all var(--duration-quick) var(--ease-ui);
  --transition-icon-hover: all var(--duration-fast) var(--ease-hover);
  --transition-image: all var(--duration-quick) var(--ease-ui);
  --transition-avatar: all var(--duration-quick) var(--ease-ui);
  /* Loading & Progress Transitions */
  --transition-progress: all var(--duration-standard) var(--ease-ui);
  --transition-spinner: all var(--duration-quick) var(--ease-ui);
  --transition-skeleton: all var(--duration-slower) var(--ease-ui);
  /* Animation Properties */
  /* Transform Origins */
  --transform-origin-center: center;
  --transform-origin-top: top;
  --transform-origin-bottom: bottom;
  --transform-origin-left: left;
  --transform-origin-right: right;
  --transform-origin-top-left: top left;
  --transform-origin-top-right: top right;
  --transform-origin-bottom-left: bottom left;
  --transform-origin-bottom-right: bottom right;
  /* Scale Values */
  --scale-0: 0;
  --scale-50: 0.5;
  --scale-75: 0.75;
  --scale-90: 0.9;
  --scale-95: 0.95;
  --scale-100: 1;
  --scale-105: 1.05;
  --scale-110: 1.1;
  --scale-125: 1.25;
  --scale-150: 1.5;
  /* Rotation Values */
  --rotate-0: 0deg;
  --rotate-45: 45deg;
  --rotate-90: 90deg;
  --rotate-180: 180deg;
  --rotate-270: 270deg;
  --rotate-360: 360deg;
  --rotate-neg-45: -45deg;
  --rotate-neg-90: -90deg;
  --rotate-neg-180: -180deg;
  /* Translation Values */
  --translate-0: 0;
  --translate-1: 0.25rem;
  --translate-2: 0.5rem;
  --translate-4: 1rem;
  --translate-8: 2rem;
  --translate-16: 4rem;
  --translate-full: 100%;
  --translate-half: 50%;
  /* Entrance Animations */
  --entrance-duration: var(--duration-entrance);
  --entrance-delay: var(--delay-sm);
  --entrance-easing: var(--ease-emphasized-decelerate);
  /* Fade Entrance */
  --fade-in-duration: var(--duration-standard);
  --fade-in-easing: var(--ease-fade);
  /* Slide Entrance */
  --slide-in-duration: var(--duration-standard);
  --slide-in-easing: var(--ease-slide);
  --slide-in-distance: var(--translate-8);
  /* Scale Entrance */
  --scale-in-duration: var(--duration-standard);
  --scale-in-easing: var(--ease-scale);
  --scale-in-start: var(--scale-90);
  /* Exit Animations */
  --exit-duration: var(--duration-quick);
  --exit-easing: var(--ease-emphasized-accelerate);
  /* Hover Animations */
  --hover-duration: var(--duration-quick);
  --hover-easing: var(--ease-hover);
  --hover-scale: var(--scale-105);
  --hover-lift: -2px;
  /* Focus Animations */
  --focus-duration: var(--duration-fast);
  --focus-easing: var(--ease-focus);
  --focus-ring-duration: var(--duration-fast);
  --focus-ring-easing: var(--ease-out);
  /* Loading Animations */
  --loading-duration: var(--duration-ultra-slow);
  --loading-easing: var(--ease-linear);
  --spinner-duration: var(--duration-ultra-slow);
  --pulse-duration: var(--duration-slower);
  --shimmer-duration: calc(var(--duration-ultra-slow) * 1.5);
  /* Micro-Interaction Animations */
  --ripple-duration: 600ms;
  --ripple-easing: var(--ease-out);
  --bounce-duration: var(--duration-slower);
  --bounce-easing: var(--ease-bounce);
  --wiggle-duration: var(--duration-slower);
  --wiggle-easing: var(--ease-elastic-out);
  /* Reduced Motion Overrides */
  --reduced-motion-duration: var(--duration-fast);
  --reduced-motion-easing: var(--ease-linear);
}

/* ===== DARK MODE COLOR OVERRIDES ===== */
@media (prefers-color-scheme: dark) {
  :root {
    /* Background Colors */
    --color-bg-primary: #0f0f0f;
    --color-bg-secondary: #1a1a1a;
    --color-bg-tertiary: #262626;
    --color-bg-overlay: rgba(0, 0, 0, 0.8);
    /* Enhanced Background Hierarchy */
    --bg-primary-dark: var(--gray-900);
    --bg-secondary-dark: var(--gray-800);
    --bg-tertiary-dark: var(--gray-700);
    --surface-dark: var(--gray-800);
    --surface-elevated-dark: var(--gray-700);
    /* Text Colors */
    --color-text-primary: var(--gray-100);
    --color-text-secondary: var(--gray-300);
    --color-text-tertiary: var(--gray-400);
    --color-text-inverse: var(--gray-900);
    --color-text-muted: var(--gray-500);
    /* Enhanced Text Hierarchy */
    --text-primary-dark: var(--gray-100);
    --text-secondary-dark: var(--gray-300);
    --text-muted-dark: var(--gray-500);
    /* Border Colors */
    --color-border-primary: var(--gray-700);
    --color-border-secondary: var(--gray-600);
    /* Enhanced Border Colors */
    --border-primary-dark: var(--gray-700);
    --border-secondary-dark: var(--gray-600);
    /* Interactive States */
    --hover-dark: var(--gray-700);
    --active-dark: var(--gray-600);
    --focus-dark: var(--primary-400);
    /* Interactive Colors */
    --color-interactive-secondary: var(--gray-800);
    --color-interactive-secondary-hover: var(--gray-700);
    --color-interactive-secondary-active: var(--gray-600);
    /* Icon Colors */
    --icon-color-primary: var(--gray-300);
    --icon-color-secondary: var(--gray-400);
    --icon-color-tertiary: var(--gray-500);
    --icon-color-hover: var(--gray-100);
    /* Shadow Colors */
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-color-light: rgba(0, 0, 0, 0.2);
    --shadow-color-medium: rgba(0, 0, 0, 0.4);
    --shadow-color-heavy: rgba(0, 0, 0, 0.6);
  }
}
/* ===== EXPLICIT DARK MODE CLASS OVERRIDES ===== */
html.dark-mode {
  /* Background Colors - Enhanced for better contrast */
  --color-bg-primary: #0a0a0a; /* Darker main background */
  --color-bg-secondary: #111111; /* Darker secondary surfaces */
  --color-bg-tertiary: #1a1a1a; /* Darker elevated surfaces */
  --color-bg-overlay: rgba(0, 0, 0, 0.9);
  /* Enhanced Background Hierarchy - Darker backgrounds */
  --bg-primary-dark: #0a0a0a; /* Darker than gray-900 */
  --bg-secondary-dark: #111111; /* Darker than gray-800 */
  --bg-tertiary-dark: #1a1a1a; /* Darker than gray-700 */
  --bg-elevated-dark: #1f1f1f; /* Slightly elevated */
  --surface-dark: #111111;
  --surface-elevated-dark: #1a1a1a;
  /* Text Colors - Enhanced contrast with pure white and brighter grays */
  --color-text-primary: #ffffff; /* Pure white for maximum contrast */
  --color-text-secondary: #f0f0f0; /* Very light gray */
  --color-text-tertiary: #e0e0e0; /* Light gray */
  --color-text-inverse: var(--gray-900);
  --color-text-muted: #b0b0b0; /* Brighter muted text */
  /* Enhanced Text Hierarchy - Brighter text colors */
  --text-primary-dark: #ffffff; /* Pure white */
  --text-secondary-dark: #f0f0f0; /* Very light gray */
  --text-muted-dark: #b0b0b0; /* Brighter muted */
  /* Border Colors - Enhanced visibility */
  --color-border-primary: #333333; /* Brighter borders */
  --color-border-secondary: #404040;
  /* Enhanced Border Colors */
  --border-primary-dark: #333333; /* Brighter than gray-700 */
  --border-secondary-dark: #404040; /* Brighter than gray-600 */
  /* Interactive States - Enhanced contrast */
  --hover-dark: #2a2a2a; /* Brighter hover */
  --surface-hover-dark: #2a2a2a; /* Consistent hover */
  --active-dark: #333333; /* Brighter active */
  --focus-dark: var(--primary-400);
  /* Interactive Colors */
  --color-interactive-secondary: #1a1a1a;
  --color-interactive-secondary-hover: #2a2a2a;
  --color-interactive-secondary-active: #333333;
  /* Icon Colors - Enhanced visibility */
  --icon-color-primary: #f0f0f0; /* Brighter icons */
  --icon-color-secondary: #e0e0e0;
  --icon-color-tertiary: #d0d0d0;
  --icon-color-hover: #ffffff;
  /* Shadow Colors - Enhanced for darker backgrounds */
  --shadow-color: rgba(0, 0, 0, 0.6);
  --shadow-color-light: rgba(0, 0, 0, 0.4);
  --shadow-color-medium: rgba(0, 0, 0, 0.7);
  --shadow-color-heavy: rgba(0, 0, 0, 0.8);
}

/* ===== RESPONSIVE SPACING OVERRIDES ===== */
@media (max-width: 768px) {
  :root {
    --spacing-container: calc(var(--spacing-xl) * var(--spacing-mobile-reduction));
    --spacing-page: calc(var(--spacing-2xl) * var(--spacing-mobile-reduction));
    --spacing-section: calc(var(--spacing-lg) * var(--spacing-mobile-reduction));
    --grid-gap: calc(var(--spacing-md) * var(--spacing-mobile-reduction));
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  :root {
    --spacing-container: calc(var(--spacing-xl) * var(--spacing-tablet-reduction));
    --spacing-page: calc(var(--spacing-2xl) * var(--spacing-tablet-reduction));
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(var(--slide-in-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(calc(-1 * var(--slide-in-distance)));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(var(--slide-in-distance));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(calc(-1 * var(--slide-in-distance)));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(var(--scale-in-start));
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: var(--reduced-motion-duration) !important;
    animation-timing-function: var(--reduced-motion-easing) !important;
    transition-duration: var(--reduced-motion-duration) !important;
    transition-timing-function: var(--reduced-motion-easing) !important;
  }
}
/* Modern CSS Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

html {
  font-size: 16px; /* Base font size for rem calculations */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-primary);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

h1 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
  margin: 0;
  font-size: var(--font-size-h1);
}

h2 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
  margin: 0;
  font-size: var(--font-size-h2);
}

h3 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
  margin: 0;
  font-size: var(--font-size-h3);
}

h4 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
  margin: 0;
  font-size: var(--font-size-h4);
}

h5 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
  margin: 0;
  font-size: var(--font-size-h5);
}

h6 {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
  color: var(--color-text-primary);
  margin: 0;
  font-size: var(--font-size-h6);
}

p {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-md);
}
p:last-child {
  margin-bottom: 0;
}

small {
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-text-secondary);
}

strong,
b {
  font-weight: var(--font-weight-strong);
}

em,
i {
  font-style: italic;
}

code {
  font-family: var(--typography-code-family);
  font-size: var(--typography-code-size);
  font-weight: var(--typography-code-weight);
  line-height: var(--typography-code-line-height);
  letter-spacing: var(--typography-code-spacing);
  background: var(--color-bg-tertiary);
  padding: 0.125em 0.25em;
  border-radius: var(--border-radius-xs);
  font-size: 0.875em;
}

pre {
  font-family: var(--typography-code-family);
  font-size: var(--typography-code-size);
  font-weight: var(--typography-code-weight);
  line-height: var(--typography-code-line-height);
  letter-spacing: var(--typography-code-spacing);
  background: var(--color-bg-tertiary);
  padding: var(--spacing-md);
  border-radius: var(--border-radius-sm);
  overflow-x: auto;
  margin-bottom: var(--spacing-md);
}
pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

blockquote {
  margin: var(--spacing-lg) 0;
  padding-left: var(--spacing-md);
  border-left: var(--border-width-thick) solid var(--color-border-secondary);
  color: var(--color-text-secondary);
  font-style: italic;
}

a {
  color: var(--color-interactive-primary);
  text-decoration: underline;
  text-decoration-thickness: var(--text-decoration-thickness);
  text-underline-offset: var(--text-underline-offset);
  transition: var(--transition-button);
}
a:hover {
  color: var(--color-interactive-primary-hover);
}
a:active {
  color: var(--color-interactive-primary-active);
}
a:focus-visible {
  outline: var(--outline-focus);
  outline-offset: var(--outline-offset);
}

ul,
ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}
ul:last-child,
ol:last-child {
  margin-bottom: 0;
}

li {
  margin-bottom: var(--spacing-xs);
}
li:last-child {
  margin-bottom: 0;
}

ul {
  list-style-type: disc;
}
ul ul {
  list-style-type: circle;
}
ul ul ul {
  list-style-type: square;
}

ol {
  list-style-type: decimal;
}
ol ol {
  list-style-type: lower-alpha;
}
ol ol ol {
  list-style-type: lower-roman;
}

dl {
  margin-bottom: var(--spacing-md);
}

dt {
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--spacing-xs);
}

dd {
  margin-bottom: var(--spacing-sm);
  margin-left: var(--spacing-md);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-sm);
}

th,
td {
  padding: var(--spacing-sm);
  text-align: left;
  border-bottom: var(--border-divider);
}

th {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}

td {
  color: var(--color-text-secondary);
}

tbody tr:hover {
  background: var(--color-bg-tertiary);
}

fieldset {
  border: var(--border-divider);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

legend {
  font-weight: var(--font-weight-semibold);
  padding: 0 var(--spacing-xs);
  color: var(--color-text-primary);
}

label {
  display: block;
  font-size: var(--typography-label-size);
  font-weight: var(--typography-label-weight);
  color: var(--color-text-primary);
  margin-bottom: var(--form-label-spacing);
}

input,
textarea,
select {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  outline: none;
  display: block;
  width: 100%;
  height: var(--height-input);
  padding: 0 var(--spacing-sm);
  font-family: var(--font-family-body);
  font-size: var(--typography-input-size);
  font-weight: var(--typography-input-weight);
  line-height: var(--typography-input-line-height);
  background: var(--color-bg-secondary);
  border: var(--border-input);
  border-radius: var(--border-radius-input);
  color: var(--color-text-primary);
  transition: var(--transition-input);
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
}
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ring-width-2) var(--color-primary-alpha-50);
}
input:focus,
textarea:focus,
select:focus {
  border: var(--border-input-focus);
  transition: var(--transition-input-focus);
}
input:disabled,
textarea:disabled,
select:disabled {
  background: var(--color-bg-tertiary);
  border: var(--border-input-disabled);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: var(--color-text-muted);
}

textarea {
  height: auto;
  min-height: calc(var(--height-input) * 2);
  resize: vertical;
  padding: var(--spacing-sm);
}

select {
  cursor: pointer;
}
select:not([multiple]) {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--spacing-sm) center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: calc(var(--spacing-sm) + 1.5em + var(--spacing-xs));
}

button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  height: var(--height-button);
  padding: 0 var(--spacing-md);
  font-family: var(--font-family-body);
  font-size: var(--typography-button-size);
  font-weight: var(--typography-button-weight);
  line-height: var(--typography-button-line-height);
  letter-spacing: var(--typography-button-spacing);
  border-radius: var(--border-radius-button);
  transition: var(--transition-button);
  background: var(--color-interactive-primary);
  color: var(--color-text-inverse);
  border: var(--border-button-primary);
}
button:focus-visible {
  outline: var(--outline-focus);
  outline-offset: var(--outline-offset);
}
button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--ring-width-2) var(--color-primary-alpha-50);
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
button:hover:not(:disabled) {
  background: var(--color-interactive-primary-hover);
}
button:active:not(:disabled) {
  background: var(--color-interactive-primary-active);
}

input[type=checkbox],
input[type=radio] {
  width: auto;
  height: auto;
  margin-right: var(--spacing-xs);
}

input[type=file] {
  padding: var(--spacing-xs);
  border: var(--border-divider);
  border-style: dashed;
  background: var(--color-bg-tertiary);
  cursor: pointer;
}
input[type=file]:hover {
  background: var(--color-bg-secondary);
}

input[type=range] {
  height: auto;
  padding: 0;
  background: transparent;
  border: none;
}
input[type=range]:focus {
  box-shadow: none;
}

img {
  border-radius: var(--border-radius-image);
}

figure {
  margin-bottom: var(--spacing-md);
}

figcaption {
  font-family: var(--font-family-body);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-caption);
  letter-spacing: var(--letter-spacing-caption);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-xs);
  text-align: center;
}

details {
  margin-bottom: var(--spacing-md);
  border: var(--border-divider);
  border-radius: var(--border-radius-sm);
  padding: var(--spacing-sm);
}

summary {
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  padding: var(--spacing-xs);
  margin: calc(-1 * var(--spacing-xs));
  border-radius: var(--border-radius-xs);
  transition: var(--transition-button);
}
summary:hover {
  background: var(--color-bg-tertiary);
}
summary:focus-visible {
  outline: var(--outline-focus);
  outline-offset: var(--outline-offset);
}

details[open] summary {
  margin-bottom: var(--spacing-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

.focus-visible {
  outline: var(--outline-focus) !important;
  outline-offset: var(--outline-offset) !important;
}

@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]::after {
    content: " (" attr(href) ")";
  }
  abbr[title]::after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
/* ===== CONTAINERS COMPONENT ===== */
/* ===== BASE CONTAINER ===== */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

/* ===== RESPONSIVE CONTAINER BREAKPOINTS ===== */
/* Small screens and up */
@media (min-width: 640px) {
  .container {
    max-width: 640px;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}
/* Medium screens and up */
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
/* Large screens and up */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
/* Extra large screens and up */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
/* 2XL screens and up */
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}
/* ===== CONTAINER VARIANTS ===== */
/* Fluid container - always full width */
.container-fluid {
  width: 100%;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media (min-width: 640px) {
  .container-fluid {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}
/* Narrow container for reading content */
.container-narrow {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  max-width: 768px;
}

@media (min-width: 640px) {
  .container-narrow {
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}
/* Wide container for dashboards */
.container-wide {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media (min-width: 640px) {
  .container-wide {
    max-width: 1536px;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}
/* ===== BREAKPOINT-SPECIFIC CONTAINERS ===== */
/* Container that only applies max-width at specific breakpoints */
.container-sm {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media (min-width: 640px) {
  .container-sm {
    max-width: 640px;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}
.container-md {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media (min-width: 768px) {
  .container-md {
    max-width: 768px;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}
.container-lg {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media (min-width: 1024px) {
  .container-lg {
    max-width: 1024px;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}
.container-xl {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media (min-width: 1280px) {
  .container-xl {
    max-width: 1280px;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}
.container-2xl {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
}

@media (min-width: 1536px) {
  .container-2xl {
    max-width: 1536px;
    padding-left: var(--spacing-lg);
    padding-right: var(--spacing-lg);
  }
}
/* ===== CONTAINER PADDING VARIANTS ===== */
/* No padding containers */
.container-no-padding,
.container-fluid-no-padding {
  padding-left: 0;
  padding-right: 0;
}

/* Compact padding containers */
.container-compact {
  padding-left: var(--spacing-sm);
  padding-right: var(--spacing-sm);
}

@media (min-width: 640px) {
  .container-compact {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
}
/* Spacious padding containers */
.container-spacious {
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

@media (min-width: 640px) {
  .container-spacious {
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }
}
@media (min-width: 1024px) {
  .container-spacious {
    padding-left: calc(var(--spacing-xl) * 1.5);
    padding-right: calc(var(--spacing-xl) * 1.5);
  }
}
/* ===== CONTAINER OPTIMIZATION ===== */
.container-optimized {
  contain: layout style;
  will-change: auto;
}

/* ===== DEBUGGING ===== */
.debug-containers .container,
.debug-containers .container-fluid,
.debug-containers .container-narrow,
.debug-containers .container-wide,
.debug-containers .container-sm,
.debug-containers .container-md,
.debug-containers .container-lg,
.debug-containers .container-xl,
.debug-containers .container-2xl {
  outline: 2px dashed var(--color-primary, #3b82f6);
  outline-offset: -2px;
  background: rgba(59, 130, 246, 0.05);
}

/* ===== PRINT STYLES ===== */
@media print {
  .container,
  .container-fluid,
  .container-narrow,
  .container-wide,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-2xl {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
}
/* ===== GRID COMPONENT ===== */
/* ===== BASE GRID DISPLAY ===== */
.grid {
  display: grid;
}

.inline-grid {
  display: inline-grid;
}

/* ===== GRID TEMPLATE COLUMNS ===== */
/* Fixed column counts */
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.grid-cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid-cols-7 {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.grid-cols-8 {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.grid-cols-9 {
  grid-template-columns: repeat(9, minmax(0, 1fr));
}

.grid-cols-10 {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}

.grid-cols-11 {
  grid-template-columns: repeat(11, minmax(0, 1fr));
}

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

/* Auto-fit and auto-fill */
.grid-cols-auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.grid-cols-auto-fill {
  grid-template-columns: repeat(auto-fill, minmax(0, 1fr));
}

/* Subgrid support */
.grid-cols-subgrid {
  grid-template-columns: subgrid;
}

/* None */
.grid-cols-none {
  grid-template-columns: none;
}

/* ===== GRID TEMPLATE ROWS ===== */
/* Fixed row counts */
.grid-rows-1 {
  grid-template-rows: repeat(1, minmax(0, 1fr));
}

.grid-rows-2 {
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.grid-rows-3 {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

.grid-rows-4 {
  grid-template-rows: repeat(4, minmax(0, 1fr));
}

.grid-rows-5 {
  grid-template-rows: repeat(5, minmax(0, 1fr));
}

.grid-rows-6 {
  grid-template-rows: repeat(6, minmax(0, 1fr));
}

/* Auto-fit and auto-fill */
.grid-rows-auto-fit {
  grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
}

.grid-rows-auto-fill {
  grid-template-rows: repeat(auto-fill, minmax(0, 1fr));
}

/* Subgrid support */
.grid-rows-subgrid {
  grid-template-rows: subgrid;
}

/* None */
.grid-rows-none {
  grid-template-rows: none;
}

/* ===== GRID COLUMN SPAN ===== */
.col-auto {
  grid-column: auto;
}

.col-span-1 {
  grid-column: span 1/span 1;
}

.col-span-2 {
  grid-column: span 2/span 2;
}

.col-span-3 {
  grid-column: span 3/span 3;
}

.col-span-4 {
  grid-column: span 4/span 4;
}

.col-span-5 {
  grid-column: span 5/span 5;
}

.col-span-6 {
  grid-column: span 6/span 6;
}

.col-span-7 {
  grid-column: span 7/span 7;
}

.col-span-8 {
  grid-column: span 8/span 8;
}

.col-span-9 {
  grid-column: span 9/span 9;
}

.col-span-10 {
  grid-column: span 10/span 10;
}

.col-span-11 {
  grid-column: span 11/span 11;
}

.col-span-12 {
  grid-column: span 12/span 12;
}

.col-span-full {
  grid-column: 1/-1;
}

/* ===== GRID COLUMN START ===== */
.col-start-1 {
  grid-column-start: 1;
}

.col-start-2 {
  grid-column-start: 2;
}

.col-start-3 {
  grid-column-start: 3;
}

.col-start-4 {
  grid-column-start: 4;
}

.col-start-5 {
  grid-column-start: 5;
}

.col-start-6 {
  grid-column-start: 6;
}

.col-start-7 {
  grid-column-start: 7;
}

.col-start-8 {
  grid-column-start: 8;
}

.col-start-9 {
  grid-column-start: 9;
}

.col-start-10 {
  grid-column-start: 10;
}

.col-start-11 {
  grid-column-start: 11;
}

.col-start-12 {
  grid-column-start: 12;
}

.col-start-13 {
  grid-column-start: 13;
}

.col-start-auto {
  grid-column-start: auto;
}

/* ===== GRID COLUMN END ===== */
.col-end-1 {
  grid-column-end: 1;
}

.col-end-2 {
  grid-column-end: 2;
}

.col-end-3 {
  grid-column-end: 3;
}

.col-end-4 {
  grid-column-end: 4;
}

.col-end-5 {
  grid-column-end: 5;
}

.col-end-6 {
  grid-column-end: 6;
}

.col-end-7 {
  grid-column-end: 7;
}

.col-end-8 {
  grid-column-end: 8;
}

.col-end-9 {
  grid-column-end: 9;
}

.col-end-10 {
  grid-column-end: 10;
}

.col-end-11 {
  grid-column-end: 11;
}

.col-end-12 {
  grid-column-end: 12;
}

.col-end-13 {
  grid-column-end: 13;
}

.col-end-auto {
  grid-column-end: auto;
}

/* ===== GRID ROW SPAN ===== */
.row-auto {
  grid-row: auto;
}

.row-span-1 {
  grid-row: span 1/span 1;
}

.row-span-2 {
  grid-row: span 2/span 2;
}

.row-span-3 {
  grid-row: span 3/span 3;
}

.row-span-4 {
  grid-row: span 4/span 4;
}

.row-span-5 {
  grid-row: span 5/span 5;
}

.row-span-6 {
  grid-row: span 6/span 6;
}

.row-span-full {
  grid-row: 1/-1;
}

/* ===== GRID ROW START ===== */
.row-start-1 {
  grid-row-start: 1;
}

.row-start-2 {
  grid-row-start: 2;
}

.row-start-3 {
  grid-row-start: 3;
}

.row-start-4 {
  grid-row-start: 4;
}

.row-start-5 {
  grid-row-start: 5;
}

.row-start-6 {
  grid-row-start: 6;
}

.row-start-7 {
  grid-row-start: 7;
}

.row-start-auto {
  grid-row-start: auto;
}

/* ===== GRID ROW END ===== */
.row-end-1 {
  grid-row-end: 1;
}

.row-end-2 {
  grid-row-end: 2;
}

.row-end-3 {
  grid-row-end: 3;
}

.row-end-4 {
  grid-row-end: 4;
}

.row-end-5 {
  grid-row-end: 5;
}

.row-end-6 {
  grid-row-end: 6;
}

.row-end-7 {
  grid-row-end: 7;
}

.row-end-auto {
  grid-row-end: auto;
}

/* ===== GRID GAP ===== */
.gap-0 {
  gap: 0;
}

.gap-px {
  gap: 1px;
}

.gap-0\.5 {
  gap: calc(var(--spacing-xs) * 0.5);
}

.gap-1 {
  gap: var(--spacing-xs);
}

.gap-1\.5 {
  gap: calc(var(--spacing-xs) * 1.5);
}

.gap-2 {
  gap: var(--spacing-sm);
}

.gap-2\.5 {
  gap: calc(var(--spacing-sm) * 1.25);
}

.gap-3 {
  gap: var(--spacing-md);
}

.gap-3\.5 {
  gap: calc(var(--spacing-md) * 1.17);
}

.gap-4 {
  gap: var(--spacing-lg);
}

.gap-5 {
  gap: calc(var(--spacing-lg) * 1.33);
}

.gap-6 {
  gap: var(--spacing-xl);
}

.gap-7 {
  gap: calc(var(--spacing-xl) * 1.17);
}

.gap-8 {
  gap: calc(var(--spacing-xl) * 1.33);
}

.gap-9 {
  gap: calc(var(--spacing-xl) * 1.5);
}

.gap-10 {
  gap: calc(var(--spacing-xl) * 1.67);
}

.gap-11 {
  gap: calc(var(--spacing-xl) * 1.83);
}

.gap-12 {
  gap: calc(var(--spacing-xl) * 2);
}

.gap-14 {
  gap: calc(var(--spacing-xl) * 2.33);
}

.gap-16 {
  gap: calc(var(--spacing-xl) * 2.67);
}

.gap-20 {
  gap: calc(var(--spacing-xl) * 3.33);
}

.gap-24 {
  gap: calc(var(--spacing-xl) * 4);
}

.gap-28 {
  gap: calc(var(--spacing-xl) * 4.67);
}

.gap-32 {
  gap: calc(var(--spacing-xl) * 5.33);
}

/* ===== GRID COLUMN GAP ===== */
.gap-x-0 {
  column-gap: 0;
}

.gap-x-px {
  column-gap: 1px;
}

.gap-x-0\.5 {
  column-gap: calc(var(--spacing-xs) * 0.5);
}

.gap-x-1 {
  column-gap: var(--spacing-xs);
}

.gap-x-1\.5 {
  column-gap: calc(var(--spacing-xs) * 1.5);
}

.gap-x-2 {
  column-gap: var(--spacing-sm);
}

.gap-x-2\.5 {
  column-gap: calc(var(--spacing-sm) * 1.25);
}

.gap-x-3 {
  column-gap: var(--spacing-md);
}

.gap-x-3\.5 {
  column-gap: calc(var(--spacing-md) * 1.17);
}

.gap-x-4 {
  column-gap: var(--spacing-lg);
}

.gap-x-5 {
  column-gap: calc(var(--spacing-lg) * 1.33);
}

.gap-x-6 {
  column-gap: var(--spacing-xl);
}

.gap-x-7 {
  column-gap: calc(var(--spacing-xl) * 1.17);
}

.gap-x-8 {
  column-gap: calc(var(--spacing-xl) * 1.33);
}

.gap-x-9 {
  column-gap: calc(var(--spacing-xl) * 1.5);
}

.gap-x-10 {
  column-gap: calc(var(--spacing-xl) * 1.67);
}

.gap-x-11 {
  column-gap: calc(var(--spacing-xl) * 1.83);
}

.gap-x-12 {
  column-gap: calc(var(--spacing-xl) * 2);
}

.gap-x-14 {
  column-gap: calc(var(--spacing-xl) * 2.33);
}

.gap-x-16 {
  column-gap: calc(var(--spacing-xl) * 2.67);
}

.gap-x-20 {
  column-gap: calc(var(--spacing-xl) * 3.33);
}

.gap-x-24 {
  column-gap: calc(var(--spacing-xl) * 4);
}

.gap-x-28 {
  column-gap: calc(var(--spacing-xl) * 4.67);
}

.gap-x-32 {
  column-gap: calc(var(--spacing-xl) * 5.33);
}

/* ===== GRID ROW GAP ===== */
.gap-y-0 {
  row-gap: 0;
}

.gap-y-px {
  row-gap: 1px;
}

.gap-y-0\.5 {
  row-gap: calc(var(--spacing-xs) * 0.5);
}

.gap-y-1 {
  row-gap: var(--spacing-xs);
}

.gap-y-1\.5 {
  row-gap: calc(var(--spacing-xs) * 1.5);
}

.gap-y-2 {
  row-gap: var(--spacing-sm);
}

.gap-y-2\.5 {
  row-gap: calc(var(--spacing-sm) * 1.25);
}

.gap-y-3 {
  row-gap: var(--spacing-md);
}

.gap-y-3\.5 {
  row-gap: calc(var(--spacing-md) * 1.17);
}

.gap-y-4 {
  row-gap: var(--spacing-lg);
}

.gap-y-5 {
  row-gap: calc(var(--spacing-lg) * 1.33);
}

.gap-y-6 {
  row-gap: var(--spacing-xl);
}

.gap-y-7 {
  row-gap: calc(var(--spacing-xl) * 1.17);
}

.gap-y-8 {
  row-gap: calc(var(--spacing-xl) * 1.33);
}

.gap-y-9 {
  row-gap: calc(var(--spacing-xl) * 1.5);
}

.gap-y-10 {
  row-gap: calc(var(--spacing-xl) * 1.67);
}

.gap-y-11 {
  row-gap: calc(var(--spacing-xl) * 1.83);
}

.gap-y-12 {
  row-gap: calc(var(--spacing-xl) * 2);
}

.gap-y-14 {
  row-gap: calc(var(--spacing-xl) * 2.33);
}

.gap-y-16 {
  row-gap: calc(var(--spacing-xl) * 2.67);
}

.gap-y-20 {
  row-gap: calc(var(--spacing-xl) * 3.33);
}

.gap-y-24 {
  row-gap: calc(var(--spacing-xl) * 4);
}

.gap-y-28 {
  row-gap: calc(var(--spacing-xl) * 4.67);
}

.gap-y-32 {
  row-gap: calc(var(--spacing-xl) * 5.33);
}

/* ===== GRID AUTO FLOW ===== */
.grid-flow-row {
  grid-auto-flow: row;
}

.grid-flow-col {
  grid-auto-flow: column;
}

.grid-flow-dense {
  grid-auto-flow: dense;
}

.grid-flow-row-dense {
  grid-auto-flow: row dense;
}

.grid-flow-col-dense {
  grid-auto-flow: column dense;
}

/* ===== GRID AUTO COLUMNS ===== */
.auto-cols-auto {
  grid-auto-columns: auto;
}

.auto-cols-min {
  grid-auto-columns: min-content;
}

.auto-cols-max {
  grid-auto-columns: max-content;
}

.auto-cols-fr {
  grid-auto-columns: minmax(0, 1fr);
}

/* ===== GRID AUTO ROWS ===== */
.auto-rows-auto {
  grid-auto-rows: auto;
}

.auto-rows-min {
  grid-auto-rows: min-content;
}

.auto-rows-max {
  grid-auto-rows: max-content;
}

.auto-rows-fr {
  grid-auto-rows: minmax(0, 1fr);
}

/* ===== RESPONSIVE GRID LAYOUTS ===== */
/* Common responsive patterns */
.grid-responsive-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
}

.grid-responsive-sidebar {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .grid-responsive-sidebar {
    grid-template-columns: 250px 1fr;
  }
}
@media (min-width: 1024px) {
  .grid-responsive-sidebar {
    grid-template-columns: 300px 1fr;
  }
}
.grid-responsive-three-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
}

@media (min-width: 768px) {
  .grid-responsive-three-col {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid-responsive-three-col {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ===== GRID AREAS ===== */
/* Common layout areas */
.grid-layout-app {
  display: grid;
  grid-template-areas: "header header header" "sidebar main aside" "footer footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 250px 1fr 200px;
  min-height: 100vh;
  gap: 0;
}

.grid-area-header {
  grid-area: header;
}

.grid-area-sidebar {
  grid-area: sidebar;
}

.grid-area-main {
  grid-area: main;
}

.grid-area-aside {
  grid-area: aside;
}

.grid-area-footer {
  grid-area: footer;
}

@media (max-width: 1023px) {
  .grid-layout-app {
    grid-template-areas: "header header" "sidebar main" "footer footer";
    grid-template-columns: 200px 1fr;
  }
}
@media (max-width: 767px) {
  .grid-layout-app {
    grid-template-areas: "header" "main" "footer";
    grid-template-columns: 1fr;
  }
}
/* Dashboard layout */
.grid-layout-dashboard {
  display: grid;
  grid-template-areas: "nav header header" "nav main aside" "nav main aside";
  grid-template-rows: auto 1fr;
  grid-template-columns: 240px 1fr 300px;
  min-height: 100vh;
  gap: 0;
}

.grid-area-nav {
  grid-area: nav;
}

@media (max-width: 1023px) {
  .grid-layout-dashboard {
    grid-template-areas: "header header" "nav main" "nav main";
    grid-template-columns: 200px 1fr;
  }
}
@media (max-width: 767px) {
  .grid-layout-dashboard {
    grid-template-areas: "header" "main" "nav";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
}
/* ===== GRID DEBUGGING ===== */
.debug-grid .grid,
.debug-grid .inline-grid {
  outline: 2px dashed var(--color-success, #10b981);
  outline-offset: -2px;
  background: rgba(16, 185, 129, 0.05);
}

.debug-grid .grid > *,
.debug-grid .inline-grid > * {
  outline: 1px solid var(--color-info, #3b82f6);
  outline-offset: -1px;
  background: rgba(59, 130, 246, 0.05);
}

.grid-overlay {
  position: relative;
}

.grid-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 1000;
}

/* ===== PRINT STYLES ===== */
@media print {
  .grid,
  .inline-grid {
    break-inside: avoid;
  }
  .grid-layout-app,
  .grid-layout-dashboard {
    grid-template-areas: "main";
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
}
/* ===== LAYOUT COMPONENT (FLEXBOX) ===== */
/* ===== FLEX DISPLAY ===== */
.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

/* ===== FLEX DIRECTION ===== */
.flex-row {
  flex-direction: row;
}

.flex-row-reverse {
  flex-direction: row-reverse;
}

.flex-col {
  flex-direction: column;
}

.flex-col-reverse {
  flex-direction: column-reverse;
}

/* ===== FLEX WRAP ===== */
.flex-wrap {
  flex-wrap: wrap;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

/* ===== FLEX PROPERTIES ===== */
/* Flex grow */
.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-initial {
  flex: 0 1 auto;
}

.flex-none {
  flex: none;
}

/* Flex grow utilities */
.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

/* Flex shrink utilities */
.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

/* ===== FLEX BASIS ===== */
.basis-0 {
  flex-basis: 0px;
}

.basis-1 {
  flex-basis: var(--spacing-xs);
}

.basis-2 {
  flex-basis: var(--spacing-sm);
}

.basis-3 {
  flex-basis: var(--spacing-md);
}

.basis-4 {
  flex-basis: var(--spacing-lg);
}

.basis-5 {
  flex-basis: calc(var(--spacing-lg) * 1.33);
}

.basis-6 {
  flex-basis: var(--spacing-xl);
}

.basis-8 {
  flex-basis: calc(var(--spacing-xl) * 1.33);
}

.basis-10 {
  flex-basis: calc(var(--spacing-xl) * 1.67);
}

.basis-12 {
  flex-basis: calc(var(--spacing-xl) * 2);
}

.basis-16 {
  flex-basis: calc(var(--spacing-xl) * 2.67);
}

.basis-20 {
  flex-basis: calc(var(--spacing-xl) * 3.33);
}

.basis-24 {
  flex-basis: calc(var(--spacing-xl) * 4);
}

.basis-32 {
  flex-basis: calc(var(--spacing-xl) * 5.33);
}

.basis-40 {
  flex-basis: calc(var(--spacing-xl) * 6.67);
}

.basis-48 {
  flex-basis: calc(var(--spacing-xl) * 8);
}

.basis-56 {
  flex-basis: calc(var(--spacing-xl) * 9.33);
}

.basis-64 {
  flex-basis: calc(var(--spacing-xl) * 10.67);
}

.basis-auto {
  flex-basis: auto;
}

.basis-px {
  flex-basis: 1px;
}

.basis-0\.5 {
  flex-basis: calc(var(--spacing-xs) * 0.5);
}

.basis-1\.5 {
  flex-basis: calc(var(--spacing-xs) * 1.5);
}

.basis-2\.5 {
  flex-basis: calc(var(--spacing-sm) * 1.25);
}

.basis-3\.5 {
  flex-basis: calc(var(--spacing-md) * 1.17);
}

/* Fractional basis */
.basis-1\/2 {
  flex-basis: 50%;
}

.basis-1\/3 {
  flex-basis: 33.333333%;
}

.basis-2\/3 {
  flex-basis: 66.666667%;
}

.basis-1\/4 {
  flex-basis: 25%;
}

.basis-2\/4 {
  flex-basis: 50%;
}

.basis-3\/4 {
  flex-basis: 75%;
}

.basis-1\/5 {
  flex-basis: 20%;
}

.basis-2\/5 {
  flex-basis: 40%;
}

.basis-3\/5 {
  flex-basis: 60%;
}

.basis-4\/5 {
  flex-basis: 80%;
}

.basis-1\/6 {
  flex-basis: 16.666667%;
}

.basis-2\/6 {
  flex-basis: 33.333333%;
}

.basis-3\/6 {
  flex-basis: 50%;
}

.basis-4\/6 {
  flex-basis: 66.666667%;
}

.basis-5\/6 {
  flex-basis: 83.333333%;
}

.basis-1\/12 {
  flex-basis: 8.333333%;
}

.basis-2\/12 {
  flex-basis: 16.666667%;
}

.basis-3\/12 {
  flex-basis: 25%;
}

.basis-4\/12 {
  flex-basis: 33.333333%;
}

.basis-5\/12 {
  flex-basis: 41.666667%;
}

.basis-6\/12 {
  flex-basis: 50%;
}

.basis-7\/12 {
  flex-basis: 58.333333%;
}

.basis-8\/12 {
  flex-basis: 66.666667%;
}

.basis-9\/12 {
  flex-basis: 75%;
}

.basis-10\/12 {
  flex-basis: 83.333333%;
}

.basis-11\/12 {
  flex-basis: 91.666667%;
}

.basis-full {
  flex-basis: 100%;
}

/* ===== JUSTIFY CONTENT ===== */
.justify-normal {
  justify-content: normal;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.justify-stretch {
  justify-content: stretch;
}

/* ===== JUSTIFY ITEMS ===== */
.justify-items-start {
  justify-items: start;
}

.justify-items-end {
  justify-items: end;
}

.justify-items-center {
  justify-items: center;
}

.justify-items-stretch {
  justify-items: stretch;
}

/* ===== JUSTIFY SELF ===== */
.justify-self-auto {
  justify-self: auto;
}

.justify-self-start {
  justify-self: start;
}

.justify-self-end {
  justify-self: end;
}

.justify-self-center {
  justify-self: center;
}

.justify-self-stretch {
  justify-self: stretch;
}

/* ===== ALIGN CONTENT ===== */
.content-normal {
  align-content: normal;
}

.content-center {
  align-content: center;
}

.content-start {
  align-content: flex-start;
}

.content-end {
  align-content: flex-end;
}

.content-between {
  align-content: space-between;
}

.content-around {
  align-content: space-around;
}

.content-evenly {
  align-content: space-evenly;
}

.content-baseline {
  align-content: baseline;
}

.content-stretch {
  align-content: stretch;
}

/* ===== ALIGN ITEMS ===== */
.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

/* ===== ALIGN SELF ===== */
.self-auto {
  align-self: auto;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-stretch {
  align-self: stretch;
}

.self-baseline {
  align-self: baseline;
}

/* ===== PLACE CONTENT ===== */
.place-content-center {
  place-content: center;
}

.place-content-start {
  place-content: start;
}

.place-content-end {
  place-content: end;
}

.place-content-between {
  place-content: space-between;
}

.place-content-around {
  place-content: space-around;
}

.place-content-evenly {
  place-content: space-evenly;
}

.place-content-baseline {
  place-content: baseline;
}

.place-content-stretch {
  place-content: stretch;
}

/* ===== PLACE ITEMS ===== */
.place-items-start {
  place-items: start;
}

.place-items-end {
  place-items: end;
}

.place-items-center {
  place-items: center;
}

.place-items-baseline {
  place-items: baseline;
}

.place-items-stretch {
  place-items: stretch;
}

/* ===== PLACE SELF ===== */
.place-self-auto {
  place-self: auto;
}

.place-self-start {
  place-self: start;
}

.place-self-end {
  place-self: end;
}

.place-self-center {
  place-self: center;
}

.place-self-stretch {
  place-self: stretch;
}

/* ===== COMMON FLEX PATTERNS ===== */
/* Centered content */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Centered with column direction */
.flex-center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Space between with center alignment */
.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Start alignment with gap */
.flex-start {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* End alignment */
.flex-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Column with start alignment */
.flex-col-start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Column with center alignment */
.flex-col-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Column with end alignment */
.flex-col-end {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* Wrap with gap */
.flex-wrap-gap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

/* ===== FLEX LAYOUT COMPONENTS ===== */
/* Card layout with flex */
.flex-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-default);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.flex-card-header {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-1);
}

.flex-card-body {
  flex: 1;
  padding: var(--spacing-md);
}

.flex-card-footer {
  padding: var(--spacing-md);
  border-top: 1px solid var(--border-light);
  background: var(--surface-1);
}

/* Sidebar layout */
.flex-sidebar-layout {
  display: flex;
  min-height: 100vh;
}

.flex-sidebar {
  width: 250px;
  background: var(--surface-1);
  border-right: 1px solid var(--border-default);
  flex-shrink: 0;
}

.flex-main {
  flex: 1;
  background: var(--surface-default);
  overflow: hidden;
}

@media (max-width: 767px) {
  .flex-sidebar-layout {
    flex-direction: column;
  }
  .flex-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-default);
  }
}
/* Header layout */
.flex-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface-default);
  border-bottom: 1px solid var(--border-default);
  min-height: 60px;
}

.flex-header-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.flex-header-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.flex-header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* Navigation list */
.flex-nav {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-xs) * 0.5);
  padding: var(--spacing-sm);
}

.flex-nav-horizontal {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-md);
}

.flex-nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition-colors);
}

.flex-nav-item:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
}

.flex-nav-item.active {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

/* Toolbar */
.flex-toolbar {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm);
  background: var(--surface-1);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
}

.flex-toolbar-group {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-xs) * 0.5);
}

.flex-toolbar-separator {
  width: 1px;
  height: 20px;
  background: var(--border-default);
  margin: 0 var(--spacing-xs);
}

/* Button group */
.flex-button-group {
  display: flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-default);
}

.flex-button-group > * {
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  border-bottom: none;
}

.flex-button-group > *:first-child {
  border-top-left-radius: var(--radius-sm);
  border-bottom-left-radius: var(--radius-sm);
}

.flex-button-group > *:last-child {
  border-top-right-radius: var(--radius-sm);
  border-bottom-right-radius: var(--radius-sm);
}

.flex-button-group > * + * {
  border-left: 1px solid var(--border-default);
}

/* ===== RESPONSIVE FLEX UTILITIES ===== */
/* Modern, professional editor interface */
/* Main editor layout container */
.layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - var(--header-height, 60px));
  background: var(--color-bg-primary);
}

/* App Header - Enhanced */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height, 60px);
  padding: 0 var(--spacing-lg);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border-bottom: 1px solid var(--color-border-primary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  z-index: 100;
}

.app-header .header-left,
.app-header .header-center,
.app-header .header-right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.app-header .header-center {
  flex: 1;
  justify-content: center;
}

.app-header h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--gray-800);
  margin: 0;
  letter-spacing: -0.025em;
}

/* Left Sidebar - Enhanced */
.left-sidebar {
  width: 280px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  border-right: 1px solid var(--color-border-primary);
  overflow-y: auto;
  flex-shrink: 0;
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.05);
}

/* Enhanced Properties Panel Layout */
.right-sidebar {
  width: 280px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  border-left: 1px solid var(--color-border-primary);
  overflow-y: auto;
  flex-shrink: 0;
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.05);
}

/* Form Row Layout */
.form-row {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.form-row .form-group {
  flex: 1;
  margin-bottom: 0;
}

/* Button Groups */
.button-group {
  display: flex;
  gap: 2px;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.button-group .btn {
  border: none;
  border-radius: 0;
  flex: 1;
  margin: 0;
}

.button-group .btn:not(:last-child) {
  border-right: 1px solid var(--gray-300);
}

.button-group .btn.active {
  background: var(--primary-500);
  color: white;
}

/* Layer Controls */
.layer-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.layer-buttons .btn {
  justify-content: flex-start;
  text-align: left;
}

/* ===== MODERN COLOR CONTROLS ===== */
.color-controls {
  margin-bottom: var(--spacing-lg);
}

.color-controls label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  font-weight: 600;
  color: var(--gray-700);
}

.color-controls label .icon {
  width: 18px;
  height: 18px;
  color: var(--primary-600);
}

.color-input-group {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  background: #ffffff;
  border: 2px solid var(--gray-200);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xs);
  transition: all 0.2s ease;
}

.color-input-group:focus-within {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px var(--primary-100);
}

.color-picker {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.color-picker:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.hex-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: var(--font-size-sm);
  color: var(--gray-700);
  padding: var(--spacing-sm);
}

.hex-input:focus {
  outline: none;
}

/* ===== MODERN VALUE DISPLAYS ===== */
.value-display {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 50px;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-md);
  font-family: "JetBrains Mono", "Courier New", monospace;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--gray-700);
  margin-left: var(--spacing-sm);
}

/* ===== MODERN SIDEBAR SECTIONS ===== */
.sidebar-section {
  margin-bottom: var(--spacing-lg);
  background: #ffffff;
  border-radius: var(--border-radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: all 0.3s ease;
}

.sidebar-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-1px);
}

.section-header {
  padding: var(--spacing-md) var(--spacing-lg);
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--gray-200);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--gray-800);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  position: relative;
}

.section-header::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--primary-500);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.section-header:hover {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: var(--gray-900);
}

.section-header:hover::before {
  opacity: 1;
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-weight: 600;
}

.section-title .icon {
  width: 18px;
  height: 18px;
  color: var(--primary-600);
}

.toggle-icon {
  width: 16px;
  height: 16px;
  color: var(--gray-500);
  transition: all 0.3s ease;
}

.section-header.collapsed .toggle-icon {
  transform: rotate(-90deg);
  color: var(--gray-400);
}

.section-content {
  padding: var(--spacing-lg);
  background: #ffffff;
  transition: all 0.3s ease;
  overflow-y: auto;
}

.section-content.collapsed {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}

/* Subsections */
.subsection {
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-sm);
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.subsection:hover {
  border-color: var(--primary-300);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.subsection h4 {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-800);
  margin: 0 0 var(--spacing-xs) 0;
}

/* Canvas Area - Properly centered between sidebars */
.canvas-area {
  width: calc(100vw - 560px); /* Subtract both sidebar widths */
  max-width: calc(100vw - 560px);
  min-width: 400px; /* Minimum usable width */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  position: relative;
}

.canvas-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  overflow: hidden;
  position: relative;
}

.canvas-wrapper {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: var(--spacing-lg);
  /* Add flexbox centering for proper canvas positioning */
  display: flex;
  align-items: center;
  justify-content: center;
}

.canvas-zoom-container {
  transform-origin: center center;
  transition: transform 0.3s ease;
  display: block;
  /* Remove text-align since flexbox handles centering */
  /* text-align: center; */
  /* Remove min-height constraint */
  /* min-height: calc(100% - 2 * var(--spacing-lg)); */
}

#canvas {
  display: block; /* Change back to block since flexbox handles centering */
  border: 2px solid var(--gray-300);
  background-color: white;
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.canvas-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.1) 1px, transparent 0);
  background-size: 20px 20px;
  opacity: 0.3;
  pointer-events: none;
}

/* ===== CANVAS CONTROLS - UNIFIED STYLING ===== */
.canvas-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md) var(--spacing-lg);
  background: #ffffff;
  border-top: 1px solid var(--color-border-primary);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
}

.zoom-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: 1;
  justify-content: center;
}

.zoom-controls input[type=range] {
  width: 150px;
  margin: 0 var(--spacing-sm);
}

/* Export controls - inline layout with consistent button sizing */
.export-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: nowrap; /* MODIFIED: Default is NOWRAP for an inline layout on large screens. */
  padding: var(--spacing-md);
  background: var(--surface-primary);
  border-top: 1px solid var(--border-primary);
  border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
}

.format-selection,
.quality-selection {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.format-selection label,
.quality-selection label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  white-space: nowrap;
}

.format-selection select,
.quality-selection select {
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--border-primary);
  border-radius: var(--border-radius-sm);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  min-width: 120px;
  transition: all 0.15s ease;
}

.format-selection select:focus,
.quality-selection select:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.format-selection select:hover,
.quality-selection select:hover {
  border-color: var(--gray-400);
}

/* Heather gray button styling for canvas controls - INCREASED SPECIFICITY */
.canvas-controls .export-controls .btn,
.export-controls .btn.btn {
  padding: var(--spacing-sm) var(--spacing-md) !important;
  font-size: var(--font-size-sm) !important;
  white-space: nowrap !important;
  min-width: 120px !important; /* Consistent width for all buttons */
  max-width: 120px !important; /* ADDED: Ensure buttons don't exceed this width */
  text-overflow: ellipsis !important;
  overflow: hidden !important; /* CHANGED: from visible to hidden */
  box-sizing: border-box !important; /* ADDED: Ensure padding is included in width */
  /* Heather gray styling - no gradients */
  background: #9ca3af !important; /* Heather gray */
  color: #ffffff !important;
  border: 1px solid #9ca3af !important;
  transition: all 0.15s ease !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.canvas-controls .export-controls .btn:hover,
.export-controls .btn.btn:hover {
  background: #6b7280 !important; /* Darker heather gray on hover */
  border-color: #6b7280 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.canvas-controls .export-controls .btn:active,
.export-controls .btn.btn:active {
  background: #4b5563 !important; /* Even darker on active */
  border-color: #4b5563 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.canvas-controls .export-controls .btn:focus,
.export-controls .btn.btn:focus {
  outline: none !important;
  border-color: #9ca3af !important;
  box-shadow: 0 0 0 3px rgba(156, 163, 175, 0.3) !important;
}

/* Specific button targeting - Fix clickable area */
#downloadSavedPDF,
#generatePDF {
  background: #9ca3af !important;
  color: #ffffff !important;
  border: 1px solid #9ca3af !important;
  min-width: 120px !important;
  max-width: 120px !important; /* ADDED: Constrain the clickable area */
  width: 120px !important; /* ADDED: Force exact width */
  box-sizing: border-box !important; /* ADDED: Include border in width calculation */
  display: inline-block !important; /* ADDED: Ensure proper inline layout */
  vertical-align: top !important; /* ADDED: Align buttons properly */
}

#downloadSavedPDF:hover,
#generatePDF:hover {
  background: #6b7280 !important;
  border-color: #6b7280 !important;
  color: #ffffff !important;
}

/* Status message positioning */
#statusMessage {
  margin-left: auto;
  padding-left: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* ===== MODERN RIGHT SIDEBAR ===== */
.right-sidebar {
  width: 280px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fafb 100%);
  border-left: 1px solid var(--color-border-primary);
  overflow-y: auto;
  flex-shrink: 0;
  box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.05);
}

.properties-panel {
  padding: var(--spacing-lg);
}

/* Custom scrollbar for sidebar */
.right-sidebar::-webkit-scrollbar {
  width: 6px;
}

.right-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.right-sidebar::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border-radius: 3px;
  transition: background 0.2s ease;
}

.right-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
}

/* Property Sections */
.property-section {
  margin-bottom: var(--spacing-lg);
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.property-section-header {
  padding: var(--spacing-md);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.property-section-content {
  padding: var(--spacing-md);
}

/* Form Groups in Properties */
.property-group {
  margin-bottom: var(--spacing-md);
}

.property-group:last-child {
  margin-bottom: 0;
}

.property-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--gray-700);
  margin-bottom: var(--spacing-xs);
}

/* Enhanced Form Controls */
.property-input,
.property-select {
  width: 100%;
  padding: var(--spacing-sm);
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  background: #ffffff;
  transition: all 0.2s ease;
}

.property-input:focus,
.property-select:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.property-input:hover,
.property-select:hover {
  border-color: var(--gray-400);
}

/* Responsive Design - Enhanced */
@media (max-width: 1024px) {
  .layout {
    flex-direction: column;
  }
  .left-sidebar,
  .right-sidebar {
    width: 100%;
    height: auto;
    max-height: 40vh;
    border-right: none;
    border-left: none;
    border-bottom: 1px solid var(--color-border-primary);
  }
  .canvas-area {
    order: 1;
  }
  .left-sidebar {
    order: 2;
  }
  .right-sidebar {
    order: 3;
  }
}
/* ===== RESPONSIVE LAYOUT - MAINTAIN TEXT VISIBILITY ===== */
@media (max-width: 768px) {
  .export-controls {
    flex-wrap: wrap; /* MODIFIED: Wrapping is now explicitly turned ON for small screens */
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
  }
  .format-selection,
  .quality-selection,
  .export-controls .btn {
    flex-grow: 1;
    flex-basis: 150px;
  }
  .export-controls .btn {
    min-width: calc(50% - var(--spacing-sm));
    justify-content: center;
  }
  .app-header {
    padding: 0 var(--spacing-md);
  }
  .app-header .header-center {
    display: none;
  }
  .left-sidebar,
  .right-sidebar {
    padding: var(--spacing-sm);
  }
  .canvas-container {
    padding: var(--spacing-md);
  }
}
@media (max-width: 480px) {
  .export-controls .btn {
    font-size: var(--font-size-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
  }
  .export-controls .btn span {
    display: inline; /* Ensure text spans are visible */
  }
}
/* Optional: be explicit about what animates to avoid creating extra layers */
.sidebar-section,
.subsection {
  transition: box-shadow 0.3s ease, border-color 0.2s ease, background 0.2s ease;
}

/* ===== BUTTON COMPONENT ===== */
/* Base button styles with modern design patterns */
/* ===== UNIFIED BUTTON COMPONENT ===== */
/* Single color, consistent styling with Inter font */
/* Remove all existing button styles and replace with this unified version */
/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid transparent;
  border-radius: var(--border-radius-md);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: all 0.15s ease;
  position: relative;
  /* Default single-color style */
  background: #ffffff;
  color: var(--gray-700);
  border-color: var(--gray-300);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn:hover {
  background: #f8fafc;
  border-color: var(--gray-400);
  color: var(--gray-800);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}

.btn:active {
  background: #e2e8f0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button variants - Single colors only */
.btn-primary {
  background: var(--primary-500);
  color: #ffffff;
  border-color: var(--primary-500);
}

.btn-primary:hover {
  background: var(--primary-600);
  border-color: var(--primary-600);
  color: #ffffff;
}

.btn-success {
  background: var(--success-500);
  color: #ffffff;
  border-color: var(--success-500);
}

.btn-success:hover {
  background: var(--success-600);
  border-color: var(--success-600);
  color: #ffffff;
}

.btn-danger {
  background: var(--error-500);
  color: #ffffff;
  border-color: var(--error-500);
}

.btn-danger:hover {
  background: var(--error-600);
  border-color: var(--error-600);
  color: #ffffff;
}

.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border-color: var(--gray-300);
}

.btn-secondary:hover {
  background: var(--gray-200);
  border-color: var(--gray-400);
  color: var(--gray-800);
}

/* Button sizes */
.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  border-radius: var(--border-radius-sm);
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-md);
  border-radius: var(--border-radius-lg);
}

/* Icon buttons */
.btn-icon {
  padding: var(--spacing-sm);
  width: auto;
  height: auto;
  min-width: 36px;
  min-height: 36px;
}

.btn-icon-sm {
  padding: var(--spacing-xs);
  min-width: 28px;
  min-height: 28px;
}

/* ===== UNIFIED SVG ICON STYLING ===== */
.btn svg,
.btn .icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  fill: currentColor;
}

.btn-sm svg,
.btn-sm .icon {
  width: 14px;
  height: 14px;
}

.btn-lg svg,
.btn-lg .icon {
  width: 18px;
  height: 18px;
}

/* Full width button */
.btn-full {
  width: 100%;
  justify-content: center;
}

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

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

@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}
.btn.btn-icon.active {
  background-color: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

/* ===== MODERN BUTTON GROUPS ===== */
.button-group {
  display: flex;
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  border: 2px solid var(--gray-200);
}

.button-group .btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--gray-200);
  background: #ffffff;
  color: var(--gray-600);
  padding: var(--spacing-md);
  min-width: 44px;
  min-height: 44px;
  transition: all 0.2s ease;
  position: relative;
}

.button-group .btn:last-child {
  border-right: none;
}

.button-group .btn:hover {
  background: var(--gray-50);
  color: var(--gray-800);
  transform: none;
}

.button-group .btn.active {
  background: var(--primary-500);
  color: #ffffff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.button-group .btn.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-300);
}

/* ===== FORM COMPONENT ===== */
/* Comprehensive form styles with modern design patterns */
/* ===== BASE FORM STYLES ===== */
.form {
  display: flex;
  flex-direction: column;
  gap: var(--form-group-spacing);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--form-label-spacing);
  margin-bottom: var(--spacing-lg); /* Use modern spacing */
}

.form-group:last-child {
  margin-bottom: 0;
}

.form-row {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-end;
}

.form-row .form-group {
  flex: 1;
}

.form-col {
  flex: 1;
}

/* ===== FORM LABELS (MODERNIZED) ===== */
.form-label,
label {
  display: block;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 600; /* Modern weight */
  color: var(--gray-700);
  margin-bottom: var(--spacing-sm);
  line-height: 1.4;
  letter-spacing: var(--letter-spacing-form-label);
}

.form-label.required::after {
  content: " *";
  color: var(--color-danger);
}

.form-label-inline {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: 0;
}

/*
============================================================
THE FIX: SEPARATED RULES FOR INPUTS AND SELECTS
This section replaces the single, conflicting "UNIFIED FORM CONTROLS" rule.
============================================================
*/
/* 1. Modern styles for TEXT inputs (which can have a custom appearance) */
.form-control,
.form-input,
.property-input,
textarea,
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=search] {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg); /* Modern padding */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.5; /* Modern line-height */
  color: var(--gray-800); /* Modern color */
  background-color: #ffffff;
  border: 2px solid var(--gray-200); /* Modern border */
  border-radius: var(--border-radius-lg); /* Modern radius */
  transition: all 0.2s ease;
  appearance: none; /* This is OK for text inputs */
  -webkit-appearance: none;
}

/* 2. Modern styles for SELECT dropdowns (restoring native browser appearance) */
.form-select,
.property-select,
select {
  width: 100%;
  padding: var(--spacing-md) var(--spacing-lg); /* Modern padding */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.5; /* Modern line-height */
  color: var(--gray-800); /* Modern color */
  background-color: #ffffff;
  border: 2px solid var(--gray-200); /* Modern border */
  border-radius: var(--border-radius-lg); /* Modern radius */
  transition: all 0.2s ease;
  /* Modern form controls - simplified after Choices.js implementation */
}
.form-select select.form-control,
.property-select select.form-control,
select select.form-control {
  appearance: auto;
  -webkit-appearance: auto;
  background-image: none;
  color: var(--gray-800);
  opacity: 1;
}
.form-select select.form-control option,
.property-select select.form-control option,
select select.form-control option {
  color: var(--gray-800);
  background-color: #ffffff;
}

/* 3. Common hover and focus states for all form fields */
.form-control:hover, .form-input:hover, .form-select:hover, .property-input:hover, .property-select:hover, select:hover, textarea:hover, input:hover {
  border-color: var(--gray-300);
}

.form-control:focus, .form-input:focus, .form-select:focus, .property-input:focus, .property-select:focus, select:focus, textarea:focus, input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px var(--primary-100); /* Modern shadow */
  background-color: #ffffff;
}

/* ===== CHECKBOX AND RADIO ===== */
.form-check {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-sm);
}

.form-check input[type=checkbox],
.form-check input[type=radio] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

.form-check-label {
  margin-bottom: 0;
  cursor: pointer;
  user-select: none;
}

.form-check-inline {
  display: inline-flex;
  margin-right: var(--spacing-md);
  margin-bottom: 0;
}

/* Enhanced checkbox/radio styles */
.form-check-enhanced {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  cursor: pointer;
}

.form-check-enhanced input[type=checkbox],
.form-check-enhanced input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-check-enhanced .check-indicator {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-default);
  border-radius: var(--border-radius-sm);
  background: var(--surface-default);
  transition: var(--transition-form);
  position: relative;
  flex-shrink: 0;
}

.form-check-enhanced input[type=radio] + .check-indicator {
  border-radius: 50%;
}

.form-check-enhanced input:checked + .check-indicator {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.form-check-enhanced input:checked + .check-indicator::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 1px;
}

.form-check-enhanced input[type=radio]:checked + .check-indicator::after {
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.form-check-enhanced:hover .check-indicator {
  border-color: var(--color-primary);
}

/* ===== FORM VALIDATION STATES ===== */
.form-group.has-error .form-input,
.form-group.has-error .form-select,
.form-group.has-error .form-textarea {
  border-color: var(--color-danger);
}

.form-group.has-error .form-input:focus,
.form-group.has-error .form-select:focus,
.form-group.has-error .form-textarea:focus {
  box-shadow: 0 0 0 3px var(--color-danger-light);
}

.form-group.has-success .form-input,
.form-group.has-success .form-select,
.form-group.has-success .form-textarea {
  border-color: var(--color-success);
}

.form-group.has-success .form-input:focus,
.form-group.has-success .form-select:focus,
.form-group.has-success .form-textarea:focus {
  box-shadow: 0 0 0 3px var(--color-success-light);
}

.form-group.has-warning .form-input,
.form-group.has-warning .form-select,
.form-group.has-warning .form-textarea {
  border-color: var(--color-warning);
}

.form-group.has-warning .form-input:focus,
.form-group.has-warning .form-select:focus,
.form-group.has-warning .form-textarea:focus {
  box-shadow: 0 0 0 3px var(--color-warning-light);
}

/* ===== FORM HELP TEXT ===== */
.form-help,
.help-text {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  margin-top: var(--form-help-spacing);
  line-height: var(--line-height-tight);
}

.form-error, .form-success, .form-warning {
  font-size: var(--font-size-xs);
  margin-top: var(--form-help-spacing);
  line-height: var(--line-height-tight);
}

.form-error {
  color: var(--color-danger);
}

.form-success {
  color: var(--color-success);
}

.form-warning {
  color: var(--color-warning);
}

/* ===== INPUT GROUPS ===== */
.input-group {
  display: flex;
  width: 100%;
}

.input-group .form-input {
  border-radius: 0;
  border-right-width: 0;
}

.input-group .form-input:first-child {
  border-top-left-radius: var(--border-radius-input);
  border-bottom-left-radius: var(--border-radius-input);
}

.input-group .form-input:last-child {
  border-top-right-radius: var(--border-radius-input);
  border-bottom-right-radius: var(--border-radius-input);
  border-right-width: 1px;
}

.input-group-prepend,
.input-group-append {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--surface-2);
  border: 1px solid var(--border-default);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  white-space: nowrap;
}

.input-group-prepend {
  border-right: 0;
  border-top-left-radius: var(--border-radius-input);
  border-bottom-left-radius: var(--border-radius-input);
}

.input-group-append {
  border-left: 0;
  border-top-right-radius: var(--border-radius-input);
  border-bottom-right-radius: var(--border-radius-input);
}

/* ===== FORM SECTIONS ===== */
.form-section {
  margin-bottom: var(--form-section-spacing);
  padding-bottom: var(--form-section-spacing);
  border-bottom: 1px solid var(--border-subtle);
}

.form-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.form-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-heading);
  margin-bottom: var(--spacing-md);
}

/* ===== FORM ACTIONS ===== */
.form-actions {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--border-subtle);
}

.form-actions-center {
  justify-content: center;
}

.form-actions-start {
  justify-content: flex-start;
}

.form-actions-between {
  justify-content: space-between;
}

/* ===== RESPONSIVE FORMS ===== */
@media (max-width: 767px) {
  .form-row {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  .form-actions {
    flex-direction: column;
  }
  .form-actions .btn {
    width: 100%;
  }
}
/* ===== DARK MODE OVERRIDES ===== */
@media (prefers-color-scheme: dark) {
  /* No special rules needed for select anymore */
}
html.dark-mode .form-select,
html.dark-mode select {
  /* No special rules needed for select anymore */
}

/* Modern range inputs */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--gray-200);
  border-radius: 3px;
  outline: none;
  transition: all 0.2s ease;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--primary-500);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
}

input[type=range]::-webkit-slider-thumb:hover {
  background: var(--primary-600);
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

input[type=range]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--primary-500);
  border-radius: 50%;
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Override for select elements that accidentally have form-control class */
select.form-control {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  background-image: none !important;
  /* Force text visibility */
  color: var(--gray-800) !important;
  opacity: 1 !important;
  /* 
   * TARGETED CHROME FIX: 
   * This rule addresses a rendering bug in Chrome where text inside a <select> 
   * element becomes invisible when a parent has a CSS transform applied. 
   */
  /* 
   * Forces the select element onto its own hardware-accelerated layer by 
   * applying a minimal 3D transform. This isolates its rendering from the 
   * parent's corrupted stacking context, making the text reappear. 
   */
  transform: translateZ(0);
  /* 
   * A complementary property that also promotes the element to a new 
   * rendering layer in many browsers, further ensuring stability. 
   */
  backface-visibility: hidden;
}

/* Additional fix for Chrome rendering bug */
select.form-control option {
  color: var(--gray-800) !important;
  background-color: #ffffff !important;
}

/* ===== CARD COMPONENT ===== */
/* Modern card design with flexible layouts */
/* ===== BASE CARD STYLES ===== */
.card {
  display: flex;
  flex-direction: column;
  background: var(--surface-default);
  border: var(--border-card);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: var(--transition-card);
  /* Apply card base mixin */
  background: var(--color-bg-secondary);
  border: var(--border-card);
  border-radius: var(--border-radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
  transition: box-shadow var(--duration-quick) var(--ease-ui);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
}

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

/* ===== CARD SECTIONS ===== */
.card-header {
  padding: var(--card-padding);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-1);
}

.card-body {
  padding: var(--card-padding);
  flex: 1;
}

.card-footer {
  padding: var(--card-padding);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-1);
}

/* ===== CARD TITLE AND TEXT ===== */
.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-heading);
  margin: 0 0 var(--spacing-xs) 0;
  line-height: var(--line-height-heading);
}

.card-subtitle {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-sm) 0;
  line-height: var(--line-height-normal);
}

.card-text {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.card-text:not(:last-child) {
  margin-bottom: var(--spacing-sm);
}

/* ===== CARD VARIANTS ===== */
/* Card sizes */
.card-sm {
  padding: var(--card-padding-sm);
}

.card-sm .card-header,
.card-sm .card-body,
.card-sm .card-footer {
  padding: var(--card-padding-sm);
}

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

.card-lg .card-header,
.card-lg .card-body,
.card-lg .card-footer {
  padding: var(--card-padding-lg);
}

/* Compact card */
.card-compact {
  padding: var(--spacing-sm);
}

.card-compact .card-header,
.card-compact .card-body,
.card-compact .card-footer {
  padding: var(--spacing-sm);
}

/* ===== CARD STYLES ===== */
/* Elevated card */
.card-elevated {
  box-shadow: var(--shadow-lg);
  border: none;
}

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

/* Flat card */
.card-flat {
  box-shadow: none;
  border: 1px solid var(--border-default);
}

/* Outlined card */
.card-outlined {
  box-shadow: none;
  border: 2px solid var(--border-default);
}

.card-outlined:hover {
  border-color: var(--color-primary);
}

/* Borderless card */
.card-borderless {
  border: none;
  box-shadow: none;
  background: transparent;
}

/* ===== CARD COLORS ===== */
.card-primary {
  border-color: var(--color-primary);
}

.card-primary .card-header {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-bottom-color: var(--color-primary-dark);
}

.card-secondary {
  border-color: var(--color-secondary);
}

.card-secondary .card-header {
  background: var(--color-secondary);
  color: var(--color-secondary-contrast);
  border-bottom-color: var(--color-secondary-dark);
}

.card-success {
  border-color: var(--color-success);
}

.card-success .card-header {
  background: var(--color-success);
  color: var(--color-success-contrast);
  border-bottom-color: var(--color-success-dark);
}

.card-warning {
  border-color: var(--color-warning);
}

.card-warning .card-header {
  background: var(--color-warning);
  color: var(--color-warning-contrast);
  border-bottom-color: var(--color-warning-dark);
}

.card-danger {
  border-color: var(--color-danger);
}

.card-danger .card-header {
  background: var(--color-danger);
  color: var(--color-danger-contrast);
  border-bottom-color: var(--color-danger-dark);
}

.card-info {
  border-color: var(--color-info);
}

.card-info .card-header {
  background: var(--color-info);
  color: var(--color-info-contrast);
  border-bottom-color: var(--color-info-dark);
}

/* ===== CARD LAYOUTS ===== */
/* Horizontal card */
.card-horizontal {
  flex-direction: row;
}

.card-horizontal .card-img {
  width: 200px;
  flex-shrink: 0;
}

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

/* Card with image */
.card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--border-radius-card) var(--border-radius-card) 0 0;
}

.card-img-bottom {
  border-radius: 0 0 var(--border-radius-card) var(--border-radius-card);
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: var(--card-padding);
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* ===== CARD GROUPS ===== */
.card-group {
  display: flex;
  gap: var(--card-spacing);
}

.card-group .card {
  flex: 1;
}

/* Card deck */
.card-deck {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--card-spacing);
}

/* Card columns */
.card-columns {
  column-count: 3;
  column-gap: var(--card-spacing);
  column-fill: balance;
}

.card-columns .card {
  display: inline-block;
  width: 100%;
  margin-bottom: var(--card-spacing);
  break-inside: avoid;
}

/* ===== CARD ACTIONS ===== */
.card-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
  margin-top: var(--spacing-md);
}

.card-actions-center {
  justify-content: center;
}

.card-actions-end {
  justify-content: flex-end;
}

.card-actions-between {
  justify-content: space-between;
}

/* ===== CARD STATES ===== */
.card-loading {
  position: relative;
  overflow: hidden;
}

.card-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: card-shimmer 1.5s infinite;
}

@keyframes card-shimmer {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}
.card-disabled {
  opacity: 0.6;
  pointer-events: none;
}

.card-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* ===== CARD INTERACTIVE ===== */
.card-clickable {
  cursor: pointer;
  transition: var(--transition-card);
}

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

.card-clickable:active {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ===== RESPONSIVE CARDS ===== */
@media (max-width: 767px) {
  .card-horizontal {
    flex-direction: column;
  }
  .card-horizontal .card-img {
    width: 100%;
    height: 200px;
  }
  .card-columns {
    column-count: 1;
  }
  .card-deck {
    grid-template-columns: 1fr;
  }
  .card-group {
    flex-direction: column;
  }
}
@media (max-width: 1023px) {
  .card-columns {
    column-count: 2;
  }
}
/* ===== CARD UTILITIES ===== */
.card-flush {
  border-radius: 0;
}

.card-flush .card-img {
  border-radius: 0;
}

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

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

/* ===== DARK MODE OVERRIDES ===== */
@media (prefers-color-scheme: dark) {
  .card-img-overlay {
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
  }
}
html.dark-mode .card-img-overlay {
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
}

/* ===== MODAL COMPONENT ===== */
/* Modal Backdrop */
.modal-backdrop-enhanced {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1040;
  opacity: 0;
  visibility: hidden;
  transition: all var(--animation-normal) var(--animation-ease);
}

.modal-backdrop-enhanced.show {
  opacity: 1;
  visibility: visible;
}

/* Modal Container */
.modal-enhanced {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
  opacity: 0;
  visibility: hidden;
  transition: all var(--animation-normal) var(--animation-ease);
}

.modal-enhanced.show {
  opacity: 1;
  visibility: visible;
}

/* Modal Dialog */
.modal-dialog-enhanced {
  background: var(--bg-primary);
  border-radius: var(--spacing-md);
  box-shadow: var(--shadow-xl);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.9) translateY(-20px);
  transition: all var(--animation-normal) var(--animation-ease);
  position: relative;
  width: 100%;
  max-width: 500px;
}

.modal-enhanced.show .modal-dialog-enhanced {
  transform: scale(1) translateY(0);
}

/* Modal Sizes */
.modal-dialog-enhanced.modal-sm {
  max-width: 300px;
}

.modal-dialog-enhanced.modal-md {
  max-width: 500px;
}

.modal-dialog-enhanced.modal-lg {
  max-width: 800px;
}

.modal-dialog-enhanced.modal-xl {
  max-width: 1140px;
}

.modal-dialog-enhanced.modal-full {
  max-width: 95vw;
  max-height: 95vh;
  width: 95vw;
  height: 95vh;
}

/* Modal Header */
.modal-header-enhanced {
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--bg-primary);
  border-radius: var(--spacing-md) var(--spacing-md) 0 0;
}

.modal-title-enhanced {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
  line-height: 1.4;
}

.modal-close-enhanced {
  background: none;
  border: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: var(--spacing-xs);
  transition: all var(--animation-fast) var(--animation-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
}

.modal-close-enhanced:hover {
  background: var(--secondary-bg);
  color: var(--text-primary);
}

.modal-close-enhanced .icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* Modal Body */
.modal-body-enhanced {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex: 1;
  color: var(--text-primary);
  line-height: 1.6;
}

.modal-body-enhanced::-webkit-scrollbar {
  width: 6px;
}

.modal-body-enhanced::-webkit-scrollbar-track {
  background: var(--secondary-bg);
}

.modal-body-enhanced::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}

.modal-body-enhanced::-webkit-scrollbar-thumb:hover {
  background: var(--text-secondary);
}

/* Modal Footer */
.modal-footer-enhanced {
  padding: var(--spacing-lg);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-sm);
  flex-shrink: 0;
  background: var(--bg-primary);
  border-radius: 0 0 var(--spacing-md) var(--spacing-md);
}

.modal-footer-enhanced.footer-center {
  justify-content: center;
}

.modal-footer-enhanced.footer-between {
  justify-content: space-between;
}

/* Modal Variants */
.modal-dialog-enhanced.modal-success .modal-header-enhanced {
  background: var(--success-color);
  color: white;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.modal-dialog-enhanced.modal-success .modal-title-enhanced {
  color: white;
}

.modal-dialog-enhanced.modal-success .modal-close-enhanced {
  color: rgba(255, 255, 255, 0.8);
}

.modal-dialog-enhanced.modal-success .modal-close-enhanced:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.modal-dialog-enhanced.modal-error .modal-header-enhanced {
  background: var(--error-color);
  color: white;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.modal-dialog-enhanced.modal-error .modal-title-enhanced {
  color: white;
}

.modal-dialog-enhanced.modal-error .modal-close-enhanced {
  color: rgba(255, 255, 255, 0.8);
}

.modal-dialog-enhanced.modal-error .modal-close-enhanced:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

.modal-dialog-enhanced.modal-warning .modal-header-enhanced {
  background: var(--warning-color);
  color: white;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}

.modal-dialog-enhanced.modal-warning .modal-title-enhanced {
  color: white;
}

.modal-dialog-enhanced.modal-warning .modal-close-enhanced {
  color: rgba(255, 255, 255, 0.8);
}

.modal-dialog-enhanced.modal-warning .modal-close-enhanced:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

/* Modal Content Sections */
.modal-section {
  margin-bottom: var(--spacing-lg);
}

.modal-section:last-child {
  margin-bottom: 0;
}

.modal-section-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--spacing-sm);
}

.modal-section-content {
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Modal Loading State */
.modal-dialog-enhanced.modal-loading {
  pointer-events: none;
}

.modal-dialog-enhanced.modal-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.modal-dialog-enhanced.modal-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border: 3px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: modal-spinner 1s linear infinite;
  z-index: 2;
}

@keyframes modal-spinner {
  to {
    transform: rotate(360deg);
  }
}
/* Modal Animations */
.modal-enhanced.modal-fade-in {
  animation: modal-fade-in var(--animation-normal) var(--animation-ease);
}

.modal-enhanced.modal-fade-out {
  animation: modal-fade-out var(--animation-normal) var(--animation-ease);
}

@keyframes modal-fade-in {
  from {
    opacity: 0;
    visibility: hidden;
  }
  to {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes modal-fade-out {
  from {
    opacity: 1;
    visibility: visible;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.modal-dialog-enhanced.modal-slide-up {
  animation: modal-slide-up var(--animation-normal) var(--animation-ease);
}

@keyframes modal-slide-up {
  from {
    transform: scale(0.9) translateY(20px);
  }
  to {
    transform: scale(1) translateY(0);
  }
}
.modal-dialog-enhanced.modal-zoom-in {
  animation: modal-zoom-in var(--animation-normal) var(--animation-ease);
}

@keyframes modal-zoom-in {
  from {
    transform: scale(0.8);
  }
  to {
    transform: scale(1);
  }
}
/* Modal Responsive Design */
@media (max-width: 768px) {
  .modal-enhanced {
    padding: var(--spacing-md);
    align-items: flex-end;
  }
  .modal-dialog-enhanced {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--spacing-md) var(--spacing-md) 0 0;
  }
  .modal-dialog-enhanced.modal-full {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .modal-header-enhanced,
  .modal-body-enhanced,
  .modal-footer-enhanced {
    padding: var(--spacing-md);
  }
  .modal-footer-enhanced {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  .modal-footer-enhanced .btn {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .modal-enhanced {
    padding: 0;
    align-items: stretch;
  }
  .modal-dialog-enhanced {
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
}
/* Dark Mode Modal Styles */
html.dark-mode .modal-backdrop-enhanced {
  background: rgba(0, 0, 0, 0.7);
}
html.dark-mode .modal-dialog-enhanced {
  background: var(--color-bg-primary);
  box-shadow: 0 25px 50px var(--shadow-color-heavy);
}
html.dark-mode .modal-header-enhanced {
  background: var(--color-bg-primary);
  border-bottom-color: var(--color-border-primary);
}
html.dark-mode .modal-footer-enhanced {
  background: var(--color-bg-primary);
  border-top-color: var(--color-border-primary);
}
html.dark-mode .modal-body-enhanced::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}
html.dark-mode .modal-body-enhanced::-webkit-scrollbar-thumb {
  background: var(--color-border-secondary);
}
html.dark-mode .modal-dialog-enhanced.modal-loading::after {
  background: var(--color-bg-overlay);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop-enhanced,
  .modal-enhanced,
  .modal-dialog-enhanced {
    transition: opacity var(--animation-fast) ease;
  }
  .modal-dialog-enhanced {
    transform: none !important;
  }
  .modal-enhanced.show .modal-dialog-enhanced {
    transform: none !important;
  }
  .modal-enhanced.modal-fade-in,
  .modal-enhanced.modal-fade-out,
  .modal-dialog-enhanced.modal-slide-up,
  .modal-dialog-enhanced.modal-zoom-in {
    animation: none;
  }
}
/* Shape Panel - Floating panel positioned within canvas area */
.shape-panel {
  position: absolute;
  top: var(--spacing-lg);
  left: var(--spacing-lg);
  width: 280px;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 100;
  font-family: var(--font-family-base);
  /* Position relative to canvas-container */
  transform: translateZ(0); /* Create stacking context */
}

/* Ensure canvas-container has relative positioning for shape panel */
.canvas-container {
  position: relative;
}

.shape-panel-content {
  padding: 0;
}

.shape-panel-header {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.shape-panel-title {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--gray-800);
}

.shape-panel-close {
  background: none;
  border: none;
  font-size: var(--font-size-lg);
  color: var(--gray-500);
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius-sm);
  transition: all var(--animation-fast) var(--animation-ease);
}

.shape-panel-close:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}

.shape-panel-body {
  padding: var(--spacing-md);
}

.shape-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

.shape-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm);
  border: 1px solid var(--gray-300);
  background: white;
  border-radius: var(--spacing-sm);
  cursor: pointer;
  transition: all var(--animation-fast) var(--animation-ease);
  color: var(--text-primary);
  font-size: var(--font-size-xs);
  gap: var(--spacing-xs);
  min-height: 50px;
}

.shape-option:hover {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.shape-option svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Responsive adjustments for shape panel */
@media (max-width: 768px) {
  .shape-panel {
    width: 240px;
    top: var(--spacing-md);
    left: var(--spacing-md);
  }
  .shape-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  .shape-panel {
    width: 200px;
    top: var(--spacing-sm);
    left: var(--spacing-sm);
  }
}
.shape-option span {
  font-weight: var(--font-weight-medium);
  text-align: center;
  line-height: 1.2;
  font-size: 10px; /* Smaller text */
}

/* Canvas area specific positioning */
.canvas-wrapper {
  position: relative; /* Ensure canvas wrapper is positioned for absolute children */
}

/* Alternative positioning options */
.shape-panel.position-top-right {
  top: 20px;
  right: 20px;
  left: auto;
}

.shape-panel.position-bottom-left {
  top: auto;
  bottom: 20px;
  left: 20px;
}

.shape-panel.position-bottom-right {
  top: auto;
  bottom: 20px;
  right: 20px;
  left: auto;
}

/* Enhanced Media Library Styles */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.media-item {
  position: relative;
  border: 1px solid var(--gray-300);
  border-radius: var(--border-radius-md);
  overflow: hidden;
  transition: all var(--animation-fast) var(--animation-ease);
  background: white;
  cursor: pointer;
  aspect-ratio: 1; /* Square thumbnails */
}

.media-item:hover {
  border-color: var(--primary-500);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures consistent sizing */
  object-position: center;
  display: block;
  transition: transform var(--animation-fast) var(--animation-ease);
}

.media-item:hover img {
  transform: scale(1.05);
}

.media-item .media-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-xs);
  opacity: 0;
  transition: opacity var(--animation-fast) var(--animation-ease);
}

.media-item:hover .media-info {
  opacity: 1;
}

.no-media {
  grid-column: 1/-1;
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--gray-500);
  font-style: italic;
}

/* Responsive media grid */
@media (max-width: 768px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: var(--spacing-xs);
  }
}
@media (max-width: 480px) {
  .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  }
}
.shape-option span {
  font-weight: var(--font-weight-medium);
  text-align: center;
  line-height: 1.2;
  font-size: 10px; /* Smaller text */
}

/* Canvas area specific positioning */
.canvas-wrapper {
  position: relative; /* Ensure canvas wrapper is positioned for absolute children */
}

/* Alternative positioning options */
.shape-panel.position-top-right {
  top: 20px;
  right: 20px;
  left: auto;
}

.shape-panel.position-bottom-left {
  top: auto;
  bottom: 20px;
  left: 20px;
}

.shape-panel.position-bottom-right {
  top: auto;
  bottom: 20px;
  right: 20px;
  left: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .shape-panel {
    top: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    max-width: 260px;
  }
  .shape-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .shape-option {
    min-height: 40px;
    padding: var(--spacing-xs);
  }
  .shape-option span {
    font-size: 9px;
  }
}
/* ===== NAVIGATION COMPONENT ===== */
/* Base Navigation */
.nav-enhanced {
  display: flex;
  gap: var(--space-1);
}

.nav-item-enhanced {
  position: relative;
  padding: var(--space-2) var(--space-3);
  color: var(--text-color-muted, #6b7280);
  text-decoration: none;
  border-radius: var(--interactive-focus-radius);
  transition: var(--interactive-transition);
  outline: none;
  cursor: pointer;
  border: none;
  background: none;
  font-size: inherit;
  font-family: inherit;
}

.nav-item-enhanced:hover {
  color: var(--text-color, #1f2937);
  background: var(--background-color-hover, #f9fafb);
  transform: translateY(-1px);
}

.nav-item-enhanced:focus-visible {
  color: var(--text-color, #1f2937);
  background: var(--primary-color-light, #dbeafe);
  outline: 2px solid var(--a11y-focus-color);
  outline-offset: 2px;
}

.nav-item-enhanced.active {
  color: var(--primary-color, #3b82f6);
  background: var(--primary-color-light, #dbeafe);
  font-weight: 600;
}

/* Tab Navigation */
.tab-navigation {
  display: flex;
  position: relative;
  border-bottom: 2px solid var(--border-color, #e5e7eb);
}

.tab-navigation::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--border-color, #e5e7eb);
}

.tab-item {
  position: relative;
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  color: var(--text-color-muted, #6b7280);
  cursor: pointer;
  transition: all var(--animation-fast) var(--ease-out);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: inherit;
  font-family: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.tab-item:hover {
  color: var(--text-color, #1f2937);
  background: var(--background-color-hover, #f9fafb);
}

.tab-item:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring-shadow);
  z-index: 1;
}

.tab-item.active {
  color: var(--primary-color, #3b82f6);
  background: var(--background-color, #ffffff);
  font-weight: 600;
}

.tab-item.active::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--primary-color, #3b82f6);
}

/* Vertical Tab Navigation */
.tab-navigation.vertical {
  flex-direction: column;
  border-bottom: none;
  border-right: 2px solid var(--border-color, #e5e7eb);
}

.tab-navigation.vertical::before {
  bottom: auto;
  right: 0;
  top: 0;
  width: 2px;
  height: 100%;
}

.tab-navigation.vertical .tab-item {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  justify-content: flex-start;
}

.tab-navigation.vertical .tab-item.active::after {
  bottom: auto;
  right: -2px;
  top: 0;
  width: 2px;
  height: 100%;
}

/* Menu Navigation */
.menu-item {
  font-size: var(--font-size-sm);
  font-weight: 400;
  line-height: 1.4;
  padding: var(--space-2) var(--space-3);
  color: var(--text-color);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-radius: var(--radius-sm);
  transition: all var(--animation-fast) ease;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
}

.menu-item:hover {
  background: var(--background-color-hover, #f9fafb);
  color: var(--text-color);
}

.menu-item:focus-visible {
  outline: 2px solid var(--a11y-focus-color);
  outline-offset: 2px;
}

.menu-item.active {
  background: var(--primary-color-light, #dbeafe);
  color: var(--primary-color, #3b82f6);
  font-weight: 500;
}

.menu-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
}

/* Sidebar Navigation */
.sidebar {
  padding: var(--spacing-md);
  background: var(--bg-primary);
  border-right: 1px solid var(--border-color);
  height: 100%;
  overflow-y: auto;
}

.sidebar-header {
  padding: var(--spacing-md) 0;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: var(--spacing-md);
}

.sidebar-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.sidebar-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Navigation Sections */
.nav-section {
  margin-bottom: var(--spacing-lg);
}

.nav-section:last-child {
  margin-bottom: 0;
}

.nav-section-header {
  padding: var(--spacing-sm) 0;
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
}

.nav-section-header:hover {
  color: var(--text-primary);
}

.nav-section-header svg {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  transition: transform var(--animation-fast) ease;
}

.nav-section-header.collapsed svg {
  transform: rotate(-90deg);
}

.nav-section-header:not(.collapsed) svg {
  transform: rotate(0deg);
}

.nav-subsection {
  margin-left: var(--spacing-md);
  padding-left: var(--spacing-sm);
  border-left: 1px solid var(--border-color);
}

/* Breadcrumb Navigation */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb-item a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--animation-fast) ease;
}

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

.breadcrumb-item.active {
  color: var(--text-primary);
  font-weight: 500;
}

.breadcrumb-separator {
  color: var(--text-muted);
  font-size: var(--font-size-xs);
}

/* Pagination Navigation */
.pagination {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  justify-content: center;
}

.pagination-item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  transition: all var(--animation-fast) ease;
  cursor: pointer;
}

.pagination-item:hover {
  background: var(--background-color-hover, #f9fafb);
  border-color: var(--border-color-hover);
}

.pagination-item:focus-visible {
  outline: 2px solid var(--a11y-focus-color);
  outline-offset: 2px;
}

.pagination-item.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
  font-weight: 500;
}

.pagination-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination-ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* Stepper Navigation */
.stepper {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.stepper-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
}

.stepper-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
  width: var(--space-4);
  height: 1px;
  background: var(--border-color);
}

.stepper-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--border-color);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  transition: all var(--animation-fast) ease;
}

.stepper-item.active .stepper-indicator {
  background: var(--primary-color);
  color: white;
}

.stepper-item.completed .stepper-indicator {
  background: var(--success-color);
  color: white;
}

.stepper-label {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  font-weight: 500;
}

.stepper-item.active .stepper-label {
  color: var(--primary-color);
  font-weight: 600;
}

.stepper-item.completed .stepper-label {
  color: var(--text-primary);
}

/* Responsive Navigation */
@media (max-width: 768px) {
  .nav-enhanced {
    flex-direction: column;
    gap: var(--space-1);
  }
  .tab-navigation {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .tab-navigation::-webkit-scrollbar {
    display: none;
  }
  .sidebar {
    padding: var(--spacing-sm);
  }
  .breadcrumb {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .breadcrumb::-webkit-scrollbar {
    display: none;
  }
  .pagination {
    gap: var(--space-1);
  }
  .pagination-item {
    min-width: 28px;
    height: 28px;
    font-size: var(--font-size-xs);
  }
  .stepper {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .stepper-item:not(:last-child)::after {
    left: 12px;
    top: calc(100% + var(--space-1));
    width: 1px;
    height: var(--space-2);
    transform: none;
  }
}
@media (max-width: 480px) {
  .nav-item-enhanced {
    padding: var(--space-2);
  }
  .tab-item {
    padding: var(--space-2) var(--space-3);
    font-size: var(--font-size-sm);
  }
  .menu-item {
    padding: var(--space-2);
    font-size: var(--font-size-xs);
  }
}
/* Dark Mode Navigation Styles */
html.dark-mode .nav-item-enhanced {
  color: var(--text-color-muted-dark, #9ca3af);
}
html.dark-mode .nav-item-enhanced:hover {
  color: var(--text-color-dark, #f9fafb);
  background: var(--background-color-hover-dark, #374151);
}
html.dark-mode .nav-item-enhanced.active {
  background: var(--primary-color-light-dark, #1e3a8a);
}
html.dark-mode .tab-item {
  color: var(--text-color-muted-dark, #9ca3af);
}
html.dark-mode .tab-item:hover {
  color: var(--text-color-dark, #f9fafb);
  background: var(--background-color-hover-dark, #374151);
}
html.dark-mode .tab-item.active {
  background: var(--background-color-dark, #1f2937);
}
html.dark-mode .sidebar {
  background: var(--bg-primary-dark, #1f2937);
  border-right-color: var(--border-color-dark, #374151);
}
html.dark-mode .sidebar-header {
  border-bottom-color: var(--border-color-dark, #374151);
}
html.dark-mode .menu-item:hover {
  background: var(--background-color-hover-dark, #374151);
}
html.dark-mode .menu-item.active {
  background: var(--primary-color-light-dark, #1e3a8a);
}
html.dark-mode .pagination-item {
  background: var(--bg-primary-dark, #1f2937);
  border-color: var(--border-color-dark, #374151);
}
html.dark-mode .pagination-item:hover {
  background: var(--background-color-hover-dark, #374151);
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .nav-item-enhanced,
  .tab-item,
  .menu-item,
  .pagination-item,
  .stepper-indicator {
    transition: none;
  }
  .nav-item-enhanced:hover,
  .tab-item:hover,
  .menu-item:hover {
    transform: none;
  }
  .nav-section-header svg {
    transition: none;
  }
}
/* User Menu Styles */
.user-panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.user-menu-toggle {
  background: none;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-sm) var(--spacing-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  transition: all var(--duration-fast) ease;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.user-menu-toggle:hover {
  background-color: var(--surface-hover);
  border-color: var(--color-primary);
}

.user-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.dropdown-arrow {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  transition: transform var(--duration-fast) ease;
}

.user-menu-toggle.active .dropdown-arrow {
  transform: rotate(180deg);
}

.user-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--color-bg-primary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 250px;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all var(--duration-normal) ease;
  margin-top: 5px;
}

.user-menu-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.user-menu-section {
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border-secondary);
}

.user-menu-section:last-child {
  border-bottom: none;
}

.user-menu-section h4 {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.theme-selector {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
}

.theme-selector label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.theme-selector select {
  flex: 1;
  padding: var(--spacing-xs) var(--spacing-sm);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--border-radius-sm);
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

/* Dark mode overrides */
html.dark-mode .user-menu-dropdown {
  background: var(--color-bg-primary);
  border-color: var(--color-border-primary);
}

html.dark-mode .menu-item:hover {
  background: var(--surface-hover);
}

html.dark-mode .theme-selector select {
  background: var(--color-bg-primary);
  border-color: var(--color-border-primary);
  color: var(--color-text-primary);
}

/* ===== TABLES COMPONENT ===== */
/* Base Table Styles */
.table, .data-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-base);
  background: var(--bg-primary);
  color: var(--text-primary);
}

.table th, .data-table th,
.table td,
.data-table td {
  padding: var(--space-3);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-color);
}

.table th, .data-table th {
  background: var(--bg-secondary);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  position: sticky;
  top: 0;
  z-index: 10;
}

.table tbody tr, .data-table tbody tr {
  transition: background-color var(--transition-fast);
}

.table tbody tr:hover, .data-table tbody tr:hover {
  background: var(--bg-hover);
}

/* Table Variants */
.table-striped tbody tr:nth-child(even) {
  background: var(--bg-muted);
}

.table-striped tbody tr:nth-child(even):hover {
  background: var(--bg-hover);
}

.table-bordered {
  border: 1px solid var(--border-color);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--border-color);
}

.table-borderless th,
.table-borderless td {
  border: none;
}

.table-sm th,
.table-sm td {
  padding: var(--space-2);
  font-size: var(--font-size-xs);
}

.table-lg th,
.table-lg td {
  padding: var(--space-4);
  font-size: var(--font-size-base);
}

/* Table Colors */
.table-primary {
  --table-bg: var(--primary-50);
  --table-border: var(--primary-200);
  background: var(--table-bg);
}

.table-secondary {
  --table-bg: var(--gray-50);
  --table-border: var(--gray-200);
  background: var(--table-bg);
}

.table-success {
  --table-bg: var(--success-50);
  --table-border: var(--success-200);
  background: var(--table-bg);
}

.table-warning {
  --table-bg: var(--warning-50);
  --table-border: var(--warning-200);
  background: var(--table-bg);
}

.table-danger {
  --table-bg: var(--error-50);
  --table-border: var(--error-200);
  background: var(--table-bg);
}

/* Sortable Tables */
.table-sortable th {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: var(--space-6);
}

.table-sortable th:hover {
  background: var(--bg-hover);
}

.table-sortable th::after {
  content: "";
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid var(--text-muted);
  opacity: 0.3;
  transition: opacity var(--transition-fast);
}

.table-sortable th:hover::after {
  opacity: 0.6;
}

.table-sortable th.sort-asc::after {
  border-bottom: 4px solid var(--text-primary);
  border-top: none;
  opacity: 1;
}

.table-sortable th.sort-desc::after {
  border-top: 4px solid var(--text-primary);
  border-bottom: none;
  opacity: 1;
}

/* Data Table with Enhanced Features */
.data-table .table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.data-table .table-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.data-table .table-actions {
  display: flex;
  gap: var(--space-2);
}
.data-table .table-search {
  position: relative;
}
.data-table .table-search input {
  padding: var(--space-2) var(--space-8) var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
}
.data-table .table-search input:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}
.data-table .table-search .search-icon {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
}

/* Table Pagination */
.table-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.table-pagination .pagination-info {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
.table-pagination .pagination-controls {
  display: flex;
  gap: var(--space-1);
}
.table-pagination .pagination-controls button {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.table-pagination .pagination-controls button:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--primary-300);
}
.table-pagination .pagination-controls button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.table-pagination .pagination-controls button.active {
  background: var(--primary-500);
  color: white;
  border-color: var(--primary-500);
}

/* Responsive Tables */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-responsive .table, .table-responsive .data-table {
  min-width: 600px;
}

@media (max-width: 576px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-sm .table, .table-responsive-sm .data-table {
    min-width: 500px;
  }
}

@media (max-width: 768px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-md .table, .table-responsive-md .data-table {
    min-width: 600px;
  }
}

@media (max-width: 992px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-responsive-lg .table, .table-responsive-lg .data-table {
    min-width: 700px;
  }
}

/* Mobile-First Responsive Design */
@media (max-width: 768px) {
  .table-mobile-stack .table, .table-mobile-stack .data-table,
  .table-mobile-stack .table thead,
  .table-mobile-stack .data-table thead,
  .table-mobile-stack .table tbody,
  .table-mobile-stack .data-table tbody,
  .table-mobile-stack .table th,
  .table-mobile-stack .data-table th,
  .table-mobile-stack .table td,
  .table-mobile-stack .data-table td,
  .table-mobile-stack .table tr,
  .table-mobile-stack .data-table tr {
    display: block;
  }
  .table-mobile-stack .table thead tr, .table-mobile-stack .data-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .table-mobile-stack .table tr, .table-mobile-stack .data-table tr {
    border: 1px solid var(--border-color);
    margin-bottom: var(--space-3);
    border-radius: var(--radius-sm);
    padding: var(--space-3);
    background: var(--bg-primary);
  }
  .table-mobile-stack .table td, .table-mobile-stack .data-table td {
    border: none;
    position: relative;
    padding-left: 30% !important;
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
  }
  .table-mobile-stack .table td::before, .table-mobile-stack .data-table td::before {
    content: attr(data-label) ":";
    position: absolute;
    left: var(--space-3);
    width: 25%;
    padding-right: var(--space-2);
    white-space: nowrap;
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
  }
}
/* Table Loading State */
.table-loading {
  position: relative;
}
.table-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.table-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-color);
  border-top: 3px solid var(--primary-500);
  border-radius: 50%;
  animation: table-spinner 1s linear infinite;
  z-index: 101;
}

@keyframes table-spinner {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
/* Table Empty State */
.table-empty {
  text-align: center;
  padding: var(--space-8);
  color: var(--text-muted);
}
.table-empty .empty-icon {
  font-size: 3rem;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}
.table-empty .empty-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.table-empty .empty-description {
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-4);
}

/* Accessible Tables */
.table-accessible {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: var(--a11y-text-size-base, var(--font-size-sm));
  line-height: var(--a11y-line-height-base, var(--line-height-base));
}

.table-accessible th,
.table-accessible td {
  padding: var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-color);
}

.table-accessible th {
  background: var(--bg-secondary);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.table-accessible tbody tr:hover {
  background: var(--bg-hover);
}

.table-accessible tbody tr:focus-within {
  background: var(--primary-50);
  outline: 2px solid var(--primary-500);
  outline-offset: -2px;
}

/* Table Row States */
.table tr.row-selected, .data-table tr.row-selected {
  background: var(--primary-50) !important;
}
.table tr.row-selected td, .data-table tr.row-selected td {
  border-color: var(--primary-200);
}

.table tr.row-success, .data-table tr.row-success {
  background: var(--success-50);
}
.table tr.row-success td, .data-table tr.row-success td {
  border-color: var(--success-200);
}

.table tr.row-warning, .data-table tr.row-warning {
  background: var(--warning-50);
}
.table tr.row-warning td, .data-table tr.row-warning td {
  border-color: var(--warning-200);
}

.table tr.row-danger, .data-table tr.row-danger {
  background: var(--error-50);
}
.table tr.row-danger td, .data-table tr.row-danger td {
  border-color: var(--error-200);
}

/* Table Cell Alignment */
.table .text-left, .data-table .text-left {
  text-align: left;
}

.table .text-center, .data-table .text-center {
  text-align: center;
}

.table .text-right, .data-table .text-right {
  text-align: right;
}

.table .text-justify, .data-table .text-justify {
  text-align: justify;
}

.table .align-top, .data-table .align-top {
  vertical-align: top;
}

.table .align-middle, .data-table .align-middle {
  vertical-align: middle;
}

.table .align-bottom, .data-table .align-bottom {
  vertical-align: bottom;
}

/* Table Column Widths */
.table .col-auto, .data-table .col-auto {
  width: auto;
}

.table .col-1, .data-table .col-1 {
  width: 8.333333%;
}

.table .col-2, .data-table .col-2 {
  width: 16.666667%;
}

.table .col-3, .data-table .col-3 {
  width: 25%;
}

.table .col-4, .data-table .col-4 {
  width: 33.333333%;
}

.table .col-5, .data-table .col-5 {
  width: 41.666667%;
}

.table .col-6, .data-table .col-6 {
  width: 50%;
}

.table .col-7, .data-table .col-7 {
  width: 58.333333%;
}

.table .col-8, .data-table .col-8 {
  width: 66.666667%;
}

.table .col-9, .data-table .col-9 {
  width: 75%;
}

.table .col-10, .data-table .col-10 {
  width: 83.333333%;
}

.table .col-11, .data-table .col-11 {
  width: 91.666667%;
}

.table .col-12, .data-table .col-12 {
  width: 100%;
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  .table, .data-table {
    --bg-primary: var(--gray-900);
    --bg-secondary: var(--gray-800);
    --bg-muted: var(--gray-850);
    --bg-hover: var(--gray-700);
    --text-primary: var(--gray-100);
    --text-muted: var(--gray-400);
    --border-color: var(--gray-700);
  }
  .table-loading::after {
    background: rgba(0, 0, 0, 0.8);
  }
}
html.dark-mode .table-accessible th {
  background: var(--gray-800);
  color: var(--gray-100);
}
html.dark-mode .table-accessible tbody tr:hover {
  background: var(--gray-700);
}
html.dark-mode .table-accessible tbody tr:focus-within {
  background: var(--primary-900);
  outline-color: var(--primary-400);
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .table-accessible th,
  .table-accessible td {
    border-width: 2px;
  }
  .table-sortable th::after {
    border-width: 6px;
  }
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .table tbody tr, .data-table tbody tr,
  .table-sortable th::after,
  .table-pagination button {
    transition: none;
  }
  .table-loading::before {
    animation: none;
    border: 3px solid var(--primary-500);
  }
}
/* Print Styles */
@media print {
  .table, .data-table {
    border-collapse: collapse !important;
  }
  .table th, .data-table th,
  .table td,
  .data-table td {
    border: 1px solid #000 !important;
    padding: 0.25rem !important;
  }
  .table-pagination,
  .table-actions,
  .table-search {
    display: none !important;
  }
}
/* ===== TOOLTIPS COMPONENT ===== */
/* Comprehensive styles for tooltips with positioning, variants, and animations */
/* ===== ENHANCED TOOLTIP SYSTEM ===== */
.tooltip-enhanced {
  position: relative;
  display: inline-block;
}

.tooltip-enhanced .tooltip-content {
  position: absolute;
  z-index: 1000;
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--tooltip-bg, #1f2937);
  color: var(--tooltip-text, #ffffff);
  font-size: var(--font-size-xs);
  font-weight: 500;
  line-height: 1.4;
  border-radius: var(--spacing-xs);
  white-space: nowrap;
  max-width: 200px;
  word-wrap: break-word;
  white-space: normal;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--spacing-xs)) scale(0.95);
  transition: all var(--animation-fast) var(--animation-ease);
  pointer-events: none;
}

/* ===== TOOLTIP ARROW ===== */
.tooltip-enhanced .tooltip-content::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
}

/* ===== TOOLTIP POSITIONING ===== */
/* Top Position */
.tooltip-enhanced .tooltip-content.tooltip-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(var(--spacing-xs)) scale(0.95);
  margin-bottom: var(--spacing-xs);
}

.tooltip-enhanced .tooltip-content.tooltip-top::before {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--tooltip-bg, #1f2937);
}

/* Bottom Position */
.tooltip-enhanced .tooltip-content.tooltip-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(calc(-1 * var(--spacing-xs))) scale(0.95);
  margin-top: var(--spacing-xs);
}

.tooltip-enhanced .tooltip-content.tooltip-bottom::before {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--tooltip-bg, #1f2937);
}

/* Left Position */
.tooltip-enhanced .tooltip-content.tooltip-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(var(--spacing-xs)) scale(0.95);
  margin-right: var(--spacing-xs);
}

.tooltip-enhanced .tooltip-content.tooltip-left::before {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--tooltip-bg, #1f2937);
}

/* Right Position */
.tooltip-enhanced .tooltip-content.tooltip-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(calc(-1 * var(--spacing-xs))) scale(0.95);
  margin-left: var(--spacing-xs);
}

.tooltip-enhanced .tooltip-content.tooltip-right::before {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--tooltip-bg, #1f2937);
}

/* ===== TOOLTIP SHOW STATES ===== */
.tooltip-enhanced:hover .tooltip-content,
.tooltip-enhanced.tooltip-show .tooltip-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) translateX(0) scale(1);
}

.tooltip-enhanced:hover .tooltip-content.tooltip-top,
.tooltip-enhanced.tooltip-show .tooltip-content.tooltip-top {
  transform: translateX(-50%) translateY(0) scale(1);
}

.tooltip-enhanced:hover .tooltip-content.tooltip-bottom,
.tooltip-enhanced.tooltip-show .tooltip-content.tooltip-bottom {
  transform: translateX(-50%) translateY(0) scale(1);
}

.tooltip-enhanced:hover .tooltip-content.tooltip-left,
.tooltip-enhanced.tooltip-show .tooltip-content.tooltip-left {
  transform: translateY(-50%) translateX(0) scale(1);
}

.tooltip-enhanced:hover .tooltip-content.tooltip-right,
.tooltip-enhanced.tooltip-show .tooltip-content.tooltip-right {
  transform: translateY(-50%) translateX(0) scale(1);
}

/* ===== TOOLTIP COLOR VARIANTS ===== */
.tooltip-enhanced .tooltip-content.tooltip-success {
  background: var(--success-color);
  color: white;
}

.tooltip-enhanced .tooltip-content.tooltip-success::before {
  border-top-color: var(--success-color);
  border-bottom-color: var(--success-color);
  border-left-color: var(--success-color);
  border-right-color: var(--success-color);
}

.tooltip-enhanced .tooltip-content.tooltip-error {
  background: var(--error-color);
  color: white;
}

.tooltip-enhanced .tooltip-content.tooltip-error::before {
  border-top-color: var(--error-color);
  border-bottom-color: var(--error-color);
  border-left-color: var(--error-color);
  border-right-color: var(--error-color);
}

.tooltip-enhanced .tooltip-content.tooltip-warning {
  background: var(--warning-color);
  color: white;
}

.tooltip-enhanced .tooltip-content.tooltip-warning::before {
  border-top-color: var(--warning-color);
  border-bottom-color: var(--warning-color);
  border-left-color: var(--warning-color);
  border-right-color: var(--warning-color);
}

.tooltip-enhanced .tooltip-content.tooltip-info {
  background: var(--info-color, #3b82f6);
  color: white;
}

.tooltip-enhanced .tooltip-content.tooltip-info::before {
  border-top-color: var(--info-color, #3b82f6);
  border-bottom-color: var(--info-color, #3b82f6);
  border-left-color: var(--info-color, #3b82f6);
  border-right-color: var(--info-color, #3b82f6);
}

/* ===== TOOLTIP SIZES ===== */
.tooltip-enhanced .tooltip-content.tooltip-sm {
  padding: calc(var(--spacing-xs) * 0.5) var(--spacing-xs);
  font-size: calc(var(--font-size-xs) * 0.9);
  max-width: 150px;
}

.tooltip-enhanced .tooltip-content.tooltip-lg {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-sm);
  max-width: 300px;
}

/* ===== TOOLTIP WITH ICONS ===== */
.tooltip-enhanced .tooltip-content .tooltip-icon {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  margin-right: calc(var(--spacing-xs) * 0.5);
  vertical-align: middle;
  flex-shrink: 0;
}

.tooltip-enhanced .tooltip-content.tooltip-with-icon {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-xs) * 0.5);
}

/* ===== TOOLTIP DELAY ANIMATIONS ===== */
.tooltip-enhanced.tooltip-delay-short .tooltip-content {
  transition-delay: 0.3s;
}

.tooltip-enhanced.tooltip-delay-long .tooltip-content {
  transition-delay: 0.8s;
}

/* ===== TOOLTIP FOR DISABLED ELEMENTS ===== */
.tooltip-enhanced.tooltip-disabled {
  cursor: not-allowed;
}

.tooltip-enhanced.tooltip-disabled .tooltip-content {
  background: var(--text-secondary);
  color: var(--bg-primary);
}

/* ===== BASIC TOOLTIP SYSTEM ===== */
.tooltip {
  position: relative;
}

.tooltip::before,
.tooltip::after {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: all var(--animation-fast) var(--ease-out);
  will-change: opacity, transform;
}

.tooltip::before {
  content: attr(data-tooltip);
  background-color: var(--color-gray-900);
  color: white;
  padding: var(--spacing-2) var(--spacing-3);
  border-radius: var(--border-radius);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-0.5rem);
  margin-bottom: 0.5rem;
}

.tooltip::after {
  content: "";
  border: 0.25rem solid transparent;
  border-top-color: var(--color-gray-900);
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.tooltip:hover::before,
.tooltip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== TOOLTIP ANIMATIONS ===== */
@keyframes tooltip-fade-in {
  from {
    opacity: 0;
    transform: translateY(var(--spacing-xs)) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
@keyframes tooltip-fade-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(var(--spacing-xs)) scale(0.95);
  }
}
/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .tooltip-enhanced .tooltip-content {
    max-width: 250px;
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm);
  }
  .tooltip-enhanced .tooltip-content.tooltip-sm {
    max-width: 180px;
  }
  .tooltip-enhanced .tooltip-content.tooltip-lg {
    max-width: 320px;
  }
  /* Adjust basic tooltip for mobile */
  .tooltip::before {
    max-width: 200px;
    white-space: normal;
    word-wrap: break-word;
  }
}
@media (max-width: 480px) {
  .tooltip-enhanced .tooltip-content {
    max-width: 200px;
    font-size: var(--font-size-xs);
  }
  .tooltip-enhanced .tooltip-content.tooltip-lg {
    max-width: 250px;
  }
}
/* ===== DARK MODE SUPPORT ===== */
html.dark-mode .tooltip-enhanced .tooltip-content {
  background: var(--tooltip-bg-dark, #f9fafb);
  color: var(--tooltip-text-dark, #1f2937);
  box-shadow: var(--shadow-lg-dark, 0 10px 25px rgba(0, 0, 0, 0.3));
}
html.dark-mode .tooltip-enhanced .tooltip-content::before {
  border-top-color: var(--tooltip-bg-dark, #f9fafb);
  border-bottom-color: var(--tooltip-bg-dark, #f9fafb);
  border-left-color: var(--tooltip-bg-dark, #f9fafb);
  border-right-color: var(--tooltip-bg-dark, #f9fafb);
}
html.dark-mode .tooltip-enhanced .tooltip-content.tooltip-success::before,
html.dark-mode .tooltip-enhanced .tooltip-content.tooltip-error::before,
html.dark-mode .tooltip-enhanced .tooltip-content.tooltip-warning::before,
html.dark-mode .tooltip-enhanced .tooltip-content.tooltip-info::before {
  border-top-color: inherit;
  border-bottom-color: inherit;
  border-left-color: inherit;
  border-right-color: inherit;
}
html.dark-mode .tooltip::before {
  background-color: var(--color-gray-100);
  color: var(--color-gray-900);
}
html.dark-mode .tooltip::after {
  border-top-color: var(--color-gray-100);
}

/* ===== ACCESSIBILITY FEATURES ===== */
/* High contrast mode support */
@media (prefers-contrast: high) {
  .tooltip-enhanced .tooltip-content {
    border: 2px solid currentColor;
  }
  .tooltip::before {
    border: 2px solid currentColor;
  }
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .tooltip-enhanced .tooltip-content {
    transition: opacity var(--animation-fast) ease;
    transform: none !important;
  }
  .tooltip-enhanced:hover .tooltip-content,
  .tooltip-enhanced.tooltip-show .tooltip-content {
    transform: none !important;
  }
  .tooltip::before,
  .tooltip::after {
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
  .tooltip:hover::before,
  .tooltip:hover::after {
    transform: translateX(-50%) !important;
  }
}
/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */
@media (hover: none) and (pointer: coarse) {
  .tooltip-enhanced:hover .tooltip-content {
    /* Disable hover on touch devices */
    opacity: 0;
    visibility: hidden;
  }
  .tooltip:hover::before,
  .tooltip:hover::after {
    opacity: 0;
  }
  /* Enable tooltips on focus for touch devices */
  .tooltip-enhanced:focus .tooltip-content,
  .tooltip-enhanced:focus-within .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) translateX(0) scale(1);
  }
  .tooltip:focus::before,
  .tooltip:focus::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
/* ===== FOCUS MANAGEMENT ===== */
.tooltip-enhanced:focus-visible .tooltip-content,
.tooltip:focus-visible::before,
.tooltip:focus-visible::after {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #3b82f6);
  outline-offset: 2px;
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
.tooltip-enhanced .tooltip-content {
  will-change: opacity, visibility, transform;
}

.tooltip-enhanced:not(:hover):not(.tooltip-show) .tooltip-content {
  will-change: auto;
}

.tooltip::before,
.tooltip::after {
  will-change: opacity, transform;
}

.tooltip:not(:hover) .tooltip::before,
.tooltip:not(:hover) .tooltip::after {
  will-change: auto;
}

/* ===== SCREEN READER SUPPORT ===== */
.tooltip-enhanced[aria-describedby],
.tooltip[aria-describedby] {
  /* Tooltip content is announced by screen readers when element is focused */
  position: relative;
}

.tooltip-enhanced .tooltip-content[role=tooltip],
.tooltip::before[role=tooltip] {
  /* Explicit tooltip role for screen readers */
  position: relative;
  z-index: var(--z-tooltip, 1000);
  /* Ensure proper stacking context for screen readers */
}

/* Additional accessibility support */
.tooltip-content[aria-hidden=false],
.tooltip::before[aria-hidden=false] {
  /* Visible tooltips should be accessible */
  position: relative;
}

/* ===== PRINT STYLES ===== */
@media print {
  .tooltip-enhanced .tooltip-content,
  .tooltip::before,
  .tooltip::after {
    display: none !important;
  }
}
/* ===== ALERTS & NOTIFICATIONS COMPONENT ===== */
/* Comprehensive styles for alerts, notifications, toasts, and badges */
/* ===== ALERT COMPONENT ===== */
.alert {
  padding: var(--spacing-md);
  border: 1px solid var(--border-color);
  border-radius: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.alert-icon {
  flex-shrink: 0;
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  margin-top: 2px;
}

.alert-content {
  flex: 1;
}

.alert-title {
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--spacing-xs) 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.alert-message {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.alert-actions {
  display: flex;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
}

.alert-close {
  background: none;
  border: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  color: var(--text-secondary);
  opacity: 0.7;
  transition: all var(--animation-fast) var(--animation-ease);
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--spacing-xs);
}

.alert-close:hover {
  opacity: 1;
  background: var(--secondary-bg);
}

/* Alert Color Variants */
.alert-primary {
  background: var(--primary-bg, #eff6ff);
  border-color: var(--primary-color, #3b82f6);
  color: var(--primary-text, #1e40af);
}

.alert-secondary {
  background: var(--secondary-bg, #f8fafc);
  border-color: var(--secondary-color, #64748b);
  color: var(--secondary-text, #475569);
}

.alert-success {
  background: var(--success-bg, #f0fdf4);
  border-color: var(--success-color, #22c55e);
  color: var(--success-text, #15803d);
}

.alert-warning {
  background: var(--warning-bg, #fffbeb);
  border-color: var(--warning-color, #f59e0b);
  color: var(--warning-text, #d97706);
}

.alert-danger {
  background: var(--error-bg, #fef2f2);
  border-color: var(--error-color, #ef4444);
  color: var(--error-text, #dc2626);
}

.alert-info {
  background: var(--info-bg, #f0f9ff);
  border-color: var(--info-color, #06b6d4);
  color: var(--info-text, #0891b2);
}

/* Alert Responsive Design */
@media (max-width: 767px) {
  .alert {
    padding: var(--spacing-sm);
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  .alert-actions {
    flex-direction: column;
    width: 100%;
  }
}
/* ===== NOTIFICATION CONTAINER ===== */
.notification-container {
  position: fixed;
  z-index: 1060;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  max-height: 100vh;
  overflow: hidden;
}

/* Notification Positioning */
.notification-container.top-right {
  top: var(--spacing-lg);
  right: var(--spacing-lg);
  align-items: flex-end;
}

.notification-container.top-left {
  top: var(--spacing-lg);
  left: var(--spacing-lg);
  align-items: flex-start;
}

.notification-container.top-center {
  top: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.notification-container.bottom-right {
  bottom: var(--spacing-lg);
  right: var(--spacing-lg);
  align-items: flex-end;
  flex-direction: column-reverse;
}

.notification-container.bottom-left {
  bottom: var(--spacing-lg);
  left: var(--spacing-lg);
  align-items: flex-start;
  flex-direction: column-reverse;
}

.notification-container.bottom-center {
  bottom: var(--spacing-lg);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column-reverse;
}

/* ===== TOAST NOTIFICATION ===== */
.toast-notification {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--spacing-sm);
  box-shadow: var(--shadow-lg);
  padding: var(--spacing-md);
  min-width: 300px;
  max-width: 400px;
  pointer-events: auto;
  position: relative;
  overflow: hidden;
  transform: translateX(100%);
  opacity: 0;
  transition: all var(--animation-normal) var(--animation-ease);
}

.toast-notification.show {
  transform: translateX(0);
  opacity: 1;
}

.toast-notification.hide {
  transform: translateX(100%);
  opacity: 0;
  margin-bottom: calc(-1 * (var(--spacing-md) * 2 + 60px));
}

/* Toast from left positioning */
.notification-container.top-left .toast-notification,
.notification-container.bottom-left .toast-notification {
  transform: translateX(-100%);
}

.notification-container.top-left .toast-notification.show,
.notification-container.bottom-left .toast-notification.show {
  transform: translateX(0);
}

.notification-container.top-left .toast-notification.hide,
.notification-container.bottom-left .toast-notification.hide {
  transform: translateX(-100%);
}

/* Toast from center positioning */
.notification-container.top-center .toast-notification,
.notification-container.bottom-center .toast-notification {
  transform: translateY(-20px) scale(0.95);
}

.notification-container.top-center .toast-notification.show,
.notification-container.bottom-center .toast-notification.show {
  transform: translateY(0) scale(1);
}

.notification-container.top-center .toast-notification.hide,
.notification-container.bottom-center .toast-notification.hide {
  transform: translateY(-20px) scale(0.95);
}

/* ===== TOAST COMPONENTS ===== */
.toast-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
}

.toast-icon {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
}

.toast-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  flex: 1;
  margin: 0;
}

.toast-close {
  background: none;
  border: none;
  padding: var(--spacing-xs);
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: var(--spacing-xs);
  transition: all var(--animation-fast) var(--animation-ease);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.toast-close:hover {
  background: var(--secondary-bg);
  color: var(--text-primary);
}

.toast-close .icon {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.toast-body {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  margin-bottom: var(--spacing-sm);
}

.toast-body:last-child {
  margin-bottom: 0;
}

.toast-actions {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: flex-end;
  margin-top: var(--spacing-sm);
}

.toast-action {
  padding: calc(var(--spacing-xs) * 0.5) var(--spacing-sm);
  font-size: var(--font-size-xs);
  border: 1px solid var(--border-color);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: var(--spacing-xs);
  cursor: pointer;
  transition: all var(--animation-fast) var(--animation-ease);
}

.toast-action:hover {
  background: var(--secondary-bg);
}

.toast-action.primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.toast-action.primary:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* ===== TOAST TYPES ===== */
.toast-notification.toast-success {
  border-left: 4px solid var(--success-color);
}

.toast-notification.toast-success .toast-icon {
  color: var(--success-color);
}

.toast-notification.toast-error {
  border-left: 4px solid var(--error-color);
}

.toast-notification.toast-error .toast-icon {
  color: var(--error-color);
}

.toast-notification.toast-warning {
  border-left: 4px solid var(--warning-color);
}

.toast-notification.toast-warning .toast-icon {
  color: var(--warning-color);
}

.toast-notification.toast-info {
  border-left: 4px solid var(--info-color, #3b82f6);
}

.toast-notification.toast-info .toast-icon {
  color: var(--info-color, #3b82f6);
}

/* ===== TOAST PROGRESS BAR ===== */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--border-color);
  width: 100%;
  overflow: hidden;
}

.toast-progress-bar {
  height: 100%;
  background: var(--primary-color);
  width: 100%;
  transform-origin: left;
  animation: toast-progress-countdown linear;
}

.toast-notification.toast-success .toast-progress-bar {
  background: var(--success-color);
}

.toast-notification.toast-error .toast-progress-bar {
  background: var(--error-color);
}

.toast-notification.toast-warning .toast-progress-bar {
  background: var(--warning-color);
}

.toast-notification.toast-info .toast-progress-bar {
  background: var(--info-color, #3b82f6);
}

@keyframes toast-progress-countdown {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
/* ===== TOAST SIZES ===== */
.toast-notification.toast-compact {
  min-width: 250px;
  padding: var(--spacing-sm);
}

.toast-notification.toast-compact .toast-header {
  margin-bottom: calc(var(--spacing-xs) * 0.5);
}

.toast-notification.toast-compact .toast-body {
  font-size: var(--font-size-xs);
  margin-bottom: var(--spacing-xs);
}

.toast-notification.toast-large {
  min-width: 350px;
  max-width: 500px;
  padding: var(--spacing-lg);
}

.toast-notification.toast-large .toast-title {
  font-size: var(--font-size-md);
}

.toast-notification.toast-large .toast-body {
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}

/* ===== TOAST LOADING STATE ===== */
.toast-notification.toast-loading {
  pointer-events: none;
}

.toast-notification.toast-loading::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.toast-notification.toast-loading::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid var(--border-color);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: toast-spinner 1s linear infinite;
  z-index: 1;
}

@keyframes toast-spinner {
  to {
    transform: rotate(360deg);
  }
}
/* ===== TOAST STACKING ===== */
.toast-notification:not(:last-child) {
  margin-bottom: var(--spacing-sm);
}

.notification-container.stacked .toast-notification:nth-child(n+4) {
  transform: scale(0.95) translateY(-10px);
  opacity: 0.8;
}

.notification-container.stacked .toast-notification:nth-child(n+6) {
  display: none;
}

/* ===== TOAST ANIMATIONS ===== */
.toast-enter {
  opacity: 0;
  transform: translateX(100%) scale(0.8);
}

.toast-enter-active {
  opacity: 1;
  transform: translateX(0) scale(1);
  transition: opacity var(--animation-normal) var(--ease-out), transform var(--animation-normal) var(--ease-back);
}

.toast-exit {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.toast-exit-active {
  opacity: 0;
  transform: translateX(100%) scale(0.8);
  transition: opacity var(--animation-fast) var(--ease-in), transform var(--animation-fast) var(--ease-in);
}

/* ===== BADGE COMPONENT ===== */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  padding: 0.25em 0.5em;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
}

/* Badge Color Variants */
.badge-primary {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-color: var(--color-primary);
}

.badge-success {
  background: var(--color-success-light);
  color: var(--color-success-dark);
  border-color: var(--color-success);
}

.badge-warning {
  background: var(--color-warning-light);
  color: var(--color-warning-dark);
  border-color: var(--color-warning);
}

.badge-error {
  background: var(--color-error-light);
  color: var(--color-error-dark);
  border-color: var(--color-error);
}

.badge-info {
  background: var(--color-info-light);
  color: var(--color-info-dark);
  border-color: var(--color-info);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .notification-container {
    left: var(--spacing-md) !important;
    right: var(--spacing-md) !important;
    transform: none !important;
  }
  .toast-notification {
    min-width: auto;
    max-width: none;
    width: 100%;
  }
  .toast-notification.toast-compact {
    min-width: auto;
  }
  .toast-notification.toast-large {
    min-width: auto;
    max-width: none;
  }
}
@media (max-width: 480px) {
  .notification-container {
    left: var(--spacing-sm) !important;
    right: var(--spacing-sm) !important;
  }
  .toast-actions {
    flex-direction: column;
  }
  .toast-action {
    width: 100%;
    text-align: center;
  }
}
/* ===== DARK MODE SUPPORT ===== */
html.dark-mode .toast-notification {
  background: var(--bg-primary-dark, #1f2937);
  border-color: var(--border-color-dark, #374151);
  box-shadow: var(--shadow-lg-dark, 0 10px 25px rgba(0, 0, 0, 0.3));
}
html.dark-mode .toast-close:hover {
  background: var(--secondary-bg-dark, #374151);
}
html.dark-mode .toast-action {
  background: var(--bg-primary-dark, #1f2937);
  border-color: var(--border-color-dark, #374151);
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .toast-action:hover {
  background: var(--secondary-bg-dark, #374151);
}
html.dark-mode .toast-progress {
  background: var(--border-color-dark, #4b5563);
}
html.dark-mode .toast-notification.toast-loading::after {
  background: rgba(31, 41, 55, 0.8);
}

/* ===== ACCESSIBILITY FEATURES ===== */
/* High contrast mode support */
@media (prefers-contrast: high) {
  .badge {
    border-width: 2px;
  }
  .alert {
    border-width: 2px;
  }
  .toast-notification {
    border-width: 2px;
  }
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .toast-notification {
    transition: opacity var(--animation-fast) ease;
    transform: none !important;
  }
  .toast-notification.show {
    transform: none !important;
  }
  .toast-notification.hide {
    transform: none !important;
  }
  .toast-progress-bar {
    animation: none;
  }
  .notification-container.stacked .toast-notification:nth-child(n+4) {
    transform: none;
  }
  .toast-enter,
  .toast-enter-active,
  .toast-exit,
  .toast-exit-active {
    transition: none !important;
    transform: none !important;
  }
}
/* Focus management for interactive elements */
.alert-close:focus-visible,
.toast-close:focus-visible,
.toast-action:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #3b82f6);
  outline-offset: 2px;
}

/* Screen reader support */
.alert[role=alert],
.toast-notification[role=alert] {
  /* Announced immediately by screen readers */
  position: relative;
}

.alert[role=status],
.toast-notification[role=status] {
  /* Announced when screen reader is idle */
  position: relative;
}

/* Ensure screen reader content is accessible */
.alert[aria-live],
.toast-notification[aria-live] {
  /* Ensure live regions are properly announced */
  position: relative;
}

/* ===== PROGRESS BARS & SPINNERS ===== */
/* ===== LINEAR PROGRESS BARS ===== */
.progress-linear {
  width: 100%;
  height: 8px;
  background: var(--secondary-bg);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.progress-linear-bar {
  height: 100%;
  background: var(--primary-color);
  border-radius: 4px;
  transition: width var(--animation-normal) var(--animation-ease);
  position: relative;
  overflow: hidden;
}

/* Linear Progress Variants */
.progress-linear.progress-success .progress-linear-bar {
  background: var(--success-color);
}

.progress-linear.progress-error .progress-linear-bar {
  background: var(--error-color);
}

.progress-linear.progress-warning .progress-linear-bar {
  background: var(--warning-color);
}

.progress-linear.progress-info .progress-linear-bar {
  background: var(--info-color, #3b82f6);
}

/* Linear Progress Sizes */
.progress-linear.progress-xs {
  height: 4px;
}

.progress-linear.progress-sm {
  height: 6px;
}

.progress-linear.progress-md {
  height: 8px;
}

.progress-linear.progress-lg {
  height: 12px;
}

.progress-linear.progress-xl {
  height: 16px;
}

/* Indeterminate Linear Progress */
.progress-linear.progress-indeterminate .progress-linear-bar {
  width: 30% !important;
  animation: progress-indeterminate 2s infinite linear;
}

@keyframes progress-indeterminate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}
/* Linear Progress with Shimmer Effect */
.progress-linear.progress-shimmer .progress-linear-bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  animation: progress-shimmer 2s infinite;
}

@keyframes progress-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
/* ===== CIRCULAR PROGRESS ===== */
.progress-circular {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.progress-circular-svg {
  transform: rotate(-90deg);
  width: 100%;
  height: 100%;
}

.progress-circular-track {
  fill: none;
  stroke: var(--secondary-bg);
  stroke-width: 4;
}

.progress-circular-bar {
  fill: none;
  stroke: var(--primary-color);
  stroke-width: 4;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--animation-normal) var(--animation-ease);
}

/* Circular Progress Sizes */
.progress-circular.progress-xs {
  width: 24px;
  height: 24px;
}

.progress-circular.progress-xs .progress-circular-track,
.progress-circular.progress-xs .progress-circular-bar {
  stroke-width: 2;
}

.progress-circular.progress-sm {
  width: 32px;
  height: 32px;
}

.progress-circular.progress-sm .progress-circular-track,
.progress-circular.progress-sm .progress-circular-bar {
  stroke-width: 3;
}

.progress-circular.progress-md {
  width: 48px;
  height: 48px;
}

.progress-circular.progress-lg {
  width: 64px;
  height: 64px;
}

.progress-circular.progress-lg .progress-circular-track,
.progress-circular.progress-lg .progress-circular-bar {
  stroke-width: 6;
}

.progress-circular.progress-xl {
  width: 80px;
  height: 80px;
}

.progress-circular.progress-xl .progress-circular-track,
.progress-circular.progress-xl .progress-circular-bar {
  stroke-width: 8;
}

/* Circular Progress Variants */
.progress-circular.progress-success .progress-circular-bar {
  stroke: var(--success-color);
}

.progress-circular.progress-error .progress-circular-bar {
  stroke: var(--error-color);
}

.progress-circular.progress-warning .progress-circular-bar {
  stroke: var(--warning-color);
}

.progress-circular.progress-info .progress-circular-bar {
  stroke: var(--info-color, #3b82f6);
}

/* Circular Progress with Label */
.progress-circular-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  text-align: center;
  line-height: 1;
}

.progress-circular.progress-lg .progress-circular-label {
  font-size: var(--font-size-sm);
}

.progress-circular.progress-xl .progress-circular-label {
  font-size: var(--font-size-md);
}

/* Indeterminate Circular Progress */
.progress-circular.progress-indeterminate .progress-circular-bar {
  animation: progress-circular-rotate 2s linear infinite;
}

@keyframes progress-circular-rotate {
  0% {
    stroke-dasharray: 0 100;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 50 100;
    stroke-dashoffset: -25;
  }
  100% {
    stroke-dasharray: 50 100;
    stroke-dashoffset: -75;
  }
}
/* ===== LOADING SPINNERS ===== */
.spinner {
  display: inline-block;
  position: relative;
}

/* Spinner - Dots */
.spinner-dots {
  width: 40px;
  height: 40px;
}

.spinner-dots::before,
.spinner-dots::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--primary-color);
  border-radius: 50%;
  animation: spinner-dots 1.4s infinite ease-in-out both;
}

.spinner-dots::before {
  left: 8px;
  animation-delay: -0.32s;
}

.spinner-dots::after {
  left: 24px;
}

@keyframes spinner-dots {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}
/* Spinner - Pulse */
.spinner-pulse {
  width: 32px;
  height: 32px;
  background: var(--primary-color);
  border-radius: 50%;
  animation: spinner-pulse 1.5s ease-in-out infinite;
}

@keyframes spinner-pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
/* Spinner - Ring */
.spinner-ring {
  width: 32px;
  height: 32px;
  border: 3px solid var(--secondary-bg);
  border-top-color: var(--primary-color);
  border-radius: 50%;
  animation: spinner-ring 1s linear infinite;
}

@keyframes spinner-ring {
  to {
    transform: rotate(360deg);
  }
}
/* Spinner - Bars */
.spinner-bars {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.spinner-bars::before,
.spinner-bars::after {
  content: "";
  width: 4px;
  height: 100%;
  background: var(--primary-color);
  animation: spinner-bars 1.2s infinite ease-in-out;
}

.spinner-bars::before {
  animation-delay: -0.16s;
}

@keyframes spinner-bars {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}
/* Wave Spinner */
.spinner-wave {
  display: inline-flex;
  gap: 0.125rem;
}

.spinner-wave .bar {
  width: 0.25rem;
  height: 1.5rem;
  background-color: var(--spinner-color, var(--primary-color));
  border-radius: 0.125rem;
  animation: wave var(--spinner-speed, 1s) ease-in-out infinite;
  will-change: transform;
}

.spinner-wave .bar:nth-child(1) {
  animation-delay: 0ms;
}

.spinner-wave .bar:nth-child(2) {
  animation-delay: 100ms;
}

.spinner-wave .bar:nth-child(3) {
  animation-delay: 200ms;
}

.spinner-wave .bar:nth-child(4) {
  animation-delay: 300ms;
}

.spinner-wave .bar:nth-child(5) {
  animation-delay: 400ms;
}

@keyframes wave {
  0%, 40%, 100% {
    transform: scaleY(0.4);
  }
  20% {
    transform: scaleY(1);
  }
}
/* Loading Dots */
.loading-dots {
  display: inline-flex;
  gap: var(--spacing-xs);
}

.loading-dots .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-primary-500, var(--primary-color));
  animation: loading-dots var(--duration-normal, 0.3s) var(--ease-in-out, ease-in-out) infinite;
  will-change: transform;
}

.loading-dots .dot:nth-child(1) {
  animation-delay: 0ms;
}

.loading-dots .dot:nth-child(2) {
  animation-delay: 150ms;
}

.loading-dots .dot:nth-child(3) {
  animation-delay: 300ms;
}

@keyframes loading-dots {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1.2);
    opacity: 1;
  }
}
/* ===== SPINNER SIZES ===== */
.spinner.spinner-xs {
  width: 16px;
  height: 16px;
}

.spinner.spinner-sm {
  width: 24px;
  height: 24px;
}

.spinner.spinner-md {
  width: 32px;
  height: 32px;
}

.spinner.spinner-lg {
  width: 48px;
  height: 48px;
}

.spinner.spinner-xl {
  width: 64px;
  height: 64px;
}

/* ===== SPINNER VARIANTS ===== */
.spinner.spinner-success .spinner-ring {
  border-top-color: var(--success-color);
}

.spinner.spinner-success .spinner-pulse,
.spinner.spinner-success .spinner-dots::before,
.spinner.spinner-success .spinner-dots::after,
.spinner.spinner-success .spinner-bars::before,
.spinner.spinner-success .spinner-bars::after {
  background: var(--success-color);
}

.spinner.spinner-error .spinner-ring {
  border-top-color: var(--error-color);
}

.spinner.spinner-error .spinner-pulse,
.spinner.spinner-error .spinner-dots::before,
.spinner.spinner-error .spinner-dots::after,
.spinner.spinner-error .spinner-bars::before,
.spinner.spinner-error .spinner-bars::after {
  background: var(--error-color);
}

.spinner.spinner-warning .spinner-ring {
  border-top-color: var(--warning-color);
}

.spinner.spinner-warning .spinner-pulse,
.spinner.spinner-warning .spinner-dots::before,
.spinner.spinner-warning .spinner-dots::after,
.spinner.spinner-warning .spinner-bars::before,
.spinner.spinner-warning .spinner-bars::after {
  background: var(--warning-color);
}

/* ===== PROGRESS WITH TEXT ===== */
.progress-with-text {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

.progress-text {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  white-space: nowrap;
  min-width: 40px;
  text-align: right;
}

.progress-with-text .progress-linear {
  flex: 1;
}

/* ===== PROGRESS STEPS ===== */
.progress-steps {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}

.progress-step {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--secondary-bg);
  border: 2px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  transition: all var(--animation-fast) var(--animation-ease);
}

.progress-step.active {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.progress-step.completed {
  background: var(--success-color);
  border-color: var(--success-color);
  color: white;
}

.progress-step-connector {
  flex: 1;
  height: 2px;
  background: var(--border-color);
  transition: background var(--animation-fast) var(--animation-ease);
}

.progress-step.completed + .progress-step-connector {
  background: var(--success-color);
}

/* ===== LOADING OVERLAY ===== */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--animation-normal) var(--ease-out), visibility var(--animation-normal) var(--ease-out);
  will-change: opacity, visibility;
}

.loading-overlay.active {
  opacity: 1;
  visibility: visible;
}

.loading-overlay .loading-content {
  text-align: center;
  padding: var(--spacing-6);
  background-color: white;
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  transform: scale(0.9);
  transition: transform var(--animation-normal) var(--ease-out);
  will-change: transform;
}

.loading-overlay.active .loading-content {
  transform: scale(1);
}

/* ===== BUTTON LOADING STATES ===== */
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.btn-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: 1rem;
  margin: -0.5rem 0 0 -0.5rem;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin var(--spinner-speed, 1s) linear infinite;
  will-change: transform;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/* ===== SKELETON LOADING ===== */
.skeleton {
  background: linear-gradient(90deg, var(--skeleton-base, #f3f4f6) 25%, var(--skeleton-highlight, #e5e7eb) 50%, var(--skeleton-base, #f3f4f6) 75%);
  background-size: 200% 100%;
  animation: skeletonLoading var(--skeleton-speed, 1.5s) ease-in-out infinite;
  will-change: background-position;
  border-radius: var(--border-radius);
}

@keyframes skeletonLoading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
/* Skeleton Variants */
.skeleton-text {
  height: 1rem;
  margin-bottom: 0.5rem;
}

.skeleton-text:last-child {
  width: 60%;
}

.skeleton-title {
  height: 1.5rem;
  width: 80%;
  margin-bottom: 1rem;
}

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

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

.skeleton-card {
  height: 12rem;
  border-radius: var(--border-radius-lg);
}

.skeleton-image {
  height: 8rem;
  border-radius: var(--border-radius);
}

/* ===== LOADING STATES ===== */
.state-loading {
  opacity: 0.6;
  pointer-events: none;
  transition: opacity var(--state-transition-duration, 0.3s) var(--state-transition-easing, ease);
  will-change: opacity;
}

.state-success {
  animation: successPulse var(--animation-normal) var(--ease-out);
  will-change: transform;
}

@keyframes successPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}
.state-error {
  animation: errorShake var(--animation-normal) var(--ease-out);
  will-change: transform;
}

@keyframes errorShake {
  0%, 100% {
    transform: translateX(0);
  }
  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-0.5rem);
  }
  20%, 40%, 60%, 80% {
    transform: translateX(0.5rem);
  }
}
.state-warning {
  animation: warningBounce var(--animation-normal) var(--ease-bounce, ease);
  will-change: transform;
}

@keyframes warningBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-0.5rem);
  }
  60% {
    transform: translateY(-0.25rem);
  }
}
/* ===== LOADING VARIANTS ===== */
.loading-sm .spinner {
  width: var(--spinner-size-sm, 24px);
  height: var(--spinner-size-sm, 24px);
}

.loading-lg .spinner {
  width: var(--spinner-size-lg, 48px);
  height: var(--spinner-size-lg, 48px);
}

.loading-primary {
  --spinner-color: var(--color-primary-500, var(--primary-color));
}

.loading-success {
  --spinner-color: var(--color-success-500, var(--success-color));
}

.loading-warning {
  --spinner-color: var(--color-warning-500, var(--warning-color));
}

.loading-error {
  --spinner-color: var(--color-error-500, var(--error-color));
}

.loading-fast {
  --spinner-speed: 0.5s;
}

.loading-slow {
  --spinner-speed: 2s;
}

/* ===== DARK MODE SUPPORT ===== */
html.dark-mode .progress-linear {
  background: var(--secondary-bg-dark, #374151);
}
html.dark-mode .progress-circular-track {
  stroke: var(--secondary-bg-dark, #374151);
}
html.dark-mode .spinner-ring {
  border-color: var(--secondary-bg-dark, #374151);
}
html.dark-mode .progress-step {
  background: var(--secondary-bg-dark, #374151);
  border-color: var(--border-color-dark, #4b5563);
  color: var(--text-secondary-dark, #d1d5db);
}
html.dark-mode .progress-step-connector {
  background: var(--border-color-dark, #4b5563);
}
html.dark-mode .loading-overlay {
  background-color: rgba(0, 0, 0, 0.8);
}
html.dark-mode .loading-overlay .loading-content {
  background-color: var(--bg-primary-dark, #1f2937);
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .skeleton {
  background: linear-gradient(90deg, var(--skeleton-base-dark, #374151) 25%, var(--skeleton-highlight-dark, #4b5563) 50%, var(--skeleton-base-dark, #374151) 75%);
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  .progress-with-text {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-xs);
  }
  .progress-text {
    text-align: center;
    min-width: auto;
  }
  .progress-steps {
    flex-wrap: wrap;
    justify-content: center;
  }
  .loading-overlay .loading-content {
    margin: var(--spacing-4);
    padding: var(--spacing-4);
  }
}
/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  .progress-linear-bar,
  .progress-circular-bar {
    transition: none;
  }
  .progress-linear.progress-indeterminate .progress-linear-bar,
  .progress-linear.progress-shimmer .progress-linear-bar::after,
  .progress-circular.progress-indeterminate .progress-circular-bar,
  .spinner-dots::before,
  .spinner-dots::after,
  .spinner-pulse,
  .spinner-ring,
  .spinner-bars::before,
  .spinner-bars::after,
  .spinner-wave .bar,
  .loading-dots .dot,
  .skeleton,
  .btn-loading::after,
  .state-success,
  .state-error,
  .state-warning {
    animation: none !important;
  }
  .progress-step {
    transition: none;
  }
  .loading-overlay,
  .loading-overlay .loading-content {
    transition: none;
  }
}
/* High Contrast Mode */
@media (prefers-contrast: high) {
  .progress-linear,
  .progress-circular-track,
  .spinner-ring,
  .progress-step {
    border: 2px solid;
  }
  .skeleton {
    border: 1px solid;
  }
}
/* Focus Management */
.progress-step:focus {
  outline: 2px solid var(--focus-color, #3b82f6);
  outline-offset: 2px;
}

/* Screen Reader Support */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Print Styles */
@media print {
  .spinner,
  .loading-overlay,
  .skeleton {
    display: none !important;
  }
  .progress-linear,
  .progress-circular {
    break-inside: avoid;
  }
}
/* ===== ICON SYSTEM ===== */
/* Comprehensive SVG icon styling */
/* ===== BASE ICON STYLES ===== */
svg, .icon {
  display: inline-block;
  vertical-align: middle;
  fill: currentColor;
  stroke: currentColor;
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transition: all var(--transition-fast) var(--transition-ease);
}

/* Ensure SVG icons inherit text color */
svg {
  color: inherit;
}

/* ===== ICON SIZES ===== */
.icon-xs, svg.icon-xs {
  width: var(--icon-size-xs, 12px);
  height: var(--icon-size-xs, 12px);
}

.icon-sm, svg.icon-sm {
  width: var(--icon-size-sm, 16px);
  height: var(--icon-size-sm, 16px);
}

.icon-md, svg.icon-md {
  width: var(--icon-size-md, 20px);
  height: var(--icon-size-md, 20px);
}

.icon-lg, svg.icon-lg {
  width: var(--icon-size-lg, 24px);
  height: var(--icon-size-lg, 24px);
}

.icon-xl, svg.icon-xl {
  width: var(--icon-size-xl, 32px);
  height: var(--icon-size-xl, 32px);
}

/* ===== ICON STATES ===== */
.icon-inactive, svg.icon-inactive {
  opacity: 0.5;
  color: var(--color-text-tertiary);
}

.icon-hover:hover, svg.icon-hover:hover {
  color: var(--color-primary);
  transform: scale(1.1);
}

.icon-disabled, svg.icon-disabled {
  opacity: 0.3;
  pointer-events: none;
  color: var(--color-text-disabled);
}

/* ===== PANEL ICONS ===== */
.panel-icon {
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-xs);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

/* ===== BUTTON ICONS ===== */
.btn svg,
.btn .icon {
  width: var(--icon-size-sm, 16px);
  height: var(--icon-size-sm, 16px);
  flex-shrink: 0;
}

.btn-icon-left {
  margin-right: var(--spacing-xs);
}

.btn-icon-right {
  margin-left: var(--spacing-xs);
}

.btn-icon-only {
  padding: var(--spacing-sm);
  aspect-ratio: 1;
}
.btn-icon-only svg, .btn-icon-only .icon {
  margin: 0;
}

/* ===== MENU ICONS ===== */
.menu-item svg,
.menu-item .icon {
  width: 16px;
  height: 16px;
  margin-right: var(--spacing-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.menu-item:hover svg,
.menu-item:hover .icon {
  color: var(--color-primary);
}

/* ===== NAVIGATION ICONS ===== */
.nav-item svg,
.nav-item .icon {
  width: 18px;
  height: 18px;
  margin-right: var(--spacing-sm);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.nav-item.active svg,
.nav-item.active .icon {
  color: var(--color-primary);
}

/* ===== FORM ICONS ===== */
.form-input-icon {
  position: absolute;
  left: var(--spacing-sm);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--color-text-tertiary);
  pointer-events: none;
}

.form-input-with-icon {
  padding-left: calc(var(--spacing-lg) + 16px);
}

/* ===== ICON ANIMATIONS ===== */
.icon-spin {
  animation: spin 1s linear infinite;
}

.icon-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.icon-bounce:hover {
  animation: bounce 0.6s ease-in-out;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    transform: translate3d(0, -8px, 0);
  }
  70% {
    transform: translate3d(0, -4px, 0);
  }
  90% {
    transform: translate3d(0, -2px, 0);
  }
}
/* ===== SEMANTIC ICON COLORS ===== */
.icon-primary {
  color: var(--color-primary) !important;
}

.icon-success {
  color: var(--color-success) !important;
}

.icon-warning {
  color: var(--color-warning) !important;
}

.icon-danger {
  color: var(--color-danger) !important;
}

.icon-info {
  color: var(--color-info) !important;
}

/* ===== DARK MODE OVERRIDES ===== */
@media (prefers-color-scheme: dark) {
  .panel-icon {
    color: var(--color-text-secondary);
  }
  .menu-item svg,
  .menu-item .icon {
    color: var(--color-text-secondary);
  }
  .nav-item svg,
  .nav-item .icon {
    color: var(--color-text-secondary);
  }
}
html.dark-mode .panel-icon {
  color: var(--color-text-secondary);
}
html.dark-mode .menu-item svg,
html.dark-mode .menu-item .icon {
  color: var(--color-text-secondary);
}
html.dark-mode .nav-item svg,
html.dark-mode .nav-item .icon {
  color: var(--color-text-secondary);
}

.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #9ca3af; /* Heather gray instead of purple gradient */
  padding: var(--spacing-6);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  position: relative;
}
.auth-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
.auth-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
  padding: var(--spacing-10);
  width: 100%;
  max-width: 440px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.1);
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.auth-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.auth-header {
  text-align: center;
  margin-bottom: var(--spacing-8);
}
.auth-header .auth-logo {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--spacing-4);
  background: #9ca3af; /* Heather gray instead of purple gradient */
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.5px;
}
.auth-header h1 {
  color: #1a202c;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: var(--spacing-2);
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.auth-header p {
  color: #64748b;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.auth-form .form-group {
  margin-bottom: var(--spacing-6);
  position: relative;
}
.auth-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-4);
  margin-bottom: var(--spacing-6);
}
.auth-form .form-label {
  display: block;
  margin-bottom: var(--spacing-2);
  color: #374151;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.025em;
}
.auth-form .form-control {
  width: 100%;
  padding: 16px 20px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  color: #1f2937;
  font-size: 16px;
  font-weight: 400;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-sizing: border-box;
}
.auth-form .form-control:focus {
  outline: none;
  border-color: #9ca3af; /* Changed from #667eea to heather gray */
  box-shadow: 0 0 0 4px rgba(156, 163, 175, 0.1); /* Updated shadow color */
  transform: translateY(-1px);
}
.auth-form .form-control::placeholder {
  color: #9ca3af;
  font-weight: 400;
}
.auth-form .form-control:hover:not(:focus) {
  border-color: #d1d5db;
}
.auth-form .form-group.floating .form-label {
  position: absolute;
  top: 18px;
  left: 20px;
  color: #9ca3af;
  font-size: 16px;
  font-weight: 400;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}
.auth-form .form-group.floating .form-control:focus + .form-label,
.auth-form .form-group.floating .form-control:not(:placeholder-shown) + .form-label {
  top: -8px;
  left: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af; /* Changed from #667eea to heather gray */
  background: white;
  padding: 0 4px;
}

.btn-primary {
  width: 100%;
  padding: 16px 24px;
  background: #9ca3af; /* Changed from linear-gradient(135deg, #667eea 0%, #764ba2 100%) to solid heather gray */
  border: none;
  border-radius: 12px;
  color: white;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.025em;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -8px rgba(102, 126, 234, 0.4);
}
.btn-primary:hover::before {
  left: 100%;
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.btn-primary:disabled:hover {
  transform: none;
  box-shadow: none;
}

.auth-footer {
  text-align: center;
  margin-top: var(--spacing-8);
  padding-top: var(--spacing-6);
  border-top: 1px solid #e5e7eb;
}
.auth-footer p {
  color: #64748b;
  font-size: 14px;
  margin-bottom: var(--spacing-2);
  font-weight: 400;
}

.auth-link {
  color: #6b7280; /* Changed from #667eea to darker heather gray */
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  position: relative;
}
.auth-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #6b7280; /* Changed from #667eea to darker heather gray */
  transition: width 0.3s ease;
}
.auth-link:hover {
  color: #4b5563; /* Changed from #5a67d8 to even darker heather gray */
}
.auth-link:hover::after {
  width: 100%;
}

.flash-messages {
  margin-bottom: var(--spacing-6);
}

.flash-error {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  border: 1px solid #f87171;
  color: #dc2626;
  padding: var(--spacing-4);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--spacing-4);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.flash-error::before {
  content: "⚠️";
  font-size: 16px;
}

.flash-success {
  background: linear-gradient(135deg, #d1fae5, #a7f3d0);
  border: 1px solid #34d399;
  color: #059669;
  padding: var(--spacing-4);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--spacing-4);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.flash-success::before {
  content: "✅";
  font-size: 16px;
}

.form-help {
  font-size: 12px;
  color: #6b7280;
  margin-top: var(--spacing-1);
  font-weight: 400;
  line-height: 1.4;
}

.password-strength {
  margin-top: var(--spacing-2);
}
.password-strength .strength-bar {
  height: 4px;
  background: #e5e7eb;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: var(--spacing-1);
}
.password-strength .strength-bar .strength-fill {
  height: 100%;
  transition: all 0.3s ease;
  border-radius: 2px;
}
.password-strength .strength-bar .strength-fill.weak {
  background: #ef4444;
  width: 25%;
}
.password-strength .strength-bar .strength-fill.fair {
  background: #f59e0b;
  width: 50%;
}
.password-strength .strength-bar .strength-fill.good {
  background: #10b981;
  width: 75%;
}
.password-strength .strength-bar .strength-fill.strong {
  background: #059669;
  width: 100%;
}
.password-strength .strength-text {
  font-size: 12px;
  font-weight: 500;
}
.password-strength .strength-text.weak {
  color: #ef4444;
}
.password-strength .strength-text.fair {
  color: #f59e0b;
}
.password-strength .strength-text.good {
  color: #10b981;
}
.password-strength .strength-text.strong {
  color: #059669;
}

@media (max-width: 640px) {
  .auth-container {
    padding: var(--spacing-4);
  }
  .auth-card {
    padding: var(--spacing-8);
    border-radius: 20px;
    margin: var(--spacing-4);
  }
  .auth-header h1 {
    font-size: 24px;
  }
  .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .form-control {
    padding: 14px 16px;
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .auth-card {
    padding: var(--spacing-6);
    margin: var(--spacing-2);
  }
  .auth-header {
    margin-bottom: var(--spacing-6);
  }
  .auth-header .auth-logo {
    width: 56px;
    height: 56px;
    font-size: 20px;
  }
  .auth-header h1 {
    font-size: 22px;
  }
}
@media (prefers-color-scheme: dark) {
  .auth-container {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  }
  .auth-card {
    background: rgba(30, 41, 59, 0.95);
    border-color: rgba(255, 255, 255, 0.1);
  }
  .auth-header h1 {
    color: #f8fafc;
  }
  .auth-header p {
    color: #94a3b8;
  }
  .form-label {
    color: #e2e8f0;
  }
  .form-control {
    background: #334155;
    border-color: #475569;
    color: #f8fafc;
  }
  .form-control::placeholder {
    color: #64748b;
  }
  .form-control:focus {
    border-color: #9ca3af; /* Changed from #667eea to heather gray */
    background: #3f4c63;
  }
  .auth-footer {
    border-color: #475569;
  }
  .auth-footer p {
    color: #94a3b8;
  }
}
.btn-loading {
  position: relative;
  color: transparent;
}
.btn-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.auth-link {
  color: #6b7280; /* Darker heather gray instead of purple */
}

.form-control:focus {
  border-color: #9ca3af; /* Heather gray instead of purple */
}

.checkbox-custom:checked {
  background: #9ca3af; /* Heather gray instead of purple */
}

.forgot-password {
  color: #6b7280; /* Darker heather gray instead of purple */
}

.auth-footer a {
  color: #6b7280; /* Darker heather gray instead of purple */
}

.password-input-wrapper {
  position: relative;
}
.password-input-wrapper .password-toggle {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: all 0.2s ease;
}
.password-input-wrapper .password-toggle:hover {
  color: #374151;
  background: rgba(0, 0, 0, 0.05);
}

.checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}
.checkbox-wrapper .checkbox-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.checkbox-wrapper .checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  background: white;
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
}
.checkbox-wrapper .checkbox-custom::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.checkbox-wrapper .checkbox-input:checked + .checkbox-custom {
  background: #9ca3af;
  border-color: #9ca3af;
}
.checkbox-wrapper .checkbox-input:checked + .checkbox-custom::after {
  opacity: 1;
}
.checkbox-wrapper .checkbox-label {
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-6);
}
@media (max-width: 480px) {
  .form-options {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-3);
  }
}

.forgot-password {
  font-size: 14px;
  color: #6b7280;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}
.forgot-password:hover {
  color: #374151;
}

.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary .btn-icon {
  transition: transform 0.2s ease;
}
.btn-primary:hover .btn-icon {
  transform: translateX(2px);
}

.auth-body {
  margin: 0;
  padding: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f8fafc;
  min-height: 100vh;
}

.auth-layout {
  display: flex;
  min-height: 100vh;
}

.auth-brand {
  flex: 1;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  border-right: 1px solid #e2e8f0;
}
.auth-brand .brand-logo {
  margin-bottom: 1rem;
}
.auth-brand h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

.auth-container-clean {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #f8fafc;
}

.auth-card-clean {
  background: white;
  border-radius: 12px;
  padding: 3rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
}

.auth-header-clean {
  margin-bottom: 2rem;
}
.auth-header-clean .auth-subtitle {
  color: #64748b;
  font-size: 0.875rem;
  margin: 0 0 0.5rem 0;
  font-weight: 400;
}
.auth-header-clean h2 {
  color: #0f172a;
  font-size: 1.875rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
}

.auth-form-clean .form-group-clean {
  margin-bottom: 1.5rem;
}
.auth-form-clean .form-row-clean {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.auth-form-clean .form-label-clean {
  display: block;
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}
.auth-form-clean .form-input-clean {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  color: #111827;
  background: white;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
.auth-form-clean .form-input-clean:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.auth-form-clean .form-input-clean::placeholder {
  color: #9ca3af;
}
.auth-form-clean .form-help-clean {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.form-options-clean {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.5rem;
}

.forgot-link {
  color: #3b82f6;
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
}
.forgot-link:hover {
  text-decoration: underline;
}

.btn-primary-clean {
  width: 100%;
  background: #3b82f6;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-bottom: 1.5rem;
}
.btn-primary-clean:hover {
  background: #2563eb;
}
.btn-primary-clean:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.auth-footer-clean {
  text-align: center;
}
.auth-footer-clean p {
  color: #6b7280;
  font-size: 0.875rem;
  margin: 0;
}
.auth-footer-clean .signup-link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 600;
}
.auth-footer-clean .signup-link:hover {
  text-decoration: underline;
}

.flash-messages-clean {
  margin-bottom: 1.5rem;
}

.flash-error-clean {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .auth-layout {
    flex-direction: column;
  }
  .auth-brand {
    padding: 1.5rem;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }
  .auth-brand h1 {
    font-size: 1.5rem;
  }
  .auth-container-clean {
    padding: 1rem;
  }
  .auth-card-clean {
    padding: 2rem;
  }
  .form-row-clean {
    grid-template-columns: 1fr;
  }
  .form-options-clean {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}
/* Custom Choices.js styling to match existing form controls */
.choices {
  margin-bottom: 0;
  font-size: inherit;
}

.choices__inner {
  background-color: var(--input-bg, #ffffff);
  border: 1px solid var(--input-border, #d1d5db);
  border-radius: 6px;
  color: var(--text-color, #374151);
  font-size: 14px;
  min-height: 38px;
  padding: 8px 12px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.choices__inner:focus,
.choices.is-focused .choices__inner {
  border-color: var(--primary-color, #3b82f6);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  outline: none;
}

.choices__list--single {
  padding: 0;
}

.choices__item--selectable {
  padding: 8px 12px;
  color: var(--text-color, #374151);
}

.choices__item--selectable:hover {
  background-color: var(--hover-bg, #f3f4f6);
}

.choices__item--selectable.is-highlighted {
  background-color: var(--primary-color, #3b82f6);
  color: white;
}

.choices__dropdown {
  border: 1px solid var(--input-border, #d1d5db);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  background-color: var(--input-bg, #ffffff);
}

.choices__list--dropdown {
  max-height: 200px;
  overflow-y: auto;
}

/* Remove default arrow and add custom one */
.choices__inner::after {
  border-color: var(--text-color, #6b7280) transparent transparent transparent;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  content: "";
  height: 0;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
}

.choices.is-open .choices__inner::after {
  border-color: transparent transparent var(--text-color, #6b7280) transparent;
  border-width: 0 4px 5px 4px;
}

/* ===== DARK MODE SUPPORT - ENHANCED CONTRAST ===== */
html.dark-mode .choices__inner {
  background-color: #1a1a1a !important; /* Very dark background */
  border-color: #404040 !important; /* Visible border */
  color: #ffffff !important; /* Pure white text */
}
html.dark-mode .choices__inner:focus,
html.dark-mode .choices.is-focused .choices__inner {
  border-color: #60a5fa !important;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.3) !important;
}
html.dark-mode .choices__dropdown {
  background-color: #1a1a1a !important; /* Very dark dropdown */
  border-color: #404040 !important; /* Visible border */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.8) !important;
}
html.dark-mode .choices__item--selectable {
  color: #ffffff !important; /* Pure white text */
}
html.dark-mode .choices__item--selectable:hover {
  background-color: #333333 !important; /* Visible hover */
  color: #ffffff !important;
}
html.dark-mode .choices__item--selectable.is-highlighted {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}
html.dark-mode .choices__inner::after {
  border-color: #ffffff transparent transparent transparent !important;
}
html.dark-mode .choices.is-open .choices__inner::after {
  border-color: transparent transparent #ffffff transparent !important;
}

/* ===== SYSTEM PREFERENCE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  .choices__inner {
    background-color: #1a1a1a;
    border-color: #404040;
    color: #ffffff;
  }
  .choices__dropdown {
    background-color: #1a1a1a;
    border-color: #404040;
  }
  .choices__item--selectable {
    color: #ffffff;
  }
  .choices__item--selectable:hover {
    background-color: #333333;
  }
}
/* ===== ANIMATIONS ===== */
/* Keyframes and animation utilities for modern UI interactions */
/* ===== ANIMATION KEYFRAMES ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(var(--slide-in-distance));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(calc(var(--slide-in-distance) * -1));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(calc(var(--slide-in-distance) * -1));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(var(--slide-in-distance));
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(var(--scale-in-start));
  }
  to {
    opacity: 1;
    transform: scale(var(--scale-100));
  }
}
@keyframes scaleOut {
  from {
    opacity: 1;
    transform: scale(var(--scale-100));
  }
  to {
    opacity: 0;
    transform: scale(var(--scale-90));
  }
}
@keyframes spin {
  from {
    transform: rotate(var(--rotate-0));
  }
  to {
    transform: rotate(var(--rotate-360));
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateY(0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translateY(-8px);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translateY(-4px);
  }
  90% {
    transform: translateY(-2px);
  }
}
@keyframes wiggle {
  0%, 7% {
    transform: rotateZ(0);
  }
  15% {
    transform: rotateZ(-15deg);
  }
  20% {
    transform: rotateZ(10deg);
  }
  25% {
    transform: rotateZ(-10deg);
  }
  30% {
    transform: rotateZ(6deg);
  }
  35% {
    transform: rotateZ(-4deg);
  }
  40%, 100% {
    transform: rotateZ(0);
  }
}
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}
@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}
@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes slideLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes slideRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}
/* ===== ANIMATION UTILITIES ===== */
/* Animation utilities */
.animate-none {
  animation: none !important;
}

.animate-spin {
  animation: spin var(--spinner-duration) var(--loading-easing) infinite !important;
}

.animate-ping {
  animation: ping var(--duration-ultra-slow) var(--ease-in-out) infinite !important;
}

.animate-pulse {
  animation: pulse var(--pulse-duration) var(--ease-in-out) infinite !important;
}

.animate-bounce {
  animation: bounce var(--bounce-duration) var(--bounce-easing) infinite !important;
}

.animate-wiggle {
  animation: wiggle var(--wiggle-duration) var(--wiggle-easing) !important;
}

.animate-float {
  animation: float 3s ease-in-out infinite !important;
}

.animate-heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite !important;
}

/* Entrance animations */
.animate-fade-in {
  animation: fadeIn var(--fade-in-duration) var(--fade-in-easing) !important;
}

.animate-slide-in-up {
  animation: slideInUp var(--slide-in-duration) var(--slide-in-easing) !important;
}

.animate-slide-in-down {
  animation: slideInDown var(--slide-in-duration) var(--slide-in-easing) !important;
}

.animate-slide-in-left {
  animation: slideInLeft var(--slide-in-duration) var(--slide-in-easing) !important;
}

.animate-slide-in-right {
  animation: slideInRight var(--slide-in-duration) var(--slide-in-easing) !important;
}

.animate-scale-in {
  animation: scaleIn var(--scale-in-duration) var(--scale-in-easing) !important;
}

.animate-zoom-in {
  animation: zoomIn var(--duration-standard) var(--ease-out) !important;
}

/* Exit animations */
.animate-fade-out {
  animation: fadeOut var(--exit-duration) var(--exit-easing) !important;
}

.animate-scale-out {
  animation: scaleOut var(--exit-duration) var(--exit-easing) !important;
}

.animate-zoom-out {
  animation: zoomOut var(--exit-duration) var(--exit-easing) !important;
}

/* Slide animations */
.animate-slide-up {
  animation: slideUp var(--duration-standard) var(--ease-slide) !important;
}

.animate-slide-down {
  animation: slideDown var(--duration-standard) var(--ease-slide) !important;
}

.animate-slide-left {
  animation: slideLeft var(--duration-standard) var(--ease-slide) !important;
}

.animate-slide-right {
  animation: slideRight var(--duration-standard) var(--ease-slide) !important;
}

/* ===== TRANSITION UTILITIES ===== */
/* Transition utilities */
.transition-none {
  transition: none !important;
}

.transition-all {
  transition: all var(--duration-quick) var(--ease-ui) !important;
}

.transition-colors {
  transition: color var(--duration-quick) var(--ease-ui), background-color var(--duration-quick) var(--ease-ui), border-color var(--duration-quick) var(--ease-ui) !important;
}

.transition-opacity {
  transition: opacity var(--duration-quick) var(--ease-ui) !important;
}

.transition-shadow {
  transition: box-shadow var(--duration-quick) var(--ease-ui) !important;
}

.transition-transform {
  transition: transform var(--duration-quick) var(--ease-ui) !important;
}

/* ===== DURATION UTILITIES ===== */
/* Duration utilities */
.duration-instant {
  transition-duration: var(--duration-instant) !important;
}

.duration-fast {
  transition-duration: var(--duration-fast) !important;
}

.duration-normal {
  transition-duration: var(--duration-normal) !important;
}

.duration-medium {
  transition-duration: var(--duration-medium) !important;
}

.duration-slow {
  transition-duration: var(--duration-slow) !important;
}

.duration-slower {
  transition-duration: var(--duration-slower) !important;
}

.duration-slowest {
  transition-duration: var(--duration-slowest) !important;
}

/* ===== EASING UTILITIES ===== */
/* Easing utilities */
.ease-linear {
  transition-timing-function: var(--ease-linear) !important;
}

.ease-in {
  transition-timing-function: var(--ease-in) !important;
}

.ease-out {
  transition-timing-function: var(--ease-out) !important;
}

.ease-in-out {
  transition-timing-function: var(--ease-in-out) !important;
}

.ease-bounce {
  transition-timing-function: var(--ease-bounce) !important;
}

.ease-elastic {
  transition-timing-function: var(--ease-elastic-out) !important;
}

/* ===== DELAY UTILITIES ===== */
/* Delay utilities */
.delay-none {
  transition-delay: var(--delay-none) !important;
}

.delay-xs {
  transition-delay: var(--delay-xs) !important;
}

.delay-sm {
  transition-delay: var(--delay-sm) !important;
}

.delay-md {
  transition-delay: var(--delay-md) !important;
}

.delay-lg {
  transition-delay: var(--delay-lg) !important;
}

.delay-xl {
  transition-delay: var(--delay-xl) !important;
}

.delay-2xl {
  transition-delay: var(--delay-2xl) !important;
}

/* ===== TRANSFORM UTILITIES ===== */
/* Scale utilities */
.scale-0 {
  transform: scale(var(--scale-0)) !important;
}

.scale-50 {
  transform: scale(var(--scale-50)) !important;
}

.scale-75 {
  transform: scale(var(--scale-75)) !important;
}

.scale-90 {
  transform: scale(var(--scale-90)) !important;
}

.scale-95 {
  transform: scale(var(--scale-95)) !important;
}

.scale-100 {
  transform: scale(var(--scale-100)) !important;
}

.scale-105 {
  transform: scale(var(--scale-105)) !important;
}

.scale-110 {
  transform: scale(var(--scale-110)) !important;
}

.scale-125 {
  transform: scale(var(--scale-125)) !important;
}

.scale-150 {
  transform: scale(var(--scale-150)) !important;
}

/* Rotation utilities */
.rotate-0 {
  transform: rotate(var(--rotate-0)) !important;
}

.rotate-45 {
  transform: rotate(var(--rotate-45)) !important;
}

.rotate-90 {
  transform: rotate(var(--rotate-90)) !important;
}

.rotate-180 {
  transform: rotate(var(--rotate-180)) !important;
}

.rotate-270 {
  transform: rotate(var(--rotate-270)) !important;
}

.rotate-360 {
  transform: rotate(var(--rotate-360)) !important;
}

/* Transform origin utilities */
.origin-center {
  transform-origin: var(--transform-origin-center) !important;
}

.origin-top {
  transform-origin: var(--transform-origin-top) !important;
}

.origin-bottom {
  transform-origin: var(--transform-origin-bottom) !important;
}

.origin-left {
  transform-origin: var(--transform-origin-left) !important;
}

.origin-right {
  transform-origin: var(--transform-origin-right) !important;
}

.origin-top-left {
  transform-origin: var(--transform-origin-top-left) !important;
}

.origin-top-right {
  transform-origin: var(--transform-origin-top-right) !important;
}

.origin-bottom-left {
  transform-origin: var(--transform-origin-bottom-left) !important;
}

.origin-bottom-right {
  transform-origin: var(--transform-origin-bottom-right) !important;
}

/* ===== HOVER EFFECTS ===== */
/* Hover transform effects */
.hover\:scale-105:hover {
  transform: scale(var(--scale-105)) !important;
}

.hover\:scale-110:hover {
  transform: scale(var(--scale-110)) !important;
}

.hover\:scale-95:hover {
  transform: scale(var(--scale-95)) !important;
}

.hover\:-translate-y-1:hover {
  transform: translateY(-0.25rem) !important;
}

.hover\:-translate-y-2:hover {
  transform: translateY(-0.5rem) !important;
}

/* Hover shadow effects */
.hover\:shadow-sm:hover {
  box-shadow: var(--shadow-sm) !important;
}

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

.hover\:shadow-lg:hover {
  box-shadow: var(--shadow-lg) !important;
}

.hover\:shadow-xl:hover {
  box-shadow: var(--shadow-xl) !important;
}

/* ===== FOCUS EFFECTS ===== */
/* Focus ring effects */
.focus\:ring-2:focus {
  box-shadow: var(--ring-focus) !important;
}

.focus\:ring-4:focus {
  box-shadow: 0 0 0 var(--ring-width-4) var(--color-primary-alpha-50) !important;
}

.focus\:ring-error:focus {
  box-shadow: var(--ring-error) !important;
}

.focus\:ring-success:focus {
  box-shadow: var(--ring-success) !important;
}

/* ===== REDUCED MOTION SUPPORT ===== */
@media (prefers-reduced-motion: reduce) {
  .animate-spin,
  .animate-ping,
  .animate-pulse,
  .animate-bounce,
  .animate-wiggle,
  .animate-float,
  .animate-heartbeat {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
  }
  .animate-fade-in,
  .animate-slide-in-up,
  .animate-slide-in-down,
  .animate-slide-in-left,
  .animate-slide-in-right,
  .animate-scale-in,
  .animate-zoom-in,
  .animate-fade-out,
  .animate-scale-out,
  .animate-zoom-out,
  .animate-slide-up,
  .animate-slide-down,
  .animate-slide-left,
  .animate-slide-right {
    animation-duration: 1ms !important;
  }
}
/* ===== UTILITIES ===== */
/* Comprehensive utility classes for rapid UI development */
/* ===== SPACING UTILITIES ===== */
/* Margin utilities */
.m-0 {
  margin: var(--spacing-0) !important;
}

.m-1 {
  margin: var(--spacing-1) !important;
}

.m-2 {
  margin: var(--spacing-2) !important;
}

.m-xs {
  margin: var(--spacing-xs) !important;
}

.m-sm {
  margin: var(--spacing-sm) !important;
}

.m-md {
  margin: var(--spacing-md) !important;
}

.m-lg {
  margin: var(--spacing-lg) !important;
}

.m-xl {
  margin: var(--spacing-xl) !important;
}

.m-2xl {
  margin: var(--spacing-2xl) !important;
}

/* Padding utilities */
.p-0 {
  padding: var(--spacing-0) !important;
}

.p-1 {
  padding: var(--spacing-1) !important;
}

.p-2 {
  padding: var(--spacing-2) !important;
}

.p-xs {
  padding: var(--spacing-xs) !important;
}

.p-sm {
  padding: var(--spacing-sm) !important;
}

.p-md {
  padding: var(--spacing-md) !important;
}

.p-lg {
  padding: var(--spacing-lg) !important;
}

.p-xl {
  padding: var(--spacing-xl) !important;
}

.p-2xl {
  padding: var(--spacing-2xl) !important;
}

/* Directional margin utilities */
.mt-0 {
  margin-top: var(--spacing-0) !important;
}

.mt-xs {
  margin-top: var(--spacing-xs) !important;
}

.mt-sm {
  margin-top: var(--spacing-sm) !important;
}

.mt-md {
  margin-top: var(--spacing-md) !important;
}

.mt-lg {
  margin-top: var(--spacing-lg) !important;
}

.mt-xl {
  margin-top: var(--spacing-xl) !important;
}

.mb-0 {
  margin-bottom: var(--spacing-0) !important;
}

.mb-xs {
  margin-bottom: var(--spacing-xs) !important;
}

.mb-sm {
  margin-bottom: var(--spacing-sm) !important;
}

.mb-md {
  margin-bottom: var(--spacing-md) !important;
}

.mb-lg {
  margin-bottom: var(--spacing-lg) !important;
}

.mb-xl {
  margin-bottom: var(--spacing-xl) !important;
}

.ml-0 {
  margin-left: var(--spacing-0) !important;
}

.ml-xs {
  margin-left: var(--spacing-xs) !important;
}

.ml-sm {
  margin-left: var(--spacing-sm) !important;
}

.ml-md {
  margin-left: var(--spacing-md) !important;
}

.ml-lg {
  margin-left: var(--spacing-lg) !important;
}

.ml-xl {
  margin-left: var(--spacing-xl) !important;
}

.mr-0 {
  margin-right: var(--spacing-0) !important;
}

.mr-xs {
  margin-right: var(--spacing-xs) !important;
}

.mr-sm {
  margin-right: var(--spacing-sm) !important;
}

.mr-md {
  margin-right: var(--spacing-md) !important;
}

.mr-lg {
  margin-right: var(--spacing-lg) !important;
}

.mr-xl {
  margin-right: var(--spacing-xl) !important;
}

/* Directional padding utilities */
.pt-0 {
  padding-top: var(--spacing-0) !important;
}

.pt-xs {
  padding-top: var(--spacing-xs) !important;
}

.pt-sm {
  padding-top: var(--spacing-sm) !important;
}

.pt-md {
  padding-top: var(--spacing-md) !important;
}

.pt-lg {
  padding-top: var(--spacing-lg) !important;
}

.pt-xl {
  padding-top: var(--spacing-xl) !important;
}

.pb-0 {
  padding-bottom: var(--spacing-0) !important;
}

.pb-xs {
  padding-bottom: var(--spacing-xs) !important;
}

.pb-sm {
  padding-bottom: var(--spacing-sm) !important;
}

.pb-md {
  padding-bottom: var(--spacing-md) !important;
}

.pb-lg {
  padding-bottom: var(--spacing-lg) !important;
}

.pb-xl {
  padding-bottom: var(--spacing-xl) !important;
}

.pl-0 {
  padding-left: var(--spacing-0) !important;
}

.pl-xs {
  padding-left: var(--spacing-xs) !important;
}

.pl-sm {
  padding-left: var(--spacing-sm) !important;
}

.pl-md {
  padding-left: var(--spacing-md) !important;
}

.pl-lg {
  padding-left: var(--spacing-lg) !important;
}

.pl-xl {
  padding-left: var(--spacing-xl) !important;
}

.pr-0 {
  padding-right: var(--spacing-0) !important;
}

.pr-xs {
  padding-right: var(--spacing-xs) !important;
}

.pr-sm {
  padding-right: var(--spacing-sm) !important;
}

.pr-md {
  padding-right: var(--spacing-md) !important;
}

.pr-lg {
  padding-right: var(--spacing-lg) !important;
}

.pr-xl {
  padding-right: var(--spacing-xl) !important;
}

/* Gap utilities for flexbox and grid */
.gap-0 {
  gap: var(--spacing-0) !important;
}

.gap-xs {
  gap: var(--spacing-xs) !important;
}

.gap-sm {
  gap: var(--spacing-sm) !important;
}

.gap-md {
  gap: var(--spacing-md) !important;
}

.gap-lg {
  gap: var(--spacing-lg) !important;
}

.gap-xl {
  gap: var(--spacing-xl) !important;
}

/* ===== TYPOGRAPHY UTILITIES ===== */
/* Font families */
.font-sans {
  font-family: var(--font-family-sans) !important;
}

.font-serif {
  font-family: var(--font-family-serif) !important;
}

.font-mono {
  font-family: var(--font-family-mono) !important;
}

/* Font weights */
.font-thin {
  font-weight: var(--font-weight-thin) !important;
}

.font-extralight {
  font-weight: var(--font-weight-extralight) !important;
}

.font-light {
  font-weight: var(--font-weight-light) !important;
}

.font-normal {
  font-weight: var(--font-weight-normal) !important;
}

.font-medium {
  font-weight: var(--font-weight-medium) !important;
}

.font-semibold {
  font-weight: var(--font-weight-semibold) !important;
}

.font-bold {
  font-weight: var(--font-weight-bold) !important;
}

.font-extrabold {
  font-weight: var(--font-weight-extrabold) !important;
}

.font-black {
  font-weight: var(--font-weight-black) !important;
}

/* Font sizes */
.text-2xs {
  font-size: var(--font-size-2xs) !important;
}

.text-xs {
  font-size: var(--font-size-xs) !important;
}

.text-sm {
  font-size: var(--font-size-sm) !important;
}

.text-base {
  font-size: var(--font-size-base) !important;
}

.text-md {
  font-size: var(--font-size-md) !important;
}

.text-lg {
  font-size: var(--font-size-lg) !important;
}

.text-xl {
  font-size: var(--font-size-xl) !important;
}

.text-2xl {
  font-size: var(--font-size-2xl) !important;
}

.text-3xl {
  font-size: var(--font-size-3xl) !important;
}

.text-4xl {
  font-size: var(--font-size-4xl) !important;
}

.text-5xl {
  font-size: var(--font-size-5xl) !important;
}

.text-6xl {
  font-size: var(--font-size-6xl) !important;
}

/* Line heights */
.leading-none {
  line-height: var(--line-height-none) !important;
}

.leading-tight {
  line-height: var(--line-height-tight) !important;
}

.leading-snug {
  line-height: var(--line-height-snug) !important;
}

.leading-normal {
  line-height: var(--line-height-normal) !important;
}

.leading-relaxed {
  line-height: var(--line-height-relaxed) !important;
}

.leading-loose {
  line-height: var(--line-height-loose) !important;
}

/* Letter spacing */
.tracking-tighter {
  letter-spacing: var(--letter-spacing-tighter) !important;
}

.tracking-tight {
  letter-spacing: var(--letter-spacing-tight) !important;
}

.tracking-normal {
  letter-spacing: var(--letter-spacing-normal) !important;
}

.tracking-wide {
  letter-spacing: var(--letter-spacing-wide) !important;
}

.tracking-wider {
  letter-spacing: var(--letter-spacing-wider) !important;
}

.tracking-widest {
  letter-spacing: var(--letter-spacing-widest) !important;
}

/* Text transform */
.uppercase {
  text-transform: uppercase !important;
  letter-spacing: var(--letter-spacing-uppercase) !important;
}

.lowercase {
  text-transform: lowercase !important;
}

.capitalize {
  text-transform: capitalize !important;
}

.normal-case {
  text-transform: none !important;
}

/* Text alignment */
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

.text-justify {
  text-align: justify !important;
}

/* Text decoration */
.underline {
  text-decoration: underline !important;
}

.line-through {
  text-decoration: line-through !important;
}

.no-underline {
  text-decoration: none !important;
}

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

.text-ellipsis {
  text-overflow: ellipsis !important;
}

.text-clip {
  text-overflow: clip !important;
}

/* Whitespace */
.whitespace-normal {
  white-space: normal !important;
}

.whitespace-nowrap {
  white-space: nowrap !important;
}

.whitespace-pre {
  white-space: pre !important;
}

.whitespace-pre-line {
  white-space: pre-line !important;
}

.whitespace-pre-wrap {
  white-space: pre-wrap !important;
}

/* Word break */
.break-normal {
  overflow-wrap: normal !important;
  word-break: normal !important;
}

.break-words {
  overflow-wrap: break-word !important;
}

.break-all {
  word-break: break-all !important;
}

/* ===== BORDER UTILITIES ===== */
/* Border width utilities */
.border-0 {
  border-width: var(--border-width-0) !important;
}

.border {
  border-width: var(--border-width-1) !important;
}

.border-2 {
  border-width: var(--border-width-2) !important;
}

.border-4 {
  border-width: var(--border-width-4) !important;
}

.border-8 {
  border-width: var(--border-width-8) !important;
}

/* Border radius utilities */
.rounded-none {
  border-radius: var(--border-radius-none) !important;
}

.rounded-xs {
  border-radius: var(--border-radius-xs) !important;
}

.rounded-sm {
  border-radius: var(--border-radius-sm) !important;
}

.rounded {
  border-radius: var(--border-radius-md) !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-2xl {
  border-radius: var(--border-radius-2xl) !important;
}

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

.rounded-full {
  border-radius: var(--border-radius-full) !important;
}

/* ===== SHADOW UTILITIES ===== */
/* Shadow utilities */
.shadow-none {
  box-shadow: var(--shadow-none) !important;
}

.shadow-xs {
  box-shadow: var(--shadow-xs) !important;
}

.shadow-sm {
  box-shadow: var(--shadow-sm) !important;
}

.shadow {
  box-shadow: var(--shadow-md) !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-2xl {
  box-shadow: var(--shadow-2xl) !important;
}

.shadow-inner {
  box-shadow: var(--shadow-inner) !important;
}

/* Elevation utilities */
.elevation-0 {
  box-shadow: var(--elevation-0) !important;
}

.elevation-1 {
  box-shadow: var(--elevation-1) !important;
}

.elevation-2 {
  box-shadow: var(--elevation-2) !important;
}

.elevation-3 {
  box-shadow: var(--elevation-3) !important;
}

.elevation-4 {
  box-shadow: var(--elevation-4) !important;
}

.elevation-5 {
  box-shadow: var(--elevation-5) !important;
}

.elevation-6 {
  box-shadow: var(--elevation-6) !important;
}

/* ===== RING UTILITIES ===== */
/* Ring utilities */
.ring-0 {
  box-shadow: 0 0 0 var(--ring-width-0) transparent !important;
}

.ring-1 {
  box-shadow: var(--ring-focus) !important;
}

.ring-2 {
  box-shadow: var(--ring-focus) !important;
}

.ring-4 {
  box-shadow: 0 0 0 var(--ring-width-4) var(--color-primary-alpha-50) !important;
}

.ring-8 {
  box-shadow: 0 0 0 var(--ring-width-8) var(--color-primary-alpha-50) !important;
}

.ring-focus {
  box-shadow: var(--ring-focus) !important;
}

.ring-error {
  box-shadow: var(--ring-error) !important;
}

.ring-success {
  box-shadow: var(--ring-success) !important;
}

.ring-warning {
  box-shadow: var(--ring-warning) !important;
}

/* ===== OUTLINE UTILITIES ===== */
/* Outline utilities */
.outline-none {
  outline: var(--outline-none) !important;
}

.outline-focus {
  outline: var(--outline-focus) !important;
  outline-offset: var(--outline-offset) !important;
}

.outline-error {
  outline: var(--outline-error) !important;
  outline-offset: var(--outline-offset) !important;
}

.outline-success {
  outline: var(--outline-success) !important;
  outline-offset: var(--outline-offset) !important;
}

/* ===== BACKDROP FILTER UTILITIES ===== */
/* Backdrop filter utilities */
.backdrop-blur-none {
  backdrop-filter: var(--backdrop-blur-none) !important;
}

.backdrop-blur-xs {
  backdrop-filter: var(--backdrop-blur-xs) !important;
}

.backdrop-blur-sm {
  backdrop-filter: var(--backdrop-blur-sm) !important;
}

.backdrop-blur {
  backdrop-filter: var(--backdrop-blur-md) !important;
}

.backdrop-blur-md {
  backdrop-filter: var(--backdrop-blur-md) !important;
}

.backdrop-blur-lg {
  backdrop-filter: var(--backdrop-blur-lg) !important;
}

.backdrop-blur-xl {
  backdrop-filter: var(--backdrop-blur-xl) !important;
}

.backdrop-blur-2xl {
  backdrop-filter: var(--backdrop-blur-2xl) !important;
}

/* ===== DISPLAY UTILITIES ===== */
/* Display utilities */
.block {
  display: block !important;
}

.inline-block {
  display: inline-block !important;
}

.inline {
  display: inline !important;
}

.flex {
  display: flex !important;
}

.inline-flex {
  display: inline-flex !important;
}

.table {
  display: table !important;
}

.inline-table {
  display: inline-table !important;
}

.table-caption {
  display: table-caption !important;
}

.table-cell {
  display: table-cell !important;
}

.table-column {
  display: table-column !important;
}

.table-column-group {
  display: table-column-group !important;
}

.table-footer-group {
  display: table-footer-group !important;
}

.table-header-group {
  display: table-header-group !important;
}

.table-row-group {
  display: table-row-group !important;
}

.table-row {
  display: table-row !important;
}

.flow-root {
  display: flow-root !important;
}

.grid {
  display: grid !important;
}

.inline-grid {
  display: inline-grid !important;
}

.contents {
  display: contents !important;
}

.list-item {
  display: list-item !important;
}

.hidden {
  display: none !important;
}

/* ===== VISIBILITY UTILITIES ===== */
/* Visibility utilities */
.visible {
  visibility: visible !important;
}

.invisible {
  visibility: hidden !important;
}

/* ===== OPACITY UTILITIES ===== */
/* Opacity utilities */
.opacity-0 {
  opacity: 0 !important;
}

.opacity-5 {
  opacity: 0.05 !important;
}

.opacity-10 {
  opacity: 0.1 !important;
}

.opacity-20 {
  opacity: 0.2 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-30 {
  opacity: 0.3 !important;
}

.opacity-40 {
  opacity: 0.4 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-60 {
  opacity: 0.6 !important;
}

.opacity-70 {
  opacity: 0.7 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-80 {
  opacity: 0.8 !important;
}

.opacity-90 {
  opacity: 0.9 !important;
}

.opacity-95 {
  opacity: 0.95 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

/* ===== POSITION UTILITIES ===== */
/* Position utilities */
.static {
  position: static !important;
}

.fixed {
  position: fixed !important;
}

.absolute {
  position: absolute !important;
}

.relative {
  position: relative !important;
}

.sticky {
  position: sticky !important;
}

/* ===== Z-INDEX UTILITIES ===== */
/* Z-index utilities */
.z-0 {
  z-index: 0 !important;
}

.z-10 {
  z-index: 10 !important;
}

.z-20 {
  z-index: 20 !important;
}

.z-30 {
  z-index: 30 !important;
}

.z-40 {
  z-index: 40 !important;
}

.z-50 {
  z-index: 50 !important;
}

.z-auto {
  z-index: auto !important;
}

/* ===== OVERFLOW UTILITIES ===== */
/* Overflow utilities */
.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-clip {
  overflow: clip !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.overflow-y-hidden {
  overflow-y: hidden !important;
}

.overflow-x-clip {
  overflow-x: clip !important;
}

.overflow-y-clip {
  overflow-y: clip !important;
}

.overflow-x-visible {
  overflow-x: visible !important;
}

.overflow-y-visible {
  overflow-y: visible !important;
}

.overflow-x-scroll {
  overflow-x: scroll !important;
}

.overflow-y-scroll {
  overflow-y: scroll !important;
}

/* ===== POINTER EVENTS UTILITIES ===== */
/* Pointer events utilities */
.pointer-events-none {
  pointer-events: none !important;
}

.pointer-events-auto {
  pointer-events: auto !important;
}

/* ===== CURSOR UTILITIES ===== */
/* Cursor utilities */
.cursor-auto {
  cursor: auto !important;
}

.cursor-default {
  cursor: default !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.cursor-wait {
  cursor: wait !important;
}

.cursor-text {
  cursor: text !important;
}

.cursor-move {
  cursor: move !important;
}

.cursor-help {
  cursor: help !important;
}

.cursor-not-allowed {
  cursor: not-allowed !important;
}

/* ===== USER SELECT UTILITIES ===== */
/* User select utilities */
.select-none {
  user-select: none !important;
}

.select-text {
  user-select: text !important;
}

.select-all {
  user-select: all !important;
}

.select-auto {
  user-select: auto !important;
}

/* ===== SCREEN READER UTILITIES ===== */
/* Screen reader utilities */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

.not-sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* ===== DARK MODE LAYOUT COMPONENT (FLEXBOX) ===== */
/* This file mirrors _layout.scss with dark mode equivalents for ALL components */
/* ===== FLEX DISPLAY - No dark mode changes needed ===== */
/* .flex, .inline-flex - utility classes remain unchanged */
/* ===== FLEX DIRECTION - No dark mode changes needed ===== */
/* .flex-row, .flex-row-reverse, .flex-col, .flex-col-reverse - utility classes remain unchanged */
/* ===== FLEX WRAP - No dark mode changes needed ===== */
/* .flex-wrap, .flex-wrap-reverse, .flex-nowrap - utility classes remain unchanged */
/* ===== FLEX PROPERTIES - No dark mode changes needed ===== */
/* All flex utility classes (.flex-1, .flex-auto, .grow, .shrink, .basis-*) remain unchanged */
/* ===== JUSTIFY/ALIGN UTILITIES - No dark mode changes needed ===== */
/* All justify-content, align-items, place-content utilities remain unchanged */
/* ===== FLEX LAYOUT COMPONENTS - Dark Mode Overrides ===== */
html.dark-mode {
  /* Card layout with flex */
  /* Sidebar layout */
  /* Header layout */
  /* Navigation list */
  /* Toolbar */
  /* Button group */
  /* ===== MAIN EDITOR LAYOUT - Dark Mode ===== */
  /* Main editor layout container */
  /* App Header - Enhanced Dark Mode */
  /* Left Sidebar - Enhanced Dark Mode */
  /* Enhanced Properties Panel Layout - Dark Mode */
  /* Button Groups - Dark Mode */
  /* Layer Controls - Dark Mode */
  /* ===== MODERN COLOR CONTROLS - Dark Mode ===== */
  /* ===== MODERN VALUE DISPLAYS - Dark Mode ===== */
  /* ===== MODERN SIDEBAR SECTIONS - Dark Mode ===== */
  /* Subsections - Dark Mode */
  /* Canvas Area - Enhanced Dark Mode */
  /* Canvas itself - Dark Mode */
  /* ===== CANVAS CONTROLS - UNIFIED STYLING - Dark Mode ===== */
  /* Export controls - Dark Mode */
  /* Heather gray button styling for canvas controls - Dark Mode */
  /* Specific button targeting - Dark Mode */
  /* Status message - Dark Mode */
  /* ===== PROPERTIES PANEL - Dark Mode ===== */
  /* Property Sections - Dark Mode */
  /* Property Labels and Inputs - Dark Mode */
}
html.dark-mode .flex-card {
  background: var(--bg-elevated-dark);
  border: 1px solid var(--border-primary-dark);
}
html.dark-mode .flex-card-header {
  border-bottom: 1px solid var(--border-primary-dark);
  background: var(--bg-tertiary-dark);
}
html.dark-mode .flex-card-body {
  background: var(--bg-elevated-dark);
}
html.dark-mode .flex-card-footer {
  border-top: 1px solid var(--border-primary-dark);
  background: var(--bg-tertiary-dark);
}
html.dark-mode .flex-sidebar {
  background: var(--bg-secondary-dark);
  border-right: 1px solid var(--border-primary-dark);
}
html.dark-mode .flex-main {
  background: var(--bg-primary-dark);
}
html.dark-mode .flex-header {
  background: var(--bg-elevated-dark);
  border-bottom: 1px solid var(--border-primary-dark);
}
html.dark-mode .flex-header-brand {
  color: var(--text-primary-dark);
}
html.dark-mode .flex-nav-item {
  color: var(--text-secondary-dark);
}
html.dark-mode .flex-nav-item:hover {
  background: var(--hover-dark);
  color: var(--text-primary-dark);
}
html.dark-mode .flex-nav-item.active {
  background: var(--interactive-primary-dark);
  color: var(--text-primary-dark);
}
html.dark-mode .flex-toolbar {
  background: var(--bg-secondary-dark);
  border: 1px solid var(--border-primary-dark);
}
html.dark-mode .flex-toolbar-separator {
  background: var(--border-primary-dark);
}
html.dark-mode .flex-button-group {
  border: 1px solid var(--border-primary-dark);
}
html.dark-mode .flex-button-group > * + * {
  border-left: 1px solid var(--border-primary-dark);
}
html.dark-mode .layout {
  background: var(--bg-primary-dark);
}
html.dark-mode .app-header {
  background: var(--bg-elevated-dark);
  border-bottom: 1px solid var(--border-primary-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
html.dark-mode .app-header h1 {
  color: var(--text-primary-dark);
}
html.dark-mode .left-sidebar {
  background: var(--bg-secondary-dark);
  border-right: 1px solid var(--border-primary-dark);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
  /* Custom scrollbar for dark mode */
}
html.dark-mode .left-sidebar::-webkit-scrollbar {
  width: 6px;
}
html.dark-mode .left-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
html.dark-mode .left-sidebar::-webkit-scrollbar-thumb {
  background: var(--border-secondary-dark);
  border-radius: 3px;
  transition: background 0.2s ease;
}
html.dark-mode .left-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted-dark);
}
html.dark-mode .right-sidebar {
  background: var(--bg-secondary-dark);
  border-left: 1px solid var(--border-primary-dark);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
  /* Custom scrollbar for dark mode */
}
html.dark-mode .right-sidebar::-webkit-scrollbar {
  width: 6px;
}
html.dark-mode .right-sidebar::-webkit-scrollbar-track {
  background: transparent;
}
html.dark-mode .right-sidebar::-webkit-scrollbar-thumb {
  background: var(--border-secondary-dark);
  border-radius: 3px;
  transition: background 0.2s ease;
}
html.dark-mode .right-sidebar::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted-dark);
}
html.dark-mode .button-group {
  border: 1px solid var(--border-primary-dark);
}
html.dark-mode .button-group .btn {
  background: var(--bg-elevated-dark);
  color: var(--text-primary-dark);
  border-right: 1px solid var(--border-primary-dark);
}
html.dark-mode .button-group .btn:hover {
  background: var(--hover-dark);
}
html.dark-mode .button-group .btn.active {
  background: var(--interactive-primary-dark);
  color: var(--text-primary-dark);
}
html.dark-mode .layer-buttons .btn {
  background: var(--bg-elevated-dark);
  color: var(--text-primary-dark);
  border: 1px solid var(--border-primary-dark);
}
html.dark-mode .layer-buttons .btn:hover {
  background: var(--hover-dark);
}
html.dark-mode .color-controls label {
  color: var(--text-secondary-dark);
}
html.dark-mode .color-controls label .icon {
  color: var(--interactive-primary-dark);
}
html.dark-mode .color-input-group {
  background: var(--bg-elevated-dark);
  border: 2px solid var(--border-primary-dark);
}
html.dark-mode .color-input-group:focus-within {
  border-color: var(--interactive-primary-dark);
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}
html.dark-mode .color-picker {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
html.dark-mode .color-picker:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
html.dark-mode .hex-input {
  color: var(--text-primary-dark);
}
html.dark-mode .value-display {
  background: var(--bg-tertiary-dark);
  border: 1px solid var(--border-primary-dark);
  color: var(--text-primary-dark);
}
html.dark-mode .sidebar-section {
  background: var(--bg-elevated-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
html.dark-mode .sidebar-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
html.dark-mode .section-header {
  background: var(--bg-tertiary-dark);
  border-bottom: 1px solid var(--border-primary-dark);
  color: var(--text-primary-dark);
}
html.dark-mode .section-header::before {
  background: var(--interactive-primary-dark);
}
html.dark-mode .section-header:hover {
  background: var(--hover-dark);
  color: var(--text-primary-dark);
}
html.dark-mode .section-title .icon {
  color: var(--interactive-primary-dark);
}
html.dark-mode .toggle-icon {
  color: var(--text-muted-dark);
}
html.dark-mode .section-header.collapsed .toggle-icon {
  color: var(--text-disabled-dark);
}
html.dark-mode .section-content {
  background: var(--bg-elevated-dark);
}
html.dark-mode .subsection {
  background: var(--bg-elevated-dark);
  border: 1px solid var(--border-primary-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
html.dark-mode .subsection:hover {
  border-color: var(--interactive-primary-dark);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
html.dark-mode .subsection h4 {
  color: var(--text-primary-dark);
}
html.dark-mode .canvas-area {
  background: var(--bg-primary-dark);
}
html.dark-mode .canvas-container {
  background: var(--bg-primary-dark);
  /* Canvas grid pattern for dark mode */
}
html.dark-mode .canvas-container::before {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0);
  background-size: 20px 20px;
  opacity: 0.2;
}
html.dark-mode #canvas {
  border: 2px solid var(--border-primary-dark);
  background-color: var(--bg-elevated-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
html.dark-mode .canvas-controls {
  background: var(--bg-secondary-dark);
  border-top: 1px solid var(--border-primary-dark);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3);
}
html.dark-mode .zoom-controls input[type=range] {
  background: var(--bg-tertiary-dark);
}
html.dark-mode .zoom-controls input[type=range]::-webkit-slider-track {
  background: var(--bg-tertiary-dark);
  border: 1px solid var(--border-primary-dark);
}
html.dark-mode .zoom-controls input[type=range]::-webkit-slider-thumb {
  background: var(--interactive-primary-dark);
  border: 1px solid var(--border-primary-dark);
}
html.dark-mode .zoom-controls input[type=range]::-moz-range-track {
  background: var(--bg-tertiary-dark);
  border: 1px solid var(--border-primary-dark);
}
html.dark-mode .zoom-controls input[type=range]::-moz-range-thumb {
  background: var(--interactive-primary-dark);
  border: 1px solid var(--border-primary-dark);
}
html.dark-mode .export-controls {
  background: var(--bg-secondary-dark);
  border-top: 1px solid var(--border-primary-dark);
}
html.dark-mode .format-selection label,
html.dark-mode .quality-selection label {
  color: var(--text-secondary-dark);
}
html.dark-mode .format-selection select,
html.dark-mode .quality-selection select {
  background: var(--bg-elevated-dark);
  border: 1px solid var(--border-primary-dark);
  color: var(--text-primary-dark);
}
html.dark-mode .format-selection select:focus,
html.dark-mode .quality-selection select:focus {
  border-color: var(--interactive-primary-dark);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
html.dark-mode .format-selection select:hover,
html.dark-mode .quality-selection select:hover {
  border-color: var(--border-secondary-dark);
}
html.dark-mode .canvas-controls .export-controls .btn,
html.dark-mode .export-controls .btn.btn {
  background: var(--bg-tertiary-dark) !important;
  color: var(--text-primary-dark) !important;
  border: 1px solid var(--border-primary-dark) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
html.dark-mode .canvas-controls .export-controls .btn:hover,
html.dark-mode .export-controls .btn.btn:hover {
  background: var(--hover-dark) !important;
  border-color: var(--border-secondary-dark) !important;
  color: var(--text-primary-dark) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}
html.dark-mode .canvas-controls .export-controls .btn:active,
html.dark-mode .export-controls .btn.btn:active {
  background: var(--bg-primary-dark) !important;
  border-color: var(--border-primary-dark) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}
html.dark-mode .canvas-controls .export-controls .btn:focus,
html.dark-mode .export-controls .btn.btn:focus {
  border-color: var(--interactive-primary-dark) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}
html.dark-mode #downloadSavedPDF,
html.dark-mode #generatePDF {
  background: var(--bg-tertiary-dark) !important;
  color: var(--text-primary-dark) !important;
  border: 1px solid var(--border-primary-dark) !important;
}
html.dark-mode #downloadSavedPDF:hover,
html.dark-mode #generatePDF:hover {
  background: var(--hover-dark) !important;
  border-color: var(--border-secondary-dark) !important;
  color: var(--text-primary-dark) !important;
}
html.dark-mode #statusMessage {
  color: var(--text-secondary-dark);
}
html.dark-mode .properties-panel {
  background: var(--bg-secondary-dark);
}
html.dark-mode .property-section {
  background: var(--bg-elevated-dark);
  border: 1px solid var(--border-primary-dark);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
html.dark-mode .property-section-header {
  background: var(--bg-tertiary-dark);
  border-bottom: 1px solid var(--border-primary-dark);
  color: var(--text-primary-dark);
}
html.dark-mode .property-section-content {
  background: var(--bg-elevated-dark);
}
html.dark-mode .property-label {
  color: var(--text-secondary-dark);
}
html.dark-mode .property-input,
html.dark-mode .property-select {
  background: var(--bg-elevated-dark);
  border: 1px solid var(--border-primary-dark);
  color: var(--text-primary-dark);
}
html.dark-mode .property-input:focus,
html.dark-mode .property-select:focus {
  border-color: var(--interactive-primary-dark);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
html.dark-mode .property-input:hover,
html.dark-mode .property-select:hover {
  border-color: var(--border-secondary-dark);
}
html.dark-mode .property-input::placeholder,
html.dark-mode .property-select::placeholder {
  color: var(--text-muted-dark);
}

/* ===== MEDIA QUERY FOR SYSTEM DARK MODE PREFERENCE ===== */
@media (prefers-color-scheme: dark) {
  /* Apply same styles for users with system dark mode preference */
  /* Flex Layout Components */
  .flex-card {
    background: var(--bg-elevated-dark);
    border: 1px solid var(--border-primary-dark);
  }
  .flex-card-header {
    border-bottom: 1px solid var(--border-primary-dark);
    background: var(--bg-tertiary-dark);
  }
  .flex-card-footer {
    border-top: 1px solid var(--border-primary-dark);
    background: var(--bg-tertiary-dark);
  }
  .flex-sidebar {
    background: var(--bg-secondary-dark);
    border-right: 1px solid var(--border-primary-dark);
  }
  .flex-main {
    background: var(--bg-primary-dark);
  }
  .flex-header {
    background: var(--bg-elevated-dark);
    border-bottom: 1px solid var(--border-primary-dark);
  }
  .flex-header-brand {
    color: var(--text-primary-dark);
  }
  /* Main Layout */
  .layout {
    background: var(--bg-primary-dark);
  }
  .app-header {
    background: var(--bg-elevated-dark);
    border-bottom: 1px solid var(--border-primary-dark);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  }
  .app-header h1 {
    color: var(--text-primary-dark);
  }
  .left-sidebar {
    background: var(--bg-secondary-dark);
    border-right: 1px solid var(--border-primary-dark);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
  }
  .right-sidebar {
    background: var(--bg-secondary-dark);
    border-left: 1px solid var(--border-primary-dark);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
  }
  .canvas-area {
    background: var(--bg-primary-dark);
  }
  .canvas-container {
    background: var(--bg-primary-dark);
  }
  .canvas-container::before {
    background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.1) 1px, transparent 0);
    opacity: 0.2;
  }
  #canvas {
    border: 2px solid var(--border-primary-dark);
    background-color: var(--bg-elevated-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  .canvas-controls {
    background: var(--bg-secondary-dark);
    border-top: 1px solid var(--border-primary-dark);
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3);
  }
  .export-controls {
    background: var(--bg-secondary-dark);
    border-top: 1px solid var(--border-primary-dark);
  }
  .property-section {
    background: var(--bg-elevated-dark);
    border: 1px solid var(--border-primary-dark);
  }
  .property-section-header {
    background: var(--bg-tertiary-dark);
    border-bottom: 1px solid var(--border-primary-dark);
    color: var(--text-primary-dark);
  }
  .sidebar-section {
    background: var(--bg-elevated-dark);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  .section-header {
    background: var(--bg-tertiary-dark);
    border-bottom: 1px solid var(--border-primary-dark);
    color: var(--text-primary-dark);
  }
  .subsection {
    background: var(--bg-elevated-dark);
    border: 1px solid var(--border-primary-dark);
  }
  .subsection h4 {
    color: var(--text-primary-dark);
  }
  .color-input-group {
    background: var(--bg-elevated-dark);
    border: 2px solid var(--border-primary-dark);
  }
  .value-display {
    background: var(--bg-tertiary-dark);
    border: 1px solid var(--border-primary-dark);
    color: var(--text-primary-dark);
  }
  .property-input,
  .property-select {
    background: var(--bg-elevated-dark);
    border: 1px solid var(--border-primary-dark);
    color: var(--text-primary-dark);
  }
  .format-selection select,
  .quality-selection select {
    background: var(--bg-elevated-dark);
    border: 1px solid var(--border-primary-dark);
    color: var(--text-primary-dark);
  }
}
/* ===== RESPONSIVE DESIGN - Dark Mode Adjustments ===== */
/* Responsive breakpoints maintain the same layout behavior */
/* Only color/background adjustments needed for dark mode */
@media (max-width: 1024px) {
  html.dark-mode .left-sidebar,
  html.dark-mode .right-sidebar {
    border-bottom: 1px solid var(--border-primary-dark);
  }
}
@media (max-width: 768px) {
  html.dark-mode .export-controls {
    background: var(--bg-secondary-dark);
  }
  html.dark-mode .export-controls .btn {
    background: var(--bg-tertiary-dark) !important;
    color: var(--text-primary-dark) !important;
    border: 1px solid var(--border-primary-dark) !important;
  }
}
/* ===== DARK MODE TRANSITIONS ===== */
/* Ensure smooth transitions for dark mode elements */
html.dark-mode .sidebar-section,
html.dark-mode .subsection {
  transition: box-shadow 0.3s ease, border-color 0.2s ease, background 0.2s ease;
}
html.dark-mode .property-input,
html.dark-mode .property-select,
html.dark-mode .format-selection select,
html.dark-mode .quality-selection select {
  transition: all 0.2s ease;
}
html.dark-mode .canvas-controls .export-controls .btn,
html.dark-mode .export-controls .btn.btn {
  transition: all 0.15s ease !important;
}

/* ===== DARK MODE NAVIGATION COMPONENT ===== */
/* This file mirrors _navigation.scss with dark mode equivalents for ALL components */
/* ===== Base Navigation - Dark Mode ===== */
html.dark-mode {
  /* ===== Tab Navigation - Dark Mode ===== */
  /* ===== Vertical Tab Navigation - Dark Mode ===== */
  /* ===== Menu Navigation - Dark Mode ===== */
  /* ===== Sidebar Navigation - Dark Mode ===== */
  /* ===== Navigation Sections - Dark Mode ===== */
  /* ===== Breadcrumb Navigation - Dark Mode ===== */
  /* ===== Pagination Navigation - Dark Mode ===== */
  /* ===== Stepper Navigation - Dark Mode ===== */
  /* ===== User Menu Styles - Dark Mode ===== */
  /* ===== Theme Selector - Dark Mode ===== */
}
html.dark-mode .nav-enhanced {
  /* Display and gap remain unchanged */
}
html.dark-mode .nav-item-enhanced {
  color: var(--text-muted-dark, #9ca3af);
  background: transparent;
}
html.dark-mode .nav-item-enhanced:hover {
  color: var(--text-primary-dark, #f9fafb);
  background: var(--surface-hover-dark, #374151);
  transform: translateY(-1px);
}
html.dark-mode .nav-item-enhanced:focus-visible {
  color: var(--text-primary-dark, #f9fafb);
  background: var(--primary-surface-dark, #1e3a8a);
  outline: 2px solid var(--focus-ring-dark, #60a5fa);
  outline-offset: 2px;
}
html.dark-mode .nav-item-enhanced.active {
  color: var(--primary-light-dark, #60a5fa);
  background: var(--primary-surface-dark, #1e3a8a);
  font-weight: 600;
}
html.dark-mode .tab-navigation {
  border-bottom: 2px solid var(--border-primary-dark, #374151);
}
html.dark-mode .tab-navigation::before {
  background: var(--border-primary-dark, #374151);
}
html.dark-mode .tab-item {
  color: var(--text-muted-dark, #9ca3af);
  background: transparent;
}
html.dark-mode .tab-item:hover {
  color: var(--text-primary-dark, #f9fafb);
  background: var(--surface-hover-dark, #374151);
}
html.dark-mode .tab-item:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring-dark, #60a5fa);
}
html.dark-mode .tab-item.active {
  color: var(--primary-light-dark, #60a5fa);
  background: var(--bg-primary-dark, #1f2937);
  font-weight: 600;
}
html.dark-mode .tab-item.active::after {
  background: var(--primary-light-dark, #60a5fa);
}
html.dark-mode .tab-navigation.vertical {
  border-right: 2px solid var(--border-primary-dark, #374151);
}
html.dark-mode .tab-navigation.vertical::before {
  background: var(--border-primary-dark, #374151);
}
html.dark-mode .menu-item {
  color: var(--text-primary-dark, #f9fafb);
  background: transparent;
}
html.dark-mode .menu-item:hover {
  background: var(--surface-hover-dark, #374151);
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .menu-item:focus-visible {
  outline: 2px solid var(--focus-ring-dark, #60a5fa);
  outline-offset: 2px;
}
html.dark-mode .menu-item.active {
  background: var(--primary-surface-dark, #1e3a8a);
  color: var(--primary-light-dark, #60a5fa);
  font-weight: 500;
}
html.dark-mode .sidebar {
  background: var(--bg-secondary-dark, #1f2937);
  border-right: 1px solid var(--border-primary-dark, #374151);
}
html.dark-mode .sidebar-header {
  border-bottom: 1px solid var(--border-primary-dark, #374151);
}
html.dark-mode .sidebar-title {
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .nav-section-header {
  color: var(--text-muted-dark, #9ca3af);
}
html.dark-mode .nav-section-header:hover {
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .nav-subsection {
  border-left: 1px solid var(--border-primary-dark, #374151);
}
html.dark-mode .breadcrumb {
  color: var(--text-muted-dark, #9ca3af);
}
html.dark-mode .breadcrumb-item a {
  color: var(--text-muted-dark, #9ca3af);
}
html.dark-mode .breadcrumb-item a:hover {
  color: var(--primary-light-dark, #60a5fa);
}
html.dark-mode .breadcrumb-item.active {
  color: var(--text-primary-dark, #f9fafb);
  font-weight: 500;
}
html.dark-mode .breadcrumb-separator {
  color: var(--text-disabled-dark, #6b7280);
}
html.dark-mode .pagination-item {
  border: 1px solid var(--border-primary-dark, #374151);
  background: var(--bg-primary-dark, #1f2937);
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .pagination-item:hover {
  background: var(--surface-hover-dark, #374151);
  border-color: var(--border-hover-dark, #4b5563);
}
html.dark-mode .pagination-item:focus-visible {
  outline: 2px solid var(--focus-ring-dark, #60a5fa);
  outline-offset: 2px;
}
html.dark-mode .pagination-item.active {
  background: var(--primary-dark, #3b82f6);
  border-color: var(--primary-dark, #3b82f6);
  color: white;
  font-weight: 500;
}
html.dark-mode .pagination-ellipsis {
  color: var(--text-disabled-dark, #6b7280);
}
html.dark-mode .stepper-item:not(:last-child)::after {
  background: var(--border-primary-dark, #374151);
}
html.dark-mode .stepper-indicator {
  background: var(--border-primary-dark, #374151);
  color: var(--text-disabled-dark, #6b7280);
}
html.dark-mode .stepper-item.active .stepper-indicator {
  background: var(--primary-dark, #3b82f6);
  color: white;
}
html.dark-mode .stepper-item.completed .stepper-indicator {
  background: var(--success-dark, #10b981);
  color: white;
}
html.dark-mode .stepper-label {
  color: var(--text-muted-dark, #9ca3af);
}
html.dark-mode .stepper-item.active .stepper-label {
  color: var(--primary-light-dark, #60a5fa);
  font-weight: 600;
}
html.dark-mode .stepper-item.completed .stepper-label {
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .user-menu-toggle {
  border: 1px solid var(--border-primary-dark, #374151);
  color: var(--text-primary-dark, #f9fafb);
  background: var(--bg-primary-dark, #1f2937);
}
html.dark-mode .user-menu-toggle:hover {
  background-color: var(--surface-hover-dark, #374151);
  border-color: var(--primary-light-dark, #60a5fa);
}
html.dark-mode .user-name {
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .dropdown-arrow {
  color: var(--text-muted-dark, #9ca3af);
}
html.dark-mode .user-menu-dropdown {
  background: var(--bg-elevated-dark, #374151);
  border: 1px solid var(--border-primary-dark, #4b5563);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}
html.dark-mode .user-menu-section {
  border-bottom: 1px solid var(--border-secondary-dark, #4b5563);
}
html.dark-mode .user-menu-section h4 {
  color: var(--text-muted-dark, #9ca3af);
}
html.dark-mode .theme-selector label {
  color: var(--text-muted-dark, #9ca3af);
}
html.dark-mode .theme-selector select {
  border: 1px solid var(--border-primary-dark, #374151);
  background: var(--bg-primary-dark, #1f2937);
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .theme-selector select:focus {
  outline: 2px solid var(--focus-ring-dark, #60a5fa);
  outline-offset: 2px;
  border-color: var(--primary-light-dark, #60a5fa);
}
html.dark-mode .theme-selector select option {
  background: var(--bg-primary-dark, #1f2937);
  color: var(--text-primary-dark, #f9fafb);
}

/* ===== System Preference Support ===== */
@media (prefers-color-scheme: dark) {
  /* Apply same dark mode styles when system preference is dark */
  .nav-item-enhanced {
    color: var(--text-muted-dark, #9ca3af);
  }
  .nav-item-enhanced:hover {
    color: var(--text-primary-dark, #f9fafb);
    background: var(--surface-hover-dark, #374151);
  }
  .nav-item-enhanced.active {
    color: var(--primary-light-dark, #60a5fa);
    background: var(--primary-surface-dark, #1e3a8a);
  }
  .tab-navigation {
    border-bottom: 2px solid var(--border-primary-dark, #374151);
  }
  .tab-item {
    color: var(--text-muted-dark, #9ca3af);
  }
  .tab-item:hover {
    color: var(--text-primary-dark, #f9fafb);
    background: var(--surface-hover-dark, #374151);
  }
  .tab-item.active {
    color: var(--primary-light-dark, #60a5fa);
    background: var(--bg-primary-dark, #1f2937);
  }
  .sidebar {
    background: var(--bg-secondary-dark, #1f2937);
    border-right: 1px solid var(--border-primary-dark, #374151);
  }
  .user-menu-dropdown {
    background: var(--bg-elevated-dark, #374151);
    border: 1px solid var(--border-primary-dark, #4b5563);
  }
  .theme-selector select {
    background: var(--bg-primary-dark, #1f2937);
    border: 1px solid var(--border-primary-dark, #374151);
    color: var(--text-primary-dark, #f9fafb);
  }
}
/* ===== Accessibility & Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  html.dark-mode .nav-item-enhanced,
  html.dark-mode .tab-item,
  html.dark-mode .menu-item,
  html.dark-mode .pagination-item,
  html.dark-mode .stepper-indicator {
    transition: none;
  }
  html.dark-mode .nav-item-enhanced:hover,
  html.dark-mode .tab-item:hover,
  html.dark-mode .menu-item:hover {
    transform: none;
  }
  html.dark-mode .nav-section-header svg {
    transition: none;
  }
  html.dark-mode .dropdown-arrow {
    transition: none;
  }
  html.dark-mode .user-menu-dropdown {
    transition: none;
  }
}
/* ===== Responsive Dark Mode Adjustments ===== */
@media (max-width: 768px) {
  html.dark-mode .sidebar {
    background: var(--bg-secondary-dark, #1f2937);
  }
  html.dark-mode .user-menu-dropdown {
    background: var(--bg-elevated-dark, #374151);
    border: 1px solid var(--border-primary-dark, #4b5563);
  }
}
@media (max-width: 480px) {
  html.dark-mode .nav-item-enhanced {
    color: var(--text-muted-dark, #9ca3af);
  }
  html.dark-mode .tab-item {
    color: var(--text-muted-dark, #9ca3af);
  }
  html.dark-mode .menu-item {
    color: var(--text-primary-dark, #f9fafb);
  }
}
/* ===== DARK MODE BUTTONS COMPONENT ===== */
/* This file mirrors _buttons.scss with dark mode equivalents for ALL button components */
/* ===== Base Button Styles - Dark Mode ===== */
html.dark-mode {
  /* ===== Button Variants - Dark Mode ===== */
  /* ===== Button Sizes - Dark Mode (inherit base styles) ===== */
  /* ===== Icon Buttons - Dark Mode ===== */
  /* ===== SVG Icon Styling - Dark Mode ===== */
  /* ===== Loading State - Dark Mode ===== */
  /* ===== Button Groups - Dark Mode ===== */
  /* ===== Specific Button Types - Dark Mode ===== */
  /* Upload Image Button */
  /* Add Text Button */
  /* ===== Enhanced Button Variants - Dark Mode ===== */
  /* ===== Context Buttons - Dark Mode ===== */
  /* ===== Outline Buttons - Dark Mode ===== */
  /* ===== Ghost Buttons - Dark Mode ===== */
  /* ===== Link Buttons - Dark Mode ===== */
  /* ===== Floating Action Button - Dark Mode ===== */
}
html.dark-mode .btn {
  /* Default single-color style for dark mode */
  background: var(--bg-secondary-dark, #374151);
  color: var(--text-primary-dark, #f9fafb);
  border-color: var(--border-primary-dark, #4b5563);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
html.dark-mode .btn:hover {
  background: var(--surface-hover-dark, #4b5563);
  border-color: var(--border-hover-dark, #6b7280);
  color: var(--text-primary-dark, #ffffff);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
html.dark-mode .btn:focus {
  outline: none;
  border-color: var(--primary-light-dark, #60a5fa);
  box-shadow: 0 0 0 3px var(--primary-surface-dark, rgba(59, 130, 246, 0.3));
}
html.dark-mode .btn:active {
  background: var(--surface-pressed-dark, #1f2937);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
html.dark-mode .btn:disabled,
html.dark-mode .btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--bg-disabled-dark, #374151);
  color: var(--text-disabled-dark, #6b7280);
  border-color: var(--border-disabled-dark, #4b5563);
}
html.dark-mode .btn-primary {
  background: var(--primary-dark, #3b82f6);
  color: #ffffff;
  border-color: var(--primary-dark, #3b82f6);
  box-shadow: 0 1px 2px rgba(59, 130, 246, 0.2);
}
html.dark-mode .btn-primary:hover {
  background: var(--primary-hover-dark, #2563eb);
  border-color: var(--primary-hover-dark, #2563eb);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}
html.dark-mode .btn-primary:focus {
  box-shadow: 0 0 0 3px var(--primary-surface-dark, rgba(59, 130, 246, 0.4));
}
html.dark-mode .btn-success {
  background: var(--success-dark, #10b981);
  color: #ffffff;
  border-color: var(--success-dark, #10b981);
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.2);
}
html.dark-mode .btn-success:hover {
  background: var(--success-hover-dark, #059669);
  border-color: var(--success-hover-dark, #059669);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}
html.dark-mode .btn-danger {
  background: var(--error-dark, #ef4444);
  color: #ffffff;
  border-color: var(--error-dark, #ef4444);
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.2);
}
html.dark-mode .btn-danger:hover {
  background: var(--error-hover-dark, #dc2626);
  border-color: var(--error-hover-dark, #dc2626);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}
html.dark-mode .btn-secondary {
  background: var(--bg-tertiary-dark, #4b5563);
  color: var(--text-primary-dark, #f9fafb);
  border-color: var(--border-primary-dark, #6b7280);
}
html.dark-mode .btn-secondary:hover {
  background: var(--surface-hover-dark, #6b7280);
  border-color: var(--border-hover-dark, #9ca3af);
  color: var(--text-primary-dark, #ffffff);
}
html.dark-mode .btn-sm {
  /* Size properties remain unchanged, colors inherit from base */
}
html.dark-mode .btn-lg {
  /* Size properties remain unchanged, colors inherit from base */
}
html.dark-mode .btn-icon {
  background: var(--bg-secondary-dark, #374151);
  border-color: var(--border-primary-dark, #4b5563);
}
html.dark-mode .btn-icon:hover {
  background: var(--surface-hover-dark, #4b5563);
  border-color: var(--border-hover-dark, #6b7280);
}
html.dark-mode .btn-icon.active {
  background-color: var(--primary-dark, #3b82f6);
  color: white;
  border-color: var(--primary-dark, #3b82f6);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}
html.dark-mode .btn-icon-sm {
  background: var(--bg-secondary-dark, #374151);
  border-color: var(--border-primary-dark, #4b5563);
}
html.dark-mode .btn svg,
html.dark-mode .btn .icon {
  fill: currentColor;
  /* Inherits color from parent button */
}
html.dark-mode .btn-loading {
  color: transparent;
  pointer-events: none;
}
html.dark-mode .btn-loading::after {
  border: 2px solid currentColor;
  border-top-color: transparent;
}
html.dark-mode .button-group {
  background: var(--bg-secondary-dark, #374151);
  border: 2px solid var(--border-primary-dark, #4b5563);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
html.dark-mode .button-group .btn {
  border-right: 1px solid var(--border-primary-dark, #4b5563);
  background: var(--bg-secondary-dark, #374151);
  color: var(--text-muted-dark, #9ca3af);
}
html.dark-mode .button-group .btn:last-child {
  border-right: none;
}
html.dark-mode .button-group .btn:hover {
  background: var(--surface-hover-dark, #4b5563);
  color: var(--text-primary-dark, #f9fafb);
  transform: none;
}
html.dark-mode .button-group .btn.active {
  background: var(--primary-dark, #3b82f6);
  color: #ffffff;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}
html.dark-mode .button-group .btn.active::before {
  background: var(--primary-light-dark, #60a5fa);
}
html.dark-mode .btn-upload,
html.dark-mode .upload-btn,
html.dark-mode .btn[data-action=upload],
html.dark-mode .btn:has(.upload-icon) {
  background: var(--primary-dark, #3b82f6);
  color: #ffffff;
  border-color: var(--primary-dark, #3b82f6);
  box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);
}
html.dark-mode .btn-upload:hover,
html.dark-mode .upload-btn:hover,
html.dark-mode .btn[data-action=upload]:hover,
html.dark-mode .btn:has(.upload-icon):hover {
  background: var(--primary-hover-dark, #2563eb);
  border-color: var(--primary-hover-dark, #2563eb);
  box-shadow: 0 4px 8px rgba(59, 130, 246, 0.3);
  transform: translateY(-1px);
}
html.dark-mode .btn-add-text,
html.dark-mode .add-text-btn,
html.dark-mode .btn[data-action=add-text],
html.dark-mode .btn:has(.text-icon) {
  background: var(--success-dark, #10b981);
  color: #ffffff;
  border-color: var(--success-dark, #10b981);
  box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}
html.dark-mode .btn-add-text:hover,
html.dark-mode .add-text-btn:hover,
html.dark-mode .btn[data-action=add-text]:hover,
html.dark-mode .btn:has(.text-icon):hover {
  background: var(--success-hover-dark, #059669);
  border-color: var(--success-hover-dark, #059669);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
  transform: translateY(-1px);
}
html.dark-mode .btn-enhanced {
  background: var(--bg-elevated-dark, #374151);
  color: var(--text-primary-dark, #f9fafb);
  border-color: var(--border-primary-dark, #4b5563);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
html.dark-mode .btn-enhanced:hover {
  background: var(--surface-hover-dark, #4b5563);
  color: var(--text-primary-dark, #ffffff);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transform: translateY(-1px);
}
html.dark-mode .btn-enhanced:active {
  background: var(--surface-pressed-dark, #1f2937);
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
html.dark-mode .btn-context-primary {
  background: var(--primary-dark, #3b82f6);
  color: #ffffff;
  border-color: var(--primary-dark, #3b82f6);
}
html.dark-mode .btn-context-primary:hover {
  background: var(--primary-hover-dark, #2563eb);
  border-color: var(--primary-hover-dark, #2563eb);
}
html.dark-mode .btn-context-secondary {
  background: var(--bg-tertiary-dark, #4b5563);
  color: var(--text-primary-dark, #f9fafb);
  border-color: var(--border-primary-dark, #6b7280);
}
html.dark-mode .btn-context-secondary:hover {
  background: var(--surface-hover-dark, #6b7280);
  color: var(--text-primary-dark, #ffffff);
}
html.dark-mode .btn-context-danger {
  background: var(--error-dark, #ef4444);
  color: #ffffff;
  border-color: var(--error-dark, #ef4444);
}
html.dark-mode .btn-context-danger:hover {
  background: var(--error-hover-dark, #dc2626);
  border-color: var(--error-hover-dark, #dc2626);
}
html.dark-mode .btn-outline {
  background: transparent;
  color: var(--text-primary-dark, #f9fafb);
  border-color: var(--border-primary-dark, #4b5563);
}
html.dark-mode .btn-outline:hover {
  background: var(--surface-hover-dark, #374151);
  color: var(--text-primary-dark, #ffffff);
  border-color: var(--border-hover-dark, #6b7280);
}
html.dark-mode .btn-outline-primary {
  color: var(--primary-light-dark, #60a5fa);
  border-color: var(--primary-light-dark, #60a5fa);
}
html.dark-mode .btn-outline-primary:hover {
  background: var(--primary-dark, #3b82f6);
  color: #ffffff;
  border-color: var(--primary-dark, #3b82f6);
}
html.dark-mode .btn-outline-secondary {
  color: var(--text-muted-dark, #9ca3af);
  border-color: var(--border-primary-dark, #4b5563);
}
html.dark-mode .btn-outline-secondary:hover {
  background: var(--bg-tertiary-dark, #4b5563);
  color: var(--text-primary-dark, #f9fafb);
  border-color: var(--border-hover-dark, #6b7280);
}
html.dark-mode .btn-outline-success {
  color: var(--success-light-dark, #34d399);
  border-color: var(--success-light-dark, #34d399);
}
html.dark-mode .btn-outline-success:hover {
  background: var(--success-dark, #10b981);
  color: #ffffff;
  border-color: var(--success-dark, #10b981);
}
html.dark-mode .btn-outline-danger {
  color: var(--error-light-dark, #f87171);
  border-color: var(--error-light-dark, #f87171);
}
html.dark-mode .btn-outline-danger:hover {
  background: var(--error-dark, #ef4444);
  color: #ffffff;
  border-color: var(--error-dark, #ef4444);
}
html.dark-mode .btn-ghost {
  background: transparent;
  color: var(--text-muted-dark, #9ca3af);
  border-color: transparent;
}
html.dark-mode .btn-ghost:hover {
  background: var(--surface-hover-dark, #374151);
  color: var(--text-primary-dark, #f9fafb);
  border-color: var(--border-primary-dark, #4b5563);
}
html.dark-mode .btn-ghost-primary {
  color: var(--primary-light-dark, #60a5fa);
}
html.dark-mode .btn-ghost-primary:hover {
  background: var(--primary-surface-dark, rgba(59, 130, 246, 0.2));
  color: var(--primary-light-dark, #60a5fa);
}
html.dark-mode .btn-link {
  background: transparent;
  color: var(--primary-light-dark, #60a5fa);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 2px;
}
html.dark-mode .btn-link:hover {
  background: transparent;
  color: var(--primary-hover-dark, #3b82f6);
  border-color: transparent;
  text-decoration: underline;
}
html.dark-mode .btn-fab {
  background: var(--primary-dark, #3b82f6);
  color: #ffffff;
  border-color: var(--primary-dark, #3b82f6);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}
html.dark-mode .btn-fab:hover {
  background: var(--primary-hover-dark, #2563eb);
  border-color: var(--primary-hover-dark, #2563eb);
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px);
}
html.dark-mode .btn-fab:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ===== System Preference Support ===== */
@media (prefers-color-scheme: dark) {
  /* Apply same dark mode styles when system preference is dark */
  .btn {
    background: var(--bg-secondary-dark, #374151);
    color: var(--text-primary-dark, #f9fafb);
    border-color: var(--border-primary-dark, #4b5563);
  }
  .btn:hover {
    background: var(--surface-hover-dark, #4b5563);
    color: var(--text-primary-dark, #ffffff);
  }
  .btn-primary {
    background: var(--primary-dark, #3b82f6);
    color: #ffffff;
    border-color: var(--primary-dark, #3b82f6);
  }
  .btn-primary:hover {
    background: var(--primary-hover-dark, #2563eb);
    border-color: var(--primary-hover-dark, #2563eb);
  }
  .button-group {
    background: var(--bg-secondary-dark, #374151);
    border: 2px solid var(--border-primary-dark, #4b5563);
  }
  .button-group .btn {
    background: var(--bg-secondary-dark, #374151);
    color: var(--text-muted-dark, #9ca3af);
  }
  .button-group .btn:hover {
    background: var(--surface-hover-dark, #4b5563);
    color: var(--text-primary-dark, #f9fafb);
  }
  .button-group .btn.active {
    background: var(--primary-dark, #3b82f6);
    color: #ffffff;
  }
}
/* ===== Accessibility & Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  html.dark-mode .btn,
  html.dark-mode .btn-enhanced,
  html.dark-mode .btn-fab {
    transition: none;
  }
  html.dark-mode .btn:hover,
  html.dark-mode .btn-enhanced:hover,
  html.dark-mode .btn-fab:hover,
  html.dark-mode .btn-upload:hover,
  html.dark-mode .btn-add-text:hover {
    transform: none;
  }
  html.dark-mode .btn-loading::after {
    animation: none;
  }
}
/* ===== High Contrast Mode Support ===== */
@media (prefers-contrast: high) {
  html.dark-mode .btn {
    border-width: 2px;
    font-weight: 600;
  }
  html.dark-mode .btn:focus {
    outline: 3px solid var(--focus-ring-dark, #60a5fa);
    outline-offset: 3px;
  }
  html.dark-mode .btn-primary,
  html.dark-mode .btn-success,
  html.dark-mode .btn-danger {
    border-width: 2px;
    box-shadow: none;
  }
}
/* ===== DARK MODE FORMS COMPONENT ===== */
/* This file mirrors _forms.scss with dark mode equivalents for ALL form components */
/* ===== Base Form Styles - Dark Mode ===== */
html.dark-mode {
  /* ===== Form Labels - Dark Mode ===== */
  /* ===== Text Input Controls - Dark Mode ===== */
  /* ===== Select Dropdown Controls - Dark Mode ===== */
  /* ===== Hover and Focus States - Dark Mode ===== */
  /* ===== Disabled States - Dark Mode ===== */
  /* ===== Checkbox and Radio - Dark Mode ===== */
  /* Enhanced checkbox/radio styles - Dark Mode */
  /* ===== Form Validation States - Dark Mode ===== */
  /* ===== Form Help Text - Dark Mode ===== */
  /* ===== Input Groups - Dark Mode ===== */
  /* ===== Form Sections - Dark Mode ===== */
  /* ===== Form Actions - Dark Mode ===== */
  /* ===== Range Inputs - Dark Mode ===== */
  /* ===== File Input - Dark Mode ===== */
  /* ===== Search Input - Dark Mode ===== */
  /* ===== Date/Time Inputs - Dark Mode ===== */
  /* ===== Color Input - Dark Mode ===== */
}
html.dark-mode .form {
  /* Display and gap remain unchanged */
}
html.dark-mode .form-group {
  /* Display and gap remain unchanged */
}
html.dark-mode .form-row {
  /* Display and gap remain unchanged */
}
html.dark-mode .form-label,
html.dark-mode label {
  color: var(--text-primary-dark, #f9fafb);
  font-weight: 600;
}
html.dark-mode .form-label.required::after {
  color: var(--error-light-dark, #f87171);
}
html.dark-mode .form-label-inline {
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .form-control,
html.dark-mode .form-input,
html.dark-mode .property-input,
html.dark-mode textarea,
html.dark-mode input[type=text],
html.dark-mode input[type=email],
html.dark-mode input[type=password],
html.dark-mode input[type=number],
html.dark-mode input[type=search] {
  color: var(--text-primary-dark, #f9fafb);
  background-color: var(--bg-secondary-dark, #374151);
  border: 2px solid var(--border-primary-dark, #4b5563);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
html.dark-mode .form-control::placeholder,
html.dark-mode .form-input::placeholder,
html.dark-mode .property-input::placeholder,
html.dark-mode textarea::placeholder,
html.dark-mode input[type=text]::placeholder,
html.dark-mode input[type=email]::placeholder,
html.dark-mode input[type=password]::placeholder,
html.dark-mode input[type=number]::placeholder,
html.dark-mode input[type=search]::placeholder {
  color: var(--text-muted-dark, #9ca3af);
  opacity: 1;
}
html.dark-mode .form-select,
html.dark-mode .property-select,
html.dark-mode select {
  color: var(--text-primary-dark, #f9fafb);
  background-color: var(--bg-secondary-dark, #374151);
  border: 2px solid var(--border-primary-dark, #4b5563);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
html.dark-mode select.form-control {
  color: var(--text-primary-dark, #f9fafb) !important;
  background-color: var(--bg-secondary-dark, #374151) !important;
  border-color: var(--border-primary-dark, #4b5563) !important;
  opacity: 1 !important;
}
html.dark-mode select.form-control option {
  color: var(--text-primary-dark, #f9fafb) !important;
  background-color: var(--bg-secondary-dark, #374151) !important;
}
html.dark-mode .form-control:hover,
html.dark-mode .form-input:hover,
html.dark-mode .form-select:hover,
html.dark-mode .property-input:hover,
html.dark-mode .property-select:hover,
html.dark-mode select:hover,
html.dark-mode textarea:hover,
html.dark-mode input:hover {
  border-color: var(--border-hover-dark, #6b7280);
  background-color: var(--surface-hover-dark, #4b5563);
}
html.dark-mode .form-control:focus,
html.dark-mode .form-input:focus,
html.dark-mode .form-select:focus,
html.dark-mode .property-input:focus,
html.dark-mode .property-select:focus,
html.dark-mode select:focus,
html.dark-mode textarea:focus,
html.dark-mode input:focus {
  outline: none;
  border-color: var(--primary-light-dark, #60a5fa);
  box-shadow: 0 0 0 4px var(--primary-surface-dark, rgba(59, 130, 246, 0.3));
  background-color: var(--bg-secondary-dark, #374151);
}
html.dark-mode .form-control:disabled,
html.dark-mode .form-input:disabled,
html.dark-mode .form-select:disabled,
html.dark-mode .property-input:disabled,
html.dark-mode .property-select:disabled,
html.dark-mode select:disabled,
html.dark-mode textarea:disabled,
html.dark-mode input:disabled {
  background-color: var(--bg-disabled-dark, #1f2937);
  color: var(--text-disabled-dark, #6b7280);
  border-color: var(--border-disabled-dark, #374151);
  opacity: 0.6;
  cursor: not-allowed;
}
html.dark-mode .form-check {
  /* Display and gap remain unchanged */
}
html.dark-mode .form-check-label {
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .form-check input[type=checkbox],
html.dark-mode .form-check input[type=radio] {
  accent-color: var(--primary-dark, #3b82f6);
}
html.dark-mode .form-check-enhanced {
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .form-check-enhanced .check-indicator {
  border: 2px solid var(--border-primary-dark, #4b5563);
  background: var(--bg-secondary-dark, #374151);
}
html.dark-mode .form-check-enhanced input:checked + .check-indicator {
  background: var(--primary-dark, #3b82f6);
  border-color: var(--primary-dark, #3b82f6);
}
html.dark-mode .form-check-enhanced input:checked + .check-indicator::after {
  background: white;
}
html.dark-mode .form-check-enhanced:hover .check-indicator {
  border-color: var(--primary-light-dark, #60a5fa);
}
html.dark-mode .form-group.has-error .form-input,
html.dark-mode .form-group.has-error .form-select,
html.dark-mode .form-group.has-error .form-textarea {
  border-color: var(--error-dark, #ef4444);
  background-color: var(--error-surface-dark, rgba(239, 68, 68, 0.1));
}
html.dark-mode .form-group.has-error .form-input:focus,
html.dark-mode .form-group.has-error .form-select:focus,
html.dark-mode .form-group.has-error .form-textarea:focus {
  box-shadow: 0 0 0 3px var(--error-surface-dark, rgba(239, 68, 68, 0.3));
  border-color: var(--error-light-dark, #f87171);
}
html.dark-mode .form-group.has-success .form-input,
html.dark-mode .form-group.has-success .form-select,
html.dark-mode .form-group.has-success .form-textarea {
  border-color: var(--success-dark, #10b981);
  background-color: var(--success-surface-dark, rgba(16, 185, 129, 0.1));
}
html.dark-mode .form-group.has-success .form-input:focus,
html.dark-mode .form-group.has-success .form-select:focus,
html.dark-mode .form-group.has-success .form-textarea:focus {
  box-shadow: 0 0 0 3px var(--success-surface-dark, rgba(16, 185, 129, 0.3));
  border-color: var(--success-light-dark, #34d399);
}
html.dark-mode .form-group.has-warning .form-input,
html.dark-mode .form-group.has-warning .form-select,
html.dark-mode .form-group.has-warning .form-textarea {
  border-color: var(--warning-dark, #f59e0b);
  background-color: var(--warning-surface-dark, rgba(245, 158, 11, 0.1));
}
html.dark-mode .form-group.has-warning .form-input:focus,
html.dark-mode .form-group.has-warning .form-select:focus,
html.dark-mode .form-group.has-warning .form-textarea:focus {
  box-shadow: 0 0 0 3px var(--warning-surface-dark, rgba(245, 158, 11, 0.3));
  border-color: var(--warning-light-dark, #fbbf24);
}
html.dark-mode .form-help,
html.dark-mode .help-text {
  color: var(--text-muted-dark, #9ca3af);
}
html.dark-mode .form-error {
  color: var(--error-light-dark, #f87171);
}
html.dark-mode .form-success {
  color: var(--success-light-dark, #34d399);
}
html.dark-mode .form-warning {
  color: var(--warning-light-dark, #fbbf24);
}
html.dark-mode .input-group-prepend,
html.dark-mode .input-group-append {
  background: var(--bg-tertiary-dark, #4b5563);
  border: 1px solid var(--border-primary-dark, #6b7280);
  color: var(--text-muted-dark, #9ca3af);
}
html.dark-mode .input-group .form-input {
  border-color: var(--border-primary-dark, #4b5563);
}
html.dark-mode .input-group .form-input:focus {
  border-color: var(--primary-light-dark, #60a5fa);
  z-index: 2;
}
html.dark-mode .form-section {
  border-bottom: 1px solid var(--border-secondary-dark, #4b5563);
}
html.dark-mode .form-section-title {
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .form-actions {
  border-top: 1px solid var(--border-secondary-dark, #4b5563);
}
html.dark-mode input[type=range] {
  background: var(--border-primary-dark, #4b5563);
}
html.dark-mode input[type=range]::-webkit-slider-thumb {
  background: var(--primary-dark, #3b82f6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
html.dark-mode input[type=range]::-webkit-slider-thumb:hover {
  background: var(--primary-hover-dark, #2563eb);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
html.dark-mode input[type=range]::-moz-range-thumb {
  background: var(--primary-dark, #3b82f6);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
html.dark-mode input[type=file] {
  color: var(--text-primary-dark, #f9fafb);
  background-color: var(--bg-secondary-dark, #374151);
  border: 2px solid var(--border-primary-dark, #4b5563);
}
html.dark-mode input[type=file]::-webkit-file-upload-button {
  background: var(--primary-dark, #3b82f6);
  color: white;
  border: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  margin-right: var(--spacing-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}
html.dark-mode input[type=file]::-webkit-file-upload-button:hover {
  background: var(--primary-hover-dark, #2563eb);
}
html.dark-mode input[type=search]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--text-muted-dark, #9ca3af);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>') center/contain no-repeat;
  cursor: pointer;
}
html.dark-mode input[type=date],
html.dark-mode input[type=time],
html.dark-mode input[type=datetime-local],
html.dark-mode input[type=month],
html.dark-mode input[type=week] {
  color: var(--text-primary-dark, #f9fafb);
  background-color: var(--bg-secondary-dark, #374151);
  border: 2px solid var(--border-primary-dark, #4b5563);
  color-scheme: dark;
}
html.dark-mode input[type=date]::-webkit-calendar-picker-indicator,
html.dark-mode input[type=time]::-webkit-calendar-picker-indicator,
html.dark-mode input[type=datetime-local]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}
html.dark-mode input[type=color] {
  border: 2px solid var(--border-primary-dark, #4b5563);
  background-color: var(--bg-secondary-dark, #374151);
  padding: 2px;
}
html.dark-mode input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0;
  border: none;
  border-radius: var(--border-radius-sm);
}
html.dark-mode input[type=color]::-webkit-color-swatch {
  border: none;
  border-radius: var(--border-radius-sm);
}

/* ===== System Preference Support ===== */
@media (prefers-color-scheme: dark) {
  /* Apply same dark mode styles when system preference is dark */
  .form-control,
  .form-input,
  .property-input,
  textarea,
  input[type=text],
  input[type=email],
  input[type=password],
  input[type=number],
  input[type=search] {
    color: var(--text-primary-dark, #f9fafb);
    background-color: var(--bg-secondary-dark, #374151);
    border: 2px solid var(--border-primary-dark, #4b5563);
  }
  .form-select,
  .property-select,
  select {
    color: var(--text-primary-dark, #f9fafb);
    background-color: var(--bg-secondary-dark, #374151);
    border: 2px solid var(--border-primary-dark, #4b5563);
  }
  .form-label,
  label {
    color: var(--text-primary-dark, #f9fafb);
  }
  .form-control:focus,
  .form-input:focus,
  .form-select:focus,
  select:focus,
  textarea:focus,
  input:focus {
    border-color: var(--primary-light-dark, #60a5fa);
    box-shadow: 0 0 0 4px var(--primary-surface-dark, rgba(59, 130, 246, 0.3));
  }
  .form-help,
  .help-text {
    color: var(--text-muted-dark, #9ca3af);
  }
  .form-section {
    border-bottom: 1px solid var(--border-secondary-dark, #4b5563);
  }
  .form-actions {
    border-top: 1px solid var(--border-secondary-dark, #4b5563);
  }
}
/* ===== Accessibility & Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  html.dark-mode .form-control,
  html.dark-mode .form-input,
  html.dark-mode .form-select,
  html.dark-mode .property-input,
  html.dark-mode .property-select,
  html.dark-mode select,
  html.dark-mode textarea,
  html.dark-mode input,
  html.dark-mode .check-indicator {
    transition: none;
  }
  html.dark-mode input[type=range]::-webkit-slider-thumb {
    transition: none;
  }
  html.dark-mode input[type=range]::-webkit-slider-thumb:hover {
    transform: none;
  }
}
/* ===== High Contrast Mode Support ===== */
@media (prefers-contrast: high) {
  html.dark-mode .form-control,
  html.dark-mode .form-input,
  html.dark-mode .form-select,
  html.dark-mode .property-input,
  html.dark-mode .property-select,
  html.dark-mode select,
  html.dark-mode textarea,
  html.dark-mode input {
    border-width: 3px;
    font-weight: 500;
  }
  html.dark-mode .form-control:focus,
  html.dark-mode .form-input:focus,
  html.dark-mode .form-select:focus,
  html.dark-mode select:focus,
  html.dark-mode textarea:focus,
  html.dark-mode input:focus {
    outline: 3px solid var(--focus-ring-dark, #60a5fa);
    outline-offset: 2px;
    box-shadow: none;
  }
  html.dark-mode .form-label,
  html.dark-mode label {
    font-weight: 700;
  }
}
/* ===== Responsive Dark Mode Adjustments ===== */
@media (max-width: 767px) {
  html.dark-mode .form-control,
  html.dark-mode .form-input,
  html.dark-mode .form-select,
  html.dark-mode .property-input,
  html.dark-mode .property-select,
  html.dark-mode select,
  html.dark-mode textarea,
  html.dark-mode input {
    font-size: var(--font-size-md);
    padding: var(--spacing-md);
  }
  html.dark-mode .form-label,
  html.dark-mode label {
    font-size: var(--font-size-md);
  }
}
/* ===== DARK MODE MODALS COMPONENT ===== */
/* Enhanced dark mode styles for all modal components */
/* ===== Modal Dark Mode Styles ===== */
html.dark-mode {
  /* ===== Modal Backdrop - Dark Mode ===== */
  /* ===== Modal Dialog - Dark Mode ===== */
  /* ===== Modal Header - Dark Mode ===== */
  /* ===== Modal Body - Dark Mode ===== */
  /* ===== Modal Footer - Dark Mode ===== */
  /* ===== Modal Variants - Dark Mode ===== */
  /* ===== Modal Content Sections - Dark Mode ===== */
  /* ===== Modal Loading State - Dark Mode ===== */
  /* ===== Shape Panel - Dark Mode ===== */
  /* ===== Media Library - Dark Mode ===== */
}
html.dark-mode .modal-backdrop-enhanced {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
html.dark-mode .modal-dialog-enhanced {
  background: var(--bg-elevated-dark, #374151);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-primary-dark, #4b5563);
}
html.dark-mode .modal-header-enhanced {
  background: var(--bg-elevated-dark, #374151);
  border-bottom: 1px solid var(--border-primary-dark, #4b5563);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
html.dark-mode .modal-title-enhanced {
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .modal-close-enhanced {
  color: var(--text-secondary-dark, #d1d5db);
  background: transparent;
}
html.dark-mode .modal-close-enhanced:hover {
  background: var(--hover-dark, #4b5563);
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .modal-close-enhanced:focus {
  outline: 2px solid var(--primary-light-dark, #60a5fa);
  outline-offset: 2px;
}
html.dark-mode .modal-body-enhanced {
  background: var(--bg-elevated-dark, #374151);
  color: var(--text-primary-dark, #f9fafb);
  /* Custom scrollbar for dark mode */
}
html.dark-mode .modal-body-enhanced::-webkit-scrollbar {
  width: 8px;
}
html.dark-mode .modal-body-enhanced::-webkit-scrollbar-track {
  background: var(--bg-secondary-dark, #1f2937);
  border-radius: 4px;
}
html.dark-mode .modal-body-enhanced::-webkit-scrollbar-thumb {
  background: var(--border-secondary-dark, #6b7280);
  border-radius: 4px;
  transition: background 0.2s ease;
}
html.dark-mode .modal-body-enhanced::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted-dark, #9ca3af);
}
html.dark-mode .modal-footer-enhanced {
  background: var(--bg-elevated-dark, #374151);
  border-top: 1px solid var(--border-primary-dark, #4b5563);
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
}
html.dark-mode .modal-dialog-enhanced.modal-success .modal-header-enhanced {
  background: var(--success-dark, #10b981);
  color: white;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
html.dark-mode .modal-dialog-enhanced.modal-success .modal-title-enhanced {
  color: white;
}
html.dark-mode .modal-dialog-enhanced.modal-success .modal-close-enhanced {
  color: rgba(255, 255, 255, 0.9);
}
html.dark-mode .modal-dialog-enhanced.modal-success .modal-close-enhanced:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}
html.dark-mode .modal-dialog-enhanced.modal-error .modal-header-enhanced {
  background: var(--error-dark, #ef4444);
  color: white;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
html.dark-mode .modal-dialog-enhanced.modal-error .modal-title-enhanced {
  color: white;
}
html.dark-mode .modal-dialog-enhanced.modal-error .modal-close-enhanced {
  color: rgba(255, 255, 255, 0.9);
}
html.dark-mode .modal-dialog-enhanced.modal-error .modal-close-enhanced:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}
html.dark-mode .modal-dialog-enhanced.modal-warning .modal-header-enhanced {
  background: var(--warning-dark, #f59e0b);
  color: white;
  border-bottom-color: rgba(255, 255, 255, 0.2);
}
html.dark-mode .modal-dialog-enhanced.modal-warning .modal-title-enhanced {
  color: white;
}
html.dark-mode .modal-dialog-enhanced.modal-warning .modal-close-enhanced {
  color: rgba(255, 255, 255, 0.9);
}
html.dark-mode .modal-dialog-enhanced.modal-warning .modal-close-enhanced:hover {
  background: rgba(255, 255, 255, 0.15);
  color: white;
}
html.dark-mode .modal-section-title {
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .modal-section-content {
  color: var(--text-secondary-dark, #d1d5db);
}
html.dark-mode .modal-dialog-enhanced.modal-loading::after {
  background: rgba(31, 41, 55, 0.9);
}
html.dark-mode .modal-dialog-enhanced.modal-loading::before {
  border-color: var(--border-primary-dark, #4b5563);
  border-top-color: var(--primary-dark, #3b82f6);
}
html.dark-mode .shape-panel {
  background: var(--bg-elevated-dark, #374151);
  border: 1px solid var(--border-primary-dark, #4b5563);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
html.dark-mode .shape-panel-header {
  background: var(--bg-secondary-dark, #1f2937);
  border-bottom: 1px solid var(--border-primary-dark, #4b5563);
}
html.dark-mode .shape-panel-title {
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .shape-panel-close {
  color: var(--text-secondary-dark, #d1d5db);
}
html.dark-mode .shape-panel-close:hover {
  background: var(--hover-dark, #4b5563);
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .shape-panel-body {
  background: var(--bg-elevated-dark, #374151);
}
html.dark-mode .shape-option {
  background: var(--bg-elevated-dark, #374151);
  border: 1px solid var(--border-primary-dark, #4b5563);
  color: var(--text-primary-dark, #f9fafb);
}
html.dark-mode .shape-option:hover {
  background: var(--primary-dark, #3b82f6);
  color: white;
  border-color: var(--primary-dark, #3b82f6);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
html.dark-mode .shape-option svg {
  fill: currentColor;
}
html.dark-mode .media-item {
  background: var(--bg-elevated-dark, #374151);
  border: 1px solid var(--border-primary-dark, #4b5563);
}
html.dark-mode .media-item:hover {
  border-color: var(--primary-dark, #3b82f6);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
html.dark-mode .media-item .media-info {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
}
html.dark-mode .no-media {
  color: var(--text-muted-dark, #9ca3af);
}

/* ===== System Preference Support ===== */
@media (prefers-color-scheme: dark) {
  .modal-backdrop-enhanced {
    background: rgba(0, 0, 0, 0.8);
  }
  .modal-dialog-enhanced {
    background: var(--bg-elevated-dark, #374151);
    border: 1px solid var(--border-primary-dark, #4b5563);
  }
  .modal-header-enhanced {
    background: var(--bg-elevated-dark, #374151);
    border-bottom-color: var(--border-primary-dark, #4b5563);
  }
  .modal-title-enhanced {
    color: var(--text-primary-dark, #f9fafb);
  }
  .shape-panel {
    background: var(--bg-elevated-dark, #374151);
    border-color: var(--border-primary-dark, #4b5563);
  }
}
/* ===== Accessibility & Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  html.dark-mode .modal-backdrop-enhanced,
  html.dark-mode .modal-enhanced,
  html.dark-mode .modal-dialog-enhanced {
    transition: opacity 0.15s ease;
  }
  html.dark-mode .modal-dialog-enhanced {
    transform: none !important;
  }
  html.dark-mode .modal-enhanced.show .modal-dialog-enhanced {
    transform: none !important;
  }
  html.dark-mode .shape-option {
    transition: none;
  }
  html.dark-mode .shape-option:hover {
    transform: none;
  }
  html.dark-mode .media-item {
    transition: none;
  }
  html.dark-mode .media-item:hover {
    transform: none;
  }
  html.dark-mode .media-item img {
    transition: none;
  }
  html.dark-mode .media-item img:hover {
    transform: none;
  }
}
/* ===== High Contrast Mode Support ===== */
@media (prefers-contrast: high) {
  html.dark-mode .modal-dialog-enhanced {
    border: 2px solid var(--text-primary-dark, #f9fafb);
  }
  html.dark-mode .modal-header-enhanced,
  html.dark-mode .modal-footer-enhanced {
    border-color: var(--text-primary-dark, #f9fafb);
  }
  html.dark-mode .shape-option {
    border: 2px solid var(--text-primary-dark, #f9fafb);
  }
  html.dark-mode .shape-option:hover {
    border-color: white;
  }
}
/* ===== Responsive Dark Mode Adjustments ===== */
@media (max-width: 768px) {
  html.dark-mode .shape-panel {
    background: var(--bg-elevated-dark, #374151);
    border-color: var(--border-primary-dark, #4b5563);
  }
  html.dark-mode .modal-dialog-enhanced {
    background: var(--bg-elevated-dark, #374151);
  }
}
@media (max-width: 480px) {
  html.dark-mode .modal-enhanced {
    background: rgba(0, 0, 0, 0.9);
  }
  html.dark-mode .shape-panel {
    background: var(--bg-elevated-dark, #374151);
  }
}

/*# sourceMappingURL=main.css.map */