/* Minimal custom layer on top of Tailwind CDN utilities.
   Only covers: web font, JS-driven state toggles, and dynamically
   generated status/source pill colors that app.js assembles by string
   concatenation (e.g. `status-pill status-${status}`). */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ---------- State toggles driven by classList.add/remove('active') ---------- */

.view {
  display: none;
}

.view.active {
  display: flex;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}

.nav-item.active {
  background: #1a2432;
  color: #ffffff;
}

.nav-item.active::before {
  background: #5fe3a6;
  box-shadow: 0 0 0 3px rgba(95, 227, 166, 0.18);
}

.tab.active {
  border-bottom-color: #2952e3;
  color: #1c3aa8;
  font-weight: 600;
}

.api-table tbody tr.selected {
  background: #e8edfd;
  box-shadow: inset 3px 0 0 #2952e3;
}

body.execution-locked button:disabled,
body.execution-locked input:disabled,
body.execution-locked select:disabled,
body.execution-locked textarea:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

body.execution-locked .api-table tbody tr,
body.execution-locked .nav-item,
body.execution-locked .tab,
body.execution-locked .log-item-btn {
  cursor: not-allowed;
}

/* ---------- Status / source pills (class built dynamically in app.js) ---------- */

.status-pill,
.source-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 72px;
  padding: 3px 9px 3px 8px;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* .status-pill::before, */
/* .source-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: currentColor;
} */

.status-OK {
  background: #e4f5ec;
  color: #157a4a;
}

.status-WARNING {
  background: #fbf0dd;
  color: #b3690a;
}

.status-EMPTY {
  background: #fbf0dd;
  color: #b3690a;
}

.status-FAILED {
  background: #fbe7e5;
  color: #c22a1f;
}

.status-MISSING_BASELINE {
  background: #ece8fb;
  color: #6248d6;
}

.status-IGNORED {
  background: #eceef1;
  color: #74808f;
}

.source-pill {
  min-width: 58px;
  background: #eceef1;
  color: #4b5666;
}

.source-custom {
  background: #e8edfd;
  color: #1c3aa8;
}

.source-apidog {
  background: #ece8fb;
  color: #6248d6;
}

.source-md {
  background: #e4f5ec;
  color: #157a4a;
}

.source-none {
  background: #f5f7fb;
  color: #8894a3;
}

/* ---------- Key/value definition lists built by app.js ---------- */

.kv dt {
  color: #5b6b80;
  font-size: 12.5px;
}

.kv dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: 'IBM Plex Mono', Consolas, monospace;
  font-size: 12.5px;
}

.log-item-btn.selected {
  background: #e8edfd !important;
  border-color: #2952e3 !important;
  box-shadow: inset 3px 0 0 #2952e3;
}

/* ---------- Trend pills (Test view, class built dynamically in app.js) ---------- */

.trend-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: 'IBM Plex Mono', Consolas, monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.trend-stable {
  background: #e4f5ec;
  color: #157a4a;
}

.trend-fixed {
  background: #e4f5ec;
  color: #157a4a;
}

.trend-baselineJustSet_pass {
  background: #e4f5ec;
  color: #157a4a;
}

.trend-regressed {
  background: #fbe7e5;
  color: #c22a1f;
}

.trend-baselineJustSet_fail {
  background: #fbe7e5;
  color: #c22a1f;
}

.trend-stillFailing {
  background: #fbf0dd;
  color: #b3690a;
}

.trend-new {
  background: #ece8fb;
  color: #6248d6;
}

.trend-stillNoBaseline {
  background: #ece8fb;
  color: #6248d6;
}

.trend-removed {
  background: #eceef1;
  color: #74808f;
}