/* =====================================================
   GIXO CONTENT OS - AURORA DARK THEME
   Lighter dark backgrounds with vibrant accent colors
   ===================================================== */

/* ==========================================================================
   1. CSS Variables & Theme System
   ========================================================================== */
:root {
  /* GIXO Brand Colors - Electric Blue Focus */
  --gixo-primary: #00d9ff;      /* Electric cyan */
  --gixo-primary-dark: #00a8cc; /* Darker cyan */
  --gixo-primary-light: #66e9ff; /* Light cyan */
  --gixo-secondary: #ff6b6b;    /* Coral red */
  --gixo-accent: #ffd93d;       /* Warm yellow */
  
  /* Semantic Colors - More vibrant */
  --gixo-success: #26de81;      /* Bright emerald */
  --gixo-info: #4bcffa;         /* Sky blue */
  --gixo-warning: #fdcb6e;      /* Soft amber */
  --gixo-error: #ee5a6f;        /* Soft red */
  
  /* Dark Theme Surface Colors - Midnight Blue palette */
  --gixo-background: #1a1f3a;    /* Midnight blue background */
  --gixo-surface: #242b47;       /* Blue-grey surface */
  --gixo-surface-light: #2d3654; /* Lighter surface */
  --gixo-surface-hover: #3d4766; /* Hover state */
  
  /* Text Colors with proper contrast ratios */
  --gixo-text-primary: #f8fafc;   /* slate-50 */
  --gixo-text-secondary: #e2e8f0; /* slate-200 */
  --gixo-text-muted: #cbd5e1;     /* slate-300 */
  --gixo-text-disabled: #94a3b8;  /* slate-400 */
  
  /* Borders & Dividers - Better visibility */
  --gixo-border: rgba(148, 163, 184, 0.25);     /* slate-400 based */
  --gixo-border-hover: rgba(0, 217, 255, 0.5);  /* primary based */
  --gixo-divider: #3d4766;                      /* Visible divider */
  
  /* Glow Effects - Key part of "chrome" aesthetic */
  --gixo-glow-sm: 0 0 10px rgba(0, 217, 255, 0.3);
  --gixo-glow-md: 0 0 20px rgba(0, 217, 255, 0.4);
  --gixo-glow-lg: 0 0 30px rgba(0, 217, 255, 0.5);
  
  /* Shadows with depth */
  --gixo-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --gixo-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --gixo-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
  --gixo-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);
  --gixo-shadow-color: 0 4px 16px rgba(0, 217, 255, 0.2);
  
  /* Layout */
  --gixo-content-width: 1280px;
  --gixo-sidebar-width: 280px;
  --gixo-header-height: 64px;
  
  /* Typography */
  --gixo-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --gixo-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  
  /* Animation */
  --gixo-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --gixo-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Border Radius */
  --gixo-radius: 8px;
  --gixo-radius-lg: 16px;
  
  /* MudBlazor Palette Override */
  --mud-palette-primary: var(--gixo-primary);
  --mud-palette-primary-darken: var(--gixo-primary-dark);
  --mud-palette-primary-lighten: var(--gixo-primary-light);
  --mud-palette-secondary: var(--gixo-secondary);
  --mud-palette-tertiary: var(--gixo-accent);
  --mud-palette-success: var(--gixo-success);
  --mud-palette-info: var(--gixo-info);
  --mud-palette-warning: var(--gixo-warning);
  --mud-palette-error: var(--gixo-error);
  --mud-palette-dark: var(--gixo-surface-light);
  --mud-palette-background: var(--gixo-background);
  --mud-palette-background-grey: var(--gixo-surface);
  --mud-palette-surface: var(--gixo-surface);
  --mud-palette-drawer-background: #202541; /* Slightly different drawer bg */
  --mud-palette-appbar-background: var(--gixo-background);
  --mud-palette-text-primary: var(--gixo-text-primary);
  --mud-palette-text-secondary: var(--gixo-text-secondary);
  --mud-palette-text-disabled: var(--gixo-text-disabled);
  --mud-palette-action-default: var(--gixo-primary);
  --mud-palette-action-disabled: var(--gixo-text-disabled);
  --mud-palette-action-disabled-background: rgba(255, 255, 255, 0.08);
  --mud-palette-lines-default: var(--gixo-border);
  --mud-palette-lines-inputs: var(--gixo-border);
  --mud-palette-table-lines: var(--gixo-divider);
  --mud-palette-divider: var(--gixo-divider);
  --mud-palette-overlay-dark: rgba(26, 31, 58, 0.8);
  
  /* MudBlazor Elevation Override */
  --mud-elevation-0: none;
  --mud-elevation-1: var(--gixo-shadow-sm);
  --mud-elevation-2: var(--gixo-shadow-md);
  --mud-elevation-3: var(--gixo-shadow-lg);
  --mud-elevation-4: var(--gixo-shadow-xl);
}

/* High Contrast Accessibility Mode */
[data-contrast="high"] {
  /* Pure black/white with cyan accents */
  --gixo-shadow-sm: 0 0 0 1px #ffffff;
  --gixo-shadow-md: 0 0 0 2px #ffffff;
  --gixo-shadow-lg: 0 0 0 2px #ffffff;
  --gixo-shadow-xl: 0 0 0 3px #ffffff;
  
  /* Disable all elevation shadows in favor of borders */
  --mud-elevation-1: 0 0 0 1px #ffffff !important;
  --mud-elevation-2: 0 0 0 1px #ffffff !important;
  --mud-elevation-3: 0 0 0 2px #ffffff !important;
  --mud-elevation-4: 0 0 0 2px #ffffff !important;
}

