/**
 * KC Nijmegen - Dark Mode Stylesheet
 * All dark mode styles consolidated in one file
 *
 * @package KCNijmegen
 * @version 1.0.0
 */

@media (prefers-color-scheme: dark) {

    /* ==========================================================================
       CSS Variables for Dark Mode
       ========================================================================== */
    :root {
        --primary-color: #10b981;
        --primary-light: #34d399;
        --primary-accent: #059669;
        --primary-dark: #047857;
        --primary-darker: #065f46;
        --primary-lightest: #064e3b;

        --text-color: #f3f4f6;
        --text-light: #d1d5db;
        --text-muted: #9ca3af;
        --text-on-primary: #ffffff;

        --bg-color: #111827;
        --bg-light: #1f2937;
        --bg-dark: #030712;

        --border-color: #374151;

        --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
        --shadow-md: 0 4px 6px rgba(0,0,0,0.4);
        --shadow-lg: 0 10px 25px rgba(0,0,0,0.5);
    }

    /* ==========================================================================
       Base Elements
       ========================================================================== */
    body {
        background-color: #111827 !important;
        color: #f3f4f6 !important;
    }

    /* Force light text on all elements */
    body *,
    html * {
        color: #f3f4f6;
    }

    /* Headings */
    h1, h2, h3, h4, h5, h6,
    h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
        color: #ffffff !important;
    }

    /* Paragraphs and text elements */
    p, span, div, li, td, th, label, legend {
        color: #e5e7eb !important;
    }

    /* Page titles */
    .page-title,
    .entry-title {
        color: #ffffff !important;
    }

    /* Links */
    a {
        color: #34d399 !important;
    }

    a:hover {
        color: #6ee7b7 !important;
    }

    /* Strong and emphasis */
    strong, b {
        color: #ffffff !important;
    }

    em, i {
        color: #d1d5db !important;
    }

    /* ==========================================================================
       Header
       ========================================================================== */
    .header-top,
    .site-header .header-top {
        background-color: #111827 !important;
    }

    .header-top *,
    .header-top a,
    .header-top-content,
    .header-top-content *,
    .quick-links,
    .quick-links *,
    .header-contact,
    .header-contact * {
        color: #f3f4f6 !important;
    }

    .header-top a:hover {
        color: #34d399 !important;
    }

    .header-top .dashicons {
        color: #34d399 !important;
    }

    .site-header {
        background: linear-gradient(135deg, #047857 0%, #065f46 100%) !important;
        border-bottom: 1px solid #374151;
    }

    .site-header * {
        color: #ffffff !important;
    }

    /* ==========================================================================
       Navigation
       ========================================================================== */
    .main-navigation {
        background-color: rgba(0, 0, 0, 0.2);
    }

    .main-navigation a,
    .menu-item a {
        color: #ffffff !important;
    }

    .main-navigation a:hover,
    .main-navigation .current-menu-item > a {
        background-color: #059669 !important;
        color: white !important;
    }

    /* Dropdown/Submenu */
    .sub-menu,
    .sub-menu *,
    ul.sub-menu,
    ul.sub-menu li,
    ul.sub-menu li a {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    .sub-menu a:hover,
    .sub-menu li:hover > a {
        color: #ffffff !important;
        background-color: #374151 !important;
    }

    /* Mobile menu */
    .mobile-menu {
        background-color: #1f2937 !important;
        border: 1px solid #374151 !important;
    }

    .mobile-menu a {
        color: #f3f4f6 !important;
        border-bottom: 1px solid #374151 !important;
    }

    .menu-toggle {
        background-color: #047857 !important;
        border: 1px solid #34d399 !important;
    }

    .menu-toggle:hover {
        background-color: #059669 !important;
    }

    /* ==========================================================================
       Content Areas
       ========================================================================== */
    .site-content,
    .content-area,
    article,
    main {
        background-color: #1f2937 !important;
    }

    .entry-content,
    .entry-content *,
    .page-content,
    .page-content *,
    .post-content,
    .post-content * {
        color: #e5e7eb !important;
    }

    /* Ensure paragraphs and list items are clearly readable */
    .entry-content p,
    .page-content p,
    .post-content p,
    article p {
        color: #e5e7eb !important;
    }

    .entry-content li,
    .page-content li,
    .post-content li,
    article li {
        color: #e5e7eb !important;
    }

    /* Subheadings in content */
    .entry-content h3,
    .entry-content h4,
    .page-content h3,
    .page-content h4 {
        color: #34d399 !important;
    }

    /* ==========================================================================
       Cards and Boxes
       ========================================================================== */
    .card,
    .widget,
    .sidebar-widget,
    .dashboard-card,
    .course-card,
    .post-card {
        background-color: #1f2937 !important;
        border-color: #374151 !important;
    }

    .card-header,
    .widget-header,
    .panel-heading {
        background-color: #059669 !important;
        color: #ffffff !important;
    }

    /* Course Info Card - sidebar */
    .course-info-card,
    .course-info-card * {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    .course-info-card h3 {
        color: #34d399 !important;
    }

    .course-details-list li,
    .course-details-list li * {
        color: #e5e7eb !important;
    }

    .course-details-list .dashicons {
        color: #34d399 !important;
    }

    .course-enrollment {
        border-top-color: #374151 !important;
    }

    .login-message {
        color: #9ca3af !important;
    }

    /* Course Enrollment Form */
    .course-enrollment-form,
    .course-enrollment-form * {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    .course-enrollment-form h3 {
        color: #34d399 !important;
    }

    .course-enrollment-form label {
        color: #e5e7eb !important;
    }

    .course-enrollment-form input,
    .course-enrollment-form select,
    .course-enrollment-form textarea {
        background-color: #374151 !important;
        border-color: #4b5563 !important;
        color: #f3f4f6 !important;
    }

    .course-enrollment-form input::placeholder,
    .course-enrollment-form textarea::placeholder {
        color: #9ca3af !important;
    }

    .course-enrollment-form .schedule-info {
        background-color: #1e3a5f !important;
        color: #7dd3fc !important;
    }

    .course-enrollment-form .schedule-list li {
        border-bottom-color: #374151 !important;
        color: #e5e7eb !important;
    }

    .course-enrollment-form a {
        color: #34d399 !important;
    }

    /* Enrollment status boxes */
    .enrollment-closed,
    .enrollment-login-required,
    .course-full {
        background-color: #374151 !important;
        color: #f3f4f6 !important;
    }

    .already-enrolled {
        background-color: #064e3b !important;
        color: #6ee7b7 !important;
        border-color: #065f46 !important;
    }

    /* ==========================================================================
       Forms
       ========================================================================== */
    input,
    textarea,
    select {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
        border-color: #374151 !important;
    }

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

    input:focus,
    textarea:focus,
    select:focus {
        border-color: #34d399 !important;
        box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.1) !important;
    }

    /* Checkboxes and labels */
    .form-group label,
    .enrollment-form label,
    .enrollment-form label * {
        color: #d1d5db !important;
    }

    /* ==========================================================================
       Buttons
       ========================================================================== */
    button,
    .btn,
    input[type="submit"],
    input[type="button"] {
        color: #ffffff !important;
    }

    .btn-primary {
        background-color: #059669 !important;
    }

    .btn-primary:hover {
        background-color: #047857 !important;
    }

    .btn-outline {
        background: transparent !important;
        border-color: #34d399 !important;
        color: #34d399 !important;
    }

    .btn-outline:hover {
        background-color: #34d399 !important;
        color: #111827 !important;
    }

    /* ==========================================================================
       Alerts and Notices
       ========================================================================== */
    .alert-error {
        background-color: #7f1d1d !important;
        color: #fca5a5 !important;
        border-color: #991b1b !important;
    }

    .alert-success {
        background-color: #064e3b !important;
        color: #6ee7b7 !important;
        border-color: #065f46 !important;
    }

    .alert-info {
        background-color: #1e3a5f !important;
        color: #7dd3fc !important;
        border-color: #0369a1 !important;
    }

    .alert-warning {
        background-color: #78350f !important;
        color: #fcd34d !important;
        border-color: #92400e !important;
    }

    .single-course .alert-success {
        background-color: #064e3b !important;
        color: #6ee7b7 !important;
        border-color: #065f46 !important;
    }

    .single-course .alert-info {
        background-color: #1e3a5f !important;
        color: #7dd3fc !important;
        border-color: #0369a1 !important;
    }

    .single-course .alert-warning {
        background-color: #78350f !important;
        color: #fcd34d !important;
        border-color: #92400e !important;
    }

    /* Gallery Notice */
    .gallery-notice,
    .gallery-notice *,
    .notice-box,
    .notice-box * {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
        border-color: #374151 !important;
    }

    /* ==========================================================================
       Tables
       ========================================================================== */
    table {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
        border-color: #374151 !important;
    }

    table,
    table *,
    .entry-content table,
    .entry-content table * {
        border-color: #374151 !important;
    }

    th,
    thead tr,
    table thead tr {
        background-color: #111827 !important;
        color: #ffffff !important;
    }

    /* Override inline styles on table headers */
    tr[style*="background: #f5f5f5"],
    tr[style*="background:#f5f5f5"],
    tr[style*="background: rgb(245"],
    thead tr[style] {
        background-color: #111827 !important;
    }

    td,
    tbody td {
        color: #f3f4f6 !important;
        border-color: #374151 !important;
        background-color: #1f2937 !important;
    }

    /* Override inline styles on table cells */
    td[style*="border: 1px solid #ddd"],
    td[style*="border:1px solid #ddd"],
    th[style*="border: 1px solid #ddd"],
    th[style*="border:1px solid #ddd"] {
        border-color: #374151 !important;
        background-color: #1f2937 !important;
    }

    th[style*="border: 1px solid #ddd"],
    th[style*="border:1px solid #ddd"] {
        background-color: #111827 !important;
    }

    /* Zebra striping for tables */
    tbody tr:nth-child(even) {
        background-color: #111827 !important;
    }

    tbody tr:nth-child(odd) {
        background-color: #1f2937 !important;
    }

    /* ==========================================================================
       Footer
       ========================================================================== */
    .site-footer {
        background-color: #065f46 !important;
        border-top: 1px solid #374151;
    }

    .site-footer,
    .site-footer * {
        color: #d1d5db !important;
    }

    .site-footer a {
        color: #34d399 !important;
    }

    .site-footer a:hover {
        color: #6ee7b7 !important;
    }

    /* ==========================================================================
       Sidebar and Widgets
       ========================================================================== */
    .sidebar,
    .sidebar * {
        color: #f3f4f6 !important;
    }

    .widget-title {
        color: #ffffff !important;
    }

    /* ==========================================================================
       Pagination
       ========================================================================== */
    .pagination a,
    .page-numbers {
        background-color: #1f2937 !important;
        color: #34d399 !important;
        border-color: #374151 !important;
    }

    .pagination .current {
        background-color: #059669 !important;
        color: #ffffff !important;
    }

    /* ==========================================================================
       Meta and Breadcrumbs
       ========================================================================== */
    .entry-meta,
    .entry-meta *,
    .post-meta,
    .post-meta * {
        color: #9ca3af !important;
    }

    .breadcrumbs,
    .breadcrumbs * {
        color: #9ca3af !important;
    }

    /* ==========================================================================
       Code and Pre
       ========================================================================== */
    code,
    pre,
    kbd,
    samp {
        background-color: #111827 !important;
        color: #34d399 !important;
    }

    /* ==========================================================================
       Blockquotes
       ========================================================================== */
    blockquote,
    blockquote * {
        color: #d1d5db !important;
        border-left-color: #34d399 !important;
    }

    /* ==========================================================================
       Horizontal Rules
       ========================================================================== */
    hr {
        border-color: #374151 !important;
    }

    /* ==========================================================================
       Cookie Consent
       ========================================================================== */
    .cookie-consent {
        background-color: #1f2937 !important;
        border-color: #34d399 !important;
        color: #f3f4f6 !important;
    }

    .cookie-consent * {
        color: #f3f4f6 !important;
    }

    /* ==========================================================================
       Announcement Bar
       ========================================================================== */
    .announcements-bar {
        background-color: #047857 !important;
        border-bottom: 1px solid #34d399 !important;
    }

    /* ==========================================================================
       Dashboard
       ========================================================================== */
    .dashboard,
    .dashboard-container,
    .user-dashboard {
        background-color: #111827 !important;
    }

    .dashboard-header,
    .utility-bar,
    .top-bar,
    .user-welcome,
    .dashboard-nav {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    .dashboard-card,
    .dashboard-widget,
    .card-body,
    .widget-content,
    .panel,
    .panel-body {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    .dashboard-card button,
    .dashboard-widget button,
    .card button {
        background-color: #374151 !important;
        color: #f3f4f6 !important;
    }

    .dashboard-card button:hover,
    .dashboard-widget button:hover,
    .card button:hover {
        background-color: #4b5563 !important;
        color: #ffffff !important;
    }

    /* ==========================================================================
       Hero Section
       ========================================================================== */
    .hero-enhanced {
        background: linear-gradient(135deg, #065f46 0%, #047857 100%) !important;
    }

    /* ==========================================================================
       Login Page
       ========================================================================== */
    .login-container,
    .auth-form-container {
        background-color: #1f2937 !important;
    }

    .login-container *,
    .auth-form-container * {
        color: #f3f4f6 !important;
    }

    .login-container h1,
    .login-container h2,
    .auth-form-container h1 {
        color: #ffffff !important;
    }

    .login-container input,
    .auth-form-container input {
        background-color: #111827 !important;
        border-color: #374151 !important;
        color: #f3f4f6 !important;
    }

    .login-container a,
    .auth-form-container a {
        color: #34d399 !important;
    }

    /* ==========================================================================
       Search
       ========================================================================== */
    .search-form input[type="search"] {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    /* ==========================================================================
       WordPress Admin Bar
       ========================================================================== */
    #wpadminbar,
    #wpadminbar * {
        background-color: #111827 !important;
        color: #f3f4f6 !important;
    }

    #wpadminbar a,
    #wpadminbar a * {
        color: #34d399 !important;
    }

    #wpadminbar a:hover {
        color: #6ee7b7 !important;
        background-color: #1f2937 !important;
    }

    /* ==========================================================================
       Status Badges
       ========================================================================== */
    .badge-success,
    .status-enrolled {
        background-color: #047857 !important;
        color: #d1fae5 !important;
    }

    /* ==========================================================================
       Loading States
       ========================================================================== */
    .loading,
    .spinner {
        color: #34d399 !important;
    }

    /* ==========================================================================
       Empty States
       ========================================================================== */
    .empty-state,
    .no-content,
    .placeholder-text {
        color: #9ca3af !important;
    }

    /* ==========================================================================
       Archive Items
       ========================================================================== */
    .archive-item,
    .archive-item *,
    .list-item,
    .list-item * {
        background-color: #1f2937 !important;
        color: #f3f4f6 !important;
    }

    /* ==========================================================================
       Divi Builder Compatibility
       ========================================================================== */
    .et_pb_text,
    .et_pb_text *,
    .et_pb_module,
    .et_pb_module *,
    .et_pb_section,
    .et_pb_section *,
    .et_pb_row,
    .et_pb_row * {
        color: #f3f4f6 !important;
    }

    .et_pb_text h1,
    .et_pb_text h2,
    .et_pb_text h3,
    .et_pb_text h4,
    .et_pb_text h5,
    .et_pb_text h6 {
        color: #ffffff !important;
    }

    /* ==========================================================================
       WordPress Blocks
       ========================================================================== */
    .wp-block-group,
    .wp-block-group *,
    .wp-block-column,
    .wp-block-column *,
    .wp-block-columns,
    .wp-block-columns * {
        color: #f3f4f6 !important;
    }

    /* ==========================================================================
       Comment Form
       ========================================================================== */
    .comment-form,
    .comment-form *,
    #respond,
    #respond *,
    .comment-reply-title,
    .comment-reply-title * {
        color: #f3f4f6 !important;
    }

    /* ==========================================================================
       Fix for Inline Styles with Dark Colors
       ========================================================================== */
    [style*="color: #000"],
    [style*="color: #333"],
    [style*="color: black"],
    [style*="color: rgb(0"],
    [style*="color: rgb(51"] {
        color: #f3f4f6 !important;
    }


    /* ==========================================================================
       Hero Section - Homepage
       ========================================================================== */
    .hero-fullwidth .btn-hero-primary {
        background: white !important;
        color: #2e7d32 !important;
    }

    .hero-fullwidth .btn-hero-primary:hover {
        background: #f5f5f5 !important;
        color: #2e7d32 !important;
    }

    .hero-fullwidth .btn-hero-secondary {
        background: transparent !important;
        color: white !important;
        border-color: white !important;
    }

    /* Ensure hero image is visible */
    .hero-image-container .hero-image {
        opacity: 1 !important;
        z-index: 1;
    }

    .hero-image-container::before {
        z-index: 0;
    }


    /* Outline large button (Bekijk Alle Cursussen) */
    .btn-outline-large {
        background: transparent !important;
        color: #34d399 !important;
        border-color: #34d399 !important;
    }

    .btn-outline-large:hover {
        background: #34d399 !important;
        color: #111827 !important;
    }
} /* End of @media (prefers-color-scheme: dark) */