/* =====================================================
   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 */
  --gixo-nav-hover: rgba(0, 217, 255, 0.08); /* nav/menu/icon hover tint (dark = old value) */
  --gixo-input-bg: rgba(255, 255, 255, 0.04); /* outlined input fill (dark = old value) */
  /* Trial-status banner — text/CTA colours flip for light so the pale tints stay legible.
     Dark values are the originals (byte-identical); see TrialStatusBanner.razor. */
  --trial-active-fg: #67e8f9;  --trial-active-cta: #00d9ff;  --trial-active-fb: #a5f3fc;
  --trial-expired-fg: #fbbf24; --trial-expired-cta: #f59e0b; --trial-expired-fb: #fde68a;
  --trial-nosub-fg: #d8b4fe;   --trial-nosub-cta: #a855f7;   --trial-nosub-cta-fg: #ffffff;
  /* Complete translucent-surface color tokens. Use these (NOT rgba(var(--triple),a))
     for surfaces that must flip on theme change: a whole-color var re-resolves
     reliably at runtime, whereas rgba(var(--rgb),a) can freeze at first paint. */
  --gixo-card: #222a44;        /* opaque (≈ old translucent card) — flips reliably on toggle */
  --gixo-chip-bg: rgba(0, 217, 255, 0.15); /* cyan tint on chips in dark */
  --gixo-card-hover: #2a3352;
  --gixo-panel: rgba(36, 43, 71, .95);
  --gixo-header-surface: rgba(26, 26, 46, .95);
  --gixo-code-surface: rgba(9, 12, 26, .92);
  /* Shared app-shell surfaces (appbar/drawer/menu/search) — complete color
     tokens so the chrome flips reliably with the theme. */
  --gixo-appbar-bg: rgba(26, 31, 58, .94);
  --gixo-menu-bg: rgba(36, 43, 71, .98);
  --gixo-drawer-bg: rgba(30, 35, 64, .98);
  --gixo-search-bg: rgba(42, 42, 62, .8);

  /* 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;
  --gixo-font-public-sans: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gixo-public-font-size-display: clamp(2.85rem, 5.2vw, 4.6rem);
  --gixo-public-font-size-hero: clamp(2.5rem, 4.5vw, 4rem);
  --gixo-public-font-size-section: clamp(2rem, 3.3vw, 3rem);
  --gixo-public-font-size-subtitle: clamp(1.08rem, 1.9vw, 1.32rem);
  --gixo-public-font-size-body: 1.02rem;
  --gixo-public-font-size-body-sm: 0.96rem;
  --gixo-public-font-size-label: 0.88rem;
  --gixo-public-font-size-caption: 0.82rem;
  --gixo-public-font-size-micro: 0.74rem;
  --gixo-public-line-height: 1.72;
  --gixo-public-tracking-tight: -0.03em;
  
  /* 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);
  /* Modal scrim. A dialog must visibly take control of the page: without a scrim the
     surface behind stays fully lit while being pointer-inert, and a user reads one
     click as "a second popup opened" — which is exactly how the deck editor's Image
     Studio was reported. Deliberately light: enough to recede, not a blackout. */
  --mud-palette-overlay-dark: rgba(0, 0, 0, 0.45);

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

/* =====================================================
   LIGHT THEME — opt-in, route-gated token override.
   Dormant until an ancestor carries data-theme="light"
   (set by MainLayout only on verified surfaces). Dark
   remains the default in :root, so existing rendering
   is untouched. Every text pair below is WCAG-AA
   verified (>=4.5:1); the darkened cyan keeps the brand
   accent legible as text/links on white.
   ===================================================== */