/* ==========================================================================
   2. Global Reset & Base Theme
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--gixo-background);
  color: var(--gixo-text-primary);
  font-family: var(--gixo-font-sans);
  line-height: 1.6;
  overflow-x: hidden;
}

/* Force theme on MudBlazor root */
.mud-layout,
.mud-main-content {
  background-color: var(--gixo-background) !important;
  color: var(--gixo-text-primary) !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1.2;
  font-weight: 700;
  font-family: var(--gixo-font-sans);
  color: var(--gixo-text-primary);
  letter-spacing: -0.02em;
}

/* Links - Electric blue with glow on hover */
a {
  color: var(--gixo-primary);
  text-decoration: none;
  transition: var(--gixo-transition-fast);
}

a:hover {
  color: var(--gixo-primary-light);
  text-shadow: var(--gixo-glow-sm);
}

/* Focus Styles - Chrome accent */
*:focus-visible {
  outline: 2px solid var(--gixo-primary);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: var(--gixo-glow-sm);
}

/* Selection colors */
::selection {
  background-color: var(--gixo-primary);
  color: var(--gixo-background);
}

/* ==========================================================================
   3. MudBlazor Component Overrides - Aurora Dark Style
   ========================================================================== */

/* App Bar - Subtle glass with better visibility */
.mud-appbar {
  background: rgba(26, 31, 58, 0.95) !important;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-bottom: 1px solid var(--gixo-border);
  box-shadow: 0 1px 0 rgba(0, 217, 255, 0.1);
}

/* High contrast mode removes glass effects */
[data-contrast="high"] .mud-appbar {
  background: var(--gixo-background) !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 2px solid #ffffff;
}

/* Drawer - Better surface separation */
.mud-drawer {
  background-color: #202541 !important;
  border-right: 1px solid var(--gixo-border);
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
}

.mud-drawer-header {
  background-color: var(--gixo-surface) !important;
  border-bottom: 1px solid var(--gixo-border);
}

/* Navigation - Subtle glow on hover */
.mud-nav-item {
  color: var(--gixo-text-secondary) !important;
  border-radius: var(--gixo-radius);
  margin: 4px 8px;
  transition: var(--gixo-transition);
  position: relative;
  border: 1px solid transparent;
}

.mud-nav-item:hover {
  background-color: rgba(0, 217, 255, 0.08) !important;
  color: var(--gixo-text-primary) !important;
  border-color: rgba(0, 217, 255, 0.2);
  transform: translateX(2px);
}

.mud-nav-item.active,
.mud-nav-link.active {
  background: rgba(0, 217, 255, 0.15) !important;
  color: var(--gixo-primary-light) !important;
  border: 1px solid var(--gixo-primary);
  box-shadow: inset 0 0 12px rgba(0, 217, 255, 0.1);
  font-weight: 600;
}

/* Active indicator - glowing line */
.mud-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 70%;
  background: var(--gixo-primary);
  border-radius: 0 2px 2px 0;
  box-shadow: var(--gixo-glow-md);
}

/* Buttons - Strategic chrome accents */
.mud-button-root {
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: var(--gixo-transition);
}

.mud-button-filled-primary {
  background: var(--gixo-primary) !important;
  color: var(--gixo-background) !important;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 217, 255, 0.3);
}

.mud-button-filled-primary:hover {
  background: var(--gixo-primary-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 217, 255, 0.4), var(--gixo-glow-md);
}

.mud-button-outlined {
  border: 1px solid var(--gixo-primary) !important;
  color: var(--gixo-primary) !important;
  background: transparent !important;
}

.mud-button-outlined:hover {
  background: rgba(0, 217, 255, 0.1) !important;
  box-shadow: inset 0 0 20px rgba(0, 217, 255, 0.1), var(--gixo-glow-sm);
}

.mud-button-text {
  color: var(--gixo-primary) !important;
}

.mud-button-text:hover {
  background-color: rgba(0, 217, 255, 0.08) !important;
  text-shadow: var(--gixo-glow-sm);
}

/* Icon Buttons */
.mud-icon-button {
  color: var(--gixo-text-secondary) !important;
  transition: var(--gixo-transition);
}

.mud-icon-button:hover {
  color: var(--gixo-primary) !important;
  background-color: rgba(0, 217, 255, 0.08) !important;
}

/* Cards & Papers - Better surface definition */
.mud-paper {
  background-color: var(--gixo-surface) !important;
  border: 1px solid var(--gixo-border) !important;
  color: var(--gixo-text-primary) !important;
  transition: var(--gixo-transition);
}

.mud-paper:hover {
  border-color: rgba(0, 217, 255, 0.3) !important;
  box-shadow: 0 0 0 1px rgba(0, 217, 255, 0.1) !important;
}

/* Elevation classes with subtle color */
.mud-elevation-0 { box-shadow: none !important; }
.mud-elevation-1 { box-shadow: var(--gixo-shadow-sm) !important; }
.mud-elevation-2 { box-shadow: var(--gixo-shadow-md) !important; }
.mud-elevation-3 { box-shadow: var(--gixo-shadow-lg) !important; }
.mud-elevation-4 { box-shadow: var(--gixo-shadow-xl) !important; }

/* Forms & Inputs - Better visibility */
.mud-input-root {
  color: var(--gixo-text-primary) !important;
}

