/**
 * ============================================
 * STAT CARDS COMPONENT CSS
 * Dashboard V3 - Market Analysis
 * ============================================
 */

/* Stats Block */
.stats-block {
    margin-bottom: var(--space-lg);
}

/* Stat Cards Grid */
.stat-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-sm);
}

/* Stat Card */
.stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.stat-card:hover {
    border-color: var(--color-accent-primary);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
}

.stat-card:active {
    transform: translateY(0);
}

.stat-card.active {
    border-color: var(--color-accent-primary);
    background: rgba(59, 130, 246, 0.05);
}

/* Stat Name */
.stat-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

/* Stat Value */
.stat-value {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

/* Stat Change */
.stat-change {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.stat-change.positive {
    color: var(--color-positive);
    background: var(--color-positive-bg);
}

.stat-change.negative {
    color: var(--color-negative);
    background: var(--color-negative-bg);
}

.stat-change.neutral {
    color: var(--color-neutral);
    background: var(--color-neutral-bg);
}

/* Stat Description */
.stat-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin-top: var(--space-xs);
    text-align: center;
}

/* Compact Stat Card Variant */
.stat-card.compact {
    flex-direction: row;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
}

.stat-card.compact .stat-name {
    margin-bottom: 0;
}

.stat-card.compact .stat-change {
    margin-left: auto;
}

/* Large Stat Card Variant */
.stat-card.large {
    padding: var(--space-lg);
}

.stat-card.large .stat-value {
    font-size: var(--font-size-2xl);
}

/* Index Stats Grid (specific for index overview) */
.index-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.index-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-lg);
    background: var(--color-bg-secondary);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.index-stat-card:hover {
    border-color: var(--color-accent-primary);
    box-shadow: var(--shadow-md);
}

.index-stat-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.index-stat-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-primary);
}

.index-stat-change {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.index-stat-change.positive { color: var(--color-positive); }
.index-stat-change.negative { color: var(--color-negative); }

/* Arrow indicators */
.change-arrow {
    font-size: 12px;
}