/**
 * Styles pour le mode nuit
 */

/* Variables CSS pour le mode nuit */
:root {
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #2d2d2d;
    --dark-bg-tertiary: #3a3a3a;
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
    --dark-border: #404040;
    --dark-shadow: rgba(0, 0, 0, 0.3);
}

/* Application du mode nuit */
body.dark-mode,
html.dark-mode {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Navbar en mode nuit */
.dark-mode .navbar-laravel {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom: 1px solid var(--dark-border);
    box-shadow: 0 2px 4px var(--dark-shadow);
}

.dark-mode .navbar-light .navbar-brand,
.dark-mode .navbar-light .navbar-nav .nav-link {
    color: var(--dark-text-primary) !important;
}

.dark-mode .navbar-light .navbar-brand:hover,
.dark-mode .navbar-light .navbar-nav .nav-link:hover {
    color: var(--dark-text-primary) !important;
    opacity: 0.8;
}

.dark-mode .navbar-toggler {
    border-color: var(--dark-border);
}

.dark-mode .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28224, 224, 224, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Dropdown menu en mode nuit */
.dark-mode .dropdown-menu {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

.dark-mode .dropdown-item {
    color: var(--dark-text-primary);
}

.dark-mode .dropdown-item:hover,
.dark-mode .dropdown-item:focus {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

/* Leaflet + Bootstrap Reboot : img { max-width:100% } empêche l’affichage des tuiles */
.leaflet-container img.leaflet-tile,
.leaflet-container img.leaflet-marker-icon,
.leaflet-container img.leaflet-image-layer,
.leaflet-control img {
    max-width: none !important;
    max-height: none !important;
}

/* Main content en mode nuit */
.dark-mode main {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

/* Cards en mode nuit */
.dark-mode .card {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .card-header {
    background-color: var(--dark-bg-tertiary);
    border-bottom-color: var(--dark-border);
    color: var(--dark-text-primary);
}

/* Formulaires en mode nuit */
.dark-mode .form-control {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .form-control:focus {
    background-color: var(--dark-bg-tertiary);
    border-color: #007bff;
    color: var(--dark-text-primary);
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.dark-mode .form-control::placeholder {
    color: var(--dark-text-secondary);
    opacity: 0.7;
}

.dark-mode .form-select {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .form-label {
    color: var(--dark-text-primary);
}

.dark-mode .form-text {
    color: var(--dark-text-secondary);
}

/* Boutons en mode nuit */
.dark-mode .btn-primary {
    background-color: #007bff;
    border-color: #007bff;
}

.dark-mode .btn-primary:hover {
    background-color: #0056b3;
    border-color: #0056b3;
}

.dark-mode .btn-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
}

.dark-mode .btn-outline-primary {
    border-color: #007bff;
    color: #007bff;
}

.dark-mode .btn-outline-primary:hover {
    background-color: #007bff;
    border-color: #007bff;
}

/* Tables en mode nuit */
.dark-mode .table {
    color: var(--dark-text-primary);
}

.dark-mode .table thead th {
    border-bottom-color: var(--dark-border);
    color: var(--dark-text-primary);
}

/* thead Bootstrap « clair » : sinon fond très clair + texte clair du thème sombre = illisible */
.dark-mode .table thead.thead-light th {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .table tbody tr {
    border-color: var(--dark-border);
}

.dark-mode .table tbody tr:hover {
    background-color: var(--dark-bg-tertiary);
}

/* Tableaux explicitement clairs (ex. aperçu diff partenaire dans une alerte) : éviter texte clair sur fond blanc */
.dark-mode .table.bg-white {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary);
}

.dark-mode .table.bg-white thead.thead-light th {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .table.bg-white tbody td {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .table.bg-white tbody td.text-muted,
.dark-mode .table.bg-white tbody td.small {
    color: var(--dark-text-secondary) !important;
}

/* Modals en mode nuit */
.dark-mode .modal-content {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .modal-header {
    border-bottom-color: var(--dark-border);
}

.dark-mode .modal-footer {
    border-top-color: var(--dark-border);
}

.dark-mode .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.7);
}

/* Alerts en mode nuit */
.dark-mode .alert {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .alert-success {
    background-color: rgba(40, 167, 69, 0.2);
    border-color: #28a745;
    color: #90ee90;
}

.dark-mode .alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
    color: #ff6b7a;
}

.dark-mode .alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: #ffc107;
    color: #ffd700;
}

.dark-mode .alert-info {
    background-color: rgba(23, 162, 184, 0.2);
    border-color: #17a2b8;
    color: #7dd3e0;
}

/* Badges en mode nuit */
.dark-mode .badge {
    color: var(--dark-text-primary);
}

/* Fond warning (jaune) : le texte clair du thème sombre est illisible */
.dark-mode .badge.badge-warning {
    color: #212529 !important;
}

/* List groups en mode nuit */
.dark-mode .list-group-item {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .list-group-item:hover {
    background-color: var(--dark-bg-tertiary);
}

/* Pagination en mode nuit */
.dark-mode .page-link {
    background-color: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .page-link:hover {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
}

/* Bouton toggle mode nuit */
#dark-mode-toggle {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0.5rem 0.75rem;
    transition: color 0.3s ease, transform 0.2s ease, opacity 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

#dark-mode-toggle:hover {
    transform: scale(1.1);
    opacity: 0.8;
    text-decoration: none;
}

#dark-mode-toggle:focus {
    outline: none;
    box-shadow: none;
}

.dark-mode #dark-mode-toggle {
    color: var(--dark-text-primary);
}

/* Alignement du bouton dans la navbar */
.nav-item #dark-mode-toggle {
    margin: 0;
    height: auto;
    line-height: inherit;
}

/* Liens en mode nuit */
.dark-mode a {
    color: #5dade2;
}

.dark-mode a:hover {
    color: #7fb3d3;
    opacity: 0.8;
}

/* Code et pre en mode nuit */
.dark-mode code {
    background-color: var(--dark-bg-tertiary);
    color: #f8f8f2;
}

.dark-mode pre {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

/* Input groups en mode nuit */
.dark-mode .input-group-text {
    background-color: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

/* Breadcrumb en mode nuit */
.dark-mode .breadcrumb {
    background-color: var(--dark-bg-secondary);
}

.dark-mode .breadcrumb-item a {
    color: #5dade2;
}

.dark-mode .breadcrumb-item.active {
    color: var(--dark-text-secondary);
}

/* Tooltips en mode nuit */
.dark-mode .tooltip-inner {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

.dark-mode .tooltip.bs-tooltip-top .arrow::before {
    border-top-color: var(--dark-bg-tertiary);
}

.dark-mode .tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--dark-bg-tertiary);
}

.dark-mode .tooltip.bs-tooltip-left .arrow::before {
    border-left-color: var(--dark-bg-tertiary);
}

.dark-mode .tooltip.bs-tooltip-right .arrow::before {
    border-right-color: var(--dark-bg-tertiary);
}