/* ============================================
   BRAINZLAB UI - DASHBOARD DESIGN SYSTEM
   ============================================
   Deep space blue backgrounds, glassmorphism cards,
   blue-cyan-purple gradient accents, glow effects.

   Uses `dm-*` prefix for CSS classes.
   Theme key: `brainzlab-theme` in localStorage.

   Centralized from platform's dark_mode.css.
   All services inherit this; override --dm-brand per service.
*/

/* ============================================
   CSS VARIABLES - Light Theme (Default)
   ============================================ */
:root {
  /* Brand color - override per service */
  /* Puente al token unico de marca. dm_compat dice literalmente "override
     --dm-brand per service": esto es exactamente eso, con la marca resuelta
     por host en vez de una constante por servicio. Asi las pantallas de auth
     —que usan el vocabulario --color-* derivado de aqui— siguen a la marca
     sin refactorizar ese tercer sistema de tokens. */
  --dm-brand: var(--color-brand, #3b82f6);

  /* Core backgrounds */
  --dm-bg: #f8fafc;
  --dm-surface: #ffffff;
  --dm-surface-alt: #f1f5f9;
  --dm-surface-hover: #e2e8f0;
  --dm-surface-light: #f8fafc;

  /* Core text */
  --dm-text: #0f172a;
  --dm-text-secondary: #475569;
  --dm-text-muted: #94a3b8;
  --dm-text-placeholder: #cbd5e1;
  --dm-text-disabled: #e2e8f0;

  /* Core borders */
  --dm-border: #e2e8f0;
  --dm-border-light: #f1f5f9;

  /* Interactive */
  --dm-input-bg: #ffffff;
  --dm-input-border: #e2e8f0;
  --dm-hover-bg: #f1f5f9;

  /* Code blocks - Light theme uses light bg */
  --dm-code-bg: #f1f5f9;
  --dm-code-text: #334155;
  --dm-code-inner-bg: #ffffff;

  /* Shadows */
  --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --dm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  --dm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
  --dm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);

  /* Status colors */
  --dm-success: #10b981;
  --dm-success-bg: #ecfdf5;
  --dm-success-text: #065f46;
  --dm-success-border: #a7f3d0;

  --dm-warning: #f59e0b;
  --dm-warning-bg: #fffbeb;
  --dm-warning-text: #92400e;
  --dm-warning-border: #fde68a;

  --dm-error: #ef4444;
  --dm-error-bg: #fef2f2;
  --dm-error-text: #991b1b;
  --dm-error-border: #fecaca;

  --dm-info: #3b82f6;
  --dm-info-bg: #eff6ff;
  --dm-info-text: #1e40af;
  --dm-info-border: #bfdbfe;

  /* Platform accent */
  --dm-platform: #3b82f6;
  --dm-platform-dark: #2563eb;
  --dm-platform-light: #60a5fa;

  /* Gradient - Blue spectrum only */
  --dm-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
  --dm-gradient-subtle: linear-gradient(135deg, rgba(37,99,235,0.08) 0%, rgba(59,130,246,0.08) 50%, rgba(96,165,250,0.08) 100%);

  /* Glow */
  --dm-glow: 0 0 20px rgba(59, 130, 246, 0.15);
  --dm-glow-strong: 0 0 30px rgba(59, 130, 246, 0.25);
  --dm-glow-cyan: 0 0 20px rgba(59, 130, 246, 0.12);
  --dm-glow-purple: 0 0 20px rgba(59, 130, 246, 0.12);
  --dm-glow-error: 0 0 20px rgba(239, 68, 68, 0.15);

  /* Dashboard layout */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --bg-surface-hover: #f1f5f9;
  --accent-primary: #3b82f6;
  --accent-primary-hover: #2563eb;
  --accent-primary-bg: rgba(59, 130, 246, 0.08);
  --scrollbar-track: #f1f5f9;
  --scrollbar-thumb: #cbd5e1;
  --scrollbar-thumb-hover: #94a3b8;
}

/* ============================================
   CSS VARIABLES - Dark Theme (Deep Space)
   ============================================ */
