/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.65;
  color: var(--color-text-primary);
  background: var(--color-bg-page);
  height: 100%;
  overflow: hidden;
}
a { color: var(--color-text-link); text-decoration: none; }
a:hover { color: var(--color-text-link-hover); text-decoration: underline; }

/* Custom scrollbars */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-thumb-hover); }
* { scrollbar-width: thin; scrollbar-color: var(--color-scrollbar-thumb) transparent; }

/* ============================================================
   Loading Screen
   ============================================================ */
.loading-screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--color-bg-page);
  z-index: 9999;
  gap: var(--space-4);
}
.loading-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--color-border-default);
  border-top-color: var(--color-bg-accent-strong);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-screen p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

/* ============================================================
   Header
   ============================================================ */
.app-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--header-height);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  display: flex; align-items: center;
  padding: 0 var(--space-5);
  gap: var(--space-4);
  z-index: 100;
}
.prototype-hint {
  margin-left: auto;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-error);
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.prototype-hint-footer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-error);
  letter-spacing: 0.02em;
  pointer-events: none;
  user-select: none;
}
.header-logo {
  /* Fixed width — was tied to --sidebar-width, which made the logo drag
     every time a user resized the sidebar. Logo now stays put. */
  width: 240px;
  flex-shrink: 0;
  display: flex; align-items: center;
  gap: var(--space-3);
  font-size: var(--text-heading-s);
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
  cursor: pointer;
  letter-spacing: -0.01em;
}
.header-logo:hover { text-decoration: none; color: var(--color-text-primary); }
.header-logo-icon {
  width: 30px; height: 30px;
  background: var(--color-bg-accent-strong);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-on-accent);
}
.header-search {
  flex: 1; max-width: 640px;
  position: relative;
}
.search-bar { position: relative; width: 100%; }
.search-bar-icon {
  position: absolute; left: var(--space-3); top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-placeholder);
  pointer-events: none;
}
.search-bar-input {
  width: 100%; height: 38px;
  padding: 0 var(--space-3) 0 38px;
  font-size: var(--text-body);
  font-family: var(--font-sans);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-xl);
  outline: none;
  color: var(--color-text-primary);
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.search-bar-input::placeholder { color: var(--color-text-placeholder); }
.search-bar-input:hover {
  border-color: var(--color-border-strong);
}
.search-bar-input:focus {
  border-color: var(--color-border-accent);
  box-shadow: var(--focus-ring);
  background: var(--color-bg-surface);
}
.search-bar-shortcut {
  position: absolute; right: var(--space-3); top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-small);
  color: var(--color-text-placeholder);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  pointer-events: none;
}
.search-bar-shortcut[hidden] { display: none; }
.search-bar-clear {
  position: absolute; right: var(--space-2); top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-placeholder);
  cursor: pointer;
  transition: color 100ms ease, background 100ms ease;
}
.search-bar-clear:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-surface-hover);
}
.search-bar-clear[hidden] { display: none; }
.header-actions {
  display: flex; align-items: center;
  gap: var(--space-2); margin-left: auto;
}
.lang-switcher {
  position: relative;
}
.lang-btn {
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-body); font-weight: 500;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: transparent; border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 120ms ease;
}
.lang-btn:hover { background: var(--color-bg-surface); }
.lang-dropdown {
  display: none;
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  min-width: 100px; padding: var(--space-1) 0;
  z-index: 200;
}
.lang-dropdown.open { display: block; }
.lang-option {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%; padding: var(--space-2) var(--space-3);
  font-size: var(--text-body); cursor: pointer;
  color: var(--color-text-primary);
  background: transparent; border: 0; text-align: left;
  font-family: inherit;
  transition: background 80ms ease;
}
.lang-option:hover { background: var(--color-bg-surface); }
.lang-option:focus-visible {
  outline: 2px solid var(--color-border-accent); outline-offset: -2px;
}
.lang-option.active { color: var(--color-text-link); font-weight: 500; }
.lang-option .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-bg-accent-strong);
}
.lang-option:not(.active) .dot { visibility: hidden; }
.header-icon-btn {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: none; background: transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.header-icon-btn:hover {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  text-decoration: none;
}
.user-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-bg-accent-strong);
  color: var(--color-text-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-label); font-weight: 600;
  cursor: pointer;
  transition: box-shadow 150ms ease;
}
.user-avatar:hover {
  box-shadow: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-bg-accent-strong);
}

/* ============================================================
   Layout
   ============================================================ */
.app-body {
  display: flex;
  margin-top: var(--header-height);
  height: calc(100vh - var(--header-height));
}
/* Sidebar-collapse: override the token so everything keyed off
   var(--sidebar-width) (sidebar, main-content margin, header-logo
   width) updates together. Persisted in localStorage. */
body.sidebar-collapsed { --sidebar-width: 64px; }
.sidebar, .main-content, .header-logo {
  transition: width 180ms ease, margin-left 180ms ease;
}
/* In collapsed mode, icon-only rail: hide labels, counts, dividers,
   recents and bookmarks. Icons + toggle remain reachable. */
body.sidebar-collapsed .sidebar .nav-item > span,
body.sidebar-collapsed .sidebar .nav-count,
body.sidebar-collapsed .sidebar .nav-section-label,
body.sidebar-collapsed .sidebar .nav-recent-item,
body.sidebar-collapsed .sidebar .sidebar-collapsed-hide,
body.sidebar-collapsed .header-logo > span {
  display: none;
}
body.sidebar-collapsed .sidebar .nav-item {
  justify-content: center;
  padding-left: 0; padding-right: 0;
}
/* Shrink logo block to a single icon-width when sidebar is collapsed —
   otherwise a 240 px logo block hovers over an empty 64 px rail. */
body.sidebar-collapsed .header-logo { width: 64px; }
.sidebar-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 36px;
  background: transparent; border: none; cursor: pointer;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: background 120ms ease, color 120ms ease;
}
/* Bottom-anchored sticky footer holding the collapse toggle.
   margin-top:auto pushes it to the sidebar's bottom when content is
   short; position:sticky keeps it in view if the list overflows. */
.sidebar-footer {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding-top: var(--space-2);
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-subtle);
}
.sidebar-toggle:hover {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
}
.sidebar-toggle svg,
.sidebar-toggle i {
  transition: transform 180ms ease;
}
body.sidebar-collapsed .sidebar-toggle svg,
body.sidebar-collapsed .sidebar-toggle i {
  transform: rotate(180deg);
}
.sidebar {
  position: fixed; top: var(--header-height); left: 0;
  width: var(--sidebar-width);
  /* Reserve the 32 px bottom for the fixed .app-footer so the sticky
     .sidebar-footer (collapse toggle) isn't hidden behind it. */
  height: calc(100vh - var(--header-height) - 32px);
  background-color: var(--color-bg-surface);
  background-image:
    linear-gradient(var(--color-bg-surface) 30%, transparent),
    linear-gradient(transparent, var(--color-bg-surface) 70%),
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.06), transparent),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.06), transparent);
  background-position: 0 0, 0 100%, 0 0, 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 24px, 100% 24px, 100% 8px, 100% 8px;
  background-attachment: local, local, scroll, scroll;
  overflow-y: auto;
  /* No bottom padding — the sticky .sidebar-footer sits flush against the
     app-footer's top edge, eliminating the visible gap that used to show
     when the sidebar wasn't scrolled to its bottom. */
  padding: var(--space-3) var(--space-3) 0;
  border-right: 1px solid var(--color-border-subtle);
  z-index: 50;
  /* Flex column so .sidebar-footer can use margin-top:auto to anchor at
     the bottom while the rest of the content stays at the top. */
  display: flex;
  flex-direction: column;
}

/* Drag handle on the right edge of the sidebar. Wide hit area (6 px)
   for comfortable grabbing; visible only on hover / during drag. */
.sidebar-resize-handle {
  position: fixed;
  top: var(--header-height);
  left: var(--sidebar-width);
  transform: translateX(-3px);
  width: 6px;
  bottom: 32px; /* above footer */
  z-index: 55;
  cursor: col-resize;
  background: transparent;
  transition: background 120ms ease;
}
.sidebar-resize-handle:hover,
body.sidebar-resizing .sidebar-resize-handle {
  background: var(--color-bg-accent);
}
body.sidebar-collapsed .sidebar-resize-handle { display: none; }
/* While dragging, prevent text selection + force the resize cursor
   site-wide so quick mouse movements don't break the interaction. */
body.sidebar-resizing {
  cursor: col-resize !important;
  user-select: none;
}
body.sidebar-resizing * { cursor: col-resize !important; }
/* Kill the width transition during drag so the bar tracks the cursor
   1:1 instead of easing behind it. */
body.sidebar-resizing .sidebar,
body.sidebar-resizing .main-content,
body.sidebar-resizing .header-logo { transition: none !important; }

.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8) var(--content-padding) 64px;
  /* min-width: 0 lets flex children actually shrink — without this the
     content area refuses to go below its intrinsic content width. */
  min-width: 0;
}
/* Programmatic focus (SPA route change) should not render an outline;
   keyboard users reaching main via Tab still get the default ring. */
