/* Connect+ Dashboard Editor - left Widget Library rail (262px) and right
   Widget Settings rail (292px). Widths are exact per README. */

.lib-rail {
  width: 272px;
  flex: none;
  border-right: 1px solid var(--ln);
  background: var(--sf);
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-rail {
  width: 292px;
  flex: none;
  border-left: 1px solid var(--ln);
  background: var(--sf);
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}


.lib-cat-label {
  font: 600 var(--fs-xs) var(--font-body);
  color: var(--tx2);
  margin: 8px 0 2px;
}

.lib-card {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  background: var(--sf2);
  border: 1px solid var(--ln);
  border-radius: var(--r-md);
  cursor: grab;
  user-select: none;
}
.lib-card:hover { border-color: var(--ac); }
.lib-card .lib-card-icon {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--acT);
  color: var(--ac-ink);
  display: grid;
  place-items: center;
  font: 600 11px var(--font-body);
  flex: none;
}
/* Live miniature of the widget (design prompt §3). The inner card renders at
   its natural size and is scaled down, so the thumbnail matches the real thing
   instead of being a second, drift-prone rendering. pointer-events:none keeps
   the whole tile the drag handle - the preview must not swallow the gesture. */
.lib-card .lib-card-thumb {
  width: 96px;
  height: 56px;
  flex: none;
  overflow: hidden;
  border-radius: 6px;
  pointer-events: none;
  position: relative;
}
.lib-card .lib-card-thumb > .widget-card-outer {
  position: absolute;
  top: 0;
  left: 0;
  width: 288px;
  height: 168px;
  transform: scale(0.3333);
  transform-origin: top left;
}
.lib-card .lib-card-label {
  font: 600 var(--fs-md) var(--font-body);
  color: var(--tx);
  flex: 1;
  min-width: 0;
}
.lib-card .lib-card-sub {
  font: 500 var(--fs-xs) var(--font-body);
  color: var(--tx2);
  display: block;
}

.settings-rail h3 {
  margin: 0;
  font: 600 13px var(--font-body);
  color: var(--tx);
}
.settings-field { display: flex; flex-direction: column; gap: 5px; }
.settings-field label {
  font: 600 var(--fs-xs) var(--font-body);
  color: var(--tx2);
}
.settings-field select,
.settings-field input {
  background: var(--sf2);
  border: 1px solid var(--ln);
  color: var(--tx);
  border-radius: 7px;
  padding: 7px 9px;
  font: 600 12px var(--font-body);
}
.settings-actions { display: flex; gap: 8px; margin-top: 6px; }
.settings-rail .no-sel {
  color: var(--tx2);
  font: 600 12px var(--font-body);
  text-align: center;
  margin-top: 30px;
}

/* Tray tiles are still pictures: no pulsing live dot, no hover affordances. */
.lib-card-thumb * { animation: none !important; }

/* Column flex containers shrink their children when the list overflows; a
   shrunken search box or tile is a defect, so nothing in the tray flexes. */
.lib-rail > *, .settings-rail > * { flex: none; }

/* ---- Widget library tabs and states ---- */
.lib-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.lib-none { margin: 0; color: var(--tx2); font: 450 var(--fs-sm) / 1.4 var(--font-body); }
.lib-cat-label { font: 500 var(--fs-xs) var(--font-body); color: var(--tx2); }

/* ---- Widget settings rail controls (themed: they were browser defaults) ---- */
.settings-rail button {
  height: var(--ctl-h);
  padding: 0 12px;
  border: 1px solid var(--ln);
  border-radius: var(--r-pill);
  background: var(--sf2);
  color: var(--tx);
  font: 500 var(--fs-sm) var(--font-body);
  cursor: pointer;
}
.settings-rail button:hover { background: var(--row-hover); }
.settings-rail button.primary { background: var(--ac); border-color: transparent; color: var(--ac-on); font-weight: 600; }
.settings-rail button.primary:hover { filter: brightness(1.08); background: var(--ac); }
.settings-rail button.danger { color: var(--red-ink); }
.settings-rail select,
.settings-rail input:not([type="checkbox"]) { height: var(--ctl-h); font: 450 var(--fs-sm) var(--font-body); }

/* Users and queues checklists: a real row (box, name, id), a box that is a box. */
.settings-rail input[type="checkbox"] {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  flex: none;
  accent-color: var(--ac);
  cursor: pointer;
}
.filter-checklist {
  max-height: 168px;
  overflow-y: auto;
  margin-top: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid var(--ln);
  border-radius: var(--r-md);
}
.fl-row { display: flex; align-items: center; gap: var(--sp-2); min-height: 28px; cursor: pointer; }
.fl-name { flex: 1; min-width: 0; font: 500 var(--fs-sm) var(--font-body); color: var(--tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-id { font: 450 var(--fs-xs) var(--font-body); color: var(--tx2); font-variant-numeric: tabular-nums; }
.filter-empty { margin: var(--sp-1) 0; font: 450 var(--fs-xs) / 1.4 var(--font-body); color: var(--tx2); }