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

/* 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 {
  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 {
  background: var(--kubectl-bg) !important;
  color: var(--kubectl-text-main) !important;
}

/* Input fields in dark mode */
[theme='dark'] input,
[theme='dark'] select,
[theme='dark'] textarea {
  background: var(--kubectl-input-bg) !important;
  border-color: var(--kubectl-input-border) !important;
  color: var(--kubectl-text-main) !important;
}

[theme='dark'] input:focus,
[theme='dark'] select:focus,
[theme='dark'] 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'] button {
  background: var(--kubectl-card-bg) !important;
  border-color: var(--kubectl-card-border) !important;
  color: var(--kubectl-text-main) !important;
}

[theme='dark'] 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'] code,
[theme='dark'] pre,
[theme='dark'] .kubectl-command-output,
[theme='dark'] .regex-pattern,
[theme='dark'] .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'] .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'] .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'] .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'] .length-slider::-moz-range-track {
  background: linear-gradient(
    90deg,
    #c2185b,
    #ffcc33,
    #00f6ff
  ) !important;
}