.main-content:focus { outline: none; }
/* Scroll shadow at top of main content */
.main-content {
  background:
    linear-gradient(var(--color-bg-page) 30%, transparent),
    linear-gradient(transparent, var(--color-bg-page) 70%) 0 100%,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,0.04), transparent),
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,0.04), transparent) 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 20px, 100% 20px, 100% 6px, 100% 6px;
  background-attachment: local, local, scroll, scroll;
}
.content-wrapper {
  width: 100%;
  animation: fadeIn 200ms ease;
}
/* Individual prose elements (descriptions, long text inside Metadaten
   props-table values) get their own --prose-max-width cap so lines stay
   readable on wide displays — but the layout frame goes full-width,
   giving tables and card grids the horizontal room they want. */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Footer */
.app-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-4);
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-label);
  z-index: 50;
}
.app-footer-version {
  color: var(--color-text-secondary);
}
.app-footer-links {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  justify-content: flex-end;
}
.app-footer a {
  color: var(--color-text-secondary);
  text-decoration: none;
}
.app-footer a:hover {
  color: var(--color-text-link);
  text-decoration: underline;
}

/* ============================================================
   Sidebar Navigation
   ============================================================ */
/* Top-level nav rows (Home / KI-Assistent / Workflows / …) keep rounded
   pills; tree rows override below for a flush-left catalog look. */
.nav-item {
  display: flex; align-items: center;
  gap: var(--space-2);
  padding: 7px var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-body); font-weight: 400;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
  margin-bottom: 1px;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
}
.nav-item:hover {
  background: var(--color-bg-surface-hover);
  text-decoration: none;
  color: var(--color-text-primary);
}
.nav-item.active {
  background: var(--color-border-subtle);
  color: var(--color-text-primary);
  font-weight: 500;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--color-bg-accent-strong);
  border-radius: 1px;
}
/* Name span grows + truncates. Excludes the count badge AND the chevron
   spacer — previously the spacer matched this rule and got flex:1, which
   shoved the id/name rightwards on leaf rows. */
.nav-item > span:not(.nav-count):not(.nav-chevron-spacer) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ═══ Tree rows (collection + children) ═══════════════════════════════
   Flush-left design. Hierarchy is conveyed by IDs themselves (which are
   strict prefixes — "TQ.21.00" is an ancestor of "TQ.21.00.00.02"), so
   no horizontal indent per depth. Chevron (for branches) and spacer (for
   leaves) are the same width so IDs align regardless of position in the
   tree. Three interaction states, all surfaced via a left-edge accent bar:
     • hover    — surface-hover bg, no bar
     • on-path  — muted bar (ancestor of the active node), no bg
     • active   — strong bar + tinted bg
   The bar hugs the row's left edge edge-to-edge (square corners) for a
   clean catalog-tree look. */
.nav-item-child,
.nav-item.nav-item-collection {
  margin: 0;
  padding: 5px var(--space-2) 5px 14px;    /* base left pad (depth adds on top) */
  border-radius: 0;
  font-size: var(--text-body);
  color: var(--color-text-primary);
  /* Leaves a consistent accent-bar gutter at left:0. */
}
/* Small per-depth step so the hierarchy reads at a glance without the tree
   cascading to the right. 6 px per level keeps even deep subtrees compact. */
.nav-item-child[data-depth="1"] { padding-left: calc(14px + 6px); }
.nav-item-child[data-depth="2"] { padding-left: calc(14px + 12px); }
.nav-item-child[data-depth="3"] { padding-left: calc(14px + 18px); }
.nav-item-child[data-depth="4"] { padding-left: calc(14px + 24px); }
.nav-item.nav-item-collection {
  /* Collection row also participates in the flush-left tree styling, but
     keeps a slightly bolder weight to read as the group header. */
  font-weight: 500;
  padding: 6px var(--space-2) 6px 14px;
}
.nav-item-child:hover,
.nav-item.nav-item-collection:hover {
  background: var(--color-bg-surface-hover);
}
/* `::before` strategy — the base .nav-item.active rule above uses a short
   2-px bar; tree rows override with an edge-to-edge 3-px bar for a crisper
   file-tree feel. */
.nav-item-child.active::before,
.nav-item.nav-item-collection.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-bg-accent-strong);
  border-radius: 0;
}
.nav-item-child.active,
.nav-item.nav-item-collection.active {
  background: var(--color-bg-accent);
  color: var(--color-text-primary);
  font-weight: 600;
}
.nav-item-child.on-path::before,
.nav-item.nav-item-collection.on-path::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--color-bg-accent-strong);
  opacity: 0.35;
  border-radius: 0;
}
.nav-item-child.on-path,
.nav-item.nav-item-collection.on-path {
  color: var(--color-text-primary);
  font-weight: 500;
}

/* Chevron: compact 16×16 hit target. The leaf spacer matches so IDs line up
   at the same x-coordinate regardless of whether the row has a chevron. */
.nav-chevron {
  flex-shrink: 0;
  width: 16px; height: 16px;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-placeholder);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.nav-chevron:hover {
  background: var(--color-border-subtle);
  color: var(--color-text-primary);
}
.nav-chevron:focus-visible {
  outline: 2px solid var(--color-border-accent);
  outline-offset: 1px;
}
.nav-chevron-spacer {
  display: inline-block;
  width: 16px;
  flex-shrink: 0;
}

/* Leaf rows shouldn't pretend to be containers — fade the monospace id
   for leaves, keep it full-strength for branches where it's the primary
   tree signal. */
.nav-item-leaf .nav-child-id { color: var(--color-text-placeholder); }
.nav-item-branch .nav-child-id { color: var(--color-text-secondary); }
.nav-item-child.active .nav-child-id,
.nav-item.nav-item-collection.active .nav-child-id {
  color: var(--color-bg-accent-strong);
}
.nav-item-child.on-path .nav-child-id,
.nav-item.nav-item-collection.on-path .nav-child-id {
  color: var(--color-text-primary);
}

/* Home table: collection name cell. Slightly heavier weight to read as the
   primary column label. */
.coll-row-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Monospace id prefix used by .title-block-name across every level. */
.title-code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--color-text-placeholder);
  font-weight: 600;
  margin-right: var(--space-2);
}
.nav-child-id {
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  color: var(--color-text-placeholder);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  background: transparent;
  padding: 0;
}
/* Count badge — consistent across the whole tree (collection row + every
   branch node). Muted by default; tracks foreground color on active rows. */
.nav-count {
  margin-left: auto;
  flex-shrink: 0;
  font-size: var(--text-label);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-bg-page);
  padding: 0 6px;
  border-radius: var(--radius-sm);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.nav-item.active .nav-count,
.nav-item-child.active .nav-count {
  color: var(--color-bg-accent-strong);
  background: var(--color-bg-surface);
}
.nav-item-child.on-path .nav-count,
.nav-item.nav-item-collection.on-path .nav-count {
  color: var(--color-text-primary);
}
.nav-section-label {
  font-size: var(--text-label-xs); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-text-placeholder);
  padding: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
}
.nav-divider {
  height: 1px;
  background: var(--color-border-default);
  margin: var(--space-3) var(--space-3);
}
.nav-recent-item {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  padding: 5px var(--space-3);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--radius-md);
  transition: background 120ms ease, color 120ms ease;
}
.nav-recent-item:hover {
  color: var(--color-text-link);
  background: var(--color-bg-surface-hover);
}
.nav-recent-item::before {
  content: '';
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-border-default);
  margin-right: var(--space-2);
  vertical-align: middle;
}

/* ============================================================
   Breadcrumb
   ============================================================ */
.breadcrumb {
  display: flex; align-items: center;
  gap: var(--space-1);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}
.breadcrumb-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: color 100ms ease;
}
.breadcrumb-link:hover { color: var(--color-text-link); text-decoration: none; }
.breadcrumb-current { color: var(--color-text-primary); font-weight: 500; }
.breadcrumb-separator { color: var(--color-text-placeholder); user-select: none; font-size: var(--text-label-xs); }

/* ============================================================
   Title Block
   ============================================================ */
.title-block {
  display: flex; align-items: center;   /* was flex-start + margin-top:4px nudges on every child */
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.title-block-icon {
  width: 36px; height: 36px;
  flex-shrink: 0;
  color: var(--color-bg-accent-strong);
  background: var(--color-bg-accent);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
}
.title-block-name {
  /* `.title-block-content` used to wrap the name with `flex: 1`; that
     wrapper did nothing else and is now gone. The name takes the flex
     role directly. */
  flex: 1;
  min-width: 0;
  font-size: var(--text-heading-l); font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3; margin: 0;
  letter-spacing: -0.01em;
}
.title-block-badge { flex-shrink: 0; }
.title-block-actions {
  flex-shrink: 0;
  display: flex; align-items: center;
  gap: var(--space-2);
}

/* ============================================================
   Tab Bar
   ============================================================ */
.tab-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border-subtle);
  border-radius: 0;
  margin-bottom: var(--space-5);
  padding: 0 var(--space-2);
  position: relative;
  /* Keep visible so absolutely-positioned dropdowns (Gruppierung) can
     extend below the bar. Horizontal scrolling of overflowing tabs is
     delegated to the inner .tab-bar-scroll container. */
  overflow: visible;
}
.tab-bar-scroll {
  display: flex;
  align-items: stretch;
  flex: 1 1 auto;
  min-width: 0;
  /* Explicit overflow-y:hidden — when overflow-x is auto, browsers
     implicitly promote overflow-y from visible to auto (CSS2 rule),
     which can cause a phantom vertical scrollbar even when nothing
     overflows vertically. Tab underlines/margins stay visible because
     .tab-bar itself is overflow:visible. */
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}
.tab {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body); font-weight: 400;
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  border-radius: 0;
  cursor: pointer;
  border: none; background: transparent;
  border-bottom: 2px solid transparent;
  transition: color 100ms ease, border-color 100ms ease;
  white-space: nowrap;
  line-height: 1.4;
  margin-bottom: -1px;
}
.tab:hover {
  color: var(--color-text-primary);
  border-bottom-color: var(--color-border-default);
}
.tab.active {
  color: var(--color-text-primary);
  font-weight: 500;
  border-bottom-color: var(--color-bg-accent-strong);
}
.tab-bar-spacer { flex: 1; }
.tab-bar > .grouping-btn { margin-left: var(--space-2); }
.tab-bar > .grouping-dropdown { margin-left: var(--space-2); }

