/* EDBS_NG Forge — Variante C Workbench
   IDE shell: dark-first, teal accent, IBM Plex fonts, dense rows.
   Light theme via [data-theme="light"]. */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ─── Design Tokens (Dark) ─────────────────────────────────────────── */
/* Teleported Radzen popups (dialogs/dropdowns/popups) render on <body>,
   outside .forge-shell, so the token + bridge set is mirrored onto them via
   :has() so they inherit the exact same theme as the in-shell content.
   The DevOpsKbArticlePopover panel is teleported to <body> too (openPopover),
   so it needs the same token mirror — otherwise its header/background lose
   var(--c-*) and render transparent. */
.forge-shell,
.workspace-gate-overlay,
body:has(.forge-shell) > .rz-dialog-wrapper,
body:has(.forge-shell) > .rz-dropdown-panel,
body:has(.forge-shell) > .rz-popup,
body:has(.forge-shell) > .rz-notification,
body:has(.forge-shell) > .kb-pop-panel {
  --f-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --fz-xs: 11px;
  --fz-sm: 12px;
  --fz-md: 13px;
  --fz-lg: 14px;
  --fz-xl: 16px;

  --row-h: 22px;
  --tab-h: 36px;
  --status-h: 24px;
  --title-h: 44px;
  --toolbar-h: 34px;
  --rail-w: 56px;

  --c-bg-deepest: #0e1116;
  --c-bg-tool: #161a20;
  --c-bg-editor: #0e1116;
  --c-bg-elev: #1c2128;
  --c-bg-hover: #1a1f26;
  --c-bg-active: #232a33;
  --c-bg-selected: #1a3a48;
  --c-border: #20262e;
  --c-border-strong: #2e3640;
  --c-text: #d4dae0;
  --c-text-dim: #8a96a3;
  --c-text-mute: #5a6573;
  --c-accent: #4ec9b0;
  --c-accent-soft: rgba(78, 201, 176, 0.14);
  --c-info: #61afef;
  --c-success: #a3d977;
  --c-warn: #e5c07b;
  --c-error: #ef5f6b;
  /* Dirty-tab marker — warmer than --c-warn so it reads as "unsaved", with a
     darkened light-theme variant for contrast on the pale pill background. */
  --tab-dirty: #e0a15f;
  /* Pill tabs: strip sits below the pills, pills clearly above it (design:
     strip darker than the card, pills lighter than the strip). */
  --tab-strip-bg: var(--c-bg-deepest);
  --tab-pill: #1e252e;
  --tab-pill-hover: #29323d;

  /* Radzen bridge */
  --rz-base-50: var(--c-bg-editor);
  --rz-base-100: var(--c-bg-elev);
  --rz-base-200: var(--c-bg-tool);
  --rz-base-300: var(--c-bg-active);
  --rz-base-400: var(--c-border-strong);
  --rz-base-500: var(--c-text-mute);
  --rz-base-600: var(--c-text-dim);
  --rz-base-700: var(--c-text);
  --rz-base-800: var(--c-text);
  --rz-base-900: var(--c-text);
  --rz-base-background-color: var(--c-bg-editor);
  --rz-border: var(--c-border);
  --rz-text-color: var(--c-text);
  --rz-text-secondary-color: var(--c-text-dim);
  --rz-text-disabled-color: var(--c-text-mute);
  /* Typography color vars resolve var(--rz-text-color/-title-color) at :root,
     baking in a dark value; re-declare them so dialog/popup text stays legible. */
  --rz-text-body1-color: var(--c-text);
  --rz-text-body2-color: var(--c-text-dim);
  --rz-text-caption-color: var(--c-text-dim);
  --rz-text-overline-color: var(--c-text-dim);
  --rz-text-h1-color: var(--c-text);
  --rz-text-h2-color: var(--c-text);
  --rz-text-h3-color: var(--c-text);
  --rz-text-h4-color: var(--c-text);
  --rz-text-h5-color: var(--c-text);
  --rz-text-h6-color: var(--c-text);
  --rz-text-subtitle1-color: var(--c-text);
  --rz-text-subtitle2-color: var(--c-text-dim);
  --rz-primary: var(--c-accent);
  --rz-primary-light: var(--c-accent-soft);
  --rz-primary-dark: #3aad96;
  --rz-primary-lighter: rgba(78, 201, 176, 0.08);
  --rz-secondary: var(--c-text-dim);
  --rz-info: var(--c-info);
  --rz-info-light: rgba(97, 175, 239, 0.14);
  --rz-success: var(--c-success);
  --rz-success-light: rgba(163, 217, 119, 0.14);
  --rz-warning: var(--c-warn);
  --rz-warning-light: rgba(229, 192, 123, 0.14);
  --rz-danger: var(--c-error);
  --rz-danger-light: rgba(239, 95, 107, 0.14);
  --rz-text-font-family: var(--f-sans);
  --rz-body-background-color: var(--c-bg-editor);
  --rz-input-background-color: var(--c-bg-deepest);
  --rz-input-hover-background-color: var(--c-bg-deepest);
  --rz-input-focus-background-color: var(--c-bg-deepest);
  --rz-input-hover-border: 1px solid var(--c-accent);
  --rz-input-focus-border: 1px solid var(--c-accent);
  --rz-input-focus-shadow: 0 0 0 1px var(--c-bg-editor), 0 0 0 3px rgba(78, 201, 176, 0.25);
  --rz-input-border: var(--c-border-strong);
  --rz-input-color: var(--c-text);
  /* The actual value/placeholder text colors. standard-base.css declares these at :root as
     var(--rz-text-color)/var(--rz-text-tertiary-color), so the indirection is resolved ONCE
     against :root's light-theme default (#4f4f50) and inherited verbatim — the bridge's later
     --rz-text-color override never reaches them. Re-declare here (same fix as the --rz-text-*
     typography vars above) or input text renders near-invisible dark-on-dark in dialogs/popups. */
  --rz-input-value-color: var(--c-text);
  --rz-input-placeholder-color: var(--c-text-mute);
  --rz-input-disabled-color: var(--c-text-mute);
  --rz-input-disabled-placeholder-color: var(--c-text-mute);
  --rz-input-font-size: var(--fz-sm);
  --rz-input-disabled-background-color: var(--c-bg-elev);
  --rz-grid-background-color: var(--c-bg-editor);
  --rz-grid-header-background-color: var(--c-bg-tool);
  --rz-grid-header-sorted-background-color: var(--c-bg-tool);
  --rz-grid-header-color: #fff;
  --rz-grid-cell-color: var(--c-text);
  --rz-text-title-color: #fff;
  --rz-grid-hover-background-color: var(--c-bg-hover);
  --rz-grid-hover-color: var(--c-text);
  --rz-grid-stripe-background-color: var(--c-bg-elev);
  --rz-grid-stripe-odd-background-color: var(--c-bg-editor);
  --rz-grid-selected-background-color: var(--c-accent-soft);
  --rz-grid-selected-color: var(--c-accent);
  --rz-grid-cell-focus-background-color: var(--c-accent-soft);
  --rz-grid-cell-focus-color: var(--c-text);
  --rz-grid-foot-background-color: var(--c-bg-tool);
  --rz-grid-toolbar-background-color: var(--c-bg-tool);
  --rz-grid-filter-background-color: var(--c-bg-tool);
  --rz-grid-frozen-cell-background-color: var(--c-bg-elev);
  --rz-on-primary-lighter: var(--c-accent);
  --rz-dialog-background-color: var(--c-bg-elev);
  --rz-dialog-title-background-color: var(--c-bg-tool);
  --rz-dialog-title-color: var(--c-text);
  --rz-dialog-close-color: var(--c-text-dim);
  --rz-dialog-close-hover-color: var(--c-text);
  --rz-checkbox-checked-color: var(--c-accent);
  --rz-checkbox-checked-background-color: var(--c-bg-deepest);
  --rz-checkbox-checked-hover-background-color: var(--c-bg-deepest);
  --rz-checkbox-checked-icon-background-color: var(--c-bg-deepest);
  --rz-panel-background-color: var(--c-bg-tool);
  --rz-card-background-color: var(--c-bg-elev);
  --rz-sidebar-background-color: var(--c-bg-tool);
  --rz-header-background-color: var(--c-bg-tool);
  --rz-tabstrip-background-color: var(--c-bg-tool);
  --rz-dropdown-open-background-color: var(--c-bg-deepest);
  --rz-dropdown-panel-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --rz-dropdown-item-hover-background-color: var(--c-bg-hover);
  --rz-dropdown-item-hover-color: var(--c-text);
  --rz-dropdown-item-selected-background-color: var(--c-accent-soft);
  --rz-dropdown-item-selected-color: var(--c-accent);
  --rz-dropdown-item-selected-hover-background-color: var(--c-accent-soft);
  --rz-dropdown-item-selected-hover-color: var(--c-accent);
  /* Radzen 11 SelectBar segments are plain .rz-button elements (no item class to target) —
     their colors come ONLY from these component vars, and --rz-selectbar-color/-border are
     declared at :root resolving the light theme (same gotcha as --rz-input-value-color). */
  --rz-selectbar-background-color: var(--c-bg-elev);
  --rz-selectbar-color: var(--c-text-dim);
  --rz-selectbar-border: 1px solid var(--c-border-strong);
  --rz-selectbar-selected-background-color: var(--c-accent-soft);
  --rz-selectbar-selected-color: var(--c-accent);
  --rz-selectbar-selected-border: 1px solid var(--c-accent);
  --rz-numeric-button-background-color: var(--c-bg-deepest);
  --rz-datepicker-panel-background-color: var(--c-bg-elev);
  --rz-datepicker-header-background-color: var(--c-bg-elev);
  --rz-tabs-background-color: var(--c-bg-editor);
  --rz-tabs-tab-hover-background-color: var(--c-bg-hover);
  --rz-tabs-tab-focus-background-color: var(--c-bg-hover);
  --rz-accordion-item-background-color: var(--c-bg-editor);
  --rz-lookup-panel-background-color: var(--c-bg-elev);

  font-family: var(--f-sans);
  font-size: var(--fz-md);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}
