/*
 * Tema SealWA — paleta vermelha da marca.
 * Carregado depois de app.min.css (ver _HeadCSS.cshtml) para vencer no cascade.
 * Não substitui o template: redefine as variáveis --ins-* que o app.min.css já usa
 * (confirmado var(--ins-primary) em uso em ~109 pontos do CSS core), então a cor
 * se propaga sozinha por botões, links, badges e estados ativos.
 *
 * Referência de valores: .docs/designs/layout-web/Plano-e-Especificacao-Reformulacao.md, seção 2.
 */

[data-bs-theme="light"] {
  /* fundo / superfície / texto */
  --ins-body-bg: #f3f4f7;
  --ins-body-color: #1b1e27;
  --ins-border-color: #e1e4ea;
  --ins-border-color-translucent: rgba(27, 30, 39, .12);

  /*
   * Cor de link "solta" (não é a mesma cadeia de --ins-primary!) — usada por
   * abas de módulo (Torre de Controle/Tarefas/Relatórios/Configuração via
   * .nav-tabs .nav-link.active) e por qualquer <a> sem classe própria.
   * Sem isso, abas e links continuam no teal do skin antigo mesmo com o
   * resto da paleta já trocado.
   */
  --ins-link-color: #e2202f;
  --ins-link-color-rgb: 226, 32, 47;
  --ins-link-hover-color: #c81826;
  --ins-link-hover-color-rgb: 200, 24, 38;

  /* marca (não muda entre temas) */
  --ins-primary: #e2202f;
  --ins-primary-text-emphasis: #c81826;
  --ins-primary-bg-subtle: rgba(226, 32, 47, .08);
  --ins-primary-border-subtle: rgba(226, 32, 47, .35);

  /* secundário = neutro, não é uma segunda cor de marca */
  --ins-secondary: #5b6172;
  --ins-secondary-text-emphasis: #43485a;
  --ins-secondary-bg-subtle: rgba(91, 97, 114, .10);
  --ins-secondary-border-subtle: rgba(91, 97, 114, .35);

  /* semânticas */
  --ins-success: #15824f;
  --ins-success-text-emphasis: #106b41;
  --ins-success-bg-subtle: rgba(21, 130, 79, .10);
  --ins-success-border-subtle: rgba(21, 130, 79, .35);

  --ins-info: #2563eb;
  --ins-info-text-emphasis: #1d4fc4;
  --ins-info-bg-subtle: rgba(37, 99, 235, .10);
  --ins-info-border-subtle: rgba(37, 99, 235, .35);

  --ins-warning: #a86a08;
  --ins-warning-text-emphasis: #8a5606;
  --ins-warning-bg-subtle: rgba(226, 165, 58, .18);
  --ins-warning-border-subtle: rgba(168, 106, 8, .4);

  --ins-danger: #c8391f;
  --ins-danger-text-emphasis: #a52e19;
  --ins-danger-bg-subtle: rgba(200, 57, 31, .12);
  --ins-danger-border-subtle: rgba(200, 57, 31, .35);
}

[data-bs-theme="dark"] {
  /* fundo / superfície / texto */
  --ins-body-bg: #10121a;
  --ins-body-color: #edeef3;
  --ins-border-color: #2a2f3e;
  --ins-border-color-translucent: rgba(237, 238, 243, .12);

  /* ver comentário no bloco [data-bs-theme="light"] acima */
  --ins-link-color: #e2202f;
  --ins-link-color-rgb: 226, 32, 47;
  --ins-link-hover-color: #ff5c68;
  --ins-link-hover-color-rgb: 255, 92, 104;

  /* marca (não muda entre temas) */
  --ins-primary: #e2202f;
  --ins-primary-text-emphasis: #ff5c68;
  --ins-primary-bg-subtle: rgba(226, 32, 47, .16);
  --ins-primary-border-subtle: rgba(226, 32, 47, .4);

  --ins-secondary: #98a0b3;
  --ins-secondary-text-emphasis: #b7bdcb;
  --ins-secondary-bg-subtle: rgba(152, 160, 179, .14);
  --ins-secondary-border-subtle: rgba(152, 160, 179, .4);

  --ins-success: #2fb673;
  --ins-success-text-emphasis: #5cd196;
  --ins-success-bg-subtle: rgba(47, 182, 115, .14);
  --ins-success-border-subtle: rgba(47, 182, 115, .4);

  --ins-info: #4f8cf6;
  --ins-info-text-emphasis: #82abf8;
  --ins-info-bg-subtle: rgba(79, 140, 246, .14);
  --ins-info-border-subtle: rgba(79, 140, 246, .4);

  --ins-warning: #e2a53a;
  --ins-warning-text-emphasis: #ecc16e;
  --ins-warning-bg-subtle: rgba(226, 165, 58, .16);
  --ins-warning-border-subtle: rgba(226, 165, 58, .4);

  --ins-danger: #ef5b3b;
  --ins-danger-text-emphasis: #f4886f;
  --ins-danger-bg-subtle: rgba(239, 91, 59, .16);
  --ins-danger-border-subtle: rgba(239, 91, 59, .4);
}

