/* ============================================
   DARK MODE STYLES - BrainzLab Standard
   ============================================
   Standardized dark mode implementation for all BrainzLab products.
   Uses `dm-*` prefix for CSS classes and `brainzlab-theme` localStorage key.

   Dark mode tokens from brainzlab-ui:
   - Dark bg: #121212
   - Dark surface: #1e1e1e
   - Dark surface light: #2a2a2a
   - Dark text: #e8e1d7
   - Dark text muted: #a0a0a0
   - Dark border: #333333
*/

/* ============================================
   CSS VARIABLES - Light Theme (Default)
   ============================================ */
:root {
  /* Core backgrounds */
  --dm-bg: #FAFAF9;
  --dm-surface: #FFFFFF;
  --dm-surface-alt: #F5F5F0;
  --dm-surface-hover: #F0EFED;

  /* Core text */
  --dm-text: #1a1a1a;
  --dm-text-secondary: #6B6760;
  --dm-text-muted: #8B8780;
  --dm-text-placeholder: #A5A29C;

  /* Core borders */
  --dm-border: #E8E5E0;
  --dm-border-light: #F0EFED;

  /* Interactive */
  --dm-input-bg: #FFFFFF;
  --dm-input-border: #E8E5E0;
  --dm-hover-bg: #F5F5F0;

  /* Code blocks */
  --dm-code-bg: #1A1A1A;
  --dm-code-text: #E8E5E0;

  /* Shadows */
  --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --dm-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
  --dm-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);

  /* Status colors - Light */
  --dm-success: #16A34A;
  --dm-success-bg: #DCFCE7;
  --dm-success-text: #166534;
  --dm-success-border: #A7F3D0;

  --dm-warning: #D97706;
  --dm-warning-bg: #FEF3C7;
  --dm-warning-text: #92400E;
  --dm-warning-border: #FDE68A;

  --dm-error: #DC2626;
  --dm-error-bg: #FEF2F2;
  --dm-error-text: #991B1B;
  --dm-error-border: #FECACA;

  --dm-info: #2563EB;
  --dm-info-bg: #EFF6FF;
  --dm-info-text: #1E40AF;
  --dm-info-border: #BFDBFE;

  /* Platform-specific: Brand accent (indigo) */
  --dm-platform: #6366F1;
  --dm-platform-dark: #4F46E5;
  --dm-platform-light: #818CF8;

  /* Dashboard-specific variables (used by inline styles in dashboard layout) */
  --text-primary: #1a1a1a;
  --text-secondary: #6B6760;
  --bg-surface-hover: #F0EFED;
  --accent-primary: #6366F1;
  --accent-primary-hover: #4F46E5;
  --accent-primary-bg: rgba(99, 102, 241, 0.1);
  --scrollbar-track: #F0EFED;
  --scrollbar-thumb: #D4D0C8;
  --scrollbar-thumb-hover: #B8B4AC;
}

/* ============================================
   CSS VARIABLES - Dark Theme (Terminal-Inspired)
   ============================================
   Designed for developers: true black backgrounds,
   high contrast text, minimal borders, terminal aesthetics.
*/
html.dark,
.dark,
[data-theme="dark"] {
  /* Core backgrounds - Terminal black */
  --dm-bg: #0a0a0a;
  --dm-surface: #111111;
  --dm-surface-alt: #161616;
  --dm-surface-hover: #1c1c1c;
  --dm-surface-light: #1a1a1a;

  /* Core text - High contrast */
  --dm-text: #e4e4e4;
  --dm-text-secondary: #a3a3a3;
  --dm-text-muted: #737373;
  --dm-text-placeholder: #525252;
  --dm-text-disabled: #404040;

  /* Core borders - Subtle, almost invisible */
  --dm-border: #262626;
  --dm-border-light: #1f1f1f;

  /* Interactive */
  --dm-input-bg: #161616;
  --dm-input-border: #262626;
  --dm-hover-bg: #1c1c1c;

  /* Code blocks - Pure black terminal */
  --dm-code-bg: #000000;
  --dm-code-text: #e4e4e4;

  /* Shadows - Subtle for flat design */
  --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --dm-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5);
  --dm-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5);

  /* Status colors - Terminal-inspired, vibrant */
  --dm-success: #4ade80;
  --dm-success-bg: rgba(74, 222, 128, 0.1);
  --dm-success-text: #86efac;
  --dm-success-border: rgba(74, 222, 128, 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-specific */
  --dm-platform: #818CF8;
  --dm-platform-dark: #6366F1;
  --dm-platform-light: #A5B4FC;

  /* Dashboard-specific variables (dark mode) */
  --text-primary: #e4e4e4;
  --text-secondary: #a3a3a3;
  --bg-surface-hover: #1c1c1c;
  --accent-primary: #818CF8;
  --accent-primary-hover: #6366F1;
  --accent-primary-bg: rgba(129, 140, 248, 0.15);
  --scrollbar-track: #1a1a1a;
  --scrollbar-thumb: #333333;
  --scrollbar-thumb-hover: #444444;
}