/* Grouping dropdown */
.grouping-dropdown { position: relative; display: flex; align-items: center; }
.grouping-btn {
  align-self: center;
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-small); font-family: var(--font-sans);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-bg-page);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 100ms ease;
}
.grouping-btn:hover { border-color: var(--color-text-secondary); }
.grouping-menu {
  display: none; position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  min-width: 140px; z-index: 20;
  padding: var(--space-1) 0;
}
.grouping-menu.open { display: block; }
.grouping-option {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small); cursor: pointer;
  color: var(--color-text-primary);
}
.grouping-option:hover { background: var(--color-bg-surface-hover); }
.grouping-option.active { color: var(--color-text-link); font-weight: 500; }

/* Screen-reader only utility */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Clickable [role="link"] elements and .clickable-row table rows aren't
   focusable by default. Use the element itself as the tab stop so the
   global keydown handler can turn Enter/Space into a click. */
.nav-item,
.clickable-row,
.search-dropdown-item,
.search-dropdown-cta,
.search-result-item,
.grouping-option { -webkit-user-select: none; user-select: none; }
.nav-item[role="link"],
.clickable-row,
.search-dropdown-item,
.search-dropdown-cta,
.search-result-item,
.grouping-option { cursor: pointer; }
.nav-item[role="link"]:focus-visible,
.clickable-row:focus-visible,
.search-dropdown-item:focus-visible,
.search-dropdown-cta:focus-visible,
.search-result-item:focus-visible,
.grouping-option:focus-visible {
  outline: 2px solid var(--color-border-accent);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* Warning banner used on home when init() silently skipped one or more
   collections (schema-invalid or HTTP error). Keeps users from wondering
   why a collection they expected is missing. */
.load-error-banner {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  color: var(--color-warning);
}
.load-error-banner > i { flex-shrink: 0; margin-top: 2px; }
.load-error-banner strong { color: var(--color-text-primary); }
.load-error-banner .text-sub { margin-top: 2px; color: var(--color-text-secondary); }

/* Text utility classes — extracted from repeated inline styles so app.js
   stops carrying typography/colour knowledge in string templates. */
.text-placeholder { color: var(--color-text-placeholder); }
.text-secondary   { color: var(--color-text-secondary); }
.text-sub         { font-size: var(--text-small); color: var(--color-text-secondary); }
.tabular-nums     { font-variant-numeric: tabular-nums; }

/* ============================================================
   Filter panel, pills, toggle
   ============================================================ */
.filter-toggle { display: inline-flex; align-items: center; gap: var(--space-1); }
.filter-toggle.open {
  color: var(--color-text-link);
  border-color: var(--color-border-default);
  background: transparent;
}
.filter-toggle .filter-toggle-chevron { transition: transform 120ms ease; }
.filter-toggle.open .filter-toggle-chevron { transform: rotate(180deg); }
.filter-toggle-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--color-bg-accent); color: var(--color-text-link);
  border-radius: var(--radius-sm); font-size: var(--text-label); font-weight: 500;
  margin-left: 2px;
}

.filter-panel {
  /* Overlay instead of inline block — dropping into the document flow
     used to reflow the whole Tabelle/Diagramm below it every toggle.
     Now it floats below the Filter button in the tab-bar. */
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  z-index: 30;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: var(--space-4);
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  min-width: 360px;
  max-width: 640px;
  max-height: calc(100vh - var(--header-height) - 120px);
  overflow-y: auto;
}
.filter-panel[hidden] { display: none; }
/* The tab-bar anchors the panel, so mark it as the positioning parent. */
.tab-bar { position: relative; }
.filter-group { min-width: 180px; flex: 1 1 220px; }
.filter-group-label {
  font-size: var(--text-label); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.filter-group-options {
  display: flex; flex-direction: column; gap: var(--space-1);
  max-height: 240px; overflow-y: auto;
  padding-right: var(--space-1);
}
.filter-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 2px 0;
  font-size: var(--text-small);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}
.filter-chip input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--color-bg-accent-strong);
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}
.filter-chip:hover { color: var(--color-text-link); }
.filter-chip.active { color: var(--color-text-link); font-weight: 500; }

.filter-pill-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}
.filter-pill-row[hidden] { display: none; }
.filter-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px var(--space-2);
  background: var(--color-bg-accent);
  border: 1px solid var(--color-border-accent);
  border-radius: 999px;
  font-size: var(--text-small);
  color: var(--color-text-link);
  line-height: 1.4;
}
.filter-pill-dim { color: var(--color-text-primary); font-weight: 400; }
.filter-pill-val { font-weight: 500; }
.filter-pill-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; margin-left: 2px;
  background: transparent; border: none; border-radius: 50%;
  color: var(--color-text-link); cursor: pointer;
}
.filter-pill-remove:hover { background: var(--color-accent-bg-3); }
.filter-pill-remove:focus-visible { outline: 2px solid var(--color-border-accent); outline-offset: 2px; }
.filter-reset {
  background: transparent; border: none;
  color: var(--color-text-link);
  font-size: var(--text-small); font-family: var(--font-sans);
  cursor: pointer;
  padding: 2px var(--space-2);
  margin-left: var(--space-1);
}
.filter-reset:hover { text-decoration: underline; color: var(--color-text-link-hover); }
.filter-reset:focus-visible { outline: 2px solid var(--color-border-accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.grouping-btn:focus-visible { outline: 2px solid var(--color-border-accent); outline-offset: 2px; }
.filter-checkbox:focus-visible { outline: 2px solid var(--color-border-accent); outline-offset: 2px; }

/* ============================================================
   Badges
   ============================================================ */
.badge {
  display: inline-flex; align-items: center;
  gap: var(--space-1);
  padding: 2px 8px;
  font-size: var(--text-label); font-weight: 500;
  letter-spacing: 0.06em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent; /* baseline so hover/active border changes never shift layout */
  white-space: nowrap;
}
/* Status badges — consistent filled-pill treatment, one color per status */
.badge-certified, .badge-approved, .badge-active, .badge-public { color: var(--color-status-certified); background: var(--color-status-certified-bg); }
.badge-draft { color: var(--color-status-draft); background: var(--color-status-draft-bg); }
.badge-deprecated { color: var(--color-status-deprecated); background: var(--color-status-deprecated-bg); }
.badge-review, .badge-internal { color: var(--color-text-link); background: var(--color-bg-accent); }
.badge-confidential { color: var(--color-text-secondary); background: transparent; border-color: var(--color-border-default); }
.badge-restricted { color: var(--color-error); background: var(--color-error-bg); }
.badge-domain { color: var(--color-text-primary); background: var(--color-bg-surface-hover); border-color: var(--color-border-subtle); }
button.badge-filterable {
  font-family: inherit; font-size: var(--text-label); font-weight: 500; letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 100ms ease, border-color 100ms ease, color 100ms ease, box-shadow 100ms ease;
}
.badge-filterable:hover { color: var(--color-text-link); background: var(--color-bg-accent); border-color: var(--color-border-accent); }
.badge-filterable:focus-visible { outline: 2px solid var(--color-border-accent); outline-offset: 2px; }
.badge-filterable[aria-pressed="true"] {
  color: var(--color-text-link);
  background: var(--color-bg-accent);
  border-color: var(--color-border-accent);
}

.status-dot {
  width: 6px; height: 6px; border-radius: 50%;
  display: inline-block;
}
.status-dot-certified, .status-dot-approved, .status-dot-active { background: var(--color-status-certified); }
.status-dot-draft { border: 1.5px solid var(--color-status-draft); }
.status-dot-deprecated { background: var(--color-status-deprecated); }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: var(--transition-hover);
  display: flex; align-items: flex-start;
  gap: var(--space-3);
}
.card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}
.card-icon { color: var(--color-text-secondary); flex-shrink: 0; margin-top: 2px; }
.card-content { flex: 1; min-width: 0; }
.card-title {
  font-size: var(--text-body); font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.card-meta {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.card-actions { flex-shrink: 0; }
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-3);
}

/* ============================================================
   Tables
   ============================================================ */
/* Narrow-viewport-friendly table wrapper. Keeps the table's designed
   column proportions and scrolls horizontally inside its panel instead
   of compressing every column to illegibility. */
