/* ============================================
   Chatbots-page — calm evolved (collapsible sections + eigen groepen)
   ============================================ */

.cb-hero {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-md); margin-bottom: var(--space-md);
}
.cb-hero-actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }

.cb-search-row { margin-bottom: var(--space-lg); }
.cb-search-row .search-input { max-width: 400px; }

.grp-block {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
  overflow: hidden;
}
.grp-head {
  display: flex; align-items: center; gap: var(--space-md);
  padding: 12px var(--space-lg);
  cursor: pointer; user-select: none;
  background: var(--bg-card);
  transition: background 120ms ease;
}
.grp-head:hover { background: var(--bg-card-hover); }
.grp-chev {
  display: inline-block; width: 14px; color: var(--text-tertiary);
  transition: transform 180ms ease; font-size: 0.9rem; line-height: 1; text-align: center;
}
.grp-block.open > .grp-head .grp-chev { transform: rotate(90deg); }
.grp-title { font-weight: 700; font-size: 0.98rem; flex: 1; }
.grp-count {
  font-family: var(--font-mono); font-size: 0.78rem;
  color: var(--text-tertiary); background: var(--bg-card-hover);
  padding: 2px 8px; border-radius: var(--radius-full); min-width: 26px; text-align: center;
}
.grp-tag {
  font-size: 0.65rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.5px; padding: 2px 6px; border-radius: var(--radius-sm);
}
.grp-tag.default { background: var(--bg-card-hover); color: var(--text-tertiary); }
.grp-tag.custom  { background: rgba(44,94,234,0.08); color: var(--brand-primary); }

.grp-body {
  border-top: 1px solid var(--border-subtle);
  display: none;
}
.grp-block.open > .grp-body { display: block; }

/* Default-section table */
.cb-tbl { width: 100%; border-collapse: collapse; }
.cb-tbl thead th {
  background: var(--bg-card-hover); border-bottom: 1px solid var(--border-subtle);
  font-size: 0.72rem; font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 10px var(--space-md); text-align: left; white-space: nowrap;
}
.cb-tbl tbody td {
  padding: 10px var(--space-md); border-bottom: 1px solid var(--border-subtle);
  font-size: 0.85rem; vertical-align: middle;
}
.cb-tbl tbody tr:last-child td { border-bottom: none; }
.cb-tbl tbody tr:hover { background: var(--bg-card-hover); }
.cb-name-cell .n { font-weight: 600; font-size: 0.88rem; }
.cb-name-cell .u { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-tertiary); }

