/* =============================================================================
   SIGNALNEST — ACTIONS
   .sn-button · .sn-badge · .sn-icon-tile · .sn-currency-select
   .sn-search-bar · .sn-crypto-icon
   ============================================================================= */

/* ---- sn-button ------------------------------------------------------------
   CTA principal. Écran source : "Trader", "Créer", "Achat BTC",
   "Effectuer un dépôt", "Explorer tous les bots".
   Rappel de marque : rayon plafonné à 6px — jamais de forme pilule.    */
.sn-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sn-space-2);
  height: var(--sn-tap-target-min);
  padding: 0 var(--sn-space-5);
  border-radius: var(--sn-radius-md);
  font-size: var(--sn-text-base);
  font-weight: var(--sn-weight-semibold);
  letter-spacing: var(--sn-tracking-tight);
  transition: transform var(--sn-duration-fast) var(--sn-ease-standard),
              opacity var(--sn-duration-fast) var(--sn-ease-standard);
  white-space: nowrap;
}
.sn-button:active { transform: scale(0.98); }
.sn-button[disabled] { opacity: 0.4; pointer-events: none; }
.sn-button--full { width: 100%; }

.sn-button--primary  { background: var(--sn-color-bg-inverse); color: var(--sn-color-text-inverse); }
.sn-button--positive { background: var(--sn-color-signal-500); color: var(--sn-color-text-on-signal); }
.sn-button--boost    { background: var(--sn-color-boost-500); color: var(--sn-color-text-on-boost); }
.sn-button--secondary{ background: var(--sn-color-bg-surface); color: var(--sn-color-text-primary); }
.sn-button--outline   { background: transparent; color: var(--sn-color-text-primary); box-shadow: inset 0 0 0 1px var(--sn-color-border-strong); }
.sn-button--ghost    { background: transparent; color: var(--sn-color-text-primary); }
.sn-button--danger   { background: var(--sn-color-negative-600); color: var(--sn-color-white); }

.sn-button--sm { height: 36px; padding: 0 var(--sn-space-3); font-size: var(--sn-text-sm); }
.sn-button--icon-only { width: var(--sn-tap-target-min); padding: 0; }

/* ---- sn-badge -------------------------------------------------------------
   Étiquette compacte : levier "10x", statut, tag de type de bot.       */
.sn-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 var(--sn-space-2);
  border-radius: var(--sn-radius-xs);
  font-size: var(--sn-text-2xs);
  font-weight: var(--sn-weight-semibold);
  font-family: var(--sn-font-mono);
  background: var(--sn-color-bg-surface);
  color: var(--sn-color-text-secondary);
}
.sn-badge--signal  { background: var(--sn-color-signal-100); color: var(--sn-color-signal-700); }
.sn-badge--tier    { background: var(--sn-color-tier-100); color: var(--sn-color-tier-600); }
.sn-badge--live::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--sn-color-positive-600);
}
.sn-badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--sn-color-border-strong); }

/* ---- sn-icon-tile -----------------------------------------------------------
   Sélecteur type "icône + libellé" empilé verticalement.
   Écran source : Grille au comptant / DCA au comptant / Iceberg / TWAP. */
.sn-icon-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sn-space-2);
  padding: var(--sn-space-3);
  border-radius: var(--sn-radius-md);
  min-width: 84px;
}
.sn-icon-tile__icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--sn-radius-md);
  background: var(--sn-color-bg-surface);
}
.sn-icon-tile__label { font-size: var(--sn-text-xs); font-weight: var(--sn-weight-medium); text-align: center; }
.sn-icon-tile--selected { box-shadow: inset 0 0 0 1.5px var(--sn-color-text-primary); }
.sn-icon-tile--selected .sn-icon-tile__icon { background: var(--sn-color-bg-inverse); color: var(--sn-color-text-inverse); }

/* ---- sn-currency-select ------------------------------------------------------
   Sélecteur d'unité compact (devise, précision de carnet d'ordres).    */
.sn-currency-select {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 0 var(--sn-space-2);
  border-radius: var(--sn-radius-sm);
  background: var(--sn-color-bg-surface);
  font-size: var(--sn-text-sm);
  font-weight: var(--sn-weight-medium);
  font-family: var(--sn-font-mono);
}

/* ---- sn-search-bar ------------------------------------------------------------
   Champ de recherche avec suggestion inline.
   Écran source : recherche du marché ("DOGE est actuellement...").    */
.sn-search-bar {
  display: flex;
  align-items: center;
  gap: var(--sn-space-2);
  height: 44px;
  padding-inline: var(--sn-space-3);
  border-radius: var(--sn-radius-md);
  background: var(--sn-color-bg-surface);
  color: var(--sn-color-text-tertiary);
}
.sn-search-bar__input {
  border: 0; background: none; outline: none;
  flex: 1; font-size: var(--sn-text-base); color: var(--sn-color-text-primary);
}
.sn-search-bar__input::placeholder { color: var(--sn-color-text-tertiary); }

/* ---- sn-crypto-icon -----------------------------------------------------------
   Avatar de jeton, avec badge de superposition optionnel (devise cotée). */
.sn-crypto-icon {
  position: relative;
  width: 36px; height: 36px;
  border-radius: var(--sn-radius-circle);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--sn-weight-bold);
  font-size: var(--sn-text-sm);
  color: var(--sn-color-white);
  flex-shrink: 0;
}
.sn-crypto-icon--sm { width: 28px; height: 28px; font-size: var(--sn-text-xs); }
.sn-crypto-icon__overlay {
  position: absolute; bottom: -2px; right: -2px;
  width: 16px; height: 16px;
  border-radius: var(--sn-radius-circle);
  border: 2px solid var(--sn-color-bg-canvas);
  display: flex; align-items: center; justify-content: center;
  background: var(--sn-color-neutral-700);
}