:root {
  /* Couleurs principales inspirées du design futuriste */
  --primary: #002b5b; /* Bleu foncé pour le thème principal */
  --accent: #ff5722; /* Orange pour les accents et boutons */
  --highlight: #ffeb3b; /* Jaune vif pour les éléments importants */
  --background: #ffffff; /* Fond sombre général */
  --secondary-bg: #191c24; /* Secondaire pour les sections */
  --text-color: #1e1e2f; /* Couleur du texte */
}
.text-accent {
  color: var(--accent) !important;
}
a {
  text-decoration: none;
}
.text-primary {
  color: var(--primary) !important;
}

body {
  font-family: Helvetica, sans-serif;
  font-size: 0.875rem;
  background-image: url("img/pattern.png"),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(160, 51, 255, 0.024) 0,
      rgba(160, 51, 255, 0) 50%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(160, 51, 255, 0.04) 0,
      rgba(160, 51, 255, 0) 75%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(160, 51, 255, 0.064) 0,
      rgba(160, 51, 255, 0) 100%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(24, 119, 242, 0.024) 0,
      rgba(24, 119, 242, 0) 50%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(24, 119, 242, 0.04) 0,
      rgba(24, 119, 242, 0) 75%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(24, 119, 242, 0.064) 0,
      rgba(24, 119, 242, 0) 100%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(255, 108, 92, 0.024) 0,
      rgba(255, 108, 92, 0) 50%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(255, 108, 92, 0.04) 0,
      rgba(255, 108, 92, 0) 75%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(255, 108, 92, 0.064) 0,
      rgba(255, 108, 92, 0) 100%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(245, 206, 51, 0.024) 0,
      rgba(245, 206, 51, 0) 50%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(245, 206, 51, 0.04) 0,
      rgba(245, 206, 51, 0) 75%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(245, 206, 51, 0.064) 0,
      rgba(245, 206, 51, 0) 100%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(37, 211, 102, 0.024) 0,
      rgba(37, 211, 102, 0) 50%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(37, 211, 102, 0.04) 0,
      rgba(37, 211, 102, 0) 75%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(37, 211, 102, 0.064) 0,
      rgba(37, 211, 102, 0) 100%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(24, 119, 242, 0.024) 0,
      rgba(24, 119, 242, 0) 50%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(24, 119, 242, 0.04) 0,
      rgba(24, 119, 242, 0) 75%
    ),
    radial-gradient(
      50% 50% at 50% 50%,
      rgba(24, 119, 242, 0.064) 0,
      rgba(24, 119, 242, 0) 100%
    );
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
    no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: center,
    37.97vw calc(((300vw - 100vh) / 2 - 85.77vw) * -1),
    37.97vw calc(((300vw - 100vh) / 2 - 85.77vw) * -1),
    37.97vw calc(((300vw - 100vh) / 2 - 85.77vw) * -1),
    -100vw calc(((300vw - 100vh) / 2 - 154.56vw) * -1),
    -100vw calc(((300vw - 100vh) / 2 - 154.56vw) * -1),
    -100vw calc(((300vw - 100vh) / 2 - 154.56vw) * -1),
    13.34vw calc(((300vw - 100vh) / 2 - 53.88vw) * -1),
    13.34vw calc(((300vw - 100vh) / 2 - 53.88vw) * -1),
    13.34vw calc(((300vw - 100vh) / 2 - 53.88vw) * -1),
    10.64vw calc(((300vw - 100vh) / 2 - 17.19vw) * -1),
    10.64vw calc(((300vw - 100vh) / 2 - 17.19vw) * -1),
    10.64vw calc(((300vw - 100vh) / 2 - 17.19vw) * -1),
    -49vw calc(((300vw - 100vh) / 2 - 41.1vw) * -1),
    -49vw calc(((300vw - 100vh) / 2 - 41.1vw) * -1),
    -49vw calc(((300vw - 100vh) / 2 - 41.1vw) * -1),
    -100vw calc(((300vw - 100vh) / 2 - 78vw) * -1),
    -100vw calc(((300vw - 100vh) / 2 - 78vw) * -1),
    -100vw calc(((300vw - 100vh) / 2 - 78vw) * -1);
  background-size: 25% auto, /* Adjust this value as needed */ 156.45vw 99.03vw,
    156.45vw 99.03vw, 156.45vw 99.03vw, 226.86vw 145.44vw, 226.86vw 145.44vw,
    226.86vw 145.44vw, 171.96vw 110.31vw, 171.96vw 110.31vw, 171.96vw 110.31vw,
    130.29vw 83.58vw, 130.29vw 83.58vw, 130.29vw 83.58vw, 198vw 126.9vw,
    198vw 126.9vw, 198vw 126.9vw, 300vw 192vw, 300vw 192vw, 300vw 192vw;
  overflow-x: hidden;
}

