/*
 * NacoesAPP — Tokens visuais globais (Fase 1 do docs/DESIGN-SYSTEM.md)
 *
 * Objetivo: neutralizar o azul/roxo do template Bootstrap comercial
 * (theme.css) e alinhar a Intranet ao teal já usado no Filament (#137a81).
 *
 * Este arquivo é carregado DEPOIS de theme.css/intranet.css (em
 * layouts/intranet.blade.php) e depois de login.css (em auth/login.blade.php).
 * Sobrescreve a camada genérica do Bootstrap (botões, links, foco) que o
 * template antigo deixou em azul/roxo.
 *
 * Sprint 3B.1 (unificação de tokens, docs/HOME-OPERACIONAL-FASE3B.md):
 * --nh-primary-600 é a fonte única de verdade da cor de marca. --intranet-primary
 * (intranet.css) e --login-primary (login.css) foram redefinidos como
 * var(--nh-primary-600) — antes cada um tinha seu próprio hex (#126973),
 * diferente do oficial (#137a81). Os ~100 usos de var(--intranet-primary)/
 * var(--login-primary) no resto dos dois arquivos não precisaram mudar.
 *
 * Onde NÃO foi tocado de propósito (fora do escopo desta fase):
 * - Cores semânticas de estado (.btn-success, .btn-danger, .btn-warning,
 *   .btn-info) — não são "marca", são feedback de UI.
 * - Estrutura HTML, JS, qualquer Blade além dos <link> que carregam este arquivo.
 */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Noto+Sans:wght@400;500;600;700&display=swap');

