/* --- Botões --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background-color var(--transition), box-shadow var(--transition);
    white-space: nowrap;
}

.btn:disabled {
    opacity: .6;
    cursor: default;
}

.btn-sm {
    padding: 4px 10px;
    font-size: 0.8rem;
}

/* Botão discreto só-ícone (2026-07-15) — atualizar manualmente uma listagem que já tem
   auto-refresh por tempo/notificação, mas às vezes o usuário quer forçar na hora. Mesma
   base de .btn, só quadrado e sem texto — usado em Kanban/Pedidos/Auditoria. */
.btn-icon {
    padding: 0;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
}
.btn-icon svg {
    display: block;
}

/* !important nestas cores (e nas de baixo, "papel fixo"): botões de dialog do jQuery UI
   ganham a classe .ui-button automaticamente, e o jQuery UI foca sozinho o primeiro botão
   ao abrir qualquer dialog — a regra dele pra isso, `.ui-button:hover, .ui-button:focus`,
   tem mais especificidade (1 classe + 1 pseudo-classe) que uma classe nossa sozinha, e
   ganhava disfarçando a cor do botão pra cinza (#ededed) sempre que ele estivesse
   focado/hover, mesmo sem o usuário ter mexido em nada — daí a impressão de "perder a cor".
   Ver claude.md > Botões — cor fixa por função. */
.btn-primary   { background-color: var(--c-accent) !important;  color: #fff !important; }
.btn-primary:hover:not(:disabled)   { background-color: var(--c-accent-dark) !important; }

.btn-success   { background-color: var(--c-success) !important; color: #fff !important; }
.btn-success:hover:not(:disabled)   { background-color: var(--c-success-dark) !important; }

.btn-danger    { background-color: var(--c-danger) !important;  color: #fff !important; }
.btn-danger:hover:not(:disabled)    { background-color: var(--c-danger-dark) !important; }

/* --- Botões de papel fixo (ver claude.md > Identidade visual de botões) ---
   Cor sempre a mesma para a mesma função em todo o sistema, para o usuário
   reconhecer a ação pela cor sem precisar ler o texto. Ícone via CSS mask
   (não pode ser HTML porque o jQuery UI Dialog escapa o texto do botão). */
.btn-cancelar,
.btn-salvar,
.btn-imprimir,
.btn-historico,
.btn-contato,
.btn-etiqueta {
    color: #fff !important;
}

.btn-cancelar::before,
.btn-salvar::before,
.btn-imprimir::before,
.btn-historico::before,
.btn-contato::before,
.btn-etiqueta::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Cancelar — teal, nunca vermelho (reservado a excluir) nem cinza */
.btn-cancelar { background-color: var(--c-terracotta) !important; }
.btn-cancelar:hover:not(:disabled) { background-color: var(--c-terracotta-dark) !important; }
.btn-cancelar::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854z'/%3E%3C/svg%3E");
}

/* Salvar — verde */
.btn-salvar { background-color: var(--c-success) !important; }
.btn-salvar:hover:not(:disabled) { background-color: var(--c-success-dark) !important; }
.btn-salvar::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
}

/* Imprimir — azul (accent) */
.btn-imprimir { background-color: var(--c-accent) !important; }
.btn-imprimir:hover:not(:disabled) { background-color: var(--c-accent-dark) !important; }
.btn-imprimir::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z'/%3E%3Cpath d='M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H5zm7-2H2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1V9a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z'/%3E%3Cpath d='M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1H5zm7-2H2a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h1V9a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1h1a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1z'/%3E%3C/svg%3E");
}

/* Histórico — laranja (warning) */
.btn-historico { background-color: var(--c-warning) !important; }
.btn-historico:hover:not(:disabled) { background-color: var(--c-warning-dark) !important; }
.btn-historico::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z'/%3E%3Cpath d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/%3E%3C/svg%3E");
}

