/* Layout */
.main-layout {
  display: flex;
  height: calc(100vh - 50px);
  overflow: hidden;
}

.sidebar {
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.panels {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Panels */
.panel {
  padding: var(--space-md);
}

.panel--full {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--space-md);
  overflow: hidden;
}

.panel-title {
  margin: 0 0 var(--space-sm);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.section-title {
  margin: var(--space-sm) 0 var(--space-xs);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Tabs */
.tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-secondary);
  flex-shrink: 0;
}

.tab-btn {
  padding: var(--space-sm) var(--space-md);
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.tab-btn:hover { color: var(--color-text-primary); background: var(--color-bg-panel); }
.tab-btn.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

.tab-panels {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.tab-panel {
  display: none;
  height: 100%;
}
.tab-panel.active { display: flex; }

/* Group Join */
.join-form {
  display: flex;
  gap: var(--space-xs);
}
.join-form input { flex: 1; }

/* History */
.history-list { margin-top: var(--space-sm); }
.history-empty { color: var(--color-text-secondary); font-size: 0.75rem; padding: var(--space-sm) 0; }

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.history-item:hover { background: var(--color-bg-panel); }
.history-item.active { background: var(--color-accent-dim); border-left: 2px solid var(--color-accent); }

.history-info { flex: 1; min-width: 0; }
.history-name { font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.history-actual { font-size: 0.65rem; color: var(--color-text-secondary); display: block; }
.history-time { font-size: 0.65rem; color: rgba(255,255,255,0.35); }
.history-actions { display: flex; gap: 0.15rem; flex-shrink: 0; }

/* Peers */
.peers-container { display: flex; flex-direction: column; gap: var(--space-xs); }

.peer-card {
  padding: var(--space-sm);
  background: var(--color-bg-panel);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}
.peer-card.self { border-color: var(--color-accent); }

.peer-name { font-size: 0.85rem; font-weight: 500; }
.peer-id { font-size: 0.7rem; color: var(--color-text-secondary); font-family: var(--font-mono); }
.peer-caps { display: flex; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.2rem; }

.cap-tag {
  font-size: 0.6rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

.you-tag {
  font-size: 0.65rem;
  color: var(--color-accent);
  font-weight: 400;
}

.leader-tag {
  font-size: 0.6rem;
  color: #f59e0b;
  font-weight: 500;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  background: rgba(245, 158, 11, 0.15);
}

/* State Tree */
.tree-container {
  flex: 1;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: var(--space-sm);
}

.tree-list { padding-left: 1.2rem; }
.tree-container > .tree-list { padding-left: 0; }

.tree-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.15rem 0;
  white-space: nowrap;
}

.tree-toggle {
  width: 14px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  color: var(--color-text-secondary);
}
.tree-toggle::before { content: '\25BE'; /* down arrow */ }
.tree-toggle.collapsed::before { content: '\25B8'; /* right arrow */ }

.tree-spacer { width: 14px; flex-shrink: 0; }

.tree-key { color: var(--color-accent); }
.tree-key::after { content: ':'; color: var(--color-text-secondary); margin-right: var(--space-xs); }

.tree-bracket { color: var(--color-text-secondary); font-size: 0.75rem; }

.tree-value { overflow: hidden; text-overflow: ellipsis; }
.tree-value--str { color: #22c55e; }
.tree-value--str::before, .tree-value--str::after { content: '"'; color: rgba(34,197,94,0.5); }
.tree-value--num { color: #60a5fa; }
.tree-value--bool { color: #f59e0b; }
.tree-value--null { color: #ef4444; font-style: italic; }

.tree-changed {
  background: rgba(139, 92, 246, 0.1);
  border-radius: 3px;
  animation: tree-flash 1.5s ease-out;
}
@keyframes tree-flash {
  0% { background: rgba(139, 92, 246, 0.3); }
  100% { background: transparent; }
}

.state-form {
  display: flex;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.state-input { flex: 1; font-family: var(--font-mono); font-size: 0.8rem; }

/* Log Views (Event Bus + State Messages) */
.log-toolbar {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  padding-bottom: var(--space-sm);
  flex-shrink: 0;
}

.log-filter { flex: 1; font-size: 0.75rem; }

.log-pin {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.log-pin input { accent-color: var(--color-accent); }

.log-entries {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: rgba(0,0,0,0.2);
}

.log-entries--short { max-height: 200px; flex: none; }

.log-row {
  display: flex;
  gap: var(--space-sm);
  padding: 0.2rem var(--space-sm);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: baseline;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.log-row:hover { background: var(--color-bg-panel); }

.log-time { color: rgba(255,255,255,0.35); flex-shrink: 0; }
.log-topic { color: var(--color-accent); flex-shrink: 0; font-weight: 500; }
.log-peer { color: var(--color-text-secondary); flex-shrink: 0; font-size: 0.65rem; }
.log-data {
  color: var(--color-text-secondary);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
}

/* JSON Tree (collapsible inline values) */
.jt-node { cursor: default; }
.jt-toggle {
  display: inline-block;
  width: 1em;
  cursor: pointer;
  user-select: none;
  color: rgba(255,255,255,0.4);
  text-align: center;
}
.jt-collapsed > .jt-toggle::before { content: '\25B6'; font-size: 0.55em; }
.jt-expanded > .jt-toggle::before { content: '\25BC'; font-size: 0.55em; }

.jt-preview { cursor: pointer; }
.jt-preview:hover { color: var(--color-text-primary); }
.jt-bracket { color: rgba(255,255,255,0.4); }

.jt-children {
  padding-left: 1.2em;
  border-left: 1px solid rgba(255,255,255,0.08);
  margin-left: 0.3em;
}
.jt-row { white-space: nowrap; padding: 0.05rem 0; }
.jt-key { color: var(--color-accent); }
.jt-index { color: rgba(255,255,255,0.4); }
.jt-sep { color: rgba(255,255,255,0.3); }
.jt-str { color: #22c55e; }
.jt-num { color: #60a5fa; }
.jt-bool { color: #f59e0b; }
.jt-null { color: #ef4444; font-style: italic; }

.log-local { color: var(--color-success); font-size: 0.65rem; }
.log-retained {
  font-size: 0.55rem;
  background: rgba(234,179,8,0.2);
  color: var(--color-warning);
  padding: 0 0.2rem;
  border-radius: 2px;
}

.state-version {
  color: #60a5fa;
  font-weight: 500;
  flex-shrink: 0;
}

.state-label {
  display: inline-block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.4);
  margin-right: 0.3em;
}

/* Publish form */
.publish-form {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.pub-input { flex: 1; font-family: var(--font-mono); font-size: 0.75rem; }
.pub-input--wide { flex: 2; }

/* Job Pool */
.pool-section { padding: 0 var(--space-md) var(--space-sm); }
.pool-info { padding: 0 var(--space-md); }

.pool-workers { display: flex; flex-direction: column; gap: var(--space-xs); }

.worker-card {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm);
  background: var(--color-bg-panel);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
  font-size: 0.8rem;
}
.worker-id { font-family: var(--font-mono); color: var(--color-accent); }
.worker-stat { color: var(--color-text-secondary); font-size: 0.75rem; }

.job-form {
  display: flex;
  gap: var(--space-xs);
}
.job-ticket {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
}

/* Routes View */
.routes-split {
  display: flex;
  flex: 1;
  min-height: 0;
  gap: 1px;
  background: var(--color-border);
}

.routes-container {
  flex: 1 1 auto;
  overflow-y: auto;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--color-bg-primary);
  padding: var(--space-sm);
  min-width: 0;
}

.routes-split--open .routes-container {
  flex: 0 0 50%;
}

.route-peer {
  margin-bottom: var(--space-md);
}

.route-peer-header {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-xs);
}

.route-peer--self .route-peer-header {
  color: var(--color-accent);
}

.route-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.3rem var(--space-sm);
  border-radius: 3px;
  cursor: pointer;
}
.route-row:hover { background: var(--color-bg-panel); }
.route-row--active { background: var(--color-accent-dim); border-left: 2px solid var(--color-accent); }

.route-pattern {
  color: #22c55e;
}

.route-meta {
  color: var(--color-text-secondary);
  font-size: 0.7rem;
  padding-left: 0.5rem;
}

/* API Explorer */
.route-explorer {
  flex: 0 0 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-bg-primary);
  overflow-y: auto;
}

.explorer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.explorer-title {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #22c55e;
  font-weight: 500;
}

.explorer-url-bar {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  flex-shrink: 0;
}

.explorer-method {
  width: 5.5rem;
  flex-shrink: 0;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
}

.explorer-url {
  flex: 1;
  min-width: 0;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.explorer-url:focus { outline: none; border-color: var(--color-accent); }

.explorer-section {
  padding: 0 var(--space-md) var(--space-sm);
  flex-shrink: 0;
}

.explorer-section-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: var(--space-xs) 0;
  user-select: none;
}

.explorer-headers {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.explorer-header-row {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}
.explorer-hdr-key, .explorer-hdr-val {
  flex: 1;
  padding: 0.2rem var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}
.explorer-hdr-key { max-width: 10rem; }
.explorer-hdr-key:focus, .explorer-hdr-val:focus { outline: none; border-color: var(--color-accent); }
.explorer-hdr-rm { font-size: 1rem; }

.explorer-body {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg-panel);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  resize: vertical;
  min-height: 3rem;
}
.explorer-body:focus { outline: none; border-color: var(--color-accent); }

.explorer-response {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--space-md) var(--space-md);
  min-height: 0;
}

.explorer-resp-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  margin-bottom: var(--space-sm);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
}
.explorer-resp-status--success { background: rgba(34,197,94,0.1); color: var(--color-success); }
.explorer-resp-status--warning { background: rgba(234,179,8,0.1); color: var(--color-warning); }
.explorer-resp-status--danger { background: rgba(239,68,68,0.1); color: var(--color-danger); }

.explorer-resp-transport {
  font-size: 0.65rem;
  font-weight: 500;
  padding: 0.1rem 0.5rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
  color: var(--color-text-secondary);
}
.explorer-resp-transport--local-instance { background: rgba(34,197,94,0.15); color: var(--color-success); }
.explorer-resp-transport--webrtc { background: rgba(139,92,246,0.15); color: var(--color-accent); }
.explorer-resp-transport--server-proxy { background: rgba(234,179,8,0.15); color: var(--color-warning); }

.explorer-resp-time {
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--color-text-secondary);
}

.explorer-resp-body {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  overflow: hidden;
  min-width: 0;
}

.explorer-resp-pre {
  margin: 0;
  padding: var(--space-sm);
  background: rgba(0,0,0,0.2);
  border-radius: var(--border-radius);
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--color-text-secondary);
}

.explorer-resp-image { text-align: center; overflow: hidden; }
.explorer-resp-image img { max-width: 100%; height: auto; object-fit: contain; }

.explorer-resp-meta {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin-top: var(--space-xs);
}

.explorer-resp-binary {
  padding: var(--space-sm);
}