/* ============================================================
   FinSight — Sticky Tables & Smart Scroll v9.13.22
   ============================================================
   OBJETIVO:
   • Cabeçalhos fixos (sticky <thead>) em todas as tabelas
   • Primeira coluna fixa (rótulos: projeto, categoria, cliente, mês)
   • Rolagem vertical e horizontal independentes
   • Indicador visual sutil (ícone + sombras) na barra de rolagem
   • Funciona em desktop, tablet e mobile

   IMPLEMENTAÇÃO:
   1. Wrapper `.fs-table-wrapper` ganha overflow auto + max-height
   2. <thead> usa position: sticky; top: 0
   3. <th:first-child>, <td:first-child> usam position: sticky; left: 0
   4. Sombras laterais e superior indicam que há mais conteúdo
   5. Scrollbar customizada com ícone (gradiente direcional)
   ============================================================ */

/* ───────────────────────────────────────────────────────────
   1. WRAPPER UNIVERSAL DE SCROLL — base para todas as tabelas
   ─────────────────────────────────────────────────────────── */
.fs-table-wrapper,
.card-body[style*="overflow-x"],
.card-body > .data-table,
[class*="overflow-x"]:has(table) {
  position: relative;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  /* sombras de profundidade indicando scroll */
  background:
    /* topo: sombra quando há conteúdo acima */
    linear-gradient(to bottom, rgba(255,255,255,1) 30%, rgba(255,255,255,0)) top,
    /* fundo: sombra quando há conteúdo abaixo */
    linear-gradient(to top, rgba(255,255,255,1) 30%, rgba(255,255,255,0)) bottom,
    /* esquerda: sombra quando há conteúdo à esquerda */
    radial-gradient(farthest-side at 50% 0, rgba(138,92,255,.15), rgba(0,0,0,0)) top,
    /* direita: sombra quando há conteúdo à direita */
    radial-gradient(farthest-side at 50% 100%, rgba(138,92,255,.15), rgba(0,0,0,0)) bottom;
  background-repeat: no-repeat;
  background-size: 100% 28px, 100% 28px, 100% 8px, 100% 8px;
  background-attachment: local, local, scroll, scroll;
}

