/* style_pro.css (FINAL - COMPLET AVEC CORRECTION LAUNCHPAD) */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');

:root {
    --primary-color: #3b82f6;
    --danger-color: #ef4444;
    --success-color: #22c55e;
    --bg-color: #111827; /* Fond principal sombre */
    --bg-light-color: #1f2937; /* Fond des cartes, sidebar */
    --bg-lighter-color: #374151; /* Couleur pour hover, etc. */
    --border-color: #374151; /* Bordures */
    --text-color: #e5e7eb; /* Texte principal clair */
    --text-muted-color: #9ca3af; /* Texte secondaire grisé */
    --header-height: 60px;
    --sidebar-width: 260px;
    --font-family: 'Inter', sans-serif;
}

/* --- BASE ET DISPOSITION --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    font-size: 16px;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}
.page-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.app-body {
    display: flex;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    padding-top: var(--header-height);
}
main {
    flex-grow: 1;
    padding: 2.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* --- HEADER --- */
#app-header {
    height: var(--header-height);
    background-color: var(--bg-light-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 200;
}
.header-left, .header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.hamburger-btn {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    color: var(--text-color);
    cursor: pointer;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    transition: background-color 0.2s;
}
.hamburger-btn:hover { background-color: var(--bg-lighter-color); }
.header-logo a { color: var(--text-color); font-weight: 600; text-decoration: none; font-size: 1.1rem; }
.user-profile span { font-weight: 500; }
.btn { padding: 10px 15px; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-family); transition: all 0.2s; }
.btn-primary { background-color: var(--primary-color); color: white; }
.btn-secondary { background-color: var(--bg-light-color); color: var(--text-color); border: 1px solid var(--border-color); }
.btn:hover { opacity: 0.9; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* --- SIDEBAR & VOILE --- */
#app-sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: var(--sidebar-width);
    height: calc(100vh - var(--header-height));
    background-color: var(--bg-light-color);
    padding: 1.5rem 1rem;
    border-right: 1px solid var(--border-color);
    transform: translateX(calc(-1 * var(--sidebar-width)));
    transition: transform 0.3s ease;
    z-index: 100;
    overflow-y: auto;
}
#sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 99; }
body.sidebar-visible #app-sidebar { transform: translateX(0); }
body.sidebar-visible #sidebar-overlay { display: block; }
#app-sidebar ul { list-style: none; }
#app-sidebar ul li a { display: flex; align-items: center; gap: 1rem; padding: 0.8rem; border-radius: 6px; color: var(--text-muted-color); text-decoration: none; transition: color 0.2s, background-color 0.2s; }
#app-sidebar ul li a:hover { background-color: var(--bg-lighter-color); color: var(--text-color); }
#app-sidebar ul li a.active { background-color: var(--primary-color); color: white; }
#app-sidebar ul li a .fas { width: 20px; text-align: center; }

/* --- LAUNCHPAD --- */
.launchpad-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 2.5rem;
    padding: 1rem 0;
    margin-top: 2rem;
}
.launchpad-item {
    position: relative;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.launchpad-item a { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    text-align: center; 
    width: 100%; 
    height: 100%; 
    text-decoration: none; 
    color: var(--text-color); 
}
.launchpad-item-icon { 
    width: 65%; 
    height: 65%; 
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)); 
    border-radius: 22%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 0.75rem; 
    transition: all 0.3s ease; 
}
.launchpad-item-icon i { font-size: 2.5rem; color: var(--text-muted-color); transition: color 0.3s ease; }
.launchpad-item-label { font-size: 0.9rem; font-weight: 500; }
.launchpad-item.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* --- Sous-modules au survol pour le dashboard principal --- */
.submodules-container {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    background-color: rgba(31, 41, 55, 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 12px; padding: 1rem;
    z-index: 10; width: 280px; opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.submodules-list { list-style: none; }
.submodules-list li a { display: block; color: var(--text-color); text-decoration: none; padding: 0.75rem; border-radius: 8px; font-weight: 500; }
.submodules-list li a:hover { background-color: var(--primary-color); }
.submodules-list li a.is-disabled { color: var(--text-muted-color); cursor: not-allowed; }
.submodules-list li a.is-disabled:hover { background-color: transparent; }

/* Effets de survol */
.launchpad-item:hover { transform: scale(1.05); z-index: 20; }
.launchpad-item:not(.is-disabled):hover .launchpad-item-icon { background: linear-gradient(145deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0)); }
.launchpad-item:not(.is-disabled):hover .launchpad-item-icon i { color: var(--primary-color); }
.launchpad-item:hover .submodules-container { opacity: 1; transform: translate(-50%, -50%) scale(1); pointer-events: auto; }


/* --- CONTROLS BAR (FILTRES, PAGINATION) --- */
.controls-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 1rem; }
.filters-container { display: flex; gap: 15px; align-items: center; flex-wrap: wrap; }
.search-filter { position: relative; }
.search-filter .fa-search { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted-color); }
.search-filter input { padding-left: 35px; width: 250px; }

/* --- PAGINATION --- */
.pagination-container { display: flex; align-items: center; gap: 1rem; font-size: 0.9rem; }
.pagination-container select { width: 80px; }
.pagination-controls button { background: var(--bg-light-color); border: 1px solid var(--border-color); color: var(--text-color); cursor: pointer; padding: 5px 10px; border-radius: 4px; }
.pagination-controls button:disabled { opacity: 0.5; cursor: not-allowed; }
.pagination-info { font-weight: 500; }

/* --- TABLE CONTAINER & STICKY HEADER --- */
.table-container {
    flex-grow: 1;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 100%;
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th {
    position: sticky;
    top: 0;
    background-color: var(--bg-light-color);
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
}
.data-table tbody td { padding: 12px 15px; border-bottom: 1px solid var(--border-color); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background-color: rgba(255, 255, 255, 0.03); }

/* --- MODALE --- */
.modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; padding: 2rem; }
.modal-content { background-color: var(--bg-light-color); margin: auto; border: 1px solid var(--border-color); width: 100%; max-width: 750px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); display: flex; flex-direction: column; max-height: 90vh; }
.modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.modal-header h2 { margin: 0; font-size: 1.25rem; }
.close-btn { color: var(--text-muted-color); font-size: 1.8rem; font-weight: bold; cursor: pointer; background: none; border: none; }
.close-btn:hover, .close-btn:focus { color: var(--text-color); }
.modal-body { padding: 1.5rem; overflow-y: auto; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 10px; }

/* --- FORMULAIRES DANS LA MODALE --- */
.form-group { margin-bottom: 1.2rem; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; font-size: 0.9rem; }
.form-control { width: 100%; padding: 10px; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-color); font-family: var(--font-family); font-size: 0.95rem; }
.form-control:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); }
.form-row { display: flex; gap: 1.5rem; }
.form-row .form-group { flex: 1; margin-bottom: 0; }
.form-group small { font-size: 0.8rem; color: var(--text-muted-color); margin-top: 5px; display: block; }
#societes-checkboxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; background: var(--bg-color); padding: 1rem; border-radius: 6px; border: 1px solid var(--border-color); }
#societes-checkboxes div { display: flex; align-items: center; gap: 0.5rem; }

/* --- LISTES DE FICHIERS DANS LA MODALE --- */
.files-list .file-item { background-color: var(--bg-color); padding: 8px 12px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 0.9rem; }
.files-list .file-item a { color: var(--text-color); text-decoration: none; }
.files-list .file-item button.btn-delete-file { background: none; border: none; color: var(--danger-color); cursor: pointer; font-size: 1.2rem; padding: 0 5px; }

/* --- BADGES & ICÔNES --- */
.badge-societe { background-color: var(--border-color); padding: 4px 10px; border-radius: 12px; font-size: 0.8rem; font-weight: 500; display: inline-block; margin: 2px; }
.file-icon-link { font-size: 1.5rem; color: var(--text-muted-color); transition: color 0.2s; margin: 0 5px; }
.file-icon-link:hover { color: var(--primary-color); }
.fa-file-pdf { color: #f40f02; }
.fa-file-word { color: #2b579a; }

/* --- BOUTON AVEC CHARGEMENT --- */
.btn.loading .btn-text { display: none; }
.btn .spinner { display: none; }
.btn.loading .spinner { display: inline-block; width: 1.2em; height: 1.2em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spinner-border .75s linear infinite; }
@keyframes spinner-border { to { transform: rotate(360deg); } }

/* --- CLASSES D'ALERTE POUR TABLEAU --- */
td.alert-danger, .alert-danger td { background-color: rgba(239, 68, 68, 0.15) !important; font-weight: bold; }
td.alert-warning, .alert-warning td { background-color: rgba(245, 158, 11, 0.15) !important; }

/* --- NOUVEAUX STYLES POUR LA LISTE DES PERMISSIONS --- */
#pages-checkboxes {
    display: block;
    background: var(--bg-color);
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}
.permission-module {
    margin-bottom: 0.5rem;
}
.permission-module:last-child {
    margin-bottom: 0;
}
.permission-module-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}
.permission-module-header:hover {
    background-color: var(--bg-lighter-color);
}
.permission-module-header .fa-caret-right {
    transition: transform 0.2s ease-in-out;
    width: 12px;
}
.permission-module-header.expanded .fa-caret-right {
    transform: rotate(90deg);
}
.permission-module-header label {
    margin-bottom: 0; /* Override form-group label style */
    font-weight: 600;
    cursor: pointer;
    flex-grow: 1;
}
.permission-submodules {
    padding-left: 2rem;
    margin-top: 0.75rem;
    display: none; /* Caché par défaut */
}
.permission-submodules.visible {
    display: block; /* Affiché par JS */
}
.permission-submodule-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.permission-submodule-item label {
    font-weight: 400;
    color: var(--text-muted-color);
    margin-bottom: 0;
    cursor: pointer;
}
/* --- STYLE À AJOUTER/METTRE À JOUR DANS style_pro.css --- */

/* --- Style pour le bouton Toggle Switch --- */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  flex-shrink: 0; /* Empêche le bouton de rétrécir */
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #374151; /* Couleur de fond pour "Non" */
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #22c55e; /* Vert (success-color) pour "Oui" */
}

input:focus + .slider {
  box-shadow: 0 0 1px #22c55e;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Nouveau style pour aligner label et bouton */
.form-group-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem; /* Padding horizontal uniquement */
    height: 50px; /* Hauteur fixe pour ressembler à un champ de formulaire */
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.form-group-inline label {
    margin-bottom: 0; /* Annule la marge par défaut */
}

/* Style pour la colonne Jours Restants lorsqu'elle est planifiée */
.planned {
    color: #9ca3af; /* text-muted-color */
    font-style: italic;
}

/* style_exercices.css */

/* --- Style pour le bouton Toggle Switch (type iOS) --- */
.switch {
  position: relative;
  display: inline-block;
  width: 52px; /* Largeur réduite pour un look plus compact */
  height: 32px;
  flex-shrink: 0;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #374151; /* Gris (bg-lighter-color) pour "Non" */
  transition: .3s;
  border-radius: 32px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--success-color); /* Vert pour "Oui" */
}

input:checked + .slider:before {
  transform: translateX(20px);
}

/* --- Style pour aligner label et bouton dans un conteneur --- */
.form-group-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    height: 50px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.form-group-inline label {
    margin-bottom: 0; /* Annule la marge par défaut */
}

