/* ═══════════════════════════════════════════════════════════════════════════
   COCKPIT VERT (Phases H1-H4) — rubrique Dossiers du Check-up, conforme à
   la maquette validée (Artefact 2 — « ALISRAEL — Cockpit, direction Banque
   premium », vert #0E6B4F). Entièrement scopé sous #crm-view-dossiers :
   n'affecte NI la fiche bleue (Phase G1-G5, volontairement conservée telle
   quelle — voir checkup.css, préfixe --fc-*), NI l'Accueil (bleu #2563EB,
   voir dashboard.css), NI aucune autre page du projet.

   Principe de non-duplication (voir rapport de plan) : ce fichier n'habille
   AUCUNE nouvelle donnée — les lignes du "tableau" sont les VRAIES cartes
   .cu-card produites par cuRenderCard() (assets/js/checkup.js), simplement
   affichées sous une forme compacte en mode liste. Le filtrage/la
   recherche restent exactement les mécanismes déjà existants
   (cuApplyFilter) ; ce fichier ne fait que les habiller.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Correctif de largeur (retour utilisateur réel) ──────────────────────
   CAUSE RACINE identifiée : `.container` (assets/css/style.css, règle
   PARTAGÉE par de nombreuses autres pages — procurations.html, index.html,
   etc., jamais à modifier globalement) pose `max-width: var(--max-width)`
   = 1100px + `margin:0 auto`. Ce `<div class="container">` enveloppe tout
   le contenu de la rubrique Dossiers (checkup.html), d'où les grandes
   marges inutilisées sur un écran large.
   Correctif ciblé plutôt qu'une multiplication de surcharges : on neutralise
   cette seule règle, UNIQUEMENT en mode liste (Cockpit vert) et UNIQUEMENT
   dans cette rubrique — jamais globalement sur `.container`. Le mode détail
   (fiche bleue G1-G5) n'est PAS concerné : il garde exactement la largeur
   déjà validée, cette règle ne s'applique qu'à [data-cp-mode="liste"]. */
#crm-view-dossiers[data-cp-mode="liste"] .container {
  max-width: none;
  padding-left: 28px;
  padding-right: 28px;
}
@media (max-width: 700px) {
  #crm-view-dossiers[data-cp-mode="liste"] .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

#crm-view-dossiers {
  --cp-white: #FFFFFF;
  --cp-grey-50: #F6F7F6;
  --cp-grey-100: #EEF0EE;
  --cp-grey-200: #E1E3E0;
  --cp-ink: #14161A;
  --cp-ink-soft: #5B5F5A;
  --cp-ink-faint: #9A9D97;
  --cp-accent: #0E6B4F;
  --cp-accent-dark: #0A5A42;
  --cp-accent-tint: #E7F3EE;
  --cp-amber: #9A6B16;
  --cp-amber-tint: #FBF2E2;
  --cp-rose: #A33B2E;
  --cp-rose-tint: #FBEAE7;
  --cp-blue-tint: #EEF1FB;
  --cp-blue: #3B4C8C;
  --cp-radius: 14px;
  --cp-radius-sm: 9px;
}

/* ── Bouton retour (mode détail uniquement) ─────────────────────────────── */
.cu-cp-back {
  display: none;
  align-items: center; gap: 0.4rem;
  background: none; border: none; color: var(--cp-ink-soft);
  font-size: 0.84rem; font-weight: 700; font-family: inherit; cursor: pointer;
  padding: 0.3rem 0.2rem; margin-bottom: 1rem;
}
.cu-cp-back:hover { color: var(--cp-accent-dark); }

/* ── KPI ──────────────────────────────────────────────────────────────── */
.cu-cp-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.4rem; }
@media (max-width: 900px) { .cu-cp-kpis { grid-template-columns: repeat(2, 1fr); } }
.cu-cp-kpi { background: var(--cp-white); border: 1px solid var(--cp-grey-100); border-radius: var(--cp-radius); padding: 1.1rem 1.2rem; }
.cu-cp-kpi-label { font-size: 0.78rem; color: var(--cp-ink-soft); margin: 0 0 0.5rem; }
.cu-cp-kpi-value { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--cp-ink); font-variant-numeric: tabular-nums; }
.cu-cp-kpi-sub { font-size: 0.68rem; color: var(--cp-ink-faint); margin: 0.35rem 0 0; }

