@import url("/static/design/tokens/colors.css");
@import url("/static/design/tokens/typography.css");
@import url("/static/design/tokens/spacing.css");


/* Bobby chat feature styles migrated from the original chat page. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue:        #1d5541;
  --blue-hover:  #174a38;
  --blue-light:  #e8f0ed;
  --blue-border: #b8d0c8;
  --bg:          #fcf8f2;
  --card:        #ffffff;
  --text:        #112337;
  --muted:       #585e6a;
  --border:      #e8e0d4;
  --red-bg:      #fee2e2;
  --red-border:  #fca5a5;
  --red-text:    #b91c1c;
  --amber-bg:    #fffbeb;
  --amber-border:#fde68a;
  --amber-text:  #92400e;
  --green:       #1d5541;
  --violet:      #aa9d87;
  --tan:         #f3c9a1;
  --tan-light:   #fdf3e9;
}

html, body { height: 100%; font-family: "new-atten", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 15px; color: var(--text); background: var(--bg); }
body { display: flex; flex-direction: column; overflow: hidden; }

/* ── Header ─────────────────────────────────────────── */
header {
  background: var(--blue); color: #fff;
  flex-shrink: 0; padding: 0 1.5rem; height: 58px;
  display: flex; align-items: center;
  box-shadow: 0 2px 8px rgba(28,85,65,.25); z-index: 10;
}
.header-inner { width: 100%; max-width: 960px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.logo { display: flex; align-items: center; gap: .875rem; }
.logo-pill { background: #fff; border-radius: 8px; padding: 3px 8px; display: flex; align-items: center; height: 36px; }
.logo-pill img { height: 28px; width: auto; display: block; }
.logo-divider { width: 1px; height: 24px; background: rgba(255,255,255,.3); }
.logo-app { display: flex; flex-direction: column; }
.logo-app-name  { font-size: .95rem; font-weight: 700; letter-spacing: .01em; line-height: 1.2; }
.logo-app-phase { font-size: .65rem; opacity: .7; letter-spacing: .04em; text-transform: uppercase; }
.role-wrap  { display: flex; align-items: center; gap: .45rem; font-size: .78rem; }
.role-wrap label { opacity: .75; white-space: nowrap; }
#role-select { background: var(--white); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: 6px; padding: .28rem .5rem; font-size: .76rem; cursor: pointer; outline: none; }
#role-select option { background: var(--white); color: var(--text-primary); }

/* ── Nav bar ──────────────────────────────────────────── */
#nav-bar { flex-shrink: 0; background: var(--card); border-bottom: 1px solid var(--border); padding: 0 1.5rem; }
.nav-inner { max-width: 960px; margin: 0 auto; display: flex; }
.nav-link { display: block; text-decoration: none; border-bottom: 2px solid transparent; padding: .575rem 1.1rem; font-size: .865rem; font-weight: 500; color: var(--muted); transition: color .12s, border-color .12s; margin-bottom: -1px; }
.nav-link:hover { color: var(--blue); }
.nav-link.active { color: var(--blue); border-bottom-color: var(--tan); }

/* ── Chat view ───────────────────────────────────────── */
#view-chat { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0; }

#chat-area { flex: 1; overflow-y: auto; padding: 1.25rem 1rem .5rem; scroll-behavior: smooth; }
#chat-inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: .875rem; }

.welcome-card { background: var(--tan-light); border: 1px solid var(--tan); border-radius: 10px; padding: 1rem 1.125rem; font-size: .875rem; line-height: 1.65; }
.welcome-card strong { color: var(--blue); }
.dlp-notice { margin-top: .5rem; background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber-text); border-radius: 6px; padding: .35rem .7rem; font-size: .775rem; display: flex; align-items: flex-start; gap: .35rem; }

.msg { display: flex; gap: .625rem; align-items: flex-start; }
.msg.user { flex-direction: row-reverse; }
.avatar { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 700; margin-top: 2px; letter-spacing: .02em; }
.msg.assistant .avatar { background: var(--tan-light); border: 1px solid var(--tan); color: var(--blue); }
.msg.user      .avatar { background: var(--blue);       color: #fff; }
.msg-body { display: flex; flex-direction: column; gap: .3rem; max-width: 76%; }
.msg.user .msg-body { align-items: flex-end; }
.bubble { padding: .625rem .9rem; border-radius: 4px 12px 12px 12px; line-height: 1.6; font-size: .9rem; word-break: break-word; white-space: pre-wrap; }
.msg.assistant .bubble { background: var(--card); border: 1px solid var(--border); white-space: normal; }
.msg.user .bubble { background: var(--blue); color: #fff; border-radius: 12px 4px 12px 12px; }

/* Markdown-opmaak binnen assistent-bubbles */
.msg.assistant .bubble > :first-child { margin-top: 0; }
.msg.assistant .bubble > :last-child { margin-bottom: 0; }
.msg.assistant .bubble p { margin: .4rem 0; }
.msg.assistant .bubble ul,
.msg.assistant .bubble ol { margin: .4rem 0; padding-left: 1.3rem; }
.msg.assistant .bubble li { margin: .15rem 0; }
.msg.assistant .bubble h3,
.msg.assistant .bubble h4,
.msg.assistant .bubble h5,
.msg.assistant .bubble h6 { margin: .6rem 0 .3rem; line-height: 1.3; }
.msg.assistant .bubble h3 { font-size: 1rem; }
.msg.assistant .bubble h4 { font-size: .92rem; }
.msg.assistant .bubble h5,
.msg.assistant .bubble h6 { font-size: .88rem; }
.msg.assistant .bubble code { background: var(--surface-accent); padding: .08rem .3rem; border-radius: 4px; font-size: .85em; }
.chat-table { border-collapse: collapse; width: 100%; margin: .5rem 0; font-size: .85rem; }
.chat-table th,
.chat-table td { border: 1px solid var(--border); padding: .35rem .55rem; text-align: left; vertical-align: top; }
.chat-table thead th { background: var(--surface-accent); font-weight: 600; }
.chat-table tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .025); }
/* Cijferkolommen (alles na de eerste) rechts uitlijnen voor leesbaarheid */
.chat-table td:not(:first-child),
.chat-table th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.sources { display: flex; flex-wrap: wrap; gap: .3rem; padding: 0 .2rem; }
.src-tag { font-size: .7rem; background: var(--tan-light); color: var(--blue); border: 1px solid var(--tan); padding: .15rem .45rem; border-radius: 4px; font-weight: 500; }
.feedback-row { display: flex; align-items: center; gap: .3rem; padding: 0 .2rem; min-height: 28px; }
.feedback-btn { border: 1px solid var(--border); background: #fff; color: var(--muted); border-radius: 6px; min-width: 32px; height: 28px; padding: 0 .45rem; font-size: .78rem; cursor: pointer; transition: border-color .12s, color .12s, background .12s; }
.feedback-btn:hover:not(:disabled) { border-color: var(--blue); color: var(--blue); background: var(--blue-light); }
.feedback-btn:disabled { opacity: .55; cursor: default; }
.feedback-reason { border: 1px solid var(--border); background: #fff; color: var(--muted); border-radius: 6px; height: 28px; padding: 0 .35rem; font-size: .72rem; max-width: 170px; }
.feedback-status { color: var(--muted); font-size: .72rem; }
.err-banner { display: flex; align-items: flex-start; gap: .5rem; background: var(--red-bg); border: 1px solid var(--red-border); color: var(--red-text); border-radius: 8px; padding: .65rem .875rem; font-size: .85rem; line-height: 1.5; max-width: 76%; }
.dots { display: flex; gap: 5px; padding: .15rem 0; }
.dots span { width: 7px; height: 7px; background: var(--muted); border-radius: 50%; animation: bounce 1.1s infinite ease-in-out; }
.dots span:nth-child(2) { animation-delay: .18s; }
.dots span:nth-child(3) { animation-delay: .36s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }

footer { flex-shrink: 0; background: var(--card); border-top: 1px solid var(--border); padding: .75rem 1rem .875rem; }
.input-row { max-width: 860px; margin: 0 auto; display: flex; gap: .5rem; align-items: flex-end; }
#q { flex: 1; padding: .55rem .85rem; border: 1px solid var(--border); border-radius: 10px; font-size: .9rem; font-family: inherit; resize: none; max-height: 120px; line-height: 1.55; outline: none; transition: border-color .15s, box-shadow .15s; overflow-y: auto; }
#q:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
#send { background: var(--blue); color: #fff; border: none; border-radius: 10px; padding: .55rem 1.15rem; font-size: .875rem; font-weight: 600; cursor: pointer; transition: background .15s, opacity .15s; white-space: nowrap; height: 38px; }
#send:hover:not(:disabled) { background: var(--blue-hover); }
#send:disabled { opacity: .45; cursor: not-allowed; }
.hint { max-width: 860px; margin: .35rem auto 0; font-size: .7rem; color: var(--muted); text-align: center; }

/* ── Learning mode ───────────────────────────────────── */
#learn-toggle {
  display: none; /* shown via JS when admin */
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 6px;
  padding: .28rem .65rem; font-size: .76rem; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
  white-space: nowrap;
}
#learn-toggle:hover { background: rgba(255,255,255,.22); }
#learn-toggle.on { background: var(--tan); color: var(--blue); border-color: var(--tan); }
.header-action {
  background: rgba(255,255,255,.12); color: #fff;
  border: 1px solid rgba(255,255,255,.3); border-radius: 6px;
  padding: .28rem .65rem; font-size: .76rem; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.header-action:hover { background: rgba(255,255,255,.22); }

.improvement-panel {
  display: none; position: fixed; right: 18px; top: 76px; z-index: 20;
  width: min(420px, calc(100vw - 28px)); background: var(--card);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(17,35,55,.18); padding: 1rem;
}
.improvement-panel.visible { display: block; }
.improvement-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.improvement-head h2 { font-size: 1rem; color: var(--blue); font-weight: 700; }
.close-btn { border: 1px solid var(--border); background: #fff; border-radius: 6px; width: 30px; height: 28px; cursor: pointer; color: var(--muted); }
.improvement-form { display: flex; flex-direction: column; gap: .65rem; }
.improvement-form input,
.improvement-form textarea,
.improvement-form select {
  width: 100%; border: 1px solid var(--border); border-radius: 7px;
  padding: .5rem .6rem; font: inherit; font-size: .84rem; outline: none;
}
.improvement-form textarea { min-height: 78px; resize: vertical; }
.improvement-form input:focus,
.improvement-form textarea:focus,
.improvement-form select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-light); }
.improvement-actions { display: flex; justify-content: flex-end; gap: .5rem; align-items: center; }
.improvement-submit { background: var(--blue); color: #fff; border: none; border-radius: 7px; padding: .48rem .85rem; font-weight: 600; cursor: pointer; }
.improvement-submit:disabled { opacity: .5; cursor: not-allowed; }
.improvement-status { font-size: .76rem; color: var(--muted); margin-right: auto; }
.review-panel {
  display: none; position: fixed; right: 18px; top: 76px; z-index: 21;
  width: min(620px, calc(100vw - 28px)); max-height: calc(100vh - 96px); overflow:auto;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 12px 40px rgba(17,35,55,.18); padding: 1rem;
}
.review-panel.visible { display: block; }
.review-list { display: flex; flex-direction: column; gap: .75rem; }
.review-item { border: 1px solid var(--border); border-radius: 8px; padding: .8rem; background: #fff; }
.review-title { font-weight: 700; color: var(--blue); margin-bottom: .25rem; }
.review-meta { color: var(--muted); font-size: .75rem; margin-bottom: .45rem; }
.review-text { font-size: .84rem; line-height: 1.5; margin-top: .35rem; }
.review-actions { display: grid; grid-template-columns: 130px 1fr; gap: .45rem; margin-top: .65rem; }
.review-actions select,
.review-actions textarea { width: 100%; border: 1px solid var(--border); border-radius: 7px; padding: .45rem .55rem; font: inherit; font-size: .8rem; }
.review-actions textarea { min-height: 58px; resize: vertical; grid-column: 1 / -1; }
.review-actions button { justify-self: start; }
.draft-list { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.draft-item { border: 1px solid var(--border); border-radius: 8px; padding: .8rem; background: #fff; }
.draft-text { font-size: .82rem; line-height: 1.5; color: var(--text); white-space: pre-wrap; margin: .45rem 0; }
.draft-actions { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.draft-actions select { border: 1px solid var(--border); border-radius: 7px; padding: .42rem .5rem; font: inherit; font-size: .8rem; min-width: 240px; }

.learn-banner {
  display: none;
  background: linear-gradient(135deg, #fdf3e9, #fff8f0);
  border: 1.5px solid var(--tan); border-radius: 10px;
  padding: .875rem 1.125rem; font-size: .875rem; line-height: 1.65;
}
.learn-banner.visible { display: block; }
.learn-banner strong { color: var(--blue); }
.learn-banner .learn-hint { margin-top: .4rem; font-size: .8rem; color: var(--muted); }

/* Learn bubbles */
.msg.learn-save .bubble {
  background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46;
  border-radius: 4px 12px 12px 12px;
}
.msg.learn-save .avatar { background: #6ee7b7; border-color: #6ee7b7; color: #065f46; }
.msg.learn-question .bubble {
  background: var(--amber-bg); border: 1px solid var(--amber-border);
  color: var(--amber-text); border-radius: 4px 12px 12px 12px;
}
.msg.learn-question .avatar { background: var(--amber-bg); border: 1px solid var(--amber-border); color: var(--amber-text); }
.msg.learn-reject .bubble {
  background: var(--red-bg); border: 1px solid var(--red-border);
  color: var(--red-text); border-radius: 4px 12px 12px 12px;
}
.learn-file-badge {
  display: inline-block; font-size: .7rem; background: #d1fae5; color: #065f46;
  border: 1px solid #6ee7b7; border-radius: 4px; padding: .1rem .4rem;
  margin-left: .4rem; font-weight: 600; vertical-align: middle;
}
.msg.user.learn-msg .bubble { background: #92400e; }

/* Scrollbar */
#chat-area::-webkit-scrollbar { width: 5px; }
#chat-area::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
/* End Bobby chat feature styles. */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --green: var(--brand-primary);
  --green-hover: var(--navy-800);
  --green-soft: var(--gold-100);
  --bg: var(--surface-page);
  --card: var(--surface-card);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --border: var(--border-default);
  --tan: var(--brand-accent);
  --red: var(--danger-600);
  --red-bg: var(--danger-100);
  --amber: var(--warning-600);
  --amber-bg: var(--warning-100);
  --ok: var(--success-600);
  --ok-bg: var(--success-100);
  --blue: var(--brand-primary);
  --blue-hover: var(--navy-800);
  --blue-light: var(--surface-accent);
  --blue-border: var(--border-accent);
  --red-border: var(--danger-500);
  --red-text: var(--danger-600);
  --amber-border: var(--gold-300);
  --amber-text: var(--warning-600);
  --tan-light: var(--surface-accent);
  --violet: var(--brand-accent-ink);
  --sidebar-width: 236px;
  --sidebar-collapsed: 72px;
  --topbar-height: 64px;
}

html, body {
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text);
  background: var(--bg);
}

body {
  display: block;
  margin: 0;
  overflow: auto;
  padding-left: var(--sidebar-width);
  transition: padding-left var(--duration-base) var(--ease-standard);
}

body.sidebar-collapsed { padding-left: var(--sidebar-collapsed); }

.studio-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 30;
  width: var(--sidebar-width);
  background: var(--paper-50);
  border-right: 1px solid var(--paper-300);
  display: flex;
  flex-direction: column;
  transition: width var(--duration-base) var(--ease-standard);
}

body.sidebar-collapsed .studio-sidebar { width: var(--sidebar-collapsed); }

.sidebar-head {
  padding: .85rem .75rem;
  border-bottom: 1px solid var(--paper-300);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
}

.tenant-switcher {
  min-width: 0;
  border: 1px solid var(--paper-300);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: .55rem .6rem;
  flex: 1;
  box-shadow: var(--shadow-xs);
}

.tenant-label {
  display: block;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tenant-name {
  display: block;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: .12rem;
}

.tenant-selector {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-size: .9rem;
  outline: none;
  cursor: pointer;
  padding: 0;
}

.collapse-btn {
  width: 34px;
  height: 34px;
  border: 1px solid var(--paper-300);
  background: var(--white);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--brand-primary);
  font-weight: var(--weight-semibold);
}

.sidebar-nav {
  padding: .75rem .55rem;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  flex: 1;
  min-height: 0;
}

.side-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 38px;
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-decoration: none;
  padding: .45rem .62rem;
  font-weight: var(--weight-medium);
}

.sidebar-section-label {
  display: block;
  margin: .9rem .62rem .28rem;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.side-link:hover,
.side-link.active {
  background: var(--surface-accent);
  color: var(--brand-primary);
}

.side-icon {
  width: 22px;
  text-align: center;
  flex: 0 0 22px;
  color: var(--brand-accent-ink);
}

body.sidebar-collapsed .tenant-switcher,
body.sidebar-collapsed .side-text,
body.sidebar-collapsed .sidebar-section-label,
body.sidebar-collapsed .account-details,
body.sidebar-collapsed .account-role { display: none; }
body.sidebar-collapsed .sidebar-head { justify-content: center; }
body.sidebar-collapsed .side-link { justify-content: center; padding: .45rem; }

.sidebar-account-wrap {
  position: relative;
  margin: auto .55rem .75rem;
}

.platform-link {
  margin-bottom: .55rem;
  border: 1px solid var(--border-subtle);
  background: var(--paper-100);
}

.platform-section-label {
  margin-top: 0;
}

.sidebar-account {
  width: 100%;
  padding: .55rem;
  border: 1px solid var(--paper-300);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow-xs);
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  grid-template-areas:
    "avatar details"
    "avatar role";
  gap: .12rem .55rem;
  align-items: center;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.sidebar-account:hover,
.sidebar-account[aria-expanded="true"] {
  border-color: var(--border-accent);
  background: var(--surface-accent);
}

.account-avatar {
  grid-area: avatar;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .74rem;
  font-weight: var(--weight-semibold);
}

.account-details {
  grid-area: details;
  min-width: 0;
}

.account-name,
.account-email {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account-name {
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
  font-size: .86rem;
}

.account-email {
  color: var(--text-muted);
  font-size: .72rem;
  margin-top: .08rem;
}

.account-role {
  grid-area: role;
  justify-self: start;
  color: var(--brand-accent-ink);
  font-size: .68rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

body.sidebar-collapsed .sidebar-account {
  display: flex;
  justify-content: center;
  padding: .45rem;
}

body.sidebar-collapsed .sidebar-account-wrap {
  margin-inline: .55rem;
}

body.sidebar-collapsed .platform-link {
  justify-content: center;
}

.account-menu {
  display: none;
  position: absolute;
  left: calc(100% + .55rem);
  bottom: 0;
  z-index: 50;
  width: 220px;
  padding: .7rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

body.account-menu-open .account-menu { display: block; }

.account-menu label,
.account-menu-label {
  display: block;
  margin: 0 0 .35rem;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.account-menu select {
  width: 100%;
}

.account-menu-value {
  margin: 0;
  color: var(--text-primary);
  font-weight: var(--weight-semibold);
}

.account-logout {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  margin-top: .6rem;
  padding: .5rem .6rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-primary);
  font: inherit;
  font-size: .85rem;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.account-logout:hover {
  background: var(--red-bg, #fee2e2);
  border-color: var(--red-border, #fca5a5);
  color: var(--red-text, #b91c1c);
}
.account-logout .side-icon { display: inline-flex; }
.account-logout .side-icon svg { width: 16px; height: 16px; }

header {
  min-height: var(--topbar-height);
  background: var(--white);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-xs);
  position: sticky;
  top: 0;
  z-index: 10;
}

.header-inner {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  color: var(--text-primary);
  text-decoration: none;
}

.brand > div {
  min-width: 0;
}

.brand img,
.studio-brand-mark {
  height: 30px;
  width: auto;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
}

.brand-title {
  display: block;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
}

.brand-sub {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.header-actions {
  display: flex;
  gap: .5rem;
  align-items: center;
  flex-wrap: wrap;
}

.ghost-btn,
.header-action,
#learn-toggle {
  background: var(--white);
  border: 1px solid var(--border-default);
  color: var(--brand-primary);
  border-radius: var(--radius-sm);
  padding: .38rem .7rem;
  cursor: pointer;
  font-weight: var(--weight-medium);
  text-decoration: none;
}

.ghost-btn:hover,
.header-action:hover,
#learn-toggle:hover {
  border-color: var(--border-accent);
  background: var(--surface-accent);
}

.ghost-btn.active,
.header-action.active,
#learn-toggle.on {
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-color: var(--brand-primary);
}

#role-select,
select,
input,
textarea {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  outline: none;
  background: var(--white);
  color: var(--text-primary);
  font: inherit;
}

#role-select { padding: .38rem .55rem; }

select:focus,
input:focus,
textarea:focus,
#role-select:focus {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-focus);
}

main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 1.2rem;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
}

h1 {
  font-size: 1.25rem;
  color: var(--brand-primary);
  margin: 0 0 .35rem;
  letter-spacing: 0;
}

h2 {
  font-size: 1rem;
  color: var(--brand-primary);
  margin: 0 0 .7rem;
  letter-spacing: 0;
}

.muted { color: var(--text-secondary); font-size: .86rem; line-height: 1.5; }
.grid { display: grid; grid-template-columns: minmax(360px, 440px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.panel { background: var(--card); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: 1rem; min-width: 0; }
.detail-drawer { position: sticky; top: calc(var(--topbar-height) + 1rem); max-height: calc(100vh - var(--topbar-height) - 2rem); overflow: auto; }
.stack { display: flex; flex-direction: column; gap: .7rem; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1rem; }
.section-head:first-child { margin-top: 0; }
.field { display: flex; flex-direction: column; gap: .28rem; }
label { color: var(--text-secondary); font-size: .78rem; font-weight: var(--weight-semibold); }
input, textarea, select { width: 100%; padding: .54rem .62rem; min-width: 0; }
/* Range-inputs (bv. contextvenster-slider) mogen niet de generieke input-box krijgen. */
input[type="range"] {
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  accent-color: var(--brand-primary);
  cursor: pointer;
  height: 1.4rem;
}
input[type="range"]:focus { box-shadow: none; border: none; }
textarea { resize: vertical; line-height: 1.5; }
.knowledge-page textarea#approved-text { min-height: 420px; }
.knowledge-actions {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(180px, 240px) auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}
.knowledge-collection-filter {
  height: 42px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--white);
}
.knowledge-filters {
  display: inline-flex;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--white);
}
.segmented {
  border: none;
  border-right: 1px solid var(--border-default);
  background: var(--white);
  color: var(--text-secondary);
  padding: .58rem .78rem;
  font-weight: var(--weight-medium);
  cursor: pointer;
}
.segmented:last-child { border-right: none; }
.segmented.active,
.segmented:hover {
  background: var(--brand-primary);
  color: var(--text-inverse);
}
.knowledge-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 1rem;
  align-items: start;
}
.knowledge-overview {
  grid-column: 1;
  padding: 0;
  overflow: hidden;
}
.knowledge-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--border-subtle);
}
.knowledge-stats div {
  padding: .8rem 1rem;
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
}
.knowledge-stats div:last-child { border-right: none; }
.knowledge-stats strong {
  display: block;
  color: var(--brand-primary);
  font-size: 1.2rem;
}
.knowledge-stats span {
  color: var(--text-secondary);
  font-size: .75rem;
}
.knowledge-table-head,
.knowledge-row {
  display: grid;
  grid-template-columns: minmax(280px, 1.25fr) minmax(170px, .75fr) 150px 44px;
  gap: 1rem;
  align-items: center;
}
.knowledge-table-head {
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-weight: var(--weight-semibold);
  padding: .8rem 1rem;
}
.knowledge-row {
  min-height: 74px;
  padding: .65rem 1rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--white);
  cursor: pointer;
}
.knowledge-row:hover,
.knowledge-row.active {
  background: var(--surface-accent);
}
.knowledge-main {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  min-width: 0;
}
.knowledge-main strong,
.knowledge-main small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.knowledge-main strong {
  color: var(--text-primary);
  font-size: .96rem;
}
.knowledge-main small,
.knowledge-meta {
  color: var(--text-secondary);
  font-size: .8rem;
}
.knowledge-icon {
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-accent);
  background: var(--surface-accent);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-semibold);
  font-size: .78rem;
}
.knowledge-drawer {
  grid-column: 2;
  grid-row: 1;
}
.knowledge-empty-row {
  padding: 1rem;
}
.knowledge-empty-detail {
  min-height: 220px;
  display: grid;
  align-content: center;
  gap: .35rem;
}
.knowledge-detail-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .85rem;
}
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .85rem; }
button { font: inherit; }
.primary { background: var(--brand-primary); color: var(--text-inverse); border: none; border-radius: var(--radius-sm); padding: .52rem .78rem; font-weight: var(--weight-semibold); cursor: pointer; }
.primary:hover:not(:disabled) { background: var(--navy-800); }
.secondary { background: var(--white); color: var(--brand-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: .5rem .72rem; font-weight: var(--weight-semibold); cursor: pointer; }
.secondary:hover:not(:disabled) { border-color: var(--border-accent); background: var(--surface-accent); }
.mini { background: var(--white); color: var(--brand-primary); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: .28rem .55rem; font-size: .76rem; font-weight: var(--weight-semibold); cursor: pointer; }
.mini:hover:not(:disabled) { border-color: var(--border-accent); background: var(--surface-accent); }
.mini.ghost { color: var(--text-secondary); border-color: var(--border-subtle); background: transparent; }
.mini.ghost:hover:not(:disabled) { color: var(--danger-600); border-color: var(--danger-500); background: var(--danger-100); }
button:disabled { opacity: .5; cursor: not-allowed; }
.status { min-height: 1.2rem; color: var(--text-secondary); font-size: .82rem; margin-top: .55rem; }
.error { color: var(--danger-600); }
.item { width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--white); padding: .7rem; text-align: left; }
.item.clickable, .conversation-page .item { cursor: pointer; }
.item.clickable.active, .item.clickable:hover, .conversation-page .item.active, .conversation-page .item:hover { border-color: var(--border-accent); box-shadow: var(--shadow-focus); }
.subpanel { border-top: 1px solid var(--border-subtle); padding-top: 1rem; }
.conversation-page .static-item { cursor: default; }
.conversation-page .static-item:hover { border-color: var(--border-default); box-shadow: none; }
.compact-list { display: grid; gap: .45rem; }
.item-title { display: block; font-weight: var(--weight-semibold); color: var(--text-primary); line-height: 1.35; }
.item-meta { display: block; color: var(--text-secondary); font-size: .76rem; margin-top: .22rem; word-break: break-word; }
.item-summary { color: var(--text-secondary); font-size: .82rem; margin-top: .45rem; line-height: 1.45; }
.item-actions { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .65rem; }
.badge { display: inline-block; border-radius: var(--radius-pill); border: 1px solid var(--border-default); padding: .15rem .45rem; font-size: .7rem; font-weight: var(--weight-semibold); color: var(--text-secondary); background: var(--white); margin-right: .25rem; }
.badge.draft, .badge.needs_review, .badge.structured_by_ai, .badge.unreviewed, .badge.missing_knowledge, .badge.needs_improvement { color: var(--warning-600); background: var(--warning-100); border-color: var(--gold-300); }
.badge.approved, .badge.published, .badge.reviewed, .badge.answered { color: var(--success-600); background: var(--success-100); border-color: var(--success-500); }
.badge.archived { color: var(--danger-600); background: var(--danger-100); border-color: var(--danger-500); }
.tabs { display: flex; gap: .35rem; border-bottom: 1px solid var(--border-subtle); margin: .9rem 0; overflow: auto; }
.tab { border: none; background: transparent; color: var(--text-secondary); padding: .45rem .65rem; cursor: pointer; font-weight: var(--weight-semibold); border-bottom: 2px solid transparent; white-space: nowrap; }
.tab.active { color: var(--brand-primary); border-bottom-color: var(--brand-accent); }
.hidden { display: none !important; }
.pre { border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--white); padding: .75rem; min-height: 180px; max-height: 520px; overflow: auto; white-space: pre-wrap; line-height: 1.5; font-size: .86rem; }
.finding { border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: .65rem; margin-bottom: .5rem; background: var(--white); }
.finding.high { border-color: var(--danger-500); background: var(--danger-100); }
.finding.medium { border-color: var(--gold-300); background: var(--warning-100); }
.source { border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: .65rem; margin-top: .5rem; background: var(--white); }
.filters { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; margin-bottom: .85rem; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-bottom: .85rem; }
.stat { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: .55rem; background: var(--white); }
.stat strong { display: block; color: var(--brand-primary); font-size: 1.05rem; }
.list { display: flex; flex-direction: column; gap: .55rem; }
.transcript { display: grid; gap: .75rem; }
.conversation-page .bubble { border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: .8rem; background: var(--white); white-space: pre-wrap; line-height: 1.55; }
.conversation-page .bubble.question { border-left: 4px solid var(--brand-accent); }
.conversation-page .bubble.answer { border-left: 4px solid var(--brand-primary); }
.sources { display: flex; flex-wrap: wrap; gap: .35rem; }

