/* ════════════════════════════════════════════════════════════════════
   SIGP · Charte graphique des tableaux de bord
   Amara TOURÉ — 03/06/2026
   ════════════════════════════════════════════════════════════════════
   OBJECTIFS :
   1. Uniformiser la STRUCTURE et l'ESPACEMENT des cards de dashboards
      sans toucher aux COULEURS (palette vert ANDE conservée).
   2. Donner aux 22+ dashboards SIGP un même langage visuel : même
      rayon, même ombre, même hiérarchie typo, même rythme vertical.
   3. Fournir des composants Blade (<x-sigp-card>, <x-sigp-section>)
      pour que les nouvelles vues utilisent automatiquement la charte.

   CE FICHIER NE DÉFINIT PAS DE COULEURS — il s'appuie sur les tokens
   --ande-* déjà déclarés dans public/css/sigp-theme.css.

   À inclure UNE FOIS dans layouts/app.blade.php après sigp-theme.css.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Espacements (rythme 4px) ────────────────────────────── */
  --sigp-dash-gap-xs:   .35rem;
  --sigp-dash-gap-sm:   .65rem;
  --sigp-dash-gap-md:   1rem;
  --sigp-dash-gap-lg:   1.5rem;
  --sigp-dash-gap-xl:   2.25rem;

  /* ── Rayons ──────────────────────────────────────────────── */
  --sigp-dash-radius-sm: 8px;
  --sigp-dash-radius:    12px;     /* défaut card */
  --sigp-dash-radius-lg: 16px;     /* hero / page header */

  /* ── Ombres ──────────────────────────────────────────────── */
  --sigp-dash-shadow-flat:  0 1px 2px rgba(0,0,0,.04);
  --sigp-dash-shadow:       0 2px 8px rgba(0,0,0,.05);
  --sigp-dash-shadow-hover: 0 8px 22px rgba(0,0,0,.08);

  /* ── Bordures ────────────────────────────────────────────── */
  --sigp-dash-border:    1px solid #e5e7eb;
  --sigp-dash-border-em: 1px solid #cbd5e1;

  /* ── Typo ────────────────────────────────────────────────── */
  --sigp-dash-title-size:    1rem;       /* 16px */
  --sigp-dash-title-weight:  800;
  --sigp-dash-subtitle-size: .78rem;
  --sigp-dash-eyebrow-size:  .68rem;
  --sigp-dash-eyebrow-track: .08em;

  /* ── Hauteurs standardisées (KPI / card / section) ───────── */
  --sigp-dash-kpi-h:    96px;     /* hauteur min KPI */
  --sigp-dash-card-h:   180px;    /* hauteur min card régulière */

  /* ── Couleur de texte structurel ─────────────────────────── */
  --sigp-dash-fg-strong: #0f172a;
  --sigp-dash-fg-muted:  #6b7280;
  --sigp-dash-fg-light:  #94a3b8;
}

/* ════════════════════════════════════════════════════════════
   1. PAGE HEADER de dashboard
   ════════════════════════════════════════════════════════════ */
