/* ===========================
   Income Page – Transaction summary cards & grid layout
   Reference: simulation stat boxes (square, prominent)
=========================== */

/* Wrapper for the three summary cards above transactions grid (income + expenses) */
.transaction-totals-square {
    flex-shrink: 0;
}

/* Override pill layout to grid of three square cards (simulation-style) */
.transaction-totals-square > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
    justify-content: stretch;
    align-items: stretch;
}

/* Each summary card: square, prominent (match .simulation-stat-box) */
.transaction-totals-square > div > div {
    border-radius: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid var(--border-primary) !important;
    background-color: var(--bg-tertiary) !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    min-height: 64px;
}

/* Label (Est. Yearly Average:, Monthly Avg:, Total:) – simulation-stat-label style */
.transaction-totals-square > div > div span:first-of-type {
    font-size: 10px !important;
    color: var(--text-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-style: normal !important;
    font-weight: 600 !important;
}

/* Value – simulation-stat-value style (larger, bold) */
.transaction-totals-square > div > div span:last-of-type {
    font-size: var(--font-size-lg) !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    font-style: normal !important;
}

/* Total card keeps green for amount */
.transaction-totals-square > div > div:last-of-type span:last-of-type {
    color: var(--success-green) !important;
}

/* Monthly Avg card keeps purple for amount */
.transaction-totals-square > div > div:nth-of-type(2) span:last-of-type {
    color: var(--brand-purple) !important;
}