@import "./vendor/ui-theme/index.css";

:root {
  --muted-surface: var(--muted);
  --danger: var(--destructive);
  --bg: var(--background);
  --panel: var(--surface);
  --panel2: var(--surface-subtle);
  --text: var(--foreground);
  --line: var(--border);
  --shadow: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-width: 320px;
  margin: 0;
  background: var(--background) !important;
  color: var(--foreground) !important;
  font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
.dashboard-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 50;
  display: flex;
  width: 240px;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--background);
  overflow-y: auto;
  transition: transform 160ms ease;
}
.dashboard-sidebar__nav { display: grid; gap: 3px; padding: 10px 8px; }
.dashboard-sidebar__nav a {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 2px);
  color: var(--muted-foreground);
  text-decoration: none;
  white-space: nowrap;
}
.dashboard-sidebar__nav a:hover { background: var(--surface-subtle); color: var(--foreground); }
.dashboard-sidebar__nav a[aria-current] { background: var(--surface-subtle); color: var(--foreground); font-weight: 650; }
.dashboard-sidebar svg, .dashboard-menu-button svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-sidebar__submenu { display: grid; gap: 2px; margin: -1px 0 5px 18px; padding-left: 10px; border-left: 1px solid var(--border); }
.dashboard-sidebar__submenu a { min-height: 32px; padding-block: 6px; font-size: 13px; }
.dashboard-sidebar__submenu svg { width: 16px; height: 16px; }
.dashboard-sidebar__status { margin-left: auto; }
.dashboard-sidebar__lock { display: inline-flex; color: var(--muted-foreground); }
.dashboard-sidebar__lock svg { width: 14px; height: 14px; }
.dashboard-sidebar__badge { padding: 2px 6px; border: 1px solid var(--border); border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.dashboard-menu-button {
  display: inline-flex;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  background: var(--surface);
  color: var(--foreground);
}
.dashboard-menu-button { display: none; }
.dashboard-sidebar__backdrop { display: none; }
body.has-dashboard-sidebar > .app-shell { margin-left: 240px; }
body.has-dashboard-sidebar > .shell { width: min(88rem, calc(100% - 288px)) !important; margin-left: calc(240px + 24px); margin-right: 24px; }
body.has-dashboard-sidebar .primary-nav { display: none !important; }
a { color: inherit; }
button, input, select { font: inherit; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.ui-topbar-link { display: inline-flex; min-height: 36px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); color: var(--foreground); font-size: 13px; font-weight: 600; text-decoration: none; }
.ui-topbar-link:hover { background: var(--surface-subtle); }
.ui-topbar-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-lang] { display: none; }
body.lang-en [data-lang="en"],
body.lang-de [data-lang="de"] { display: block; }

.shell, .wrap {
  width: min(88rem, calc(100% - 48px)) !important;
  margin-inline: auto;
}
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0 !important;
  border-bottom: 1px solid var(--border);
  background: var(--background) !important;
  backdrop-filter: none !important;
}
.brand { min-width: 0; font-size: 14px; font-weight: 650 !important; }
.mark {
  width: 17px !important;
  height: 17px !important;
  border: 2px solid var(--primary);
  border-radius: 2px !important;
  background: transparent !important;
  box-shadow: none !important;
}
.navlinks, .nav > div { display: flex; align-items: center; gap: 6px; }
.pill, .cta, .control, .nav button, .nav select {
  min-height: 36px;
  border: 1px solid var(--input) !important;
  border-radius: calc(var(--radius) - 2px) !important;
  background: var(--surface) !important;
  color: var(--foreground) !important;
  padding: 7px 10px !important;
  box-shadow: none !important;
}
.pill:hover, .cta:hover, .control:hover, .nav button:hover, .nav select:hover {
  background: var(--surface-subtle) !important;
}
.navlinks .pill[aria-current="page"] {
  background: var(--surface-subtle) !important;
  font-weight: 650;
}

