/*
 * MCP admin view stylesheet (.mcp-* prefix).
 *
 * Spec: .claude/specs/admin-tools-redesign/ Phase 2 sweep (2026-05-02).
 * Extracted from the JS-injected `<style>` block in pwa/views/mcp.js
 * (string array at lines ~22-58, dropped post-extraction). Modifier
 * classes for the row/title/sub variants added to replace inline
 * style="…" attrs (26 sites → 0).
 *
 * Tokens normalized: rgba(255,255,255,N) overlay tints → color-mix(in
 * srgb, var(--color-on-surface) Nx100%, transparent); rgba(0,0,0,N) →
 * color-mix(in srgb, var(--color-on-surface-inverse, black) Nx100%,
 * transparent); #ff7d73 (danger fill) → var(--color-error).
 */

.mcp-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.mcp-header {
  padding: 16px 16px 0;
  flex-shrink: 0;
}
.mcp-top {
  display: flex;
  align-items: center;
  gap: var(--space-snug);
  margin-bottom: var(--space-sm);
}
.mcp-back,
.mcp-refresh {
  background: none;
  border: none;
  color: var(--color-on-surface, var(--text));
  font-size: 20px;
  cursor: pointer;
  padding: var(--space-xs);
}
.mcp-tabs-host { margin-bottom: var(--space-snug); }
.mcp-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 40px;
}
.mcp-card {
  background: var(--color-surface-container, var(--bg2));
  border-radius: var(--radius-roomy);
  padding: var(--space-roomy);
  margin-bottom: var(--space-sm);
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.mcp-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-on-surface, var(--text));
}
.mcp-sub {
  font-size: 12px;
  color: var(--color-on-surface-variant, var(--hint));
  margin-top: var(--space-xs);
}
.mcp-row { flex-wrap: wrap; }
.mcp-search {
  display: flex;
  gap: var(--space-base);
  margin-bottom: var(--space-sm);
}
.mcp-search input,
.mcp-search select {
  flex: 1;
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface, var(--text));
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  border-radius: var(--radius-snug);
  padding: 10px 12px;
  font-size: 14px;
}
.mcp-btn {
  border: none;
  border-radius: var(--radius-snug);
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.mcp-btn.primary {
  background: var(--color-primary, var(--btn));
  color: var(--color-on-primary, var(--btn-text));
}
.mcp-btn.secondary {
  background: color-mix(in srgb, var(--color-on-surface) 8%, transparent);
  color: var(--color-on-surface, var(--text));
}
.mcp-btn.danger {
  background: color-mix(in srgb, var(--color-error) 16%, transparent);
  color: var(--color-error);
}
.mcp-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
.mcp-kv {
  font-size: 12px;
  color: var(--color-on-surface-variant, var(--hint));
  margin-top: var(--space-base);
  line-height: 1.5;
}
.mcp-kv strong { color: var(--color-on-surface, var(--text)); }
.mcp-tools {
  margin-top: var(--space-snug);
  padding-top: var(--space-snug);
  border-top: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.mcp-tool {
  font-size: 12px;
  color: var(--color-on-surface-variant, var(--hint));
  margin-bottom: var(--space-tight);
}
.mcp-tool-row {
  padding: 8px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.mcp-tool-row:last-child { border-bottom: none; }

/* REG-09 collapsible section grouping (review-tools 2026-05-09).
   Used when a server has more than 10 tools — sections derived
   client-side from the prefix-before-first-underscore. */
.mcp-section {
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
  border-radius: 8px;
  padding: 0;
  margin-bottom: var(--space-tight);
}
.mcp-section[open] {
  background: color-mix(in srgb, var(--color-surface) 50%, transparent);
}
.mcp-section-summary {
  display: flex;
  align-items: center;
  gap: var(--space-tight);
  flex-wrap: wrap;
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13px;
  list-style: none;
}
.mcp-section-summary::-webkit-details-marker { display: none; }
.mcp-section-summary::before {
  content: '▸';
  font-size: 10px;
  margin-right: 4px;
  transition: transform 120ms ease;
}
.mcp-section[open] .mcp-section-summary::before {
  transform: rotate(90deg);
}
.mcp-section-count {
  font-size: 11px;
  color: var(--color-on-surface-variant, var(--hint));
  margin-left: 4px;
}
.mcp-section-pill {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 8px;
  font-weight: 500;
}
.mcp-section-pill--green { background: color-mix(in srgb, var(--color-tertiary, #34c759) 15%, transparent); color: var(--color-tertiary, #34c759); }
.mcp-section-pill--orange { background: color-mix(in srgb, var(--color-warning, #ffb84d) 15%, transparent); color: var(--color-warning, #ffb84d); }
.mcp-section-pill--red { background: color-mix(in srgb, var(--color-error, #ff4d4f) 15%, transparent); color: var(--color-error, #ff4d4f); }
.mcp-section-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 10px;
}
.mcp-section-bulk:empty { display: none; }
.mcp-section-tools {
  padding: 0 12px 8px;
}
.mcp-tool-head {
  display: flex;
  align-items: center;
  gap: var(--space-tight);
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--color-on-surface, var(--text));
}
.mcp-tool-desc {
  font-size: 12px;
  color: var(--color-on-surface-variant, var(--hint));
  margin-top: var(--space-hairline);
}
.mcp-tool-meta {
  font-size: 11px;
  color: var(--color-on-surface-variant, var(--hint));
  margin-top: var(--space-xs);
}
.mcp-tool-actions { margin-top: var(--space-tight); }
.mcp-tool-actions .mcp-btn {
  padding: 4px 10px;
  font-size: 11px;
}
.mcp-approval {
  display: flex;
  justify-content: space-between;
  gap: var(--space-snug);
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-on-surface) 6%, transparent);
}
.mcp-modal-backdrop {
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--color-on-surface-inverse, black) 62%, transparent);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--space-gutter);
  z-index: 40;
}
.mcp-modal {
  width: min(720px, 100%);
  max-height: 85vh;
  overflow: auto;
  background: var(--color-surface, var(--bg));
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 8%, transparent);
  border-radius: 18px;
  padding: 16px 16px 18px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--color-on-surface-inverse, black) 35%, transparent);
}
.mcp-form-group { margin-top: var(--space-sm); }
.mcp-form-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-on-surface-variant, var(--hint));
  margin-bottom: var(--space-tight);
}
.mcp-form-input,
.mcp-form-textarea {
  width: 100%;
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface, var(--text));
  border: 1px solid color-mix(in srgb, var(--color-on-surface) 10%, transparent);
  border-radius: var(--radius-snug);
  padding: 10px 12px;
  font-size: 14px;
  box-sizing: border-box;
}
.mcp-form-textarea { min-height: 86px; resize: vertical; }
.mcp-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-base);
  margin-top: var(--space-gutter);
  flex-wrap: wrap;
}

