:root {
    --sidebar-width: 20%;
    --sidebar-min-width: 60px;
    --sidebar-max-width: 300px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #e0e7ff;
    color: #333;
}
nav{
    text-transform: capitalize;
}
main{
    margin-top: 40px;
}
.top-navbar{
    background-color: #f9fcff;
    display: flex;
    gap: 30px;
    align-items: center;
    padding: 15px 30px;
    color: #333;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.top-navbar .left-section{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 20px;
}
.top-navbar .left-section img.logo{
    height: 50px;
    width: auto;
}
.top-navbar .site-info{
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.top-navbar .site-info .site-name{
    font-size: 22px;
    font-weight: bold;
}

.right-section{
    margin-left: 7%;
}
.top-navbar .right-section{
    display: flex;
    color: black;
}

.top-navbar .right-section a{
    color: #333;
    text-decoration: none;
    padding: 14px 20px;
    display: block;
    transition: color 0.3s ease;
}
.top-navbar .right-section a:hover{
    color: #0037fd;
}

/* --- DROPDOWN --- */
.dropdown{
    position: relative;
}

.dropdown-content{
    display: none;
    position: absolute;
    background-color: #f4f7fa;
    min-width: 170px;
    top: 100%;
    left: 0;
    padding: 5px 0;
}

.dropdown:hover .dropdown-content,
.dropdown-content:hover {
    display: block;
}

/* --- SUBMENU --- */
.dropdown-submenu{
    position: relative;
}

.submenu-content{
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    min-width: 60px;
    background-color: #eee;
    padding: 5px 0;
}


.dropdown-submenu:hover .submenu-content,
.submenu-content:hover {
    display: block;
}

/* Sidebar Styles */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 100vh;
    background-color: #f9fcff;
    color: #333;
    padding: 20px 0;
    box-shadow: 2px 0 5px rgba(0,0,0,0.1);
    overflow-y: visible;
    overflow-x: visible;
    z-index: 1000;
}

.sidebar-header {
    text-align: center;
    padding: 20px;
    border-bottom: 1px solid #ddd;
    position: relative;
}

.toggle-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: none;
    border: none;
    font-size: 20px;
    color: #333;
    cursor: pointer;
    display: none; /* Hidden by default, shown on mobile */
}

.sidebar-header .logo {
    height: 50px;
    width: auto;
    margin-bottom: 10px;
}

.sidebar-header .site-name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-menu li {
    position: relative;
}
.sidebar-menu li .dropdown {
    position: relative;
}
.sidebar .dropdown {
    position: relative;
}

.sidebar-menu a {
    display: block;
    color: #333;
    text-decoration: none;
    padding: 15px 20px;
    transition: background-color 0.3s ease;
}

.sidebar-menu a:hover {
    background-color: #e0e7ff;
}

.sidebar-menu i {
    margin-right: 10px;
}

/* Sidebar Dropdown */
.sidebar .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    left: 0;
    top: 0;
    width: 200px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}

.sidebar .dropdown:hover .dropdown-content {
    display: block;
    margin-left: 100%;
}

.sidebar .dropdown-content li a {
    padding: 10px 30px;
    font-size: 14px;
}

.sidebar .submenu-content {
    display: none;
    background-color: #eee;
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 100%;
    top: 0;
    width: 200px;
}

.sidebar .dropdown-submenu:hover .submenu-content {
    display: block;
}

.sidebar .submenu-content li a {
    padding: 8px 20px;
    font-size: 13px;
}

/* Main Content Adjustment */
.main-content {
    margin-left: 60px;
    padding: 20px;
    transition: margin-left 0.3s ease;
}

/* Collapsed Sidebar */
.sidebar.collapsed {
    width: 60px;
    min-width: 60px;
    max-width: 60px;
}

.sidebar.collapsed .sidebar-header .logo,
.sidebar.collapsed .sidebar-header .site-name,
.sidebar.collapsed .sidebar-header p {
    display: none;
}

.sidebar.collapsed .sidebar-menu a {
    padding: 15px;
    text-align: center;
}

.sidebar.collapsed .sidebar-menu a i {
    margin-right: 0;
}

.sidebar.collapsed .sidebar-menu a span {
    display: none;
}

.sidebar.collapsed .main-content {
    margin-left: 60px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .sidebar {
        width: 60px;
        min-width: 60px;
        max-width: 60px;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        transition: width 0.3s ease;
        z-index: 1000;
    }

    .sidebar:not(.collapsed) {
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }

    .toggle-btn-mobile {
        position: fixed;
        top: 20px;
        right: 20px;
        background: #f9fcff;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 10px;
        font-size: 20px;
        color: #333;
        cursor: pointer;
        z-index: 1001;
        display: block;
    }

    .main-content {
        margin-left: 60px;
        padding: 20px;
        transition: margin-left 0.3s ease;
    }

    .sidebar:not(.collapsed) + .toggle-btn-mobile + .main-content,
    .sidebar:not(.collapsed) ~ .main-content {
        margin-left: 0;
    }
}



