/* Dark Mode CSS - Minimale impact implementatie */

/* CSS Custom Properties voor color scheme */
:root {
  --bg-color: #ffffff;
  --text-color: #212529;
  --card-bg: #ffffff;
  --border-color: #dee2e6;
  --input-bg: #ffffff;
  --input-border: #ced4da;
  --btn-outline-border: #6c757d;
  --hint-color: #6c757d;
}

/* Dark mode colors - Verbeterde leesbaarheid */
:root[data-theme="dark"] {
  --bg-color: #1e1e1e; /* Iets lichter dan pure zwart voor betere leesbaarheid */
  --text-color: #f0f0f0; /* Helderder wit voor betere contrast */
  --card-bg: #2d2d2d; /* Iets lichter grijs voor cards */
  --border-color: #404040; /* Zichtbaardere borders */
  --input-bg: #383838; /* Lichter dan background voor duidelijk onderscheid */
  --input-border: #555555; /* Betere zichtbaarheid van form elementen */
  --btn-outline-border: #cccccc; /* Veel beter zichtbaar */
  --hint-color: #e0e0e0; /* Veel helderder voor voorbeeld/bijvoorbeeld teksten */
}

/* Respecteer systeem voorkeur als geen manual toggle is gedaan - Verbeterde kleuren */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-color: #1e1e1e;
    --text-color: #f0f0f0;
    --card-bg: #2d2d2d;
    --border-color: #404040;
    --input-bg: #383838;
    --input-border: #555555;
    --btn-outline-border: #cccccc;
    --hint-color: #e0e0e0; /* Ook hier de verbeterde hint kleur */
  }
}

/* Apply dark mode styles */
body {
  background-color: var(--bg-color) !important;
  color: var(--text-color) !important;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Form controls */
.form-control {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-color) !important;
}

.form-control:focus {
  background-color: var(--input-bg) !important;
  border-color: #0d6efd !important;
  color: var(--text-color) !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

.form-select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-color) !important;
}

/* Cards and containers */
.card {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
}

/* Tables */
.table {
  color: var(--text-color) !important;
}

.table-bordered {
  border-color: var(--border-color) !important;
}

.table-bordered th,
.table-bordered td {
  border-color: var(--border-color) !important;
}

/* Hints and secondary text */
.hint {
  color: var(--hint-color) !important;
}

/* Button outlines */
.btn-outline-secondary {
  color: var(--btn-outline-border) !important;
  border-color: var(--btn-outline-border) !important;
}

.btn-outline-secondary:hover {
  background-color: var(--btn-outline-border) !important;
  border-color: var(--btn-outline-border) !important;
}

.btn-outline-danger {
  color: #dc3545 !important;
  border-color: #dc3545 !important;
}

/* Dark mode toggle button styling */
.dark-mode-toggle {
  position: fixed;
  top: 45px; /* Was 35px, nu naar 45px voor betere positie */
  right: 20px;
  z-index: 1060;
  background: none;
  border: 2px solid var(--text-color);
  border-radius: 50%;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 1.2rem;
  color: var(--text-color);
}

.dark-mode-toggle:hover {
  background-color: var(--text-color);
  color: var(--bg-color);
  transform: scale(1.1);
}

/* Logo werkt automatisch - transparant logo heeft geen aanpassingen nodig */

/* Modal support for dark mode */
.modal-content {
  background-color: var(--card-bg) !important;
  color: var(--text-color) !important;
}

.modal-header,
.modal-footer {
  border-color: var(--border-color) !important;
}

/* Toast/Alert support */
.alert {
  background-color: var(--card-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

/* Language switcher dropdown */
select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-color) !important;
}

/* Audio controls */
audio {
  filter: var(--audio-filter, none);
}

:root[data-theme="dark"] audio {
  --audio-filter: invert(1) hue-rotate(180deg);
}

/* SSML info section dark mode support */
.ssml-info {
  background-color: var(--card-bg) !important;
  border-left-color: var(--border-color) !important;
  color: var(--text-color) !important;
}

/* Extra verbeteringen voor betere leesbaarheid */
/* Links moeten zichtbaar blijven in dark mode */
:root[data-theme="dark"] a {
  color: #66b3ff !important; /* Lichtblauw voor betere zichtbaarheid */
}

:root[data-theme="dark"] a:hover {
  color: #4da6ff !important;
}

/* Bootstrap button verbeteringen in dark mode */
:root[data-theme="dark"] .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

:root[data-theme="dark"] .btn-secondary {
  background-color: #6c757d !important;
  border-color: #6c757d !important;
  color: #ffffff !important;
}

/* Verbeterde contrast voor placeholder en voorbeeld teksten */
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder {
  color: #cccccc !important; /* Veel helderder dan standaard placeholder */
  opacity: 1 !important;
}

/* Specifieke verbetering voor "bijvoorbeeld" en "voorbeeld" teksten */
:root[data-theme="dark"] .hint,
:root[data-theme="dark"] small,
:root[data-theme="dark"] .form-text {
  color: var(--hint-color) !important; /* Gebruikt de verbeterde hint kleur #e0e0e0 */
}