/* --- 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;
}

/* !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: #157347 !important; }

.btn-danger    { background-color: var(--c-danger) !important;  color: #fff !important; }
.btn-danger:hover:not(:disabled)    { background-color: #bb2d3b !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 {
    color: #fff !important;
}

.btn-cancelar::before,
.btn-salvar::before,
.btn-imprimir::before,
.btn-historico::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: #157347 !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: #d96a0d !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; }

.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); }

/* --- Loading overlay (usado pelo api.js) --- */
#loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.4);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
}

.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 --- */
.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;
}