html.dark,
.dark,
[data-theme="dark"] {
  /* Core backgrounds - Deep space blue */
  --dm-bg: #0B1120;
  --dm-surface: rgba(15, 23, 42, 0.6);
  --dm-surface-alt: rgba(15, 23, 42, 0.8);
  --dm-surface-hover: rgba(30, 41, 59, 0.5);
  --dm-surface-light: rgba(15, 23, 42, 0.4);

  /* Solid surface variants (for elements that can't use transparency) */
  --dm-surface-solid: #0f172a;
  --dm-surface-alt-solid: #131c2e;

  /* Core text */
  --dm-text: #f1f5f9;
  --dm-text-secondary: #94a3b8;
  --dm-text-muted: #64748b;
  --dm-text-placeholder: #475569;
  --dm-text-disabled: #334155;

  /* Core borders - Glass effect */
  --dm-border: rgba(255, 255, 255, 0.1);
  --dm-border-light: rgba(255, 255, 255, 0.06);

  /* Interactive */
  --dm-input-bg: rgba(15, 23, 42, 0.8);
  --dm-input-border: rgba(255, 255, 255, 0.12);
  --dm-hover-bg: rgba(30, 41, 59, 0.5);

  /* Code blocks */
  --dm-code-bg: rgba(2, 6, 23, 0.8);
  --dm-code-text: #e2e8f0;
  --dm-code-inner-bg: rgba(2, 6, 23, 0.6);

  /* Shadows - Blue-tinted for depth */
  --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --dm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --dm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --dm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);

  /* Status colors - Vibrant */
  --dm-success: #34d399;
  --dm-success-bg: rgba(52, 211, 153, 0.1);
  --dm-success-text: #6ee7b7;
  --dm-success-border: rgba(52, 211, 153, 0.2);

  --dm-warning: #fbbf24;
  --dm-warning-bg: rgba(251, 191, 36, 0.1);
  --dm-warning-text: #fcd34d;
  --dm-warning-border: rgba(251, 191, 36, 0.2);

  --dm-error: #f87171;
  --dm-error-bg: rgba(248, 113, 113, 0.1);
  --dm-error-text: #fca5a5;
  --dm-error-border: rgba(248, 113, 113, 0.2);

  --dm-info: #60a5fa;
  --dm-info-bg: rgba(96, 165, 250, 0.1);
  --dm-info-text: #93c5fd;
  --dm-info-border: rgba(96, 165, 250, 0.2);

  /* Platform accent - White for text, blue for decorative */
  --dm-platform: #f1f5f9;
  --dm-platform-dark: #3b82f6;
  --dm-platform-light: #e2e8f0;

  /* Accent color (for non-text uses like borders, backgrounds) */
  --dm-accent-blue: #3b82f6;

  /* Gradient - Blue spectrum only */
  --dm-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
  --dm-gradient-subtle: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(59,130,246,0.1) 50%, rgba(96,165,250,0.1) 100%);

  /* Glow - Blue-tinted */
  --dm-glow: 0 0 20px rgba(59, 130, 246, 0.3);
  --dm-glow-strong: 0 0 40px rgba(59, 130, 246, 0.4), 0 0 80px rgba(59, 130, 246, 0.1);
  --dm-glow-cyan: 0 0 20px rgba(59, 130, 246, 0.2);
  --dm-glow-purple: 0 0 20px rgba(59, 130, 246, 0.2);
  --dm-glow-error: 0 0 20px rgba(248, 113, 113, 0.3);

  /* Dashboard layout */
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --bg-surface-hover: rgba(30, 41, 59, 0.5);
  --accent-primary: #f1f5f9;
  --accent-primary-hover: #e2e8f0;
  --accent-primary-bg: rgba(59, 130, 246, 0.1);
  --scrollbar-track: rgba(15, 23, 42, 0.5);
  --scrollbar-thumb: rgba(255, 255, 255, 0.08);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);
}

/* ============================================
   System Preference Support
   ============================================ */
@media (prefers-color-scheme: dark) {
  html:not(.light):not([data-theme="light"]) {
    --dm-bg: #0B1120;
    --dm-surface: rgba(15, 23, 42, 0.6);
    --dm-surface-alt: rgba(15, 23, 42, 0.8);
    --dm-surface-hover: rgba(30, 41, 59, 0.5);
    --dm-surface-light: rgba(15, 23, 42, 0.4);
    --dm-surface-solid: #0f172a;
    --dm-surface-alt-solid: #131c2e;
    --dm-text: #f1f5f9;
    --dm-text-secondary: #94a3b8;
    --dm-text-muted: #64748b;
    --dm-text-placeholder: #475569;
    --dm-text-disabled: #334155;
    --dm-border: rgba(255, 255, 255, 0.1);
    --dm-border-light: rgba(255, 255, 255, 0.06);
    --dm-input-bg: rgba(15, 23, 42, 0.8);
    --dm-input-border: rgba(255, 255, 255, 0.12);
    --dm-hover-bg: rgba(30, 41, 59, 0.5);
    --dm-code-bg: rgba(2, 6, 23, 0.8);
    --dm-code-text: #e2e8f0;
    --dm-code-inner-bg: rgba(2, 6, 23, 0.6);
    --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --dm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
    --dm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
    --dm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
    --dm-success: #34d399;
    --dm-success-bg: rgba(52, 211, 153, 0.1);
    --dm-success-text: #6ee7b7;
    --dm-success-border: rgba(52, 211, 153, 0.2);
    --dm-warning: #fbbf24;
    --dm-warning-bg: rgba(251, 191, 36, 0.1);
    --dm-warning-text: #fcd34d;
    --dm-warning-border: rgba(251, 191, 36, 0.2);
    --dm-error: #f87171;
    --dm-error-bg: rgba(248, 113, 113, 0.1);
    --dm-error-text: #fca5a5;
    --dm-error-border: rgba(248, 113, 113, 0.2);
    --dm-info: #60a5fa;
    --dm-info-bg: rgba(96, 165, 250, 0.1);
    --dm-info-text: #93c5fd;
    --dm-info-border: rgba(96, 165, 250, 0.2);
    --dm-platform: #f1f5f9;
    --dm-platform-dark: #3b82f6;
    --dm-platform-light: #e2e8f0;
    --dm-accent-blue: #3b82f6;
    --dm-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
    --dm-gradient-subtle: linear-gradient(135deg, rgba(37,99,235,0.1) 0%, rgba(59,130,246,0.1) 50%, rgba(96,165,250,0.1) 100%);
    --dm-glow: 0 0 20px rgba(59, 130, 246, 0.3);
    --dm-glow-strong: 0 0 40px rgba(59, 130, 246, 0.4), 0 0 80px rgba(59, 130, 246, 0.1);
    --dm-glow-cyan: 0 0 20px rgba(59, 130, 246, 0.2);
    --dm-glow-purple: 0 0 20px rgba(59, 130, 246, 0.2);
    --dm-glow-error: 0 0 20px rgba(248, 113, 113, 0.3);
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --bg-surface-hover: rgba(30, 41, 59, 0.5);
    --accent-primary: #f1f5f9;
    --accent-primary-hover: #e2e8f0;
    --accent-primary-bg: rgba(59, 130, 246, 0.1);
    --scrollbar-track: rgba(15, 23, 42, 0.5);
    --scrollbar-thumb: rgba(255, 255, 255, 0.08);
    --scrollbar-thumb-hover: rgba(255, 255, 255, 0.15);
  }
}