.forge-shell { background: var(--c-bg-editor); }

/* ─── Design Tokens (Light) ────────────────────────────────────────── */
.forge-shell[data-theme="light"],
body:has(.forge-shell[data-theme="light"]) > .rz-dialog-wrapper,
body:has(.forge-shell[data-theme="light"]) > .rz-dropdown-panel,
body:has(.forge-shell[data-theme="light"]) > .rz-popup,
body:has(.forge-shell[data-theme="light"]) > .rz-notification,
body:has(.forge-shell[data-theme="light"]) > .kb-pop-panel {
  --c-bg-deepest: #fafbfc;
  --c-bg-tool: #f1f3f5;
  --c-bg-editor: #ffffff;
  --c-bg-elev: #f6f8fa;
  --c-bg-hover: #eef1f4;
  --c-bg-active: #dde3ea;
  --c-bg-selected: #c8e6e0;
  --c-border: #d8dde3;
  --c-border-strong: #b4bbc4;
  --c-text: #1a1f2a;
  --c-text-dim: #4a5460;
  --c-text-mute: #7a838f;
  --c-accent: #1a8775;
  --c-accent-soft: rgba(26, 135, 117, 0.12);
  --tab-dirty: #b0731f;
  /* Light mode inverts the relation: pills darker than the pale strip. */
  --tab-strip-bg: #eef1f4;
  --tab-pill: #dde3ea;
  --tab-pill-hover: #cfd7e0;
  --rz-grid-header-color: #1a1f2a;
  --rz-text-title-color: #1a1f2a;
}

/* ─── Shell Grid ───────────────────────────────────────────────────── */
.forge-shell {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: var(--title-h) var(--toolbar-h) 1fr var(--status-h);
  grid-template-areas:
    "title"
    "toolbar"
    "body"
    "stat";
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  user-select: none;
}

.forge-body {
  grid-area: body;
  display: grid;
  /* Column 1 is the SidebarNav island (rail + collapsible panel) — it sizes itself via
     --rail-w + --forge-panel-w, so the grid just yields to it. */
  grid-template-columns: auto 1fr;
  min-height: 0;
}

.forge-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--c-bg-editor);
}

.forge-editor {
  flex: 1;
  overflow: auto;
  min-height: 0;
  transform: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* ─── Global Toolbar (full-width, under the title banner) ───────────── */
.forge-globalbar {
  grid-area: toolbar;
  height: var(--toolbar-h);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  background: var(--c-bg-tool);
  border-bottom: 1px solid var(--c-border);
}

/* ─── Title Bar ────────────────────────────────────────────────────── */
.forge-title {
  grid-area: title;
  background: var(--c-bg-tool);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 14px;
  color: var(--c-text-dim);
}

.forge-title-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--c-text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.forge-title-brand-mark {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.forge-title-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  background: var(--c-bg-deepest);
  border: 1px solid var(--c-border);
  color: var(--c-text-dim);
  font-family: var(--f-mono);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.forge-title-pill:hover { border-color: var(--c-border-strong); color: var(--c-text); }
.forge-title-pill strong { color: var(--c-text); font-weight: 600; }
.forge-title-pill .dot {
  width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
}
.forge-title-pill .dot.ok { background: var(--c-success); }
.forge-title-pill .dot.fail { background: var(--c-error); }
.forge-title-pill .dot.check { background: var(--c-warn); }
.forge-title-pill .dot.none { background: var(--c-text-mute); }
.forge-title-pill__project {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forge-title-badge {
  font-size: 9px;
  font-weight: 700;
  background: var(--c-accent);
  color: var(--c-bg-deepest);
  border-radius: 8px;
  padding: 1px 5px;
  margin-left: -4px;
  line-height: 1;
}
/* Notification-bell badge: red when any Critical is active, yellow when only Warnings. */
.forge-title-badge.is-critical { background: var(--c-error); color: #fff; }
.forge-title-badge.is-warning { background: var(--c-warn); color: var(--c-bg-deepest); }

.forge-title-search {
  flex: 1;
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 10px;
  background: var(--c-bg-deepest);
  border: 1px solid var(--c-border);
  border-radius: 5px;
  color: var(--c-text-mute);
  font-size: 12px;
  cursor: text;
}
.forge-title-search:focus-within { border-color: var(--c-accent); }
.forge-title-search input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: 13px;
}
.forge-title-search input::placeholder { color: var(--c-text-mute); }
.forge-title-kbd {
  font-family: var(--f-mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--c-border);
  border-radius: 3px;
  background: var(--c-bg-tool);
  color: var(--c-text-mute);
}

.forge-title-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.forge-title-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-dim);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.forge-title-btn:hover {
  background: var(--c-bg-hover);
  color: var(--c-text);
}

.forge-title-connect {
  height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: #f0a020;
  background: rgba(240, 160, 32, 0.12);
  border: 1px solid rgba(240, 160, 32, 0.35);
  cursor: pointer;
}

.forge-title-connect:hover {
  background: rgba(240, 160, 32, 0.2);
}

.forge-title-user {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-bg-deepest);
  border: 1px solid var(--c-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-text);
  margin-left: 4px;
  cursor: pointer;
}
.forge-title-user:hover {
  border-color: var(--c-accent);
}

/* ─── User Profile Dropdown ───────────────────────────────────────── */
.forge-user-dropdown {
  position: absolute;
  top: 34px;
  right: 0;
  z-index: 1000;
  min-width: 260px;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  padding: 8px 0;
  font-size: var(--fz-sm);
  color: var(--c-text);
}
.forge-user-dropdown__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
}
.forge-user-dropdown__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-bg-deepest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.forge-user-dropdown__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.forge-user-dropdown__name {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forge-user-dropdown__email {
  color: var(--c-text-muted);
  font-size: var(--fz-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forge-user-dropdown__sep {
  height: 1px;
  background: var(--c-border);
  margin: 4px 0;
}
.forge-user-dropdown__row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
}
.forge-user-dropdown__label {
  color: var(--c-text-muted);
  white-space: nowrap;
}
.forge-user-dropdown__value {
  color: var(--c-text);
  font-family: var(--f-mono);
  font-size: var(--fz-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.forge-user-dropdown__action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  color: var(--c-text);
  text-decoration: none;
  cursor: pointer;
  transition: background .1s;
}
.forge-user-dropdown__action:hover {
  background: var(--c-bg-hover);
  color: var(--c-text);
}

/* ─── Notifications Dropdown ───────────────────────────────────────── */
.forge-note-dropdown {
  position: absolute;
  top: 34px;
  right: 0;
  z-index: 1000;
  min-width: 340px;
  max-width: 420px;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  font-size: var(--fz-sm);
  color: var(--c-text);
  overflow: hidden;
}
.forge-note-dropdown__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--c-border);
}
.forge-note-dropdown__title { font-weight: 600; }
.forge-note-dropdown__clear {
  background: none;
  border: none;
  color: var(--c-text-muted);
  font-size: var(--fz-xs);
  cursor: pointer;
  padding: 2px 4px;
}
.forge-note-dropdown__clear:hover { color: var(--c-text); text-decoration: underline; }
.forge-note-dropdown__empty {
  padding: 18px 14px;
  color: var(--c-text-muted);
  text-align: center;
}
.forge-note-dropdown__list {
  max-height: 60vh;
  overflow-y: auto;
}
.forge-note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  border-bottom: 1px solid var(--c-border);
  border-left: 3px solid transparent;
}
.forge-note-item:last-child { border-bottom: none; }
.forge-note-item.is-critical { border-left-color: var(--c-error); }
.forge-note-item.is-warning { border-left-color: var(--c-warn); }
.forge-note-item.is-clickable { cursor: pointer; }
.forge-note-item.is-clickable:hover { background: var(--c-bg-hover); }
.forge-note-item__icon { flex-shrink: 0; margin-top: 1px; }
.forge-note-item.is-critical .forge-note-item__icon { color: var(--c-error); }
.forge-note-item.is-warning .forge-note-item__icon { color: var(--c-warn); }
.forge-note-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.forge-note-item__title { font-weight: 600; }
.forge-note-item__msg {
  color: var(--c-text-muted);
  font-size: var(--fz-xs);
  white-space: normal;
  word-break: break-word;
}
.forge-note-item__time {
  color: var(--c-text-mute);
  font-size: var(--fz-xs);
}
.forge-note-item__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--c-text-mute);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}
.forge-note-item__dismiss:hover { color: var(--c-text); }