.mud-input-root-outlined {
  background-color: rgba(255, 255, 255, 0.04) !important;
  border-radius: var(--gixo-radius);
}

.mud-input-outlined .mud-input-root:hover .mud-input-outlined-border {
  border-color: var(--gixo-border-hover) !important;
}

.mud-input-outlined.mud-focused .mud-input-outlined-border {
  border-color: var(--gixo-primary) !important;
  border-width: 2px;
  box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
}

.mud-input-underline:before {
  border-bottom-color: var(--gixo-border) !important;
}

.mud-input-underline:hover:before {
  border-bottom-color: var(--gixo-border-hover) !important;
}

.mud-input-underline:after {
  border-bottom-color: var(--gixo-primary) !important;
  box-shadow: 0 1px 4px rgba(0, 217, 255, 0.3);
}

.mud-input-label {
  color: var(--gixo-text-muted) !important;
}

.mud-input-label.mud-focused {
  color: var(--gixo-primary) !important;
}

/* Select & Autocomplete - Fixed dropdown visibility */
.mud-select-input {
  color: var(--gixo-text-primary) !important;
}

.mud-popover-paper,
.mud-menu {
  background-color: var(--gixo-surface) !important;
  border: 1px solid var(--gixo-border) !important;
  box-shadow: var(--gixo-shadow-lg), 0 0 20px rgba(0, 217, 255, 0.05) !important;
}

/* Ensure dropdown menus are visible */
.mud-popover {
  z-index: 1400 !important;
}

.mud-list {
  background-color: transparent !important;
}

.mud-list-item {
  color: var(--gixo-text-primary) !important;
}

.mud-list-item:hover {
  background-color: rgba(0, 217, 255, 0.1) !important;
}

.mud-list-item-primary-text {
  color: var(--gixo-text-primary) !important;
}

.mud-list-item-secondary-text {
  color: var(--gixo-text-secondary) !important;
}

/* Chips & Tags - Subtle glow */
.mud-chip {
  background-color: rgba(0, 217, 255, 0.15) !important;
  color: var(--gixo-primary-light) !important;
  border: 1px solid rgba(0, 217, 255, 0.3);
  font-weight: 500;
}

.mud-chip:hover {
  background-color: rgba(0, 217, 255, 0.25) !important;
  border-color: var(--gixo-primary);
  box-shadow: var(--gixo-glow-sm);
}

/* Tables */
.mud-table {
  background-color: var(--gixo-surface) !important;
  color: var(--gixo-text-primary) !important;
}

.mud-table-head {
  background-color: var(--gixo-surface-light) !important;
}

.mud-table-cell {
  color: var(--gixo-text-primary) !important;
  border-bottom: 1px solid var(--gixo-divider) !important;
}

.mud-table-row:hover .mud-table-cell {
  background-color: rgba(0, 217, 255, 0.05) !important;
}

/* Dialogs & Overlays */
.mud-dialog {
  background-color: var(--gixo-surface) !important;
  border: 1px solid var(--gixo-border) !important;
  color: var(--gixo-text-primary) !important;
  box-shadow: var(--gixo-shadow-xl), 0 0 40px rgba(0, 217, 255, 0.1) !important;
}

.mud-dialog-title {
  background-color: var(--gixo-surface-light) !important;
  color: var(--gixo-text-primary) !important;
  border-bottom: 1px solid var(--gixo-border);
}

.mud-overlay {
  background-color: rgba(26, 31, 58, 0.85) !important;
  backdrop-filter: blur(4px);
}

/* Tooltips */
.mud-tooltip {
  background-color: var(--gixo-surface-hover) !important;
  color: var(--gixo-text-primary) !important;
  border: 1px solid var(--gixo-border) !important;
  box-shadow: var(--gixo-shadow-lg) !important;
}

/* Progress Indicators - Glowing */
.mud-progress-circular-svg {
  color: var(--gixo-primary) !important;
  filter: drop-shadow(0 0 8px rgba(0, 217, 255, 0.5));
}

.mud-progress-linear {
  background-color: rgba(0, 217, 255, 0.1) !important;
}

.mud-progress-linear-bars {
  background: var(--gixo-primary) !important;
  box-shadow: 0 0 12px rgba(0, 217, 255, 0.6);
}

/* Skeleton Loading */
.mud-skeleton {
  background: linear-gradient(90deg, 
    var(--gixo-surface) 25%, 
    rgba(0, 217, 255, 0.08) 50%, 
    var(--gixo-surface) 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

/* Snackbar - Bright alerts */
.mud-snackbar {
  font-weight: 500;
}

.mud-alert-filled-success {
  background-color: var(--gixo-success) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(38, 222, 129, 0.3);
}

.mud-alert-filled-error {
  background-color: var(--gixo-error) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(238, 90, 111, 0.3);
}

.mud-alert-filled-warning {
  background-color: var(--gixo-warning) !important;
  color: var(--gixo-background) !important;
  box-shadow: 0 4px 12px rgba(253, 203, 110, 0.3);
}

.mud-alert-filled-info {
  background-color: var(--gixo-info) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(75, 207, 250, 0.3);
}

/* Tabs */
.mud-tabs-panels {
  background-color: var(--gixo-surface) !important;
}

.mud-tab {
  color: var(--gixo-text-secondary) !important;
}

.mud-tab.mud-tab-active {
  color: var(--gixo-primary) !important;
  text-shadow: var(--gixo-glow-sm);
}

.mud-tabs-slider {
  background-color: var(--gixo-primary) !important;
  box-shadow: var(--gixo-glow-md);
}

/* ==========================================================================
   4. GIXO Custom Components
   ========================================================================== */

/* Content Cards with glow accent */
.content-card {
  background: var(--gixo-surface);
  border: 1px solid var(--gixo-border);
  border-radius: var(--gixo-radius-lg);
  padding: 1.5rem;
  transition: var(--gixo-transition);
  position: relative;
  overflow: hidden;
}

.content-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gixo-primary), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.content-card:hover::before {
  transform: translateX(100%);
}

.content-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--gixo-shadow-lg), 0 0 20px rgba(0, 217, 255, 0.1);
  border-color: rgba(0, 217, 255, 0.3);
}

