/* ═══════════════════════════════════════════════════════════
   SpocSpace — Standard Color Palette
   Source de vérité pour toutes les couleurs du système.
   Synchronisé avec admin/assets/css/admin.css (tokens --cl-*)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Neutres ── */
  --cl-bg:              #F7F5F2;
  --cl-surface:         #FFFFFF;
  --cl-border:          #E8E5E0;
  --cl-border-light:    #F0EDE8;
  --cl-border-hover:    #D4D0CA;
  --cl-text:            #1A1A1A;
  --cl-text-secondary:  #6B6B6B;
  --cl-text-muted:      #9B9B9B;
  --cl-accent:          #191918;
  --cl-accent-hover:    #000000;
  --cl-accent-bg:       rgba(25,25,24,0.06);
  --cl-sidebar-bg:      #FAFAF8;
  --cl-sidebar-hover:   #F0EDE8;
  --cl-sidebar-active:  #EDE8E0;

  /* ── Pastels d'état (fond + texte) ── */
  --cl-teal-bg:    #bcd2cb;  --cl-teal-fg:    #2d4a43;  /* validé / acquis / success */
  --cl-green-bg:   #B8C9D4;  --cl-green-fg:   #3B4F6B;  /* info / en attente */
  --cl-orange-bg:  #D4C4A8;  --cl-orange-fg:  #6B5B3E;  /* en cours / pending */
  --cl-red-bg:     #E2B8AE;  --cl-red-fg:     #7B3B2C;  /* non acquis / refusé / danger */
  --cl-purple-bg:  #D0C4D8;  --cl-purple-fg:  #5B4B6B;  /* type spécial / animation */
  --cl-neutral-bg: #EEEEEE;  --cl-neutral-fg: #666666;  /* non évalué / neutre */

  /* ── Badges statut solides (strong) ── */
  --cl-badge-success-bg: #DCFCE7;  --cl-badge-success-fg: #166534;
  --cl-badge-danger-bg:  #FEE2E2;  --cl-badge-danger-fg:  #991B1B;
  --cl-badge-warning-bg: #FEF3C7;  --cl-badge-warning-fg: #92400E;
  --cl-badge-neutral-bg: #F3F4F6;  --cl-badge-neutral-fg: #4B5563;
  --cl-badge-info-bg:    #E8E6DC;  --cl-badge-info-fg:    #5A5550;

  /* ── Radius / shadows ── */
  --cl-radius:     16px;
  --cl-radius-lg:  16px;
  --cl-radius-sm:  8px;
  --cl-radius-xs:  6px;
  --cl-shadow:     0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
  --cl-shadow-md:  0 4px 12px rgba(0,0,0,0.06);
  --cl-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Classes utilitaires pastels (alias sans "stat-") ── */
.ss-bg-teal   { background: var(--cl-teal-bg);   color: var(--cl-teal-fg); }
.ss-bg-green  { background: var(--cl-green-bg);  color: var(--cl-green-fg); }
.ss-bg-orange { background: var(--cl-orange-bg); color: var(--cl-orange-fg); }
.ss-bg-red    { background: var(--cl-red-bg);    color: var(--cl-red-fg); }
.ss-bg-purple { background: var(--cl-purple-bg); color: var(--cl-purple-fg); }
.ss-bg-neutral{ background: var(--cl-neutral-bg);color: var(--cl-neutral-fg); }

/* Badges pastel (arrondis, petit texte, usage status) */
.ss-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 12px;
  line-height: 1.5;
}
.ss-badge-acquis,
.ss-badge-valide,
.ss-badge-actif,
.ss-badge-success       { background: var(--cl-teal-bg);   color: var(--cl-teal-fg); }
.ss-badge-en_cours,
.ss-badge-pending,
.ss-badge-warning       { background: var(--cl-orange-bg); color: var(--cl-orange-fg); }
.ss-badge-non_acquis,
.ss-badge-refuse,
.ss-badge-danger        { background: var(--cl-red-bg);    color: var(--cl-red-fg); }
.ss-badge-non_evalue,
.ss-badge-brouillon,
.ss-badge-neutral       { background: var(--cl-neutral-bg);color: var(--cl-neutral-fg); }
.ss-badge-info,
.ss-badge-prevu         { background: var(--cl-green-bg);  color: var(--cl-green-fg); }
.ss-badge-type,
.ss-badge-purple        { background: var(--cl-purple-bg); color: var(--cl-purple-fg); }

