/* ==========================================================================
   Fichier de surcharge pour la thémisation dynamique
   ========================================================================== */

/* 1. COULEUR PRIMAIRE (Primary) */
.bg-light-blue,
.btn-primary,
.main-header .navbar,
.main-header .logo,
.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus,
.nav-stacked>li.active>a,
.nav-stacked>li.active>a:hover,
.nav-tabs-custom>.nav-tabs>li.active,
.nav-tabs-custom.tab-primary>.nav-tabs>li.active,
.direct-chat-primary .right>.direct-chat-text,
.direct-chat-primary .right>.direct-chat-text:after {
  background-color: var(--couleur-primaire) !important;
  border-color: var(--couleur-primaire) !important;
  /* Pour les éléments avec bordure aussi */
}

.skin-sg .sidebar-menu>li>a {
  border-left: 3px solid transparent !important;
}

/** active **/
.skin-sg .sidebar-menu>li.active>a,
.skin-sg .sidebar-menu>li.menu-open>a {
  border-left-color: var(--couleur-primaire) !important;
}


.text-light-blue,
.form-control:focus {
  color: var(--couleur-primaire) !important;
  border-color: var(--couleur-primaire) !important;
  /* Pour les éléments avec bordure aussi */
}

.progress-bar-primary {
  background-color: var(--couleur-primaire) !important;
}

.box.box-primary,
.nav-tabs-custom>.nav-tabs>li,
.nav-tabs-custom>.nav-tabs>li.active {
  border-top-color: var(--couleur-accent) !important;
}

.box.box-solid.box-primary {
  border: 1px solid var(--couleur-primaire) !important;
}

.box.box-solid.box-primary>.box-header {
  background: var(--couleur-primaire) !important;
  background-color: var(--couleur-primaire) !important;
}

.todo-list .primary {
  border-left-color: var(--couleur-primaire) !important;
}

.bg-blue-sg {
  background-color: var(--couleur-primaire) !important;
  color: #fff !important;
}

.btn-blue-sg {

  background-color: var(--couleur-primaire) !important;
  border-color: var(--couleur-primaire) !important;
  color: #fff !important;
}

.text-primary {
  color: var(--couleur-primaire) !important;
}

/* 2. COULEUR SECONDAIRE (Secondary/Default) */
.bg-gray,
.label-default,
.box.box-solid.box-default,
.nav-tabs-custom.tab-default>.nav-tabs>li.active,
.lockscreen,
.login-page,
.register-page,
.profile-user-img,
.img-bordered,
.img-bordered-sm {
  background-color: var(--couleur-secondaire) !important;
  border-color: var(--couleur-secondaire) !important;
}

/* 10. ARRONDISSEMENT DES VIGNETTES */
.info-box,
.small-box,
.box,
.nav-tabs-custom,
.nav-tabs-custom>.tab-content,
.info-box-icon {
  border-radius: 10px !important;
  -webkit-border-radius: 10px !important;
  -moz-border-radius: 10px !important;
  overflow: hidden !important;
}

/* .main-footer {
    border-top: 1px solid var(--couleur-secondaire) !important;
}
.control-sidebar-light,
.control-sidebar-light + .control-sidebar-bg {
    border-left: 1px solid var(--couleur-secondaire) !important;
}
.control-sidebar-light .nav-tabs.control-sidebar-tabs {
    border-bottom: var(--couleur-secondaire) !important;
}
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:hover,
.control-sidebar-light .nav-tabs.control-sidebar-tabs > li > a:focus {
    border-left-color: var(--couleur-secondaire) !important;
    border-bottom-color: var(--couleur-secondaire) !important;
} */
/* .form-control {
    border-color: var(--couleur-secondaire) !important;
}
.input-group .input-group-addon {
    border-color: var(--couleur-secondaire) !important;
}
.direct-chat-text {
    background: var(--couleur-secondaire) !important;
    border: 1px solid var(--couleur-secondaire) !important;
}
.direct-chat-text:after, .direct-chat-text:before {
    border-right-color: var(--couleur-secondaire) !important;
}
.right .direct-chat-text:after, .right .direct-chat-text:before {
    border-left-color: var(--couleur-secondaire) !important;
}
.post {
    border-bottom: 1px solid var(--couleur-secondaire) !important;
}
.todo-list > li.done .label {
    background: var(--couleur-secondaire) !important;
}
.timeline > li > .timeline-item > .time {
    background-color: var(--couleur-secondaire) !important;
} */


/* 3. COULEUR SUCCÈS (Success) */
.bg-green,
.alert-success,
.btn-success,
.label-success,
.progress-bar-success,
.box.box-solid.box-success>.box-header,
.todo-list .success,
.chat .item>.online,
.nav-tabs-custom.tab-success>.nav-tabs>li.active,
.direct-chat-success .right>.direct-chat-text,
.direct-chat-success .right>.direct-chat-text:after,
.direct-chat-success .right>.direct-chat-text:before {
  background-color: var(--couleur-succes) !important;
  border-color: var(--couleur-succes) !important;
}

.form-group.has-success label,
.form-group.has-success .help-block,
.text-green {
  color: var(--couleur-succes) !important;
}

.form-group.has-success .form-control,
.form-group.has-success .input-group-addon {
  border-color: var(--couleur-succes) !important;
}

.timeline>li>.timeline-item>.time.bg-green {
  /* specific for timeline time */
  background-color: var(--couleur-succes) !important;
}

