/* Barra lateral inspirada na fluidez do CRM local, modelada para o Precificaê. */
body.app-body {
    font-family: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.app-body .app-shell {
    --sidebar-width-expanded: 272px;
    --sidebar-width-current: var(--sidebar-width-expanded);
    --sidebar-brand-height: 64px;
    grid-template-columns: var(--sidebar-width-current) minmax(0, 1fr) !important;
    transition: grid-template-columns 180ms cubic-bezier(.2, .8, .2, 1) !important;
}

body.app-body .sidebar {
    --sidebar-inline-padding: 16px;
    position: relative !important;
    height: 100vh !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 var(--sidebar-inline-padding) 18px !important;
    overflow: hidden !important;
    color: #fff !important;
    background: radial-gradient(circle at top, rgba(16, 226, 101, .10), transparent 24%), #0b100d !important;
    border-right: 1px solid rgba(16, 226, 101, .13) !important;
    box-shadow: 12px 0 36px rgba(0, 0, 0, .14) !important;
}

body.app-body .sidebar-head {
    position: relative !important;
    min-height: var(--sidebar-brand-height) !important;
    flex: 0 0 var(--sidebar-brand-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
}

body.app-body .sidebar-head::after {
    content: "";
    position: absolute;
    right: calc(-1 * var(--sidebar-inline-padding));
    bottom: 0;
    left: calc(-1 * var(--sidebar-inline-padding));
    height: 1px;
    background: rgba(255, 255, 255, .08);
}

body.app-body .sidebar .brand {
    min-width: 0 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.app-body .sidebar .brand-mark {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: #10e265 !important;
    color: #07100d !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 900 !important;
}

body.app-body .sidebar .brand-text {
    min-width: 0 !important;
    display: grid !important;
    gap: 1px !important;
    line-height: 1.2 !important;
}

body.app-body .sidebar .brand-name {
    overflow: hidden !important;
    color: #f6fff9 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.app-body .sidebar .brand-subtitle {
    overflow: hidden !important;
    color: rgba(255, 255, 255, .55) !important;
    font-size: 11px !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

body.app-body .sidebar .sidebar-toggle {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, .045) !important;
    color: rgba(255, 255, 255, .65) !important;
    font-size: 17px !important;
    cursor: pointer !important;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease !important;
}

body.app-body .sidebar .sidebar-toggle:hover,
body.app-body .sidebar .sidebar-toggle:focus-visible {
    border-color: rgba(16, 226, 101, .35) !important;
    background: rgba(16, 226, 101, .10) !important;
    color: #10e265 !important;
    outline: none !important;
}

body.app-body .sidebar .menu {
    flex: 1 !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    /* Nas telas com o Bootstrap completo, .nav vem com flex-wrap: wrap: com pouca altura
       (zoom alto), os itens "quebravam" para uma 2ª coluna escondida em vez de rolar. */
    flex-wrap: nowrap !important;
    gap: 6px !important;
    padding: 16px 0 4px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(255, 255, 255, .18) transparent !important;
}

body.app-body .sidebar .menu::-webkit-scrollbar { width: 6px; }
body.app-body .sidebar .menu::-webkit-scrollbar-track { background: transparent; }
body.app-body .sidebar .menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 999px; }

body.app-body .sidebar .menu-section-label {
    min-height: auto !important;
    margin: 8px 6px 2px !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, .42) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: .12em !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

body.app-body .sidebar .menu-item,
body.app-body .sidebar .menu-group-trigger.nav-link {
    min-height: 42px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 0 12px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .82) !important;
    box-shadow: none !important;
    font: inherit !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transform: none !important;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease !important;
}

body.app-body .sidebar .menu-item:hover,
body.app-body .sidebar .menu-group-trigger.nav-link:hover {
    background: rgba(255, 255, 255, .055) !important;
    color: #fff !important;
}

body.app-body .sidebar .menu-item.active,
body.app-body .sidebar .menu-group-trigger.nav-link.active {
    border-color: transparent !important;
    background: rgba(16, 226, 101, .12) !important;
    color: #10e265 !important;
    font-weight: 800 !important;
}

body.app-body .sidebar .menu-icon {
    width: 19px !important;
    height: 19px !important;
    min-height: 0 !important;
    flex: 0 0 19px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .50) !important;
    box-shadow: none !important;
}

