/* ═══════════════════════════════════════════════════════════════════════════
   capability-manager.css — Working Workspace Skills/MCP (Capabilities)
   control. Ported from Lane A verbatim (System-production) for Corrective
   A6 (Remaining IDE Surfaces, Parts 1-2) — only the .wc-* block (the
   Working Workspace right-sidebar Auto/Custom control) is actually used
   here; the .cm-* Settings-page rules are additive/inert and kept for
   parity with the ported stylesheet rather than hand-trimmed.

   DISCIPLINE
   ----------
   · Every colour is an EXISTING --token, never a literal, so both themes
     are covered without a second ruleset.
   · No chart, no progress bar, no percentage, no new card shape.
   · Nothing here is styled as an alert by default. "0 MCP active" and
     "Not installed" are normal operating truth in this system and stay
     muted.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Shared atoms ───────────────────────────────────────────────────────── */
/* Pill radius/weight matches this app's own .pd-status-badge convention
   (20px pill, 600 weight, tinted background) rather than the flat outlined
   technical-label look Corrective 3 restored — .wc-pill (Working Workspace
   sidebar, deliberately denser/quieter) keeps its original compact shape. */
.cm-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  padding: 3px 9px;
  border-radius: 20px;
  color: var(--text-secondary, var(--text-muted));
  background: var(--bg-hover, var(--bg-overlay));
  white-space: nowrap;
}
.wc-pill {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
  padding: 2px 6px;
  border-radius: var(--r-sm, 4px);
  border: 1px solid var(--border-muted);
  color: var(--text-muted);
  background: var(--bg-overlay);
  white-space: nowrap;
}
.cm-pill-ok    { color: var(--green, #10b981); background: var(--green-dim, rgba(16,185,129,0.12)); }
.cm-pill-warn  { color: var(--amber, #f0a020); background: rgba(240,160,32,0.12); }
.cm-pill-info  { color: var(--accent, #00d4ff); background: rgba(0,212,255,0.12); }
.cm-pill-muted { color: var(--text-faint); }
.wc-pill-ok       { color: var(--green, #10b981); border-color: var(--green, #10b981); }
.wc-pill-warn     { color: var(--amber, #f0a020); border-color: var(--amber, #f0a020); }
.wc-pill-info     { color: var(--accent, #00d4ff); border-color: var(--accent, #00d4ff); }
.wc-pill-muted    { color: var(--text-faint); }

.cm-btn, .wc-btn {
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: var(--r-md, 6px);
  border: 1px solid var(--border-muted);
  background: transparent;
  color: var(--text-secondary, var(--text-primary));
  transition: background var(--t-fast, 0.15s), border-color var(--t-fast, 0.15s), color var(--t-fast, 0.15s);
}
.cm-btn:hover:not(:disabled), .wc-btn:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-accent, var(--border-strong, var(--border-muted)));
  color: var(--text-primary);
}
.cm-btn:disabled, .wc-btn:disabled { opacity: 0.45; cursor: default; }
.cm-btn-primary, .wc-btn-primary {
  background: var(--accent, var(--cyan, #00d4ff));
  border-color: var(--accent, var(--cyan, #00d4ff));
  color: #0a0c10;
  font-weight: 600;
}
.cm-btn-primary:hover:not(:disabled) { background: #33ddff; color: #0a0c10; }
.cm-btn-danger { border-color: var(--amber, #f0a020); color: var(--amber, #f0a020); background: transparent; }
.cm-btn-danger:hover:not(:disabled) { background: rgba(240,160,32,0.12); color: var(--amber, #f0a020); }

.cm-note, .wc-note {
  font-size: 10.5px;
  line-height: 1.55;
  color: var(--text-muted);
  background: var(--bg-overlay);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-sm, 4px);
  padding: 8px 10px;
  overflow-wrap: anywhere;
}
.cm-note-strong { border-color: var(--amber, #f0a020); }

.cm-state, .wc-state {
  font-size: 11px;
  color: var(--text-muted);
  padding: 8px 0;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.cm-state.err, .wc-state.err { color: var(--amber, #f0a020); }

/* AGENCYOS_MCP_AUTH_CONNECTION_IMAGE_API_ACCEPTANCE_CORRECTIVE — concise MCP error card.
   Replaces a bare raw-exception-message dump with: provider, failed action, a human-readable
   reason, an actionable next step, and the raw backend message tucked behind a collapsed
   <details> toggle rather than shown by default. */
.cm-error-card {
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(240, 160, 32, 0.08);
  border: 1px solid rgba(240, 160, 32, 0.35);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
}
.cm-error-card-header { color: var(--text-primary); font-size: 12px; }
.cm-error-card-action { color: var(--text-muted); }
.cm-error-card-reason { font-size: 12px; color: var(--text-primary); }
.cm-error-card-next { font-size: 11px; color: var(--text-muted); }
.cm-error-card-details { margin-top: 4px; }
.cm-error-card-details summary { font-size: 11px; color: var(--cyan, #00d4ff); cursor: pointer; }
.cm-error-card-raw {
  font-size: 11px; color: var(--text-muted); white-space: pre-wrap; overflow-wrap: anywhere;
  margin: 6px 0 0; padding: 8px; background: var(--bg-elevated); border-radius: 4px;
}

/* ── Working Workspace control (mirrors the accepted .ct-* block) ────────── */
.wc-block { display: flex; flex-direction: column; gap: 5px; }
.wc-body { display: flex; flex-direction: column; gap: 6px; }
.wc-body[hidden], .wc-drawer[hidden] { display: none !important; }

.wc-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; width: 100%; text-align: left; cursor: pointer;
  background: var(--bg-overlay);
  border: 1px solid var(--border-muted);
  border-radius: var(--r-sm, 4px);
  padding: 7px 8px;
  color: var(--text-primary);
  font: inherit;
}
.wc-toggle:hover { border-color: var(--border-strong, var(--border-muted)); }
.wc-summary { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.wc-summary-line {
  font-size: 10.5px; font-family: var(--font-mono); color: var(--text-muted); overflow-wrap: anywhere;
}
.wc-caret { font-size: 10px; color: var(--text-faint); flex: 0 0 auto; }

.wc-drawer { display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.wc-moderow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wc-scope { font-size: 9.5px; font-family: var(--font-mono); color: var(--text-faint); overflow-wrap: anywhere; }

.wc-group { display: flex; flex-direction: column; gap: 4px; }
.wc-group-title {
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 700;
}
.wc-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px;
  font-size: 10px; color: var(--text-muted);
}
.wc-item-name { color: var(--text-primary); overflow-wrap: anywhere; min-width: 0; }
.wc-item-reason { font-size: 9.5px; color: var(--text-faint); line-height: 1.45; overflow-wrap: anywhere; flex: 1 1 100%; }
.wc-item-refused .wc-item-name { color: var(--text-muted); }
/* AGENCYOS_REAL_DEPLOYMENT_TARGET_UX_CORRECTIVE — visually distinct from a real DEPLOYED/failed
   result, so a synthetic/simulation outcome never reads the same as either. */
.wc-item-simulated .wc-item-name { color: var(--text-warning, #b58900); }

.wc-check, .cm-check {
  display: inline-flex; align-items: flex-start; gap: 6px;
  font-size: 11px; color: var(--text-muted); cursor: pointer; min-width: 0;
}
.wc-check input, .cm-check input { margin: 2px 0 0; flex: 0 0 auto; }
.wc-check-disabled { opacity: 0.6; cursor: default; }
.wc-check-name { overflow-wrap: anywhere; min-width: 0; }
.wc-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── GLOBAL_SKILLS_MCP_UI_RESTORATION_CORRECTIVE_3 / UI_UX_REFINEMENT_CORRECTIVE_4 ──
   These .cm-* rules back the global, project-independent Skills/MCPs pages
   (capability-pages.js: #skillsPageRoot / #mcpsPageRoot) and the legacy
   Settings→Capabilities manager (capability-manager.js: #capabilityManagerRoot).
   Corrective 4 reconciles the visual language with the app's own existing
   admin-surface convention (.pd-* — Projects dashboard: card radius, pill
   badges, grid, toolbar/summary shell) instead of the raw stacked-list look
   Corrective 3 restored verbatim from Lane A. No new colors — every value
   below is an existing --token or an existing literal already used by
   .pd-*. The .wc-* block above (Working Workspace right-sidebar control)
   is untouched. ────────────────────────────────────────────────────────── */
.cm-root { display: flex; flex-direction: column; gap: 0; margin-top: 0; }
.cm-shell { display: flex; flex-direction: column; gap: var(--space-4, 16px); max-width: 1240px; }

.cm-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.cm-tab {
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 6px 14px;
  border-radius: var(--r-sm, 4px);
  border: 1px solid var(--border-muted);
  background: transparent;
  color: var(--text-muted);
}
.cm-tab.active {
  color: var(--accent, #00d4ff);
  border-color: var(--accent, #00d4ff);
  background: var(--bg-overlay);
}

/* ── Toolbar: search + filters left, primary action right ─────────────── */
.cm-controls {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  padding-bottom: var(--space-3, 12px);
  border-bottom: 1px solid var(--border-subtle, var(--border-muted));
}
.cm-controls .cm-btn-primary { margin-left: auto; }
.cm-input {
  font: inherit;
  font-size: 12px;
  padding: 6px 9px;
  border-radius: var(--r-sm, 4px);
  border: 1px solid var(--border-muted);
  background: var(--bg-overlay);
  color: var(--text-primary);
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.cm-search { flex: 1 1 220px; max-width: 320px; min-width: 180px; }
.cm-select { flex: 0 0 auto; min-width: 140px; }
textarea.cm-input { width: 100%; resize: vertical; font-family: var(--font-mono); font-size: 11.5px; }

/* ── Summary strip: compact real counts only, never fake analytics ────── */
.cm-summary { display: flex; gap: var(--space-6, 24px); flex-wrap: wrap; }
.cm-summary-item { display: flex; flex-direction: column; gap: 2px; min-width: 64px; }
.cm-summary-value { font-size: 20px; font-weight: 600; color: var(--text-primary); line-height: 1.1; }
.cm-summary-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); font-weight: 600; }

.cm-listhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.cm-listhead-count { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }

.cm-empty {
  font-size: 12.5px; color: var(--text-secondary, var(--text-faint));
  padding: 48px 24px; text-align: center;
  border: 1px dashed var(--border, var(--border-muted));
  border-radius: var(--r-lg, 8px);
}
.cm-state-loading { padding: 40px 0; text-align: center; }

/* ── Card grid: good use of desktop width via auto-fill, matching .pd-grid's
   own convention instead of a single narrow stacked column. ─────────────── */
.cm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.cm-grid-mcp { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

.cm-card {
  display: flex; flex-direction: column; gap: 8px;
  border: 1px solid var(--border-subtle, var(--border-muted));
  border-radius: 10px;
  background: var(--bg-overlay);
  padding: var(--card-padding, 16px);
  transition: border-color var(--t-fast, 0.15s);
}
.cm-card:hover { border-color: var(--border-accent, var(--accent, #00d4ff)); }
.cm-card-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px;
}
.cm-card-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cm-card-name { font-size: 13px; color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere; }
.cm-card-id {
  font-size: 10px; font-family: var(--font-mono); color: var(--text-faint);
  overflow-wrap: anywhere;
}
.cm-card-badges { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.cm-card-desc { font-size: 11.5px; color: var(--text-secondary, var(--text-muted)); line-height: 1.5; overflow-wrap: anywhere; }
.cm-card-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; padding-top: 2px; border-top: 1px solid var(--border-subtle, var(--border-muted)); margin-top: 2px; }
.cm-meta-item { font-size: 10px; font-family: var(--font-mono); color: var(--text-faint); overflow-wrap: anywhere; }
.cm-card-sec {
  font-size: 10.5px; color: var(--text-faint); line-height: 1.5;
  border-left: 2px solid var(--border-muted); padding-left: 8px; overflow-wrap: anywhere;
}
.cm-card-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

/* ── MCP grouped state chips (Step 7): each fact is its own labeled group,
   never collapsed into one ambiguous badge. ──────────────────────────── */
.cm-stategrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px 10px;
  background: var(--bg-base, var(--bg-hover, rgba(255,255,255,0.02)));
  border-radius: var(--r-sm, 4px);
  padding: 8px 10px;
}
.cm-stategroup { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cm-stategroup-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); font-weight: 700; }

.cm-conn { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cm-conn-when { font-size: 9px; color: var(--text-faint); font-family: var(--font-mono); }

/* ── Add/Edit as a right-side drawer over a dim overlay (Steps 10/11/13) ─ */
.cm-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  z-index: 480;
  display: flex; justify-content: flex-end;
  align-items: stretch;
}
.cm-drawer {
  width: min(480px, 100vw);
  max-height: 100vh;
  overflow-y: auto;
  border-radius: 0;
  border-left: 1px solid var(--border-accent, var(--border-muted));
  box-shadow: -24px 0 60px rgba(0,0,0,0.4);
  animation: cmDrawerIn 0.16s ease-out;
}
@keyframes cmDrawerIn { from { transform: translateX(16px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

.cm-editor {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--border-muted);
  border-radius: var(--r-lg, 8px);
  background: var(--bg-modal, var(--bg-overlay));
  padding: 20px;
}
.cm-editor-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.cm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.cm-field-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; }
.cm-checkrow { display: flex; gap: 6px 14px; flex-wrap: wrap; }

.cm-authority {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px dashed var(--border-muted);
  border-radius: var(--r-sm, 4px);
  padding: 10px 12px;
}
.cm-authority-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 700; }
.cm-authority-text { font-size: 11px; color: var(--text-muted); line-height: 1.55; overflow-wrap: anywhere; }
.cm-authority-list { display: flex; flex-direction: column; gap: 5px; margin-top: 3px; }
.cm-authority-item { display: flex; flex-direction: column; gap: 1px; }
.cm-authority-op { font-size: 10.5px; color: var(--text-primary); font-family: var(--font-mono); overflow-wrap: anywhere; }
.cm-authority-why { font-size: 10px; color: var(--text-faint); line-height: 1.5; overflow-wrap: anywhere; }

/* ── Responsive (Step 13): tablet — grid drops to one column (cards stay
   readable rather than squeezed to ~260px), toolbar keeps its horizontal
   row and just wraps, since 640-900px still comfortably fits search +
   two selects + Refresh on one or two lines. ───────────────────────── */
@media (max-width: 900px) {
  .cm-grid, .cm-grid-mcp { grid-template-columns: 1fr; }
  .cm-card-top { flex-wrap: wrap; }
}
/* ── Narrow/mobile: toolbar itself stacks, matching the same <=640px
   breakpoint the rest of the app's own mobile-responsive.css uses. ──── */
@media (max-width: 640px) {
  .cm-controls { flex-direction: column; align-items: stretch; }
  .cm-controls .cm-btn-primary { margin-left: 0; }
  .cm-search { max-width: none; }
  .cm-drawer { width: 100vw; }
}
/* Narrow/mobile: nothing may overflow horizontally. */
@media (max-width: 520px) {
  .cm-summary { gap: var(--space-4, 16px); }
  .cm-stategrid { grid-template-columns: repeat(2, 1fr); }
}

/* mobile-responsive.css reserves room for the fixed .mobile-nav-trigger by
   padding .pd-header.page-header / .workspace-header.page-header at
   <=640px — this file's own #viewSkillsPage/#viewMcpsPage .page-header
   predates that convention and was found (Corrective 4 visual QA) sitting
   directly under the trigger, clipping "Skills"/"MCPs". Same fix, scoped
   by id rather than retrofitting the .pd-header class onto markup that
   isn't a flex title/toolbar row like Projects'. */
@media (max-width: 640px) {
  #viewSkillsPage .page-header, #viewMcpsPage .page-header { padding-left: 56px; }
}