/* Copilotix — styles principaux */
:root {
  --cpltx-purple:     #7F77DD;
  --cpltx-purple-dk:  #534AB7;
  --cpltx-purple-lt:  #EEEDFE;
  --cpltx-teal:       #1D9E75;
  --cpltx-teal-lt:    #E1F5EE;
  --cpltx-amber:      #EF9F27;
  --cpltx-amber-lt:   #FAEEDA;
  --cpltx-red:        #E24B4A;
  --cpltx-red-lt:     #FCEBEB;
  --cpltx-green:      #3B6D11;
  --cpltx-green-lt:   #EAF3DE;
  --cpltx-bg:         #F7F6F3;
  --cpltx-surface:    #FFFFFF;
  --cpltx-border:     rgba(0,0,0,0.10);
  --cpltx-text:       #1A1917;
  --cpltx-text-2:     #5F5E5A;
  --cpltx-text-3:     #5C4A3A; /* texte tertiaire — contraste renforcé pour l'accessibilité (anciennement #888780/#9E7E68, trop clair) */
  --cpltx-radius:     8px;
  --cpltx-radius-lg:  12px;
  --cpltx-sidebar-w:  220px;

  /* -----------------------------------------------------------
   * VARIABLES DE MARQUE — personnalisables depuis l'admin
   * (Copilotix > Réglages > Personnalisation). Ces valeurs par
   * défaut correspondent à la charte Breizhix ; elles sont
   * surchargées dynamiquement par un bloc <style> inline généré
   * en PHP (voir copilotix_assets() dans copilotix.php) selon les
   * choix de couleurs enregistrés en option. Tous les modules
   * doivent utiliser ces variables plutôt que des couleurs en dur.
   * ----------------------------------------------------------- */
  --cpltx-primary:       #C8622A; /* Couleur d'accent principale (boutons, liens actifs, progress) */
  --cpltx-primary-dk:    #B5541F; /* Variante foncée (hover) */
  --cpltx-primary-lt:    #F3E2D6; /* Variante claire (fonds badges, boîtes IA actives) */
  --cpltx-sidebar-bg:    #3D2B1F; /* Fond de la sidebar */
  --cpltx-sidebar-text:  #FDFAF5; /* Texte sidebar (liens, titres) */
  --cpltx-sidebar-text-2:#C9B8A8; /* Texte secondaire sidebar (sous-titres, sections, badges) — réglage dédié, pas une opacité, pour garantir un contraste suffisant quelle que soit la couleur de fond choisie */
  --cpltx-accent-2:      #4A7C59; /* Couleur secondaire (succès, statut gagné) */
  --cpltx-accent-2-lt:   #E4F0E8;
}

/* Reset dans le scope */
.cpltx-app *, .cpltx-app *::before, .cpltx-app *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Anti-conflit thème : certains thèmes appliquent des resets globaux
   (ex: *{margin:0;padding:0}) qui peuvent entrer en compétition avec
   les nôtres à spécificité égale. On fixe explicitement les valeurs
   sur les conteneurs clés pour éviter toute dépendance à l'ordre
   de chargement CSS. */
.cpltx-app ul, .cpltx-app ol { list-style: none; }
.cpltx-app button { font-family: inherit; }
.cpltx-app input, .cpltx-app select, .cpltx-app textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: var(--cpltx-surface);
  border: 0.5px solid var(--cpltx-border);
  border-radius: var(--cpltx-radius);
}
.cpltx-app a { text-decoration: none; }
.cpltx-app img { max-width: 100%; }

/* Layout principal */
.cpltx-app {
  display: flex;
  min-height: 85vh;
  background: var(--cpltx-bg);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--cpltx-text);
  border-radius: var(--cpltx-radius-lg);
  overflow: hidden;
  border: 0.5px solid var(--cpltx-border);
}

/* Sidebar */
.cpltx-sidebar {
  width: var(--cpltx-sidebar-w);
  min-width: var(--cpltx-sidebar-w);
  background: var(--cpltx-surface);
  border-right: 0.5px solid var(--cpltx-border);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
}

.cpltx-logo {
  padding: 0 1.25rem 1rem;
  border-bottom: 0.5px solid var(--cpltx-border);
  margin-bottom: .75rem;
}
.cpltx-logo-name {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: var(--cpltx-text);
}
.cpltx-logo-sub {
  font-size: 11px;
  color: var(--cpltx-text-3);
}