.workflow-page textarea {
  min-height: 92px;
}

.workflow-titlebar {
  margin-bottom: .85rem;
}

.workflow-actions {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 220px;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1rem;
}

.workflow-search {
  position: relative;
}

.workflow-search input {
  height: 44px;
  padding-right: 2.75rem;
  font-size: .96rem;
}

.workflow-search-icon {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-primary);
  font-size: 1.4rem;
}

.workflow-add {
  height: 44px;
}

.workflow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 1rem;
  align-items: start;
}

.workflow-overview {
  padding: 0;
  overflow: hidden;
}

.workflow-table-head,
.workflow-row {
  display: grid;
  grid-template-columns: minmax(300px, 1.35fr) minmax(280px, .95fr) 180px 42px;
  gap: 1rem;
  align-items: center;
}

.workflow-table-head {
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-weight: var(--weight-semibold);
  padding: .8rem 1rem;
}

.workflow-row {
  min-height: 76px;
  padding: .65rem 1rem;
  border-top: 1px solid var(--border-subtle);
  background: var(--white);
  cursor: pointer;
}

.workflow-row:hover,
.workflow-row.active {
  background: var(--surface-accent);
}

.workflow-flow {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  min-width: 0;
}

.workflow-flow strong,
.workflow-flow small {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workflow-flow strong {
  color: var(--text-primary);
  font-size: .98rem;
}

.workflow-flow small {
  color: var(--text-secondary);
  margin-top: .22rem;
  font-size: .82rem;
}

.workflow-icon {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-accent);
  background: var(--surface-accent);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--weight-semibold);
  font-size: .82rem;
}

