/* ============================================================================
   Beaver AI Revenue OS — coquille refondue
   DESIGN-02 · consomme les jetons de `tokens.css`.

   TOUT CE FICHIER EST PORTÉ PAR `body.ui-v2`.
   -------------------------------------------
   Aucune règle ici ne s'applique tant qu'une vue n'a pas appelé `mountShell()`.
   Les 37 écrans non migrés gardent donc exactement leur apparence actuelle,
   sans qu'on ait eu à les modifier. C'est la contrepartie du montage parallèle :
   le sélecteur est plus long, la migration est réversible écran par écran.

   L'ORDRE DE CHARGEMENT COMPTE
   ---------------------------
   Ce fichier vient APRÈS `main.css` dans `index.html`. Il doit gagner, et
   uniquement sous `body.ui-v2` — d'où la portée systématique plutôt que des
   `!important`.
   ============================================================================ */

/* ─── Bascule de thème ──────────────────────────────────────────────────────
   L'inversion sombre → clair se joue ici, et seulement ici. */
body.ui-v2 {
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}

/* La coquille historique reste dans le DOM — `nav.js` continue d'y écrire au
   boot et `unmountShell()` la restitue sans reconstruction. Elle est masquée,
   pas retirée. */
body.ui-v2 > #app > .sidebar,
body.ui-v2 .main-content > .topbar { display: none; }

body.ui-v2 .main-content {
  margin-left: var(--sidebar-expanded);
  transition: margin-left var(--transition-normal);
  background: var(--bg-canvas);
  min-height: 100vh;
}
body.ui-v2.ui-v2-collapsed .main-content { margin-left: var(--sidebar-collapsed); }

/* `.main-content` est un élément flex hérité (`flex: 1`) : son `min-width: auto`
   implicite l'étire à la largeur intrinsèque du contenu, si bien qu'un
   `overflow-x` intérieur ne contient rien et que la page entière défile
   horizontalement. Aucun écran migré ne l'avait déclenché jusqu'ici ; la barre
   à huit onglets du Copilote de croissance, elle, le fait. La règle est portée
   par `body.ui-v2` : les écrans hérités gardent leur comportement. */
body.ui-v2 .main-content { min-width: 0; }

body.ui-v2 #view-root {
  max-width: var(--content-max);
  padding: var(--space-6) var(--space-8) var(--space-12);
  min-width: 0;
}

/* Portée au CONTENU, pas à `body`.
   `body.ui-v2 a { color: … }` l'emportait sur `.v2-item` par spécificité : toute
   la barre latérale passait en bleu vif sur fond noir. Invisible à la lecture du
   CSS, évident à la première capture d'écran. */
body.ui-v2 #view-root a { color: var(--accent); }
body.ui-v2 #view-root a:hover { text-decoration: none; }

/* Le bouton d'aide flottant vient d'`index.html` avec un indigo hérité en
   style inline. Sous le thème clair il jure ; on le neutralise ici plutôt que
   de toucher au HTML partagé avec les 41 écrans non migrés. */
/* `!important` assumé, et seulement ici : le bouton porte ses couleurs en
   style INLINE dans `index.html`, que rien d'externe ne peut surclasser. Les
   deux autres issues étaient pires — modifier un HTML partagé avec les 41
   écrans non migrés, ou laisser un disque indigo vif sur un canvas chaud. */
body.ui-v2 #help-fab {
  background: var(--bg-inverse) !important;
  color: var(--text-inverse) !important;
  width: 2.25rem !important; height: 2.25rem !important;
  font-size: var(--text-md) !important;
  box-shadow: var(--shadow-popover) !important;
}

/* ─── Barre latérale ────────────────────────────────────────────────────────*/
.v2-sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-expanded);
  height: 100vh;
  z-index: 120;
  display: flex;
  flex-direction: column;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-inverse);
  color: var(--text-inverse);
  transition: width var(--transition-normal);
}
body.ui-v2-collapsed .v2-sidebar { width: var(--sidebar-collapsed); }