/*
 * Rede de segurança: os maiores blocos de "chrome" (sidebar, topbar, cards)
 * às vezes fixam a própria cor de fundo em vez de herdar --ins-body-bg puro.
 * Reforça com base nas variáveis acima para os dois temas ficarem consistentes
 * mesmo se algum componente específico não seguir 100% a variável.
 */
/*
 * !important aqui é proposital: [data-menu-color=X]/[data-topbar-color=X] do
 * app.min.css combinam atributo+classe (mais específico que uma classe sozinha)
 * e podem fixar cor própria nesses dois elementos — sem isso, a herança de
 * --ins-body-bg pode perder para essas regras do template.
 */
.sidenav-menu,
.app-topbar {
  background-color: var(--ins-body-bg) !important;
  border-color: var(--ins-border-color) !important;
}

.card {
  background-color: var(--ins-body-bg);
  border-color: var(--ins-border-color);
}

/* Botão/link ativo do menu lateral usa o vermelho da marca com destaque de fundo sutil */
.side-nav .side-nav-link.active,
.side-nav .side-nav-link:hover {
  color: var(--ins-primary);
}

/*
 * Chip de identificação do site ativo no topbar.
 * Reaproveita o mega-menu "Localidades" já existente (#dscLocalMenu já é
 * atualizado via JS com o nome do site ativo, ver _Navigation.js) — só o
 * visual do gatilho muda, de link verde para chip com contorno.
 */
.topbar-site-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .3rem .8rem;
  border: 1px solid var(--ins-border-color);
  border-radius: 50rem;
  background: transparent;
  color: var(--ins-body-color) !important;
  font-size: .8125rem;
  font-weight: 600;
}
.topbar-site-chip:hover {
  background: var(--ins-primary-bg-subtle);
  border-color: var(--ins-primary-border-subtle);
}
.topbar-site-chip .ti-map-pin {
  color: var(--ins-primary);
}

/*
 * Painel de marca do Login — sempre escuro, independente do tema do app
 * (é painel de marca, não "chrome"). Substitui a foto ~/images/auth.jpg por
 * uma composição em CSS/SVG (racks estilizados), sem depender de asset externo.
 */
.card-side-img.login-visual {
  background-image: none;
  background-color: #14161f;
  background: radial-gradient(120% 140% at 20% 0%, #22131a 0%, #14161f 42%, #0e0f16 100%);
}

.login-visual .auth-overlay {
  position: relative;
  overflow: hidden;
  color: #fff;
}

.login-visual__rack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .55;
}

.login-visual__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 15, 22, .1) 0%, rgba(14, 15, 22, .55) 55%, rgba(14, 15, 22, .96) 100%);
}

.login-visual__content {
  position: relative;
  z-index: 2;
  padding: 2.5rem;
  width: 100%;
}

.login-visual__content .login-brand img {
  height: 34px;
}

.login-visual__content h2 {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 1.08;
  max-width: 11ch;
  margin: 1.5rem 0 .75rem;
}

.login-visual__content p.login-visual__lead {
  color: #c7cad6;
  max-width: 36ch;
  margin-bottom: 1.5rem;
}

.login-visual__features {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.login-visual__features li {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #dfe1ea;
  font-size: .9rem;
}

.login-visual__features i {
  color: var(--ins-primary, #e2202f);
  flex: none;
}

/*
 * Fonte de destaque — só para números de KPI e títulos de página.
 * Nunca usar em corpo de texto (Inter continua a fonte de UI padrão do projeto).
 */
.fs-display {
  font-family: "Big Shoulders Display", "Arial Narrow", sans-serif;
  font-weight: 700;
  letter-spacing: .01em;
}