/* --- Style pour la colonne Jours Restants lorsqu'elle est planifiée --- */
.planned {
    color: #9ca3af; /* text-muted-color */
    font-style: italic;
}

/* Icône pour le rapport PDF */
.pdf-icon-link {
    font-size: 1.5rem;
    color: #f40f02; /* Couleur Adobe PDF */
    transition: transform 0.2s;
}
.pdf-icon-link:hover {
    transform: scale(1.1);
}

/* --- iPhone Style Toggle Switch --- */
.switch {
  position: relative;
  display: inline-block;
  width: 51px;
  height: 31px;
}
.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 23px;
  width: 23px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}
input:checked + .slider {
  background-color: var(--primary-color);
}
input:checked + .slider:before {
  -webkit-transform: translateX(20px);
  -ms-transform: translateX(20px);
  transform: translateX(20px);
}

/* --- Custom Multiselect for Participants --- */
.custom-multiselect {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 5px;
}
.participants-selected-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 5px;
}
.participant-tag {
    background-color: var(--primary-color-light);
    color: var(--primary-color);
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 0.9em;
    display: flex;
    align-items: center;
    gap: 8px;
}
.participant-tag i {
    cursor: pointer;
    font-size: 0.8em;
}
.custom-multiselect .search-wrapper {
    position: relative;
}
.custom-multiselect input[type="text"] {
    width: 100%;
    border: none;
    outline: none;
    padding: 5px 0;
    font-size: 1em;
}
.participants-dropdown-list {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    width: 100%;
    max-height: 200px;
    overflow-y: auto;
    z-index: 1001; /* Above modal */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.participant-item {
    padding: 10px;
    cursor: pointer;
}
.participant-item:hover {
    background-color: #f0f0f0;
}
.participant-item small {
    color: #666;
}

/* Modal Size */
.modal-content.large {
    max-width: 800px;
}

/* Regenerate button styling */
#regenerate-btn.loading i {
    animation: fa-spin 1s infinite linear;
}


#planning-details-group {
    /* Fond sombre, légèrement différent du fond principal pour le distinguer */
    background-color: #1c2533; 
    
    /* Bordure subtile pour délimiter la zone */
    border: 1px solid #3a4a5b; 
    
    /* Marge et espacement intérieur */
    padding: 15px;
    margin-top: -10px; /* Pour se coller au toggle */
    margin-bottom: 20px; /* Espace avant la ligne <hr> */
    border-radius: 8px; /* Bords arrondis cohérents */
    
    /* Transition douce pour l'apparition */
    transition: all 0.3s ease-in-out;
}

#planning-details-group p {
    /* Titre de la section */
    font-weight: bold;
    color: #ecf0f1; /* Couleur de texte claire */
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    
    /* Ligne de séparation sous le titre */
    border-bottom: 1px solid #3a4a5b; 
    font-size: 0.9em;
    text-transform: uppercase; /* Met le titre en majuscules pour un look pro */
}

/* Assure que les labels dans ce bloc sont aussi de la bonne couleur */
#planning-details-group .form-group label {
    color: #bdc3c7; /* Couleur de label légèrement moins vive que le titre */
}

/* planning.css */
#calendar {
    max-width: 1100px;
    margin: 20px auto;
}

/* Couleurs pour les types d'événements */
.fc-event.type-verification { background-color: #e53935; border-color: #e53935; }
.fc-event.type-formation { background-color: #1e88e5; border-color: #1e88e5; }
.fc-event.type-audit { background-color: #fdd835; color: black; border-color: #fdd835; }
/* ... autres couleurs ... */

/* Style pour les événements en retard */
.fc-event.status-overdue {
    background-color: #c62828 !important; /* Force la couleur */
    border: 2px solid white !important;
    animation: pulse 1.5s infinite;
}

/* Style pour les événements faits */
.fc-event.status-done {
    opacity: 0.6;
    text-decoration: line-through;
}
.fc-event.status-done .fc-event-title:before {
    content: '✅ ';
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.03); }
    100% { transform: scale(1); }
}
/* =================================================== */
/* AJOUT POUR LES ONGLETS DE FORMULAIRE DANS LES MODALES */
/* =================================================== */

.modal-nav { 
    display: flex; 
    border-bottom: 1px solid var(--border-color); 
    padding: 0 1.5rem; 
    background-color: var(--bg-color); /* Fond légèrement différent pour la barre d'onglets */
}

.modal-nav .nav-link { 
    padding: 1rem 1.5rem; 
    margin-bottom: -1px; /* Fait en sorte que la bordure active fusionne avec la bordure du bas */
    border: none; 
    background: none; 
    color: var(--text-muted-color); 
    cursor: pointer; 
    border-bottom: 3px solid transparent; 
    font-size: 1rem;
    transition: all 0.3s ease;
}

.modal-nav .nav-link.active { 
    color: var(--primary-color); 
    border-bottom-color: var(--primary-color); 
    font-weight: 600; 
}

.modal-nav .nav-link:hover {
    color: var(--primary-color);
}

.tab-pane { 
    display: none; 
}

.tab-pane.active { 
    display: block; 
}

.form-section-title {
    font-size: 1.2rem; 
    font-weight: 600; 
    color: var(--primary-color);
    margin-top: 1.5rem; 
    margin-bottom: 1.5rem; 
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

/* Premier titre de section sans marge en haut */
.tab-pane .form-section-title:first-child {
    margin-top: 0;
}
/* =================================================== */
/* AJOUTS POUR LE DESIGN "TO-DO" DANS LES FORMULAIRES  */
/* =================================================== */

.todo-style-group {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: var(--bg-color);
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 1rem;
}

.todo-style-group .todo-icon {
    color: var(--text-muted-color);
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
}

.todo-style-group .form-control {
    flex-grow: 1;
    border: none;
    background: none;
    padding: 0;
}
.todo-style-group .form-control:focus {
    box-shadow: none;
}

.todo-style-group .clear-btn {
    color: var(--text-muted-color);
    cursor: pointer;
    visibility: hidden; /* Caché par défaut */
    opacity: 0;
    transition: all 0.2s ease;
}

.todo-style-group:hover .clear-btn,
.todo-style-group .form-control:not(:placeholder-shown) + .clear-btn {
    visibility: visible;
    opacity: 1;
}
.todo-style-group .clear-btn:hover {
    color: var(--text-color);
}
/* Style pour les formations réalisées */
td.done {
    color: var(--success-color);
    font-weight: 600;
}


/* ====================================================== */
/* AJOUTS POUR LA PAGE D'INSPECTION DES EXTINCTEURS       */
/* Collez ce bloc à la fin de votre fichier style_pro.css */
/* ====================================================== */

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.section-divider {
    border: 0;
    height: 1px;
    background-color: var(--border-color);
    margin: 2.5rem 0;
}

.section-description {
    color: var(--text-muted-color);
    margin-bottom: 1.5rem;
    max-width: 600px;
}

.btn-large {
    padding: 12px 24px;
    font-size: 1.1rem;
}

.table-photo {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    vertical-align: middle;
}

.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    font-size: 0.9rem;
    flex-wrap: wrap;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rows-per-page-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- FORMULAIRE D'INSPECTION --- */
#inspection-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

.info-card {
    background: var(--bg-light-color);
    padding: 1.5rem;
    border-radius: 8px;
}

.info-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}

#extinguisher-info-block p {
    margin-bottom: 0.5rem;
}

#extinguisher-photo-preview {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain;
    border-radius: 8px;
    background-color: var(--bg-color);
}

#checklist-container {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.checklist-item {
    background: var(--bg-light-color);
    padding: 1rem;
    border-radius: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.checklist-radios {
    display: flex;
    gap: 1.5rem;
}

.checklist-radios label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checklist-radios input[type="radio"] {
    accent-color: var(--primary-color);
    width: 18px;
    height: 18px;
}

#anomaly-details-section {
    background: rgba(239, 68, 68, 0.05);
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 1.5rem;
    border-radius: 8px;
    margin-top: 2rem;
}

.file-input-wrapper {
    margin-top: 10px;
}

.form-navigation-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;
    margin-top: 2rem;
    border-top: 1px solid var(--border-color);
}

/* --- MODALE EXTINCTEUR --- */
.photo-preview-box {
    flex: 1;
    text-align: center;
}

.photo-preview-box span {
    font-size: 0.8rem;
    color: var(--text-muted-color);
    display: block;
    margin-bottom: 5px;
}

.photo-preview-box img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
}

.files-list .file-item .btn-delete-file {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0 5px;
}

/* --- LOADER --- */
#loader-overlay {
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.8);
}

#loader-overlay .loader-content {
    text-align: center;
    color: white;
}

#loader-overlay .spinner {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 4px solid var(--bg-lighter-color);
    border-right-color: var(--primary-color);
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
}

#loader-overlay h3 {
    margin-top: 1.5rem;
}


/* --- RESPONSIVE DESIGN --- */
@media (max-width: 768px) {
    main {
        padding: 1.5rem;
    }
    #inspection-content-grid {
        grid-template-columns: 1fr;
    }
    .form-navigation-footer {
        flex-wrap: wrap;
    }
    #back-to-main-view-btn {
        width: 100%;
        order: 3;
        margin-top: 1rem;
    }
    .pagination-container {
        justify-content: center;
        flex-direction: column;
    }
}

/* ====================================================== */
/* AJOUTS POUR LA V4 : DRAG & DROP, NOUVELLE INSPECTION   */
/* ====================================================== */

.search-filter .fa-search {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted-color);
}
.search-filter input {
    padding-left: 35px;
    width: 250px;
}
.save-status {
    font-size: 0.9em;
    color: var(--success-color);
    opacity: 0;
    transition: opacity 0.5s;
}
.save-status.visible {
    opacity: 1;
}

/* Styles pour le glisser-déposer */
.drag-handle {
    cursor: grab;
    color: var(--text-muted-color);
    width: 30px;
    text-align: center;
}
tr.sortable-ghost {
    opacity: 0.4;
    background-color: var(--primary-color);
}
tr:grabbing {
    cursor: grabbing;
}

/* Barre de progression */
.inspection-header {
    margin-bottom: 2rem;
}
.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: var(--bg-lighter-color);
    border-radius: 4px;
    margin-top: 1rem;
    overflow: hidden;
}
.progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--primary-color);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Effet de rotation pour les anomalies */
.checklist-item-wrapper {
    perspective: 1000px;
    grid-column: 1 / -1; /* Prend toute la largeur */
    min-height: 100px; /* Hauteur minimale pour l'animation */
}
.checklist-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.checklist-item-wrapper.is-flipped .checklist-flipper {
    transform: rotateY(180deg);
}
.checklist-front, .anomaly-block {
    position: absolute;
    width: 100%;
    height: auto;
    min-height: 100px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    top: 0;
    left: 0;
}
.anomaly-block {
    transform: rotateY(180deg);
}

#extinguisher-photo-preview:not([src]) {
    min-height: 250px;
    background-color: var(--bg-color);
}

.anomaly-block {
    background: var(--bg-light-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1.5rem;
}

.anomaly-block h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-weight: 600;
}

.anomaly-photos-container {
    margin-top: 1rem;
}

.anomaly-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.anomaly-photo-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
}

.anomaly-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.anomaly-photo-preview .delete-photo-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--danger-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
}

.anomaly-block-footer {
    margin-top: 1.5rem;
    text-align: right;
}
/* --- AJOUTS ET CORRECTIONS SPÉCIFIQUES À L'INSPECTION DES EXTINCTEURS --- */