.workflow-link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  align-items: center;
}

.workflow-link input {
  height: 38px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  border-right: none;
  color: var(--text-secondary);
}

.workflow-link button {
  height: 38px;
  border: 1px solid var(--brand-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--brand-primary);
  color: var(--text-inverse);
  cursor: pointer;
  font-size: 1.05rem;
}

.workflow-status {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.workflow-status::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--warning-500);
  box-shadow: inset 0 0 0 3px var(--warning-100);
}

.workflow-status.ready_for_dry_run::before {
  background: var(--success-500);
  box-shadow: inset 0 0 0 3px var(--success-100);
}

.workflow-status.manual_only::before {
  background: var(--ink-400);
  box-shadow: inset 0 0 0 3px var(--ink-100);
}

.workflow-open {
  border: none;
  background: transparent;
  color: var(--brand-primary);
  font-size: 1.7rem;
  cursor: pointer;
}
.knowledge-row-action {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--brand-primary);
  font-size: 1.05rem;
  font-weight: var(--weight-semibold);
  line-height: 1;
  cursor: pointer;
}
.knowledge-row-action:hover {
  background: var(--surface-accent);
  border-color: var(--brand-primary);
}

.workflow-drawer {
  top: calc(var(--topbar-height) + 1rem);
}

.workflow-empty {
  min-height: 180px;
  display: grid;
  align-content: center;
  gap: .35rem;
}

