/**
 * Mashup Obras da Educacao - Estilos Refinados
 * Tribunal de Contas do Estado do Maranhao
 *
 * Paleta de Cores (Amber / Marrom):
 *   - Primaria:    #92400e (amber-800)
 *   - Secundaria:  #d97706 (amber-600)
 *   - Accent:      #f59e0b (amber-500)
 *   - Light:       #fef3c7 (amber-100)
 *   - Background:  #fffbeb (amber-50)
 */

/* ====== RESET & BASE ====== */
html {
  scroll-behavior: smooth;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ====== SKELETON LOADING ====== */
.skeleton-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  gap: 8px;
  animation: skeletonFadeIn 0.4s ease;
}

@keyframes skeletonFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Shimmer base */
.skeleton-bar {
  background: linear-gradient(90deg, #f1f0ee 25%, #e8e5e0 37%, #f1f0ee 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.6s ease infinite;
  border-radius: 6px;
}

@keyframes skeletonShimmer {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Pulsing dots */
.skeleton-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.skeleton-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d4a574;
  opacity: 0.4;
  animation: skeletonDotPulse 1.2s ease-in-out infinite;
}

.skeleton-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.skeleton-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes skeletonDotPulse {

  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Skeleton for KPI numbers */
.skeleton-kpi .skeleton-bar.big {
  width: 55%;
  height: 32px;
  border-radius: 8px;
}

.skeleton-kpi .skeleton-bar.small {
  width: 30%;
  height: 8px;
}

/* Skeleton for chart areas */
.skeleton-chart {
  gap: 0;
  justify-content: flex-end;
  padding: 16px 20px 12px;
}

.skeleton-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  width: 80%;
  height: 65%;
}

.skeleton-chart-bars .skeleton-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
}

.skeleton-chart-axis {
  width: 80%;
  height: 2px;
  background: #e8e5e0;
  border-radius: 1px;
  margin-bottom: 10px;
}

/* Skeleton for map */
.skeleton-map {
  gap: 12px;
}

.skeleton-map-shape {
  width: 55%;
  aspect-ratio: 1;
  max-height: 60%;
  border-radius: 30% 40% 35% 45%;
  background: linear-gradient(135deg, #f1f0ee 25%, #e8e5e0 50%, #f1f0ee 75%);
  background-size: 400% 400%;
  animation: skeletonShimmer 1.6s ease infinite;
  opacity: 0.7;
}

/* Skeleton for tables */
.skeleton-table {
  align-items: stretch;
  padding: 12px 16px;
  gap: 0;
}

.skeleton-table-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.8fr 1fr 0.6fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f0ee;
}

.skeleton-table-row:first-child {
  border-bottom: 2px solid #e8e5e0;
  padding-bottom: 12px;
  margin-bottom: 2px;
}

.skeleton-table-row .skeleton-bar {
  height: 12px;
  width: 85%;
}

.skeleton-table-row:first-child .skeleton-bar {
  height: 10px;
  background: linear-gradient(90deg, #ddd4c8 25%, #d4c9bb 37%, #ddd4c8 63%);
  background-size: 400% 100%;
  animation: skeletonShimmer 1.6s ease infinite;
}

/* Skeleton for filter */
.skeleton-filter {
  flex-direction: row;
  gap: 6px;
  padding: 0 8px;
}

.skeleton-filter .skeleton-bar {
  height: 10px;
  border-radius: 4px;
}

/* Label text under skeletons */
.skeleton-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b8a58e;
  font-weight: 600;
  margin-top: 2px;
}

/* ====== CUSTOMIZACOES QLIK ====== */
.qlik-object {
  font-family: 'Inter', sans-serif;
}

.kpi-value {
  font-weight: 800;
  color: #92400e;
}

/* ====== CARDS ====== */
.card-hover {
  transition: transform 0.25s cubic-bezier(.4, 0, .2, 1),
    box-shadow 0.25s cubic-bezier(.4, 0, .2, 1);
}

.card-hover:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 25px -5px rgba(146, 64, 14, 0.10),
    0 4px 10px -3px rgba(146, 64, 14, 0.06);
}

