/**
 * base.css — CAMADA BASE DO PILOT (design system)
 * Consolida reset.css + scrollbar.css (conteúdo intacto, ordem preservada).
 * Ordem de carregamento: tokens.css -> base.css -> components.css -> pages.
 * Regra: elementos base e helpers de layout vivem aqui; componentes NÃO.
 */

/* ═══════════════ [origem: reset.css] ═══════════════ */

/* A Inter é auto-hospedada em assets/vendor/inter/ e carregada por <link> no
   head.php, antes desta folha. Estava aqui num @import ao Google, que é uma
   cadeia em série — o browser só descobria a fonte depois de descarregar e
   analisar este ficheiro — e pedia nove pesos para usar cinco. */

/* Typography, spacing, radius and dimension tokens moved to vars-dimensions.css */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* base for any rem usage */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--main-font-family);
  font-size: var(--text-sm);
  line-height: var(--line-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100dvh;
}

/* Remove default list styling */
ul,
ol {
  list-style: none;
}

/* ── Ion-icon compat (Phosphor shim) ────────────────────────────────────── */
.ph-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.ph-icon .ph-icon {
  font-size: inherit;
  line-height: 1;
}

/* Media elements never overflow their container */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Inherit font on interactive elements */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

/* UM LINK NÃO NASCE AZUL (regra absoluta, dita pelo Jorge a 2026-09-24). A cor
   herda-se de quem o contém, e quem quer que se leia como link usa a classe
   `.cms-link` do components.css (o sublinhado é o sinal) ou o `.cms-cell-link`
   dentro de uma lista. Assim um `<a>` que já seja um botão, um cartão ou um
   item de menu continua igual, e nenhum link novo nasce da cor errada. */
a {
  color: inherit;
  text-decoration: none;
}

/* Abreviatura com tooltip */
abbr[title] {
  font-style: normal;
  cursor: help;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-text-muted, #8b90a0);
  text-underline-offset: 3px;
}

/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Progress */
progress {
  width: 100%;
  max-width: 100%;
  vertical-align: baseline;
}

/* ══════════════════════════════════════════════════════════════════════
   3 — GLOBAL UTILITY CLASSES
   ══════════════════════════════════════════════════════════════════════ */

/* Texto */
/* Vinha do core.css, que era uma folha inteira de tipografia e cartões em que
   só esta regra e a `.page-body` chegavam a aplicar-se a alguma coisa. */
.text-muted { color: var(--color-text-muted); }

/* Visibility */
.hidden {
  display: none !important;
}

.invisible {
  visibility: hidden !important;
}

.transparent {
  opacity: 0 !important;
}

/* Responsive visibility helpers */

/* ══════════════════════════════════════════════════════════════════════
   7 — FORM GRID (.row / .col-X)   —   MOBILE-FIRST
   ──────────────────────────────────────────────────────────────────────
   Uma coluna por linha é a BASE, e as fracções entram a partir de 769px.
   Estava ao contrário: as fracções na base e um `max-width: 768px` a
   desfazê-las. O resultado era o mesmo no ecrã e o oposto na leitura — o
   telemóvel, que é o caso mais apertado, ficava a ser a excepção.

   A CONTA. Entre N colunas há N−1 goteiras, não N. Subtrair o gap a cada
   coluna deixava 12px por usar numa linha cheia — a base de cada coluna ficava
   3px mais estreita do que devia. Passou a ser a mesma conta da grelha dos
   formulários (`.form-row > .form-col.col-lg-N`, em components.css):
   `calc(fracção * (100% + gap) - gap)`.

   Na prática o ecrã não muda: o `flex-grow: 1` já repartia a nesga pelas
   colunas e o resultado final era o mesmo. O que muda é a base estar certa —
   e as duas grelhas do projecto passarem a dizer a mesma coisa da mesma
   maneira, que era o ponto.

   O QUE AS DUAS GRELHAS AINDA TÊM DE DIFERENTE, e é de propósito: esta cresce
   (`flex-grow: 1`), a dos formulários não (`flex-grow: 0` + `max-width`). Uma
   linha de filtros com três `.col-3` reparte a largura toda pelos três; um
   formulário com três `col-lg-3` deixa o quarto módulo vazio, porque aí o que
   importa é as bordas dos campos caírem sempre nos mesmos 25%/50%/75%.
   ══════════════════════════════════════════════════════════════════════ */

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 8px);
  width: 100%;
}

