/* ============================================================
 * SpiHub Theme — "Cais Profundo": premium corporativo
 * Âncora navy (marca) + acento azure, números tabulares,
 * Plus Jakarta Sans nos títulos. Claro e escuro, mobile-first,
 * CSS puro (sem JS). Tudo via tokens --hi-* + classes do Filament.
 * ============================================================ */

/* Fontes premium. Carregam via CDN; offline cai no fallback de sistema
 * definido em --hi-font-sans (nada quebra, só muda o desenho da fonte). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

:root {
  /* Tema verde — âncora #0f4d0f (RGB 15,77,15) + acento verde #2e9e44.
     Ramp escuro→claro:
       #0f4d0f verde âncora    #1a6126 verde escuro
       #237d34 verde confiante #2e9e44 verde (acento)
       #79c179 verde suave     #edf7ed verde névoa
  */
  --hi-primary: #0f4d0f;        /* navy âncora — ações/realces sólidos */
  --hi-primary-light: #2e9e44;  /* azure — acento */
  --hi-primary-dark: #0b3a0b;
  --hi-primary-rgb: 15, 77, 15;
  --hi-accent: #2e9e44;
  --hi-accent-light: #46a846;
  --hi-accent-rgb: 46, 158, 68;
  --hi-glow: rgba(15, 77, 15, 0.16);
  --hi-glow-accent: rgba(46, 158, 68, 0.20);

  /* Superfícies — fundo branco (elegante/minimalista); cartões brancos puros
   * destacados por borda + sombra sutil. */
  --hi-bg-base: #ffffff;
  --hi-bg-elev: #ffffff;
  --hi-bg-soft: #f8fafc;   /* = bg-gray-50 do Filament: iguala os cinzas das tabelas */
  --hi-border: rgba(15, 27, 45, 0.08);
  --hi-border-strong: rgba(15, 27, 45, 0.14);

  /* Texto — ink/slate/muted */
  --hi-text-1: #0f1b2d;
  --hi-text-2: #46586f;
  --hi-text-3: #76869b;

  /* Sinais (status) */
  --hi-success: #0e9f6e;
  --hi-warning: #c77d00;
  --hi-danger: #d64550;

  /* Sombras em camadas — suaves, premium (não "neon") */
  --hi-shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.04), 0 1px 1px rgba(15, 27, 45, 0.03);
  --hi-shadow-md: 0 2px 4px rgba(15, 27, 45, 0.04), 0 8px 24px rgba(15, 27, 45, 0.07);
  --hi-shadow-lg: 0 4px 8px rgba(15, 27, 45, 0.05), 0 24px 48px rgba(15, 77, 15, 0.12);

  /* Tipografia — Inter (UI) + Plus Jakarta Sans (títulos) */
  --hi-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --hi-font-display: 'Plus Jakarta Sans', var(--hi-font-sans);

  /* Raio de canto unificado */
  --hi-radius: 12px;
  --hi-radius-lg: 16px;

  --hi-gradient: #0f4d0f; /* cor sólida — sem degradê */
}

.dark {
  /* Em dark mode o azure clareia para garantir contraste sobre o navy-quase-preto */
  --hi-primary: #52b863;
  --hi-primary-light: #84d693;
  --hi-primary-dark: #2e9e44;
  --hi-primary-rgb: 82, 184, 99;
  --hi-accent: #2e9e44;
  --hi-accent-light: #46a846;
  --hi-accent-rgb: 46, 158, 68;
  --hi-glow: rgba(82, 184, 99, 0.26);
  --hi-glow-accent: rgba(46, 158, 68, 0.32);
  --hi-bg-base: #0a140a;
  --hi-bg-elev: #122112;
  --hi-bg-soft: #172e17;
  --hi-border: rgba(255, 255, 255, 0.08);
  --hi-border-strong: rgba(255, 255, 255, 0.14);
  --hi-text-1: #eaf0f8;
  --hi-text-2: #b6c2d4;
  --hi-text-3: #7e8da3;
  --hi-success: #34d399;
  --hi-warning: #fbbf24;
  --hi-danger: #f87171;
  --hi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --hi-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
  --hi-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55);
  --hi-gradient: #2e9e44; /* cor sólida — sem degradê */

  /* Retinta as tonalidades ESCURAS do cinza do Filament (que em produção é
   * Slate = azulado) para VERDE — somente no modo escuro. Cobre as superfícies
   * dark que usam dark:bg-gray-800/900/950 (área principal/body, topbar, cards,
   * inputs, dropdowns, tabelas, modais) e bordas. O modo claro NÃO é afetado:
   * ele usa as tonalidades CLARAS (--gray-50/100/…), que não tocamos; e o texto
   * do dark usa as claras também. */
  --gray-950: 10, 20, 10;   /* #0a140a — canvas / área principal */
  --gray-900: 18, 33, 18;   /* #122112 — painéis/sidebar/topbar/cards/inputs */
  --gray-800: 23, 46, 23;   /* #172e17 — superfícies suaves */
  --gray-700: 34, 56, 34;   /* #223822 — bordas/realces sutis */
}

