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

/* ---- Transição entre páginas (View Transitions cross-document) ----
   Faz a troca de página fazer cross-fade em vez do flash branco. Combina com a
   pré-renderização declarada em Application.cshtml: a página seguinte já está pronta,
   então a transição é o único tempo que o usuário percebe.
   Só Chromium implementa hoje; nos demais navegadores a regra é ignorada e a navegação
   continua exatamente como antes. Respeita prefers-reduced-motion. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 140ms;
}

/* ---- Indicador de navegação (libs/sigx-navegacao.js) ----
   Barra fina no topo enquanto a próxima página não chega. Só acende depois de
   ~140 ms, então navegação pré-renderizada nunca a mostra. */
.sigx-nav-progresso {
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  height: 3px;
  z-index: 2000;               /* acima do navbar sticky, abaixo do modal Bootstrap (1055+ é o backdrop) */
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--sigx-orange), var(--sigx-orange-lt));
}

.sigx-nav-progresso.is-ativa {
  opacity: 1;
  /* Progresso indeterminado: avança rápido até ~80% e desacelera, porque o
     tempo real é desconhecido. A página nova substitui a barra ao pintar. */
  animation: sigx-nav-progresso 2.4s cubic-bezier(.15, .85, .3, 1) forwards;
}

@keyframes sigx-nav-progresso {
  0%   { transform: scaleX(0); }
  40%  { transform: scaleX(.55); }
  75%  { transform: scaleX(.8); }
  100% { transform: scaleX(.94); }
}

@media (prefers-reduced-motion: reduce) {
  .sigx-nav-progresso.is-ativa {
    animation: none;
    transform: scaleX(1);      /* barra estática: presença sem movimento */
  }
}

/* ---- 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;
}

/* ---- Menu principal: item ativo com fundo laranja no lugar da barra inferior ---- */
.navbar .navbar-nav .nav-item.active::after {
  display: none !important;
}
.navbar .navbar-nav .nav-item.active > .nav-link,
.navbar .navbar-nav .nav-link.active {
  background-color: rgba(255, 81, 0, .12) !important;
  border-radius:    6px;
  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; }

/* ── Grid server-side (sigx-grid.js): estado de carregamento ─────────────────
   O spinner mora numa camada própria ANCORADA NO CARD, não no .table-responsive.
   Motivo: o wrap rola (overflow-y:auto) e no primeiro load está vazio — um
   ::after com inset:0 lá dentro ficaria com altura zero ou fora da área visível,
   ou seja, invisível justo na espera mais longa. */
