/* Dashboard Specific Styles */

/* Enhanced Dark Theme Cards for Dashboard using existing variables */
.dark-card {
  background: linear-gradient(145deg, var(--secondary-color), var(--primary-color)) !important;
  border-radius: 15px !important;
  border: 2px solid var(--border-color) !important;
  box-shadow: 0 8px 25px var(--shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  margin-bottom: 1.5rem !important;
  position: relative;
  overflow: hidden;
}

.dark-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.dark-card-header {
  background: linear-gradient(145deg, var(--primary-color), var(--secondary-color)) !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 15px 15px 0 0 !important;
  border-bottom: 2px solid var(--border-color) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dark-card-header h4 {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  margin: 0 !important;
}

.dark-card-header i {
  color: var(--info-color) !important;
  text-shadow: 0 0 10px rgba(23, 162, 184, 0.5) !important;
}

.dark-card-body {
  padding: 1.5rem !important;
  background: linear-gradient(145deg, var(--secondary-color), var(--primary-color)) !important;
}

/* Enhanced Stat Cards using existing variables */
.stat-card {
  background: linear-gradient(145deg, var(--hover-color), var(--secondary-color)) !important;
  border: 2px solid var(--info-color) !important;
  border-radius: 12px !important;
  padding: 1.25rem !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--info-color), var(--accent-color), var(--info-color));
  opacity: 0.8;
}

.stat-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(23, 162, 184, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border-color: var(--accent-color) !important;
}