/* ─── Radzen-Toasts (unten rechts) ─────────────────────────────────── */
/* Radzens Default (standard-base.css) fixiert den Toast-Container auf
   top:100px rechts — genau auf Tab-Leiste + Build/Run. Radzen 11.x hat
   keine Positions-API (weder NotificationMessage noch RadzenNotification),
   daher CSS-Override: unten rechts über der Statusleiste (VS-Code-Stil);
   mehrere Toasts stapeln vom unteren Rand nach oben. Rechts-Offset =
   Code-Drawer-Rail-Breite (34px) + Abstand. */
body:has(.forge-shell) > .rz-notification {
  inset-block-start: auto;
  inset-block-end: calc(var(--status-h, 24px) + 10px);
  inset-inline-end: 44px;
}

/* ─── Sidebar (icon rail + secondary panel) ────────────────────────── */
.forge-sidebar {
  display: flex;
  min-height: 0;
  height: 100%;
  position: relative; /* anchor for the collapsed-hover flyout */
}

/* Icon rail — always visible, one button per rail group + Home + collapse toggle. */
.forge-rail {
  width: var(--rail-w);
  flex: 0 0 auto;
  background: var(--c-bg-tool);
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 8px;
  gap: 2px;
}
.forge-rail-btn {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--c-text-dim);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  user-select: none;
}
.forge-rail-btn:hover { background: var(--c-bg-hover); color: var(--c-text); }
.forge-rail-btn.active {
  color: var(--c-accent);
  background: var(--c-accent-soft);
}
.forge-rail-btn .rzi { font-size: 20px; }
.forge-rail-lbl {
  font-family: var(--f-sans);
  font-size: 8.5px;
  letter-spacing: .03em;
}
.forge-rail-sep {
  width: 24px;
  height: 1px;
  background: var(--c-border);
  margin: 4px 0;
  flex: 0 0 auto;
}
.forge-rail-spacer { flex: 1; }
.forge-rail-toggle {
  width: 28px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-mute);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.forge-rail-toggle:hover { background: var(--c-bg-hover); color: var(--c-text); }
.forge-rail-toggle .rzi { font-size: 16px; }
.forge-body.nav-collapsed .forge-rail-toggle .rzi { transform: scaleX(-1); }

/* Secondary panel — width driven by --forge-panel-w (inline on .forge-body, set
   pre-circuit by _applyForgePrefs and by the drag handle), collapses to 0. */
.forge-side-panel {
  width: var(--forge-panel-w, 260px);
  flex: 0 0 auto;
  overflow: hidden;
  position: relative;
  background: var(--c-bg-tool);
  border-right: 1px solid var(--c-border);
  display: flex;
  transition: width .16s ease;
}
/* Collapsed: the panel leaves the layout flow ENTIRELY (absolute next to the rail) — not
   just while the flyout is open. The hover flyout only animates the width, and both the
   opening AND the closing 0.16s width transition must run out-of-flow, otherwise the
   editor behind it gets pushed for the duration of the close animation. */
.forge-body.nav-collapsed .forge-side-panel {
  width: 0;
  border-right-width: 0;
  position: absolute;
  left: var(--rail-w);
  top: 0;
  bottom: 0;
  z-index: 40;
}
/* Collapsed-hover flyout: hovering a rail group overlays that group's panel next to the
   rail (SidebarNav sets .flyout while a group is hovered). */
.forge-body.nav-collapsed .forge-side-panel.flyout {
  width: var(--forge-panel-w, 260px);
  border-right: 1px solid var(--c-border);
  box-shadow: 6px 0 18px rgba(0, 0, 0, 0.35);
}
.forge-body.forge-noanim .forge-side-panel { transition: none; }
/* Fixed inner width: during the collapse animation the content clips instead of reflowing. */
.forge-side-inner {
  width: var(--forge-panel-w, 260px);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.forge-side-head {
  height: 38px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px 0 12px;
  border-bottom: 1px solid var(--c-border);
}
.forge-side-title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forge-side-meta {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-text-mute);
  white-space: nowrap;
}

.forge-side-filter {
  padding: 6px 10px 8px;
  position: relative;
  border-bottom: 1px solid var(--c-border);
  flex: 0 0 auto;
}
.forge-side-filter input {
  width: 100%;
  height: 26px;
  background: var(--c-bg-deepest);
  border: 1px solid var(--c-border);
  border-radius: 4px;
  padding: 0 6px 0 26px;
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: 12px;
  outline: none;
  box-sizing: border-box;
}
.forge-side-filter input:focus { border-color: var(--c-accent); }
.forge-side-filter input::placeholder { color: var(--c-text-mute); }
.forge-side-filter-icon {
  position: absolute;
  top: 12px; left: 18px;
  color: var(--c-text-mute);
  font-size: 16px;
}

.forge-side-scroll {
  flex: 1;
  overflow: auto;
  padding: 4px 0 6px;
}

.forge-side-sect {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--c-text-mute);
  padding: 8px 12px 4px;
  user-select: none;
}

/* Shared icon wrapper — tinted per module via the data-kind rules below. */
.forge-side-icon {
  color: var(--c-text-dim);
  display: inline-flex;
  flex: 0 0 auto;
}
.forge-side-icon .rzi { font-size: 16px; }

/* Module row */
.forge-side-mod {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 10px 0 10px;
  gap: 8px;
  color: var(--c-text);
  cursor: pointer;
  font-size: 13px;
  position: relative;
  user-select: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.forge-side-mod:hover { background: var(--c-bg-hover); }
.forge-side-mod.active {
  background: var(--c-bg-elev);
  color: var(--c-text);
}
.forge-side-mod.active::before {
  content: "";
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 2px;
  background: var(--c-accent);
  border-radius: 0 2px 2px 0;
}
.forge-side-mod-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.forge-side-mod-new {
  display: none;
  width: 18px; height: 18px;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  color: var(--c-text-mute);
  flex: 0 0 auto;
}
.forge-side-mod:hover .forge-side-mod-new { display: inline-flex; }
.forge-side-mod-new:hover { background: var(--c-accent-soft); color: var(--c-accent); }
.forge-side-mod-new .rzi { font-size: 14px; }
.forge-side-mod-count {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-text-mute);
  background: var(--c-bg-deepest);
  padding: 1px 6px;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
  flex: 0 0 auto;
}
.forge-side-mod.active .forge-side-mod-count { color: var(--c-accent); }
.forge-side-mod-chev {
  width: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: transform .12s;
  color: var(--c-text-mute);
}
.forge-side-mod-chev .rzi { font-size: 14px; }
.forge-side-mod.open .forge-side-mod-chev { transform: rotate(90deg); }

/* Object row (expanded module items, pinned objects, filter hits) */
.forge-side-obj {
  display: flex;
  align-items: center;
  height: var(--row-h);
  padding: 0 8px 0 26px;
  gap: 6px;
  font-size: 12px;
  color: var(--c-text-dim);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.forge-side-obj:hover { background: var(--c-bg-hover); color: var(--c-text); }
/* Icon-led rows (pins, filter hits) sit flush left instead of under a module. */
.forge-side-obj.flat { padding-left: 12px; }
.forge-side-obj.active {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.forge-side-obj.active::before {
  content: "";
  position: absolute;
  left: 0; top: 3px; bottom: 3px;
  width: 2px;
  background: var(--c-accent);
}
.forge-side-obj-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--c-text-mute);
  flex: 0 0 auto;
}
.forge-side-obj-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--f-mono);
  font-size: 11px;
}
.forge-side-obj-sub {
  font-size: 10px;
  color: var(--c-text-mute);
  white-space: nowrap;
  flex: 0 0 auto;
}
.forge-side-obj-dirty {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-accent);
  flex: 0 0 auto;
}

/* Pin control — hidden until row hover, always visible when pinned. */
.forge-side-pin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 3px;
  color: var(--c-text-mute);
  flex: 0 0 auto;
  visibility: hidden;
}
.forge-side-obj:hover .forge-side-pin { visibility: visible; }
.forge-side-pin:hover { color: var(--c-text); background: var(--c-bg-elev); }
.forge-side-pin.on { visibility: visible; color: var(--c-accent); }
.forge-side-pin .rzi { font-size: 12px; }

/* "+N weitere" preview-cap expander */
.forge-side-more {
  display: flex;
  align-items: center;
  height: var(--row-h);
  padding: 0 8px 0 35px;
  font-size: 11px;
  color: var(--c-text-mute);
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.forge-side-more:hover { color: var(--c-text); background: var(--c-bg-hover); }

.forge-side-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--c-text-mute);
}

.forge-side-foot {
  height: 34px;
  flex: 0 0 auto;
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--c-text-mute);
  white-space: nowrap;
  overflow: hidden;
}

.forge-side-drag {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 4px;
  cursor: col-resize;
  z-index: 2;
}
.forge-side-drag:hover {
  background: var(--c-accent);
}

/* Shared tool button (BottomPanel reuses this class for its icon buttons). */
.forge-nav-footer-btn {
  width: 22px; height: 22px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text-dim);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: 16px;
}
.forge-nav-footer-btn:hover {
  background: var(--c-bg-hover);
  color: var(--c-text);
}