.btn-purple    { background-color: var(--c-purple) !important;  color: #fff !important; }
.btn-purple:hover:not(:disabled)    { background-color: var(--c-purple-dark) !important; }

/* Contato — roxo (registro de contato com o cliente, 2026-07-16, ver claude.md) */
.btn-contato { background-color: var(--c-purple) !important; }
.btn-contato:hover:not(:disabled) { background-color: var(--c-purple-dark) !important; }
.btn-contato::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.568 17.568 0 0 0 4.168 6.608 17.569 17.569 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.678.678 0 0 0-.58-.122l-2.19.547a1.745 1.745 0 0 1-1.657-.459L5.482 8.062a1.745 1.745 0 0 1-.46-1.657l.548-2.19a.678.678 0 0 0-.122-.58L3.654 1.328zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.678.678 0 0 0 .178.643l2.457 2.457a.678.678 0 0 0 .644.178l2.189-.547a1.745 1.745 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.634 18.634 0 0 1-7.01-4.42 18.634 18.634 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877L1.885.511z'/%3E%3C/svg%3E");
}

/* Etiqueta — azul claro (info), impressão térmica de identificação de volume/caixa
   (2026-07-15, ver claude.md) — distinto do azul do Imprimir (--c-accent), função diferente */
.btn-etiqueta { background-color: var(--c-info) !important; }
.btn-etiqueta:hover:not(:disabled) { background-color: var(--c-info-dark) !important; }
.btn-etiqueta::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zM6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 1a1 1 0 0 0-1 1v4.586a1 1 0 0 0 .293.707l7 7a1 1 0 0 0 1.414 0l4.586-4.586a1 1 0 0 0 0-1.414l-7-7A1 1 0 0 0 6.586 1H2zM6 4.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z'/%3E%3C/svg%3E");
}

.btn-secondary { background-color: var(--c-surface-alt) !important; color: var(--c-text-secondary); border: 1px solid var(--c-border-strong); }
.btn-secondary:hover:not(:disabled) { background-color: var(--c-border) !important; }

/* --- Card --- */
.card {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--c-surface-alt);
    border-bottom: 1px solid var(--c-border);
}

.card-header .title {
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--c-text-primary);
    margin: 0;
}

/* --- Abas horizontais (padrão visual para todo módulo com sub-abas, ver claude.md > Abas) ---
   Nasceu em Auditoria, promovido pra cá quando Configurações passou a usar o
   mesmo layout — qualquer módulo futuro com abas deve usar estas classes. */
.tabs-nav {
    display: flex;
    border-bottom: 2px solid var(--c-border);
    margin-bottom: var(--space-md);
    flex-shrink: 0;
}

.tab-btn {
    background: none;
    border: none;
    padding: 10px var(--space-lg);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--c-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--transition), border-color var(--transition);
}

.tab-btn:hover {
    color: var(--c-text-secondary);
}

.tab-btn.active {
    color: var(--c-accent);
    border-bottom-color: var(--c-accent);
}

/* Uso opcional — só necessário em módulos com múltiplos painéis pré-montados
   (mostrados/escondidos via CSS). Configurações não usa isso, pois substitui
   o conteúdo de um único container por aba (ver claude.md > Módulos com sub-abas). */
.tab-pane {
    display: none;
}

.tab-pane.active {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* --- Badges (status genérico) --- */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
}

/* Cores de status dos itens de pedido (status_itens da v1) */
.badge-pendente      { background-color: var(--c-status-pendente);      color: #000; }
.badge-confirmado    { background-color: var(--c-status-confirmado); }
.badge-despachado    { background-color: var(--c-status-despachado); }
.badge-chegou        { background-color: var(--c-status-chegou); }
.badge-concluido     { background-color: var(--c-status-concluido); }
.badge-bo            { background-color: var(--c-status-bo); }
.badge-transferencia { background-color: var(--c-status-transferencia); }

/* Badges de ação de logs_auditoria (CRIACAO/ALTERACAO/EXCLUSAO) — nasceu em Auditoria,
   promovido pra cá quando o histórico do Pedido passou a usar o mesmo badge. Variantes de
   LOGIN continuam só em auditoria.css (não fazem sentido no histórico de Pedido). */
.badge-acao {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.badge-acao-criacao   { background-color: var(--c-success-light); color: var(--c-success); }
.badge-acao-alteracao { background-color: var(--c-accent-light);  color: var(--c-accent); }
.badge-acao-exclusao  { background-color: var(--c-danger-light);  color: var(--c-danger); }

/* --- Toasts --- */
#toast-container {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    z-index: 10000;
}

.toast {
    min-width: 220px;
    max-width: 360px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    color: #fff;
    font-size: 0.88rem;
}

.toast-success { background-color: var(--c-success); }
.toast-error   { background-color: var(--c-danger); }
.toast-info    { background-color: var(--c-info); }

/* --- Card deslizante de notificação nova (2026-07-16) ---
   Diferente do toast (feedback rápido de ação do próprio usuário), esse alerta é de evento de
   terceiro (pedido alterado/criado por outra pessoa) — precisa chamar mais atenção, então
   usa a cor de destaque (--c-accent) em vez de neutro, fica visível mais tempo (9s no total:
   2s subindo + 5s parado + 2s descendo) e é clicável. */
#notif-popup-container {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-sm);
    z-index: 10001;
    pointer-events: none;
}

