/* =========================================================
   MOCURVE SAAS — SIDEBAR
   ========================================================= */

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    padding: 22px 14px 16px;
    background: var(--color-primary);
    color: #fff;
    will-change: transform; /* Promove o elemento para a GPU para 60fps no Mobile */
}

.sidebar__brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 10px 20px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.brand__mark {
    display: grid;
    place-items: center;
    width: 31px;
    height: 31px;
    border-radius: 9px;
    background: transparent;
    color: var(--color-primary);
    font-size: 15px;
    font-weight: 900;
}

.brand__name {
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -.05em;
}

.brand__name span {
    font-weight: 400;
}

.sidebar__close {
    display: none;
    color: #fff;
    background: transparent;
    font-size: 25px;
}

.sidebar__client {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 4px 22px;
    padding: 13px 11px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,.045);
}

.sidebar__client strong,
.sidebar__client span {
    display: block;
}

.sidebar__client strong {
    max-width: 145px;
    overflow: hidden;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar__client span {
    margin-top: 2px;
    color: rgba(255,255,255,.46);
    font-size: 10px;
}

.sidebar__nav {
    flex: 1;
}

.nav__label {
    display: block;
    padding: 0 11px 8px;
    color: rgba(255,255,255,.32);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .13em;
}

.nav__label--spaced {
    margin-top: 25px;
}

.nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 43px;
    margin-bottom: 3px;
    padding: 0 11px;
    border-radius: 10px;
    color: rgba(255,255,255,.63);
    font-size: 12px;
    font-weight: 600;
    transition: background var(--transition), color var(--transition);
}

.nav-item:hover {
    background: rgba(255,255,255,.07);
    color: #fff;
}

.nav-item--active {
    background: rgba(255,255,255,.10);
    color: #fff;
}

.nav-item--active::before {
    position: absolute;
    left: -14px;
    width: 3px;
    height: 22px;
    border-radius: 0 4px 4px 0;
    background: var(--color-accent);
    content: "";
}

/* No sidebar.css */
.nav-item__icon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px; /* Adicionado para travar o SVG */
    color: currentColor;
}

.nav-item__icon svg {
    width: 100%;
    height: 100%;
    stroke-width: 2px;
}

.nav-item__badge {
    margin-left: auto;
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: 9px;
    font-weight: 900;
    text-align: center;
}

.sidebar__footer {
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
}

.sidebar-overlay {
    display: none;
}