/* ─── Editor Tabs (separate pills, active with accent border) ─────── */
.forge-tabs {
  height: var(--tab-h);
  background: var(--tab-strip-bg);
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 5px;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 0 0 auto;
  /* No visible scrollbar — the strip scrolls via mouse wheel instead
     (forgeTabs.enableWheelScroll) plus scroll-into-view on activation. */
  scrollbar-width: none;
}
.forge-tabs::-webkit-scrollbar { display: none; }
.forge-tab {
  display: flex;
  align-items: center;
  height: 26px;
  box-sizing: border-box;
  padding: 0 6px 0 10px;
  gap: 6px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: var(--tab-pill);
  font-size: var(--fz-md);
  color: var(--c-text-dim);
  cursor: pointer;
  position: relative;
  flex: 0 0 auto;
  min-width: 120px;
  max-width: 220px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.14s, color 0.14s;
}
.forge-tab:hover {
  background: var(--tab-pill-hover);
  color: var(--c-text);
}
.forge-tab.active {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  color: var(--c-text);
}
.forge-tab-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--c-text-mute);
  font-size: 16px;
}
.forge-tab.active .forge-tab-icon { color: var(--c-accent); }
.forge-tab-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.forge-tab-dirty {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--tab-dirty);
  flex: 0 0 auto;
}
/* Trailing slot: one fixed 18px box that shows the dirty dot at rest and swaps
   to the ✕ when the tab is hovered or active — no layout shift either way. */
.forge-tab-close {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 4px;
  border: none;
  background: transparent;
  color: var(--c-text-mute);
  cursor: pointer;
  padding: 0;
  margin-left: 2px;
}
.forge-tab-close .rzi { opacity: 0; transition: opacity 0.12s; }
.forge-tab:hover .forge-tab-close .rzi,
.forge-tab.active .forge-tab-close .rzi { opacity: 0.7; }
/* Translucent overlay so the ✕ hover reads on any pill background (idle/hover/active). */
.forge-tab-close:hover {
  background: color-mix(in srgb, currentColor 20%, transparent);
  color: var(--c-text);
}
.forge-tab-close:hover .rzi { opacity: 1; }
/* While the ✕ is visible on a dirty tab, tint it so the unsaved state stays legible. */
.forge-tab-close.is-dirty { color: var(--tab-dirty); }
.forge-tab-close .forge-tab-dirty {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transition: opacity 0.12s;
}
.forge-tab-close.is-dirty .forge-tab-dirty { opacity: 1; }
.forge-tab:hover .forge-tab-close .forge-tab-dirty,
.forge-tab.active .forge-tab-close .forge-tab-dirty { opacity: 0; }
/* ─── Page toolbar (IDE-style, replaces RadzenStack toolbars) ───── */
.forge-toolbar {
  height: 34px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 4px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-tool);
  flex: 0 0 auto;
}
.forge-toolbar-sep {
  width: 1px;
  height: 18px;
  background: var(--c-border-strong);
  margin: 0 4px;
  flex: 0 0 auto;
}
.forge-toolbar-spacer { flex: 1; }
.forge-toolbar-meta {
  font-family: var(--f-mono);
  font-size: var(--fz-xs);
  color: var(--c-text-mute);
}
.forge-toolbar .rz-dropdown {
  font-size: var(--fz-xs);
  --rz-input-padding: 0 0.4rem;
  border-radius: 3px;
}
.forge-toolbar .rz-dropdown .rz-inputtext {
  font-size: var(--fz-xs);
  padding: 0 0.4rem;
  min-height: 22px;
  line-height: 22px;
}
.forge-toolbar .rz-dropdown .rz-helper {
  padding: 0 0.2rem;
  min-height: 22px;
}

.forge-tbtn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 8px;
  border-radius: 3px;
  border: none;
  background: transparent;
  color: var(--c-text-dim);
  font-family: var(--f-sans);
  font-size: var(--fz-sm);
  cursor: pointer;
  white-space: nowrap;
}
.forge-tbtn:hover {
  background: var(--c-bg-hover);
  color: var(--c-text);
}
.forge-tbtn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.forge-tbtn:disabled:hover {
  background: transparent;
  color: var(--c-text-dim);
}
.forge-tbtn .rzi { font-size: 15px; }

.forge-tbtn.primary {
  background: var(--c-accent);
  color: var(--c-bg-deepest);
  font-weight: 600;
}
.forge-tbtn.primary:hover {
  filter: brightness(1.1);
}
.forge-tbtn.primary:disabled {
  filter: none;
}
.forge-tbtn.active {
  background: var(--c-bg-hover);
  color: var(--c-accent);
}
.forge-tbtn.danger {
  color: var(--c-error);
}
.forge-tbtn.danger:hover {
  background: rgba(239, 95, 107, 0.12);
}

/* Designer canvas-card name header: a title-styled input that reveals its editability on
   hover/focus (accent border). Replaces the old inline `border:none` look that made the
   name field read like a static heading. The Aggregate/Namespace fields below are read-only. */
.forge-canvas-header .rz-textbox {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: border-color .12s, background-color .12s;
}
.forge-canvas-header .rz-textbox:hover {
  border-color: var(--c-border-strong);
  background: var(--c-bg-deepest);
}
.forge-canvas-header .rz-textbox:focus {
  border-color: var(--c-accent);
  background: var(--c-bg-deepest);
  box-shadow: var(--rz-input-focus-shadow);
  outline: none;
}

.forge-toolbar-dirty {
  font-size: var(--fz-xs);
  color: var(--c-accent);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 4px;
}
.forge-toolbar-dirty::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
}

/* ─── Sub-tabs (within page content) ────────────────────────────── */
.forge-subtabs {
  display: flex;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg-tool);
  padding: 0 6px;
  height: 28px;
  flex: 0 0 auto;
}
.forge-subtab {
  padding: 0 10px;
  font-size: var(--fz-sm);
  color: var(--c-text-dim);
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-top: none;
  border-left: none;
  border-right: none;
  background: none;
  font-family: var(--f-sans);
  white-space: nowrap;
}
.forge-subtab:hover { color: var(--c-text); }
.forge-subtab.active {
  color: var(--c-text);
  border-bottom-color: var(--c-accent);
}
.forge-subtab .forge-subtab-icon { font-size: 14px; }

/* ─── Module color accents ──────────────────────────────────────── */
.forge-shell {
  --mod-home:      var(--c-accent);
  --mod-entity:    #61afef;
  --mod-formdto:   #c678dd;
  --mod-sql:       #e5c07b;
  --mod-task:      #e8a0bf;
  --mod-widget:    #6fd3c7;
  --mod-layout:    #a3d977;
  --mod-navigation:#928cee;
  --mod-templates: #56b6c2;
  --mod-erd:       #d19a66;
  --mod-report:    #e06c75;
  --mod-importer:  #4db6ac;
  --mod-translations: #7bb0e0;
}

/* Tabs: left border stripe + tinted icon */
/* Pill tabs carry their module color in the icon alone (design: colored dot);
   the old 2px border-left flag doesn't work on a rounded pill. */
.forge-tab.mod-home      .forge-tab-icon { color: var(--mod-home); }
.forge-tab.mod-entity    .forge-tab-icon { color: var(--mod-entity); }
.forge-tab.mod-formdto   .forge-tab-icon { color: var(--mod-formdto); }
.forge-tab.mod-sql       .forge-tab-icon { color: var(--mod-sql); }
.forge-tab.mod-task      .forge-tab-icon { color: var(--mod-task); }
.forge-tab.mod-widget    .forge-tab-icon { color: var(--mod-widget); }
.forge-tab.mod-layout    .forge-tab-icon { color: var(--mod-layout); }
.forge-tab.mod-navigation .forge-tab-icon { color: var(--mod-navigation); }
.forge-tab.mod-templates .forge-tab-icon { color: var(--mod-templates); }
.forge-tab.mod-erd       .forge-tab-icon { color: var(--mod-erd); }
.forge-tab.mod-report    .forge-tab-icon { color: var(--mod-report); }
.forge-tab.mod-importer  .forge-tab-icon { color: var(--mod-importer); }
.forge-tab.mod-translations .forge-tab-icon { color: var(--mod-translations); }

/* Sidebar: icons always tinted by module type, so a row can be matched against the
   open tabs at a glance. One rule set covers module rows, expanded/pinned object rows
   and filter hits — every row carries data-kind + a .forge-side-icon wrapper. */
.forge-sidebar [data-kind="home"] .forge-side-icon      { color: var(--mod-home); }
.forge-sidebar [data-kind="entities"] .forge-side-icon  { color: var(--mod-entity); }
.forge-sidebar [data-kind="formdtos"] .forge-side-icon  { color: var(--mod-formdto); }
.forge-sidebar [data-kind="sql"] .forge-side-icon       { color: var(--mod-sql); }
.forge-sidebar [data-kind="sqlbrowser"] .forge-side-icon { color: var(--mod-sql); }
.forge-sidebar [data-kind="tasks"] .forge-side-icon     { color: var(--mod-task); }
.forge-sidebar [data-kind="widgets"] .forge-side-icon   { color: var(--mod-widget); }
.forge-sidebar [data-kind="layouts"] .forge-side-icon   { color: var(--mod-layout); }
.forge-sidebar [data-kind="navigation"] .forge-side-icon { color: var(--mod-navigation); }
.forge-sidebar [data-kind="templates"] .forge-side-icon { color: var(--mod-templates); }
.forge-sidebar [data-kind="erd"] .forge-side-icon       { color: var(--mod-erd); }
.forge-sidebar [data-kind="reports"] .forge-side-icon   { color: var(--mod-report); }
.forge-sidebar [data-kind="importers"] .forge-side-icon { color: var(--mod-importer); }
.forge-sidebar [data-kind="translations"] .forge-side-icon { color: var(--mod-translations); }

