/* ══════════════════════════════════════════════════════════════════════════
   [b2246] Page Compta v3 — handoff Margot « handoff-compta »
   ══════════════════════════════════════════════════════════════════════════
   Valeurs reprises telles quelles de la maquette. TOUTES les classes sont
   prefixees `cv3-` : le bloc est injecte dans .ca-content, qui porte deja les
   styles de l'ancienne page (.card, .row, .split, .lead... auraient collisionne).

   Le BLOC 5 du handoff (tableau) n'est pas repris : doublon avec Dossiers.
   L'ancienne page est masquee plus bas, pas supprimee.
   ────────────────────────────────────────────────────────────────────────── */

.cv3{
  --cv3-green-dim: color-mix(in srgb, var(--green) 10%, transparent);
  /* [b2248] respiration reelle : la page collait au chrome et aux deux bords */
  padding: 18px 8px 56px;
  box-sizing: border-box;
}

/* ── Titre de section ─────────────────────────────────────────────────── */
.cv3-lead{
  font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); font-family:'JetBrains Mono',monospace;
  margin:2px 0 13px; display:flex; align-items:center; gap:9px;
}
.cv3-lead::after{ content:""; flex:1; height:1px; background:var(--border); }
.cv3-lead:not(:first-child){ margin-top:30px; }

/* ── 1. Ou j'en suis : 5 KPI ──────────────────────────────────────────── */
.cv3-strip{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; }
@media(max-width:1200px){ .cv3-strip{ grid-template-columns:repeat(3,1fr); } }
@media(max-width:760px){ .cv3-strip{ grid-template-columns:1fr 1fr; } }
.cv3-kpi{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; }
.cv3-kpi.hl{
  border-color:color-mix(in srgb,var(--green) 32%,transparent);
  background:linear-gradient(180deg, var(--cv3-green-dim), transparent);
}
.cv3-kpi .k{
  font-size:9px; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); font-family:'JetBrains Mono',monospace;
  display:flex; align-items:center; gap:6px;
}
.cv3-kpi .k .dot{ width:6px; height:6px; border-radius:50%; flex-shrink:0; }
/* LE NET PRIME — regle non negociable du handoff */
.cv3-kpi .net{ font-size:24px; font-weight:800; letter-spacing:-.02em; margin-top:11px; font-family:'JetBrains Mono',monospace; }
.cv3-kpi .netl{ font-size:9px; color:var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-top:2px; }
.cv3-kpi .brut{
  font-size:12px; color:var(--text-dim); margin-top:9px; padding-top:9px;
  border-top:1px solid var(--border); display:flex; justify-content:space-between; gap:8px;
}
.cv3-kpi .brut .v{ font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--text); }
.cv3-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700; font-family:'JetBrains Mono',monospace;
  border-radius:99px; padding:2px 8px; margin-left:auto;
}
.cv3-badge.up{ color:var(--green); background:var(--cv3-green-dim); }
.cv3-badge.dn{ color:var(--chaud); background:color-mix(in srgb,var(--chaud) 12%,transparent); }
.cv3-badge svg{ width:11px; height:11px; }

/* ── Objectif ─────────────────────────────────────────────────────────── */
.cv3-obj{
  margin-top:12px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; padding:16px 18px;
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.cv3-obj .lab{ font-size:13px; font-weight:600; }
/* [b2252] bascule Perso / Agence — controle a part entiere, premier item de la
   barre, plus une ligne collee sous le montant. */
.cv3-objsw{ display:inline-flex; gap:2px; padding:2px; background:var(--s2); border-radius:9px; flex-shrink:0; align-self:center; }
.cv3-objsw button{
  font:inherit; font-size:11px; font-weight:600; letter-spacing:.02em;
  padding:4px 10px; border:0; border-radius:6px; cursor:pointer;
  background:transparent; color:var(--text-dim); transition:background .14s, color .14s;
}
.cv3-objsw button:hover{ color:var(--text); }
.cv3-objsw button.on{ background:var(--surface); color:var(--text); box-shadow:0 1px 2px rgba(20,22,31,.08); }
.cv3-obj .lab b{ font-family:'JetBrains Mono',monospace; }
.cv3-obj .barwrap{ flex:1; min-width:200px; }
.cv3-obj .barhead{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:7px; font-family:'JetBrains Mono',monospace; }
.cv3-obj .track{ height:8px; border-radius:99px; background:var(--s3); overflow:hidden; }
.cv3-obj .fill{ height:100%; border-radius:99px; background:var(--green); width:0; transition:width 1.1s cubic-bezier(.3,.7,.2,1); }
.cv3-obj .rest{ text-align:right; }
.cv3-obj .rest .v{ font-size:19px; font-weight:800; font-family:'JetBrains Mono',monospace; letter-spacing:-.02em; }
.cv3-obj .rest .l{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-family:'JetBrains Mono',monospace; }

/* ── 2. Quand ca tombe ────────────────────────────────────────────────── */
.cv3-cols{ display:grid; grid-template-columns:1.5fr 1fr; gap:12px; }
@media(max-width:900px){ .cv3-cols{ grid-template-columns:1fr; } }
.cv3-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; }
.cv3-card-h{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.cv3-card-h .t{ font-size:14px; font-weight:700; letter-spacing:-.01em; }
.cv3-lgkey{ display:flex; gap:14px; font-size:11px; color:var(--muted); font-family:'JetBrains Mono',monospace; }
.cv3-lgkey i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px; }