/* Conteneur principal de l'inspection pour centrage */
#main-content-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center; /* Centre le formulaire horizontalement */
    padding-bottom: 30px; /* Espace en bas pour le pied de page de navigation */
}

/* Section du formulaire d'inspection */
#inspection-form-section {
    display: flex; /* Toujours en flex pour la structure interne */
    flex-direction: column;
    width: 100%;
    max-width: 900px; /* Limite la largeur du formulaire */
    background-color: var(--bg-light-color);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden; /* Assure que le contenu respecte le border-radius */
    margin-top: 20px; /* Espacement depuis le haut */
    margin-bottom: 20px; /* Espacement avec le bas */
}

/* En-tête de l'inspection (titre et barre de progression) */
.inspection-header {
    background-color: var(--bg-lighter-color);
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: sticky; /* L'en-tête reste visible en haut lors du défilement */
    top: 0;
    z-index: 10; /* Assure que l'en-tête est au-dessus du contenu défilant */
}

.inspection-header h2 {
    margin: 0;
    font-size: 1.35rem;
    color: var(--primary-color);
}

/* Zone de défilement pour le contenu du formulaire */
#inspection-scroll-area {
    padding: 2rem;
    overflow-y: auto; /* Permet le défilement si le contenu dépasse */
    flex-grow: 1; /* Permet à cette zone de prendre l'espace disponible */
}

/* Disposition en deux colonnes pour Informations et Photo */
#inspection-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Deux colonnes égales */
    gap: 2rem;
    margin-bottom: 2rem;
}

.info-card {
    background: var(--bg-color); /* Utilise la couleur de fond principale pour la carte */
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-color); /* Ajoute une bordure pour les délimiter */
    display: flex; /* Utilise flex pour aligner le contenu des cartes */
    flex-direction: column;
}

.info-card h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.75rem;
}

#extinguisher-photo-preview {
    width: 100%;
    height: auto;
    max-height: 250px;
    object-fit: contain; /* Garde les proportions de l'image */
    border-radius: 8px;
    background-color: var(--bg-lighter-color); /* Couleur de fond pour l'image */
    border: 1px solid var(--border-color); /* Bordure pour l'image */
    flex-grow: 1; /* Permet à l'image de prendre l'espace disponible dans sa carte */
    display: block; /* S'assure qu'elle n'est pas traitée comme inline */
    margin-top: 1rem; /* Ajoute un peu d'espace au-dessus de l'image */
}
/* Fallback pour l'image si elle n'a pas de source */
#extinguisher-photo-preview:not([src]) {
    min-height: 150px; /* Hauteur minimale pour le placeholder */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted-color);
    font-style: italic;
    &::after {
        content: "Pas de photo";
    }
}


/* Styles pour les points de contrôle */
#checklist-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Espacement entre chaque point de contrôle */
}

.checklist-item-wrapper {
    background: var(--bg-color); /* Fond pour chaque wrapper de checklist */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden; /* Important pour cacher/révéler le bloc d'anomalie */
    transition: all 0.4s ease-in-out; /* Transition douce pour l'ouverture/fermeture */
}

.checklist-item {
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    font-weight: 500;
    color: var(--text-color);
}

.checklist-radios {
    display: flex;
    gap: 1.5rem;
}

.checklist-radios label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: var(--text-muted-color);
}

.checklist-radios input[type="radio"] {
    accent-color: var(--primary-color);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Style pour le texte des radios quand coché */
.checklist-radios input[type="radio"]:checked + span {
    color: var(--primary-color);
    font-weight: 600;
}

/* Bloc d'anomalie - Contrôle de la visibilité et de l'animation */
.anomaly-block {
    display: grid; /* Utilise la grille pour organiser les éléments internes (commentaire, photos) */
    grid-template-columns: 1fr;
    gap: 1rem; /* Espacement entre les éléments du bloc d'anomalie */
    padding: 0 1.5rem; /* Padding horizontal initial, vertical géré par l'ouverture */
    background-color: var(--bg-lighter-color); /* Fond du bloc d'anomalie, légèrement plus clair */
    border-top: 1px solid var(--border-color); /* Ligne de séparation avec le point de contrôle */
    max-height: 0; /* Important pour l'animation de slide-down */
    overflow: hidden;
    transition: max-height 0.5s ease-out, padding-top 0.5s ease-out, padding-bottom 0.5s ease-out;
}

.checklist-item-wrapper.is-open .anomaly-block {
    max-height: 500px; /* Hauteur suffisante pour afficher le contenu (ajuster si besoin) */
    padding-top: 1rem; /* Padding vertical une fois ouvert */
    padding-bottom: 1.5rem; /* Padding vertical une fois ouvert */
    /* display: grid; reste 'grid' car il a été initialisé comme tel */
}

.anomaly-block .form-group {
    margin-bottom: 0; /* Réinitialise la marge par défaut des form-group dans ce bloc */
}

.anomaly-block textarea.form-control {
    min-height: 80px;
    resize: vertical; /* Permet le redimensionnement vertical du textarea */
}

/* Style pour le bouton de capture/choix de photos */
.btn-camera {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    justify-content: center; /* Centre le contenu du bouton */
    width: fit-content; /* S'adapte au contenu du texte/icône */
}

.btn-camera:hover {
    background-color: var(--bg-lighter-color);
}

/* Grille pour les aperçus de photos d'anomalies */
.anomaly-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* Aperçus de photos d'anomalies */
    gap: 10px;
    margin-top: 0.5rem;
}

.anomaly-photo-preview {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--bg-lighter-color); /* Fond pour les aperçus vides */
}

.anomaly-photo-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Bouton de suppression de photo sur l'aperçu */
.anomaly-photo-preview .delete-photo-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(239, 68, 68, 0.8); /* Rouge transparent */
    color: white;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 5; /* Assure qu'il est au-dessus de l'image */
}

.anomaly-photo-preview .delete-photo-btn:hover {
    background-color: var(--danger-color);
}

/* Pied de page de navigation du formulaire */
.form-navigation-footer {
    display: flex;
    justify-content: flex-end; /* Alignement à droite des boutons */
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border-color);
    background-color: var(--bg-lighter-color); /* Fond du pied de page */
}

/* Responsive pour les écrans plus petits */
@media (max-width: 768px) {
    #inspection-form-section {
        margin: 10px;
        border-radius: 8px;
    }
    #inspection-content-grid {
        grid-template-columns: 1fr; /* Une seule colonne sur mobile pour informations et photo */
        gap: 1.5rem;
    }
    #inspection-scroll-area {
        padding: 1rem;
    }
    .checklist-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 0.8rem 1rem;
    }
    .checklist-radios {
        margin-top: 10px;
        width: 100%;
        justify-content: space-around;
    }
    .form-navigation-footer {
        flex-wrap: wrap;
        padding: 1rem;
    }
    #back-to-main-view-btn {
        width: 100%;
        order: 3; /* Place le bouton annuler en bas sur mobile */
        margin-top: 1rem;
    }
    .btn-camera {
        width: 100%; /* Bouton de caméra pleine largeur sur mobile */
    }
}

/* ====================================================== */
/* AJOUTS POUR LA PAGE D'INSPECTION DES CAMÉRAS           */
/* Collez ce bloc à la fin de votre fichier style_pro.css */
/* ====================================================== */

/* --- Tableau d'inspection --- */
.inspection-table td {
    vertical-align: middle;
    padding: 8px 10px;
}

.inspection-table .form-control {
    padding: 6px 10px;
    font-size: 0.9rem;
    min-width: 140px;
}

.inspection-table .comment-input {
    min-width: 200px;
}

.inspection-table .photo-anomaly-cell {
    text-align: center;
}

.add-anomaly-photo-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    transition: all 0.2s;
}

.add-anomaly-photo-btn:hover {
    background-color: var(--bg-lighter-color);
    color: var(--primary-color);
}

.add-anomaly-photo-btn.has-photo {
    border-color: var(--success-color);
    color: var(--success-color);
}

/* --- Modale pour coller une photo --- */
.paste-target-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--bg-color);
    margin-top: 1rem;
}

#paste-placeholder {
    color: var(--text-muted-color);
    font-style: italic;
}

#pasted-image-preview {
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    display: none; /* Cachée par défaut */
}

.paste-target-area.has-image #paste-placeholder {
    display: none;
}

.paste-target-area.has-image #pasted-image-preview {
    display: block;
}

/* --- Loader avec cercle de progression --- */
.progress-circle-loader {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(var(--primary-color) 0deg, var(--bg-lighter-color) 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: background 0.3s;
}

.progress-circle-loader::before {
    content: '';
    position: absolute;
    width: 65px;
    height: 65px;
    background: var(--bg-light-color);
    border-radius: 50%;
}

.progress-circle-loader-value {
    position: relative;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
}
/* ====================================================== */
/* AJOUTS POUR LA PAGE D'INSPECTION DES CAMÉRAS (V2)      */
/* ====================================================== */

/* --- Mise en page du formulaire d'inspection --- */
main.inspection-mode #main-content-wrapper {
    align-items: flex-start; /* Stoppe le centrage pour permettre la pleine largeur */
}

main.inspection-mode #inspection-form-section {
    max-width: none; /* Supprime la limite de largeur */
    width: 100%;     /* Le formulaire prend toute la largeur disponible */
    margin-top: 0;   /* Colle le formulaire en haut de la zone principale */
    box-shadow: none;/* Supprime l'ombre pour une meilleure intégration */
    border-radius: 0;
    border-left: none;
    border-right: none;
}

main.inspection-mode .inspection-header {
    border-radius: 0;
}


/* --- Tableau d'inspection --- */
.inspection-table td {
    vertical-align: middle;
    padding: 8px 10px;
    white-space: nowrap; /* Empêche le texte des entêtes de passer à la ligne */
}

.inspection-table .form-control {
    padding: 6px 10px;
    font-size: 0.9rem;
    min-width: 140px;
}

.inspection-table .comment-input {
    min-width: 200px;
}

.inspection-table .photo-anomaly-cell {
    text-align: center;
}

.add-anomaly-photo-btn {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 1.1rem;
    transition: all 0.2s;
}

.add-anomaly-photo-btn:hover {
    background-color: var(--bg-lighter-color);
    color: var(--primary-color);
}

.add-anomaly-photo-btn.has-photo {
    border-color: var(--success-color);
    color: var(--success-color);
}

/* --- Modale pour coller une photo --- */
.paste-target-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--bg-color);
    margin-top: 1rem;
}

#paste-placeholder {
    color: var(--text-muted-color);
    font-style: italic;
}

#pasted-image-preview {
    max-width: 100%;
    max-height: 350px;
    object-fit: contain;
    display: none; /* Cachée par défaut */
}

.paste-target-area.has-image #paste-placeholder {
    display: none;
}

.paste-target-area.has-image #pasted-image-preview {
    display: block;
}

/* --- Loader avec cercle de progression --- */
.progress-circle-loader {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: conic-gradient(var(--primary-color) 0deg, var(--bg-lighter-color) 0deg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: background 0.3s;
}

.progress-circle-loader::before {
    content: '';
    position: absolute;
    width: 65px;
    height: 65px;
    background: var(--bg-light-color);
    border-radius: 50%;
}

.progress-circle-loader-value {
    position: relative;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color);
}
/* ====================================================== */
/* AJOUTS POUR LE LOGO ET LE THÈME (LIGHT/DARK MODE)       */
/* ====================================================== */

