/* ═══════════════════════════════════════════════════════════
   donna · Sidebar — refonte visuelle (design Margot) · COMPACT
   Surcouche : restyle les classes shell-v2 existantes.
   AUCUNE modif de logique (nav, compteurs, état actif, tabbar).
   Esthétique Margot, dimensions proches de la sidebar précédente.
   ═══════════════════════════════════════════════════════════ */

body.shell-v2-on{
  --sb-accent-dim: var(--accent-dim, color-mix(in srgb, var(--accent) 12%, transparent));
  --sb-accent-bd:  color-mix(in srgb, var(--accent) 22%, transparent);
}

/* aside (largeur d'avant conservée — pas d'override de grille) */
/* [v1917] Fond GRIS (mockup « handoff-aujourdhui »). C'est ici que ça se joue :
   shell-v2.css pose bien background:var(--s2) sur .sb, mais ce fichier gouverne
   la sidebar à coups de !important — mon changement du b1916 était écrasé sans
   bruit. Le blanc faisait « flotter » la nav ; le gris l'ancre. */
/* [v1918] Gris ÉCLAIRCI : var(--s2) plein était trop marqué (Anthony). On mélange
   55% de s2 dans la surface — la nav reste ancrée sans assombrir l'écran. */
body.shell-v2-on .sb{ padding: 12px 10px 10px !important; gap: 1px;
  background: var(--surface) !important;
  /* sidebar grise, ancrée ; coins arrondis côté contenu uniquement */
  border-right: 1px solid var(--border-hi, var(--border)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  height: 100vh !important; max-height: 100vh !important; }
body.shell-v2-on[data-theme="noir"] .sb,
[data-theme="noir"] body.shell-v2-on .sb{ background: var(--surface) !important; }

/* ── brand + badge version ── */
body.shell-v2-on .sb-brand{ padding: 2px 6px 12px !important; }
body.shell-v2-on .sb-brand .ver,
body.shell-v2-on #shellv2-org-badge{
  font-family: var(--mono, 'JetBrains Mono', monospace);
  font-size: 10px !important; font-weight: 500 !important;
  color: var(--accent) !important; background: var(--sb-accent-dim) !important;
  border: 1px solid var(--sb-accent-bd) !important; border-radius: 99px !important;
  padding: 2px 7px !important;
}

/* ── boîtes recherche / donna IA / notifications : hauteur identique à donna IA (28px) ── */
body.shell-v2-on .sb-search{
  padding: 5px 10px !important; border-radius: 8px !important;
  gap: 9px !important; margin-bottom: 6px !important; font-size: 13px !important;
  height: 28px !important; min-height: 28px !important; line-height: 1.2 !important;
}

/* [v2112] CLOCHE CARRÉE (Anthony : « je veux que le bg blanc de l'icône cloche soit
   carré, là c'est rectangulaire, y'a plus de padding interne à droite »).
   CAUSE : le bouton porte class="sb-search act-bell" — il matche donc la règle
   ci-dessus (spécificité 0,2,1) et hérite de `height:28px !important` + de
   `padding:5px 10px !important`, tout en gardant le `width:40px !important` de
   shell-v2.css (.sb-toprow .act-bell, spécificité 0,2,0 : il perd sur la hauteur
   mais gagne sur la largeur, que Margot ne redéfinit pas). Résultat : 40×28 =
   rectangle, et 10px de padding latéral qui décentrent l'icône.
   Une cloche est une ICÔNE, pas un champ : carrée, à la hauteur EXACTE du champ
   de recherche (28px), sans padding. Spécificité 0,3,1 -> passe devant les deux. */
/* [v2113] ...ET CENTRER L'ICÔNE DEDANS. b2112 a corrigé la BOÎTE (28×28) mais pas
   l'alignement du contenu : le bouton porte `sb-search`, il héritait donc de
   `justify-content: flex-start` (shell-v2.css:191, prévu pour le champ de
   recherche où l'icône doit être à gauche). En display:grid, `justify-content`
   aligne les PISTES dans le conteneur : `place-items:center` centrait bien
   l'icône DANS sa piste, mais la piste restait collée à GAUCHE — d'où tout
   l'espace libre à droite (Anthony : « y'a plus de padding interne à droite »).
   On passe en inline-flex avec un centrage EXPLICITE sur les deux axes, qui
   neutralise l'héritage. Sélecteur par id (#act-bell, spéc. 1,2,1) : app-activite.js
   injecte ses propres règles `#act-bell{...}` (1,0,0) au runtime — il faut passer
   devant elles aussi. */