/* Badges "strong" (fond plus vif) — pour statuts forts */
.ss-badge-strong-success { background: var(--cl-badge-success-bg); color: var(--cl-badge-success-fg); }
.ss-badge-strong-danger  { background: var(--cl-badge-danger-bg);  color: var(--cl-badge-danger-fg); }
.ss-badge-strong-warning { background: var(--cl-badge-warning-bg); color: var(--cl-badge-warning-fg); }
.ss-badge-strong-neutral { background: var(--cl-badge-neutral-bg); color: var(--cl-badge-neutral-fg); }
.ss-badge-strong-info    { background: var(--cl-badge-info-bg);    color: var(--cl-badge-info-fg); }

/* ═══════════════════════════════════════════════════════════
   Form controls — checkbox / radio / range : couleur d'accent
   standardisée sur --cl-accent (noir SpocSpace).
   Supprime le bleu Bootstrap par défaut, partout.
   ═══════════════════════════════════════════════════════════ */

/* Native inputs (hors Bootstrap) */
input[type="checkbox"],
input[type="radio"],
input[type="range"] {
  accent-color: var(--cl-accent, #191918);
}

/* Bootstrap form-check — override du bleu --bs-primary */
.form-check-input:checked {
  background-color: var(--cl-accent, #191918) !important;
  border-color: var(--cl-accent, #191918) !important;
}
.form-check-input:focus {
  border-color: var(--cl-border-hover, #D4D0CA) !important;
  box-shadow: 0 0 0 .2rem var(--cl-accent-bg, rgba(25,25,24,0.15)) !important;
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--cl-accent, #191918) !important;
  border-color: var(--cl-accent, #191918) !important;
}

/* Switch (form-switch) */
.form-switch .form-check-input:checked {
  background-color: var(--cl-accent, #191918) !important;
  border-color: var(--cl-accent, #191918) !important;
}

/* Form controls focus — retire le halo bleu Bootstrap */
.form-control:focus, .form-select:focus {
  border-color: var(--cl-border-hover, #D4D0CA);
  box-shadow: 0 0 0 .15rem var(--cl-accent-bg, rgba(25,25,24,0.08));
}

/* ═══════════════════════════════════════════════════════════
   Bootstrap nav-tabs — style standard SpocSpace
   Soulignement qui se déplace + accent noir (pas bleu)
   Synchronisé avec admin.css pour cohérence admin/SPA.
   ═══════════════════════════════════════════════════════════ */
.nav-tabs {
  border-bottom: 1px solid var(--cl-border, #E8E5E0);
}
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--cl-text-secondary, #6B6B6B);
  font-weight: 500;
  padding: .55rem 1rem;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
  border-radius: var(--cl-radius-sm, 8px) var(--cl-radius-sm, 8px) 0 0;
  background: transparent;
}
.nav-tabs .nav-link:hover {
  color: var(--cl-text, #1A1A1A);
  border-bottom-color: var(--cl-border-hover, #D4D0CA);
  background: var(--cl-sidebar-hover, #F0EDE8);
  isolation: isolate;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--cl-accent, #191918);
  border-bottom-color: var(--cl-accent, #191918);
  background: var(--cl-sidebar-active, #EDE8E0);
  font-weight: 600;
}

/* nav-pills (chips) cohérent avec la palette */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--cl-accent, #191918);
  color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   Stat cards — pattern standard (palette pastels)
   Utilisées dans tous les dashboards / pages de détail
   ═══════════════════════════════════════════════════════════ */
.stat-card {
  background: var(--cl-surface, #fff);
  border: 1px solid var(--cl-border, #E8E5E0);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: box-shadow .15s, transform .15s;
  height: 100%;
}
.stat-card:hover { box-shadow: var(--cl-shadow-md); transform: translateY(-1px); }
.stat-icon {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; flex-shrink: 0;
}
.stat-icon.bg-teal   { background: var(--cl-teal-bg);   color: var(--cl-teal-fg); }
.stat-icon.bg-green  { background: var(--cl-green-bg);  color: var(--cl-green-fg); }
.stat-icon.bg-orange { background: var(--cl-orange-bg); color: var(--cl-orange-fg); }
.stat-icon.bg-red    { background: var(--cl-red-bg);    color: var(--cl-red-fg); }
.stat-icon.bg-purple { background: var(--cl-purple-bg); color: var(--cl-purple-fg); }
.stat-icon.bg-neutral{ background: var(--cl-neutral-bg);color: var(--cl-neutral-fg); }
.stat-value {
  font-size: 1.4rem; font-weight: 700; line-height: 1.1;
  color: var(--cl-text, #1A1A1A);
  min-width: 0;
}
.stat-label {
  font-size: .74rem;
  color: var(--cl-text-muted, #9B9B9B);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.stat-sub {
  font-size: .72rem; font-weight: 500;
  color: var(--cl-text-muted, #9B9B9B);
}