/* ====================================================
   SigX Brand Override v2.0  |  sigx-brand.css
   Paleta Signal Orange — suporte a tema claro e escuro
   ==================================================== */

/* ---- Tokens da marca ---- */
:root {
  --sigx-orange:      #FF5100;
  --sigx-orange-lt:   #FF9050;
  --sigx-orange-dk:   #8B1A00;
  --sigx-orange-dkk:  #3D0800;
  --sigx-orange-rgb:  255, 81, 0;
}

/* ---- Tipografia ---- */
:root {
  --tblr-font-sans-serif: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --tblr-font-monospace:  'Space Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  --bs-font-sans-serif:   'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --bs-font-monospace:    'Space Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
}

body {
  font-family: var(--tblr-font-sans-serif);
}

code, kbd, samp, pre {
  font-family: var(--tblr-font-monospace);
}

/* Labels técnicos — .subheader vira o "label técnico" do Design System
   (Space Mono, uppercase, tracking). Já é uppercase/spaced no Tabler;
   aqui só trocamos a fonte para mono. */
.subheader {
  font-family: var(--tblr-font-monospace);
  letter-spacing: .06em;
}

/* ---- Cor primária — ambos os temas ---- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --tblr-primary:           #FF5100;
  --tblr-primary-rgb:       255, 81, 0;
  --tblr-primary-lt:        rgba(255, 81, 0, 0.1);
  --tblr-primary-darken:    #CC4100;
  --tblr-primary-fg:        #ffffff;

  --bs-primary:             #FF5100;
  --bs-primary-rgb:         255, 81, 0;
}

/* ---- Links — tema claro ---- */
:root,
[data-bs-theme="light"] {
  --bs-link-color:           #e04800;
  --bs-link-color-rgb:       224, 72, 0;
  --bs-link-hover-color:     #b83900;
  --bs-link-hover-color-rgb: 184, 57, 0;

  /* Tabler define code-color via light-dark(), que segue o color-scheme
     do SO — não o toggle data-bs-theme do SigX. Fixamos por tema. */
  --tblr-code-color:         var(--tblr-gray-600);
}

/* ---- Links — tema escuro (mais claros para contraste) ---- */
[data-bs-theme="dark"] {
  --bs-link-color:           #FF9050;
  --bs-link-color-rgb:       255, 144, 80;
  --bs-link-hover-color:     #FFB070;
  --bs-link-hover-color-rgb: 255, 176, 112;
  --tblr-primary-lt:         rgba(255, 81, 0, 0.15);
  --tblr-code-color:         var(--tblr-gray-400);
}

/* ====================================================
   Raios — escala do Design System
   sm 6 · md 8 (base) · lg 12 · xl 16 · cards 16
   ==================================================== */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --tblr-border-radius-sm:   6px;
  --tblr-border-radius-md:   8px;
  --tblr-border-radius:      8px;
  --tblr-border-radius-lg:   12px;
  --tblr-border-radius-xl:   16px;
  --tblr-card-border-radius: 16px;
}

/* ====================================================
   Componentes
   ==================================================== */

/* ---- Botões primários ---- */
.btn-primary,
.btn-azure {
  background-color: #FF5100 !important;
  border-color:     #FF5100 !important;
  color:            #fff    !important;
}
.btn-primary:hover,
.btn-azure:hover {
  background-color: #e04800 !important;
  border-color:     #cc4000 !important;
}
.btn-primary:active,
.btn-primary.active,
.btn-azure:active {
  background-color: #cc4000 !important;
  border-color:     #b83800 !important;
}
.btn-primary:focus-visible,
.btn-azure:focus-visible {
  box-shadow: 0 0 0 .25rem rgba(255, 81, 0, .35) !important;
}
.btn-primary:disabled,
.btn-azure:disabled {
  background-color: #FF5100 !important;
  border-color:     #FF5100 !important;
  opacity: .6;
}

/* ---- Botões outline primary ----
   O texto do estado SELECIONADO (btn-check:checked, ex.: "Sugerir melhoria")
   ficava laranja sobre fundo laranja porque o `color:#FF5100 !important` da
   regra base vencia o estado :checked. Correção em duas frentes:
   1) Definimos as variáveis de cor do Bootstrap/Tabler para cada estado, então
      TODOS os estados (normal, hover, foco, selecionado, ativo, dropdown) ficam
      corretos pela própria mecânica do framework — inclusive os seletores
      agrupados que regras manuais não cobririam.
   2) Reforçamos o estado preenchido com regra explícita (!important). */
