/* ===========================
   DARK MODE - BASE
   =========================== */
body.dark-mode {
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 100%);
    color: #e4e4e7;
    transition: background 0.3s ease, color 0.3s ease;
}
html.dark-mode {
    color-scheme: dark;
}

/* ===========================
   NAVIGATION
   =========================== */
.dark-mode .navbar {
    background: rgba(30, 30, 46, 0.95) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    position: relative;
    z-index: 1030 !important;
}

.dark-mode .navbar-brand,
.dark-mode .nav-link {
    color: #f0f0f0 !important;
    transition: color 0.2s ease;
}

.dark-mode .nav-link:hover {
    color: #818cf8 !important;
}

/* ===========================
   FOOTER
   =========================== */
.dark-mode footer {
    background: linear-gradient(180deg, #1e1e2e 0%, #16162a 100%);
    border-top: 1px solid rgba(99, 102, 241, 0.2);
    color: #d4d4d8;
}

.dark-mode footer a {
    color: #a5b4fc;
    transition: color 0.2s ease;
}

.dark-mode footer a:hover {
    color: #818cf8;
}

/* ===========================
   TEXTE
   =========================== */
.dark-mode .text-muted {
    color: #a1a1aa !important;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: #f0f0f0 !important;
}

.dark-mode p {
    color: #e4e4e7;
}

/* ===========================
   DROPDOWNS
   =========================== */
.dark-mode .dropdown-menu {
    background-color: #252538 !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important;
    z-index: 1031 !important;
    overflow: visible !important;
    max-height: none !important;
}

.dark-mode .dropdown-item {
    color: #e4e4e7 !important;
    transition: all 0.2s ease;
    background-color: transparent !important;
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background: linear-gradient(90deg, rgba(99, 102, 241, 0.15), rgba(139, 92, 246, 0.15)) !important;
    color: #ffffff !important;
    transform: translateX(4px);
}

/* ===========================
   ALERTS
   =========================== */
.dark-mode .alert-success {
    background: linear-gradient(135deg, #065f46 0%, #047857 100%);
    color: #d1fae5;
    border: 1px solid #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.dark-mode .alert-danger {
    background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
    color: #fee2e2;
    border: 1px solid #ef4444;
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

/* ===========================
   FORMULAIRES
   =========================== */
.dark-mode .form-control,
.dark-mode .form-select {
    background-color: #1e1e2e !important;
    color: #e4e4e7 !important;
    border: 1px solid #3f3f55 !important;
    transition: all 0.3s ease;
}

.dark-mode .form-control:focus,
.dark-mode .form-select:focus {
    background-color: #252538 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25) !important;
    transform: translateY(-1px);
}

.dark-mode .form-control::placeholder {
    color: #71717a !important;
}

.dark-mode .form-select option {
    background-color: #1e1e2e !important;
    color: #e4e4e7 !important;
}

/* Labels de formulaires */
.dark-mode label,
.dark-mode .form-label,
.dark-mode .col-form-label {
    color: #e4e4e7 !important;
}

/* Labels flottants */
.dark-mode .form-floating > label {
    color: #a1a1aa !important;
}

.dark-mode .form-floating > .form-control:focus ~ label,
.dark-mode .form-floating > .form-control:not(:placeholder-shown) ~ label,
.dark-mode .form-floating > .form-select ~ label {
    color: #818cf8 !important;
}

/* Texte d'aide */
.dark-mode .form-text,
.dark-mode .small,
.dark-mode small {
    color: #a1a1aa !important;
}

/* Checkbox et Radio */
.dark-mode .form-check-label {
    color: #e4e4e7 !important;
}

.dark-mode .form-check-input {
    background-color: #1e1e2e;
    border-color: #3f3f55;
}

.dark-mode .form-check-input:checked {
    background-color: #6366f1;
    border-color: #6366f1;
}

/* Legends */
.dark-mode legend,
.dark-mode fieldset label {
    color: #e4e4e7 !important;
}

/* Input group */
.dark-mode .input-group-text {
    background-color: #252538;
    color: #e4e4e7;
    border-color: #3f3f55;
}

/* Messages de validation */
.dark-mode .invalid-feedback,
.dark-mode .valid-feedback {
    color: #e4e4e7 !important;
}

.dark-mode .is-invalid {
    border-color: #ef4444 !important;
}

.dark-mode .is-valid {
    border-color: #10b981 !important;
}

/* ===========================
   TABLEAUX
   =========================== */
.dark-mode .table {
    color: #e4e4e7 !important;
    border-color: #3f3f55;
}

.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(99, 102, 241, 0.05);
}

.dark-mode .table thead th {
    background-color: #252538 !important;
    border-color: #3f3f55;
    color: #a5b4fc !important;
}

.dark-mode .table tbody tr {
}

.dark-mode .table tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.1);
}

