/* Shared Dark Mode Styles for All Tools */

[theme='dark'] .kubectl-builder-page,
[theme='dark'] .regex-lab-page,
[theme='dark'] .regex-lab-layout,
[theme='dark'] .passgen-page,
[theme='dark'] .jwt-tools-page {
  --kubectl-bg: #0d1117;
  --kubectl-card-bg: #161b22;
  --kubectl-card-border: #30363d;
  --kubectl-accent: #58a6ff;
  --kubectl-accent-soft: rgba(88, 166, 255, 0.1);
  --kubectl-accent-strong: #79c0ff;
  --kubectl-text-main: #c9d1d9;
  --kubectl-text-muted: #8b949e;
  --kubectl-danger: #f85149;
  --kubectl-success: #3fb950;
  --kubectl-warning: #d29922;
  --kubectl-shadow-soft: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
  --kubectl-border-subtle: 1px solid #30363d;
  --kubectl-input-bg: #0d1117;
  --kubectl-input-border: #30363d;
  --kubectl-fieldset-bg: #161b22;

  /* Regex Lab variables */
  --regex-bg: #0d1117;
  --regex-card-bg: #161b22;
  --regex-border: #30363d;
  --regex-text: #c9d1d9;
  --regex-text-main: #c9d1d9;
  --regex-text-muted: #8b949e;
  --regex-accent: #58a6ff;
  --regex-accent-soft: rgba(88, 166, 255, 0.1);
  --regex-accent-strong: #79c0ff;
  --regex-input-bg: #0d1117;
  --regex-input-border: #30363d;
  --regex-fieldset-bg: #161b22;
  --regex-match-bg: rgba(88, 166, 255, 0.2);
  --regex-group-bg: rgba(163, 113, 247, 0.2);
  --regex-danger: #f85149;
  --regex-success: #3fb950;

  /* Password Gen variables */
  --passgen-bg: #0d1117;
  --passgen-card-bg: #161b22;
  --passgen-border: #30363d;
  --passgen-text: #c9d1d9;
  --passgen-text-muted: #8b949e;
  --passgen-accent: #58a6ff;
  --passgen-success: #3fb950;
  --passgen-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);

  /* JWT Tools variables */
  --jwt-bg: #0d1117;
  --jwt-card-bg: #161b22;
  --jwt-card-bg-alt: #0d1117;
  --jwt-border: #30363d;
  --jwt-card-border: #30363d;
  --jwt-text-main: #c9d1d9;
  --jwt-text-muted: #8b949e;
  --jwt-text-inverse: #ffffff;
  --jwt-accent-purple: #a855f7;
  --jwt-accent-purple-soft: #c9a0fd;
  --jwt-accent-purple-dark: #8b5cf6;
  --jwt-accent-purple-lighter: #a78bfa;
  --jwt-accent-purple-lightest: #c4b5fd;
  --jwt-input-bg: #0d1117;
  --jwt-input-border: #30363d;
  --jwt-input-border-focus: #a855f7;
  --jwt-btn-secondary-bg: #30363d;
  --jwt-btn-secondary-hover: #484f58;
  --jwt-success: #3fb950;
  --jwt-success-bg: #1b2b1b;
  --jwt-success-badge: #238636;
  --jwt-success-badge-hover: #2ea043;
  --jwt-error: #f85149;
  --jwt-error-bg: #2d1517;
  --jwt-error-badge: #da3633;
  --jwt-warning: #e3b341;
  --jwt-warning-bg: #3a2f1c;
  --jwt-warning-badge: #e3b341;
  --jwt-info: #58a6ff;
  --jwt-info-bg: #1c2a3a;
  --jwt-info-badge: #58a6ff;
  --jwt-tooltip-bg: #111827;
  --jwt-tooltip-text: #f9fafb;
}

