/* uk2 — tokens de cor/tipografia e tema claro/escuro do novo design UpKeeper.
   Compartilhado por todas as telas "v2" (dashboard, ordens de serviço, painel TV).
   Não toca no style.css global. */

.uk2 {
  --navy-950: #0F1718;
  --navy-900: #182628;
  --navy-800: #203033;
  --white: #FFFFFF;
  --offwhite: #F7F8F8;
  --grey-100: #EDEFEF;

  --lime-500: #BAD247;
  --lime-600: #A3C038;
  --olive-600: #6E9A40;

  --blue-400: #6DB3CA;
  --amber-500: #D4A13A;
  --terracotta-600: #B34A3A;
  /* Um passo mais escuro, para o hover do botão que confirma exclusão. */
  --terracotta-700: #9C3F31;

  --tint-red: #F9F1EF;
  --tint-amber: #FBF5EA;
  --tint-green: #F0F5EC;
  --tint-blue: #EFF5F7;
  --tint-lime: rgba(186, 210, 71, .14);

  --text-strong: var(--navy-800);
  --text-body: rgba(32, 48, 51, .78);
  --text-muted: rgba(32, 48, 51, .62);
  --text-faint: rgba(32, 48, 51, .45);
  /* Verde de TEXTO, mais escuro que o `--olive-600` da marca de propósito: o
     olive puro dá 3,30:1 sobre o cartão branco e 2,98:1 sobre o verdinho do
     `--tint-green`, abaixo do mínimo de 4,5:1 para texto normal. Este valor dá
     5,62 e 5,08. A cor da marca segue intacta em `--olive-600`, para preencher
     ícone, borda e fundo, onde 3:1 já basta. */
  --text-accent: #4F7130;
  /* Cor de link. Existe como token próprio porque `.uk2 a` tira o sublinhado —
     sem cor, o único indicador de link some e o navegador entrega o #0000EE
     dele, que dá 1,46:1 sobre o cartão escuro. */
  --link: var(--text-accent);

  --surface-page: var(--offwhite);
  --surface-card: var(--white);
  --surface-card-header: var(--navy-800);
  --surface-dark: var(--navy-800);
  --surface-darkest: var(--navy-950);

  --line-soft: rgba(32, 48, 51, .12);
  --line-dark: rgba(255, 255, 255, .14);

  --action-primary-bg: var(--lime-500);
  --action-primary-bg-hover: var(--lime-600);
  --action-primary-fg: var(--navy-950);

  --action-danger-bg: var(--terracotta-600);
  --action-danger-bg-hover: var(--terracotta-700);
  --action-danger-fg: var(--white);

  --status-urgent-fg: var(--terracotta-600); --status-urgent-bg: var(--tint-red);
  --status-warn-fg: var(--amber-500);        --status-warn-bg: var(--tint-amber);
  --status-info-fg: var(--blue-400);         --status-info-bg: var(--tint-blue);
  --status-ok-fg: var(--olive-600);          --status-ok-bg: var(--tint-green);
  --status-neutral-fg: var(--text-muted);    --status-neutral-bg: var(--grey-100);

  --brand-grid:
    repeating-linear-gradient(0deg, rgba(186,210,71,.035) 0px, rgba(186,210,71,.035) 1px, transparent 1px, transparent 96px),
    repeating-linear-gradient(90deg, rgba(186,210,71,.035) 0px, rgba(186,210,71,.035) 1px, transparent 1px, transparent 96px);

  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 100px;

  font-family: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--surface-page);
  color: var(--text-strong);
  min-height: calc(100vh / var(--uk2-zoom, 1));
}