.text-accent {
  color: var(--accent) !important;
}
/* Sidebar */
.sidebar {
  color: var(--text-color); /* Texte blanc */
  border-right: 1px solid var(--primary); /* Bordure avec la couleur principale */
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 250px;
  height: 100vh;
  overflow-y: auto;
  transition: 0.5s;
  z-index: 999;
}

.content {
  margin-left: 250px;
  min-height: 100vh;

  color: var(--text-color); /* Texte blanc pour le contenu */
  transition: 0.5s;
}

@media (min-width: 992px) {
  .sidebar {
    margin-left: 0;
  }

  .sidebar.open {
    margin-left: -250px;
  }

  .content {
    width: calc(100% - 250px);
  }

  .content.open {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 991.98px) {
  .sidebar {
    margin-left: -250px;
  }

  .sidebar.open {
    margin-left: 0;
  }

  .content {
    width: 100%;
    margin-left: 0;
  }
}

/* Navbar dans la sidebar */
.sidebar .navbar .navbar-nav .nav-link {
  background: var(--background); /* Fond secondaire */
  color: var(--text-color); /* Texte blanc */
  border-bottom: 1px solid var(--primary); /* Ligne de séparation */
}

.sidebar .navbar .navbar-nav .nav-link:hover,
.sidebar .navbar .navbar-nav .nav-link.active {
  color: var(--accent); /* Accent jaune pour les éléments actifs */
  border: 1px solid var(--primary); /* Ligne de séparation */
}

.sidebar .navbar .navbar-nav .nav-link i {
  background: var(--background); /* Icones avec un fond sombre */
  color: var(--accent); /* Accent orange */
}
.sidebar  .navbar-nav  .nav-link  svg{
  color: var(--accent) !important; /* Accent orange */
}

/* Boutons */
.btn {
  background-color: var(--accent); /* Couleur des boutons */
  color: var(--text-color); /* Texte des boutons en blanc */
  border: none;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: var(--highlight); /* Survol des boutons en jaune vif */
}

/* Badges de statut */
.v-badge,
.abi-badge,
.abj-badge,
.ac-badge,
.var-badge,
.ncr-badge,
.rat-badge,
.def-badge,
.aj-badge,
.nv-badge,
.ex-badge {
  background: var(--secondary-bg); /* Fond des badges */
  color: var(--highlight); /* Texte des badges */
  border-left: 3px solid var(--accent); /* Accent orange sur les côtés */
}

/* Graphiques et indicateurs */
.chart {
  background: var(--secondary-bg); /* Fond des graphiques */
  color: var(--text-color); /* Texte des graphiques */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère pour les graphes */
}

/* Exemple de style pour des cercles d'indicateurs */
.circular-indicator {
  border: 8px solid var(--primary); /* Bordure principale bleue */
  background: var(--background); /* Fond sombre */
  color: var(--text-color); /* Texte blanc */
}

/* Spinner */
#spinner {
  background: rgba(0, 0, 0, 0.8); /* Fond plus sombre */
  color: var(--highlight); /* Couleur de l'indicateur */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0s linear 0.5s;
  z-index: 99999;
}

#spinner.show {
  visibility: visible;
  opacity: 1;
}

/* Ajout de transitions pour un effet lisse */
a,
.btn,
.sidebar .navbar .navbar-nav .nav-link {
  transition: all 0.3s ease;
}

/* Mises à jour pour les éléments interactifs */
.sidebar-toggler:hover {
  background-color: var(--primary);
  color: var(--highlight);
}

/* Emploi du temps */
.fixed-embed-responsive {
  width: 100%;
  height: 800px; /* Set the desired height */
}

/* Recommandations supplémentaires */
.content .navbar .navbar-nav .nav-link {
  margin-left: 25px;
  padding: 12px 0;
  color: var(--text-color);
  outline: none;
}

.content .navbar .navbar-nav .nav-link:hover,
.content .navbar .navbar-nav .nav-link.active {
  color: var(--highlight);
}

.content .navbar .sidebar-toggler,
.content .navbar .navbar-nav .nav-link i {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--secondary-bg);
  border-radius: 40px;
}

.content .navbar .dropdown-toggle::after {
  margin-left: 6px;
  vertical-align: middle;
  border: none;
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  transition: 0.5s;
}

.content .navbar .dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(-180deg);
}

/* Style des feedback et réclamations */
.feedback-chart .progress {
  height: 30px;
  margin-bottom: 10px;
}

.progress-bar-1 {
  background-color: #f44336;
}
.progress-bar-2 {
  background-color: #ff9800;
}
.progress-bar-3 {
  background-color: #ffeb3b;
}
.progress-bar-4 {
  background-color: #8bc34a;
}
.progress-bar-5 {
  background-color: #4caf50;
}

/* Star rating styles */
.star-rating {
  direction: rtl;
  display: inline-flex;
}

.star-rating input[type="radio"] {
  display: none;
}

.star-rating label {
  font-size: 3.5em;
  color: #ddd;
  cursor: pointer;
}

.star-rating input[type="radio"]:checked ~ label {
  color: #f39c12;
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color: #f39c12;
}