/* ============================================
   CORE UTILITY CLASSES
   ============================================ */

/* Body - Radial gradient background in dark mode */
.dm-body-gradient {
  background-color: var(--dm-bg);
  transition: background-color 0.3s ease;
}

html.dark .dm-body-gradient,
.dark .dm-body-gradient {
  background: #0B1120;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(59, 130, 246, 0.15), transparent),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(168, 85, 247, 0.08), transparent),
    radial-gradient(ellipse 50% 30% at 20% 80%, rgba(34, 211, 238, 0.06), transparent);
  background-attachment: fixed;
}

/* Background utilities */
.dm-bg { background-color: var(--dm-bg); }
.dm-surface { background-color: var(--dm-surface); }
.dm-surface-alt { background-color: var(--dm-surface-alt); }
.dm-surface-hover:hover { background-color: var(--dm-surface-hover); }

/* Text utilities */
.dm-text { color: var(--dm-text); }
.dm-text-secondary { color: var(--dm-text-secondary); }
.dm-text-muted { color: var(--dm-text-muted); }
.dm-text-placeholder { color: var(--dm-text-placeholder); }

/* Border utilities */
.dm-border { border-color: var(--dm-border); }
.dm-border-light { border-color: var(--dm-border-light); }
.dm-border-secondary { border-color: var(--dm-border-light); }

/* Accent utilities */
.dm-accent-text { color: var(--dm-platform); }
html.dark .dm-accent-text,
.dark .dm-accent-text { color: #e2e8f0; }
.dm-accent-bg { background: var(--accent-primary-bg); }

/* Divide utility */
.dm-divide > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--dm-border-light);
}

/* ============================================
   CARD COMPONENTS - Glassmorphism
   ============================================ */

/* Base card - Glass effect in dark mode */
.dm-card {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: 1rem;
  box-shadow: var(--dm-shadow-sm);
}

html.dark .dm-card,
.dark .dm-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Card with lift on hover */
.dm-card-lift {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: 1rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.3s ease;
}

html.dark .dm-card-lift,
.dark .dm-card-lift {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

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

html.dark .dm-card-lift:hover,
.dark .dm-card-lift:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--dm-shadow-xl), var(--dm-glow);
}

/* Card - Interactive with glow */
.dm-card-interactive {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: 1rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark .dm-card-interactive,
.dark .dm-card-interactive {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dm-card-interactive:hover {
  transform: translateY(-4px);
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: var(--dm-shadow-xl), var(--dm-glow);
}

/* Card - Glass (frosted glass) */
.dm-card-glass {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 1rem;
}

html.dark .dm-card-glass,
.dark .dm-card-glass {
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Card - Flat (no visible borders) */
.dm-card-flat {
  background-color: transparent;
  border: none;
  box-shadow: none;
}

.dm-card-flat:hover {
  background-color: var(--dm-surface-hover);
}

/* ============================================
   STAT CARD - Dashboard metrics
   ============================================ */
.dm-stat-card {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: 1rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark .dm-stat-card,
.dark .dm-stat-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dm-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--dm-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dm-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dm-shadow-xl);
}

html.dark .dm-stat-card:hover,
.dark .dm-stat-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--dm-shadow-xl), var(--dm-glow);
}

.dm-stat-card:hover::before {
  opacity: 1;
}

.dm-stat-value {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--dm-text);
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.dm-stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--dm-text-muted);
  margin-top: 0.25rem;
}

/* ============================================
   BUTTON COMPONENTS
   ============================================ */

/* Primary button - solid */
.dm-btn-primary {
  background-color: var(--dm-text);
  color: var(--dm-bg);
  border-radius: 0.75rem;
  transition: all 0.2s ease;
}

.dm-btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Secondary button */
.dm-btn-secondary {
  background-color: var(--dm-surface-alt);
  border: 1px solid var(--dm-border);
  color: var(--dm-text-secondary);
  border-radius: 0.75rem;
  transition: all 0.2s ease;
}