/* ---------- Tipografia premium (Cais Profundo) ---------- */
body,
.fi-body,
.fi-sidebar,
.fi-topbar {
  font-family: var(--hi-font-sans) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Títulos e o nome da marca recebem a fonte display (mais caráter) */
.fi-header-heading,
.fi-section-header-heading,
.fi-modal-heading,
.fi-wi-stats-overview-stat-value,
.fi-logo {
  font-family: var(--hi-font-display) !important;
}

/* Números alinhados (tabular-nums) onde há dados — colunas, KPIs, paginação,
 * badges e campos numéricos. É o que dá o "ar de instrumento financeiro". */
.fi-ta-table,
.fi-ta-text,
.fi-wi-stats-overview,
.fi-badge,
.fi-pagination,
.fi-in-numeric input {
  font-variant-numeric: tabular-nums !important;
  font-feature-settings: 'tnum' 1, 'cv01' 1 !important;
}

/* ---------- Compat de utilitários de grid (widgets customizados) ----------
 * O painel carrega só o CSS do Filament (não o build Tailwind do app), então
 * algumas utilitárias de grid usadas nos blades de widget não existem nele —
 * fazendo os cards/listas caírem para 1 coluna. Definimos aqui as que faltam,
 * idênticas ao Tailwind, para os widgets ficarem responsivos. Só afetam quem
 * já tem `display:grid` (classe `grid`, presente no Filament). */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Background do main + page ---------- */
body {
  background: var(--hi-bg-base) !important;
}

.dark body {
  background: var(--hi-bg-base) !important;
  background-image: none !important;
}

.fi-main {
  background: transparent !important;
}

/* ---------- Sidebar com fundo sólido ---------- */
.fi-sidebar {
  background: var(--hi-bg-elev) !important;
  border-right: 1px solid var(--hi-border) !important;
}

.dark .fi-sidebar {
  background: #122112 !important;
}

/* Brand area com glow */
.fi-sidebar-header {
  border-bottom: 1px solid var(--hi-border) !important;
  background: transparent !important;
}

.fi-logo {
  display: inline-flex !important;
  align-items: center !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  font-size: 1.4rem !important;
}

/* Fallback (caso o brandLogo não carregue, mostra o brandName em cor sólida) */
.fi-logo:not(:has(img)) {
  color: var(--hi-primary);
}

/* Imagem do brand: tamanho controlado pelo Filament (brandLogoHeight),
   garantimos contain + ajuste fino de alinhamento */
.fi-logo img {
  /* altura controlada pelo Filament via brandLogoHeight() */
  width: auto !important;
  max-width: 240px !important;
  object-fit: contain !important;
  display: block;
}

/* O brandLogo do painel logado é o logo VERDE (logo_spihub_verde.png), que fica
   ótimo sobre o sidebar claro (verde sobre branco). No modo escuro o sidebar é
   verde-quase-preto, onde um logo verde-escuro some — então aqui clareamos o
   logo para branco, garantindo contraste/legibilidade. */
.dark .fi-logo img {
  filter: brightness(0) invert(1);
}

/* Sidebar groups — rótulo é o NOME DO MÓDULO no cabeçalho do acordeão.
 * Texto legível (não-uppercase) para funcionar como título ao lado do ícone. */
.fi-sidebar-group-label {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--hi-text-2) !important;
  padding: 0 !important;
}

/* ---------- Sidebar: itens (submódulos) ----------
 * Linha de submódulo enxuta: texto secundário que escurece no hover; estado
 * ativo vira uma "pílula" preenchida na cor primária (sem barra lateral, que
 * competia com a linha-guia de hierarquia do grupo). */
.fi-sidebar-item-button {
  border-radius: 8px !important;
  padding-top: 0.4rem !important;
  padding-bottom: 0.4rem !important;
  color: var(--hi-text-2) !important;
  font-weight: 500 !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}

.fi-sidebar-item-button:hover {
  background: rgba(var(--hi-primary-rgb), 0.07) !important;
  color: var(--hi-text-1) !important;
}

.fi-sidebar-item-active .fi-sidebar-item-button {
  background: rgba(var(--hi-accent-rgb), 0.14) !important;
  color: var(--hi-accent) !important;
  font-weight: 600 !important;
  box-shadow: inset 3px 0 0 0 var(--hi-accent) !important;
}

.dark .fi-sidebar-item-active .fi-sidebar-item-button {
  color: var(--hi-primary-light) !important;
}

/* ---------- Topbar com glassmorphism ---------- */
.fi-topbar {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid var(--hi-border) !important;
  box-shadow: var(--hi-shadow-sm) !important;
}

