/* =====================================================================
   ZAYAB Brand Theme — chargé EN DERNIER dans angular.json
   Couleurs extraites du logo :
     Violet principal : #6B2D8E  (rgb 107, 45, 142)
     Vert secondaire  : #4A7C1F  (rgb  74, 124, 31)
   Ce fichier surcharge uniquement les variables CSS. Ne pas toucher
   aux fichiers Bootstrap/admin originaux.
   ===================================================================== */

/* ── Bootstrap & admin-core variables ──────────────────────────────── */
:root,
[data-bs-theme=light] {
  --bs-primary:           #6B2D8E;
  --bs-primary-rgb:       107, 45, 142;

  --bs-success:           #4A7C1F;
  --bs-success-rgb:       74, 124, 31;
  --success-dark:         #3A6218;
  --success-dark-rgb:     58, 98, 24;

  --panel-sidebar-primary: #3A1555;

  /* Bootstrap 5 hardcode ces vars indépendamment de --bs-primary */
  --bs-link-color:              #6B2D8E;
  --bs-link-color-rgb:          107, 45, 142;
  --bs-link-hover-color:        #551F74;
  --bs-link-hover-color-rgb:    85, 31, 116;

  /* Nav pills */
  --bs-nav-pills-link-active-bg:    #6B2D8E;
  --bs-nav-link-color:              #6B2D8E;
  --bs-nav-link-hover-color:        #551F74;

  /* Nav tabs */
  --bs-nav-tabs-link-active-color:  #6B2D8E;

  /* Form check */
  --bs-form-check-input-checked-bg-color: #6B2D8E;
  --bs-form-check-input-checked-border-color: #6B2D8E;
  --bs-form-check-input-focus-box-shadow: 0 0 0 .25rem rgba(107,45,142,.25);

  /* Toggle switch */
  --bs-form-switch-checked-bg: #4A7C1F;

  /* Focus ring */
  --bs-focus-ring-color: rgba(107,45,142,.25);

  /* Dropdown */
  --bs-dropdown-link-active-bg: #6B2D8E;

  /* List group */
  --bs-list-group-active-bg: #6B2D8E;
  --bs-list-group-active-border-color: #6B2D8E;
}