/* KPI card com accent border esquerdo */
.kpi-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(.4, 0, .2, 1),
    box-shadow 0.25s cubic-bezier(.4, 0, .2, 1);
}

.kpi-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 50%, #92400e 100%);
  border-radius: 4px 0 0 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 25px -5px rgba(146, 64, 14, 0.10),
    0 4px 10px -3px rgba(146, 64, 14, 0.06);
}

.kpi-card:hover::before {
  opacity: 1;
}

/* ====== CHART CARDS ====== */
.chart-card {
  transition: box-shadow 0.25s cubic-bezier(.4, 0, .2, 1);
}

.chart-card:hover {
  box-shadow:
    0 8px 20px -4px rgba(146, 64, 14, 0.08),
    0 2px 8px -2px rgba(146, 64, 14, 0.04);
}

/* ====== SEÇOES - TÍTULOS ====== */
.section-title {
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #d97706, #f59e0b);
  border-radius: 2px;
  margin-top: 8px;
}

/* ====== FILTROS ALINHADOS ====== */
.filtro-row {
  display: grid;
  grid-template-columns: 90px 1px 1fr;
  align-items: center;
  column-gap: 12px;
}

.filtro-row .filtro-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 4px;
}

.filtro-row .filtro-divider {
  height: 32px;
  background: rgba(255, 255, 255, 0.20);
}

/* ====== FONTE DE DADOS ====== */
.fonte-dados {
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.fonte-dados:hover {
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.10);
  border-color: #f59e0b;
}

/* ====== TABS ====== */
.tab-button {
  position: relative;
  transition: color 0.2s ease;
}

.tab-button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: #fbbf24;
  transition: width 0.3s ease, left 0.3s ease;
}

/* Só mostra o ::after hover em abas NÃO ativas */
.tab-button:not(.border-amber-400):hover::after {
  width: 100%;
  left: 0;
}

/* ====== ANIMAÇÃO FADE-IN AO SCROLL ====== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-section {
  animation: fadeInUp 0.5s ease-out both;
}

/* ====== SELECTION BAR ====== */
.bright.qv-panel-current-selections,
.bright.qv-panel-current-selections .wrap {
  background-color: transparent !important;
  font-weight: bold !important;
  border: none !important;
}

#CurrentSelections {
  height: 40px;
  background-color: rgba(255, 255, 255, 0.05);
}

#CurrentSelections i,
#CurrentSelections span {
  color: #fbbf24 !important;
}

.bright.qv-panel-current-selections .buttons-end.border-right,
.bright.qv-panel-current-selections .buttons.border-right {
  border: none !important;
}

.bright.qv-panel-current-selections .no-selection {
  color: #fbbf24 !important;
}

/* ====== ESTILOS PLACEHOLDER (dev mode) ====== */
.qvplaceholder {
  background-color: #fffbeb;
  border: 2px dashed #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #92400e;
  font-weight: bold;
  height: 100%;
  width: 100%;
  border-radius: 8px;
  min-height: 200px;
  text-align: center;
  padding: 10px;
  transition: all 0.3s;
}

.qvplaceholder:hover {
  background-color: #fef3c7;
  border-color: #f59e0b;
  cursor: move;
}

/* ====== HEXÁGONO (shape obras) ====== */
.obra-shape {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  transition: transform 0.3s ease;
}

.obra-container:hover .obra-shape {
  transform: scale(1.05);
}

/* ====== RESPONSIVIDADE ====== */

/* Mobile: ajuste filtro-row */
@media (max-width: 640px) {
  .filtro-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .filtro-row .filtro-divider {
    display: none;
  }

  .filtro-row .filtro-label {
    font-size: 11px;
  }

  /* Tabela scroll horizontal */
  .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Tablet & abaixo */
@media (max-width: 768px) {
  .section-title::after {
    width: 40px;
    height: 3px;
  }
}

/* ====== SCROLLBAR CUSTOM ====== */
.table-wrapper::-webkit-scrollbar {
  height: 6px;
}

.table-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.table-wrapper::-webkit-scrollbar-thumb {
  background: #d97706;
  border-radius: 3px;
}

.table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #92400e;
}