.dark .fi-topbar {
  /* Sólido e idêntico à sidebar (#122112): no escuro a translucidez deixava
   * vazar o cinza-slate padrão do Filament por baixo, puxando o topbar para um
   * azulado que destoava do verde do restante da estrutura. */
  background: #122112 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* ---------- Page header ---------- */
.fi-header-heading {
  font-family: var(--hi-font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.95rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.15 !important;
  color: var(--hi-text-1) !important;
}

/* ---------- Sections / cards ---------- */
.fi-section {
  background: var(--hi-bg-elev) !important;
  border: 1px solid var(--hi-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--hi-shadow-sm) !important;
  transition: border-color 200ms ease, box-shadow 200ms ease !important;
}

.fi-section:hover {
  border-color: var(--hi-border-strong) !important;
  box-shadow: var(--hi-shadow-md) !important;
}

.dark .fi-section {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: var(--hi-border) !important;
}

.fi-section-header {
  border-bottom: 1px solid var(--hi-border) !important;
  padding: 1rem 1.25rem !important;
  background: transparent !important;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
}

.fi-section-header-heading {
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: var(--hi-text-1) !important;
}

/* ---------- Botão primário — verde sólido (sem degradê) ---------- */
.fi-btn-color-primary {
  background: var(--hi-gradient) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 1px 2px rgba(11, 27, 45, 0.16), 0 2px 6px var(--hi-glow) !important;
  transition: filter 150ms ease, transform 150ms ease, box-shadow 150ms ease !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
}

.fi-btn-color-primary:hover {
  filter: brightness(1.08) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px var(--hi-glow) !important;
}

.fi-btn-color-primary:active {
  transform: translateY(0);
  filter: brightness(0.96) !important;
}

/* Foco visível e acessível em qualquer botão (anel azure) */
.fi-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(var(--hi-accent-rgb), 0.45) !important;
}

/* ---------- Tabelas ---------- */
.fi-ta {
  border: 1px solid var(--hi-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--hi-bg-elev) !important;
}

.fi-ta-header-toolbar {
  background: var(--hi-bg-soft) !important;
  border-bottom: 1px solid var(--hi-border) !important;
  padding: 0.75rem 1rem !important;
}

.dark .fi-ta-header-toolbar {
  background: rgba(255, 255, 255, 0.02) !important;
}

.fi-ta-header-cell {
  background: var(--hi-bg-soft) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  color: var(--hi-text-3) !important;
}

.dark .fi-ta-header-cell {
  background: rgba(255, 255, 255, 0.02) !important;
}

.fi-ta-row {
  transition: background-color 100ms ease;
}

.fi-ta-row:hover {
  background: rgba(var(--hi-primary-rgb), 0.04) !important;
}

.dark .fi-ta-row:hover {
  background: rgba(var(--hi-primary-rgb), 0.08) !important;
}

/* Striped */
.fi-ta-striped .fi-ta-row:nth-child(even) {
  background: var(--hi-bg-soft);
}

.dark .fi-ta-striped .fi-ta-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}

/* ---------- Stats overview cards (widgets) ---------- */
.fi-wi-stats-overview-stat {
  background: var(--hi-bg-elev) !important;
  border: 1px solid var(--hi-border) !important;
  border-radius: 14px !important;
  box-shadow: var(--hi-shadow-sm) !important;
  position: relative;
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease !important;
}

.fi-wi-stats-overview-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--hi-shadow-md) !important;
  border-color: rgba(var(--hi-primary-rgb), 0.3) !important;
}

.fi-wi-stats-overview-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--hi-accent);
  opacity: 0.9;
  transition: opacity 200ms ease;
}

.fi-wi-stats-overview-stat:hover::before {
  opacity: 1;
}

.fi-wi-stats-overview-stat-value {
  font-family: var(--hi-font-display) !important;
  font-weight: 800 !important;
  font-size: 1.9rem !important;
  letter-spacing: -0.025em !important;
  color: var(--hi-primary) !important;
}

.fi-wi-stats-overview-stat-label {
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
  color: var(--hi-text-3) !important;
}

/* ---------- Inputs / Forms ---------- */
.fi-input,
.fi-input-wrp {
  border-radius: 10px !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}

.fi-input:focus,
.fi-input-wrp:focus-within {
  border-color: var(--hi-accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--hi-accent-rgb), 0.20) !important;
}

.fi-fo-field-wrp-label {
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  color: var(--hi-text-2) !important;
}

/* ---------- Badges ---------- */
.fi-badge {
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  border-radius: 999px !important;
}

/* ---------- Tabs ---------- */
.fi-tabs-tab {
  border-radius: 8px !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}

.fi-tabs-tab[aria-selected="true"] {
  background: var(--hi-primary) !important;
  color: white !important;
  box-shadow: 0 2px 8px var(--hi-glow) !important;
}

/* ---------- Modal ---------- */
.fi-modal-window {
  border-radius: 16px !important;
  box-shadow: var(--hi-shadow-lg) !important;
  border: 1px solid var(--hi-border) !important;
}

/* ---------- Dropdown ---------- */
.fi-dropdown-panel {
  border-radius: 12px !important;
  border: 1px solid var(--hi-border) !important;
  box-shadow: var(--hi-shadow-lg) !important;
  backdrop-filter: blur(8px);
}

/* ---------- Notification ---------- */
.fi-no-notification {
  border-radius: 12px !important;
  box-shadow: var(--hi-shadow-lg) !important;
  border: 1px solid var(--hi-border) !important;
  backdrop-filter: blur(12px);
}

/* ---------- Pagination ---------- */
.fi-pagination-item-button {
  border-radius: 8px !important;
  transition: background-color 150ms ease !important;
}

/* ---------- Login custom HubInt (layout split coluna esquerda azul + form à direita)
 *
 * O Filament envolve a SimplePage em wrappers (.fi-simple-layout +
 * .fi-simple-main-ctn + .fi-simple-main) com max-width, padding e ring.
 * Anulamos esses wrappers via `:has()` (suportado em Chrome 105+, Firefox 121+,
 * Safari 15.4+) para que a página de login ocupe a viewport inteira.
 */
body:has(.hubint-login-page) {
  background: #0f4d0f !important;
  padding: 0 !important;
  margin: 0 !important;
}

.fi-simple-layout:has(.hubint-login-page),
.fi-simple-main-ctn:has(.hubint-login-page) {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  flex: none !important;
}

.fi-simple-main:has(.hubint-login-page) {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  --tw-ring-shadow: 0 0 #0000 !important;
  --tw-ring-color: transparent !important;
}


/* Mobile-first: base = layout empilhado (faixa de marca no topo + formulário).
 * O split 50/50 do desktop é progressivamente adicionado em `min-width: 901px`
 * mais abaixo. Assim o caso pequeno é o padrão e o grande é o aprimoramento. */
