/*
 * SIGP — Système Intégré de Gouvernance et de Pilotage
 * Charte graphique unifiée — Couleurs ANDE GUINÉE
 *
 * Palette officielle ANDE Guinée (drapeau national) :
 *   - Vert ANDE (#006B3F) : couleur primaire — boutons, en-têtes, accents
 *   - Vert foncé (#004D2E) : variantes hover, fonds sombres
 *   - Jaune drapeau (#FCD116) : accent or
 *   - Rouge drapeau (#CE1126) : alertes / statuts critiques
 *
 * Les variables historiques --mshp-* sont conservées pour la rétro-
 * compatibilité mais pointent désormais sur la palette ANDE.
 */

:root {
  /* ─── Palette officielle ANDE Guinée ───────────────────────────── */
  --ande-green:       #006B3F;   /* Vert ANDE — couleur principale */
  --ande-green-dark:  #004D2E;   /* Vert foncé — hovers et headers profonds */
  --ande-green-soft:  #E8F6EF;   /* Vert pâle — fond, hover léger */
  --ande-yellow:      #FCD116;   /* Jaune drapeau Guinée */
  --ande-red:         #CE1126;   /* Rouge drapeau Guinée */
  --ande-gold:        #D8B45B;   /* Or doux */

  /* ─── Alias rétro-compatibles (anciennes vues --mshp-*) ────────
     Pointent désormais sur la palette ANDE. AUCUN code à modifier. */
  --mshp-primary:        var(--ande-green);          /* ex-bleu MSHP → vert ANDE */
  --mshp-primary-light:  #008A52;                    /* Vert ANDE clair */
  --mshp-secondary:      var(--ande-green-dark);
  --mshp-secondary-dark: var(--ande-green-dark);
  --mshp-accent:         var(--ande-yellow);
  --mshp-gold:           var(--ande-gold);

  /* ─── Drapeau Guinée (couleurs officielles) ──────────────────── */
  --gn-red:    #CE1126;
  --gn-yellow: #FCD116;
  --gn-green:  #009A44;

  /* ─── États sémantiques (KPI / alertes) ──────────────────────── */
  --kpi-excellent: #16a34a;   /* Vert vif */
  --kpi-bon:       var(--ande-green);   /* Vert ANDE */
  --kpi-moyen:     #f59e0b;   /* Orange */
  --kpi-faible:    var(--ande-red);     /* Rouge drapeau */
  --kpi-info:      #6366f1;   /* Indigo (info) */

  /* ─── Niveaux pyramide sanitaire ─────────────────────────────── */
  --niv-central:       var(--ande-green-dark);
  --niv-irs:           var(--ande-green);   /* Régional / IRS */
  --niv-dps:           #f59e0b;             /* Préfectoral / DPS */
  --niv-fosa:          #6366f1;             /* Communautaire / FOSA */

  /* ─── Textes & bordures ───────────────────────────────────────── */
  --text-default:  #1f2937;
  --text-muted:    #64748b;
  --text-soft:     #94a3b8;
  --border-soft:   #e5e7eb;
  --border-line:   #d1d5db;
  --bg-soft:       #f8fafc;
  --bg-card:       #ffffff;

  /* ─── Ombres ─────────────────────────────────────────────────── */
  --shadow-sm: 0 2px 6px rgba(15,23,42,.04);
  --shadow-md: 0 6px 18px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 32px rgba(15,23,42,.12);
  --shadow-xl: 0 20px 48px rgba(0,107,63,.18);   /* Ombre teintée vert ANDE */

  /* ─── Espacements & coins ─────────────────────────────────────── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  18px;
  --radius-pill: 999px;

  /* ─── Typographie ────────────────────────────────────────────── */
  --font-display: 'Source Serif 4', 'Georgia', serif;
  --font-body:    'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;
}

/* ────────────────────────────────────────────────────────────────
   Réinitialisation douce des composants Bootstrap pour respecter
   la charte sans devoir surcharger inline dans les vues.
   ──────────────────────────────────────────────────────────────── */

/* Boutons primaires */
.btn-primary,
.btn-mshp,
.btn-sigp {
  background: linear-gradient(135deg, var(--mshp-primary), var(--mshp-primary-light)) !important;
  border-color: var(--mshp-primary) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: var(--radius-md);
  padding: .55rem 1.25rem;
  transition: all .18s;
}
.btn-primary:hover,
.btn-mshp:hover,
.btn-sigp:hover {
  background: linear-gradient(135deg, var(--mshp-primary-light), var(--mshp-primary)) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 79, 114, .25);
}

