/**
 * Platform Theme Overrides — TALIGBE
 * Remplace la couleur primaire Sneat (#7367f0 violet) par la palette
 * de la plateforme : sarcelle #5B9EA6 (primaire) + orange #FF9700 (accent).
 *
 * Ce fichier doit être chargé APRÈS les CSS vendor Sneat.
 */

/* ─── 1. Remplacement des variables Bootstrap 5 ─────────────────────────── */
:root {
  /* Primaire → sarcelle */
  --bs-primary:         #5B9EA6;
  --bs-primary-rgb:     91, 158, 166;
  --bs-link-color:      #5B9EA6;
  --bs-link-hover-color:#3d7f87;

  /* Variables utilitaires utilisées dans le template */
  --bs-purple:          #5B9EA6;    /* remplace purple → sarcelle */

  /* Dropdowns & navs */
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg:    #5B9EA6;
  --bs-nav-tabs-link-active-color: #5B9EA6;
  --bs-nav-tabs-link-active-border-color: #5B9EA6 #5B9EA6 transparent;

  /* Pagination */
  --bs-pagination-active-bg:          #5B9EA6;
  --bs-pagination-active-border-color:#5B9EA6;

  /* Progress */
  --bs-progress-bar-bg: #5B9EA6;

  /* Couleurs soft (opacité 18 %) */
  --primary-soft:    rgba(91,158,166,.18);
}

/* ─── 2. Boutons / badges primaire ──────────────────────────────────────── */
.btn-primary,
.bg-primary,
.badge.bg-primary {
  background-color: #5B9EA6 !important;
  border-color:     #5B9EA6 !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #3d7f87 !important;
  border-color:     #3d7f87 !important;
}
.btn-outline-primary {
  color:        #5B9EA6 !important;
  border-color: #5B9EA6 !important;
}
.btn-outline-primary:hover {
  background-color: #5B9EA6 !important;
  color: #fff !important;
}
.btn-label-primary {
  color: #5B9EA6 !important;
  background-color: rgba(91,158,166,.16) !important;
}
.btn-label-primary:hover {
  background-color: #5B9EA6 !important;
  color: #fff !important;
}