/* Module row left accent bar: colored per module */
.forge-side-mod[data-kind="home"].active::before      { background: var(--mod-home); }
.forge-side-mod[data-kind="entities"].active::before  { background: var(--mod-entity); }
.forge-side-mod[data-kind="formdtos"].active::before  { background: var(--mod-formdto); }
.forge-side-mod[data-kind="sql"].active::before       { background: var(--mod-sql); }
.forge-side-mod[data-kind="sqlbrowser"].active::before { background: var(--mod-sql); }
.forge-side-mod[data-kind="tasks"].active::before     { background: var(--mod-task); }
.forge-side-mod[data-kind="widgets"].active::before   { background: var(--mod-widget); }
.forge-side-mod[data-kind="layouts"].active::before    { background: var(--mod-layout); }
.forge-side-mod[data-kind="navigation"].active::before { background: var(--mod-navigation); }
.forge-side-mod[data-kind="templates"].active::before { background: var(--mod-templates); }
.forge-side-mod[data-kind="erd"].active::before       { background: var(--mod-erd); }
.forge-side-mod[data-kind="reports"].active::before   { background: var(--mod-report); }
.forge-side-mod[data-kind="importers"].active::before { background: var(--mod-importer); }
.forge-side-mod[data-kind="translations"].active::before { background: var(--mod-translations); }

/* Tab context menu */
.forge-ctx-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
}
.forge-ctx-menu {
  position: fixed;
  z-index: 1000;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border-strong);
  border-radius: 4px;
  padding: 4px 0;
  min-width: 180px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.forge-ctx-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 28px;
  padding: 0 12px;
  border: none;
  background: transparent;
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fz-sm);
  cursor: pointer;
  text-align: left;
}
.forge-ctx-item:hover {
  background: var(--c-bg-selected);
}
.forge-ctx-item:disabled {
  color: var(--c-text-mute);
  cursor: default;
}
.forge-ctx-item:disabled:hover {
  background: transparent;
}
.forge-ctx-item .rzi {
  color: var(--c-text-dim);
  font-size: 14px;
}
.forge-ctx-sep {
  height: 1px;
  margin: 4px 0;
  background: var(--c-border);
}
/* Filter input at the top of a .forge-ctx-menu (e.g. the Aggregate ▾-picker) — shown when the
   list gets long so it stays scannable. */
.forge-ctx-search {
  display: block;
  width: calc(100% - 8px);
  margin: 0 4px 4px;
  padding: 4px 8px;
  border: 1px solid var(--c-border);
  border-radius: 3px;
  background: var(--c-bg-elev);
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: var(--fz-sm);
  box-sizing: border-box;
}
.forge-ctx-search::placeholder {
  color: var(--c-text-mute);
}
.forge-ctx-search:focus {
  outline: none;
  border-color: var(--c-accent);
}

/* ── Title-bar search launcher (the inert input became a button) ─────────────── */
button.forge-title-search {
  cursor: pointer;
  text-align: left;
  font-family: var(--f-sans);
  appearance: none;
}
.forge-title-search__placeholder {
  flex: 1;
  color: var(--c-text-mute);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Global spotlight search overlay ─────────────────────────────────────────── */
.forge-spotlight-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1099;
  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
}
.forge-spotlight {
  position: fixed;
  top: 12vh;
  left: 50%;
  transform: translateX(-50%);
  width: min(640px, calc(100vw - 32px));
  max-height: 70vh;
  z-index: 1100;
  display: flex;
  flex-direction: column;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border-strong);
  border-radius: 10px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.forge-spotlight-input {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 14px;
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-mute);
  flex: 0 0 auto;
}
.forge-spotlight-input input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  color: var(--c-text);
  font-family: var(--f-sans);
  font-size: 15px;
}
.forge-spotlight-input input::placeholder { color: var(--c-text-mute); }

.forge-spotlight-spin {
  width: 14px;
  height: 14px;
  border: 2px solid var(--c-border-strong);
  border-top-color: var(--c-accent);
  border-radius: 50%;
  animation: forge-spotlight-spin 0.7s linear infinite;
  flex: 0 0 auto;
}
@keyframes forge-spotlight-spin { to { transform: rotate(360deg); } }

.forge-spotlight-results {
  overflow-y: auto;
  padding: 8px;
}
.forge-spotlight-empty {
  padding: 28px 12px;
  text-align: center;
  color: var(--c-text-mute);
  font-size: 13px;
}
.forge-spotlight-group { margin-bottom: 6px; }
.forge-spotlight-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 4px;
  color: var(--c-text-mute);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.forge-spotlight-more {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: 10px;
}
.forge-spotlight-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--c-text);
  text-align: left;
  cursor: pointer;
  font-family: var(--f-sans);
}
.forge-spotlight-card:hover,
.forge-spotlight-card.is-active {
  background: var(--c-bg-hover);
  box-shadow: inset 2px 0 0 var(--c-accent);
}
.forge-spotlight-card-icon { color: var(--c-accent); flex: 0 0 auto; }
.forge-spotlight-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.forge-spotlight-card-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forge-spotlight-card-sub {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--c-text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.forge-spotlight-badges {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex: 0 0 auto;
}
.forge-spotlight-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  border: 1px solid var(--c-border);
  color: var(--c-text-mute);
  white-space: nowrap;
}
.forge-spotlight-badge.tone-accent {
  background: var(--c-accent-soft);
  color: var(--c-accent);
  border-color: transparent;
}
.forge-spotlight-badge.tone-warn {
  background: rgba(240, 160, 32, 0.16);
  color: #f0a020;
  border-color: transparent;
}

/* Scope chip left of the input (Tab on a module / click on "+N weitere"). */
.forge-spotlight-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 0;
  border-radius: 8px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-family: var(--f-sans);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  flex: 0 0 auto;
}
.forge-spotlight-chip:hover { filter: brightness(1.15); }

/* Module rows carry data-kind (the nav category id) so their icons match the left sidebar's
   per-module colors — same --mod-* tokens as .forge-sidebar [data-kind=…]. */
.forge-spotlight-card[data-kind="home"] .forge-spotlight-card-icon         { color: var(--mod-home); }
.forge-spotlight-card[data-kind="entities"] .forge-spotlight-card-icon     { color: var(--mod-entity); }
.forge-spotlight-card[data-kind="formdtos"] .forge-spotlight-card-icon     { color: var(--mod-formdto); }
.forge-spotlight-card[data-kind="sql"] .forge-spotlight-card-icon          { color: var(--mod-sql); }
.forge-spotlight-card[data-kind="sqlbrowser"] .forge-spotlight-card-icon    { color: var(--mod-sql); }
.forge-spotlight-card[data-kind="tasks"] .forge-spotlight-card-icon        { color: var(--mod-task); }
.forge-spotlight-card[data-kind="widgets"] .forge-spotlight-card-icon      { color: var(--mod-widget); }
.forge-spotlight-card[data-kind="layouts"] .forge-spotlight-card-icon      { color: var(--mod-layout); }
.forge-spotlight-card[data-kind="navigation"] .forge-spotlight-card-icon   { color: var(--mod-navigation); }
.forge-spotlight-card[data-kind="templates"] .forge-spotlight-card-icon    { color: var(--mod-templates); }
.forge-spotlight-card[data-kind="erd"] .forge-spotlight-card-icon          { color: var(--mod-erd); }
.forge-spotlight-card[data-kind="reports"] .forge-spotlight-card-icon      { color: var(--mod-report); }
.forge-spotlight-card[data-kind="importers"] .forge-spotlight-card-icon    { color: var(--mod-importer); }
.forge-spotlight-card[data-kind="translations"] .forge-spotlight-card-icon { color: var(--mod-translations); }

/* Object count on a module row (empty-state jump entries). */
.forge-spotlight-card-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--c-text-mute);
  flex: 0 0 auto;
}

/* "Tab" hint on the active, scopeable module row — same look as the title-bar kbd chip. */
.forge-spotlight-tab-hint {
  padding: 1px 6px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  font-size: 10px;
  color: var(--c-text-mute);
  flex: 0 0 auto;
}

/* "+" create affordance on a module row — visible on hover / active row only. */
.forge-spotlight-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  color: var(--c-text-mute);
  opacity: 0;
  flex: 0 0 auto;
}
.forge-spotlight-card:hover .forge-spotlight-add,
.forge-spotlight-card.is-active .forge-spotlight-add { opacity: 1; }
.forge-spotlight-add:hover {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

/* Slim footer with keyboard hints — "Strg+Enter Neu anlegen" appears contextually when the
   selection sits on a creatable module row. */
.forge-spotlight-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 5px 14px;
  border-top: 1px solid var(--c-border);
  color: var(--c-text-mute);
  font-size: 10px;
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
}
.forge-spotlight-foot-kbd {
  padding: 0 4px;
  border: 1px solid var(--c-border);
  border-radius: 3px;
  font-size: 9px;
}

/* When "+N weitere" is a scope button (unscoped search), give it button affordances. */
button.forge-spotlight-more {
  border: 0;
  cursor: pointer;
  font-family: var(--f-sans);
}
button.forge-spotlight-more:hover { filter: brightness(1.15); }

