/* expense-manager-frontend/css/style.css */

/* Basic styles that might not be directly in Tailwind or for overrides */
html {
    scroll-behavior: smooth;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Custom class for active navigation link in sidebar */
/* This highlights the currently selected navigation item */
.nav-link.active-link {
    background-color: #FEF2F2; /* Tailwind's red-50 */
    color: #DC2626; /* Tailwind's red-600 */
}

/* Hide content sections by default. */
/* JavaScript will manage which section is 'active' and visible. */
.content-section {
    display: none;
}
/* This class will be added by JavaScript to show the active section */
.content-section.active {
    display: block;
}

/* Responsive adjustments for smaller screens (e.g., mobile) */
/* This media query applies styles when the screen width is up to 1023px (Tailwind's 'lg' breakpoint) */
@media (max-width: 1023px) {
    /* Make the overall app layout a column on small screens */
    #app {
        flex-direction: column;
    }

    /* Adjust the main content area to take up available space */
    main {
        flex: 1; /* Allows the main content to grow and fill space */
    }

    /* Provide padding at the top of the main content to avoid overlap with the fixed mobile menu button */
    main {
        padding-top: 4rem; /* Adjust as needed to clear the button */
    }

    /* Position the mobile sidebar open button */
    #openSidebarBtn {
        top: 1rem;   /* 16px from the top */
        left: 1rem;  /* 16px from the left */
    }

    /* The sidebar for mobile view (initially hidden, slides in from left) */
    #sidebar {
        /*
        * fixed: Stays in place when scrolling.
        * inset-y-0 left-0: Sticks to the top, bottom, and left edges.
        * transform -translate-x-full: Initially moves the sidebar completely off-screen to the left.
        * transition-transform duration-300 ease-in-out: Smooth animation when showing/hiding.
        * z-50: Ensures it appears on top of other content.
        */
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        transform: translateX(-100%); /* Hidden by default */
        transition: transform 0.3s ease-in-out;
        z-index: 50;
    }

    /* Class added by JS when mobile sidebar is open */
    #sidebar.show-sidebar {
        transform: translateX(0); /* Slides into view */
    }
}