/* --- Variables pour le thème clair --- */
body.light-mode {
    --bg-color: #f3f4f6; /* Fond principal clair */
    --bg-light-color: #ffffff; /* Fond des cartes, sidebar */
    --bg-lighter-color: #e5e7eb; /* Couleur pour hover, etc. */
    --border-color: #d1d5db; /* Bordures */
    --text-color: #111827; /* Texte principal sombre */
    --text-muted-color: #6b7280; /* Texte secondaire grisé */
}

/* --- Style pour le logo --- */
.header-logo img {
    transition: filter 0.3s ease;
}

/* En mode clair, on peut inverser le logo s'il est blanc sur fond transparent */
body.light-mode .header-logo img {
    filter: invert(1);
}

/* --- Style pour le bouton de thème --- */
.btn-icon {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background-color: var(--bg-lighter-color);
    color: var(--text-color);
}

#theme-toggle-btn i {
    transition: transform 0.3s ease-in-out;
}

#theme-toggle-btn:hover i {
    transform: rotate(15deg);
}
/* ====================================================== */
/* AJOUTS POUR LE LOGO ET LE THÈME (LIGHT/DARK MODE)       */
/* ====================================================== */

/* --- Variables pour le thème clair --- */
body.light-mode {
    --bg-color: #f3f4f6; 
    --bg-light-color: #ffffff;
    --bg-lighter-color: #e5e7eb;
    --border-color: #d1d5db;
    --text-color: #111827;
    --text-muted-color: #6b7280;
}

/* --- CORRECTION POUR LE LOGO EN MODE CLAIR --- */
/* Cette règle inverse les couleurs du logo (noir->blanc, blanc->noir) */
/* uniquement quand le thème clair (.light-mode) est actif. */
body.light-mode .header-logo img {
    filter: invert(1);
}

/* --- Style pour le bouton de thème --- */
.btn-icon {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background-color: var(--bg-lighter-color);
    color: var(--text-color);
}

#theme-toggle-btn i {
    transition: transform 0.3s ease-in-out;
}

#theme-toggle-btn:hover i {
    transform: rotate(15deg);
}Ã /* ================================================================== */
/* MISE À JOUR DESIGN : THÈME CLAIR, LOGO & LAUNCHPAD (VERSION FINALE) */
/* ================================================================== */

/* --- Variables pour le nouveau thème clair professionnel --- */
body.light-mode {
    --primary-color: #2563eb; /* Un bleu plus vif */
    --danger-color: #dc2626;
    --success-color: #16a34a;
    --bg-color: #f4f7fa; /* Fond principal gris très clair */
    --bg-light-color: #ffffff; /* Fond des cartes, sidebar, header */
    --bg-lighter-color: #eef2f7; /* Couleur pour hover */
    --border-color: #dce4f0; /* Bordures douces */
    --text-color: #1e293b; /* Texte principal (noir doux) */
    --text-muted-color: #64748b; /* Texte secondaire (gris) */
}

/* --- Correction et style du nouveau logo --- */
.header-logo a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    height: 38px;
    transition: filter 0.3s ease;
}

.logo-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-muted-color);
    transition: color 0.3s ease;
}

/* En mode clair, inverser l'icône et changer la couleur du texte */
body.light-mode .logo-icon {
    filter: invert(1);
}
body.light-mode .logo-text {
    color: var(--text-color);
}


/* --- Amélioration du design du Launchpad en mode clair --- */
body.light-mode .launchpad-item a {
    color: var(--text-color);
}

body.light-mode .launchpad-item-icon {
    background: var(--bg-lighter-color);
    border: 1px solid var(--border-color);
}

body.light-mode .launchpad-item-icon i {
    color: var(--text-muted-color);
}

/* Hover effect en mode clair */
body.light-mode .launchpad-item:not(.is-disabled):hover .launchpad-item-icon {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

body.light-mode .launchpad-item:not(.is-disabled):hover .launchpad-item-icon i {
    color: #ffffff;
}

/* --- Style pour le bouton de thème --- */
.btn-icon {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background-color: var(--bg-lighter-color);
    color: var(--text-color);
}

#theme-toggle-btn i {
    transition: transform 0.3s ease-in-out;
}

#theme-toggle-btn:hover i {
    transform: rotate(15deg);
}

/* --- Ajustements généraux pour le thème clair --- */
body.light-mode #app-header {
    border-bottom: 1px solid var(--border-color);
}
body.light-mode #app-sidebar {
    border-right: 1px solid var(--border-color);
}
body.light-mode #app-sidebar ul li a:hover {
    background-color: var(--bg-lighter-color);
    color: var(--text-color);
}
body.light-mode .hamburger-btn {
    border-color: var(--border-color);
}
body.light-mode .data-table thead th {
    background-color: #f8fafc; /* Fond d'en-tête de tableau légèrement différent */
}
body.light-mode .data-table tbody tr:hover {
     background-color: var(--bg-lighter-color);
}
body.light-mode .form-control {
    background-color: #fdfdff;
    border-color: var(--border-color);
}
body.light-mode .modal-content {
    border: 1px solid #d1d5db;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
/* ====================================================================== */
/* MISE À JOUR DESIGN : THÈME CLAIR, LOGO & SOUS-MENUS (VERSION FINALE BIS) */
/* ====================================================================== */

/* --- Variables pour le nouveau thème clair professionnel --- */
body.light-mode {
    --primary-color: #2563eb; /* Un bleu plus vif */
    --danger-color: #dc2626;
    --success-color: #16a34a;
    --bg-color: #f4f7fa; /* Fond principal gris très clair */
    --bg-light-color: #ffffff; /* Fond des cartes, sidebar, header */
    --bg-lighter-color: #eef2f7; /* Couleur pour hover */
    --border-color: #dce4f0; /* Bordures douces */
    --text-color: #1e293b; /* Texte principal (noir doux) */
    --text-muted-color: #64748b; /* Texte secondaire (gris) */
    --dropdown-bg-color: #ffffff; /* Fond des sous-menus */
    --dropdown-border-color: #dce4f0; /* Bordure des sous-menus */
    --dropdown-text-color: #1e293b; /* Texte des sous-menus */
    --dropdown-hover-bg-color: #eef2f7; /* Hover des sous-menus */
}

/* --- Correction et style du nouveau logo --- */
.header-logo a {
    display: flex;
    align-items: center;
    gap: 10px; /* Réduction de l'espace */
}

.logo-icon {
    height: 28px; /* Réduction de la taille de l'icône */
    transition: filter 0.3s ease;
}

.logo-text {
    font-size: 1.2rem; /* Légère augmentation de la taille du texte */
    font-weight: 400; /* Style sans-serif plus standard */
    color: var(--text-muted-color);
    transition: color 0.3s ease;
    letter-spacing: 0.5px; /* Léger espacement des lettres */
}

/* En mode clair, inverser l'icône et changer la couleur du texte */
body.light-mode .logo-icon {
    filter: invert(1);
}
body.light-mode .logo-text {
    color: var(--text-color); /* Texte noir en mode clair */
}
body.dark-mode .logo-text {
    color: #ffffff; /* Texte blanc en mode sombre */
}


/* --- Amélioration du design du Launchpad en mode clair --- */
body.light-mode .launchpad-item a {
    color: var(--text-color);
}

body.light-mode .launchpad-item-icon {
    background: var(--bg-light-color); /* Fond blanc pour les icônes */
    border: 1px solid var(--border-color);
}

body.light-mode .launchpad-item-icon i {
    color: var(--text-muted-color);
}

/* Hover effect en mode clair */
body.light-mode .launchpad-item:not(.is-disabled):hover .launchpad-item-icon {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

body.light-mode .launchpad-item:not(.is-disabled):hover .launchpad-item-icon i {
    color: #ffffff;
}

/* --- Style pour le bouton de thème --- */
.btn-icon {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
    width: 34px;
    height: 34px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background-color: var(--bg-lighter-color);
    color: var(--text-color);
}

#theme-toggle-btn i {
    transition: transform 0.3s ease-in-out;
}

#theme-toggle-btn:hover i {
    transform: rotate(15deg);
}

/* --- Ajustements généraux pour le thème clair --- */
body.light-mode #app-header {
    border-bottom: 1px solid var(--border-color);
}
body.light-mode #app-sidebar {
    border-right: 1px solid var(--border-color);
    background-color: var(--bg-light-color); /* Fond blanc pour la sidebar */
}
body.light-mode #app-sidebar ul li a {
    color: var(--text-color); /* Texte noir dans la sidebar */
}
body.light-mode #app-sidebar ul li a:hover {
    background-color: var(--bg-lighter-color);
    color: var(--text-color);
}
body.light-mode .hamburger-btn {
    border-color: var(--border-color);
}
body.light-mode .data-table thead th {
    background-color: #f8fafc; /* Fond d'en-tête de tableau légèrement différent */
    color: var(--text-color);
}
body.light-mode .data-table tbody tr:hover {
     background-color: var(--bg-lighter-color);
}
body.light-mode .form-control {
    background-color: #fdfdff;
    border-color: var(--border-color);
    color: var(--text-color);
}
body.light-mode .modal-content {
    border: 1px solid #d1d5db;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    background-color: var(--bg-light-color);
    color: var(--text-color);
}

/* --- Style pour les sous-menus (Dropdowns) en mode clair --- */
body.light-mode .submodules-menu {
    background-color: var(--dropdown-bg-color);
    border: 1px solid var(--dropdown-border-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.light-mode .submodules-menu a {
    color: var(--dropdown-text-color);
}

body.light-mode .submodules-menu a:hover {
    background-color: var(--dropdown-hover-bg-color);
}

/* ================================================================== */
/* MISE À JOUR DESIGN : THÈME CLAIR, LOGO & LAUNCHPAD (VERSION FINALE) */
/* ================================================================== */

/* --- Variables pour le nouveau thème clair professionnel --- */
body.light-mode {
    --primary-color: #2563eb; /* Un bleu plus vif */
    --danger-color: #dc2626;
    --success-color: #16a34a;
    --bg-color: #f4f7fa; /* Fond principal gris très clair */
    --bg-light-color: #ffffff; /* Fond des cartes, sidebar, header */
    --bg-lighter-color: #eef2f7; /* Couleur pour hover */
    --border-color: #e2e8f0; /* Bordures douces */
    --text-color: #1e293b; /* Texte principal (noir doux) */
    --text-muted-color: #64748b; /* Texte secondaire (gris) */
}

/* --- Style et équilibre du logo --- */
.header-logo a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    height: 32px; /* Taille ajustée pour un meilleur équilibre */
    transition: filter 0.3s ease;
}

.logo-text {
    font-size: 1.1rem; /* Taille ajustée */
    font-weight: 500;
    color: var(--text-color); /* Utilise la variable de texte principale */
    transition: color 0.3s ease;
    letter-spacing: 0.5px;
    opacity: 0.7; /* Légère transparence pour adoucir */
}

/* En mode sombre, le texte devient blanc pour plus de contraste */
body:not(.light-mode) .logo-text {
    color: #ffffff;
    opacity: 0.8;
}

/* --- Style pour le bouton de thème --- */
.btn-icon {
    background: none;
    border: 1px solid transparent;
    color: var(--text-muted-color);
    width: 38px;
    height: 38px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.btn-icon:hover {
    background-color: var(--bg-lighter-color);
    color: var(--text-color);
}

#theme-toggle-btn i {
    transition: transform 0.3s ease-in-out;
}

#theme-toggle-btn:hover i {
    transform: rotate(15deg);
}