.sigx-grid-camada {
    position: absolute; inset: 0; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .15s ease;
    background: color-mix(in srgb, var(--tblr-card-bg, #fff) 55%, transparent);
}
/* A classe só entra depois de ~150 ms (sigx-grid.js): resposta rápida não pisca. */
.sigx-grid-loading .sigx-grid-camada { opacity: 1; }
.sigx-grid-loading > .table-responsive { pointer-events: none; }

.sigx-grid-camada::after {
    content: "";
    width: 2rem; height: 2rem; border-radius: 50%;
    border: 3px solid var(--tblr-primary); border-right-color: transparent;
    animation: sigx-grid-spin .7s linear infinite;
}
@keyframes sigx-grid-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .sigx-grid-camada::after { animation-duration: 2.4s; }
}

/* ── Grid ajustado à janela: card ocupa da sua posição até o rodapé da viewport,
   header/footer fixos e SÓ a tabela rola por dentro (sigx-grid.js aplica a
   classe + a var).

   `height` (e não `max-height`): a altura é a MESMA com 25 linhas, com 1 ou com
   nenhuma. Antes o card encolhia conforme o resultado, então filtrar/paginar
   sacudia a página inteira e o rodapé subia junto. Agora o quadro é estável e só
   o conteúdo interno muda. É também o que dá área para o spinner aparecer. ── */
.sigx-grid-fit { position: relative; display: flex; flex-direction: column; height: var(--sigx-grid-h, 70vh); }
.sigx-grid-fit > .card-header,
.sigx-grid-fit > .card-footer { flex: 0 0 auto; }
/* Os estados vazios ocupam a área da tabela, centrados — não uma faixa fina no topo. */
.sigx-grid-fit > #semRegistros,
.sigx-grid-fit > #estadoVazio {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.sigx-grid-fit > #semRegistros.d-none,
.sigx-grid-fit > #estadoVazio.d-none { display: none; }
.sigx-grid-fit > .table-responsive { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
/* cabeçalho da tabela grudado no topo enquanto rola */
.sigx-grid-fit table.card-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--tblr-bg-surface, var(--tblr-card-bg, #fff));
}

/* ── Dica de ação do grid (sigx-grid.js): hover num botão-ícone da linha exibe o
   rótulo (title) no header da coluna de ações. Ancorado à direita e absoluto para
   não mexer na largura da coluna; fundo opaco cobre o header vizinho quando o
   rótulo é maior que a coluna. ── */
thead th.sigx-th-dica { position: relative; } /* no grid-fit o sticky (acima) prevalece */
thead th .sigx-dica-acao {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: flex; align-items: center;
    padding: inherit;
    white-space: nowrap;
    background: var(--tblr-bg-surface, var(--tblr-card-bg, #fff));
    animation: sigx-dica-in .12s ease;
    pointer-events: none;
}
@keyframes sigx-dica-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Item "Comunidade SigX" — destaque. Mora no menu do usuário, antes de "Sair";
   o seletor por href pega o item onde quer que ele esteja dentro da navbar. ───── */
/* ── Alerts com texto corrido ──────────────────────────────────────────────
   O Tabler faz .alert { display:flex; gap:1rem }, o que transforma <strong>/<i>
   soltos no meio do texto em itens de flex — cada um ganha 1rem de "espaço
   fantasma". Nossos alerts são majoritariamente texto corrido: volta ao fluxo
   inline. Alerts estruturados do Tabler (com .alert-icon) mantêm o flex. */
.alert:not(:has(> .alert-icon)) {
    display: block;
}

/* ── Dropzone de anexos (sigx-anexos.js) ───────────────────────────────────
   Usada ao abrir e ao responder um ticket. Mesmo visual do formulário de
   solicitação da navbar, mas em classes reutilizáveis (.sx-*). */
.sx-dropzone {
    border: 1.5px dashed var(--tblr-border-color);
    border-radius: 12px;
    padding: 1.1rem 1rem;
    text-align: center;
    cursor: pointer;
    color: var(--tblr-secondary);
    transition: border-color .15s, background-color .15s;
}
.sx-dropzone:hover,
.sx-dropzone.dragover {
    border-color: var(--tblr-primary);
    background-color: rgba(255, 81, 0, .06);
}
.sx-dropzone i.sx-dz-icon { font-size: 1.6rem; display: block; margin-bottom: .25rem; color: var(--tblr-primary); }
.sx-dz-txt { font-size: .875rem; }
.sx-dz-hint { font-size: .75rem; opacity: .7; margin-top: .15rem; }

.sx-previews { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.sx-prev {
    position: relative; width: 76px; height: 76px;
    border-radius: 8px; overflow: hidden; flex: 0 0 auto;
    border: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .04));
}
.sx-prev img, .sx-prev video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sx-prev-vid {
    width: 100%; height: 100%; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .15rem; color: var(--tblr-secondary);
}
.sx-prev-vid i { font-size: 1.4rem; color: var(--tblr-primary); }
.sx-prev-vid small { font-size: .55rem; max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-prev-rm {
    position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
    border: 0; padding: 0; border-radius: 50%; line-height: 1; font-size: .8rem;
    background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.sx-prev-rm:hover { background: var(--tblr-danger); }
.sx-prev-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 81, 0, .25); }
.sx-prev-bar > span { display: block; height: 100%; width: 0; background: var(--tblr-primary); transition: width .2s; }
.sx-prev.is-error { border-color: var(--tblr-danger); }

/* ── Tickets de suporte ───────────────────────────────────────────────────── */
.tk-num { font-family: var(--tblr-font-monospace); font-size: .8rem; color: var(--tblr-secondary); }

/* Conversa do ticket */
.tk-msg { display: flex; gap: .75rem; padding: .9rem 0; border-top: 1px solid var(--tblr-border-color); }
.tk-msg:first-child { border-top: 0; }
.tk-msg-corpo { min-width: 0; flex: 1 1 auto; }
.tk-msg-texto { white-space: pre-line; overflow-wrap: anywhere; }
.tk-msg.is-interno { background: rgba(255, 193, 7, .07); border-radius: 10px; padding: .9rem; border-top: 0; margin: .35rem 0; }
.tk-anexos { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.tk-anexo {
    width: 64px; height: 64px; flex: 0 0 auto; padding: 0; position: relative;
    border-radius: 8px; overflow: hidden; cursor: pointer;
    border: 1px solid var(--tblr-border-color);
    background: var(--tblr-bg-surface-secondary, rgba(0, 0, 0, .04));
}
.tk-anexo:hover { border-color: var(--tblr-primary); }
.tk-anexo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-anexo-vid { display: flex; align-items: center; justify-content: center; color: var(--tblr-primary); }
.tk-anexo-vid i { font-size: 1.3rem; }

/* ── Quadro kanban (.kb-*) ─────────────────────────────────────────────────
   Base compartilhada pelo kanban do roadmap (/Roadmap/Kanban) e pelo quadro
   de tickets (/Tickets). Cada página só acrescenta o que é próprio dela. */
.kb-cols { display: flex; gap: 1rem; align-items: flex-start; overflow-x: auto; padding-bottom: .25rem; }
.kb-col { flex: 1 1 0; min-width: 280px; background: var(--tblr-bg-surface-secondary, rgba(0,0,0,.02)); border-radius: var(--tblr-border-radius); padding: .75rem; }
.kb-col-head { display: flex; align-items: center; gap: .5rem; padding: .25rem .25rem .5rem; font-weight: 600; }
.kb-col-add { margin-left: auto; }
.kb-count { font-family: 'Space Mono', monospace; font-size: .75rem; color: var(--tblr-secondary); }
.kb-list { min-height: 48px; display: flex; flex-direction: column; gap: .6rem; }
.kb-card { background: var(--tblr-bg-surface, #fff); border: 1px solid var(--tblr-border-color); border-left: 3px solid var(--tblr-secondary); border-radius: var(--tblr-border-radius); padding: .65rem .75rem; cursor: grab; }
.kb-card:active { cursor: grabbing; }
.kb-card.prio-3 { border-left-color: var(--tblr-danger); }
.kb-card.prio-2 { border-left-color: var(--tblr-info); }
.kb-card.prio-1 { border-left-color: var(--tblr-secondary); }
.kb-card-title { font-weight: 600; font-size: .9rem; }
.kb-card-desc { font-size: .8rem; color: var(--tblr-secondary); margin: .25rem 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kb-card-proj { font-size: .72rem; font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; padding: .1rem .4rem; border-radius: 999px; background: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-ghost { opacity: .4; }
/* Coluna vazia: o aviso é pseudo-elemento (:empty::before), NÃO um filho da lista.
   Como filho, ele era enxergado pelo Sortable como item — dava para arrastá-lo e o
   cartão solto ia parar ao lado dele. Assim a coluna inteira é a área de drop. */
.kb-list:empty::before {
    content: attr(data-vazio);
    display: flex; align-items: center; justify-content: center;
    min-height: 84px; padding: .5rem; text-align: center;
    color: var(--tblr-secondary); font-size: .8rem;
    border: 1px dashed var(--tblr-border-color); border-radius: var(--tblr-border-radius);
}
.kb-list.kb-drop-alvo:empty::before { border-color: var(--tblr-primary); color: var(--tblr-primary); }

.kb-empty { text-align: center; color: var(--tblr-secondary); font-size: .8rem; padding: 1.25rem 0; border: 1px dashed var(--tblr-border-color); border-radius: var(--tblr-border-radius); }

/* Cartão de ticket no quadro */
.kb-card.tk-kb-card { cursor: pointer; text-decoration: none; color: inherit; display: block; }
.kb-card.tk-kb-card.is-drag { cursor: grab; }
.kb-card.tk-kb-card.is-drag:active { cursor: grabbing; }
.kb-card.tk-nao-lido { border-left-width: 4px; box-shadow: inset 3px 0 0 0 var(--sigx-orange, #FF5100); }
.tk-kb-meta { display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: .72rem; color: var(--tblr-secondary); margin-top: .35rem; }

/* ── SweetAlert2 (diálogos de confirmação do ABP) ──────────────────────────
   abp.message.confirm/success/... renderiza pelo SweetAlert2, que traz a própria
   folha de estilo com o roxo padrão dele (#7066e0) no botão de confirmar — o único
   ponto do portal que escapava do Signal Orange.

   Os seletores do sweetalert2.css usam :where() (`div:where(.swal2-container)
   button:where(.swal2-styled).swal2-confirm`), que não soma especificidade: valem
   (0,1,2). As regras abaixo valem (0,3,1) e ganham sem precisar de !important,
   independentemente da ordem em que os arquivos entram no bundle. */
.swal2-container button.swal2-styled.swal2-confirm {
  background-color: var(--sigx-orange, #FF5100);
}
.swal2-container button.swal2-styled.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(var(--sigx-orange-rgb, 255, 81, 0), .5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   APP NO CELULAR (PWA)

   O portal é instalável: manifesto e metas em Pages/Shared/_PwaHead.cshtml,
   service worker em wwwroot/sw.js, comportamento em libs/sigx-pwa.js.
   Este bloco cobre (1) o que muda quando ele roda instalado, (2) os avisos
   próprios do PWA e (3) ajustes de toque que valem em qualquer celular.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. App instalado ────────────────────────────────────────────────────────
   Em standalone o iOS usa a barra de status translúcida (black-translucent em
   _PwaHead.cshtml), então o conteúdo sobe por baixo do relógio/notch: quem
   devolve o espaço é este padding. O mesmo vale para a barra de gestos de baixo.
   Fora do standalone nada disso se aplica — no navegador a chrome própria dele
   já reserva a área. */
@media (display-mode: standalone), (display-mode: minimal-ui) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Sem isso, arrastar a listagem para baixo recarrega a página inteira —
       gesto de navegador, não de app. */
    html, body { overscroll-behavior-y: contain; }

    /* Já está instalado: o convite não tem mais o que fazer. */
    [data-sigx-instalar] { display: none !important; }
}

/* ── 2. Convite de instalação e aviso de versão nova ──────────────────────── */

/* Estado inicial de todo botão "Instalar": escondido até o navegador dizer que
   dá para instalar (libs/sigx-pwa.js tira a classe). */
.sigx-instalar-oculto { display: none !important; }

.sigx-pwa-toast {
    position: fixed;
    left: 50%;
    bottom: calc(1rem + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    z-index: 1080;
    display: flex; align-items: center; gap: .75rem;
    max-width: calc(100vw - 2rem);
    padding: .6rem .75rem .6rem 1rem;
    border-radius: 10px;
    background: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color, #e6e7e9);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
    font-size: .85rem;
}

.sigx-pwa-btn {
    flex-shrink: 0;
    font: inherit; font-weight: 600;
    color: #fff;
    background: var(--sigx-orange, #FF5100);
    border: 0; border-radius: 6px;
    padding: .35rem .85rem;
    cursor: pointer;
}
.sigx-pwa-btn:hover { filter: brightness(1.08); }

/* Recusa do convite ("Agora não"): mesma caixa, peso visual bem menor — a ação
   principal é ativar, e um segundo botão sólido competiria com ela. */
.sigx-pwa-btn-ghost {
    flex-shrink: 0;
    font: inherit;
    color: var(--tblr-secondary, #667382);
    background: none; border: 0;
    padding: .35rem .5rem;
    cursor: pointer;
}
.sigx-pwa-btn-ghost:hover { color: var(--tblr-body-color, #1d273b); }

/* Folha de instruções do iOS (lá não existe API de instalação, só o passo a
   passo do menu Compartilhar). Autocontida: roda também no /Account/Login,
   que não carrega o JS do Bootstrap. */
.sigx-pwa-folha-fundo {
    position: fixed; inset: 0; z-index: 1090;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(0, 0, 0, .5);
}

.sigx-pwa-folha {
    width: 100%; max-width: 28rem;
    padding: .75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    background: var(--tblr-bg-surface, #fff);
    color: var(--tblr-body-color, #1d273b);
    animation: sigx-pwa-sobe .18s ease-out;
}

.sigx-pwa-folha-alca {
    width: 2.5rem; height: 4px; margin: 0 auto 1rem;
    border-radius: 999px;
    background: var(--tblr-border-color, #e6e7e9);
}

.sigx-pwa-folha h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 .75rem; }
.sigx-pwa-folha ol { margin: 0 0 1.25rem; padding-left: 1.1rem; font-size: .9rem; line-height: 1.7; }
.sigx-pwa-folha .sigx-pwa-btn { width: 100%; padding: .65rem; }

@keyframes sigx-pwa-sobe { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .sigx-pwa-folha { animation: none; }
}

/* ── 3. Ergonomia de toque (vale no navegador do celular também) ──────────── */
@media (max-width: 575.98px) {
    /* O Safari do iPhone dá zoom ao focar campo com fonte < 16px e depois não
       volta sozinho — a tela fica "torta" pelo resto do formulário. */
    .form-control, .form-select, .ts-control, textarea, input[type="text"],
    input[type="email"], input[type="password"], input[type="number"],
    input[type="search"], input[type="tel"], input[type="url"],
    input[type="date"], input[type="time"], input[type="datetime-local"] {
        font-size: 16px;
    }

    /* Tabelas largas rolam dentro do próprio contêiner em vez de esticar a
       página (que quebraria o cabeçalho fixo e a navbar). */
    .table-responsive { -webkit-overflow-scrolling: touch; }
}

html {
    -webkit-text-size-adjust: 100%;   /* rotação de tela não reescala a fonte */
    -webkit-tap-highlight-color: transparent;
}

/* ── Base de conhecimento (wiki + FAQ) ─────────────────────────────────────
   Tipografia do richtext. Mora aqui, e não na página, porque o MESMO HTML é
   renderizado em dois lugares: a tela de leitura do host (/Sistema/Wiki/Ver) e
   o painel de ajuda da navbar. O conteúdo vem sanitizado da gravação
   (WikiHtmlSanitizador), então a lista de tags abaixo é fechada por construção. */
.wiki-corpo { font-size: .98rem; line-height: 1.7; }
.wiki-corpo h2 { font-size: 1.35rem; font-weight: 600; margin: 1.6rem 0 .6rem; }
.wiki-corpo h3 { font-size: 1.15rem; font-weight: 600; margin: 1.4rem 0 .5rem; }
.wiki-corpo h4 { font-size: 1rem; font-weight: 600; margin: 1.2rem 0 .4rem; }
.wiki-corpo p { margin-bottom: .9rem; }
.wiki-corpo ul, .wiki-corpo ol { margin-bottom: .9rem; padding-left: 1.4rem; }
.wiki-corpo li { margin-bottom: .3rem; }
.wiki-corpo img { max-width: 100%; border-radius: 8px; margin: .5rem 0; }
.wiki-corpo a { color: var(--tblr-primary); }
.wiki-corpo blockquote {
    border-left: 3px solid var(--tblr-primary);
    background: rgba(255, 81, 0, .07);
    padding: .7rem 1rem; margin: 1rem 0; border-radius: 0 8px 8px 0;
}
.wiki-corpo pre, .wiki-corpo code {
    font-family: var(--tblr-font-monospace); font-size: .86rem;
    background: var(--tblr-bg-surface-secondary); border-radius: 6px;
}
.wiki-corpo pre { padding: .8rem 1rem; overflow-x: auto; }
.wiki-corpo code { padding: .1rem .35rem; }
.wiki-corpo table { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.wiki-corpo th, .wiki-corpo td { border: 1px solid var(--tblr-border-color); padding: .45rem .6rem; }
.wiki-corpo th { background: var(--tblr-bg-surface-secondary); font-weight: 600; }

/* Painel de ajuda (gaveta da navbar). É o offcanvas do Bootstrap — o mesmo componente da
   tarefa do Kanban —, com duas diferenças pedidas: não fecha por clique fora (offcanvas
   sem backdrop já se comporta assim; keyboard=false tira também o ESC) e EMPURRA a página
   em vez de cobri-la. O empurrão é a margem no .page, com transição igual à do offcanvas.
   Abaixo de 992px não há espaço para empurrar: a gaveta cobre, como qualquer offcanvas. */
#sigxAjudaPainel { width: min(420px, 100vw); }
.page { transition: margin-right .3s ease-in-out; }
body.sigx-ajuda-aberta .page { margin-right: min(420px, 100vw); }
@media (max-width: 991.98px) {
    body.sigx-ajuda-aberta .page { margin-right: 0; }
}
.sigx-ajuda-item-vazio { color: var(--tblr-secondary); }
#sigxAjudaCorpo .list-group-item-action { border-radius: 8px; }

/* ── Fundo dos campos ─────────────────────────────────────────────────────
   Todo input/select/textarea do portal (inclui Financeiro) em #f5f5f5, um degrau
   abaixo do branco do cartão — o campo passa a se ler como campo sem precisar de borda
   mais forte. É UM token do Tabler, e não uma regra por seletor: `--tblr-bg-forms`
   já alimenta .form-control, .form-select, .form-check, input-group e afins.
   Este arquivo carrega DEPOIS do tabler.min.css, então a redefinição em :root vence.

   Só no tema claro. No escuro o texto do campo é claro: #f5f5f5 de fundo deixaria
   texto quase branco sobre cinza quase branco. Lá o token volta ao valor do tema. */
:root {
    --tblr-bg-forms: #f5f5f5;
}

[data-bs-theme="dark"] {
    --tblr-bg-forms: var(--tblr-bg-surface);
}

/* O TomSelect desenha o próprio controle (.ts-control) em vez de usar o <select>, e nem
   toda versão do CSS dele lê o token — o select do sistema inteiro é TomSelect
   (sigx-select.js), então ele tem de acompanhar. */
.ts-wrapper:not(.form-control):not(.form-select) .ts-control,
.ts-control {
    background-color: var(--tblr-bg-forms);
}

/* ── Item "Precisa de ajuda?" da navbar ───────────────────────────────
   Fundo cinza claro para o item destacar do resto do menu sem virar mais um botão colorido
   competindo com o Comunidade (primary). Só no desktop: no menu empilhado do celular a
   faixa cinza atravessaria a largura toda e pareceria um cabeçalho de seção. */
@media (min-width: 992px) {
    #menu-ajuda > .nav-link {
        background: #f5f5f5;
        border-radius: 8px;
        padding-inline: .75rem;
    }

    #menu-ajuda > .nav-link:hover,
    #menu-ajuda > .nav-link:focus-visible {
        background: #ebebeb;
    }

    /* Gaveta aberta: tom laranja da marca para o item mostrar que é ELE que está ligado —
       a gaveta empurra a página e, sem isso, nada no menu indica de onde ela saiu.
       O tint translúcido funciona nos dois temas (regra do design system). */
    body.sigx-ajuda-aberta #menu-ajuda > .nav-link,
    body.sigx-ajuda-aberta #menu-ajuda > .nav-link:hover {
        background: rgba(255, 81, 0, .12);
        color: var(--sigx-orange, #FF5100);
    }

    /* No escuro o cinza claro seria uma mancha branca: usa um véu sobre o fundo do tema. */
    [data-bs-theme="dark"] #menu-ajuda > .nav-link {
        background: rgba(255, 255, 255, .07);
    }

    [data-bs-theme="dark"] #menu-ajuda > .nav-link:hover,
    [data-bs-theme="dark"] #menu-ajuda > .nav-link:focus-visible {
        background: rgba(255, 255, 255, .12);
    }

    /* Repetido para o escuro porque as regras acima têm a MESMA especificidade da regra de
       "gaveta aberta" e vêm depois — sem isto o véu cinza apagaria o laranja no tema escuro. */
    [data-bs-theme="dark"] body.sigx-ajuda-aberta #menu-ajuda > .nav-link,
    [data-bs-theme="dark"] body.sigx-ajuda-aberta #menu-ajuda > .nav-link:hover {
        background: rgba(255, 81, 0, .18);
        color: var(--sigx-orange, #FF5100);
    }
}

/* ── Rolagem das listas dos widgets do dashboard ─────────────────────────────
   Vale para as DUAS superfícies que montam widgets (portal /Index e /Telao):
   as duas linkam este arquivo e as duas usam o mesmo widget-registry.js.

   O widget vive numa célula do Gridstack de altura fixa — lista maior que a
   célula era cortada. A barra é a da MARCA: a cor sai de --tblr-primary-rgb,
   que o telão reescreve com a cor do cliente, então a barra acompanha sem
   ninguém escrever laranja aqui.

   Rolar exige altura limitada, e altura só chega ao fim da cadeia se cada elo
   for flex com min-height:0 (o padrão min-height:auto de um item flex é o
   tamanho do conteúdo — é ele que estoura o card em vez de rolar). Daí os três
   elos: corpo do card, div de conteúdo e a lista. ── */
.sigx-widget-body { min-height: 0; display: flex; flex-direction: column; }
.sigx-widget-content { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
/* .d-none é !important — continua ganhando do display:flex acima. */

/* Elo intermediário para o widget que empilha algo antes da lista (cabeçalho,
   linha de números, coluna ao lado do gráfico). */
.sigx-widget-fill { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

.sigx-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* A barra em si. O Tabler declara scrollbar-color no documento inteiro, e enquanto
   essa propriedade está posta o Chrome desenha a barra do sistema (com as setinhas
   das pontas) e IGNORA os ::-webkit-scrollbar. Por isso são dois caminhos:

     • sem os pseudo-elementos (Firefox): valem as propriedades padrão, com a cor
       da marca no lugar da cinza que o Tabler herda;
     • com eles (Chrome, Safari): as padrão voltam para `auto` — é o que devolve a
       palavra aos pseudo-elementos — e a barra é desenhada aqui, fina, arredondada,
       sem trilho e sem setas. */
@supports not selector(::-webkit-scrollbar) {
    .sigx-scroll {
        scrollbar-width: thin;
        scrollbar-color: rgba(var(--tblr-primary-rgb, 255, 81, 0), .45) transparent;
    }
    [data-bs-theme="dark"] .sigx-scroll {
        scrollbar-color: rgba(var(--tblr-primary-rgb, 255, 81, 0), .6) transparent;
    }
}

@supports selector(::-webkit-scrollbar) {
    /* O seletor precisa cobrir o tema escuro também: a regra do Tabler que herda a
       cor cinza vem de um seletor mais específico e voltaria a mandar. */
    .sigx-scroll,
    [data-bs-theme="dark"] .sigx-scroll { scrollbar-width: auto; scrollbar-color: auto; }

    .sigx-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
    .sigx-scroll::-webkit-scrollbar-track { background: transparent; }
    .sigx-scroll::-webkit-scrollbar-thumb {
        background: rgba(var(--tblr-primary-rgb, 255, 81, 0), .35);
        border-radius: 999px;
    }
    .sigx-scroll:hover::-webkit-scrollbar-thumb { background: rgba(var(--tblr-primary-rgb, 255, 81, 0), .55); }
    .sigx-scroll::-webkit-scrollbar-thumb:hover { background: rgba(var(--tblr-primary-rgb, 255, 81, 0), .8); }
    .sigx-scroll::-webkit-scrollbar-corner { background: transparent; }
    /* As setas das pontas voltam sozinhas no Windows e estragam a barra fina. */
    .sigx-scroll::-webkit-scrollbar-button { display: none; width: 0; height: 0; }

    /* No escuro o polegar com pouca opacidade some no fundo. */
    [data-bs-theme="dark"] .sigx-scroll::-webkit-scrollbar-thumb { background: rgba(var(--tblr-primary-rgb, 255, 81, 0), .5); }
    [data-bs-theme="dark"] .sigx-scroll:hover::-webkit-scrollbar-thumb { background: rgba(var(--tblr-primary-rgb, 255, 81, 0), .72); }
}

.sigx-scroll { padding-right: 2px; }