/* ==========================================================================
   r2-polish.css — camada final de acabamento (Portal, Comercial, Financeiro e Produção v2)
   --------------------------------------------------------------------------
   • Puramente aditiva: não renomeia classes nem altera marcação. Carregue POR ÚLTIMO.
   • Todo seletor começa com `html body` para vencer as regras legadas de style.css mesmo
     quando o Vite separa o CSS em chunks e os carrega fora de ordem (causa do item A1).
   • Identidade preservada: menta #2fd9a4 (marca), verde #007451 / #73dfb6 (texto de acento),
     superfícies neutras do r2-neutral.css. Só usa os tokens já existentes.
   • Cada bloco cita o achado da AUDIT.md que corrige (A = contraste/estado, B = foco,
     C = alinhamento/medidas, D = fluidez, E = enquadramento).
   ========================================================================== */

/* ---------- Tokens próprios desta camada ---------- */
:root {
  --r2p-dur: 140ms;
  --r2p-ease: cubic-bezier(0.2, 0, 0, 1);
  --r2p-focus: var(--accent-text, #007451);
  --r2p-ring: 0 0 0 3px var(--accent-soft, #e5f6ee);
  /* Botão primário (DESIGN.md: menta com texto escuro; contraste 10,6:1 / hover 11,8:1 / ativo 8,2:1).
     Para manter o verde escuro antigo do Comercial, troque estas 4 linhas por:
     --r2p-primary-bg:var(--green);--r2p-primary-fg:#fff;--r2p-primary-hover:#005f42;--r2p-primary-active:#004d36; */
  --r2p-primary-bg: var(--brand, #2fd9a4);
  --r2p-primary-fg: #0b0f0e;
  --r2p-primary-hover: #47e2b3;
  --r2p-primary-active: #21bf8e;
  --r2p-danger: #c92b23;          /* texto/borda: 5,5:1 sobre branco */
  --r2p-danger-hover: #a8221b;    /* fundo do botão destrutivo no hover: 7,2:1 com branco */
  --r2p-hover-soft: var(--surface-muted, #f0f2f3);
  --r2p-hover-strong: var(--surface-hover, #e9ecee);
  --r2p-btn-h: 2.75rem;            /* 44 px — alvo de toque mínimo */
  --r2p-btn-radius: 0.75rem;       /* 12 px — DESIGN.md */
}
html[data-theme="dark"] {
  --r2p-danger: #ff918a;           /* mesmo vermelho de erro do DESIGN.md no escuro: 7,2:1 sobre #202427 */
  --r2p-danger-hover: #e0473f;
  --r2p-ring: 0 0 0 3px var(--accent-soft, #203c32);
}

/* ==========================================================================
   A1 · Navegação lateral: hover deixava o texto BRANCO sobre fundo #f0f2f3 (1,12:1).
   Origem: `.sidebar nav button:hover{color:white}` (style.css, tema escuro antigo) carregado
   depois de design-system.css no build (chunk "systems" após o chunk "r2-neutral").
   Vale para itens simples, títulos de grupo (.r2-nav-group-title) e subitens.
   ========================================================================== */
html body .sidebar nav button:not(.active):not(:disabled):hover,
html body .sidebar nav a:not(.active):not([aria-current="page"]):hover,
html body .r2-nav-group button:not(.active):not(:disabled):hover {
  background: var(--r2p-hover-soft);
  color: var(--text);
}
html body .sidebar nav button:not(.active):hover svg,
html body .r2-nav-group button:not(.active):hover svg { color: var(--accent-text); }
/* Item ativo: mantém verde-acento também no hover (antes não havia retorno visual nenhum). */
html body .sidebar nav button.active:hover { filter: saturate(1.15) brightness(0.98); }
html[data-theme="dark"] body .sidebar nav button.active:hover { filter: brightness(1.12); }
/* Links do topo da sidebar (← Portal R2, logo): sem hover antes. */
html body :is(.sidebar, .topbar) a.system-return:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
html body .sidebar a.brand { border-radius: 14px; }
html body .sidebar a.brand:hover { opacity: 0.88; }
html body .profile button.logout:hover,
html body .profile .icon-btn:hover { background: var(--r2p-hover-soft); color: var(--accent-text); }

/* ==========================================================================
   A2 · Portal: "Compras por alçada" era uma pílula PRETA com texto escuro (1,26:1),
   porque `.portal-header > a` (fundo #0b0f0e, feito para o logo) também pega este link.
   E3 · O link vinha antes do logo; agora vai para a direita, junto do "Sair".
   ========================================================================== */
html body .portal-header > a.purchase-entry {
  order: 3;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--r2p-btn-h);
  padding: 0.625rem 1rem;
  border-radius: var(--r2p-btn-radius);
  background: var(--surface-muted);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}
html body .portal-header > a.purchase-entry:hover { background: var(--accent-soft); color: var(--accent-text); }
html body .portal-header > a.purchase-entry span { background: var(--brand); color: #0b0f0e; border-radius: 999px; padding: 0 0.45rem; font-weight: 700; }
html body .portal-header > a.purchase-entry ~ button { order: 4; margin-left: 0.5rem; }
html body .portal-header > a.purchase-entry ~ a { order: 1; }
html body .portal-header > a.purchase-entry ~ span { order: 2; }
@media (max-width: 600px) {
  html body .portal-header { flex-wrap: wrap; gap: 12px; }
  html body .portal-header img { width: 48px; height: 48px; }
  html body .portal-header > a.purchase-entry { order: 5; margin-left: 0; flex: 1 1 100%; justify-content: center; }
}

/* ==========================================================================
   A3 · Botões — um único conjunto de estados (repouso / hover / ativo / foco / desabilitado).
   Antes: no Comercial, `.primary:hover{background:#066e4e}` (style.css) vencia; no tema escuro
   o texto #0b0f0e sobre #066e4e caía para 3,07:1. Altura variava 37/41/44 px e raio 6/12 px.
   C1 · Altura mínima 44 px, raio 12 px, fonte 15 px, peso 600 em todos os botões de ação.
   ========================================================================== */
html body :is(.primary, .secondary, .button) {
  /* !important: `.page-heading > .primary{min-height:37px}` (style.css) tem especificidade maior. */
  min-height: var(--r2p-btn-h) !important;
  border-radius: var(--r2p-btn-radius);
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  gap: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  box-sizing: border-box;
}
html body .primary {
  background: var(--r2p-primary-bg);
  color: var(--r2p-primary-fg);
  border: 1px solid transparent;
  box-shadow: none;
}
html body .primary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--r2p-primary-hover); color: var(--r2p-primary-fg); }
html body .primary:not(:disabled):not([aria-disabled="true"]):active { background: var(--r2p-primary-active); }
/* Botão de confirmação destrutiva (ConfirmDialog danger) — antes usava style inline sem hover. */
html body .primary.is-danger { background: var(--r2p-danger); color: #fff; }
html body .primary.is-danger:not(:disabled):hover { background: var(--r2p-danger-hover); color: #fff; }
html[data-theme="dark"] body .primary.is-danger { background: #c92b23; color: #fff; }
html[data-theme="dark"] body .primary.is-danger:not(:disabled):hover { background: #a8221b; }

/* Secundário destrutivo (ex.: "Cancelar OS"): texto vermelho legível nos dois temas. */
html body .secondary.is-danger-outline { color: var(--r2p-danger); border-color: color-mix(in srgb, var(--r2p-danger) 40%, transparent); }
html body .secondary.is-danger-outline:not(:disabled):hover { color: var(--r2p-danger); background: color-mix(in srgb, var(--r2p-danger) 12%, transparent); border-color: var(--r2p-danger); }

/* Secundário: fundo neutro + contorno de 1 px para não "sumir" em painel branco
   (antes: botão branco sobre painel branco, borda #dce1e4 = 1,3:1). */
html body .secondary {
  background: var(--surface-muted);
  color: var(--text);
  border: 1px solid var(--line);
}
html body .secondary:not(:disabled):not([aria-disabled="true"]):hover { background: var(--accent-soft); color: var(--accent-text); border-color: color-mix(in srgb, var(--accent-text) 35%, transparent); }
html body .secondary:not(:disabled):active { background: var(--r2p-hover-strong); }

/* Botão de texto e ícone: antes não tinham nenhum retorno no hover (.text-btn) ou só no Comercial. */
html body .text-btn {
  min-height: var(--r2p-btn-h);
  border-radius: 0.625rem;
  padding: 0.5rem 0.625rem;
  color: var(--accent-text);
  background: transparent;
  font-weight: 600;
}
html body .text-btn:not(:disabled):hover { background: var(--accent-soft); color: var(--accent-text); }
html body a.text-btn:hover { text-decoration: none; }
html body .icon-btn {
  min-width: var(--r2p-btn-h);
  min-height: var(--r2p-btn-h);
  border-radius: var(--r2p-btn-radius);
}
html body .icon-btn:not(:disabled):hover { background: var(--r2p-hover-soft); color: var(--accent-text); }
html body :is(.text-btn, .icon-btn).danger { color: var(--r2p-danger); }
html body :is(.text-btn, .icon-btn).danger:not(:disabled):hover { background: color-mix(in srgb, var(--r2p-danger) 12%, transparent); color: var(--r2p-danger); }
/* .agent-actions do Comercial usa .primary com outra aparência: mantém no hover. */
html body .agent-actions .primary:not(:disabled):hover { background: var(--surface-elevated, var(--surface)); color: var(--text); filter: brightness(0.97); }

/* Desabilitado: aparência única (antes 0,48 / 0,5 e alguns ainda mudavam no hover). */
html body :is(button, .primary, .secondary, .button, .text-btn, .icon-btn):is(:disabled, [aria-disabled="true"]) {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  filter: none;
}
html body button[aria-busy="true"] { cursor: progress; }

/* ==========================================================================
   A4 · Abas (.settings-tabs / .editor-tabs / ARIA tabs): sem hover nas abas inativas.
   ========================================================================== */
html body :is(.settings-tabs, .editor-tabs) :is(button, [role="tab"]):not(.active):not([aria-selected="true"]):not(:disabled):hover {
  color: var(--text);
  background: color-mix(in srgb, var(--surface-elevated, var(--surface)) 70%, transparent);
}
html body :is(.settings-tabs, .editor-tabs) :is(button, [role="tab"]) { cursor: pointer; }

/* Barra inferior (celular): toque/hover com o mesmo verde do item ativo. */
html body .tab-bar button:not(.active):hover { color: var(--text); background: var(--r2p-hover-soft); }

/* ==========================================================================
   A5 · Tabela: hover de linha igual em linhas pares e ímpares (antes a linha par cinza
   não mudava), link de linha e cabeçalho ordenável sem retorno visual.
   ========================================================================== */
html body tbody tr:hover > td { background-color: color-mix(in srgb, var(--accent-soft) 85%, transparent); }
html body td .row-link:hover strong,
html body td .row-link:hover { color: var(--accent-text); }
html body td .row-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
html body th .th-sort:hover { color: var(--brand, #2fd9a4); }
html body th .th-sort:hover .th-arrow { opacity: 1; }

/* ==========================================================================
   A6 · Chips, cartões clicáveis, KPIs e itens de lista sem estado de hover.
   ========================================================================== */
html body .pv-chip { cursor: pointer; }
html body .pv-chip:not([aria-pressed="true"]):hover { background: var(--r2p-hover-strong); color: var(--text); }
html body .pv-chip[aria-pressed="true"]:hover { filter: brightness(0.97); }
html[data-theme="dark"] body .pv-chip[aria-pressed="true"]:hover { filter: brightness(1.15); }
html body button.stat { cursor: pointer; text-align: left; }
html body button.stat:hover { border-color: var(--accent-text) !important; box-shadow: 0 6px 22px #18212812 !important; }
html body .pv-card-btn:hover { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); }
html body .pv-ev:hover { filter: brightness(0.96); }
html[data-theme="dark"] body .pv-ev:hover { filter: brightness(1.2); }
html body .pv-more:hover { text-decoration: underline; }
html body .system-card:has(.system-link:hover) { border-color: color-mix(in srgb, var(--accent-text) 40%, var(--line)) !important; }
html body .r2-app-shortcuts a:hover { border-color: var(--accent-text); background: color-mix(in srgb, var(--accent-soft) 40%, var(--surface)); }
html body .r2-user-menu > button:hover { background: var(--r2p-hover-soft); }
html body .r2-module-switch a:not([aria-current="page"]):hover { color: var(--text); background: var(--surface-hover); }

/* Calendário (Produção): o número do dia é um botão com min-height 44 px herdado — a "pílula"
   do dia de hoje ficava oval (26×44). Agora é um círculo; o alvo grande continua sendo a célula. */
html body .pv-cal-n { min-height: 1.75rem; height: 1.75rem; min-width: 1.75rem; padding: 0 0.375rem; border-radius: 999px; line-height: 1; }
html body button.pv-cal-n:hover { background: var(--r2p-hover-strong) !important; }
html body .pv-cal-day.today .pv-cal-n,
html body .pv-cal-day.today button.pv-cal-n:hover { background: var(--brand) !important; color: #0b0f0e !important; }
html body .pv-cal-day { cursor: pointer; }
html body .pv-cal-day:hover { background: color-mix(in srgb, var(--accent-soft) 35%, transparent); }

/* Links de texto (alertas, breadcrumbs, ajuda): sublinham no hover. */
html body :is(.pv-alert, .pv-hint, .pv-muted, .muted, .r2-topbar-crumb, .topbar, p, small, dd, td) a:not(.primary):not(.secondary):not(.text-btn):not(.icon-btn):not(.pv-os-item):not(.pv-card-btn):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   B1 · Foco visível uniforme. Antes: #35c996 (style.css) ou --accent-text (design-system)
   conforme a ordem dos chunks; .pv-os-item usava --brand (1,8:1 sobre branco; 1,6:1 sobre o cinza do item).
   Agora: anel de 3 px em --accent-text (5,8:1 claro / 9,7:1 escuro) + 2 px de respiro.
   ========================================================================== */
html body :is(a, button, summary, [role="tab"], [role="button"], [role="menuitem"], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--r2p-focus);
  outline-offset: 2px;
}
html body :is(input, select, textarea):focus-visible {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: var(--r2p-ring);
}
html body .number-control:focus-within { outline: 2px solid var(--r2p-focus); outline-offset: 2px; }
/* Itens que ficam encostados em bordas (lista, tabela, abas roláveis): anel por dentro. */
html body :is(.pv-os-item, .pv-pick button, .tab-bar button, .pv-tabs-scroll [role="tab"], td .row-link, .r2-nav-subgroup button):focus-visible { outline-offset: -3px; }
/* Primário menta: anel escuro fica mais visível que o verde sobre o próprio menta. */
html body .primary:focus-visible { outline-color: var(--text); }
/* Cabeçalho escuro da tabela: anel menta (11:1 sobre #0b0f0e). */
html body th .th-sort:focus-visible { outline-color: var(--brand, #2fd9a4); }
html body main#main-content:focus,
html body main#main-content:focus-visible { outline: none; }

/* ==========================================================================
   C2 · Números em tabela: alinhados à direita e com algarismos tabulares
   (antes o Produção não aplicava tabular-nums em td.right).
   ========================================================================== */
html body :is(td, th):is(.right, .num, .amount, .r) { text-align: right; font-variant-numeric: tabular-nums; }
html body :is(.pv-num, .stat strong, .pv-big-num, .table-footer span, .money) { font-variant-numeric: tabular-nums; }
/* No celular (td[data-label]) o Comercial já põe rótulo à esquerda e valor à direita; nada a mudar. */

/* C3 · Texto truncado com reticências: cursor de ajuda quando há title (o title é posto no TSX). */
html body [title]:is(.pv-os-main strong, .pv-os-main small, .pv-file small, .pv-ev) { cursor: inherit; }

/* C4 · Linha de filtros: rótulos e campos alinhados pela base; altura igual de inputs/selects. */
html body :is(.filters, .pv-filters, .toolbar) { align-items: flex-end; }
html body :is(.filters, .pv-filters, .toolbar) :is(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: var(--r2p-btn-h); }
html body .filters .search input { min-height: var(--r2p-btn-h); }

/* C5 · Abas roláveis no celular: dica de que há mais abas (sombra que some na ponta). */
@media (max-width: 720px) {
  html body .pv-tabs-scroll {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 1.5rem), transparent);
  }
}

/* ==========================================================================
   E1 · Assistente flutuante (Comercial/Portal): no celular cobria texto dos cartões.
   Vira só o ícone (o contador de alertas continua visível) e o conteúdo ganha folga no fim.
   ========================================================================== */
@media (max-width: 720px) {
  html body .r2-assistant-launcher { padding: 6px; gap: 0; border-radius: 999px; min-height: 0; }
  html body .r2-assistant-launcher > span { font-size: 0; gap: 0; }
  html body .r2-assistant-launcher > span small { font-size: 0.6875rem; }
  html body:has(.r2-assistant-launcher) main { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

/* E2 · Modal/drawer: rodapé de ações sempre alinhado à direita no desktop, botões com a mesma altura. */
@media (min-width: 721px) {
  html body .modal-actions { justify-content: flex-end; }
  html body .modal-actions > button { flex: 0 0 auto; min-width: 8rem; }
}

/* ==========================================================================
   D1 · Fluidez: transições curtas (140 ms) e consistentes só em cor/fundo/borda/sombra.
   D2 · prefers-reduced-motion: sem transições, sem "pulo" de escala nos botões.
   ========================================================================== */
html body :is(a, button, summary, [role="tab"], .pv-chip, .pv-card-btn, .pv-os-item, .stat, .system-card, tbody tr > td, .pv-cal-day, input, select, textarea) {
  transition:
    background-color var(--r2p-dur) var(--r2p-ease),
    color var(--r2p-dur) var(--r2p-ease),
    border-color var(--r2p-dur) var(--r2p-ease),
    box-shadow var(--r2p-dur) var(--r2p-ease),
    opacity var(--r2p-dur) var(--r2p-ease),
    filter var(--r2p-dur) var(--r2p-ease),
    transform 160ms var(--r2p-ease);
}
html body button:not(:disabled):active { transform: scale(0.98); }
html body .tab-bar button:active,
html body .sidebar nav button:active { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html body *:not(.r2-spinner),
  html body *::before,
  html body *::after {
    transition-duration: 0s !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  html body button:active { transform: none !important; }
}

/* ==========================================================================
   OPCIONAL · E4 · Tokens do tema escuro. Hoje `:root[data-theme="dark"]` (design-system.css,
   especificidade 0,2,0) vence `html[data-theme="dark"]` (r2-neutral.css, 0,1,1), então o escuro
   real é #000 / #1c1c1e (cinza "Apple") misturado com a sidebar #1c2023 do neutral — dois tons de
   cinza na mesma tela e diferente do que está documentado no DESIGN.md (#141719 / #202427).
   Os contrastes passam nos dois casos; por isso o bloco fica DESLIGADO. Para adotar a paleta
   neutra documentada, remova o comentário abaixo.
   ========================================================================== */
/*
:root[data-theme="dark"] {
  --bg: #141719; --surface: #202427; --panel: #202427; --surface-muted: #292e32; --panel-soft: #292e32;
  --surface-hover: #343a3e; --surface-elevated: #292e32; --text: #f1f3f5; --text-secondary: #b4bec5;
  --line: #3b4349; --sidebar: #1c2023;
}
*/