.fi-simple-page.hubint-login-page {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto 1fr !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  min-height: 100vh !important;   /* fallback p/ navegadores sem dvh */
  min-height: 100dvh !important;  /* viewport real do mobile (sem a barra de URL) */
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--hi-bg-base) !important;
  background-image: none !important;
}

/* Faixa de marca: verde sólido com o logo SEMPRE contido (nunca `cover`, que
 * cortava o logo no mobile). No celular é uma faixa enxuta no topo. */
.fi-simple-page.hubint-login-page::before {
  content: '' !important;
  display: block !important;
  background-color: #0f4d0f !important;
  background-image: url('../img/logo_spihub.png') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: min(58%, 200px) auto !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  min-height: 140px !important;
  padding: 1.25rem !important;
  align-self: stretch !important;
}

/* Esconde o header padrão do simple-page (que mostraria o brandLogo da topbar
   duplicando o logo) — só dentro da página de login */
.fi-simple-page.hubint-login-page .fi-simple-header,
.fi-simple-page.hubint-login-page > section > header {
  display: none !important;
}

/* O <section> interno do page.simple é a área do formulário — centraliza o card */
.fi-simple-page.hubint-login-page > section {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.5rem 1.25rem !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* Mobile: formulário ocupa a largura, sem card flutuante (respira melhor). */
.hubint-login-form-wrap {
  width: 100%;
  max-width: 26rem;
  background: transparent;
  border: none;
  border-radius: 16px;
  padding: 0.5rem 0 0;
  box-shadow: none;
}

.hubint-login-header {
  margin-bottom: 1.75rem;
}

.hubint-login-header h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--hi-text-1);
  margin: 0 0 0.5rem;
  letter-spacing: -0.02em;
}

.hubint-login-header p {
  color: var(--hi-text-3);
  font-size: 0.95rem;
  margin: 0;
}

.hubint-login-header--centered {
  text-align: center;
}

.hubint-login-header--centered h1 {
  margin: 0;
}

.hubint-login-footer {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hi-border);
  text-align: center;
  color: var(--hi-text-3);
}

/* Aprimoramento desktop (≥901px): split 50/50 com coluna verde de altura cheia
 * e o formulário num card flutuante. Abaixo disso vale o layout empilhado base. */
@media (min-width: 901px) {
  .fi-simple-page.hubint-login-page {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: 1fr !important;
  }
  .fi-simple-page.hubint-login-page::before {
    min-height: 100vh !important;
    min-height: 100dvh !important;
    background-size: min(54%, 380px) auto !important;
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
    border-bottom: none !important;
    padding: 0 !important;
  }
  .fi-simple-page.hubint-login-page > section {
    padding: 2rem !important;
  }
  .hubint-login-form-wrap {
    max-width: 28rem;
    background: var(--hi-bg-elev);
    border: 1px solid var(--hi-border);
    padding: 2.5rem;
    box-shadow: var(--hi-shadow-lg);
  }
}

/* ---------- Sidebar: oculta o tenant menu (já mostramos no widget de Empresa) ---------- */
.fi-sidebar .fi-tenant-menu,
.fi-sidebar-header .fi-tenant-menu,
.fi-sidebar-nav-tenant-menu-ctn {
  display: none !important;
}

/* Reduz o espaço acima do primeiro item da sidebar (era py-8 = 32px) e
 * aperta o espaçamento vertical entre grupos/rótulos e itens (era gap-y-7
 * = 1.75rem entre grupos), que deixava os módulos muito distantes. */
.fi-sidebar-nav {
  padding-top: 1rem !important;
  gap: 0.25rem !important;
}

/* Respiro entre módulos (grupos) e entre submódulos de um mesmo módulo */
.fi-sidebar-nav-groups {
  gap: 0.25rem !important;
}

.fi-sidebar-group-items {
  gap: 0.0625rem !important;
}

/* Cabeçalho de cada módulo = botão-acordeão clicável (ícone + nome + chevron).
 * Clicar expande/recolhe os submódulos. Hover sutil + chevron discreto que
 * ganha presença ao passar o mouse. */
.fi-sidebar-group-button {
  border-radius: 8px !important;
  padding: 0.5rem 0.625rem !important;
  cursor: pointer !important;
  transition: background-color 150ms ease !important;
}

.fi-sidebar-group-button:hover {
  background: rgba(var(--hi-primary-rgb), 0.06) !important;
}

/* Ícone do módulo no cabeçalho do acordeão */
.fi-sidebar-group-icon {
  height: 1.2rem !important;
  width: 1.2rem !important;
  color: var(--hi-text-3) !important;
}

.fi-sidebar-group-button:hover .fi-sidebar-group-icon {
  color: var(--hi-primary) !important;
}

/* Chevron de expandir/recolher — discreto, realça no hover do cabeçalho */
.fi-sidebar-group-collapse-button {
  color: var(--hi-text-3) !important;
  opacity: 0.6 !important;
  transition: opacity 150ms ease !important;
}

.fi-sidebar-group-button:hover .fi-sidebar-group-collapse-button {
  opacity: 1 !important;
}

/* Submódulos recuados sob o cabeçalho, com linha-guia de hierarquia alinhada
 * sob o ícone do módulo. */
.fi-sidebar-group-items {
  padding-left: 0.75rem !important;
  margin-left: 1.1rem !important;
  margin-top: 0.125rem !important;
  border-left: 1px solid var(--hi-border) !important;
}

/* O "balde" SEM rótulo (data-group-label="") é onde o Filament coloca itens sem
 * módulo — caso do "Painel de Controle". Ele NÃO pode receber o recuo/linha-guia
 * dos submódulos: senão o item fica deslocado para a direita e, no rail
 * recolhido, o ícone sai do eixo dos ícones dos módulos. */