/* Dashboard Metric Tiles */
.metric-tile {
  background: linear-gradient(135deg, 
    var(--gixo-surface) 0%, 
    rgba(0, 217, 255, 0.08) 100%);
  border: 1px solid rgba(0, 217, 255, 0.3);
  box-shadow: var(--gixo-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  border-radius: var(--gixo-radius);
  padding: 1rem;
  color: var(--gixo-text-primary);
  transition: var(--gixo-transition);
}

.metric-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--gixo-shadow-lg), 0 0 20px rgba(0, 217, 255, 0.2);
  border-color: var(--gixo-primary);
}

.metric-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--gixo-primary);
  margin: 0.5rem 0;
  text-shadow: 0 0 20px rgba(0, 217, 255, 0.5);
}

/* Editor Layout */
.editor-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 2rem;
  align-items: start;
}

.editor-main {
  min-width: 0;
}

.editor-sidebar {
  position: sticky;
  top: 2rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}

/* Content Body */
.content-body {
  padding: 2.5rem;
  border: 1px solid var(--gixo-border);
  border-radius: var(--gixo-radius);
  background-color: var(--gixo-surface);
  color: var(--gixo-text-primary);
  line-height: 1.8;
  font-size: 1.0625rem;
}

.content-body h1,
.content-body h2 {
  padding-bottom: 0.5em;
  border-bottom: 1px solid var(--gixo-divider);
}

.content-body code {
  background: rgba(0, 217, 255, 0.15);
  border-radius: 3px;
  font-family: var(--gixo-font-mono);
  font-size: 0.9em;
  padding: 0.3em 0.5em;
  color: var(--gixo-primary-light);
  border: 1px solid rgba(0, 217, 255, 0.2);
}

.content-body pre {
  background: var(--gixo-surface-light);
  border-radius: var(--gixo-radius);
  font-family: var(--gixo-font-mono);
  overflow: auto;
  padding: 1.5rem;
  border: 1px solid var(--gixo-border);
}

.content-body blockquote {
  border-left: 4px solid var(--gixo-primary);
  color: var(--gixo-text-secondary);
  padding: 0.75em 1.25em;
  background: rgba(0, 217, 255, 0.08);
  border-radius: var(--gixo-radius);
}

/* ==========================================================================
   5. Animations & Transitions
   ========================================================================== */

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

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

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

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 217, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 217, 255, 0.6);
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-in;
}

.slide-in {
  animation: slideIn 0.5s ease-out;
}

/* ==========================================================================
   6. Utility Classes
   ========================================================================== */

/* Text Gradient - Electric theme */
.text-gradient {
  background: linear-gradient(135deg, var(--gixo-primary), var(--gixo-info));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Glass Effect - Adjusted for better visibility */
.glass-effect {
  background: rgba(36, 43, 71, 0.8);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gixo-border);
}

/* Glow Effect */
.glow-effect {
  box-shadow: var(--gixo-glow-md);
}

/* Chrome Accent - For special elements */
.chrome-accent {
  background: linear-gradient(135deg, 
    var(--gixo-primary) 0%, 
    var(--gixo-info) 50%, 
    var(--gixo-secondary) 100%);
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  position: relative;
}

.chrome-accent::before {
  content: '';
  position: absolute;
  inset: -1px;
  background: inherit;
  border-radius: inherit;
  filter: blur(10px);
  opacity: 0.5;
  z-index: -1;
}

/* Quick Spacing */
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 2rem; }
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-3 { padding: 2rem; }

/* ==========================================================================
   7. Scrollbar Styling - Aurora Theme
   ========================================================================== */

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--gixo-background);
}

::-webkit-scrollbar-thumb {
  background: var(--gixo-surface-hover);
  border-radius: 5px;
  border: 1px solid var(--gixo-border);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gixo-primary);
  box-shadow: 0 0 5px rgba(0, 217, 255, 0.5);
}

/* Firefox scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gixo-surface-hover) var(--gixo-background);
}

/* ==========================================================================
   8. High Contrast Mode Overrides
   ========================================================================== */

