/**
 * Stats Cards - KPI Cards Modernos
 * Transforma listas em cards bonitos
 */

/* ==================== GRID DE STATS ==================== */
.relay-stats,
.stats-list,
.kpi-list,
div:has(> div:contains("Total de")),
div:has(> div:contains("Configurados")),
div:has(> div:contains("Ativos")) {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: 1.5rem !important;
    margin-bottom: 2rem !important;
}

/* ==================== CARD BASE ==================== */
.stat-item,
.kpi-item,
div[class*="stats"] > div,
div[class*="relay"] > div:not(.card):not(.info-box) {
    background: var(--bg-primary, #ffffff) !important;
    border: 1px solid var(--border-light, #e5e5e5) !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
}

.stat-item:hover,
.kpi-item:hover,
div[class*="stats"] > div:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
}

/* ==================== TEXTO DOS CARDS ==================== */

/* Label/Título */
.stat-item > div:first-child,
.kpi-item > div:first-child,
div[class*="stats"] > div > *:first-child {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: var(--text-secondary, #525252) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
}

/* Valor Principal */
.stat-item > div:nth-child(2),
.kpi-item > div:nth-child(2),
div[class*="stats"] > div > *:nth-child(2):not(svg):not(span[class*="badge"]) {
    font-size: 2.25rem !important;
    font-weight: 700 !important;
    color: var(--text-primary, #111827) !important;
    line-height: 1 !important;
    letter-spacing: -0.025em !important;
}

/* Subtítulo/Info Adicional */
.stat-item > div:nth-child(3),
.kpi-item > div:nth-child(3),
div[class*="stats"] > div > *:nth-child(3) {
    font-size: 0.875rem !important;
    color: var(--text-tertiary, #737373) !important;
}

/* ==================== ÍCONES NOS CARDS ==================== */

.stat-item svg,
.kpi-item svg,
div[class*="stats"] > div > svg {
    width: 24px !important;
    height: 24px !important;
    color: var(--text-secondary, #525252) !important;
}

/* Emojis como ícones */
.stat-item::before,
.kpi-item::before {
    font-size: 2rem !important;
    line-height: 1 !important;
}

/* ==================== BADGES/STATUS NOS CARDS ==================== */

.stat-item .badge,
.kpi-item .badge,
div[class*="stats"] .badge {
    margin-top: 0.5rem !important;
}

/* ==================== CORES DE ACCENT ==================== */

/* Card com borda colorida no topo */
.stat-item.primary,
.kpi-item.primary {
    border-top: 3px solid #3b82f6 !important;
}

.stat-item.success,
.kpi-item.success {
    border-top: 3px solid #10b981 !important;
}

.stat-item.warning,
.kpi-item.warning {
    border-top: 3px solid #f59e0b !important;
}

.stat-item.danger,
.kpi-item.danger {
    border-top: 3px solid #ef4444 !important;
}

/* ==================== EMPTY STATE CARD ==================== */

.empty-state-card,
div:contains("Nenhum relay configurado"),
div:contains("Nenhuma gravação"),
div:contains("Nenhum fluxo") {
    background: var(--bg-secondary, #fafafa) !important;
    border: 2px dashed var(--border-medium, #d1d5db) !important;
    border-radius: 1rem !important;
    padding: 3rem !important;
    text-align: center !important;
    color: var(--text-secondary, #525252) !important;
}

.empty-state-card svg,
.empty-state-card img {
    width: 64px !important;
    height: 64px !important;
    opacity: 0.3 !important;
    margin: 0 auto 1rem !important;
}

/* ==================== INFO BOX (Azul) ==================== */

.info-box,
div[class*="info"],
[style*="background: #dbeafe"],
[style*="background:#dbeafe"],
[style*="color: #1e40af"],
[style*="color:#1e40af"] {
    background: #dbeafe !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 0.75rem !important;
    padding: 1rem 1.25rem !important;
    color: #1e40af !important;
    font-size: 0.875rem !important;
    line-height: 1.6 !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
}

.info-box svg,
.info-box::before {
    font-size: 1.25rem !important;
    flex-shrink: 0 !important;
}

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

@media (max-width: 768px) {
    .relay-stats,
    .stats-list,
    div:has(> div:contains("Total de")) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    .stat-item > div:nth-child(2),
    .kpi-item > div:nth-child(2) {
        font-size: 1.875rem !important;
    }
}

@media (max-width: 480px) {
    .relay-stats,
    .stats-list {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== FIX ESPECÍFICO PARA RELAY PAGE ==================== */

/* Reorganizar a página de relay */
body:has([href*="/relays"]) .container > div:not(.card) {
    display: contents !important;
}

/* Stats do relay em grid */
.relay-stats > div,
div:contains("Total de Relays") ~ div,
div:contains("Configurados") ~ div {
    background: white !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 1rem !important;
    padding: 1.5rem !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Transformar lista vertical em grid horizontal */
body:has([href*="/relays"]) .container > *:not(.card):not(h1):not(h2):not(.info-box) {
    display: inline-block !important;
    vertical-align: top !important;
    min-width: 180px !important;
    margin: 0.5rem !important;
}