.fi-sidebar-group[data-group-label=""] .fi-sidebar-group-items {
  padding-left: 0 !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
  border-left: 0 !important;
}

/* ---------- Acordeão premium: orientação "onde estou" ----------
 * Quando um módulo contém a página ativa, seu cabeçalho (ícone + nome), o
 * chevron e a linha-guia dos submódulos acendem em azure. Resultado: você sempre
 * sabe em qual módulo está — inclusive com o acordeão recolhido (o item ativo
 * continua no DOM, então o :has() casa mesmo escondido). :has() já é usado no
 * login deste tema. */
.fi-sidebar-group:has(.fi-sidebar-item-active) .fi-sidebar-group-label {
  color: var(--hi-accent) !important;
  font-weight: 700 !important;
}

.fi-sidebar-group:has(.fi-sidebar-item-active) .fi-sidebar-group-icon,
.fi-sidebar-group:has(.fi-sidebar-item-active) .fi-sidebar-group-collapse-button {
  color: var(--hi-accent) !important;
  opacity: 1 !important;
}

.fi-sidebar-group:has(.fi-sidebar-item-active) .fi-sidebar-group-items {
  border-left-color: rgba(var(--hi-accent-rgb), 0.45) !important;
}

/* Item do balde sem rótulo (Painel de Controle) — um pouco mais de presença
 * para ancorar a navegação. */
.fi-sidebar-group[data-group-label=""] .fi-sidebar-item-button {
  font-weight: 600 !important;
}

/* Scrollbar fina e elegante dentro da sidebar */
.fi-sidebar-nav {
  scrollbar-width: thin;
  scrollbar-color: var(--hi-border-strong) transparent;
}

.fi-sidebar-nav::-webkit-scrollbar {
  width: 8px;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb {
  background: var(--hi-border-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.fi-sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: var(--hi-text-3);
  background-clip: padding-box;
}

/* ---------- Sidebar RECOLHIDA (rail de ícones) ----------
 * Quando recolhida, a sidebar perde a classe .fi-sidebar-open. Nesse estado o
 * "Painel de Controle" é um item de topo (.fi-sidebar-item-button) e os módulos
 * viram gatilhos de dropdown (px-2 py-2). Como eu havia reduzido o padding
 * vertical dos itens (0.4rem) para densidade na lista expandida, no rail o ícone
 * do Painel ficava numa caixa mais baixa que a dos módulos → desalinhado.
 * Aqui igualo a caixa (0.5rem, como o gatilho de grupo) e centralizo. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-button {
  padding: 0.5rem !important;
  justify-content: center !important;
}

/* No rail, o item ativo é um quadrado preenchido centralizado — sem a barra
 * lateral (inset) da lista expandida, que deslocava visualmente o ícone. */
.fi-sidebar:not(.fi-sidebar-open) .fi-sidebar-item-active .fi-sidebar-item-button {
  box-shadow: none !important;
}

/* ---------- Identification widget (Empresa + Usuário lado a lado) ----------
 * Grid próprio porque classes Tailwind responsivas (`sm:grid-cols-2`) usadas
 * em Blade do usuário não entram no bundle compilado pelo Filament — então
 * usamos CSS puro, garantido sempre disponível.
 */
.hubint-id-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 640px) {
  .hubint-id-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
}

.hubint-id-grid > * {
  min-width: 0;
}

/* ===== Conteúdo interno dos cards (Empresa / Usuário) =====
 * O wrapper externo é o <x-filament::section>, então herdamos border,
 * shadow, padding e header igual aos outros widgets do dashboard.
 * Aqui só estilizamos o miolo.
 */
.hubint-id-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.hubint-id-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px rgba(15, 77, 15, 0.25);
}

.hubint-id-icon svg {
  width: 28px;
  height: 28px;
}

.hubint-id-icon--company {
  border-radius: 12px;
  background: #0f4d0f;
}

.hubint-id-icon--user {
  border-radius: 50%;
  background: #2e9e44;
}

.hubint-id-body {
  flex: 1;
  min-width: 0;
}

.hubint-id-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.125rem;
}

.hubint-id-name {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--hi-text-1);
  line-height: 1.3;
  word-break: break-word;
}

.hubint-id-sub {
  font-size: 0.8125rem;
  color: var(--hi-text-3);
  margin: 0 0 0.875rem;
  word-break: break-all;
}

.hubint-id-status {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  line-height: 1.4;
  background: #e5e7eb;
  color: #374151;
}

.hubint-id-status--active {
  background: #d1fae5;
  color: #065f46;
}

.hubint-id-status--trialing {
  background: #fef3c7;
  color: #92400e;
}

.hubint-id-status--suspended {
  background: #fee2e2;
  color: #991b1b;
}

.hubint-id-status--cancelled {
  background: #e5e7eb;
  color: #374151;
}

.hubint-id-status--2fa {
  background: #d1fae5;
  color: #065f46;
}

.dark .hubint-id-status--active,
.dark .hubint-id-status--2fa {
  background: rgba(16, 185, 129, 0.18);
  color: #6ee7b7;
}

.dark .hubint-id-status--trialing {
  background: rgba(245, 158, 11, 0.18);
  color: #fcd34d;
}

.dark .hubint-id-status--suspended {
  background: rgba(239, 68, 68, 0.18);
  color: #fca5a5;
}

