/*
 * Second half of the Qlik font defence (see the comment in styles.css). Qlik's
 * client CSS targets `body, button, input, select, textarea` at element
 * specificity; these class-scoped rules outrank it so our type survives inside
 * the extension regardless of stylesheet order.
 */
.admin-app,
.admin-app button,
.admin-app input,
.admin-app select,
.admin-app textarea {
  font-family: var(--sans);
}
.admin-app code,
.admin-app pre,
.admin-app .edge-state { font-family: var(--mono); }

.admin-app {
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100vh;
}

.admin-sidebar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100vh;
  padding: 20px 14px;
  overflow-y: auto;
  border-right: 1px solid var(--border);
  background: var(--surface);
}

.gateway-id {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
}

.brand-logo {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 9px;
  object-fit: cover;
}

.gateway-copy { min-width: 0; }
.gateway-copy strong { display: block; font-size: 14px; line-height: 1.25; }
.gateway-copy > span {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.status-dot {
  width: 7px;
  height: 7px;
  margin-top: 4px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}

.admin-tabs {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 17px;
}

.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
  padding: 0 10px 4px;
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 35px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
}

.tab-button:hover,
.tab-button.active {
  background: var(--surface-2);
  color: var(--ink);
}
.nav-badge {
  min-width: 22px;
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 10.5px;
  font-weight: 750;
  text-align: center;
}

.tab-button.active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 650;
}

.nav-icon {
  display: inline-grid;
  width: 17px;
  place-items: center;
  color: currentColor;
  font-size: 15px;
}

.sidebar-foot {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 10px 0;
  border-top: 1px solid var(--border);
  color: var(--faint);
  font-size: 11.5px;
}

.sidebar-foot strong { color: var(--muted); font-weight: 650; }
.theme-button {
  align-self: flex-start;
  margin-top: 7px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
}

.admin-shell {
  width: 100%;
  min-width: 0;
  padding: 24px 30px 60px;
}

.admin-topbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.admin-topbar h1 { margin-bottom: 2px; font-size: 22px; letter-spacing: -0.01em; }
.admin-topbar p { margin-bottom: 0; font-size: 13px; }
.topbar-actions, .row-actions, .dialog-actions, .workflow-editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-section { display: none; }
.admin-section.active { display: block; }

.admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.kpi-card,
.admin-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.kpi-card { min-height: 118px; padding: 15px 16px; }
.kpi-card:is(button) {
  display: block;
  width: 100%;
  border-color: var(--border);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}
.kpi-card:is(button).warn { border-color: var(--warn-border); background: var(--warn-soft); }
.kpi-card:is(button):hover { background: var(--surface-2); }
.kpi-card:is(button).warn:hover { background: var(--warn-soft); border-color: var(--warn); }
.attention-kpi:hover { border-color: var(--warn); }
.kpi-card.good { border-color: var(--accent-border); }
.kpi-card.warn { border-color: var(--warn-border); background: var(--warn-soft); }
.kpi-label {
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}
.kpi-card strong { display: block; font-size: 24px; line-height: 1.1; font-weight: 650; }
/* Detail lines are a caption, not a paragraph — clamp to two lines, full text on hover. */
.kpi-card span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.4;
}

.admin-card { padding: 18px; }
.admin-card + .admin-card, .update-card { margin-top: 14px; }
.split-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(330px, 0.8fr);
  gap: 14px;
  margin-top: 14px;
}
.writeback-support-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/*
 * Card header bar. Bleeding the heading to the card edge and separating it with
 * a hairline gives each card one clear title row instead of a floating label,
 * and lets tables below run flush to the card edge.
 */
.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}
.admin-card > .section-heading {
  margin: -18px -18px 14px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--border);
}
.section-heading h2 { margin-bottom: 0; font-size: 14.5px; font-weight: 650; }

/*
 * Tables are the card's content, so they span it edge to edge. The bottom bleed
 * only applies when the table really is the last thing in the card — otherwise
 * it drags whatever follows (an editor form) up into the card padding.
 */
.admin-card > .table-wrap { margin: 0 -18px; }
.admin-card > .table-wrap:last-child { margin-bottom: -18px; }
.admin-card > .table-wrap th:first-child,
.admin-card > .table-wrap td:first-child { padding-left: 18px; }
.admin-card > .table-wrap th:last-child,
.admin-card > .table-wrap td:last-child { padding-right: 18px; }
.admin-card > .table-wrap tbody tr:last-child td { border-bottom: 0; }