/* ============================================
   System Preference Support (Terminal-Inspired)
   ============================================ */
@media (prefers-color-scheme: dark) {
  html:not(.light):not([data-theme="light"]) {
    /* Core backgrounds - Terminal black */
    --dm-bg: #0a0a0a;
    --dm-surface: #111111;
    --dm-surface-alt: #161616;
    --dm-surface-hover: #1c1c1c;
    --dm-surface-light: #1a1a1a;

    /* Core text - High contrast */
    --dm-text: #e4e4e4;
    --dm-text-secondary: #a3a3a3;
    --dm-text-muted: #737373;
    --dm-text-placeholder: #525252;
    --dm-text-disabled: #404040;

    /* Core borders - Subtle */
    --dm-border: #262626;
    --dm-border-light: #1f1f1f;

    /* Interactive */
    --dm-input-bg: #161616;
    --dm-input-border: #262626;
    --dm-hover-bg: #1c1c1c;

    /* Code blocks */
    --dm-code-bg: #000000;
    --dm-code-text: #e4e4e4;

    /* Shadows */
    --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --dm-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5);
    --dm-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5);

    /* Status colors - Terminal-inspired */
    --dm-success: #4ade80;
    --dm-success-bg: rgba(74, 222, 128, 0.1);
    --dm-success-text: #86efac;
    --dm-success-border: rgba(74, 222, 128, 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 brand */
    --dm-platform: #818CF8;
    --dm-platform-dark: #6366F1;
    --dm-platform-light: #A5B4FC;

    /* Dashboard-specific variables (system preference dark) */
    --text-primary: #e4e4e4;
    --text-secondary: #a3a3a3;
    --bg-surface-hover: #1c1c1c;
    --accent-primary: #818CF8;
    --accent-primary-hover: #6366F1;
    --accent-primary-bg: rgba(129, 140, 248, 0.15);
    --scrollbar-track: #1a1a1a;
    --scrollbar-thumb: #333333;
    --scrollbar-thumb-hover: #444444;
  }
}

/* ============================================
   STANDARDIZED UTILITY CLASSES (dm-* prefix)
   ============================================ */

/* Body gradient - main page background */
.dm-body-gradient {
  background-color: var(--dm-bg);
  transition: background-color 0.2s ease;
}

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

/* Card component - bordered (default) */
.dm-card {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-border);
  box-shadow: var(--dm-shadow-sm);
}

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

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

/* Row component - flat style for lists (terminal-inspired) */
.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 with subtle border for grouping flat rows */
.dm-container {
  background-color: var(--dm-surface);
  border: 1px solid var(--dm-border);
  border-radius: 1rem;
  overflow: hidden;
}

/* Terminal-inspired list items */
.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);
}

/* Input component */
.dm-input {
  background-color: var(--dm-input-bg);
  border: 1px solid var(--dm-input-border);
  color: var(--dm-text);
}

.dm-input:focus {
  border-color: var(--dm-platform);
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

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

/* Button components */
.dm-btn-primary {
  background-color: var(--dm-text);
  color: var(--dm-bg);
}

.dm-btn-primary:hover {
  opacity: 0.9;
}

.dm-btn-secondary {
  background-color: var(--dm-surface-alt);
  border: 1px solid var(--dm-border);
  color: var(--dm-text-secondary);
}

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

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

.dm-table-row {
  border-bottom: 1px solid var(--dm-border-light);
}

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

/* Code block */
.dm-code {
  background-color: var(--dm-code-bg);
  color: var(--dm-code-text);
}

/* Sidebar */
.dm-sidebar {
  background-color: var(--dm-surface);
  border-right: 1px solid var(--dm-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);
}

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

/* ============================================
   Dark Mode Toggle Button
   ============================================ */
.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;
  }
}

/* Dark mode toggle icon visibility using data attributes */
[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 Dark Mode
   ============================================ */
html.dark ::-webkit-scrollbar,
[data-theme="dark"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html.dark ::-webkit-scrollbar-track,
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--dm-surface);
}