.dark-mode .table td,
.dark-mode .table th {
    border-color: #3f3f55;
}

/* ===========================
   CARDS
   =========================== */
.dark-mode .card {
    background: linear-gradient(135deg, #1e1e2e 0%, #252538 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.2) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.dark-mode .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.2);
}

.dark-mode .card-header {
    background-color: rgba(99, 102, 241, 0.1) !important;
    border-bottom: 1px solid rgba(99, 102, 241, 0.2);
    color: #e4e4e7 !important;
}

.dark-mode .card-body {
    color: #e4e4e7;
}

.dark-mode .card-footer {
    background-color: #252538;
    border-top: 1px solid rgba(99, 102, 241, 0.2);
}

/* ===========================
   BOUTONS
   =========================== */
.dark-mode .btn-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    border: none;
    transition: all 0.3s ease;
}

.dark-mode .btn-primary:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(99, 102, 241, 0.3);
}

.dark-mode .btn-outline-primary {
    color: #818cf8;
    border-color: #6366f1;
}

.dark-mode .btn-outline-primary:hover {
    background-color: #6366f1;
    color: #ffffff;
}

/* ===========================
   LOGOS
   =========================== */
.dark-mode .dark-logo {
    display: inline-block;
    filter: drop-shadow(0 0 8px rgba(99, 102, 241, 0.3));
}

.dark-mode .light-logo {
    display: none;
}

/* ===========================
   BACKGROUND
   =========================== */
.dark-mode .home-background {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    min-height: 500px;
    opacity: 0.15;
    filter: brightness(0.7) contrast(1.2);
}
/* ===========================
   TABLEAUX - DARK MODE
   =========================== */