.compact-heading { margin-top: 18px; margin-bottom: 10px; }
.compact-heading h3, .workflow-editor h3 { margin-bottom: 0; font-size: 15px; }
.section-copy { margin: -3px 0 12px; font-size: 12.5px; }

/*
 * Eyebrows are quiet context above a title, not a second heading. Uppercase
 * 700-weight tracking on every label made the whole page shout; the only
 * uppercase micro-labels left are the sidebar group names (.nav-label).
 */
.eyebrow, .output-label {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0;
  text-transform: none;
}

/*
 * Button system. The base is a neutral outlined control held at element-level
 * specificity (0,0,1) by :where(), so every variant below — and .icon-button,
 * .filter-chip, .sort-button, .action-menu button, .kpi-card, .workflow-card —
 * overrides it with a plain class and without !important.
 * Accent styling is opt-in via .primary-button, never the default.
 */
button:where(:not(.tab-button):not(.theme-button)),
.secondary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}
button:where(:not(.tab-button):not(.theme-button):hover:not(:disabled)),
.secondary-button:hover { background: var(--surface-2); }

.primary-button {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 650;
}
.primary-button:hover:not(:disabled) { background: var(--accent); filter: brightness(1.07); }

.compact-button { min-height: 34px; padding: 5px 10px; font-size: 12.5px; }
.danger-button {
  border-color: var(--danger-border);
  background: var(--danger-soft);
  color: var(--danger);
}
.danger-button:hover:not(:disabled) { background: var(--danger-soft); filter: brightness(0.97); }
button:disabled { cursor: not-allowed; opacity: 0.55; }

.status,
.role-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
}
.status-ready, .status-good, .status-success { border-color: var(--accent-border); background: var(--accent-soft); color: var(--accent); }
.status-working { border-color: var(--border-strong); color: var(--info); background: var(--info-soft); }
.status-error { border-color: var(--danger-border); color: var(--danger); background: var(--danger-soft); }
.service-state, .nfr-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}
.service-state.disabled { background: var(--danger-soft); color: var(--danger); }
.muted { color: var(--faint); }

.notice {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  width: min(460px, calc(100vw - 36px));
  margin: 0;
  padding: 10px 13px;
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.notice.error { border-color: var(--danger-border); color: var(--danger); }
.notice.success { border-color: var(--accent-border); color: var(--accent); }
.notice-dismiss {
  flex: none;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border-color: transparent;
  background: transparent;
  color: currentColor;
  font-size: 20px;
}
.notice-dismiss:hover { background: var(--surface-2); }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
  padding: 10px 11px;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  vertical-align: middle;
}
td { color: var(--ink); }
th {
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: bottom;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }

/*
 * Two-line cells. Rows are built as `<strong>Label</strong><span>identifier</span>`,
 * so both must be block or the identifier runs onto the end of the label
 * ("raptor-qc-mcpqc"). Pill spans (.service-state, .never-used-pill, .role-badge)
 * carry their own display and are unaffected.
 */
td > strong { display: block; font-weight: 650; }
td > span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}
td > span:empty { display: none; }
td time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/*
 * Endpoints are single tokens: keep them on one line and let .table-wrap scroll
 * if a narrow column ever forces it. Wrapping them mid-URL also starved the
 * name column, which then hyphenated ("raptor-writeback-" / "mcp").
 */
td code { white-space: nowrap; }

/*
 * Service names are single identifiers. Left to wrap they break at their own
 * hyphens ("raptor-qc-" / "mcp"), which also lets auto table layout starve the
 * column. Only cells holding an identifier get this — labels still wrap.
 */