/* Global "Generieren" dropdown — anchored under its trigger (overrides .forge-ctx-menu's fixed pos). */
.forge-gen-menu { position: relative; display: inline-flex; }
.forge-gen-menu__panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
}
/* Profile dropdown sits in the right-aligned run-controls cluster — anchor it to the
   trigger's right edge so the panel opens leftward and never overflows the viewport. */
.forge-profile-menu__panel {
  left: auto;
  right: 0;
}
/* Aggregate ▾-picker (Entity-Designer): its trigger sits near the right edge of the
   `overflow:auto` left splitter pane, so a rightward panel spills past the pane and lands behind
   the code-preview pane. Open it leftward (anchor the right edge to the trigger) so the whole
   menu — and its text — stays inside the left pane. */
.forge-agg-picker__panel {
  left: auto;
  right: 0;
}

.forge-tabs-spacer { flex: 1; }

/* JetBrains-style overflow dropdown: pinned to the right edge of the (scrolling)
   strip so it stays reachable, with a left shadow hinting at hidden tabs behind it. */
.forge-tabs-overflow {
  position: sticky;
  right: 0;
  /* Full strip height so the sticky button fully masks pills scrolling behind it
     (the strip itself now centers its children). */
  align-self: stretch;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  border: none;
  border-left: 1px solid var(--c-border);
  background: var(--tab-strip-bg);
  color: var(--c-text-dim);
  cursor: pointer;
  box-shadow: -8px 0 8px -4px rgba(0, 0, 0, 0.45);
}
.forge-tabs-overflow:hover { background: var(--tab-pill); color: var(--c-text); }

.forge-tabs-overflow-menu {
  max-height: 60vh;
  overflow-y: auto;
  max-width: 360px;
}
.forge-tabs-overflow-menu .forge-ctx-item.active { color: var(--c-accent); }
.forge-tabs-overflow-menu .forge-ctx-item.active .rzi { color: var(--c-accent); }
.forge-tabs-overflow-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

/* ─── Bottom Panel ─────────────────────────────────────────────────── */
.forge-bottom {
  border-top: 1px solid var(--c-border);
  background: var(--c-bg-tool);
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  min-height: 0;
}
.forge-bottom:not(.expanded) .forge-bottom-body { display: none; }
.forge-bottom:not(.expanded) .forge-bottom-drag { display: none; }

.forge-bottom-drag {
  height: 4px;
  cursor: row-resize;
  background: transparent;
  flex: 0 0 auto;
  position: relative;
}
.forge-bottom-drag::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--c-border);
  transition: background .15s;
}
.forge-bottom-drag:hover::after {
  height: 2px;
  background: var(--c-accent);
}

