/* === Variables par défaut (thème clair) === */
:root {
  --color-bg: #ffffff;
  --color-bg-light: #f9fafb;
  --color-bg-secondary: #f3f4f6;

  --color-shadow: #000000;
  --color-shadow-secondary: #8b8c8f;

  --color-text: #111827;
  --color-border: #d1d5db;
  --color-border-light: #e5e7eb;
  --color-border-high: #9ca3af;
  
  --color-primary: #2563eb;
  --color-secondary: #e5e7eb;

  --color-sidebar-bg: #f3f4f6;
  --color-sidebar-text: #111827;

  --color-card-bg: #ffffff;
  --color-card-border: #d1d5db;

  --color-input-bg: #ffffff;
  --color-input-text: #111827;
  --color-input-border: #d1d5db;
  --color-input-focus-bg: #f9fafb;
  --color-input-focus-border: #2563eb;

  --color-navbar-bg: #f9fafb;
  --color-navbar-text: #111827;

  --color-hover-bg: #f3f4f6;
  --color-hover-text: #111827;

  --color-placeholder: #6b7280;

  --color-info-bg: #f9fafb;
  --color-info-text: #111827;

  --color-btn-bg: #f3f4f6;
  --color-btn-text: #111827;
  --color-btn-primary-bg: #2563eb;
  --color-btn-primary-text: #ffffff;
  --color-btn-secondary-bg: #e5e7eb;
  --color-btn-secondary-text: #111827;

  --color-table-head-bg: #f3f4f6;
  --color-table-hover-bg: #f9fafb;

  --color-modal-bg: #ffffff;
  --color-modal-header-bg: #f3f4f6;
  --color-modal-text: #111827;
  --color-modal-screen: rgba(0, 0, 0, 0.5);

  --color-danger: #945057;
  --color-success: #4e835a;
  --color-bg-danger: #f8d7da;
  --color-bg-success: #d4edda;
  --color-low: #fef3c7;
  --color-medium: #d1fae5;
  --color-high: #fca5a5;
  --color-critical: #f87171;
  --color-bg-low: #92400e;
  --color-bg-medium: #065f46;
  --color-bg-high: #b91c1c;   
  --color-bg-critical: #7f1d1d;
  --bs-border-radius: 0.35rem;
}

[data-theme="light"]{
  --color-bg: #ffffff;
  --color-bg-light: #f9fafb;
  --color-bg-secondary: #f3f4f6;

  --color-shadow: #000000;
  --color-shadow-secondary: #8b8c8f;

  --color-text: #111827;
  --color-border: #d1d5db;
    --color-border-light: #e5e7eb;
    --color-border-high: #9ca3af;
  
  --color-primary: #2563eb;
  --color-secondary: #e5e7eb;

  --color-sidebar-bg: #f3f4f6;
  --color-sidebar-text: #111827;

  --color-card-bg: #ffffff;
  --color-card-border: #d1d5db;

  --color-input-bg: #ffffff;
  --color-input-text: #111827;
  --color-input-border: #d1d5db;
  --color-input-focus-bg: #f9fafb;
  --color-input-focus-border: #2563eb;

  --color-navbar-bg: #f9fafb;
  --color-navbar-text: #111827;

  --color-hover-bg: #f3f4f6;
  --color-hover-text: #111827;

  --color-placeholder: #6b7280;

  --color-info-bg: #f9fafb;
  --color-info-text: #111827;

  --color-btn-bg: #f3f4f6;
  --color-btn-text: #111827;
  --color-btn-primary-bg: #f9fafb;
  --color-btn-primary-text: #000000;
  --color-btn-secondary-bg: #e5e7eb;
  --color-btn-secondary-text: #111827;

  --color-table-head-bg: #f3f4f6;
  --color-table-hover-bg: #f9fafb;

  --color-modal-bg: #ffffff;
  --color-modal-header-bg: #f3f4f6;
  --color-modal-text: #111827;
    --color-modal-screen: rgba(0, 0, 0, 0.5);

    --color-danger: #945057;
    --color-success: #4e835a;
    --color-bg-danger: #f8d7da;
    --color-bg-success: #d4edda;
    --color-low: #fef3c7;
    --color-medium: #d1fae5;
    --color-high: #fca5a5;
    --color-critical: #ec8b95;
    --color-bg-low: #92400e;
    --color-bg-medium: #065f46;
    --color-bg-high: #b91c1c;   
    --color-bg-critical: #7f1d1d;
    --bs-border-radius: 0.5rem;
}