.v2-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  height: var(--topbar-height);
  padding: 0 var(--space-3) 0 var(--space-4);
  border-bottom: 1px solid var(--border-inverse);
  flex: 0 0 auto;
}
.v2-brand-mark {
  display: flex; align-items: center; gap: var(--space-3);
  color: var(--text-inverse); text-decoration: none; min-width: 0;
}
.v2-brand-glyph {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: var(--text-inverse);
  color: var(--bg-sidebar);
  font-weight: 700; font-size: var(--text-base);
}
.v2-brand-text { display: flex; flex-direction: column; min-width: 0; }
.v2-brand-name {
  font-size: var(--text-md); font-weight: 600;
  letter-spacing: var(--tracking-tight); line-height: 1.1;
}
.v2-brand-tagline {
  font-size: var(--text-2xs); color: var(--text-inverse-muted);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}
/* Replié, le libellé disparaît mais PAS le bouton de repli : sans lui, la
   barre latérale ne pourrait plus être rouverte, et l'état est persisté — on
   resterait replié au rechargement suivant, sans issue. 24 + 4 + 22 px tiennent
   dans les 68 px de la colonne. */
body.ui-v2-collapsed .v2-brand { padding: 0 var(--space-2); gap: var(--space-1); }
body.ui-v2-collapsed .v2-brand-text { display: none; }

.v2-collapse {
  flex: 0 0 auto;
  background: transparent; border: 1px solid var(--border-inverse);
  color: var(--text-inverse-muted);
  width: 22px; height: 22px; line-height: 1;
  border-radius: var(--radius-xs); cursor: pointer;
  font-size: var(--text-xs);
}
.v2-collapse:hover { background: var(--bg-sidebar-hover); color: var(--text-inverse); }

.v2-nav { flex: 1 1 auto; overflow-y: auto; padding: var(--space-3) 0 var(--space-4); }
.v2-group { margin-bottom: var(--space-4); }
.v2-group-title {
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-inverse-muted);
  font-weight: 500;
}
body.ui-v2-collapsed .v2-group-title {
  /* Replié, un titre de groupe est illisible ; le séparer par un trait garde la
     structure sans afficher un mot tronqué. */
  height: 1px; padding: 0; margin: var(--space-3) var(--space-4);
  overflow: hidden; color: transparent; background: var(--border-inverse);
}

.v2-item {
  display: flex; align-items: center; gap: var(--space-2);
  margin: 1px var(--space-2);
  padding: 6px var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-inverse-muted);
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.v2-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.v2-item:hover { background: var(--bg-sidebar-hover); color: var(--text-inverse); text-decoration: none; }
a.v2-item.is-active { background: var(--bg-sidebar-active); color: var(--text-inverse); font-weight: 500; }
a.v2-item.is-active .v2-item-label { box-shadow: none; }
a.v2-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Indisponible : ni lien, ni bouton. Le curseur par défaut et l'absence de
   survol doivent dire « ceci n'est pas cliquable » avant même la pastille. */