.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}
.data-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-body);
  table-layout: fixed;
  /* Floor that keeps cell content legible; wrapper scrolls below this. */
  min-width: 720px;
}
.data-table thead th {
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-placeholder);
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 2px solid var(--color-border-subtle);
  white-space: nowrap;
  /* Clip header text + sort-arrow glyph inside the cell — otherwise on
     narrow laptops PROZESS runs into BEREICH and the sort ::after glyph
     bleeds into the next column. */
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer; user-select: none;
  transition: color 100ms ease;
}
.data-table thead th:hover { color: var(--color-text-secondary); }
/* Sort indicator hidden until client-side sort is wired — we don't want
   the ▲▼ glyph implying sortability that doesn't exist. Re-enable by
   deleting the `display: none` below when sort handlers land. */
.data-table thead th::after {
  display: none;
  content: ''; width: 14px; height: 14px;
  vertical-align: -2px; margin-left: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23BFBFBA' stroke-width='2'%3E%3Cpath d='M8 9l4-4 4 4'/%3E%3Cpath d='M16 15l-4 4-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity: 0.4;
}
/* Also drop the pointer cursor that implied sortability. */
.data-table thead th { cursor: default; }
.data-table thead th:hover::after { opacity: 0.7; }
.data-table thead th.sort-asc::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23335E8A' stroke-width='2.5'%3E%3Cpath d='M8 14l4-4 4 4'/%3E%3C/svg%3E");
  opacity: 1;
}
.data-table thead th.sort-desc::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23335E8A' stroke-width='2.5'%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3C/svg%3E");
  opacity: 1;
}
.data-table thead th.sort-asc,
.data-table thead th.sort-desc { color: var(--color-text-link); }
.data-table tbody tr {
  border-bottom: 1px solid var(--color-border-subtle);
  transition: background 80ms ease;
}
.data-table tbody tr:hover { background: var(--color-accent-bg-1); }
.data-table tbody tr:last-child { border-bottom: none; }
.data-table tbody td {
  padding: 10px var(--space-3);
  color: var(--color-text-primary);
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* First cell in clickable rows gets a subtle link color on hover */
.clickable-row:hover td:first-child { color: var(--color-text-link); }
/* Step-table row persistently marked when its id matches the inspector's
   current selection — makes the table act as a selection overview. */
.clickable-row.is-selected td {
  background: var(--color-bg-accent);
}
.clickable-row.is-selected td:first-child {
  color: var(--color-bg-accent-strong);
  font-weight: 600;
}
.data-table .cell-mono {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}
.data-table a { color: var(--color-text-link); text-decoration: none; }
.data-table a:hover { text-decoration: underline; }

.clickable-row { cursor: pointer; }

/* ============================================================
   Section-specific
   ============================================================ */
.section-header {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}
.section-title {
  font-size: var(--text-display); font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.3; margin: 0;
  letter-spacing: -0.02em;
}
.section-subtitle {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
  line-height: 1.5;
}

/* White panels for content sections (Informatica style) */
.tab-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.list-panel {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.content-section {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  transition: border-color 150ms ease;
}
/* Stacked .content-section blocks (e.g. the Metadaten tab) get a vertical
   gap between them — the data-catalog layout relies on a parent flex-gap
   which we don't always have. */
.content-section + .content-section { margin-top: var(--space-4); }
.content-section:hover {
  border-color: var(--color-border-strong);
}
.section-label {
  font-size: var(--text-body); font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
  margin-top: 0;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.section-label:first-child { margin-top: 0; }

/* Collapsible groups */
.group-header {
  display: flex; align-items: center;
  gap: var(--space-2); cursor: pointer;
  padding: var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  user-select: none;
  margin-top: var(--space-4);
  border-radius: var(--radius-sm);
  transition: background 80ms ease;
}
.group-header:hover { background: var(--color-bg-surface-hover); }
.group-header:first-child { margin-top: 0; }
.group-header-title {
  font-size: var(--text-heading-m); font-weight: 600;
  color: var(--color-text-primary);
  flex: 1;
}
.group-header-count {
  font-size: var(--text-small);
  color: var(--color-text-placeholder);
  font-weight: 500;
}
.group-content { padding: var(--space-2) 0; }

/* Properties table */
.props-table {
  width: 100%; border-collapse: collapse;
}
.props-table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}
.props-table td:first-child {
  font-weight: 500;
  color: var(--color-text-placeholder);
  width: 200px;
  white-space: nowrap;
  font-size: var(--text-small);
}
.props-table td:last-child { color: var(--color-text-primary); }
.props-table tr:last-child td { border-bottom: none; }

/* Names table */
.names-table {
  width: 100%; border-collapse: collapse;
}
.names-table td {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-body);
  border-bottom: 1px solid var(--color-border-subtle);
}
.names-table td:first-child {
  font-weight: 500; width: 50px;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  font-size: var(--text-label);
  letter-spacing: 0.06em;
}
.names-table tr:last-child td { border-bottom: none; }

/* Quality bars */
.quality-bar-container {
  display: flex; align-items: center; gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.quality-bar-label { width: 130px; font-size: var(--text-body); color: var(--color-text-primary); }
.quality-bar {
  flex: 1; display: flex; height: 8px;
  border-radius: 4px;
  background: var(--color-quality-bg);
  overflow: hidden; min-width: 120px;
}
.quality-bar-fill-complete { background: var(--color-quality-complete); height: 100%; border-radius: 4px; transition: width 600ms ease; }
.quality-bar-fill-null { background: var(--color-quality-null); height: 100%; }
.quality-bar-value {
  width: 50px; text-align: right;
  font-size: var(--text-body); color: var(--color-text-primary);
  font-weight: 600; font-variant-numeric: tabular-nums;
}

/* Data Quality dimension cards */
.dq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}
.dq-card {
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  background: var(--color-bg-surface);
  transition: var(--transition-card);
}
.dq-card:hover { border-color: var(--color-border-strong); }
.dq-card-header {
  display: flex; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.dq-card-title {
  font-size: var(--text-body); font-weight: 600;
  color: var(--color-text-primary);
}
.dq-card-desc {
  font-size: var(--text-small); color: var(--color-text-secondary);
  line-height: 1.5; margin-bottom: var(--space-3);
}
.dq-card-score {
  font-size: var(--text-display-lg); font-weight: 700;
  margin-bottom: var(--space-2);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.dq-card-score--empty {
  color: var(--color-text-placeholder);
}
.dq-card-empty {
  font-size: var(--text-small); color: var(--color-text-placeholder);
  margin-top: var(--space-2);
}
.dq-card .quality-bar { margin-top: 0; }

/* ============================================================
   Vocabulary Diagram (ArchiMate style)
   ============================================================ */
.diagram-canvas {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Pill-list container used in detail-view relationship sections */
.domain-group-concepts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-2);
  align-items: start;
}
/* In the grid, compact pills fill their cell and truncate long names */
.domain-group-concepts > .concept-box:not(.concept-box--expanded) {
  display: flex;
  justify-content: space-between;
  overflow: hidden;
}
.domain-group-concepts > .concept-box:not(.concept-box--expanded) .concept-box-name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.concept-box {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text-primary);
  font-size: var(--text-body);
  font-weight: 400;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
  cursor: pointer;
  white-space: nowrap;
}
.concept-box:hover {
  border-color: var(--color-bg-accent-strong);
  box-shadow: var(--shadow-hover);
  background: var(--color-bg-accent);
  text-decoration: none;
  color: var(--color-bg-accent-strong);
}

/* Chevron toggle button inside a concept box */
.concept-box-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-placeholder);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 100ms ease, background 100ms ease;
}
.concept-box-toggle:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-surface-hover);
}

/* Expanded variant: spans 2 grid columns (~360-500px per card) so multiple
   expanded cards can sit side by side on wide containers. Collapses to whatever
   columns exist on narrow layouts. */
.concept-box--expanded {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
  padding: var(--space-4);
  grid-column: span 2;
  white-space: normal;
  cursor: default;
}
.concept-box--expanded:hover {
  border-color: var(--color-border-default);
  box-shadow: none;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}
.concept-box-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.concept-box--expanded .concept-box-name {
  font-size: var(--text-heading-m);
  font-weight: 600;
  color: var(--color-text-primary);
  text-decoration: none;
}
.concept-box--expanded .concept-box-name:hover {
  color: var(--color-text-link);
  text-decoration: underline;
}
.concept-box-description {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.5;
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.concept-box-attrs {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.concept-box-attr {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-primary);
}
.concept-box-attr-required {
  color: var(--color-status-draft);
  font-weight: 700;
  text-align: center;
  line-height: 1;
}
.concept-box-attr-name {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
}
.concept-box-attr-type {
  color: var(--color-text-placeholder);
  font-size: var(--text-label);
  text-transform: lowercase;
}
.concept-box-more {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-link);
  text-decoration: none;
}
.concept-box-more:hover { text-decoration: underline; }
.concept-box-empty {
  font-size: var(--text-small);
  color: var(--color-text-placeholder);
  font-style: italic;
}

/* Flat diagram grid */
.diagram-flat-grid {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.concept-box--flat {
  flex-direction: column; align-items: flex-start;
  gap: var(--space-1);
  min-width: 140px;
  white-space: normal;
}
.concept-box-domain {
  font-size: var(--text-label); color: var(--color-text-placeholder);
  font-weight: 400;
}

/* ============================================================
   Vocabulary UML diagram — uniform class-box grid
   ============================================================ */
.diagram-group { margin-bottom: var(--space-5); }
.diagram-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
  align-items: start;
  padding-top: var(--space-3);
}

