/* ============================================================
   VibraBigQuery — Urban Data Pipeline
   PR #46 · VibraWorld Intelligence Layer
   ============================================================ */

/* Panel */
#vbq-panel {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #06040f;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#vbq-panel.vbq-open { display: block; }

/* Header */
.vbq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem 0.75rem;
  border-bottom: 1px solid rgba(138,87,255,.2);
  position: sticky;
  top: 0;
  background: #06040f;
  z-index: 10;
}
.vbq-header-left { display: flex; flex-direction: column; gap: 2px; }
.vbq-title {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 800;
  color: #f0ebff;
  letter-spacing: -.01em;
}
.vbq-subtitle {
  font-family: var(--mono);
  font-size: .6rem;
  color: rgba(240,235,255,.4);
  letter-spacing: .06em;
}
.vbq-close-btn {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(240,235,255,.7);
  cursor: pointer;
  font-size: 1rem;
}

/* Status Bar */
.vbq-status-bar {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  background: rgba(0,212,100,.06);
  border-bottom: 1px solid rgba(0,212,100,.15);
  font-family: var(--mono);
  font-size: .6rem;
  color: rgba(240,235,255,.6);
}
.vbq-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00d464;
  box-shadow: 0 0 6px #00d464;
  animation: vbqPulse 2s ease-in-out infinite;
}
.vbq-status-dot.paused { background: #ffc400; box-shadow: 0 0 6px #ffc400; animation: none; }
.vbq-status-dot.error  { background: #ff4d6d; box-shadow: 0 0 6px #ff4d6d; animation: none; }
@keyframes vbqPulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .4; }
}
.vbq-status-text { flex: 1; }
.vbq-status-badge {
  padding: .2rem .5rem;
  border-radius: 20px;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .06em;
}
.vbq-status-badge.live { background: rgba(0,212,100,.15); color: #00d464; border: 1px solid rgba(0,212,100,.3); }
.vbq-status-badge.paused { background: rgba(255,196,0,.15); color: #ffc400; border: 1px solid rgba(255,196,0,.3); }

/* Tabs */
.vbq-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid rgba(138,87,255,.15);
  overflow-x: auto;
  scrollbar-width: none;
}
.vbq-tabs::-webkit-scrollbar { display: none; }
.vbq-tab {
  flex: 0 0 auto;
  padding: .65rem .9rem;
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .06em;
  color: rgba(240,235,255,.4);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.vbq-tab.active {
  color: #8a57ff;
  border-bottom-color: #8a57ff;
}

/* Tab Content */
.vbq-tab-content { display: none; padding: 1rem; }
.vbq-tab-content.active { display: block; }

/* KPI Cards */
.vbq-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-bottom: 1rem;
}
.vbq-kpi {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  padding: .85rem .75rem;
}
.vbq-kpi-val {
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 800;
  color: #f0ebff;
  line-height: 1;
}
.vbq-kpi-label {
  font-family: var(--mono);
  font-size: .55rem;
  color: rgba(240,235,255,.4);
  letter-spacing: .06em;
  margin-top: .3rem;
}
.vbq-kpi-trend {
  font-family: var(--mono);
  font-size: .6rem;
  margin-top: .25rem;
}
.vbq-kpi-trend.up   { color: #00d464; }
.vbq-kpi-trend.down { color: #ff4d6d; }

/* Pipeline Flow */
.vbq-pipeline {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(138,87,255,.15);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem;
}
.vbq-pipeline-title {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  color: rgba(240,235,255,.4);
  margin-bottom: .75rem;
}
.vbq-flow {
  display: flex;
  align-items: center;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .25rem;
  scrollbar-width: none;
}
.vbq-flow::-webkit-scrollbar { display: none; }
.vbq-flow-node {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
}
.vbq-flow-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  border: 1px solid rgba(255,255,255,.1);
}
.vbq-flow-icon.signals    { background: rgba(138,87,255,.15); border-color: rgba(138,87,255,.3); }
.vbq-flow-icon.buffer     { background: rgba(0,212,255,.15);  border-color: rgba(0,212,255,.3); }
.vbq-flow-icon.firestore  { background: rgba(255,196,0,.15);  border-color: rgba(255,196,0,.3); }
.vbq-flow-icon.functions  { background: rgba(255,100,100,.15);border-color: rgba(255,100,100,.3); }
.vbq-flow-icon.bigquery   { background: rgba(0,212,100,.15);  border-color: rgba(0,212,100,.3); }
.vbq-flow-label {
  font-family: var(--mono);
  font-size: .5rem;
  color: rgba(240,235,255,.5);
  letter-spacing: .05em;
  text-align: center;
}
.vbq-flow-arrow {
  color: rgba(138,87,255,.6);
  font-size: .9rem;
  flex: 0 0 auto;
}
.vbq-flow-count {
  font-family: var(--mono);
  font-size: .5rem;
  color: #8a57ff;
  font-weight: 700;
}

/* Tables List */
.vbq-tables-list { display: flex; flex-direction: column; gap: .6rem; }
.vbq-table-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s;
}
.vbq-table-card:hover { border-color: rgba(138,87,255,.4); }
.vbq-table-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
}
.vbq-table-left { display: flex; flex-direction: column; gap: 3px; }
.vbq-table-name {
  font-family: var(--mono);
  font-size: .75rem;
  color: #f0ebff;
  font-weight: 600;
}
.vbq-table-desc {
  font-family: var(--mono);
  font-size: .55rem;
  color: rgba(240,235,255,.4);
}
.vbq-table-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.vbq-table-rows {
  font-family: var(--sans);
  font-size: .85rem;
  font-weight: 800;
  color: #8a57ff;
}
.vbq-table-size {
  font-family: var(--mono);
  font-size: .5rem;
  color: rgba(240,235,255,.3);
}
.vbq-schema-preview {
  display: none;
  padding: 0 1rem 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.vbq-schema-preview.open { display: block; }
.vbq-schema-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: .55rem;
}
.vbq-schema-table th {
  text-align: left;
  padding: .3rem .4rem;
  color: rgba(240,235,255,.35);
  letter-spacing: .08em;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.vbq-schema-table td {
  padding: .3rem .4rem;
  color: rgba(240,235,255,.7);
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.vbq-schema-type {
  color: #00d4ff;
  font-size: .5rem;
}
.vbq-schema-mode {
  color: rgba(240,235,255,.35);
  font-size: .48rem;
}

/* Events Log */
.vbq-events-log {
  background: rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  height: 320px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: .55rem;
  padding: .5rem;
}
.vbq-log-entry {
  display: flex;
  gap: .5rem;
  padding: .2rem 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  line-height: 1.4;
}
.vbq-log-time { color: rgba(240,235,255,.3); flex: 0 0 auto; }
.vbq-log-type {
  flex: 0 0 auto;
  padding: .05rem .3rem;
  border-radius: 3px;
  font-size: .5rem;
  font-weight: 700;
}
.vbq-log-type.signal    { background: rgba(138,87,255,.2); color: #8a57ff; }
.vbq-log-type.flush     { background: rgba(0,212,100,.2); color: #00d464; }
.vbq-log-type.error     { background: rgba(255,77,109,.2); color: #ff4d6d; }
.vbq-log-type.batch     { background: rgba(0,212,255,.2); color: #00d4ff; }
.vbq-log-type.export    { background: rgba(255,196,0,.2); color: #ffc400; }
.vbq-log-msg { color: rgba(240,235,255,.6); flex: 1; }

/* Cost Monitor */
.vbq-cost-grid {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.vbq-cost-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: .75rem;
}
.vbq-cost-icon { font-size: 1.2rem; flex: 0 0 auto; }
.vbq-cost-info { flex: 1; }
.vbq-cost-service {
  font-family: var(--mono);
  font-size: .65rem;
  color: #f0ebff;
  font-weight: 600;
}
.vbq-cost-detail {
  font-family: var(--mono);
  font-size: .52rem;
  color: rgba(240,235,255,.4);
  margin-top: 2px;
}
.vbq-cost-val {
  font-family: var(--sans);
  font-size: .9rem;
  font-weight: 800;
  text-align: right;
}
.vbq-cost-val.green { color: #00d464; }
.vbq-cost-val.yellow { color: #ffc400; }
.vbq-cost-val.red { color: #ff4d6d; }

/* Actions */
.vbq-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .75rem;
}
.vbq-btn {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .9rem;
  border-radius: 8px;
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  border: none;
  transition: opacity .15s;
}
.vbq-btn:active { opacity: .7; }
.vbq-btn.primary { background: linear-gradient(135deg,#8a57ff,#5c2fd6); color: #fff; }
.vbq-btn.secondary { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: rgba(240,235,255,.8); }
.vbq-btn.danger { background: rgba(255,77,109,.12); border: 1px solid rgba(255,77,109,.3); color: #ff4d6d; }
.vbq-btn.success { background: rgba(0,212,100,.12); border: 1px solid rgba(0,212,100,.3); color: #00d464; }

/* Section Title */
.vbq-section-title {
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
  color: rgba(240,235,255,.35);
  margin-bottom: .6rem;
}

/* Progress Bar */
.vbq-progress-wrap {
  background: rgba(255,255,255,.06);
  border-radius: 4px;
  height: 4px;
  overflow: hidden;
  margin-top: .4rem;
}
.vbq-progress-bar {
  height: 100%;
  background: linear-gradient(90deg,#8a57ff,#00d4ff);
  border-radius: 4px;
  transition: width .5s ease;
}

/* Query Editor */
.vbq-query-wrap {
  background: rgba(0,0,0,.5);
  border: 1px solid rgba(138,87,255,.2);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: .75rem;
}
.vbq-query-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .5rem .75rem;
  background: rgba(138,87,255,.08);
  border-bottom: 1px solid rgba(138,87,255,.15);
  font-family: var(--mono);
  font-size: .55rem;
  color: rgba(240,235,255,.5);
}
.vbq-query-textarea {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  color: #00d4ff;
  font-family: var(--mono);
  font-size: .6rem;
  padding: .75rem;
  resize: vertical;
  min-height: 80px;
  box-sizing: border-box;
}
.vbq-query-result {
  background: rgba(0,212,100,.05);
  border: 1px solid rgba(0,212,100,.15);
  border-radius: 8px;
  padding: .75rem;
  font-family: var(--mono);
  font-size: .55rem;
  color: rgba(240,235,255,.7);
  min-height: 60px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Municipal Export */
.vbq-export-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,196,0,.15);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: .75rem;
}
.vbq-export-title {
  font-family: var(--mono);
  font-size: .65rem;
  color: #ffc400;
  font-weight: 700;
  margin-bottom: .4rem;
}
.vbq-export-desc {
  font-family: var(--mono);
  font-size: .55rem;
  color: rgba(240,235,255,.5);
  line-height: 1.5;
  margin-bottom: .75rem;
}

/* Responsive */
@media (min-width: 768px) {
  .vbq-kpi-grid { grid-template-columns: repeat(4, 1fr); }
}