.stat-card.active-service {
  border-color: var(--success-color) !important;
  background: linear-gradient(145deg, #2d5a3d, var(--secondary-color)) !important;
}

.stat-card.active-service::before {
  background: linear-gradient(90deg, var(--success-color), #2d5a3d, var(--success-color)) !important;
}

.stat-card.coming-soon-service {
  border-color: var(--warning-color) !important;
  background: linear-gradient(145deg, #5c4a1f, var(--secondary-color)) !important;
  opacity: 0.9;
}

.stat-card.coming-soon-service::before {
  background: linear-gradient(90deg, var(--warning-color), #5c4a1f, var(--warning-color)) !important;
}

/* Service Icons and Info using existing variables */
.stat-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1rem;
}

.service-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 4px 10px var(--shadow-color);
}

.service-icon.active {
  background: linear-gradient(145deg, var(--success-color), #2d5a3d) !important;
  color: var(--text-primary) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.service-icon.coming-soon {
  background: linear-gradient(145deg, var(--warning-color), #5c4a1f) !important;
  color: var(--text-primary) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.service-info h6 {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  margin: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Status Badges using existing variables */
.status-badge {
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.status-badge.active {
  background: linear-gradient(145deg, var(--success-color), #2d5a3d) !important;
  color: var(--text-primary) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
}

.status-badge.coming-soon {
  background: linear-gradient(145deg, var(--warning-color), #5c4a1f) !important;
  color: var(--text-primary) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2) !important;
}

/* Metrics Display using existing variables */
.stat-metrics {
  color: var(--text-primary) !important;
}

.metric-row {
  display: flex;
  gap: 1rem;
  margin-bottom: 0.75rem;
}

.metric {
  flex: 1;
  text-align: center;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.metric-value {
  display: block;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.metric-label {
  display: block;
  font-size: 0.7rem !important;
  color: var(--text-secondary) !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
  opacity: 0.9;
}

.metric-footer {
  color: var(--text-secondary) !important;
  font-size: 0.8rem !important;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.2) !important;
  border-radius: 6px;
  border: 1px solid var(--border-color);
}

.metric-footer i {
  color: var(--info-color) !important;
}

/* Coming Soon Content using existing variables */
.coming-soon-content {
  text-align: center;
  color: var(--text-primary) !important;
  padding: 1rem;
}

.coming-soon-content i {
  color: var(--warning-color) !important;
  opacity: 0.8;
}

.coming-soon-content p {
  color: var(--text-secondary) !important;
  margin: 0 !important;
  font-size: 0.85rem !important;
}

/* Dark Info Cards using existing variables */
.dark-info-card {
  background: linear-gradient(145deg, var(--secondary-color), var(--primary-color)) !important;
  border-radius: 15px !important;
  border: 2px solid var(--border-color) !important;
  box-shadow: 0 8px 25px var(--shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.dark-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.dark-info-header {
  background: linear-gradient(145deg, var(--primary-color), var(--secondary-color)) !important;
  padding: 1.25rem 1.5rem !important;
  border-radius: 15px 15px 0 0 !important;
  border-bottom: 2px solid var(--border-color) !important;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dark-info-header h4, .dark-info-header h5 {
  color: var(--text-primary) !important;
  margin: 0 !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.dark-info-header i {
  color: var(--info-color) !important;
  text-shadow: 0 0 10px rgba(23, 162, 184, 0.5) !important;
}

.dark-info-body {
  padding: 1.5rem !important;
  background: linear-gradient(145deg, var(--secondary-color), var(--primary-color)) !important;
  color: var(--text-primary) !important;
}

/* Additional Dashboard Components */
.count-badge {
  background: linear-gradient(145deg, var(--info-color), var(--accent-color)) !important;
  color: var(--text-primary) !important;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.count-badge.inactive {
  background: linear-gradient(145deg, var(--text-muted), var(--border-color)) !important;
  color: var(--text-primary) !important;
}

/* Info Items */
.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  color: var(--text-primary) !important;
  font-size: 0.9rem;
  margin-bottom: 10px;
  border: 1px solid var(--border-color);
}

.info-item.success {
  border-color: var(--success-color);
  background: linear-gradient(135deg, rgba(14, 203, 129, 0.2), rgba(0, 0, 0, 0.3));
}

.info-item.warning {
  border-color: var(--warning-color);
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.2), rgba(0, 0, 0, 0.3));
}

.info-item i {
  color: var(--info-color) !important;
  font-size: 1.1rem;
}

.info-item.success i {
  color: var(--success-color) !important;
}

.info-item.warning i {
  color: var(--warning-color) !important;
}

/* Environment Badges */
.env-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-left: 8px;
}

.env-badge.testnet {
  background: linear-gradient(145deg, var(--warning-color), var(--danger-color));
  color: var(--text-primary);
}

.env-badge.live {
  background: linear-gradient(145deg, var(--success-color), #2d5a3d);
  color: var(--text-primary);
}

.info-detail {
  color: var(--text-primary) !important;
  font-weight: 500;
  margin-top: 10px;
}

.info-detail strong {
  color: var(--text-secondary) !important;
}

/* Balance and Summary Items */
.balance-container {
  max-height: 400px;
  overflow-y: auto;
}

.balance-container.scrollable-balance {
  max-height: 350px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.balance-item, .summary-metric {
  background: linear-gradient(145deg, rgba(0, 0, 0, 0.3), var(--hover-color));
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  color: var(--text-primary) !important;
}

.balance-asset-name, .pair-name {
  color: var(--text-primary) !important;
  font-weight: 600;
}

.balance-details, .trading-pair-item-dark {
  color: var(--text-secondary) !important;
}

/* Fix Trading Pairs Dark Theme - Force dark background */
.dark-info-card .trading-pair-item-dark {
  background: linear-gradient(135deg, var(--secondary-color), var(--primary-color)) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
  transition: all 0.3s ease !important;
}

.dark-info-card .trading-pair-item-dark:hover {
  border-color: var(--info-color) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(23, 162, 184, 0.3) !important;
}

.dark-info-card .trading-pair-item-dark .pair-name {
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  font-size: 0.95rem !important;
}

.dark-info-card .trading-pair-item-dark .price-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: transparent !important;
}

.dark-info-card .trading-pair-item-dark .current-price {
  color: var(--info-color) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  font-family: 'Courier New', monospace !important;
  background: transparent !important;
  text-shadow: 0 0 10px rgba(23, 162, 184, 0.3) !important;
}

.dark-info-card .trading-pair-item-dark .trend-arrow {
  font-size: 0.8rem !important;
  color: var(--text-secondary) !important;
  transition: all 0.3s ease !important;
}

.dark-info-card .trading-pair-item-dark .trend-arrow.text-success,
.dark-info-card .trading-pair-item-dark .trend-arrow.fa-arrow-up {
  color: var(--success-color) !important;
  text-shadow: 0 0 8px rgba(40, 167, 69, 0.5) !important;
}

.dark-info-card .trading-pair-item-dark .trend-arrow.text-danger,
.dark-info-card .trading-pair-item-dark .trend-arrow.fa-arrow-down {
  color: var(--danger-color) !important;
  text-shadow: 0 0 8px rgba(220, 53, 69, 0.5) !important;
}

/* Override any conflicting styles using existing variables */
.dark-card *, .dark-info-card *, .stat-card * {
  color: inherit;
}

.dark-card .text-muted, .dark-info-card .text-muted, .stat-card .text-muted {
  color: var(--text-secondary) !important;
}

.dark-card p,
.dark-info-card p,
.stat-card p,
.dark-card small,
.dark-info-card small,
.stat-card small {
  color: var(--text-primary) !important;
}

/* Price Update Animations */
.price-updated {
  animation: priceFlash 0.6s ease-in-out;
}

.change-updated {
  animation: changeFlash 0.8s ease-in-out;
}

@keyframes priceFlash {
  0% {
    background-color: transparent;
    transform: scale(1);
  }
  50% {
    background-color: rgba(23, 162, 184, 0.3);
    transform: scale(1.02);
  }
  100% {
    background-color: transparent;
    transform: scale(1);
  }
}

@keyframes changeFlash {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.7;
  }
}

/* Trading pair item styling enhancements */
.trading-pair-item-dark .current-price {
  font-weight: 600;
  font-family: 'Courier New', monospace;
  color: var(--info-color) !important;
  text-shadow: 0 0 5px rgba(23, 162, 184, 0.3);
}

.trading-pair-item-dark .trend-arrow {
  margin-left: 0.5rem;
  transition: all 0.3s ease;
}

.trading-pair-item-dark .trend-arrow.text-success {
  color: #28a745 !important;
  text-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

.trading-pair-item-dark .trend-arrow.text-danger {
  color: #dc3545 !important;
  text-shadow: 0 0 5px rgba(220, 53, 69, 0.5);
}

.trading-pair-item-dark .trend-arrow.text-muted {
  color: var(--text-secondary) !important;
}