.notif-popup {
    pointer-events: auto;
    width: 300px;
    max-width: calc(100vw - 2 * var(--space-lg));
    padding: 14px 16px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-left: 4px solid var(--c-accent);
    cursor: pointer;
    transform: translateY(140%);
    opacity: 0;
    transition: transform 2s ease, opacity 2s ease;
}
.notif-popup.show {
    transform: translateY(0);
    opacity: 1;
}
.notif-popup-titulo {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--c-text-primary);
    margin-bottom: 4px;
}
.notif-popup-mensagem {
    font-size: 0.85rem;
    color: var(--c-text-secondary);
    line-height: 1.4;
}

/* Card de resumo (várias notificações no mesmo poll, 2026-07-31, portado da intranet) —
   passivo, não abre nada ao clicar. */
.notif-popup-resumo {
    cursor: default;
}

/* --- Loading overlay (usado pelo api.js) --- */
/* Escopado a #page-content (não position:fixed na viewport inteira) de propósito: cobrir
   sidebar/topbar durante o carregamento de um módulo bloqueava sem necessidade os controles
   globais (trocar de módulo, grupo, menu do usuário) que não dependem do módulo atual. */
#loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.4);
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}
:root[data-theme="dark"] #loading-overlay {
    background: rgba(0,0,0,.45);
}

.spinner {
    width: 36px;
    height: 36px;
    border: 4px solid var(--c-border);
    border-top-color: var(--c-accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- jQuery UI Dialog --- */
/* O tema "de fábrica" do jQuery UI (jquery-ui.min.css) hardcoda fundo/borda/texto claros
   fixos em `.ui-widget-content` — classe que o próprio `.ui-dialog` carrega — e nunca tinha
   sido sobrescrita aqui (só título e botões tinham tratamento nosso). Em tema claro passava
   despercebido (branco do vendor coincidia quase exatamente com --c-surface); no escuro
   ficava sempre branco/cinza-claro fixo, o corpo inteiro do modal preso fora do tema. */
.ui-dialog.ui-widget-content {
    border: 1px solid var(--c-border) !important;
    box-shadow: var(--shadow-lg);
}

/* A div de conteúdo interna (`.ui-dialog-content`, onde o texto de fato fica — ex.:
   confirmDialog() em app.js, usado em toda confirmação simples do sistema) também carrega
   `ui-widget-content` — elemento separado do wrapper externo `.ui-dialog` acima, não coberto
   por `.ui-dialog.ui-widget-content` (exige as 2 classes no MESMO elemento). Sem esta regra,
   ela batia só na genérica do vendor (`color:#333` fixo) e ficava escura sobre fundo escuro
   no tema escuro — "apagada" (2026-07-13, achado no modal de excluir Pedido, mas é o
   componente inteiro: qualquer dialog no sistema tinha o mesmo problema). */
.ui-dialog.ui-widget-content,
.ui-dialog .ui-dialog-content.ui-widget-content {
    background: var(--c-surface) !important;
    color: var(--c-text-primary) !important;
}

.ui-dialog .ui-dialog-buttonpane {
    background: var(--c-surface) !important;
    border-top: 1px solid var(--c-border) !important;
}

/* Compactação vertical pra telas baixas (1366x768 e afins, 2026-07-15) — aplica a QUALQUER
   dialog do sistema (o de Pedido é o mais alto, mas o ganho serve a todos igual). Só reduz
   o que ocupa altura (padding, margin — os valores padrão do jQuery UI, ver
   jquery-ui.min.css, usam em, então herdam do font-size do elemento), nunca largura. Mesmo
   limiar (800px) já usado em abrirFormPedido() (pedidos.js) pra posicionar o modal mais
   perto do topo nessas telas. */
@media (max-height: 800px) {
    .ui-dialog .ui-dialog-titlebar { padding: .25em 1em; }
    .ui-dialog .ui-dialog-content { padding: .3em 1em !important; }
    .ui-dialog .ui-dialog-buttonpane { padding: .2em 1em .3em .4em !important; margin-top: .2em !important; }
}

:root[data-theme="dark"] .ui-widget-overlay {
    background: #000;
    opacity: .55;
}

.ui-dialog .ui-dialog-titlebar {
    background: var(--c-sidebar-bg);
    color: #fff;
    border: none;
    border-radius: 0;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: transparent;
    border: none;
}

/* Estrutural apenas — a cor de fundo é sempre definida por uma classe de papel
   (.btn-cancelar/.btn-salvar/.btn-primary/...) aplicada via `class` no botão do
   dialog, nunca aqui. Botão de dialog sem classe de papel é erro de implementação. */
.ui-dialog .ui-dialog-buttonpane button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.9rem;
    color: #fff;
    transition: opacity var(--transition);
}

.ui-dialog .ui-dialog-buttonpane button:hover {
    opacity: .88;
}

/* jQuery UI agrupa todos os botões do dialog num único .ui-dialog-buttonset flutuado
   à direita. Pra poder isolar um botão à esquerda (ex.: Excluir no form de Pedido,
   igual v1 fazia com `.btn-warning { margin-right: auto }` num container flex), troca
   o float por flex ocupando a largura toda do buttonpane — sem isso não tem como um
   botão "escapar" do agrupamento à direita. */
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}
.ui-dialog .ui-dialog-buttonpane .btn-dialog-float-left {
    margin-right: auto;
}