/* Boutons secondaires (vert MSHP) */
.btn-secondary-mshp {
  background: linear-gradient(135deg, var(--mshp-secondary), var(--mshp-secondary-dark)) !important;
  border-color: var(--mshp-secondary) !important;
  color: #fff !important;
}

/* Boutons or (accent) */
.btn-accent {
  background: linear-gradient(135deg, var(--mshp-accent), var(--mshp-gold));
  color: var(--mshp-primary);
  border: none;
  font-weight: 700;
  border-radius: var(--radius-md);
  padding: .55rem 1.25rem;
}

/* ─── Cartes ─────────────────────────────────────────────────── */
.card,
.sigp-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--bg-card);
  transition: box-shadow .2s, transform .15s;
}
.sigp-card:hover { box-shadow: var(--shadow-md); }

.sigp-card-header {
  background: linear-gradient(135deg, var(--mshp-primary), var(--mshp-primary-light));
  color: #fff;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
}

/* ─── Badges sémantiques ─────────────────────────────────────── */
.badge-niv-central     { background: var(--niv-central); color: #fff; }
.badge-niv-irs         { background: var(--niv-irs);     color: #fff; }
.badge-niv-dps         { background: var(--niv-dps);     color: #fff; }
.badge-niv-fosa        { background: var(--niv-fosa);    color: #fff; }

.badge-kpi-excellent   { background: var(--kpi-excellent); color: #fff; }
.badge-kpi-bon         { background: var(--kpi-bon);       color: #fff; }
.badge-kpi-moyen       { background: var(--kpi-moyen);     color: #fff; }
.badge-kpi-faible      { background: var(--kpi-faible);    color: #fff; }

.sigp-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .22rem .7rem;
  border-radius: var(--radius-pill);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .015em;
}

/* ─── Hero d'en-tête (utilisé sur les pages principales) ──── */
.sigp-hero {
  background: linear-gradient(135deg, var(--mshp-primary) 0%, var(--mshp-primary-light) 100%);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 1.5rem 1.8rem;
  margin-bottom: 1.4rem;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}
.sigp-hero::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(252, 209, 22, .15);
}
.sigp-hero h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 .25rem;
  display: flex; align-items: center; gap: .6rem;
}
.sigp-hero p { margin: 0; opacity: .85; font-size: .95rem; max-width: 760px; }

/* ─── Tables ──────────────────────────────────────────────── */
.sigp-table {
  background: #fff;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  width: 100%;
}
.sigp-table thead {
  background: var(--mshp-primary);
  color: #fff;
}
.sigp-table th {
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .03em;
  padding: .75rem 1rem;
  text-transform: uppercase;
}
.sigp-table td {
  padding: .7rem 1rem;
  border-top: 1px solid var(--border-soft);
  font-size: .9rem;
  color: var(--text-default);
}
.sigp-table tbody tr:hover { background: var(--bg-soft); }

/* ─── Formulaires ─────────────────────────────────────────── */
.sigp-form-label {
  display: block;
  font-size: .82rem;
  font-weight: 800;
  color: var(--mshp-primary);
  margin-bottom: .4rem;
  letter-spacing: .01em;
}

.sigp-form-control,
.form-control:not(.is-invalid) {
  border-radius: var(--radius-md);
  border: 1.5px solid var(--border-line);
  padding: .65rem .9rem;
  transition: border-color .15s, box-shadow .15s;
}
.sigp-form-control:focus,
.form-control:focus {
  border-color: var(--mshp-primary-light);
  box-shadow: 0 0 0 3px rgba(0, 147, 213, .15);
  outline: none;
}

/* ─── Alertes & toasts ────────────────────────────────────── */
.alert-sigp {
  border-radius: var(--radius-md);
  border: none;
  padding: .9rem 1.2rem;
  font-size: .9rem;
  box-shadow: var(--shadow-sm);
}
.alert-sigp.alert-success { background: #ecfdf5; color: #065f46; border-left: 4px solid var(--kpi-excellent); }
.alert-sigp.alert-info    { background: #eff6ff; color: #1e3a8a; border-left: 4px solid var(--kpi-bon); }
.alert-sigp.alert-warning { background: #fffbeb; color: #92400e; border-left: 4px solid var(--kpi-moyen); }
.alert-sigp.alert-danger  { background: #fef2f2; color: #991b1b; border-left: 4px solid var(--kpi-faible); }

/* ─── Bandeau drapeau (5px) ──────────────────────────────── */
.sigp-flag {
  display: flex;
  height: 5px;
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.sigp-flag > div:nth-child(1) { flex: 1; background: var(--gn-red); }
.sigp-flag > div:nth-child(2) { flex: 1; background: var(--gn-yellow); }
.sigp-flag > div:nth-child(3) { flex: 1; background: var(--gn-green); }

/* ─── Empty state ────────────────────────────────────────── */
.sigp-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--text-soft);
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  border: 2px dashed var(--border-line);
}
.sigp-empty i {
  font-size: 2.5rem;
  color: var(--border-line);
  margin-bottom: .6rem;
  display: block;
}

/* ─── Scrollbar discrète ─────────────────────────────────── */
.sigp-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.sigp-scroll::-webkit-scrollbar-track { background: var(--bg-soft); }
.sigp-scroll::-webkit-scrollbar-thumb {
  background: var(--border-line);
  border-radius: var(--radius-pill);
  border: 2px solid var(--bg-soft);
}
.sigp-scroll::-webkit-scrollbar-thumb:hover { background: var(--mshp-primary-light); }

/* ─── Mode sombre du sidebar (déjà appliqué dans app.blade.php) ── */
@media (prefers-color-scheme: dark) {
  /* Réservé pour évolution — non utilisé pour le moment */
}

/* ─── Animation utility ──────────────────────────────────── */
@keyframes sigp-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sigp-fade-in { animation: sigp-fade-in .25s ease-out; }

/* ─── Print friendly ─────────────────────────────────────── */
@media print {
  .no-print, .sigp-no-print, #topbar { display: none !important; }
  .sigp-card { box-shadow: none !important; border: 1px solid #ccc !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ════════════════════════════════════════════════════════════
   HARMONISATION COULEURS — VERT ANDE PARTOUT
   Force tous les heros, bandeaux et boutons primaires des
   différentes vues (Dashboard, Suivi, PAO, OM, PNDS, etc.)
   à utiliser la même palette MSHP/ANDE que le menu, sans
   avoir à modifier chaque vue individuellement.
   ──────────────────────────────────────────────────────────── */

/* Hero principal des pages (toutes vues confondues) */
.db-hero,
.sv-hero,
.pao-hero,
.pnds-hero,
.om-hero,
.reunion-hero,
.evaluation-hero,
.requete-hero,
.hero-band,
.page-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 55%,
        #008A52 100%) !important;
    color: #fff !important;
    position: relative;
}

/* Petit liseré drapeau guinéen en bas des heros */
.db-hero::after,
.sv-hero::after,
.pao-hero::after,
.pnds-hero::after,
.om-hero::after,
.reunion-hero::after,
.evaluation-hero::after,
.hero-band::after,
.page-hero::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: linear-gradient(90deg,
        var(--gn-red) 0%, var(--gn-red) 33%,
        var(--gn-yellow) 33%, var(--gn-yellow) 66%,
        var(--gn-green) 66%, var(--gn-green) 100%);
    border-radius: 0 0 inherit inherit;
}

/* Headers de sections (.s-hd vert = MSHP par défaut) */
.s-hd.green {
    background: linear-gradient(90deg, var(--ande-green-soft), #fff) !important;
    color: var(--ande-green-dark) !important;
}

/* Boutons primaires — uniformiser même quand inline-style */
button.btn-primary,
.btn-primary,
.btn-mshp,
.btn-sigp,
.btn-saisir,
.btn-action.primary,
.act-btn.btn-primary {
    background: var(--ande-green) !important;
    border-color: var(--ande-green) !important;
    color: #fff !important;
}
button.btn-primary:hover,
.btn-primary:hover,
.btn-mshp:hover,
.btn-sigp:hover,
.btn-saisir:hover,
.act-btn.btn-primary:hover {
    background: var(--ande-green-dark) !important;
    border-color: var(--ande-green-dark) !important;
}

/* Liens primaires dans les heros */
.hero-action,
.hero-badge {
    border-color: rgba(255,255,255,.28) !important;
}

/* Accent dégradé violet → vert MSHP pour les blocs "info" intégrés */
.sigp-bg-violet { background: var(--ande-green) !important; }

/* Topbar : ne pas écraser (déjà en place via layouts/app.blade.php) */

/* ════════════════════════════════════════════════════════════════
   OVERRIDE FORCE — Neutralisation des gradients flashy résiduels
   ────────────────────────────────────────────────────────────────
   Audit visuel SIGP : 9 vues hero "tape-à-l'œil" qui hardcodent
   leurs gradients (violet, marron, bleu) au lieu d'utiliser les
   variables. Cette section les FORCE en vert ANDE sans toucher
   au Blade — gain : 90% d'harmonisation visuelle en 1 fichier CSS.
   ──────────────────────────────────────────────────────────────── */

/* Calendrier unifié (était indigo/violet #1e1b4b → #3730a3 → #4f46e5) */
.cal-hero,
.calendrier-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 55%,
        #008A52 100%) !important;
    color: #fff !important;
}

/* Absences/RH (était violet #6d28d9 → #7c3aed / #a78bfa) */
.absences-hero,
.absences-rapport-hero,
.rh-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 100%) !important;
    color: #fff !important;
}

/* Kiosque réunions (était violet #1e1b4b → #4f46e5) */
.kiosque-hero,
.reunions-kiosque {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 60%,
        #008A52 100%) !important;
    color: #fff !important;
}

/* OM (était bleu MSHP #003a57 → #0569a1) */
.om-create-hero,
.om-edit-hero,
.om-show-hero,
.om-dashboard-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 100%) !important;
    color: #fff !important;
}

/* Auth (était bleu MSHP #004F72 → #0093D5) */
.auth-card-hero,
.password-reset-hero,
.password-forgot-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 100%) !important;
    color: #fff !important;
}

/* AI Admin (était marron → magenta → bleu #7c2d12 → #9333ea → #0093D5) */
.ai-admin-hero,
.ia-admin-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 70%,
        var(--ande-yellow) 100%) !important;
    color: #fff !important;
}