html.dark .dm-btn-secondary,
.dark .dm-btn-secondary {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dm-btn-secondary:hover {
  background-color: var(--dm-surface-hover);
  border-color: rgba(255, 255, 255, 0.15);
}

/* Gradient button - HERO BUTTON */
.dm-btn-gradient {
  background: var(--dm-gradient);
  color: white;
  border: none;
  border-radius: 0.75rem;
  font-weight: 600;
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(59, 130, 246, 0.25);
}

.dm-btn-gradient:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.35);
}

html.dark .dm-btn-gradient,
.dark .dm-btn-gradient {
  color: #ffffff;
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.3);
}

html.dark .dm-btn-gradient:hover,
.dark .dm-btn-gradient:hover {
  box-shadow: 0 8px 30px rgba(59, 130, 246, 0.4), 0 0 60px rgba(59, 130, 246, 0.15);
}

.dm-btn-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dm-btn-gradient:hover::before {
  opacity: 1;
}

/* ============================================
   INPUT COMPONENTS
   ============================================ */
.dm-input {
  background-color: var(--dm-input-bg);
  border: 1px solid var(--dm-input-border);
  color: var(--dm-text);
  transition: all 0.2s ease;
}

html.dark .dm-input,
.dark .dm-input {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dm-input:focus {
  border-color: var(--dm-platform);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

html.dark .dm-input:focus,
.dark .dm-input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), var(--dm-glow);
}

.dm-input::placeholder {
  color: var(--dm-text-placeholder);
}

/* ============================================
   TABLE / LIST COMPONENTS
   ============================================ */

/* Row component */
.dm-row {
  padding: 1rem 1.25rem;
  background-color: transparent;
  border-radius: 0.75rem;
  transition: background-color 0.15s ease;
}

.dm-row:hover {
  background-color: var(--dm-surface-hover);
}

/* Container */
.dm-container {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: 1rem;
  overflow: hidden;
}

/* List item */
.dm-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  background-color: transparent;
  border-bottom: 1px solid var(--dm-border-light);
  transition: background-color 0.15s ease;
}

.dm-list-item:last-child { border-bottom: none; }
.dm-list-item:hover { background-color: var(--dm-surface-hover); }

/* Table header */
.dm-table-header {
  background-color: var(--dm-surface-alt);
  color: var(--dm-text-muted);
  border-bottom: 1px solid var(--dm-border);
}

/* Table row */
.dm-table-row {
  border-bottom: 1px solid var(--dm-border-light);
  transition: background-color 0.15s ease;
}

.dm-table-row:hover { background-color: var(--dm-hover-bg); }

/* Enhanced table row with glow hover in dark mode */
.dm-table-row-enhanced {
  border-bottom: 1px solid var(--dm-border-light);
  transition: all 0.2s ease;
}

.dm-table-row-enhanced:hover {
  background-color: var(--dm-hover-bg);
}

html.dark .dm-table-row-enhanced:hover,
.dark .dm-table-row-enhanced:hover {
  background: rgba(59, 130, 246, 0.04);
}

/* ============================================
   BADGE COMPONENTS
   ============================================ */

/* Generic badge */
.dm-badge {
  background-color: var(--dm-surface-alt);
  color: var(--dm-text-secondary);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
}

/* Primary badge */
.dm-badge-primary {
  background: var(--accent-primary-bg);
  color: var(--dm-platform);
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
}

/* Status badges */
.dm-badge-success {
  background-color: var(--dm-success-bg);
  color: var(--dm-success-text);
}

.dm-badge-warning {
  background-color: var(--dm-warning-bg);
  color: var(--dm-warning-text);
}

.dm-badge-error {
  background-color: var(--dm-error-bg);
  color: var(--dm-error-text);
}

.dm-badge-info {
  background-color: var(--dm-info-bg);
  color: var(--dm-info-text);
}

.dm-badge-neutral {
  background-color: var(--dm-surface-alt);
  color: var(--dm-text-muted);
}

/* Outlined badge */
.dm-badge-outlined {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid var(--dm-border);
  background: transparent;
  color: var(--dm-text-secondary);
}

.dm-badge-outlined-primary {
  border-color: var(--dm-platform);
  color: var(--dm-platform);
  background: var(--accent-primary-bg);
}

html.dark .dm-badge-outlined-primary,
.dark .dm-badge-outlined-primary {
  border-color: rgba(59, 130, 246, 0.4);
  color: #f1f5f9;
  background: rgba(59, 130, 246, 0.1);
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.1);
}

/* ============================================
   STATUS UTILITY CLASSES
   ============================================ */
.dm-success {
  background-color: var(--dm-success-bg);
  color: var(--dm-success-text);
  border-color: var(--dm-success-border);
}

.dm-warning {
  background-color: var(--dm-warning-bg);
  color: var(--dm-warning-text);
  border-color: var(--dm-warning-border);
}

.dm-error {
  background-color: var(--dm-error-bg);
  color: var(--dm-error-text);
  border-color: var(--dm-error-border);
}

/* Status alerts */
.dm-alert-success {
  background-color: var(--dm-success-bg);
  color: var(--dm-success-text);
  border: 1px solid var(--dm-success-border);
}

