/* assets/css/style.css */

/* --- GLOBAL LAYOUT ADJUSTMENTS --- */
html, body {
    height: 100%; /* Important for vh units */
    margin: 0;   /* Remove default body margin */
    /* overflow-x: hidden; is already on #wrapper, no need here */
}

#wrapper {
    overflow-x: hidden;
    /* Removed padding-top: 50px; from here.
       This padding should be on #page-content-wrapper to clear the fixed navbar. */
    padding-top: 0; /* Ensure no unwanted padding on the wrapper itself */
    display: flex; /* Keep this for the flex layout */
    height: 100vh; /* Make the wrapper take full viewport height to contain scrollable areas */
}

/* --- SIDEBAR STYLES --- */
#sidebar-wrapper {
    padding-top: 35px;
    min-height: 100vh;
    width: 15rem; /* The fixed width of your sidebar */
    margin-left: -15rem; /* Default state: hidden (off-canvas) on small screens, or toggled off on desktop */
    transition: margin 0.25s ease-out; /* Smooth transition for slide in/out */

    /* Add visual properties if not already handled by Bootstrap classes in sidebar.php */
    background-color: #f8f9fa; /* Example: light background */
    border-right: 1px solid rgba(0,0,0,.125); /* Example: subtle border */

    /* Ensure the sidebar itself can scroll if its content is too long */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}

#sidebar-wrapper .sidebar-heading {
    padding: 0.875rem 1.25rem;
    font-size: 1.2rem;
}

#sidebar-wrapper .list-group {
    width: 15rem; /* Ensure list group matches sidebar width */
}

/* --- MAIN CONTENT WRAPPER (#page-content-wrapper) --- */
#page-content-wrapper {
    min-width: 100vw; /* On mobile, it initially spans the full viewport width */
    width: 100%; /* Default width for mobile */
    overflow-y: auto; /* Enable vertical scrolling for the main content area */
    height: 100vh; /* Make main content area take full viewport height */

    /* CRITICAL: Padding to prevent content from going under the fixed navbar */
    padding-top: 55px; /* Adjust this value to your navbar's actual height. */
                       /* You had commented out padding-top: 50px; - this is where it needs to be. */
    transition: margin 0.25s ease-out; /* For smooth desktop transitions */
}

/* --- TOGGLE STATES (Affects both mobile and desktop based on current CSS) --- */

/* When wrapper is toggled, sidebar comes into view (margin-left: 0) */
#wrapper.toggled #sidebar-wrapper {
    margin-left: 0;
}

/* When wrapper is toggled, main content gets pushed to the right (desktop) or stays put (mobile overlay if designed that way) */
/* Based on your original structure, this pushes content even on mobile */
#wrapper.toggled #page-content-wrapper {
    /* On smaller screens, if sidebar opens, content will effectively shrink/push.
       This will be handled by the width of the main content area relative to the sidebar. */
    min-width: calc(100vw - 15rem); /* Content shrinks to make space for sidebar */
}


/* --- FIXED NAVBAR ADJUSTMENTS --- */
.navbar.fixed-top {
    left: 0; /* Default: Navbar starts at the left edge on mobile */
    width: 100%; /* Default: Navbar spans full width on mobile */
    z-index: 1030; /* Standard Bootstrap z-index for fixed elements */
}

/* When sidebar is toggled (open) on mobile, the navbar should stay full width */
#wrapper.toggled .navbar.fixed-top {
    left: 0; /* Remains at left */
    width: 100%; /* Remains full width */
}


/* --- MEDIA QUERIES (FOR DESKTOP BEHAVIOR - min-width: 768px) --- */
@media (min-width: 768px) {
    #sidebar-wrapper {
        margin-left: 0; /* On desktop, sidebar is visible by default */
        /* To make the sidebar fixed on desktop: */
        position: sticky; /* Or 'fixed' if you want it absolutely fixed. Sticky is often preferred for sidebars. */
        top: 0; /* Sticks to the top of its containing block */
        height: 100vh; /* Ensure it takes full viewport height */
        z-index: 1020; /* Can be lower than navbar if next to it */
    }

    #page-content-wrapper {
        min-width: 0; /* Reset min-width for desktop */
        width: calc(100% - 15rem); /* Main content takes remaining width */
       /* margin-left: 15rem; /* Push content right by sidebar's width */
    }

    /* Desktop Toggle Behavior: Sidebar hides, content takes full width */
    #wrapper.toggled #sidebar-wrapper {
        margin-left: -15rem; /* Hide sidebar */
    }

    #wrapper.toggled #page-content-wrapper {
        margin-left: 0; /* Content moves to left edge */
        width: 100%; /* Content takes full width */
    }

    /* Adjust navbar for desktop behavior */
    .navbar.fixed-top {
        left: 15rem; /* Navbar starts after the sidebar */
        width: calc(100% - 15rem); /* Navbar fills remaining width */
    }

    /* Adjust navbar when sidebar is toggled (hidden on desktop) */
    #wrapper.toggled .navbar.fixed-top {
        left: 0; /* Navbar moves to left edge */
        width: 100%; /* Navbar takes full width */
    }
}

/* Dark Mode specific styles (keep these, they are fine) */
[data-bs-theme="dark"] body {
    background-color: #212529; /* Dark background */
    color: #e2e6ea; /* Light text */
}

[data-bs-theme="dark"] .card {
    background-color: #343a40; /* Darker card background */
    color: #e2e6ea;
}

[data-bs-theme="dark"] .form-control {
    background-color: #495057;
    color: #e2e6ea;
    border-color: #6c757d;
}

[data-bs-theme="dark"] .form-control:focus {
    background-color: #495057;
    color: #e2e6ea;
    border-color: #86b7fe; /* Bootstrap primary focus color */
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

[data-bs-theme="dark"] .table {
    --bs-table-bg: #343a40;
    --bs-table-color: #e2e6ea;
    --bs-table-striped-bg: #2d3237;
    --bs-table-hover-bg: #3c4349;
    --bs-table-border-color: #495057;
}

[data-bs-theme="dark"] .navbar {
    background-color: #343a40 !important;
}

[data-bs-theme="dark"] .list-group-item-action:hover {
    background-color: #495057 !important;
}

/* Other general UI enhancements */
.card {
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.btn {
    border-radius: 0.5rem;
}

.table-responsive {
    border-radius: 0.75rem;
    overflow-x: auto; /* For small screens */
}