/**
 * Global Dark Mode Styles voor MyHR System
 * Automatische dark mode voor alle pagina's
 */

/* ============================================================
   Navigatie hover fix (light + dark mode)
   hover:text-white zit niet in pre-compiled tailwind.min.css.
   Actieve tab heeft text-blue-700 (blauw op blauw bij hover).
   Expliciete !important op anchor + children lost dit op.
   ============================================================ */
nav a:hover,
nav a:hover span,
nav a:hover i,
nav a:hover * {
    color: #ffffff !important;
}

/* Main content areas */
.dark main {
    background-color: #111827;
    color: #f3f4f6;
}

/* Cards en containers */
.dark .bg-white {
    background-color: #1f2937 !important;
}

.dark .bg-gray-50 {
    background-color: #111827 !important;
}

.dark .bg-gray-100 {
    background-color: #1f2937 !important;
}

/* Text colors */
.dark .text-gray-900 {
    color: #f3f4f6 !important;
}

.dark .text-gray-800 {
    color: #e5e7eb !important;
}

.dark .text-gray-700 {
    color: #d1d5db !important;
}

.dark .text-gray-600 {
    color: #9ca3af !important;
}

.dark .text-gray-500 {
    color: #6b7280 !important;
}

/* Borders */
.dark .border,
.dark .border-gray-200,
.dark .border-gray-300 {
    border-color: #374151 !important;
}

.dark .border-t {
    border-top-color: #374151 !important;
}

.dark .border-b {
    border-bottom-color: #374151 !important;
}

/* Shadows blijven subtiel in dark mode */
.dark .shadow,
.dark .shadow-md,
.dark .shadow-lg {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

/* Forms en inputs */
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="number"],
.dark input[type="tel"],
.dark input[type="url"],
.dark input[type="date"],
.dark textarea,
.dark select {
    background-color: #374151 !important;
    border-color: #4b5563 !important;
    color: #f3f4f6 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
    color: #9ca3af !important;
}

/* Buttons blijven gekleurd (blue, red, etc.) */
.dark .bg-blue-600:not(.hover\:bg-blue-700) {
    background-color: #2563eb !important;
}

/* Tables */
.dark table {
    color: #f3f4f6;
}

.dark th {
    background-color: #1f2937 !important;
    color: #f3f4f6 !important;
}

.dark td {
    border-color: #374151 !important;
}

.dark tr:hover td {
    background-color: #374151 !important;
}

/* Info boxes */
.dark .bg-blue-50 {
    background-color: #1e3a8a !important;
    border-color: #3b82f6 !important;
}

.dark .bg-blue-100 {
    background-color: #1e40af !important;
}

.dark .text-blue-800,
.dark .text-blue-900 {
    color: #93c5fd !important;
}

.dark .text-blue-700 {
    color: #60a5fa !important;
}

/* Success states */
.dark .bg-green-50 {
    background-color: #064e3b !important;
}

.dark .text-green-800,
.dark .text-green-900 {
    color: #86efac !important;
}

/* Warning states */
.dark .bg-yellow-50 {
    background-color: #713f12 !important;
}

.dark .text-yellow-800,
.dark .text-yellow-900 {
    color: #fde047 !important;
}

/* Error states */
.dark .bg-red-50 {
    background-color: #7f1d1d !important;
}

.dark .text-red-800,
.dark .text-red-900 {
    color: #fca5a5 !important;
}

/* Links blijven blauw maar lichter (beperkt tot main content).
   Exclude anchors that already carry color/bg utility classes so
   Tailwind `text-`/`bg-` utilities keep precedence. */
.dark main a:not([class*="bg-"]):not([class*="text-"]) {
    color: #60a5fa;
}

.dark main a:not([class*="bg-"]):not([class*="text-"]) :hover,
.dark main a:not([class*="bg-"]):not([class*="text-"]):hover {
    color: #93c5fd;
}

/* Icons: laat individuele icon-kleuren via Tailwind utilities gelden (geen inherit) */


/* Specifiek voor witte kaarten: alleen elementen die `bg-white rounded-lg` hadden */
.dark .bg-white.rounded-lg {
    background-color: #1f2937 !important;
}