td.identifier-cell > strong { white-space: nowrap; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.token-toolbar,
.bulk-bar,
.attention-callout,
.form-context,
.update-summary-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.token-toolbar { margin-bottom: 13px; }
.token-search { width: min(360px, 100%); }
.filter-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.filter-chip,
.section-tab,
.sort-button {
  min-height: 32px;
  padding: 5px 10px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
}
.filter-chip:hover,
.section-tab:hover { color: var(--ink); }
.filter-chip.active,
.section-tab.active {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}
.filter-chip span { margin-left: 4px; font-variant-numeric: tabular-nums; }
.attention-callout {
  margin-bottom: 13px;
  padding: 10px 12px;
  border: 1px solid var(--warn-border);
  border-radius: 8px;
  background: var(--warn-soft);
  color: var(--warn);
}
.bulk-bar {
  position: sticky;
  top: 10px;
  z-index: 5;
  margin-bottom: 10px;
  padding: 9px 11px;
  border: 1px solid var(--accent-border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.selection-cell { width: 42px; text-align: center; }
.selection-cell input { width: 16px; min-height: 16px; margin: 2px auto 0; }
.sort-button {
  min-height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sort-button:hover { background: transparent; color: var(--ink); }
.never-used-pill { display: inline-flex; padding: 2px 7px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 11px; font-weight: 700; }
.action-cell { width: 52px; }
.action-menu { position: relative; }
.action-menu summary { cursor: pointer; list-style: none; font-size: 20px; line-height: 1; text-align: center; }
.action-menu summary::-webkit-details-marker { display: none; }
/*
 * Row menus are positioned as a fixed layer, not absolutely inside the row.
 * .table-wrap sets overflow-x: auto, and per spec a non-visible value on one
 * axis makes the other compute to auto — so the table clipped its own dropdowns
 * and the last row's menu items were unclickable (the click landed on the page
 * behind them). Fixed positioning escapes every ancestor clip; admin.js sets
 * left/top from the summary on open and closes menus on scroll or resize.
 */
.action-menu > div {
  position: fixed;
  z-index: 80;
  display: grid;
  min-width: 168px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.action-menu button {
  justify-content: flex-start;
  min-height: 32px;
  padding: 5px 9px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-weight: 550;
}
.action-menu button:hover { background: var(--surface-2); }
.action-menu .danger-menu-item { color: var(--danger); }
.action-menu .danger-menu-item:hover { background: var(--danger-soft); }

.section-tabs { display: flex; gap: 6px; margin-bottom: 12px; overflow-x: auto; }
.subtab-content { display: block; }
.subtab-content > .admin-card { margin-top: 0; }
.form-context { margin-bottom: 12px; }
.form-context h3 { margin-bottom: 0; font-size: 15px; }
.dirty-state { padding: 3px 8px; border-radius: 999px; background: var(--warn-soft); color: var(--warn); font-size: 11px; font-weight: 700; }
.form-note { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.update-summary-line { justify-content: flex-start; flex-wrap: wrap; width: 100%; padding: 12px; }
.update-summary-line small { color: var(--faint); }
#gateway-update-panel { display: block; }

/*
 * Property lists read as labelled rows, not a grid of boxes — one hairline per
 * fact, label left, value right.
 */
.setup-grid, .diagnostics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  border: 0;
  background: none;
}
.setup-item, .diagnostic-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  background: none;
}
.setup-item:last-child, .diagnostic-item:last-child { border-bottom: 0; }
.setup-item span, .diagnostic-item span {
  flex: none;
  color: var(--muted);
  font-size: 13px;
}
.setup-item strong, .diagnostic-item strong {
  margin-top: 0;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.channel-form, .insight-form { margin-top: 14px; }
/* An editor that follows a list needs a rule between them; one that opens the card does not. */
.admin-card > .table-wrap + .channel-form,
.admin-card > .table-wrap + .insight-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.llm-grid, .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
label { color: var(--muted); font-size: 12.5px; font-weight: 650; }
label input, label select, label textarea { margin-top: 5px; }
.full-span { grid-column: 1 / -1; }

/*
 * Grid items stretch to their cell by default, which turned every button placed
 * directly in a form grid into a half-width slab. Buttons size to their content;
 * action rows span the full grid and sit on their own line.
 */
.llm-grid > button,
.form-grid > button { justify-self: start; }
.llm-grid > .row-actions,
.llm-grid > .provider-edit-actions,
.form-grid > .row-actions {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

.check-row { display: flex; align-items: center; gap: 8px; min-height: 38px; }
.check-row input { width: 16px; min-height: 16px; margin: 0; }

/*
 * Checkbox rows read as selectable options rather than loose text, and line up
 * with the inputs beside them.
 */
.llm-grid > .check-row,
.form-grid > .check-row {
  gap: 9px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}
.llm-grid > .check-row:hover,
.form-grid > .check-row:hover { border-color: var(--border-strong); }
.check-row input { accent-color: var(--accent); }

/*
 * Secret inputs stay masked, but an inline reveal lets an admin confirm what
 * they pasted. Applied automatically to every input[type=password] by admin.js.
 */
.secret-field { display: block; }
.secret-field > label { display: block; }
.secret-control { position: relative; margin-top: 5px; }
.secret-control input { margin-top: 0; padding-right: 66px; }
.secret-reveal {
  position: absolute;
  right: 5px;
  bottom: 5px;
  min-height: 28px;
  padding: 3px 9px;
  border-color: transparent;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}
.secret-reveal:hover { background: var(--border); color: var(--ink); }

.token-output, .code-panel, .auth-note, .connector-panel {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.output-label { display: block; padding: 12px 13px 0; }
pre {
  min-height: 70px;
  margin: 0;
  padding: 11px 13px 14px;
  overflow: auto;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.auth-note { display: flex; justify-content: space-between; gap: 12px; padding: 12px; }
.auth-note .output-label { padding: 0; }
.endpoint-list { display: grid; gap: 8px; }
.endpoint-row, .config-row { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.endpoint-card, .connector-card {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
}
.icon-button {
  min-height: 30px;
  padding: 4px 8px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: 12px;
}
.icon-button:hover { background: var(--surface-2); color: var(--ink); }
.compact-select { min-height: 34px; padding: 5px 8px; }

.workflow-admin-grid {
  display: grid;
  grid-template-columns: minmax(230px, 0.6fr) minmax(0, 1.6fr);
  gap: 14px;
}
.workflow-list { display: grid; align-content: start; gap: 8px; }
.workflow-card {
  display: grid;
  justify-content: stretch;
  gap: 5px;
  width: 100%;
  padding: 12px;
  border-color: var(--border);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
}
.workflow-card:hover { background: var(--surface-2); }
.workflow-card.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}
.workflow-card.selected:hover { background: var(--accent-soft); }
.workflow-card-head, .workflow-card-foot { display: flex; justify-content: space-between; gap: 8px; }
.workflow-card-id, .workflow-card-meta, .workflow-card-foot { color: var(--faint); font-size: 11.5px; }
.workflow-card-meta b { margin-right: 5px; color: var(--muted); }
.workflow-editor { margin-top: 0; padding: 15px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.workflow-editor-header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.workflow-editor-actions { margin-top: 13px; }
.workflow-visual { margin-bottom: 15px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }

/*
 * The diagram scales down to fit its panel, but never below a readable floor —
 * past that it scrolls instead of shrinking the labels into illegibility.
 */
.workflow-canvas { overflow-x: auto; padding: 2px 0 4px; }
.workflow-canvas svg {
  display: block;
  max-width: 100%;
  min-width: 520px;
  height: auto;
}
.workflow-canvas text { font-family: var(--mono); }
.advanced-config { margin-top: 4px; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.advanced-config summary { color: var(--muted); cursor: pointer; font-weight: 650; }
.advanced-config label { display: block; margin-top: 10px; }
.advanced-config .token-output { margin-top: 12px; }
.output-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.llm-panel { margin-top: 14px; }
.provider-layout { display: grid; grid-template-columns: minmax(220px, 0.6fr) minmax(0, 1.4fr); gap: 14px; }

/*
 * The provider manager is a heading row stacked above a card grid — not two
 * columns. It was sharing .provider-layout's two-column rule, which pushed the
 * "Provider configurations" heading into column one and the cards into column
 * two, so the cards floated off to the right of their own title.
 */
.llm-provider-manager {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 11px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.provider-list-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.provider-list-header h3 { margin: 0; font-size: 14.5px; font-weight: 650; }

.provider-list,
.llm-provider-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  align-content: start;
  gap: 9px;
}

/*
 * Provider cards are buttons, so without their own rule they inherited the
 * centred base-button styling and rendered as centred single-line slabs.
 */
.llm-provider-card {
  display: grid;
  align-content: start;
  /* justify-content too: the base button centres its track, which indented the card text. */
  justify-content: stretch;
  justify-items: start;
  gap: 3px;
  min-height: 60px;
  padding: 11px 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  font-weight: 550;
}
.llm-provider-card strong { font-size: 13.5px; font-weight: 650; }
.llm-provider-card span {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11.5px;
  overflow-wrap: anywhere;
}
.llm-provider-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.llm-provider-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}
.llm-provider-card.active strong { color: var(--accent); }
.llm-provider-card.disabled { opacity: 0.62; }

.provider-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.provider-edit-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/*
 * <fieldset> ships a 2px groove border and its own padding from the UA
 * stylesheet; without a reset the module picker rendered as a raw grey box.
 */
.module-picker {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 7px;
  margin: 0;
  padding: 0;
  border: 0;
}
.module-picker legend {
  float: left;
  width: 100%;
  margin: 0 0 7px;
  padding: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 650;
}
.module-option {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
}
.module-option input { width: 16px; min-height: 16px; margin: 0; }
.role-list { display: flex; gap: 5px; flex-wrap: wrap; }

/* Load meters: a bar beside the figure so pressure reads at a glance. */
.meter {
  display: inline-block;
  width: 104px;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
  vertical-align: middle;
}
.meter i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.meter.hot i { background: var(--warn); }
.meter-value {
  display: inline-block;
  min-width: 52px;
  margin-left: 9px;
  color: var(--muted);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}

/*
 * Editor drawer. Creating and editing used to happen in a form pinned under the
 * list, which left no signal about which record you were changing. A drawer
 * makes the editing context explicit, keeps the list visible behind it, and
 * gives the actions one fixed home instead of a row floating mid-page.
 */
.drawer-host { position: fixed; inset: 0; z-index: 90; }
.drawer-scrim { position: absolute; inset: 0; background: rgba(3, 12, 10, 0.5); }
.drawer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(520px, 100%);
  border-left: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.drawer-head h3 { margin: 0; font-size: 17px; font-weight: 650; }
.drawer-head .eyebrow { margin-bottom: 2px; }
.drawer-body { flex: 1; padding: 4px 20px 20px; overflow-y: auto; }
.drawer-fieldset { padding: 16px 0; border-bottom: 1px solid var(--border); }
.drawer-fieldset:last-child { border-bottom: 0; }
.drawer-fieldset[hidden] { display: none; }
.fs-title {
  margin: 0 0 10px;
  color: var(--faint);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
/* One column: a 520px drawer has no room for paired fields. */
.drawer-body .llm-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
.drawer-body .full-span { grid-column: auto; }
.drawer-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  padding: 13px 20px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.drawer-foot .dirty-state { margin-right: auto; }

@media (max-width: 620px) {
  .drawer { width: 100%; }
}

.dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(3, 12, 10, 0.55);
}
#confirm-dialog { z-index: 110; }
.dialog {
  width: min(520px, 100%);
  max-height: calc(100vh - 36px);
  padding: 20px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.wide-dialog { width: min(720px, 100%); }
.dialog-actions { justify-content: flex-end; margin-top: 16px; }
.user-access-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 2px 0 18px; }
.user-pools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.user-pool { display: inline-flex; align-items: baseline; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); }
.user-pool span { color: var(--faint); }
#user-audit { padding: 14px 0 0; font-size: 12px; color: var(--muted); }
#user-audit details { margin: 0; }
.user-role-fields { display: grid; gap: 16px; }
.user-role-fields .form-field { margin: 0; }
.user-role-fields small { color: var(--faint); font-weight: normal; }
.user-role-pairs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.role-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.role-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-2);
}
.role-option input { width: 16px; min-height: 16px; margin: 0; }

.empty-state { padding: 22px 12px; color: var(--faint); text-align: center; }

@media (max-width: 1050px) {
  .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-grid, .writeback-support-grid { grid-template-columns: 1fr; }
  .workflow-admin-grid, .provider-layout, .llm-provider-manager { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .user-role-pairs { grid-template-columns: 1fr; }
  .admin-app { grid-template-columns: 1fr; }
  .admin-sidebar {
    position: static;
    height: auto;
    padding: 13px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
  .admin-tabs { flex: none; flex-direction: row; gap: 6px; overflow-x: auto; }
  .nav-group { display: contents; }
  .nav-label, .sidebar-foot { display: none; }
  .tab-button { width: auto; flex: 0 0 auto; }
  .admin-shell { padding: 18px 14px 40px; }
  .admin-topbar { align-items: flex-start; }
  .admin-grid, .setup-grid, .diagnostics-grid, .llm-grid, .form-grid, .provider-grid, .module-picker { grid-template-columns: 1fr; }
  .full-span { grid-column: auto; }
  .token-toolbar, .attention-callout, .bulk-bar { align-items: stretch; flex-direction: column; }
  .token-search { width: 100%; }
  .workflow-edges li { grid-template-columns: 1fr 20px 1fr; }
  .edge-label { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .admin-topbar { display: block; }
  .topbar-actions { margin-top: 12px; }
  .admin-card { padding: 14px; }
  .admin-card > .section-heading { margin: -14px -14px 14px; padding: 13px 14px; }
  .admin-card > .table-wrap { margin-right: -14px; margin-left: -14px; }
  .admin-card > .table-wrap:last-child { margin-bottom: -14px; }
  .admin-card > .table-wrap th:first-child,
  .admin-card > .table-wrap td:first-child { padding-left: 14px; }
  .admin-card > .table-wrap th:last-child,
  .admin-card > .table-wrap td:last-child { padding-right: 14px; }
  .section-heading { align-items: stretch; flex-direction: column; }
}

/* Knowledge base: quiet controls around a persistent file browser. */
.kb-shell{padding:0;overflow:visible}.kb-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:24px 24px 16px}.kb-title{display:flex;align-items:center;gap:8px}.kb-title h2{margin:0}.kb-header p{margin:6px 0 0;color:var(--muted)}.kb-icon-button{display:inline-flex;padding:6px;border:0;background:transparent;color:var(--muted)}.kb-icon-button:hover{color:var(--ink)}.kb-settings{position:relative;flex:none}.kb-settings summary{cursor:pointer;padding:8px 12px;border:1px solid var(--border);border-radius:8px}.kb-settings>div{position:absolute;right:0;z-index:5;width:min(320px,75vw);padding:20px;border:1px solid var(--border);border-radius:12px;background:var(--surface);box-shadow:0 12px 36px #0004}.kb-settings p{font-size:12px;margin:10px 0}.kb-rename{display:flex;align-items:end;gap:10px;padding:0 24px 18px}.kb-rename label{flex:1}.kb-meta{display:flex;flex-wrap:wrap;gap:20px;padding:0 24px 16px;color:var(--muted);font-size:12px}.kb-auto>span{color:var(--accent);margin-right:5px}.kb-status{margin:0!important;padding:0 24px;color:var(--muted);font-size:13px}.kb-status:not(:empty){padding-bottom:16px}.kb-workspace{display:grid;grid-template-columns:minmax(240px,30%) minmax(0,1fr);min-height:560px;border-top:1px solid var(--border)}.kb-browser{border-right:1px solid var(--border);min-width:0}.kb-browser-tools{padding:16px;display:grid;gap:10px;border-bottom:1px solid var(--border)}.kb-browser-tools button{justify-self:start;font-size:12px}.kb-search{font-size:12px;color:var(--muted)}.kb-search input{margin-top:6px!important}.kb-browser nav{padding:12px 8px;max-height:620px;overflow:auto}.kb-browser details>div{padding-left:16px;margin-left:9px;border-left:1px solid var(--border)}.kb-browser summary,.kb-file{display:flex;align-items:center;gap:8px;padding:8px!important;border:0!important;border-radius:6px;background:transparent!important;color:var(--ink);font-size:13px!important;line-height:1.4;cursor:pointer;width:100%;text-align:left;margin:1px 0!important;min-width:0}.kb-browser summary{list-style:none}.kb-browser summary::-webkit-details-marker{display:none}.kb-browser summary:before{content:'›';width:8px;flex:none;color:var(--muted)}.kb-browser details[open]>summary:before{transform:rotate(90deg)}.kb-browser svg{flex:none;color:var(--muted)}.kb-browser summary span,.kb-file span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.kb-file{padding-left:24px!important;justify-content:flex-start}.kb-file:hover,.kb-browser summary:hover{background:var(--surface-hover,#ffffff08)!important}.kb-file.is-selected{background:color-mix(in srgb,var(--accent) 15%,transparent)!important;color:var(--accent)}.kb-file.is-selected svg{color:var(--accent)}.kb-document{min-width:0;display:flex;flex-direction:column}.kb-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:16px 20px;min-height:52px;border-bottom:1px solid var(--border);font-size:11px;color:var(--muted);overflow-wrap:anywhere}.kb-empty{display:flex;min-height:420px;align-items:center;justify-content:center;flex-direction:column;text-align:center;color:var(--muted);padding:24px}.kb-empty svg{width:40px;height:40px;margin-bottom:12px}.kb-empty h3{color:var(--ink);margin:8px}.kb-empty p{line-height:1.7}.kb-document form{padding:20px;display:flex;flex-direction:column;gap:16px;flex:1}.kb-file-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.kb-file-heading h3{margin:0;font-size:16px;overflow-wrap:anywhere}.kb-file-heading span{font-size:11px;color:var(--muted);flex:none}.kb-content-label{display:flex;flex-direction:column;gap:8px;flex:1;font-size:12px;color:var(--muted)}.kb-document textarea{min-height:370px;flex:1;resize:vertical;box-sizing:border-box;width:100%;font:13px/1.75 var(--mono);tab-size:2;padding:16px}.kb-savebar{display:flex;align-items:end;gap:12px}.kb-savebar label{flex:1;font-size:12px;color:var(--muted)}.kb-savebar button{background:var(--accent);color:var(--accent-ink);font-weight:600;white-space:nowrap}.kb-hint{font-size:11px;color:var(--muted);margin:0}.kb-secondary{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--border);gap:24px;padding:18px 24px}.kb-secondary summary{font-size:13px;color:var(--muted);cursor:pointer}.kb-secondary p{font-size:12px;color:var(--muted);line-height:1.6}.kb-secondary form{display:grid;gap:10px}.kb-secondary label{font-size:12px}.kb-secondary pre{max-height:250px;overflow:auto;font-size:11px;white-space:pre-wrap}.kb-secondary button{justify-self:start}.kb-shell [hidden]{display:none!important}.kb-no-results{padding:12px;color:var(--muted)}
@media(max-width:900px){.kb-workspace{grid-template-columns:230px minmax(0,1fr)}.kb-header{padding:18px}.kb-savebar{align-items:stretch;flex-direction:column}.kb-secondary{grid-template-columns:1fr}}
@media(max-width:650px){.kb-workspace{grid-template-columns:1fr}.kb-browser{border-right:0;border-bottom:1px solid var(--border)}.kb-browser nav{max-height:260px}.kb-header{gap:12px}.kb-title h2{font-size:18px}.kb-rename{flex-wrap:wrap}.kb-meta{gap:10px}}

.kb-file-spinner{width:13px;height:13px;flex:none;margin-left:auto;border:2px solid var(--border-strong);border-top-color:var(--accent);border-radius:50%;animation:kb-file-spin .7s linear infinite}@keyframes kb-file-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.kb-file-spinner{animation:none}}

.kb-tree-loading{display:flex;align-items:center;gap:10px;padding:16px 8px;color:var(--muted);font-size:13px}.kb-tree-loading .kb-file-spinner{margin-left:0}

/* Shared Qlik editor uses the Admin theme in both light and dark mode. */
.qlik-connection-dialog{width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--border);border-radius:16px;color:var(--ink);background:var(--surface);box-shadow:var(--shadow-pop);font-family:var(--sans)}
.qlik-connection-dialog::backdrop{background:#10251b88;backdrop-filter:blur(3px)}
.qlik-connection-dialog .dialog-card{padding:32px;position:relative}
.qlik-connection-dialog h2{margin:0 28px 28px 0;font-size:24px;line-height:1.2;letter-spacing:-.6px;color:var(--ink)}
.qlik-connection-dialog label{display:grid;gap:7px;margin:18px 0;font-size:13px;font-weight:600;color:var(--ink)}
.qlik-connection-dialog input,.qlik-connection-dialog select{box-sizing:border-box;width:100%;border:1px solid var(--border-strong);border-radius:7px;padding:11px;font:inherit;background:var(--surface-2);color:var(--ink)}
.qlik-connection-dialog [hidden]{display:none!important}
.qlik-connection-dialog .quiet{color:var(--muted)}
.qlik-connection-dialog .error{color:var(--danger)}
.qlik-connection-dialog .dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}
.qlik-connection-dialog button{cursor:pointer;font:inherit}
.qlik-connection-dialog button:disabled{cursor:wait;opacity:.6}
.qlik-connection-dialog input:focus-visible,.qlik-connection-dialog select:focus-visible,.qlik-connection-dialog button:focus-visible{outline:3px solid var(--accent-border);outline-offset:2px}
.qlik-connection-dialog .dialog-close{position:absolute;right:20px;top:16px;border:0;background:transparent;color:var(--muted);font-size:26px}
.hub-connections-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:16px}
.hub-connections-toolbar h2{margin:0;font-size:20px}
.nprinting-users-heading{margin-top:24px}
.nprinting-users-heading h3{margin:0;font-size:17px}
.nprinting-connection-dialog textarea{box-sizing:border-box;width:100%;border:1px solid var(--border-strong);border-radius:7px;padding:11px;font:inherit;background:var(--surface-2);color:var(--ink);resize:vertical}
.nprinting-connection-dialog .check-row{display:flex;align-items:center;gap:10px;font-weight:500}
.nprinting-connection-dialog .check-row input{width:auto;margin:0}
.nprinting-connection-dialog textarea:focus-visible{outline:3px solid var(--accent-border);outline-offset:2px}
.hub-connection-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}
.hub-connection-row p{margin:6px 0;overflow-wrap:anywhere}
.hub-connection-row span{font-size:12px;color:var(--muted)}
.hub-connection-actions{display:flex;gap:8px}
.hub-connection-actions button,.qlik-connection-dialog .dialog-actions button{min-height:40px;padding:9px 16px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);color:var(--ink);font-size:14px;font-weight:600;line-height:1.2}
.qlik-connection-dialog .dialog-actions .primary{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);width:auto;min-width:120px}
@media(max-width:560px){.hub-connection-row{align-items:flex-start;flex-direction:column}.qlik-connection-dialog .dialog-card{padding:24px}}

#browser-addresses-panel [data-trust-confirm]:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
}
#browser-addresses-panel [data-trust-confirm] input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
}
#browser-addresses-panel [data-address-tags] { flex-wrap: wrap; }

/* User administration: identity, access, and state each have one clear column. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.user-list-controls { display: flex; align-items: center; gap: 10px; padding-bottom: 16px; }
.user-list-controls label { margin: 0; }
.user-list-search { width: min(340px, 100%); }
.user-list-controls input, .user-list-controls select { margin: 0; min-height: 36px; font-size: 13px; }
.user-list-count { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.user-access-table { min-width: 850px; table-layout: fixed; }
.user-access-table th:nth-child(1) { width: 28%; }
.user-access-table th:nth-child(2) { width: auto; }
.user-access-table th:nth-child(3) { width: 110px; }
.user-access-table th:nth-child(4) { width: 120px; }
.user-access-table th:nth-child(5) { width: 180px; }
.user-access-table td { padding-top: 18px; padding-bottom: 18px; vertical-align: middle; }
.user-access-table td > .user-display-name { display: block; margin: 0 0 4px; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; color: var(--ink); }
.user-access-table td > .user-address { display: block; margin: 0 0 4px; font-size: 12px; overflow-wrap: anywhere; color: var(--muted); }
.user-access-table td > .user-source { display: block; margin: 0; color: var(--faint); font-size: 11px; }
.user-access-table td > .user-source.needs-review { color: var(--warn); }
.user-access-table td > .user-licence { display: inline-flex; margin: 0 0 8px; padding: 2px 7px; border-radius: 4px; border: 1px solid var(--border); font-size: 11px; font-weight: 650; color: var(--muted); }
.user-access-table td > .user-licence.insights { color: var(--accent); border-color: var(--accent-border); background: var(--accent-soft); }
.user-capabilities { display: flex; flex-wrap: wrap; gap: 5px 8px; }
.user-capability { display: inline-block; color: var(--ink); font-size: 12px; line-height: 1.5; }
.user-capability + .user-capability::before { content: '·'; margin-right: 8px; color: var(--faint); }
.user-access-table td > .user-providers { display: block; margin: 0; color: var(--muted); font-size: 12px; }
.user-access-table td > .user-status { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: 12px; font-weight: 600; color: var(--muted); }
.user-status.active::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.user-access-table td > .user-token-count { display: block; margin: 5px 0 0; color: var(--faint); font-size: 11px; white-space: nowrap; }
.user-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex-wrap: nowrap; }
.user-row-actions button { white-space: nowrap; flex: none; }
.user-row-actions .user-remove-button { min-height: 34px; padding: 5px 6px; border: 0; background: transparent; color: var(--muted); font-size: 12px; }
.user-row-actions .user-remove-button:hover { color: var(--danger); background: var(--danger-soft); }
.user-is-removed .user-display-name, .user-is-removed .user-capabilities { color: var(--muted); }
@media (max-width: 700px) { .user-list-controls { flex-wrap: wrap; } .user-list-search { flex: 1; min-width: 180px; } .user-list-count { width: 100%; margin: 0; } }