/*ALLES AI*/
/* Light theme (default) */
[data-theme="light"] {
    --bs-body-bg: #ffffff;
    --bs-body-color: #212529;
    --bs-card-bg: #ffffff;
    --bs-border-color: #dee2e6;
    --bs-secondary-bg: #f8f9fa;
    --bs-navbar-bg: #212529;
    --bs-navbar-color: #ffffff;
    --custom-card-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Dark theme */
[data-theme="dark"] {
    --bs-body-bg: #121212;
    --bs-body-color: #e0e0e0;
    --bs-card-bg: #1e1e1e;
    --bs-border-color: #444444;
    --bs-secondary-bg: #2a2a2a;
    --bs-navbar-bg: #1a1a1a;
    --bs-navbar-color: #e0e0e0;
    --custom-card-shadow: 0 2px 8px rgba(0,0,0,0.5);

    /* Override Bootstrap components */
    --bs-table-bg: #1e1e1e;
    --bs-table-color: #e0e0e0;
    --bs-input-bg: #2a2a2a;
    --bs-input-color: #e0e0e0;
    --bs-modal-bg: #1e1e1e;
}

/* Apply the variables to actual elements */
body {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
}

.card {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-border-color) !important;
    box-shadow: var(--custom-card-shadow);
    color: var(--bs-body-color) !important;
}

.form-control, .form-select {
    background-color: var(--bs-secondary-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: var(--bs-border-color) !important;
}

.table {
    --bs-table-bg: var(--bs-card-bg);
    color: var(--bs-body-color) !important;
}

.modal-content {
    background-color: var(--bs-card-bg) !important;
    color: var(--bs-body-color) !important;
}

.dropdown-menu {
    background-color: var(--bs-card-bg) !important;
    border-color: var(--bs-border-color) !important;
}

.dropdown-item {
    color: var(--bs-body-color) !important;
}

.dropdown-item:hover {
    background-color: var(--bs-secondary-bg) !important;
}

.theme-option {
    cursor: pointer;
    border: 3px solid transparent;
    border-radius: 12px;
    padding: 8px;
    transition: border-color 0.2s;
}

.theme-option.selected {
    border-color: #dc3545;
}

.theme-preview {
    width: 120px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    padding: 6px;
}

.light-preview {
    background-color: #ffffff;
    border: 1px solid #dee2e6;
}

.light-preview .preview-navbar {
    height: 12px;
    background: #212529;
    border-radius: 3px;
    margin-bottom: 6px;
}

.light-preview .preview-card {
    height: 18px;
    background: #f8f9fa;
    border-radius: 3px;
    margin-bottom: 4px;
    border: 1px solid #dee2e6;
}

.dark-preview {
    background-color: #121212;
    border: 1px solid #444;
}

.dark-preview .preview-navbar {
    height: 12px;
    background: #1a1a1a;
    border-radius: 3px;
    margin-bottom: 6px;
}

.dark-preview .preview-card {
    height: 18px;
    background: #1e1e1e;
    border-radius: 3px;
    margin-bottom: 4px;
    border: 1px solid #444;
}

[data-theme="dark"] .card {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

[data-theme="dark"] .card-body {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

[data-theme="dark"] .form-control::placeholder {
    color: #888888 !important;
}

[data-theme="dark"] .form-label {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .settings-card {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] p,
[data-theme="dark"] label,
[data-theme="dark"] span {
    color: #e0e0e0 !important;
}

[data-theme="dark"] .btn-light {
    background-color: #2a2a2a !important;
    border-color: #444444 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .settings-nav-link {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

[data-theme="dark"] .settings-nav-link.active {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}

[data-theme="dark"] .settings-nav-link.danger {
    color: #dc3545 !important;
}

/* Destinaties cards */
[data-theme="dark"] .destinatie-card,
[data-theme="dark"] .card {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

/* Admin panel tabel */
[data-theme="dark"] .table {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

[data-theme="dark"] .table thead th {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

[data-theme="dark"] .table tbody tr {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: #2a2a2a !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
}

/* Container / pagina achtergrond */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid {
    color: #e0e0e0 !important;
}

/* Input zoekbalk admin */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea {
    background-color: #2a2a2a !important;
    color: #e0e0e0 !important;
    border-color: #444444 !important;
}

/* Alert boxes */
[data-theme="dark"] .alert-success {
    background-color: #1a3a1a !important;
    color: #75c775 !important;
    border-color: #2d5a2d !important;
}

[data-theme="dark"] .alert-danger {
    background-color: #3a1a1a !important;
    color: #c77575 !important;
    border-color: #5a2d2d !important;
}

[data-theme="dark"] .alert-warning {
    background-color: #3a3010 !important;
    color: #c7b875 !important;
    border-color: #5a4a20 !important;
}

[data-theme="dark"] .contact-container {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

/* Index pagina */
[data-theme="dark"] section.bg-light,
[data-theme="dark"] .bg-light {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] section[style*="background: linear-gradient"] {
    background: #1a1a1a !important;
}

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

/* Admin tabel */
[data-theme="dark"] .table.bg-white {
    background-color: #1e1e1e !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .table-bordered > :not(caption) > * > * {
    border-color: #444444 !important;
}

/* Contact container */
[data-theme="dark"] .contact-container {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .highlight {
    color: #dc3545 !important;
}

[data-theme="dark"] .btn-dark:hover {
    background-color: #2c2c2c !important;
    border-color: #2c2c2c !important;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: #c0392b !important;
    border-color: #c0392b !important;
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: #5a5a5a !important;
    border-color: #5a5a5a !important;
}

[data-theme="dark"] .btn-light:hover {
    background-color: #2c2c2c !important;
    border-color: #444444 !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .settings-nav-link:hover {
    background-color: #2c2c2c !important;
    color: #e0e0e0 !important;
}

[data-theme="dark"] .settings-nav-link.danger:hover {
    background-color: #2c2c2c !important;
    color: #dc3545 !important;
}

[data-theme="dark"] .settings-nav-link.active:hover {
    background-color: #c0392b !important;
}