.dm-alert-warning {
  background-color: var(--dm-warning-bg);
  color: var(--dm-warning-text);
  border: 1px solid var(--dm-warning-border);
}

.dm-alert-error {
  background-color: var(--dm-error-bg);
  color: var(--dm-error-text);
  border: 1px solid var(--dm-error-border);
}

.dm-alert-info {
  background-color: var(--dm-info-bg);
  color: var(--dm-info-text);
  border: 1px solid var(--dm-info-border);
}

/* ============================================
   SIDEBAR COMPONENT
   ============================================ */
.dm-sidebar {
  background-color: var(--dm-surface);
  border-right: 1px solid var(--dm-border);
}

.dm-sidebar-enhanced {
  background-color: var(--dm-surface);
  border-right: 1px solid var(--dm-border);
  position: relative;
}

html.dark .dm-sidebar-enhanced,
.dark .dm-sidebar-enhanced {
  background: rgba(11, 17, 32, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-right-color: rgba(255, 255, 255, 0.08);
}

/* ============================================
   NAV LINK COMPONENTS
   ============================================ */
.dm-nav-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--dm-text-secondary);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

html.dark .dm-nav-link,
.dark .dm-nav-link {
  color: #cbd5e1;
}

.dm-nav-link:hover {
  background: var(--dm-surface-hover);
  color: var(--dm-text);
  transform: translateX(2px);
}

html.dark .dm-nav-link:hover,
.dark .dm-nav-link:hover {
  color: #ffffff;
}

.dm-nav-link-active {
  background: var(--accent-primary-bg);
  color: var(--dm-text);
}

html.dark .dm-nav-link-active,
.dark .dm-nav-link-active {
  background: rgba(59, 130, 246, 0.1);
  color: #ffffff;
  box-shadow: inset 0 0 20px rgba(59, 130, 246, 0.03);
}

.dm-nav-link-active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--dm-gradient);
  border-radius: 0 3px 3px 0;
}

/* ============================================
   PROGRESS BAR
   ============================================ */
.dm-progress-bar {
  width: 100%;
  height: 0.5rem;
  background-color: var(--dm-surface-alt);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

html.dark .dm-progress-bar,
.dark .dm-progress-bar {
  background-color: rgba(30, 41, 59, 0.5);
}

.dm-progress-fill {
  height: 100%;
  border-radius: 9999px;
  background: var(--dm-gradient);
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.dm-progress-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

.dm-progress-track {
  background-color: var(--dm-surface-alt);
  border-radius: 9999px;
  overflow: hidden;
}

/* ============================================
   LIVE INDICATOR
   ============================================ */
.dm-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.dm-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--dm-success);
  animation: live-pulse 2s ease-in-out infinite;
}

.dm-live-dot-warning {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--dm-warning);
  animation: live-pulse-warning 2s ease-in-out infinite;
}

.dm-live-dot-error {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--dm-error);
  animation: live-pulse-error 2s ease-in-out infinite;
}

/* ============================================
   GRADIENT MESH (Decorative Background)
   ============================================ */
.dm-gradient-mesh {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.dm-gradient-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
}

html.dark .dm-gradient-blob,
.dark .dm-gradient-blob {
  opacity: 0.5;
}

.dm-gradient-blob-primary {
  background: rgba(59, 130, 246, 0.12);
}

.dm-gradient-blob-secondary {
  background: rgba(168, 85, 247, 0.08);
}

.dm-gradient-blob-cyan {
  background: rgba(34, 211, 238, 0.08);
}

/* ============================================
   CODE BLOCK
   ============================================ */
.dm-code {
  background-color: var(--dm-code-bg);
  color: var(--dm-code-text);
}

.dm-code-block {
  background-color: var(--dm-code-bg);
  color: var(--dm-code-text);
  border-radius: 1rem;
  border: 1px solid var(--dm-border);
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: 0.875rem;
  line-height: 1.6;
  overflow-x: auto;
}

html.dark .dm-code-block,
.dark .dm-code-block {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dm-code-comment { color: var(--dm-text-muted); }
.dm-code-accent { color: #3b82f6; }

html.dark .dm-code-accent,
.dark .dm-code-accent { color: #60a5fa; }

/* ============================================
   AVATAR COMPONENTS
   ============================================ */
.dm-avatar {
  background: var(--accent-primary-bg);
  color: var(--dm-platform);
}

.dm-member-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 600;
  background: var(--dm-gradient);
  color: white;
  flex-shrink: 0;
}

html.dark .dm-member-avatar,
.dark .dm-member-avatar {
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

/* ============================================
   SPECIALIZED COMPONENTS
   ============================================ */

/* API Key Row */
.dm-key-row {
  background-color: var(--dm-surface-alt);
  border: 1px solid var(--dm-border-light);
  border-radius: 0.75rem;
  padding: 1rem;
  transition: all 0.2s ease;
}

html.dark .dm-key-row,
.dark .dm-key-row {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dm-key-row:hover {
  border-color: var(--dm-border);
}

html.dark .dm-key-row:hover,
.dark .dm-key-row:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(15, 23, 42, 0.9);
}

/* Product Card */
.dm-product-card {
  padding: 1rem;
  border-radius: 0.75rem;
  border: 1px solid var(--dm-border-light);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.dm-product-card:hover {
  transform: translateY(-2px);
  border-color: var(--dm-border);
}

html.dark .dm-product-card:hover,
.dark .dm-product-card:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(59, 130, 246, 0.03);
}

.dm-product-card-enabled:hover {
  border-color: rgba(59, 130, 246, 0.4);
  box-shadow: var(--dm-glow);
}

/* Danger Zone */
.dm-danger-zone {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-error-border);
  border-radius: 1rem;
  transition: all 0.3s ease;
}

html.dark .dm-danger-zone,
.dark .dm-danger-zone {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dm-danger-zone:hover {
  box-shadow: var(--dm-glow-error);
}

/* Plan Card */
.dm-plan-card {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: 1rem;
  padding: 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark .dm-plan-card,
.dark .dm-plan-card {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.dm-plan-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--dm-shadow-xl);
}

html.dark .dm-plan-card:hover,
.dark .dm-plan-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: var(--dm-shadow-xl), var(--dm-glow);
}

.dm-plan-card-featured {
  border-color: rgba(59, 130, 246, 0.4);
  position: relative;
}

.dm-plan-card-featured::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--dm-gradient);
}