:root[data-theme="light"] {
  /* Brand accent, darkened for legible text/links on light */
  --gixo-primary: #0e7490;       /* cyan-700 — 5.36:1 on white */
  --gixo-primary-dark: #155e75;  /* cyan-800 */
  --gixo-primary-light: #0891b2; /* cyan-600 */
  --gixo-secondary: #be123c;     /* rose-700 — 5.9:1 on near-white */
  --gixo-accent: #92400e;  /* amber-800 — amber-700 dips below AA on the deepened light bg */

  /* Semantic — dark enough to read as text on white */
  --gixo-success: #15803d;       /* green-700 — 5.02:1 */
  --gixo-info: #0369a1;          /* sky-700   — 5.93:1 */
  --gixo-warning: #92400e;       /* amber-800 — amber-700 dips below AA on the deepened bg (brand chrome uses this) */
  --gixo-error: #dc2626;         /* red-600   — 4.83:1 */

  /* Surfaces — near-white page, white cards */
  --gixo-dark: #e9edf4;          /* base bg — cool slate so white cards separate */
  --gixo-background: #e9edf4;    /* was slate-50 (#f8fafc): too close to white cards -> no depth */
  --gixo-surface: #ffffff;
  --gixo-surface-light: #f1f5f9; /* slate-100 */
  --gixo-surface-hover: #e2e8f0; /* slate-200 */
  --gixo-nav-hover: rgba(14, 116, 144, 0.08); /* cyan-700 tint - subtle on white */
  --gixo-input-bg: rgba(15, 23, 42, 0.02); /* faint slate fill on white */
  /* Trial banner light overrides: -700 hues stay legible on the pale tints over white. */
  --trial-active-fg: #0e7490;  --trial-active-cta: #00d9ff;  --trial-active-fb: #0e7490;
  --trial-expired-fg: #b45309; --trial-expired-cta: #f59e0b; --trial-expired-fb: #b45309;
  --trial-nosub-fg: #7e22ce;   --trial-nosub-cta: #7e22ce;   --trial-nosub-cta-fg: #ffffff;
  --gixo-card: #ffffff;
  --gixo-chip-bg: #f8fafc; /* slate-50 fill: red Error-chip text (#dc2626) needs a near-white bg to clear AA; teal/green pass comfortably. Outlined chip look. */
  --gixo-card-hover: #eef2f9;
  --gixo-panel: rgba(255, 255, 255, .98);
  --gixo-header-surface: rgba(248, 250, 252, .92);
  --gixo-code-surface: rgba(226, 232, 240, .92);
  /* App-shell surfaces in light — frosted white chrome */
  --gixo-appbar-bg: rgba(255, 255, 255, .9);
  --gixo-menu-bg: #ffffff;
  --gixo-drawer-bg: #ffffff;
  --gixo-search-bg: rgba(241, 245, 249, .9);
  /* View's pasted-content normalizer drives many surfaces through these two
     tokens (defined dark in View's own :root); give them light values so that
     whole subsystem flips too, no per-rule edits. */
  --gixo-dark-900: #f1f5f9;
  --gixo-dark-800: #f8fafc;

  /* Text — all AA on white/near-white */
  --gixo-text-primary: #0f172a;  /* slate-900 — 17.85:1 */
  --gixo-text-secondary: #334155;/* slate-700 — 10.35:1 */
  --gixo-text-muted: #475569;    /* slate-600 — 7.58:1 */
  --gixo-text-disabled: #94a3b8; /* slate-400 — disabled is WCAG-exempt */

  /* Borders & dividers */
  --gixo-border: rgba(15, 23, 42, 0.16);       /* was .12 — cards had no visible edge */
  --gixo-border-strong: rgba(15, 23, 42, 0.28);
  --gixo-border-hover: rgba(14, 116, 144, 0.55);
  --gixo-divider: #dbe2ea;

  /* Neutralize the neon glow — it reads wrong on light */
  --gixo-glow-sm: none;
  --gixo-glow-md: none;
  --gixo-glow-lg: none;

  /* Real, soft neutral shadows instead of dark-theme depth */
  /* Layered shadows read as real elevation instead of a single faint blur */
  --gixo-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --gixo-shadow-md: 0 1px 2px rgba(15, 23, 42, 0.06), 0 6px 16px rgba(15, 23, 42, 0.10);
  --gixo-shadow-lg: 0 2px 6px rgba(15, 23, 42, 0.08), 0 12px 28px rgba(15, 23, 42, 0.12);
  --gixo-shadow-xl: 0 4px 10px rgba(15, 23, 42, 0.10), 0 24px 48px rgba(15, 23, 42, 0.16);
  --gixo-shadow-color: 0 6px 20px rgba(14, 116, 144, 0.18);

  /* Keep MudBlazor palette in sync with the tokens so the two
     systems agree in light mode (no specificity war). */
  --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: #1e293b;
  --mud-palette-background: var(--gixo-background);
  --mud-palette-background-grey: var(--gixo-surface-light);
  --mud-palette-surface: var(--gixo-surface);
  --mud-palette-drawer-background: var(--gixo-surface);
  --mud-palette-appbar-background: var(--gixo-surface);
  --mud-palette-appbar-text: var(--gixo-text-primary);
  --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(15, 23, 42, 0.08);
  --mud-palette-lines-default: var(--gixo-border);
  --mud-palette-lines-inputs: #64748b; /* control boundary >=3:1 */
  --mud-palette-table-lines: var(--gixo-divider);
  --mud-palette-divider: var(--gixo-divider);
  /* Modal scrim — see the note in :root. This was rgba(15,23,42,0.4) until
     5e26beb43 (2026-07-19) set it transparent; light mode lost its scrim entirely
     and dialogs stopped reading as modal. Restored slightly lighter than the
     original so the page recedes without going dark. */
  --mud-palette-overlay-dark: rgba(15, 23, 42, 0.34);

  /* Restore genuine elevation (dark theme mapped some to glow) */
  --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);
}

/* ==========================================================================
   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;
  -webkit-tap-highlight-color: transparent;
}

/* Public marketing typography */
.gixo-public-shell,
.gixo-public-layout,
.gixo-auth-layout,
.gixo-site-header,
.gixo-site-footer {
  font-family: var(--gixo-font-public-sans);
}

.gixo-public-shell :is(h1, h2, h3, h4, h5, h6),
.gixo-public-layout :is(h1, h2, h3, h4, h5, h6),
.gixo-auth-layout :is(h1, h2, h3, h4, h5, h6),
.gixo-site-header :is(h1, h2, h3, h4, h5, h6),
.gixo-site-footer :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--gixo-font-public-sans);
}