/* Phase 2 — modifier classes replacing inline style="…" attrs. */
.mcp-marketplace-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-on-surface, var(--text));
}
.mcp-spacer-flex { flex: 1; }
.mcp-empty-fallback {
  padding: 30px;
  text-align: center;
  color: var(--color-on-surface-variant, var(--hint));
}
.mcp-empty-fallback--error {
  color: var(--color-error);
}
.mcp-row--justify-between { justify-content: space-between; align-items: flex-start; }
.mcp-row--justify-end     { justify-content: flex-end; }
.mcp-row--mt-6            { margin-top: var(--space-tight); }
.mcp-row--mt-10           { margin-top: var(--space-snug); }
.mcp-row--mt-12           { margin-top: var(--space-sm); }
.mcp-kv--mt-14            { margin-top: var(--space-roomy); }
.mcp-sub--mb-12           { margin-bottom: var(--space-sm); }
.mcp-title--sm            { font-size: 14px; }
.mcp-title--mb-8          { margin-bottom: var(--space-base); }

/* Fallback tab buttons (only used when mountTabStrip primitive absent). */
.mcp-tab-fallback {
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-lg);
  margin-right: var(--space-tight);
  background: var(--color-surface-container, var(--bg2));
  color: var(--color-on-surface-variant, var(--hint));
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.mcp-tab-fallback.active {
  background: var(--color-primary, var(--btn));
  color: var(--color-on-primary, var(--btn-text));
}