/* ============================================================
   BI PAINÉIS — Tabs + widgets de saved query
   ============================================================ */

.bi-tabs {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin: 16px 0 20px;
  background: var(--surface-subtle, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 10px;
  width: fit-content;
}

.bi-tab-mode {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, rgba(255,255,255,0.65));
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  transition: all 140ms ease;
  letter-spacing: -0.01em;
}

.bi-tab-mode:hover {
  color: var(--text-primary, rgba(255,255,255,0.95));
  background: var(--surface-hover, rgba(255,255,255,0.05));
}

.bi-tab-mode.active {
  color: var(--text-primary, #fff);
  background: var(--surface, rgba(255,255,255,0.08));
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.05);
}

.bi-tab-mode svg { opacity: 0.85; }

.bi-paineis-body {
  min-height: 320px;
}

/* ─── Widget de saved query ───────────────────────────── */

.bi-panel-desc {
  font-size: 11.5px;
  color: var(--text-tertiary, rgba(255,255,255,0.5));
  margin: -4px 0 10px;
  line-height: 1.45;
  letter-spacing: -0.005em;
}

.bi-panel-foot {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-tertiary, rgba(255,255,255,0.45));
  letter-spacing: -0.005em;
}

/* Bar chart mini */
.bi-panel-bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bi-panel-bar-row {
  display: grid;
  grid-template-columns: minmax(60px, 32%) 1fr auto;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.bi-panel-bar-label {
  color: var(--text-secondary, rgba(255,255,255,0.75));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.bi-panel-bar-track {
  height: 8px;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.bi-panel-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.bi-panel-bar-value {
  color: var(--text-primary, rgba(255,255,255,0.95));
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: 11.5px;
}

/* Mini table */
.bi-panel-table-wrap {
  overflow-x: auto;
  border-radius: 6px;
  border: 1px solid var(--border, rgba(255,255,255,0.06));
}
.bi-panel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.bi-panel-table th,
.bi-panel-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border, rgba(255,255,255,0.05));
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bi-panel-table th {
  font-weight: 600;
  color: var(--text-tertiary, rgba(255,255,255,0.55));
  background: rgba(255,255,255,0.02);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 10.5px;
}
.bi-panel-table td {
  color: var(--text-primary, rgba(255,255,255,0.88));
  font-variant-numeric: tabular-nums;
}
.bi-panel-table tr:last-child td { border-bottom: 0; }

/* Toolbar + err */
.bi-panel-toolbar {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 10px;
  opacity: 0.55;
  transition: opacity 160ms ease;
}
.kanban-card:hover .bi-panel-toolbar { opacity: 1; }
.bi-panel-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  border-radius: 5px;
  color: var(--text-secondary, rgba(255,255,255,0.7));
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 120ms ease;
}
.bi-panel-btn:hover {
  background: var(--surface-hover, rgba(255,255,255,0.06));
  color: var(--text-primary, #fff);
  border-color: rgba(255,255,255,0.14);
}

.bi-panel-err {
  padding: 14px;
  border-radius: 6px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: rgba(255, 180, 180, 0.95);
  font-size: 12px;
  line-height: 1.45;
}
.bi-panel-err strong { display: block; margin-bottom: 4px; color: rgba(255, 220, 220, 1); }
.bi-panel-err div { margin-bottom: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; word-break: break-word; }

/* Empty state */
.bi-paineis-empty {
  padding: 64px 24px;
  text-align: center;
  border: 1px dashed var(--border, rgba(255,255,255,0.1));
  border-radius: 12px;
  background: var(--surface-subtle, rgba(255,255,255,0.02));
}
.bi-paineis-empty-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.8; }
.bi-paineis-empty h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, rgba(255,255,255,0.95));
  letter-spacing: -0.01em;
}
.bi-paineis-empty p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary, rgba(255,255,255,0.6));
  max-width: 420px;
  margin-inline: auto;
  line-height: 1.5;
}