/**
 * CAR2 Design System — tokens globais
 * Source of truth: este arquivo. site.css e JSX consomem via var(--token).
 *
 * Duplicado intencionalmente no tecnico.app/src/styles/design-system.css.
 * Manter os dois sincronizados manualmente (decisão de projeto).
 */

:root {
  /* =========================================================
     Brand: SiCAR primary (verde CAR oficial)
     ========================================================= */
  --sicar-primary: #007a33;
  --sicar-primary-dark: #005c26;
  --sicar-primary-border: #045020;
  --sicar-primary-light: #e8f7ee;
  --sicar-primary-light-border: #b9e3c8;

  /* =========================================================
     Escala verde CAR (para acentos, estados e variações visuais)
     ========================================================= */
  --car-green-50:  #edf8f3;
  --car-green-100: #d6f0e3;
  --car-green-200: #a8dfc2;
  --car-green-300: #6ec49a;
  --car-green-400: #38a875;
  --car-green-500: #22905f;
  --car-green-600: #1e7e56;
  --car-green-700: #1a6b4a;
  --car-green-800: #145a30;
  --car-green-900: #0d3b1f;

  /* =========================================================
     Neutros / superfície
     ========================================================= */
  --car-surface: #f4f7f9;
  --car-surface-raised: #ffffff;
  --car-text-primary: #1a2332;
  --car-text-secondary: #5c6b7e;
  --car-text-muted: #8896a7;
  --car-border: #dfe4ea;
  --car-border-light: #edf0f4;

  /* =========================================================
     Acentos semânticos (categorias, gráficos, status)
     NÃO usar para botões — botões são sempre verde.
     ========================================================= */
  --car-blue: #1976d2;
  --car-blue-light: #e8f0fe;
  --car-teal: #00897b;
  --car-teal-light: #e0f2f1;
  --car-amber: #f9a825;
  --car-amber-light: #fff8e1;
  --car-red: #c62828;
  --car-red-light: #fce8e6;
  --car-purple: #5e35b1;
  --car-purple-light: #ede7f6;
  --car-grey: #607d8b;
  --car-grey-light: #eceff1;
  --car-orange: #e65100;
  --car-orange-light: #fff3e0;
  --car-pink: #ad1457;
  --car-pink-light: #fce4ec;

  /* =========================================================
     Navy (paginação, botão identify no mapa)
     ========================================================= */
  --car-navy: #205081;
  --car-navy-dark: #174371;

  /* =========================================================
     Steps (wizard de formulários multi-etapa)
     Tons sage suaves, herdados do tema legado — não usam a
     escala --car-green-* para evitar vibração.
     ========================================================= */
  --car-step-passed: #82b1a3;
  --car-step-active: var(--sicar-primary);
  --car-step-pending-bg: var(--sicar-primary-light);
  --car-step-pending-color: var(--car-text-secondary);

  /* =========================================================
     Semânticos de alerta (segments/labels)
     ========================================================= */
  --car-success: #14892c;
  --car-danger: #d04437;
  --car-warning: #ff9800;
  --car-info: #a9d5de;
  --car-info-bg: #7abfcd;

  /* =========================================================
     Sombras e radius
     ========================================================= */
  --car-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --car-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04);
  --car-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
  --car-shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);

  --car-radius-sm: 6px;
  --car-radius-md: 10px;
  --car-radius-lg: 14px;
}

/* =========================================================
   Overrides globais de BOTÕES Semantic UI
   Regras restritas a .button — não afetam .label, .segment, .text.

   Hierarquia de verde:
   - .ui.primary.button      → verde SiCAR oficial (#007a33). Definido em site.css.
   - .ui.green.button        → verde --car-green-500 (#22905f). Menos vibrante que o
                                default do Semantic (#21BA45), mais suave que o primary.
   - .ui.green.inverted...   → outline (transparente + borda verde). Sólido só no hover.

   .ui.blue.button mantém o azul default do Semantic — quando o dev escolhe azul,
   respeitamos. Para ação primária use .ui.primary.button.
   ========================================================= */

/* Green sólido: menos vibrante que #21BA45, distinto do primary */
.ui.green.button,
.ui.green.buttons .button {
  background-color: var(--car-green-500) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.ui.green.button:hover,
.ui.green.buttons .button:hover {
  background-color: var(--car-green-600) !important;
  color: #fff !important;
}
.ui.green.button:focus,
.ui.green.buttons .button:focus {
  background-color: var(--car-green-600) !important;
  color: #fff !important;
}
.ui.green.button:active,
.ui.green.buttons .button:active {
  background-color: var(--car-green-700) !important;
  color: #fff !important;
}

/* Green inverted: outline (transparente + borda), sólido no hover */
.ui.green.inverted.button,
.ui.green.inverted.buttons .button,
.ui.inverted.green.button,
.ui.inverted.green.buttons .button {
  background-color: transparent !important;
  color: var(--car-green-500) !important;
  box-shadow: 0 0 0 2px var(--car-green-500) inset !important;
}
.ui.green.inverted.button:hover,
.ui.green.inverted.buttons .button:hover,
.ui.inverted.green.button:hover,
.ui.inverted.green.buttons .button:hover {
  background-color: var(--car-green-500) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--car-green-500) inset !important;
}