/* 4. COULEUR AVERTISSEMENT (Warning) */
.bg-yellow,
.alert-warning,
.btn-warning,
.label-warning,
.progress-bar-warning,
.todo-list .warning,
.nav-tabs-custom.tab-warning>.nav-tabs>li.active,
.direct-chat-warning .right>.direct-chat-text,
.direct-chat-warning .right>.direct-chat-text:after,
.direct-chat-warning .right>.direct-chat-text:before {
  background-color: var(--couleur-avertissement) !important;
  border-color: var(--couleur-avertissement) !important;
}

.form-group.has-warning label,
.form-group.has-warning .help-block,
.text-yellow {
  color: var(--couleur-avertissement) !important;
}

.form-group.has-warning .form-control,
.form-group.has-warning .input-group-addon {
  border-color: var(--couleur-avertissement) !important;
}

/* 5. COULEUR DANGER (Danger) */
.bg-red,
.alert-danger,
.alert-error,
.btn-danger,
.label-danger,
.progress-bar-danger,
.chat .item>.offline,
.nav-tabs-custom.tab-danger>.nav-tabs>li.active,
.direct-chat-danger .right>.direct-chat-text,
.direct-chat-danger .right>.direct-chat-text:after,
.direct-chat-danger .right>.direct-chat-text:before,
.btn-google {
  /* btn-google uses red as well */
  background-color: var(--couleur-danger) !important;
  border-color: var(--couleur-danger) !important;
}

.form-group.has-error label,
.form-group.has-error .help-block,
.text-red,
.todo-list>li .tools {
  color: var(--couleur-danger) !important;
}

.form-group.has-error .form-control,
.form-group.has-error .input-group-addon {
  border-color: var(--couleur-danger) !important;
}

.btn-google .badge {
  /* special case */
  color: var(--couleur-danger) !important;
}






/* 6. COULEUR INFO */
.bg-aqua,
.alert-info,
.btn-info,
.label-info,
.progress-bar-info,
.todo-list .info,
.nav-tabs-custom.tab-info>.nav-tabs>li.active,
.direct-chat-info .right>.direct-chat-text,
.direct-chat-info .right>.direct-chat-text:after,
.direct-chat-info .right>.direct-chat-text:before {
  background-color: var(--couleur-info) !important;
  border-color: var(--couleur-info) !important;
}

.text-aqua {
  color: var(--couleur-info) !important;
}

/* 7. COULEUR DE FOND PRINCIPALE */
body,
.content-wrapper,
.right-side {
  background-color: var(--couleur-fond-principal) !important;
}

/* 8. COULEUR DE TEXTE PRINCIPALE */
body,
.content-wrapper,
.right-side,
.text-black {
  color: var(--couleur-texte-principal) !important;
}

/* Adjust specific text colors if needed */
.main-header .navbar .nav>li>a {
  /* This might need to be adjusted with primary color if it's dynamic */
  color: var(--couleur-texte-navbar) !important;
  /* Assuming it should follow main text color or primary */
}


/* 9. COULEUR DE FOND DE LA BARRE LATÉRALE */
.main-sidebar,
.left-side,
.sidebar-menu {
  background-color: var(--couleur-fond-sidebar) !important;
}

/* 10. COULEUR DE TEXTE DE LA BARRE LATÉRALE */
.sidebar-menu,
.sidebar-menu a,
.sidebar-menu li>a {
  color: var(--couleur-texte-sidebar) !important;
}

.sidebar-menu>li.header {
  color: var(--couleur-texte-sidebar) !important;
  /* Assuming headers should follow sidebar text color */
}

/** couleur accentué **/
.pagination>.active>a {
  background-color: var(--couleur-accent) !important;
}

.nav-tabs-custom>.nav-tabs {
  background-color: var(--couleur-primaire) !important;
}

/*Mise en relief du menu Mon compte client */
.sidebar-menu>li.menu-highlight {
  margin: 0px 10px 0px 10px;
  background: var(--couleur-accent);
  border-radius: 4px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  /* transition: background-color 0.2s, box-shadow 0.2s; */
}

.sidebar-menu>li.menu-highlight:hover {
  background-color: var(--couleur-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.sidebar-menu>li.menu-highlight>a {
  color: #fff !important;
  padding: 12px 15px !important;
  border-left: none !important;
}

.sidebar-menu>li.menu-highlight i {
  color: #fff !important;
}

.text-purple-sg {
  color: var(--couleur-primaire) !important;
}

.bg-purple-sg, .bg-blue {
  background-color: var(--couleur-primaire) !important;
  color: #fff !important;
}

.bg-warning, .bg-yellow {
  background-color: var(--couleur-avertissement) !important;
  color: #fff !important;
}

.bg-success, .bg-green {
  background-color: var(--couleur-succes) !important;
  color: #fff !important;
}


.bg-danger, .bg-red {
  background-color: var(--couleur-danger) !important;
  color: #fff !important;
}

.bg-aqua, .bg-info {
  background-color: var(--couleur-info) !important;
  color: #fff !important;
}

.icon-ar {
  background-color: var(--couleur-primaire) !important;
}

.progress-bar {
  background-color: var(--couleur-primaire) !important;
}

.primary-color {
  color: var(--couleur-primaire) !important;
}

.blockquote-color-bg-primary, .panel.panel-primary .panel-heading  {
  background-color: var(--couleur-primaire) !important;
}

.btn.btn-secondary {
  background-color: var(--couleur-accent) !important;
  border-color: var(--couleur-accent) !important;
  color: #fff !important;
}