/* Override specific backgrounds in dark mode */
[theme='dark'] .kubectl-card,
[theme='dark'] .regex-panel,
[theme='dark'] .regex-lab-card,
[theme='dark'] .regex-lab-fieldset,
[theme='dark'] .regex-lab-groups-panel,
[theme='dark'] .regex-lab-explanation-panel,
[theme='dark'] .regex-lab-highlight-preview,
[theme='dark'] .regex-lab-recipes,
[theme='dark'] .passgen-card,
[theme='dark'] .jwt-tools-page .tool-section,
[theme='dark'] .jwt-tools-page .card {
  background: var(--kubectl-card-bg) !important;
  border-color: var(--kubectl-card-border) !important;
}

/* Fix dark text on dark backgrounds */
[theme='dark'] .regex-lab-card-title,
[theme='dark'] .regex-lab-section-label,
[theme='dark'] .regex-lab-recipes-title {
  color: var(--kubectl-text-main) !important;
}

[theme='dark'] .kubectl-builder-page,
[theme='dark'] .regex-lab-page,
[theme='dark'] .regex-lab-layout,
[theme='dark'] .passgen-page,
[theme='dark'] .jwt-tools-page {
  background: var(--kubectl-bg) !important;
  color: var(--kubectl-text-main) !important;
}

/* Input fields in dark mode */
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) input,
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) select,
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) textarea {
  background: var(--kubectl-input-bg) !important;
  border-color: var(--kubectl-input-border) !important;
  color: var(--kubectl-text-main) !important;
}

[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) input:focus,
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) select:focus,
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) textarea:focus {
  border-color: var(--kubectl-accent) !important;
  outline: none;
  box-shadow: 0 0 0 3px var(--kubectl-accent-soft);
}

/* Buttons in dark mode */
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) button {
  background: var(--kubectl-card-bg) !important;
  border-color: var(--kubectl-card-border) !important;
  color: var(--kubectl-text-main) !important;
}

[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) button:hover {
  background: var(--kubectl-accent) !important;
  border-color: var(--kubectl-accent) !important;
  color: #ffffff !important;
}

/* Code blocks and monospace in dark mode */
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) code,
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) pre,
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) .kubectl-command-output,
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) .regex-pattern,
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) .passgen-output {
  background: var(--kubectl-input-bg) !important;
  color: var(--kubectl-text-main) !important;
  border-color: var(--kubectl-input-border) !important;
}

/* Range slider in dark mode - make it more visible */
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) .length-slider {
  background: linear-gradient(
    90deg,
    #c2185b,
    #ffcc33,
    #00f6ff
  ) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.2),
    0 0 10px rgba(88, 166, 255, 0.3) !important;
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) .length-slider::-webkit-slider-thumb {
  background: radial-gradient(circle at 30% 20%, #fff 0, #58a6ff 45%, #1f6feb 80%) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(88, 166, 255, 0.9) !important;
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) .length-slider::-moz-range-thumb {
  background: radial-gradient(circle at 30% 20%, #fff 0, #58a6ff 45%, #1f6feb 80%) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.9),
    0 0 10px rgba(88, 166, 255, 0.9) !important;
[theme='dark'] :is(.kubectl-builder-page, .regex-lab-page, .regex-lab-layout, .passgen-page, .jwt-tools-page) .length-slider::-moz-range-track {
  background: linear-gradient(
    90deg,
    #c2185b,
    #ffcc33,
    #00f6ff
  ) !important;
}

/* JWT Tools specific dark mode fixes */
[theme='dark'] .jwt-tools-page .btn-primary:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%) !important;
  color: #ffffff !important;
}

[theme='dark'] .jwt-tools-page .btn-secondary:hover {
  background: #484f58 !important;
  color: #c9d1d9 !important;
}

[theme='dark'] .jwt-tools-page .btn-toggle-active {
  background: #8b5cf6 !important;
  color: #ffffff !important;
}

[theme='dark'] .jwt-tools-page .tab-button.active {
  color: #c9d1d9 !important;
  border-bottom-color: #a855f7 !important;
}