.forge-bottom-head {
  height: 28px;
  border-bottom: 1px solid var(--c-border);
  display: flex;
  align-items: stretch;
  flex: 0 0 auto;
}
.forge-bottom-tab {
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fz-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-dim);
  font-weight: 600;
  cursor: pointer;
  position: relative;
  border: none;
  background: none;
}
.forge-bottom-tab.active { color: var(--c-text); }
.forge-bottom-tab.active::after {
  content: "";
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 1px;
  background: var(--c-accent);
}
.forge-bottom-tab-count {
  background: var(--c-bg-active);
  color: var(--c-text);
  font-family: var(--f-mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 8px;
}
.forge-bottom-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 4px;
}
.forge-bottom-body {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

/* ─── Status Bar ───────────────────────────────────────────────────── */
.forge-status {
  grid-area: stat;
  background: var(--c-bg-tool);
  border-top: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  padding: 0 8px;
  gap: 12px;
  font-size: var(--fz-xs);
  color: var(--c-text-dim);
  font-family: var(--f-mono);
}
.forge-status-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.forge-status-item.accent { color: var(--c-accent); }
.forge-status-item.ok { color: var(--c-success); }
.forge-status-item--clickable {
  cursor: pointer;
  padding: 0 4px;
  margin: 0 -4px;
  border-radius: 3px;
  transition: background 80ms ease, color 80ms ease;
}
.forge-status-item--clickable:hover { background: var(--c-bg-hover); color: var(--c-text); }
.forge-status-spacer { flex: 1; }
.forge-status-dot {
  width: 8px; height: 8px; border-radius: 50%;
}
.forge-status-dot.ok { background: var(--c-success); }
.forge-status-dot.fail { background: var(--c-error); }
.forge-status-dot.check { background: var(--c-warn); }
.forge-status-dot.none { background: var(--c-text-mute); }

/* ─── Radzen overrides for dark theme ──────────────────────────────── */
.forge-shell .rz-card { background: var(--c-bg-elev); padding: 0; }
.forge-shell .rz-datatable thead th { background: var(--c-bg-tool); color: var(--c-text); }
.forge-shell .rz-datatable-data td { border-bottom-color: var(--c-border); }
.forge-shell .rz-dropdown { background: var(--c-bg-deepest); border-color: var(--c-border-strong); color: var(--c-text); }
.forge-shell .rz-textbox { background: var(--c-bg-deepest); border-color: var(--c-border-strong); color: var(--c-text); }
.forge-shell .rz-button.rz-variant-text { color: var(--c-text-dim); }
.forge-shell .rz-button.rz-variant-text:hover { background: var(--c-bg-hover); color: var(--c-text); }
.forge-shell .rz-dialog-content { background: var(--c-bg-elev); color: var(--c-text); }
.forge-shell .rz-dialog-titlebar { background: var(--c-bg-tool); border-bottom: 1px solid var(--c-border); color: var(--c-text); }
.forge-shell .rz-splitbar { background: var(--c-border); }
.forge-shell .rz-splitbar:hover { background: var(--c-accent); }
/* Radzen tabs (.rz-tabview) → Workbench style */
.forge-shell .rz-tabview .rz-tabview-nav {
  background: var(--c-bg-tool);
  border-bottom: 1px solid var(--c-border);
  margin: 0;
  padding: 0 4px;
  list-style: none;
  display: flex;
  gap: 0;
}
.forge-shell .rz-tabview .rz-tabview-nav li {
  background: transparent !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0;
  margin: 0;
  margin-bottom: -1px;
  padding: 0;
  transition: none;
}
.forge-shell .rz-tabview .rz-tabview-nav li:hover {
  background: var(--c-bg-hover) !important;
}
.forge-shell .rz-tabview .rz-tabview-nav li.rz-tabview-selected {
  border-bottom-color: var(--c-accent) !important;
  background: transparent !important;
}
.forge-shell .rz-tabview .rz-tabview-nav li button {
  background: transparent;
  border: none;
  color: var(--c-text-dim);
  font-size: var(--fz-sm);
  font-family: var(--f-sans);
  padding: 0 10px;
  height: 28px;
  cursor: pointer;
}
.forge-shell .rz-tabview .rz-tabview-nav li:hover button {
  color: var(--c-text);
}
.forge-shell .rz-tabview .rz-tabview-nav li.rz-tabview-selected button {
  color: var(--c-text);
  font-weight: 500;
}
.forge-shell .rz-tabview .rz-tabview-panels {
  background: var(--c-bg-editor);
  border: none;
  padding: 0;
}
.forge-shell .rz-tabview .rz-tabview-panel {
  padding: 0;
}
/* Task canvas: let the tabbed card fill its pane so the Tasks tab's 2-pane splitter
   (properties | Monaco) uses the full available height instead of collapsing to content. */
.forge-task-canvas { height: 100%; }
.forge-task-canvas .rz-tabview { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.forge-task-canvas .rz-tabview .rz-tabview-panels { flex: 1 1 auto; min-height: 0; }
.forge-task-canvas .rz-tabview .rz-tabview-panel { height: 100%; }

/* Task body editor: a dark "code frame" that shows the enclosing ExecuteAsync
   signature (read-only) above the Monaco body editor — which only edits the method
   body. Token colors mirror Monaco's vs-dark palette so the signature reads as the
   editor's own first lines. The frame border replaces the editor wrapper's border. */
.forge-task-body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--rz-border);
    border-radius: 4px;
    overflow: hidden;
    background: #1e1e1e;
}
.forge-task-body__sig,
.forge-task-body__close {
    font-family: Consolas, Menlo, 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.5;
    color: #d4d4d4;
    padding-left: 26px;        /* roughly aligns with Monaco's line content (past the gutter) */
    white-space: pre;
    user-select: none;
    flex-shrink: 0;
}
.forge-task-body__sig { padding-top: 8px; }
.forge-task-body__close { padding-bottom: 8px; }
.forge-task-body__editor { flex: 1; min-height: 0; }
.forge-task-body .tok-kw { color: #569cd6; }
.forge-task-body .tok-type { color: #4ec9b0; }
.forge-task-body .tok-method { color: #dcdcaa; }
.forge-task-body .tok-param { color: #9cdcfe; }
.forge-shell .rz-panel-titlebar { background: var(--c-bg-elev); border-bottom: 1px solid var(--c-border); color: var(--c-text); }
.forge-shell .rz-badge { background: var(--c-accent-soft); color: var(--c-accent); }
.forge-shell .rz-alert { background: var(--c-bg-elev); border-color: var(--c-border); color: var(--c-text); }
.forge-shell .rz-chkbox-box { background: var(--c-bg-deepest); border-color: var(--c-border-strong); }
.forge-shell .rz-state-active .rz-chkbox-box { background: var(--c-accent); border-color: var(--c-accent); }
.forge-shell .rz-numeric { background: var(--c-bg-deepest); }
/* SelectBar theming lives in the token bridge (--rz-selectbar-*) — Radzen 11 renders the
   segments as bare .rz-button, so there is no selectbar-specific class to target. Only the
   hover text color needs a rule: Radzen hardwires it to --rz-on-base-lighter (light-theme
   near-black, shared with too many surfaces to re-bridge globally). */
.forge-shell .rz-selectbar .rz-button:not(.rz-state-active):hover,
body:has(.forge-shell) > .rz-dialog-wrapper .rz-selectbar .rz-button:not(.rz-state-active):hover,
body:has(.forge-shell) > .rz-popup .rz-selectbar .rz-button:not(.rz-state-active):hover { color: var(--c-text); }
.forge-shell .rz-tooltip-content { background: var(--c-bg-elev); color: var(--c-text); border: 1px solid var(--c-border); }
.forge-shell .rz-navigation-item-link { color: var(--c-text-dim); }
.forge-shell .rz-navigation-item-link:hover,
.forge-shell .rz-navigation-item-link.active { color: var(--c-text); background: var(--c-bg-hover); }

/* body background */
.forge-shell ~ #blazor-error-ui,
body { background: var(--c-bg-editor); }

/* ─── Radzen teleported popups (rendered outside .forge-shell on <body>) ──
   The token + bridge set above is mirrored onto these wrappers per theme, so
   Radzen's own component CSS already themes the inner content (inputs,
   buttons, checkboxes, dropdown items, dialog title/content) correctly.
   These rules only refine the structural chrome: modal backdrop + frames. */
body:has(.forge-shell) > .rz-dialog-wrapper {
  background: rgba(0, 0, 0, 0.55);
}
body:has(.forge-shell) > .rz-dialog-wrapper .rz-dialog {
  border: 1px solid var(--c-border-strong);
  border-radius: 6px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
body:has(.forge-shell) > .rz-dialog-wrapper .rz-dialog-titlebar {
  border-bottom: 1px solid var(--c-border);
}
/* Core-Browser dialogs (Layout + Bericht): the fixed-height .rz-dialog is a flex column, but
   Radzen's .rz-dialog-content is a plain block that collapses to its content height — a short
   preview (e.g. the report browser's PDF iframe) would leave most of the dialog empty. Make the
   content pane a filling flex item so the .core-browser gets the full dialog height. */
.rz-dialog:has(> .rz-dialog-content > .core-browser) > .rz-dialog-content {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.rz-dialog > .rz-dialog-content > .core-browser {
  flex: 1 1 auto;
  min-height: 0;
}
body:has(.forge-shell) > .rz-dropdown-panel,
body:has(.forge-shell) > .rz-popup {
  border: 1px solid var(--c-border-strong);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
/* Checkboxes inside teleported popups — dark box + teal checkmark/border.
   (rz-state-active sits on the box element itself, not an ancestor.) */
body:has(.forge-shell) > .rz-dialog-wrapper .rz-chkbox-box,
body:has(.forge-shell) > .rz-popup .rz-chkbox-box {
  background: var(--c-bg-deepest);
  border-color: var(--c-border-strong);
}
body:has(.forge-shell) > .rz-dialog-wrapper .rz-chkbox-box.rz-state-active,
body:has(.forge-shell) > .rz-popup .rz-chkbox-box.rz-state-active {
  border-color: var(--c-accent);
}

/* ─── Scrollbars ───────────────────────────────────────────────────── */
.forge-shell ::-webkit-scrollbar { width: 10px; height: 10px; }
.forge-shell ::-webkit-scrollbar-track { background: transparent; }
.forge-shell ::-webkit-scrollbar-thumb {
  background: var(--c-border-strong);
  border-radius: 5px;
  border: 2px solid var(--c-bg-tool);
}
.forge-shell ::-webkit-scrollbar-thumb:hover { background: var(--c-text-mute); }

/* ─── DevOpsKB embed test: single article iframe (read/edit) ────────────
   One iframe serves both modes (?mode=read|edit), ADR 0028. Fills the
   remaining page height (parent .forge-editor is a flex column). */
.kb-pane {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}
.kb-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

/* ─── DevOpsKbArticlePopover: draggable/resizable article window ────────
   Trigger (text/icon) + fixed-position NON-MODAL floating window: anchored
   in JS (openPopover) on open, then draggable by .kb-pop-header and
   resizable by the .kb-pop-resize corner grip. Closes only via the X
   button or Escape — no click-outside/backdrop close. */
.kb-pop { display: inline-flex; }

/* HelpHint: generic inline "?" help anchor (optional label + DevOpsKbArticlePopover).
   Used in grid column headers and inline in body text — see Components/Shared/HelpHint.razor. */
.help-hint { display: inline-flex; align-items: center; gap: 2px; }
.help-hint__trigger {
  display: inline-flex;
  align-items: center;
  padding: 0;
  margin-left: 2px;
  border: 0;
  background: none;
  color: var(--rz-text-tertiary-color, #999);
  cursor: pointer;
  opacity: 0.6;
  font-size: 0.9em;
}
.help-hint__trigger:hover { color: var(--c-accent); opacity: 1; }

.kb-pop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.kb-pop-trigger:hover { color: var(--c-accent); }
/* TOC toggle in the popover header: accent while the table of contents is shown. */
.kb-pop-toc-on { color: var(--c-accent); }
.kb-pop-panel {
  position: fixed;
  /* Above the startup-wizard overlay (2000) and its teleported Radzen dialogs (2100, see
     wizard.css): the help popover is a user-invoked floating window teleported to <body>
     (openPopover), so it must sit above whatever surface launched it — including the wizard
     darkening. Native confirm() dialogs are browser-level and still appear above it. */
  z-index: 2200;
  width: min(880px, calc(100vw - 16px));
  height: min(680px, calc(100vh - 16px));
  min-width: 360px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border-strong);
  border-radius: 6px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.kb-pop-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 34px;
  padding: 0 6px;
  background: var(--c-bg-tool);
  border-bottom: 1px solid var(--c-border);
  cursor: move;
  user-select: none;
}
.kb-pop-header button { cursor: pointer; } /* buttons keep the click cursor, not move */
.kb-pop-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kb-pop-spacer { flex: 1; }
.kb-pop-dirty { color: var(--c-warn, #d08b00); font-size: 12px; }
.kb-pop-close { padding: 0 6px; }
.kb-pop-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fff;
}
.kb-pop-msg {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  color: var(--c-text-dim);
  font-size: 12px;
}
/* Bottom-right resize grip; sits above the iframe at the panel corner. */
.kb-pop-resize {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 16px;
  height: 16px;
  z-index: 2;
  cursor: nwse-resize;
  touch-action: none;
  background:
    linear-gradient(135deg, transparent 0 45%, var(--c-border-strong) 45% 55%,
      transparent 55% 70%, var(--c-border-strong) 70% 80%, transparent 80%);
}

/* ─── Home dashboard ────────────────────────────────────────────── */
.forge-dash {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 18px 20px 28px;
}

.forge-dash-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.forge-dash-head-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--c-accent-soft);
  color: var(--c-accent);
}
.forge-dash-head-icon .rzi { font-size: 22px; }
.forge-dash-title {
  font-size: var(--fz-xl);
  font-weight: 600;
  color: var(--c-text);
}
.forge-dash-sub {
  font-size: var(--fz-sm);
  color: var(--c-text-dim);
}

.forge-dash-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 1100px) { .forge-dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) {
  .forge-dash-grid { grid-template-columns: 1fr; }
  .forge-dash-grid .forge-card { grid-column: span 1 !important; }
}

/* Card shell (reusable beyond the dashboard) */
.forge-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-border);
  border-radius: 8px;
  overflow: hidden;
}
.forge-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--c-border);
  font-size: var(--fz-sm);
  font-weight: 600;
  color: var(--c-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.forge-card-head .rzi { font-size: 16px; color: var(--c-text-mute); }
.forge-card-body { padding: 12px; }

/* Project-info definition list */
.forge-dash-deflist { display: grid; gap: 9px; margin: 0; }
.forge-dash-deflist > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.forge-dash-deflist dt { font-size: var(--fz-sm); color: var(--c-text-mute); margin: 0; }
.forge-dash-deflist dd {
  margin: 0;
  font-size: var(--fz-md);
  color: var(--c-text);
  font-family: var(--f-mono);
  text-align: right;
  word-break: break-word;
}

/* Asset stat tiles */
.forge-dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 520px) { .forge-dash-stats { grid-template-columns: repeat(2, 1fr); } }
.forge-dash-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--c-border);
  border-radius: 7px;
  background: var(--c-bg-deepest);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.forge-dash-stat:hover { border-color: var(--c-border-strong); background: var(--c-bg-hover); }
.forge-dash-stat-num { font-size: 22px; font-weight: 600; line-height: 1.1; color: var(--c-text); }
.forge-dash-stat-label { font-size: var(--fz-xs); color: var(--c-text-dim); }
.forge-dash-stat[data-kind="entities"] .forge-dash-stat-num { color: var(--mod-entity); }
.forge-dash-stat[data-kind="formdtos"] .forge-dash-stat-num { color: var(--mod-formdto); }
.forge-dash-stat[data-kind="sql"]      .forge-dash-stat-num { color: var(--mod-sql); }
.forge-dash-stat[data-kind="tasks"]    .forge-dash-stat-num { color: var(--mod-task); }
.forge-dash-stat[data-kind="widgets"]  .forge-dash-stat-num { color: var(--mod-widget); }
.forge-dash-stat[data-kind="layouts"]  .forge-dash-stat-num { color: var(--mod-layout); }
.forge-dash-stat[data-kind="reports"]  .forge-dash-stat-num { color: var(--mod-report); }
.forge-dash-stat[data-kind="importers"] .forge-dash-stat-num { color: var(--mod-importer); }
.forge-dash-stat[data-kind="translations"] .forge-dash-stat-num { color: var(--mod-translations); }

/* Status rows, badges, dots */
.forge-dash-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.forge-dash-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 11px;
  font-size: var(--fz-xs);
  background: var(--c-bg-deepest);
  border: 1px solid var(--c-border);
  color: var(--c-text);
}
.forge-dash-badge.ok   { color: var(--c-success); border-color: color-mix(in srgb, var(--c-success) 40%, transparent); }
.forge-dash-badge.warn { color: var(--c-warn);    border-color: color-mix(in srgb, var(--c-warn) 40%, transparent); }
.forge-dash-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-text-mute); flex: none; }
.forge-dash-dot.ok   { background: var(--c-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-success) 22%, transparent); }
.forge-dash-dot.err  { background: var(--c-error);   box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-error) 22%, transparent); }
.forge-dash-dot.info { background: var(--c-info); }
.forge-dash-dot.mute { background: var(--c-text-mute); }

