/* ============================================================
   PBI Monitor — Cards (.pgo-card, stats, empty state)
   ============================================================ */

.pgo-card {
    background: linear-gradient(135deg, var(--bg-card-start), var(--bg-card-end));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

@media (prefers-reduced-motion: reduce) {
    .pgo-card {
        transition: none;
    }
}

.pgo-card:hover {
    border-color: var(--border-strong-hover);
}

.pgo-stats-card {
    background: linear-gradient(135deg, var(--bg-card-start), var(--bg-card-end));
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-base), border-color var(--transition-base);
}

@media (prefers-reduced-motion: reduce) {
    .pgo-stats-card {
        transition: none;
    }
}

.pgo-stats-card:hover {
    transform: translateY(-3px);
    border-color: var(--border-strong-hover);
}

.pgo-stats-card .number {
    font-size: var(--text-display);
    font-weight: var(--font-bold);
    color: var(--color-primary);
}

.pgo-stats-card .label {
    color: var(--text-muted-alt);
    font-size: var(--text-base);
    margin-top: var(--space-sm);
}

.pgo-empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-md);
    color: var(--text-empty);
}

.pgo-empty-state i {
    font-size: var(--size-icon-empty);
    margin-bottom: var(--space-md);
    display: block;
}

.health-ring-container {
    position: relative;
}

@media (max-width: 992px) {
    .pgo-stats-card .number {
        font-size: var(--text-3xl);
    }
}

@media (max-width: 768px) {
    .pgo-card {
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-sm);
    }

    .pgo-stats-card {
        padding: var(--space-md);
        border-radius: var(--radius-md);
    }

    .pgo-stats-card .number {
        font-size: var(--text-2xl);
    }

    .pgo-stats-card .label {
        font-size: var(--text-sm);
    }

    .pgo-empty-state {
        padding: var(--space-2xl) var(--space-lg);
    }

    .pgo-empty-state i {
        font-size: var(--space-2xl);
    }
}

@media (max-width: 480px) {
    .pgo-stats-card .number {
        font-size: var(--text-xl);
    }
}