.cpltx-nav-section {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cpltx-text-3);
  padding: .75rem 1.25rem .2rem;
}

.cpltx-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 1.25rem;
  font-size: 13px;
  color: var(--cpltx-text-2);
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: all .15s;
}
.cpltx-nav-item:hover {
  background: var(--cpltx-bg);
  color: var(--cpltx-text);
  text-decoration: none;
}
.cpltx-nav-item.active {
  color: var(--cpltx-text);
  background: var(--cpltx-bg);
  border-left: 2px solid var(--cpltx-purple);
  font-weight: 500;
}
.cpltx-nav-item .dashicons { font-size: 16px; width: 16px; height: 16px; }

.cpltx-badge {
  margin-left: auto;
  font-size: 10px;
  background: var(--cpltx-bg);
  padding: 1px 6px;
  border-radius: 10px;
  color: var(--cpltx-text-2);
}
.cpltx-badge-new {
  margin-left: auto;
  font-size: 10px;
  background: var(--cpltx-purple-lt);
  color: var(--cpltx-purple-dk);
  padding: 1px 6px;
  border-radius: 10px;
  font-weight: 500;
}

.cpltx-sidebar-footer {
  margin-top: auto;
  padding: .875rem 1.25rem 0;
  border-top: 0.5px solid var(--cpltx-border);
}
.cpltx-user { display: flex; align-items: center; gap: 8px; }
.cpltx-user-av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cpltx-purple-lt);
  color: var(--cpltx-purple-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500; flex-shrink: 0;
}
.cpltx-user-name { font-size: 13px; font-weight: 500; }
.cpltx-user-plan { font-size: 11px; color: var(--cpltx-text-3); }

/* Main */
.cpltx-main {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.cpltx-module { display: none; }
.cpltx-module.active { display: block; }

.cpltx-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.cpltx-page-title {
  font-size: 18px;
  font-weight: 500;
  color: var(--cpltx-text);
}

/* Métriques */
.cpltx-metrics {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 10px;
  margin-bottom: 1.25rem;
}
.cpltx-metric {
  background: var(--cpltx-surface);
  border: 0.5px solid var(--cpltx-border);
  border-radius: var(--cpltx-radius);
  padding: .875rem 1rem;
}
.cpltx-metric-label { font-size: 11px; color: var(--cpltx-text-2); margin-bottom: 4px; }
.cpltx-metric-value { font-size: 22px; font-weight: 500; }
.cpltx-metric-sub   { font-size: 11px; color: var(--cpltx-text-3); margin-top: 2px; }

/* Grid & cards */
.cpltx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.cpltx-card {
  background: var(--cpltx-surface);
  border: 0.5px solid var(--cpltx-border);
  border-radius: var(--cpltx-radius-lg);
  padding: .875rem 1rem;
}
.cpltx-card-title {
  font-size: 11px;
  font-weight: 500;
  color: var(--cpltx-text-2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .875rem;
}

/* Progress */
.cpltx-progress-label {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--cpltx-text-2);
  margin-bottom: 5px;
}
.cpltx-progress-bar {
  height: 7px;
  background: var(--cpltx-bg);
  border-radius: 4px;
  overflow: hidden;
}
.cpltx-progress-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--cpltx-purple);
  transition: width .4s;
}
.cpltx-progress-sub { font-size: 11px; color: var(--cpltx-text-3); margin-top: 4px; }

/* AI box */
.cpltx-ai-box {
  background: var(--cpltx-bg);
  border-radius: var(--cpltx-radius);
  padding: .75rem;
}
.cpltx-ai-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cpltx-primary-dk);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.cpltx-ai-label .dashicons { font-size: 13px; width: 13px; height: 13px; color: var(--cpltx-primary-dk); }
.cpltx-ai-text { font-size: 13px; line-height: 1.6; color: var(--cpltx-text); }
.cpltx-loading { color: var(--cpltx-text-3); font-style: italic; }
/* Texte d'état vide dans un encart IA (fond --cpltx-primary-lt) — utilise
   --cpltx-primary-dk plutôt que --cpltx-text-3 (gris pensé pour fond blanc),
   pour rester lisible quelle que soit la couleur de fond choisie. */