/* ── Onglets de statut ───────────────────────────────────────────────── */
.cu-cp-statustabs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.cu-cp-statustab {
  background: var(--cp-grey-50); border: 1px solid transparent; border-radius: 999px;
  padding: 0.4rem 0.85rem; font-size: 0.8rem; font-weight: 600; color: var(--cp-ink-soft);
  font-family: inherit; cursor: pointer;
}
.cu-cp-statustab:hover { background: var(--cp-grey-100); }
.cu-cp-statustab--active { background: var(--cp-accent-tint); color: var(--cp-accent-dark); font-weight: 700; }

/* ── Disposition table + panneau ─────────────────────────────────────── */
.cu-cp-layout { display: grid; grid-template-columns: 1fr 320px; gap: 1.4rem; align-items: start; }
@media (max-width: 1050px) { .cu-cp-layout { grid-template-columns: 1fr; } }
.cu-cp-table-col { min-width: 0; }

.cu-cp-table-head {
  display: none; /* activé en mode liste, voir plus bas */
  padding: 0.6rem 0.9rem; background: var(--cp-grey-50); border-radius: var(--cp-radius-sm) var(--cp-radius-sm) 0 0;
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--cp-ink-faint);
}
.cu-cp-table-head span { flex: 1; }
.cu-cp-table-head span:nth-child(1) { flex: 1.6; }
.cu-cp-table-head span:last-child { flex: 0 0 24px; }