.cb-status-select {
  font-size: 0.82rem; padding: 4px 8px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--bg-card); cursor: pointer;
}
.cb-status-select.allowed,
.cb-status-select.approved   { border-color: #C3E9D6; color: #1E9C6B; }
.cb-status-select.restricted,
.cb-status-select.warning    { border-color: #F8D9BE; color: #E5670C; }
.cb-status-select.blocked    { border-color: #F5C6C6; color: #E03F3F; }

/* Band separator tussen defaults en customs */
.cb-band {
  display: flex; align-items: baseline; gap: var(--space-md);
  padding: var(--space-lg) var(--space-md) var(--space-sm);
  border-top: 1px dashed var(--border-default);
  margin-top: var(--space-lg);
  flex-wrap: wrap;
}
.cb-band.cb-band-top {
  border-top: none;
  margin-top: 0;
  padding-top: var(--space-sm);
}
.cb-band-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-tertiary);
}
.cb-band-hint { font-size: 0.78rem; color: var(--text-tertiary); font-style: italic; }

/* Custom-group body: add-row + member list */
.cg-add-row {
  display: flex; gap: var(--space-sm); align-items: center;
  padding: 12px var(--space-lg); border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-card-hover); position: relative;
}
.cg-add-row .search-input { flex: 1; max-width: 360px; }
.cg-dropdown {
  position: fixed;
  background: var(--bg-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  max-height: 280px; overflow-y: auto; z-index: 9999;
  min-width: 320px;
}
.cg-dropdown-item {
  padding: 8px var(--space-md); display: flex; align-items: center; gap: 10px;
  cursor: pointer; font-size: 0.85rem;
}
.cg-dropdown-item:hover { background: var(--bg-card-hover); }
.cg-dropdown-item .cg-add-pill {
  font-size: 0.68rem; padding: 2px 6px; border-radius: var(--radius-full);
  background: #E4F6EE; color: #1E9C6B; margin-left: auto;
}

.cg-members { list-style: none; padding: 0; margin: 0; }
.cg-members li {
  display: flex; align-items: center; gap: var(--space-md);
  padding: 10px var(--space-lg); border-bottom: 1px solid var(--border-subtle);
  font-size: 0.85rem;
}
.cg-members li:last-child { border-bottom: none; }
.cg-members .nm { flex: 1; }
.cg-members .nm .cb-name { font-weight: 600; }
.cg-members .nm .cb-url { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-tertiary); }
.cg-members .rm {
  background: transparent; border: none; color: var(--text-tertiary);
  font-size: 0.78rem; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm);
}
.cg-members .rm:hover { color: #E03F3F; background: #FCE8E8; }

.cg-empty {
  padding: 24px var(--space-lg); text-align: center; color: var(--text-tertiary);
  font-style: italic; font-size: 0.85rem;
}

/* Dashed add-card voor "+ Nieuwe groep" */
.cg-add-card {
  background: transparent; border: 2px dashed var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-lg); text-align: center; color: var(--text-tertiary);
  font-size: 0.88rem; cursor: pointer; margin-bottom: var(--space-md);
  transition: border-color 120ms, color 120ms, background 120ms;
}
.cg-add-card:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: rgba(44,94,234,0.03); }
.cg-add-card .plus { font-size: 1.6rem; font-weight: 300; line-height: 1; display: block; margin-bottom: 2px; }

/* Section kebab (rename/delete custom group) */
.grp-kebab {
  background: transparent; border: none; color: var(--text-tertiary);
  font-size: 1rem; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm);
}
.grp-kebab:hover { background: var(--bg-card-hover); color: var(--text-primary); }

/* Allow section popovers to escape container */
#page-chatbots { overflow: visible; }

/* ============================================
   Merk-kaarten (rick-mvp) — kaart-grid met tier-ladder
   ============================================ */

.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-md);
}

.brand-card {
  background: var(--bg-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  align-self: start;
}
.brand-head {
  display: flex; align-items: center; gap: var(--space-md);
  padding: 14px var(--space-lg);
  cursor: pointer; user-select: none;
  transition: background 120ms ease;
}
.brand-head:hover { background: var(--bg-card-hover); }
.brand-logo {
  width: 34px; height: 34px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.9rem; color: #fff; flex: none;
}
.brand-headinfo { flex: 1; min-width: 0; }
.brand-name { font-weight: 600; font-size: 0.98rem; }
.brand-vendor { color: var(--text-tertiary); font-weight: 400; font-size: 0.78rem; margin-left: 5px; }
.brand-sub { font-size: 0.75rem; color: var(--text-secondary); margin-top: 2px; }
.brand-chev {
  color: var(--text-tertiary); transition: transform 180ms ease;
  font-size: 1.1rem; line-height: 1; flex: none;
}
.brand-card.open .brand-chev { transform: rotate(90deg); }
.brand-body {
  display: none; flex-direction: column; gap: var(--space-lg);
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-lg);
}
.brand-card.open .brand-body { display: flex; }

.brand-field { display: flex; flex-direction: column; }
.brand-fieldlab {
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--text-tertiary); margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.brand-hint { font-size: 0.73rem; color: var(--text-tertiary); margin-top: 7px; }