body.shell-v2-on .sb-toprow #act-bell,
body.shell-v2-on .sb-toprow .act-bell{
  box-sizing: border-box !important;
  flex: 0 0 28px !important;
  width: 28px !important; min-width: 28px !important; max-width: 28px !important;
  height: 28px !important; min-height: 28px !important; max-height: 28px !important;
  padding: 0 !important;
  border-radius: 8px !important;   /* même arrondi que le champ de recherche */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;   /* ← LE fix : écrase le flex-start hérité */
  align-content: center !important;
  gap: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  overflow: visible !important;         /* le badge déborde le coin haut-droit */
}
body.shell-v2-on .sb-toprow #act-bell > svg{
  display: block !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* verrouillage par id (spécificité max) : .sb-search est un flex-item dont le
   min-height:auto le laissait grandir à la taille de son icône (bell 18px, search 14px) */
/* [v2011] #shellv2-search et #act-bell RETIRÉS de ce verrou obsolète (pré-refonte
   Margot) : il forçait 28px + overflow:hidden !important (→ badge notif rogné).
   Leur taille/overflow est désormais géré par la maquette Margot (.sb-toprow). */
body.shell-v2-on #da-sb-item{
  height: 28px !important; min-height: 28px !important; max-height: 28px !important;
  padding: 5px 10px !important; flex: 0 0 auto !important; box-sizing: border-box !important;
  align-items: center !important; overflow: hidden !important;
}
body.shell-v2-on #da-sb-item > svg{ width: 14px !important; height: 14px !important; flex: 0 0 auto !important; }

/* ── items de nav ── */
body.shell-v2-on .sb-item{
  display: flex !important; align-items: center !important; gap: 9px !important;
  padding: 6px 9px !important; border-radius: 8px !important;
  font-size: 13px !important; font-weight: 500 !important; /* [Margot] poids 500 */
  color: var(--text) !important; border: 1px solid transparent !important;
}
body.shell-v2-on .sb-item:hover{ background: var(--s2) !important; }
body.shell-v2-on .sb-item > svg{
  width: 16px !important; height: 16px !important; stroke-width: 1.9 !important;
  color: var(--text-dim, var(--muted)) !important; flex-shrink: 0;
}
body.shell-v2-on .sb-item > span:not(.sb-count):not(.sb-kbd){ flex: 1; min-width: 0; }

/* item actif — handoff Margot : fond neutre --s2, texte normal, seule l'icône en accent */
body.shell-v2-on .sb-item[data-active="true"]{
  background: var(--s2) !important; color: var(--text) !important; font-weight: 600 !important;
}
body.shell-v2-on .sb-item[data-active="true"] > svg{ color: var(--accent) !important; }

/* compteurs : texte simple (pas de pastille) */
body.shell-v2-on .sb-count{
  background: transparent !important; border: 0 !important; padding: 0 !important;
  min-width: auto !important; height: auto !important;
  color: var(--muted) !important;
  font-family: var(--mono, 'JetBrains Mono', ui-monospace, monospace) !important;
  font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: .2px !important;
  font-variant-numeric: tabular-nums;
}

/* raccourci clavier (⌘K / ⌘J) */
body.shell-v2-on .sb-kbd{
  font-family: var(--mono, monospace) !important; font-size: 10px !important;
  color: var(--muted) !important; background: var(--s2) !important;
  border: 1px solid var(--border) !important; border-radius: 5px !important; padding: 1px 5px !important;
}

/* ── labels de section + filet ── */
body.shell-v2-on .sb-section-label{
  font-size: 10px !important; font-weight: 700 !important;
  letter-spacing: .08em !important; text-transform: uppercase;
  color: var(--muted) !important; padding: 12px 9px 5px !important; gap: 9px !important;
}
body.shell-v2-on .sb-section-label:not(.sb-section-label--prospection) > span:last-child{ background: var(--border) !important; opacity: 1 !important; }