html.dark .dm-plan-card-featured,
.dark .dm-plan-card-featured {
  box-shadow: var(--dm-glow);
}

/* Empty State */
.dm-empty-state {
  text-align: center;
  padding: 3rem 2rem;
}

.dm-empty-state-icon {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  background: var(--accent-primary-bg);
  color: var(--dm-platform);
}

html.dark .dm-empty-state-icon,
.dark .dm-empty-state-icon {
  background: var(--dm-gradient-subtle);
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.15);
}

/* Modal */
.dm-modal-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

html.dark .dm-modal-overlay,
.dark .dm-modal-overlay {
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.dm-modal-content {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: 1.25rem;
  box-shadow: var(--dm-shadow-xl);
}

html.dark .dm-modal-content,
.dark .dm-modal-content {
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--dm-shadow-xl), var(--dm-glow);
}

/* Neon Text Glow - white in dark mode */
html.dark .dm-neon-text,
.dark .dm-neon-text {
  color: #f1f5f9;
  text-shadow: 0 0 10px rgba(59, 130, 246, 0.3);
}

/* Brand Logo */
.dm-brand-logo {
  background: var(--dm-gradient);
  border-radius: 0.75rem;
  transition: box-shadow 0.3s ease;
}

html.dark .dm-brand-logo,
.dark .dm-brand-logo {
  box-shadow: 0 0 20px rgba(59, 130, 246, 0.25);
}

/* Section Header with Gradient Line */
.dm-section-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.dm-section-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--dm-border), transparent);
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(52, 211, 153, 0); }
}

@keyframes live-pulse-warning {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(251, 191, 36, 0); }
}

@keyframes live-pulse-error {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.4); }
  50% { opacity: 0.7; box-shadow: 0 0 0 4px rgba(248, 113, 113, 0); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}