.cu-cp-sidepanel {
  background: var(--cp-white); border: 1px solid var(--cp-grey-100); border-radius: var(--cp-radius);
  padding: 1.3rem 1.3rem 0.8rem; position: sticky; top: 1.4rem;
}
.cu-cp-sidepanel-empty { font-size: 0.82rem; color: var(--cp-ink-faint); font-style: italic; text-align: center; padding: 1.5rem 0.5rem; }
.cu-cp-detail-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.cu-cp-detail-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--cp-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.86rem; flex-shrink: 0; }
.cu-cp-detail-name { font-weight: 700; font-size: 0.95rem; color: var(--cp-ink); }
.cu-cp-detail-ref { font-size: 0.72rem; color: var(--cp-ink-faint); margin-top: 1px; }
.cu-cp-detail-amount { font-size: 1.55rem; font-weight: 700; margin: 0.2rem 0 1rem; color: var(--cp-ink); font-variant-numeric: tabular-nums; }
.cu-cp-detail-actions { display: flex; gap: 0.5rem; margin-bottom: 1.1rem; }
.cu-cp-btn {
  border: none; border-radius: var(--cp-radius-sm); padding: 0.55rem 0.8rem; font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 0.35rem; flex: 1; font-family: inherit; cursor: pointer;
}
.cu-cp-btn-primary { background: var(--cp-accent); color: #fff; }
.cu-cp-btn-primary:hover { background: var(--cp-accent-dark); }
.cu-cp-btn-ghost { background: var(--cp-grey-50); color: var(--cp-ink); flex: none; width: 38px; }
.cu-cp-btn-ghost:hover { background: var(--cp-grey-100); }
.cu-cp-detail-list { border-top: 1px solid var(--cp-grey-100); }
.cu-cp-detail-row {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; border-bottom: 1px solid var(--cp-grey-100);
  padding: 0.7rem 0.1rem; font-size: 0.84rem; color: var(--cp-ink); font-family: inherit; cursor: pointer; text-align: left;
}
.cu-cp-detail-row:hover { color: var(--cp-accent-dark); }
.cu-cp-detail-row .left { display: flex; align-items: center; gap: 0.5rem; }
.cu-cp-detail-row .count { color: var(--cp-ink-faint); font-size: 0.78rem; }
.cu-cp-chev { stroke: var(--cp-ink-faint); flex-shrink: 0; }

/* ── Pilotage (section secondaire, repliable) ───────────────────────────── */
.cu-cp-pilotage-wrap { margin-top: 1.4rem; border: 1px solid var(--cp-grey-100); border-radius: var(--cp-radius); overflow: hidden; }
.cu-cp-pilotage-summary {
  padding: 0.8rem 1.1rem; background: var(--cp-grey-50); font-size: 0.88rem; font-weight: 700; color: var(--cp-ink);
  cursor: pointer; list-style: none;
}
.cu-cp-pilotage-summary::-webkit-details-marker { display: none; }
.cu-cp-pilotage-wrap[open] .cu-cp-pilotage-summary { border-bottom: 1px solid var(--cp-grey-100); }
.cu-cp-pilotage-wrap #cu-pilotage { padding: 1.1rem; }

/* ── Ligne compacte de tableau, injectée dans .cu-card-summary ──────────── */
.cu-cp-row { display: none; align-items: center; gap: 0.8rem; padding: 0.75rem 0.9rem; font-size: 0.84rem; }
.cu-cp-row-name { flex: 1.6; font-weight: 700; color: var(--cp-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-cp-row-banque { flex: 1; color: var(--cp-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cu-cp-row-montant { flex: 1; font-weight: 600; color: var(--cp-ink); font-variant-numeric: tabular-nums; }
/* .cu-cp-pill — DEVENU un <select> natif (retour utilisateur réel : édition
   directe dans la ligne, sans ouvrir la fiche), neutralisé pour rester
   pixel-identique au repos à l'ancien <span> : aucune nouvelle dimension,
   aucune nouvelle couleur de base, seul `appearance:none` change le rendu
   natif du <select>. Un clic ouvre le picker natif du navigateur — c'est le
   « petit menu déroulant » demandé, sans composant JS supplémentaire. */
.cu-cp-pill {
  /* min-width:0 est OBLIGATOIRE ici : un <select> a sinon une largeur de
     contenu minimale basée sur son option la plus longue (ex. "En attente
     de documents complémentaires"), qui l'empêche de rétrécir sous flex et
     écrase les colonnes voisines (Client/Banque/Montant) — bug réel trouvé
     et corrigé pendant la vérification visuelle de ce correctif. */
  flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.74rem; font-weight: 700;
  padding: 0.28rem 1.3rem 0.28rem 0.6rem; border-radius: 999px; white-space: nowrap; width: 100%;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  appearance: none; -webkit-appearance: none; border: 1px solid transparent; font-family: inherit; cursor: pointer;
  background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 8px;
}
.cu-cp-pill:hover { border-color: currentColor; }
.cu-cp-pill:focus-visible { outline: 2px solid var(--cp-accent); outline-offset: 1px; }
.cu-cp-pill:disabled { opacity: 0.6; cursor: wait; }
.cu-cp-pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
/* Historiques génériques — inchangés (valeurs 'a-faire'/'en-cours' encore
   présentes sur d'anciens dossiers, jamais reconverties). Les 9 nouvelles
   valeurs intermédiaires réutilisent ce même bleu : aucune couleur créée. */
.cu-cp-pill--en-cours, .cu-cp-pill--a-faire,
.cu-cp-pill--espace-client, .cu-cp-pill--attente-documents,
.cu-cp-pill--depose-banque, .cu-cp-pill--retour-banque,
.cu-cp-pill--lettre-hypotheque, .cu-cp-pill--hypotheque-signee,
.cu-cp-pill--credit-signe, .cu-cp-pill--verif-siege {
  background: var(--cp-blue-tint); color: var(--cp-blue);
}
.cu-cp-pill--premier-deblocage, .cu-cp-pill--deblocage-encours {
  background: var(--cp-accent-tint); color: var(--cp-accent-dark);
}
.cu-cp-pill--attente { background: var(--cp-amber-tint); color: var(--cp-amber); }
/* « Dossier bloqué » — seule couleur déjà définie dans ce fichier mais
   jamais appliquée à un pill avant ce correctif (--cp-rose/--cp-rose-tint,
   voir en-tête du fichier) : pas une nouvelle couleur, une réutilisation,
   nécessaire pour le distinguer visuellement de « En attente » (ambre). */
.cu-cp-pill--bloque { background: var(--cp-rose-tint); color: var(--cp-rose); }
.cu-cp-pill--termine { background: var(--cp-grey-100); color: var(--cp-ink-faint); }
/* Catégorie — pastille neutre, jamais colorée par phase (ce n'est pas un
   indicateur de progression). */
.cu-cp-pill--categorie { background: var(--cp-grey-100); color: var(--cp-ink-soft); }
.cu-cp-row-chev { flex: 0 0 24px; display: flex; justify-content: flex-end; }

/* ═══════════════════════════════════════════════════════════════════════
   BASCULE LISTE / DÉTAIL — pilotée par [data-cp-mode] sur #crm-view-dossiers.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Mode liste (par défaut) : table compacte, body des cartes masqué ───── */
#crm-view-dossiers[data-cp-mode="liste"] .cu-cp-row { display: flex; }
#crm-view-dossiers[data-cp-mode="liste"] .cu-cp-table-head { display: flex; }
#crm-view-dossiers[data-cp-mode="liste"] .cu-card-row1,
#crm-view-dossiers[data-cp-mode="liste"] .cu-card-row2,
#crm-view-dossiers[data-cp-mode="liste"] .cu-card-summary > .cu-progress-wrap,
#crm-view-dossiers[data-cp-mode="liste"] .cu-quick-report,
#crm-view-dossiers[data-cp-mode="liste"] .cu-phase-badges { display: none; }
#crm-view-dossiers[data-cp-mode="liste"] .cu-card-body { display: none !important; }
#crm-view-dossiers[data-cp-mode="liste"] .cu-card { border: none; border-bottom: 1px solid var(--cp-grey-100); border-radius: 0; }
#crm-view-dossiers[data-cp-mode="liste"] .cu-card:hover { background: var(--cp-grey-50); }
#crm-view-dossiers[data-cp-mode="liste"] .cu-card.cu-cp-selected { background: var(--cp-accent-tint); }
#crm-view-dossiers[data-cp-mode="liste"] #cu-list { border: 1px solid var(--cp-grey-100); border-top: none; border-radius: 0 0 var(--cp-radius-sm) var(--cp-radius-sm); background: var(--cp-white); overflow: hidden; }

/* ── Mode détail : une seule fiche bleue, tout le reste masqué ──────────── */
#crm-view-dossiers[data-cp-mode="detail"] .cu-cp-back { display: flex; }
#crm-view-dossiers[data-cp-mode="detail"] .cu-cp-kpis,
#crm-view-dossiers[data-cp-mode="detail"] .cu-cp-statustabs,
#crm-view-dossiers[data-cp-mode="detail"] #cu-counters,
#crm-view-dossiers[data-cp-mode="detail"] .cu-filterbar,
#crm-view-dossiers[data-cp-mode="detail"] .cu-cp-table-head,
#crm-view-dossiers[data-cp-mode="detail"] .cu-cp-sidepanel,
#crm-view-dossiers[data-cp-mode="detail"] .cu-cp-pilotage-wrap,
#crm-view-dossiers[data-cp-mode="detail"] #cu-empty,
#crm-view-dossiers[data-cp-mode="detail"] datalist { display: none; }
#crm-view-dossiers[data-cp-mode="detail"] .cu-cp-layout { display: block; }
#crm-view-dossiers[data-cp-mode="detail"] .pr-page-header { display: none; }
#crm-view-dossiers[data-cp-mode="detail"] #cu-premier-deblocage-details > summary,
#crm-view-dossiers[data-cp-mode="detail"] #cu-termines-details > summary { display: none; }
#crm-view-dossiers[data-cp-mode="detail"] #cu-premier-deblocage-details > .cu-section-body,
#crm-view-dossiers[data-cp-mode="detail"] #cu-termines-details > .cu-section-body { display: block !important; }
/* Un seul .cu-card visible : celui marqué .cu-cp-focused par cuCpShowDetail(). */
#crm-view-dossiers[data-cp-mode="detail"] .cu-card { display: none; }
#crm-view-dossiers[data-cp-mode="detail"] .cu-card.cu-cp-focused { display: block !important; }
#crm-view-dossiers[data-cp-mode="detail"] .cu-card.cu-cp-focused .cu-card-body { display: block !important; }

@media (max-width: 760px) {
  /* Même comportement responsive qu'avant ce correctif : les positions 2
     (Banque) et 5 masquées restent identiques — seule la donnée en
     position 5 a changé (Catégorie au lieu d'Échéance), jamais le
     comportement du point de rupture lui-même. */
  .cu-cp-table-head span:nth-child(2),
  .cu-cp-table-head span:nth-child(5),
  .cu-cp-row-banque,
  [data-role="cp-categorie-select"] { display: none; }
}