.v2-item.is-unavailable { color: #57534a; cursor: default; }

/* ── Replié : initiales, faute d'icônes ────────────────────────────────────
   Il n'existe pas encore de jeu d'icônes dans ce dépôt. Masquer simplement le
   libellé donnait une colonne de lignes VIDES : la barre repliée était
   strictement inutilisable, ce que la capture d'écran a montré immédiatement.
   Les initiales sont un pis-aller assumé — lisibles, jamais inventées, doublées
   d'une infobulle native portant le libellé complet. Un vrai jeu d'icônes est
   du ressort de DESIGN-04+. */
body.ui-v2-collapsed .v2-item { justify-content: center; padding: 7px 0; }
body.ui-v2-collapsed .v2-item-label { display: none; }
body.ui-v2-collapsed .v2-item-badge { display: none; }
body.ui-v2-collapsed .v2-item::before {
  content: attr(data-initial);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
}
/* Étendu, l'initiale n'a rien à faire là. */
.v2-item::before { content: none; }
/* Le jeu d'icônes couvre TOUTES les entrées (un test le vérifie), donc replié
   on montre l'icône et jamais l'initiale. Celle-ci reste le secours si une clé
   venait à manquer : mieux vaut deux lettres qu'un trou. */
body.ui-v2-collapsed .v2-item.has-icon::before,
body.ui-v2 .v2-item.has-icon::before { content: none; }
.v2-icon { flex: 0 0 auto; width: 16px; height: 16px; opacity: .85; }
a.v2-item:hover .v2-icon, a.v2-item.is-active .v2-icon { opacity: 1; }
.v2-item.is-unavailable .v2-icon { opacity: .5; }

.v2-item-badge {
  flex: 0 0 auto;
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-inverse);
  color: var(--text-inverse-muted);
  font-weight: 500;
}
.v2-item-badge.is-sim     { color: #d9a441; border-color: #4a3c1c; }
.v2-item-badge.is-locked  { color: #a39e94; }
/* Discret : c'est une note de marge, pas une alerte. Le libellé grisé et
   l'absence de survol disent déjà l'essentiel. */
.v2-item-badge.is-missing {
  color: #6b665e; border-color: #2a2a2c; border-style: dashed;
}
.v2-item-badge.is-action  {
  color: var(--bg-sidebar); background: #d9a441; border-color: #d9a441;
  font-variant-numeric: tabular-nums;
}

.v2-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--border-inverse);
  padding: var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
}
body.ui-v2-collapsed .v2-foot { display: none; }

.v2-lang { display: flex; align-items: center; gap: var(--space-2); }
.v2-lang-label {
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-inverse-muted);
}
.v2-lang-select {
  flex: 1 1 auto; min-width: 0;
  background: var(--bg-sidebar-hover);
  color: var(--text-inverse);
  border: 1px solid var(--border-inverse);
  border-radius: var(--radius-xs);
  padding: 3px var(--space-2);
  font-family: var(--font-ui); font-size: var(--text-xs);
}

.v2-account { display: flex; flex-direction: column; gap: 2px; }
.v2-account-label {
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-inverse-muted);
}
.v2-account-email {
  font-size: var(--text-sm); color: var(--text-inverse);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-account-role { font-size: var(--text-2xs); color: var(--text-inverse-muted); }
.v2-logout {
  margin-top: var(--space-2);
  background: transparent;
  border: 1px solid var(--border-inverse);
  color: var(--text-inverse-muted);
  padding: 5px var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: var(--text-xs);
  cursor: pointer;
}
.v2-logout:hover { background: var(--bg-sidebar-hover); color: var(--text-inverse); }
.v2-logout[disabled] { opacity: .5; cursor: default; }

/* ─── Barre supérieure ──────────────────────────────────────────────────────*/
.v2-topbar {
  position: sticky; top: 0; z-index: 110;
  height: var(--topbar-height);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4);
  padding: 0 var(--space-8);
  background: var(--bg-canvas);
  border-bottom: 1px solid var(--border-default);
}
/* Ancre, pas second titre. L'écran porte déjà son grand titre éditorial ;
   répéter le même mot en 16px semi-gras juste au-dessus donnait deux titres
   concurrents. Réduit et atténué, il redevient ce qu'il doit être : un repère
   qui reste visible quand la page défile. */
.v2-page-title {
  font-size: var(--text-sm); font-weight: 500;
  letter-spacing: var(--tracking-normal);
  color: var(--text-muted);
  margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v2-topbar-right { display: flex; align-items: center; gap: var(--space-3); }

.v2-palette-trigger {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 4px var(--space-2) 4px var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-ui); font-size: var(--text-sm);
  cursor: pointer;
  min-width: 200px;
  justify-content: space-between;
}
.v2-palette-trigger:hover { border-color: var(--border-strong); color: var(--text-secondary); }
.v2-palette-trigger kbd {
  font-size: var(--text-2xs);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  padding: 1px 4px;
  background: var(--bg-surface-muted);
  color: var(--text-faint);
}

