/**
 * css/finance.css
 * Styles for the consolidated financial markets dashboard.
 */

.finance-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  cursor: pointer;
  transition: transform 0.2s var(--ease-out), 
              box-shadow 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out),
              background-color 0.2s var(--ease-out);
}

.finance-kpi-card:hover {
  transform: translateY(-2px);
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-lg);
}

/* Specific hover effects for active indicators */
.finance-kpi-card:nth-child(1):hover {
  border-color: rgba(94, 106, 210, 0.4);
  box-shadow: 0 8px 24px rgba(94, 106, 210, 0.12);
}

.finance-kpi-card:nth-child(2):hover {
  border-color: rgba(251, 191, 36, 0.4);
  box-shadow: 0 8px 24px rgba(251, 191, 36, 0.12);
}

.finance-kpi-card:nth-child(3):hover {
  border-color: rgba(167, 139, 250, 0.4);
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.12);
}

.finance-kpi-card:nth-child(4):hover {
  border-color: rgba(52, 211, 153, 0.4);
  box-shadow: 0 8px 24px rgba(52, 211, 153, 0.12);
}

/* Tab styles for the consolidated dashboard */
.finance-tab-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.finance-tab-btn:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}

.finance-tab-btn.active {
  background: rgba(94, 106, 210, 0.1);
  border-color: rgba(94, 106, 210, 0.35);
  color: var(--accent-purple);
  font-weight: 600;
  box-shadow: 0 0 12px rgba(94, 106, 210, 0.08);
}

/* Layout layout overrides for sub-tabs */
.crypto-wrap {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.crypto-left-pane {
  flex: 1.2;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.crypto-right-pane {
  flex: 0.8;
  min-width: 300px;
}

.market-stats-box {
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
}