.cv3-chart{ height:180px; display:flex; align-items:flex-end; gap:8px; padding-top:8px; }
.cv3-colb{ flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; height:100%; justify-content:flex-end; }
.cv3-bars{ width:100%; height:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px; }
.cv3-bar{ width:26%; max-width:14px; border-radius:3px 3px 0 0; height:0; transition:height 1s cubic-bezier(.3,.7,.2,1); }
/* [b2252] talon des series a zero : l'emplacement se lit, la valeur ne ment pas */
.cv3-bar.nil{ height:2px !important; background:var(--border) !important; border-radius:2px; }
/* [b2250] 3 series : encaisse / compromis / offre — memes couleurs que les KPI */
.cv3-bar.aa{ background:var(--green); }
.cv3-bar.sc{ background:var(--tiede); }
.cv3-bar.o{  background:var(--froid); }
.cv3-bar.cur{ background:var(--green); }
.cv3-bar.prev{ background:var(--s3); }
.cv3-colb .m{ font-size:10px; color:var(--muted); font-family:'JetBrains Mono',monospace; }

.cv3-cal .row{ display:flex; align-items:center; gap:11px; padding:9px 0; border-top:1px solid var(--border); font-size:12.5px; }
.cv3-cal .row:first-of-type{ border-top:0; }
.cv3-cal .mo{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--muted); width:44px; flex-shrink:0; }
.cv3-cal .adr{ flex:1; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cv3-cal .amt{ font-family:'JetBrains Mono',monospace; font-weight:600; }
.cv3-cal .st{ font-size:9px; font-weight:700; font-family:'JetBrains Mono',monospace; border-radius:99px; padding:2px 7px; flex-shrink:0; }
.cv3-cal .st-sc{ color:var(--tiede); background:color-mix(in srgb,var(--tiede) 14%,transparent); }
.cv3-cal .st-o{ color:var(--froid); background:color-mix(in srgb,var(--froid) 14%,transparent); }

/* ── 3. Ce qui m'attend ───────────────────────────────────────────────── */
.cv3-alerts{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
  /* [b2254] chaque carte prend SA hauteur : la grille les etirait toutes sur la
     plus haute, d'ou le grand vide sous « Délai SRU » et « CS à surveiller ». */
  align-items:start; }
@media(max-width:900px){ .cv3-alerts{ grid-template-columns:1fr; } }
.cv3-al{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; border-left:3px solid var(--muted); }
.cv3-al.sru{ border-left-color:var(--chaud); }
.cv3-al.cs{ border-left-color:var(--tiede); }
.cv3-al.aa{ border-left-color:var(--green); }
.cv3-al .ah{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
.cv3-al .ai{ width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; }
.cv3-al .ai svg{ width:15px; height:15px; }
.cv3-al.sru .ai{ background:color-mix(in srgb,var(--chaud) 13%,transparent); color:var(--chaud); }
.cv3-al.cs  .ai{ background:color-mix(in srgb,var(--tiede) 14%,transparent); color:var(--tiede); }
.cv3-al.aa  .ai{ background:var(--cv3-green-dim); color:var(--green); }
.cv3-al .at{ font-size:12.5px; font-weight:700; }
.cv3-al .ac{ margin-left:auto; font-size:17px; font-weight:800; font-family:'JetBrains Mono',monospace; }
.cv3-al .li{ display:flex; justify-content:space-between; gap:8px; font-size:11.5px; padding:5px 0; border-top:1px solid var(--border); color:var(--text-dim); }
.cv3-al .li:first-of-type{ border-top:0; }
.cv3-al .li .d{ font-family:'JetBrains Mono',monospace; color:var(--muted); }
.cv3-al .li .adr{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── 4. Comment je travaille ──────────────────────────────────────────── */
.cv3-metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media(max-width:900px){ .cv3-metrics{ grid-template-columns:repeat(2,1fr); } }
.cv3-met{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px; }
.cv3-met .k{ font-size:9px; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-family:'JetBrains Mono',monospace; }
.cv3-met .v{ font-size:21px; font-weight:800; letter-spacing:-.02em; margin-top:9px; font-family:'JetBrains Mono',monospace; }
.cv3-met .s{ font-size:11px; color:var(--text-dim); margin-top:4px; }
.cv3-met .s b{ color:var(--green); font-family:'JetBrains Mono',monospace; }
.cv3-met .s b.dn{ color:var(--chaud); }
.cv3-split{ display:flex; height:8px; border-radius:99px; overflow:hidden; margin-top:11px; background:var(--s3); }
.cv3-split i{ height:100%; }
.cv3-split .es{ background:var(--accent); }
.cv3-split .e{ background:var(--froid); }
.cv3-split .s{ background:var(--s3); }
.cv3-splitlg{ display:flex; gap:12px; font-size:10.5px; color:var(--muted); margin-top:8px; font-family:'JetBrains Mono',monospace; flex-wrap:wrap; }
.cv3-splitlg i{ width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:4px; vertical-align:-1px; }

/* ── Etat vide : on le DIT, on n'affiche pas des zeros sans contexte ──── */
.cv3-empty{ font-size:12px; color:var(--muted); padding:14px 0; }

/* ══════════════════════════════════════════════════════════════════════
   L'ANCIENNE PAGE EST MASQUEE, PAS SUPPRIMEE.
   Le tableau faisait doublon avec Dossiers (demande Anthony). renderCA()
   continue de tourner : beaucoup de code appelle ses effets de bord
   (recalculs, tri, export). On cache seulement sa sortie visuelle.
   Revert = retirer ce bloc.
   ══════════════════════════════════════════════════════════════════════ */
body.cv3-on #page-mandats #ca-kpis,
body.cv3-on #page-mandats .cs-tbl-wrap,
body.cv3-on #page-mandats #ca-chart-wrap,
body.cv3-on #page-mandats #ca-charges-wrap,
body.cv3-on #page-mandats #ca-esti-recap-wrap{
  display:none !important;
}
/* #ca-filters-wrap RESTE visible : il porte le selecteur d annee, dont la
   nouvelle page depend (elle lit caGetFiltered()).
   [b2250] MAIS on retire de cette barre tout ce qui pilotait le TABLEAU, qui
   n'existe plus : le bouton Graphique (l'ancien graphe est masque), l'engrenage
   Colonnes (colonnes d'un tableau cache) et la recherche texte (elle ne filtrait
   que les lignes du tableau). Le filtre STATUT part aussi : chaque KPI EST un
   statut, le laisser vidait quatre cartes sur cinq des qu'on s'en servait. */
/* [b2252] Anthony : ne garder QUE les reglages, l'annee et le statut.
   Dans .cs-ca-acts il y a 3 boutons — Vue graphique, Configurer les colonnes,
   Parametres de calcul. Les deux premiers pilotent un tableau et un graphe qui
   n'existent plus ; le troisieme (openCaParamsPopup : taux URSSAF, assujetti
   TVA) commande TOUS les calculs de la page, il reste. */
/* [b2254] MES SELECTEURS NE POUVAIENT PAS MATCHER. Je les ancrais sur
   `#page-mandats #ca-filters-wrap`, or _DCHROME_FR.mandats SORT cette barre de
   #page-mandats pour la poser dans le slot du chrome (c'est meme la raison
   d'etre de _shellRepatriateCaBar, qui la rapatrie avant destruction du
   chrome). La barre n'est donc PAS un descendant de la page. On cible
   #ca-filters-wrap ou qu'il vive. */
body.cv3-on #ca-filters-wrap #btn-toggle-chart,
body.cv3-on #ca-filters-wrap button[onclick*="openColConfig"],
body.cv3-on #ca-filters-wrap .cs-search{
  display:none !important;
}

/* [b2248] LE BAS DE PAGE ETAIT COUPE.
   .ca-content est une colonne flex heritee de l'ancienne page, ou le TABLEAU
   portait le scroll. Sans tableau, la colonne prend la hauteur du conteneur et
   le dernier bloc (« Ce qui m'attend » / « Comment je travaille ») passait sous
   la ligne de flottaison sans que rien ne defile. On rend le defilement a la
   page et on empeche la colonne de compresser ses enfants. */
body.cv3-on #page-mandats{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  /* [b2256] FOND BLANC. Le gris vient de --bg (#f7f8fa) peint sur le body :
     .shellv2-main n'a aucun background, il laisse voir le body. On peint donc
     la colonne de contenu ET la page. Et on neutralise le margin-left:56px
     INLINE de #page-mandats (relique de l'ancienne sidebar) qui laissait une
     bande grise a gauche. */
  background: var(--surface) !important;
  margin-left: 0 !important;
}
body.cv3-on .shellv2-main{ background: var(--surface) !important; }
/* [b2257] Le gris persistait : --bg est peint sur le BODY, et selon le
   navigateur c'est LUI qui remplit la zone visible (propagation du background
   du body au canvas). On peint donc la racine, la colonne et le body. */
body.cv3-on{ background: var(--surface) !important; }
body.cv3-on .shellv2-root{ background: var(--surface) !important; }
body.cv3-on #page-mandats .ca-content{ background: var(--surface) !important; }
body.cv3-on #page-mandats .ca-content{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  padding: 0 16px 0 !important;
  gap: 0 !important;
}
body.cv3-on #page-mandats .ca-content > #cv3-root{
  flex: 0 0 auto;
}