/* Lista de atributos (CNPJ, Plano, Telefone, Último acesso, Perfis) */
.hubint-id-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1.25rem;
  margin: 0.75rem 0 0;
  padding: 0.75rem 0 0;
  border-top: 1px solid var(--hi-border);
}

.hubint-id-list > div {
  min-width: 0;
}

.hubint-id-list__full {
  grid-column: 1 / -1;
}

.hubint-id-list dt {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--hi-text-3);
  margin-bottom: 0.1875rem;
}

.hubint-id-list dd {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--hi-text-1);
  margin: 0;
  word-break: break-word;
}

.hubint-id-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.hubint-id-role {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 6px;
  background: #edf7ed;
  color: #0f4d0f;
  border: 1px solid #d3ecd3;
}

.dark .hubint-id-role {
  background: rgba(46, 158, 68, 0.12);
  color: #79c179;
  border-color: rgba(121, 193, 121, 0.2);
}

.hubint-id-trial {
  display: inline-flex;
  align-items: center;
  margin: 0.875rem 0 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fde68a;
  padding: 0.25rem 0.625rem;
  border-radius: 6px;
}

.dark .hubint-id-trial {
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
  border-color: rgba(245, 158, 11, 0.3);
}

.hubint-id-empty {
  font-size: 0.875rem;
  color: var(--hi-text-3);
  padding: 0.5rem 0;
}

/* ===== Copiloto — input + botão Enviar (UX melhorada) =====
 * Botão maior, com ícone de envio + label, hover/focus visíveis,
 * altura proporcional ao input para harmonia visual.
 */
.copilot-input-form {
  border-top: 1px solid var(--hi-border);
  padding: 1rem 1.25rem;
  background: var(--hi-bg-soft);
}

.dark .copilot-input-form {
  background: rgba(255, 255, 255, 0.02);
}

.copilot-input-row {
  display: flex;
  gap: 0.625rem;
  align-items: stretch;
}

.copilot-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 1rem;
  font-size: 0.9375rem;
  border-radius: 10px;
  border: 1px solid var(--hi-border-strong);
  background: var(--hi-bg-elev);
  color: var(--hi-text-1);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.copilot-input::placeholder {
  color: var(--hi-text-3);
}

.copilot-input:focus {
  outline: none;
  border-color: #2e9e44;
  box-shadow: 0 0 0 3px rgba(46, 158, 68, 0.18);
}

.copilot-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.dark .copilot-input {
  background: #122112;
  color: var(--hi-text-1);
}

.copilot-send-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 48px;
  min-width: 130px;
  padding: 0 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #fff;
  background: #0f4d0f;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(15, 77, 15, 0.25);
  transition: background-color 150ms ease, transform 100ms ease, box-shadow 150ms ease;
}

.copilot-send-btn:hover:not(:disabled) {
  background: #0b3a0b;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(15, 77, 15, 0.35);
}

.copilot-send-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(15, 77, 15, 0.3);
}

.copilot-send-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(46, 158, 68, 0.4), 0 2px 8px rgba(15, 77, 15, 0.25);
}

.copilot-send-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.copilot-send-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transform: translateX(-1px);
}

@media (max-width: 640px) {
  .copilot-send-btn {
    min-width: 0;
    padding: 0 1rem;
  }
  .copilot-send-btn span {
    display: none;     /* em mobile, mostra só o ícone (paper-plane) */
  }
  .copilot-send-icon {
    width: 20px;
    height: 20px;
    transform: none;
  }
}

/* ---------- Theme toggle (já existe no Filament, só estilizamos) ---------- */
.fi-theme-switcher {
  border-radius: 999px !important;
}

/* ---------- Mobile-first refinements ---------- */
@media (max-width: 1024px) {
  .fi-section {
    border-radius: 12px !important;
  }
  .fi-ta {
    border-radius: 12px !important;
  }
  /* Remove backdrop blur em mobile pra economizar GPU */
  .fi-topbar,
  .fi-sidebar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

@media (max-width: 640px) {
  .fi-wi-stats-overview-stat-value {
    font-size: 1.5rem !important;
  }
}

/* ---------- Scrollbar custom (desktop só) ---------- */
@media (min-width: 1024px) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--hi-border-strong);
    border-radius: 5px;
    border: 2px solid transparent;
    background-clip: padding-box;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--hi-text-3);
    background-clip: padding-box;
  }
}

/* ============================================================
 * Galeria de imagens do produto — grid 4 colunas + seleção múltipla
 * + botão × por tile + drag-and-drop para reordenar.
 * ============================================================ */

/* Barra superior que aparece quando há tiles selecionadas */
[x-cloak] { display: none !important; }

.hubint-img-selbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: #edf7ed;
  border: 1px solid #d3ecd3;
  border-radius: 8px;
  font-size: 0.875rem;
}

.hubint-img-selbar-count {
  color: #0f4d0f;
}

.hubint-img-selbar-count strong {
  font-size: 1rem;
}

.hubint-img-selbar-actions {
  display: flex;
  gap: 8px;
}

.hubint-img-selbar-clear,
.hubint-img-selbar-delete {
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms, transform 100ms;
}

.hubint-img-selbar-clear {
  background: transparent;
  color: #475569;
  border: 1px solid #d3ecd3;
}

.hubint-img-selbar-clear:hover {
  background: #fff;
  color: #0f4d0f;
}

.hubint-img-selbar-delete {
  background: #dc2626;
  color: #fff;
}

.hubint-img-selbar-delete:hover {
  background: #991b1b;
  transform: translateY(-1px);
}

.hubint-img-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  width: 100%;
}

