/* ==============================
   DASHBOARD / PAGES WITH SIDEBAR
============================== */


/* Full app area under navbar */
.dashboard-app {
    display: flex;
    height: calc(100vh - 56px); /* navbar height */
    flex: 1;
}

/* Sidebar */
.dashboard-sidebar {
    top: 56px; /* height of navbar */
    left: 0;
    width: 260px;
    
    overflow-y: auto;
    background: white;
    border-right: 1px solid #dee2e6;
    z-index: 1000;
    overflow-x: hidden;
    overflow-y: hidden;
}

/* Main column */
.dashboard-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}




    /* Only content scrolls */
    .dashboard-content {
        padding: 2rem;
        min-height: calc(100vh - 56px); /* full height minus navbar */
        background: #f8f9fa;
    }

    /* Footer inside column */
    .dashboard-footer {
        margin-left: 260px; /* same width as sidebar */
        background: #222; /* your footer bg */
        padding: 2rem;
        color: white;
    }

    @media (max-width: 767.98px) {


        .offcanvas .dashboard-sidebar {
            width: 100% !important;
            overflow-y: hidden;
        }

        .dashboard-content {
            margin-left: 0 !important; /* Remove sidebar margin on mobile */
            padding: 1rem !important; /* Less padding on small screens */
            width: 100% !important; /* Full width */
        }

        /* Optional: if your wrapper or main container has width limits */
        .dashboard-main {
            width: 100% !important;
        }
    }

    .sidebar-link:hover {
        background-color: #dee2e6;
        color: var(--secondary) !important;
    }

    .sidebar-link.active {
        background-color: #dee2e6 !important;
        color: var(--secondary) !important;
    }


    .logout {
        background-color: transparent;
    }

        .logout:hover {
            background-color: transparent !important;
            color: red !important;
        }