.workflow-no-results {
  padding: 1rem;
}

.workflow-builder {
  margin-top: 1rem;
}

.workflow-builder-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}

.workflow-builder-grid .span-2 {
  grid-column: 1 / -1;
}

.connector-choice-list {
  display: grid;
  gap: .5rem;
}

.connector-choice {
  display: grid;
  grid-template-columns: auto 38px minmax(0, 1fr);
  gap: .55rem;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: .55rem;
  cursor: pointer;
}

.connector-choice:hover {
  border-color: var(--border-accent);
  background: var(--surface-accent);
}

.connector-choice input {
  width: auto;
}

.connector-choice small {
  display: block;
  color: var(--text-muted);
  margin-top: .1rem;
}

.connector-logo {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--brand-primary);
  border: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: var(--weight-semibold);
  overflow: hidden;
  flex: none;
}

.connector-logo img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.workflow-safety {
  margin: .85rem 0;
  padding: .75rem;
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-sm);
  background: var(--warning-100);
  color: var(--warning-600);
  line-height: 1.5;
  font-size: .86rem;
}

.step-list {
  display: grid;
  gap: .6rem;
}

.workflow-step {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: .75rem;
}

.workflow-step.blocked {
  border-color: var(--gold-300);
  background: var(--warning-100);
}

.workflow-step.manual {
  background: var(--surface-subtle);
}

.workflow-step p {
  margin: .4rem 0;
  color: var(--text-secondary);
  line-height: 1.45;
}

.backoffice-page .login-wrap {
  min-height: calc(100vh - var(--topbar-height));
  display: grid;
  place-items: center;
  padding: 1rem;
}

.backoffice-page .login-card {
  width: min(440px, 100%);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: 1.25rem;
}

.backoffice-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.metric-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}

.metric-card span {
  display: block;
  color: var(--text-secondary);
  font-size: .8rem;
  margin-bottom: .55rem;
}

.metric-card strong {
  color: var(--brand-primary);
  font-size: 1.7rem;
  line-height: 1;
}

.office-search {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin: .9rem 0;
}

.detail-summary span {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: .65rem;
  background: var(--paper-50);
}

.detail-summary strong,
.detail-summary small {
  display: block;
}

.detail-summary strong {
  color: var(--brand-primary);
  font-size: 1.1rem;
}

.detail-summary small {
  color: var(--text-secondary);
  margin-top: .2rem;
}

.backoffice-page .layout {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.office-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.office-row {
  width: 100%;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: .78rem;
  background: var(--white);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .8rem;
  text-align: left;
  cursor: pointer;
}

.office-row:hover,
.office-row.active {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-focus);
}

.backoffice-shell {
  grid-template-columns: minmax(620px, 1fr) minmax(380px, 480px);
}

.office-index {
  padding: 0;
  overflow: hidden;
}

.office-index .section-head {
  margin: 0;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border-default);
}

.office-table-head,
.office-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) 110px 150px 76px 28px;
  gap: 1rem;
  align-items: center;
}

.office-table-head {
  padding: .72rem 1rem;
  background: var(--paper-50);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.office-list {
  gap: 0;
}

.office-row {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: .82rem 1rem;
  background: var(--surface-card);
  box-shadow: none;
}

.office-row:hover,
.office-row.active {
  border-color: var(--border-subtle);
  background: var(--paper-50);
  box-shadow: inset 3px 0 0 var(--studio-accent);
}

.office-main {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  min-width: 0;
}

.office-mark {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--paper-100);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: var(--weight-semibold);
}

.office-arrow {
  justify-self: end;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
}

.backoffice-drawer {
  position: sticky;
  top: calc(var(--studio-topbar-height) + 1rem);
  max-height: calc(100vh - var(--studio-topbar-height) - 2rem);
  overflow: auto;
}

.backoffice-drawer > h2,
.backoffice-drawer h2 {
  margin-top: 0;
}

.optional-label {
  color: var(--text-muted);
  font-size: .74rem;
  font-weight: var(--weight-regular);
}

.empty-list {
  padding: 1rem;
}

.office-name {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.office-meta {
  color: var(--text-secondary);
  font-size: .78rem;
  margin-top: .18rem;
  word-break: break-word;
}

.badge.internal {
  color: var(--brand-primary);
  background: var(--surface-accent);
  border-color: var(--border-accent);
}

.badge.pilot {
  color: var(--warning-600);
  background: var(--warning-100);
  border-color: var(--gold-300);
}

.badge.disabled {
  color: var(--danger-600);
  background: var(--danger-100);
  border-color: var(--danger-500);
}

.empty {
  color: var(--text-secondary);
  padding: 1rem;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-sm);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
}

.inline-actions,
.toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.toolbar-actions {
  justify-content: flex-end;
}

.danger {
  background: var(--danger-100);
  color: var(--danger-600);
  border: 1px solid var(--danger-500);
  border-radius: var(--radius-sm);
  padding: .48rem .72rem;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.user-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 .45rem;
  margin-top: .75rem;
}

.user-table th {
  color: var(--text-secondary);
  font-size: .76rem;
  text-align: left;
  padding: 0 .45rem;
}

.user-table td {
  background: var(--white);
  border-top: 1px solid var(--border-default);
  border-bottom: 1px solid var(--border-default);
  padding: .4rem .45rem;
}

.user-table td:first-child {
  border-left: 1px solid var(--border-default);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.user-table td:last-child {
  border-right: 1px solid var(--border-default);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  width: 1%;
  white-space: nowrap;
}

.user-table input,
.user-table select {
  width: 100%;
}

.connector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
  margin-top: .85rem;
}

.connector-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: .8rem;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-height: 170px;
}

.connector-title {
  font-weight: var(--weight-semibold);
}

.connector-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
}

body.studio-chat {
  height: 100vh;
  display: block;
  overflow: hidden;
}

.studio-chat header {
  background: var(--white);
  color: var(--text-primary);
  height: auto;
}

.studio-chat .header-actions label {
  color: var(--text-secondary);
  font-size: .78rem;
  font-weight: var(--weight-medium);
}

.studio-chat .welcome-card,
.studio-chat .learn-banner {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}

.studio-chat .msg.assistant .avatar {
  background: var(--surface-accent);
  border-color: var(--border-accent);
  color: var(--brand-primary);
}

.studio-chat .msg.user .avatar,
.studio-chat .msg.user .bubble,
.studio-chat #send {
  background: var(--brand-primary);
}

.studio-chat .msg.assistant .bubble,
.studio-chat .feedback-btn,
.studio-chat footer {
  background: var(--white);
  border-color: var(--border-subtle);
}

.studio-chat .src-tag {
  background: var(--surface-accent);
  color: var(--brand-primary);
  border-color: var(--border-accent);
}

.studio-chat #q {
  border-color: var(--border-default);
  border-radius: var(--radius-sm);
}

.studio-chat #q:focus {
  border-color: var(--border-accent);
  box-shadow: var(--shadow-focus);
}