/* --- Campo de senha com botão de mostrar/ocultar (ver claude.md > Campos de senha) ---
   Mesmo padrão visual do login.html. Gerado via campoSenhaHtml() em app.js;
   o toggle é tratado por um handler delegado global, funciona em qualquer dialog. */
.input-with-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-with-icon input {
    width: 100%;
    /* !important necessário: precisa vencer .form-group input[type="password"/"text"]
       (a mesma regra vale pros dois, já que o type alterna via JS no toggle). */
    padding-right: 36px !important;
}

.password-toggle-icon {
    position: absolute;
    right: 10px;
    cursor: pointer;
    padding: 4px;
    display: flex;
}

.password-toggle-icon .eye-icon {
    width: 18px;
    height: 18px;
    opacity: 0.6;
}

/* --- KPI cards + chart cards (grid de KPIs/gráficos com Chart.js) ---
   Nasceu na aba "Uso do Sistema" de Auditoria, promovido pra cá porque o Dashboard
   reaproveita exatamente o mesmo visual (ver claude.md). */
.uso-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    flex-shrink: 0;
}

.uso-kpi-card {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.uso-kpi-label {
    font-size: 0.78rem;
    color: var(--c-text-muted);
    font-weight: 500;
}

.uso-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--c-text-primary);
}

.uso-kpi-value.uso-kpi-text {
    font-size: 1.05rem;
}

.uso-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    flex-shrink: 0;
}

.uso-chart-card {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.uso-chart-title {
    margin: 0 0 var(--space-sm);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--c-text-secondary);
}

.uso-chart-wrapper {
    position: relative;
    height: 220px;
}

.uso-table-card {
    background-color: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.uso-table-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.uso-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.uso-table th {
    position: sticky;
    top: 0;
    text-align: left;
    padding: 8px;
    background-color: var(--c-surface-alt);
    border-bottom: 1px solid var(--c-border);
    font-weight: 600;
    color: var(--c-text-secondary);
}

.uso-table td {
    padding: 8px;
    border-bottom: 1px solid var(--c-border);
}

.uso-scroll-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* --- Barra de filtros (Filial/Datas/Ação...) --- também promovida de auditoria.css,
   reaproveitada pelo Dashboard. */
.audit-filters {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: 2px 0 var(--space-md);
    flex-shrink: 0;
}

.audit-filters label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--c-text-secondary);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.audit-filters input,
.audit-filters select {
    padding: 6px 10px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
    background-color: var(--c-surface);
    color: var(--c-text-primary);
}

.audit-filters input[type="search"] {
    width: 220px;
}