/* ==========================================================================
   turnstone console — page-specific styles
   Extends shared base.css with console-only layout and components
   ========================================================================== */

/* ==========================================================================
   Header overrides — wider padding for console layout
   ========================================================================== */
#header { padding: 10px 20px; gap: 16px; }
.header-dim {
  color: var(--fg-dim);
  font-weight: 400;
}
#cluster-summary {
  font-size: 11px;
  color: var(--fg-dim);
  letter-spacing: 0.03em;
}
#theme-toggle { color: var(--fg); }

/* ==========================================================================
   Main content
   ========================================================================== */
#main {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px;
  padding-bottom: 60px;
  max-width: 1140px;
  margin: 0 auto;
  width: 100%;
}

/* ==========================================================================
   Breadcrumb
   ========================================================================== */
.breadcrumb {
  padding: 8px 20px;
  font-size: 11px;
  color: var(--fg-dim);
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}
.breadcrumb a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { margin: 0 8px; color: var(--fg-dim); opacity: 0.5; }

/* ==========================================================================
   Cluster Status Bar — the instrument panel
   Backlit, slightly raised, precision readouts
   ========================================================================== */
#cluster-status-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 44px;
  background: var(--bg-surface);
  border-top: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 12px;
  z-index: 100;
  font-size: 12px;
  /* Subtle top glow — like backlit instruments */
  box-shadow:
    0 -1px 0 var(--border),
    0 -8px 24px -4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
#cluster-status-bar::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-glow-strong), transparent);
  pointer-events: none;
}

.csb-states { display: flex; gap: 2px; align-items: center; }

.csb-state {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
  color: var(--fg-dim);
  font-size: 12px;
  background: none;
  border: 1px solid transparent;
  font: inherit;
  font-family: var(--font-mono);
}
.csb-state:hover {
  background: var(--bg-highlight);
  border-color: var(--border-strong);
  color: var(--fg-bright);
}
.csb-state:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.csb-state.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.csb-state.active .csb-state-count { color: var(--accent); }
.csb-state.active .csb-state-label { color: var(--accent); opacity: 0.8; }

/* State indicator dots — LED effect with glow */
.csb-state-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.csb-state-dot[data-state="running"]   { background: var(--green); border-radius: 2px; box-shadow: 0 0 6px var(--green-glow); }
.csb-state-dot[data-state="thinking"]  { background: var(--cyan); box-shadow: 0 0 6px var(--cyan-glow); }
.csb-state-dot[data-state="attention"] { background: var(--yellow); border-radius: 1px; transform: rotate(45deg); box-shadow: 0 0 6px var(--yellow-glow); }
.csb-state-dot[data-state="idle"]      { background: var(--fg-dim); opacity: 0.5; }
.csb-state-dot[data-state="error"]     { background: var(--red); border-radius: 0; box-shadow: 0 0 6px var(--red-glow); }

.csb-state-count { font-weight: 600; color: var(--fg-bright); font-variant-numeric: tabular-nums; }
.csb-state-count.zero { color: var(--fg-dim); font-weight: 400; opacity: 0.6; }

.csb-state-label {
  color: var(--fg-dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-display);
  font-weight: 500;
}

.csb-divider { width: 1px; height: 22px; background: var(--border-strong); flex-shrink: 0; }

.csb-metrics {
  display: flex;
  gap: 16px;
  align-items: center;
  color: var(--fg-dim);
  font-size: 11px;
  margin-left: auto;
  white-space: nowrap;
}
.csb-metric { display: flex; align-items: center; gap: 5px; }
.csb-metric-value { color: var(--fg-bright); font-weight: 500; font-variant-numeric: tabular-nums; }
.csb-metric-label {
  color: var(--fg-dim);
  font-size: 10px;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

/* MCP indicator dot — LED effect with magenta glow */
.csb-mcp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 4px var(--magenta-glow);
  display: inline-block;
  flex-shrink: 0;
}

.csb-loading { color: var(--fg-dim); font-size: 11px; font-style: italic; opacity: 0.8; }

#cluster-status-bar.stale { border-top-color: var(--yellow); }
#cluster-status-bar.stale::after {
  content: 'STALE';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--yellow);
  letter-spacing: 0.1em;
  background: var(--bg-surface);
  padding: 0 8px;
  line-height: 1;
}

/* ==========================================================================
   Section headers
   ========================================================================== */
.section-header {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.1em;
  margin-bottom: 12px;
  text-transform: uppercase;
}

/* ==========================================================================
   Node table — column headers
   ========================================================================== */
.node-colheaders {
  display: grid;
  grid-template-columns: 1fr 50px 50px 50px 70px 60px 140px;
  padding: 6px 16px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-strong);
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: sticky;
  top: 0;
  z-index: 10;
}
.ncol-ws, .ncol-run, .ncol-attn, .ncol-tokens { text-align: right; }
.ncol-health, .node-cell-health { padding-left: 10px; }

/* ==========================================================================
   Node rows — individual instrument readouts
   ========================================================================== */
.node-row {
  display: grid;
  grid-template-columns: 1fr 50px 50px 50px 70px 60px 140px;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  border-left: 3px solid transparent;
  position: relative;
}
.node-row:nth-child(odd) { background: var(--bg); }
.node-row:nth-child(even) { background: var(--row-alt); }
.node-row:hover {
  background: var(--bg-highlight);
  box-shadow: inset 0 0 0 1px var(--border);
}
.node-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.node-row.has-attention { border-left-color: var(--yellow); background: linear-gradient(90deg, var(--yellow-glow), transparent 30%); }
.node-row.has-running   { border-left-color: var(--green); background: linear-gradient(90deg, var(--green-glow), transparent 30%); }
.node-row.has-thinking  { border-left-color: var(--cyan); background: linear-gradient(90deg, var(--cyan-glow), transparent 30%); }
.node-row.has-error     { border-left-color: var(--red); background: linear-gradient(90deg, var(--red-glow), transparent 30%); }
.node-row.has-attention:hover, .node-row.has-running:hover,
.node-row.has-thinking:hover, .node-row.has-error:hover {
  background: var(--bg-highlight);
}

.node-cell { font-size: 12px; display: flex; align-items: center; }
.node-cell-name {
  color: var(--fg-bright);
  font-weight: 500;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node-cell-name .node-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
  box-shadow: 0 0 4px var(--green-glow);
}
.node-cell-name .node-dot.unreachable {
  background: var(--red);
  box-shadow: 0 0 4px var(--red-glow);
}
.node-cell-name .node-dot.degraded {
  background: var(--accent);
  box-shadow: 0 0 4px var(--accent-glow-strong);
}
.node-degraded-badge {
  font-size: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 0 5px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.6;
  flex-shrink: 0;
}

/* Version drift */
.node-cell-version {
  font-size: 11px;
  color: var(--fg-dim);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.node-cell-version.drift { color: var(--yellow); }
.ncol-version { text-align: right; }
.node-version-drift-badge {
  font-size: 9px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--yellow);
  background: var(--yellow-glow);
  border: 1px solid var(--yellow);
  border-radius: var(--radius-sm);
  padding: 0 5px;
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.6;
  flex-shrink: 0;
}
.csb-version-drift .drift-warn {
  color: var(--yellow);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.node-cell-num {
  color: var(--fg-dim);
  font-size: 11px;
  justify-content: flex-end;
  font-variant-numeric: tabular-nums;
}
.node-cell-num.has-value { color: var(--fg-bright); }
.node-cell-health { gap: 8px; font-size: 11px; color: var(--fg-dim); font-variant-numeric: tabular-nums; }

/* Health bar — precision gauge */
.health-bar {
  width: 80px;
  height: 4px;
  background: var(--bg-highlight);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.health-bar-fill {
  display: block;
  height: 100%;
  min-width: 3px;
  border-radius: 2px;
  transition: width 0.3s ease;
}
.health-bar-fill.low { background: var(--green); box-shadow: 0 0 4px var(--green-glow); }
.health-bar-fill.mid { background: var(--yellow); box-shadow: 0 0 4px var(--yellow-glow); }
.health-bar-fill.high { background: var(--red); box-shadow: 0 0 4px var(--red-glow); }

/* ==========================================================================
   Node groups — rack panel sections
   ========================================================================== */
.node-group { margin-bottom: 1px; }

.node-group-header {
  display: grid;
  grid-template-columns: 1fr 50px 50px 50px 70px 60px 140px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
  background: var(--bg-surface);
  border-left: 3px solid transparent;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.node-group-header::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.15s;
  pointer-events: none;
}
.node-group-header:hover { background: var(--bg-highlight); }
.node-group-header:hover::before { opacity: 1; }
.node-group-header:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.node-group-header.has-attention { border-left-color: var(--yellow); }
.node-group-header.has-running   { border-left-color: var(--green); }
.node-group-header.has-thinking  { border-left-color: var(--cyan); }
.node-group-header.has-error     { border-left-color: var(--red); }

.node-group-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-bright);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.node-group-chevron {
  font-size: 10px;
  color: var(--fg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  width: 14px;
  display: inline-block;
  text-align: center;
}
.node-group-chevron.expanded { transform: rotate(90deg); }
.node-group-badge {
  font-size: 10px;
  font-family: var(--font-display);
  color: var(--fg-dim);
  background: var(--bg-highlight);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.node-group-cell { font-size: 12px; display: flex; align-items: center; }
.node-group-cell.num { color: var(--fg-dim); font-size: 11px; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.node-group-cell.num.has-value { color: var(--fg-bright); }

.node-group-body { overflow: hidden; }
.node-group-body.collapsed { display: none; }
.node-group-body .node-colheaders { position: static; z-index: auto; opacity: 0.85; }
.node-group-body .node-row { padding-left: 32px; }
.node-group-single .node-row { padding-left: 16px; }

/* ==========================================================================
   Dashboard table — console overrides
   ========================================================================== */
.dash-row.has-link { cursor: pointer; }
.dash-row.has-link::after {
  content: "\2197";
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 10px;
  color: var(--fg-dim);
  opacity: 0;
  transition: opacity 0.15s;
}
.dash-row.has-link:hover::after,
.dash-row.has-link:focus-visible::after { opacity: 0.6; }

.dash-cell-node {
  color: var(--accent);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.1s;
}
.dash-cell-node:hover { text-decoration: underline; color: var(--fg-bright); }

/* ==========================================================================
   MCP summary in node detail
   ========================================================================== */
#node-mcp-summary {
  color: var(--magenta);
  font-size: 11px;
  font-family: var(--font-mono);
  margin-left: 12px;
}

/* ==========================================================================
   Node link
   ========================================================================== */
.node-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--accent);
  font-size: 11px;
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s;
}
.node-link:hover { border-bottom-color: var(--accent); }

/* ==========================================================================
   Pagination
   ========================================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
  font-size: 12px;
  color: var(--fg-dim);
}
.pagination button {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  color: var(--fg-bright);
  border-radius: var(--radius-sm);
  padding: 5px 14px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: var(--font-display);
  font-weight: 500;
}
.pagination button:hover { background: var(--bg-highlight); border-color: var(--accent-dim); }
.pagination button:disabled { opacity: 0.25; cursor: not-allowed; }

/* ==========================================================================
   Toast override — position above cluster status bar
   ========================================================================== */
#toast { bottom: 56px; z-index: 200; color: var(--fg-bright); border-color: var(--border-strong); }

/* ==========================================================================
   Header accent button (+ new)
   ========================================================================== */
#header .header-btn-accent {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
#header .header-btn-accent:hover {
  background: var(--accent-dim);
  color: var(--accent);
}
#header .header-btn-accent:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Admin button — top accent line + active state */
#admin-btn {
  position: relative;
  overflow: visible;
}
#admin-btn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 1px 1px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
#admin-btn.active::before { opacity: 1; }
#admin-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-dim);
}

/* ==========================================================================
   New Workstream Modal
   ========================================================================== */
#new-ws-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 500;
}
#new-ws-box {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 32px;
  width: 380px;
  max-width: 90vw;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 48px -12px rgba(0, 0, 0, 0.5),
    0 0 80px -20px var(--accent-dim);
  position: relative;
}
#new-ws-box::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 1px;
}
#new-ws-box h2 {
  font-family: var(--font-display);
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
#new-ws-box label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 14px;
  margin-bottom: 5px;
}
.label-hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}
#new-ws-box label:first-of-type { margin-top: 0; }
#new-ws-box select,
#new-ws-box input[type="text"],
#new-ws-box textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#new-ws-box textarea { resize: vertical; min-height: 60px; }
#new-ws-box textarea::placeholder { color: var(--fg-dim); opacity: 0.6; }
#new-ws-box select:focus,
#new-ws-box input:focus,
#new-ws-box textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
}
#new-ws-box input::placeholder { color: var(--fg-dim); opacity: 0.6; }
#new-ws-box select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a93ad' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}
#new-ws-error {
  display: none;
  color: var(--red);
  font-size: 12px;
  margin-bottom: 6px;
}
#new-ws-buttons {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  justify-content: flex-end;
}
#new-ws-buttons button {
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: var(--bg-highlight);
  color: var(--fg);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
}
#new-ws-cancel:hover { background: var(--bg-elevated); border-color: var(--border-strong); }
#new-ws-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#new-ws-submit {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}
#new-ws-submit:hover { filter: brightness(1.1); }
#new-ws-submit:focus-visible { outline: 2px solid var(--fg); outline-offset: 2px; }
#new-ws-submit:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }
@media (max-width: 380px) { #new-ws-box { padding: 24px 18px; } }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 700px) {
  :root { --dash-grid: 68px 110px 1fr 56px 44px; }
  .dash-col-model, .dash-cell-model, .dash-col-node, .dash-cell-node { display: none; }
  .node-colheaders, .node-row { grid-template-columns: 1fr 40px 40px 40px 60px; }
  .node-group-header { grid-template-columns: 1fr 40px 40px 40px 60px; }
  .node-group-header .node-group-cell:last-child { display: none; }
  .ncol-version, .node-cell-version { display: none; }
  .ncol-health, .node-cell-health { display: none; }
  #node-mcp-summary { display: none; }
  #main { padding: 16px; padding-bottom: 60px; }
}
@media (max-width: 480px) {
  :root { --dash-grid: 50px 1fr 50px; }
  .dash-col-model, .dash-cell-model, .dash-col-node, .dash-cell-node, .dash-col-task, .dash-cell-task, .dash-col-ctx, .dash-cell-ctx { display: none; }
  #cluster-status-bar { height: auto; flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
  .csb-states { flex-wrap: wrap; gap: 2px; }
  .csb-state { padding: 4px 6px; font-size: 11px; }
  .csb-divider { display: none; }
  .csb-metrics { width: 100%; justify-content: center; }
  #main { padding-bottom: 80px; }
  #header h1 { font-size: 13px; }
}

/* ==========================================================================
   Admin panel — sidebar layout
   ========================================================================== */

#view-admin { animation: admin-fadein 0.15s ease-out; }
@keyframes admin-fadein { from { opacity: 0; } to { opacity: 1; } }

.admin-layout {
  display: flex;
  min-height: 0;
  flex: 1;
}

/* Sidebar — right-aligned to match header admin button position */
.admin-sidebar {
  width: 180px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-strong);
  padding: 4px 0;
  overflow-y: auto;
  order: 1;
  align-self: flex-start;
  position: sticky;
  top: 0;
  max-height: 100vh;
}

/* Group labels */
.admin-sidebar-group { margin-bottom: 2px; }
.admin-sidebar-group-label {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
  padding: 12px 16px 4px;
}
.admin-sidebar-group:first-child .admin-sidebar-group-label {
  padding-top: 4px;
}

/* Nav items */
.admin-nav {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-right: 2px solid transparent;
  color: var(--fg-dim);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px 6px 16px;
  cursor: pointer;
  text-align: left;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-nav:hover { color: var(--fg); background: var(--bg-highlight); border-right-color: var(--border-strong); }
.admin-nav.active {
  color: var(--accent);
  border-right-color: var(--accent);
  background: var(--accent-dim);
}
.admin-nav:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Content area */
.admin-content {
  flex: 1;
  min-width: 0;
  padding-right: 20px;
}

/* Mobile backdrop */
.admin-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 499;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.admin-sidebar-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile menu toggle — visible only on mobile, lives in toolbars */
.admin-mobile-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg-dim);
  width: 28px;
  height: 28px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;
  padding: 0;
}
.admin-mobile-toggle::before {
  content: '';
  display: block;
  width: 14px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor;
}
.admin-mobile-toggle:hover { color: var(--fg); }
@media (max-width: 700px) {
  .admin-mobile-toggle { display: flex; }
}

.admin-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.admin-action-btn {
  margin-left: auto;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 14px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: filter 0.15s;
}
.admin-action-btn:hover { filter: brightness(1.1); }
.admin-action-btn:focus-visible { outline: 2px solid var(--fg-bright); outline-offset: 2px; }
.admin-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.admin-toolbar select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 12px;
  padding: 5px 30px 5px 10px;
  min-width: 180px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a93ad' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
.admin-toolbar select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-dim); }

/* Admin table grid */
.admin-colheaders {
  display: grid;
  padding: 0 12px;
  margin-bottom: 4px;
}
.admin-colheaders .admin-col {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}
.admin-row {
  display: grid;
  padding: 8px 12px;
  align-items: center;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}
.admin-row:nth-child(even) { background: var(--row-alt, rgba(255,255,255,0.015)); }
.admin-row:hover { background: var(--bg-highlight); }

.admin-col { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-col code { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); }
.admin-col-subtitle {
  display: block;
  font-size: 11px;
  color: var(--fg-dim);
  font-weight: 400;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Users grid: USERNAME | NAME | CREATED | ACTIONS */
#admin-users .admin-colheaders,
#admin-users .admin-row {
  grid-template-columns: 140px 1fr 100px 80px;
}

/* Tokens grid: PREFIX | NAME | SCOPES | CREATED | EXPIRES | ACTIONS */
#admin-tokens .admin-colheaders,
#admin-tokens .admin-row {
  grid-template-columns: 100px 1fr 160px 100px 100px 80px;
}

/* Channels grid: CHANNEL | EXTERNAL ID | LINKED | ACTIONS */
#admin-channels .admin-colheaders,
#admin-channels .admin-row {
  grid-template-columns: 100px 1fr 100px 80px;
}

/* Scope badges */
.scope-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  border-radius: 2px;
  margin-right: 3px;
  background: var(--bg-highlight);
  color: var(--fg-dim);
  border: 1px solid var(--border);
}
.scope-write { color: var(--cyan); border-color: rgba(103, 232, 249, 0.2); }
.scope-approve { color: var(--accent); border-color: var(--accent-dim); }
.scope-channel { color: var(--magenta); border-color: rgba(192, 132, 252, 0.25); }
.scope-mcp { color: var(--magenta); border-color: rgba(192, 132, 252, 0.25); }
.scope-deny { color: var(--red); border-color: rgba(255, 80, 80, 0.25); }
.scope-scan-safe { color: var(--green); border-color: var(--green-glow); }
.scope-scan-low { color: var(--fg-dim); border-color: var(--border); }
.scope-scan-medium { color: var(--yellow); border-color: var(--yellow-glow); }
.scope-scan-high { color: var(--red); border-color: var(--red-glow); }
.scope-scan-critical { color: var(--red); border-color: var(--red-glow); background: rgba(248, 113, 113, 0.08); }

.admin-field { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.admin-field-heading {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-bottom: 8px;
  display: block;
}

.scan-composite { font-size: 11px; color: var(--fg-dim); margin-left: 6px; }
.scan-version { font-size: 10px; color: var(--fg-dim); margin-left: 6px; }
.scan-axis { font-size: 11px; padding: 2px 0; color: var(--fg-dim); }
.scan-axis-name { text-transform: capitalize; display: inline-block; min-width: 100px; }
.scan-axis-score { font-family: var(--font-mono); }
.scan-axis-flags { color: var(--yellow); font-size: 10px; }

/* Action buttons */
.admin-btn-danger {
  background: none;
  border: 1px solid var(--red);
  color: var(--red);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s, background 0.15s;
}
.admin-btn-danger:hover { opacity: 1; background: rgba(248, 113, 113, 0.1); }
.admin-btn-danger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

.admin-btn-action {
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--fg-dim);
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s, background 0.15s;
  margin-right: 4px;
}
.admin-btn-action:hover { opacity: 1; background: rgba(255, 255, 255, 0.05); color: var(--fg); }
.admin-btn-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Schedules grid: NAME | TYPE | SCHEDULE | TARGET | NEXT RUN | STATUS | ACTIONS */
#admin-schedules .admin-colheaders,
#admin-schedules .admin-row {
  grid-template-columns: 1.5fr 60px 1.2fr 80px 130px 70px 170px;
}

/* Schedule runs grid: STARTED | NODE | STATUS | ERROR */
.sched-runs-grid { grid-template-columns: 2fr 1fr 1fr 2fr; }

/* Schedule status indicators */
.sched-active { color: var(--green); font-weight: 500; }
.sched-disabled { color: var(--fg-dim); }
.sched-expired { color: var(--accent); }

/* Watches grid: NAME | NODE | COMMAND | INTERVAL | POLL | CONDITION | STATUS | ACTIONS */
#admin-watches .admin-colheaders,
#admin-watches .admin-row {
  grid-template-columns: 1.2fr 80px 1.5fr 60px 70px 1fr 70px 70px;
}

/* Watch status indicators */
.watch-active { color: var(--green); font-weight: 500; }
.watch-completed { color: var(--accent); }

/* Two-column form layout for wide modals */
.modal-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.modal-col > label:first-child,
.modal-col > .modal-col-heading + label { margin-top: 0; }
.modal-col-heading {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 10px;
}
.modal-columns > .modal-col:first-child {
  border-right: 1px solid var(--border);
  padding-right: 12px;
}
.modal-columns > .modal-col:last-child {
  padding-left: 12px;
}

/* Checkbox labels inside admin modals */
.admin-modal label.admin-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg);
  cursor: pointer;
  margin-top: 14px;
}
.admin-modal label.admin-checkbox input[type="checkbox"],
.admin-modal label.admin-checkbox input[type="radio"] {
  width: auto;
  margin: 0;
}

/* Admin modals (reuse new-ws-overlay pattern) */
.admin-modal {
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 32px;
  width: 380px;
  max-width: 90vw;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.5), 0 0 80px -20px var(--accent-dim);
  position: relative;
}
.admin-modal.admin-modal-wide { width: 820px; }
@media (max-width: 700px) {
  .admin-modal.admin-modal-wide { width: auto; }
  .modal-columns { grid-template-columns: 1fr; gap: 20px 0; }
  .modal-columns > .modal-col:first-child {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
  }
  .modal-columns > .modal-col:last-child { padding-left: 0; }
}
.admin-modal::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 1px;
  z-index: 1;
  pointer-events: none;
}
.admin-modal h2 {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 16px;
  letter-spacing: 0.02em;
}
.admin-modal label {
  display: block;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-bottom: 5px;
  margin-top: 12px;
}
.admin-modal label:first-of-type { margin-top: 0; }
.admin-modal input:not([type="hidden"]), .admin-modal select, .admin-modal textarea {
  width: 100%;
  padding: 9px 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font: inherit;
  font-size: 13px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-modal input:focus, .admin-modal select:focus, .admin-modal textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.admin-modal input:disabled, .admin-modal select:disabled, .admin-modal textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--bg-highlight);
  border-color: var(--border);
  color: var(--fg-dim);
}
.admin-modal label.admin-checkbox input:disabled { opacity: 0.4; }
.admin-modal input::placeholder, .admin-modal textarea::placeholder { color: var(--fg-dim); opacity: 0.6; }
.admin-modal textarea { resize: vertical; min-height: 40px; }
.admin-modal [role="alert"] { color: var(--red); font-size: 12px; margin-bottom: 8px; display: none; }

.admin-details { margin-top: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 0 12px; }
.admin-details[open] { padding-bottom: 12px; }
.admin-details summary {
  cursor: pointer;
  padding: 10px 0;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
}
.admin-details summary::-webkit-details-marker { display: none; }
.admin-details summary::after {
  content: "\25B8";
  font-size: 11px;
  color: var(--fg-dim);
  transition: transform 0.15s ease;
}
.admin-details[open] summary::after {
  transform: rotate(90deg);
}
.admin-details summary .label-hint { font-weight: 400; }
.admin-details label:first-of-type { margin-top: 4px; }

/* ==========================================================================
   Skill Spec Modal — two-column manifest layout
   Left: Identity / Manifest / Deployment  |  Right: Skill Content
   ========================================================================== */
.admin-modal-skill { padding: 28px 28px 24px; }

.skill-spec-body {
  display: grid;
  grid-template-columns: 1fr 1.55fr;
  gap: 0;
  margin-bottom: 12px;
}

.skill-spec-col-meta {
  border-right: 1px solid var(--border);
  padding-right: 22px;
}

.skill-spec-col-content {
  padding-left: 22px;
  display: flex;
  flex-direction: column;
}

.skill-spec-section { margin-bottom: 14px; }
.skill-spec-section:last-child { margin-bottom: 0; }

/* h3 used for screen-reader heading structure; reset UA defaults */
h3.skill-spec-heading { font-size: inherit; margin-block: 0; }
.skill-spec-heading {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  padding-bottom: 5px;
  margin: 14px 0 6px;
  border-bottom: 1px solid var(--accent-dim);
}
.skill-spec-section:first-child .skill-spec-heading { margin-top: 0; }
.skill-spec-heading .label-hint {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 10px;
  opacity: 1;
}

.skill-spec-section-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.skill-content-area {
  flex: 1;
  min-height: 220px;
  font-family: var(--font-mono) !important;
  font-size: 11.5px !important;
  line-height: 1.65 !important;
}

.skill-vars-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  min-height: 18px;
}

.skill-vars-label {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  white-space: nowrap;
  flex-shrink: 0;
}

.skill-vars-display { font-size: 11px; }

.skill-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 14px;
  margin: 4px 0 2px;
}
.skill-config-grid > div { min-width: 0; }

/* Origin badge — shown for remotely installed (readonly) skills */
.skill-origin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--cyan);
  background: rgba(103, 232, 249, 0.07);
  border: 1px solid rgba(103, 232, 249, 0.18);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  margin-bottom: 14px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skill-origin-badge::before {
  content: "\2193";
  font-size: 11px;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .skill-spec-body { grid-template-columns: 1fr; }
  .skill-spec-col-meta {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
    margin-bottom: 16px;
  }
  .skill-spec-col-content { padding-left: 0; }
  .skill-config-grid { grid-template-columns: 1fr 1fr; }
}

.modal-buttons { display: flex; gap: 10px; margin-top: 20px; }
.modal-cancel {
  flex: 1;
  padding: 9px;
  background: var(--bg-highlight);
  color: var(--fg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.modal-cancel:hover { background: var(--bg-elevated); }
.modal-cancel:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.modal-submit {
  flex: 1;
  padding: 9px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  border-radius: var(--radius-sm);
  font: inherit;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}
.modal-submit:hover { filter: brightness(1.1); }
.modal-submit:focus-visible { outline: 2px solid var(--fg-bright); outline-offset: 2px; }
.modal-submit:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }

#create-user-overlay, #create-token-overlay, #token-created-overlay, #create-channel-overlay, #confirm-overlay,
#create-schedule-overlay, #edit-schedule-overlay, #schedule-runs-overlay,
#create-role-overlay, #edit-role-overlay, #user-roles-overlay,
#create-policy-overlay, #edit-policy-overlay,
#create-template-overlay, #edit-template-overlay,
#memory-detail-overlay,
#mcp-create-overlay, #mcp-import-overlay, #mcp-detail-overlay, #mcp-install-overlay,
#github-import-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 600;
}

/* Token display (show-once) */
.token-created-warning {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--yellow);
  margin-bottom: 12px;
}
.token-display {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-bright);
  background: var(--bg);
  padding: 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  word-break: break-all;
  user-select: all;
}

@media (max-width: 700px) {
  #admin-users .admin-colheaders, #admin-users .admin-row {
    grid-template-columns: 100px 1fr 80px;
  }
  .admin-col-created { display: none; }
  #admin-tokens .admin-colheaders, #admin-tokens .admin-row {
    grid-template-columns: 80px 1fr 100px 80px;
  }
  .admin-col-created, .admin-col-expires { display: none; }
  #admin-channels .admin-colheaders, #admin-channels .admin-row {
    grid-template-columns: 80px 1fr 80px;
  }
  #admin-channels .admin-col-created { display: none; }
  #admin-schedules .admin-colheaders, #admin-schedules .admin-row {
    grid-template-columns: 1fr 60px 80px 130px;
  }
  .admin-col-sschedule, .admin-col-starget, .admin-col-snext { display: none; }
  #admin-watches .admin-colheaders, #admin-watches .admin-row {
    grid-template-columns: 1.2fr 80px 70px 70px 70px;
  }
  .admin-col-wcmd, .admin-col-wcond, .admin-col-winterval { display: none; }
}

/* ==========================================================================
   Admin sidebar — mobile off-canvas drawer
   ========================================================================== */
@media (max-width: 700px) {
  .admin-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 220px;
    z-index: 500;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-strong);
    border-right: none;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    padding-top: 48px;
  }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-sidebar.collapsed { transform: translateX(100%); width: 220px; }
  .admin-content { padding-right: 0; }
}

/* ==========================================================================
   Governance: Roles grid
   ========================================================================== */
#admin-roles .admin-colheaders,
#admin-roles .admin-row {
  grid-template-columns: 160px 1fr 110px;
}

/* ==========================================================================
   Governance: Tool Policies grid
   ========================================================================== */
#admin-policies .admin-colheaders,
#admin-policies .admin-row {
  grid-template-columns: 1.2fr 1fr 70px 50px 80px 140px;
}

/* Policy action badges */
.policy-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 2px;
}
.policy-allow {
  color: var(--green);
  background: var(--green-glow);
  border: 1px solid var(--green-glow);
}
.policy-deny {
  color: var(--red);
  background: var(--red-glow);
  border: 1px solid var(--red-glow);
}
.policy-ask {
  color: var(--yellow);
  background: var(--yellow-glow);
  border: 1px solid var(--yellow-glow);
}

/* ==========================================================================
   Governance: Prompt Templates grid
   ========================================================================== */
#admin-skills .admin-colheaders,
#admin-skills .admin-row {
  grid-template-columns: 80px 1.5fr 80px 120px;
}
/* ==========================================================================
   Governance: Audit grid
   ========================================================================== */
#admin-audit .admin-colheaders,
#admin-audit .admin-row {
  grid-template-columns: 80px 80px 1fr 120px 1.5fr;
}

/* Audit action badges */
.audit-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  padding: 1px 6px;
  border-radius: 2px;
  background: var(--bg-highlight);
  color: var(--fg-dim);
  border: 1px solid var(--border);
}
.audit-danger { color: var(--red); border-color: var(--red-glow); }
.audit-success { color: var(--green); border-color: var(--green-glow); }

/* ==========================================================================
   Memories tab
   ========================================================================== */
#admin-memories .admin-colheaders,
#admin-memories .admin-row {
  grid-template-columns: 1.5fr 80px 110px 1fr 100px 80px;
}

/* Filter toolbar */
.admin-toolbar-filters {
  display: flex;
  gap: 8px;
  margin-left: auto;
  align-items: center;
}
.admin-toolbar-filters select,
.admin-toolbar-filters input[type="search"] {
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 8px;
  font: inherit;
  font-size: 12px;
}
.admin-toolbar-filters select {
  min-width: 0;
}
.admin-toolbar-filters input[type="search"] {
  width: 180px;
  background: var(--bg);
  color: var(--fg);
}
.admin-toolbar-filters input[type="search"]::placeholder {
  color: var(--fg-dim);
}

/* Memory type badges */
.mem-type-project { background: var(--bg-highlight); color: var(--cyan); border-color: var(--cyan-glow, var(--border)); }
.mem-type-user { background: var(--bg-highlight); color: var(--green); border-color: var(--green-glow, var(--border)); }
.mem-type-feedback { background: var(--bg-highlight); color: var(--yellow); border-color: var(--yellow-glow, var(--border)); }
.mem-type-reference { background: var(--bg-highlight); color: var(--magenta); border-color: var(--magenta-glow, var(--border)); }

/* Memory scope badges */
.mem-scope-global { background: var(--bg-highlight); color: var(--fg-dim); }
.mem-scope-workstream { background: var(--bg-highlight); color: var(--cyan); border-color: var(--cyan-glow, var(--border)); }
.mem-scope-user { background: var(--bg-highlight); color: var(--green); border-color: var(--green-glow, var(--border)); }

/* Memory detail modal */
.mem-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px 16px;
}
.mem-detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mem-detail-label {
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}
.mem-detail-desc {
  color: var(--fg);
  font-size: 13px;
  padding: 4px 0;
}
.memory-content-block {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 12px;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  margin: 4px 0 0;
}

/* ==========================================================================
   Governance: Usage dashboard
   ========================================================================== */
.usage-summary {
  display: flex;
  gap: 24px;
  padding: 16px 0 20px;
  flex-wrap: wrap;
}
.usage-readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.usage-readout-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--fg-bright);
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}
.usage-readout-label {
  font-size: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
}
/* Secondary readouts (cache stats) — smaller to denote supplementary metrics */
.usage-readout-secondary .usage-readout-value { font-size: 16px; font-weight: 500; color: var(--fg-dim); }
.usage-readout-secondary .usage-readout-label { font-size: 9px; }
/* Dim zero-value secondary readouts to reduce noise */
.usage-readout-zero { opacity: 0.35; }
/* Vertical divider between primary and secondary readout groups */
.usage-summary-divider {
  width: 1px;
  align-self: stretch;
  background: var(--border);
  margin: 2px 0;
}

/* Usage bar chart */
.usage-chart { padding-top: 4px; }
.usage-bar-row {
  display: grid;
  grid-template-columns: 90px 1fr 60px;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.usage-bar-label {
  font-size: 11px;
  color: var(--fg-dim);
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usage-bar-track {
  height: 16px;
  background: var(--bg-highlight);
  border-radius: 2px;
  overflow: hidden;
}
.usage-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  min-width: 2px;
  transition: width 0.3s ease;
  box-shadow: 0 0 6px var(--accent-glow);
}
.usage-bar-value {
  font-size: 11px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Usage range/group buttons */
.usage-range-group {
  display: flex;
  gap: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.usage-range-btn, .usage-group-btn {
  background: var(--bg);
  color: var(--fg-dim);
  border: none;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.usage-range-btn:hover, .usage-group-btn:hover {
  background: var(--bg-highlight);
  color: var(--fg);
}
.usage-range-btn.active, .usage-group-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.usage-range-btn:focus-visible, .usage-group-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* ==========================================================================
   Governance: Permission grid (modal checkboxes)
   ========================================================================== */
.perm-fieldset {
  border: none;
  padding: 0;
  margin: 12px 0 0;
}
.perm-fieldset legend {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  padding: 0;
  margin-bottom: 4px;
}
.perm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
  padding: 8px 0;
}
.perm-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: var(--font-mono);
  color: var(--fg);
  padding: 3px 0;
  cursor: pointer;
  text-transform: none;
  letter-spacing: normal;
}
.perm-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
}

/* ==========================================================================
   Governance: Responsive
   ========================================================================== */
@media (max-width: 700px) {
  #admin-roles .admin-colheaders, #admin-roles .admin-row {
    grid-template-columns: 1fr 100px;
  }
  .admin-col-rperms { display: none; }
  #admin-policies .admin-colheaders, #admin-policies .admin-row {
    grid-template-columns: 1fr 70px 50px 100px;
  }
  .admin-col-pstatus, .admin-col-ppriority { display: none; }
  #admin-skills .admin-colheaders, #admin-skills .admin-row {
    grid-template-columns: 1fr 100px;
  }
  .admin-col-tmcat, .admin-col-tmrisk { display: none; }
  #admin-audit .admin-colheaders, #admin-audit .admin-row {
    grid-template-columns: 60px 1fr 100px;
  }
  .admin-col-auser, .admin-col-adetail { display: none; }
  #admin-memories .admin-colheaders, #admin-memories .admin-row {
    grid-template-columns: 1fr 70px 90px 80px;
  }
  .admin-col-mdesc, .admin-col-mupdated { display: none; }
  .admin-toolbar-filters { flex-wrap: wrap; }
  .admin-toolbar-filters input[type="search"] { width: 120px; }
  .mem-detail-grid { grid-template-columns: 1fr 1fr; }
  .usage-summary { gap: 14px; }
  .usage-readout-value { font-size: 18px; }
  .usage-readout-secondary .usage-readout-value { font-size: 14px; }
  .usage-bar-row { grid-template-columns: 70px 1fr 50px; }
  .perm-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Settings tab — form editor
   ========================================================================== */
.settings-section { margin-bottom: 12px; }
.settings-section-header {
  cursor: pointer;
  padding: 8px 12px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-dim);
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
}
.settings-section-header:hover { color: var(--fg); }
.settings-section-header::after { content: "\25BE"; margin-left: 8px; font-size: 11px; }
.settings-section[data-collapsed] .settings-section-body { display: none; }
.settings-section[data-collapsed] .settings-section-header::after { content: "\25B8"; }
/* Setting row — 3-column grid */
.settings-row {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 8px 16px;
  padding: 8px 12px;
  align-items: center;
  border-bottom: 1px solid var(--border);
}
.settings-row:hover { background: var(--row-alt, rgba(255,255,255,0.015)); }

/* Label column */
.settings-label-col { min-width: 0; }
.settings-label { font-size: 12px; color: var(--fg); font-family: var(--font-mono); }
.settings-desc { font-size: 10px; color: var(--fg-dim); margin-top: 2px; line-height: 1.3; }

/* Input column */
.settings-input input[type="text"],
.settings-input input[type="number"],
.settings-input select {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  width: 100%;
  max-width: 300px;
  box-sizing: border-box;
}
/* Hide number spin buttons (Firefox + WebKit) */
.settings-input input[type="number"] { -moz-appearance: textfield; }
.settings-input input[type="number"]::-webkit-inner-spin-button,
.settings-input input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.settings-input input:focus,
.settings-input select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.settings-input select {
  appearance: none;
  padding-right: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

/* Bool toggle */
.settings-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.settings-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.settings-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--bg-highlight);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: background 0.2s;
}
.settings-toggle-slider::before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  background: var(--fg-dim);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.settings-toggle input:checked + .settings-toggle-slider {
  background: var(--accent-dim);
  border-color: var(--accent);
}
.settings-toggle input:checked + .settings-toggle-slider::before {
  transform: translateX(16px);
  background: var(--accent);
}
.settings-toggle input:focus-visible + .settings-toggle-slider {
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* Actions column */
.settings-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

/* Save button */
.settings-save-btn {
  visibility: hidden;
  opacity: 0;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--accent);
  color: var(--accent);
  background: none;
  transition: opacity 0.15s, visibility 0s 0.15s;
}
.settings-save-btn.visible { visibility: visible; opacity: 0.8; transition: opacity 0.15s, visibility 0s; }
.settings-save-btn.visible:hover { opacity: 1; background: var(--accent-dim); }
.settings-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.settings-save-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Reset button */
.settings-reset-btn {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--border);
  color: var(--fg-dim);
  background: none;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.settings-reset-btn:hover { opacity: 1; color: var(--red); border-color: var(--red); }
.settings-reset-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* Badges */
.settings-badge-default { color: var(--fg-dim); border-color: var(--border); }
.settings-restart-badge {
  display: none;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--yellow);
  padding: 1px 4px;
  border: 1px solid var(--yellow-glow);
  border-radius: 2px;
}
.settings-restart-badge.visible { display: inline-block; }
.settings-restart-badge.saved { background: var(--yellow-glow); }

/* Help tooltip */
.settings-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-display);
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
  padding: 0;
  line-height: 1;
  position: relative;
  transition: background 0.15s, color 0.15s;
}
/* Expand tap target to ~26px without changing visual size */
.settings-help-btn::before { content: ""; position: absolute; inset: -5px; }
.settings-help-btn:hover { background: var(--accent); color: var(--bg); }
.settings-help-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.settings-help-popover {
  margin-top: 4px;
  padding: 6px 8px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--fg);
}
.settings-help-text { color: var(--fg); }
.settings-help-ref {
  color: var(--accent);
  text-decoration: none;
  font-size: 11px;
  font-family: var(--font-display);
  white-space: nowrap;
}
.settings-help-ref:hover { text-decoration: underline; }

/* Secret field — match input box height for grid alignment */
.settings-secret {
  color: var(--fg-dim);
  font-style: italic;
  font-size: 11px;
  cursor: not-allowed;
  display: inline-block;
  padding: 4px 0;
  border: 1px solid transparent; /* invisible border matches input's 1px border */
}

/* Docs link in toolbar */
.settings-docs-link {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-dim);
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  margin-left: auto;
  transition: color 0.15s, border-color 0.15s;
}
.settings-docs-link:hover { color: var(--accent); border-color: var(--accent-dim); }
.settings-docs-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Settings mobile */
@media (max-width: 700px) {
  .settings-row { grid-template-columns: 1fr; gap: 4px; }
  .settings-desc { display: none; }
  .settings-input input[type="text"],
  .settings-input input[type="number"],
  .settings-input select { max-width: 100%; }
}

/* -- MCP Servers grid ----------------------------------------------------- */
.admin-col-mname a{color:var(--fg);text-decoration:none;transition:color .15s}
.admin-col-mname a:hover{color:var(--magenta)}
.admin-col-mname a:focus-visible{outline:2px solid var(--magenta);outline-offset:2px}
.mcp-grid{grid-template-columns:1.5fr 80px 55px 45px 80px 95px 120px;gap:0 6px}
@media(max-width:700px){
  .mcp-grid{grid-template-columns:1fr 100px 130px}
  .admin-col-mtransport,.admin-col-mtools,.admin-col-mres,.admin-col-mprompts{display:none}
}

.mcp-status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin-right:6px}
.mcp-status-dot.connected{background:var(--magenta);box-shadow:0 0 6px var(--magenta-glow, rgba(192,132,252,.45))}
.mcp-status-dot.error{background:var(--red);box-shadow:0 0 6px var(--red-glow);border-radius:1px}
.mcp-status-dot.disabled{background:var(--fg-dim);opacity:.35}
.mcp-status-dot.connecting{background:var(--magenta);animation:mcp-pulse 1.2s ease-in-out infinite}
@keyframes mcp-pulse{0%,100%{opacity:.3}50%{opacity:1}}

.mcp-row-connected{border-left:3px solid var(--magenta)}
.mcp-row-error{border-left:3px solid var(--red)}
.mcp-row-disabled{border-left:3px solid transparent}

.mcp-transport-badge{display:inline-block;font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:1px 6px;border-radius:2px;background:var(--bg-highlight);border:1px solid var(--border)}
.mcp-transport-stdio{color:var(--cyan);border-color:rgba(103,232,249,.2)}
.mcp-transport-http{color:var(--magenta);border-color:rgba(192,132,252,.25)}

.admin-col-mtools,.admin-col-mres,.admin-col-mprompts{text-align:right;font-variant-numeric:tabular-nums}
.mcp-count-dim{opacity:.4}

.mcp-detail-modal::before{background:linear-gradient(90deg,transparent,var(--magenta),transparent)!important}
.mcp-detail-modal h2{color:var(--magenta)!important}
.mcp-detail-section{margin-top:16px}
.mcp-detail-section h3{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--magenta);margin-bottom:8px}
.mcp-detail-list{list-style:none;padding:0;margin:0}
.mcp-detail-list li{font-size:12px;padding:3px 0;border-bottom:1px solid var(--border);color:var(--fg-dim)}
.mcp-detail-list li:last-child{border-bottom:none}

.admin-action-btn-ghost{background:transparent;color:var(--fg-dim);border:1px solid var(--border-strong)}
.admin-action-btn-ghost:hover{color:var(--fg);background:var(--bg-highlight)}
.mcp-sync-pending{color:var(--yellow)!important;border-color:var(--yellow)!important;animation:mcp-sync-pulse 2s ease-in-out infinite}
@keyframes mcp-sync-pulse{0%,100%{border-color:var(--yellow)}50%{border-color:rgba(251,191,36,.3)}}

/* -- MCP sub-view toggle -------------------------------------------------- */
.mcp-view-toggle{display:flex;gap:2px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);overflow:hidden}
.mcp-view-btn{background:var(--bg);color:var(--fg-dim);border:none;font-family:var(--font-display);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:5px 12px;cursor:pointer;transition:background .15s,color .15s}
.mcp-view-btn:hover{background:var(--bg-highlight);color:var(--fg)}
.mcp-view-btn.active{background:rgba(192,132,252,.15);color:var(--magenta)}
.mcp-view-btn:focus-visible{outline:2px solid var(--magenta);outline-offset:-2px}

/* -- MCP source badges ---------------------------------------------------- */
.scope-config{color:var(--magenta);border-color:rgba(192,132,252,.25)}
.scope-manual{color:var(--cyan);border-color:rgba(103,232,249,.2)}
.scope-registry{color:var(--green);border-color:rgba(52,211,153,.2)}

/* -- MCP Registry notice -------------------------------------------------- */
.mcp-registry-notice{padding:10px 14px;margin-bottom:12px;background:rgba(251,191,36,.06);border:1px solid rgba(251,191,36,.15);border-left:3px solid var(--yellow);border-radius:var(--radius-sm);font-size:11px;line-height:1.5;color:var(--fg-dim)}
.mcp-registry-notice-icon{color:var(--yellow);font-size:13px;margin-right:6px}
.mcp-registry-notice a{color:var(--yellow);text-decoration:underline;text-underline-offset:2px}
.mcp-registry-notice a:hover{color:var(--fg-bright)}

/* -- MCP Registry search -------------------------------------------------- */
.mcp-registry-search{display:flex;gap:10px;margin-bottom:16px}
.mcp-registry-search input[type="search"]{flex:1;padding:9px 14px;background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--fg);font:inherit;font-size:13px;transition:border-color .15s,box-shadow .15s}
.mcp-registry-search input[type="search"]:focus{border-color:var(--magenta);outline:none;box-shadow:0 0 0 3px rgba(192,132,252,.15)}
.mcp-registry-search input[type="search"]::placeholder{color:var(--fg-dim);opacity:.8}
.mcp-registry-search select{padding:9px 30px 9px 10px;background:var(--bg);border:1px solid var(--border-strong);border-radius:var(--radius-sm);color:var(--fg);font:inherit;font-size:12px;min-width:110px;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a93ad' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}
.mcp-registry-search select:focus{border-color:var(--magenta);outline:none;box-shadow:0 0 0 3px rgba(192,132,252,.15)}

/* -- MCP Registry result cards -------------------------------------------- */
.mcp-reg-card{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start;padding:14px 16px;background:var(--bg-surface);border:1px solid var(--border);border-left:3px solid var(--border);border-radius:var(--radius-sm);margin-bottom:6px;transition:border-color .15s}
.mcp-reg-card:hover{border-color:var(--border-strong);border-left-color:var(--magenta)}
.mcp-reg-card-info{min-width:0}
.mcp-reg-card-name{font-family:var(--font-display);font-size:13px;font-weight:600;color:var(--fg-bright);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcp-reg-card-repo{color:var(--fg-dim);text-decoration:none;font-size:11px;margin-left:4px;opacity:.6;transition:opacity .15s}
.mcp-reg-card-repo:hover{opacity:1;color:var(--magenta)}
.mcp-reg-card-repo:focus-visible{opacity:1;color:var(--magenta);outline:2px solid var(--magenta);outline-offset:2px}
.mcp-reg-card-desc{font-size:11px;color:var(--fg-dim);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:4px}
.mcp-reg-card-meta{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.mcp-reg-card-meta .scope-badge{font-size:9px}
.mcp-reg-card-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.mcp-reg-card-version{font-family:var(--font-mono);font-size:10px;color:var(--fg-dim)}

.mcp-install-btn{background:var(--magenta);color:var(--bg);border:none;border-radius:var(--radius-sm);font-family:var(--font-display);font-size:10px;font-weight:600;padding:5px 14px;cursor:pointer;letter-spacing:.02em;transition:filter .15s;white-space:nowrap}
.mcp-install-btn:hover{filter:brightness(1.15)}
.mcp-install-btn:focus-visible{outline:2px solid var(--fg-bright);outline-offset:2px}
.mcp-install-btn:disabled{opacity:.4;cursor:not-allowed}
.mcp-install-btn.mcp-update-btn{background:transparent;color:var(--yellow);border:1px solid var(--yellow)}
.mcp-install-btn.mcp-update-btn:hover{background:rgba(251,191,36,.1);filter:none}
.mcp-installed-badge{display:inline-block;font-family:var(--font-display);font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;padding:3px 8px;border-radius:2px;background:rgba(52,211,153,.1);color:var(--green);border:1px solid rgba(52,211,153,.2)}

#mcp-registry-pagination{display:flex;align-items:center;padding:12px 0}
.mcp-registry-count-label{font-size:11px;color:var(--fg-dim);margin-left:10px}

/* -- MCP Install modal ---------------------------------------------------- */
.mcp-install-summary-name{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--magenta);margin-bottom:4px}
.mcp-install-summary-desc{font-size:12px;color:var(--fg-dim);margin-bottom:12px;line-height:1.4}
.mcp-install-source-group{margin-bottom:14px}
.mcp-install-source-label{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);margin-bottom:4px;cursor:pointer;transition:border-color .15s;font-size:12px;color:var(--fg)}
.mcp-install-source-label:hover{border-color:var(--magenta)}
.mcp-install-source-label input[type="radio"]{width:auto;margin:0}
.mcp-install-source-type{font-family:var(--font-mono);font-size:10px;color:var(--fg-dim)}

@media(max-width:700px){
  .mcp-reg-card{grid-template-columns:1fr;gap:8px}
  .mcp-reg-card-actions{flex-direction:row;align-items:center}
  .mcp-registry-search{flex-direction:column}
  #admin-mcp .admin-toolbar{flex-wrap:wrap;gap:8px}
  #mcp-servers-toolbar{display:flex;gap:6px;width:100%}
  #admin-skills .admin-toolbar{flex-wrap:wrap;gap:8px}
  #skill-installed-toolbar{display:flex;gap:6px;width:100%}
}

/* ==========================================================================
   OIDC detail panel (inline expansion below user row)
   ========================================================================== */
.oidc-detail-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 150ms ease;
  margin: 0 8px 0 24px;
}
.oidc-detail-inner {
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--row-alt);
}
.oidc-detail-header {
  font-family: var(--font-display);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  margin-bottom: 8px;
}
.oidc-detail-header::before {
  content: "\25c6 ";
  color: var(--accent);
}
.oidc-identity-row {
  display: grid;
  grid-template-columns: 70px 100px 1fr 60px 50px;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
  align-items: center;
}
.oidc-identity-row + .oidc-identity-row {
  border-top: 1px solid var(--border);
}
.oidc-identity-issuer {
  overflow: hidden;
}
.oidc-identity-issuer .scope-badge {
  font-size: 10px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oidc-identity-subject {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oidc-identity-email {
  color: var(--fg-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.oidc-identity-time {
  color: var(--fg-dim);
  font-size: 11px;
}
.oidc-identity-actions .admin-btn-danger { font-size: 11px; }
.oidc-detail-empty {
  color: var(--fg-dim);
  font-size: 12px;
  font-style: italic;
}

/* Expand indicator on user rows */
.admin-row[data-expandable] { cursor: pointer; }
.admin-row[data-expandable]:hover { background: var(--bg-highlight); }
.admin-row[data-expandable]:hover .admin-expand-indicator { color: var(--fg); }
.admin-row[data-expandable]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.admin-expand-indicator {
  display: inline-block;
  width: 14px;
  font-size: 10px;
  color: var(--fg-dim);
  transition: transform 150ms ease;
  transform-origin: center;
}
.admin-expand-indicator.expanded { transform: rotate(90deg); }

@media (max-width: 700px) {
  .oidc-identity-row { grid-template-columns: 70px 1fr 50px; }
  .oidc-identity-email, .oidc-identity-time { display: none; }
  .oidc-detail-panel { margin-left: 8px; }
}

/* ==========================================================================
   Reduced motion — console-specific
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .node-group-chevron { transition: none; }
  .health-bar-fill { transition: none; }
  .csb-state, .node-row, .node-group-header { transition: none; }
  .node-link, .dash-cell-node, .pagination button { transition: none; }
  .dash-row.has-link::after, .node-group-header::before { transition: none; }
  #new-ws-box select, #new-ws-box input, #new-ws-buttons button { transition: none; }
  .admin-nav, .admin-row, .admin-btn-danger, .admin-btn-action { transition: none; }
  .settings-toggle-slider, .settings-toggle-slider::before { transition: none; }
  .settings-save-btn, .settings-reset-btn, .settings-docs-link, .settings-help-btn { transition: none; }
  .admin-sidebar, .admin-sidebar-backdrop { transition: none; }
  #view-admin { animation: none; }
  .admin-action-btn, .modal-cancel, .modal-submit { transition: none; }
  .admin-modal input, .admin-modal select { transition: none; }
  .mcp-status-dot.connecting { animation: none; }
  .oidc-detail-panel, .admin-expand-indicator { transition: none; }
  .admin-details summary::after { transition: none; }
  .mcp-view-btn, .mcp-reg-card, .mcp-install-btn, .mcp-install-source-label { transition: none; }
  .mcp-registry-search input[type="search"] { transition: none; }
  .mcp-reg-card-repo { transition: none; }
  .mcp-sync-pending { animation: none; }
}