/* --- Amélioration du design du Launchpad en mode clair --- */
body.light-mode .launchpad-item a {
    color: var(--text-color);
}

body.light-mode .launchpad-item-icon {
    background: var(--bg-light-color); /* Fond blanc pour les icônes */
    border: 1px solid var(--border-color);
}

body.light-mode .launchpad-item-icon i {
    color: var(--text-muted-color);
}

/* Effet de survol du Launchpad en mode clair */
body.light-mode .launchpad-item:not(.is-disabled):hover .launchpad-item-icon {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

body.light-mode .launchpad-item:not(.is-disabled):hover .launchpad-item-icon i {
    color: #ffffff;
}

/* --- Correction du survol des sous-modules en mode clair --- */
body.light-mode .submodules-container {
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body.light-mode .submodules-list li a {
    color: var(--text-color);
}

body.light-mode .submodules-list li a:hover {
    color: white; /* Le fond devient bleu (primary-color), donc le texte doit être blanc */
}

/* --- Ajustements généraux pour le thème clair --- */
body.light-mode #app-header,
body.light-mode #app-sidebar,
body.light-mode .modal-content {
    border-color: var(--border-color);
}

body.light-mode #app-sidebar ul li a {
    color: var(--text-muted-color);
}

body.light-mode #app-sidebar ul li a:hover {
    color: var(--primary-color);
    background-color: var(--bg-lighter-color);
}

body.light-mode #app-sidebar ul li a.active {
    background-color: var(--primary-color);
    color: white;
}



/* ====================================================== */
/* ✅ RESPONSIVE STYLES FOR MOBILE & TABLET (BELOW 768px)  */
/* ====================================================== */
@media (max-width: 768px) {
    main {
        padding: 1.5rem;
    }
    
    .header-left {
        flex-grow: 1; /* Allows the logo to take space */
    }

    .header-logo a {
        margin: 0 auto; /* Centers the logo in the available space */
    }

    .logo-text, .user-profile {
        display: none; /* Hide the text part of the logo and user name on small screens */
    }
    
    .header-right {
        gap: 0.5rem; /* Reduce space between right-side icons */
    }

    #app-header {
        padding: 0 0.75rem; /* Reduce header padding */
    }

    .launchpad-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for modules on mobile */
        gap: 1rem;
    }
}
/* ===== Rapport Vérif — Onglets & To‑Do UI ===== */
.modal-content.large{max-width:1100px}
.modal-nav{display:flex;gap:.5rem;border-bottom:1px solid var(--border-color);padding:0 1rem}
.modal-nav .nav-link{appearance:none;background:none;border:none;cursor:pointer;padding:.85rem 1rem;border-bottom:2px solid transparent;border-radius:8px 8px 0 0;color:var(--text-muted-color);font-weight:500}
.modal-nav .nav-link.active{color:var(--primary-color);border-bottom-color:var(--primary-color);background:#0000}
.tab-pane{display:none}.tab-pane.active{display:block}
.form-section-title{font-size:1.1rem;font-weight:600;color:var(--primary-color);margin:1rem 0 .75rem;padding-bottom:.35rem;border-bottom:2px solid var(--border-color)}
.readonly-good{background:rgba(34,197,94,.12);border-color:var(--success-color)}

/* style Microsoft To Do */
.todo-style-group{display:flex;align-items:center;gap:.6rem;padding:.45rem .6rem;border:1px solid var(--border-color);border-radius:8px;background:#fff0;background-color:var(--bg-light-color)}
.todo-style-group .todo-icon{width:20px;text-align:center;opacity:.8}
.todo-style-group .clear-btn{margin-left:auto;cursor:pointer;opacity:.6}
.todo-style-group .clear-btn:hover{opacity:1}

/* badges & alertes pour Jours restants */
.badge-warning{background:rgba(245,158,11,.15);color:#b45309;padding:.2rem .45rem;border-radius:8px}
.badge-danger{background:rgba(239,68,68,.15);color:#991b1b;padding:.2rem .45rem;border-radius:8px}
.row-overdue{background:rgba(239,68,68,.10)}
.planned{color:var(--text-muted-color);font-style:italic}

/* ====================================================== */
/* AJOUTS POUR LA PAGE RAPPORTS VÉRIFICATIONS RÉGLEMENTAIRES */
/* ====================================================== */

/* --- Style pour les filtres sur une seule ligne --- */
.controls-bar .filters-container {
    flex-grow: 1;
    gap: 10px;
    flex-wrap: nowrap; /* Force les éléments à rester sur une ligne */
}
.filters-container .form-control, .filters-container .search-filter {
    flex: 1 1 auto; /* Permet aux filtres de s'adapter en largeur */
    min-width: 150px;
}
.filters-container .search-filter input {
    width: 100%;
}


/* --- Style pour les champs en lecture seule dans l'onglet 2 --- */
.readonly-info-group input[readonly] {
    background-color: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: var(--text-color) !important;
    font-weight: 500;
}
body.light-mode .readonly-info-group input[readonly] {
     background-color: #e8f5e9 !important;
     border-color: #a5d6a7 !important;
}


/* --- Style pour le champ de périodicité personnalisé --- */
#periodicite-custom-group {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Style pour la colonne Jours Restants --- */
.table-container td.alert-danger {
    color: var(--danger-color);
    font-weight: 600;
}
.table-container td.alert-warning {
    color: #f59e0b; /* Jaune/Orange */
    font-weight: 500;
}
.table-container td.done {
    color: var(--success-color);
    font-weight: 600;
}
.table-container .danger-icon {
    margin-right: 8px;
    animation: blink 1.5s infinite;
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* ====================================================== */
/* AJOUTS POUR LA MISE EN PAGE PLEIN ÉCRAN (FULL BLEED)    */
/* ====================================================== */

/* --- Structure principale de la page --- */
main.full-bleed-layout {
    display: flex;
    flex-direction: column;
    height: 100%; /* Important pour que le conteneur prenne toute la hauteur */
    padding: 1.5rem; /* Padding réduit pour les écrans plus petits */
}

/* --- Éléments fixes --- */
.layout-header {
    flex-shrink: 0; /* Empêche le titre de rétrécir */
    margin-bottom: 1.5rem;
}
.layout-controls {
    flex-shrink: 0; /* Empêche les filtres de rétrécir */
    margin-bottom: 1.5rem;
}
.layout-pagination {
    flex-shrink: 0; /* Empêche la pagination de rétrécir */
    margin-top: 1.5rem;
}

/* --- Zone de tableau scrollable --- */
.layout-table {
    flex-grow: 1; /* Fait en sorte que le tableau prenne tout l'espace vertical restant */
    overflow: auto; /* Active le défilement vertical et horizontal si nécessaire */
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

/* --- Ajustement de la largeur des filtres --- */
.controls-bar .filters-container {
    flex-grow: 1;
    gap: 10px;
}
.filters-container .search-filter {
    flex: 2 1 250px; /* Le champ de recherche prend plus de place */
}
.filters-container .search-filter input {
    width: 100%;
}
.filters-container .form-control {
    flex: 1 1 150px; /* Les autres filtres s'adaptent */
}
/* Pour les filtres de date, on leur donne une taille fixe plus petite */
.filters-container input[type="date"] {
    flex-basis: 140px;
    min-width: 140px;
}

/* ============================================= */
/* == CSS SPÉCIFIQUE PAGE BOÎTES À PHARMACIES == */
/* ============================================= */

/* Clic sur les photos pour les agrandir */
.table-photo {
    cursor: zoom-in;
    transition: transform 0.2s;
}

/* Table d'inspection */
.inspection-table th, .inspection-table td {
    vertical-align: middle;
    text-align: center;
    padding: 8px;
    white-space: nowrap;
}
.inspection-table .form-control {
    min-width: 120px;
}
.inspection-table .comment-input {
    min-width: 200px;
    white-space: normal;
}
/* Icônes pour photos et inventaire */
 .action-icon {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.action-icon:hover {
    background-color: var(--primary-color);
}
.action-icon.has-data,
.action-icon.has-photo {
    background-color: var(--success-color); /* Vert si des données/photos existent */
}

/* Modale de photo d'anomalie */
#anomaly-photo-modal .modal-content { max-width: 800px; }
.anomaly-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}
.anomaly-photo-preview { position: relative; }
.anomaly-photo-preview img {
    width: 100%; height: auto; border-radius: 5px; border: 1px solid #ccc;
}
.delete-photo-btn {
    position: absolute; top: -5px; right: -5px;
    background: var(--danger-color); color: white;
    border: none; border-radius: 50%;
    width: 24px; height: 24px;
    font-weight: bold; cursor: pointer;
}

/* Modale inventaire */
#inventory-modal .modal-content { max-width: 700px; }
#inventory-table-body .form-control { min-width: 100px; }

/* Loader avec cercle de progression */
.progress-circle-loader {
    width: 120px; height: 120px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    background: conic-gradient(var(--primary-color) 0deg, var(--bg-lighter-color) 0deg);
    margin-bottom: 20px; transition: background 0.2s;
}
.progress-circle-loader-value {
    width: 100px; height: 100px;
    background-color: var(--bg-dark-color);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.5em; font-weight: bold; color: var(--text-light-color);
}

/* Visionneuse de photo (Lightbox) */
#photo-viewer-modal {
    display: none; position: fixed; z-index: 1001;
    padding-top: 60px; left: 0; top: 0;
    width: 100%; height: 100%; overflow: auto;
    background-color: rgba(0,0,0,0.9);
}
.modal-viewer-content {
    margin: auto; display: block; max-width: 80%; max-height: 80%;
}
.close-viewer-btn {
    position: absolute; top: 15px; right: 35px;
    color: #f1f1f1; font-size: 40px; font-weight: bold;
    transition: 0.3s; cursor: pointer;
}

/* Onglets pour modale */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}
.tab-link {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    border-bottom: 3px solid transparent;
    font-size: 1em;
}
.tab-link.active {
    border-bottom: 3px solid var(--primary-color);
    font-weight: bold;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Liste des médicaments dans la modale d'ajout de boîte */
#medicament-list .medicament-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
 #medicament-list .medicament-item input { flex-grow: 1; }
 #medicament-list .medicament-item .remove-medicament-btn {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    font-size: 1.2em;
 }
 /* ============================================= */
/* == CSS SPÉCIFIQUE PAGE BOÎTES À PHARMACIES == */
/* ============================================= */

/* Clic sur les photos pour les agrandir */
.table-photo {
    cursor: zoom-in;
    transition: transform 0.2s;
}

/* Table d'inspection */
.inspection-table th, .inspection-table td {
    vertical-align: middle;
    text-align: center;
    padding: 8px;
    white-space: nowrap;
}
.inspection-table .form-control {
    min-width: 120px;
}
.inspection-table .comment-input {
    min-width: 200px;
    white-space: normal;
}
/* Icônes pour photos et inventaire */
 .action-icon {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.action-icon:hover {
    background-color: var(--primary-color);
}
.action-icon.has-data,
.action-icon.has-photo {
    background-color: var(--success-color); /* Vert si des données/photos existent */
}

/* Modale de photo d'anomalie */
#anomaly-photo-modal .modal-content { max-width: 800px; }
.anomaly-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}
.anomaly-photo-preview { position: relative; }
.anomaly-photo-preview img {
    width: 100%; height: auto; border-radius: 5px; border: 1px solid #ccc;
}
.delete-photo-btn {
    position: absolute; top: -5px; right: -5px;
    background: var(--danger-color); color: white;
    border: none; border-radius: 50%;
    width: 24px; height: 24px;
    font-weight: bold; cursor: pointer;
}

/* Modale inventaire */
#inventory-modal .modal-content { max-width: 700px; }
#inventory-table-body .form-control { min-width: 100px; }

/* Loader avec cercle de progression */
.progress-circle-loader {
    width: 120px; height: 120px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    background: conic-gradient(var(--primary-color) 0deg, var(--bg-lighter-color) 0deg);
    margin-bottom: 20px; transition: background 0.2s;
}
.progress-circle-loader-value {
    width: 100px; height: 100px;
    background-color: var(--bg-dark-color);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.5em; font-weight: bold; color: var(--text-light-color);
}

/* Visionneuse de photo (Lightbox) */
#photo-viewer-modal {
    display: none; position: fixed; z-index: 1001;
    padding-top: 60px; left: 0; top: 0;
    width: 100%; height: 100%; overflow: auto;
    background-color: rgba(0,0,0,0.9);
}
.modal-viewer-content {
    margin: auto; display: block; max-width: 80%; max-height: 80%;
}
.close-viewer-btn {
    position: absolute; top: 15px; right: 35px;
    color: #f1f1f1; font-size: 40px; font-weight: bold;
    transition: 0.3s; cursor: pointer;
}

/* Onglets pour modale */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}
.tab-link {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    border-bottom: 3px solid transparent;
    font-size: 1em;
}
.tab-link.active {
    border-bottom: 3px solid var(--primary-color);
    font-weight: bold;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Liste des médicaments dans la modale d'ajout de boîte */
#medicament-list .medicament-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
 #medicament-list .medicament-item input { flex-grow: 1; }
 #medicament-list .medicament-item .remove-medicament-btn {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    font-size: 1.2em;
 }

 /* ============================================= */
/* == CSS SPÉCIFIQUE PAGE BOÎTES À PHARMACIES == */
/* ============================================= */

/* Clic sur les photos pour les agrandir */
.table-photo {
    cursor: zoom-in;
    transition: transform 0.2s;
}

/* Table d'inspection */
.inspection-table th, .inspection-table td {
    vertical-align: middle;
    text-align: center;
    padding: 8px;
    white-space: nowrap;
}
.inspection-table .form-control {
    min-width: 120px;
}
/* Icônes pour photos et inventaire */
 .action-icon {
    background-color: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 35px;
    height: 35px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.action-icon:hover {
    background-color: var(--primary-color);
}
.action-icon.has-data,
.action-icon.has-photo {
    background-color: var(--success-color); /* Vert si des données/photos existent */
}

/* Modale de photo d'anomalie */
#anomaly-photo-modal .modal-content { max-width: 800px; }
.anomaly-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}
.anomaly-photo-preview { position: relative; }
.anomaly-photo-preview img {
    width: 100%; height: auto; border-radius: 5px; border: 1px solid #ccc;
}
.delete-photo-btn {
    position: absolute; top: -5px; right: -5px;
    background: var(--danger-color); color: white;
    border: none; border-radius: 50%;
    width: 24px; height: 24px;
    font-weight: bold; cursor: pointer;
}

/* Modale inventaire */
#inventory-modal .modal-content { max-width: 700px; }
#inventory-table-body .form-control { min-width: 100px; }

/* Loader avec cercle de progression */
.progress-circle-loader {
    width: 120px; height: 120px; border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    background: conic-gradient(var(--primary-color) 0deg, var(--bg-lighter-color) 0deg);
    margin-bottom: 20px; transition: background 0.2s;
}
.progress-circle-loader-value {
    width: 100px; height: 100px;
    background-color: var(--bg-dark-color);
    border-radius: 50%;
    display: flex; justify-content: center; align-items: center;
    font-size: 1.5em; font-weight: bold; color: var(--text-light-color);
}

/* Visionneuse de photo (Lightbox) */
#photo-viewer-modal {
    display: none; position: fixed; z-index: 1001;
    padding-top: 60px; left: 0; top: 0;
    width: 100%; height: 100%; overflow: auto;
    background-color: rgba(0,0,0,0.9);
}
.modal-viewer-content {
    margin: auto; display: block; max-width: 80%; max-height: 80%;
}
.close-viewer-btn {
    position: absolute; top: 15px; right: 35px;
    color: #f1f1f1; font-size: 40px; font-weight: bold;
    transition: 0.3s; cursor: pointer;
}

/* Onglets pour modale */
.modal-tabs {
    display: flex;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
}
.tab-link {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    border-bottom: 3px solid transparent;
    font-size: 1em;
}
.tab-link.active {
    border-bottom: 3px solid var(--primary-color);
    font-weight: bold;
}
.tab-content { display: none; }
.tab-content.active { display: block; }

/* Liste des médicaments dans la modale d'ajout de boîte */
#medicament-list .medicament-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
 #medicament-list .medicament-item input { flex-grow: 1; }
 #medicament-list .medicament-item .remove-medicament-btn {
    background: none;
    border: none;
    color: var(--danger-color);
    cursor: pointer;
    font-size: 1.2em;
 }
 /* GRILLE POUR LES GRAPHIQUES */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.chart-container {
    background-color: var(--bg-dark-color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* FILTRES MULTI-SÉLECTION */
select[multiple] {
    min-height: 38px;
    height: auto;
    padding: 8px;
}
.controls-bar .filters-container {
    flex-wrap: wrap;
}

/* STATUT DE LA FACTURE DANS LE TABLEAU */
.status-pill {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: bold;
    color: white;
}
.status-pill.paid {
    background-color: var(--success-color);
}
.status-pill.due {
    background-color: var(--danger-color);
}

/* GRILLE POUR LES GRAPHIQUES */
.charts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-top: 20px;
}
.chart-container {
    background-color: var(--bg-dark-color);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* FILTRES MULTI-SÉLECTION */
select[multiple] {
    min-height: 38px;
    height: auto;
    padding: 8px;
}
.controls-bar .filters-container {
    flex-wrap: wrap;
}

/* STATUT DE LA FACTURE DANS LE TABLEAU */
.status-pill {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.85em;
    font-weight: bold;
    color: white;
}
.status-pill.paid {
    background-color: var(--success-color);
}
.status-pill.due {
    background-color: var(--danger-color);
}

/* ===========================
   Consommation Électrique (cons_elec.html)
   Scope: #cons-elec
   =========================== */

:root {
  --ce-bg: #0f172a;           /* fond carte (dark) */
  --ce-panel: #111827;        /* panneaux (dark) */
  --ce-text: #e5e7eb;         /* texte (dark) */
  --ce-muted: #9ca3af;
  --ce-accent: #22c55e;       /* vert action */
  --ce-accent-2: #06b6d4;     /* cyan secondaire */
  --ce-danger: #ef4444;       /* rouge suppression/alerte */
  --ce-warning: #f59e0b;      /* orange */
  --ce-border: #1f2937;
  --ce-chip: #0b1220;
  --ce-chip-border: #1f2a3a;
}

/* Option clair si ton site a déjà un switch body.light */
body.light #cons-elec {
  --ce-bg: #ffffff;
  --ce-panel: #ffffff;
  --ce-text: #0f172a;
  --ce-muted: #6b7280;
  --ce-border: #e5e7eb;
  --ce-chip: #f8fafc;
  --ce-chip-border: #e2e8f0;
}

#cons-elec {
  color: var(--ce-text);
}

