/* Custom Styles */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f1f5f9; /* slate-100 */
}

/* Active state for sidebar links */
.nav-link.active {
    background-color: #e2e8f0; /* slate-200 */
    color: #0f172a; /* slate-900 */
}

/* Active state for mobile bottom nav links */
.nav-link-mobile.active-mobile {
    color: #4f46e5; /* indigo-600 */
}

/* Hide sections by default */
.main-section {
    display: none;
}
#dashboard-section {
    display: block;
}

/* Custom scrollbar for better aesthetics */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9; /* slate-100 */
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1; /* slate-300 */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8; /* slate-400 */
}

/* Animation for modals */
.modal-enter {
    animation: fadeIn 0.3s ease-out;
}
.modal-leave {
    animation: fadeOut 0.3s ease-in;
}
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes fadeOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

/* Calendar Styles */
.calendar-day {
    transition: background-color 0.2s;
}
.calendar-day.has-transactions {
    background-color: #dbeafe; /* blue-200 */
    font-weight: bold;
}
.calendar-day.today {
    background-color: #4f46e5; /* indigo-600 */
    color: white;
}

/* Heatmap Styles */
.heatmap-cell {
    transition: transform 0.2s;
}
.heatmap-cell:hover {
    transform: scale(1.1);
    z-index: 10;
    position: relative;
}

/* --- RESPONSIVE BREAKPOINTS --- */

/* Tablets (768px to 1024px) */
@media (max-width: 1024px) {
    #analysis-section .grid {
        grid-template-columns: 1fr;
    }
    #settings-section .grid {
        grid-template-columns: 1fr;
    }
    #budget-progress-full {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobiles (< 768px) */
@media (max-width: 767px) {
    /* General */
    body {
        font-size: 14px;
    }
    .p-4.lg\:p-8 {
        padding: 1rem;
    }
    .pb-20.lg\:pb-8 {
        padding-bottom: 5rem;
    }
    
    /* Header */
    header h1 {
        font-size: 1.25rem;
    }
    header button span {
        display: none;
    }
    header button i {
        margin-right: 0;
    }

    /* Dashboard */
    #dashboard-section .grid {
        grid-template-columns: 1fr;
    }
    #dashboard-section .lg\:grid-cols-3 {
         grid-template-columns: 1fr;
    }
    #dashboard-section .lg\:col-span-2 {
        grid-column: span 1 / span 1;
    }
    #dashboard-section .mt-2.text-3xl {
        font-size: 1.875rem;
    }

    /* Budget Section */
    #budget-progress-full {
        grid-template-columns: 1fr;
    }

    /* Analysis Section */
    #analysis-section .lg\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
     #analysis-section .lg\:col-span-2 {
        grid-column: span 1 / span 1;
    }

    /* Settings Section */
     #settings-section .md\:grid-cols-2 {
        grid-template-columns: 1fr;
    }

    /* Bills Section */
    #bills-list .flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}