/* Layout fixes for header, footer, and sidebar positioning */

/* Make the header span 100% width */
.navbar-header {
    width: 100%;
    position: relative;
    left: 0;
    right: 0;
}

/* Make the footer span 100% width */
.d-footer {
    width: 100%;
    position: relative;
    left: 0;
    right: 0;
}

/* Adjust the dashboard-main layout */
.dashboard-main {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin-inline-start: 0 !important; /* Override the margin that makes space for the sidebar */
}

/* Create a container for the main content area */
.dashboard-main-content {
    display: flex;
    flex: 1;
    width: 100%;
}

/* Position the sidebar inside the main content area */
.sidebar {
    position: relative !important; /* Override the fixed positioning */
    height: calc(100vh - 60px); /* Adjust height to account for header */
    overflow-y: auto;
    inset-inline-start: 0 !important; /* Ensure it's visible */
    flex-shrink: 0; /* Prevent sidebar from shrinking */
}

/* Style the main content area - full width */
.dashboard-main-body {
    flex: 1;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0; /* Allow flex item to shrink below content size */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    box-sizing: border-box;
}

/* Ensure cards and content stretch full width */
.dashboard-main-body .card {
    width: 100%;
    max-width: 100%;
}

.dashboard-main-body .table-responsive {
    width: 100%;
}

/* Override any container max-width restrictions inside main body */
.dashboard-main-body .container,
.dashboard-main-body .container-fluid,
.dashboard-main-body .container-xl,
.dashboard-main-body .container--xl {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0;
    padding-right: 0;
}

/* Media queries to handle responsive behavior */
@media (max-width: 1199px) {
    .sidebar {
        position: fixed !important; /* Keep it fixed on mobile */
        height: 100vh;
    }

    .sidebar.sidebar-open {
        inset-inline-start: 0 !important;
    }

    .dashboard-main-body {
        width: 100%;
        max-width: 100%;
    }
}

/* On larger screens, sidebar is in flow so flex handles the width */
@media (min-width: 1200px) {
    .dashboard-main-content {
        display: flex;
        width: 100%;
    }

    .dashboard-main-body {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        max-width: none;
    }
}