/* Conteneur principal */
#cons-elec .ce-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
}

/* En-tête */
#cons-elec .ce-header {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
#cons-elec .ce-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: .2px;
}
#cons-elec .ce-sub {
  font-size: 13px;
  color: var(--ce-muted);
}

/* Barre d’actions + filtres */
#cons-elec .ce-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  background: var(--ce-panel);
  border: 1px solid var(--ce-border);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 18px;
}
#cons-elec .ce-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
#cons-elec .ce-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
#cons-elec .ce-select, 
#cons-elec .ce-input {
  appearance: none;
  background: var(--ce-chip);
  border: 1px solid var(--ce-chip-border);
  color: var(--ce-text);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
  min-width: 200px;
}
#cons-elec .ce-select:focus,
#cons-elec .ce-input:focus {
  outline: 2px solid var(--ce-accent-2);
  outline-offset: 1px;
}

/* Boutons */
#cons-elec .btn {
  border: 1px solid var(--ce-chip-border);
  background: linear-gradient(180deg, #111827, #0b1120);
  color: var(--ce-text);
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 14px;
  cursor: pointer;
  transition: transform .06s ease, border-color .2s ease;
}
body.light #cons-elec .btn {
  background: #f8fafc;
}
#cons-elec .btn:hover { transform: translateY(-1px); }
#cons-elec .btn:active { transform: translateY(0); }
#cons-elec .btn-primary {
  border-color: rgba(34,197,94,.35);
  background: linear-gradient(180deg, rgba(34,197,94,.15), rgba(34,197,94,.05));
  color: #86efac;
}
body.light #cons-elec .btn-primary { color: #065f46; }
#cons-elec .btn-danger {
  border-color: rgba(239,68,68,.35);
  background: linear-gradient(180deg, rgba(239,68,68,.15), rgba(239,68,68,.05));
  color: #fecaca;
}

/* Cartes / panneaux */
#cons-elec .ce-card {
  background: var(--ce-panel);
  border: 1px solid var(--ce-border);
  border-radius: 16px;
  padding: 14px;
}

/* Tableau */
#cons-elec .ce-table-wrap {
  overflow: auto;
  border-radius: 12px;
  border: 1px solid var(--ce-border);
}
#cons-elec table.ce-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 900px;
  background: var(--ce-panel);
}
#cons-elec table.ce-table thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--ce-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--ce-border);
}
#cons-elec table.ce-table tbody td {
  padding: 12px;
  border-bottom: 1px dashed var(--ce-border);
  font-size: 14px;
}
#cons-elec .ce-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--ce-chip-border);
  background: var(--ce-chip);
}
#cons-elec .ce-chip.warn { border-color: rgba(245,158,11,.45); color: #fbbf24; }
#cons-elec .ce-chip.danger { border-color: rgba(239,68,68,.45); color: #fca5a5; }
#cons-elec .ce-chip.ok { border-color: rgba(34,197,94,.45); color: #86efac; }

/* Icône PDF cliquable */
#cons-elec .pdf-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  color: var(--ce-accent-2);
}
#cons-elec .pdf-link:hover { text-decoration: underline; }

/* Grille de graphiques */
#cons-elec .charts-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
#cons-elec .chart-card {
  grid-column: span 6;
  min-height: 260px;
}
@media (max-width: 1024px) {
  #cons-elec .chart-card { grid-column: span 12; }
}

/* Uploader (zone drop) */
#cons-elec .uploader {
  border: 1.5px dashed var(--ce-chip-border);
  background: linear-gradient(0deg, rgba(2,6,23,.7), rgba(2,6,23,.25));
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  transition: border-color .2s ease, background .2s ease;
}
body.light #cons-elec .uploader {
  background: #f8fafc;
}
#cons-elec .uploader.dragover {
  border-color: var(--ce-accent-2);
  background: rgba(6,182,212,.06);
}
#cons-elec .uploader p {
  margin: 6px 0 0;
  color: var(--ce-muted);
  font-size: 13px;
}