.gixo-public-shell :is(.mud-typography, .mud-button-root, .mud-chip-root, a, button),
.gixo-public-layout :is(.mud-typography, .mud-button-root, .mud-chip-root, a, button),
.gixo-auth-layout :is(.mud-typography, .mud-button-root, .mud-chip-root, a, button),
.gixo-site-header :is(a, button),
.gixo-site-footer :is(.mud-typography, a, button) {
  font-family: var(--gixo-font-public-sans);
}

.gixo-public-shell :is(
  .hero-title,
  .gixo-hero-heading,
  .gixo-product-heading,
  .content-hero-title,
  .briefs-hero-title,
  .presentations-hero-title,
  .legal-hero-title,
  .proposals-hero-title
),
.gixo-public-shell .trial-hero h1,
.gixo-public-shell .consultant-hero .mud-typography-h2,
.gixo-public-shell .sales-landing-hero .mud-typography-h2,
.gixo-public-shell .support-hero h1 {
  font-size: var(--gixo-public-font-size-display) !important;
  letter-spacing: var(--gixo-public-tracking-tight) !important;
  line-height: 1.08 !important;
}

.gixo-public-shell :is(
  .hero-subtitle,
  .content-hero-subtitle,
  .briefs-hero-subtitle,
  .presentations-hero-subtitle,
  .legal-hero-subtitle,
  .proposals-hero-subtitle,
  .consultant-subtitle,
  .sales-landing-subtitle,
  .pricing-desc
),
.gixo-public-shell .trial-hero p,
.gixo-public-shell .gixo-hero-heading + .mud-typography-h6,
.gixo-public-shell .support-hero .mud-typography-body1 {
  font-size: var(--gixo-public-font-size-body) !important;
  line-height: var(--gixo-public-line-height) !important;
}

.gixo-public-shell :is(
  .section-title,
  .product-showcase-title,
  .content-section-title,
  .briefs-section-title,
  .presentations-section-title,
  .legal-section-title
) {
  font-size: var(--gixo-public-font-size-section) !important;
}

.gixo-public-shell :is(
  .section-subtitle,
  .product-showcase-subtitle,
  .content-section-subtitle,
  .briefs-section-subtitle,
  .presentations-section-subtitle,
  .legal-section-subtitle
) {
  font-size: var(--gixo-public-font-size-subtitle) !important;
  line-height: var(--gixo-public-line-height) !important;
}

.gixo-public-shell :is(
  .hero-proof-kicker,
  .products-proof-kicker,
  .pricing-proof-kicker,
  .trial-proof-kicker,
  .product-hero-proof-kicker,
  .content-hero-kicker,
  .presentations-hero-kicker,
  .consultant-kicker,
  .sales-landing-kicker,
  .quick-start-label,
  .content-quick-start-label,
  .presentations-quick-start-label,
  .featured-on-label
) {
  font-size: var(--gixo-public-font-size-label) !important;
}

.gixo-public-shell :is(
  .hero-proof-copy,
  .products-proof-copy,
  .pricing-proof-copy,
  .trial-proof-copy,
  .product-hero-proof-copy,
  .product-description,
  .trial-copy,
  .trial-loading__copy,
  .upgrade-bridge__copy,
  .briefs-domain-desc,
  .legal-doctype-desc,
  .content-hero-proof-item,
  .presentations-hero-proof-item,
  .content-quick-start-chip,
  .presentations-quick-start-chip,
  .product-cta,
  .trial-card__signal,
  .gixo-pricing-card__signal,
  .proposals-note,
  .consultant-pill,
  .sales-landing-pill
) {
  font-size: var(--gixo-public-font-size-body-sm) !important;
  line-height: var(--gixo-public-line-height) !important;
}

.gixo-public-shell :is(
  .product-title,
  .briefs-domain-title,
  .legal-doctype-title
) {
  font-size: 1.08rem !important;
  line-height: 1.45 !important;
}

.gixo-public-shell .consultant-proof-copy h3,
.gixo-public-shell .consultant-panel .mud-typography-h6,
.gixo-public-shell .consultant-panel .mud-typography-h5,
.gixo-public-shell .sales-landing-card .mud-typography-h6,
.gixo-public-shell .support-page .mud-typography-subtitle2 {
  font-size: 1.02rem !important;
  line-height: 1.45 !important;
}

.gixo-public-shell .support-page .mud-typography-body2,
.gixo-public-shell .support-page .mud-typography-caption,
.gixo-public-shell .consultant-panel .mud-typography-body2,
.gixo-public-shell .sales-landing-card .mud-typography-body2,
.gixo-public-shell .gixo-product-card .mud-typography-body2,
.gixo-public-shell .pricing-card .mud-typography-body2,
.gixo-public-shell .gixo-pricing-card .mud-typography-body2 {
  font-size: var(--gixo-public-font-size-body-sm) !important;
  line-height: var(--gixo-public-line-height) !important;
}

