:root {
    --crm-primary: #004b85;
    --crm-primary-hover: #1d83d1;
    --crm-background: #f8faf9;
    --crm-card-bg: #ffffff;
    --crm-border-radius: 0.5rem;
    --crm-text-muted: #6c757d;
}

body {
    background-color: var(--crm-background) !important;
}

.text-primary {
    color: var(--crm-primary) !important;
}

.btn-primary {
    background-color: var(--crm-primary) !important;
    border-color: var(--crm-primary) !important;
    border-radius: var(--crm-border-radius);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--crm-primary-hover) !important;
    border-color: var(--crm-primary-hover) !important;
}

.card {
    background-color: var(--crm-card-bg);
    border-radius: var(--crm-border-radius) !important;
}

/* Dashboard Layout Structure */
.wrapper {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* Sidebar Styling */
.sidebar {
    width: 260px;
    background-color: var(--crm-card-bg);
    border-right: 1px solid #dee2e6;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: margin 0.3s ease-in-out;
}

.sidebar .nav-link {
    color: var(--crm-text-muted);
    padding: 0.8rem 1.5rem;
    border-radius: 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    transition: all 0.25s ease-in-out;
}

/* Active and Hover states */
.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: rgba(0, 75, 133, 0.08);
    color: var(--crm-primary);
    border-right: 4px solid var(--crm-primary);
}

.sidebar .nav-link i {
    width: 22px;
    margin-right: 10px;
}

/* Main Content */
.main-content {
    flex-grow: 1;
    overflow-y: auto;
    background-color: var(--crm-background);
    transition: all 0.3s ease-in-out;
}

/* Sidebar Collapse */
.sidebar.collapsed {
    margin-left: -260px;
}

/* Mobile
@media (max-width: 768px) {
    .sidebar {
        position: absolute;
        height: 100vh;
        margin-left: -260px;
        box-shadow: 4px 0 10px rgba(0, 0, 0, 0.1);
    }

    .sidebar:not(.collapsed) {
        margin-left: 0;
    } */

@media (max-width: 768px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 1050;
        transition: transform 0.3s ease-in-out;
        background-color: #ffffff; /* Ensures it has a solid background */
    }
    .sidebar.collapsed {
        transform: translateX(-100%);
    }
}

}