/* Sidebar and Content Layout for Larger Screens */
@media (min-width: 769px) {
    body {
        margin: 0;
        padding: 0;
        display: flex;
        height: 100vh;
    }

    #navbar-placeholder {
        display: flex;
    }

    #sidebar-nav {
        width: 270px; /* Default width of the sidebar */
        height: 100vh;
        padding: 10px;
        background-color: var(--bgColor--night);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: width 0.3s ease, background-color 0.3s ease;
    }

    body.light-mode #sidebar-nav {
        background-color: var(--bgColor--day);
    }

    #sidebar-nav.collapsed {
        width: 100px; /* Width when collapsed */
        padding: 10px 5px;
        align-items: center;
    }

    #sidebar-nav.collapsed #side-bar-menu-items {
        display: none; /* Hide menu items when collapsed */
    }

    #sidebar-nav.collapsed #sidebar-title img {
        margin-right: 5px; /* Space between the logo and the title */
        width: 35px;
    }

    #sidebar-title {
        display: flex;
        align-items: center;
        width: 100%; /* Ensure the title and arrow are on the same line */
        margin-top: 20px; /* 20px gap from the toggle button */
        margin-bottom: 50px; /* 50px gap to the items below */
    }

    #sidebar-title img {
        margin-right: 5px;
        transition: margin 0.3s ease, width 0.3s ease;
        width: 25px;
    }

    #sidebar-title h1 {
        font-size: 17px;
        margin: 5px;
        color: var(--darkt);
        transition: font-size 0.3s ease;
    }

    #sidebar-nav.collapsed #sidebar-title h1 {
        font-size: 0;
    }

    #sidebar-nav.collapsed #sidebar-title h1::after {
        content: "PGM"; /* Display 'PGM' when collapsed */
        font-size: 17px;
    }

    body.light-mode #sidebar-title h1 {
        color: var(--lightt);
    }

    #sidebar-title .navbar-brand {
        color: var(--darkt);
        text-decoration: none;
    }

    body.light-mode #sidebar-title .navbar-brand {
        color: var(--lightt);
    }

    #sidebar-title .navbar-brand:hover {
        color: #adb5bd; /* Lighter color on hover */
    }

    body.light-mode #sidebar-title .navbar-brand:hover {
        color: #555; /* Adjust hover color for light mode */
    }

    /* Sidebar link styling */
    .sidebar-link {
        color: var(--darkt);
        text-decoration: none;
        display: block;
        padding: 10px;
        border-radius: 5px;
        width: 100%;
        transition: color 0.3s ease, background-color 0.3s ease;
    }

    body.light-mode .sidebar-link {
        color: var(--lightt);
    }

    .sidebar-link:hover {
        color: #adb5bd;
        background-color: #495057;
    }

    body.light-mode .sidebar-link:hover {
        color: #555;
        background-color: #e0e0e0;
    }

    /* Dropdown styling */
    .dropdown-menu {
        background-color: #343a40;
        border: none;
        width: 100%;
    }

    .dropdown-item {
        color: var(--darkt);
        text-decoration: none;
        padding: 10px;
        transition: color 0.3s ease, background-color 0.3s ease;
    }

    body.light-mode .dropdown-item {
        color: var(--lightt);
    }

    .dropdown-item:hover {
        color: #adb5bd;
        background-color: #495057;
    }

    body.light-mode .dropdown-item:hover {
        color: #555;
        background-color: #e0e0e0;
    }


    /* Toggle Arrow */
    #sidebar-toggle-container {
        position: absolute;
        bottom: 21px;
        right: 1px;
        text-align: right;
    }

    #sidebar-toggle {
        background-color: transparent;
        border: none;
        color: var(--darkt);
        cursor: pointer;
        font-size: 16px;
        transition: transform 0.3s ease, color 0.3s ease;
    }

    body.light-mode #sidebar-toggle {
        color: var(--lightt);
    }

    /* Hide mobile header and nav on larger screens */
    .mobile-header, .mobile-nav {
        display: none;
    }
}

/* Top Navbar for Smaller Screens */
@media (max-width: 768px) {
    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
    }

    #sidebar-nav {
        display: none; /* Hide the sidebar */
    }

    /* Top Navbar styling */
    .mobile-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        padding: 0 10px;
        background-color: var(--bgColor--night);
        z-index: 1000;
    }

    body.light-mode .mobile-header {
        background-color: var(--bgColor--day);
    }

    /* Logo and text styling */
    .mobile-logo {
        display: flex;
        align-items: center;
    }

    .mobile-logo img {
        height: 40px;
        margin-right: 10px;
    }

    .mobile-logo h1 {
        font-size: 20px;
        color: var(--darkt);
        margin: 0;
    }

    body.light-mode .mobile-logo h1 {
        color: var(--lightt);
    }

    /* Hamburger Menu Styling */
    .hamburger-menu {
        font-size: 30px;
        cursor: pointer;
        color: var(--darkt);
    }

    body.light-mode .hamburger-menu {
        color: var(--lightt);
    }

    /* Mobile navigation menu styling */
    .mobile-nav {
        display: none; /* Hidden by default */
        flex-direction: column;
        position: fixed;
        top: 50px;
        right: 0;
        width: 30%;
        background-color: var(--bgColor--night);
        color: var(--darkt);
        z-index: 999;
    }

    body.light-mode .mobile-nav {
        background-color: var(--bgColor--day);
        color: var(--lightt);
    }

    .mobile-nav a {
        padding: 15px 20px;
        text-decoration: none;
        color: var(--darkt);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    body.light-mode .mobile-nav a {
        color: var(--lightt);
    }

    .mobile-header.open + .mobile-nav {
        display: flex;
    }

    #container {
        padding-top: 60px;
    }
}

#side-bar-menu-items {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.client-info {
    margin-top: auto;
    padding: 10px;
    display: flex;
    align-items: center;
    color: var(--darkt);
}

body.light-mode .client-info {
    color: var(--lightt);
}

.client-logo {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--darkt);
    margin-right: 10px;
    object-fit: cover;
}

body.light-mode .client-logo {
    border-color: var(--lightt);
}

.client-info span {
    font-size: 14px;
}

#sidebar-nav.collapsed .client-info span {
    display: none;
}

#sidebar-nav.collapsed .client-logo {
    margin-right: 0;
}