body.app-body .sidebar .menu-item:hover .menu-icon,
body.app-body .sidebar .menu-item.active .menu-icon,
body.app-body .sidebar .menu-group-trigger:hover .menu-icon,
body.app-body .sidebar .menu-group-trigger.active .menu-icon { color: currentColor !important; }

body.app-body .sidebar .menu-svg { width: 19px !important; height: 19px !important; fill: currentColor !important; }
body.app-body .sidebar .menu-label { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.app-body .sidebar .menu-label-stack { min-width: 0 !important; flex: 1 !important; display: grid !important; gap: 1px !important; }
body.app-body .sidebar .menu-label-sub { overflow: hidden !important; color: rgba(255,255,255,.46) !important; font-size: 10px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.app-body .sidebar .menu-badge { margin-left: auto !important; padding: 3px 6px !important; border-radius: 999px !important; background: rgba(220,38,38,.20) !important; color: #ffb4b4 !important; font-size: 9px !important; font-weight: 800 !important; }

body.app-body .sidebar .menu-group { display: grid !important; gap: 2px !important; width: 100% !important; }
body.app-body .sidebar .menu-group-trigger { appearance: none !important; }
body.app-body .sidebar .menu-group-caret { margin-left: auto !important; color: rgba(255,255,255,.42) !important; font-size: 16px !important; transition: transform 160ms ease !important; }
body.app-body .sidebar .menu-group-trigger:not(.collapsed) .menu-group-caret { transform: rotate(180deg) !important; }

body.app-body .sidebar .menu-submenu {
    display: grid !important;
    gap: 4px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 2px 0 2px 40px !important;
}
body.app-body .sidebar .menu-submenu.collapse:not(.show) { display: none !important; }
body.app-body .sidebar .menu-subitem {
    min-height: 31px !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .64) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transform: none !important;
    transition: background 160ms ease, color 160ms ease !important;
}
body.app-body .sidebar .menu-subitem:hover { background: rgba(255,255,255,.05) !important; color: #fff !important; }
body.app-body .sidebar .menu-subitem.active { background: rgba(16,226,101,.12) !important; color: #10e265 !important; font-weight: 800 !important; }
body.app-body .sidebar .menu-subitem-label { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

body.app-body .sidebar-resizer {
    position: absolute;
    inset: 0 -4px 0 auto;
    z-index: 5;
    width: 8px;
    cursor: col-resize;
}
body.app-body .sidebar-resizer::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 3px;
    width: 3px;
    height: 52px;
    border-radius: 999px;
    background: transparent;
    transform: translateY(-50%);
    transition: background 160ms ease;
}
body.app-body .sidebar-resizer:hover::before,
body.app-body .sidebar-resizer:focus-visible::before { background: rgba(16,226,101,.45); }

body.app-body.sidebar-collapsed .app-shell { --sidebar-width-current: 72px; }
body.app-body.sidebar-collapsed .sidebar { --sidebar-inline-padding: 12px; padding-inline: var(--sidebar-inline-padding) !important; }
body.app-body.sidebar-collapsed .sidebar-head { justify-content: center !important; }
body.app-body.sidebar-collapsed .brand,
body.app-body.sidebar-collapsed .menu-section-label,
body.app-body.sidebar-collapsed .menu-label,
body.app-body.sidebar-collapsed .menu-label-stack,
body.app-body.sidebar-collapsed .menu-badge,
body.app-body.sidebar-collapsed .menu-group-caret,
body.app-body.sidebar-collapsed .menu-submenu,
body.app-body.sidebar-collapsed .sidebar-resizer { display: none !important; }
body.app-body.sidebar-collapsed .sidebar-toggle { width: 38px !important; flex-basis: 38px !important; }
body.app-body.sidebar-collapsed .menu-item,
body.app-body.sidebar-collapsed .menu-group-trigger.nav-link { justify-content: center !important; padding-inline: 0 !important; font-size: 0 !important; }
body.app-body.sidebar-collapsed .menu-icon { margin: 0 !important; }

body.sidebar-resizing { cursor: col-resize !important; user-select: none !important; }

@media (max-width: 767px) {
    body.app-body { height: 100vh !important; overflow: hidden !important; }
    body.app-body .app-shell { height: 100vh !important; grid-template-columns: 72px minmax(0, 1fr) !important; overflow: hidden !important; }
    body.app-body .content { min-width: 0 !important; overflow-y: auto !important; }
}

/* Com a barra baixa, os itens rolam em vez de encolher. */
body.app-body .sidebar .menu > * { flex-shrink: 0 !important; }