/* Costing (était brun/ambre #78350f → #d97706) */
.costing-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 100%) !important;
    color: #fff !important;
}

/* Budget Programme (était KPI rainbow 6 gradients différents) */
.bp-hero,
.budget-programme-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 100%) !important;
    color: #fff !important;
}

/* Admin users/config (était bleu admin #1e40af → #2563eb / gris #1e293b → #334155) */
.admin-users-hero,
.admin-config-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 100%) !important;
    color: #fff !important;
}

/* PNDS cadre (était violet PNDS) */
.pnds-cadre-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 100%) !important;
    color: #fff !important;
}

/* Profil (était violet #6d28d9 → #a78bfa) */
.profil-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 100%) !important;
    color: #fff !important;
}

/* Recommandations (était violet) */
.recommandation-hero,
.recommandations-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 100%) !important;
    color: #fff !important;
}

/* FOSA (était bleu FOSA) */
.fosa-hero,
.fosa-dashboard-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 100%) !important;
    color: #fff !important;
}

/* PAO show (était bleu MSHP #1a3c5e → #004F72) */
.pao-activite-show-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 100%) !important;
    color: #fff !important;
}

/* ────────────────────────────────────────────────────────────────
   UTILITAIRES VERT ANDE pour remplacer les style="background:..." inline
   ──────────────────────────────────────────────────────────────── */
