/* Dark Mode Overrides */
:root {
    --kl-off-white: #e3e3e3;
    --kl-dark-bg: #121212;
    --kl-card-bg: #1e1e1e;
    --kl-border-color: #333333;
}

[data-bs-theme="dark"] body {
    background-color: var(--kl-dark-bg);
    color: var(--kl-off-white);
}

[data-bs-theme="dark"] .bg-light {
    background-color: #1e1e1e !important;
    color: var(--kl-off-white) !important;
}

[data-bs-theme="dark"] .text-muted {
    color: #a0a0a0 !important;
}

/* Card Improvements */
[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .timeline-content,
[data-bs-theme="dark"] .stat-card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .list-group-item,
[data-bs-theme="dark"] .player-card, 
[data-bs-theme="dark"] .action-type-card,
[data-bs-theme="dark"] .player-select-card {
    background-color: var(--kl-card-bg);
    color: var(--kl-off-white);
    border-color: var(--kl-border-color);
}

[data-bs-theme="dark"] .card-header {
    background-color: rgba(255, 255, 255, 0.05);
    border-bottom-color: var(--kl-border-color);
    color: var(--kl-off-white);
}

/* Fix voor witte teksten */
[data-bs-theme="dark"] .card-title,
[data-bs-theme="dark"] .card-text,
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, 
[data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .fw-bold {
    color: var(--kl-off-white);
}

/* Fix root/ index.ejs titles and scores */
[data-bs-theme="dark"] .score-display {
    color: var(--kl-off-white);
}
[data-bs-theme="dark"] .badge.bg-light.text-dark {
    background-color: #333 !important;
    color: var(--kl-off-white) !important;
    border-color: #444 !important;
}

/* Tables */
[data-bs-theme="dark"] .table {
    border-color: var(--kl-border-color);
    color: var(--kl-off-white);
    --bs-table-color: var(--kl-off-white);
    --bs-table-bg: transparent;
}

[data-bs-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(255,255,255, 0.03); 
    color: var(--kl-off-white);
}

/* Table Hover fix: Lighter background instead of white text change */
[data-bs-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255, 0.08);
    color: var(--kl-off-white);
}
/* Ensure links in tables stay readable on hover */
[data-bs-theme="dark"] .table-hover > tbody > tr:hover a {
    color: #6ea8fe; 
}

/* Search Bars and Input Groups */
[data-bs-theme="dark"] .input-group-text.bg-light {
    background-color: #1e1e1e !important; /* Match form-control bg */
    border-color: var(--kl-border-color);
    color: var(--kl-off-white);
}

[data-bs-theme="dark"] .input-group-text i {
    color: #a0a0a0;
}

[data-bs-theme="dark"] .btn-outline-dark {
    color: var(--kl-off-white);
    border-color: var(--kl-off-white);
}
[data-bs-theme="dark"] .btn-outline-dark:hover {
    background-color: var(--kl-off-white);
    color: var(--kl-dark-bg);
}

/* Admin Shortcuts / Cards titles */
[data-bs-theme="dark"] .text-dark {
    color: var(--kl-off-white) !important;
}

/* 3-dots menu in admin (dropdown toggle) */
[data-bs-theme="dark"] .btn-link.text-dark,
[data-bs-theme="dark"] .text-secondary {
    color: #b0b0b0 !important;
}

/* Modals */
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer {
    border-color: var(--kl-border-color);
}
[data-bs-theme="dark"] .modal-title {
    color: var(--kl-off-white);
}

[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Timeline lijn */
[data-bs-theme="dark"] .timeline::before {
    background: var(--kl-border-color);
}

/* Timeline Content - Lighter background for visibility */
[data-bs-theme="dark"] .timeline-content {
    background-color: #2c2c2c !important;
    border: 1px solid #444;
    color: var(--kl-off-white);
}

/* Match Top Buttons (Nav Pills) */
[data-bs-theme="dark"] .nav-pills-custom .nav-link {
    background-color: #2c2c2c !important;
    color: #b0b0b0 !important;
    border-color: #444 !important;
}
[data-bs-theme="dark"] .nav-pills-custom .nav-link:hover {
    background-color: #333 !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .nav-pills-custom .nav-link.active {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary) !important;
}

/* Fix Player Photos Backgrounds */
[data-bs-theme="dark"] .player-avatar,
[data-bs-theme="dark"] .player-avatar-lg,
[data-bs-theme="dark"] .timeline-content img.bg-light {
    background-color: transparent !important;
    border-color: #444 !important;
}

/* Fix "Terug naar Dashboard" button text color */
[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--kl-off-white);
    border-color: #666;
}
[data-bs-theme="dark"] .btn-outline-secondary:hover {
    background-color: #444;
    color: #fff;
}

/* Offcanvas Menu Buttons */
[data-bs-theme="dark"] .offcanvas .btn-light {
    background-color: #2c2c2c !important;
    border-color: #444 !important;
    color: var(--kl-off-white) !important;
}
[data-bs-theme="dark"] .offcanvas .btn-light .text-secondary {
    color: #b0b0b0 !important;
}
[data-bs-theme="dark"] .offcanvas .btn-light:hover {
    background-color: #333 !important;
}

/* Sticky headers background fix */
[data-bs-theme="dark"] .match-header,
[data-bs-theme="dark"] .sticky-bottom-bar,
[data-bs-theme="dark"] .sticky-top {
    background-color: var(--kl-dark-bg) !important;
    border-color: var(--kl-border-color) !important;
    color: var(--kl-off-white);
}

/* Inputs */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #1e1e1e;
    border-color: var(--kl-border-color);
    color: var(--kl-off-white);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #252525;
    color: var(--kl-off-white);
    border-color: var(--kl-blue);
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: #6c757d;
}