.cpltx-ai-placeholder { color: var(--cpltx-primary-dk); font-style: italic; opacity: .75; }

/* Boutons */
.cpltx-btn-sm {
  font-size: 12px;
  padding: 5px 10px;
  border: 0.5px solid var(--cpltx-border);
  border-radius: var(--cpltx-radius);
  background: var(--cpltx-surface);
  color: var(--cpltx-text-2);
  cursor: pointer;
  margin-top: 8px;
}
.cpltx-btn-sm:hover { background: var(--cpltx-bg); }

.cpltx-btn-primary {
  background: var(--cpltx-purple);
  color: #fff;
  border: none;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: var(--cpltx-radius);
  cursor: pointer;
}
.cpltx-btn-primary:hover { background: var(--cpltx-purple-dk); }

/* Action links */
.cpltx-action-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--cpltx-purple);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--cpltx-border);
}
.cpltx-action-link:last-child { border-bottom: none; }
.cpltx-action-link:hover { color: var(--cpltx-purple-dk); text-decoration: none; }
.cpltx-action-link .dashicons { font-size: 14px; width: 14px; height: 14px; }

/* Badges statut CRM */
.cpltx-status { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 500; }
.cpltx-status-nouveau  { background: #E6F1FB; color: #185FA5; }
.cpltx-status-relance  { background: var(--cpltx-amber-lt); color: #854F0B; }
.cpltx-status-negoc    { background: var(--cpltx-purple-lt); color: var(--cpltx-purple-dk); }
.cpltx-status-gagne    { background: var(--cpltx-green-lt); color: var(--cpltx-green); }
.cpltx-status-perdu    { background: var(--cpltx-red-lt); color: #A32D2D; }

/* Loader module */
.cpltx-loader {
  text-align: center;
  padding: 3rem;
  color: var(--cpltx-text-3);
  font-size: 13px;
}

/* Responsive */
@media (max-width: 768px) {
  .cpltx-app { flex-direction: column; }
  .cpltx-sidebar { width: 100%; min-width: 100%; flex-direction: row; flex-wrap: wrap; padding: .5rem; border-right: none; border-bottom: 0.5px solid var(--cpltx-border); }
  .cpltx-logo, .cpltx-nav-section, .cpltx-sidebar-footer { display: none; }
  .cpltx-nav-item { padding: 6px 10px; border-left: none; border-bottom: 2px solid transparent; font-size: 12px; }
  .cpltx-nav-item.active { border-bottom: 2px solid var(--cpltx-purple); border-left: none; }
  .cpltx-metrics { grid-template-columns: repeat(2,1fr); }
  .cpltx-grid2 { grid-template-columns: 1fr; }
}

/* ================================================================
   CHARTE — variables globales
   Toutes les couleurs ci-dessous proviennent de --cpltx-primary,
   --cpltx-sidebar-bg, --cpltx-text etc., personnalisables depuis
   Copilotix > Réglages > Personnalisation. Aucune couleur n'est
   codée en dur ici — la charte par défaut (Breizhix) n'est qu'une
   des valeurs possibles, définie dans :root.
   ================================================================ */
#cpltx-app {
  --cpltx-purple:    var(--cpltx-primary, #7F77DD);
  --cpltx-purple-dk: var(--cpltx-primary-dk, #534AB7);
  --cpltx-purple-lt: var(--cpltx-primary-lt, #EEEDFE);
  --cpltx-green:     var(--cpltx-accent-2, #3B6D11);
  --cpltx-green-lt:  var(--cpltx-accent-2-lt, #EAF3DE);
}

/* Sidebar */
.cpltx-sidebar {
  background: var(--cpltx-sidebar-bg);
  border-right: none;
}
.cpltx-logo-name { color: var(--cpltx-sidebar-text); font-size: 17px; letter-spacing: -.01em; }
.cpltx-logo-sub  { color: var(--cpltx-sidebar-text-2); }
.cpltx-logo      { border-bottom-color: rgba(255,255,255,.1); }
.cpltx-nav-section { color: var(--cpltx-sidebar-text-2); }

.cpltx-nav-item  { color: var(--cpltx-sidebar-text-2); }
.cpltx-nav-item:hover {
  background: rgba(255,255,255,.08);
  color: var(--cpltx-sidebar-text);
}
.cpltx-nav-item.active {
  background: var(--cpltx-primary-lt);
  border-left-color: var(--cpltx-primary);
  color: var(--cpltx-sidebar-text);
}
.cpltx-badge     { background: rgba(255,255,255,.12); color: var(--cpltx-sidebar-text-2); }
.cpltx-badge-new { background: var(--cpltx-primary); color: #fff; }
.cpltx-sidebar-footer { border-top-color: rgba(255,255,255,.1); }
.cpltx-user-name { color: var(--cpltx-sidebar-text); }
.cpltx-user-plan { color: var(--cpltx-sidebar-text-2); }
.cpltx-user-av   { background: var(--cpltx-primary-lt); color: var(--cpltx-primary-dk); }

/* Main */
.cpltx-main { background: var(--cpltx-bg); }

/* Cards */
.cpltx-card { background: var(--cpltx-surface); border-color: var(--cpltx-border); }
.cpltx-metric { background: var(--cpltx-surface); border-color: var(--cpltx-border); }
.cpltx-metric-label { color: var(--cpltx-text-2); }
.cpltx-metric-value { color: var(--cpltx-text); }
.cpltx-metric-sub   { color: var(--cpltx-text-3); }

.cpltx-page-title { color: var(--cpltx-text); }
.cpltx-card-title { color: var(--cpltx-text-2); }

/* Progress */
.cpltx-progress-bar  { background: var(--cpltx-border); }
.cpltx-progress-fill { background: var(--cpltx-primary); }
.cpltx-progress-sub  { color: var(--cpltx-text-3); }


/* AI box */
.cpltx-ai-box { background: var(--cpltx-primary-lt); }
.cpltx-ai-label .dashicons { color: var(--cpltx-primary); }

/* Bouton primaire */
.cpltx-btn-primary { background: var(--cpltx-primary); }
.cpltx-btn-primary:hover { background: var(--cpltx-primary-dk); }

/* Statuts CRM — palette sémantique fixe, volontairement indépendante de la
   marque (bleu=nouveau, jaune=relance, orange=négo, vert=gagné, rouge=perdu) */
.cpltx-status-nouveau { background: #E6F1FB; color: #185FA5; }
.cpltx-status-relance { background: #F5EDD9; color: #8A5C1A; }
.cpltx-status-negoc   { background: #F3E2D6; color: #8A3A10; }
.cpltx-status-gagne   { background: #E4F0E8; color: #3A6B47; }
.cpltx-status-perdu   { background: #F5E6E6; color: #8A2020; }

/* ================================================================
   MODALE DE CONFIRMATION CUSTOM (remplace confirm() natif)
   ================================================================ */
.cpltx-confirm-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
.cpltx-confirm-overlay.open { display: flex; }
.cpltx-confirm-box {
  background: var(--cpltx-surface);
  border-radius: 14px;
  padding: 1.5rem;
  width: 340px;
  max-width: 92vw;
  box-shadow: 0 8px 32px rgba(44,31,20,.18);
  text-align: center;
}
.cpltx-confirm-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--cpltx-text);
  margin-bottom: .5rem;
}
.cpltx-confirm-msg {
  font-size: 13px;
  color: var(--cpltx-text-2);
  margin-bottom: 1.25rem;
  line-height: 1.5;
}
.cpltx-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}
.cpltx-confirm-ok {
  font-size: 13px;
  padding: 7px 20px;
  border: none;
  border-radius: 8px;
  background: var(--cpltx-primary);
  color: #fff;
  cursor: pointer;
  font-weight: 500;
}
.cpltx-confirm-ok:hover { background: var(--cpltx-primary-dk); }
.cpltx-confirm-ok.danger { background: #A32D2D; }
.cpltx-confirm-ok.danger:hover { background: #7A2020; }
.cpltx-confirm-cancel {
  font-size: 13px;
  padding: 7px 16px;
  border: 0.5px solid var(--cpltx-border);
  border-radius: 8px;
  background: transparent;
  color: var(--cpltx-text-2);
  cursor: pointer;
}
.cpltx-confirm-cancel:hover { background: var(--cpltx-primary-lt); }