/* Variante explícita preferida (uso em novas tabelas) */
.fs-table-wrapper {
  max-height: 70vh;
  border-radius: 10px;
  border: 1px solid var(--border-light, #f0edf7);
}

/* Quando o wrapper estiver dentro de um card, herda raio + sem borda dupla */
.card-body .fs-table-wrapper { border: none; max-height: 65vh; }

/* ───────────────────────────────────────────────────────────
   2. CABEÇALHO STICKY — todas as tabelas .data-table
   ─────────────────────────────────────────────────────────── */
.data-table thead th,
table.data-table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 5;
  /* fundo opaco obrigatório para sticky */
  background: var(--primary-50, #faf7ff);
  /* sombra inferior sutil para destacar do conteúdo */
  box-shadow: inset 0 -1px 0 var(--border, #e5e1f0), 0 2px 4px rgba(138,92,255,.04);
}

/* Em tabelas com múltiplas linhas de cabeçalho (thead > tr + tr) */
.data-table thead tr:nth-child(2) th {
  top: 36px; /* ajustar conforme altura da 1ª linha */
}

/* ───────────────────────────────────────────────────────────
   3. PRIMEIRA COLUNA FIXA — opt-in via classe ou seletor
   ─────────────────────────────────────────────────────────── */

/* Aplicado automaticamente em tabelas com a classe .fs-sticky-first */
.fs-sticky-first th:first-child,
.fs-sticky-first td:first-child,
/* Compatível também com tabelas existentes que tenham .data-table dentro de wrapper rolável */
.fs-table-wrapper .data-table th:first-child,
.fs-table-wrapper .data-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--bg-card, #ffffff);
  /* sombra direita para indicar coluna fixa */
  box-shadow: 2px 0 4px -2px rgba(0,0,0,.08);
}

/* Cabeçalho + 1ª coluna (intersecção) deve ficar acima de tudo */
.fs-sticky-first thead th:first-child,
.fs-table-wrapper .data-table thead th:first-child {
  z-index: 7;
  background: var(--primary-50, #faf7ff);
}

/* Linhas hover preservam a cor do fundo da 1ª coluna */
.data-table tr:hover td:first-child {
  background: var(--bg-body, #f5f3fa);
}

/* Linhas total/destaque preservam realce */
.data-table .total-row td:first-child {
  background: var(--primary-light, #f0ebff) !important;
  color: var(--primary, #8a5cff);
  font-weight: 700;
}

/* ───────────────────────────────────────────────────────────
   4. TABELA TEMPORAL (TemporalWidget) — sticky reforçado
   ─────────────────────────────────────────────────────────── */
.temporal-scroll {
  position: relative;
  max-height: 60vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--border-light, #f0edf7);
}

.temporal-matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #faf7ff;
  box-shadow: inset 0 -2px 0 var(--primary-200, #ddd1ff);
}

.temporal-matrix-table th:first-child,
.temporal-matrix-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: #fafbfc;
  box-shadow: 2px 0 4px -2px rgba(0,0,0,.08);
}

.temporal-matrix-table thead th:first-child {
  z-index: 7;
  background: #faf7ff;
}

/* ───────────────────────────────────────────────────────────
   5. SCROLLBAR CUSTOMIZADA COM ÍCONE INDICADOR
   ─────────────────────────────────────────────────────────── */

/* Scrollbars um pouco mais largas para conter o ícone */
.fs-table-wrapper::-webkit-scrollbar,
.temporal-scroll::-webkit-scrollbar,
.card-body[style*="overflow-x"]::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

.fs-table-wrapper::-webkit-scrollbar-track,
.temporal-scroll::-webkit-scrollbar-track,
.card-body[style*="overflow-x"]::-webkit-scrollbar-track {
  background: linear-gradient(90deg, rgba(138,92,255,.04), rgba(138,92,255,.02));
  border-radius: 8px;
}

/* Thumb com gradiente roxo + ícone direcional via linear-gradient */
.fs-table-wrapper::-webkit-scrollbar-thumb,
.temporal-scroll::-webkit-scrollbar-thumb,
.card-body[style*="overflow-x"]::-webkit-scrollbar-thumb {
  background:
    /* setas direcionais embutidas via SVG codificado em data URI */
    center / 8px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'><path fill='white' d='M4 1L1 4h2v8H1l3 3 3-3H5V4h2z' opacity='0.8'/></svg>"),
    linear-gradient(180deg, var(--primary, #8a5cff), var(--primary-700, #5c32c2));
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all .2s ease;
}

.fs-table-wrapper::-webkit-scrollbar-thumb:hover,
.temporal-scroll::-webkit-scrollbar-thumb:hover,
.card-body[style*="overflow-x"]::-webkit-scrollbar-thumb:hover {
  background:
    center / 9px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 16'><path fill='white' d='M4 1L1 4h2v8H1l3 3 3-3H5V4h2z'/></svg>"),
    linear-gradient(180deg, var(--primary-600, #7347e0), var(--primary-800, #4a2899));
}

/* Scrollbar horizontal: ícone com setas esquerda/direita */
.fs-table-wrapper::-webkit-scrollbar-thumb:horizontal,
.temporal-scroll::-webkit-scrollbar-thumb:horizontal,
.card-body[style*="overflow-x"]::-webkit-scrollbar-thumb:horizontal {
  background:
    center / 16px 8px no-repeat
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 8'><path fill='white' d='M1 4l3-3v2h8V1l3 3-3 3V5H4v2z' opacity='0.85'/></svg>"),
    linear-gradient(90deg, var(--primary, #8a5cff), var(--primary-700, #5c32c2));
}

/* Cantinho onde scrollbars se cruzam */
.fs-table-wrapper::-webkit-scrollbar-corner,
.temporal-scroll::-webkit-scrollbar-corner,
.card-body[style*="overflow-x"]::-webkit-scrollbar-corner {
  background: transparent;
}

/* Suporte Firefox (sem ícone, apenas cor) */
.fs-table-wrapper,
.temporal-scroll,
.card-body[style*="overflow-x"] {
  scrollbar-width: thin;
  scrollbar-color: var(--primary, #8a5cff) rgba(138,92,255,.05);
}

/* ───────────────────────────────────────────────────────────
   6. INDICADORES DE SCROLL — pequenos chevrons nas bordas
   ─────────────────────────────────────────────────────────── */
.fs-table-wrapper.has-overflow-right::after {
  content: '\f054'; /* chevron-right */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  background: var(--primary, #8a5cff);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(138,92,255,.4);
  pointer-events: none;
  animation: fs-pulse-right 1.6s ease-in-out infinite;
  z-index: 10;
}

.fs-table-wrapper.has-overflow-left::before {
  content: '\f053'; /* chevron-left */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  background: var(--primary, #8a5cff);
  color: #fff;
  border-radius: 50%;
  font-size: 10px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(138,92,255,.4);
  pointer-events: none;
  z-index: 10;
}

@keyframes fs-pulse-right {
  0%, 100% { transform: translateY(-50%) translateX(0); opacity: 0.85; }
  50%      { transform: translateY(-50%) translateX(3px); opacity: 1; }
}

/* Indicador de overflow vertical — chevron pequeno na borda inferior */
.fs-table-wrapper.has-overflow-bottom > .fs-overflow-bottom-hint,
.fs-table-wrapper.has-overflow-bottom::after {
  /* opcional, mantido como sombra; o chevron-right já cobre lateral */
}
.fs-table-wrapper.has-overflow-bottom {
  /* reforça sombra inferior quando há mais conteúdo abaixo */
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,1) 30%, rgba(255,255,255,0)) top,
    linear-gradient(to top, rgba(138,92,255,.10) 0%, rgba(255,255,255,0) 100%) bottom,
    radial-gradient(farthest-side at 50% 0, rgba(138,92,255,.15), rgba(0,0,0,0)) top,
    radial-gradient(farthest-side at 50% 100%, rgba(138,92,255,.20), rgba(0,0,0,0)) bottom;
}

/* ───────────────────────────────────────────────────────────
   7. TABELAS DENTRO DE FORMULÁRIOS (overrides, modal rateio)
   ─────────────────────────────────────────────────────────── */
#overridesModal .data-table thead th,
#rateioModal .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #faf7ff;
}

/* ───────────────────────────────────────────────────────────
   8. AJUSTES MOBILE — sticky funciona com altura ajustada
   ─────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .fs-table-wrapper { max-height: 60vh; }
  .temporal-scroll  { max-height: 50vh; }
}

@media (max-width: 767px) {
  .fs-table-wrapper { max-height: 56vh; border-radius: 8px; }
  .temporal-scroll  { max-height: 50vh; }

  /* Em mobile, scrollbar maior para facilitar toque */
  .fs-table-wrapper::-webkit-scrollbar,
  .temporal-scroll::-webkit-scrollbar,
  .card-body[style*="overflow-x"]::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  /* Indicador chevron animado mais visível em mobile */
  .fs-table-wrapper.has-overflow-right::after {
    width: 26px; height: 26px;
    font-size: 11px;
  }
}

@media (max-width: 479px) {
  .fs-table-wrapper { max-height: 52vh; }
  .temporal-scroll  { max-height: 46vh; }
}

/* ───────────────────────────────────────────────────────────
   9. FALLBACK PARA NAVEGADORES SEM SUPORTE A `:has()`
   ─────────────────────────────────────────────────────────── */
@supports not selector(:has(*)) {
  .card-body > div[style*="overflow-x"] {
    position: relative;
  }
}

/* ───────────────────────────────────────────────────────────
   10. AJUSTES DE PRINT — remove sticky para impressão linear
   ─────────────────────────────────────────────────────────── */
@media print {
  .fs-table-wrapper,
  .temporal-scroll,
  .card-body[style*="overflow-x"] {
    overflow: visible !important;
    max-height: none !important;
    border: none !important;
    background: none !important;
  }
  .data-table thead th,
  .data-table th:first-child,
  .data-table td:first-child,
  .temporal-matrix-table thead th,
  .temporal-matrix-table th:first-child,
  .temporal-matrix-table td:first-child {
    position: static !important;
    box-shadow: none !important;
  }
}