.hubint-img-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #d3ecd3;
  background: #edf7ed;
  cursor: grab;
  transition: opacity 150ms, box-shadow 150ms, border-color 150ms;
}

.hubint-img-tile.is-main {
  border: 2px solid #0f4d0f;
}

.hubint-img-tile.is-selected {
  outline: 3px solid #2e9e44;
  outline-offset: -3px;
  box-shadow: 0 0 0 4px rgba(46, 158, 68, 0.18);
}

.hubint-img-tile.is-drop-target {
  outline: 3px dashed #2e9e44;
  outline-offset: -3px;
}

.hubint-img-tile > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: auto;
  cursor: pointer;
}

.hubint-img-tile .hubint-img-checkbox {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid #fff;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: background 150ms, transform 100ms;
}

.hubint-img-tile .hubint-img-checkbox:hover {
  background: rgba(46, 158, 68, 0.85);
  transform: scale(1.05);
}

.hubint-img-tile .hubint-img-checkbox.is-checked {
  background: #2e9e44;
}

@media (max-width: 1024px) {
  .hubint-img-gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .hubint-img-gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- Reduced motion respect ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}



/* =====================================================================
 * Sino de notificações da topbar (App\Livewire\NotificationBell)
 * Reúne interações de clientes pendentes + avisos de sistema, entre a
 * busca global e o avatar. Visual alinhado ao tema "Cais Profundo".
 * ===================================================================== */
[x-cloak] { display: none !important; }

.spi-bell { position: relative; display: flex; align-items: center; }

.spi-bell__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.625rem;
  color: var(--hi-text-3);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.spi-bell__trigger:hover,
.spi-bell__trigger--active { color: var(--hi-primary); background: var(--hi-bg-soft); }
.spi-bell__icon { width: 1.4rem; height: 1.4rem; }

.spi-bell__badge {
  position: absolute;
  top: -2px;
  inset-inline-end: -2px;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 0.28rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fff;
  background: var(--hi-danger);
  border-radius: 999px;
  box-shadow: 0 0 0 2px var(--hi-bg-elev);
}

.spi-bell__panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  width: 22.5rem;
  max-width: calc(100vw - 1.5rem);
  max-height: min(32rem, 80vh);
  overflow-y: auto;
  background: var(--hi-bg-elev);
  border: 1px solid var(--hi-border);
  border-radius: var(--hi-radius);
  box-shadow: var(--hi-shadow-lg);
  z-index: 50;
  padding-bottom: 0.25rem;
}

.spi-bell__header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--hi-bg-elev);
  border-bottom: 1px solid var(--hi-border);
}
.spi-bell__title { font-family: var(--hi-font-display); font-weight: 700; color: var(--hi-text-1); }
.spi-bell__link {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--hi-primary-light);
  background: none;
  border: none;
  cursor: pointer;
}
.spi-bell__link:hover { text-decoration: underline; }

.spi-bell__section {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1rem 0.3rem;
}
.spi-bell__section-label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hi-text-3);
}
.spi-bell__section-count {
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #fff;
  background: var(--hi-primary);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  line-height: 1.3;
}

.spi-bell__item {
  display: flex;
  gap: 0.6rem;
  padding: 0.6rem 1rem;
  text-decoration: none;
  border-top: 1px solid var(--hi-border);
  transition: background-color .12s ease;
}
.spi-bell__item:first-of-type { border-top: none; }
.spi-bell__item:hover { background: var(--hi-bg-soft); }