/* Basic green: outline com hover suave (usa tom claro do brand) */
.ui.basic.green.button,
.ui.basic.green.buttons .button {
  background-color: transparent !important;
  color: var(--car-green-600) !important;
  box-shadow: 0 0 0 1px var(--car-green-500) inset !important;
}
.ui.basic.green.button:hover,
.ui.basic.green.buttons .button:hover {
  background-color: var(--sicar-primary-light) !important;
  color: var(--car-green-700) !important;
  box-shadow: 0 0 0 1px var(--car-green-600) inset !important;
}

/* Red sólido: menos saturado que #DB2828, mais perto do vermelho real */
.ui.red.button,
.ui.red.buttons .button {
  background-color: var(--car-red) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.ui.red.button:hover,
.ui.red.buttons .button:hover {
  background-color: #a62121 !important;
  color: #fff !important;
}
.ui.red.button:focus,
.ui.red.buttons .button:focus {
  background-color: #a62121 !important;
  color: #fff !important;
}
.ui.red.button:active,
.ui.red.buttons .button:active {
  background-color: #881818 !important;
  color: #fff !important;
}

/* Red inverted: outline, sólido no hover */
.ui.red.inverted.button,
.ui.red.inverted.buttons .button,
.ui.inverted.red.button,
.ui.inverted.red.buttons .button {
  background-color: transparent !important;
  color: var(--car-red) !important;
  box-shadow: 0 0 0 2px var(--car-red) inset !important;
}
.ui.red.inverted.button:hover,
.ui.red.inverted.buttons .button:hover,
.ui.inverted.red.button:hover,
.ui.inverted.red.buttons .button:hover {
  background-color: var(--car-red) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--car-red) inset !important;
}

/* Basic red: outline com hover suave */
.ui.basic.red.button,
.ui.basic.red.buttons .button {
  background-color: transparent !important;
  color: var(--car-red) !important;
  box-shadow: 0 0 0 1px var(--car-red) inset !important;
}
.ui.basic.red.button:hover,
.ui.basic.red.buttons .button:hover {
  background-color: var(--car-red-light) !important;
  color: #a62121 !important;
  box-shadow: 0 0 0 1px #a62121 inset !important;
}

/* =========================================================
   Readonly item — bloco compacto (label pequeno + valor textual)
   Usado em telas analíticas (ex: PSA Analisar → Bônus Aplicáveis).
   Duplicado intencionalmente do tecnico.app/design-system.css —
   manter os dois sincronizados (decisão de projeto).
   ========================================================= */
.readonly-item {
  display: block;
}
.readonly-item .readonly-label {
  font-size: 0.85em;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 600;
  margin-bottom: 4px;
}
.readonly-item .readonly-value {
  font-size: 0.95em;
  color: rgba(0, 0, 0, 0.87);
  word-break: break-word;
}

/* PSA - grade de cotas por mesorregião/grupo. */
.ui.form .psa-cotas-table .psa-cota-input,
.ui.form .psa-cotas-table .psa-cota-input.field {
  margin: 0;
}
.ui.form .psa-cotas-table .psa-cota-input.field {
  width: 100%;
}
.ui.form .psa-cotas-table .psa-cota-qtd {
  flex: 0 0 auto;
  width: 5.8em;
}
.ui.form .psa-cotas-table .psa-cota-input input,
.ui.form .psa-cotas-table input.psa-cota-input {
  background-color: #fff;
  box-sizing: border-box;
  color: rgba(0, 0, 0, 0.87);
  text-align: right;
  width: 100%;
}
/* Campo realmente bloqueado (consulta de edital inativo) volta a ter cara de desabilitado. */
.ui.form .psa-cotas-table .psa-cota-input input:disabled,
.ui.form .psa-cotas-table input.psa-cota-input:disabled {
  background-color: #f4f6f9;
  color: #555;
}
/* Legenda no cabeçalho do grupo, alinhada com as duas caixas de cada célula. */
.ui.form .psa-cotas-table .psa-cota-legenda {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: normal;
  text-transform: none;
}
.ui.form .psa-cotas-table .psa-cota-legenda .psa-cota-area {
  flex: 0 0 auto;
  width: 9.5em;
}
.ui.form .psa-cotas-table .psa-cota-legenda .psa-cota-area,
.ui.form .psa-cotas-table .psa-cota-legenda .psa-cota-qtd {
  text-align: right;
}
/* Rodapé da grade: o que as mesorregiões somam, abaixo do limite digitado do grupo. */
.ui.form .psa-cotas-table .psa-cota-distribuido {
  margin-top: 3px;
  font-size: 11px;
  font-weight: normal;
  text-align: right;
}
/* Rodapé "Total distribuído": última linha da grade, fixa na sua posição. Sem
   position:sticky de propósito — o sticky fazia a linha descolar e flutuar no pé
   do modal durante a rolagem; ela deve acompanhar a grade, logo abaixo da última
   mesorregião. */