/* ─── 3. Texte, liens, icônes couleur primaire ───────────────────────────── */
.text-primary  { color: #5B9EA6 !important; }
a:not([class]) { color: #5B9EA6; }
a:not([class]):hover { color: #3d7f87; }

/* ─── 4. Bordures primaires ──────────────────────────────────────────────── */
.border-primary   { border-color: #5B9EA6 !important; }
.border-left-primary { border-left-color: #5B9EA6 !important; }

/* ─── 5. Arrière-plans primaires ─────────────────────────────────────────── */
.bg-primary         { background-color: #5B9EA6 !important; }
.bg-label-primary   { background-color: rgba(91,158,166,.16) !important; color: #5B9EA6 !important; }
.bg-gradient-primary {
  background-image: linear-gradient(45deg,#5B9EA6,#8fc5cc) !important;
}

/* ─── 6. Menu latéral — éléments actifs & hover ──────────────────────────── */
/* Active item background */
.menu-vertical .menu-item.active > .menu-link,
.menu-vertical .menu-item > .menu-link.active {
  background: linear-gradient(270deg,rgba(91,158,166,.12),rgba(91,158,166,.16)) !important;
  color: #5B9EA6 !important;
}
/* Active item icon & text */
.menu-vertical .menu-item.active > .menu-link .menu-icon,
.menu-vertical .menu-item.active > .menu-link .menu-title,
.menu-vertical .menu-item > .menu-link.active .menu-icon,
.menu-vertical .menu-item > .menu-link.active .menu-title {
  color: #5B9EA6 !important;
}
/* Active item left-border bullet */
.menu-vertical .menu-item.active:before,
.menu-vertical .menu-item > .menu-link.active:before {
  background-color: #5B9EA6 !important;
}
/* Hover */
.menu-vertical .menu-item .menu-link:hover:not(.active) {
  color: #5B9EA6 !important;
}

/* ─── 7. Navbar layout (top bar) ─────────────────────────────────────────── */
.navbar-nav .nav-item .nav-link.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #5B9EA6 !important;
  color: #fff !important;
}
.nav-tabs .nav-link.active {
  color: #5B9EA6 !important;
  border-color: #5B9EA6 #5B9EA6 transparent !important;
}

/* ─── 8. Formulaires — focus ─────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #5B9EA6 !important;
  box-shadow: 0 0 0 0.2rem rgba(91,158,166,.25) !important;
}
.form-check-input:checked {
  background-color: #5B9EA6 !important;
  border-color:     #5B9EA6 !important;
}
.form-range::-webkit-slider-thumb { background: #5B9EA6; }
.form-range::-moz-range-thumb     { background: #5B9EA6; }

/* ─── 9. Pagination active ───────────────────────────────────────────────── */
.page-item.active .page-link {
  background-color: #5B9EA6 !important;
  border-color:     #5B9EA6 !important;
  color: #fff !important;
}
.page-link { color: #5B9EA6; }
.page-link:hover { color: #3d7f87; }

/* ─── 10. Progress bar ───────────────────────────────────────────────────── */
.progress-bar { background-color: #5B9EA6 !important; }

/* ─── 11. Spinners ───────────────────────────────────────────────────────── */
.spinner-border.text-primary,
.spinner-grow.text-primary { color: #5B9EA6 !important; }

/* ─── 12. Alerts ─────────────────────────────────────────────────────────── */
.alert-primary {
  background-color: rgba(91,158,166,.12) !important;
  border-color:     rgba(91,158,166,.3) !important;
  color: #3d7f87 !important;
}

/* ─── 13. Liste groupée ──────────────────────────────────────────────────── */
.list-group-item.active {
  background-color: #5B9EA6 !important;
  border-color:     #5B9EA6 !important;
}

/* ─── 14. Template Customizer panel ─────────────────────────────────────── */
/* Le panneau créé dynamiquement par template-customizer.js */
.template-customizer {
  font-family: 'Montserrat', sans-serif !important;
}
/* Bouton de déclenchement (engrenage flottant) */
.template-customizer-open-btn {
  background: linear-gradient(135deg, #5B9EA6, #FF9700) !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(91,158,166,.45) !important;
  border-radius: 50% !important;
  width: 44px !important;
  height: 44px !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
.template-customizer-open-btn:hover {
  transform: rotate(30deg) scale(1.08) !important;
  box-shadow: 0 6px 24px rgba(91,158,166,.55) !important;
}
/* Entête du panneau */
.template-customizer-header {
  background: linear-gradient(135deg, #5B9EA6 0%, #3d7f87 100%) !important;
  color: #fff !important;
  padding: 1.1rem 1.4rem !important;
  border-radius: 0 !important;
}
.template-customizer-header .template-customizer-close {
  color: rgba(255,255,255,.75) !important;
}
.template-customizer-header .template-customizer-close:hover {
  color: #fff !important;
}
/* Corps du panneau */
.template-customizer-inner {
  background: #f6f7f9 !important;
  padding: 1.2rem 1.4rem !important;
}
/* Titres de section */
.template-customizer-section-header {
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #6b7280 !important;
  margin: 1rem 0 .5rem !important;
}
/* Options radio visuelles (Style / Theme / Layout) */
.template-customizer-options .custom-option-body {
  border: 1.5px solid #e5e7eb !important;
  border-radius: 10px !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.template-customizer-options input[type=radio]:checked + label .custom-option-body,
.template-customizer-options .custom-option.checked .custom-option-body {
  border-color: #5B9EA6 !important;
  box-shadow: 0 0 0 3px rgba(91,158,166,.2) !important;
}
.template-customizer-options input[type=radio]:checked + label .custom-option-body svg path,
.template-customizer-options .custom-option.checked .custom-option-body svg path {
  fill: #5B9EA6 !important;
}
/* Couleur du texte dans les labels d'option cochée */
.template-customizer-options input[type=radio]:checked + label,
.template-customizer-options .custom-option.checked {
  color: #5B9EA6 !important;
  font-weight: 600 !important;
}
/* Pied du panneau */
.template-customizer-footer,
.template-customizer .template-customizer-reset-btn {
  background: #fff !important;
  border-top: 1px solid #e5e7eb !important;
  padding: .75rem 1.4rem !important;
}
.template-customizer .template-customizer-reset-btn {
  color: #5B9EA6 !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
}

/* ─── 15. Scrollbar (sidebar, panneau customizer) ────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(91,158,166,.35);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(91,158,166,.65); }

/* ─── 16. Fond du bloc de menu sélectionné (sneat sidebar) ──────────────── */
.bg-menu-theme .menu-item.active > .menu-link,
.bg-menu-theme .menu-item > .menu-link.active {
  background-color: rgba(91,158,166,.15) !important;
  color: #5B9EA6 !important;
}
.bg-menu-theme.menu-vertical .menu-item > .menu-link:before {
  background-color: #5B9EA6 !important;
}

/* ─── 17. Badges / chips ─────────────────────────────────────────────────── */
.badge-primary-subtle {
  background: rgba(91,158,166,.12);
  color: #5B9EA6;
}