/* Sem título próprio (2026-07-13) — "Usuários" já vem do header geral (#topbar-title). Mesmo
   critério de Clientes/Pedidos: .panel-header sem gap próprio, agora precisa de flex-end +
   gap com só 1 grupo restante. padding-top de .panel-body reduzido em 70%
   (16px × 0.3 = 4.8px). */
.config-panel .usuarios-panel-header {
    justify-content: flex-end;
    gap: var(--space-md);
}
.config-panel .usuarios-panel-body {
    padding-top: 4.8px;
}

.acesso-toggle {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    transition: transform var(--transition), background-color var(--transition);
}

.acesso-toggle:hover {
    transform: scale(1.15);
}

.acesso-on {
    background-color: var(--c-success);
}

.acesso-off {
    background-color: transparent;
    border: 2px solid var(--c-border-strong);
}

.acesso-off:hover {
    border-color: var(--c-success);
}

.acesso-disabled {
    background-color: var(--c-border);
    cursor: not-allowed;
}

.acesso-disabled:hover {
    transform: none;
}

/* Último acesso do usuário (não pode ser revogado, ver usuarios.js) — reaproveita a classe
   .acesso-disabled pro clique ser bloqueado (mesmo guard-clause do handler), mas precisa
   continuar visualmente distinto do cinza genérico de "usuário inativo": ainda É um acesso
   concedido, só protegido. Regra depois de .acesso-disabled no arquivo pra vencer o empate
   de especificidade e devolver o verde + anel de aviso. */
.acesso-toggle.acesso-ultimo {
    background-color: var(--c-success);
    border: 2px solid var(--c-warning);
}

.acesso-toggle.acesso-ultimo:hover {
    transform: none;
}

/* --- Vínculo com Vendedor: autocomplete nativo do jQuery UI (mesmo padrão visual do
   autocomplete de Cliente em Pedidos, `.pedido-cliente-ac-dropdown` — declarado à parte
   aqui de propósito, nunca reaproveitado direto de pedidos.css entre páginas). --- */
.usuario-vendedor-ac-dropdown {
    z-index: 10001 !important;
    border: 1px solid var(--c-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-md) !important;
    background: var(--c-surface) !important;
    padding: 3px 0 !important;
    max-height: 220px;
    overflow-y: auto;
}
.usuario-vendedor-ac-dropdown .ui-menu-item-wrapper {
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
    color: var(--c-text-primary) !important;
    border-radius: 0 !important;
    border: none !important;
}
.usuario-vendedor-ac-dropdown .ui-menu-item-wrapper.ui-state-active,
.usuario-vendedor-ac-dropdown .ui-menu-item-wrapper.ui-state-focus {
    background: var(--c-accent-light) !important;
    color: var(--c-accent) !important;
    margin: 0 !important;
    border: none !important;
}
/* "+ Criar vendedor..." (só existe na criação de usuário, nunca na edição — ver
   _renderItem em usuarios.js) — marcado por identidade (item.id === null), não por
   posição, já que na edição o último resultado real não pode herdar esse destaque. */
.usuario-vendedor-ac-dropdown .ui-menu-item.usuario-vendedor-ac-criar .ui-menu-item-wrapper {
    color: var(--c-accent) !important;
    font-weight: 500 !important;
}