[data-contrast="high"] {
  /* Remove all transparency and blur effects */
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Force pure black/white for maximum contrast */
  .mud-main-content {
    background-color: #000000 !important;
  }
  
  /* Stronger borders for all interactive elements */
  .mud-paper,
  .mud-card,
  .content-card,
  .mud-button-root,
  .mud-input-root {
    border-width: 2px !important;
    border-color: #ffffff !important;
  }
  
  /* Remove gradients - use solid colors */
  .mud-button-filled-primary,
  .text-gradient,
  .chrome-accent {
    background: #00ffff !important;
    -webkit-text-fill-color: #000000 !important;
    color: #000000 !important;
  }
  
  .chrome-accent::before {
    display: none !important;
  }
  
  /* High contrast navigation */
  .mud-nav-item.active,
  .mud-nav-link.active {
    background: #00ffff !important;
    color: #000000 !important;
    border: 2px solid #ffffff !important;
    box-shadow: none !important;
  }
  
  /* Ensure all text is maximum contrast */
  .mud-typography-body1,
  .mud-typography-body2,
  .mud-list-item-secondary-text,
  .mud-input-label {
    color: #ffffff !important;
  }
  
  /* High contrast focus states */
  *:focus-visible {
    outline: 3px solid #00ffff !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
  }
  
  /* Selection in high contrast */
  ::selection {
    background-color: #00ffff !important;
    color: #000000 !important;
  }
  
  /* Remove hover animations and glows */
  * {
    transform: none !important;
    text-shadow: none !important;
    filter: none !important;
  }
  
  /* Metric values in high contrast */
  .metric-value {
    color: #00ffff !important;
    text-shadow: none !important;
  }
  
  /* Code blocks in high contrast */
  .content-body code {
    background: #000000 !important;
    color: #00ffff !important;
    border: 1px solid #00ffff !important;
  }
  
  /* Fix dropdown menus in high contrast */
  .mud-popover-paper,
  .mud-menu {
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
  }
  
  .mud-list-item:hover {
    background-color: #00ffff !important;
    color: #000000 !important;
  }
}

/* ==========================================================================
   9. Responsive Design
   ========================================================================== */

@media (max-width: 1024px) {
  :root {
    --gixo-content-width: 960px;
  }
}

@media (max-width: 960px) {
  html { 
    font-size: 15px; 
  }
  
  .editor-layout {
    grid-template-columns: 1fr;
  }
  
  .editor-sidebar {
    position: relative;
    top: 0;
    max-height: none;
  }
}

@media (max-width: 600px) {
  html { 
    font-size: 14px; 
  }
  
  .mud-container { 
    padding: 0 1rem; 
  }
  
  .content-body {
    padding: 1.5rem;
  }
}

/* ==========================================================================
   10. Print Styles
   ========================================================================== */

@media print {
  /* Force white background for printing */
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  .no-print,
  .mud-appbar,
  .mud-drawer,
  .mud-fab,
  .editor-sidebar {
    display: none !important;
  }
  
  .content-body {
    border: none;
    padding: 0;
  }
}

/* ==========================================================================
   11. Content Highlight Fixes
   ========================================================================== */

/* Fix for highlighted/selected text in content areas */
.gixo-content-body ::selection,
.content-body ::selection,
.mud-paper ::selection,
.gixo-content-card ::selection {
  background-color: var(--gixo-primary) !important;
  color: var(--gixo-background) !important;
}

/* Mozilla Firefox specific */
.gixo-content-body ::-moz-selection,
.content-body ::-moz-selection,
.mud-paper ::-moz-selection,
.gixo-content-card ::-moz-selection {
  background-color: var(--gixo-primary) !important;
  color: var(--gixo-background) !important;
}

/* Fix for inline highlighted elements */
.gixo-content-body mark,
.content-body mark,
.gixo-content-body .highlight,
.content-body .highlight {
  background-color: rgba(0, 217, 255, 0.2) !important;
  color: var(--gixo-text-primary) !important;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-weight: 500;
}

/* If the content uses specific highlight classes */
.gixo-content-body .text-highlight,
.content-body .text-highlight,
.gixo-content-body .highlighted,
.content-body .highlighted {
  background-color: rgba(0, 217, 255, 0.15) !important;
  color: var(--gixo-primary-light) !important;
  padding: 0.1em 0.3em;
  border-radius: 3px;
  border: 1px solid rgba(0, 217, 255, 0.3);
}

/* Alternative highlight colors for different emphasis levels */
.gixo-content-body .highlight-primary,
.content-body .highlight-primary {
  background-color: rgba(0, 217, 255, 0.2) !important;
  color: var(--gixo-text-primary) !important;
}

.gixo-content-body .highlight-success,
.content-body .highlight-success {
  background-color: rgba(38, 222, 129, 0.2) !important;
  color: var(--gixo-text-primary) !important;
}

.gixo-content-body .highlight-warning,
.content-body .highlight-warning {
  background-color: rgba(253, 203, 110, 0.2) !important;
  color: var(--gixo-text-primary) !important;
}

/* For inline code that might be highlighted */
.gixo-content-body code.highlight,
.content-body code.highlight {
  background: rgba(0, 217, 255, 0.25) !important;
  color: var(--gixo-text-primary) !important;
  border-color: var(--gixo-primary) !important;
}

/* Ensure list items with highlights are readable */
.gixo-content-body li mark,
.content-body li mark,
.gixo-content-body li .highlight,
.content-body li .highlight {
  display: inline-block;
  margin: 0.1em 0;
}

/* High contrast mode overrides for highlights */
[data-contrast="high"] .gixo-content-body mark,
[data-contrast="high"] .content-body mark,
[data-contrast="high"] .gixo-content-body .highlight,
[data-contrast="high"] .content-body .highlight {
  background-color: #00ffff !important;
  color: #000000 !important;
  font-weight: bold;
}

/* Override any inline styles with poor contrast - all light colors */
/* Light greens */
.gixo-content-body span[style*="color: rgb(152, 195, 121)"],
.content-body span[style*="color: rgb(152, 195, 121)"],
.gixo-content-body span[style*="color: #98c379"],
.content-body span[style*="color: #98c379"],
.gixo-content-body span[style*="color: rgb(173, 255, 47)"],
.content-body span[style*="color: rgb(173, 255, 47)"],
.gixo-content-body span[style*="color: #adff2f"],
.content-body span[style*="color: #adff2f"] {
  color: var(--gixo-success) !important;  /* Bright emerald */
  font-weight: 500;
}

