/* SAAS Sidebar Styles - Based on Design Specification */

/* Global Variables */
:root {
    --saas-bg-color: #F7F8FA;
    --saas-primary-blue: #334CFF;
    --saas-navy: #1A2036;
    --saas-inactive-grey: #B0B0B0;
    --saas-header-black: #000000;
    --saas-white: #FFFFFF;
    --saas-sidebar-width: 300px;
}

/* Body Background */
body {
    background-color: var(--saas-bg-color);
}

/* Navbar Brand Styles */
.navbar-brand {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    font-weight: 700;
    color: var(--saas-navy) !important;
}

.navbar-brand .brand-icon {
    display: inline-flex;
    margin-right: 15px;
}

.navbar-brand .brand-icon svg {
    width: 48px;
    height: 48px;
}

.navbar-brand .brand-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--saas-navy);
}

/* SAAS Sidebar Container */
.saas-sidenav {
    background-color: var(--saas-bg-color);
    padding: 40px 30px;
    min-height: 100vh;
}

/* Section Title */
.saas-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--saas-header-black);
    margin: 0 0 20px 0;
    padding: 0;
}

/* Menu List */
.saas-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Menu Item */
.saas-menu-item {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
}

.saas-menu-item a {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 15px;
    text-decoration: none;
    color: var(--saas-inactive-grey);
    font-size: 14px;
    font-weight: 400;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.saas-menu-item a i {
    font-size: 18px;
    width: 24px;
    text-align: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.saas-menu-item a span {
    flex: 1;
}

/* Active Menu Item */
.saas-menu-item.active a,
.saas-menu-item a:hover {
    background-color: var(--saas-primary-blue);
    color: var(--saas-white);
}

.saas-menu-item.active a i,
.saas-menu-item a:hover i {
    color: var(--saas-white);
}

/* Inactive Menu Item Hover */
.saas-menu-item:not(.active) a:hover {
    background-color: rgba(51, 76, 255, 0.1);
    color: var(--saas-primary-blue);
}

.saas-menu-item:not(.active) a:hover i {
    color: var(--saas-primary-blue);
}

/* Override default list-group styles if they exist */
.saas-sidenav .list-group {
    border: none;
    box-shadow: none;
}

.saas-sidenav .list-group-item {
    border: none;
    background: transparent;
    padding: 0;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .saas-sidenav {
        background-color: var(--saas-white);
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }
}

/* Content Container Adjustments */
#content-container {
    background-color: var(--saas-bg-color);
}

#content-container .panel {
    background-color: var(--saas-white);
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Ensure proper spacing in mobile view */
@media (min-width: 992px) {
    .sidenav.saas-sidenav {
        position: sticky;
        top: 70px;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
}

/* Scrollbar styling for sidebar */
.saas-sidenav::-webkit-scrollbar {
    width: 6px;
}

.saas-sidenav::-webkit-scrollbar-track {
    background: transparent;
}

.saas-sidenav::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 3px;
}

.saas-sidenav::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Page Header Styling */
.page-header {
    color: var(--saas-header-black);
    font-weight: 700;
    border-bottom: 2px solid #E5E7EB;
}

/* Navbar adjustments for SAAS theme */
.navbar-white {
    background-color: var(--saas-white);
    border-bottom: 1px solid #E5E7EB;
}