/* ============================================================
   Webhook Inspector — dark theme stylesheet
   ============================================================ */

:root {
  --bg: #0d0d0f;
  --bg2: #141418;
  --bg3: #1c1c22;
  --bg4: #26262e;
  --border: #2e2e38;
  --text: #e2e2e8;
  --text-muted: #7c7c8a;
  --accent: #7b68ee;
  --accent-dim: #3d3470;
  --green: #4ade80;
  --red: #f87171;
  --amber: #fbbf24;
  --blue: #60a5fa;
  --font-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", ui-monospace, monospace;
  --radius: 6px;
  --radius-sm: 3px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; }

/* ---- Header ---- */
.app-header {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 20px; background: var(--bg2);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.header-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.app-logo { font-size: 20px; }
.app-name { font-weight: 700; font-size: 15px; letter-spacing: -0.3px; }
.capture-url-bar { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.capture-label { color: var(--text-muted); font-size: 12px; flex-shrink: 0; }
.capture-url { font-family: var(--font-mono); font-size: 13px; color: var(--accent); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Main layout ---- */
.app-main { height: calc(100vh - 53px); overflow: hidden; }
.dashboard { display: flex; flex-direction: column; height: 100%; }
.toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--bg2); border-bottom: 1px solid var(--border); gap: 8px; }
.toolbar-actions { display: flex; gap: 8px; }
.pane-container { display: flex; flex: 1; overflow: hidden; }

/* ---- List pane ---- */
.list-pane { width: 320px; flex-shrink: 0; border-right: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.list-header { padding: 10px 14px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border); background: var(--bg2); }
.list-count { background: var(--bg4); color: var(--text-muted); border-radius: 999px; padding: 1px 8px; font-size: 11px; }
#request-list { flex: 1; overflow-y: auto; }

/* ---- Request list item ---- */
.request-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--border); transition: background 0.1s; }
.request-item:hover { background: var(--bg3); }
.request-item.active { background: var(--accent-dim); border-left: 2px solid var(--accent); }
.req-row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.req-path { font-family: var(--font-mono); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.req-row2 { display: flex; gap: 8px; font-size: 11px; color: var(--text-muted); }
.req-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }
.req-time { margin-left: auto; flex-shrink: 0; }

/* ---- Method badges ---- */
.method-badge { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-sm); letter-spacing: 0.03em; flex-shrink: 0; }
.method-get    { background: #1a3a1a; color: var(--green); }
.method-post   { background: #1a2a3a; color: var(--blue); }
.method-put    { background: #2a2a1a; color: var(--amber); }
.method-patch  { background: #2a1a2a; color: #c084fc; }
.method-delete { background: #3a1a1a; color: var(--red); }
.method-other  { background: var(--bg4); color: var(--text-muted); }

/* ---- Detail pane ---- */
.detail-pane { flex: 1; overflow-y: auto; }
.detail-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; gap: 12px; color: var(--text-muted); }
.detail-empty-icon { font-size: 32px; }
.detail-inner { padding: 16px; }
.detail-toolbar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.detail-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.detail-path { font-family: var(--font-mono); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.detail-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ---- Tabs ---- */
.detail-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.tab-btn { background: none; border: none; color: var(--text-muted); font-size: 13px; padding: 8px 14px; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.1s; }
.tab-btn:hover { color: var(--text); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--radius); border: 1px solid var(--border); cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.1s; background: var(--bg3); color: var(--text); }
.btn:hover { background: var(--bg4); }
.btn-copy { @extend .btn; font-size: 12px; padding: 4px 10px; }
.btn-copy { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); cursor: pointer; font-size: 12px; padding: 4px 10px; }
.btn-copy:hover { background: var(--bg4); }
.btn-danger { background: #2a1212; border-color: #5a2020; color: var(--red); }
.btn-danger:hover { background: #3a1616; }
.btn-secondary { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.btn-secondary:hover { background: var(--accent); color: white; }
.btn-sm { font-size: 12px; padding: 3px 8px; }
.btn-sm.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

/* ---- KV table ---- */
.kv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.kv-table th, .kv-table td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.kv-table th { color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.kv-table .kv-key { font-family: var(--font-mono); color: var(--accent); white-space: nowrap; width: 200px; }
.kv-table .kv-val { font-family: var(--font-mono); word-break: break-all; }
.empty-kv { color: var(--text-muted); padding: 16px 0; }

/* ---- Body view ---- */
.body-toolbar { display: flex; gap: 4px; margin-bottom: 10px; }
.body-raw { font-family: var(--font-mono); font-size: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; overflow-x: auto; white-space: pre-wrap; word-break: break-all; max-height: 600px; overflow-y: auto; }
.json-tree-container { font-family: var(--font-mono); font-size: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; overflow: auto; max-height: 600px; }
.json-node { padding-left: 16px; }
.json-key { color: var(--accent); }
.json-string { color: var(--green); }
.json-number { color: var(--amber); }
.json-boolean { color: var(--blue); }
.json-null { color: var(--text-muted); }
.json-toggle { cursor: pointer; user-select: none; }
.json-toggle::before { content: "▼ "; font-size: 10px; color: var(--text-muted); }
.json-toggle.collapsed::before { content: "▶ "; }
.json-collapsed-hint { color: var(--text-muted); }
.hidden { display: none !important; }

/* ---- Stats ---- */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin-bottom: 16px; }
.stat-card { background: var(--bg3); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; }
.stat-val { font-size: 22px; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 11px; color: var(--text-muted); margin-top: 4px; }
.top-keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 16px; }
.key-chip { background: var(--bg4); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px 6px; font-size: 12px; color: var(--accent); }
.schema-outline { font-family: var(--font-mono); font-size: 12px; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; overflow-x: auto; max-height: 300px; overflow-y: auto; white-space: pre; }
h4 { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 0 8px; }

/* ---- Diff ---- */
.diff-summary { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.diff-pill { font-size: 12px; padding: 3px 10px; border-radius: 999px; font-weight: 600; }
.diff-pill.added { background: #0a2a0a; color: var(--green); border: 1px solid #1a5a1a; }
.diff-pill.removed { background: #2a0a0a; color: var(--red); border: 1px solid #5a1a1a; }
.diff-pill.changed { background: #2a1e0a; color: var(--amber); border: 1px solid #5a3e0a; }
.diff-pill.unchanged { background: var(--bg3); color: var(--text-muted); border: 1px solid var(--border); }
.diff-table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-mono); }
.diff-table th, .diff-table td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; word-break: break-all; }
.diff-table th { color: var(--text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; font-family: system-ui; }
.diff-added td { background: #080f08; }
.diff-removed td { background: #0f0808; }
.diff-changed td { background: #0f0e08; }
.diff-badge { border-radius: var(--radius-sm); padding: 2px 6px; font-size: 10px; white-space: nowrap; font-family: system-ui; font-weight: 600; }
.diff-badge.added { background: #1a5a1a; color: var(--green); }
.diff-badge.removed { background: #5a1a1a; color: var(--red); }
.diff-badge.changed { background: #5a3e1a; color: var(--amber); }
.diff-no-ref, .diff-identical { color: var(--text-muted); padding: 24px 0; text-align: center; }
.diff-identical { color: var(--green); }

/* ---- Reference indicator ---- */
.ref-indicator { font-size: 12px; color: var(--text-muted); }
.ref-indicator.active { color: var(--text); }
.ref-indicator.active strong { color: var(--accent); }

/* ---- Empty / loading ---- */
.empty-state { padding: 32px; text-align: center; color: var(--text-muted); line-height: 2; }
.loading { color: var(--text-muted); font-size: 13px; }