.studio-chat #view-chat {
  height: calc(100vh - var(--topbar-height));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

.studio-chat #nav-bar { display: none; }

@media (max-width: 920px) {
  body, body.sidebar-collapsed { padding-left: 0; }
  .studio-sidebar { position: static; width: 100%; height: auto; }
  body.sidebar-collapsed .studio-sidebar { width: 100%; }
  body.sidebar-collapsed .tenant-switcher,
  body.sidebar-collapsed .side-text { display: block; }
  .sidebar-section-label { display: none; }
  .sidebar-nav { flex-direction: row; overflow: auto; }
  .grid, .filters, .stats, .backoffice-page .layout, .form-row { grid-template-columns: 1fr; }
  .workflow-actions, .workflow-layout, .workflow-builder-grid, .knowledge-actions, .knowledge-layout { grid-template-columns: 1fr; }
  .workflow-table-head, .knowledge-table-head { display: none; }
  .workflow-row {
    grid-template-columns: 1fr;
    gap: .6rem;
  }
  .knowledge-row {
    grid-template-columns: 1fr;
    gap: .6rem;
  }
  .knowledge-overview, .knowledge-drawer {
    grid-column: auto;
    grid-row: auto;
  }
  .knowledge-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .knowledge-filters {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .workflow-link { max-width: 100%; }
  .workflow-builder-grid .span-2 { grid-column: auto; }
  .header-inner { align-items: flex-start; flex-direction: column; }
  .detail-drawer { position: static; max-height: none; }
  .studio-chat #view-chat { height: auto; min-height: calc(100vh - var(--topbar-height)); }
}

/* Bobby Studio design shell */
:root {
  --studio-sidebar-width: 252px;
  --studio-sidebar-collapsed: 68px;
  --studio-topbar-height: 56px;
  --studio-radius: var(--radius-md);
  --studio-sidebar-bg: var(--paper-50);
  --studio-sidebar-border: var(--border-default);
  --studio-active-bg: var(--paper-200);
  --studio-accent: var(--brand-accent);
  --studio-accent-ink: var(--brand-accent-ink);
}

body {
  padding-left: var(--studio-sidebar-width);
  background: var(--surface-page);
}

body.sidebar-collapsed {
  padding-left: var(--studio-sidebar-collapsed);
}

.studio-sidebar {
  width: var(--studio-sidebar-width);
  background: var(--studio-sidebar-bg);
  border-right: 1px solid var(--studio-sidebar-border);
  box-shadow: none;
}

body.sidebar-collapsed .studio-sidebar {
  width: var(--studio-sidebar-collapsed);
}

.sidebar-head {
  padding: 1rem .75rem .8rem;
  border-bottom: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: .55rem;
  align-items: center;
}

.tenant-switcher {
  min-height: 48px;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-areas:
    "mark label"
    "mark name";
  gap: .1rem .65rem;
  align-items: center;
  border: 1px solid var(--studio-sidebar-border);
  background: var(--surface-card);
  border-radius: var(--studio-radius);
  padding: .5rem .62rem;
  box-shadow: none;
}

.tenant-switcher::before {
  content: "";
  grid-area: mark;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--brand-primary);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.tenant-label {
  grid-area: label;
  font-size: .68rem;
  letter-spacing: .055em;
  color: var(--text-muted);
}

.tenant-name {
  grid-area: name;
  margin: 0;
  font-size: .9rem;
  font-weight: var(--weight-medium);
}

.tenant-selector {
  grid-area: name;
}

.tenant-switcher-enhanced {
  position: relative;
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tenant-switcher-enhanced::before {
  display: none;
}

.tenant-switcher-button {
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--studio-sidebar-border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  min-width: 0;
}

.tenant-avatar,
.tenant-option-avatar {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  background: var(--brand-primary);
  color: var(--white);
  font-weight: 700;
  font-size: .74rem;
}

.tenant-copy,
.tenant-option-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.tenant-switcher-enhanced .tenant-name,
.tenant-switcher-enhanced .tenant-label {
  grid-area: auto;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-switcher-enhanced .tenant-name {
  color: var(--text-primary);
  font-size: .84rem;
  font-weight: var(--weight-semibold);
  line-height: 1.15;
}

.tenant-switcher-enhanced .tenant-label {
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
}

.tenant-copy .tenant-name,
.tenant-option-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tenant-chevron {
  color: var(--text-muted);
  font-size: .9rem;
}

.tenant-switcher-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 8px);
  left: 0;
  width: min(320px, calc(100vw - 24px));
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-lg);
}

.tenant-menu-label {
  display: block;
  margin: 0 0 8px;
  color: var(--text-muted);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .055em;
}

.tenant-search {
  width: 100%;
  margin-bottom: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--white);
}

.tenant-options {
  max-height: min(420px, 58vh);
  overflow: auto;
  display: grid;
  gap: 4px;
}

.tenant-option {
  width: 100%;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 20px;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
}

.tenant-option:hover,
.tenant-option.active {
  background: var(--paper-100);
}

.tenant-option-copy small {
  color: var(--text-muted);
}

.tenant-option-check {
  color: var(--brand-primary);
  font-weight: 700;
}

.collapse-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  box-shadow: none;
  display: inline-grid;
  place-items: center;
  align-self: center;
  justify-self: end;
  cursor: pointer;
}

.collapse-btn:hover {
  background: var(--studio-active-bg);
  color: var(--text-primary);
}

body.sidebar-collapsed .sidebar-head {
  grid-template-columns: 1fr;
  justify-content: flex-start;
  gap: .75rem;
  padding-inline: 0;
}

body.sidebar-collapsed .tenant-switcher {
  display: grid;
  width: 40px;
  min-height: 40px;
  padding: 0;
  place-items: center;
}

body.sidebar-collapsed .tenant-switcher-button {
  width: 40px;
  height: 40px;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  place-items: center;
}

body.sidebar-collapsed .tenant-copy,
body.sidebar-collapsed .tenant-chevron {
  display: none;
}

body.sidebar-collapsed .collapse-btn {
  justify-self: center;
}

body.sidebar-collapsed .tenant-switcher::before {
  grid-area: auto;
}

body.sidebar-collapsed .tenant-label,
body.sidebar-collapsed .tenant-name {
  display: none;
}

.sidebar-nav {
  padding: .55rem .75rem 1rem;
  gap: .12rem;
  overflow-y: auto;
}

.side-link {
  min-height: 36px;
  border-radius: var(--studio-radius);
  padding: .5rem .65rem;
  color: var(--text-secondary);
  position: relative;
  font-size: .92rem;
  font-weight: var(--weight-medium);
}

.sidebar-section-label {
  margin: .95rem .65rem .3rem;
  color: var(--text-muted);
  font-size: .66rem;
  font-weight: var(--weight-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.side-link:hover {
  background: var(--studio-active-bg);
  color: var(--text-primary);
}

.side-link.active {
  background: var(--studio-active-bg);
  color: var(--text-primary);
}

.side-link.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--studio-accent);
}

.side-icon {
  color: var(--studio-accent-ink);
  font-weight: var(--weight-semibold);
}

body.sidebar-collapsed .side-link {
  justify-content: center;
  padding: .55rem 0;
}

body.sidebar-collapsed .sidebar-section-label {
  display: none;
}

.sidebar-account-wrap {
  margin: auto .75rem .75rem;
}

.sidebar-account {
  border: 1px solid var(--studio-sidebar-border);
  border-radius: var(--studio-radius);
  box-shadow: none;
  padding: .45rem .5rem;
  background: var(--surface-card);
}

.account-avatar {
  border-radius: 9px;
  background: var(--brand-primary);
}

.account-role {
  color: var(--studio-accent-ink);
}

.account-menu {
  border-radius: var(--studio-radius);
}

header {
  min-height: var(--studio-topbar-height);
  padding: 0 1.5rem;
  background: rgba(250,248,243,.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-default);
  box-shadow: none;
}

.header-inner {
  max-width: none;
}

.brand img,
.studio-brand-mark {
  height: 30px;
  border-radius: 8px;
  border-color: var(--border-default);
  box-shadow: none;
}

.brand-title {
  font-weight: var(--weight-medium);
}

.brand-sub {
  text-transform: none;
  letter-spacing: 0;
  font-size: .8rem;
}

main {
  max-width: none;
  padding: 1.5rem;
}

.toolbar {
  margin-bottom: 1.25rem;
}

h1 {
  color: var(--text-primary);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
}

h2 {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
}

.panel,
.login-card,
.office-row,
.connector-card,
.workflow-overview,
.knowledge-overview {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: var(--surface-card);
}

.detail-drawer,
.knowledge-drawer,
.workflow-drawer {
  border-left: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}

.knowledge-table-head,
.workflow-table-head {
  background: var(--paper-50);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: var(--text-xs);
}

.knowledge-row,
.workflow-row {
  background: var(--surface-card);
}

.knowledge-row:hover,
.knowledge-row.active,
.workflow-row:hover,
.workflow-row.active {
  background: var(--paper-50);
}

.knowledge-row.active,
.workflow-row.active {
  box-shadow: inset 3px 0 0 var(--studio-accent);
}

.segmented.active,
.segmented:hover,
.ghost-btn.active,
.header-action.active,
#learn-toggle.on {
  background: var(--brand-primary);
  color: var(--paper-50);
}

.knowledge-row-action,
.workflow-open {
  border-radius: 8px;
}

.studio-chat #view-chat {
  height: calc(100vh - var(--studio-topbar-height));
}

.chat-workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  overflow: hidden;
}

.studio-chat #chat-area {
  min-width: 0;
  padding: 1.35rem 1.2rem .7rem;
}