@keyframes glow-pulse {
  0%, 100% { box-shadow: var(--dm-glow); }
  50% { box-shadow: var(--dm-glow-strong); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.dm-fade-in-up {
  animation: fade-in-up 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.dm-fade-in {
  animation: fade-in 0.3s ease both;
}

/* Staggered animation delays */
.dm-stagger-1 { animation-delay: 0.05s; }
.dm-stagger-2 { animation-delay: 0.1s; }
.dm-stagger-3 { animation-delay: 0.15s; }
.dm-stagger-4 { animation-delay: 0.2s; }
.dm-stagger-5 { animation-delay: 0.25s; }

/* ============================================
   DARK MODE TOGGLE
   ============================================ */
.dm-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0.375rem;
  background: transparent;
  border: 1px solid var(--dm-border);
  border-radius: 0.5rem;
  color: var(--dm-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.dm-toggle:hover {
  background-color: var(--dm-hover-bg);
  color: var(--dm-text);
}

.dm-toggle:focus-visible {
  outline: 2px solid var(--dm-platform);
  outline-offset: 2px;
}

.dm-toggle svg {
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s ease;
}

.dm-toggle:hover svg {
  transform: rotate(15deg);
}

/* Sun/Moon icon visibility */
.dm-toggle .icon-sun { display: none; }
.dm-toggle .icon-moon { display: block; }

html.dark .dm-toggle .icon-sun,
[data-theme="dark"] .dm-toggle .icon-sun { display: block; }

html.dark .dm-toggle .icon-moon,
[data-theme="dark"] .dm-toggle .icon-moon { display: none; }

@media (prefers-color-scheme: dark) {
  html:not(.light):not([data-theme="light"]) .dm-toggle .icon-sun { display: block; }
  html:not(.light):not([data-theme="light"]) .dm-toggle .icon-moon { display: none; }
}

/* Data attribute based icon visibility */
[data-dark-mode-target="sunIcon"] { display: none; }
[data-dark-mode-target="moonIcon"] { display: block; }

html.dark [data-dark-mode-target="sunIcon"],
[data-theme="dark"] [data-dark-mode-target="sunIcon"] { display: block; }

html.dark [data-dark-mode-target="moonIcon"],
[data-theme="dark"] [data-dark-mode-target="moonIcon"] { display: none; }

@media (prefers-color-scheme: dark) {
  html:not(.light):not([data-theme="light"]) [data-dark-mode-target="sunIcon"] { display: block; }
  html:not(.light):not([data-theme="light"]) [data-dark-mode-target="moonIcon"] { display: none; }
}

/* ============================================
   SCROLLBAR
   ============================================ */
html.dark ::-webkit-scrollbar,
[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

html.dark ::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
}

html.dark ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
}

html.dark ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* Enhanced scrollbar for specific containers */
html.dark .dm-scrollbar::-webkit-scrollbar,
.dark .dm-scrollbar::-webkit-scrollbar { width: 4px; }

html.dark .dm-scrollbar::-webkit-scrollbar-track,
.dark .dm-scrollbar::-webkit-scrollbar-track { background: transparent; }

html.dark .dm-scrollbar::-webkit-scrollbar-thumb,
.dark .dm-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 2px;
}

html.dark .dm-scrollbar::-webkit-scrollbar-thumb:hover,
.dark .dm-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ============================================
   TRANSITIONS
   ============================================ */
body,
.dm-card, .dm-card-flat, .dm-card-lift,
.dm-row, .dm-container, .dm-list-item,
.dm-sidebar, .dm-input, .dm-btn-secondary,
.dm-table-row {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Disable transitions on initial load */
html.no-transitions,
html.no-transitions * {
  transition: none !important;
}

/* ============================================
   TAILWIND UTILITY OVERRIDES FOR DARK MODE
   ============================================ */

/* Background Overrides */
.dark .bg-white { background-color: var(--dm-surface-solid); }

.dark .bg-gray-50 { background-color: var(--dm-bg); }
.dark .bg-gray-100 { background-color: var(--dm-surface-solid); }
.dark .bg-gray-200 { background-color: var(--dm-surface-alt-solid); }
.dark .bg-gray-600 { background-color: #374151; }
.dark .bg-gray-700 { background-color: #1f2937; }

.dark .bg-stone-50 { background-color: var(--dm-bg); }
.dark .bg-stone-100 { background-color: var(--dm-surface-solid); }
.dark .bg-stone-200 { background-color: var(--dm-surface-alt-solid); }
.dark .bg-stone-900 { background-color: #e4e4e4; }

.dark .bg-cream-50 { background-color: var(--dm-bg); }
.dark .bg-cream-100 { background-color: var(--dm-surface-solid); }
.dark .bg-cream-200 { background-color: var(--dm-surface-alt-solid); }
.dark .bg-cream-300 { background-color: #1e293b; }

.dark .bg-cream-50\/90 { background-color: rgba(11, 17, 32, 0.9) !important; }
.dark .bg-cream-50\/80 { background-color: rgba(11, 17, 32, 0.8) !important; }
.dark .bg-cream-100\/50 { background-color: rgba(15, 23, 42, 0.5) !important; }
.dark .hover\:bg-cream-100:hover { background-color: var(--dm-surface-alt-solid) !important; }

/* Text Color Overrides */
.dark .text-gray-500 { color: var(--dm-text-muted); }
.dark .text-gray-600 { color: var(--dm-text-secondary); }
.dark .text-gray-700 { color: var(--dm-text-secondary); }
.dark .text-gray-900 { color: var(--dm-text); }

.dark .text-stone-500 { color: var(--dm-text-muted); }
.dark .text-stone-600 { color: var(--dm-text-secondary); }
.dark .text-stone-700 { color: var(--dm-text-secondary); }
.dark .text-stone-800 { color: var(--dm-text); }

.dark .text-ink-400 { color: var(--dm-text-muted); }
.dark .text-ink-500 { color: var(--dm-text-muted); }
.dark .text-ink-600 { color: var(--dm-text-secondary); }
.dark .text-ink-700 { color: var(--dm-text-secondary); }
.dark .text-ink-900 { color: var(--dm-text); }
.dark .text-ink-950 { color: var(--dm-text); }

/* Border Color Overrides */
.dark .border-gray-200 { border-color: var(--dm-border); }
.dark .border-gray-300 { border-color: var(--dm-border); }
.dark .border-gray-400 { border-color: #374151; }

.dark .border-stone-200 { border-color: var(--dm-border); }
.dark .border-stone-300 { border-color: var(--dm-border); }

.dark .border-cream-200 { border-color: var(--dm-border); }
.dark .border-cream-100 { border-color: var(--dm-border-light); }
.dark .border-cream-300 { border-color: var(--dm-border); }

/* Divide Color Overrides */
.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dm-border); }
.dark .divide-gray-300 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dm-border); }
.dark .divide-stone-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--dm-border); }

/* Status Color Overrides - Success */
.dark .bg-green-50 { background-color: var(--dm-success-bg); }
.dark .bg-green-100 { background-color: var(--dm-success-bg); }
.dark .text-green-600 { color: var(--dm-success-text); }
.dark .text-green-700 { color: var(--dm-success-text); }
.dark .text-green-800 { color: var(--dm-success-text); }
.dark .border-green-400 { border-color: var(--dm-success-border); }
.dark .border-green-100 { border-color: var(--dm-success-border); }
.dark .bg-success-50 { background-color: var(--dm-success-bg); }
.dark .bg-success-500 { background-color: var(--dm-success); }
.dark .text-success-600 { color: var(--dm-success-text); }
.dark .text-success-500 { color: var(--dm-success); }

/* Status Color Overrides - Error */
.dark .bg-red-50 { background-color: var(--dm-error-bg); }
.dark .bg-red-100 { background-color: var(--dm-error-bg); }
.dark .text-red-600 { color: var(--dm-error-text); }
.dark .text-red-700 { color: var(--dm-error-text); }
.dark .border-red-200 { border-color: var(--dm-error-border); }
.dark .border-red-400 { border-color: var(--dm-error-border); }

/* Status Color Overrides - Warning */
.dark .bg-yellow-50 { background-color: var(--dm-warning-bg); }
.dark .bg-yellow-100 { background-color: var(--dm-warning-bg); }
.dark .text-yellow-600 { color: var(--dm-warning-text); }
.dark .text-yellow-700 { color: var(--dm-warning-text); }
.dark .text-yellow-800 { color: var(--dm-warning-text); }
.dark .border-yellow-200 { border-color: var(--dm-warning-border); }
.dark .border-yellow-400 { border-color: var(--dm-warning-border); }

/* Status Color Overrides - Info/Blue */
.dark .bg-blue-50 { background-color: var(--dm-info-bg); }
.dark .bg-blue-100 { background-color: var(--dm-info-bg); }
.dark .text-blue-600 { color: var(--dm-info-text); }
.dark .text-blue-700 { color: var(--dm-info-text); }
.dark .border-blue-100 { border-color: var(--dm-info-border); }
.dark .border-blue-500 { border-color: var(--dm-info); }
.dark .bg-blue-600 { background-color: var(--dm-info); }
.dark .bg-blue-700:hover,
.dark .hover\:bg-blue-700:hover { background-color: #2563eb; }

/* Orange */
.dark .text-orange-600 { color: #fb923c; }

/* Primary Brand Color Overrides */
.dark .bg-primary-50 { background-color: rgba(59, 130, 246, 0.08); }
.dark .bg-primary-100 { background-color: rgba(59, 130, 246, 0.12); }
.dark .border-primary-100 { border-color: rgba(59, 130, 246, 0.15); }
.dark .border-primary-200 { border-color: rgba(59, 130, 246, 0.2); }
.dark .from-primary-50 { --tw-gradient-from: rgba(59, 130, 246, 0.08) var(--tw-gradient-from-position); }
.dark .to-cream-100 { --tw-gradient-to: var(--dm-surface-solid) var(--tw-gradient-to-position); }

/* Shadow Overrides */
.dark .shadow-sm { box-shadow: var(--dm-shadow-sm); }
.dark .shadow { box-shadow: var(--dm-shadow-md); }
.dark .shadow-md { box-shadow: var(--dm-shadow-md); }
.dark .shadow-lg { box-shadow: var(--dm-shadow-lg); }
.dark .shadow-xl { box-shadow: var(--dm-shadow-xl); }

/* Ring/Focus Overrides */
.dark .ring-blue-500 { --tw-ring-color: var(--dm-info); }
.dark .focus\:ring-blue-500:focus { --tw-ring-color: var(--dm-info); }
.dark .focus\:border-blue-500:focus { border-color: var(--dm-info); }

/* Placeholder Overrides */
.dark .placeholder-ink-400::placeholder { color: var(--dm-text-placeholder); }
.dark .placeholder-gray-400::placeholder { color: var(--dm-text-placeholder); }
.dark .placeholder-gray-500::placeholder { color: var(--dm-text-placeholder); }

/* Table Overrides */
.dark table { border-color: var(--dm-border); }
.dark thead { background-color: var(--dm-surface-alt-solid); }
.dark th { color: var(--dm-text-muted); }
.dark tbody tr { border-color: var(--dm-border-light); }
.dark tbody tr:hover { background-color: var(--dm-hover-bg); }

/* Form Element Overrides */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="date"],
.dark input[type="number"],
.dark textarea,
.dark select {
  background-color: var(--dm-input-bg);
  border-color: var(--dm-input-border);
  color: var(--dm-text);
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--dm-text-placeholder);
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: var(--dm-accent-blue, #3b82f6);
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Modal/Overlay Overrides */
.dark .dm-overlay { background-color: rgba(0, 0, 0, 0.75); }

/* Link Color Overrides */
.dark .hover\:text-stone-700:hover { color: var(--dm-text); }
.dark .hover\:text-blue-700:hover { color: var(--dm-info-text); }

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
  :root,
  html.dark,
  [data-theme="dark"] {
    --dm-bg: #FAFAF9;
    --dm-surface: #FFFFFF;
    --dm-surface-alt: #F5F5F0;
    --dm-text: #1a1a1a;
    --dm-text-secondary: #6B6760;
    --dm-text-muted: #8B8780;
    --dm-border: #E8E5E0;
  }

  .dm-toggle { display: none; }
  .dm-gradient-mesh { display: none; }
}