.btn-outline-primary,
.btn-outline-azure {
  --bs-btn-color: #FF5100;
  --bs-btn-border-color: #FF5100;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #FF5100;
  --bs-btn-hover-border-color: #FF5100;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #FF5100;
  --bs-btn-active-border-color: #FF5100;
  --bs-btn-disabled-color: #FF5100;
  --bs-btn-disabled-border-color: #FF5100;
  --tblr-btn-color: #FF5100;
  --tblr-btn-border-color: #FF5100;
  --tblr-btn-hover-color: #fff;
  --tblr-btn-hover-bg: #FF5100;
  --tblr-btn-hover-border-color: #FF5100;
  --tblr-btn-active-color: #fff;
  --tblr-btn-active-bg: #FF5100;
  --tblr-btn-active-border-color: #FF5100;
  color:        #FF5100 !important; /* normal: texto laranja sobre fundo transparente */
  border-color: #FF5100 !important;
}
/* Estado preenchido — texto SEMPRE branco sobre laranja. Cobre hover,
   selecionado (btn-check:checked), pressionado/ativo e dropdown aberto.
   Mais específico que a regra base acima, então vence o texto laranja. */
.btn-outline-primary:hover,
.btn-outline-azure:hover,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-azure:active,
.btn-outline-azure.active,
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-check:checked + .btn-outline-azure,
.btn-check:active + .btn-outline-azure,
.show > .btn-outline-primary.dropdown-toggle,
.show > .btn-outline-azure.dropdown-toggle {
  background-color: #FF5100 !important;
  border-color:     #FF5100 !important;
  color:            #fff    !important;
}
/* Anel de foco (acessibilidade) — sem alterar o preenchimento. */
.btn-outline-primary:focus-visible,
.btn-outline-azure:focus-visible,
.btn-check:focus-visible + .btn-outline-primary,
.btn-check:focus-visible + .btn-outline-azure {
  box-shadow: 0 0 0 .25rem rgba(255, 81, 0, .35) !important;
}

/* ---- Inputs com foco ---- */
.form-control:focus,
.form-select:focus {
  border-color: rgba(255, 81, 0, .55) !important;
  box-shadow:   0 0 0 .25rem rgba(255, 81, 0, .15) !important;
}

/* TomSelect foco */
.ts-wrapper.focus .ts-control {
  border-color: rgba(255, 81, 0, .55) !important;
  box-shadow:   0 0 0 .25rem rgba(255, 81, 0, .15) !important;
}

/* ---- Checkboxes / radios / switches ---- */
.form-check-input:checked {
  background-color: #FF5100;
  border-color:     #FF5100;
}
.form-check-input:focus {
  border-color: rgba(255, 81, 0, .55);
  box-shadow:   0 0 0 .25rem rgba(255, 81, 0, .15);
}
.form-check-input[type="checkbox"]:indeterminate {
  background-color: #FF5100;
  border-color:     #FF5100;
}