.chat-sources-panel {
  border-left: 1px solid var(--border-default);
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chat-sources-head {
  min-height: 56px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: var(--weight-medium);
}

.chat-sources-head strong {
  min-width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  background: var(--gold-100);
  color: var(--gold-700);
  display: grid;
  place-items: center;
  font-size: .78rem;
}

.chat-source-list {
  padding: 1rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

.chat-source-card {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: .65rem;
  align-items: start;
  padding: .72rem;
  border: 1px solid var(--border-default);
  border-radius: var(--studio-radius);
  background: var(--paper-50);
}

.chat-source-index {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  background: var(--brand-primary);
  color: var(--paper-50);
  font-size: .76rem;
  font-weight: var(--weight-semibold);
}

.chat-source-card strong,
.chat-source-card span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-source-card strong {
  color: var(--text-primary);
  font-size: .86rem;
  font-weight: var(--weight-medium);
}

.chat-source-card span {
  margin-top: .15rem;
  color: var(--text-muted);
  font-size: .74rem;
}

.studio-chat footer {
  border-top: 1px solid var(--border-default);
  background: var(--surface-card);
}

.studio-chat .sources {
  display: none;
}

@media (max-width: 1100px) {
  .chat-workspace {
    grid-template-columns: 1fr;
  }
  .chat-sources-panel {
    display: none;
  }
}

@media (max-width: 920px) {
  body,
  body.sidebar-collapsed {
    padding-left: 0;
  }
  .studio-sidebar {
    width: 100%;
  }
  .studio-chat #view-chat {
    height: auto;
  }
}

.backoffice-page .backoffice-shell {
  grid-template-columns: minmax(620px, 1fr) minmax(380px, 480px);
}

.backoffice-page .office-index {
  padding: 0;
  overflow: hidden;
}

.backoffice-page .office-index .section-head {
  margin: 0;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border-default);
}

.backoffice-page .office-table-head,
.backoffice-page .office-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) 110px 150px 76px 28px;
  gap: 1rem;
  align-items: center;
}

.backoffice-page .office-table-head {
  padding: .72rem 1rem;
  background: var(--paper-50);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
  text-transform: uppercase;
}

.backoffice-page .office-list {
  gap: 0;
}

.backoffice-page .office-row {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
  padding: .82rem 1rem;
  background: var(--surface-card);
  box-shadow: none;
}

.backoffice-page .office-row:hover,
.backoffice-page .office-row.active {
  border-color: var(--border-subtle);
  background: var(--paper-50);
  box-shadow: inset 3px 0 0 var(--studio-accent);
}

.backoffice-page .office-main {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: .75rem;
  align-items: center;
  min-width: 0;
}

.backoffice-page .office-mark {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--paper-100);
  color: var(--text-primary);
  display: grid;
  place-items: center;
  font-size: .78rem;
  font-weight: var(--weight-semibold);
}

.backoffice-page .office-arrow {
  justify-self: end;
  color: var(--text-muted);
  font-size: 1.2rem;
  line-height: 1;
}

.backoffice-page .backoffice-drawer {
  position: sticky;
  top: calc(var(--studio-topbar-height) + 1rem);
  max-height: calc(100vh - var(--studio-topbar-height) - 2rem);
  overflow: auto;
}

@media (max-width: 920px) {
  .backoffice-page .backoffice-shell,
  .backoffice-page .office-table-head,
  .backoffice-page .office-row {
    grid-template-columns: 1fr;
  }

  .backoffice-page .office-table-head {
    display: none;
  }

  .backoffice-page .backoffice-drawer {
    position: static;
    max-height: none;
  }
}

.sidebar-account-wrap .platform-link {
  margin: 0 0 .55rem;
  border: 1px solid var(--border-subtle);
  background: var(--paper-100);
}

.sidebar-account-wrap .platform-link.active {
  background: var(--studio-active-bg);
}

.backoffice-page .backoffice-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.backoffice-page .metric-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}

.backoffice-page .metric-card span {
  display: block;
  color: var(--text-secondary);
  font-size: .8rem;
  margin-bottom: .55rem;
}

.backoffice-page .metric-card strong {
  color: var(--brand-primary);
  font-size: 1.7rem;
  line-height: 1;
}

.backoffice-page .office-search {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.backoffice-page .detail-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin: .9rem 0;
}

.backoffice-page .detail-summary span {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: .65rem;
  background: var(--paper-50);
}

.backoffice-page .detail-summary strong,
.backoffice-page .detail-summary small {
  display: block;
}

.backoffice-page .detail-summary strong {
  color: var(--brand-primary);
  font-size: 1.1rem;
}

.backoffice-page .detail-summary small {
  color: var(--text-secondary);
  margin-top: .2rem;
}

.backoffice-page .inline-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.backoffice-page .activation-card {
  max-width: 720px;
}

.backoffice-page .compact-summary {
  margin: 18px 0;
}

.backoffice-page .platform-admins {
  margin: 16px 0;
}

.backoffice-page .platform-admin-list {
  display: grid;
  gap: 8px;
}

.backoffice-page .platform-admin-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px auto;
  gap: 8px;
  align-items: center;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.settings-actions {
  position: sticky;
  bottom: 0;
  margin-top: 1rem;
  padding: .85rem 0 0;
  background: linear-gradient(to bottom, transparent, var(--surface-bg) 35%);
}

.integration-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.integration-grid .connector-card {
  min-height: 190px;
}

.integration-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
  gap: 1rem;
  align-items: start;
}

.integration-overview {
  min-width: 0;
}

.integration-card {
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

.integration-card:hover,
.integration-card.active {
  border-color: var(--brand-accent);
  background: var(--paper-50);
}

.integration-summary {
  grid-template-columns: minmax(140px, 220px);
}

.integration-state--approved {
  background: var(--success-100) !important;
  border-color: var(--success-500) !important;
}

.integration-state--approved strong {
  color: var(--success-600) !important;
}

.integration-state--pilot {
  background: var(--warning-100) !important;
  border-color: var(--gold-300) !important;
}

.integration-state--pilot strong {
  color: var(--warning-600) !important;
}

.integration-state--archived,
.integration-state--disabled {
  background: var(--danger-100) !important;
  border-color: var(--danger-500) !important;
}

.integration-state--archived strong,
.integration-state--disabled strong {
  color: var(--danger-600) !important;
}

.integration-drawer {
  min-height: 360px;
}

.silverfin-controls {
  display: grid;
  gap: .85rem;
}

.silverfin-controls .form-row {
  align-items: end;
  margin: 0;
}

.silverfin-actions {
  margin-top: 0;
  align-items: center;
}

.silverfin-controls .status {
  margin: 0;
}

.integration-detail-head {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
}

.kbo-status-box {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--paper-50);
  padding: .85rem;
  margin: .85rem 0;
}

.kbo-import-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  margin: .7rem 0;
}

.kbo-import-summary span {
  min-width: 0;
  padding: .55rem;
}

.backoffice-page .detail-config-layout {
  display: block;
  width: 100%;
}

.backoffice-page .detail-config-sections {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  min-width: 0;
}

.backoffice-page .config-section {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1rem;
  background: var(--surface-card);
  width: 100%;
}

.backoffice-page .config-section h3 {
  margin: 0 0 .8rem;
  color: var(--text-primary);
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: .75rem;
  background: var(--paper-50);
  margin-top: .65rem;
}

.toggle-row strong,
.toggle-row small {
  display: block;
}

.toggle-row small {
  color: var(--text-secondary);
  margin-top: .15rem;
}

.toggle-row input[type="checkbox"] {
  appearance: none;
  width: 44px;
  height: 24px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--paper-300);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}

.toggle-row input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: var(--shadow-xs);
  transition: transform .15s ease;
}

.toggle-row input[type="checkbox"]:checked {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
}

.toggle-row input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}

.config-actions {
  position: sticky;
  bottom: 0;
  padding-top: .75rem;
  background: linear-gradient(to bottom, transparent, var(--surface-card) 35%);
}

@media (max-width: 920px) {
  .backoffice-page .backoffice-metrics,
  .backoffice-page .detail-summary,
  .backoffice-page .detail-config-layout,
  .integration-layout {
    grid-template-columns: 1fr;
  }

}
/* Final shell guard: keep the shared sidebar header independent from older layout rules above. */
body:not(.sidebar-collapsed) {
  padding-left: var(--studio-sidebar-width);
}

body.sidebar-collapsed {
  padding-left: var(--studio-sidebar-collapsed);
}

.studio-sidebar {
  width: var(--studio-sidebar-width);
}

body.sidebar-collapsed .studio-sidebar {
  width: var(--studio-sidebar-collapsed);
}

.sidebar-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  align-items: center;
  gap: .55rem;
  padding: 1rem .75rem .8rem;
}

.tenant-switcher-enhanced {
  display: block;
  width: 100%;
  min-width: 0;
}

.tenant-switcher-enhanced::before {
  content: none;
}

.tenant-switcher-enhanced .tenant-switcher-button {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 16px;
  align-items: center;
}

.tenant-switcher-enhanced .tenant-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.tenant-switcher-enhanced .tenant-name,
.tenant-switcher-enhanced .tenant-label {
  display: block;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  grid-area: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.15;
}

.tenant-switcher-enhanced .tenant-name {
  font-size: .84rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.tenant-switcher-enhanced .tenant-label {
  font-size: .72rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0;
  color: var(--text-muted);
  text-transform: none;
}

.collapse-btn {
  justify-self: end;
  flex: none;
}

body.sidebar-collapsed .sidebar-head {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: .7rem;
  padding-inline: 0;
}

body.sidebar-collapsed .tenant-switcher-enhanced {
  display: block;
  width: 40px;
}

body.sidebar-collapsed .tenant-switcher-enhanced .tenant-switcher-button {
  width: 40px;
  height: 40px;
  min-height: 40px;
  padding: 0;
  grid-template-columns: 1fr;
  place-items: center;
}

body.sidebar-collapsed .tenant-switcher-enhanced .tenant-copy,
body.sidebar-collapsed .tenant-switcher-enhanced .tenant-chevron {
  display: none;
}

body.sidebar-collapsed .collapse-btn {
  justify-self: center;
}

/* ==========================================================================
   Lucide icon sizing for the shared shell.
   Icons are inlined as SVG by studio.js (svgIcon/ICONS) — self-contained,
   no runtime CDN. Inactive icons follow the link colour; active = gold.
   ========================================================================== */
.side-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.side-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.side-link.active .side-icon {
  color: var(--studio-accent-ink);
}

.collapse-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

.tenant-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tenant-chevron svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* ==========================================================================
   Collapsible disclosure ("openklap") — native <details>, no JS required.
   Used for the integrations detail panel and the KBO technical breakdown.
   ========================================================================== */
.bb-disclosure {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  overflow: hidden;
  margin-bottom: .7rem;
}

.bb-disclosure:last-child { margin-bottom: 0; }

.bb-disclosure > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem .95rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  user-select: none;
}