/* ── Admin v2 shell variables ──────────────────────────────────────── */
.app-v2 {
  --v2-primary:        #6B2D8E;
  --v2-primary-hover:  #551F74;
  --v2-primary-soft:   color-mix(in srgb, #6B2D8E 12%, #fff);
  --v2-primary-softer: color-mix(in srgb, #6B2D8E  6%, #fff);
  --v2-primary-ring:   rgba(107, 45, 142, 0.18);

  --v2-secondary:       #4A7C1F;
  --v2-secondary-hover: #3A6218;
  --v2-secondary-soft:  color-mix(in srgb, #4A7C1F 14%, #fff);

  --v2-success:      #4A7C1F;
  --v2-success-soft: #EBF3E1;
}

/* ── Bootstrap btn-primary → vert (couleur d'action ZAYAB) ──────────── */
/* Le violet reste pour les liens, nav-pills, form-check, focus rings.   */
/* Le vert est réservé aux boutons d'action (Enregistrer, Créer, etc.).  */
.btn-primary {
  --bs-btn-bg:                  #4A7C1F;
  --bs-btn-border-color:        #4A7C1F;
  --bs-btn-hover-bg:            #3A6218;
  --bs-btn-hover-border-color:  #3A6218;
  --bs-btn-active-bg:           #2E4F12;
  --bs-btn-active-border-color: #2E4F12;
  --bs-btn-disabled-bg:         #4A7C1F;
  --bs-btn-disabled-border-color: #4A7C1F;
  --bs-btn-focus-shadow-rgb:    74, 124, 31;
}

.btn-outline-primary {
  --bs-btn-color:               #4A7C1F;
  --bs-btn-border-color:        #4A7C1F;
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            #4A7C1F;
  --bs-btn-hover-border-color:  #4A7C1F;
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           #3A6218;
  --bs-btn-active-border-color: #3A6218;
  --bs-btn-focus-shadow-rgb:    74, 124, 31;
}

/* ── btn-purple : violet pour les boutons de navigation/branding ─────── */
.btn-purple {
  --bs-btn-color:               #fff;
  --bs-btn-bg:                  #6B2D8E;
  --bs-btn-border-color:        #6B2D8E;
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            #551F74;
  --bs-btn-hover-border-color:  #551F74;
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           #4A1A66;
  --bs-btn-active-border-color: #4A1A66;
  --bs-btn-disabled-color:      #fff;
  --bs-btn-disabled-bg:         #6B2D8E;
  --bs-btn-disabled-border-color: #6B2D8E;
  --bs-btn-focus-shadow-rgb:    107, 45, 142;
}
.btn-outline-purple {
  --bs-btn-color:               #6B2D8E;
  --bs-btn-border-color:        #6B2D8E;
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            #6B2D8E;
  --bs-btn-hover-border-color:  #6B2D8E;
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           #551F74;
  --bs-btn-active-border-color: #551F74;
  --bs-btn-focus-shadow-rgb:    107, 45, 142;
}

/* ── Bootstrap btn-success (alias du vert, inchangé) ────────────────── */
.btn-success {
  --bs-btn-bg:                  #4A7C1F;
  --bs-btn-border-color:        #4A7C1F;
  --bs-btn-hover-bg:            #3A6218;
  --bs-btn-hover-border-color:  #3A6218;
  --bs-btn-active-bg:           #2E4F12;
  --bs-btn-active-border-color: #2E4F12;
  --bs-btn-disabled-bg:         #4A7C1F;
  --bs-btn-disabled-border-color: #4A7C1F;
  --bs-btn-focus-shadow-rgb:    74, 124, 31;
}

.btn-outline-success {
  --bs-btn-color:               #4A7C1F;
  --bs-btn-border-color:        #4A7C1F;
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            #4A7C1F;
  --bs-btn-hover-border-color:  #4A7C1F;
  --bs-btn-active-color:        #fff;
  --bs-btn-active-bg:           #3A6218;
  --bs-btn-active-border-color: #3A6218;
  --bs-btn-focus-shadow-rgb:    74, 124, 31;
}

/* ── Utilitaires Bootstrap (bg-*, text-*, border-*) ───────────────── */
.bg-primary    { background-color: #6B2D8E !important; }
.text-primary  { color: #6B2D8E !important; }
.border-primary { border-color: #6B2D8E !important; }
.link-primary  { color: #6B2D8E !important; }
.link-primary:hover { color: #551F74 !important; }

.bg-success    { background-color: #4A7C1F !important; }
.text-success  { color: #4A7C1F !important; }
.border-success { border-color: #4A7C1F !important; }

/* Badges */
.badge.bg-primary { background-color: #6B2D8E !important; }
.badge.bg-success { background-color: #4A7C1F !important; }
.badge.rounded-pill.bg-success { background-color: #4A7C1F !important; }

/* Soft backgrounds (progress bars, alerts, etc.) */
.bg-primary-soft { background-color: color-mix(in srgb, #6B2D8E 12%, #fff) !important; }
.bg-success-soft { background-color: color-mix(in srgb, #4A7C1F 12%, #fff) !important; }

/* ── Form focus rings ──────────────────────────────────────────────── */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: #6B2D8E;
  box-shadow: 0 0 0 0.2rem rgba(107, 45, 142, 0.22);
}
.form-check-input:checked {
  background-color: #6B2D8E;
  border-color: #6B2D8E;
}

/* ── Nav pills / tabs active ───────────────────────────────────────── */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #6B2D8E;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #6B2D8E;
  border-bottom-color: #6B2D8E;
}

/* ── Pagination (boutons d'action → vert ZAYAB) ────────────────────── */
.page-item.active .page-link {
  background-color: #4A7C1F;
  border-color: #4A7C1F;
  box-shadow: 0 2px 6px rgba(74, 124, 31, .3);
}
.page-link { color: #4A7C1F; }
.page-link:hover { color: #3b6418; background-color: #eef5e7; border-color: #4A7C1F; }
.page-link:focus { box-shadow: 0 0 0 .2rem rgba(74, 124, 31, .25); }

/* ── Interrupteurs (switch) activés → vert ZAYAB ───────────────────── */
.form-switch .form-check-input:checked {
  background-color: #4A7C1F;
  border-color: #4A7C1F;
}
.form-switch .form-check-input:focus { box-shadow: 0 0 0 .2rem rgba(74, 124, 31, .25); }

/* ── Progress bars ─────────────────────────────────────────────────── */
.progress-bar { background-color: #6B2D8E; }
.progress-bar.bg-success { background-color: #4A7C1F !important; }

/* ── Spinner ───────────────────────────────────────────────────────── */
.spinner-border.text-primary,
.spinner-grow.text-primary { color: #6B2D8E !important; }


/* =====================================================================
   SIDEBAR + TOPBAR — thème violet foncé ZAYAB
   ===================================================================== */

/* ── Tokens sidebar — rail en violet foncé ZAYAB ────────────────────── */
.app-v2 {
  --v2-sidebar-bg:          #3A1555;
  --v2-sidebar-bg-2:        #2D1044;
  --v2-sidebar-fg:          rgba(255, 255, 255, 0.88);
  --v2-sidebar-fg-dim:      rgba(255, 255, 255, 0.58);
  --v2-sidebar-fg-muted:    rgba(255, 255, 255, 0.35);
  --v2-sidebar-border:      rgba(255, 255, 255, 0.09);
  --v2-sidebar-hairline:    rgba(255, 255, 255, 0.06);
  --v2-sidebar-chip:        rgba(255, 255, 255, 0.10);
  --v2-sidebar-chip-strong: rgba(255, 255, 255, 0.20);
  --v2-sidebar-active-bg:   rgba(255, 255, 255, 0.15);
}

/* ── Ctxpanel (menu texte) — fond blanc avec textes sombres ─────────── */
.app-v2 > .v2-ctxpanel {
  background: #ffffff !important;
  border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
  color: #1a1a2e !important;
}
.app-v2 > .v2-ctxpanel .v2-ctx-title { color: rgba(26, 26, 46, 0.50) !important; }
.app-v2 > .v2-ctxpanel .v2-ctx-group-head span { color: rgba(26, 26, 46, 0.45) !important; }
.app-v2 > .v2-ctxpanel .v2-nav-label { color: #1a1a2e !important; }
.app-v2 > .v2-ctxpanel .v2-nav-item:hover { background: rgba(0, 0, 0, 0.05) !important; }
.app-v2 > .v2-ctxpanel .v2-nav-item.v2-is-active { background: #f0eeff !important; }
.app-v2 > .v2-ctxpanel .v2-nav-item.v2-is-active .v2-nav-label { color: #5a3e9b !important; font-weight: 600; }
.app-v2 > .v2-ctxpanel .v2-nav-item.v2-is-active::before { background: #5a3e9b !important; }
.app-v2 > .v2-ctxpanel .v2-nav-child { color: rgba(26, 26, 46, 0.65) !important; }
.app-v2 > .v2-ctxpanel .v2-nav-child:hover { background: rgba(0, 0, 0, 0.04) !important; color: #1a1a2e !important; }
.app-v2 > .v2-ctxpanel .v2-nav-child.v2-is-on { background: #f0eeff !important; color: #5a3e9b !important; }
.app-v2 > .v2-ctxpanel .v2-nav-child-label { color: inherit !important; }
.app-v2 > .v2-ctxpanel .v2-nav-chev { color: rgba(26, 26, 46, 0.35) !important; }

/* ── Header — fond violet foncé ─────────────────────────────────────── */
.app-v2 > .v2-header {
  background: #3A1555 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0,0,0,.25) !important;
}

/* Tous les éléments héritent de la couleur blanche */
.app-v2 > .v2-header a,
.app-v2 > .v2-header button { color: inherit; }

/* Nom de la marque */
.app-v2 > .v2-header .v2-brand-name,
.app-v2 > .v2-header .v2-brand-name span {
  color: #fff !important;
}

/* Breadcrumbs */
.app-v2 > .v2-header .v2-crumbs { color: rgba(255,255,255,.45); }
.app-v2 > .v2-header .v2-crumbs .v2-primary-crumb { color: rgba(255,255,255,.75); }
.app-v2 > .v2-header .v2-crumbs .v2-crumb-current { color: rgba(255,255,255,.9); }
.app-v2 > .v2-header .v2-crumbs .v2-crumb-sep { color: rgba(255,255,255,.25); }
.app-v2 > .v2-header .v2-crumbs a:hover { background: rgba(255,255,255,.1); color: #fff; }
.app-v2 > .v2-header .v2-crumbs a.v2-primary-crumb { color: rgba(255,255,255,.75); }
.app-v2 > .v2-header .v2-crumbs a.v2-primary-crumb:hover {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.app-v2 > .v2-header .v2-crumbs > a.v2-crumb-current:hover .v2-crumb-text {
  background: rgba(255,255,255,.1);
  color: #fff;
}

/* Bouton toggle sidebar */
.app-v2 > .v2-header .v2-sidebar-toggle { color: rgba(255,255,255,.6); }
.app-v2 > .v2-header .v2-sidebar-toggle:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* Barre de recherche */
.app-v2 > .v2-header .v2-search-btn {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.5);
}
.app-v2 > .v2-header .v2-search-btn:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.75);
  box-shadow: none;
}
.app-v2 > .v2-header .v2-search-btn .v2-kbd {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.45);
}

/* Boutons icônes (globe, panier, message, plein écran) */
.app-v2 > .v2-header .v2-icon-btn { color: rgba(255,255,255,.65); }
.app-v2 > .v2-header .v2-icon-btn:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* Séparateur vertical */
.app-v2 > .v2-header .v2-header-divider { background: rgba(255,255,255,.15); }

/* Bouton langue */
.app-v2 > .v2-header .v2-lang-btn { color: rgba(255,255,255,.75); }
.app-v2 > .v2-header .v2-lang-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.app-v2 > .v2-header .v2-lang-name { color: rgba(255,255,255,.75); }

/* Avatar wrap (profil) */
.app-v2 > .v2-header .v2-avatar-wrap {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.25) !important;
}
.app-v2 > .v2-header .v2-avatar-wrap:hover { background: rgba(255,255,255,.18) !important; }

/* Avatar initiales */
.app-v2 > .v2-header .v2-avatar {
  background: rgba(255,255,255,.2) !important;
  border-color: rgba(255,255,255,.3) !important;
  color: #fff !important;
}

/* Nom et rôle profil inline */
.app-v2 > .v2-header .v2-profile-inline-name { color: rgba(255,255,255,.9); }
.app-v2 > .v2-header .v2-profile-inline-role { color: rgba(255,255,255,.5); }

/* Caret avatar */
.app-v2 > .v2-header .v2-avatar-caret,
.app-v2 > .v2-header .v2-dropdown.v2-is-open > .v2-avatar-wrap .v2-avatar-caret {
  color: rgba(255,255,255,.6) !important;
}

/* Badge point rouge — la bordure doit matcher le header */
.app-v2 > .v2-header .v2-badge-dot { border-color: #3A1555 !important; }

/* Dropdown profil — reste en clair car il s'ouvre sur fond blanc */
.app-v2 > .v2-header .v2-dropdown-menu { color: var(--v2-fg); }

/* ── Rail (barre icônes) — couleurs icônes sur fond violet ─────────── */
.app-v2 > .v2-rail .v2-rail-btn { color: rgba(255,255,255,.5); }
.app-v2 > .v2-rail .v2-rail-divider { background: rgba(255,255,255,.08); }

/* ── Search overlay ─────────────────────────────────────────────────── */
.v2-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 10, 30, 0.55);
  backdrop-filter: blur(4px);
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}

.v2-search-modal {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.06);
  width: min(560px, calc(100vw - 32px));
  overflow: hidden;
}

.v2-search-bar {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .9rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.07);
  color: #6b7280;
}

.v2-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: .95rem;
  background: transparent;
  color: #1a1a2e;
}
.v2-search-input::placeholder { color: #9ca3af; }

.v2-search-clear {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #9ca3af;
  padding: 2px;
}
.v2-search-clear:hover { color: #374151; }

.v2-search-loading {
  display: flex;
  align-items: center;
  padding: 1rem;
  border-bottom: 1px solid rgba(0,0,0,.05);
}

.v2-search-results {
  padding: .5rem 0;
  max-height: 380px;
  overflow-y: auto;
}

.v2-search-group { padding: .25rem 0; }

.v2-search-group-label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
  padding: .4rem 1rem .25rem;
}

.v2-search-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem 1rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .1s;
}
.v2-search-item:hover { background: rgba(90,62,155,.06); }

.v2-search-thumb {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
  background: #f3f4f6;
  flex-shrink: 0;
}

.v2-search-thumb-placeholder {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  flex-shrink: 0;
}

.v2-search-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #5a3e9b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: .85rem;
  flex-shrink: 0;
}

.v2-search-item-info { flex: 1; min-width: 0; }
.v2-search-item-name { font-size: .88rem; font-weight: 500; color: #1a1a2e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v2-search-item-sub { font-size: .75rem; color: #6b7280; margin-top: 1px; }

.v2-search-item-arrow { color: #d1d5db; flex-shrink: 0; }
.v2-search-item:hover .v2-search-item-arrow { color: #5a3e9b; }

.v2-search-empty,
.v2-search-hint {
  padding: 1.25rem 1rem;
  font-size: .88rem;
  color: #9ca3af;
  text-align: center;
}
.v2-search-empty strong { color: #374151; }