/* ───────────────────────────────────────────────────────────────────────────
   Librairie Speyy, zone « cockpit » (lot « tout de la maquette », 22/10/2026).

   Ce fichier porte les éléments propres à les pages du cockpit (maquette 05 et conventions de la 04) : Besoin de moi, Tâches, Mails, CRM, Company Brain, Prospection.

   Règles de la librairie (`v3/docs/LIBRAIRIE-SPEYY.md`) : AUCUNE valeur ici. Une
   couleur, une police, un rayon ou une ombre se lit dans un jeton (`var(--sp-…)`).
   Une valeur vraiment nouvelle va dans le thème (`themes/`). Chargé après
   `elements.css`, sur toutes les pages, par `bridge.speyy_ui_head`.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Conventions des maquettes 04 et 05 (mission M4, 22/10/2026) ──────────────
   La zone se charge AVANT `speyy-v3.css` et `speyy-pages.css` : une règle qui
   doit l'emporter sur elles porte la racine de la colonne (`.v3-column`). */

/* Filtres en pilules, comme `.s-pf` de la maquette 05 : 28 px, texte au poids
   normal, compteur en chasse fixe atténué ; le filtre actif est à l'encre. */
.v3-column .sp-page:not(.sp-page--home) .sp-pillf { height: 28px; padding: 0 11px; color: var(--sp-text); font: 400 12.5px/1 var(--sp-font-sans); }
.v3-column .sp-page:not(.sp-page--home) .sp-pillf b { font: 400 11px/1 var(--sp-font-mono); color: var(--sp-text-soft); }
.v3-column .sp-page:not(.sp-page--home) .sp-pillf.is-on { color: var(--sp-pillf-on-fg); }
.v3-column .sp-page:not(.sp-page--home) .sp-pillf.is-on b { color: var(--sp-pillf-on-fg); opacity: 0.75; }

/* Cartes du cockpit : l'ombre douce des cartes de la maquette (`.m-card`). */
.v3-column .sp-page:not(.sp-page--home) :is(.nd-list, .nd-detail, .ml-list, .ml-detail, .ml-box, .ml-card, .u3-table-wrap, .u3-card, .m-kpi) { box-shadow: var(--sp-card-shadow); }

/* « Besoin de moi » en tête de Mails (maquette 05) : intitulé et compteur, puis les
   cartes de décision deux par deux, chacune avec ses boutons (maquette 04). */
.ml-needs { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ml-need-h { display: flex; align-items: center; gap: 10px; }
.ml-need-h .sp-label { margin: 0; font-family: var(--sp-label-font); font-weight: 500; color: var(--sp-text-soft); }
.ml-need-open { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border: 0; border-radius: var(--sp-btn-radius); background: transparent; color: var(--sp-text-soft); font: 400 13px var(--sp-font-sans); cursor: pointer; }
.ml-need-open:hover { color: var(--sp-text); background: var(--sp-hover); }
.ml-need-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.v3-column .ml-need.m-card { padding: 16px 18px; min-width: 0; box-shadow: var(--sp-card-shadow); }
.ml-need-tags { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ml-need-tags .sp-chip { font-weight: 400; font-size: 12px; }
.ml-need .m-card-title { margin: 8px 0 4px; overflow-wrap: anywhere; }
.ml-need .m-card-desc { overflow-wrap: anywhere; }
.ml-need .m-ab-btn.is-busy { opacity: 0.6; cursor: progress; }
.ml-need-more { margin: 0; font-size: 12.5px; color: var(--sp-text-soft); }
@container mlpage (max-width: 900px) { .ml-need-grid { grid-template-columns: minmax(0, 1fr); } }

/* Barre d'action d'une ligne de « Besoin de moi » (maquette 04) : sous le titre,
   séparée par un filet, « Voir la conversation » à droite. */
.v3-column .sp-page--needs .nd-acts { grid-column: 2 / -1; margin: 0 0 12px; min-width: 0; }
.v3-column .sp-page--needs .nd-acts .m-ab-btn.is-busy { opacity: 0.6; cursor: progress; }
@media (max-width: 900px) { .v3-column .sp-page--needs .nd-acts { grid-column: 1 / -1; } }
/* Sur un écran large, la barre d'une ligne garde ses boutons sur une ligne et passe à la ligne
   d'elle-même ; la barre empilée d'Olympe (requête de conteneur sous 520 px) reste au téléphone. */
@media (min-width: 901px) { .v3-column .sp-page--needs .nd-acts { container-type: normal; } }

/* Company Brain aux conventions de la maquette 04 (vérification de la démo 3.14.4) : l'arbre et le document tiennent
   dans UNE carte, alignée sur l'en-tête comme les autres pages, au lieu d'un cadre plein collé aux bords de la fenêtre.
   Le défilement reste celui de l'arbre et du document (`.v3-body.is-brain` garde `overflow: hidden`). */
.v3-column .v3-body.is-brain { padding: 4px 30px 24px; }
.v3-column .v3-body.is-brain > .sp-page--brain {
  border: 1px solid var(--sp-card-line); border-radius: var(--sp-card-radius);
  background: var(--sp-card-bg); box-shadow: var(--sp-card-shadow); overflow: hidden;
}
@media (max-width: 900px) { .v3-column .v3-body.is-brain { padding: 4px 16px 16px; } }