.uml-card {
  display: flex; flex-direction: column;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.uml-card:hover {
  border-color: var(--color-border-accent);
  box-shadow: var(--shadow-hover);
}
.uml-card-header {
  display: flex; align-items: center; gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  min-height: 36px;
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  transition: background 100ms ease;
}
.uml-card-header:hover { background: var(--color-bg-surface-hover); }
/* Static header for non-expandable cards — same layout as button variant, no hover highlight (card handles hover). */
.uml-card-header--static {
  cursor: pointer;
}
.uml-card-header--static:hover { background: transparent; }
.uml-card-header:focus-visible {
  outline: 2px solid var(--color-border-accent);
  outline-offset: -2px;
}
.uml-card--expanded .uml-card-header {
  border-bottom: 1px solid var(--color-border-subtle);
}
.uml-card-name {
  flex: 1;
  font-size: var(--text-body); font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.3;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.uml-card-chevron {
  color: var(--color-text-placeholder);
  flex-shrink: 0;
  transition: color 100ms ease;
}
.uml-card-header:hover .uml-card-chevron { color: var(--color-text-primary); }
.uml-card-attrs {
  display: flex; flex-direction: column;
  padding: var(--space-2) var(--space-3);
  gap: 3px;
}
.uml-card-attr {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  line-height: 1.5;
  min-width: 0;
}
.uml-card-attr-name {
  color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.uml-card-attr-type {
  color: var(--color-text-placeholder);
  font-size: calc(var(--text-mono) - 1px);
  display: inline-flex; align-items: baseline; gap: var(--space-1);
}
.uml-card-attr-key {
  color: var(--color-text-placeholder);
  font-family: var(--font-mono);
  font-size: calc(var(--text-mono) - 2px);
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0 4px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-sm);
  line-height: 1.3;
}
.uml-card-empty {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-placeholder);
  font-style: italic;
}
.uml-card-more {
  display: inline-block;
  margin: 0 var(--space-3) var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-link);
  text-decoration: none;
}
.uml-card-more:hover { text-decoration: underline; }

/* ============================================================
   Relationship Graph (SVG + CSS, Informatica style)
   ============================================================ */
.rel-viewport {
  position: relative;
  overflow: hidden;
  cursor: grab;
}
.rel-viewport:active { cursor: grabbing; }
.rel-svg {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
}

/* Center node — double ring like Informatica */
.rel-center {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.rel-center-outer {
  border-radius: 50%;
  background: var(--color-accent-bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rel-center-inner {
  border-radius: 50%;
  background: var(--color-bg-accent-strong);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rel-center-label {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-2);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* Satellite groups — double ring */
.rel-satellite {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
}
.rel-satellite-outer {
  border-radius: 50%;
  background: var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rel-satellite-inner {
  border-radius: 50%;
  background: var(--color-bg-surface-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Items inside satellite */
.rel-satellite-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  width: 100%;
  height: 100%;
}
.rel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  cursor: default;
  transition: transform 100ms ease;
}
a.rel-item { cursor: pointer; }
a.rel-item:hover { transform: scale(1.1); text-decoration: none; }
.rel-item-label {
  font-size: var(--text-label-xs);
  font-weight: 500;
  color: var(--color-text-primary);
  max-width: 80px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
a.rel-item:hover .rel-item-label { color: var(--color-text-primary); }

/* Count badge — speech bubble, always top-left 45°, positioned by JS */
.rel-satellite-count {
  position: absolute;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--color-text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* Title below satellite — absolute so it doesn't affect satellite div height */
.rel-satellite-title {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-2);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* Tooltip */
.rel-tooltip {
  display: none;
  position: absolute;
  z-index: 10;
  background: var(--color-bg-overlay);
  color: var(--color-text-on-accent);
  font-size: var(--text-small);
  font-weight: 500;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-md);
  pointer-events: none;
  white-space: nowrap;
  box-shadow: var(--shadow-tooltip);
}

/* Right panel — legend/filter */
.rel-panel {
  position: absolute;
  top: var(--space-4); right: var(--space-4);
  width: 200px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  z-index: 5;
  box-shadow: var(--shadow-popover);
}
.rel-panel-nav {
  display: flex;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.rel-panel-btn {
  width: 32px; height: 32px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-page);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: background 100ms ease, color 100ms ease;
}
.rel-panel-btn:hover {
  background: var(--color-bg-surface-hover);
  color: var(--color-text-primary);
}
.rel-panel-search {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  font-family: var(--font-sans);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  outline: none;
  margin-bottom: var(--space-3);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
}
.rel-panel-search:focus {
  border-color: var(--color-border-accent);
  box-shadow: var(--focus-ring);
}
.rel-panel-title {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.rel-panel-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  font-size: var(--text-small);
  color: var(--color-text-primary);
  cursor: pointer;
}
.rel-panel-item input[type="checkbox"] {
  accent-color: var(--color-bg-accent-strong);
}
.rel-panel-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ============================================================
   Home View
   ============================================================ */
.home-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}
.home-kpi-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  cursor: pointer;
  transition: var(--transition-hover);
  position: relative;
  overflow: hidden;
}
.home-kpi-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--color-bg-accent-strong);
  opacity: 0;
  transition: opacity 150ms ease;
}
.home-kpi-card:hover {
  box-shadow: var(--shadow-card);
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
}
.home-kpi-card:hover::before { opacity: 1; }
.home-kpi-icon {
  color: var(--color-bg-accent-strong);
  margin-bottom: var(--space-3);
  opacity: 0.7;
}
.home-kpi-count {
  font-size: var(--text-display-lg);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
  margin-bottom: var(--space-1);
  letter-spacing: -0.02em;
}
.home-kpi-label {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}
.home-kpi-sub {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.home-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.home-domain-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-body);
  font-weight: 450;
  color: var(--color-text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 80ms ease, color 80ms ease;
}
.home-domain-row:last-child { border-bottom: none; }
.home-domain-row:hover {
  background: var(--color-accent-bg-1);
  color: var(--color-text-link);
}
.home-domain-count {
  font-weight: 500;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

/* Lineage tree */
.lineage-tree {
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  color: var(--color-text-primary);
  line-height: 1.8;
  white-space: pre;
  overflow-x: auto;
}
.lineage-node { color: var(--color-text-link); cursor: pointer; text-decoration: none; }
.lineage-node:hover { text-decoration: underline; }
.lineage-edge-label {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  font-style: italic;
}

/* Stakeholder cards */
.stakeholder-section { margin-bottom: var(--space-4); }
.stakeholder-section:last-child { margin-bottom: 0; }
.stakeholder-role-title {
  font-size: var(--text-heading-m); font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}
.stakeholder-role-desc {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
}
.stakeholder-card {
  display: flex; align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
  transition: var(--transition-card);
}
.stakeholder-card:hover { border-color: var(--color-border-strong); }
.stakeholder-empty-warning {
  display: flex; align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: 500;
}
.stakeholder-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  color: var(--color-text-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-label); font-weight: 600;
  flex-shrink: 0;
}
.stakeholder-name { font-size: var(--text-body); font-weight: 500; color: var(--color-text-primary); }
.stakeholder-org { font-size: var(--text-small); color: var(--color-text-secondary); }
.stakeholder-email { font-size: var(--text-small); color: var(--color-text-link); }

/* ============================================================
   Inline edit mode (visual mockup — no persistence)
   ============================================================ */
/* Visibility toggle for title-block action buttons */
.title-block-actions .action-edit { display: none; }
article.edit-mode .title-block-actions .action-view { display: none; }
article.edit-mode .title-block-actions .action-edit { display: inline-flex; }

/* Amber banner shown between breadcrumb and title when editing */
.edit-mode-banner {
  display: flex; align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  color: var(--color-warning);
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: 500;
}

/* Editable-field affordance: soft dashed outline + pointer cursor */
article.edit-mode [contenteditable="true"] {
  outline: 1px dashed var(--color-bg-accent-strong);
  outline-offset: 2px;
  background: var(--color-bg-page);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  cursor: text;
}
article.edit-mode [contenteditable="true"]:focus {
  outline-style: solid;
  outline-width: 2px;
  outline-offset: 1px;
}
/* Metadata values wrap in a span so rich children (badges, links) stay
   intact. Inline-block lets the dashed outline hug the content, not the
   full cell width, and keeps adjacent rows from colliding. */
article.edit-mode .props-table .metavalue[contenteditable="true"] {
  display: inline-block;
  background: transparent;
}

/* Toast — bottom-centered, auto-dismiss */
.toast {
  position: fixed;
  bottom: var(--space-6);
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  display: flex; align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-success);
  color: var(--color-text-on-success);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease, transform 150ms ease;
  z-index: 2000;
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Empty state */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; text-align: center;
  padding: var(--space-12) var(--space-8);
  color: var(--color-text-secondary);
}
.empty-state-icon {
  margin-bottom: var(--space-4);
  color: var(--color-text-placeholder);
  opacity: 0.6;
  width: 56px; height: 56px;
  padding: var(--space-3);
  background: var(--color-bg-page);
  border-radius: 50%;
}
.empty-state-title {
  font-size: var(--text-heading-m); font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.empty-state-description {
  font-size: var(--text-body); color: var(--color-text-secondary);
  max-width: 360px; line-height: 1.6;
}

/* Prose */
.prose { max-width: var(--prose-max-width); }
.prose p { margin-bottom: var(--space-3); }

/* Definition locale selector */
.locale-select {
  display: inline-flex; gap: var(--space-1);
  margin-bottom: var(--space-2);
}
.locale-btn {
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-small); font-weight: 500;
  font-family: var(--font-sans);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-bg-page);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background 100ms ease, color 100ms ease;
}
.locale-btn.active {
  background: var(--color-border-subtle);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}