.bb-disclosure > summary::-webkit-details-marker { display: none; }

.bb-disclosure > summary:hover { background: var(--paper-50); }

.bb-disclosure > summary .bb-disclosure__sub {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  font-size: var(--text-xs);
  margin-left: .15rem;
}

.bb-disclosure__chev {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  color: var(--text-muted);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.bb-disclosure__chev svg { width: 18px; height: 18px; display: block; }

.bb-disclosure[open] > summary .bb-disclosure__chev { transform: rotate(180deg); }

.bb-disclosure[open] > summary { border-bottom: 1px solid var(--border-subtle); }

.bb-disclosure__body {
  padding: .95rem;
}

.bb-disclosure__lead {
  display: inline-flex;
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  background: var(--surface-accent);
  color: var(--brand-accent-ink);
}

.bb-disclosure__lead svg { width: 16px; height: 16px; display: block; }

/* ==========================================================================
   KBO status — end-user readable banner + plain-language facts.
   Raw counts move into a collapsible "Technische details" disclosure.
   ========================================================================== */
.kbo-banner {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .85rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-default);
  background: var(--paper-50);
  margin: .2rem 0 .9rem;
}

.kbo-banner__ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
}

.kbo-banner__ic svg { width: 18px; height: 18px; display: block; }

.kbo-banner__title {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: 1.3;
}

.kbo-banner__sub {
  color: var(--text-secondary);
  font-size: var(--text-sm);
  margin-top: .15rem;
  line-height: 1.45;
}

.kbo-banner--ok { background: var(--success-100); border-color: var(--success-500); }
.kbo-banner--ok .kbo-banner__ic { border-color: var(--success-500); color: var(--success-600); }
.kbo-banner--busy { background: var(--warning-100); border-color: var(--gold-300); }
.kbo-banner--busy .kbo-banner__ic { border-color: var(--gold-300); color: var(--warning-600); }
.kbo-banner--err { background: var(--danger-100); border-color: var(--danger-500); }
.kbo-banner--err .kbo-banner__ic { border-color: var(--danger-500); color: var(--danger-600); }
.kbo-banner--idle .kbo-banner__ic { color: var(--text-muted); }

/* spinning indicator while an import runs */
.kbo-spin { animation: kbo-spin 1s linear infinite; transform-origin: center; }
@keyframes kbo-spin { to { transform: rotate(360deg); } }

.kbo-facts {
  display: grid;
  gap: .5rem;
  margin: .2rem 0 .2rem;
}

.kbo-fact {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.kbo-fact__ic {
  flex: none;
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
}

.kbo-fact__ic svg { width: 16px; height: 16px; display: block; }
.kbo-fact--ok .kbo-fact__ic { color: var(--success-600); }
.kbo-fact--no .kbo-fact__ic { color: var(--text-muted); }
.kbo-fact strong { color: var(--text-primary); font-weight: var(--weight-medium); }

.kbo-tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.kbo-tech-grid span {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--paper-50);
  padding: .55rem .65rem;
  min-width: 0;
}

.kbo-tech-grid strong { display: block; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.kbo-tech-grid small { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: .15rem; }

/* ==========================================================================
   Gebruikersbeheer — table in the e-counting design language
   (avatar + identity, role badge, status, per-row actions).
   ========================================================================== */
.users-card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.users-toolbar {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.users-search {
  display: flex;
  align-items: center;
  gap: .5rem;
  height: 36px;
  min-width: 240px;
  flex: 1 1 240px;
  max-width: 360px;
  padding: 0 .65rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-muted);
}

.users-search svg { width: 16px; height: 16px; flex: none; }
.users-search input { border: 0; outline: none; background: none; font: inherit; font-size: var(--text-sm); color: var(--text-primary); width: 100%; padding: 0; }

.users-count { color: var(--text-muted); font-size: var(--text-sm); }

.users-table { width: 100%; border-collapse: collapse; }

.users-table thead th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: .65rem 1rem;
  background: var(--paper-50);
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.users-table tbody td {
  padding: .6rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}

.users-table tbody tr:last-child td { border-bottom: none; }
.users-table tbody tr:hover { background: var(--paper-50); }
.users-table tbody tr.is-hidden { display: none; }

.user-identity { display: flex; align-items: center; gap: .65rem; min-width: 0; }

.user-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-size: .76rem;
  font-weight: var(--weight-semibold);
}

.user-identity-copy { min-width: 0; }
.user-identity-copy .user-name { display: block; color: var(--text-primary); font-weight: var(--weight-medium); font-size: var(--text-sm); line-height: 1.2; }

.user-email-input {
  width: 100%;
  min-width: 160px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: var(--radius-sm);
  padding: .25rem .4rem;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.user-email-input:hover { border-color: var(--border-subtle); }
.user-email-input:focus { border-color: var(--border-accent); background: var(--white); color: var(--text-primary); box-shadow: var(--shadow-focus); outline: none; }
.user-email-input[readonly] { color: var(--text-muted); }

.user-role-select {
  width: auto;
  min-width: 150px;
  height: 32px;
  padding: 0 1.8rem 0 .6rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23585e6a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .55rem center;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  cursor: pointer;
}

.user-token-input {
  width: 120px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 0 .55rem;
  font: inherit;
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.user-token-input:disabled { background: var(--paper-100); color: var(--text-muted); }

.user-remove {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text-muted);
  cursor: pointer;
  display: inline-grid;
  place-items: center;
}

.user-remove:hover:not(:disabled) { border-color: var(--danger-500); color: var(--danger-600); background: var(--danger-100); }
.user-remove:disabled { opacity: .4; cursor: not-allowed; }
.user-remove svg { width: 16px; height: 16px; display: block; }

.users-table td.users-empty { padding: 1.4rem 1rem; color: var(--text-muted); text-align: center; }

.user-token-cell { font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .users-table thead { display: none; }
  .users-table tbody tr { display: grid; grid-template-columns: 1fr auto; gap: .4rem; padding: .6rem 1rem; border-bottom: 1px solid var(--border-subtle); }
  .users-table tbody td { border: none; padding: .15rem 0; }
}

/* ==========================================================================
   Knowledge workspace — ported from the Claude design (bb-* layout).
   Full-height page with an internal scroll region and a right detail drawer.
   ========================================================================== */
body.knowledge-studio { height: 100vh; overflow: hidden; }
body.knowledge-studio main {
  max-width: none;
  margin: 0;
  padding: 0;
  height: calc(100vh - var(--studio-topbar-height));
  display: flex;
  min-height: 0;
}

.bb-pagewrap { flex: 1; min-width: 0; min-height: 0; display: flex; }
.bb-scroll { flex: 1; min-width: 0; overflow-y: auto; }
.bb-page { max-width: 1180px; margin: 0 auto; padding: var(--space-6) var(--space-6) var(--space-9); }

.bb-pagehead { display: flex; align-items: flex-start; gap: var(--space-4); margin-bottom: var(--space-5); }
.bb-pagehead__txt { min-width: 0; }
.bb-pagehead h1 { font-size: var(--text-h3); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--text-primary); margin: 0; }
.bb-pagehead p { margin: 6px 0 0; color: var(--text-secondary); font-size: var(--text-sm); max-width: 64ch; line-height: var(--leading-normal); }
.bb-pagehead__actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); flex: none; }
.bb-eyebrow { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--brand-accent-ink); margin-bottom: 6px; }

/* toolbar: segmented control + filters */
.bb-toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.bb-seg { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--studio-radius); overflow: hidden; background: var(--surface-card); }
.bb-seg button { border: none; background: none; font: inherit; font-size: var(--text-sm); color: var(--text-muted); padding: 7px 14px; cursor: pointer; border-right: 1px solid var(--border-default); }
.bb-seg button:last-child { border-right: none; }
.bb-seg button.is-on { background: var(--brand-primary); color: var(--paper-50); }
.knowledge-studio .bb-ic {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: none;
  align-items: center;
  justify-content: center;
}
.knowledge-studio .bb-ic svg {
  width: 16px;
  height: 16px;
  display: block;
}
.bb-filter { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--studio-radius); background: var(--surface-card); font: inherit; font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer; white-space: nowrap; }
.bb-filter:hover { border-color: var(--border-strong); }
.bb-filter .bb-ic { width: 14px; height: 14px; color: var(--text-muted); }
.bb-filter .bb-ic svg { width: 14px; height: 14px; display: block; }
.bb-filter select { border: none; background: transparent; font: inherit; color: inherit; cursor: pointer; outline: none; padding: 0 2px; max-width: 160px; }
label.bb-filter { cursor: pointer; }

/* search box in the toolbar */
.bb-search { display: inline-flex; align-items: center; gap: var(--space-2); height: 34px; width: 260px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: var(--studio-radius); background: var(--surface-card); color: var(--text-faint); }
.bb-search input { border: none; background: none; outline: none; font: inherit; font-size: var(--text-sm); color: var(--text-primary); width: 100%; }
.bb-search .bb-ic { width: 16px; height: 16px; }
.bb-search .bb-ic svg { width: 16px; height: 16px; display: block; }

