/* ==========================================================================
   Stats Module - Consolidated Stat Card System
   ==========================================================================

   This module provides all stat card variants for dashboards and analytics.
   Consolidates definitions from: design-system.css, intelligence.css,
   content-hub.css, opportunities.css, tenants.css

   Created: 2026-01-11 (Phase 3 Package 3)
   ========================================================================== */

/* ==========================================================================
   Base Stat Card
   ========================================================================== */

.stat-card {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    transition: all 0.2s ease;
}

/* Clickable stat cards */
a.stat-card {
    text-decoration: none;
    display: block;
}

a.stat-card:hover,
.stat-card:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    cursor: pointer;
}

/* Active/selected state */
.stat-card.active {
    border: 2px solid var(--primary);
    background: rgba(255, 196, 0, 0.05);
}

/* ==========================================================================
   Stat Card Icon (Gradient Background)
   ========================================================================== */

.stat-card-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-card-icon i[data-lucide] {
    width: 24px;
    height: 24px;
    color: white;
}

/* ==========================================================================
   Icon Color Variants (BEM: .stat-card--{color})
   Use these for icon gradient backgrounds
   ========================================================================== */

.stat-card--primary .stat-card-icon {
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
}
.stat-card--primary .stat-card-icon i[data-lucide] {
    color: var(--text-primary);
}

.stat-card--purple .stat-card-icon {
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-purple-400));
}

.stat-card--cyan .stat-card-icon {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-cyan-400));
}

.stat-card--amber .stat-card-icon {
    background: linear-gradient(135deg, var(--warning), var(--accent-amber-400));
}

.stat-card--emerald .stat-card-icon,
.stat-card--success .stat-card-icon {
    background: linear-gradient(135deg, var(--success), var(--accent-emerald-400));
}

.stat-card--rose .stat-card-icon,
.stat-card--error .stat-card-icon {
    background: linear-gradient(135deg, var(--error), var(--accent-rose-400));
}

.stat-card--sky .stat-card-icon,
.stat-card--info .stat-card-icon {
    background: linear-gradient(135deg, var(--accent-sky), var(--accent-sky-400));
}

.stat-card--slate .stat-card-icon {
    background: linear-gradient(135deg, var(--gray-600), var(--gray-700));
}

/* ==========================================================================
   Full Background Variants (Legacy: .stat-card.{color})
   Use these for full-card colored backgrounds
   ========================================================================== */

.stat-card.primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    color: var(--text-primary);
}

.stat-card.amber {
    background: linear-gradient(135deg, var(--warning) 0%, var(--warning) 100%);
    border: none;
    color: white;
}

.stat-card.purple {
    background: linear-gradient(135deg, var(--accent-purple) 0%, var(--accent-purple) 100%);
    border: none;
    color: white;
}

.stat-card.slate {
    background: linear-gradient(135deg, var(--gray-600) 0%, var(--gray-700) 100%);
    border: none;
    color: white;
}

/* ==========================================================================
   Highlight Variants (Subtle Border Accent)
   Use these for cards that need visual emphasis without full backgrounds
   ========================================================================== */

/* Success highlight - green accent */
.stat-card.success,
.stat-card.exceptional,
.stat-card--highlight-success {
    border-color: var(--success);
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(34, 197, 94, 0.05) 100%);
}

/* Warning highlight - amber accent */
.stat-card.warning,
.stat-card.traffic,
.stat-card.good,
.stat-card.high,
.stat-card--highlight-warning {
    border-color: var(--warning);
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.stat-card.warning .stat-value,
.stat-card.high .stat-value {
    color: var(--warning);
}

/* Error highlight - red accent */
.stat-card.error,
.stat-card.critical,
.stat-card--highlight-error {
    border-color: var(--error);
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(239, 68, 68, 0.05) 100%);
}

.stat-card.error .stat-value,
.stat-card.critical .stat-value {
    color: var(--error);
}

/* Info highlight - blue accent */
.stat-card.strong,
.stat-card.medium,
.stat-card--highlight-info {
    border-color: var(--info);
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(59, 130, 246, 0.05) 100%);
}

/* Primary highlight - yellow accent (legacy .highlight class) */
.stat-card.highlight {
    border-color: var(--primary);
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(255, 196, 0, 0.05) 100%);
}

/* ==========================================================================
   Stat Card Content
   ========================================================================== */

.stat-card-content {
    flex: 1;
    min-width: 0;
}

.stat-card h3,
.stat-card-label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--text-secondary);
    margin: 0 0 var(--spacing-xs) 0;
}

.stat-card .stat-value,
.stat-value {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--text-primary);
    line-height: 1.2;
}

.stat-card .stat-description,
.stat-description {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

/* ==========================================================================
   Stat Change Indicator (Percentage Changes)
   ========================================================================== */

.stat-card .stat-change,
.stat-change {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
}

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

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

/* On colored backgrounds, use lighter colors */
.stat-card.primary .stat-change,
.stat-card.amber .stat-change,
.stat-card.purple .stat-change,
.stat-card.slate .stat-change {
    opacity: 0.9;
}

.stat-card.primary .stat-change.positive,
.stat-card.amber .stat-change.positive,
.stat-card.purple .stat-change.positive,
.stat-card.slate .stat-change.positive {
    color: var(--success-light);
}

.stat-card.primary .stat-change.negative,
.stat-card.amber .stat-change.negative,
.stat-card.purple .stat-change.negative,
.stat-card.slate .stat-change.negative {
    color: var(--error-light);
}

/* ==========================================================================
   Stat Value Variants
   Consolidated from: intelligence.css, ai-visibility.css
   ========================================================================== */

/* Positive/negative value coloring */
.stat-value.positive {
    color: var(--success);
}

.stat-value.negative {
    color: var(--error);
}

/* Score emphasis (AI Visibility) */
.stat-value.score {
    color: var(--primary);
}

/* Icon inside stat value */
.stat-value i[data-lucide] {
    width: 24px;
    height: 24px;
    color: var(--primary);
}

/* Icon inside stat label */
.stat-label i[data-lucide] {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* Subtitle below stat value */
.stat-subtitle {
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
    margin-top: var(--spacing-xs);
}

/* ==========================================================================
   Stats Grid Layout
   ========================================================================== */

.stats-grid,
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

/* 4-column grid for larger screens */
.stats-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1024px) {
    .stats-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .stats-grid,
    .stat-grid,
    .stats-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Context-Specific Overrides
   ========================================================================== */

/* Opportunities page - special hover behavior */
.opportunities-stats-grid .stat-card:hover,
.opportunities-stats-grid .stat-card.active {
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.opportunities-stats-grid .stat-card.active {
    background: rgba(255, 196, 0, 0.05);
}

/* Tenants page - compact stat cards */
.stats-cards .stat-card h3 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-normal);
}

.stats-cards .stat-card .value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--info);
}

.stats-cards .stat-card .label {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
}