/* Modale Vérifier/Modifier */
#cons-elec .modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(2,6,23,.6);
  z-index: 9999;
}
#cons-elec .modal.open { display: flex; }
#cons-elec .modal .modal-card {
  width: min(860px, 92vw);
  background: var(--ce-panel);
  border: 1px solid var(--ce-border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 70px rgba(0,0,0,.35);
}
#cons-elec .modal .modal-head {
  display:flex; align-items:center; justify-content: space-between;
  margin-bottom: 10px;
}
#cons-elec .modal .modal-title { font-weight: 700; font-size: 18px; }
#cons-elec .modal .modal-body {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}
#cons-elec .modal .form-group { grid-column: span 6; }
#cons-elec .modal .form-group.full { grid-column: span 12; }
#cons-elec .modal label {
  display:block; font-size:12px; color: var(--ce-muted); margin-bottom: 5px;
}
#cons-elec .modal input, 
#cons-elec .modal select {
  width: 100%;
  background: var(--ce-chip);
  border: 1px solid var(--ce-chip-border);
  color: var(--ce-text);
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 14px;
}
#cons-elec .modal .modal-foot {
  display:flex; justify-content:flex-end; gap:10px; margin-top: 12px;
}

/* Badges état facture */
#cons-elec .badge {
  font-size: 11px;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid var(--ce-chip-border);
  background: var(--ce-chip);
  color: var(--ce-muted);
}
#cons-elec .badge.payee { color: #86efac; border-color: rgba(34,197,94,.45); }
#cons-elec .badge.apayer { color: #fbbf24; border-color: rgba(245,158,11,.45); }