/* data table */
.bb-tablecard { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; }
.bb-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.bb-table thead th { text-align: left; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); padding: 11px var(--space-4); background: var(--paper-50); border-bottom: 1px solid var(--border-default); white-space: nowrap; }
.bb-table tbody td { padding: 12px var(--space-4); border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); vertical-align: middle; }
.bb-table tbody tr:last-child td { border-bottom: none; }
.bb-table tbody tr { cursor: pointer; transition: background var(--duration-fast); }
.bb-table tbody tr:hover { background: var(--paper-50); }
.bb-table tbody tr.is-selected { background: var(--gold-100); box-shadow: inset 3px 0 0 var(--brand-accent); }
.bb-table .bb-cell-strong { color: var(--text-primary); font-weight: var(--weight-medium); }
.bb-rowname { display: flex; align-items: center; gap: 10px; min-width: 0; }
.bb-rowname .bb-ic { flex: none; color: var(--text-faint); }
.bb-rowname .bb-ic svg { width: 16px; height: 16px; display: block; }
.bb-rowname span { overflow: hidden; text-overflow: ellipsis; }
.bb-table .bb-chev { color: var(--text-faint); }
.bb-table .bb-chev svg { width: 16px; height: 16px; display: block; }
.bb-table td.bb-empty-cell { text-align: center; color: var(--text-muted); padding: 2.2rem 1rem; }

/* status badge (vanilla equivalent of the DS Badge) */
.bb-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: var(--weight-semibold); border: 1px solid var(--border-default); background: var(--white); color: var(--text-secondary); white-space: nowrap; }
.bb-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.bb-badge--success { color: var(--success-600); background: var(--success-100); border-color: var(--success-500); }
.bb-badge--warning { color: var(--warning-600); background: var(--warning-100); border-color: var(--gold-300); }
.bb-badge--danger { color: var(--danger-600); background: var(--danger-100); border-color: var(--danger-500); }
.bb-badge--neutral { color: var(--text-muted); background: var(--paper-50); border-color: var(--border-default); }
.bb-badge--info { color: var(--brand-primary); background: var(--surface-accent); border-color: var(--border-accent); }

/* right detail drawer */
.bb-drawer { width: 420px; flex: none; background: var(--surface-card); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; overflow: hidden; }
.bb-drawer__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border-default); }
.bb-drawer__head h3 { font-size: var(--text-h4); font-weight: var(--weight-medium); color: var(--text-primary); margin: 0; line-height: 1.3; }
.bb-drawer__head p { margin: 3px 0 0; font-size: var(--text-xs); color: var(--text-muted); word-break: break-word; }
.bb-drawer__close { width: 30px; height: 30px; flex: none; border: 1px solid var(--border-default); background: var(--white); border-radius: var(--studio-radius); color: var(--text-muted); cursor: pointer; display: inline-grid; place-items: center; }
.bb-drawer__close:hover { border-color: var(--border-strong); color: var(--text-primary); }
.bb-drawer__close svg { width: 16px; height: 16px; display: block; }
.bb-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.bb-drawer__foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-default); display: flex; gap: var(--space-3); background: var(--paper-50); }
.bb-drawer__foot .primary, .bb-drawer__foot .secondary { flex: 1; justify-content: center; text-align: center; }

.bb-field-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); margin: var(--space-5) 0 var(--space-2); }
.bb-field-label:first-child { margin-top: 0; }
.bb-kv { display: flex; justify-content: space-between; gap: var(--space-4); padding: 7px 0; border-bottom: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.bb-kv:last-child { border-bottom: none; }
.bb-kv dt { color: var(--text-muted); }
.bb-kv dd { margin: 0; color: var(--text-primary); font-weight: var(--weight-medium); text-align: right; word-break: break-word; }

/* version timeline */
.bb-timeline { list-style: none; margin: 0; padding: 0; }
.bb-timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-5); }
.bb-timeline li::before { content: ""; position: absolute; left: 4px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-accent); }
.bb-timeline li::after { content: ""; position: absolute; left: 7px; top: 14px; bottom: 0; width: 1px; background: var(--border-default); }
.bb-timeline li:last-child::after { display: none; }
.bb-timeline b { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-primary); }
.bb-timeline span { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }

/* content editor */
.bb-editor { border: 1px solid var(--border-default); border-radius: var(--studio-radius); background: var(--white); overflow: hidden; }
.bb-editor__bar { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border-subtle); background: var(--paper-50); }
.bb-editor__bar button { width: 28px; height: 28px; border: none; background: none; border-radius: 6px; color: var(--text-muted); cursor: pointer; display: grid; place-items: center; }
.bb-editor__bar button:hover { background: var(--ink-100); color: var(--text-primary); }
.bb-editor__bar button svg { width: 15px; height: 15px; display: block; }
.bb-editor textarea { width: 100%; border: none; outline: none; resize: vertical; background: none; font: inherit; font-size: var(--text-sm); line-height: var(--leading-relaxed); color: var(--text-secondary); padding: var(--space-4); min-height: 240px; display: block; }

.bb-finding { border: 1px solid var(--border-default); border-radius: var(--studio-radius); padding: .65rem; margin-bottom: .5rem; background: var(--white); }
.bb-finding.high { border-color: var(--danger-500); background: var(--danger-100); }
.bb-finding.medium { border-color: var(--gold-300); background: var(--warning-100); }
.bb-finding strong { font-size: var(--text-sm); color: var(--text-primary); }
.bb-finding p { margin: .25rem 0 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* empty + error states */
.bb-empty { max-width: 440px; margin: 8vh auto; text-align: center; }
.bb-empty__ic { width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--paper-200); color: var(--brand-primary); display: grid; place-items: center; margin: 0 auto var(--space-4); }
.bb-empty__ic svg { width: 26px; height: 26px; display: block; }
.bb-empty h2 { font-size: var(--text-h4); font-weight: var(--weight-medium); color: var(--text-primary); }
.bb-empty p { margin: var(--space-2) 0 var(--space-5); color: var(--text-secondary); font-size: var(--text-sm); }
.bb-error { display: flex; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--danger-500); border-left-width: 3px; border-radius: var(--studio-radius); background: var(--danger-100); margin-bottom: var(--space-4); }
.bb-error .bb-ic { color: var(--danger-600); flex: none; }
.bb-error .bb-ic svg { width: 20px; height: 20px; display: block; }
.bb-error b { font-size: var(--text-sm); color: var(--text-primary); }
.bb-error p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }

.bb-status { min-height: 1.1rem; font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
.bb-status.error { color: var(--danger-600); }
.bb-row { display: flex; align-items: center; gap: var(--space-3); }

/* ==========================================================================
   Add-knowledge modal (document upload / website / plain text)
   ========================================================================== */
.bb-modal-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(17,35,55,.38); display: grid; place-items: center; padding: 1rem; }
.bb-modal-overlay[hidden] { display: none; }
.bb-modal { width: min(600px, 100%); max-height: calc(100vh - 4rem); overflow: auto; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.bb-modal__head { display: flex; align-items: flex-start; gap: var(--space-3); padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border-subtle); }
.bb-modal__head h2 { font-size: var(--text-h4); font-weight: var(--weight-medium); color: var(--text-primary); margin: 0; }
.bb-modal__head p { margin: 3px 0 0; font-size: var(--text-sm); color: var(--text-secondary); }
.bb-modal__body { padding: 1.25rem; }
.bb-modal__foot { padding: 1rem 1.25rem; border-top: 1px solid var(--border-subtle); display: flex; gap: .6rem; justify-content: flex-end; align-items: center; background: var(--paper-50); }
.bb-modal__tabs { display: inline-flex; border: 1px solid var(--border-default); border-radius: var(--studio-radius); overflow: hidden; background: var(--surface-card); margin-bottom: 1.1rem; }
.bb-modal__tab { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; font: inherit; font-size: var(--text-sm); color: var(--text-secondary); padding: 8px 14px; cursor: pointer; border-right: 1px solid var(--border-default); }
.bb-modal__tab:last-child { border-right: none; }
.bb-modal__tab.is-on { background: var(--brand-primary); color: var(--paper-50); }
.bb-modal__tab svg { width: 15px; height: 15px; display: block; }
.bb-modal .field { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .9rem; }
.bb-modal .field > label { color: var(--text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: .03em; }
.bb-modal .field input, .bb-modal .field textarea, .bb-modal .field select { width: 100%; padding: .55rem .65rem; border: 1px solid var(--border-default); border-radius: var(--studio-radius); font: inherit; font-size: var(--text-sm); background: var(--white); color: var(--text-primary); }
.bb-modal .field textarea { min-height: 180px; resize: vertical; line-height: var(--leading-relaxed); }
.bb-dropzone { border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--paper-50); padding: 1.6rem 1rem; text-align: center; cursor: pointer; transition: border-color var(--duration-fast), background var(--duration-fast); }
.bb-dropzone:hover, .bb-dropzone.is-drag { border-color: var(--brand-accent); background: var(--surface-accent); }
.bb-dropzone__ic { width: 46px; height: 46px; border-radius: 12px; background: var(--surface-card); border: 1px solid var(--border-default); color: var(--brand-accent-ink); display: grid; place-items: center; margin: 0 auto .7rem; }
.bb-dropzone__ic svg { width: 22px; height: 22px; display: block; }
.bb-dropzone strong { display: block; color: var(--text-primary); font-weight: var(--weight-medium); }
.bb-dropzone small { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: .3rem; }
.bb-dropzone__file { margin-top: .8rem; font-size: var(--text-sm); color: var(--brand-primary); font-weight: var(--weight-medium); }

@media (max-width: 1080px) {
  .bb-drawer { position: fixed; right: 0; top: var(--studio-topbar-height); bottom: 0; width: min(420px, 100%); z-index: 60; }
}
@media (max-width: 920px) {
  body.knowledge-studio { height: auto; overflow: auto; }
  body.knowledge-studio main { height: auto; display: block; }
  .bb-pagewrap { display: block; }
}