/* Base: cada coluna ocupa a linha toda. */
.col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-12 {
  flex: 0 0 100%;
  min-width: 0;
}

/* lg (≥769px): as colunas repartem a linha. */
@media (min-width: 769px) {
  .row { gap: var(--space-3, 12px); }

  .col-2  { flex: 1 1 calc(0.1666667 * (100% + var(--space-3, 12px)) - var(--space-3, 12px)); }
  .col-3  { flex: 1 1 calc(0.25 * (100% + var(--space-3, 12px)) - var(--space-3, 12px)); }
  .col-4  { flex: 1 1 calc(0.3333333 * (100% + var(--space-3, 12px)) - var(--space-3, 12px)); }
  .col-5  { flex: 1 1 calc(0.4166667 * (100% + var(--space-3, 12px)) - var(--space-3, 12px)); }
  .col-6  { flex: 1 1 calc(0.5 * (100% + var(--space-3, 12px)) - var(--space-3, 12px)); }
  .col-7  { flex: 1 1 calc(0.5833333 * (100% + var(--space-3, 12px)) - var(--space-3, 12px)); }
  .col-8  { flex: 1 1 calc(0.6666667 * (100% + var(--space-3, 12px)) - var(--space-3, 12px)); }
  .col-9  { flex: 1 1 calc(0.75 * (100% + var(--space-3, 12px)) - var(--space-3, 12px)); }
  .col-10 { flex: 1 1 calc(0.8333333 * (100% + var(--space-3, 12px)) - var(--space-3, 12px)); }
}

/* ══════════════════════════════════════════════════════════════════════
   8 — PAGINATION
   Token-based pagination for data tables and list pages.
   ══════════════════════════════════════════════════════════════════════ */

.page-nav-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
}