.spi-bell__dot {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: 0.35rem;
  border-radius: 999px;
  background: var(--hi-text-3);
}
.spi-bell__dot--question { background: #2563eb; }
.spi-bell__dot--message  { background: #0e9f6e; }
.spi-bell__dot--claim    { background: var(--hi-danger); }
.spi-bell__dot--review   { background: var(--hi-warning); }
.spi-bell__dot--ticket   { background: var(--hi-primary); }

.spi-bell__content { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1 1 auto; }
.spi-bell__meta { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.spi-bell__kind { font-size: 0.68rem; font-weight: 700; color: var(--hi-text-3); text-transform: uppercase; letter-spacing: 0.03em; }
.spi-bell__time { font-size: 0.66rem; color: var(--hi-text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.spi-bell__headline { font-size: 0.82rem; font-weight: 600; color: var(--hi-text-1); text-decoration: none; }
/* O título de notificação de sistema é um <button> (marca como lida ao clicar);
   reseta a aparência nativa do botão para ficar idêntico ao link. */
button.spi-bell__headline { background: none; border: none; padding: 0; margin: 0; font-family: inherit; text-align: left; cursor: pointer; }
.spi-bell__headline:hover { color: var(--hi-primary-light); text-decoration: underline; }
.spi-bell__preview { font-size: 0.76rem; color: var(--hi-text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spi-bell__status {
  align-self: flex-start;
  margin-top: 0.15rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--hi-text-2);
  background: var(--hi-bg-soft);
  border: 1px solid var(--hi-border);
  border-radius: 999px;
  padding: 0.02rem 0.4rem;
}

.spi-bell__sysicon { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; }
.spi-bell__sysicon--danger  { color: var(--hi-danger); }
.spi-bell__sysicon--warning { color: var(--hi-warning); }
.spi-bell__sysicon--success { color: var(--hi-success); }
.spi-bell__sysicon--gray    { color: var(--hi-text-3); }

.spi-bell__dismiss {
  flex: 0 0 auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.4rem;
  color: var(--hi-text-3);
  background: none;
  border: none;
  cursor: pointer;
}
.spi-bell__dismiss:hover { color: var(--hi-success); background: var(--hi-bg-soft); }
.spi-bell__dismiss-icon { width: 1rem; height: 1rem; }

.spi-bell__empty { padding: 1rem; font-size: 0.78rem; color: var(--hi-text-3); text-align: center; }

.spi-bell__footer {
  position: sticky;
  bottom: 0;
  padding: 0.6rem 1rem;
  text-align: center;
  background: var(--hi-bg-elev);
  border-top: 1px solid var(--hi-border);
}
.spi-bell__footer a { font-size: 0.76rem; font-weight: 600; color: var(--hi-primary-light); text-decoration: none; }
.spi-bell__footer a:hover { text-decoration: underline; }

/* ============================================================================
   Utilities — Pipeline de Pedidos + módulo Expedição (jul/2026)
   O CSS pré-compilado do Filament v3 não contém as utilities Tailwind de cor
   por paleta (bg-success-100, text-danger-700, …) — ele usa bg-custom-* com
   variáveis por componente. As blades custom usam essas classes, então elas
   são definidas aqui em cima das variáveis de cor que o painel injeta em
   :root (formato "r, g, b" → alpha via rgba(var(--x), a)).
   ============================================================================ */

/* Fundos claros (light) */
.bg-danger-50   { background-color: rgba(var(--danger-50), 1); }
.bg-danger-100  { background-color: rgba(var(--danger-100), 1); }
.bg-danger-500  { background-color: rgba(var(--danger-500), 1); }
.bg-warning-50  { background-color: rgba(var(--warning-50), 1); }
.bg-warning-100 { background-color: rgba(var(--warning-100), 1); }
.bg-warning-500 { background-color: rgba(var(--warning-500), 1); }
.bg-info-100    { background-color: rgba(var(--info-100), 1); }
.bg-info-500    { background-color: rgba(var(--info-500), 1); }
.bg-success-50  { background-color: rgba(var(--success-50), 1); }
.bg-success-100 { background-color: rgba(var(--success-100), 1); }
.bg-success-500 { background-color: rgba(var(--success-500), 1); }

/* Textos por paleta */
.text-danger-600  { color: rgba(var(--danger-600), 1); }
.text-danger-700  { color: rgba(var(--danger-700), 1); }
.text-warning-700 { color: rgba(var(--warning-700), 1); }
.text-info-600    { color: rgba(var(--info-600), 1); }
.text-info-700    { color: rgba(var(--info-700), 1); }
.text-success-600 { color: rgba(var(--success-600), 1); }
.text-success-700 { color: rgba(var(--success-700), 1); }
.text-gray-300    { color: rgba(var(--gray-300), 1); }
.text-gray-900    { color: rgba(var(--gray-900), 1); }

/* Bordas */
.border-collapse    { border-collapse: collapse; }
.border-t-2         { border-top-width: 2px; }
.border-primary-400 { border-color: rgba(var(--primary-400), 1); }
.border-success-300 { border-color: rgba(var(--success-300), 1); }

/* Variantes dark (Filament liga .dark no <html>) */
.dark .dark\:bg-danger-500\/10  { background-color: rgba(var(--danger-500), .1); }
.dark .dark\:bg-danger-500\/20  { background-color: rgba(var(--danger-500), .2); }
.dark .dark\:bg-warning-500\/10 { background-color: rgba(var(--warning-500), .1); }
.dark .dark\:bg-warning-500\/20 { background-color: rgba(var(--warning-500), .2); }
.dark .dark\:bg-info-500\/20    { background-color: rgba(var(--info-500), .2); }
.dark .dark\:bg-success-500\/10 { background-color: rgba(var(--success-500), .1); }
.dark .dark\:bg-success-500\/20 { background-color: rgba(var(--success-500), .2); }
.dark .dark\:border-success-500\/40 { border-color: rgba(var(--success-500), .4); }
.dark .dark\:border-white\/20   { border-color: rgba(255, 255, 255, .2); }
.dark .dark\:text-danger-400    { color: rgba(var(--danger-400), 1); }
.dark .dark\:text-warning-400   { color: rgba(var(--warning-400), 1); }
.dark .dark\:text-info-400      { color: rgba(var(--info-400), 1); }
.dark .dark\:text-success-400   { color: rgba(var(--success-400), 1); }
.dark .dark\:text-gray-600      { color: rgba(var(--gray-600), 1); }
.dark .dark\:hover\:text-primary-400:hover { color: rgba(var(--primary-400), 1); }

/* Interações */
.hover\:underline:hover { text-decoration: underline; }
.hover\:text-primary-600:hover { color: rgba(var(--primary-600), 1); }
.hover\:ring-2.hover\:ring-primary-400:hover { box-shadow: 0 0 0 2px rgba(var(--primary-400), 1); }
.focus\:border-primary-600:focus { border-color: rgba(var(--primary-600), 1); }

/* Estrutura (spacing/tamanhos ausentes do dist) */
.tabular-nums { font-variant-numeric: tabular-nums; }
.min-w-max { min-width: max-content; }
.min-w-8   { min-width: 2rem; }
.max-w-48  { max-width: 12rem; }
.left-0    { left: 0; }
.h-2       { height: .5rem; }
.mb-1      { margin-bottom: .25rem; }
.mb-3      { margin-bottom: .75rem; }
.mt-4      { margin-top: 1rem; }
.px-2\.5   { padding-left: .625rem; padding-right: .625rem; }
.py-0\.5   { padding-top: .125rem; padding-bottom: .125rem; }
.py-1\.5   { padding-top: .375rem; padding-bottom: .375rem; }