/* ---- Range ---- */
.form-range::-webkit-slider-thumb  { background: #FF5100; }
.form-range::-moz-range-thumb      { background: #FF5100; }

/* ---- Progress bars ---- */
.progress-bar { background-color: #FF5100; }

/* ---- Badges ---- */
.badge.bg-primary,
.badge.bg-azure {
  background-color: #FF5100 !important;
}

/* ---- Texto utilitário ---- */
.text-primary,
.text-azure {
  color: #FF5100 !important;
}

/* ---- Background utilitário ---- */
.bg-primary,
.bg-azure {
  background-color: #FF5100 !important;
}

/* ---- Border ---- */
.border-primary,
.border-azure {
  border-color: #FF5100 !important;
}

/* ---- Nav pills / tabs ---- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #FF5100 !important;
  color:            #fff    !important;
}
.nav-tabs .nav-link.active {
  color: #FF5100 !important;
}
.navbar-nav .nav-link.active {
  color: #FF5100 !important;
}

/* ---- Dropdown item ativo ---- */
.dropdown-item.active,
.dropdown-item:active {
  background-color: #FF5100 !important;
  color:            #fff    !important;
}

/* ---- Paginação ---- */
.page-item.active .page-link {
  background-color: #FF5100 !important;
  border-color:     #FF5100 !important;
}
.page-link {
  color: #FF5100;
}
.page-link:hover {
  color: #e04800;
}

/* ---- Spinners ---- */
.spinner-border.text-primary,
.spinner-grow.text-primary {
  color: #FF5100 !important;
}

/* ---- Avatares ---- */
.avatar.bg-primary,
.avatar.bg-azure,
.avatar-sm.bg-primary {
  background-color: #FF5100 !important;
}

/* ---- Cards com status ---- */
.card-status-top.bg-primary,
.card-status-start.bg-primary,
.card-status-top.bg-azure,
.card-status-start.bg-azure {
  background-color: #FF5100 !important;
}

/* ---- Steps ---- */
.step-item.active .step-circle,
.step-item.active .step-icon {
  background-color: #FF5100 !important;
  border-color:     #FF5100 !important;
  color:            #fff    !important;
}

/* ====================================================
   Navbar brand — logo e tipografia
   ==================================================== */

/* Background do ícone adapta ao tema */
.sigx-logo-bg {
  fill: #111111;
}
[data-bs-theme="light"] .sigx-logo-bg {
  fill: #f0f0f0;
}

.brand-title {
  font-family:    'DM Sans', sans-serif;
  font-size:      17px;
  font-weight:    700;
  letter-spacing: -.4px;
  line-height:    1;
}

.brand-subtitle {
  font-family:    'Space Mono', monospace;
  font-size:      9px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  line-height:    1;
  opacity:        .45;
}

/* ====================================================
   Links globais (exceto botões e nav já tratados)
   ==================================================== */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link) {
  color: var(--bs-link-color);
}
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):hover {
  color: var(--bs-link-hover-color);
}

/* ====================================================
   Tema escuro — refinamentos visuais da navbar
   ==================================================== */
[data-bs-theme="dark"] .navbar {
  border-bottom-color: rgba(255, 255, 255, .07);
}

/* ====================================================
   Correção da barra de rolagem / centralização
   ----------------------------------------------------
   O Tabler aplica margin-left:calc(100vw - 100%) ao :root (html) em
   telas ≥992px. Isso valia 0 sem scroll, mas empurrava o conteúdo pela
   largura da barra quando o scroll aparecia (a "margem voltava").
   Zeramos a margem e usamos scrollbar-gutter:stable para reservar o
   espaço da barra de forma permanente — assim o conteúdo centralizado
   não desloca ao alternar entre páginas com e sem scroll.
   ==================================================== */
:host,
:root {
  margin-left: 0 !important;
  margin-right: 0 !important;
  scrollbar-gutter: stable;
}

/* Listas "Usado em" — limitam a altura e mostram scroll em vez de crescer a página. */
.sigx-usos-scroll { max-height: 60vh; overflow-y: auto; }
/* Nas telas de detalhe: no máximo ~5 itens visíveis + scroll. */
.sigx-usos-scroll-5 { max-height: 18.5rem; overflow-y: auto; }

/* ====================================================
   Validação de obrigatórios (libs/sigx-form-validation.js)
   ----------------------------------------------------
   Borda vermelha em campos TomSelect inválidos — o .is-invalid
   vai no .ts-wrapper (o select original fica oculto).
   ==================================================== */
.ts-wrapper.is-invalid .ts-control {
  border-color: var(--tblr-danger, #d63939);
}
.ts-wrapper.is-invalid.focus .ts-control {
  box-shadow: 0 0 0 0.25rem rgba(214, 57, 57, .25);
}

/* abp-input/abp-select já injetam um "*" próprio (.required-symbol) para os
   [Required] do DTO. Nas telas validadas pelo helper, o asterisco é do próprio
   helper (.form-label.required — o mesmo em labels manuais e de tags), então
   escondemos o do ABP para não duplicar. Fora dessas telas o ABP segue normal. */
form[data-sigx-validate] .required-symbol { display: none; }