/* =============================================================================
   SIGNALNEST — NAVIGATION
   .sn-navbar · .sn-tabbar · .sn-segmented-tabs · .sn-pill-toggle
   ============================================================================= */

/* ---- sn-navbar ----------------------------------------------------------
   Barre de navigation supérieure. Écrans sources : toutes les vues
   secondaires (fiche instrument, création de bot, paramètres...).      */
.sn-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sn-space-2);
  height: var(--sn-navbar-height);
  padding-inline: var(--sn-space-1);
  background: var(--sn-color-bg-canvas);
  position: sticky;
  top: 0;
  z-index: var(--sn-z-navbar);
}
.sn-navbar--dark {
  background: var(--sn-color-black);
  color: var(--sn-color-text-inverse);
}
.sn-navbar--bordered { border-bottom: 1px solid var(--sn-color-border-subtle); }

.sn-navbar__back,
.sn-navbar__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sn-tap-target-min);
  height: var(--sn-tap-target-min);
  border-radius: var(--sn-radius-md);
  color: inherit;
  flex-shrink: 0;
}
.sn-navbar__back:active, .sn-navbar__action:active { background: var(--sn-color-bg-surface); }
.sn-navbar--dark .sn-navbar__back:active,
.sn-navbar--dark .sn-navbar__action:active { background: var(--sn-color-border-inverse); }

.sn-navbar__title {
  font-size: var(--sn-text-md);
  font-weight: var(--sn-weight-semibold);
  flex: 1;
  min-width: 0;
  text-align: center;
}
.sn-navbar__title--select { display: inline-flex; align-items: center; justify-content: center; gap: var(--sn-space-1); }

.sn-navbar__actions { display: flex; align-items: center; gap: var(--sn-space-1); flex-shrink: 0; }

/* ---- sn-tabbar ------------------------------------------------------------
   Navigation principale à 5 entrées, item central mis en exergue (FAB).
   Écran source : pied de page, toutes les vues de premier niveau.      */
.sn-tabbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: var(--sn-tabbar-height);
  padding: var(--sn-space-2) var(--sn-space-3) var(--sn-space-3);
  background: var(--sn-color-bg-canvas);
  border-top: 1px solid var(--sn-color-border-subtle);
  position: sticky;
  bottom: 0;
  z-index: var(--sn-z-tabbar);
}

.sn-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: var(--sn-tap-target-min);
  min-height: var(--sn-tap-target-min);
  justify-content: center;
  color: var(--sn-color-text-tertiary);
  font-size: var(--sn-text-2xs);
  font-weight: var(--sn-weight-medium);
  position: relative;
}
.sn-tabbar__item--active { color: var(--sn-color-text-primary); }

.sn-tabbar__badge {
  position: absolute;
  top: 2px; right: 8px;
  width: 7px; height: 7px;
  border-radius: var(--sn-radius-circle);
  background: var(--sn-color-negative-600);
  border: 1.5px solid var(--sn-color-bg-canvas);
}

.sn-tabbar__item--fab {
  width: 52px; height: 52px;
  border-radius: var(--sn-radius-md);
  background: var(--sn-color-bg-inverse);
  color: var(--sn-color-text-inverse);
  align-items: center;
  justify-content: center;
  transform: translateY(-12px);
  box-shadow: var(--sn-shadow-md);
}

/* ---- sn-segmented-tabs -----------------------------------------------------
   Onglets texte avec soulignement, défilement horizontal si besoin.
   Écran source : Graphique / Informations / Données / Feed / Trader ;
   Ordres / Transactions / Bots / Achat récurrent.                     */
.sn-segmented-tabs {
  display: flex;
  gap: var(--sn-space-5);
  border-bottom: 1px solid var(--sn-color-border-subtle);
  overflow-x: auto;
  scrollbar-width: none;
}
.sn-segmented-tabs::-webkit-scrollbar { display: none; }

.sn-segmented-tabs__item {
  position: relative;
  padding: var(--sn-space-3) 0;
  font-size: var(--sn-text-base);
  font-weight: var(--sn-weight-medium);
  color: var(--sn-color-text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
.sn-segmented-tabs__item--active {
  color: var(--sn-color-text-primary);
  font-weight: var(--sn-weight-semibold);
}
.sn-segmented-tabs__item--active::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--sn-color-text-primary);
  border-radius: var(--sn-radius-xs);
}
.sn-segmented-tabs__dot {
  position: absolute; top: 2px; right: -9px;
  width: 6px; height: 6px;
  border-radius: var(--sn-radius-circle);
  background: var(--sn-color-negative-600);
}

/* ---- sn-pill-toggle ---------------------------------------------------------
   Bascule à 2 (ou 3) options, fond plein qui se déplace.
   Écran source : Stratégies intelligentes / Manuel ; Achat / Vendre ;
   Au comptant / Futures.                                              */
.sn-pill-toggle {
  display: flex;
  background: var(--sn-color-bg-surface);
  border-radius: var(--sn-radius-md);
  padding: 3px;
  gap: 3px;
}
.sn-pill-toggle__option {
  flex: 1;
  text-align: center;
  padding: var(--sn-space-2) var(--sn-space-3);
  border-radius: var(--sn-radius-sm);
  font-size: var(--sn-text-sm);
  font-weight: var(--sn-weight-medium);
  color: var(--sn-color-text-secondary);
  transition: background var(--sn-duration-base) var(--sn-ease-standard),
              color var(--sn-duration-base) var(--sn-ease-standard);
}
.sn-pill-toggle__option--active {
  background: var(--sn-color-bg-canvas);
  color: var(--sn-color-text-primary);
  font-weight: var(--sn-weight-semibold);
  box-shadow: var(--sn-shadow-xs);
}
.sn-pill-toggle--market .sn-pill-toggle__option--active[data-side="buy"] {
  background: var(--sn-color-positive-100);
  color: var(--sn-color-positive-600);
}
.sn-pill-toggle--market .sn-pill-toggle__option--active[data-side="sell"] {
  background: var(--sn-color-negative-100);
  color: var(--sn-color-negative-600);
}