/*Roboto and Rubik Fonts*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
h1, h2, h3, h4, h5, h6 {
    font-family: "Rubik", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

p, label {
    font-family: "Roboto", sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
}
.nav-link.dropdown-toggle::after {
display: none !important;
}
/* Add this rule to Site.css */
.navbar {
    margin-left: 220px;
    transition: margin-left 0.3s ease;
    z-index: 1040;
    border-bottom: 1px solid #95959521;
}

.nav-link {
    color: #959595 !important;
}

/* Adjust when sidebar is collapsed */
.sidebar.collapsed ~ .navbar {
    margin-left: 60px;
}
/* Sidebar base */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 220px;
    background-color: #565656;
    padding-top: 10px; /* height of navbar */
    transition: width 0.3s ease;
    overflow-x: hidden;
    z-index: 1030;
}

/* Sidebar when collapsed */
.sidebar.collapsed {
    width: 60px;
}

/* Sidebar nav links */
.sidebar .nav-link {
    color: white;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar .nav-link:hover {
    background-color: #555;
}

/* Text labels inside sidebar */
.sidebar .link-text {
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

/* Hide text when sidebar is collapsed */
.sidebar.collapsed .link-text {
    opacity: 0;
    pointer-events: none;
    width: 0;
    overflow: hidden;
}
/* Main content wrapper */
.content-wrapper {
    margin-left: 220px;
    transition: margin-left 0.3s ease;
    padding: 1rem;
    padding-top: 70px; /* extra spacing below navbar */
}

/* Adjust when sidebar is collapsed */
.sidebar.collapsed ~ .content-wrapper {
    margin-left: 60px;
}
/* Optional: Show tooltip on hover when sidebar is collapsed */
.sidebar.collapsed .nav-link {
    position: relative;
}

.sidebar.collapsed .nav-link:hover::after {
    content: attr(title);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    background: #333;
    color: #fff;
    padding: 4px 10px;
    white-space: nowrap;
    border-radius: 4px;
    margin-left: 8px;
    z-index: 1050;
    font-size: 0.85rem;
}

/* Responsive fallback: Hide sidebar below certain width */
@media (max-width: 768px) {
.sidebar {
    left: -220px;
}

.sidebar.expanded {
    left: 0;
}

.sidebar.collapsed {
    left: -60px;
}

.sidebar.expanded ~ .content-wrapper,
.sidebar.collapsed ~ .content-wrapper {
    margin-left: 0;
}
}