.ui-theme-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 2px !important;
  min-height: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-subtle);
  padding: 2px;
}
.ui-theme-toggle button {
  min-height: 30px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 4px 8px !important;
  color: var(--muted-foreground) !important;
  font-size: 12px;
}
.ui-theme-toggle button[aria-pressed="true"] {
  background: var(--background) !important;
  color: var(--foreground) !important;
}
.ui-theme-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Compact application density for the secondary IPM routes. */
.ipm-tables-page .hero,
.ipm-knowledge-page .hero { padding: 28px 0 20px !important; }
.ipm-tables-page .hero h1,
.ipm-knowledge-page .hero h1 { max-width: 56rem !important; margin: 6px 0 8px !important; font-size: clamp(24px, 3vw, 30px) !important; line-height: 1.15 !important; letter-spacing: -.025em !important; }
.ipm-tables-page .hero p,
.ipm-knowledge-page .hero p { max-width: 50rem !important; font-size: 14px !important; line-height: 1.55 !important; }
.ipm-tables-page .toolbar { top: 68px !important; border-radius: 8px !important; padding: 8px !important; }
.ipm-tables-page .toolbar .control { min-height: 36px !important; font-size: 13px !important; }
.ipm-tables-page .cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 8px !important; margin: 16px 0 !important; }
.ipm-tables-page .table-card { min-height: 64px; border-radius: 8px !important; padding: 10px 12px !important; }
.ipm-tables-page .table-card strong { font-size: 13px !important; }
.ipm-tables-page .panel { border-radius: 8px !important; }
.ipm-tables-page .panel-head { padding: 14px 16px !important; }
.ipm-tables-page .panel-head h2 { font-size: 17px !important; }
.ipm-knowledge-page .grid { margin-top: 18px !important; }
.ipm-knowledge-page .grid .card { padding: 14px 16px !important; }

/* Knowledge articles follow the main site's ruled editorial composition. */
.ipm-knowledge-page .article-editorial { gap: 48px !important; background: transparent !important; padding-top: 24px !important; }
.ipm-knowledge-page .article-editorial .content { min-width: 0; }
.ipm-knowledge-page .article-section { padding: 28px 0; border-top: 1px solid var(--border); }
.ipm-knowledge-page .article-section:first-child { border-top: 0; padding-top: 0; }
.ipm-knowledge-page .article-section h2 { margin: 0 0 10px !important; font-size: clamp(20px, 2.4vw, 26px) !important; }
.ipm-knowledge-page .article-section p,
.ipm-knowledge-page .article-section li { max-width: 48rem; font-size: 14px !important; line-height: 1.65 !important; }
.ipm-knowledge-page .article-section ul { margin: 14px 0 0; padding-left: 20px; }
.ipm-knowledge-page .article-section .note { margin-top: 20px; border-radius: 8px !important; background: var(--surface-subtle) !important; }