:root {
  /* ---- Tokens novos (docs/DESIGN-SYSTEM.md) ---- */
  --nh-primary-50:  #ECFEFF;
  --nh-primary-100: #CFFAFE;
  --nh-primary-400: #22D3EE;
  --nh-primary-500: #0891B2;
  --nh-primary-600: #137a81; /* cor oficial — já usada no Filament Admin/Clínicas */
  --nh-primary-600-rgb: 19, 122, 129; /* mesmo valor de --nh-primary-600, em triplet RGB para uso em rgba() */
  --nh-primary-700: #0E5A60;
  --nh-primary-800: #134E4A;
  --nh-success-500: #22C55E;
  --nh-success-600: #16A34A;
  --nh-text:        #134E4A;
  --nh-text-muted:  #475569;
  --nh-border:      #CBD5E1;
  --nh-surface:     #FFFFFF;
  --nh-radius-sm:   0.375rem;
  --nh-radius-md:   0.5rem;
  --nh-radius-lg:   0.75rem;
  --nh-font-heading: 'Figtree', 'Mulish', sans-serif;
  --nh-font-body:    'Noto Sans', 'Mulish', sans-serif;

  /* ---- Sobrescrita das variáveis do template (--boots5-*) ----
     Várias utilidades do Bootstrap 5 (.text-primary, .bg-primary,
     .border-primary, .link-primary) já leem estas variáveis via
     var(--boots5-primary-rgb), então só isso já corrige essas classes. */
  --boots5-primary: #137a81;
  --boots5-primary-rgb: 19, 122, 129;
  --boots5-secondary: #137a81;
  --boots5-secondary-rgb: 19, 122, 129;
  --boots5-font-sans-serif: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --boots5-body-font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---- Tipografia ----
   body.intranet-layout tem mais especificidade que o `body { font-family:
   'Mulish' }` inline em layouts/intranet.blade.php, então vence sem precisar
   de !important nem editar aquele bloco. */
body.intranet-layout {
  font-family: var(--nh-font-body);
}
body.intranet-layout h1,
body.intranet-layout h2,
body.intranet-layout h3,
body.intranet-layout h4,
body.intranet-layout h5,
body.intranet-layout h6 {
  font-family: var(--nh-font-heading);
}

/* ---- Links ----
   theme.css define `a { color: #045bc1 }` com hex fixo (não usa variável),
   por isso precisa de override explícito aqui, não só no :root. */
body.intranet-layout a {
  color: var(--nh-primary-600);
}
body.intranet-layout a:hover {
  color: var(--nh-primary-700);
}
body.intranet-layout a:not([href]):not([class]),
body.intranet-layout a:not([href]):not([class]):hover {
  color: inherit;
}

/* ---- Botão primário ----
   Mesmo motivo dos links: .btn-primary em theme.css usa #045bc1 fixo. */
body.intranet-layout .btn-primary {
  background-color: var(--nh-primary-600);
  border-color: var(--nh-primary-600);
}
body.intranet-layout .btn-primary:hover {
  background-color: var(--nh-primary-700);
  border-color: var(--nh-primary-700);
}
body.intranet-layout .btn-check:focus + .btn-primary,
body.intranet-layout .btn-primary:focus {
  background-color: var(--nh-primary-700);
  border-color: var(--nh-primary-700);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0 0.25rem rgba(19, 122, 129, 0.35);
}
body.intranet-layout .btn-check:checked + .btn-primary,
body.intranet-layout .btn-check:active + .btn-primary,
body.intranet-layout .btn-primary:active,
body.intranet-layout .btn-primary.active,
body.intranet-layout .show > .btn-primary.dropdown-toggle {
  background-color: var(--nh-primary-800);
  border-color: var(--nh-primary-800);
}
body.intranet-layout .btn-primary:disabled,
body.intranet-layout .btn-primary.disabled {
  background-color: var(--nh-primary-600);
  border-color: var(--nh-primary-600);
}

/* ---- Botão secundário ----
   theme.css usa roxo (#D032D0) fixo. docs/DESIGN-SYSTEM.md (secao 5) define
   o botao secundario/cancelar como neutro (fundo branco, borda visivel,
   texto --nh-text) em vez de uma segunda cor saturada — aplicado aqui. */
body.intranet-layout .btn-secondary {
  color: var(--nh-text);
  background-color: var(--nh-surface);
  border-color: var(--nh-border);
  box-shadow: none;
}
body.intranet-layout .btn-secondary:hover {
  color: var(--nh-text);
  background-color: #F0FDFA;
  border-color: var(--nh-primary-500);
}
body.intranet-layout .btn-check:focus + .btn-secondary,
body.intranet-layout .btn-secondary:focus {
  color: var(--nh-text);
  background-color: #F0FDFA;
  border-color: var(--nh-primary-500);
  box-shadow: 0 0 0 0.25rem rgba(19, 122, 129, 0.25);
}
body.intranet-layout .btn-check:checked + .btn-secondary,
body.intranet-layout .btn-check:active + .btn-secondary,
body.intranet-layout .btn-secondary:active,
body.intranet-layout .btn-secondary.active,
body.intranet-layout .show > .btn-secondary.dropdown-toggle {
  color: var(--nh-text);
  background-color: #E2F8F5;
  border-color: var(--nh-primary-500);
}
body.intranet-layout .btn-secondary:disabled,
body.intranet-layout .btn-secondary.disabled {
  color: var(--nh-text-muted);
  background-color: var(--nh-surface);
  border-color: var(--nh-border);
}

/* ---- Botão secundário (outline) ----
   Mesmo problema do .btn-secondary acima, nunca corrigido: theme.css define
   .btn-outline-secondary inteiro (base, hover, focus, active, disabled) com
   #D032D0 (rosa/magenta) fixo — cor proibida em UI hospitalar/operacional
   (docs/PALETA-TEAL-COMPONENTES.md, secao 6, "Anti-padroes"). Mesmo
   tratamento neutro do .btn-secondary, adaptado pra outline. */
body.intranet-layout .btn-outline-secondary {
  color: var(--nh-text);
  border-color: var(--nh-border);
}
body.intranet-layout .btn-outline-secondary:hover {
  color: var(--nh-text);
  background-color: #F0FDFA;
  border-color: var(--nh-primary-500);
}
body.intranet-layout .btn-check:focus + .btn-outline-secondary,
body.intranet-layout .btn-outline-secondary:focus {
  color: var(--nh-text);
  background-color: #F0FDFA;
  border-color: var(--nh-primary-500);
  box-shadow: 0 0 0 0.25rem rgba(19, 122, 129, 0.25);
}
body.intranet-layout .btn-check:checked + .btn-outline-secondary,
body.intranet-layout .btn-check:active + .btn-outline-secondary,
body.intranet-layout .btn-outline-secondary:active,
body.intranet-layout .btn-outline-secondary.active,
body.intranet-layout .btn-outline-secondary.dropdown-toggle.show {
  color: var(--nh-text);
  background-color: #E2F8F5;
  border-color: var(--nh-primary-500);
}
body.intranet-layout .btn-outline-secondary:disabled,
body.intranet-layout .btn-outline-secondary.disabled {
  color: var(--nh-text-muted);
  border-color: var(--nh-border);
}

/* ---- Foco (acessibilidade) ----
   theme.css usa rgba(4, 91, 193, *) fixo (azul) no anel de foco padrao do
   Bootstrap. Troca para o teal da marca, mantendo o anel visivel (requisito
   de acessibilidade do docs/DESIGN-SYSTEM.md, secao 6). */
body.intranet-layout .btn-check:focus + .btn,
body.intranet-layout .btn:focus {
  box-shadow: 0 0 0 0.25rem rgba(19, 122, 129, 0.25);
}
body.intranet-layout .form-control:focus,
body.intranet-layout .form-select:focus {
  border-color: var(--nh-primary-500);
  box-shadow: 0 0 0 0.25rem rgba(19, 122, 129, 0.25);
}
body.intranet-layout .form-check-input:focus {
  border-color: var(--nh-primary-500);
  box-shadow: 0 0 0 0.25rem rgba(19, 122, 129, 0.25);
}
body.intranet-layout .form-check-input:checked {
  background-color: var(--nh-primary-600);
  border-color: var(--nh-primary-600);
}

/* ---- Borda (raio) ----
   Ajuste leve, sem mudar estrutura: arredondamento consistente com o que
   ja existe no swal2-modal (0.75rem) e nos cards novos da Intranet. */
body.intranet-layout .btn,
body.intranet-layout .form-control,
body.intranet-layout .form-select {
  border-radius: var(--nh-radius-md);
}
body.intranet-layout .card,
body.intranet-layout .modal-content,
body.intranet-layout .dropdown-menu {
  border-radius: var(--nh-radius-lg);
}

@media (prefers-reduced-motion: reduce) {
  body.intranet-layout * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}