/* toggle switch (zelfde look als detectieregels) */
.rp-switch { position: relative; width: 38px; height: 22px; flex: none; display: inline-block; }
.rp-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.rp-switch span {
  position: absolute; inset: 0; background: #CBD5E1;
  border-radius: var(--radius-full); transition: background 150ms; cursor: pointer;
}
.rp-switch span::before {
  content: ''; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px; transition: transform 150ms;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.rp-switch input:checked + span { background: var(--brand-primary); }
.rp-switch input:checked + span::before { transform: translateX(16px); }
.rp-switch.sm { width: 32px; height: 18px; }
.rp-switch.sm span::before { width: 12px; height: 12px; }
.rp-switch.sm input:checked + span::before { transform: translateX(14px); }

/* status segmented control */
.rp-seg {
  display: inline-flex; border: 1px solid var(--border-default);
  border-radius: var(--radius-md); overflow: hidden; width: fit-content;
}
.rp-seg button {
  padding: 6px 13px; border: none; background: transparent;
  font: inherit; font-size: 0.8rem; cursor: pointer; color: var(--text-secondary);
}
.rp-seg button + button { border-left: 1px solid var(--border-default); }
/* monochroom blauw (rick-mvp): actieve status altijd blauw, semantiek zit in het label */
.rp-seg button.on-allowed,
.rp-seg button.on-bypass,
.rp-seg button.on-blocked {
  background: var(--brand-soft); color: var(--brand-primary); font-weight: 600;
}
/* bypass = bewust gedempte derde stand (edge case, niet prominent) */
.rp-seg button.seg-bypass { opacity: 0.55; }
.rp-seg button.seg-bypass.on-bypass { opacity: 0.85; }
.cb-bypass-warn {
  font-size: 0.72rem; color: var(--text-secondary); background: var(--bg-input);
  border-radius: var(--radius-sm); padding: 5px 8px; margin-top: 6px;
}

/* variant-keuze */
.brand-variant { display: flex; gap: 8px; flex-wrap: wrap; }
.brand-variant .vopt {
  flex: 1 1 150px; border: 1px solid var(--border-default); border-radius: var(--radius-md);
  padding: 9px 12px; font: inherit; font-size: 0.82rem; cursor: pointer;
  display: flex; align-items: center; gap: 8px; color: var(--text-secondary);
  background: var(--bg-card); text-align: left;
}
.brand-variant .vopt.on {
  border-color: var(--brand-primary); background: rgba(44,94,234,0.05);
  color: var(--text-primary); font-weight: 600;
}
.brand-variant .rd {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid var(--border-default); flex: none;
}
.brand-variant .vopt.on .rd {
  border-color: var(--brand-primary);
  background: radial-gradient(circle, var(--brand-primary) 45%, transparent 52%);
}

.det-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.68rem; color: var(--brand-primary); background: var(--brand-soft);
  border: 1px solid var(--color-info-border); border-radius: var(--radius-full);
  padding: 2px 8px; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.brand-nodet {
  font-size: 0.78rem; color: var(--text-secondary); background: var(--bg-main);
  border-radius: var(--radius-md); padding: 9px 12px;
  display: flex; gap: 8px; align-items: flex-start;
}
.brand-nodet svg { flex: none; margin-top: 1px; color: var(--text-tertiary); }

/* org-brede opties op de ChatGPT-kaart */
.brand-orgblock { border-top: 1px solid var(--border-subtle); padding-top: var(--space-lg); }
.brand-orgrow { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; padding: 6px 0; }
.brand-orgrow .t { flex: 1; }
.brand-orgrow .t small { display: block; color: var(--text-tertiary); font-size: 0.72rem; }

.brand-meta {
  display: flex; gap: 18px; align-items: center;
  font-size: 0.75rem; color: var(--text-tertiary); font-family: var(--font-mono);
}
.brand-more {
  background: none; border: none; color: var(--brand-primary);
  font: inherit; font-size: 0.75rem; cursor: pointer; padding: 0;
  margin-left: auto;
}

/* botrows in restgroepen (2 kolommen) */
.botlist {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0 32px; padding: 6px var(--space-lg) 12px;
}

.botrow {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border-subtle); font-size: 0.85rem;
}
.botrow .bn { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.botrow .bn small { color: var(--text-tertiary); font-size: 0.74rem; margin-left: 6px; font-family: var(--font-mono); font-weight: 400; }
.cb-detail-btn {
  background: transparent; border: none; color: var(--text-tertiary);
  font-size: 1rem; cursor: pointer; padding: 2px 6px; border-radius: var(--radius-sm);
}
.cb-detail-btn:hover { background: var(--bg-card-hover); color: var(--text-primary); }

/* Monochroom blauwe status-badges (rick-mvp) — semantiek in het label */
.cb-badge {
  font-size: 0.72rem; font-weight: 600; border-radius: var(--radius-full);
  padding: 3px 10px; white-space: nowrap; flex: none;
}
.cb-badge.allowed    { color: var(--brand-primary); background: var(--brand-soft); }
.cb-badge.restricted { color: var(--brand-primary); background: var(--bg-card); box-shadow: inset 0 0 0 1px var(--color-info-border); }
.cb-badge.blocked    { color: var(--text-secondary); background: var(--bg-input); text-decoration: line-through; text-decoration-color: rgba(122,128,152,0.55); }

/* Rij is klikbaar → opent de opties-modal */
.botrow { cursor: pointer; }
.botrow:hover { background: var(--bg-card-hover); }

/* ============================================
   Merk-modals (rick-mvp): per merk een eigen ontwerpvariant
   Paneel (ChatGPT) · Checklist (Claude) · Minimaal (Gemini) · Duo (Copilot)
   ============================================ */

.cbm { display: flex; flex-direction: column; gap: 14px; }
.cbm-lab {
  font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-tertiary); margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}