.bpmn-section { margin: 0; padding: 32px 0; border-top: 1px solid var(--border); }
.bpmn-header { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 18px; }
.bpmn-header h2 { margin: 6px 0 0 !important; font-size: clamp(20px, 2.4vw, 26px) !important; }
.bpmn-header > p { margin: 0 !important; color: var(--muted-foreground); font-size: 12px !important; line-height: 1.6 !important; }
.bpmn-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); scrollbar-gutter: stable; }
.bpmn-diagram { display: block; min-width: 850px; width: 100%; height: auto; color: var(--foreground); }
.bpmn-pool { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; }
.bpmn-lane-label { fill: var(--surface-subtle); stroke: var(--border); stroke-width: 1.5; }
.bpmn-lane-text { fill: var(--muted-foreground); font: 600 12px Inter, sans-serif; letter-spacing: .06em; text-anchor: middle; text-transform: uppercase; }
.bpmn-event, .bpmn-task, .bpmn-gateway { fill: var(--background); stroke: var(--foreground); stroke-width: 1.6; }
.bpmn-start { stroke-width: 1.8; }
.bpmn-end { stroke-width: 2.8; }
.bpmn-end-inner { fill: none; stroke-width: 1.3; }
.bpmn-task { fill: var(--surface); }
.bpmn-revision { fill: var(--surface-subtle); }
.bpmn-gateway { fill: color-mix(in oklab, var(--primary) 7%, var(--surface)); }
.bpmn-gateway-mark { fill: none; stroke: var(--foreground); stroke-width: 1.7; }
.bpmn-sequence { fill: none; stroke: var(--muted-foreground); stroke-width: 1.5; marker-end: url(#sequence-arrow); }
.bpmn-diagram marker path { fill: var(--muted-foreground); }
.bpmn-task-text { fill: var(--foreground); font: 600 13px Inter, sans-serif; text-anchor: middle; }
.bpmn-caption { fill: var(--muted-foreground); font: 11px Inter, sans-serif; text-anchor: middle; }
.bpmn-flow-label { fill: var(--primary); font: 650 11px Inter, sans-serif; }
.bpmn-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: var(--muted-foreground); font-size: 10px; }
.bpmn-legend span { display: inline-flex; align-items: center; gap: 6px; }
.bpmn-legend i { display: inline-block; width: 14px; height: 14px; border: 1.5px solid var(--foreground); }
.bpmn-legend .legend-event { border-radius: 50%; }
.bpmn-legend .legend-task { width: 18px; border-radius: 4px; }
.bpmn-legend .legend-gateway { width: 11px; height: 11px; transform: rotate(45deg); }
.bpmn-legend .legend-flow { width: 20px; height: 0; border-width: 1px 0 0; }

@media (max-width: 760px) {
  .ipm-tables-page .cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .bpmn-header { grid-template-columns: 1fr; gap: 8px; }
}

.hero {
  display: block;
  padding: 42px 0 28px !important;
  border-bottom: 1px solid var(--border);
}
.hero > * { min-width: 0; }
.hero h1 {
  max-width: 50rem !important;
  margin: 8px 0 10px !important;
  color: var(--foreground) !important;
  font-size: clamp(30px, 4vw, 48px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.035em !important;
  overflow-wrap: anywhere;
}
.hero .lead, .hero p { max-width: 52rem; margin: 0; color: var(--muted-foreground) !important; font-size: 16px !important; }
.kicker, .eyebrow {
  display: block !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  color: var(--muted-foreground) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px !important;
  margin: 24px 0 56px !important;
  border: 0;
}
.card, .article, .side, .next a, .flow, .note, .toolbar, .table-card, .panel {
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}
.grid .card {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 20px;
  grid-template-rows: auto auto;
  column-gap: 14px;
  align-content: start;
  min-height: 0 !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 18px !important;
  color: var(--foreground) !important;
  text-decoration: none !important;
  transition: background-color 120ms ease;
}
.grid .card::after { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--muted-foreground); content: "→"; font-size: 17px; }
.grid .card:hover { transform: none !important; background: var(--surface-subtle) !important; }
.grid .card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.grid .card .num { grid-column: 1; grid-row: 1 / span 2; padding-top: 2px; font-size: 11px; font-weight: 650; letter-spacing: 0.04em; text-decoration: none !important; }
.grid .card h2 { grid-column: 2; grid-row: 1; margin: 0 0 5px !important; font-size: 17px; line-height: 1.3; text-decoration: none !important; }
.grid .card p { grid-column: 2; grid-row: 2; margin: 0 !important; font-size: 13px; line-height: 1.5; text-decoration: none !important; }
.card h2, .card h3 { margin: 8px 0 6px !important; font-size: 18px; }
.card p, .content p, .content li, .article p, .article li { color: var(--muted-foreground) !important; }
.card .num, .card small { color: var(--primary) !important; }

.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem) !important;
  align-items: start;
  gap: 40px !important;
  padding: 32px 0 64px !important;
  border: 0 !important;
}
.content { max-width: none; }
.content h2, .article h2 { margin: 36px 0 12px !important; font-size: clamp(23px, 3vw, 32px) !important; line-height: 1.15 !important; }
.content h3 { margin: 26px 0 8px !important; }
.content strong, .article strong { color: var(--foreground) !important; }
.flow { display: flex; align-items: stretch; gap: 0 !important; padding: 0 !important; overflow: hidden; }
.flow b { flex: 1 1 8rem; border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 12px !important; color: var(--foreground); }
.flow span { color: var(--muted-foreground) !important; }
.path {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px !important;
  margin: 20px 0 0 !important;
  padding: 12px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-subtle) !important;
  overflow-wrap: anywhere;
}
.path b { border: 0 !important; border-radius: 0 !important; background: transparent !important; padding: 3px !important; }
.path i { color: var(--muted-foreground); font-style: normal; }
.note { border: 1px solid var(--border) !important; padding: 14px 16px !important; }
.side { position: sticky; top: 72px !important; padding: 16px !important; }
.side h3 { margin: 0 0 8px; font-size: 14px; }
.side a { display: block; padding: 8px 0; border-top: 1px solid var(--border); }
.side a { color: var(--muted-foreground) !important; }
.side a:hover { color: var(--foreground) !important; }
.next { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; margin-top: 36px !important; }
.next a { padding: 14px !important; overflow-wrap: anywhere; }
.footer { border-color: var(--border) !important; color: var(--muted-foreground) !important; }

