/* ═══════════════════════════════════════════════════════════
   COMPONENT — command-bar
   Barre commande imposée à toutes les pages de module.
   Grille 3 colonnes figée :
     [ 🔍 Recherche (flex 1) ]  [ Actions secondaires ]  [ CTA primaire ]
   ───────────────────────────────────────────────────────────
   Règles non négociables :
   - Hauteur uniforme 56 px sur input + tous les boutons
   - Recherche TOUJOURS à gauche, plein largeur disponible
   - Sélecteur période TOUJOURS présent à droite (peut être absent
     uniquement sur Planning calendrier)
   - CTA primaire TOUJOURS à l'extrême droite, vert plein
   - Pas de pills « Aspirer » / « Pilotage » au milieu : ces
     actions secondaires partent dans le kebab `⋯`
   ───────────────────────────────────────────────────────────
   HTML attendu :
     <div class="command-bar">
       <div class="command-bar__search">
         <svg class="command-bar__search-icon">…</svg>
         <input type="search" placeholder="Rechercher…">
       </div>
       <div class="command-bar__actions">
         <button class="command-bar__btn command-bar__btn--ghost">Filtres</button>
         <button class="command-bar__btn command-bar__btn--ghost">3 derniers mois ▾</button>
         <button class="command-bar__btn command-bar__btn--primary">+ Nouveau devis</button>
         <button class="command-bar__btn command-bar__btn--kebab" aria-label="Plus d'actions">⋯</button>
       </div>
     </div>
   ───────────────────────────────────────────────────────────
   Tokens : --soma-card, --soma-r-pill, --soma-sh-xs, --soma-sh-green,
            --soma-green, --soma-green-dark, --soma-green-soft,
            --soma-text, --soma-muted, --soma-bg, --soma-border,
            --soma-font-body, --soma-text-md, --soma-weight-*,
            --soma-s-*, --soma-dur-fast, --soma-ease-out
   ═══════════════════════════════════════════════════════════ */

.command-bar {
  display: flex;
  align-items: stretch;
  gap: var(--soma-s-5);
  min-height: 56px;
  margin: var(--soma-s-9) 0;
}

/* ── Bloc recherche (gauche, flex 1) ─────────────────────── */

.command-bar__search {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0; /* empêche le débordement quand flex shrink */
}

.command-bar__search-icon {
  position: absolute;
  left: var(--soma-s-8);
  width: 18px;
  height: 18px;
  color: var(--soma-muted);
  pointer-events: none;
}

.command-bar__search input {
  width: 100%;
  height: 56px;
  padding: 0 var(--soma-s-8) 0 calc(var(--soma-s-8) + 18px + var(--soma-s-5));
  background: var(--soma-card);
  border: 1px solid transparent;
  border-radius: var(--soma-r-pill);
  color: var(--soma-text);
  font-family: var(--soma-font-body);
  font-size: var(--soma-text-md);
  outline: none;
  box-shadow: var(--soma-sh-xs);
  transition:
    border-color var(--soma-dur-fast) var(--soma-ease-out),
    box-shadow var(--soma-dur-fast) var(--soma-ease-out);
}

.command-bar__search input::placeholder {
  color: var(--soma-muted);
}

.command-bar__search input:focus {
  border-color: var(--soma-green);
  box-shadow: 0 0 0 3px var(--soma-green-soft);
}

/* ── Bloc actions (droite) ──────────────────────────────── */

.command-bar__actions {
  display: flex;
  align-items: stretch;
  gap: var(--soma-s-5);
  flex-wrap: nowrap;
}

.command-bar__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--soma-s-3);
  height: 56px;
  padding: 0 var(--soma-s-8);
  background: var(--soma-card);
  border: 0;
  border-radius: var(--soma-r-pill);
  color: var(--soma-text);
  font-family: var(--soma-font-body);
  font-size: var(--soma-text-md);
  font-weight: var(--soma-weight-bold);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: var(--soma-sh-xs);
  transition:
    background var(--soma-dur-fast) var(--soma-ease-out),
    color var(--soma-dur-fast) var(--soma-ease-out),
    box-shadow var(--soma-dur-fast) var(--soma-ease-out);
}

.command-bar__btn:hover {
  background: var(--soma-bg);
}

.command-bar__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--soma-green-soft), var(--soma-sh-xs);
}

.command-bar__btn-icon {
  width: 16px;
  height: 16px;
  color: var(--soma-muted);
  flex-shrink: 0;
}

.command-bar__btn-chevron {
  width: 12px;
  height: 12px;
  color: var(--soma-muted);
  flex-shrink: 0;
}

/* ── Variante CTA primaire (vert plein) ────────────────── */

.command-bar__btn--primary {
  background: var(--soma-green);
  color: var(--soma-card);
  box-shadow: var(--soma-sh-green);
}

.command-bar__btn--primary .command-bar__btn-icon,
.command-bar__btn--primary .command-bar__btn-chevron {
  color: var(--soma-card);
}

.command-bar__btn--primary:hover {
  background: var(--soma-green-dark);
}

/* ── Variante ghost (filtres, période) ─────────────────── */
/* fond carte, ombre xs, hover vers fond bg */
/* Style par défaut OK — pas besoin d'override */

/* ── Variante kebab (actions secondaires : Aspirer, Pilotage…) ── */

.command-bar__btn--kebab {
  width: 56px;
  padding: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--soma-text-2xl);
  color: var(--soma-muted);
}

.command-bar__btn--kebab:hover {
  background: var(--soma-card);
  box-shadow: var(--soma-sh-xs);
  color: var(--soma-text);
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 980px) {
  .command-bar {
    flex-wrap: wrap;
  }
  .command-bar__search {
    flex-basis: 100%;
  }
  .command-bar__actions {
    flex: 1 1 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .command-bar__btn {
    padding: 0 var(--soma-s-7);
  }
  /* Sur très petit écran, masquer le texte des boutons ghost (garder icône) */
  .command-bar__btn--ghost-icon-only .command-bar__btn-label {
    display: none;
  }
}