/* ─── Palette de commandes ──────────────────────────────────────────────────*/
.v2-palette-overlay {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(22, 22, 26, .32);
  display: flex; justify-content: center;
  padding-top: 12vh;
}
.v2-palette {
  width: min(560px, calc(100vw - var(--space-8)));
  max-height: 60vh;
  display: flex; flex-direction: column;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
}
.v2-palette-head {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}
.v2-palette-input {
  flex: 1 1 auto; min-width: 0;
  border: none; outline: none; background: transparent;
  font-family: var(--font-ui); font-size: var(--text-lg);
  color: var(--text-primary);
}
.v2-palette-input::placeholder { color: var(--text-faint); }
/* Le périmètre est affiché en permanence, pas seulement documenté : un
   utilisateur doit voir que cette palette ne déclenche rien (§20). */
.v2-palette-scope {
  flex: 0 0 auto;
  font-size: var(--text-2xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--text-faint);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xs);
  padding: 1px 5px;
}

.v2-palette-list { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; }
.v2-palette-item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.v2-palette-item.is-active { background: var(--accent-subtle); }
.v2-palette-label { font-size: var(--text-md); color: var(--text-primary); }
.v2-palette-group {
  font-size: var(--text-xs); color: var(--text-faint);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  white-space: nowrap;
}
.v2-palette-empty {
  list-style: none;
  padding: var(--space-4) var(--space-3);
  color: var(--text-faint); font-size: var(--text-md);
}

/* ─── Étroit ────────────────────────────────────────────────────────────────
   Sous 900px la barre latérale se replie d'office : à cette largeur, 258px de
   navigation laissent moins de place au contenu qu'à la structure. */
@media (max-width: 900px) {
  body.ui-v2 .main-content { margin-left: var(--sidebar-collapsed); }
  body.ui-v2 .v2-sidebar { width: var(--sidebar-collapsed); }
  body.ui-v2 .v2-brand-text,
  body.ui-v2 .v2-collapse,
  body.ui-v2 .v2-item-label,
  body.ui-v2 .v2-item-badge,
  body.ui-v2 .v2-foot { display: none; }
  body.ui-v2 .v2-item { justify-content: center; padding: 7px 0; }
  /* Le repli forcé par la largeur doit recevoir EXACTEMENT le même traitement
     que le repli choisi. Ces deux règles étaient portées par `.ui-v2-collapsed`
     seul : sous 900px la colonne faisait 68px mais gardait les titres de groupe
     en toutes lettres — « VUE D'ENSEMB… » débordait — et les entrées
     redevenaient des lignes vides, faute d'initiales. Deux états de repli, un
     seul rendu. */
  body.ui-v2 .v2-group-title {
    height: 1px; padding: 0; margin: var(--space-3) var(--space-4);
    overflow: hidden; color: transparent; background: var(--border-inverse);
  }
  body.ui-v2 .v2-item::before {
    content: attr(data-initial);
    font-family: var(--font-mono); font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
  }
  body.ui-v2 #view-root { padding: var(--space-4); }
  body.ui-v2 .v2-topbar { padding: 0 var(--space-4); }
  .v2-palette-trigger { min-width: 0; }
  .v2-palette-trigger span { display: none; }
}

/* ─── Sélecteur d'espace de travail ────────────────────────────────────────
   L'espace actif est écrit en permanence, au-dessus de la navigation : c'est
   l'incertitude sur « dans quel partenaire suis-je ? » qui fait qu'on saisit
   une donnée au mauvais endroit. Réduit à rien quand la barre est repliée —
   un libellé tronqué serait pire que pas de libellé. */
.v2-workspace:empty { display: none; }
.v2-workspace { padding: 0 var(--space-3, .75rem) var(--space-2, .5rem); }
body.ui-v2-collapsed .v2-workspace { display: none; }