:root {
  /* Brand Colors — Charcoal / Gris neutre (zéro vert) */
  --color-primary:       #212E53; /*#2e3440;*/   /* charcoal foncé */
  --color-primary-light: #4c566a;   /* slate moyen   */
  --color-primary-dark:  #1a1d24;   /* quasi-noir     */
  --color-primary-ghost: rgba(33, 46, 83, 0.05); /* Ajusté sur le Charcoal */

  /* Accent / Status — conservés pour lisibilité fonctionnelle */
  --color-accent:        #5e6e82;   /* gris-bleu neutre */
  --color-urgent:        #c0392b;
  --color-warning:       #e67e22;
  --color-success:       #27ae60;
  --color-info:          #2980b9;
  --color-neutral:       #7f8c8d;

  /* Backgrounds */
  --bg-base:             #f2f3f5;
  --bg-surface:          #ffffff;
  --bg-surface-2:        #f8f9fa;
  --bg-sidebar:          #7A90A4;/*#1e2228;*/   /* charcoal très sombre */
  --bg-header:           #ffffff;

  /* Text — contraste maximal */
  --text-primary:        #1a1d24;
  --text-secondary:      #4c566a;
  --text-muted:          #7b8a99;
  --text-inverse:        #ffffff;
  
  /* Borders */
  --border-light:        #e3e6ea;
  --border-medium:       #c8cdd4;

  /* Spacing & Radius */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* Shadows — neutres, sans teinte colorée */
  --shadow-xs:           0 1px 2px rgba(0,0,0,.05);
  --shadow-sm:           0 2px 4px rgba(0,0,0,.05);
  --shadow-lg:           0 10px 25px rgba(0,0,0,.1);
  
  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.25s ease;
  --transition-slow:   0.4s cubic-bezier(.4,0,.2,1);

  /* Layout */
  --sidebar-width:       240px;
  --sidebar-collapsed:   60px;
  --header-height:       60px;
  --context-width:       320px;
}

.sidebar, .sidebar-nav .nav-link.collapsed{
    /*background:#3473ac;*/
  color:var(--text-primary);
  width: 100%;
}

  
.sidebar-nav .nav-content a {
  color:white
}

.active-submenu{
  color:#fff !important;
  width:150px;
  font-weight: 700;
}

.active-submenu:hover{
  /* color:grey !important; */
  background:#d6d7d8 !important;
  color:green !important
}

.sidebar-nav .nav-content a:hover{
  color:grey !important;
  /* background:grey !important */
  font-weight: bold !important;
}

.nav-item:hover .bi, .nav-item:hover .bx, .nav-item:hover .collapsed{
  color:var(--color-primary-dark) !important;
  background:#d6d7d8 !important;
}

.sidebar-nav .nav-link{
  width:250px;
  cursor:pointer;
  
}

#main{
  margin-top: 0;
}

#main {
    /*margin-top: 60px;*/
    padding: 20px 30px;
    transition: all 0.3s;
}

@media (max-width: 1199px){
  #main {
    padding: 20px;
}
}

.sidebar-nav .nav-content a {
width: 190px !important;
cursor: pointer;
}

/* .right-side-nav{
  background:#286090;
  color:white;
  width: 300px; 
  height: 80vh;
  position:absolute;
  padding: 2px;
  right:0;
  top:80px
} */

.fixed-button {
position: fixed;
top: 15%;
right: 0;
transform: translateY(-50%);
color: white;
padding: 15px 20px;
border: none;
border-radius: 0;
cursor: pointer;
}


.sr-only{
visibility:hidden
}

/* style la barre de navigation horizontale */

div.scrollmenu {
background-color: white;
/* overflow: auto; */
white-space: nowrap;
margin-bottom:5px
}

div.scrollmenu a {
display: inline-block;
color: #286090;
border: solid 2px #286090;
line-height: 10px;

text-align: center;
padding: 6px;
text-decoration: none;
}

div.scrollmenu a:hover {
background-color: #286090;
color: white;
}

/* style de la barre de navigation verticale */
.sidebar{
max-width:200px;
padding:5px
}

.sidebar-nav .nav-link{
width:190px
}

#main{
margin-left:200px;
padding:10px
}
.logo {
width: 163px;
}

.sr-only
{
display: none;
}	

#showSideNav{
position: absolute; 
top: 106px;
right:0;
opacity: 0.5;
position:fixed
}
#showSideNav:hover{
opacity: 1;
}


.fixed-div {
  width: 100%; /* Set the width of the fixed div */
  position: fixed; /* Make the div fixed */
  top: 50; /* Position it at the top of the viewport */
  /* background-color: #f1f1f1; */
  /* padding: 10px; */
  overflow-x: auto; /* Enable horizontal scrolling */
  white-space: nowrap; /* Prevent text from wrapping */

}

.content {
  width: 200%; /* Set the width of the content inside the fixed div */
}


.main-dashboard{
  margin-top: 60px;
}