.uk2[data-theme="dark"] {
  --text-strong: var(--white);
  --text-body: rgba(255, 255, 255, .70);
  --text-muted: rgba(255, 255, 255, .60);
  --text-faint: rgba(255, 255, 255, .50);

  --surface-page: var(--navy-950);
  --surface-card: var(--navy-800);
  --surface-card-header: var(--navy-950);

  --line-soft: rgba(255, 255, 255, .14);

  --status-urgent-bg: rgba(179, 74, 58, .18);
  --status-warn-bg: rgba(212, 161, 58, .18);
  --status-info-bg: rgba(109, 179, 202, .18);
  --status-ok-bg: rgba(110, 154, 64, .18);
  --status-neutral-bg: rgba(255, 255, 255, .10);

  /* Os quatro tints opacos precisam virar translúcidos aqui, como os
     `--status-*-bg` acima já fazem. Declarados só no bloco claro, eles são
     quase brancos (#F9F1EF, #FBF5EA, #F0F5EC, #EFF5F7), e todo componente que
     usa `var(--tint-*)` direto ficava com fundo claro enquanto o texto virava
     branco: 1,06:1 no chip de equipamento, 1,07 e 1,10 no aviso de categorias.
     Texto invisível. `--tint-lime` já era rgba, e é por isso que era o único
     que atravessava os dois temas.
     Mesmos valores dos `--status-*-bg` para o mesmo componente ficar igual
     independente de qual dos dois tokens o CSS da tela usou. */
  --tint-red: rgba(179, 74, 58, .18);
  --tint-amber: rgba(212, 161, 58, .18);
  --tint-green: rgba(110, 154, 64, .18);
  --tint-blue: rgba(109, 179, 202, .18);

  /* O verde de texto do claro (#4F7130) dá 2,44:1 sobre o cartão escuro. Aqui
     vale o lime-600 da marca, que dá 6,63. */
  --text-accent: var(--lime-600);

  /* Sem isto o `--line-dark` do claro (branco a 14%) seguia valendo sobre
     superfície escura, virando uma borda que não se vê. */
  --line-dark: rgba(255, 255, 255, .22);
}

/* Sombra e motion — vinham faltando: o design system define estes em
   tokens/effects.css, mas só a rampa de cor tinha sido portada para cá.
   `--shadow-popover-dark` é a variante para popover sobre superfície escura
   (sidebar), onde a sombra clara do design não aparece. */
:root {
  --shadow-popover: 0 12px 40px rgba(15, 23, 24, .16);
  --shadow-popover-dark: 0 14px 40px rgba(15, 23, 24, .5);
  --ease-standard: cubic-bezier(.22, .61, .36, 1);
  --duration-fast: 120ms;
  --duration-base: 180ms;
}

.uk2 * { box-sizing: border-box; }

/* Esta regra tirava o sublinhado e não dava cor — o pior dos dois mundos: some
   o único indicador de link que não depende de cor, e o que sobra é o #0000EE
   do navegador, que dá 1,46:1 sobre o cartão escuro. Eram 58 âncoras em 32
   telas assim, a maioria em célula de tabela.
   `color: inherit` não serve: link tem de se distinguir do texto ao redor.
   Quem precisa de outra cor (menu da linha, sidebar, botão) já sobrescreve por
   classe, com especificidade maior que esta. */
/* `:where()` para a regra valer (0,1,0) de especificidade, o mesmo de uma
   classe: assim `.uk2-btn-primary`, `.uk2-badge` e companhia, que vêm depois
   na ordem de carga, seguem mandando na própria cor. Com `.uk2 a` cru a regra
   valia (0,1,1) e sequestrava a cor de todo botão que é link — o texto do
   botão primário caía para 3,31:1 sobre o lime. */
.uk2 :where(a) { text-decoration: none; color: var(--link); }
.uk2 :where(a):hover { text-decoration: underline; }
/* Dentro de texto corrido, a cor sozinha nao basta (WCAG 1.4.1): sublinha. */
.uk2 p a, .uk2 .pv2-nota a { text-decoration: underline; }
/* Foco visível de teclado, que não existia em nenhum link do v2. */
.uk2 a:focus-visible,
.uk2 button:focus-visible,
.uk2 [tabindex]:focus-visible {
  outline: 2px solid var(--text-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* O `[hidden] { display: none }` do navegador tem especificidade zero, então
   QUALQUER classe nossa que declare `display` o vence e o elemento nasce
   visível — foi o que aconteceu com o bloco de credenciais de fornecedor
   (`.fv2-field-row`, grid), com o campo de recorrência da preventiva e com o
   de taxa da depreciação (`.wov2-field`, flex): apareciam com o toggle
   desligado. Reforçar aqui resolve de uma vez e protege classe nova. */
.uk2 [hidden] { display: none !important; }
.uk2 .uk-numeric { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }