/* web/pages/connectors/connectors.css — [CNX4 connectors-panel-v1]

   Connectors page to the user's screenshot (2026-10-10, "same to same"):
   tabs, search + category pills, a 2-column grid of compact cards, and the
   clicked connector's summary in a panel on the right. Every selector is
   scoped to #view-connectors. Loads AFTER the untouched legacy
   /connectors_page.css; cards wear cnp-* classes only, so boot/overrides.css
   .dc-* rules cannot reach them.

   ---- Colour: what each colour MEANS, then per theme -------------------
     on    Connected / switched on              lime (dark), blue (light)
     warn  Switched off (the user's choice)     amber, both themes
     bad   Error - see why (health check fails) red, both themes
     sel   the card whose summary is open       blue accent, both themes
     act   buttons that DO something            blue, white ink ("blue means act")
   Lime is never text on the light surface, so light swaps the "on" family
   to the accent. Locals keep the light override to one block. */
#view-connectors {
  --cnp-on: var(--success);
  --cnp-on-ink: var(--bg);
  --cnp-on-text: var(--success-text);
  --cnp-on-soft: var(--tb-success-soft);
  --cnp-on-edge: var(--success-tint-border);
  --cnp-warn-text: var(--tb-warning-text);
  --cnp-warn-soft: var(--tb-warning-soft);
  --cnp-warn-edge: var(--tb-warning-tint-bd);
  --cnp-bad-text: var(--tb-danger);
  --cnp-bad-soft: var(--tb-danger-soft);
  --cnp-bad-edge: var(--tb-danger-tint-bd);
  --cnp-sel: var(--tb-accent-border);
  --cnp-card: var(--tb-surface);
  --cnp-edge: var(--tb-border);
  --cnp-edge-hi: var(--tb-border-strong);
  --cnp-shadow-hi: 0 2px 4px rgb(0 0 0 / 26%), 0 10px 22px rgb(0 0 0 / 22%);
}
:root[data-theme="light"] #view-connectors {
  --cnp-on: var(--tb-accent);
  --cnp-on-ink: var(--white);
  --cnp-on-text: var(--tb-accent-text);
  --cnp-on-soft: var(--tb-accent-soft);
  --cnp-on-edge: var(--tb-accent-border);
  --cnp-shadow-hi: 0 2px 6px rgb(16 32 84 / 8%), 0 10px 22px rgb(16 32 84 / 10%);
}

/* ---- page ------------------------------------------------------------ */
/* [CNX4c] Two independent scroll columns. The view no longer scrolls as a
   whole: head + tabs stay put, and the space below them is split into the
   app list (scrolls) and the summary panel (scrolls on its own). A sticky
   panel with a height cap was not enough - the cap assumed the panel was
   already stuck to the top, but until the list had scrolled far enough the
   panel sat lower, so its bottom (Test and save) fell off the screen. Here
   the panel is capped by its column, which is always exactly on screen. */
#view-connectors.view.active {
  overflow: hidden;
  min-height: 0;
}
#view-connectors .cnp-page {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;     /* fills the view (a flex column) - more reliable than height:100% */
  min-height: 0;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 22px 30px 0;
  color: var(--tb-text);
}
#view-connectors .cnp-ico { flex: none; display: block; }
#view-connectors .cnp-ico-xs { width: 12px; height: 12px; }
#view-connectors .cnp-flex { flex: 1 1 auto; }

/* ---- head: one line + Connect an app (navbar carries the title) ------- */
#view-connectors .cnp-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}
#view-connectors .cnp-sub {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 620px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tb-text-muted);
}
#view-connectors .cnp-head .cnp-btn-p { margin-left: auto; }

/* ---- tabs -------------------------------------------------------------- */
#view-connectors .cnp-tabbar {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  border-bottom: 1px solid var(--cnp-edge);
  margin-bottom: 16px;
}
#view-connectors .cnp-tabs { display: flex; gap: 4px; }
#view-connectors .cnp-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  margin-bottom: -1px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--tb-text-muted);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
#view-connectors .cnp-tab:hover { color: var(--tb-text); }
#view-connectors .cnp-tab[aria-selected="true"] {
  color: var(--tb-text);
  border-bottom-color: var(--tb-accent);
}
#view-connectors .cnp-count {
  min-width: 22px;
  height: 20px;
  box-sizing: border-box;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--tb-surface-2);
  color: var(--tb-text-secondary);
  font-size: 11.5px;
  font-weight: 650;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#view-connectors .cnp-tab[aria-selected="true"] .cnp-count {
  background: var(--tb-accent-soft);
  color: var(--tb-accent-text);
}
#view-connectors .cnp-tabbar .cnp-iconbtn { margin: 0 0 6px auto; }

/* ---- body: list + summary panel --------------------------------------- */
/* [CNX4d] 2x2: [filters | stats] over [list | detail]. Row 1 sizes to the
   taller of the two; row 2 is exactly the space left, so both lower cells
   scroll on their own and start on the same line. */
#view-connectors .cnp-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "filters stats" "main panel";
  column-gap: 18px;
  row-gap: 14px;
  align-items: start;
}
#view-connectors .cnp-main {
  grid-area: main;
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 4px 40px 0;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: var(--cnp-edge-hi) transparent;
}

/* search + category pills */
/* search and pills on ONE line: pills start right after the search and wrap
   inside their own box (to a second line) instead of under the search */
#view-connectors .cnp-filters {
  grid-area: filters;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}
#view-connectors .cnp-filters .cnp-searchbox { flex: none; }
#view-connectors .cnp-searchbox {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--tb-text-muted);
}
#view-connectors .cnp-searchbox .cnp-ico {
  position: absolute;
  left: 11px;
  pointer-events: none;
}
#view-connectors #cpg-search {
  width: 220px;
  height: 32px;
  box-sizing: border-box;
  padding: 0 12px 0 33px;
  border: 1px solid var(--cnp-edge-hi);
  border-radius: var(--radius-input);
  background: var(--cnp-card);
  color: var(--tb-text);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
#view-connectors #cpg-search::placeholder { color: var(--tb-text-muted); }
#view-connectors #cpg-search:focus {
  border-color: var(--tb-accent-border);
  box-shadow: 0 0 0 3px var(--tb-accent-soft);
}
#view-connectors .cnp-pills { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#view-connectors .cnp-pill {
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--cnp-edge-hi);
  border-radius: var(--radius-btn);
  background: var(--cnp-card);
  color: var(--tb-text-secondary);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
}
#view-connectors .cnp-pill:hover { border-color: var(--tb-accent-border); color: var(--tb-text); }
#view-connectors .cnp-pill[aria-pressed="true"] {
  border-color: var(--tb-accent-border);
  background: var(--tb-accent-soft);
  color: var(--tb-accent-text);
}

/* ---- [CNX-DD] Filters Dropdown ---- */
#view-connectors .cnp-filter-dd {
  position: relative;
  display: inline-flex;
}
#view-connectors .cnp-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#view-connectors .cnp-filter-btn .cnp-chev {
  font-size: 10px;
  opacity: 0.8;
  display: inline-block;
  transition: transform 140ms ease;
}
#view-connectors .cnp-filter-btn[aria-expanded="true"] .cnp-chev {
  transform: rotate(180deg);
}

/* Dropdown Menu - Dark Theme (Default) */
#view-connectors .cnp-filter-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--tb-surface-card, #111827);
  border: 1px solid var(--cnp-edge-hi, rgba(255, 255, 255, 0.14));
  border-radius: var(--radius-card, 10px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  z-index: 100;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--tb-border-strong, #475569) transparent;
}
#view-connectors .cnp-filter-menu::-webkit-scrollbar { width: 5px; }
#view-connectors .cnp-filter-menu::-webkit-scrollbar-thumb {
  background: var(--tb-border-strong, #475569);
  border-radius: 999px;
}
#view-connectors .cnp-filter-menu[hidden] {
  display: none !important;
}
#view-connectors .cnp-filter-group-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tb-text-muted, #94a3b8);
  padding: 6px 8px 3px;
  user-select: none;
}
#view-connectors .cnp-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px;
  font-size: 12.5px;
  color: var(--tb-text, #e2e8f0);
  background: transparent;
  border: none;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
#view-connectors .cnp-filter-item:hover {
  background: var(--tb-surface-hover, rgba(255, 255, 255, 0.08));
  color: #ffffff;
}
#view-connectors .cnp-filter-item.is-selected {
  background: var(--tb-accent-soft, rgba(29, 78, 216, 0.22));
  color: var(--tb-accent-text, #60a5fa);
  font-weight: 600;
}
#view-connectors .cnp-filter-item .cnp-chk {
  font-size: 12px;
  color: var(--tb-accent-text, #60a5fa);
  font-weight: bold;
}

/* Dropdown Menu - Light Theme Overrides */
:root[data-theme="light"] #view-connectors .cnp-filter-menu {
  background: #ffffff !important;
  border: 1px solid var(--tb-border-strong, #cbd5e1) !important;
  box-shadow: 0 10px 25px rgba(16, 32, 84, 0.12), 0 2px 6px rgba(16, 32, 84, 0.08) !important;
  scrollbar-color: #cbd5e1 transparent;
}
:root[data-theme="light"] #view-connectors .cnp-filter-menu::-webkit-scrollbar-thumb {
  background: #cbd5e1;
}
:root[data-theme="light"] #view-connectors .cnp-filter-group-title {
  color: #64748b !important;
}
:root[data-theme="light"] #view-connectors .cnp-filter-item {
  color: #1e293b !important;
}
:root[data-theme="light"] #view-connectors .cnp-filter-item:hover {
  background: #f1f5f9 !important;
  color: #0f172a !important;
}
:root[data-theme="light"] #view-connectors .cnp-filter-item.is-selected {
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}
:root[data-theme="light"] #view-connectors .cnp-filter-item .cnp-chk {
  color: #1d4ed8 !important;
}

/* ---- the compact card --------------------------------------------------
   initials | name over (category + status pill) | switch or Add key.
   Name ellipsises; pill never wraps (the WFX4 rule). */
#view-connectors .cnp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 10px;
}
#view-connectors .cnp-card {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 64px;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--cnp-edge);
  border-radius: var(--radius-card);
  background: var(--cnp-card);
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
#view-connectors .cnp-card:hover { border-color: var(--cnp-edge-hi); box-shadow: var(--cnp-shadow-hi); }
#view-connectors .cnp-card:focus-visible { outline: 2px solid var(--cnp-sel); outline-offset: 2px; }
#view-connectors .cnp-card.is-off { border-color: var(--cnp-warn-edge); }
#view-connectors .cnp-card.is-err { border-color: var(--cnp-bad-edge); }
#view-connectors .cnp-card.is-sel {
  border-color: var(--cnp-sel);
  box-shadow: 0 0 0 1px var(--cnp-sel);
}
#view-connectors .cnp-av {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--cnp-edge);
  border-radius: 9px;
  background: var(--tb-surface-2);
  color: var(--tb-text-secondary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
#view-connectors .cnp-av-lg { width: 40px; height: 40px; font-size: 13px; }
#view-connectors .cnp-cmain {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#view-connectors .cnp-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 650;
  color: var(--tb-text);
}
#view-connectors .cnp-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
#view-connectors .cnp-cat {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--tb-text-muted);
}
#view-connectors .cnp-badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  box-sizing: border-box;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
#view-connectors .cnp-badge-on { border-color: var(--cnp-on-edge); background: var(--cnp-on-soft); color: var(--cnp-on-text); }
#view-connectors .cnp-badge-warn { border-color: var(--cnp-warn-edge); background: var(--cnp-warn-soft); color: var(--cnp-warn-text); }
#view-connectors .cnp-badge-bad { border-color: var(--cnp-bad-edge); background: var(--cnp-bad-soft); color: var(--cnp-bad-text); }
#view-connectors .cnp-badge-mut { border-color: var(--cnp-edge-hi); background: transparent; color: var(--tb-text-muted); }

/* ---- buttons ----------------------------------------------------------- */
#view-connectors .cnp-btn-p {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius-btn);
  background: var(--tb-accent);
  color: var(--white);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 140ms ease;
}
#view-connectors .cnp-btn-p:hover { background: var(--tb-accent-hover); }
#view-connectors .cnp-btn-p:disabled { opacity: .6; cursor: default; }
#view-connectors .cnp-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--cnp-edge-hi);
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--tb-text);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
#view-connectors .cnp-btn:hover:not(:disabled) {
  border-color: var(--tb-accent-border);
  background: var(--tb-accent-soft);
  color: var(--tb-accent-text);
}
#view-connectors .cnp-btn:disabled { opacity: .55; cursor: not-allowed; }
#view-connectors .cnp-btn-ghost {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--tb-text-secondary);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
}
#view-connectors .cnp-btn-ghost:hover { background: var(--tb-surface-2); color: var(--tb-text); }
#view-connectors .cnp-btn-ghost.cnp-danger { color: var(--cnp-bad-text); }
#view-connectors .cnp-btn-ghost.cnp-danger:hover { background: var(--cnp-bad-soft); }
#view-connectors .cnp-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--cnp-edge-hi);
  border-radius: var(--radius-btn);
  background: var(--cnp-card);
  color: var(--tb-text-secondary);
  cursor: pointer;
}
#view-connectors .cnp-iconbtn:hover { border-color: var(--tb-accent-border); color: var(--tb-accent-text); }
#view-connectors .cnp-btn-p:focus-visible,
#view-connectors .cnp-btn:focus-visible,
#view-connectors .cnp-btn-ghost:focus-visible,
#view-connectors .cnp-iconbtn:focus-visible,
#view-connectors .cnp-tab:focus-visible,
#view-connectors .cnp-pill:focus-visible,
#view-connectors .cnp-sw:focus-visible,
#view-connectors .cnp-x:focus-visible {
  outline: 2px solid var(--tb-accent-border);
  outline-offset: 2px;
}

/* the switch: same build as the dashboard's and the composer's */
#view-connectors .cnp-sw {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--cnp-edge-hi);
  border-radius: 999px;
  background: var(--tb-surface-2);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
#view-connectors .cnp-sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--tb-text-muted);
  transition: transform 160ms ease, background 160ms ease;
}
#view-connectors .cnp-sw[aria-checked="true"] { background: var(--cnp-on); border-color: var(--cnp-on); }
#view-connectors .cnp-sw[aria-checked="true"]::after { transform: translateX(16px); background: var(--cnp-on-ink); }

/* ---- summary panel ----------------------------------------------------- */
/* [CNX4c] The panel is a FRAME capped by its grid column (max-height:100%
   of a row that is exactly the space left on screen); its content scrolls
   inside .cnp-pn-scroll. It hugs short content and scrolls long content
   (an OAuth app: note + four fields + Test and save). */
#view-connectors .cnp-panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 24px);
  box-sizing: border-box;
  border: 1px solid var(--cnp-edge);
  border-radius: var(--radius-card);
  background: var(--cnp-card);
  overflow: hidden;
}
#view-connectors .cnp-pn-scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--cnp-edge-hi) transparent;
}
#view-connectors .cnp-pn-head { display: flex; align-items: center; gap: 10px; }
#view-connectors .cnp-pn-titles { flex: 1 1 auto; min-width: 0; }
#view-connectors .cnp-pn-titles h3 {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 700;
  border: 0;
  padding: 0;
}
#view-connectors .cnp-pn-kind { font-size: 12px; color: var(--tb-text-muted); }
#view-connectors .cnp-x {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--tb-text-muted);
  cursor: pointer;
}
#view-connectors .cnp-x:hover { background: var(--tb-surface-2); color: var(--tb-text); }
#view-connectors .cnp-pn-desc {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tb-text-secondary);
}
#view-connectors .cnp-pn-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--cnp-edge);
  border-radius: var(--radius-input);
}
#view-connectors .cnp-pn-src { font-size: 12px; color: var(--tb-text-muted); }
#view-connectors .cnp-pn-swl { font-size: 12.5px; font-weight: 600; color: var(--tb-text-secondary); }
#view-connectors .cnp-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: var(--radius-input);
  font-size: 12.5px;
  line-height: 1.45;
}
#view-connectors .cnp-note .cnp-ico { margin-top: 1px; }
#view-connectors .cnp-note-bad { border-color: var(--cnp-bad-edge); background: var(--cnp-bad-soft); color: var(--cnp-bad-text); }
#view-connectors .cnp-note-warn { border-color: var(--cnp-warn-edge); background: var(--cnp-warn-soft); color: var(--cnp-warn-text); }
#view-connectors .cnp-fields { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
#view-connectors .cnp-f { display: block; }
#view-connectors .cnp-f span {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 650;
  color: var(--tb-text-secondary);
}
#view-connectors .cnp-f input {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--cnp-edge-hi);
  border-radius: var(--radius-input);
  background: var(--tb-bg-panel);
  color: var(--tb-text);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
#view-connectors .cnp-f input::placeholder { color: var(--tb-text-muted); }
#view-connectors .cnp-f input:focus { border-color: var(--tb-accent-border); box-shadow: 0 0 0 3px var(--tb-accent-soft); }
#view-connectors .cnp-probe-note {
  margin: 12px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--cnp-bad-edge);
  border-radius: var(--radius-input);
  background: var(--cnp-bad-soft);
  color: var(--cnp-bad-text);
  font-size: 12.5px;
  line-height: 1.45;
}
#view-connectors .cnp-pn-sec {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 9px 11px;
  border: 1px solid var(--cnp-edge);
  border-radius: var(--radius-input);
  font-size: 12px;
  line-height: 1.45;
  color: var(--tb-text-muted);
}
#view-connectors .cnp-pn-acts { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
#view-connectors .cnp-pn-foot { margin: 10px 0 0; font-size: 12px; color: var(--tb-text-muted); }
/* [CNX4d] the always-on summary card beside search + pills */
#view-connectors .cnp-stats-card {
  grid-area: stats;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--cnp-edge);
  border-radius: var(--radius-card);
  background: var(--cnp-card);
}
#view-connectors .cnp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
#view-connectors .cnp-stats > div {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-input);
  background: var(--tb-surface-2);
  font-size: 11.5px;
  color: var(--tb-text-muted);
  white-space: nowrap;
}
#view-connectors .cnp-stat-n {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tb-text);
  font-variant-numeric: tabular-nums;
}
#view-connectors .cnp-stats > .is-on .cnp-stat-n { color: var(--cnp-on-text); }
#view-connectors .cnp-stats > .is-bad { background: var(--cnp-bad-soft); color: var(--cnp-bad-text); }
#view-connectors .cnp-stats > .is-bad .cnp-stat-n { color: var(--cnp-bad-text); }

/* ---- desktop tab: helper + scan placeholder --------------------------- */
#view-connectors #cnp-helper { margin-top: 14px; }
#view-connectors .cnp-helper {
  padding: 14px;
  border: 1px solid var(--cnp-edge);
  border-radius: var(--radius-card);
  background: var(--cnp-card);
}
#view-connectors .cnp-helper[data-st="online"] { border-color: var(--cnp-on-edge); }
#view-connectors .cnp-helper-top { display: flex; align-items: flex-start; gap: 12px; }
#view-connectors .cnp-helper-txt { flex: 1 1 auto; min-width: 0; }
#view-connectors .cnp-helper-txt b { font-size: 14px; font-weight: 650; }
#view-connectors .cnp-helper-txt p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tb-text-muted); }
#view-connectors .cnp-steps {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#view-connectors .cnp-steps li {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--tb-text-secondary);
}
#view-connectors .cnp-stepn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tb-surface-2);
  color: var(--tb-text);
  font-size: 11.5px;
  font-weight: 700;
}
#view-connectors .cnp-step-t { flex: 1 1 auto; min-width: 0; }
#view-connectors .cnp-dls { flex: none; display: flex; gap: 6px; }
#view-connectors .cnp-dl {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--cnp-edge-hi);
  border-radius: var(--radius-btn);
  color: var(--tb-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
#view-connectors .cnp-dl:hover { border-color: var(--tb-accent-border); color: var(--tb-accent-text); }
#view-connectors .cnp-steps .cnp-btn-p { height: 30px; font-size: 12.5px; }
#view-connectors .cnp-helper-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 14px; }
#view-connectors .cnp-linknote { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--tb-text-muted); }
#view-connectors .cnp-scan {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 14px;
  border: 1px dashed var(--cnp-edge-hi);
  border-radius: var(--radius-card);
}
#view-connectors .cnp-scan-ico {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--tb-surface-2);
  color: var(--tb-text-secondary);
}
#view-connectors .cnp-scan-txt { flex: 1 1 auto; min-width: 0; }
#view-connectors .cnp-scan-txt b { font-size: 14px; font-weight: 650; }
#view-connectors .cnp-scan-txt p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tb-text-muted); }

/* ---- empty / error / skeleton ----------------------------------------- */
#view-connectors .cnp-empty { margin: 0; padding: 18px 2px; font-size: 13px; color: var(--tb-text-muted); }
#view-connectors .cnp-empty.is-bad { color: var(--cnp-bad-text); }
#view-connectors .cnp-skel { cursor: default; }
#view-connectors .cnp-skel:hover { box-shadow: none; border-color: var(--cnp-edge); }
#view-connectors .cnp-sk {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--tb-surface-2) 0%, var(--cnp-edge) 45%, var(--tb-surface-2) 90%);
  background-size: 220% 100%;
  animation: bk-shimmer 1.4s linear infinite;
}
#view-connectors .cnp-sk-av { flex: none; width: 36px; height: 36px; border-radius: 9px; }
#view-connectors .cnp-sk-t { width: 46%; height: 12px; }
#view-connectors .cnp-sk-m { width: 70%; }
#view-connectors .cnp-sk-btn { flex: none; width: 36px; height: 20px; }

/* ---- organisation strip (own markup) ---------------------------------- */
#view-connectors #cpg-admin { margin-top: 26px; }

/* ---- narrow windows: the panel drops under the list -------------------- */
/* narrow: one column, the whole view scrolls again, nothing is capped */
@media (max-width: 980px) {
  #view-connectors.view.active { overflow-y: auto; }
  #view-connectors .cnp-page { flex: none; padding-bottom: 56px; }
  #view-connectors .cnp-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "filters" "stats" "panel" "main";
  }
  #view-connectors .cnp-main { height: auto; overflow: visible; padding: 0; }
  #view-connectors .cnp-filters { flex-wrap: wrap; }
  #view-connectors .cnp-panel { max-height: none; }
}
@media (max-width: 720px) {
  #view-connectors .cnp-page { padding: 16px 14px 56px; }
  #view-connectors .cnp-head { flex-direction: column; align-items: stretch; }
  #view-connectors .cnp-searchbox { flex: 1 1 100%; }
  #view-connectors #cpg-search { width: 100%; }
  #view-connectors .cnp-steps li,
  #view-connectors .cnp-scan { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  #view-connectors .cnp-card,
  #view-connectors .cnp-tab,
  #view-connectors .cnp-pill,
  #view-connectors .cnp-sw,
  #view-connectors .cnp-sw::after,
  #view-connectors .cnp-btn,
  #view-connectors .cnp-btn-p,
  #view-connectors #cpg-search,
  #view-connectors .cnp-f input { transition: none; }
  #view-connectors .cnp-sk { animation: none; }
}

/* [OAX1 oauth-easy-v1] the Connect card */
#view-connectors .cnp-oax { margin-top: 12px; }
#view-connectors .cnp-oax-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#view-connectors .cnp-oax-btn { height: 36px; font-size: 13.5px; }
#view-connectors .cnp-oax-own { background: none; border: 0; padding: 6px 0 0; font-size: 12.5px; color: var(--tb-text-muted); cursor: pointer; text-decoration: underline; }
#view-connectors .cnp-oax-note, #view-connectors .cnp-oax-lead { margin: 10px 0 0; font-size: 12.5px; color: var(--tb-text-secondary); }
#view-connectors .cnp-oax-own-box { margin-top: 8px; padding: 12px; border: 1px solid var(--tb-border, rgba(127,127,127,.25)); border-radius: 10px; }
#view-connectors .cnp-steps-tight { margin-top: 10px; gap: 8px; }
#view-connectors .cnp-steps-tight li { align-items: flex-start; flex-wrap: nowrap; font-size: 12.5px; line-height: 1.45; }
#view-connectors .cnp-steps-tight .cnp-stepn { margin-top: 1px; }
#view-connectors .cnp-oax-url { display: inline-block; max-width: 100%; overflow-wrap: anywhere; padding: 2px 6px; margin: 2px 4px 2px 0; border-radius: 6px; background: rgba(127,127,127,.15); font-size: 12px; }
#view-connectors .cnp-oax-copy { height: 24px; padding: 0 8px; font-size: 11.5px; vertical-align: middle; }
#view-connectors .cnp-oax-link { display: inline-block; margin: 8px 0 2px; font-size: 12.5px; }
#view-connectors .cnp-oax-err { margin: 8px 0 0; font-size: 12.5px; color: var(--tb-danger, #d14343); }
#view-connectors .cnp-oax-help { margin-top: 10px; font-size: 12.5px; color: var(--tb-text-secondary); }
#view-connectors .cnp-adv { margin-top: 14px; }
#view-connectors .cnp-adv > summary { cursor: pointer; font-size: 12.5px; color: var(--tb-text-muted); }
#view-connectors .cnp-adv-tip { margin: 8px 0 0; font-size: 12.5px; color: var(--tb-text-secondary); }
#view-connectors .cnp-f select { width: 100%; height: 36px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--tb-border, rgba(127,127,127,.35)); background: var(--tb-bg-elev, transparent); color: inherit; font: inherit; }

/* [hidden] must win over every display rule above (same specificity, so it
   has to come last). */
#view-connectors [hidden] { display: none; }