.gixo-public-shell :is(
  .zoom-hint,
  .category-badge,
  .featured-on-badge,
  .featured-on-pill,
  .gixo-chip-popular,
  .gixo-chip-recommended,
  .proposals-chip
) {
  font-size: var(--gixo-public-font-size-caption) !important;
}

.gixo-public-shell .lang-card-image::before,
.gixo-public-shell .slide-card::after {
  font-size: var(--gixo-public-font-size-micro) !important;
}

/* Global responsive images - prevent overflow on all screens */
img {
  max-width: 100%;
  height: auto;
}

/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Prevent accidental text selection on interactive elements */
button, .mud-button-root, .mud-icon-button, .mud-chip,
.mud-nav-link, .mud-list-item, .mud-tab, .mud-card-actions {
  user-select: none;
  -webkit-user-select: none;
}

/* Touch-friendly sizing - ensure interactive elements meet 44px minimum */
@media (pointer: coarse) {
  .mud-button-root {
    min-height: 44px;
  }
  .mud-icon-button {
    min-width: 44px;
    min-height: 44px;
  }
  .mud-input .mud-input-root {
    min-height: 44px;
  }
  .mud-nav-link {
    min-height: 48px;
  }
  .mud-list-item {
    min-height: 48px;
  }
  .mud-chip {
    min-height: 32px;
  }
  .mud-select .mud-input-root {
    min-height: 44px;
  }
  .mud-tab {
    min-height: 44px;
  }

  /* Disable transform-based hover effects to prevent sticky states */
  .content-card:hover,
  .metric-tile:hover,
  .mud-nav-item:hover {
    transform: none !important;
  }

  .content-card:hover::before {
    transform: none !important;
  }
}

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

/* 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-on-primary, 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);
}

/* Touch feedback: replace hover transforms with :active on touch devices */
@media (pointer: coarse) {
  .mud-button-filled-primary:hover {
    transform: none;
  }
  .mud-button-filled-primary:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
  }
  .mud-card:hover {
    transform: none;
  }
  .mud-card:active {
    transform: scale(0.98);
  }
}

/* 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: var(--gixo-nav-hover) !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: var(--gixo-input-bg) !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: var(--gixo-surface) !important;
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.28) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.mud-popover {
  z-index: 1600 !important;
}

.mud-picker-popover-paper {
  z-index: 1601 !important;
}

.mud-popover .mud-overlay {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

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

.mud-list-item {
  color: var(--gixo-text-primary) !important;
  border-radius: 6px;
  margin: 1px 0;
}

.mud-list-item:hover {
  background-color: rgba(0, 217, 255, 0.08) !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 {
  /* cyan tint in dark, faint neutral in light — a cyan fill made red/teal semantic
     chip text (Error/Required badges) fall just under AA on the pale cyan. */
  background-color: var(--gixo-chip-bg) !important;
  /* primary (not -light): #0891b2 failed AA on the pale cyan fill in light; --gixo-primary
     is cyan-700 (#0e7490, 5.9:1) in light and stays a bright cyan in dark. */
  color: var(--gixo-primary) !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 – Sleek glassmorphism style */
