/* bi css v2 */


/* ============================================================
   BI — Tabela Dinâmica estilo Excel
   ============================================================ */

/* Layout geral */
#bi-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);
  background: var(--bg);
  overflow: hidden;
}

#bi-toolbar {
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg, #fff);
  flex-shrink: 0;
}

#bi-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: 0;
}

/* ---- PAINEL DE CAMPOS (esquerda) ---- */
#bi-painel {
  width: 260px;
  min-width: 220px;
  border-right: 1px solid var(--border);
  background: var(--card-bg, #fff);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.bi-painel-section {
  padding: 10px;
  border-bottom: 1px solid var(--border);
}

.bi-painel-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

/* Lista de campos disponíveis */
#bi-campos-lista {
  min-height: 60px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 4px;
}

.bi-campo-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
  cursor: grab;
  user-select: none;
  background: var(--bg, #f9fafb);
  border: 1px solid var(--border);
  margin-bottom: 3px;
  transition: background 0.1s;
}
.bi-campo-item:hover { background: #e0e7ff; border-color: #6366f1; }
.bi-campo-item.dragging { opacity: 0.4; }

.bi-campo-icone {
  font-size: 11px;
  font-weight: 700;
  color: var(--primary, #2563eb);
  width: 14px;
  text-align: center;
}

/* ---- 4 ÁREAS (Filtros/Colunas/Linhas/Valores) ---- */
.bi-painel-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1;
}

.bi-area-box {
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 8px;
  min-height: 90px;
}
.bi-area-box:nth-child(even) { border-right: none; }

.bi-area-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.bi-area-drop {
  min-height: 50px;
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 4px;
  transition: background 0.15s, border-color 0.15s;
}
.bi-area-drop.drag-over {
  background: #eff6ff;
  border-color: var(--primary, #2563eb);
}

.bi-area-hint {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  padding: 8px 4px;
  pointer-events: none;
}

/* Tags nas áreas */
.bi-area-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #dbeafe;
  border: 1px solid #93c5fd;
  color: #1e40af;
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 11px;
  margin: 2px;
  cursor: grab;
  user-select: none;
}
.bi-valor-tag { background: #dcfce7; border-color: #86efac; color: #166534; }

.bi-tag-remove {
  cursor: pointer;
  font-size: 10px;
  opacity: 0.6;
  margin-left: 2px;
}
.bi-tag-remove:hover { opacity: 1; color: #dc2626; }

/* Filtro inline */
.bi-filtro-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 4px;
  padding: 4px;
  background: var(--bg, #f9fafb);
  border-radius: 4px;
  border: 1px solid var(--border);
}

/* ---- RESULTADO (direita) ---- */
#bi-resultado {
  flex: 1;
  overflow: auto;
  background: var(--bg, #f9fafb);
}

#bi-pivot-container {
  padding: 12px;
  min-width: 400px;
}

/* ---- TABELA DINÂMICA ---- */
.bi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--card-bg, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  border-radius: 6px;
  overflow: hidden;
}

.bi-table thead th {
  background: #1e40af;
  color: #fff;
  padding: 9px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 10;
  border-right: 1px solid rgba(255,255,255,0.15);
  white-space: nowrap;
}
.bi-table thead th:last-child { border-right: none; }

.bi-table tbody td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  white-space: nowrap;
}
.bi-table tbody tr:hover td { background: #f0f9ff; }

/* Linha de grupo */
.bi-grupo-row td {
  background: #eff6ff;
  border-top: 1px solid #bfdbfe;
}
.bi-grupo-row:hover td { background: #dbeafe !important; }

/* Subtotal */
.bi-subtotal td {
  background: #f8fafc;
  font-style: italic;
  color: var(--text-muted);
  font-size: 12px;
}

/* Total Geral */
.bi-total-geral td {
  background: #1e3a5f;
  color: #fff;
  font-weight: 700;
  border-top: 2px solid #1e40af;
}

/* Toggle +/- */
.bi-toggle {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 14px;
  text-align: center;
  border: 1px solid #93c5fd;
  border-radius: 3px;
  background: #dbeafe;
  color: #1e40af;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
  margin-right: 6px;
  flex-shrink: 0;
}
.bi-toggle:hover { background: #bfdbfe; }