/* ---- Google Fonts (Optional, but recommended for modern look) ---- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---- Apply Font and Base Styles ---- */
body {
    font-family: 'Inter', sans-serif;
    transition: margin-left 0.3s ease-in-out;
}

/* ---- Modern Scrollbar ---- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* ---- Main Layout Transitions ---- */
.sidebar {
    transition: width 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.main-content {
    transition: margin-left 0.3s ease-in-out;
    padding-top: 64px; /* Header height */
    width: 100%;
}

/* ---- Sidebar Styles for Mobile (< 1024px) ---- */
@media (max-width: 1023px) {
    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        z-index: 40; /* Higher z-index for mobile */
        width: 16rem; /* 256px */
    }
    .sidebar.show {
        transform: translateX(0);
    }
    .main-content {
        margin-left: 0 !important; /* Important to override desktop styles */
    }
    body.sidebar-collapsed .main-content {
         margin-left: 0 !important;
    }
}

/* ---- Sidebar Styles for Desktop (>= 1024px) ---- */
@media (min-width: 1024px) {
    /* State: Expanded (Default) */
    .sidebar {
        width: 16rem; /* 256px */
    }
    .main-content {
        margin-left: 16rem;
    }

    /* State: Collapsed */
    body.sidebar-collapsed .sidebar {
        width: 4.5rem; /* 72px */
    }
    body.sidebar-collapsed .main-content {
        margin-left: 4.5rem;
    }
    body.sidebar-collapsed .sidebar .sidebar-text,
    body.sidebar-collapsed .sidebar .sidebar-title {
        opacity: 0;
        visibility: hidden;
        width: 0;
        transition: opacity 0.1s;
    }
    body.sidebar-collapsed .sidebar .sidebar-logo {
        justify-content: center;
    }
     body.sidebar-collapsed .sidebar .sidebar-logo .fa-desktop{
        margin-left: 1rem;
    }
}