.cbm-meta {
  display: flex; align-items: center; gap: 14px; margin-top: 4px;
  padding-top: 12px; border-top: 1px solid var(--border-subtle);
  font-size: 0.74rem; color: var(--text-tertiary); font-family: var(--font-mono);
}
.cbm-meta .brand-more { margin-left: auto; }

/* Variant-kaarten (uniform winnend ontwerp): sub-kaart per variant */
.cbm-duocards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .cbm-duocards { grid-template-columns: 1fr; } }
.cbm-duocard {
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  padding: 13px 14px; background: var(--bg-card);
}
.cbm-duocard.active {
  border-color: rgba(44, 94, 234, 0.45);
  box-shadow: 0 0 0 1px rgba(44, 94, 234, 0.18), 0 4px 14px rgba(44, 94, 234, 0.08);
}
.cbm-duocard.inactive { background: var(--bg-card-hover); }
.cbm-duocard.inactive .rp-seg { opacity: 0.75; }
.cbm-duodomain {
  font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-tertiary);
  margin: -4px 0 10px;
}
.cbm-activebadge {
  font-size: 0.62rem; font-weight: 700; color: var(--brand-primary);
  background: var(--brand-soft); border-radius: var(--radius-full);
  padding: 2px 8px; letter-spacing: 0.03em;
}
.cbm-activate {
  margin-top: 10px; width: 100%;
  background: none; border: 1px dashed var(--border-default); border-radius: var(--radius-md);
  padding: 7px 10px; font: inherit; font-size: 0.78rem; color: var(--brand-primary);
  cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast);
}
.cbm-activate:hover { border-color: var(--brand-primary); background: rgba(44, 94, 234, 0.04); }

/* Geavanceerde opties: link naar tweede modal */
.cbm-adv { border-top: 1px solid var(--border-subtle); padding-top: 4px; }
.cbm-advbtn {
  display: flex; align-items: center; gap: 7px; width: 100%;
  background: none; border: none; padding: 8px 0; font: inherit;
  font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); cursor: pointer;
}
.cbm-advbtn:hover { color: var(--brand-primary); }
.cbm-advbtn .chev { transition: transform 180ms ease; color: var(--text-tertiary); font-size: 1rem; line-height: 1; }
.cbm-advbtn:hover .chev { transform: translateX(3px); }

