/* =====================================================
   RESPONSIVE DESIGN - Small Screens (MacBook 13")
   ===================================================== */

@media (max-width: 1366px) {
    .budget-health-container {
        max-width: 100% !important;
        padding: 16px !important;
    }

    .budget-summary-header {
        padding: 24px !important;
        margin-bottom: 24px !important;
    }

    .budget-summary-title {
        font-size: 1.5rem !important;
    }

    .budget-stat-card {
        padding: 16px !important;
    }

    .budget-stat-value {
        font-size: 1.5rem !important;
    }

    /* Grid adjustments */
    .budget-summary-stats {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
        gap: 16px !important;
    }

    /* Category cards - reduce to 2 columns on smaller screens */
    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    /* Buttons and inputs */
    input, select, button {
        font-size: 0.95rem !important;
        padding: 8px 12px !important;
    }

    /* Modal adjustments */
    .modal {
        width: 95% !important;
        max-width: 95% !important;
    }

    /* Tab buttons */
    .budget-sub-tab {
        padding: 8px 16px !important;
        font-size: 0.85rem !important;
    }
}

@media (max-width: 1024px) {
    .budget-health-container {
        padding: 12px !important;
    }

    /* Single column on very small screens */
    .category-grid {
        grid-template-columns: 1fr !important;
    }

    .budget-summary-header {
        padding: 16px !important;
    }

    .budget-summary-title {
        font-size: 1.25rem !important;
    }

    .budget-summary-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}