.locale-btn:hover:not(.active) { background: var(--color-bg-surface-hover); }

/* Search results page */
.search-group-label {
  font-size: var(--text-label); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: var(--space-2) 0;
  margin-top: var(--space-6);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-2);
}
.search-group-label:first-child, .list-panel > .search-group-label:first-child { margin-top: 0; }
.search-result-item {
  display: flex; align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 80ms ease;
}
.search-result-item:hover {
  background: var(--color-accent-bg-1);
}
.search-result-item:hover .search-result-name { color: var(--color-text-link); }
.search-result-icon { color: var(--color-text-secondary); margin-top: 2px; flex-shrink: 0; }
.search-result-name { font-size: var(--text-body); font-weight: 500; color: var(--color-text-primary); }
.search-result-type { font-size: var(--text-small); color: var(--color-text-secondary); }
.search-result-desc { font-size: var(--text-small); color: var(--color-text-secondary); margin-top: 2px; }

/* Focus */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--color-bg-accent-strong);
  outline-offset: 1px;
  box-shadow: var(--focus-ring-strong);
}

/* ============================================================
   Small-laptop responsive adjustments (≤1280px)
   ============================================================ */
@media (max-width: 1280px) {
  /* The duplicate prototype hint in the footer stays visible —
     dropping it from the header frees space for search + actions. */
  .prototype-hint { display: none; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  .loading-spinner { animation: none; border-top-color: var(--color-bg-accent-strong); }
}

/* Inline filter */
.inline-filter {
  margin-bottom: var(--space-4);
  position: relative;
}
.inline-filter input {
  width: 100%; max-width: 300px;
  height: 32px;
  padding: 0 var(--space-3) 0 32px;
  font-size: var(--text-body);
  font-family: var(--font-sans);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  outline: none;
  color: var(--color-text-primary);
}
.inline-filter input:focus {
  border-color: var(--color-border-accent);
  box-shadow: var(--focus-ring);
}
.inline-filter .search-icon {
  position: absolute; left: 8px; top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-placeholder);
  pointer-events: none;
}

/* Distribution list item */
.distribution-item {
  display: flex; align-items: flex-start;
  gap: var(--space-3); padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.distribution-item:last-child { border-bottom: none; }
.distribution-icon { color: var(--color-text-secondary); margin-top: 2px; flex-shrink: 0; }
.distribution-name { font-size: var(--text-body); font-weight: 500; }
.distribution-url { font-size: var(--text-small); color: var(--color-text-secondary); font-family: var(--font-mono); font-size: var(--text-mono); word-break: break-all; }
.distribution-meta { font-size: var(--text-small); color: var(--color-text-secondary); }

/* concept pill */
.concept-pill {
  display: inline-flex; align-items: center;
  gap: var(--space-1);
  padding: 3px 10px;
  font-size: var(--text-small); font-weight: 500;
  background: var(--color-bg-accent);
  color: var(--color-text-link);
  border-radius: 10px;
  cursor: pointer; text-decoration: none;
  margin-right: var(--space-1);
  margin-bottom: var(--space-1);
  transition: background 100ms ease;
}
.concept-pill:hover { background: var(--color-accent-bg-4); text-decoration: none; }

/* verified check */
.verified-check { color: var(--color-status-certified); }
.unverified { color: var(--color-text-placeholder); }

/* ============================================================
   Button Components (STYLEGUIDE §9.6)
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-body);
  font-weight: 500;
  font-family: var(--font-sans);
  border-radius: var(--radius-md);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
  text-decoration: none;
}
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn-primary {
  background: var(--color-bg-accent-strong);
  color: var(--color-text-on-accent);
}
.btn-primary:hover { background: var(--color-text-link-hover); }
.btn-primary:active { background: var(--color-text-link-active); }
.btn-secondary {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}
.btn-secondary:hover { background: var(--color-bg-surface); }
.btn-secondary:active { background: var(--color-bg-surface-hover); }
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-link);
  padding-left: 0;
  padding-right: 0;
}
.btn-ghost:hover { text-decoration: underline; }
.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-small);
}

/* ============================================================
   Loading Skeleton
   ============================================================ */
@keyframes shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
.skeleton-bar {
  background: linear-gradient(90deg, var(--color-bg-surface) 25%, var(--color-bg-surface-hover) 50%, var(--color-bg-surface) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.8s ease-in-out infinite;
  border-radius: var(--radius-md);
  height: 14px;
  margin-bottom: var(--space-2);
}
.skeleton-bar-lg { height: 24px; width: 40%; margin-bottom: var(--space-4); }
.skeleton-bar-md { height: 14px; width: 70%; }
.skeleton-bar-sm { height: 12px; width: 50%; }
.skeleton-nav-item {
  height: 36px;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-1);
  background: linear-gradient(90deg, var(--color-bg-surface-hover) 25%, var(--color-border-subtle) 50%, var(--color-bg-surface-hover) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}
.loading-skeleton-sidebar {
  padding: var(--space-4) var(--space-3);
}
.loading-skeleton-main {
  padding: var(--space-10) var(--content-padding);
}

/* ============================================================
   Locked Asset (Access-Restricted)
   ============================================================ */
.locked-name {
  color: var(--color-status-restricted);
}
.locked-icon {
  color: var(--color-status-restricted);
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1);
  vertical-align: middle;
}
.badge-warning {
  color: var(--color-warning);
  background: var(--color-warning-bg);
}
.locked-content-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-8);
  color: var(--color-text-secondary);
}
.locked-content-message i {
  margin-bottom: var(--space-4);
  color: var(--color-status-restricted);
}
.locked-content-message h3 {
  font-size: var(--text-heading-m);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.locked-content-message p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 400px;
  margin-bottom: var(--space-4);
}

/* ============================================================
   Translation Gap Indicator
   ============================================================ */
.translation-gap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: var(--space-2);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--color-warning);
  background: var(--color-warning-bg);
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-warning);
}

/* ============================================================
   Improved Lineage Tree
   ============================================================ */
.lineage-tree-visual {
  padding: var(--space-4) 0;
}
.lineage-section {
  margin-bottom: var(--space-6);
}
.lineage-section h4 {
  font-size: var(--text-heading-m);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--space-3);
}
.lineage-node-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-left: var(--space-4);
  border-left: 2px solid var(--color-border-default);
  position: relative;
  cursor: pointer;
  transition: background 80ms ease;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.lineage-node-item:hover {
  background: var(--color-bg-surface);
}
.lineage-node-item::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  width: 12px;
  height: 2px;
  background: var(--color-border-default);
}
.lineage-node-item:last-child {
  border-left-color: transparent;
}
.lineage-node-item:last-child::before {
  height: calc(50% + 2px);
  top: 0;
  border-left: 2px solid var(--color-border-default);
  border-bottom: 2px solid var(--color-border-default);
  width: 12px;
  background: none;
}
.lineage-node-icon {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}
.lineage-node-name {
  font-weight: 500;
  color: var(--color-text-link);
  font-size: var(--text-body);
}
.lineage-node-meta {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-left: var(--space-2);
}
.lineage-current-node {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-accent);
  border: 1px solid var(--color-border-accent);
  border-radius: var(--radius-lg);
  margin: var(--space-3) 0;
  font-weight: 500;
  color: var(--color-text-link);
}

/* ============================================================
   Search Dropdown
   ============================================================ */
.search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 150;
  padding: var(--space-2);
}
.search-dropdown[hidden] { display: none; }

.search-dropdown-cta {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--color-bg-accent);
  transition: background 100ms ease;
}
.search-dropdown-cta:hover,
.search-dropdown-cta.active,
.search-dropdown-cta.search-dropdown-item-active {
  background: var(--color-border-subtle);
}
.search-dropdown-cta-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--color-bg-accent-strong);
  color: var(--color-text-on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.search-dropdown-cta-title {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text-primary);
}
.search-dropdown-cta-subtitle {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-top: 2px;
  line-height: 1.4;
}

.search-dropdown-group {
  margin-top: var(--space-3);
}
.search-dropdown-group-label {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-1);
}
.search-dropdown-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 80ms ease;
}
.search-dropdown-item:hover,
.search-dropdown-item.active,
.search-dropdown-item-active {
  background: var(--color-bg-surface-hover);
}
.search-dropdown-item-icon {
  color: var(--color-text-secondary);
  margin-top: 2px;
  flex-shrink: 0;
}
.search-dropdown-item-name {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text-primary);
}
.search-dropdown-item-meta {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-top: 1px;
}
.search-dropdown-empty {
  padding: var(--space-5) var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  text-align: center;
}
.search-dropdown-footer {
  font-size: var(--text-small);
  color: var(--color-text-placeholder);
  padding: var(--space-2) var(--space-3) var(--space-1);
  border-top: 1px solid var(--color-border-subtle);
  margin-top: var(--space-2);
  text-align: center;
}
.search-dropdown-footer kbd {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  color: var(--color-text-secondary);
}