.sigp-page-hd {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sigp-dash-gap-md);
  flex-wrap: wrap;
  padding: var(--sigp-dash-gap-md) 0 var(--sigp-dash-gap-md);
  margin-bottom: var(--sigp-dash-gap-lg);
  border-bottom: 1px dashed #e5e7eb;
}
.sigp-page-hd-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ande-green-dark, #004D2E);
  margin: 0 0 .15rem;
  display: flex;
  align-items: center;
  gap: .55rem;
}
.sigp-page-hd-title i { color: var(--ande-green, #006B3F); }
.sigp-page-hd-sub {
  font-size: var(--sigp-dash-subtitle-size);
  color: var(--sigp-dash-fg-muted);
  margin: 0;
}
.sigp-page-hd-eyebrow {
  font-size: var(--sigp-dash-eyebrow-size);
  font-weight: 800;
  letter-spacing: var(--sigp-dash-eyebrow-track);
  color: var(--ande-green, #006B3F);
  text-transform: uppercase;
  margin: 0 0 .25rem;
  display: inline-flex; align-items: center; gap: .35rem;
}
.sigp-page-hd-actions {
  display: flex;
  gap: var(--sigp-dash-gap-sm);
  flex-wrap: wrap;
}

/* Badge rôle (Stratégique / Fonctionnel / Analytique) — visible
   en haut à droite du header de dashboard pour cadrer l'attente. */
.sigp-role-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .25rem .6rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-radius: 99px;
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}
.sigp-role-badge.is-strategique { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.sigp-role-badge.is-fonctionnel { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }
.sigp-role-badge.is-analytique  { background: #faf5ff; color: #6b21a8; border-color: #e9d5ff; }

/* ════════════════════════════════════════════════════════════
   2. SECTION de dashboard (group titré)
   ════════════════════════════════════════════════════════════ */
.sigp-section {
  margin-bottom: var(--sigp-dash-gap-xl);
}
.sigp-section-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sigp-dash-gap-sm);
  margin-bottom: var(--sigp-dash-gap-md);
}
.sigp-section-hd-l {
  display: flex; align-items: center; gap: .55rem; min-width: 0;
}
.sigp-section-num {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--ande-green, #006B3F);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sigp-section-title {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--sigp-dash-fg-strong);
  margin: 0;
}
.sigp-section-sub {
  font-size: .72rem;
  color: var(--sigp-dash-fg-muted);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   3. CARD universelle (.sigp-card)
   ────────────────────────────────────────────────────────────
   Remplace progressivement : .kpi-card, .stat-card, .cj-card,
   .info-card, .card-sg, .s-card, .tdb-card, etc.
   ════════════════════════════════════════════════════════════ */
.sigp-card {
  background: #fff;
  border: var(--sigp-dash-border);
  border-radius: var(--sigp-dash-radius);
  box-shadow: var(--sigp-dash-shadow-flat);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.sigp-card.is-clickable { cursor: pointer; }
.sigp-card.is-clickable:hover {
  box-shadow: var(--sigp-dash-shadow-hover);
  border-color: var(--ande-green, #006B3F);
  transform: translateY(-1px);
}

.sigp-card-hd {
  padding: .85rem 1rem;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.sigp-card-hd-l {
  display: flex; align-items: center; gap: .5rem; min-width: 0;
}
.sigp-card-hd-ico {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--ande-green-soft, #E8F6EF);
  color: var(--ande-green, #006B3F);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.sigp-card-hd-title {
  font-size: var(--sigp-dash-title-size);
  font-weight: var(--sigp-dash-title-weight);
  color: var(--sigp-dash-fg-strong);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sigp-card-hd-sub {
  font-size: .68rem;
  color: var(--sigp-dash-fg-muted);
  margin: 0;
  letter-spacing: .02em;
}
.sigp-card-hd-actions {
  display: flex; gap: .25rem; align-items: center;
  flex-shrink: 0;
}

.sigp-card-bd {
  padding: 1rem;
  flex: 1;
  min-height: 1px;
}
.sigp-card-bd.is-tight   { padding: .65rem .85rem; }
.sigp-card-bd.is-relaxed { padding: 1.25rem 1.4rem; }
.sigp-card-bd.is-flush   { padding: 0; }   /* listes/tableaux pleine largeur */

.sigp-card-ft {
  padding: .65rem 1rem;
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
  font-size: .72rem;
  color: var(--sigp-dash-fg-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

/* Tailles (modifie hauteur min + densité du body) */
.sigp-card.is-sm .sigp-card-bd { padding: .6rem .8rem; }
.sigp-card.is-lg { min-height: var(--sigp-dash-card-h); }
.sigp-card.is-lg .sigp-card-bd { padding: 1.4rem 1.5rem; }

/* Variante "ghost" : pas de bordure, ombre douce — utile dans une grille déjà chargée */
.sigp-card.is-ghost {
  border-color: transparent;
  box-shadow: var(--sigp-dash-shadow);
}

/* Bordure colorée gauche (statut / accent) — utilise vars ANDE */
.sigp-card.has-accent { border-left: 4px solid var(--ande-green, #006B3F); }
.sigp-card.has-accent.is-yellow { border-left-color: var(--ande-yellow, #FCD116); }
.sigp-card.has-accent.is-red    { border-left-color: var(--ande-red,    #CE1126); }
.sigp-card.has-accent.is-gray   { border-left-color: #94a3b8; }

/* ════════════════════════════════════════════════════════════
   4. GRILLES standardisées
   ════════════════════════════════════════════════════════════ */
.sigp-grid {
  display: grid;
  gap: var(--sigp-dash-gap-md);
}
/* Auto-fit responsive — la largeur min définit la rupture */
.sigp-grid.cols-220 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sigp-grid.cols-260 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sigp-grid.cols-320 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.sigp-grid.cols-380 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }

/* Grilles fixes (2 / 3 / 4 colonnes desktop, recompose en mobile) */
.sigp-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.sigp-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.sigp-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .sigp-grid.cols-3, .sigp-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .sigp-grid.cols-2, .sigp-grid.cols-3, .sigp-grid.cols-4 { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   5. HELPERS — typographie, vides, séparateurs
   ════════════════════════════════════════════════════════════ */
.sigp-muted     { color: var(--sigp-dash-fg-muted); }
.sigp-strong    { color: var(--sigp-dash-fg-strong); font-weight: 700; }
.sigp-eyebrow   {
  font-size: var(--sigp-dash-eyebrow-size);
  letter-spacing: var(--sigp-dash-eyebrow-track);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sigp-dash-fg-muted);
}
.sigp-divider   { height: 1px; background: #f1f5f9; margin: var(--sigp-dash-gap-md) 0; }

.sigp-empty-state {
  text-align: center;
  padding: 2.25rem 1rem;
  color: var(--sigp-dash-fg-muted);
}
.sigp-empty-state i {
  font-size: 2.2rem;
  display: block;
  margin-bottom: .5rem;
  color: var(--sigp-dash-fg-light);
}
.sigp-empty-state h6 {
  font-weight: 700;
  color: var(--sigp-dash-fg-strong);
  margin-bottom: .25rem;
}
.sigp-empty-state p { margin: 0; font-size: .82rem; }

/* ════════════════════════════════════════════════════════════
   6. CONVENTION ICÔNES — Bootstrap Icons exclusivement
   ────────────────────────────────────────────────────────────
   Règles :
   - Par défaut : OUTLINE (bi-X-circle, bi-graph-up, etc.)
   - FILLED (bi-X-fill) UNIQUEMENT pour :
       a. badges de statut actif ("En cours", "Validé", "Critique")
       b. icône principale du module dans le hero (.sigp-page-hd-title i)
       c. accents jaune/rouge (alerte) au sein d'une card
   - Ne JAMAIS mélanger outline + filled dans une même rangée KPI

   Helper : applique automatiquement la taille standard.
   ════════════════════════════════════════════════════════════ */
.sigp-icon-sm { font-size: .85rem; }
.sigp-icon    { font-size: 1rem; }
.sigp-icon-md { font-size: 1.25rem; }
.sigp-icon-lg { font-size: 1.6rem; }
.sigp-icon-xl { font-size: 2.1rem; }

/* Pastille icône cohérente (utilisée dans card-hd-ico, kpi-ico, etc.) */
.sigp-ico-chip {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ande-green-soft, #E8F6EF);
  color: var(--ande-green, #006B3F);
  flex-shrink: 0;
}
.sigp-ico-chip.is-sm { width: 26px; height: 26px; border-radius: 6px; font-size: .82rem; }
.sigp-ico-chip.is-lg { width: 44px; height: 44px; border-radius: 10px; font-size: 1.25rem; }

/* ════════════════════════════════════════════════════════════
   7. RESPONSIVE — densité réduite en mobile
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .sigp-card-hd       { padding: .65rem .8rem; }
  .sigp-card-bd       { padding: .8rem; }
  .sigp-card-ft       { padding: .55rem .8rem; font-size: .68rem; }
  .sigp-section       { margin-bottom: var(--sigp-dash-gap-lg); }
  .sigp-page-hd-title { font-size: 1.15rem; }
}

/* ════════════════════════════════════════════════════════════
   8. ALIAS de compatibilité (ne pas casser l'existant)
   ────────────────────────────────────────────────────────────
   Mappe les anciennes classes (.kpi-card, .stat-card, .cj-card)
   sur les nouveaux tokens — héritage doux le temps de la migration.
   Ces alias ne FORCENT rien (pas de !important) : si l'ancien
   style est plus précis, il l'emporte.
   ════════════════════════════════════════════════════════════ */
.kpi-card, .stat-card, .s-card, .info-card, .card-sg, .cj-card, .tdb-card {
  border-radius: var(--sigp-dash-radius);
  box-shadow: var(--sigp-dash-shadow-flat);
  background: #fff;
  border: var(--sigp-dash-border);
}