.toolbar {
  top: 68px !important;
  padding: 10px !important;
  backdrop-filter: none !important;
}
.cards { gap: 8px !important; }
.table-card { padding: 12px !important; text-align: left; }
.table-card[aria-selected="true"] { border-color: var(--primary) !important; background: var(--accent) !important; }
.workspace { gap: 12px !important; }
.panel { overflow: hidden; }
.panel-head { border-color: var(--border) !important; }
.table-wrap { scrollbar-gutter: stable; }
table { color: var(--foreground); }
th { background: var(--surface-subtle) !important; color: var(--muted-foreground) !important; }
th, td { border-color: var(--border) !important; }
tr:hover td { background: var(--surface-subtle) !important; }
td:first-child { color: var(--foreground) !important; }
.detail .type { color: var(--primary) !important; }
.detail dt, .empty { color: var(--muted-foreground) !important; }
.empty-state {
  padding: 32px 16px;
  color: var(--muted-foreground);
  text-align: center;
}

/* Runtime enhancements keep the graph behaviour; their surrounding UI stays restrained. */
.insight-card { min-height: 0 !important; }
.insight-card:hover { transform: none !important; box-shadow: none !important; }
.galaxy-badge {
  border-color: var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface-elevated) !important;
  color: var(--foreground) !important;
  backdrop-filter: none !important;
}
body.galaxy-active .graph-shell { box-shadow: none !important; }

@media (max-width: 900px) {
  .dashboard-sidebar { width: min(280px, calc(100vw - 48px)); transform: translateX(-100%); box-shadow: none; }
  .dashboard-menu-button { display: inline-flex; }
  .dashboard-sidebar__backdrop { position: fixed; inset: 0; z-index: 45; width: 100%; border: 0; background: oklch(0 0 0 / 45%); }
  body.dashboard-sidebar-mobile-open { overflow: hidden; }
  body.dashboard-sidebar-mobile-open .dashboard-sidebar { transform: translateX(0); }
  body.dashboard-sidebar-mobile-open .dashboard-sidebar__backdrop { display: block; }
  body.has-dashboard-sidebar > .app-shell { margin-left: 0; }
  body.has-dashboard-sidebar > .shell { width: min(100% - 32px, 88rem) !important; margin-inline: auto; }
  .shell, .wrap { width: min(100% - 32px, 88rem) !important; }
  .article { grid-template-columns: 1fr !important; gap: 20px !important; }
  .side { position: static !important; order: 0 !important; }
  .workspace { grid-template-columns: 1fr !important; }
}

@media (max-width: 1100px) {
  .grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 600px) {
  .shell, .wrap { width: min(100% - 24px, 88rem) !important; }
  .nav { align-items: flex-start; flex-wrap: wrap; }
  .navlinks, .nav > div { max-width: 100%; flex-wrap: wrap; }
  .hero { padding-top: 28px !important; }
  .hero h1 { font-size: clamp(28px, 9vw, 38px) !important; }
  .grid { grid-template-columns: 1fr !important; }
  .grid .card { grid-template-columns: 46px minmax(0, 1fr) 18px; padding: 16px 14px !important; }
  .flow { flex-direction: column; align-items: stretch; }
  .flow span { align-self: center; transform: rotate(90deg); }
  .next { grid-template-columns: 1fr; }
  .ui-theme-toggle { order: 10; }
  .ui-theme-toggle button { padding-inline: 6px !important; font-size: 11px; }
  .toolbar { position: static !important; }
  .toolbar input { min-width: 100% !important; }
  .cards { grid-template-columns: 1fr 1fr !important; }
  .workspace { margin-bottom: 40px !important; }
  .panel-head { align-items: flex-start !important; flex-direction: column; }
  .detail dl { grid-template-columns: minmax(88px, 0.35fr) minmax(0, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}