/* ============================================================
   Chat View (Placeholder)
   ============================================================ */
.chat-placeholder {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg);
  min-height: 480px;
}
.chat-placeholder-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-12) var(--space-8);
  color: var(--color-text-secondary);
}
.chat-placeholder-body > i {
  color: var(--color-text-placeholder);
  margin-bottom: var(--space-4);
  opacity: 0.6;
}
.chat-placeholder-title {
  font-size: var(--text-heading-m);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
}
.chat-placeholder-description {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  max-width: 480px;
  line-height: 1.6;
}
.chat-placeholder-input {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface-hover);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.chat-placeholder-input input {
  flex: 1;
  height: 38px;
  padding: 0 var(--space-3);
  font-size: var(--text-body);
  font-family: var(--font-sans);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  outline: none;
  color: var(--color-text-primary);
}
.chat-placeholder-input input::placeholder {
  color: var(--color-text-placeholder);
}

/* ============================================================
   Process Hub — Landscape Overview
   ============================================================ */
.landscape-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.landscape-title {
  font-size: var(--text-display);
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.landscape-subtitle {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin-top: var(--space-1);
}
.landscape-source {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.landscape-controls { display: flex; gap: var(--space-3); }

.nav-phase-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: var(--radius-sm);
  font-size: var(--text-label);
  font-weight: 600;
  color: #fff;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
body.sidebar-collapsed .nav-phase-badge { margin: 0 auto; }

.landscape-diagram {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.tool-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px;
  padding: 0 var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  color: var(--color-text-link);
  font-family: inherit;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.tool-btn:hover {
  background: var(--color-bg-accent);
  border-color: var(--color-border-subtle);
}

.landscape-canvas {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.landscape-diagram {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  margin-top: var(--space-4);
}
.landscape-error {
  padding: var(--space-8);
  color: var(--color-text-secondary);
  text-align: center;
  font-size: var(--text-body);
}
.landscape-error code {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  background: var(--color-bg-surface-hover);
  padding: 1px 4px;
  border-radius: 3px;
}

.area-card {
  background: transparent;
  padding: 0;
  display: flex; flex-direction: column;
  gap: var(--space-3);
}
.area-card-header {
  display: flex; align-items: baseline; gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
}
.area-card-number {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-placeholder);
  font-variant-numeric: tabular-nums;
  min-width: 20px;
}
.area-card-title {
  font-size: var(--text-heading-s);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-3);
}
.tile {
  display: flex; flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-left: 3px solid var(--area-accent, var(--color-border-strong));
  border-radius: var(--radius-md);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: var(--transition-hover);
  min-height: 72px;
}
.tile:hover { text-decoration: none; color: inherit; border-color: var(--color-border-strong); box-shadow: var(--shadow-hover); }
.tile:focus-visible { outline: 2px solid var(--color-bg-accent-strong); outline-offset: 1px; }
.tile.is-inactive {
  cursor: default;
  background: var(--color-bg-surface-hover);
  color: var(--color-text-secondary);
}
.tile.is-inactive:hover { box-shadow: none; border-color: var(--color-border-default); }
.tile[aria-disabled="true"] { pointer-events: none; }
.tile:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-hover);
}
.tile:focus-visible {
  outline: 2px solid var(--color-bg-accent-strong);
  outline-offset: 1px;
}
.tile.is-selected {
  border-color: var(--color-border-accent);
  border-width: 2px;
  padding: calc(var(--space-3) - 1px) calc(var(--space-2) - 1px) calc(var(--space-2) - 1px);
}
.tile.is-inactive {
  background: var(--color-bg-surface-hover);
  border-color: var(--color-border-subtle);
  opacity: 0.55;
}
.tile.is-inactive .tile-name { color: var(--color-text-secondary); }

.tile-number {
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--color-text-placeholder);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.tile-name {
  font-size: var(--text-body);
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
}
.tile.is-inactive .tile-name { color: var(--color-text-secondary); }
.tile-status {
  font-size: var(--text-label);
  color: var(--color-text-placeholder);
  margin-top: auto;
  padding-top: var(--space-1);
}

/* ============================================================
   Process Hub — Home / Collection / Process detail views
   ============================================================ */
.home-lead {
  max-width: var(--prose-max-width);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-6);
  font-size: var(--text-body);
}
.collection-description {
  max-width: var(--prose-max-width);
  color: var(--color-text-primary);
  margin: var(--space-3) 0 var(--space-2);
  line-height: 1.6;
}
.collection-meta {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}
.detail-label-inline {
  color: var(--color-text-placeholder);
  margin-right: var(--space-1);
}
.process-description {
  max-width: var(--prose-max-width);
  color: var(--color-text-secondary);
  margin: var(--space-2) 0 var(--space-4);
  line-height: 1.6;
}
.empty-state {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  background: var(--color-bg-surface);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-md);
  margin-top: var(--space-4);
}
.filter-chip-count {
  margin-left: auto;
  font-size: var(--text-label);
  color: var(--color-text-placeholder);
  font-variant-numeric: tabular-nums;
}

/* Let props-table accept <th scope="row"> as the label column */
.props-table th[scope="row"] {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-weight: 500;
  color: var(--color-text-placeholder);
  width: 200px;
  white-space: nowrap;
  font-size: var(--text-small);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}
.props-table tr:last-child th[scope="row"] { border-bottom: none; }

/* Tag chip used in metadata props-table */
.tag-chip {
  display: inline-block;
  padding: 1px 8px;
  margin-right: 4px;
  background: var(--color-bg-accent);
  color: var(--color-text-link);
  border-radius: 999px;
  font-size: var(--text-small);
  line-height: 1.6;
}
/* Wrapping row of chips (systems, workflow-view action buttons, etc.). Used
   to live as duplicated inline `style="display:flex;flex-wrap:wrap;gap:…"`. */
.chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* Body paragraph inside a .content-section — no top/bottom margin, generous
   line-height. Used for description blobs in the inspector metadata panes. */
.prose-tight {
  margin: 0;
  line-height: 1.6;
}

/* Bullet list used for Grundlagen in the Metadaten tab */
.bullet-list {
  margin: 0;
  padding-left: var(--space-5);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: 1.6;
}
.bullet-list li { margin-bottom: var(--space-1); }

/* Busy overlay shown during async exports */
.busy-overlay {
  position: fixed; inset: 0;
  background: rgba(255, 255, 255, 0.75);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3);
  z-index: 9000;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  backdrop-filter: blur(1px);
}

/* Disabled state for grouping-menu options (e.g. "BPMN herunterladen"
   when the process has no BPMN file attached). */
.grouping-option.disabled {
  color: var(--color-text-placeholder);
  cursor: not-allowed;
}
.grouping-option.disabled:hover { background: transparent; }

/* Tiny footnote line at the end of a .content-section */
.detail-footnote {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-small);
  color: var(--color-text-placeholder);
}
.detail-footnote code {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  background: var(--color-bg-surface-hover);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Small helper tweak for the process-view tab-bar so it sits under the
   description without collapsing margins. */
.process-view .tab-bar { margin-top: var(--space-4); }

/* ============================================================
   Process Hub — BPMN viewer
   ============================================================ */
.bpmn-container {
  position: relative;
  /* Breakdown of what's above the viewer on the process page:
     header 56 + content top padding 32 + breadcrumb ~24 + title-block ~56
     + tab-bar ~48 + footer 32 + buffer 20 ≈ 268. Subtitle/description
     paragraphs were removed so we gained back ~40 px of canvas. */
  height: calc(100vh - var(--header-height) - 220px);
  min-height: 420px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.bpmn-canvas {
  position: absolute;
  inset: 0;
}
.bpmn-container.is-fullscreen {
  height: 100vh;
  min-height: 100vh;
  border-radius: 0;
  border: none;
  box-shadow: none;
}
.bpmn-container .djs-container {
  background: var(--color-bg-surface);
}
/* Custom selection marker. bpmn-js NavigatedViewer has no 'selection'
   service (that's Modeler-only), so we paint the outline ourselves via
   canvas.addMarker('ph-selected-shape'). The selector targets the first
   shape-visual rect/circle/path under .djs-visual. Works for tasks,
   events and gateways; edges get a recoloured stroke. */
.djs-element.ph-selected-shape .djs-visual > :nth-child(1) {
  stroke: var(--color-bg-accent-strong) !important;
  stroke-width: 3px !important;
}
.djs-connection.ph-selected-shape .djs-visual > path {
  stroke: var(--color-bg-accent-strong) !important;
  stroke-width: 2.5px !important;
}
.bpmn-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}
.bpmn-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}
.bpmn-empty code {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  background: var(--color-bg-surface-hover);
  padding: 1px 4px;
  border-radius: 3px;
}

/* Floating toolbar overlay on the BPMN viewer: vertical stack, top-right. */
.bpmn-toolbar {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px;
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}
.bpmn-toolbar .tool-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  justify-content: center;
  gap: 0;
  color: var(--color-text-secondary);
}
.bpmn-toolbar .tool-btn:hover {
  background: var(--color-bg-surface-hover);
  border-color: transparent;
  color: var(--color-text-primary);
}
.bpmn-toolbar-sep {
  height: 1px;
  margin: 2px 4px;
  background: var(--color-border-subtle);
}

/* ============================================================
   Process Hub — Recents list
   ============================================================ */