.forge-dash-commits { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 5px; }
.forge-dash-commits li {
  display: flex;
  gap: 8px;
  font-size: var(--fz-sm);
  color: var(--c-text-dim);
  overflow: hidden;
}
.forge-dash-commits code { color: var(--c-accent); font-family: var(--f-mono); flex: none; }
.forge-dash-commits span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.forge-dash-link { display: inline-block; margin-top: 8px; font-size: var(--fz-sm); color: var(--c-info); font-family: var(--f-mono); word-break: break-all; }
.forge-dash-muted { margin: 8px 0 0; font-size: var(--fz-sm); color: var(--c-text-mute); }
.forge-dash-err { color: var(--c-error); }

/* Empty state (no project bound) */
.forge-dash-empty { flex-direction: row; align-items: center; gap: 12px; padding: 18px; max-width: 560px; }
.forge-dash-empty .rzi { font-size: 24px; color: var(--c-info); }
.forge-dash-empty-title { font-size: var(--fz-lg); font-weight: 600; color: var(--c-text); margin-bottom: 2px; }

/* ─── Code-Drawer (Codeanzeige /designer, /forms, /sql-queries) ──────
   Slide-in-Drawer für die generierte Code-Vorschau (CodeDrawer.razor) —
   ersetzt den früheren festen 45%-Splitter-Pane. Zu = schmale vertikale
   CODE-Rail rechts; offen = Overlay über dem Canvas oder (angedockt)
   Flex-Sibling. Breite: Default 50 % via CSS, User-Drag schreibt inline-px
   (code-drawer.js clampt identisch zu min/max-width hier). */
.code-drawer-host {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
  /* Breite der permanenten Rail-Leiste rechts — Overlay + Scrim enden an ihr. */
  --code-railstrip-w: 34px;
}
.code-drawer-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.code-drawer-scrim {
  position: absolute;
  /* Rechts an der Rail-Leiste enden — sie bleibt auch bei offenem Overlay bedienbar. */
  inset: 0 var(--code-railstrip-w, 34px) 0 0;
  z-index: 29;
  background: rgba(8, 10, 13, 0.5);
}

.code-drawer {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: none;
  width: 50%;
  min-width: 420px;
  /* Canvas behält mind. 340px — Floor 420px gewinnt (min- schlägt max-width),
     exakt die Clamp-Reihenfolge in code-drawer.js. */
  max-width: calc(100% - 340px);
  background: var(--c-bg-editor);
  border-left: 1px solid var(--c-border);
}
.code-drawer.overlay {
  position: absolute;
  top: 0;
  /* Bündig links der permanenten Rail-Leiste — nie über ihr. */
  right: var(--code-railstrip-w, 34px);
  bottom: 0;
  z-index: 30;
  border-left: 1px solid var(--c-accent);
  box-shadow: -30px 0 60px -20px rgba(0, 0, 0, 0.8);
  animation: code-drawer-slide 0.18s ease-out;
}
@keyframes code-drawer-slide {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* Während des Drag-Resizens (code-drawer.js setzt die Klasse auf <body>) dürfen
   iframes keine Maus-Events schlucken — sonst friert der Drag ein, sobald der
   Zeiger die PDF-Vorschau (/reports) oder einen anderen eingebetteten Frame kreuzt,
   und ein mouseup im iframe beendet den Resize nie. */
body.code-drawer-dragging iframe {
  pointer-events: none !important;
}

.code-drawer-handle {
  position: absolute;
  left: -4px;
  top: 0;
  bottom: 0;
  width: 9px;
  z-index: 5;
  cursor: col-resize;
  display: flex;
  align-items: center;
  justify-content: center;
}
.code-drawer-handle:hover,
.code-drawer.resizing .code-drawer-handle {
  background: rgba(78, 201, 176, 0.35);
}
.code-drawer-grip {
  width: 2px;
  height: 36px;
  border-radius: 2px;
  background: var(--c-text-mute);
}

.code-drawer-head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 6px 0 12px;
  background: var(--c-bg-tool);
  border-bottom: 1px solid var(--c-border);
  flex: none;
}
.code-drawer-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fz-sm);
  font-weight: 500;
  color: var(--c-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.code-drawer-glyph {
  display: inline-flex;
  align-items: center;
  color: var(--c-accent);
}
.code-drawer-glyph i {
  font-size: 15px;
  color: inherit;
}
.code-drawer-spacer { flex: 1; min-width: 6px; }
.code-drawer-iconbtn {
  border: none;
  background: transparent;
  color: var(--c-text-dim);
  font-family: var(--f-mono);
  font-size: 13px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 3px;
  cursor: pointer;
  flex: none;
}
.code-drawer-iconbtn:hover {
  background: var(--c-bg-hover);
  color: var(--c-text);
}
.code-drawer-iconbtn.on { color: var(--c-accent); }

.code-drawer-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 6px 8px;
}

.code-drawer-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 10px;
  background: var(--c-bg-tool);
  border-top: 1px solid var(--c-border);
  font-family: var(--f-mono);
  font-size: var(--fz-xs);
  color: var(--c-text-mute);
  white-space: nowrap;
  overflow: hidden;
  flex: none;
}
.code-drawer-footlink {
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--c-text-mute);
  cursor: pointer;
}
.code-drawer-footlink:hover { color: var(--c-text); }
.code-drawer-widthlabel { flex: none; }
.code-drawer-livelabel { color: var(--c-accent); flex: none; }

/* Eine gemeinsame, PERMANENT sichtbare vertikale Leiste am rechten Rand
   (CodeDrawerHost) — ein Eintrag pro Drawer, untereinander gestapelt (CODE über
   ERGEBNIS auf /sql-queries). Klick toggelt den Drawer; der offene Eintrag ist
   per .active hervorgehoben. Overlay + Scrim enden an der Leiste
   (--code-railstrip-w), damit sie immer bedienbar bleibt. */
.code-drawer-railstrip {
  width: var(--code-railstrip-w, 34px);
  box-sizing: border-box;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--c-bg-tool);
  border-left: 1px solid var(--c-border);
  user-select: none;
  overflow: hidden;
}
.code-drawer-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 12px 0 14px;
  cursor: pointer;
  /* Accent-Kante links (transparent im Ruhezustand) — der eigentliche Hover-Marker;
     --c-bg-hover allein ist gegen --c-bg-tool kaum unterscheidbar. */
  border-left: 2px solid transparent;
  transition: background-color 0.12s, border-color 0.12s;
}
.code-drawer-rail + .code-drawer-rail { border-top: 1px solid var(--c-border); }
.code-drawer-rail:hover {
  background: var(--c-bg-active);
  border-left-color: var(--c-accent);
}
.code-drawer-rail:hover .code-drawer-rail-label { color: var(--c-text); }
/* Offener Drawer: Eintrag bleibt dauerhaft markiert (Accent-Kante + -Label). */
.code-drawer-rail.active {
  background: var(--c-bg-active);
  border-left-color: var(--c-accent);
}
.code-drawer-rail.active .code-drawer-rail-label { color: var(--c-accent); }
/* Quadratisches Icon-Badge — feste Kantenlänge, damit alle Rail-Einträge
   unabhängig vom Icon gleich breit wirken (ein Text-Glyph wie „</>" war zu breit). */
.code-drawer-rail-glyph {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-accent);
  border-radius: 3px;
  flex: none;
}
.code-drawer-rail-glyph i {
  font-size: 14px;
  color: var(--c-bg-deepest);
}
.code-drawer-rail-label {
  writing-mode: vertical-rl;
  font-family: var(--f-mono);
  font-size: var(--fz-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--c-text-dim);
  transition: color 0.12s;
}