/**
 * Card Component - Prime Factors Pro
 * Standardized card containers for dashboard metrics, content sections, and information display.
 * Requirements: 4.1, 4.2, 4.3, 4.4, 4.5, 4.6
 */

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

.card-pfp {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition-base);
}

/* ==========================================================================
   Elevated Variant
   ========================================================================== */

.card-pfp--elevated {
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   Metric Card Variant
   ========================================================================== */

.card-pfp--metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Metric label (e.g., "Portfolio Balance") */
.card-pfp--metric .card-pfp__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: var(--line-height-sm);
}

/* Metric value (e.g., "$12,450.00") */
.card-pfp--metric .card-pfp__value {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: var(--line-height-3xl);
}

/* Change indicator base */
.card-pfp--metric .card-pfp__change {
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--line-height-sm);
}

/* Positive change (value > 0) */
.card-pfp--metric .card-pfp__change--positive {
    color: var(--color-success);
}

/* Negative change (value < 0) */
.card-pfp--metric .card-pfp__change--negative {
    color: var(--color-danger);
}

/* Zero or no change — neutral state, no color applied, preserves layout space */
.card-pfp--metric .card-pfp__change--neutral {
    color: var(--color-text-muted);
}

/* Hidden change indicator — no layout shift via visibility */
.card-pfp--metric .card-pfp__change--hidden {
    visibility: hidden;
}