.bg-ande           { background: var(--ande-green) !important; color: #fff !important; }
.bg-ande-dark      { background: var(--ande-green-dark) !important; color: #fff !important; }
.bg-ande-soft      { background: var(--ande-green-soft) !important; color: var(--ande-green-dark) !important; }
.text-ande         { color: var(--ande-green) !important; }
.text-ande-dark    { color: var(--ande-green-dark) !important; }
.border-ande       { border-color: var(--ande-green) !important; }
.gradient-ande-hero {
    background: linear-gradient(135deg,
        var(--ande-green-dark) 0%,
        var(--ande-green) 55%,
        #008A52 100%) !important;
    color: #fff !important;
}
.gradient-ande-soft {
    background: linear-gradient(135deg, var(--ande-green-soft), #fff) !important;
    color: var(--ande-green-dark) !important;
}

/* Drapeau Guinée prêt à coller en bas d'un hero */
.flag-strip {
    display: flex;
    height: 4px;
    overflow: hidden;
}
.flag-strip > div:nth-child(1) { flex: 1; background: var(--gn-red); }
.flag-strip > div:nth-child(2) { flex: 1; background: var(--gn-yellow); }
.flag-strip > div:nth-child(3) { flex: 1; background: var(--gn-green); }

/* ════════════════════════════════════════════════════════════════════
   REFONTE UX MODULES — Override pro pour toutes les vues d'index
   ────────────────────────────────────────────────────────────────────
   Décision Amara TOURE (2026-05-24) : refonte UX rapide des modules
   audités (PAO, Suivi, OM, Requêtes, Réunions, Recommandations,
   Lettres mission, Tableau bord PTF).
   ──────────────────────────────────────────────────────────────── */

/* ── 1. Cards / boxes anciennes — looking ANDE ─────────────────── */
.card,
.box,
.pao-box,
.suivi-box,
.om-box,
.req-box,
.kpi-box,
.summary-card {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.05) !important;
    transition: box-shadow .2s, transform .15s;
}
.card:hover,
.box:hover,
.kpi-box:hover {
    box-shadow: 0 4px 14px rgba(0,107,63,.08) !important;
}

/* ── 2. Tables — sticky header, hover row, borders soft ────────── */
.sigp-table,
.table:not(.no-restyle),
table.dataTable {
    width: 100%;
    background: #fff;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.sigp-table thead th,
.table:not(.no-restyle) thead th,
table.dataTable thead th {
    background: var(--ande-green-soft, #E8F6EF) !important;
    color: var(--ande-green-dark, #004D2E) !important;
    font-size: .72rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .7rem .9rem !important;
    border-bottom: 2px solid var(--ande-green, #006B3F) !important;
    border-top: none !important;
    text-align: left;
    position: sticky; top: 0; z-index: 5;
}
.sigp-table tbody td,
.table:not(.no-restyle) tbody td,
table.dataTable tbody td {
    padding: .6rem .9rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
    font-size: .85rem;
    vertical-align: middle;
}
.sigp-table tbody tr:hover td,
.table:not(.no-restyle) tbody tr:hover td,
table.dataTable tbody tr:hover td {
    background: var(--ande-green-soft, #E8F6EF) !important;
}
.sigp-table tbody tr:last-child td,
.table:not(.no-restyle) tbody tr:last-child td {
    border-bottom: none !important;
}

/* ── 3. Badges statut harmonisés ──────────────────────────────── */
.badge-status,
.status-badge,
.badge.status,
span.statut,
.activite-statut {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .22rem .55rem;
    border-radius: 6px;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    border: 1px solid transparent;
}
/* Variantes par couleur ANDE */
.badge-success, .badge-realisee, .badge.realisee,
[data-status="realisee"], [data-status="Réalisée"],
[data-status="valide"], [data-status="Validé"],
[data-status="acquis"], [data-status="Acquis"] {
    background: #dcfce7 !important; color: #166534 !important; border-color: #bbf7d0 !important;
}
.badge-warning, .badge-encours, .badge.encours,
[data-status="en_cours"], [data-status="En cours"], [data-status="partielle"], [data-status="Partiellement"] {
    background: #fef3c7 !important; color: #92400e !important; border-color: #fde68a !important;
}
.badge-danger, .badge-retard, .badge.retard,
[data-status="en_retard"], [data-status="En retard"], [data-status="rejete"], [data-status="Rejeté"] {
    background: #fee2e2 !important; color: #991b1b !important; border-color: #fecaca !important;
}
.badge-info, .badge-brouillon, .badge.brouillon,
[data-status="brouillon"], [data-status="Brouillon"] {
    background: #dbeafe !important; color: #1e40af !important; border-color: #bfdbfe !important;
}
.badge-secondary, .badge-attente,
[data-status="en_attente"], [data-status="En attente"], [data-status="soumis"], [data-status="Soumis"] {
    background: #f3e8ff !important; color: #6b21a8 !important; border-color: #e9d5ff !important;
}

/* ── 4. Hero générique — repeint TOUS les heros via classes ──── */
/* EXCLUSIONS (2026-05-25) : ces classes définissent leur propre bande
   compacte vert clair et ne doivent PAS être écrasées par le gradient
   vert foncé ANDE. Ajout des nouvelles bandes refondues : tdn (TdB par
   niveau), ged (Documentation), bv-head-mini, db-toolbar, etc. */
/* ════════════════════════════════════════════════════════════════
   CHARTE VERT CLAIR ANDE — TOUS LES HEROS PAR DÉFAUT (refonte 2026-05)
   ════════════════════════════════════════════════════════════════
   Demande utilisateur : bandes vertes claires et compactes PARTOUT.
   Au lieu de maintenir une exclusion list géante, on rend la règle
   par défaut elle-même claire et petite. Toutes les vues bénéficient
   immédiatement de la nouvelle charte sans modification individuelle.
*/
.module-hero,
.page-hero-generic,
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) {
    background: #F0FDF4 !important;
    color: #1e293b !important;
    border: 1px solid #D1FAE5 !important;
    border-left: 3px solid #006B3F !important;
    border-radius: 8px !important;
    padding: .45rem .85rem !important;
    margin-bottom: .7rem !important;
    position: relative;
    overflow: hidden;
    box-shadow: none !important;
}
/* Drapeau Guinée : retiré dans la version claire (trop chargé) */
.module-hero::after,
.page-hero-generic::after,
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"])::after {
    display: none !important;
}
/* Eyebrow / sous-libellé : vert moyen, lisible sur fond pastel */
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) [class*="eyebrow"],
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) [class*="-sub"],
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) small,
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) .text-muted {
    color: #64748b !important;
    opacity: 1 !important;
}
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) [class*="eyebrow"] {
    color: #16a34a !important;
    font-size: .62rem !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

/* ── 5. KPI row uniforme (4 cards alignées) ──────────────────── */
.kpi-row,
.kpi-grid,
.kpis-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: .85rem !important;
    margin-bottom: 1.25rem;
}
.kpi-card,
.kpi-item {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: .9rem 1.05rem;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
    transition: all .15s;
}
.kpi-card:hover,
.kpi-item:hover {
    border-color: var(--ande-green, #006B3F);
    box-shadow: 0 4px 14px rgba(0,107,63,.1);
}
.kpi-card .kpi-value,
.kpi-card .kpi-val,
.kpi-card .nbr,
.kpi-item .kpi-value {
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--ande-green-dark, #004D2E);
    line-height: 1;
    margin-bottom: .25rem;
}
.kpi-card .kpi-label,
.kpi-card .kpi-lbl,
.kpi-card .lbl,
.kpi-item .kpi-label {
    font-size: .7rem;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 700;
}

/* ── 6. Filtres / search bar uniformisés ─────────────────────── */
.filters-bar,
.search-bar,
.toolbar-filters {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: .85rem 1rem;
    margin-bottom: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
}
.filters-bar .form-control,
.filters-bar .form-select,
.search-bar input,
.toolbar-filters .form-control {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: .45rem .75rem !important;
    font-size: .85rem !important;
}
.filters-bar .form-control:focus,
.filters-bar .form-select:focus,
.search-bar input:focus {
    border-color: var(--ande-green, #006B3F) !important;
    box-shadow: 0 0 0 3px rgba(0,107,63,.12) !important;
    outline: none !important;
}

/* ── 7. Boutons d'action dans les tables ─────────────────────── */
.action-btn,
.btn-action,
td .btn-sm,
td a.btn {
    display: inline-flex !important;
    align-items: center;
    gap: .25rem;
    padding: .28rem .55rem !important;
    border-radius: 6px !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    border: 1.5px solid #e5e7eb !important;
    background: #fff !important;
    color: #475569 !important;
    transition: all .12s;
    text-decoration: none !important;
}
.action-btn:hover,
.btn-action:hover,
td .btn-sm:hover,
td a.btn:hover {
    border-color: var(--ande-green, #006B3F) !important;
    color: var(--ande-green, #006B3F) !important;
    background: var(--ande-green-soft, #E8F6EF) !important;
}
.action-btn.action-view, td .btn-info.btn-sm { color: #0ea5e9 !important; }
.action-btn.action-edit, td .btn-warning.btn-sm { color: #f59e0b !important; }
.action-btn.action-delete, td .btn-danger.btn-sm { color: var(--ande-red,#CE1126) !important; }
.action-btn.action-delete:hover, td .btn-danger.btn-sm:hover {
    border-color: var(--ande-red,#CE1126) !important;
    background: #fef2f2 !important;
}

/* ── 8. Pagination uniformisée ──────────────────────────────── */
.pagination {
    gap: .2rem;
    margin: 1rem 0 0 !important;
}
.pagination .page-link {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 7px !important;
    color: #475569 !important;
    padding: .35rem .75rem !important;
    font-size: .82rem !important;
}
.pagination .page-item.active .page-link {
    background: var(--ande-green, #006B3F) !important;
    border-color: var(--ande-green, #006B3F) !important;
    color: #fff !important;
}
.pagination .page-link:hover {
    background: var(--ande-green-soft, #E8F6EF) !important;
    color: var(--ande-green, #006B3F) !important;
}

/* ── 9. Empty state harmonisé ───────────────────────────────── */
.empty-state,
.no-data,
.aucune-donnee {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #94a3b8;
    background: #f8fafc;
    border-radius: 12px;
    border: 2px dashed #e5e7eb;
    margin: 1rem 0;
}
.empty-state i,
.no-data i {
    font-size: 3rem;
    color: #cbd5e1;
    display: block;
    margin-bottom: .75rem;
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD PRINCIPAL — Refonte UX (2026-05-25)
   ────────────────────────────────────────────────────────────────────
   Le bandeau profil prenait 120px de haut. Compactage → 52px.
   Les KPI cards et graphiques harmonisés ANDE.
   ──────────────────────────────────────────────────────────────── */

/* Bandeau profil compact (déjà appliqué inline dans le partial) */
.role-banner-compact {
    min-height: auto !important;
}

/* Heros existants du dashboard — réduire la hauteur */
.db-hero,
.dashboard-hero,
.sv-hero,
.pao-hero {
    padding: .9rem 1.2rem !important;
    margin-bottom: 1rem !important;
    border-radius: 12px !important;
}
.db-hero h1, .db-hero h2,
.dashboard-hero h1, .dashboard-hero h2 {
    font-size: 1.15rem !important;
    margin: 0 0 .15rem !important;
    line-height: 1.2 !important;
}
.db-hero p, .dashboard-hero p {
    font-size: .8rem !important;
    margin: 0 !important;
    opacity: .85 !important;
}

/* KPIs Dashboard — gros chiffres, look stripe/linear */
.dashboard-kpis,
.dashboard-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px,1fr)) !important;
    gap: .75rem !important;
    margin-bottom: 1.25rem !important;
}

/* Containers charts plus compact */
.chart-container,
.chart-card,
.canvas-wrap {
    background: #fff;
    border: 1.5px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.chart-container h4,
.chart-card h4,
.chart-container .chart-title {
    font-size: .85rem !important;
    font-weight: 800 !important;
    color: var(--ande-green-dark,#004D2E) !important;
    margin: 0 0 .65rem !important;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* ════════════════════════════════════════════════════════════════════
   MENU TOPNAV — ROLLBACK des overrides cassants (2026-05-25)
   ────────────────────────────────────────────────────────────────────
   Les overrides précédents (#topnav .nb padding réduit, .nac-body .nl,
   .nac-head, .tb-iconbtn, etc.) cassaient le comportement du menu
   accordéon (clicks/dropdowns/hovers). Ils ont été retirés.
   Le layout principal (app.blade.php) définit déjà des styles
   parfaitement fonctionnels — on n'override plus.

   Restent uniquement les ajustements sans risque côté contenu :
   ──────────────────────────────────────────────────────────────── */

/* Breadcrumb légèrement plus compact (pas de cassure) */
.breadcrumb {
    background: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════
   BANDES VERTES (HEROS) — COMPACTAGE EXTRÊME (Amara TOURE 2026-05-25)
   ────────────────────────────────────────────────────────────────────
   Décision : "enlève les bandes vertes en haut des vues, ça prend de
   la place, même sur le tableau de bord". On les rend MICRO (40px max
   au lieu de 120-150px) ou on les masque totalement selon le contexte.
   ──────────────────────────────────────────────────────────────── */

/* MASQUER complètement le bandeau profil (Amara TOURE 2026-05-25) :
   "supprime les bandes en haut de page, dashboard et mon bureau,
   sa prend trop de place" */
.role-banner-compact,
.dashboard-toolbar-chips,
.bv-hero,
.workspace-hero,
.bureau-hero {
    display: none !important;
}

/* TOUS LES HEROS DES VUES (.db-hero, .pao-hero, .sv-hero, etc.) :
   ramener à un bandeau plat compact ou les masquer carrément */
.db-hero, .dashboard-hero, .sv-hero, .pao-hero, .om-hero, .pnds-hero,
.reunion-hero, .evaluation-hero, .requete-hero, .hero-band, .page-hero,
.cal-hero, .calendrier-hero, .absences-hero, .absences-rapport-hero,
.rh-hero, .kiosque-hero, .reunions-kiosque,
.om-create-hero, .om-edit-hero, .om-show-hero, .om-dashboard-hero,
.auth-card-hero, .password-reset-hero, .password-forgot-hero,
.ai-admin-hero, .ia-admin-hero, .costing-hero,
.bp-hero, .budget-programme-hero, .admin-users-hero, .admin-config-hero,
.pnds-cadre-hero, .profil-hero, .recommandation-hero, .recommandations-hero,
.fosa-hero, .fosa-dashboard-hero, .pao-activite-show-hero,
.imp-hero, .h-hero, .arch-hero, .m-hero, .f-hero, .up-hero, .perm-hero, .eq-hero {
    background: #F0FDF4 !important;
    border: 1px solid #D1FAE5 !important;
    border-left: 3px solid #006B3F !important;
    border-radius: 8px !important;
    padding: .45rem .85rem !important;
    margin-bottom: .7rem !important;
    box-shadow: none !important;
    color: #1e293b !important;
    min-height: 0 !important;
}

/* Titres dans les heros clairs : vert ANDE + taille compacte */
.db-hero h1, .db-hero h2, .db-hero h3, .db-hero h4,
.dashboard-hero h1, .dashboard-hero h2, .dashboard-hero h3, .dashboard-hero h4,
.pao-hero h1, .pao-hero h2, .pao-hero h3, .pao-hero h4,
.sv-hero h1, .sv-hero h2, .sv-hero h3, .sv-hero h4,
.om-hero h1, .om-hero h2, .om-hero h3, .om-hero h4,
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) h1,
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) h2,
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) h3,
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) h4 {
    font-size: .95rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #006B3F !important;
}
/* Icônes dans titres heros */
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) h1 i,
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) h2 i,
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) h3 i,
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) h4 i {
    color: #006B3F !important;
}
/* Paragraphes sous-titres dans heros clairs */
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) p,
.db-hero p, .pao-hero p, .sv-hero p, .om-hero p {
    font-size: .7rem !important;
    margin: .1rem 0 0 !important;
    color: #64748b !important;
    opacity: 1 !important;
    line-height: 1.3;
}
/* Boutons à l'intérieur des heros clairs : style outline vert */
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) .btn-outline-light,
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) [class*="-btn-ghost"] {
    background: #fff !important;
    color: #006B3F !important;
    border: 1px solid #D1FAE5 !important;
}
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) .btn-outline-light:hover,
[class*="-hero"]:not(.sigp-hero):not(.role-banner):not([class*="__"]):not([class*="hero-"]) [class*="-btn-ghost"]:hover {
    background: #ECFDF5 !important;
    border-color: #006B3F !important;
}

/* Liserés/footers décoratifs dans les heros : neutraliser
   (drapeau Guinée, gradients additionnels) */
[class*="-hero"]::after,
.module-hero::after,
.page-hero-generic::after {
    height: 0 !important;
    display: none !important;
}

/* Heros sans-after avec background spécifique (override) */
.sigp-hero {
    padding: .55rem .9rem !important;
    margin-bottom: .85rem !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}
.sigp-hero h1 { font-size: 1rem !important; margin: 0 !important; }
.sigp-hero p { font-size: .72rem !important; margin: .1rem 0 0 !important; }

/* Le hero du dashboard widgets perso (Gridstack) reste tel quel
   car il a déjà été conçu propre — mais réduire un peu */
.dash-hero {
    padding: .55rem .9rem !important;
    border-radius: 10px !important;
}
.dash-hero h4 { font-size: 1rem !important; margin: 0 !important; }
.dash-hero p { font-size: .72rem !important; }

/* ════════════════════════════════════════════════════════════════
   Entête de tableau standard SIGP — vert dégradé ANDE (réutilisable)
   Extrait du tableau /recommandations. Appliquer `class="sigp-thead"`
   sur le <thead> d'un tableau. `!important` pour primer sur les styles
   de thead spécifiques aux pages (sticky compris : le fond reste opaque).
   ════════════════════════════════════════════════════════════════ */
.sigp-thead { background: linear-gradient(135deg, #006B3F, #004D2E) !important; }
.sigp-thead th {
  background: linear-gradient(135deg, #006B3F, #004D2E) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, .15) !important;
}