/* ============================================================
   DARK MODE OVERRIDES voor hardcoded kleuren in custom CSS files
   ============================================================
   Deze file overschrijft alle hardcoded #ffffff/#xxxxxx kleuren die in
   roles.css, dashboard.css, custom.css, etc. staan en niet via CSS
   variables zijn opgebouwd. Wordt geladen na de andere CSS files.
   ============================================================ */

/* ===== ROLES PAGINA ===== */
html.dark .roles-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}
html.dark .roles-card-header {
    background: #111827 !important;
    border-color: #374151 !important;
}
html.dark .roles-card-title,
html.dark .roles-page-title {
    color: #f3f4f6 !important;
}
html.dark .roles-form-label {
    color: #d1d5db !important;
}
html.dark .roles-form-input,
html.dark .roles-form-input:focus {
    background: #111827 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}
html.dark .roles-form-input::placeholder {
    color: #6b7280 !important;
}
html.dark .roles-form-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}
html.dark .permissions-group {
    background: #111827 !important;
    border-color: #374151 !important;
}
html.dark .permissions-group-title {
    color: #f3f4f6 !important;
}
html.dark .permission-item {
    background: #1f2937 !important;
    border-color: #374151 !important;
}
html.dark .permission-item:hover {
    background: #374151 !important;
    border-color: #4b5563 !important;
}
html.dark .permission-item label {
    color: #e5e7eb !important;
}
html.dark .permission-checkbox {
    accent-color: #6366f1;
}
html.dark .roles-btn-primary {
    background: #4f46e5 !important;
    color: #ffffff !important;
}
html.dark .roles-btn-primary:hover {
    background: #6366f1 !important;
}
html.dark .roles-btn-secondary {
    background: #374151 !important;
    color: #e5e7eb !important;
}
html.dark .roles-btn-secondary:hover {
    background: #4b5563 !important;
}
html.dark .roles-btn-danger {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fca5a5 !important;
}
html.dark .roles-btn-danger:hover {
    background: rgba(220, 38, 38, 0.25) !important;
}
html.dark .roles-btn-link {
    color: #9ca3af !important;
}
html.dark .roles-btn-link:hover {
    color: #f3f4f6 !important;
}
html.dark .roles-alert-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #86efac !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}
html.dark .roles-alert-error {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
}
html.dark .badge-users     { background: rgba(99, 102, 241, 0.15) !important; color: #c7d2fe !important; }
html.dark .badge-roles     { background: rgba(139, 92, 246, 0.15) !important; color: #ddd6fe !important; }
html.dark .badge-orphans   { background: rgba(16, 185, 129, 0.15) !important; color: #86efac !important; }
html.dark .badge-supporters{ background: rgba(244, 63, 94, 0.15) !important; color: #fda4af !important; }
html.dark .badge-categories{ background: rgba(14, 165, 233, 0.15) !important; color: #7dd3fc !important; }
html.dark .badge-forms     { background: rgba(245, 158, 11, 0.15) !important; color: #fcd34d !important; }
html.dark .badge-tickets   { background: rgba(249, 115, 22, 0.15) !important; color: #fdba74 !important; }
html.dark .badge-bank      { background: rgba(34, 197, 94, 0.15) !important; color: #86efac !important; }
html.dark .badge-audit     { background: rgba(168, 85, 247, 0.15) !important; color: #d8b4fe !important; }

html.dark .roles-table,
html.dark .roles-table th,
html.dark .roles-table td {
    background: #1f2937 !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}
html.dark .roles-table tr:hover {
    background: #374151 !important;
}

/* ===== DASHBOARD ===== */
html.dark .dashboard-welcome h1 {
    color: #f3f4f6 !important;
}
html.dark .dashboard-welcome p {
    color: #9ca3af !important;
}
html.dark .stats-card,
html.dark .activity-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}
html.dark .stats-card-title,
html.dark .activity-card-title {
    color: #f3f4f6 !important;
}
html.dark .stats-card-value {
    color: #f9fafb !important;
}
html.dark .stats-card-label,
html.dark .stats-card-badge {
    color: #9ca3af !important;
    background: rgba(75, 85, 99, 0.5) !important;
}

/* ===== CUSTOM.CSS / SIDEBAR ===== */
html.dark .sidebar,
html.dark .nav-container {
    background: #111827 !important;
    border-color: #1f2937 !important;
}
html.dark .nav-link {
    color: #d1d5db !important;
}
html.dark .nav-link:hover {
    background: #1f2937 !important;
    color: #ffffff !important;
}
html.dark .nav-link.active {
    background: #312e81 !important;
    color: #c7d2fe !important;
}
html.dark .logo-container {
    border-color: #1f2937 !important;
}
html.dark .user-profile,
html.dark .user-menu {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}
html.dark .main-content {
    background: #0f172a !important;
    color: #e5e7eb !important;
}
html.dark .page-title {
    color: #f3f4f6 !important;
}

/* Tabellen overal */
html.dark .table,
html.dark table {
    color: #e5e7eb !important;
}
html.dark .table th,
html.dark table th {
    background: #1f2937 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}
html.dark .table td,
html.dark table td {
    background: #111827 !important;
    border-color: #1f2937 !important;
    color: #d1d5db !important;
}
html.dark .table tr:hover td,
html.dark table tr:hover td {
    background: #1f2937 !important;
}

/* Form inputs algemeen */
html.dark input[type="text"]:not([class*="dark:"]),
html.dark input[type="email"]:not([class*="dark:"]),
html.dark input[type="password"]:not([class*="dark:"]),
html.dark input[type="number"]:not([class*="dark:"]),
html.dark input[type="date"]:not([class*="dark:"]),
html.dark input[type="search"]:not([class*="dark:"]),
html.dark select:not([class*="dark:"]),
html.dark textarea:not([class*="dark:"]) {
    background: #111827 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

/* Cards algemeen */
html.dark .card {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}
html.dark .card-header {
    background: #111827 !important;
    border-color: #374151 !important;
    color: #f3f4f6 !important;
}
html.dark .card-body {
    color: #d1d5db !important;
}

/* Algemene tekst */
html.dark .text-muted {
    color: #9ca3af !important;
}

/* ============================================================
   UITBREIDING — fixes voor specifieke pagina's
   ============================================================ */

/* ===== PROJECTEN PAGINA (.proj-* classes uit inline styles) ===== */
html.dark .proj-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
    color: #e5e7eb !important;
}
html.dark .proj-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
html.dark .proj-card-image,
html.dark .proj-card-image-placeholder {
    background-color: #374151 !important;
    color: #6b7280 !important;
}
html.dark .proj-card-name {
    color: #f3f4f6 !important;
}
html.dark .proj-card-actions {
    border-top-color: #374151 !important;
}
html.dark .proj-card-actions a,
html.dark .proj-card-actions button {
    color: #c7d2fe !important;
}
html.dark .proj-card-actions a:hover {
    color: #e0e7ff !important;
}
html.dark .proj-progress-bar {
    background: #374151 !important;
}
html.dark .proj-progress-amount {
    color: #f9fafb !important;
}
html.dark .proj-progress-pct {
    color: #818cf8 !important;
}
html.dark .proj-progress-goal {
    color: #9ca3af !important;
}
html.dark .proj-progress-detail {
    color: #6b7280 !important;
}
html.dark .proj-badge-actief {
    background: rgba(34, 197, 94, 0.18) !important;
    color: #86efac !important;
}
html.dark .proj-badge-afgerond {
    background: rgba(59, 130, 246, 0.18) !important;
    color: #93c5fd !important;
}
html.dark .proj-badge-gepauzeerd {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fcd34d !important;
}
html.dark .proj-badge-cat {
    background: #374151 !important;
    color: #d1d5db !important;
}
html.dark .proj-alert-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #86efac !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}
html.dark .proj-alert-error {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(220, 38, 38, 0.4) !important;
}

/* Projecten filter/zoek bar */
html.dark .proj-toolbar,
html.dark .proj-filters {
    background: #1f2937 !important;
    border-color: #374151 !important;
}
html.dark .proj-search-input,
html.dark .proj-sort-select {
    background: #111827 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}
html.dark .proj-filter-btn {
    background: #374151 !important;
    color: #d1d5db !important;
    border-color: #4b5563 !important;
}
html.dark .proj-filter-btn:hover {
    background: #4b5563 !important;
    color: #ffffff !important;
}
html.dark .proj-filter-btn.active {
    background: #111827 !important;
    color: #ffffff !important;
    border-color: #1f2937 !important;
}

/* Project header knoppen */
html.dark .proj-btn-add,
html.dark .proj-add-btn {
    background: #4f46e5 !important;
    color: #ffffff !important;
}
html.dark .proj-btn-add:hover {
    background: #6366f1 !important;
}

/* ===== ROLLEN — checkbox-label (de permission items) ===== */
html.dark .checkbox-label {
    background: #111827 !important;
    color: #d1d5db !important;
    border-color: #374151 !important;
}
html.dark .checkbox-label:hover {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
}
html.dark .checkbox-input {
    accent-color: #6366f1 !important;
}
html.dark .checkbox-grid {
    background: transparent !important;
}

/* Role list items */
html.dark .role-item {
    background: #1f2937 !important;
    border-color: #374151 !important;
}
html.dark .role-item-header {
    background: #111827 !important;
    color: #f3f4f6 !important;
    border-bottom-color: #374151 !important;
}
html.dark .role-name {
    color: #f3f4f6 !important;
}

/* ===== ALGEMENE TAILWIND DARK FALLBACKS ===== */
/* Voor categorieën pagina en andere die bg-white gebruiken zonder dark variant gecompileerd */
html.dark .bg-white:not([class*="dark:bg-"]) {
    background-color: #1f2937 !important;
}
html.dark .bg-gray-50:not([class*="dark:bg-"]) {
    background-color: #111827 !important;
}
html.dark .text-gray-900:not([class*="dark:text-"]) {
    color: #f3f4f6 !important;
}
html.dark .text-gray-700:not([class*="dark:text-"]) {
    color: #d1d5db !important;
}
html.dark .text-gray-600:not([class*="dark:text-"]) {
    color: #9ca3af !important;
}
html.dark .text-gray-500:not([class*="dark:text-"]) {
    color: #6b7280 !important;
}
html.dark .border-gray-200:not([class*="dark:border-"]),
html.dark .border-gray-300:not([class*="dark:border-"]) {
    border-color: #374151 !important;
}
html.dark .divide-gray-200 > * + * {
    border-color: #374151 !important;
}

/* Knoppen die default bg-blue-600 gebruiken (Toevoegen knop op categories) */
html.dark .bg-blue-600 {
    background-color: #4f46e5 !important;
}
html.dark .bg-blue-600:hover,
html.dark .hover\:bg-blue-700:hover {
    background-color: #6366f1 !important;
}

/* Form inputs algemeen (bredere selector) */
html.dark input.form-input,
html.dark input.form-control,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="search"],
html.dark input[type="date"],
html.dark input[type="tel"],
html.dark input[type="url"],
html.dark select,
html.dark textarea {
    background-color: #111827 !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #6b7280 !important;
}
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: #6366f1 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}

/* ===== MODAAL — modal-content moet donker zijn ===== */
html.dark .modal-content {
    background: #1f2937 !important;
    color: #e5e7eb !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}
html.dark .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7) !important;
}
html.dark .modal-header {
    border-bottom-color: #374151 !important;
    background: #111827 !important;
}
html.dark .modal-title {
    color: #f3f4f6 !important;
}
html.dark .modal-close,
html.dark .close-button {
    color: #9ca3af !important;
    background: transparent !important;
}
html.dark .modal-close:hover,
html.dark .close-button:hover {
    background: #374151 !important;
    color: #f3f4f6 !important;
}
html.dark .modal-body {
    background: #1f2937 !important;
    color: #d1d5db !important;
}
html.dark .modal-body label,
html.dark .modal-body .form-label {
    color: #d1d5db !important;
}
html.dark .modal-body small,
html.dark .modal-body .form-help,
html.dark .modal-body .help-text {
    color: #9ca3af !important;
}
html.dark .modal-footer {
    background: #111827 !important;
    border-top-color: #374151 !important;
}
html.dark .modal-footer .btn-secondary,
html.dark .modal-footer button[type="button"] {
    background: #374151 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
}
html.dark .modal-footer .btn-secondary:hover,
html.dark .modal-footer button[type="button"]:hover {
    background: #4b5563 !important;
}
html.dark .modal-footer .btn-primary,
html.dark .modal-footer button[type="submit"] {
    background: #4f46e5 !important;
    color: #ffffff !important;
    border-color: #4f46e5 !important;
}
html.dark .modal-footer .btn-primary:hover,
html.dark .modal-footer button[type="submit"]:hover {
    background: #6366f1 !important;
    border-color: #6366f1 !important;
}

/* Number input spinners in dark mode */
html.dark input[type="number"]::-webkit-inner-spin-button,
html.dark input[type="number"]::-webkit-outer-spin-button {
    filter: invert(0.9);
}
/* Date input calendar icon in dark mode */
html.dark input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.9);
    cursor: pointer;
}