/* ==================== components/cards.css ==================== */
/* Composant Cards/Boxes unifié pour fxlive.trading */

/* ==================== CARD PRINCIPALE ==================== */

/* Nouvelle classe card (pour migration progressive) */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-block);
  padding: var(--spacing-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
  margin-bottom: var(--section-gap);
}

.card:hover {
  box-shadow: var(--shadow-sm);
}

.card:last-child {
  margin-bottom: 0;
}

/* Compatibilité avec l'ancien système */
.account-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-block);
  padding: 0.5em;
  margin: 0 auto var(--section-gap);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  width: 100%;
  max-width: none;
  transition: box-shadow var(--transition-fast);
}

/* ✅ Exception : footer citation doit avoir overflow: visible */
.account-block.quote-block {
  overflow: visible !important;
}

.account-block:hover {
  box-shadow: var(--shadow-sm);
}

.account-block:last-child {
  margin-bottom: 0;
}

/* Padding ajusté sur desktop */
@media (min-width: 900px) {
  .account-block {
    padding-bottom: 6px;
  }
}

/* ==================== HEADER DE CARD ==================== */

.account-header-row {
  display: grid;
  gap: var(--box-gap);
  /* margin-bottom: var(--spacing-sm); */
}

/* Grille par défaut : 6 colonnes */
.account-header-row {
  grid-template-columns: repeat(6, 1fr);
}

/* Cas particuliers de colonnes */
.account-header-row.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.account-header-row.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

/* Responsive : 2 colonnes sur tablette */
@media (max-width: 768px) {
  .account-header-row {
    grid-template-columns: repeat(6, 1fr);
  }
  
  /* ✅ Exception : footer contact reste en 3 colonnes */
  .account-header-row.contact-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ==================== BOXES / STATS ==================== */

/* Box de base */
.account-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  /* padding: var(--spacing-md); */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  text-decoration: none;
  color: var(--color-text);
  text-align: center;
  min-height: auto;
  min-width: 0;
  overflow: hidden;
}

/* ✅ Exception : quote box doit avoir overflow: visible */
.account-box.quote-box {
  overflow: visible !important;
}

.account-box:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

/* Box cliquable */
.clickable-box {
  cursor: pointer;
}

.clickable-box:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.clickable-box:active {
  transform: translateY(0);
}

/* Liens dans les boxes */
.account-link {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  /* padding: var(--spacing-md); */
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
  min-width: 0;
  overflow: hidden;
}

.account-link:hover {
  background: var(--color-bg-secondary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ==================== SPANS (largeurs de colonnes) ==================== */

.span-2 {
  grid-column: span 2;
}

.span-3 {
  grid-column: span 3;
}

.span-4 {
  grid-column: span 4;
}

.span-4 {
  grid-column: span 4;
}

.span-5 {
  grid-column: span 5;
}

.span-6 {
  grid-column: span 6;
}

/* ==================== LABELS ET TEXTES ==================== */

.account-label {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  text-align: center;
  margin: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Classes spécifiques pour les valeurs */
.account-number,
.account-equity,
.account-pl-eur {
  font-size: 1rem;
  font-weight: var(--font-weight-normal);
  color: var(--color-text-secondary);
  line-height: var(--line-height-tight);
  text-align: center;
  margin: 0;
}

/* Classes spécifiques pour les labels (ligne du haut) */
.account-balance,
.account-pl-pct,
.gain-label {
  font-size: 1rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
  text-align: center;
  margin: 0;
}

.account-details {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
}

.account-details small {
  font-size: inherit;
}

/* ==================== GAIN BOX (valeurs financières) ==================== */

.gain-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-md);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: all var(--transition-fast);
  text-align: center;
  min-height: 60px;
  min-width: 0;
  overflow: hidden;
}

.gain-box:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

/* ✅ AJOUTÉ : Forcer les drawdowns en NOIR dans les gain-box */
.gain-box .text-profit,
.gain-box .text-loss,
.gain-box .profit-value,
.gain-box .loss-value {
  color: var(--color-text) !important;  /* Force la couleur noire */
}

/* Valeur du gain/perte */
.gain-value {
  font-size: 1rem;
  font-weight: var(--font-weight-normal);
  line-height: 1;
  text-align: center;
  margin: 0;
}

/* ✅ AJOUTÉ : Ajouter le "+" devant les valeurs positives */
.positive-value::before {
  content: '+';
}

/* ==================== TOTAL BALANCE BOX ==================== */

.total-balance-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  max-width: none;
  width: 100%;
  background-color: var(--color-profit);
  color: white;
  text-align: center;
  border-radius: var(--radius);
  padding: var(--spacing-md);
  min-height: 60px;
  transition: all var(--transition-fast);
  min-width: 0;
  overflow: hidden;
}

/* Hover pour la box Total - garde le fond vert */
.total-balance-box:hover {
  background-color: var(--color-profit);
  filter: brightness(1.05);
  box-shadow: var(--shadow-sm);
}

.total-balance {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
  text-align: center;
}

.total-equity {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  margin: 0;
  text-align: center;
}

/* ==================== COULEURS PROFIT / LOSS ==================== */

/* Textes */
.profit-value,
.text-profit {
  color: var(--color-profit) !important;
}

.loss-value,
.text-loss {
  color: var(--color-loss) !important;
}