/* Light blues */
.gixo-content-body span[style*="color: rgb(135, 206, 235)"],
.content-body span[style*="color: rgb(135, 206, 235)"],
.gixo-content-body span[style*="color: #87ceeb"],
.content-body span[style*="color: #87ceeb"],
.gixo-content-body span[style*="color: rgb(173, 216, 230)"],
.content-body span[style*="color: rgb(173, 216, 230)"],
.gixo-content-body span[style*="color: #add8e6"],
.content-body span[style*="color: #add8e6"] {
  color: var(--gixo-info) !important;  /* Sky blue */
  font-weight: 500;
}

/* Light yellows/oranges */
.gixo-content-body span[style*="color: rgb(255, 255, 224)"],
.content-body span[style*="color: rgb(255, 255, 224)"],
.gixo-content-body span[style*="color: #ffffe0"],
.content-body span[style*="color: #ffffe0"],
.gixo-content-body span[style*="color: rgb(255, 218, 185)"],
.content-body span[style*="color: rgb(255, 218, 185)"],
.gixo-content-body span[style*="color: #ffdab9"],
.content-body span[style*="color: #ffdab9"] {
  color: var(--gixo-warning) !important;  /* Soft amber */
  font-weight: 500;
}

/* Light pinks/reds */
.gixo-content-body span[style*="color: rgb(255, 182, 193)"],
.content-body span[style*="color: rgb(255, 182, 193)"],
.gixo-content-body span[style*="color: #ffb6c1"],
.content-body span[style*="color: #ffb6c1"],
.gixo-content-body span[style*="color: rgb(255, 192, 203)"],
.content-body span[style*="color: rgb(255, 192, 203)"],
.gixo-content-body span[style*="color: #ffc0cb"],
.content-body span[style*="color: #ffc0cb"] {
  color: var(--gixo-secondary) !important;  /* Coral red */
  font-weight: 500;
}

/* Light purples */
.gixo-content-body span[style*="color: rgb(221, 160, 221)"],
.content-body span[style*="color: rgb(221, 160, 221)"],
.gixo-content-body span[style*="color: #dda0dd"],
.content-body span[style*="color: #dda0dd"],
.gixo-content-body span[style*="color: rgb(216, 191, 216)"],
.content-body span[style*="color: rgb(216, 191, 216)"],
.gixo-content-body span[style*="color: #d8bfd8"],
.content-body span[style*="color: #d8bfd8"] {
  color: var(--gixo-accent) !important;  /* Warm yellow */
  font-weight: 500;
}

/* Catch-all for any light gray text */
.gixo-content-body span[style*="color: rgb(211, 211, 211)"],
.content-body span[style*="color: rgb(211, 211, 211)"],
.gixo-content-body span[style*="color: #d3d3d3"],
.content-body span[style*="color: #d3d3d3"],
.gixo-content-body span[style*="color: rgb(192, 192, 192)"],
.content-body span[style*="color: rgb(192, 192, 192)"],
.gixo-content-body span[style*="color: #c0c0c0"],
.content-body span[style*="color: #c0c0c0"] {
  color: var(--gixo-text-primary) !important;  /* White text */
  font-weight: 500;
}

/* Override light background colors that cause poor contrast */
.gixo-content-body [style*="background-color: #e8f5e9"],
.content-body [style*="background-color: #e8f5e9"],
.gixo-content-body [style*="background-color: rgb(232, 245, 233)"],
.content-body [style*="background-color: rgb(232, 245, 233)"],
.gixo-content-body [style*="background-color: #f0f8f0"],
.content-body [style*="background-color: #f0f8f0"] {
  background-color: rgba(38, 222, 129, 0.15) !important;
  color: var(--gixo-text-primary) !important;
}

/* Ensure all text in content body has minimum contrast */
.gixo-content-body,
.content-body {
  color: var(--gixo-text-primary) !important;
}

/* Inherit text color for common inline elements */
.gixo-content-body p,
.content-body p,
.gixo-content-body li,
.content-body li,
.gixo-content-body span,
.content-body span {
  color: inherit !important;
}  /* ← FIX: this closing brace was missing */

/* ==========================================================================
   12. Slide Preview Component Fixes
   ========================================================================== */