.ui.form .psa-cotas-table tfoot th {
  background-color: #f9fafb;
  box-shadow: inset 0 1px 0 rgba(34, 36, 38, 0.15);
}
.psa-propriedades-filtros {
  margin-bottom: 1em;
}

/* =========================================================
   Editar Edital Vigente — modo compacto do modal.
   A grade (7 mesorregiões × 3 grupos + rodapé) + parâmetros não cabem
   sem rolar muito. Reduz a escala de fonte só deste modal e aperta
   paddings de formulário/tabela, sem tocar no design global.
   ========================================================= */
/* A grade (mesorregião + 3 grupos + total) precisa de largura: o large padrão
   (1080–1140px) ainda espreme as colunas. Centralização do modal é por
   transform, então basta alargar — sem recalcular margem. Seletor com `.large`
   junto pra vencer as media queries de largura do Fomantic (mesma
   especificidade, ordem de import incerta). */
.ui.large.modal.edital-vigente-modal {
  width: 920px;
  max-width: 94vw;
}
.ui.modal.edital-vigente-modal > .ui.form > .content {
  font-size: 0.82rem;
}
.ui.modal.edital-vigente-modal > .ui.form > .header {
  font-size: 1.15rem;
}
.ui.modal.edital-vigente-modal .content .field {
  margin-bottom: 0.55em;
}
.ui.modal.edital-vigente-modal .content .fields {
  margin-bottom: 0.4em;
}
.ui.modal.edital-vigente-modal .content input[type='text'],
.ui.modal.edital-vigente-modal .content input[type='number'] {
  font-size: 1em;
  padding: 0.45em 0.6em;
}
.ui.modal.edital-vigente-modal .content .dividing.header {
  font-size: 1.05em;
  margin-top: 0.8em;
  padding-bottom: 0.4em;
}
.ui.modal.edital-vigente-modal .content .ui.message {
  padding: 0.7em 1em;
  font-size: 0.95em;
}
.ui.modal.edital-vigente-modal .psa-cotas-table {
  font-size: 1em;
}
.ui.modal.edital-vigente-modal .psa-cotas-table th,
.ui.modal.edital-vigente-modal .psa-cotas-table td {
  padding: 0.35em 0.5em;
}
.ui.modal.edital-vigente-modal .psa-cotas-table thead th {
  font-size: 0.95em;
}
.ui.modal.edital-vigente-modal .psa-cotas-table .psa-cota-distribuido {
  font-size: 10px;
}
.ui.input.campo-senha > input {
  padding-right: 2.67142857em !important;
}

/* Olho nativo do Edge: seria uma segunda forma de revelar a senha, fora do nosso controle */
.ui.input.campo-senha > input::-ms-reveal,
.ui.input.campo-senha > input::-ms-clear {
  display: none;
}

.campo-senha-olho {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.67142857em;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.campo-senha-olho > .icon {
  margin: 0;
}

.campo-senha-olho:focus-visible {
  outline: 2px solid #2185d0;
  outline-offset: -4px;
}

/* Detecta o preenchimento do navegador pelo animationstart (seletores separados: um
   seletor desconhecido invalida a regra inteira) */
@keyframes senha-autofill {
  from { opacity: 1; }
  to { opacity: 1; }
}

.ui.input.campo-senha > input:-webkit-autofill {
  animation: senha-autofill 1ms;
}

.ui.input.campo-senha > input:autofill {
  animation: senha-autofill 1ms;
}
/* Ícones de usuário e senha à direita do campo, como no login do tecnico.app */
.login-form .ui.left.icon.input > i.icon {
  left: auto !important;
  right: 1px !important;
}

.login-form .ui.left.icon.input i.icon {
  color: var(--sicar-primary);
}

.login-form .ui.left.icon.input > input {
  padding-left: 1em !important;
  padding-right: 2.67142857em !important;
}

.login-form .ui.input > input::placeholder {
  font-size: 0.85em;
}

.login-form .ui.positive.button {
  background-color: var(--sicar-primary);
}

.login-form .ui.positive.button:hover,
.login-form .ui.positive.button:focus {
  background-color: var(--sicar-primary-dark);
}