/**
 * Imperio OS — Sidebar refinada
 * - Compacta de verdade
 * - Dashboard expande/recolhe junto (via body.sidebar-collapsed)
 * - Seta fora dos ícones (não cobre o PDV)
 */
#dashboard > .sidebar,
#dashboard #sidebar,
aside.sidebar#sidebar {
    top: 14px;
    bottom: 14px;
    left: 14px;
    height: auto;
    width: 252px;
    max-width: 252px;
    border-radius: 24px;
    border: 2px solid color-mix(in srgb, var(--primary-blue) 55%, transparent);
    box-shadow:
        0 12px 40px rgba(15, 23, 42, 0.18),
        0 2px 0 rgba(255, 255, 255, 0.08) inset;
    /* scroll só no menu — sidebar overflow visible para a seta sair sem barra */
    overflow: visible;
    padding: 1.25rem 0.85rem;
    transition: width 0.25s ease, max-width 0.25s ease, padding 0.25s ease;
}

#dashboard .sidebar .nav-menu {
    overflow-x: hidden;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
}

body[data-appearance="light"] #dashboard > .sidebar,
body[data-appearance="light"] #dashboard #sidebar,
body[data-appearance="light"] aside.sidebar#sidebar {
    border-color: color-mix(in srgb, var(--primary-blue) 40%, #CBD5E1);
    box-shadow:
        0 14px 36px rgba(15, 23, 42, 0.1),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

/* Dashboard acompanha a sidebar (NÃO usar + sibling: existe mobile-bottom-nav no meio) */
#dashboard .main-content {
    margin-left: calc(14px + 252px + 16px) !important;
    width: auto !important;
    max-width: none !important;
    transition: margin-left 0.25s ease;
}

body.sidebar-collapsed #dashboard .main-content {
    margin-left: calc(14px + 76px + 16px) !important;
}

/* PDV em tela cheia: sidebar some — não herdar margem da sidebar */
body.pdv-standalone #dashboard .main-content,
body.pdv-page-light #dashboard .main-content {
    margin-left: 0 !important;
    max-width: none !important;
}

body.pdv-standalone #dashboard .modal-overlay,
body.pdv-standalone #dashboard .pdv-password-overlay,
body.pdv-page-light #dashboard .modal-overlay,
body.pdv-page-light #dashboard .pdv-password-overlay,
body.pdv-standalone.sidebar-collapsed #dashboard .modal-overlay,
body.pdv-standalone.sidebar-collapsed #dashboard .pdv-password-overlay {
    left: 0 !important;
}

body.sidebar-collapsed #dashboard .modal-overlay,
body.sidebar-collapsed #dashboard .pdv-password-overlay {
    left: calc(14px + 76px + 16px);
}

#dashboard .modal-overlay,
#dashboard .pdv-password-overlay {
    left: calc(14px + 252px + 16px);
}

/* Recolhida */
#dashboard .sidebar.collapsed {
    width: 76px !important;
    max-width: 76px !important;
    min-width: 76px !important;
    padding: 1rem 0.45rem !important;
}

#dashboard .sidebar.collapsed .dashboard-sync-status,
#dashboard .sidebar.collapsed .sidebar-pagar-balao,
#dashboard .sidebar.collapsed .sidebar-pagar-balao.show {
    display: none !important;
}

#dashboard .sidebar .nav-btn {
    border-radius: 14px;
    max-width: 100%;
    box-sizing: border-box;
}

#dashboard .sidebar.collapsed .nav-btn {
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.25rem;
    border-radius: 14px;
}

#dashboard .sidebar.collapsed .nav-btn .icon {
    font-size: 1.85rem !important;
    line-height: 1;
    margin: 0 !important;
}

#dashboard .sidebar.collapsed .nav-btn .icon img,
#dashboard .sidebar.collapsed .nav-btn .icon svg {
    width: 1.7rem;
    height: 1.7rem;
}

#dashboard .sidebar.collapsed .btn-voltar,
#dashboard .sidebar.collapsed .btn-upgrade-sidebar,
#dashboard .sidebar.collapsed .btn-sync-dados {
    border-radius: 14px;
    min-height: 44px;
    padding: 0.55rem;
}

#dashboard .sidebar.collapsed .btn-voltar .icon-voltar,
#dashboard .sidebar.collapsed .btn-sync-dados .icon {
    font-size: 1.55rem !important;
}

#dashboard .sidebar.collapsed .sidebar-logo img.sidebar-logo-img {
    max-height: 2.8rem;
    max-width: 2.8rem;
}

#dashboard .sidebar .sidebar-header {
    border-bottom: 1px solid color-mix(in srgb, var(--primary-blue) 22%, transparent);
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

#dashboard .sidebar .dashboard-sync-status {
    border-radius: 999px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#dashboard .sidebar .btn-voltar,
#dashboard .sidebar .btn-upgrade-sidebar,
#dashboard .sidebar .btn-sync-dados,
#dashboard .sidebar .sidebar-pagar-balao {
    border-radius: 12px;
}

/*
 * Seta FORA da coluna de ícones, na borda direita da sidebar
 * (encaixa no vão até o dashboard — não cobre o carrinho)
 */
#dashboard .sidebar-toggle {
    top: 50%;
    right: -14px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 999px;
    background: linear-gradient(145deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);
    color: #fff !important;
    border: 2px solid #fff;
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: 0 3px 10px color-mix(in srgb, var(--primary-blue) 40%, transparent);
    z-index: 120;
}

#dashboard .sidebar-toggle:hover {
    transform: translateY(-50%) scale(1.08);
    filter: brightness(1.05);
}

#dashboard .sidebar.collapsed .sidebar-toggle {
    right: -14px;
    top: 50%;
    transform: translateY(-50%);
}

#dashboard .sidebar.collapsed .sidebar-toggle:hover {
    transform: translateY(-50%) scale(1.08);
}

body[data-appearance="light"] #dashboard .sidebar-toggle {
    border-color: #fff;
    color: #fff !important;
}

@media (max-width: 900px) {
    #dashboard > .sidebar,
    #dashboard #sidebar,
    aside.sidebar#sidebar {
        top: 0;
        bottom: 0;
        left: 0;
        border-radius: 0;
        width: 260px;
        max-width: none;
        min-width: 0;
        overflow: auto;
    }
    #dashboard .main-content,
    body.sidebar-collapsed #dashboard .main-content {
        margin-left: 0 !important;
    }
}