.recents-list {
  list-style: none;
  display: flex; flex-direction: column;
  gap: var(--space-2);
  max-width: 640px;
}
.recents-list-item {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  text-decoration: none;
  transition: var(--transition-hover);
}
.recents-list-item:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-hover);
  text-decoration: none;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .tile-grid { grid-template-columns: 1fr; }
  .landscape-canvas { grid-template-columns: 1fr; }
}

/* ============================================================
   Title-block action icons (info, comment, edit, print, share)
   ============================================================ */
.title-block-action-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.title-block-action-btn:hover {
  background: var(--color-bg-surface-hover);
  color: var(--color-text-primary);
  border-color: var(--color-border-subtle);
}
.title-block-action-btn.is-active {
  background: var(--color-bg-accent);
  color: var(--color-bg-accent-strong);
  border-color: var(--color-bg-accent);
}
.title-block-actions-sep {
  width: 1px;
  height: 20px;
  background: var(--color-border-subtle);
  margin: 0 var(--space-1);
}

/* ============================================================
   Inspector panel (right column)
   ============================================================ */
:root { --inspector-width: 340px; }

.inspector-panel {
  position: fixed;
  top: var(--header-height);
  right: 0;
  width: var(--inspector-width);
  /* Match the sidebar: from header bottom down to app-footer top. */
  height: calc(100vh - var(--header-height) - 32px);
  background: var(--color-bg-surface);
  border-left: 1px solid var(--color-border-subtle);
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.03);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.inspector-panel[hidden] { display: none; }

/* Push main-content when inspector is open so they never overlap. */
body.inspector-open .main-content {
  margin-right: var(--inspector-width);
}
.main-content { transition: margin-right 180ms ease, margin-left 180ms ease; }
.inspector-panel { transition: width 180ms ease; }

/* Drag handle on the inspector's left edge — mirror of .sidebar-resize-handle.
   Visible only when the inspector is open (CSS-hidden otherwise). */
.inspector-resize-handle {
  position: fixed;
  top: var(--header-height);
  right: var(--inspector-width);
  transform: translateX(3px);
  width: 6px;
  bottom: 32px;  /* above app-footer */
  z-index: 55;
  cursor: col-resize;
  background: transparent;
  transition: background 120ms ease;
}
.inspector-resize-handle:hover,
body.inspector-resizing .inspector-resize-handle {
  background: var(--color-bg-accent);
}
body:not(.inspector-open) .inspector-resize-handle { display: none; }
/* Kill the width transition during drag so the panel tracks the cursor 1:1. */
body.inspector-resizing {
  cursor: col-resize !important;
  user-select: none;
}
body.inspector-resizing * { cursor: col-resize !important; }
body.inspector-resizing .inspector-panel,
body.inspector-resizing .main-content { transition: none !important; }

/* Inspector — header */
.inspector-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}
.inspector-header-text { flex: 1; min-width: 0; }
.inspector-header-title {
  font-size: var(--text-heading-s);
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspector-header-sub {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inspector-close {
  flex-shrink: 0;
  width: 26px; height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 120ms ease, color 120ms ease;
}
.inspector-close:hover {
  background: var(--color-bg-surface-hover);
  color: var(--color-text-primary);
}

/* Inspector — tabs (Attribute / Kommentare) */
.inspector-tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}
.inspector-tab {
  flex: 1;
  padding: var(--space-3) var(--space-2);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.inspector-tab:hover { color: var(--color-text-primary); }
.inspector-tab.active {
  color: var(--color-bg-accent-strong);
  border-bottom-color: var(--color-bg-accent-strong);
}

/* Inspector — body (scroll area) */
.inspector-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
}
.inspector-section-title {
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-3);
}
.inspector-section-title code {
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  background: var(--color-bg-surface-hover);
  padding: 1px 4px;
  border-radius: 3px;
  text-transform: none;
  letter-spacing: 0;
}

/* Inspector — key/value list (vertical: label above value).
   Horizontal two-column layout wrapped every word in a narrow panel; a
   stacked layout reads better and scales with resize. */
.inspector-kv-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.inspector-kv {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.inspector-kv:last-child { border-bottom: none; }
.inspector-kv-k {
  color: var(--color-text-secondary);
  font-size: var(--text-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.inspector-kv-v {
  color: var(--color-text-primary);
  font-size: var(--text-body);
  word-break: break-word;
  white-space: pre-wrap;
}

/* Inspector — empty state */
.inspector-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-3);
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}
.inspector-empty i { color: var(--color-text-placeholder); }
.inspector-empty-muted {
  padding: var(--space-4) 0;
  color: var(--color-text-placeholder);
  font-size: var(--text-small);
  text-align: center;
}

/* Inspector — comments */
.inspector-comments {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.inspector-comment {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg-surface);
}
.inspector-comment-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}
.inspector-comment-author {
  font-weight: 600;
  color: var(--color-text-primary);
}
.inspector-comment-time { flex: 1; }
.inspector-comment-del {
  width: 22px; height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-placeholder);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.inspector-comment-del:hover {
  background: var(--color-bg-surface-hover);
  color: var(--color-error);
}
.inspector-comment-body {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Inspector — add-comment form */
.inspector-comment-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-3);
}
.inspector-comment-input {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 120ms ease;
}
.inspector-comment-input:focus {
  border-color: var(--color-border-accent);
}
.inspector-comment-form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2);
}
.inspector-comment-submit {
  padding: 6px var(--space-4);
  font-size: var(--text-small);
  background: var(--color-bg-accent-strong);
  color: var(--color-text-on-accent);
  border: 1px solid var(--color-bg-accent-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-weight: 500;
  transition: background 120ms ease;
}
.inspector-comment-submit:hover { background: var(--color-text-link-hover); }
.inspector-comment-submit:disabled {
  background: var(--color-border-default);
  border-color: var(--color-border-default);
  cursor: not-allowed;
}

/* Inspector — metadata wrapper reuses .content-section + .props-table
   markup from the old Metadaten tab, but panel widths (~340 px) require
   tighter padding and a narrower label column. */
.inspector-metadata .content-section {
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-md);
}
.inspector-metadata .content-section + .content-section {
  margin-top: var(--space-3);
}
.inspector-metadata .content-section:hover {
  /* The hover border-color flip is page-scale UX; in a persistent inspector
     it turns into noise as the cursor passes over each section. */
  border-color: var(--color-border-default);
}
.inspector-metadata .section-label {
  font-size: var(--text-small);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
}
/* Stacked layout for props-tables inside the inspector: the <table> rows
   render as blocks so label + value stack vertically. This beats cramming
   both into a 340-ish-wide column where the value shreds into one word
   per line. */
.inspector-metadata .props-table,
.inspector-metadata .props-table tbody,
.inspector-metadata .props-table tr,
.inspector-metadata .props-table td,
.inspector-metadata .props-table th {
  display: block;
  width: auto;
}
.inspector-metadata .props-table tr {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.inspector-metadata .props-table tr:last-child { border-bottom: none; }
.inspector-metadata .props-table td,
.inspector-metadata .props-table th {
  border-bottom: none;
  padding: 0;
}
.inspector-metadata .props-table td:first-child,
.inspector-metadata .props-table th[scope="row"] {
  width: auto !important;
  white-space: normal;
  padding: 0 0 2px 0;
  font-size: var(--text-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  text-align: left;
}
.inspector-metadata .props-table td:last-child {
  font-size: var(--text-body);
  color: var(--color-text-primary);
  word-break: break-word;
}
.inspector-metadata .bullet-list { padding-left: var(--space-4); margin: 0; }

/* Title-block kebab: reuses .grouping-dropdown/menu positioning. The wrap
   keeps the absolutely-positioned menu anchored to the kebab button. */
.title-block-more-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.title-block-more-menu {
  /* Inherits display:none from .grouping-menu; .open toggles to block. */
  min-width: 200px;
  z-index: 40;  /* above tab-bar's position:relative at its default z */
}
.grouping-menu-section-label {
  padding: var(--space-2) var(--space-3) 4px;
  font-size: var(--text-label);
  font-weight: 600;
  color: var(--color-text-placeholder);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Toast region (share link confirmation, etc.) */
.toast-region {
  position: fixed;
  bottom: 48px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--color-bg-overlay);
  color: #fff;
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
  box-shadow: var(--shadow-md);
  animation: toastIn 160ms ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive: below 1100 px, inspector becomes an overlay so the
   main-content isn't squeezed under ~580 px. */
@media (max-width: 1100px) {
  body.inspector-open .main-content { margin-right: 0; }
  .inspector-panel { box-shadow: -4px 0 16px rgba(0, 0, 0, 0.08); }
}
@media (max-width: 720px) {
  :root { --inspector-width: 100vw; }
  .inspector-panel { border-left: none; }
}

/* Print: only the main-content flows onto paper. */
@media print {
  .app-header, .app-footer,
  .sidebar, .sidebar-resize-handle,
  .inspector-panel,
  .title-block-actions,
  .tab-bar,
  .bpmn-toolbar {
    display: none !important;
  }
  body, .app-body { background: #fff !important; }
  .main-content {
    margin: 0 !important;
    padding: 16px !important;
    overflow: visible !important;
  }
  .bpmn-container {
    height: auto !important;
    min-height: 420px !important;
    box-shadow: none !important;
    border: 1px solid #ddd !important;
    page-break-inside: avoid;
  }
}