.pages-nav {
  display: inline-flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pages-nav li {
  display: inline-flex;
}

.pages-nav li a,
.pages-nav li button {
  display: flex;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text, #121926);
  padding: 8px 14px;
  border: 1px solid var(--color-border, rgba(18, 25, 38, 0.10));
  border-left: none;
  background: var(--color-surface, #fff);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
  outline: none;
}

.pages-nav li a:focus-visible,
.pages-nav li button:focus-visible {
  outline: calc(var(--focus-ring-width) * 2) solid var(--focus-ring-color);
  outline-offset: 2px;
}

.pages-nav li:first-child a,
.pages-nav li:first-child button {
  border-left: 1px solid var(--color-border, rgba(18, 25, 38, 0.10));
  border-top-left-radius: var(--radius-sm, 6px);
  border-bottom-left-radius: var(--radius-sm, 6px);
}

.pages-nav li:last-child a,
.pages-nav li:last-child button {
  border-top-right-radius: var(--radius-sm, 6px);
  border-bottom-right-radius: var(--radius-sm, 6px);
}

.pages-nav li a.active,
.pages-nav li button.active {
  background: var(--color-text, #121926);
  color: var(--color-surface, #fff);
  border-color: transparent;
}

.pages-nav li a:hover:not(.active),
.pages-nav li button:hover:not(.active) {
  background: var(--color-surface-alt, #edf0f5);
}

/* ══════════════════════════════════════════════════════════════════════
   9 — DATA TABLE
   Base table styles for all data tables in the backoffice.
   Column-specific widths / overrides live in the module's own CSS.
   ══════════════════════════════════════════════════════════════════════ */

.data-table {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  margin: 0;
  padding: 0;
}

.data-table th,
.data-table td {
  padding: 10px 7px;
  font-size: 11px;
  line-height: 1.4;
  word-wrap: break-word;
  border: none;
}

.data-table thead tr {
  border-bottom: 2px solid var(--color-text, #121926);
  color: var(--color-text, #121926);
}

.data-table tbody tr {
  border-bottom: 1px solid var(--color-border, rgba(18, 25, 38, 0.10));
  cursor: default;
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

.data-table tbody tr:nth-child(even) {
  background-color: var(--color-surface-alt, #edf0f5);
}

.data-table tbody tr:hover {
  background-color: var(--color-surface-hover, #e2e5ee) !important;
}

.data-table caption {
  display: none;
}

/* SEM modo cartão em ecrãs estreitos — e é deliberado.
   Havia aqui um bloco `@media (max-width: 768px)` que escondia o `thead` e
   transformava cada linha num cartão, com o nome do campo a vir de
   `content: attr(data-label)`. Só que **nenhuma célula do projecto tem
   `data-label`**: as três ocorrências que existem estão em botões e em itens
   de lista. O resultado eram cartões com valores e sem rótulos — pior do que
   a tabela.

   E não é o padrão do CRM: as tabelas a sério são as do TabularData
   (`.ptbl-table`), que em ecrã estreito ROLAM na horizontal. As cinco
   `.data-table` que restam (todas no módulo de leads, entre 2 e 5 colunas)
   passam a comportar-se como as outras.

   Se algum dia se quiser o modo cartão, o caminho é pôr `data-label` nas
   células ao gerar o HTML — sem isso o CSS não tem por onde ler o rótulo. */


/* ══════════════════════════════════════════════════════════════════════
   10 — ACCESSIBILITY UTILITIES
   ══════════════════════════════════════════════════════════════════════ */

/* Screen-reader only — visually hidden but accessible to assistive tech.
   position: absolute + 1×1px + clip removes it from visual flow entirely. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   11 — PANEL LAYOUT
   Structural primitives used by every backoffice module view.
   .default-full-panel → outermost wrapper injected by SPA router.
   .panel-child-element → flex section inside the panel.
   Scoped visual overrides (border-radius, etc.) live in app-layout.css.
   ══════════════════════════════════════════════════════════════════════ */

.content {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

/* Full-width content panel */
.default-full-panel {
  width: 100%;
  padding: 0;
  background-color: var(--color-surface, #fff);
}

/* Flex child section inside a panel */
.panel-child-element {
  display: flex;
  flex-direction: column;
  padding: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   BREAKOUT — escapar ao limite de largura do conteúdo da página
   Regra base: o conteúdo está limitado a --content-max-width e
   centrado (padding do .app .content). Dois utilitários para casos que devem
   escapar a esse limite — basta a classe no elemento, funciona a qualquer
   profundidade dentro do .content (desde que os ancestrais não tenham padding
   horizontal nem overflow que corte). Dependem de --content-gutter (publicado
   por layout.js = (largura disponível − --content-max-width) / 2):

   • .full-bleed → só o FUNDO ocupa a largura toda; o CONTEÚDO recolhe ao bloco
     de conteúdo, ALINHADO com o resto da página. Ex.: barras, banners, secções
     fundo próprio. Opcional: --full-bleed-min-pad (padding mínimo interior em
     ecrãs estreitos, onde já não há goteira).

   • .full-width → o elemento E o CONTEÚDO ocupam a largura toda (exceção total
     ao cap). Ex.: uma tabela larga, um gráfico, um mapa. Opcional:
     --full-width-pad (padding lateral próprio, p/ não colar às bordas).
   ══════════════════════════════════════════════════════════════════════ */

/* Breakout partilhado: estica a caixa até às margens da área de conteúdo. */
.full-bleed,
.full-width {
  margin-inline: calc(-1 * var(--content-gutter, 0px));
}

/* Só o FUNDO à largura toda; conteúdo recolhido ao bloco de conteúdo. */
.full-bleed {
  padding-inline: max(var(--content-gutter, 0px), var(--full-bleed-min-pad, 0px));
}

/* Conteúdo TAMBÉM à largura toda (padding lateral próprio opcional). */
.full-width {
  padding-inline: var(--full-width-pad, 0px);
}

/* ══════════════════════════════════════════════════════════════════════
   12 — HERO
   Full-width media hero with video/image overlay and content slot.
   Used by: modules/dashboard (video hero), modules/login (full-height).
   Module-specific padding / layout overrides live in the module CSS.
   ══════════════════════════════════════════════════════════════════════ */

.hero {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Full viewport height (login page) */
.hero.full-h {
  height: 100dvh;
}

/* Flex height — adapts to content (dashboard) */
.hero.flex-h {
  height: 100%;
}

/* Dark overlay sits above the media, below the content */
.hero-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.hero-overlay::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

/* Video fills the overlay area */
.bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image fills the overlay area */
.bg-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

/* Content container sits above the overlay (z-index: 1) */
.hero-container {
  display: flex;
  padding: calc(var(--header-height, 60px) + 70px) 10% 70px 10%;
  width: 100%;
  z-index: 1;
}

.hero-container.center {
  justify-content: center;
}

/* Flex column for text / CTA inside the container */
.hero-content {
  display: flex;
  flex-direction: column;
}

.hero-content.center {
  text-align: center;
  justify-content: center;
  align-items: center;
}

/* ═══════════════ [origem: scrollbar.css] ═══════════════ */

/**
 * scrollbar.css
 * Sistema de scrollbar — única fonte da verdade para todo o pilot.autocavado.pt.
 *
 * Variantes (classes modificadoras):
 *   .sb-hidden  — sem scrollbar (JS custom substitute ou overflow:hidden)
 *   .sb-xs      — 4px, para chat bodies (bot, IA)
 *   .sb-h       — 5px horizontal, para tabelas com scroll horizontal
 *
 * Elementos JS-generated (TabularData, bot) sem controlo de HTML
 * têm os seus selectores declarados directamente aqui — nunca noutro ficheiro.
 *
 * Depends on: vars-colors.css, vars-dimensions.css, themes.css, layout.css (tokens)
 */

/* ══════════════════════════════════════════════════════════════════════
   1 — RESET DE PÁGINA
   html nunca mostra scrollbar nativa — substituída por DOM custom scrollbar
   em todas as páginas do projecto.
   ══════════════════════════════════════════════════════════════════════ */
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-y: scroll; /* manter scrollability sem mostrar a barra */
}
html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ══════════════════════════════════════════════════════════════════════
   2 — SCROLLBAR PERSONALIZADO — ÚNICA FONTE PARA TODO O PILOT
   Objetivo: NUNCA o scrollbar nativo do SO. Sempre o fino personalizado, em
   QUALQUER elemento scrollável (painéis, modais, textareas, drawers…), sem
   precisar de "resets" caso-a-caso por elemento (o que era frágil: cada
   painel novo — ex. .ml-scroll-body — caía no nativo até ser adicionado à mão).

   Truque cross-browser DEFINITIVO:
   • WebKit/Blink (Chrome, Edge, Safari, Opera) → estilizamos com as pseudo
     ::-webkit-scrollbar. CRÍTICO: NÃO definir scrollbar-width/-color nestes
     browsers. No Chrome 121+ qualquer um deles ATIVA o "styled native
     scrollbar" do SO e faz IGNORAR as ::-webkit-scrollbar — era a causa das
     barras nativas grossas. Por isso o antigo `.app *{scrollbar-color}` saiu.
   • Firefox → não conhece ::-webkit-scrollbar; SÓ aqui aplicamos
     scrollbar-width/-color, isolados num @supports que apenas o Firefox
     satisfaz (não suporta o seletor ::-webkit-scrollbar). Assim o Chrome
     nunca recebe scrollbar-color e mantém sempre a barra webkit fina.
   ══════════════════════════════════════════════════════════════════════ */

/* WebKit/Blink — aplica-se a TUDO (dentro e fora de .app). Sem setas. */
::-webkit-scrollbar                { width: 8px; height: 8px; }
::-webkit-scrollbar-button         { display: none; height: 0; width: 0; }
::-webkit-scrollbar-corner         { background: transparent; }
::-webkit-scrollbar-track          { background: var(--scrollbar-track-bg, transparent); }
::-webkit-scrollbar-thumb          { background: var(--scrollbar-thumb, var(--color-border)); border-radius: 0; }
::-webkit-scrollbar-thumb:hover    { background: var(--scrollbar-thumb-hover, var(--color-text-muted)); }

/* Firefox — o único browser que precisa (e suporta) o modelo W3C. Isolar num
   @supports que só o Firefox cumpre impede o Chrome de ativar o modo nativo. */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, var(--color-border)) var(--scrollbar-track-bg, transparent);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   VARIANTE: sb-hidden
   Sem scrollbar — para elementos onde um JS custom scrollbar substitui
   a nativa, ou onde o overflow está controlado programaticamente.
   Aplicar a classe no HTML, ou usar os selectores fixos abaixo.
   ══════════════════════════════════════════════════════════════════════ */
.sb-hidden                    { scrollbar-width: none; -ms-overflow-style: none; }

/* Elementos fixos — sb-hidden. Escondem a barra NATIVA:
   • .content → substituída pela .scrollbar-wrap DOM (barra da PÁGINA), que é
     confinada à faixa entre o header e o footer. Só o CONTEÚDO passa por trás
     do header/footer; a barra nunca. (Painéis internos como .ml-scroll-body ou
     tabelas mantêm a sua própria barra webkit fina.)
   • sidebar  → sem barra. */
.app .content,
.app-sidebar .app-sidebar-nav {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.app .content::-webkit-scrollbar,
.app-sidebar .app-sidebar-nav::-webkit-scrollbar {
  width: 0;
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════════
   VARIANTE: sb-xs (4px)
   Para chat bodies compactos — bot e IA.
   Chrome 121+ dentro de .app usa W3C mode; a regra webkit abaixo
   tem maior especificidade e aplica-se em Safari e Chrome fora de .app.
   ══════════════════════════════════════════════════════════════════════ */
.sb-xs::-webkit-scrollbar       { width: 4px; }

/* Elementos fixos — sb-xs */
.bot-chat-body::-webkit-scrollbar{ width: 4px; }

/* ══════════════════════════════════════════════════════════════════════
   VARIANTE: sb-h (5px horizontal)
   Para tabelas com scroll horizontal. O thumb usa border-radius para
   distinguir visualmente da barra vertical de página.
   ══════════════════════════════════════════════════════════════════════ */
.sb-h {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, rgba(255, 255, 255, 0.22)) transparent;
}
.sb-h::-webkit-scrollbar        { height: 5px; }
.sb-h::-webkit-scrollbar-track  { background: transparent; }
.sb-h::-webkit-scrollbar-thumb  { background: var(--scrollbar-thumb, rgba(255, 255, 255, 0.22)); border-radius: var(--radius-sm, 4px); }

/* Elementos fixos — sb-h */
.ptbl-tbl-wrap,
.ptbl-vs-outer,
.table-wrap .table-scroll {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, rgba(255, 255, 255, 0.22)) transparent;
}
.ptbl-tbl-wrap::-webkit-scrollbar,
.table-wrap .table-scroll::-webkit-scrollbar        { height: 5px; }
.ptbl-tbl-wrap::-webkit-scrollbar-track,
.table-wrap .table-scroll::-webkit-scrollbar-track  { background: transparent; }
.ptbl-tbl-wrap::-webkit-scrollbar-thumb,
.table-wrap .table-scroll::-webkit-scrollbar-thumb  { background: var(--scrollbar-thumb, rgba(255, 255, 255, 0.22)); border-radius: var(--radius-sm, 4px); }

/* Painel de notificações — thin com cor de borda */
#app-notifications-list {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border, #e2e8f0) transparent;
}

/* ══════════════════════════════════════════════════════════════════════
   DOM CUSTOM SCROLLBAR da página (.scrollbar-wrap) — REGRA ABSOLUTA
   A barra da PÁGINA vive SEMPRE na faixa entre o header e o footer; nunca
   passa por trás deles (só o conteúdo passa). O .content esconde a barra
   nativa (sb-hidden acima) e o thumb é desenhado por initCustomScrollbar()
   (layout.js), com padding-top/bottom = header/footer a confinar o thumb.

   FLEX SIBLING de .content (dentro de #main-container, que é flex row): reserva
   a sua largura à direita e o .content encolhe → a barra NUNCA se sobrepõe ao
   conteúdo. Mas SÓ reserva quando há overflow: width:0 sem scroll (≠ da versão
   antiga que reservava 10px FIXOS numa faixa vazia sempre — a queixa que a fez
   sair). A classe .has-scroll (JS) liga a largura + o track. Fica na borda do
   ECRÃ (à direita de tudo). */
.scrollbar-wrap {
  position: relative;   /* âncora do thumb (absolute) */
  flex-shrink: 0;
  width: 0;             /* sem scroll: não reserva espaço nem pinta faixa */
  box-sizing: border-box;
  padding-top: var(--header-height);
  padding-bottom: var(--footer-height);
  pointer-events: none;
}

/* Com scroll: reserva a largura da barra — o .content encolhe, sem overlap. */
.scrollbar-wrap.has-scroll { width: 8px; pointer-events: auto; }

/* Track — visível SÓ entre header e footer, e SÓ quando há scroll. */
.scrollbar-wrap::before {
  content: '';
  position: absolute;
  top: var(--header-height);
  bottom: var(--footer-height);
  left: 0;
  right: 0;
  background: var(--scrollbar-track-bg);
  opacity: 0;
  transition: opacity var(--dur-fast, 0.15s) ease;
  pointer-events: none;
}

.scrollbar-wrap.has-scroll::before { opacity: 1; }

.scrollbar-thumb {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 20px;
  border-radius: 0;
  background: var(--scrollbar-thumb);
  cursor: default;
  pointer-events: auto;
  transition: background var(--dur-fast, 0.15s) ease;
}

.scrollbar-thumb:hover        { background: var(--scrollbar-thumb-hover); }
.scrollbar-thumb.is-dragging  { background: var(--scrollbar-thumb-hover); transition: none; }

/* Módulos que escondem a barra da página (ex.: support em vista de ticket). */
.scrollbar-wrap.is-hidden { display: none; }

/* ══════════════════════════════════════════════════════════════════════
   DOM CUSTOM SCROLLBAR — Login page (.login-scrollbar-wrap)
   position: fixed, gerido por _initScrollbar() em login.js.
   body { padding-right: 10px } em login.css reserva o espaço equivalente.
   ══════════════════════════════════════════════════════════════════════ */
.login-scrollbar-wrap {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 10px;
  background: var(--scrollbar-track-bg);
  z-index: 9999;
  pointer-events: none;
}

.login-scrollbar-thumb {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 20px;
  border-radius: 0;
  background: var(--scrollbar-thumb);
  cursor: default;
  pointer-events: all;
  transition: background var(--dur-fast, 0.15s) ease;
}

.login-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.login-scrollbar-thumb.is-dragging {
  cursor: default;
  background: var(--scrollbar-thumb-hover);
  transition: none;
}

/* Nota: os antigos "resets" de #tab-lead/#chronology_form (scrollbar-width/-color
   a initial para reativar o webkit dentro de .app) foram REMOVIDOS — deixaram de
   ser precisos com o modelo acima (webkit universal + Firefox isolado). */


/* ─────────────────────────────────────────────────────────────────────────────
 * MOVIMENTO REDUZIDO — guarda global (WCAG 2.3.3)
 * ─────────────────────────────────────────────────────────────────────────────
 * Quem tem `prefers-reduced-motion: reduce` no sistema pede que o ecrã não se
 * mexa: enjoo, vertigem, epilepsia vestibular. O projeto tem animação espalhada
 * por dezenas de folhas de módulo, e pedir a cada uma que se lembre da guarda é
 * garantir que a próxima se esquece. Fica aqui, uma vez, para todas.
 *
 * O `!important` é deliberado e é a única forma de a guarda vencer regras de
 * módulo mais específicas. Não se anula a animação (`animation: none`) porque
 * isso salta o estado final e deixa elementos escondidos: encurta-se para um
 * instante, que é a receita do a11y-project e a que o Bootstrap usa.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}