/* === Variables thème sombre === */
[data-theme="dark"] {
  --color-bg: rgb(17, 24, 39);
  --color-bg-light: rgb(55, 65, 81);
  --color-bg-secondary: rgb(31, 41, 55);

  --color-shadow: #ffffff;
  --color-shadow-secondary: #8b8c8f;

  --color-text: rgb(229, 231, 235);
  --color-border: rgb(31, 41, 55);
  --color-border-light: rgb(55, 65, 81);
  --color-border-high: rgb(17, 24, 39);

  --color-primary: rgb(17, 115, 212);
  --color-secondary: rgb(55, 65, 81);

  --color-sidebar-bg: rgb(31, 41, 55);
  --color-sidebar-text: rgb(229, 231, 235);

  --color-card-bg: rgb(55, 65, 81);
  --color-card-border: rgb(31, 41, 55);

  --color-input-bg: rgb(55, 65, 81);
  --color-input-text: #ffffff;
  --color-input-border: rgb(31, 41, 55);
  --color-input-focus-bg: rgb(31, 41, 55);
  --color-input-focus-border: #00005e;

  --color-navbar-bg: rgb(31, 41, 55);
  --color-navbar-text: rgb(229, 231, 235);

  --color-hover-bg: rgb(55, 65, 81);
  --color-hover-text: rgb(229, 231, 235);

  --color-placeholder: #ffffff;

  --color-info-bg: rgb(55, 65, 81);
  --color-info-text: rgb(229, 231, 235);

  --color-btn-bg: rgb(55, 65, 81);
  --color-btn-text: rgb(229, 231, 235);
  --color-btn-primary-bg: rgb(55, 65, 81);
  --color-btn-primary-text: rgb(229, 231, 235);
  --color-btn-secondary-bg: rgb(89, 105, 131);
  --color-btn-secondary-text: rgb(229, 231, 235);

  --color-table-head-bg: rgba(30, 41, 59, 0.5);
  --color-table-hover-bg: rgba(30, 41, 59, 0.5);

  --color-modal-bg: rgb(31, 41, 55);
  --color-modal-header-bg: rgb(55, 65, 81);
  --color-modal-text: rgb(229, 231, 235);
  --color-modal-screen: rgba(0, 0, 0, 0.5);

    --color-danger: #f87171;
    --color-success: #34d399;
    --color-bg-danger: #7f1d1d;
    --color-bg-success: #064e3b;
    --color-low: #78350f;
    --color-medium: #064e3b;
    --color-high: #b91c1c;
    --color-critical: #7f1d1d;
    --color-bg-low: #fef3c7;
    --color-bg-medium: #d1fae5;
    --color-bg-high: #fca5a5;   
    --color-bg-critical: #f87171;
}

/* === Styles généraux === */
*, ::after, ::before {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: var(--color-border);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: "Lato", sans-serif;
  font-style: normal;
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
}

/* Liens */
a {
  color: var(--color-text);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Formulaires */
input,
select,
textarea,
.form-select,
.form-control {
  color: var(--color-input-text);
  background-color: var(--color-input-bg);
  border: 1px solid var(--color-input-border);
}

input:focus, select:focus, textarea:focus {
  background-color: var(--color-input-focus-bg);
  border-color: var(--color-input-focus-border);
}

input.form-control::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
}