[data-bs-theme="dark"] .border {
    border-color: var(--kl-border-color) !important;
}

/* Navbar - Ensure header stays blue */
[data-bs-theme="dark"] .bg-primary {
    background-color: var(--bs-primary) !important; 
    /* Or specifically #0d6efd if variables are overwritten */
}

/* Track Roster Border */
[data-bs-theme="dark"] .player-card,
[data-bs-theme="dark"] .player-select-card {
    border: 1px solid #333; /* Default noticeable border */
}
[data-bs-theme="dark"] .player-card:hover,
[data-bs-theme="dark"] .player-select-card:hover {
    border-color: #666;
}

/* Match Header Date Sections */
[data-bs-theme="dark"] .list-group-item {
    background-color: var(--kl-card-bg);
    border-color: var(--kl-border-color);
}

/* Stats Legend */
[data-bs-theme="dark"] .legend-text,
[data-bs-theme="dark"] small {
    color: #b0b0b0 !important;
}

/* Match Status Badge */
[data-bs-theme="dark"] .badge.bg-light {
    background-color: #333 !important;
    color: #e0e0e0 !important;
}

/* Sticky headers bg override (fixing the search bar header) */
[data-bs-theme="dark"] .card-body .sticky-top {
    background-color: var(--kl-dark-bg);
}

/* Navbar */
/* Navbar dark (primary bg) blijft primary, maar tekst moet wit. Navbar dark doet dat al. */

/* Toast */
[data-bs-theme="dark"] .toast {
    background-color: #1e1e1e;
    color: #e0e0e0;
    border-color: #333;
}

[data-bs-theme="dark"] .toast-header {
    background-color: #2d2d2d;
    color: #ffffff;
    border-color: #333;
}

/* Dropdowns in dark mode */
[data-bs-theme="dark"] .dropdown-menu {
    background-color: #1e1e1e;
    border-color: #333;
}
[data-bs-theme="dark"] .dropdown-item {
    color: #e0e0e0;
}
[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
    background-color: #333;
    color: #fff;
}

[data-bs-theme="dark"] .border-bottom-dark {
    border-bottom: 1px solid #333 !important;
}

/* Offcanvas */
[data-bs-theme="dark"] .offcanvas {
    background-color: #1e1e1e;
    color: #e0e0e0;
}