.mud-dialog {
  background: rgba(36, 43, 71, 0.82) !important;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border: 1px solid rgba(148, 163, 184, 0.12) !important;
  color: var(--gixo-text-primary) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
              0 1px 0 rgba(255, 255, 255, 0.04) inset !important;
  border-radius: 14px !important;
  overflow: hidden;
  animation: gixo-dialog-enter 0.22s cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes gixo-dialog-enter {
  from {
    opacity: 0;
    transform: scale(0.97) translateY(6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.mud-dialog-title {
  background: transparent !important;
  color: var(--gixo-text-secondary) !important;
  border-bottom: 1px solid rgba(148, 163, 184, 0.08);
  padding: 14px 20px !important;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.mud-dialog-title .mud-typography {
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  color: var(--gixo-text-secondary) !important;
}

.mud-dialog-content {
  padding: 16px 20px !important;
}

.mud-dialog-actions {
  background: transparent !important;
  border-top: 1px solid rgba(148, 163, 184, 0.08);
  padding: 10px 16px !important;
  gap: 8px;
}

.mud-dialog-actions .mud-button-root {
  font-size: 0.82rem;
  text-transform: none;
  letter-spacing: 0.01em;
  border-radius: 8px;
  padding: 6px 16px;
  min-height: 34px;
}

/* POPOVERS do not dim the page — a select, menu or date picker is not modal and
   dimming behind one is wrong. Dialogs are excluded from this rule on purpose: they
   take their scrim from --mud-palette-overlay-dark above. The blanket version of
   this rule covered .mud-overlay/.mud-overlay-scrim/.mud-overlay-dark too, which is
   what left the slide editor's drawer fully lit behind a modal that had already
   taken its clicks. */
.mud-popover-overlay {
  background-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* MudBlazor's Color.Secondary on TEXT (.mud-secondary-text) paints the brand
   secondary — a rose/coral — which is near-universally misused for muted text
   (subtitles, hints, captions), where it reads as an error (glaring in light
   mode). Remap the text utility to the muted-text token. This targets text only
   (buttons/chips use .mud-button-secondary etc.), and !important is required to
   beat MudBlazor's own !important on this rule. */
.mud-secondary-text {
  color: var(--gixo-text-secondary) !important;
}

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

/* Content Card Thumbnails */
.content-card .thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #111;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 
              inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.content-card .thumb::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 30%,
    transparent 70%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
}

/* 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 minmax(0, 320px);
  gap: 2rem;
  align-items: start;
}

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

.editor-sidebar {
  position: sticky;
  top: 2rem;
  max-height: calc(100dvh - 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;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

.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);
}

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

/* Large desktop / ultra-wide - scale up for better space utilization */
@media (min-width: 1920px) {
  :root {
    --gixo-content-width: 1440px;
  }

  .mud-container {
    padding: 0 2.5rem;
  }

  .editor-layout {
    grid-template-columns: 1fr minmax(0, 380px);
    gap: 2.5rem;
  }
}

/* Standard desktop - widen content area */
@media (min-width: 1440px) and (max-width: 1919px) {
  :root {
    --gixo-content-width: 1360px;
  }

  .mud-container {
    padding: 0 2rem;
  }
}

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

/* Tablet - keep sidebar but shrink it */
@media (max-width: 960px) and (min-width: 769px) {
  html {
    font-size: 15px;
  }

  .editor-layout {
    grid-template-columns: 1fr minmax(0, 260px);
    gap: 1.5rem;
  }

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

/* Small tablet / landscape phone - collapse sidebar */
@media (max-width: 768px) {
  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;
  }

  html, body {
    overflow-x: hidden;
  }

  .mud-container {
    padding: 0 1rem;
    overflow-x: hidden;
  }

  .content-body {
    padding: 1.5rem;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  /* Stack form grids to single column on mobile */
  .doctype-grid,
  .template-grid,
  .content-type-grid {
    grid-template-columns: 1fr !important;
  }

  /* Let content headings wrap on narrow screens. Ellipsis hid the most
     important words in Business editor titles and instructions. */
  .mud-typography.mud-typography-h4,
  .mud-typography.mud-typography-h5,
  .mud-typography.mud-typography-h6 {
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
    white-space: normal;
    max-width: 100%;
  }
}

/* Extra-small phone optimizations (320-400px screens) */
@media (max-width: 400px) {
  html {
    font-size: 13px;
  }

  .mud-container {
    padding: 0 0.75rem;
    overflow-x: hidden;
  }

  .content-body {
    padding: 1rem;
  }

  .mud-dialog {
    margin: 6px !important;
    border-radius: 12px !important;
  }

  .mud-dialog-content {
    padding: 12px 14px !important;
  }

  .mud-dialog-title {
    padding: 10px 14px !important;
  }

  /* Compact chip/badge sizing */
  .mud-chip {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  /* Prevent button text truncation */
  .mud-button-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Compact toolbar buttons */
  .viewer-toolbar .mud-button-root {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }

  .viewer-toolbar .mud-select {
    min-width: 100px !important;
  }

  /* Keep compact headings readable without clipping their content. */
  .mud-typography.mud-typography-h6 {
    font-size: 1rem;
    overflow: visible;
    overflow-wrap: break-word;
    text-overflow: clip;
    white-space: normal;
    max-width: 100%;
  }

  /* Tighter stat cards */
  .gixo-stat-card {
    padding: 1rem;
  }

  .stat-icon {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.75rem;
    letter-spacing: 0.03em;
  }
}

/* Safe area insets for notched phones (iPhone X+, etc.) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .mud-appbar {
    padding-top: env(safe-area-inset-top);
  }
  .present-controls,
  .gixo-bot-fab {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mud-drawer {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  .gixo-editor-toolbar {
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   10. MudDialog Mobile Overrides
   ========================================================================== */

@media (max-width: 600px) {
  .mud-dialog {
    margin: 10px !important;
    width: calc(100vw - 20px) !important;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px) !important;
    border-radius: 12px !important;
    overflow-x: hidden;
    box-sizing: border-box;
  }

  .mud-dialog .mud-dialog-content {
    max-height: calc(100dvh - 140px);
    overflow-y: auto;
  }

  .mud-dialog-title {
    padding: 12px 16px !important;
  }

  .mud-dialog-content {
    padding: 14px 16px !important;
  }

  .mud-dialog-actions {
    padding: 8px 14px !important;
    flex-wrap: wrap;
    gap: 6px;
  }

  .mud-dialog-actions .mud-button-root {
    min-height: 40px;
    font-size: 0.8rem;
  }

  .mud-dialog-title .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100vw - 80px);
  }

  .mud-dialog .mud-grid {
    gap: 0.5rem;
  }

  .mud-dialog-actions {
    flex-direction: column;
  }

  .mud-dialog-actions .mud-button-root {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .mud-dialog,
  .mud-dialog-content,
  .mud-dialog .mud-stack,
  .mud-dialog .mud-grid,
  .mud-dialog .mud-item,
  .mud-dialog .mud-input-control,
  .mud-dialog .mud-input-slot,
  .mud-dialog .mud-form-control,
  .mud-dialog .mud-select {
    min-width: 0;
  }

  .mud-dialog-content img,
  .mud-dialog-content video,
  .mud-dialog-content canvas {
    max-width: 100%;
    height: auto;
  }

  .gixo-mobile-dialog,
  .gixo-mobile-dialog .mud-dialog {
    margin: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
  }

  .gixo-mobile-dialog .mud-dialog-title {
    padding-top: calc(14px + env(safe-area-inset-top, 0px)) !important;
  }

  .gixo-mobile-dialog .mud-dialog-content {
    max-height: none !important;
  }

  .gixo-mobile-dialog .mud-dialog-actions {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .gixo-mobile-dialog .gixo-mobile-dialog-body {
    max-height: none !important;
  }
}

@media (pointer: coarse) {
  .mud-dialog .mud-card:hover,
  .mud-dialog .template-card:hover,
  .mud-dialog .layout-card:hover {
    transform: none;
  }

  /* Ensure all custom icon buttons meet 44px touch target */
  .gixo-icon-btn,
  .mobile-shortcut,
  .sticky-cta-close {
    min-height: 44px;
    min-width: 44px;
  }

  /* Show quick actions always on touch (no hover) */
  .quick-actions {
    opacity: 1;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .gixo-preview-card:hover::after,
  .gixo-preview-card:hover {
    animation: none;
    transform: none;
  }
}

/* ==========================================================================
   11. Print Styles
   ========================================================================== */

/* Keep app documents readable when printed, but don't touch the deck viewer */
@media print {
  .content-body, .content-body * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  /* deck print is handled by PresentationView.razor print CSS */
  
  .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;
}

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

/* Let the deck theme control slide colors; keep app body normal */
/* (no .presentation-viewer color override) */
body {
  background-color: var(--gixo-background);
  color: var(--gixo-text-primary);
}

/* Global presentation styling */
body, .presentation-viewer {
    background: transparent !important;
    color: inherit !important;
}

/* Slide Container - Removed forced styling to allow theme colors to take precedence */
/* .slide-container { background: #ffffff !important; color: #1a1a1a !important; } */

/* Removed global color inheritance that interferes with themes */
/* .slide-container * { color: inherit !important; } */

/* Dark theme slide container - Removed to allow theme styling */
/* .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;
}

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

/* 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: rgba(36, 43, 71, 0.85) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
    border-radius: 12px !important;
}

.e-de-dlg-header {
    background: transparent !important;
    color: var(--gixo-text-secondary) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08) !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: rgba(36, 43, 71, 0.88) !important;
    backdrop-filter: blur(16px) saturate(130%);
    -webkit-backdrop-filter: blur(16px) saturate(130%);
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2) !important;
    border-radius: 10px !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;
        min-height: 44px;
    }
}

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

/* ==========================================================================
   SLIDE EDITOR COMPONENTS - Aurora Dark Style
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   SLIDE EDITOR - Right Sidebar
   ═══════════════════════════════════════════════════════════════════════════ */

.slide-editor {
    position: fixed;
    top: var(--gixo-header-height, 64px);
    right: 0;
    width: min(380px, 100vw);
    height: calc(100dvh - var(--gixo-header-height, 64px));
    background: var(--gixo-surface);
    border-left: 1px solid var(--gixo-border);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
}

.slide-editor.visible {
    transform: translateX(0);
}

.slide-editor .editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: linear-gradient(135deg, rgba(0, 217, 255, 0.1) 0%, rgba(0, 168, 204, 0.05) 100%);
    border-bottom: 1px solid var(--gixo-border);
}

.slide-editor .header-title {
    display: flex;
    align-items: center;
    color: var(--gixo-text-primary);
}

.slide-editor .header-title .mud-icon {
    color: var(--gixo-primary);
}

.slide-editor .autosave-indicator-chip {
    margin-left: 8px;
}

.slide-editor .autosave-indicator-chip .mud-chip-icon {
    animation: gixo-autosave-spin 1s linear infinite;
}

@keyframes gixo-autosave-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.slide-editor .close-btn {
    color: var(--gixo-text-muted);
    margin-left: auto;
}

.slide-editor .close-btn:hover {
    color: var(--gixo-primary);
    background: rgba(0, 217, 255, 0.1);
}

.slide-editor .editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.slide-editor .editor-section {
    margin-bottom: 16px;
}

.slide-editor .section-label {
    display: flex;
    align-items: center;
    color: var(--gixo-text-secondary);
    margin-bottom: 12px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.slide-editor .section-label .mud-icon {
    color: var(--gixo-primary);
    opacity: 0.8;
}

.slide-editor .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: var(--gixo-text-muted);
}

/* Saving scrim: covers the panel WITHOUT unmounting the fields beneath it.
   (The containing block is .slide-editor — position:fixed — so the scrim spans
   the whole panel regardless of the body's scroll position.) Swapping the body
   for the spinner reset the scroll and replayed the entrance animations, which
   read as the editor closing and a second popup opening. */
.slide-editor .editor-saving-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    padding: 0;
    background: color-mix(in srgb, var(--gixo-surface) 62%, transparent);
    backdrop-filter: blur(2px);
}

.slide-editor .editor-actions {
    padding-top: 16px;
    border-top: 1px solid var(--gixo-border);
}

.slide-editor .action-btn {
    border-radius: var(--gixo-radius);
}

.slide-editor .primary-action {
    box-shadow: 0 4px 16px rgba(0, 217, 255, 0.3);
}

.slide-editor .primary-action:hover {
    box-shadow: 0 6px 24px rgba(0, 217, 255, 0.4);
    transform: translateY(-2px);
}

.slide-editor .delete-btn:hover {
    background: rgba(238, 90, 111, 0.1) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT SELECTOR - Grid of layout cards
   ═══════════════════════════════════════════════════════════════════════════ */

.layout-selector {
    width: 100%;
}

.layout-selector .layout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.layout-selector .layout-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: var(--gixo-surface-light);
    border: 1px solid var(--gixo-border);
    border-radius: var(--gixo-radius);
    cursor: pointer;
    transition: var(--gixo-transition-fast);
    position: relative;
    min-height: 70px;
}

.layout-selector .layout-card:hover {
    background: var(--gixo-surface-hover);
    border-color: rgba(0, 217, 255, 0.3);
    transform: translateY(-2px);
}

.layout-selector .layout-card.selected {
    background: rgba(0, 217, 255, 0.15);
    border-color: var(--gixo-primary);
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.2);
}

.layout-selector .layout-icon {
    color: var(--gixo-text-muted);
    margin-bottom: 4px;
}

.layout-selector .layout-card.selected .layout-icon {
    color: var(--gixo-primary);
}

.layout-selector .layout-name {
    font-size: max(0.65rem, 12px);
    color: var(--gixo-text-secondary);
    text-align: center;
    line-height: 1.2;
}

.layout-selector .layout-card.selected .layout-name {
    color: var(--gixo-primary-light);
    font-weight: 600;
}

.layout-selector .selected-indicator {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: var(--gixo-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layout-selector .selected-indicator .mud-icon {
    font-size: 10px;
    color: var(--gixo-background);
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT FIELD RENDERER - Dynamic form fields
   ═══════════════════════════════════════════════════════════════════════════ */

.layout-fields {
    width: 100%;
}

.layout-fields .field-input {
    margin-bottom: 8px;
}

.layout-fields .section-caption {
    color: var(--gixo-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.layout-fields .bullets-section,
.layout-fields .stats-section,
.layout-fields .timeline-section,
.layout-fields .process-section,
.layout-fields .icons-section,
.layout-fields .team-section,
.layout-fields .columns-section {
    padding: 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: var(--gixo-radius);
    border: 1px solid var(--gixo-border);
}

.layout-fields .bullet-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.layout-fields .bullet-field {
    flex: 1;
}

.layout-fields .remove-bullet-btn {
    flex-shrink: 0;
}

.layout-fields .stat-card-editor,
.layout-fields .timeline-item-editor,
.layout-fields .process-step-editor,
.layout-fields .team-member-editor,
.layout-fields .table-row-editor {
    padding: 12px;
    background: var(--gixo-surface);
    border-radius: var(--gixo-radius);
    border: 1px solid var(--gixo-border);
}

.layout-fields .table-header-row,
.layout-fields .table-cells-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.layout-fields .table-cell-field {
    flex: 1;
    min-width: 90px;
}

.layout-fields .table-row-editor-header {
    display: flex;
    align-items: center;
    gap: 4px;
}

.layout-fields .timeline-row,
.layout-fields .icon-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.layout-fields .date-field,
.layout-fields .icon-field {
    width: 100px;
    flex-shrink: 0;
}

.layout-fields .content-field,
.layout-fields .label-field {
    flex: 1;
}

.layout-fields .column-field {
    padding: 12px;
    background: var(--gixo-surface);
    border-radius: var(--gixo-radius);
    border: 1px solid var(--gixo-border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE PROMPT EDITOR
   ═══════════════════════════════════════════════════════════════════════════ */

.image-prompt-editor {
    width: 100%;
}

.image-prompt-editor .image-preview-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    border-radius: var(--gixo-radius);
    overflow: hidden;
    margin-bottom: 12px;
    border: 1px solid var(--gixo-border);
}

.image-prompt-editor .image-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-prompt-editor .image-overlay {
    position: absolute;
    top: 0;
    right: 0;
    padding: 8px;
    opacity: 0;
    transition: opacity 0.2s;
}

.image-prompt-editor .image-preview-container:hover .image-overlay {
    opacity: 1;
}

.image-prompt-editor .clear-image-btn {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.image-prompt-editor .reposition-image-btn {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    margin-right: 4px;
}

/* Keep the reposition toggle visible (not hover-only) once active, so the user
   can find their way back out of reposition mode without re-hovering. */
.image-prompt-editor .image-preview-container:has(.focal-point-picker) .image-overlay {
    opacity: 1;
}

/* IMG-3: focal-point picker overlay — click-to-set-position, no pixel cropping. */
.image-prompt-editor .focal-point-picker {
    position: absolute;
    inset: 0;
    cursor: crosshair;
    background: rgba(15, 20, 40, 0.15);
}

.image-prompt-editor .focal-point-marker {
    position: absolute;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    margin-top: -11px;
    border-radius: 50%;
    border: 2px solid #ffffff;
    background: rgba(0, 217, 255, 0.85);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.image-prompt-editor .focal-point-hint {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: -4px;
    margin-bottom: 8px;
}

.image-prompt-editor .prompt-input {
    margin-bottom: 8px;
}

.image-prompt-editor .image-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.image-prompt-editor .action-btn {
    flex: 1;
    min-width: 80px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MUD COMPONENT OVERRIDES FOR SLIDE EDITOR
   ═══════════════════════════════════════════════════════════════════════════ */

.slide-editor .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--gixo-border);
}

.slide-editor .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(0, 217, 255, 0.4);
}

.slide-editor .mud-input-outlined.mud-input-outlined-focus .mud-input-outlined-border {
    border-color: var(--gixo-primary);
    box-shadow: 0 0 8px rgba(0, 217, 255, 0.2);
}

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

.slide-editor .mud-input-helper-text {
    color: var(--gixo-text-disabled);
    font-size: 0.7rem;
}

.slide-editor .mud-select {
    margin-bottom: 8px;
}

.slide-editor .mud-switch {
    color: var(--gixo-text-secondary);
}

/* Scrollbar styling */
.slide-editor .editor-body::-webkit-scrollbar {
    width: 6px;
}

.slide-editor .editor-body::-webkit-scrollbar-track {
    background: var(--gixo-surface);
}

.slide-editor .editor-body::-webkit-scrollbar-thumb {
    background: var(--gixo-surface-hover);
    border-radius: 3px;
}

.slide-editor .editor-body::-webkit-scrollbar-thumb:hover {
    background: var(--gixo-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE ADJUSTMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .slide-editor {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--gixo-border);
    }

    .layout-selector .layout-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .layout-selector .layout-card {
        min-height: 60px;
        padding: 8px 4px;
    }

    .layout-selector .layout-name {
        font-size: max(0.6rem, 12px);
    }
}

@media (max-width: 960px), (hover: none) and (pointer: coarse) {
    .keyboard-help-overlay {
        display: none !important;
        pointer-events: none !important;
    }

    .drawer-backdrop,
    .drawer-backdrop.open {
        top: calc(64px + env(safe-area-inset-top, 0px)) !important;
        z-index: 2000 !important;
    }

    .label-drawer,
    .label-drawer.open {
        top: calc(64px + env(safe-area-inset-top, 0px)) !important;
        height: calc(100dvh - 64px - env(safe-area-inset-top, 0px)) !important;
        z-index: 2001 !important;
    }
}

.gixo-activity-drawer.mud-drawer--closed {
    pointer-events: none !important;
    visibility: hidden !important;
}

/* ==========================================================================
   Inline citation markers (CIT-01)
   Emitted by EvidenceInlineMarkupRenderer as:
     <sup class="gixo-inline-ref[-weak|-mixed|-contradict]">
       <a href="#{scope}-ref-{N}" title="...">[N]</a></sup>
   The quality/consensus state is already on the class — this gives the markers
   tactile, colour-coded styling so the moat is legible on the page. Pure
   presentation; theme-safe via tokens (flips with the light/dark theme).
   ========================================================================== */
.gixo-inline-ref {
    font-size: 0.72em;
    line-height: 0;
    white-space: nowrap;
    margin-left: 1px;
}

.gixo-inline-ref a {
    color: var(--gixo-primary);
    text-decoration: none;
    font-weight: 700;
    padding: 0 3px;
    border-radius: 4px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gixo-inline-ref a:hover,
.gixo-inline-ref a:focus-visible {
    background: var(--gixo-surface-hover);
    border-color: currentColor;
    outline: none;
}

/* Weaker support — amber. */
.gixo-inline-ref-weak a {
    color: var(--gixo-warning);
}

/* Mixed evidence — amber with a dotted underline to set it apart from "weak". */
.gixo-inline-ref-mixed a {
    color: var(--gixo-warning);
    border-bottom: 1px dotted currentColor;
    border-radius: 4px 4px 0 0;
}

/* Contradicting evidence — red. */
.gixo-inline-ref-contradict a {
    color: var(--gixo-error);
}

/* Brief highlight when a [N] jumps to its source card in the rail. */
@media (prefers-reduced-motion: no-preference) {
    [id*="-ref-"]:target {
        animation: gixo-ref-flash 1.6s ease;
    }
}

@keyframes gixo-ref-flash {
    0%, 15% { box-shadow: 0 0 0 2px var(--gixo-primary); }
    100%    { box-shadow: 0 0 0 2px transparent; }
}

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