/* ===== Consommation Électrique ===== */
.role-banner{margin:8px 0 16px;padding:8px 12px;border-left:4px solid var(--primary-color);background:rgba(59,130,246,.08);color:#1f2937;border-radius:8px}
.card{background:#fff;border:1px solid var(--border-color);border-radius:12px;margin-bottom:18px}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border-color)}
.table-controls{padding:8px 16px;border-bottom:1px solid var(--border-color)}
.filters-container{display:flex;gap:8px;flex-wrap:wrap}
.search-filter{display:flex;align-items:center;gap:8px;padding:0 8px;border:1px solid var(--border-color);border-radius:8px;background:#fff}
.search-filter input{border:none;outline:none;background:transparent;padding:8px 6px;width:220px}
.rows-per-page-container{display:flex;align-items:center;gap:6px}
.table-container{padding:0 16px 12px}
.data-table{width:100%;border-collapse:separate;border-spacing:0}
.data-table thead th{position:sticky;top:0;background:#f8fafc;border-bottom:1px solid var(--border-color);z-index:1}
.data-table th,.data-table td{padding:10px;border-bottom:1px solid var(--border-color);text-align:left;vertical-align:middle}
.data-table td .file-link{display:inline-flex;align-items:center;gap:6px}
.actions-col{width:130px;white-space:nowrap}

/* Modales */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;z-index:50}
.modal.open{display:flex}
.modal-content{background:#fff;border-radius:12px;border:1px solid var(--border-color);min-width:320px;max-width:860px;width:96%}
.modal-content.large{max-width:1100px}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border-color)}
.modal-body{padding:16px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:12px 16px;border-top:1px solid var(--border-color)}
.close-btn{background:none;border:none;font-size:20px;cursor:pointer}
.form-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group .sub{margin-top:12px}
@media(max-width:1000px){.form-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.form-row{grid-template-columns:1fr}}

.charts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:14px}
@media(max-width:1100px){.charts-grid{grid-template-columns:1fr}}
/* ====== Consommation Électrique (page) ====== */
.page-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin:1rem 0; }
.role-banner { color:#0a7; font-weight:600; }

.content-wrap { display:flex; flex-direction:column; gap:1.25rem; padding:0 1rem 2rem; }
.card { background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.card-header { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid #eef2f7; }
.card h2 { margin:0; font-size:1.1rem; }

.filters-row { display:flex; flex-wrap:wrap; gap:.75rem 1rem; padding:1rem 1.25rem; align-items:flex-end; }
.input-group { display:flex; flex-direction:column; gap:.35rem; min-width:180px; }
.input-group input, .input-group select { height:38px; padding:.4rem .6rem; border:1px solid #d1d5db; border-radius:10px; }

.table-wrapper { width:100%; overflow:auto; }
.table { width:100%; border-collapse:collapse; }
.table th, .table td { padding:.6rem .7rem; border-bottom:1px solid #f0f3f7; text-align:left; font-size:.95rem; }
.table thead.sticky th { position:sticky; top:0; background:#f9fafb; z-index:5; border-bottom:1px solid #e5e7eb; }
.actions-col { width:120px; text-align:center; }
.file-link { display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; color:#2563eb; font-weight:600; }

.badge { display:inline-block; padding:.2rem .55rem; border-radius:999px; font-size:.8rem; background:#eef2f7; color:#111827; }
.badge-success { background:#e6f8ef; color:#0a7; }
.badge-warning { background:#fff7e6; color:#b45309; }

.btn { height:36px; padding:0 .8rem; border-radius:10px; border:1px solid transparent; cursor:pointer; display:inline-flex; align-items:center; gap:.45rem; }
.btn-primary { background:#2563eb; color:#fff; }
.btn-secondary { background:#f3f4f6; color:#111827; border-color:#e5e7eb; }
.btn-danger { background:#ef4444; color:#fff; }
.btn-light { background:#fff; color:#111827; border:1px solid #e5e7eb; }
.btn-sm { height:30px; padding:0 .6rem; border-radius:8px; }

.pagination { display:flex; align-items:center; gap:.8rem; padding:1rem 1.25rem; }

.charts-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:1rem; padding:1rem 1.25rem 1.25rem; }
.chart-card { background:#fff; border:1px solid #eef2f7; border-radius:12px; padding:.75rem; }

.modal { position:fixed; inset:0; background:rgba(17,24,39,.45); display:none; align-items:center; justify-content:center; z-index:50; }
.modal.open { display:flex; }
.modal__dialog { width:min(900px, 92vw); background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.15); }
.modal__header { display:flex; justify-content:space-between; align-items:center; padding:.9rem 1rem; border-bottom:1px solid #eef2f7; }
.modal__body { padding:1rem; }
.modal__footer { padding:1rem; display:flex; justify-content:flex-end; gap:.6rem; border-top:1px solid #eef2f7; }
.modal__close { background:transparent; border:0; cursor:pointer; font-size:1.1rem; }

.form-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.9rem; }
.form-grid .col-span-2 { grid-column:span 2; }

@media (max-width: 900px) {
  .charts-grid { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
}

/* ============================================== */
/* ==== Styles spécifiques à cons_elec.html ==== */
/* ============================================== */
.header-with-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-divider {
    border: 0;
    height: 1px;
    background-color: #e0e0e0;
    margin: 40px 0;
}

.filters-container {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
}

.table-container {
    width: 100%;
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    font-size: 0.9em;
}

.data-table th, .data-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    text-align: left;
}

.data-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}

.data-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.data-table .action-btn {
    margin-right: 5px;
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 700px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-content h2, .modal-content h3 {
    margin-top: 0;
    margin-bottom: 15px;
}

.modal .close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 15px;
}

.modal .close-btn:hover,
.modal .close-btn:focus {
    color: #000;
    text-decoration: none;
}

.form-group {
    margin-bottom: 15px;
}

.form-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1;
    min-width: 180px;
}

.form-control {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 1rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.chart-card {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

#loader-overlay {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    justify-content: center;
    align-items: center;
}

.loader-content {
    text-align: center;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
    margin: 0 auto 15px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.hidden-input {
    display: none;
}

/* ===== Cons Elec (compléments) ===== */
.subtitle { color: var(--text-muted-color); margin-top: -6px; margin-bottom: 16px; }
.card { background-color: var(--bg-light-color); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px; margin-bottom: 24px; }
.section-header { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom: 12px; }
.upload-group .btn { white-space: nowrap; }

.badge-status { padding: 4px 8px; border-radius: 999px; font-size: .8rem; }
.badge-status.pending { background: #604b1a; color: #ffc107; }
.badge-status.extracted { background: #1f5130; color: #22c55e; }
.badge-status.failed { background: #5b2020; color: #ef4444; }

.charts-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 18px; }
.chart-card { background: var(--bg-light-color); border: 1px solid var(--border-color); border-radius: 10px; padding: 12px 12px 16px; }
.chart-card h3 { font-size: 0.95rem; margin-bottom: 8px; color: var(--text-muted-color); }

.actions-col { width: 120px; text-align: right; }
.table-container .file-icon-link { font-size: 1.3rem; }

.admin-only { display:none; } /* rendu visible par JS si admin */


/* === Cons Eau additions === */
.flex-between{ display:flex; align-items:center; justify-content:space-between; }
.flex-right{ display:flex; gap:.5rem; justify-content:flex-end; }
.nowrap{ white-space:nowrap; }
.table-responsive{ overflow:auto; }
.icon-btn{ padding:.25rem .5rem; border:1px solid #ddd; border-radius:6px; background:#f6f6f6; cursor:pointer; }
.icon-btn:hover{ background:#eee; }

/* Progress bar */
.am-progress{ position:relative; width:100%; height:10px; background:#eee; border-radius:6px; margin-top:.5rem; }
.am-progress .am-bar{ height:100%; background:#3b82f6; border-radius:6px; transition:width .3s ease; }
.hidden{ display:none !important; }
/* === Toggles de section (Masquer/Afficher) === */
.section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom: 12px;
}
.section-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}
.section-body.is-collapsed { display:none; }

/* table footer (lignes/page + pagination) */
.table-footer {
  padding: 12px 10px;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--bg-light-color);
}
.pagination-container {
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:1rem;
  flex-wrap: wrap;
}
.pagination-container .rows-per-page select {
  width:auto;
  min-width: 80px;
}
.btn-sm { padding: 6px 10px; font-size: .9rem; }
/* ===========================
   PATCH CONTRASTE TABLEAUX (DARK MODE)
   — à coller à la fin de style_pro.css —
   Rend les en-têtes plus lisibles, zébrage clair,
   bordures visibles et hover plus marqué.
   S'applique à tous les tableaux .data-table
   sans toucher le mode clair.
   =========================== */

/* Variables spécifiques aux tableaux en dark */
body:not(.light-mode) {
  --tbl-header-bg: #0f172a;          /* en-tête */
  --tbl-row-bg:    #111827;          /* lignes impaires */
  --tbl-row-alt:   #0b1220;          /* lignes paires */
  --tbl-hover-bg:  rgba(255,255,255,.06);
  --tbl-border:    #2b3445;          /* bordures */
}

/* Container & bordures */
body:not(.light-mode) .table-container {
  border: 1px solid var(--tbl-border);
  border-radius: 8px;
  background: transparent;
}

/* En-têtes collants plus contrastés */
body:not(.light-mode) .data-table thead th {
  background: var(--tbl-header-bg) !important;
  color: var(--text-color) !important;
  border-bottom: 1px solid var(--tbl-border) !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}

/* Bordures de cellules */
body:not(.light-mode) .data-table th,
body:not(.light-mode) .data-table td {
  border-color: var(--tbl-border) !important;
}

/* Couleurs des lignes (zébrage) */
body:not(.light-mode) .data-table tbody tr {
  background-color: var(--tbl-row-bg);
}
body:not(.light-mode) .data-table tbody tr:nth-child(even) {
  background-color: var(--tbl-row-alt);
}

/* Survol plus net */
body:not(.light-mode) .data-table tbody tr:hover {
  background-color: var(--tbl-hover-bg);
}

/* Liens & icônes à l’intérieur du tableau */
body:not(.light-mode) .data-table a,
body:not(.light-mode) .data-table .file-icon-link,
body:not(.light-mode) .data-table .pdf-icon-link {
  color: var(--primary-color);
  filter: none;
}

/* Petites tables héritant d'autres classes */
body:not(.light-mode) table.table,
body:not(.light-mode) .data-table {
  background: transparent;
}

/* Optionnel : rendre la ligne de pagination cohérente en dark */
body:not(.light-mode) .pagination-container,
body:not(.light-mode) .table-footer {
  background: #0f172a;
  border-color: var(--tbl-border);
}
/* =========================================
   PATCH DARK MODE — FORMULAIRES & MODALES
   (à coller en bas de style_pro.css)
   ========================================= */

/* Palette dédiée aux formulaires en dark */
body:not(.light-mode) {
  --form-bg: #0b1220;           /* fond des modales */
  --form-field: #0f172a;        /* fond des inputs */
  --form-border: #2b3445;       /* bordures */
  --form-border-focus: var(--primary-600, #2563eb);
  --form-text: #e5e7eb;         /* texte champs */
  --form-label: #cbd5e1;        /* labels */
  --form-placeholder: #8a96a8;  /* placeholders */
  --form-hover: rgba(255,255,255,.06);
}

/* Modales */
body:not(.light-mode) .modal .modal-content {
  background: var(--form-bg);
  color: var(--form-text);
  border: 1px solid var(--form-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
body:not(.light-mode) .modal .modal-header {
  border-bottom: 1px solid var(--form-border);
}
body:not(.light-mode) .modal .modal-footer {
  border-top: 1px solid var(--form-border);
}

/* Titres de sections dans formulaires */
body:not(.light-mode) .form-section-title {
  color: var(--form-label);
  border-bottom: 1px solid var(--form-border);
}

/* Labels */
body:not(.light-mode) .form-group label,
body:not(.light-mode) label {
  color: var(--form-label);
}

/* Champs de saisie : input, select, textarea */
body:not(.light-mode) .form-control,
body:not(.light-mode) input[type="text"],
body:not(.light-mode) input[type="number"],
body:not(.light-mode) input[type="date"],
body:not(.light-mode) input[type="month"],
body:not(.light-mode) input[type="email"],
body:not(.light-mode) input[type="password"],
body:not(.light-mode) select,
body:not(.light-mode) textarea {
  background: var(--form-field);
  color: var(--form-text);
  border: 1px solid var(--form-border);
  box-shadow: none;
}
body:not(.light-mode) .form-control:focus,
body:not(.light-mode) input:focus,
body:not(.light-mode) select:focus,
body:not(.light-mode) textarea:focus {
  border-color: var(--form-border-focus);
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--form-border-focus) 30%, transparent);
}

/* Placeholders */
body:not(.light-mode) .form-control::placeholder,
body:not(.light-mode) input::placeholder,
body:not(.light-mode) textarea::placeholder {
  color: var(--form-placeholder);
  opacity: 1;
}

/* Inputs désactivés/readonly */
body:not(.light-mode) .form-control:disabled,
body:not(.light-mode) .form-control[readonly] {
  background: #0c1424;
  color: #9aa5b1;
  border-color: #263146;
}

/* Date/number natifs : meilleure intégration dark */
body:not(.light-mode) input[type="date"],
body:not(.light-mode) input[type="month"],
body:not(.light-mode) input[type="number"] {
  color-scheme: dark;
}

/* Bouton des <input type="file"> (natif) */
body:not(.light-mode) input[type="file"] {
  color: var(--form-text);
}
body:not(.light-mode) input[type="file"]::file-selector-button {
  background: #1f2937;
  color: #e5e7eb;
  border: 1px solid var(--form-border);
  border-radius: 6px;
  padding: 6px 10px;
  margin-right: 10px;
  cursor: pointer;
}
body:not(.light-mode) input[type="file"]::file-selector-button:hover {
  background: #263445;
}

/* Checkboxes / radios (natifs) */
body:not(.light-mode) input[type="checkbox"],
body:not(.light-mode) input[type="radio"] {
  accent-color: var(--form-border-focus);
  border-color: var(--form-border);
  background: var(--form-field);
}

/* Groupes d’options/puces (ex: Sociétés concernées) */
body:not(.light-mode) .choice-group,
body:not(.light-mode) .checkbox-group,
body:not(.light-mode) .options-group {
  background: #0f172a;
  border: 1px solid var(--form-border);
  border-radius: 10px;
}
body:not(.light-mode) .choice-group .option,
body:not(.light-mode) .checkbox-group .option {
  color: var(--form-text);
}

/* Champs “hover” */
body:not(.light-mode) .form-control:hover,
body:not(.light-mode) select:hover,
body:not(.light-mode) textarea:hover {
  background: color-mix(in srgb, var(--form-field) 92%, white);
  border-color: #334155;
}

/* Inputs en erreur (si classe .is-invalid existe dans ton CSS) */
body:not(.light-mode) .form-control.is-invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.25);
}

/* Boutons dans modales (on laisse tes .btn existants mais on renforce le contraste) */
body:not(.light-mode) .btn.btn-secondary {
  background: #1f2937;
  color: #e5e7eb;
  border: 1px solid var(--form-border);
}
body:not(.light-mode) .btn.btn-secondary:hover {
  background: #263445;
}

/* Petits hints en bas de formulaire */
body:not(.light-mode) .form-hint,
body:not(.light-mode) .help-text {
  color: #9aa5b1;
}

/* Lignes séparatrices dans modales */
body:not(.light-mode) .modal .hr,
body:not(.light-mode) .modal hr {
  border: 0;
  height: 1px;
  background: var(--form-border);
  opacity: 1;
}
/* === Cons Eau: pièces jointes contrat === */
.files-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}
.files-list .chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--muted, #ccc);
  background: var(--surface-2, #f6f6f7);
}
a.file-icon-link {
  text-decoration: none;
  display: inline-block;
  margin-right: 6px;
  font-size: 18px;
  line-height: 1;
}

/* Mode sombre – meilleure lisibilité */
@media (prefers-color-scheme: dark) {
  .files-list .chip {
    background: #1f2530;
    border-color: #3a4456;
    color: #e6e8ea;
  }
  a.file-icon-link { color: #e6e8ea; }
}

/* === Cons Eau: pièces jointes contrat === */
.files-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: .25rem;
}
.files-list .chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--tbl-border, #d7dbe1);
  background: var(--surface-2, #f6f7f9);
}
a.file-icon-link {
  text-decoration: none;
  display: inline-block;
  margin-right: 6px;
  font-size: 18px;
  line-height: 1;
}

/* Mode sombre – meilleure lisibilité */
body:not(.light-mode) .files-list .chip {
  background: #1f2530;
  border-color: #3a4456;
  color: #e6e8ea;
}
body:not(.light-mode) a.file-icon-link { color: #e6e8ea; }
/* ===== Contrats PDF (liste compacte) ===== */
.files-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .85rem;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
}
.file-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  border: 1px solid var(--border-color);
  background: var(--btn-muted-bg, transparent);
}
.file-icon-link i { font-size: 14px; }

/* Mode sombre : contraste meilleures cellules tableau et formulaires */
body:not(.light-mode) .data-table th {
  background: #1d2230;
  color: #e9edf6;
}
body:not(.light-mode) .data-table td {
  background: #151a24;
  color: #dbe3f4;
}
/* === Toggles de section (Masquer/Afficher) === */
.section-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom: 12px;
}
.section-actions {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
}
.section-body.is-collapsed { display:none; }

/* table footer (lignes/page + pagination) */
.table-footer {
  padding: 12px 10px;
  border: 1px solid var(--border-color);
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: var(--bg-light-color);
}
.pagination-container {
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap:1rem;
  flex-wrap: wrap;
}
.pagination-container .rows-per-page select {
  width:auto;
  min-width: 80px;
}
.btn-sm { padding: 6px 10px; font-size: .9rem; }

/* ===== Gestion Produits Chimiques ===== */
#chem-modal .modal-content.large { max-width: 1200px; }
#ghs-picker, #ppe-picker {
  display:flex; flex-wrap:wrap; gap:8px; 
  border:1px solid var(--border-color); border-radius:6px;
  padding:10px; background: var(--bg-color);
}
#ghs-picker .chip, #ppe-picker .chip { cursor:pointer; user-select:none; }
#ghs-multiselect.tags-container, #ppe-multiselect.tags-container {
  min-height:52px; background: var(--bg-color);
  border:1px dashed var(--border-color);
}
.ghs-selected, .ppe-selected { outline:2px solid var(--primary-color); }

.table-container .mini-icon { vertical-align:middle; }
/* ======= Gestion Produits Chimiques (spécifique) ======= */
#chem-modal .modal-content.large { max-width: 1200px; }
#ghs-picker, #ppe-picker {
  display:flex; flex-wrap:wrap; gap:8px; 
  border:1px solid var(--border-color); border-radius:6px;
  padding:10px; background: var(--bg-color);
}
#ghs-picker .chip, #ppe-picker .chip { cursor:pointer; user-select:none; }
#ghs-multiselect.tags-container, #ppe-multiselect.tags-container {
  min-height:52px; background: var(--bg-color);
  border:1px dashed var(--border-color);
}
.table-container .mini-icon { vertical-align:middle; }

/* EPI table */
#ppe-table .chip { cursor:pointer; }
.ppe-cell-picker { display:flex; flex-wrap:wrap; gap:6px; }
.ppe-row-selected { outline:2px solid var(--primary-color); border-radius:12px; }

/* Mini badge société */
.badge-societe { background: var(--bg-lighter-color); padding:2px 8px; border-radius:12px; border:1px solid var(--border-color); }

/* ======= Gestion Produits Chimiques (spécifique) ======= */
#chem-modal .modal-content.large { max-width: 1200px; }
#ghs-picker, #ppe-picker {
  display:flex; flex-wrap:wrap; gap:8px; 
  border:1px solid var(--border-color); border-radius:6px;
  padding:10px; background: var(--bg-color);
}
#ghs-picker .chip, #ppe-picker .chip { cursor:pointer; user-select:none; }
#ghs-multiselect.tags-container, #ppe-multiselect.tags-container {
  min-height:52px; background: var(--bg-color);
  border:1px dashed var(--border-color);
}
.table-container .mini-icon { vertical-align:middle; }

/* EPI table */
#ppe-table .chip { cursor:pointer; }
.ppe-cell-picker { display:flex; flex-wrap:wrap; gap:6px; }
.ppe-row-selected { outline:2px solid var(--primary-color); border-radius:12px; }

/* Mini badge société */
.badge-societe { background: var(--bg-lighter-color); padding:2px 8px; border-radius:12px; border:1px solid var(--border-color); }

/* Petits boutons icône */
.inline-actions { display:flex; gap:8px; align-items:center; }
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:36px;border:1px solid var(--border-color);background:var(--bg-color);border-radius:8px;cursor:pointer}
.icon-btn.danger{color:#dc2626;border-color:#ef4444;background:#fff5f5}