html.dark ::-webkit-scrollbar-thumb,
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--dm-border);
  border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover,
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #444444;
}

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

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

/* ============================================
   TAILWIND UTILITY OVERRIDES FOR DARK MODE
   ============================================
   These overrides ensure Tailwind utility classes
   used in templates work correctly in dark mode.
*/

/* ----------------------------------------
   Background Overrides
   ---------------------------------------- */

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

/* bg-gray-* -> dark equivalents */
.dark .bg-gray-50 {
  background-color: var(--dm-bg);
}

.dark .bg-gray-100 {
  background-color: var(--dm-surface);
}

.dark .bg-gray-200 {
  background-color: var(--dm-surface-alt);
}

.dark .bg-gray-600 {
  background-color: #4a4a4a;
}

.dark .bg-gray-700 {
  background-color: #3a3a3a;
}

/* bg-stone-* -> dark equivalents */
.dark .bg-stone-50 {
  background-color: var(--dm-bg);
}

.dark .bg-stone-100 {
  background-color: var(--dm-surface);
}

.dark .bg-stone-200 {
  background-color: var(--dm-surface-alt);
}

.dark .bg-stone-900 {
  background-color: #e8e1d7;
}

/* bg-cream-* -> dark equivalents (brainzlab-ui) */
.dark .bg-cream-50 {
  background-color: var(--dm-bg);
}

.dark .bg-cream-100 {
  background-color: var(--dm-surface);
}

.dark .bg-cream-200 {
  background-color: var(--dm-surface-alt);
}

.dark .bg-cream-300 {
  background-color: #2a2a2a;
}

/* Transparent backgrounds for nav/footer */
.dark .bg-cream-50\/90 {
  background-color: rgba(18, 18, 18, 0.9) !important;
}

.dark .bg-cream-50\/80 {
  background-color: rgba(18, 18, 18, 0.8) !important;
}

.dark .bg-cream-100\/50 {
  background-color: rgba(17, 17, 17, 0.5) !important;
}

.dark .hover\:bg-cream-100:hover {
  background-color: var(--dm-surface-alt) !important;
}

/* ----------------------------------------
   Text Color Overrides
   ---------------------------------------- */

/* text-gray-* -> dark equivalents */
.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);
}

/* text-stone-* -> dark equivalents */
.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);
}

/* text-ink-* -> dark equivalents (brainzlab-ui) */
.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
   ---------------------------------------- */

/* border-gray-* -> dark equivalents */
.dark .border-gray-200 {
  border-color: var(--dm-border);
}

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

.dark .border-gray-400 {
  border-color: #4a4a4a;
}

/* border-stone-* -> dark equivalents */
.dark .border-stone-200 {
  border-color: var(--dm-border);
}

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

/* border-cream-* -> dark equivalents (brainzlab-ui) */
.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/Alert 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);
}

/* brainzlab-ui success colors */
.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/Alert Color Overrides - Error/Danger
   ---------------------------------------- */

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

/* Blue buttons - keep visible but adjust */
.dark .bg-blue-600 {
  background-color: var(--dm-info);
}

.dark .bg-blue-700:hover,
.dark .hover\:bg-blue-700:hover {
  background-color: #2563eb;
}

/* ----------------------------------------
   Status/Alert Color Overrides - Orange
   ---------------------------------------- */

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

/* ----------------------------------------
   Primary Brand Color Overrides
   ---------------------------------------- */

.dark .bg-primary-50 {
  background-color: rgba(234, 88, 12, 0.1);
}

.dark .bg-primary-100 {
  background-color: rgba(234, 88, 12, 0.15);
}

.dark .border-primary-100 {
  border-color: rgba(234, 88, 12, 0.2);
}

.dark .border-primary-200 {
  border-color: rgba(234, 88, 12, 0.3);
}

/* Gradient overrides */
.dark .from-primary-50 {
  --tw-gradient-from: rgba(234, 88, 12, 0.1) var(--tw-gradient-from-position);
}

.dark .to-cream-100 {
  --tw-gradient-to: var(--dm-surface) 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-lg);
}

/* ----------------------------------------
   Ring Overrides (Focus states)
   ---------------------------------------- */

.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 Text 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-specific Overrides
   ---------------------------------------- */

.dark table {
  border-color: var(--dm-border);
}

.dark thead {
  background-color: var(--dm-surface-alt);
}

.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-platform);
  outline: none;
}

/* ----------------------------------------
   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 - Force Light Mode
   ============================================ */
@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;
  }
}