/* Ensure the Visual Packs area is never dimmed by stray opacity/filters */
.visual-pack-section {
  position: relative;
  z-index: 1;
  opacity: 1 !important;
  filter: none !important;
}
.visual-pack-section * {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Slide Container - Force proper text colors */
.slide-container {
  background: #ffffff !important;
  color: #1a1a1a !important;
}

.slide-container * {
  color: inherit !important;
}

/* Dark theme slide container */
.mud-theme-dark .slide-container {
  background: var(--gixo-surface) !important;
  color: var(--gixo-text-primary) !important;
}

/* Content slide title - ensure visibility */
.content-slide-title {
  color: var(--gixo-primary) !important;
}

/* Bullet items - ensure proper contrast */
.slide-container .bullet-item,
.slide-container .bullet-item span {
  color: #1a1a1a !important;
}

.mud-theme-dark .slide-container .bullet-item,
.mud-theme-dark .slide-container .bullet-item span {
  color: var(--gixo-text-primary) !important;
}

/* Table text visibility */
.slide-container .mud-table { background-color: transparent !important; }
.slide-container .mud-table-cell {
  color: #1a1a1a !important;
  border-bottom-color: rgba(0, 0, 0, 0.12) !important;
}
.mud-theme-dark .slide-container .mud-table-cell {
  color: var(--gixo-text-primary) !important;
  border-bottom-color: var(--gixo-divider) !important;
}

/* Chart container in slides */
.slide-container .chart-container { background: #f5f7fa !important; }
.mud-theme-dark .slide-container .chart-container { background: rgba(255, 255, 255, 0.05) !important; }

/* Override any inherited theme colors for slide content */
.slide-preview-wrapper .slide-container h1,
.slide-preview-wrapper .slide-container h2,
.slide-preview-wrapper .slide-container h3,
.slide-preview-wrapper .slide-container h4,
.slide-preview-wrapper .slide-container h5,
.slide-preview-wrapper .slide-container h6,
.slide-preview-wrapper .slide-container p,
.slide-preview-wrapper .slide-container li,
.slide-preview-wrapper .slide-container span,
.slide-preview-wrapper .slide-container div {
  color: inherit !important;
}

/* Title slide specific */
.title-slide-container {
  background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%) !important;
  color: #ffffff !important;
}
.title-slide-container * { color: #ffffff !important; }

/* Ensure MudBlazor components inside slides use correct colors */
.slide-container .mud-icon-root { color: var(--gixo-primary) !important; }

/* Fix for any potential z-index issues */
.slide-preview-wrapper { position: relative; z-index: 1; }

/* Ensure proper text rendering */
.slide-container {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ==========================================================================
   13. Syncfusion Document Editor - Gixo Theme Override
   ========================================================================== */

/* Document Editor Container */
.e-documenteditor-container {
    background: var(--gixo-background) !important;
    color: var(--gixo-text-primary) !important;
    font-family: var(--gixo-font-sans) !important;
}

/* Toolbar Container */
.e-de-tlbr-wrapper {
    background: var(--gixo-surface) !important;
    border-bottom: 1px solid var(--gixo-border) !important;
    box-shadow: var(--gixo-shadow-sm) !important;
}

/* Toolbar Items */
.e-de-toolbar-items {
    background: transparent !important;
}

/* Toolbar Buttons */
.e-de-tlbr-wrapper .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn {
    color: var(--gixo-text-secondary) !important;
    border-radius: var(--gixo-radius) !important;
    transition: var(--gixo-transition-fast) !important;
}

/* Toolbar Button Hover */
.e-de-tlbr-wrapper .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn:hover {
    background: rgba(0, 217, 255, 0.1) !important;
    color: var(--gixo-primary) !important;
    box-shadow: var(--gixo-glow-sm) !important;
}

/* Active Toolbar Button */
.e-de-tlbr-wrapper .e-toolbar .e-toolbar-items .e-toolbar-item .e-tbar-btn.e-btn-toggle {
    background: rgba(0, 217, 255, 0.2) !important;
    color: var(--gixo-primary) !important;
    box-shadow: var(--gixo-glow-sm) !important;
}

/* Dropdown Buttons */
.e-de-tlbr-wrapper .e-dropdown-btn {
    background: var(--gixo-surface-light) !important;
    color: var(--gixo-text-secondary) !important;
    border: 1px solid var(--gixo-border) !important;
}

.e-de-tlbr-wrapper .e-dropdown-btn:hover {
    border-color: var(--gixo-primary) !important;
    background: rgba(0, 217, 255, 0.05) !important;
}

/* Document Container */
.e-de-document-container {
    background: var(--gixo-background) !important;
}

/* Page Container */
.e-de-page-container {
    background: var(--gixo-surface) !important;
    box-shadow: var(--gixo-shadow-lg) !important;
    border: 1px solid var(--gixo-border) !important;
}

/* Text Selection */
.e-de-page-container ::selection {
    background: rgba(0, 217, 255, 0.3) !important;
    color: white !important;
}

/* Scrollbar */
.e-de-scroll-container::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.e-de-scroll-container::-webkit-scrollbar-track {
    background: var(--gixo-surface);
}

.e-de-scroll-container::-webkit-scrollbar-thumb {
    background: var(--gixo-surface-hover);
    border-radius: 6px;
}

.e-de-scroll-container::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 217, 255, 0.3);
}

/* Properties Pane */
.e-de-prop-pane {
    background: var(--gixo-surface) !important;
    border-left: 1px solid var(--gixo-border) !important;
    color: var(--gixo-text-primary) !important;
}

/* Properties Pane Headers */
.e-de-prop-pane .e-de-prop-header {
    background: var(--gixo-surface-light) !important;
    color: var(--gixo-text-primary) !important;
    border-bottom: 1px solid var(--gixo-border) !important;
}

/* Dialog Styling */
.e-de-dlg-container {
    background: var(--gixo-surface) !important;
    border: 1px solid var(--gixo-border) !important;
    box-shadow: var(--gixo-shadow-xl) !important;
}

.e-de-dlg-header {
    background: var(--gixo-surface-light) !important;
    color: var(--gixo-text-primary) !important;
    border-bottom: 1px solid var(--gixo-border) !important;
}

/* Input Fields in Dialogs */
.e-de-dlg-container .e-input-group {
    background: var(--gixo-surface-light) !important;
    border: 1px solid var(--gixo-border) !important;
}

.e-de-dlg-container .e-input {
    background: transparent !important;
    color: var(--gixo-text-primary) !important;
}

.e-de-dlg-container .e-input:focus {
    border-color: var(--gixo-primary) !important;
    box-shadow: var(--gixo-glow-sm) !important;
}

/* Context Menu */
.e-de-context-menu {
    background: var(--gixo-surface) !important;
    border: 1px solid var(--gixo-border) !important;
    box-shadow: var(--gixo-shadow-lg) !important;
}

.e-de-context-menu .e-menu-item {
    color: var(--gixo-text-primary) !important;
}

.e-de-context-menu .e-menu-item:hover {
    background: rgba(0, 217, 255, 0.1) !important;
}

/* Status Bar */
.e-de-status-bar {
    background: var(--gixo-surface) !important;
    border-top: 1px solid var(--gixo-border) !important;
    color: var(--gixo-text-secondary) !important;
}

/* Ruler */
.e-de-ruler {
    background: var(--gixo-surface-light) !important;
    border: 1px solid var(--gixo-border) !important;
}

/* Comments Pane */
.e-de-cmt-pane {
    background: var(--gixo-surface) !important;
    border-left: 1px solid var(--gixo-border) !important;
}

.e-de-cmt-item {
    background: var(--gixo-surface-light) !important;
    border: 1px solid var(--gixo-border) !important;
    margin-bottom: 8px;
    border-radius: var(--gixo-radius) !important;
}

/* Track Changes */
.e-de-track-insert {
    color: var(--gixo-success) !important;
    text-decoration: underline;
}

.e-de-track-delete {
    color: var(--gixo-error) !important;
    text-decoration: line-through;
}

/* Search/Find Dialog */
.e-de-find-dlg {
    background: var(--gixo-surface) !important;
    border: 1px solid var(--gixo-border) !important;
    box-shadow: var(--gixo-shadow-lg) !important;
}

/* Hyperlink Styling */
.e-de-page-container a {
    color: var(--gixo-primary) !important;
    text-decoration: underline;
}

.e-de-page-container a:hover {
    color: var(--gixo-primary-light) !important;
    text-shadow: var(--gixo-glow-sm);
}

/* Table Borders */
.e-de-page-container table {
    border-color: var(--gixo-border) !important;
}

.e-de-page-container td,
.e-de-page-container th {
    border-color: var(--gixo-border) !important;
}

/* Image Selection */
.e-de-img-focus {
    outline: 2px solid var(--gixo-primary) !important;
    outline-offset: 2px;
}

/* Resize Handles */
.e-de-resize-handle {
    background: var(--gixo-primary) !important;
    border: 2px solid var(--gixo-surface) !important;
}

/* Loading Spinner */
.e-de-spinner-wrapper {
    background: rgba(26, 31, 58, 0.8) !important;
}

/* Custom Gixo Toolbar Additions */
.gixo-editor-toolbar-additions {
    padding: 0.5rem 1rem;
    background: var(--gixo-surface);
    border-bottom: 1px solid var(--gixo-border);
    display: flex;
    gap: 0.5rem;
}

.gixo-editor-toolbar-additions button {
    padding: 0.5rem 1rem;
    border-radius: var(--gixo-radius);
    border: 1px solid var(--gixo-border);
    background: var(--gixo-surface-light);
    color: var(--gixo-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: var(--gixo-transition-fast);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gixo-editor-toolbar-additions button:hover {
    background: rgba(0, 217, 255, 0.1);
    border-color: var(--gixo-primary);
    color: var(--gixo-primary);
    box-shadow: var(--gixo-glow-sm);
}

.gixo-btn-primary {
    background: var(--gixo-primary) !important;
    color: var(--gixo-background) !important;
    border-color: var(--gixo-primary) !important;
}

.gixo-btn-primary:hover {
    background: var(--gixo-primary-light) !important;
    box-shadow: var(--gixo-glow-md) !important;
}

.gixo-btn-secondary {
    background: var(--gixo-secondary) !important;
    color: white !important;
    border-color: var(--gixo-secondary) !important;
}

.gixo-btn-accent {
    background: var(--gixo-accent) !important;
    color: var(--gixo-background) !important;
    border-color: var(--gixo-accent) !important;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .e-de-tlbr-wrapper {
        flex-wrap: wrap;
    }
    
    .e-de-page-container {
        margin: 0.5rem !important;
        box-shadow: var(--gixo-shadow-md) !important;
    }
    
    .gixo-editor-toolbar-additions {
        flex-wrap: wrap;
    }
    
    .gixo-editor-toolbar-additions button {
        font-size: 0.75rem;
        padding: 0.375rem 0.75rem;
    }
}

/* Print Mode */
@media print {
    .e-de-tlbr-wrapper,
    .e-de-status-bar,
    .e-de-prop-pane,
    .gixo-editor-toolbar-additions {
        display: none !important;
    }
    
    .e-de-page-container {
        box-shadow: none !important;
        border: none !important;
        background: white !important;
    }
}

/* Animations */
@keyframes gixo-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 217, 255, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 217, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 217, 255, 0);
    }
}

.e-de-toolbar-focus {
    animation: gixo-pulse 2s infinite;
}

/* High Contrast Mode Support */
[data-contrast="high"] .e-documenteditor-container {
    --gixo-primary: #00d4ff !important;
    --gixo-border: rgba(255, 255, 255, 0.5) !important;
}

[data-contrast="high"] .e-de-page-container {
    background: #000000 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   End of GIXO Aurora Dark Styles
   ========================================================================== */