/* Backgrounds */
.profit-bg {
  background-color: var(--color-profit-bg) !important;
  border-color: var(--color-profit) !important;
}

.loss-bg {
  background-color: var(--color-loss-bg) !important;
  border-color: var(--color-loss) !important;
}

/* Box avec effet profit/loss */
.box-profit {
  border-left: 3px solid var(--color-profit);
}

.box-loss {
  border-left: 3px solid var(--color-loss);
}

/* ==================== COULEURS BUY / SELL ==================== */

.buy-value,
.text-buy {
  color: var(--color-buy) !important;
}

.sell-value,
.text-sell {
  color: var(--color-sell) !important;
}

.buy-bg {
  background-color: rgba(33, 150, 243, 0.1) !important;
  border-color: var(--color-buy) !important;
}

.sell-bg {
  background-color: rgba(255, 152, 0, 0.1) !important;
  border-color: var(--color-sell) !important;
}

/* ==================== BADGES ET TAGS ==================== */

.badge {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  white-space: nowrap;
}

.badge-success {
  background-color: var(--color-success);
  color: white;
}

.badge-warning {
  background-color: var(--color-warning);
  color: white;
}

.badge-error {
  background-color: var(--color-error);
  color: white;
}

.badge-info {
  background-color: var(--color-info);
  color: white;
}

.badge-secondary {
  background-color: var(--color-text-secondary);
  color: white;
}

/* ==================== BLOCKS SPÉCIAUX ==================== */

/* Block total (agrégation de comptes) */
.total-block {
  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-bg-secondary) 100%);
  border: 2px solid var(--color-primary);
}

/* Block caché */
.hidden-block {
  opacity: 0.6;
  filter: grayscale(50%);
}

.hidden-block:hover {
  opacity: 1;
  filter: grayscale(0%);
}

/* Block désactivé */
.disabled-block {
  opacity: 0.5;
  pointer-events: none;
}

/* ==================== TOGGLE BLOCK (collapsible) ==================== */

.toggle-block {
  position: relative;
}

.toggle-block.collapsed .account-header-row ~ * {
  display: none;
}

.toggle-block .toggle-icon {
  transition: transform var(--transition-fast);
}

.toggle-block.collapsed .toggle-icon {
  transform: rotate(-180deg);
}

/* ==================== ANIMATIONS ==================== */

/* Fade in pour les nouvelles boxes */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.account-box.fade-in,
.gain-box.fade-in {
  animation: fadeIn 0.3s ease;
}

/* Pulse pour attirer l'attention */
@keyframes pulse-subtle {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(33, 150, 243, 0);
  }
}

.account-box.highlight {
  animation: pulse-subtle 2s infinite;
}

/* ==================== ICÔNES DANS LES BOXES ==================== */

.account-box .icon,
.gain-box .icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.account-box .icon-sm {
  width: 16px;
  height: 16px;
}

.account-box .icon-lg {
  width: 32px;
  height: 32px;
}

/* ==================== LOADING STATE ==================== */

.account-box.loading {
  position: relative;
  overflow: hidden;
}

.account-box.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  animation: loading 1.5s infinite;
}

@keyframes loading {
  100% {
    left: 100%;
  }
}

/* ==================== RESPONSIVE ==================== */

/* Tablette */
@media (max-width: 768px) {
  /*.account-box,
  .gain-box {
    padding: var(--spacing-sm);
  }*/
  
  .account-label {
    font-size: var(--font-size-xs);
  }
  
  .gain-value {
    font-size: var(--font-size-base);
  }
}

/* Mobile - Grille 3 colonnes */
@media (max-width: 480px) {
  /* Passer la grille en 3 colonnes sur mobile */
  .account-header-row {
    grid-template-columns: repeat(6, 1fr);
  }
  
  /* ✅ Exception : footer contact reste en 3 colonnes */
  .account-header-row.contact-row {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  /* Total Balance : 2 colonnes sur 3 */
  .total-balance-box {
    grid-column: span 2 !important;
  }
  
  /* Réinitialiser tous les spans personnalisés */
  /*.span-2,
  .span-3,
  .span-4 {
    grid-column: span 1;
  }*/
  
  /* Padding réduit */
  .account-block {
    padding: 0.25em;
  }
  
  .account-box,
  .gain-box {
    padding: var(--spacing-xs);
  }
  
  /* ✅ AJOUTÉ : Augmenter la taille du nom du compte en mobile */
  .account-label {
    font-size: 1rem;  /* Même taille que les autres valeurs de première ligne */
    font-weight: var(--font-weight-bold);
  }
}

/* ==================== PRINT ==================== */

@media print {
  .account-box,
  .gain-box {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  
  .account-box:hover,
  .gain-box:hover {
    transform: none;
    box-shadow: none;
  }
}

/* ==================== ACCESSIBILITÉ ==================== */

.account-box:focus-visible,
.account-link:focus-visible,
.gain-box:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==================== THÈME SOMBRE - AJUSTEMENTS ==================== */

:root[data-theme="dark"] .account-box,
:root[data-theme="dark"] .gain-box {
  background: rgba(255, 255, 255, 0.03);
}

:root[data-theme="dark"] .account-box:hover,
:root[data-theme="dark"] .gain-box:hover {
  background: rgba(255, 255, 255, 0.06);
}