/* Main stat color classes */
.stat-expense { 
    color: var(--brand-red); 
    transition: color 0.3s ease;
}
.stat-income { 
    color: var(--brand-green); 
    transition: color 0.3s ease;
}
.stat-saving { 
    color: var(--brand-yellow); 
    transition: color 0.3s ease;
}
.stat-health { 
    color: var(--brand-purple-dark); 
    transition: color 0.3s ease;
}
.stat-default { 
    color: var(--text-primary); 
    transition: color 0.3s ease;
}

/* Recommendation box border color classes */
.recommendation-box { 
    background: var(--bg-tertiary); 
    transition: background-color 0.3s ease;
}
.rec-expense { border-left: 5px solid var(--brand-red); }
.rec-income { border-left: 5px solid var(--brand-green); }
.rec-saving { border-left: 5px solid var(--brand-yellow); }
.rec-health { border-left: 5px solid var(--brand-purple-dark); }
.rec-default { border-left: 5px solid var(--brand-green); }

/* Insight Tile Hover Effects */
.insight-tile {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.insight-tile:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12) !important;
    border-color: currentColor;
}

.insight-tile:active {
    transform: translateY(-2px) scale(1.01);
    transition: all 0.1s ease;
}

/* Responsive Grid Layout - Always Equal Split */
/* Mobile: 1 column × 12 rows */
.insights-grid {
    grid-template-columns: repeat(1, 1fr);
}

/* Small tablets: 2 columns × 6 rows */
@media (min-width: 576px) {
    .insights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets: 3 columns × 4 rows */
@media (min-width: 768px) {
    .insights-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop: 4 columns × 3 rows */
@media (min-width: 1024px) {
    .insights-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Large desktop: 6 columns × 2 rows (optional) */
@media (min-width: 1400px) {
    .insights-grid {
        grid-template-columns: repeat(4, 1fr); /* Keep 4×3 for consistency */
    }
}

/* Mobile Modal Optimizations */
@media (max-width: 768px) {
    /* Make modal body more compact on mobile */
    #insight-detail-modal .modal-body {
        padding: 10px !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
    
    /* Reduce card padding on mobile */
    #insight-detail-modal .modal-body > div {
        padding: 15px !important;
        min-height: auto !important;
        width: 100% !important;
    }
    
    /* Make title smaller on mobile */
    #insight-detail-modal .modal-title {
        font-size: 1rem !important;
    }
    
    /* Scale down primary metric */
    #insight-detail-modal .modal-body h2 {
        font-size: 1.2rem !important;
    }
    
    /* Scale down large metric value */
    #insight-detail-modal .modal-body > div > div > div > div:first-child {
        font-size: 2rem !important;
    }
    
    /* Reduce footer button sizes */
    #insight-detail-modal .modal-footer button {
        font-size: 0.875rem !important;
        padding: 0.375rem 0.75rem !important;
        min-width: 70px !important;
    }
    
    /* Make footer more compact */
    #insight-detail-modal .modal-footer {
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }
    
    /* Reduce insight bullet font size */
    #insight-detail-modal .modal-body p,
    #insight-detail-modal .modal-body div {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
    }
    
    /* Make action section more compact */
    #insight-detail-modal .modal-body > div > div:last-child {
        padding: 15px !important;
        margin-top: 15px !important;
    }
}