/* Table principale */
.dark-mode .bordered-table {
    background: #1e1e2e;
    border-color: #3f3f55;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Cellules */
.dark-mode .bordered-table th,
.dark-mode .bordered-table td {
    color: #e4e4e7;
    border-color: #3f3f55;
}

/* En-tête */
.dark-mode .bordered-table thead {
    background: linear-gradient(180deg, #252538 0%, #1e1e2e 100%);
}

.dark-mode .bordered-table thead th {
    color: #a5b4fc;
    border-bottom: 2px solid #6366f1;
}

/* Lignes */
.dark-mode .bordered-table tbody tr {
    background-color: #1e1e2e;
}

.dark-mode .bordered-table tbody tr:hover {
    background-color: rgba(99, 102, 241, 0.12);
}
.dark-mode .custom-table {
    background-color: #1e1e2e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.dark-mode .custom-table th,
.dark-mode .custom-table td {
    color: #e4e4e7;
    border-color: #3f3f55;
}
.dark-mode table {
    background-color: #1e1e2e;
    color: #e4e4e7;
}

.dark-mode table th {
    color: #a5b4fc;
}

/* ===========================
   LISTES SANS SCROLL
   =========================== */

/* Listes générales */
.dark-mode ul,
.dark-mode ol {
    color: #e4e4e7 !important;
    overflow: visible !important;
    max-height: none !important;
}

.dark-mode li {
    color: #e4e4e7 !important;
}

/* List groups Bootstrap */
.dark-mode .list-group {
    background-color: transparent !important;
    overflow: visible !important;
    max-height: none !important;
}

.dark-mode .list-group-item {
    background-color: #1e1e2e !important;
    color: #e4e4e7 !important;
    border: 1px solid #3f3f55 !important;
    transition: all 0.3s ease;
}

.dark-mode .list-group-item:hover {
    background-color: #252538 !important;
    border-color: #6366f1 !important;
}

.dark-mode .list-group-item.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

.dark-mode .list-group-item-action:hover {
    background-color: rgba(99, 102, 241, 0.1) !important;
}

/* ===========================
   ACCORDIONS
   =========================== */
.dark-mode .accordion {
    background-color: transparent !important;
    overflow: visible !important;
}

.dark-mode .accordion-item {
    background-color: #1e1e2e !important;
    border: 1px solid #3f3f55 !important;
    color: #e4e4e7 !important;
}

.dark-mode .accordion-button {
    background-color: #252538 !important;
    color: #e4e4e7 !important;
    border: none;
}

.dark-mode .accordion-button:not(.collapsed) {
    background-color: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
}

.dark-mode .accordion-button:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.25) !important;
}

.dark-mode .accordion-body {
    background-color: #1e1e2e !important;
    color: #e4e4e7 !important;
    overflow: visible !important;
    max-height: none !important;
}

/* ===========================
   NAV TABS & PILLS
   =========================== */
.dark-mode .nav-tabs {
    border-bottom: 1px solid #3f3f55;
}

.dark-mode .nav-tabs .nav-link {
    color: #2e2e30 !important;
    background-color: transparent !important;
    border: 1px solid transparent;
}

.dark-mode .nav-tabs .nav-link:hover {
    color: #818cf8 !important;
    border-color: #3f3f55;
}

.dark-mode .nav-tabs .nav-link.active {
    color: #373739 !important;
    background-color: #252538 !important;
    border-color: #3f3f55 #3f3f55 transparent;
}

.dark-mode .nav-pills .nav-link {
    color: #a1a1aa !important;
}

.dark-mode .nav-pills .nav-link.active {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    color: #323030 !important;
}

/* ===========================
   BREADCRUMBS
   =========================== */
.dark-mode .breadcrumb {
    background-color: #1e1e2e;
    border: 1px solid #3f3f55;
}

.dark-mode .breadcrumb-item {
    color: #a1a1aa !important;
}

.dark-mode .breadcrumb-item.active {
    color: #e4e4e7 !important;
}

.dark-mode .breadcrumb-item + .breadcrumb-item::before {
    color: #71717a !important;
}

.dark-mode .breadcrumb-item a {
    color: #818cf8 !important;
}

.dark-mode .breadcrumb-item a:hover {
    color: #a5b4fc !important;
}

/* ===========================
   POPOVER & TOOLTIPS
   =========================== */
.dark-mode .popover {
    background-color: #252538;
    border: 1px solid #3f3f55;
}

.dark-mode .popover-header {
    background-color: rgba(99, 102, 241, 0.15);
    color: #e4e4e7;
    border-bottom: 1px solid #3f3f55;
}

.dark-mode .popover-body {
    color: #e4e4e7;
}

.dark-mode .tooltip-inner {
    background-color: #252538;
    color: #e4e4e7;
}

/* ===========================
   MODALS
   =========================== */
.dark-mode .modal-content {
    background-color: #1e1e2e !important;
    border: 1px solid #3f3f55;
    color: #e4e4e7;
}

.dark-mode .modal-header {
    background-color: #252538 !important;
    border-bottom: 1px solid #3f3f55;
    color: #e4e4e7;
}

.dark-mode .modal-footer {
    background-color: #252538 !important;
    border-top: 1px solid #3f3f55;
}

.dark-mode .modal-title {
    color: #e4e4e7 !important;
}

.dark-mode .modal-body {
    color: #e4e4e7;
    overflow-y: auto !important;
    max-height: 70vh !important;
}

.dark-mode .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* ===========================
   OFFCANVAS
   =========================== */
.dark-mode .offcanvas {
    background-color: #1e1e2e;
    color: #e4e4e7;
}

.dark-mode .offcanvas-header {
    border-bottom: 1px solid #3f3f55;
}

.dark-mode .offcanvas-title {
    color: #e4e4e7;
}

.dark-mode .offcanvas-body {
    overflow-y: auto !important;
}

/* ===========================
   PROGRESS BARS
   =========================== */
.dark-mode .progress {
    background-color: #252538;
    border: 1px solid #3f3f55;
}

.dark-mode .progress-bar {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
}

/* ===========================
   SPINNERS
   =========================== */
.dark-mode .spinner-border,
.dark-mode .spinner-grow {
    color: #818cf8;
}

/* ===========================
   TOAST NOTIFICATIONS
   =========================== */
.dark-mode .toast {
    background-color: #1e1e2e;
    border: 1px solid #3f3f55;
    color: #e4e4e7;
}

.dark-mode .toast-header {
    background-color: #252538;
    border-bottom: 1px solid #3f3f55;
    color: #e4e4e7;
}

.dark-mode .toast-body {
    color: #e4e4e7;
}

/* ===========================
   BADGES
   =========================== */
.dark-mode .badge {
    background-color: #252538;
    color: #e4e4e7;
    border: 1px solid #3f3f55;
}

.dark-mode .badge.bg-primary {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    border: none;
}

.dark-mode .badge.bg-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none;
}

.dark-mode .badge.bg-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
    border: none;
}

.dark-mode .badge.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    border: none;
}

/* ===========================
   PAGINATION
   =========================== */
.dark-mode .pagination {
    gap: 0.5rem;
}

.dark-mode .page-link {
    background-color: #1e1e2e !important;
    border: 1px solid #3f3f55 !important;
    color: #e4e4e7 !important;
}

.dark-mode .page-link:hover {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    border-color: #6366f1 !important;
    color: #ffffff !important;
}

.dark-mode .page-item.active .page-link {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
    border-color: #6366f1 !important;
}

.dark-mode .page-item.disabled .page-link {
    background-color: #252538 !important;
    border-color: #3f3f55 !important;
    color: #71717a !important;
}