button {
  background-color: transparent;
  color: inherit;
}

.form-control:hover {
  border-color: var(--color-primary);
}

/* Contenu */
.content {
  background-color: var(--color-bg);
  border-color: var(--color-border);
}

/* Sidebar */
.menuleft {
  background-color: var(--color-sidebar-bg);
  color: var(--color-sidebar-text);
}
.menuleft ul li a {
  color: var(--color-sidebar-text);
}
.menuleft ul li a:hover::after {
  background-color: var(--color-bg-secondary);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.menuleft ul li a:hover {
  background-color: var(--color-hover-bg);
  color: var(--color-hover-text);
}
.menuleft .menu-item.active {
  background-color: var(--color-primary);
  color: var(--color-text);;
}

/* Navbar */
.navbar {
  background-color: var(--color-navbar-bg);
  color: var(--color-navbar-text);
  border-bottom: 1px solid var(--color-border);
}

.burger {
  background: none;
  border: none;
  color: var(--color-placeholder);
}

/* Menu */
.menu a, .menu-toggle {
  color: var(--color-text);
}

.submenu {
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
}

.bmenu {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
}

.bmenu a:hover,
.bmenu button:hover {
    background-color: var(--color-bg);;
}


/* Modals */
.custom-modal {
    background-color: var(--color-modal-screen);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.custom-modal-dialog {
  background-color: var(--color-modal-bg);
  color: var(--color-modal-text);
}
.custom-modal-header {
  background-color: var(--color-modal-header-bg);
  color: var(--color-modal-text);
}

.modal {
    background-color: var(--color-modal-screen);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.modal-dialog {
  background-color: var(--color-modal-bg);
  color: var(--color-modal-text);
}
.modal-header {
  background-color: var(--color-modal-header-bg);
  color: var(--color-modal-text);
}
.modal-content {
    background-color: var(--color-modal-bg);
    color: var(--color-modal-text);
} 

/* Cards */
.card {
  background-color: var(--color-card-bg);
  color: var(--color-text);
  border: 1px solid var(--color-card-border);
}
.card-header {
  background-color: var(--color-sidebar-bg);
  color: var(--color-text);
}

/* Boutons */
.btn {
  background-color: var(--color-btn-bg);
  color: var(--color-btn-text);
  border: 1px solid var(--color-border);
}
.btn-primary {
  background-color: var(--color-btn-primary-bg);
  color: var(--color-btn-primary-text);
}
.btn-secondary {
  background-color: var(--color-btn-secondary-bg);
  color: var(--color-btn-secondary-text);
}
.btn-info {
  color: var(--color-primary);
}

.btn-xs {
    color: var(--color-primary);
    border: 0px solid var(--color-primary);
}

.btn-danger {
    color: var(--color-danger) !important; 
}

.btn-actif {
    color: var(--color-success); 
}

/* Tables */

.table th, .table td {
    border: 1px solid var(--color-border-light);
}
.table th {
    background-color: var(--color-table-hover-bg);
    color: var(--color-text);;
}
.table tr:nth-child(even) {
    background-color: var(--color-table-head-bg);
}


.table-bordered {
  border: 1px solid var(--color-border-light);
  color: var(--color-text);
  border-collapse: collapse;
}
.table-bordered thead tr th {
  background-color: var(--color-table-head-bg);
}
.table-bordered tbody tr:hover {
  background-color: var(--color-table-hover-bg);
}

.table-simple, .table-simple th, .table-simple td {
      border: 1px solid var(--color-border);
}

.div-bordered {
    border: 1px solid var(--color-border-light);
}

/* Pagination */
nav[role="navigation"] li a {
  background-color: var(--color-card-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
nav[role="navigation"] li a:hover {
  background-color: var(--color-hover-bg);
  color: var(--color-hover-text);
}
nav[role="navigation"] li .font-bold {
  background-color: var(--color-primary);
  color: var(--color-text);
}
nav[role="navigation"] li.cursor-not-allowed {
  background-color: var(--color-secondary);
  color: var(--color-placeholder);
  border: 1px solid var(--color-border);
}

.liste-stats-box {
    background-color: var(--color-secondary); /* gris clair */
    border: 1px solid var(--color-border);
}

.liste-simple li {
    border-bottom: 1px solid var(--color-border-light);
}
.liste-bordered {
    border: 1px solid var(--color-border-light);
}

.liste-bordered li{
border-bottom: 1px solid var(--color-border-light);


gap: 10px; /* espace entre le texte et les boutons */
}
.liste-bordered li:hover {
    background-color: var(--color-border-light);
}


.bulk-actions {
    border: 1px solid  var(--color-border);
}

.nav-tabs .nav-link {
    background-color: var(--color-bg-light);
    color: var(--color-text);
    border: 1px solid var(--color-border);

}

.nav-tabs .nav-link.active {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.nav-tabs .nav-link:hover {
    background-color: var(--color-bg-light);
    color: var(--color-text);
    border: 1px solid var(--color-border-light);
}

.tab-content {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
}

/* Boîte d'information */
.info-box {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
}

.info-box-half {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
}

.info-box-half .info-title {
  color: var(--color-text);
}

.info-box-half .info-value {
  color: var(--color-text-secondary);
}
/* Titre de la boîte */
.info-title {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
}

.alert-info-box { 
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    color: var(--color-text);
}
.floating-comment-box {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

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

.alert-success {
    background-color: var(--color-bg-success);
    color: var(--color-success);
}
.alert-danger {
    background-color: var(--color-bg-danger);
    color: var(--color-danger);
}

.tooltip {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.notification-popup {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.notification-popup.success {
    background-color: var(--color-bg-success);
}
.notification-popup.info {
    background-color: var(--color-bg-light);
}
.notification-popup.error {
    background-color: var(--color-bg-danger);
}

.badge {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.badge:hover {
    background-color: var(--color-bg-light); 
}
.badge-primary {
    background-color: var(--color-primary);
    color: var(--color-text);
}
.badge-secondary {
    background-color: var(--color-secondary);
    color: var(--color-text);
}
.badge-success {
    background-color: var(--color-success); 
    color: var(--color-bg);
}
.badge-danger {
    background-color: var(--color-danger); 
    color: var(--color-bg);
}
.cookie-banner {
    background-color: var(--color-bg-secondary);
    color: var(--color-text);
    border: 1px solid var(--color-border);
}
.field-bordered {
    border: 1px solid var(--color-border);
}
.field-bordered li{
border-bottom: 1px solid var(--color-border);
}
.field-bordered li:hover {
    background-color: var(--color-border-light);
}

.stats-title {
    color: var(--color-text);
}
.stats-count {
    color: var(--color-text);
}
.stats-info {
    color: var(--color-placeholder);
}
.stats-low {
    background-color: transparent;
    color: var(--color-low);
}
.stats-medium {
    background-color: transparent;
    color: var(--color-medium);
}
.stats-high {
    background-color: transparent;
    color: var(--color-high);
}
.stats-critical {
    background-color: transparent;
    color: var(--color-critical);
}

.bg-low {
    background-color: var(--color-low);
    color: var(--color-bg-low);
}
.bg-medium {
    background-color: var(--color-medium);
    color: var(--color-bg-medium);
}
.bg-high {
    background-color: var(--color-high);
    color: var(--color-bg-high);
}
.bg-critical {
    background-color: var(--color-critical);
    color: var(--color-bg-critical);
}

/* Barre latérale */
.sidebar {
    background-color: var(--color-bg);
    box-shadow: -2px 0 5px var(--color-shadow);
}
.sidebar-header {
    border-bottom: 1px solid var(--color-text);
}
.close-sidebar {
    color: var(--color-text);
}