/* Geavanceerde-opties-modal: terugknop + lijst */
.cbm-back {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  background: none; border: none; padding: 0 0 2px; font: inherit;
  font-size: 0.82rem; font-weight: 600; color: var(--brand-primary); cursor: pointer;
}
.cbm-back .arr { transition: transform 180ms ease; display: inline-block; }
.cbm-back:hover .arr { transform: translateX(-3px); }
.cbm-advlist { display: flex; flex-direction: column; }
.cbm-switchrow {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--border-subtle);
  font-size: 0.85rem; cursor: pointer;
}
.cbm-switchrow:last-child { border-bottom: none; }
.cbm-switchrow .t small { display: block; color: var(--text-tertiary); font-size: 0.72rem; margin-top: 1px; }
/* Vergrendelde per-bot upload-toggle (org-breed uploaden staat uit) */
.cbm-switchrow:has(input:disabled) { opacity: 0.55; cursor: default; }

/* upload-matrix per accounttype (geavanceerde opties, tier-bots) */
.cbm-advtier + .cbm-advtier { margin-top: 12px; border-top: 1px solid var(--border-subtle); padding-top: 12px; }
.cbm-advtier .cbm-lab { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cbm-advtier .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cbm-advtier.tdimmed { opacity: 0.55; }

/* Org-brede instellingen-kaart bovenaan de AI-Chatbots-pagina */
.cb-orgwide {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 4px 16px;
}

/* Kaarten zijn nu compact (alles zit in de modal) */
.brand-card { cursor: pointer; }
.brand-card:hover { box-shadow: 0 1px 3px rgba(16,19,32,0.05), 0 6px 18px rgba(16,19,32,0.05), 0 0 0 1px var(--border-hover); }

/* Accounttype-kaarten (ChatGPT/Claude): accounttypes als variantkaarten */
.cbm-tiercards { grid-template-columns: 1fr 1fr; }
/* Kop van de tier-kaart: label links, tandwiel (per-tier upload-instellingen) rechts.
   Label-margin op 0 zodat het tandwiel exact op de labellijn valt. */
.cbm-tierhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cbm-tierhead .cbm-lab { margin-bottom: 0; }
.cbm-tiergear {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0;
  /* Negatieve verticale marge klapt de layout-hoogte in (klikvlak blijft 24px),
     zodat het label de regelhoogte bepaalt en het tandwiel op de labellijn valt. */
  margin: -6px -5px -6px 0;
  background: none; border: none; border-radius: var(--radius-sm);
  color: var(--text-tertiary); cursor: pointer;
  transition: color 140ms ease, background 140ms ease;
}
.cbm-tiergear:hover { color: var(--brand-primary); background: rgba(44, 94, 234, 0.08); }
.cbm-tiergear:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 1px; }
.cbm-tiercard .cbm-lab { display: flex; align-items: center; gap: 8px; }
.cbm-tiercard .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cbm-tiercard .rp-seg { width: 100%; display: flex; }
.cbm-tiercard .rp-seg button { flex: 1; }
.cbm-tiercard.tblocked { background: var(--bg-card-hover); }
.cbm-tiercard.tblocked .cbm-lab { color: var(--text-tertiary); }
.cbm-tiercard:not(.tblocked) {
  border-color: rgba(44, 94, 234, 0.35);
  box-shadow: 0 0 0 1px rgba(44, 94, 234, 0.12);
}

/* Merk-brede basisstatus-regel onder de accounttype-kaarten */
.cbm-basisrow {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md); flex-wrap: wrap;
}
.cbm-basisrow .t { font-size: 0.85rem; font-weight: 600; }
.cbm-basisrow .t small { display: block; color: var(--text-tertiary); font-size: 0.72rem; font-weight: 400; margin-top: 1px; }