/* ── Metrics page ── */

/* ── Filter grid ── */
.metrics-filters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 991px) { .metrics-filters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .metrics-filters { grid-template-columns: 1fr; } }

.filter-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.filter-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.filter-group label {
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8;
}

.filter-counter {
  font-size: .7rem;
  font-weight: 600;
  color: #818cf8;
  white-space: nowrap;
}

/* ── Trigger button (replaces native select) ── */
.filter-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  color: #e2e8f0;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .15s;
}
.filter-trigger:hover,
.filter-group.open .filter-trigger { border-color: #818cf8; }

.filter-trigger-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #94a3b8;
}
.filter-trigger-text.has-selection { color: #e2e8f0; }

.filter-trigger-arrow {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #64748b;
  transition: transform .2s;
}
.filter-group.open .filter-trigger-arrow { transform: rotate(180deg); }

/* ── Dropdown panel ── */
.filter-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  margin-top: 4px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.5);
  padding: 8px;
  max-height: 280px;
  overflow: hidden;
  display: none;
  flex-direction: column;
}
.filter-group.open .filter-dropdown { display: flex; }

/* search inside dropdown */
.filter-search {
  font-size: .8rem;
  padding: 6px 10px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #f8fafc;
  width: 100%;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.filter-search::placeholder { color: #64748b; }
.filter-search:focus { outline: none; border-color: #818cf8; }

/* actions row */
.filter-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-shrink: 0;
}
.filter-actions button {
  font-size: .72rem;
  padding: 3px 10px;
  border: 1px solid #334155;
  border-radius: 5px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.filter-actions button:hover { border-color: #818cf8; color: #e2e8f0; }

/* checkbox list */
.filter-options {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.filter-options::-webkit-scrollbar { width: 5px; }
.filter-options::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: .82rem;
  color: #cbd5e1;
  transition: background .12s;
  user-select: none;
}
.filter-option:hover { background: rgba(129,140,248,.1); }
.filter-option.hidden { display: none; }

.filter-option input[type="checkbox"] {
  accent-color: #818cf8;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}
.filter-option span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Selected chips (shown in trigger) ── */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
  overflow: hidden;
  max-height: 52px;
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: rgba(129,140,248,.18);
  border: 1px solid rgba(129,140,248,.3);
  border-radius: 5px;
  font-size: .72rem;
  font-weight: 600;
  color: #c7d2fe;
  white-space: nowrap;
}
.filter-chip-remove {
  cursor: pointer;
  font-size: .8rem;
  color: #94a3b8;
  line-height: 1;
  margin-left: 2px;
}
.filter-chip-remove:hover { color: #f87171; }

/* hidden native select for buildPayload compatibility */
.filter-select { display: none; }

/* ── Time controls ── */
.time-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.time-controls .form-group { display: flex; flex-direction: column; }
.time-controls .form-group label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8;
  margin-bottom: 4px;
}
.time-input {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 6px;
  color: #f8fafc;
  padding: 6px 10px;
  font-size: .85rem;
  width: 180px;
}
.time-input:focus { outline: none; border-color: #818cf8; }

.time-presets { display: flex; gap: 6px; align-items: center; }
.time-presets button {
  font-size: .78rem;
  padding: 5px 10px;
  border: 1px solid #334155;
  border-radius: 6px;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
}
.time-presets button:hover { border-color: #818cf8; color: #e2e8f0; }

/* ── Run button ── */
.btn-run {
  padding: 8px 24px;
  font-weight: 700;
  font-size: .9rem;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #818cf8, #22d3ee);
  color: #020617;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: opacity .2s, transform .15s;
}
.btn-run:hover { opacity: .88; transform: translateY(-1px); }
.btn-run:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ── KPI cards ── */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}
.kpi-card {
  background: rgba(30, 41, 59, .7);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 20px;
  text-align: center;
}
.kpi-card .kpi-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.1;
}
.kpi-card .kpi-label {
  font-size: .82rem;
  color: #94a3b8;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kpi-accent { color: #22d3ee; }
.kpi-success { color: #4ade80; }
.kpi-rate { color: #818cf8; }

/* ── Bar chart ── */
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bar-label {
  width: 160px;
  flex-shrink: 0;
  text-align: right;
  font-size: .82rem;
  font-weight: 600;
  color: #e2e8f0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bar-track {
  flex: 1;
  height: 26px;
  background: rgba(255,255,255,.04);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.bar-fill {
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(90deg, #818cf8, #22d3ee);
  transition: width .5s ease;
  min-width: 2px;
}
.bar-value {
  width: 100px;
  flex-shrink: 0;
  font-size: .8rem;
  color: #94a3b8;
}

/* ── Results table ── */
.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.results-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: .06em;
  color: #94a3b8;
  border-bottom: 2px solid #334155;
}
.results-table td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  color: #e2e8f0;
}
.results-table tr:hover td { background: rgba(129,140,248,.06); }

/* ── NRQL collapsible ── */
.nrql-details { margin-top: 8px; }
.nrql-toggle {
  color: #818cf8;
  font-size: .82rem;
  cursor: pointer;
  font-weight: 600;
  list-style: none;
}
.nrql-toggle::-webkit-details-marker { display: none; }
.nrql-toggle::before { content: "▸ "; }
.nrql-details[open] .nrql-toggle::before { content: "▾ "; }
.nrql-toggle:hover { text-decoration: underline; }
.nrql-block {
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 8px;
  padding: 12px 16px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .78rem;
  color: #e2e8f0;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 8px;
}

/* ── Card wrapper ── */
.m-card {
  background: rgba(30, 41, 59, .7);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 24px;
}
.m-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 16px;
  color: #f8fafc;
}

/* ── Error/empty state ── */
.state-msg {
  padding: 32px;
  text-align: center;
  border-radius: 12px;
}
.state-msg.error { background: rgba(239,68,68,.08); border: 1px solid rgba(239,68,68,.25); color: #fca5a5; }
.state-msg.empty { color: #94a3b8; }

/* ── Spinner ── */
.spinner-wrap {
  display: flex;
  justify-content: center;
  padding: 40px 0;
}
.spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: #818cf8;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Page-level tabs ── */
.metrics-tabs {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #334155;
}
.metrics-tab {
  background: transparent;
  border: none;
  padding: 10px 20px;
  font-size: .88rem;
  font-weight: 600;
  color: #94a3b8;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.metrics-tab:hover { color: #e2e8f0; }
.metrics-tab.active {
  color: #818cf8;
  border-bottom-color: #818cf8;
}

/* ── Logs form ── */
.logs-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.logs-form .form-group { display: flex; flex-direction: column; }
.logs-form .form-group label {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #94a3b8;
  margin-bottom: 4px;
}

.log-inline-error {
  margin-top: 10px;
  font-size: .84rem;
  color: #fca5a5;
}

.log-message-cell {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: .78rem;
  white-space: pre-wrap;
  word-break: break-all;
  max-width: 600px;
}