/* Prospection : pas de cadre/surlignage gris — section simple comme les autres */
body.shell-v2-on .sb-section-wrap--prospection{ background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
body.shell-v2-on .sb-item--prospection{ background: transparent !important; }
body.shell-v2-on .sb-section-label--prospection{ background: transparent !important; }
body.shell-v2-on .sb-section-label--prospection::after{ content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── carte user (bas de sidebar) ── */
body.shell-v2-on .sb-user{
  display: flex !important; align-items: center !important; gap: 9px !important;
  padding: 7px 9px !important; border-radius: 8px !important;
  border: 1px solid var(--border) !important; background: var(--s2) !important;
  margin-top: 5px !important;
}
body.shell-v2-on .sb-user:hover{ background: var(--s3) !important; }
/* [v1765] photo de profil dans la user card */
body.shell-v2-on .sb-user .av img{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }
body.shell-v2-on .sb-user .av{
  width: 30px !important; height: 30px !important; border-radius: 8px !important;
  background: var(--accent) !important; color: #fff !important;
  display: grid !important; place-items: center !important;
  font-size: 11px !important; font-weight: 700 !important; flex-shrink: 0;
}
body.shell-v2-on .sb-user-name{ font-size: 12.5px !important; font-weight: 700 !important; letter-spacing: -.01em; }
body.shell-v2-on .sb-user-role{ font-size: 11px !important; color: var(--muted) !important; margin-top: 1px; }
body.shell-v2-on .sb-user > svg{ color: var(--muted) !important; width: 16px; height: 16px; flex-shrink: 0; }


/* ── [Margot navbar] header agence : pas de cadre bleu de focus, bloc compact ── */
body.shell-v2-on .ws-btn:focus{ outline: none !important; }
body.shell-v2-on .ws-btn:focus-visible{ outline: none !important; }
body.shell-v2-on .ws{ padding: 6px 8px 8px !important; }
body.shell-v2-on .ws-btn{ padding: 5px 6px !important; }
/* Le compte vit dans le menu du switcher (haut) → l'ancien bloc user du bas fait doublon */
body.shell-v2-on #shellv2-user{ display: none !important; }

/* ── [b2169 · test] Contenu en fond BLANC, navbar en gris ────────────────
   Inversion demandée par Anthony : la zone de contenu passe en --surface
   (blanc en clair, #16181d en noir), la sidebar garde son gris.
   Facile à retirer : supprimer ce bloc. */
body.shell-v2-on #shellv2-main,
body.shell-v2-on .shellv2-main{
  background: var(--surface) !important;
}
/* Bande header + filtres (sticky) : elle avait un fond --bg gris en dur,
   qui tranchait sur le contenu blanc. */
body.shell-v2-on .donna-chrome,
body.shell-v2-on .dchrome-head,
body.shell-v2-on .dchrome-filters{
  background: var(--surface) !important;
}
/* Agenda : ses deux bandes propres suivent aussi. */
body.shell-v2-on .agenda-header,
body.shell-v2-on .agenda-day-header{
  background: var(--surface) !important;
}


/* ── [b2172] Finitions du fond blanc ────────────────────────────────────
   1. Le contour de focus du navigateur restait visible sur l'item de nav
      apres un clic (gros cadre bleu autour de « Clients ») : on le coupe a
      la souris, on le garde au clavier (accessibilite).
   2. Tout etant blanc, la bande sticky header+filtres n'avait plus aucune
      demarcation avec le tableau qui defile dessous : trait fin en bas. */
body.shell-v2-on .sb-item:focus{ outline: none !important; }
body.shell-v2-on .sb-item:focus-visible{ outline: 2px solid var(--accent) !important; outline-offset: -2px; }
body.shell-v2-on .donna-chrome{ border-bottom: 1px solid var(--border) !important; }


/* ── [b2174] Suppression des zones grises du contenu ─────────────────────
   Demande Anthony : ne pas recolorer, supprimer. Trois sources de gris :
   1. le fond de la grille (--bg) visible partout ou le main ne couvre pas,
   2. les bandeaux d'entete de tableau (thead th = --s2) sur Clients/Biens,
   3. l'entete de la table compta.
   NB : certains thead sont position:sticky (prospection, prospects, compte) :
   on met --surface et non `transparent`, sinon les lignes defilent PAR-DESSUS
   le texte de l'entete. Resultat visuel identique (aucun gris), sans le bug. */
body.shell-v2-on .shellv2-root{ background: var(--surface) !important; }
body.shell-v2-on thead th,
body.shell-v2-on .vend-table thead th,
body.shell-v2-on .ca-content .table-wrap thead th{ background: var(--surface) !important; }


/* ── [b2175] Suppression des zones grises — TOUTES les sources ───────────
   Diagnostic complet (les regles precedentes ne pouvaient pas marcher) :
   les fiches client/bien REDEFINISSENT leurs propres tokens dans un shell
   isole (.cpv2-shell : --bg:#f7f8fa) — une regle globale ne les atteint pas.
   On neutralise donc le fond a la source, shell par shell, + les bandes
   sticky qui reprenaient --bg. Les petits remplissages internes (--s2 sur
   chips, hovers) restent : ce sont des composants, pas des « zones ». */

/* fiches client & bien : le canvas du shell isole */
body.shell-v2-on .cpv2-shell,
body.shell-v2-on #page-client-v2,
body.shell-v2-on #page-bien{ background: var(--surface) !important; }
/* barre sticky de la fiche bien (alignee sur DonnaChrome) */
body.shell-v2-on #page-bien .fbf-topbar{ background: var(--surface) !important; }
/* accueil : forcait --bg sur le main */
body.ak-on-accueil.shell-v2-on .shellv2-main,
body.shell-v2-on.ak-on-accueil .shellv2-main{ background: var(--surface) !important; }
/* toutes les pages : plus aucun canvas gris */
body.shell-v2-on [id^="page-"]{ background: transparent !important; }


/* [b2176] Derniers gris signales par Anthony :
   - la topbar de la fiche client (.cpv2-topbar : background var(--bg))
   - l'entete + la 1re colonne collante du tableau compta (--s2) */
body.shell-v2-on .cpv2-topbar{ background: var(--surface) !important; }
body.shell-v2-on .ca-content .table-wrap thead th,
body.shell-v2-on .ca-content .table-wrap thead th:first-child,
body.shell-v2-on .ca-content .table-wrap tbody td:first-child{ background: var(--surface) !important; }

/* [b2176] Texte de la nav plus epais (demande Anthony) */
body.shell-v2-on .sb-item{ font-weight: 600 !important; }
body.shell-v2-on .sb-item[data-active="true"]{ font-weight: 700 !important; }

/* ── [b2177] Header du lead PP aligne sur DonnaChrome ────────────────────
   Les fiches client (.cpv2-topbar) et bien (.fbf-topbar) avaient deja ete
   alignees ; la fiche LEAD de la prospection restait sur l'ancien .ph
   (40px, metriques d'origine). On lui applique les metriques exactes de
   .dchrome-head : hauteur 48px, padding = main-px + 24 (contenu aligne
   sur les pages listes), fond blanc, separation par la seule bordure. */
body.shell-v2-on #page-prospection .ph,
body.shell-v2-on .pp-scope .ph{
  height: 48px !important;
  padding-left: calc(var(--shellv2-main-px, 24px) + 24px) !important;
  padding-right: calc(var(--shellv2-main-px, 24px) + 24px) !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ── [b2184] Nav rapprochee du style Attio (reference Anthony) ───────────
   Attio utilise Inter (deja notre police) — rien a changer cote typo.
   4 points demandes, et RIEN d'autre :
     1. plus aere    -> respiration entre les items
     2. gris fonce   -> libelle en --text-dim au repos, --text a l'etat actif
     3. icone JAMAIS violette (ni au survol ni sur l'onglet actif)
     4. fond hover/actif moins haut -> padding vertical resserre */

/* 1 + 4 : ligne plus fine, air entre les items */
body.shell-v2-on .sb-item{
  padding: 5px 9px !important;
  margin-bottom: 1px !important;
  /* [b2187] un cran de plus (retour Anthony) : 500 -> 600 -> 700 */
  font-weight: 700 !important;
  color: var(--text-dim) !important;
}
/* 2 : le libelle passe en encre pleine seulement quand c'est actif/survole */
body.shell-v2-on .sb-item:hover{ color: var(--text) !important; }
body.shell-v2-on .sb-item[data-active="true"]{
  color: var(--text) !important;
  font-weight: 800 !important;
}
/* 3 : icone neutre partout — l'accent violet est retire de l'etat actif */
body.shell-v2-on .sb-item > svg{ color: var(--muted) !important; }
body.shell-v2-on .sb-item:hover > svg,
body.shell-v2-on .sb-item[data-active="true"] > svg{ color: var(--text-dim) !important; }