:root {
  --text: #132033;
  --muted: #60708a;
  --line: #d9e3f2;
  --blue: #2855d9;
  --green: #0f766e;
  --amber: #9a5b00;
  --panel: #ffffff;
  --surface: #f5f8fc;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 1120px;
  color: var(--text);
  font-family: "Segoe UI", Arial, sans-serif;
  background: var(--surface);
}

html {
  scroll-padding-top: 108px;
}

body.login-gate {
  min-width: 760px;
}

body.login-gate .app-header,
body.login-gate .app-shell > section:not(#loginPanel) {
  display: none !important;
}

body.login-gate .app-shell {
  min-height: 100vh;
  align-content: center;
  justify-items: center;
  padding: 40px 24px;
}

body.login-gate #loginPanel {
  width: min(920px, calc(100vw - 48px));
}

body.login-gate .login-form {
  grid-template-columns: 1fr 1fr;
}

body.login-gate .login-actions {
  align-self: end;
}

body.app-authenticated #loginPanel {
  border-left-color: var(--blue);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.app-header h1 {
  margin: 0;
  font-size: 24px;
}

.app-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.app-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 20px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  color: #fff;
  background: #dc2626;
  font-size: 12px;
  line-height: 1;
}

.is-hidden {
  display: none !important;
}

a,
button {
  color: var(--blue);
}

button,
.app-header a {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #b9c8e4;
  border-radius: 6px;
  background: #fff;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

button[type="submit"] {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.app-shell {
  display: grid;
  gap: 16px;
  padding: 18px 24px 32px;
}

.app-shell > section {
  scroll-margin-top: 108px;
}

.login-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border: 1px solid #c8d7ee;
  border-left: 4px solid var(--green);
  border-radius: 8px;
  background: #ffffff;
}

.login-heading {
  display: grid;
  gap: 2px;
  justify-items: start;
}

.login-panel span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.login-panel h2 {
  margin: 4px 0;
  font-size: 20px;
}

.login-panel p {
  margin: 0;
  color: var(--muted);
}

.login-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.15fr) minmax(180px, 0.75fr) minmax(220px, 0.85fr) 190px;
  gap: 12px;
  align-items: start;
}

.login-field-card {
  display: grid;
  gap: 8px;
}

.login-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.login-field-detail {
  display: grid;
  gap: 6px;
}

.login-field-detail > span {
  padding: 5px 8px;
  border: 1px solid #d6e1f1;
  border-radius: 6px;
  background: #fbfdff;
  color: var(--text);
  font-size: 12px;
  text-transform: none;
}

.login-access {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}

.login-access span,
.login-access small {
  padding: 5px 8px;
  border: 1px solid #d6e1f1;
  border-radius: 6px;
  background: #fbfdff;
  color: var(--text);
  font-size: 12px;
  text-transform: none;
}

.login-result {
  padding: 9px 11px;
  border: 1px solid #d6e1f1;
  border-radius: 6px;
  background: #f8fafc;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.login-result.success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.login-result.error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #991b1b;
}

.login-result.pending {
  border-color: #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
}

.live-notification-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 50;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 44px));
  padding: 14px;
  border: 1px solid #bfd0ed;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
}

.live-notification-toast strong {
  font-size: 15px;
}

.live-notification-toast span,
.live-notification-toast small {
  color: var(--muted);
  line-height: 1.35;
}

.live-notification-toast button {
  justify-self: start;
}

.login-actions {
  display: grid;
  gap: 8px;
}

.login-actions button {
  width: 100%;
}

.application-menu {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid #c8d7ee;
  border-radius: 8px;
  background: #ffffff;
}

.menu-intro {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 4px 8px;
}

.menu-intro span,
.menu-card span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.menu-intro h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.22;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.menu-card {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 14px;
  border: 1px solid #d6e1f1;
  border-radius: 8px;
  color: var(--text);
  background: #fbfdff;
  text-decoration: none;
}

.menu-card:hover {
  border-color: var(--blue);
  background: #f4f7ff;
}

.menu-card.primary {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.menu-card.primary span,
.menu-card.primary small {
  color: #dce6ff;
}

.menu-card.muted {
  background: #f8fafc;
}

.menu-card strong {
  font-size: 16px;
}

.menu-card small {
  color: var(--muted);
  line-height: 1.35;
}

.toolbar-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.metric,
.order-list-panel,
.detail-panel,
.form-panel,
.notification-panel,
.position-panel,
.ui-api-panel,
.demo-control-panel,
.insight-panel,
.performance-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.metric {
  padding: 14px;
}

.ui-api-panel {
  display: grid;
  gap: 0;
}

.supporting-panel {
  order: 20;
}

.technical-support {
  display: none;
}

body.show-technical-support .technical-support {
  display: grid;
}

body.show-technical-support .form-definition-summary.technical-support {
  display: grid;
}

.component-directory-page {
  gap: 16px;
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

.component-pair-grid {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.component-pair-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(160px, 220px) minmax(160px, 220px);
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid #d6e1f1;
  border-radius: 8px;
  background: #fbfdff;
}

.component-pair-row span,
.component-pair-row small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.component-pair-row strong {
  display: block;
  margin-top: 4px;
}

.component-pair-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #b9c8e4;
  border-radius: 6px;
  background: #fff;
  color: var(--blue);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.component-pair-action:hover {
  border-color: var(--blue);
  background: #f4f7ff;
}

.ui-api-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
}

.ui-api-grid article {
  min-height: 76px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.ui-api-grid span,
.ui-api-grid small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.ui-api-grid strong {
  display: block;
  margin: 5px 0;
  overflow-wrap: anywhere;
  font-size: 17px;
}

.ui-api-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 14px 12px;
}

.ui-api-links code {
  padding: 6px 8px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  color: #334155;
  background: #f8fbff;
  font-size: 12px;
}

.metric span,
.panel-heading span,
label {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.form-definition-summary {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.form-definition-summary span,
.form-definition-summary small {
  color: var(--muted);
  font-size: 12px;
}

.metric strong {
  display: block;
  margin-top: 6px;
  font-size: 26px;
}

.sales-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(460px, 0.85fr);
  gap: 16px;
  align-items: start;
}

.order-entry-workbench {
  grid-template-columns: minmax(0, 1fr);
}

.application-browser {
  display: grid;
  gap: 0;
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.app-menu-buttons {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.app-menu-buttons button {
  min-width: 132px;
}

.app-menu-buttons button.active {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

.app-menu-buttons button.active-workspace-group {
  color: var(--blue);
  border-color: var(--blue);
  background: #eef5ff;
}

.app-menu-buttons button.active.active-workspace-group {
  color: #fff;
  background: var(--blue);
}

.order-work-status {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.order-work-status article {
  min-height: 68px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.order-work-status span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.order-work-status strong {
  display: block;
  margin-top: 5px;
  font-size: 22px;
}

.order-work-status small {
  color: var(--muted);
}

.browser-list-stack {
  display: grid;
  gap: 10px;
}

.browser-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
}

.browser-action-bar h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.browser-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.browser-action-bar button {
  min-height: 38px;
  padding: 8px 14px;
}

.browser-action-bar button:first-child {
  color: #fff;
  border-color: var(--green);
  background: var(--green);
}

.browser-layout {
  display: grid;
  grid-template-columns: minmax(760px, 1.6fr) minmax(320px, 0.55fr);
  gap: 12px;
  align-items: start;
  padding: 12px 14px 14px;
}

.browser-layout.orders-browser-layout {
  grid-template-columns: minmax(0, 1fr);
}

.browser-layout.full-browser-layout,
.browser-layout.orders-browser-layout {
  grid-template-columns: minmax(0, 1fr);
}

.browser-layout.full-browser-layout .detail-content,
.browser-layout.orders-browser-layout .detail-content {
  display: none;
}

.browser-list-panel {
  display: grid;
  gap: 8px;
}

.browser-list-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-height: 32px;
}

.browser-list-heading h3 {
  margin: 0;
  font-size: 16px;
}

.browser-list-heading span {
  color: var(--muted);
}

.browser-list-guidance {
  padding: 8px 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  color: var(--muted);
  background: #f8fbff;
}

.latest-order-action-panel {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #c7d8ef;
  border-radius: 6px;
  background: #fbfdff;
}

.latest-order-action-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.latest-order-action-heading h4 {
  margin: 0;
  font-size: 15px;
}

.latest-order-action-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 8px;
}

.latest-order-action-grid > div {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fff;
}

.latest-order-action-grid span,
.latest-order-action-grid small {
  color: var(--muted);
}

.latest-order-action-grid span {
  font-size: 11px;
  text-transform: uppercase;
}

.latest-order-action-grid strong {
  font-size: 16px;
}

.browser-layout .grid-host,
.browser-layout .detail-content {
  min-height: 0;
  padding: 0;
}

.browser-layout .grid-host {
  display: block;
}

.browser-table {
  min-width: 0;
}

.orders-list-stack .browser-table {
  table-layout: auto;
}

.orders-list-stack .browser-table th:nth-child(2),
.orders-list-stack .browser-table td:nth-child(2) {
  min-width: 260px;
  white-space: nowrap;
}

.customer-inline {
  display: inline-flex;
  gap: 8px;
  align-items: baseline;
  white-space: nowrap;
}

.customer-inline small {
  display: inline;
  margin-top: 0;
  color: var(--muted);
}

.browser-detail-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.browser-detail-card .summary-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.storage-audit-section {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #c7d8ef;
  border-radius: 6px;
  background: #f7fbff;
}

.storage-audit-section h3 {
  margin: 0;
  font-size: 15px;
}

.storage-audit-section .summary-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.detail-line-list,
.compact-detail-list {
  display: grid;
  gap: 8px;
}

.detail-lines-table {
  min-width: 0;
}

.detail-line {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fff;
}

.detail-line .product-picture,
.product-detail-picture .product-picture {
  width: 72px;
  height: 50px;
}

.detail-line div {
  display: grid;
  gap: 3px;
}

.detail-line span,
.detail-line small {
  color: var(--muted);
}

.detail-list-row {
  display: block;
  width: 100%;
  min-height: 34px;
  text-align: left;
}

.available-forms-card {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #f8fbff;
}

.available-forms-heading,
.available-form-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.available-forms-heading h3 {
  margin: 0;
}

.available-forms-heading span,
.available-form-main span {
  color: var(--muted);
}

.available-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex: 0 0 auto;
}

.available-form-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fff;
}

.available-form-main > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.available-form-main strong,
.available-form-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.available-form-fields {
  overflow-x: auto;
}

.order-processing-summary {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #ffffff;
}

.order-processing-summary-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.order-processing-summary-heading h3 {
  margin: 0;
}

.order-processing-summary-heading span {
  color: var(--muted);
}

.view-state-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 10px;
  border: 1px solid #e0e8f6;
  border-radius: 6px;
  background: #f8fbff;
}

.view-state-line span {
  color: var(--muted);
}

.order-processing-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.order-processing-summary-grid > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #e0e8f6;
  border-radius: 6px;
  background: #f8fbff;
}

.order-processing-summary-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.order-processing-summary-grid small {
  color: #2563eb;
  font-weight: 700;
}

.available-form-state {
  margin: 0;
  color: var(--muted);
}

.processing-scope-note {
  margin: 0 0 10px;
  color: var(--muted);
}

.available-form-start-panel {
  margin-top: 12px;
}

.started-form-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #c9d8ee;
  border-radius: 6px;
  background: #fff;
}

.full-form-card {
  gap: 16px;
}

.form-context-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #f8fbff;
}

.form-context-panel span {
  color: var(--muted);
}

.form-context-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: stretch;
}

.line-change-context-grid {
  display: grid;
  grid-template-columns: minmax(360px, 2fr) minmax(180px, 1fr) minmax(140px, 0.7fr) minmax(220px, 1fr);
  align-items: stretch;
}

.form-context-grid > div,
.line-change-context-grid > div,
.selected-line-fields > div {
  display: grid;
  gap: 4px;
}

.form-context-grid span,
.line-change-context-grid span,
.selected-line-fields span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.form-scope-note {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.started-form-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) minmax(180px, 0.8fr);
  gap: 12px;
}

.line-change-form-grid {
  grid-template-columns: minmax(220px, 1fr) minmax(320px, 1.3fr) minmax(220px, 1fr);
}

.started-form-grid label {
  display: grid;
  gap: 4px;
}

.started-form-grid label span,
.form-note {
  color: var(--muted);
}

.released-workspace-form {
  display: grid;
  gap: 14px;
}

.product-change-action-button {
  width: max-content;
}

.released-workspace-form-details {
  display: grid;
  gap: 10px;
}

.released-workspace-form-details summary {
  width: max-content;
  list-style: none;
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid #b8c9e7;
  border-radius: 4px;
  background: #fff;
  color: #174edc;
  font-weight: 700;
}

.released-workspace-form-details summary::-webkit-details-marker {
  display: none;
}

.released-workspace-form-details .started-form-card {
  margin-top: 10px;
}

.released-workspace-form-grid {
  display: grid;
  gap: 8px;
}

.released-workspace-form-row {
  display: grid;
  grid-template-columns: 150px minmax(92px, 150px) minmax(260px, 520px);
  gap: 8px;
  align-items: center;
  min-height: 34px;
  justify-content: start;
}

.released-workspace-change-form .released-workspace-form-row {
  grid-template-columns: 150px minmax(92px, 150px) minmax(260px, 520px);
  justify-content: start;
}

.released-workspace-form-label {
  color: var(--muted);
  font-weight: 700;
}

.released-workspace-form-current {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid #d8e3f3;
  border-radius: 4px;
  background: #f8fbff;
  color: #334155;
}

.released-workspace-form-input input,
.released-workspace-form-input select,
.released-workspace-form-input textarea {
  width: 100%;
  min-height: 34px;
}

.released-workspace-form-input input[type="checkbox"] {
  width: 18px;
  min-height: 18px;
}

.compact-actions {
  align-items: center;
  justify-content: flex-start;
}

.started-form-lines {
  display: grid;
  gap: 8px;
}

.selected-line-sheet {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #f8fbff;
}

.selected-line-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.selected-line-heading h3 {
  margin: 0;
}

.selected-line-heading span {
  color: var(--muted);
}

.selected-line-fields {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr repeat(3, minmax(130px, 0.8fr));
  gap: 10px;
}

.started-form-lines h3 {
  margin: 0;
}

.form-order-lines-table td,
.form-order-lines-table th {
  white-space: nowrap;
}

.product-detail-picture {
  display: flex;
  justify-content: flex-start;
}

.product-view-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.product-view-heading .product-detail-picture {
  flex: 0 0 auto;
}

.orders-grid-panel,
.create-order-panel {
  grid-column: 1 / -1;
}

.create-order-panel {
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
}

.application-form-hidden {
  display: none;
}

body.workspace-input-mode .app-shell > section:not(#workspaceInputPage) {
  display: none !important;
}

body.workspace-input-mode #workspaceInputPage {
  display: grid !important;
}

body.component-directory-mode .app-shell > section:not(#componentDirectoryPage) {
  display: none !important;
}

body.component-directory-mode #componentDirectoryPage {
  display: grid !important;
}

body.insight-mode .app-shell > section:not(#insightSection) {
  display: none !important;
}

body.insight-mode #insightSection {
  display: grid !important;
}

body.notification-mode .app-shell > section:not(#notificationsPage) {
  display: none !important;
}

body.notification-mode #notificationsPage {
  display: grid !important;
}

body.engine-model-mode .app-shell > section:not(#engineModelPage) {
  display: none !important;
}

body.engine-model-mode .app-header {
  display: none !important;
}

body.engine-model-mode .app-shell {
  padding-top: 16px;
}

body.engine-model-mode #engineModelPage {
  display: grid !important;
}

body.matrix-discovery-mode .app-shell > section:not(#matrixDiscovery) {
  display: none !important;
}

body.matrix-discovery-mode #matrixDiscovery {
  display: grid !important;
}

body.view-example-mode .app-shell > section:not(#viewExamplePage) {
  display: none !important;
}

body.view-example-mode #viewExamplePage {
  display: grid !important;
}

.composer-application-dsl {
  gap: 12px;
}

.composer-dsl-button-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
  align-items: center;
}

.composer-dsl-button-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.composer-dsl-button-panel button {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid #abc0ee;
  border-radius: 6px;
  color: var(--blue);
  background: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.composer-dsl-button-panel button.active {
  color: #ffffff;
  border-color: var(--blue);
  background: var(--blue);
}

.composer-dsl-area-detail .data-grid td {
  vertical-align: top;
}

.composer-dsl-hierarchy {
  display: grid;
  gap: 12px;
}

.composer-dsl-hierarchy-node {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.composer-dsl-hierarchy-heading span,
.composer-dsl-child-row span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.composer-dsl-hierarchy-heading strong,
.composer-dsl-child-row strong {
  display: block;
  margin-top: 4px;
}

.composer-dsl-hierarchy-heading small,
.composer-dsl-child-row small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.composer-dsl-hierarchy-children {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.composer-dsl-hierarchy-children h4 {
  margin: 0 0 8px;
  font-size: 15px;
}

.composer-dsl-child-list {
  display: grid;
  gap: 8px;
}

.composer-dsl-child-row {
  min-height: 58px;
  padding: 9px 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #ffffff;
}

.composer-dsl-drilldown {
  display: grid;
  gap: 18px;
}

.composer-dsl-drilldown-section {
  display: grid;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid #d8e3f3;
}

.composer-dsl-drilldown-section:first-child {
  border-top: 0;
  padding-top: 0;
}

.composer-dsl-drilldown-section h4 {
  margin: 0;
  font-size: 15px;
}

.composer-dsl-title-context {
  margin-left: 12px;
  color: #536b91;
  font-size: 13px;
  font-weight: 600;
}

.technical-json-block {
  background: #f8fbff;
  border: 1px solid #d2def5;
  border-radius: 6px;
  color: #102038;
  font-family: "Consolas", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
  margin: 8px 0 0;
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  white-space: pre;
}

.composer-dsl-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.composer-dsl-section-heading > h4,
.composer-dsl-section-heading > h3 {
  margin-right: auto;
}

.composer-return-button {
  margin-left: auto;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #abc0ee;
  border-radius: 6px;
  color: var(--blue);
  background: #ffffff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.composer-dsl-button-panel .composer-return-button,
.standard-example-heading .composer-return-button {
  margin-left: auto;
}

.composer-dsl-form {
  display: grid;
  gap: 8px;
}

.composer-form-row {
  display: grid;
  grid-template-columns: 150px minmax(92px, 150px) minmax(260px, 520px);
  gap: 8px;
  align-items: center;
  min-height: 34px;
}

.composer-form-row label,
.composer-form-row > label:first-child {
  color: var(--muted);
  font-weight: 700;
}

.composer-form-current {
  min-height: 32px;
  display: flex;
  align-items: center;
  padding: 5px 8px;
  border: 1px solid #d8e3f3;
  border-radius: 4px;
  background: #f8fbff;
  color: #334155;
}

.composer-form-row input,
.composer-form-row select,
.composer-form-row textarea {
  width: 100%;
  min-height: 34px;
}

.composer-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

table .link-button,
.standard-attribute-table .link-button,
.browser-table .link-button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--blue);
  font: inherit;
  font-weight: 700;
  text-align: left;
}

.composer-aggregate-child-projection {
  display: grid;
  gap: 12px;
}

.composer-aggregate-layout,
.composer-aggregate-child-section {
  display: grid;
  gap: 12px;
}

.composer-aggregate-child-section h4 {
  margin: 0;
  font-size: 15px;
}

body.sales-desk-mode .app-shell > section:not(#salesDesk) {
  display: none !important;
}

body.sales-desk-mode #salesDesk {
  display: grid !important;
}

.create-order-mode .application-browser {
  display: none;
}

.create-order-mode .create-order-panel {
  display: grid;
}

.selected-order-mode .application-browser {
  display: none;
}

.selected-order-mode .selected-order-page {
  display: grid;
}

.started-order-form-mode .application-browser {
  display: none;
}

.started-order-form-mode .started-order-form-page {
  display: grid;
}

.selected-customer-mode .application-browser {
  display: none;
}

.selected-customer-mode .selected-customer-page {
  display: grid;
}

.selected-product-mode .application-browser {
  display: none;
}

.selected-product-mode .selected-product-page {
  display: grid;
}

.sales-desk-mode .orders-grid-panel,
.sales-desk-mode .detail-panel {
  display: none !important;
}

.selected-order-page,
.started-order-form-page,
.selected-customer-page,
.selected-product-page {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}

.selected-order-page-body,
.started-order-form-page-body,
.selected-customer-page-body,
.selected-product-page-body {
  padding: 16px;
}

.business-view-panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.business-view-panels > * {
  min-width: 0;
}

.business-view-panels .data-grid {
  min-width: 0;
  width: 100%;
}

.business-view-panels .data-grid th,
.business-view-panels .data-grid td {
  padding: 7px 10px;
}

.business-view-panels .standard-attribute-table th:first-child,
.business-view-panels .standard-attribute-table td:first-child {
  width: 132px;
  color: var(--muted);
  font-weight: 500;
  text-transform: none;
}

.business-view-panels .standard-attribute-table th,
.business-view-panels .standard-attribute-table td {
  white-space: nowrap;
}

.stacked-business-part {
  display: grid;
  gap: 12px;
}

.business-position {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 16px;
  align-items: start;
}

.performance-panel {
  display: grid;
  gap: 0;
}

.demo-control-panel {
  display: grid;
  gap: 0;
}

.workspace-input-workflow {
  display: grid;
  gap: 12px;
  padding: 12px 14px;
}

.workspace-input-workflow article {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 8px;
  background: #ffffff;
}

.workspace-input-workflow h3 {
  margin: 0;
  font-size: 16px;
}

.workspace-input-workflow p {
  margin: 0;
  color: var(--muted);
}

.demo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
}

.demo-actions button {
  min-width: 180px;
}

.workspace-input-folder {
  display: grid;
  gap: 12px;
  padding: 0 14px 14px;
  overflow-x: auto;
}

.workspace-input-page-body {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.workspace-input-grid,
.workspace-input-detail,
.workspace-input-performance {
  display: grid;
  gap: 10px;
}

.workspace-input-performance-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fff;
}

.workspace-input-detail h3 {
  margin: 4px 0 0;
  font-size: 15px;
}

#resetAndPrepare {
  color: #fff;
  border-color: #0f766e;
  background: #0f766e;
}

#run20Batch,
#run100MixedBatch,
#refreshInsight {
  color: #fff;
  border-color: var(--blue);
  background: var(--blue);
}

button:disabled {
  cursor: wait;
  opacity: 0.62;
}

.performance-summary {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
}

.performance-summary article {
  min-height: 82px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.performance-summary span,
.performance-row span {
  color: var(--muted);
  font-size: 12px;
}

.performance-summary strong {
  display: block;
  margin: 5px 0;
  font-size: 24px;
}

.performance-summary small {
  color: var(--muted);
}

.performance-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 0 14px 12px;
}

.performance-grid > article,
.performance-chains {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fff;
}

.performance-chains {
  margin: 0 14px 14px;
}

.performance-panel h3 {
  margin: 0;
  font-size: 15px;
}

.performance-list {
  display: grid;
  gap: 8px;
}

.performance-row {
  display: grid;
  gap: 9px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-left: 4px solid var(--green);
  border-radius: 6px;
  background: #fbfdff;
}

.performance-row.alert {
  border-left-color: #dc2626;
}

.performance-row > div:first-child {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.performance-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.performance-values div {
  min-height: 48px;
  padding: 8px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fff;
}

.performance-values span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
}

.performance-values strong {
  overflow-wrap: anywhere;
}

.insight-panel {
  display: grid;
  gap: 0;
}

.insight-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 14px;
}

.insight-summary article,
.insight-grid > article {
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.insight-summary span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.insight-summary strong {
  display: block;
  margin: 5px 0;
  font-size: 24px;
}

.insight-summary small {
  color: var(--muted);
}

.insight-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 0 14px 14px;
}

.insight-grid h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.runtime-evidence-card {
  grid-column: 1 / -1;
}

.runtime-evidence-card > p {
  margin: -2px 0 12px;
  color: var(--muted);
  font-size: 13px;
}

.insight-list {
  display: grid;
  gap: 8px;
}

.insight-row {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-left: 4px solid var(--blue);
  border-radius: 6px;
  background: #fff;
}

.insight-values {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.insight-values div {
  min-height: 48px;
  padding: 8px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.insight-values span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.insight-values strong {
  overflow-wrap: anywhere;
}

.position-list,
.grid-host {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  overflow-x: auto;
}

.detail-content {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.customer-grid-table,
.compact-grid {
  min-width: 720px;
}

.customer-order-list {
  display: grid;
  gap: 8px;
}

.position-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-left: 4px solid var(--green);
  border-radius: 6px;
  background: #fbfdff;
}

.position-card.alert {
  border-left-color: #dc2626;
}

.position-card.stock {
  grid-template-columns: 96px minmax(0, 1fr);
  align-items: center;
}

.position-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.position-title span {
  color: var(--muted);
  font-size: 13px;
}

.position-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.position-values div {
  min-height: 52px;
  padding: 8px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fff;
}

.position-values span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.position-values strong {
  overflow-wrap: anywhere;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.panel-heading h2 {
  margin: 0;
  font-size: 17px;
}

.runtime-evidence-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.runtime-evidence-technical {
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px solid #e5edf7;
}

.runtime-evidence-technical summary {
  color: var(--blue);
  font-weight: 700;
  cursor: pointer;
}

.runtime-evidence-technical[open] summary {
  margin-bottom: 8px;
}

.runtime-evidence-table {
  max-height: 34rem;
  overflow: auto;
}

.runtime-evidence-table table {
  width: 100%;
}

.runtime-evidence-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.runtime-evidence-detail-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.35rem 1rem;
  margin: 0;
}

.runtime-evidence-detail-list dt {
  font-weight: 700;
}

.runtime-evidence-detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.panel-heading-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

.order-list,
.product-grid,
.order-lines-grid {
  display: grid;
  gap: 8px;
  padding: 12px;
  overflow-x: auto;
}

.order-row {
  display: grid;
  gap: 4px;
  width: 100%;
  min-height: 76px;
  color: var(--text);
  text-align: left;
  border-color: #d8e3f3;
}

.order-row.selected {
  border-color: var(--blue);
  background: #eef4ff;
}

.order-row span,
.order-row small,
.line-card span,
.line-card small,
.notification span,
.notification small {
  color: var(--muted);
}

.order-detail {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.summary-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.summary-fields div {
  min-height: 62px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.summary-fields span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.summary-fields strong {
  font-weight: 400;
  overflow-wrap: anywhere;
}

.line-list {
  display: grid;
  gap: 10px;
}

.line-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
}

.line-card div {
  display: grid;
  gap: 4px;
}

.product-picture {
  width: 96px;
  height: 66px;
  object-fit: cover;
  border: 1px solid #bdd0eb;
  border-radius: 6px;
  background: #f8fbff;
}

.form-panel form {
  display: grid;
  gap: 14px;
  padding: 16px;
}

.standard-view-example-page {
  gap: 0;
  overflow: hidden;
}

.standard-view-example-content {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.standard-example-note {
  display: grid;
  grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid #c8d7ee;
  border-radius: 6px;
  background: #fbfdff;
}

.standard-example-note strong {
  font-size: 16px;
}

.standard-example-note span {
  color: var(--muted);
}

.standard-example-layout {
  display: grid;
  gap: 14px;
}

.standard-ui-contract-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid #c8d7ee;
  border-radius: 6px;
  background: #f8fbff;
}

.standard-ui-contract-strip > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fff;
}

.standard-ui-contract-strip span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.standard-ui-contract-strip strong,
.standard-ui-contract-strip small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.standard-ui-contract-strip small {
  color: var(--muted);
}

.standard-example-section {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #c8d7ee;
  border-radius: 6px;
  background: #fff;
}

.standard-example-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.standard-example-heading h3 {
  margin: 0;
  font-size: 17px;
}

.standard-example-heading h4 {
  margin: 4px 0 0;
  font-size: 15px;
}

.standard-example-heading p {
  margin: 4px 0 0;
  color: var(--muted);
}

.standard-order-list-table {
  min-width: 1120px;
}

.standard-order-list-table th,
.standard-order-list-table td {
  white-space: nowrap;
}

.standard-order-list-table th:nth-child(1),
.standard-order-list-table td:nth-child(1) {
  width: 150px;
}

.standard-order-list-table th:nth-child(2),
.standard-order-list-table td:nth-child(2) {
  min-width: 260px;
}

.standard-order-list-table th:nth-child(3),
.standard-order-list-table td:nth-child(3) {
  width: 160px;
}

.standard-order-list-table th:nth-child(4),
.standard-order-list-table td:nth-child(4) {
  width: 165px;
}

.standard-order-list-table th:nth-child(5),
.standard-order-list-table td:nth-child(5) {
  width: 210px;
}

.selected-example-row {
  background: #eef4ff;
}

.standard-view-title {
  display: grid;
  gap: 4px;
  padding: 8px 0 2px;
}

.standard-view-title span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.standard-view-title strong {
  font-size: 20px;
}

.standard-example-view-grid,
.standard-example-processing {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.standard-attribute-table-wrap {
  display: grid;
  gap: 8px;
}

.standard-attribute-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.62fr);
  gap: 12px;
  align-items: start;
}

.standard-view-parts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

.standard-view-parts > * {
  min-width: 0;
}

.standard-view-parts .data-grid {
  min-width: 0;
  width: 100%;
}

.standard-view-parts .standard-attribute-table th,
.standard-view-parts .standard-attribute-table td {
  padding: 7px 10px;
}

.standard-view-parts .standard-attribute-table th:first-child,
.standard-view-parts .standard-attribute-table td:first-child {
  width: 132px;
}

.standard-view-parts .standard-available-forms .standard-attribute-table th:first-child,
.standard-view-parts .standard-available-forms .standard-attribute-table td:first-child {
  width: 132px;
}

.standard-attribute-table-wrap h4 {
  margin: 0;
  font-size: 15px;
}

.standard-attribute-table {
  min-width: 0;
  table-layout: fixed;
}

.standard-attribute-table th:first-child,
.standard-attribute-table td:first-child {
  width: 180px;
  max-width: 180px;
  color: var(--muted);
  font-weight: 500;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.standard-attribute-table th:nth-child(2),
.standard-attribute-table td:nth-child(2) {
  width: auto;
  white-space: normal;
  overflow-wrap: anywhere;
}

.standard-attribute-table th,
.standard-attribute-table td {
  padding: 6px 10px;
}

.composer-dsl-area-detail .standard-attribute-table th,
.composer-dsl-area-detail .standard-attribute-table td {
  padding: 5px 10px;
}

.composer-dsl-area-detail .standard-attribute-table th:first-child,
.composer-dsl-area-detail .standard-attribute-table td:first-child {
  width: 170px;
  max-width: 170px;
}

.composer-dsl-area-detail .standard-attribute-table td:nth-child(2) {
  line-height: 1.35;
}

.standard-field {
  min-height: 64px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.standard-field span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.standard-field strong {
  overflow-wrap: anywhere;
}

.standard-lines-table th {
  white-space: nowrap;
}

.standard-available-forms {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.standard-panel-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.standard-processing-list {
  display: grid;
  gap: 8px;
}

.standard-view-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.standard-view-actions button {
  min-height: 32px;
  padding: 6px 10px;
}

.standard-processing-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.standard-order-evidence {
  display: grid;
  gap: 10px;
}

.standard-evidence-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.standard-evidence-actions button,
.standard-processing-table td:last-child button {
  min-height: 30px;
  padding: 5px 10px;
}

.standard-evidence-return {
  display: flex;
  justify-content: flex-start;
}

.standard-evidence-return button {
  min-height: 32px;
  padding: 6px 10px;
}

.standard-processing-heading h4 {
  margin: 0;
  font-size: 15px;
}

.standard-processing-heading span {
  color: var(--muted);
}

.standard-processing-table th,
.standard-processing-table td {
  vertical-align: middle;
}

.standard-processing-table td:last-child {
  white-space: nowrap;
}

.standard-available-forms h4 {
  margin: 0;
  font-size: 15px;
}

.standard-example-form {
  padding: 0 !important;
}

.standard-example-edit-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(180px, 0.65fr) 150px 150px;
  gap: 10px;
  align-items: end;
}

.standard-example-edit-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.standard-example-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.create-order-panel .panel-heading button {
  min-height: 34px;
  color: var(--blue);
  background: #fff;
}

.form-section h3 {
  margin: 0;
  font-size: 15px;
}

.order-header-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) 160px 160px;
  gap: 10px;
  align-items: end;
}

.customer-section {
  grid-template-columns: minmax(260px, 0.45fr) minmax(0, 1fr);
  align-items: stretch;
}

.product-entry-section {
  grid-template-columns: minmax(360px, 0.58fr) minmax(0, 1fr);
  align-items: stretch;
}

.product-entry-section h3 {
  grid-column: 1 / -1;
}

.form-grid {
  display: grid;
  grid-template-columns: 180px minmax(220px, 1fr) 170px 170px;
  gap: 12px;
  align-items: end;
}

label {
  display: grid;
  gap: 6px;
}

input,
select {
  min-height: 38px;
  width: 100%;
  padding: 8px 10px;
  color: var(--text);
  border: 1px solid #b9c8e4;
  border-radius: 6px;
  background: #fff;
  font: inherit;
}

.panel-subheading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  padding-top: 8px;
  border-top: 1px solid #e5edf8;
}

.panel-subheading h3 {
  margin: 0;
  font-size: 15px;
}

.panel-subheading span {
  color: var(--muted);
  font-size: 12px;
}

.product-controls {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 130px;
  gap: 10px;
  align-items: end;
}

.selected-customer-card,
.selected-product-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 0;
}

.selected-customer-card h3,
.selected-product-card h3 {
  margin: 0;
  font-size: 15px;
}

.selected-customer-card span,
.selected-product-card span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.position-values.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.line-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 100px;
  gap: 10px;
  align-items: end;
}

.line-entry #addDraftLine {
  width: 100%;
  grid-column: 1 / -1;
}

.line-entry label:nth-of-type(3) {
  grid-column: 1 / -1;
}

.product-values {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-actions button {
  width: 100%;
}

.form-actions #saveDraft {
  color: var(--green);
  border-color: #99d3c9;
  background: #f0fdfa;
}

.notification-page-layout {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
}

.notification-detail-column {
  display: grid;
  align-content: start;
  gap: 12px;
}

.notification-account-overview {
  display: grid;
  gap: 8px;
  margin: 12px 14px 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.notification-section-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.notification-section-heading h3 {
  margin: 0;
  font-size: 16px;
}

.notification-section-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.notification-inbox-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.notification-inbox-row {
  display: grid;
  gap: 5px;
  width: 100%;
  min-height: 74px;
  padding: 10px 12px;
  border: 1px solid #d6e1f1;
  border-radius: 7px;
  color: var(--text);
  background: #fff;
  text-align: left;
}

.notification-inbox-row.open {
  border-left: 4px solid var(--blue);
}

.notification-inbox-row.closed {
  border-left: 4px solid #94a3b8;
  background: #f8fafc;
}

.notification-inbox-row.active {
  border-color: var(--blue);
  background: #eff6ff;
}

.notification-inbox-row span,
.notification-inbox-row small,
.notification-detail-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.notification-inbox-row strong {
  font-size: 14px;
}

.notification-detail-card {
  display: grid;
  gap: 10px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.notification-detail-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.notification-detail-heading h3 {
  margin: 0 0 3px;
  font-size: 17px;
}

.notification-detail-card p {
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}

.engine-model-page {
  gap: 14px;
}

.engine-model-intro {
  padding: 10px 12px;
  border: 1px solid #d6e1f1;
  border-radius: 7px;
  color: var(--muted);
  background: #f8fbff;
}

.engine-model-summary {
  display: grid;
  gap: 10px;
}

.engine-model-content,
.engine-aggregate-list,
.engine-entity-block,
.engine-payload-block {
  display: grid;
  gap: 10px;
}

.engine-menu-section {
  display: grid;
  gap: 10px;
}

.engine-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.engine-menu-grid button {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #b8cbec;
  border-radius: 6px;
  background: #ffffff;
  color: #0f172a;
  text-align: left;
}

.engine-menu-grid button span {
  color: #1d4ed8;
  font-weight: 600;
}

.engine-menu-grid button strong {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.engine-focused-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.engine-focused-header h3 {
  margin: 0;
  font-size: 20px;
}

.engine-focused-header span {
  color: var(--muted);
}

.engine-aggregate-filter {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: end;
  margin: 14px 0 10px;
}

.engine-aggregate-filter label {
  display: grid;
  gap: 6px;
  min-width: 280px;
  color: var(--muted);
  font-weight: 600;
}

.engine-aggregate-filter select {
  min-height: 38px;
  border: 1px solid #b8c9e8;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  padding: 0 10px;
}

.engine-aggregate-filter > span {
  color: var(--muted);
  font-weight: 600;
}

.engine-scroll-list {
  max-height: 760px;
  overflow-y: auto;
  border: 1px solid #d6e1f1;
  border-radius: 6px;
}

.engine-scroll-list .data-grid {
  border: 0;
}

.engine-scroll-list .data-grid thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.engine-aggregate-type-card,
.engine-aggregate-card,
.engine-entity-detail,
.engine-command-detail,
.engine-repository-section,
.engine-repository-card {
  border: 1px solid #d6e1f1;
  border-radius: 8px;
  background: #fff;
}

.engine-repository-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-left: 4px solid #0f766e;
}

.engine-repo-catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.engine-repo-hierarchy,
.engine-repo-aggregate-stack,
.engine-repo-owned-catalogs {
  display: grid;
  gap: 10px;
}

.engine-repo-application,
.engine-repo-bc,
.engine-repo-aggregate-node {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.engine-repo-bc {
  border-left: 4px solid #2563eb;
  background: #ffffff;
}

.engine-repo-bc-heading {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.engine-repo-bc-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.engine-repo-bc-heading strong {
  font-size: 16px;
}

.engine-repo-aggregate-node {
  border-left: 4px solid #94a3b8;
  background: #ffffff;
}

.engine-repo-node-heading {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.engine-repo-node-heading.compact {
  grid-template-columns: 150px minmax(0, 1fr);
}

.engine-repo-node-heading span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.engine-repo-node-heading strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.engine-repo-owned-catalogs {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.engine-repo-application-table,
.engine-repo-owned-matrix {
  width: 100%;
  table-layout: fixed;
}

.engine-repo-application-table th:first-child,
.engine-repo-application-table td:first-child,
.engine-repo-owned-matrix th:first-child,
.engine-repo-owned-matrix td:first-child {
  width: 140px;
}

.engine-repo-owned-matrix th:nth-child(2),
.engine-repo-owned-matrix td:nth-child(2) {
  width: 260px;
}

.engine-repo-owned-matrix td {
  vertical-align: top;
}

.engine-repo-inline-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.engine-repo-inline-list li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  min-width: 0;
}

.engine-repo-inline-list li span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.engine-repo-owned-table {
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #ffffff;
  overflow: hidden;
}

.engine-repo-owned-table summary {
  cursor: pointer;
  padding: 8px 10px;
  color: #1d4ed8;
  font-weight: 800;
  background: #f8fbff;
}

.engine-repo-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.engine-repo-list h4 {
  margin: 0;
  font-size: 14px;
}

.engine-repo-catalog-table th:first-child,
.engine-repo-catalog-table td:first-child {
  width: 72px;
  white-space: nowrap;
}

.engine-repo-catalog-table td:nth-child(2) {
  color: #12366f;
}

.engine-model-table th,
.engine-model-table td {
  padding: 8px 10px;
  vertical-align: middle;
}

.engine-aggregate-table td {
  height: 44px;
}

.engine-all-aggregate-table th,
.engine-all-aggregate-table td {
  white-space: nowrap;
}

.engine-all-aggregate-table .grid-link {
  white-space: nowrap;
}

.engine-aggregate-table .compact-action,
.engine-model-table .compact-action {
  min-height: 32px;
  padding: 6px 10px;
}

.command-display-button {
  justify-content: flex-start;
  width: 100%;
  color: #1d4ed8;
  font-weight: 500;
  text-align: left;
}

.command-display-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.engine-aggregate-type-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-left: 4px solid var(--blue);
}

.engine-aggregate-list-section {
  border: 0;
  padding: 0;
  background: transparent;
}

.engine-aggregate-detail-section {
  display: grid;
  gap: 14px;
}

.engine-aggregate-child-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.engine-aggregate-child-nav button {
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #b8c9e8;
  border-radius: 6px;
  background: #fff;
  color: #174edc;
  font-weight: 700;
}

.engine-aggregate-child-nav button.is-active {
  border-color: #1d4ed8;
  background: #2d57d9;
  color: #fff;
}

.engine-aggregate-child-panel {
  display: grid;
  gap: 12px;
}

.engine-child-table td {
  white-space: nowrap;
}

.engine-saga-detail-block {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fff;
}

.engine-saga-detail-block h6 {
  margin: 0;
  font-size: 14px;
}

.engine-aggregate-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  background: #fbfdff;
}

.engine-aggregate-detail {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-left: 4px solid #94a3b8;
  background: #fbfdff;
}

.engine-aggregate-detail-row.is-hidden,
.engine-entity-version-row.is-hidden,
.engine-command-detail-row.is-hidden,
.engine-command-detail.is-hidden {
  display: none;
}

.engine-command-detail {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-left: 4px solid #7c3aed;
}

.engine-command-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.engine-command-field {
  min-height: 64px;
  padding: 10px;
  border: 1px solid #d6e1f1;
  border-radius: 7px;
  background: #fbfdff;
}

.engine-command-field span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.engine-command-field strong {
  display: block;
  margin-top: 6px;
  overflow-wrap: anywhere;
}

.engine-command-technical {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.compact-action {
  min-width: 112px;
  padding: 5px 8px;
  font-size: 12px;
  white-space: nowrap;
}

.command-display-button {
  display: inline-flex;
  min-width: 0;
  max-width: 210px;
  gap: 0;
  justify-content: flex-start;
  white-space: nowrap;
  text-align: left;
  color: #1d4ed8;
  font-weight: 500;
}

.command-display-button.is-active {
  border-color: #7c3aed;
  color: #4c1d95;
  background: #f5f3ff;
}

.command-display-button strong {
  font-size: 12px;
}

.command-display-button span {
  color: inherit;
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.engine-secondary-line {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.engine-model-card-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.engine-model-card-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.engine-model-card-heading h3,
.engine-model-card-heading h4,
.engine-entity-detail h6,
.engine-entity-block h5,
.engine-payload-block h6 {
  margin: 3px 0 0;
}

.engine-model-card-heading h3 {
  font-size: 20px;
}

.engine-model-card-heading h4 {
  font-size: 16px;
}

.engine-entity-detail {
  display: grid;
  gap: 10px;
  padding: 12px;
  overflow: hidden;
  border-left: 4px solid var(--blue);
  background: #fff;
}

.engine-entity-detail h6 {
  font-size: 14px;
}

.engine-model-table,
.engine-payload-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.engine-model-table th,
.engine-model-table td,
.engine-payload-table th,
.engine-payload-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #e1e9f4;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.engine-model-table th,
.engine-model-table td {
  white-space: nowrap;
}

.engine-model-table td:nth-child(2),
.engine-model-table td:nth-child(5) {
  white-space: normal;
}

.engine-model-table.engine-all-aggregate-table th,
.engine-model-table.engine-all-aggregate-table td,
.engine-model-table.engine-all-aggregate-table td:nth-child(2),
.engine-model-table.engine-all-aggregate-table td:nth-child(5) {
  overflow-wrap: normal;
  white-space: nowrap;
}

.engine-model-table th,
.engine-payload-table th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  background: #f7fafc;
}

.engine-payload-table td:first-child {
  width: 360px;
  min-width: 360px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
}

.engine-entity-detail > .summary-fields {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) !important;
}

.engine-entity-detail > .summary-fields > div {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  align-items: center;
  min-height: 34px;
  width: 100%;
}

.engine-entity-detail > .summary-fields span {
  margin: 0;
}

.engine-aggregate-table th:nth-child(1),
.engine-aggregate-table td:nth-child(1) {
  width: 42%;
}

.engine-aggregate-table th:nth-child(2),
.engine-aggregate-table td:nth-child(2) {
  width: 120px;
}

.engine-aggregate-table th:nth-child(3),
.engine-aggregate-table td:nth-child(3) {
  width: 170px;
}

.engine-aggregate-table th:nth-child(4),
.engine-aggregate-table td:nth-child(4) {
  width: 95px;
}

.engine-all-aggregate-table th:nth-child(1),
.engine-all-aggregate-table td:nth-child(1) {
  width: 170px;
}

.engine-all-aggregate-table th:nth-child(2),
.engine-all-aggregate-table td:nth-child(2) {
  width: auto;
}

.engine-all-aggregate-table th:nth-child(3),
.engine-all-aggregate-table td:nth-child(3) {
  width: 150px;
}

.engine-all-aggregate-table th:nth-child(4),
.engine-all-aggregate-table td:nth-child(4) {
  width: 190px;
}

.engine-all-aggregate-table th:nth-child(5),
.engine-all-aggregate-table td:nth-child(5) {
  width: 90px;
}

.engine-aggregate-detail .summary-fields div {
  min-width: 0;
}

.engine-aggregate-detail .summary-fields strong {
  white-space: nowrap;
}

.engine-aggregate-detail-row > td,
.engine-entity-version-row > td {
  white-space: normal !important;
}

.engine-entity-detail .summary-fields strong,
.engine-payload-table td {
  white-space: normal;
}

.order-total {
  padding: 8px 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  color: var(--muted);
  background: #fbfdff;
  font-size: 13px;
  font-weight: 700;
}

.data-grid.order-lines-table {
  min-width: 0;
}

.order-lines-table th,
.order-lines-table td {
  white-space: nowrap;
}

.order-lines-table .inline-cell-value {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  white-space: nowrap;
}

.data-grid {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.data-grid th,
.data-grid td {
  padding: 9px 10px;
  border-bottom: 1px solid #e5edf8;
  text-align: left;
  vertical-align: middle;
}

.data-grid th {
  color: #40506a;
  background: #f3f7fc;
  font-size: 12px;
  text-transform: uppercase;
}

.sort-header {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 0;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  text-align: inherit;
  text-transform: inherit;
}

.sort-header::after {
  content: "";
  color: var(--blue);
  font-size: 11px;
}

.sort-header[data-direction="asc"]::after {
  content: "▲";
}

.sort-header[data-direction="desc"]::after {
  content: "▼";
}

.data-grid td small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
}

.data-grid tr:last-child td {
  border-bottom: 0;
}

.data-grid .numeric {
  text-align: right;
}

.selected-row td {
  background: #eef4ff;
}

.grid-link {
  min-height: 0;
  padding: 0;
  border: 0;
  color: var(--blue);
  background: transparent;
}

.data-grid .link-button,
.data-grid .grid-link {
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--blue);
  background: transparent;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.data-grid .link-button:hover,
.data-grid .grid-link:hover {
  color: #173bb8;
  text-decoration: underline;
}

.data-grid .small-action {
  min-height: 30px;
  padding: 4px 9px;
  border-radius: 5px;
  font-size: 14px;
}

.status-pill {
  display: inline-flex;
  padding: 3px 9px;
  border: 1px solid #c8d6ef;
  border-radius: 999px;
  color: #1e3a8a;
  background: #eff6ff;
  font-size: 12px;
  font-weight: 700;
}

.dossier-status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 9px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.dossier-status-pill.is-resolved {
  border-color: #86c99b;
  color: #116329;
  background: #e8f7ed;
}

.dossier-status-pill.is-unresolved {
  border-color: #e4a0a0;
  color: #9d1c1c;
  background: #fff0f0;
}

.inline-action {
  min-width: 90px;
  padding: 6px 10px;
  border: 1px solid #b8c7e5;
  border-radius: 6px;
  color: #17315f;
  background: #ffffff;
  font-weight: 700;
  cursor: pointer;
}

.inline-action:hover {
  border-color: #2f5bd7;
  color: #244ed6;
  background: #f3f7ff;
}

.processed-form-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fff;
}

.processed-form-list {
  display: grid;
  gap: 10px;
}

.processed-form-list-table th,
.processed-form-list-table td {
  vertical-align: middle;
  white-space: nowrap;
}

.processed-form-list-table td small {
  display: inline;
  margin-left: 6px;
  white-space: nowrap;
}

.processed-form-list-table .processed-command-cell.processed-command-current {
  color: #065f46;
  font-weight: 800;
}

.row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.processed-form-detail {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #ffffff;
}

.processed-form-detail.empty {
  color: var(--muted);
}

.processed-form-detail h3 {
  margin: 0;
}

.processed-form-content {
  display: grid;
  gap: 10px;
}

.processed-form-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.processed-form-summary > div:first-child {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.processed-form-summary span,
.processed-form-card p {
  color: var(--muted);
}

.processed-form-card p {
  margin: 0;
}

.processed-form-business-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.processed-form-business-fields > div {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #e0e8f6;
  border-radius: 6px;
  background: #f8fbff;
}

.processed-form-business-fields span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.processed-form-business-fields strong {
  color: #10213b;
}

.processed-form-business-fields small {
  color: #2563eb;
  font-weight: 700;
}

.processed-form-business-fields .wide-field {
  grid-column: span 2;
}

.processed-form-steps {
  margin-top: 2px;
}

.processed-form-steps tr.processed-command-current td {
  background: #ecfdf5;
  color: #065f46;
  font-weight: 800;
}

.reference-detail-panel {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #f8fbff;
}

.reference-detail-panel.empty {
  color: var(--muted);
  background: #ffffff;
}

.reference-detail-heading {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
  color: #12213a;
}

.reference-detail-heading span {
  color: var(--muted);
  font-size: 12px;
  text-align: right;
  overflow-wrap: anywhere;
}

.created-command-payload {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.created-command-payload h3 {
  margin: 0;
}

.created-command-list {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.created-command-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.created-command-list-heading h3 {
  margin: 0;
}

.created-command-list-heading span {
  color: var(--muted);
  font-size: 13px;
}

.created-command-detail {
  border: 1px solid #d8e3f3;
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.created-command-detail.empty {
  color: var(--muted);
}

.created-command-detail-content {
  display: grid;
  gap: 8px;
}

.picture-cell .product-picture {
  width: 72px;
  height: 50px;
}

.small-action {
  min-height: 30px;
  padding: 5px 10px;
}

.small-action.danger {
  color: #991b1b;
  border-color: #fecaca;
  background: #fff5f5;
}

.line-qty {
  min-height: 30px;
  max-width: 84px;
  text-align: right;
}

.submit-result {
  margin: 0 14px 14px;
  padding: 10px;
  border-left: 4px solid var(--green);
  background: #ecfdf5;
  color: #064e3b;
}

.notification-panel {
  padding-bottom: 12px;
}

.notifications,
.notification-list {
  display: grid;
  gap: 8px;
  padding: 12px 14px 0;
}

.notification-delivery-overview {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
}

.notification-delivery-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.notification-delivery-heading h3 {
  margin: 0;
  font-size: 16px;
}

.notification-delivery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.notification-delivery-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid #b8c9e8;
  border-radius: 6px;
  color: #12213a;
  background: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.notification-delivery-table {
  margin-top: 2px;
}

.notification-delivery-table th,
.notification-delivery-table td {
  padding-top: 7px;
  padding-bottom: 7px;
}

.notification,
.empty {
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.notification {
  display: grid;
  gap: 8px;
}

.notification-header,
.notification-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.notification-header span {
  padding: 2px 8px;
  border: 1px solid #c8d6ef;
  border-radius: 999px;
  color: #1e3a8a;
  background: #eff6ff;
  font-size: 12px;
}

.notification-actions {
  justify-content: flex-start;
  padding-top: 4px;
}

.notification-actions button {
  min-height: 30px;
  padding: 5px 10px;
}

.notification-next-action {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid #bfd7c1;
  border-radius: 6px;
  background: #f6fbf4;
}

.notification-next-action span {
  color: #256029;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.notification-next-action strong {
  color: #21351f;
  font-size: 13px;
  line-height: 1.4;
}

.notification-dossier {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #ffffff;
}

.notification-dossier-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.notification-dossier-heading h4 {
  margin: 0;
  font-size: 14px;
}

.notification-dossier-heading span {
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.notification-dossier p {
  margin: 0;
}

.notification-dossier-error {
  color: #8f1d1d;
  font-weight: 700;
}

.control-center-access-denied {
  display: grid;
  gap: 0.45rem;
  padding: 1rem 1.1rem;
  border: 1px solid #dc2626;
  border-left-width: 0.35rem;
  border-radius: 0.6rem;
  background: #fef2f2;
  color: #7f1d1d;
}

.control-center-access-denied strong {
  font-size: 1rem;
}

.notification-dossier-messages {
  display: grid;
  gap: 8px;
}

.notification-dossier-message {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid #e4ebf5;
  border-radius: 6px;
  background: #fbfdff;
}

.notification-dossier-message div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.notification-dossier-message span {
  color: var(--muted);
  font-size: 12px;
}

.notification-dossier-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.notification-dossier-decision-actions button {
  width: auto;
}

.notification-dossier-form {
  display: grid;
  gap: 8px;
}

.notification-dossier-form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.notification-dossier-form textarea {
  resize: vertical;
}

.notification-dossier-form button {
  justify-self: start;
}

.control-center-dossier-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.control-center-dossier-list,
.control-center-dossier-detail {
  min-width: 0;
  overflow-x: auto;
}

.control-center-dossier-detail {
  display: grid;
  gap: 10px;
}

.control-center-dossier-list table,
.control-center-dossier-detail table {
  table-layout: fixed;
  width: 100%;
}

.control-center-dossier-list td,
.control-center-dossier-list th,
.control-center-dossier-detail td,
.control-center-dossier-detail th,
.notification-dossier-heading span {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 980px) {
  .notification-dossier-form-grid {
    grid-template-columns: 1fr;
  }
}

.notification-inline-detail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.notification-inline-detail div {
  padding: 8px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #ffffff;
}

.notification-inline-detail span {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.notification-inline-detail strong {
  display: block;
  overflow-wrap: anywhere;
  font-size: 13px;
}

.matrix-discovery-panel {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid #d8e3f3;
  border-radius: 8px;
  background: #ffffff;
}

.matrix-flow,
.matrix-checkpoints,
.matrix-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.matrix-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.matrix-flow article,
.matrix-checkpoint,
.matrix-detail-grid article,
.matrix-discovery-panel > article {
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.matrix-flow span,
.matrix-fact span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.matrix-flow strong {
  display: block;
  margin-top: 4px;
  color: #12213a;
  font-size: 20px;
}

.matrix-flow small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.matrix-checkpoint {
  display: grid;
  gap: 4px;
}

.matrix-checkpoint span {
  width: fit-content;
  padding: 3px 8px;
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  color: #166534;
  background: #f0fdf4;
  font-weight: 700;
}

.matrix-list {
  display: grid;
  gap: 8px;
}

.matrix-application-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin: 10px 0 12px;
}

.matrix-edit-sessions,
.matrix-edit-session-detail {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.matrix-edit-session-heading {
  display: grid;
  gap: 2px;
}

.matrix-edit-session-heading h3,
.matrix-edit-session-detail h3 {
  margin: 0;
}

.matrix-application-card.compact {
  display: grid;
  gap: 8px;
  margin: 8px 0 10px;
  padding: 10px 12px;
  border: 1px solid #d8e3f3;
  border-radius: 8px;
  background: #ffffff;
}

.matrix-application-card.compact h3 {
  margin: 0;
}

.matrix-application-compact-grid {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: start;
  gap: 6px 12px;
}

.matrix-application-compact-grid span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.matrix-application-compact-grid strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-application-compact-grid strong small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.matrix-application-compact-grid p {
  margin: 0;
  color: var(--text);
}

.matrix-application-editor {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #c8d7ee;
  border-radius: 8px;
  background: #ffffff;
}

#matrixDiscovery.matrix-application-edit-mode > :not(#matrixApplicationEditor) {
  display: none !important;
}

#matrixDiscovery.matrix-application-edit-mode #matrixApplicationEditor {
  display: grid !important;
}

.matrix-application-form {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #d8e3f3;
  border-radius: 8px;
  background: #fbfdff;
}

.matrix-application-form label {
  display: grid;
  gap: 5px;
}

.matrix-application-form input,
.matrix-application-form textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #c6d5ed;
  border-radius: 6px;
  color: var(--text);
  background: #ffffff;
  font: inherit;
}

.matrix-application-form textarea {
  min-height: 110px;
  resize: vertical;
}

.matrix-application-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.matrix-application-intake {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 8px;
  background: #ffffff;
}

.matrix-application-intake-heading,
.matrix-intake-artifact-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.matrix-application-intake-heading h3,
.matrix-application-intake-heading p {
  margin: 0;
}

.matrix-application-intake-heading span {
  flex: 0 0 auto;
  padding: 5px 9px;
  border: 1px solid #c8d7ee;
  border-radius: 999px;
  color: var(--muted);
  background: #fbfdff;
  font-size: 12px;
  font-weight: 700;
}

.matrix-application-intake-list {
  display: grid;
  gap: 8px;
}

.matrix-intake-artifact-row {
  min-height: 56px;
  padding: 9px 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
  align-items: center;
}

.matrix-intake-artifact-row span,
.matrix-intake-artifact-row small {
  color: var(--muted);
}

.matrix-intake-artifact-row > strong,
.matrix-intake-artifact-row > span,
.matrix-intake-artifact-row > small {
  min-width: 0;
}

.matrix-intake-artifact-row > small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-intake-artifact-row > strong {
  flex: 0 0 220px;
}

.matrix-intake-artifact-row > span {
  flex: 0 0 150px;
}

.matrix-intake-artifact-row > small {
  flex: 1 1 auto;
}

.matrix-definition-stack {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}

.matrix-definition-section {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.matrix-definition-stack h3,
.matrix-definition-stack p {
  margin: 0;
}

.matrix-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
}

.matrix-section-heading h3,
.matrix-section-heading p {
  margin: 0;
}

.matrix-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #fbfdff;
}

.matrix-section-nav button {
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #b7c8e8;
  border-radius: 6px;
  background: #ffffff;
  color: #1d4ed8;
  font-weight: 800;
}

.matrix-return-button {
  justify-self: start;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid #b7c8e8;
  border-radius: 6px;
  background: #ffffff;
  color: #1d4ed8;
  font-weight: 800;
}

.matrix-return-button {
  display: none;
}

#matrixDiscovery.matrix-overview-mode .matrix-navigable-section,
#matrixDiscovery.matrix-overview-mode .matrix-navigable-container {
  display: none;
}

#matrixDiscovery.matrix-focused-section-mode .matrix-navigable-section {
  display: none;
}

#matrixDiscovery.matrix-focused-section-mode .matrix-navigable-section.is-active-matrix-section {
  display: grid;
}

#matrixDiscovery.matrix-focused-section-mode #matrixBoardSection.is-active-matrix-section {
  display: block;
}

#matrixDiscovery.matrix-focused-section-mode .matrix-return-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.matrix-definition-list {
  display: grid;
  gap: 10px;
}

.matrix-maintenance-contracts {
  overflow-x: auto;
}

.matrix-maintenance-views {
  overflow-x: auto;
  margin-bottom: 12px;
}

.matrix-maintenance-contract-table small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.25;
}

.matrix-maintenance-contract-table .matrix-table-actions {
  min-width: 250px;
}

.matrix-maintenance-contract-card,
.matrix-maintenance-page {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #cfe0f6;
  border-radius: 8px;
  background: #fbfdff;
}

.matrix-maintenance-contract-heading,
.matrix-maintenance-page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
}

.matrix-maintenance-contract-heading span,
.matrix-maintenance-page-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.matrix-maintenance-contract-heading strong,
.matrix-maintenance-page-heading h3 {
  display: block;
  margin: 2px 0;
  font-size: 16px;
}

.matrix-maintenance-contract-heading small,
.matrix-maintenance-page-heading p {
  color: var(--muted);
}

.matrix-maintenance-contract-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.matrix-maintenance-contract-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.matrix-maintenance-contract-summary span {
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid #d9e5f4;
  border-radius: 6px;
  background: #fff;
  color: var(--text);
}

.matrix-maintenance-contract-summary strong {
  display: block;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.matrix-maintenance-detail {
  display: grid;
  gap: 10px;
}

.matrix-maintenance-view-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.matrix-maintenance-form {
  background: #fff;
}

.matrix-bc-drilldown,
.matrix-process-drilldown,
.matrix-process-step-stack,
.matrix-process-flow-detail {
  display: grid;
  gap: 10px;
}

.matrix-drill-button {
  justify-self: start;
  min-width: 180px;
}

.matrix-drill-button.small {
  min-width: 0;
  padding: 6px 10px;
  font-size: 12px;
}

.matrix-drill-button.danger {
  border-color: #fecaca;
  color: #b91c1c;
  background: #fff7f7;
}

.matrix-definition-actions,
.matrix-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
}

.matrix-table-actions {
  justify-content: flex-start;
}

.matrix-edit-panel {
  padding: 12px;
  border: 1px solid #b8c7e5;
  border-radius: 6px;
  background: #f8fbff;
}

.matrix-edit-form {
  display: grid;
  gap: 12px;
}

.matrix-edit-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.matrix-edit-heading span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.matrix-edit-heading h3 {
  margin: 2px 0 0;
}

.matrix-edit-grid {
  display: grid;
  grid-template-columns: 160px minmax(260px, 1fr);
  gap: 10px;
}

.matrix-edit-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.matrix-edit-grid input,
.matrix-edit-grid textarea {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #cbd8ee;
  border-radius: 6px;
  color: var(--text);
  background: #ffffff;
  font: inherit;
  text-transform: none;
}

.matrix-edit-grid textarea {
  min-height: 78px;
  resize: vertical;
}

.matrix-edit-grid input[readonly] {
  color: #465773;
  background: #edf3fb;
}

.matrix-edit-wide {
  grid-column: 1 / -1;
}

.matrix-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.matrix-edit-status {
  padding: 9px 10px;
  border: 1px solid #b7d6c2;
  border-radius: 6px;
  color: #065f46;
  background: #ecfdf5;
  font-weight: 700;
}

.matrix-edit-status.warning {
  border-color: #f2cb8c;
  color: #92400e;
  background: #fff7ed;
}

.matrix-definition-detail-page {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #c9d7ee;
  border-radius: 6px;
  background: #ffffff;
}

.matrix-detail-page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
}

.matrix-detail-page-heading span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.matrix-detail-page-heading h3 {
  margin: 2px 0 4px;
}

.matrix-detail-page-heading p {
  margin: 0;
  color: var(--muted);
}

.matrix-process-flow-table,
.matrix-ipo-detail {
  overflow-x: auto;
}

.matrix-bc-part-stack {
  display: grid;
  gap: 8px;
}

.matrix-bc-part-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #ffffff;
}

.matrix-bc-part-card.matrix-selected-part {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.14);
  background: #f8fbff;
}

.matrix-bc-part-heading {
  display: grid;
  grid-template-columns: 120px minmax(190px, .8fr) minmax(320px, 1.4fr) minmax(310px, auto);
  align-items: center;
  gap: 10px;
}

.matrix-bc-part-heading .matrix-drill-button {
  justify-self: end;
}

.matrix-bc-part-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.matrix-bc-part-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.matrix-bc-part-heading small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-bc-part-card p {
  margin: 0;
  color: var(--muted);
}

.matrix-process-connections {
  display: grid;
  gap: 5px;
  padding-left: 120px;
}

.matrix-process-connections.is-hidden {
  display: none;
}

.matrix-process-connections span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.matrix-process-connections strong {
  display: block;
  padding: 6px 8px;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 12px;
}

.matrix-definition-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #ffffff;
}

.matrix-validation-panel {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid #d8e3f3;
  border-top: 0;
  background: #f8fbff;
}

.matrix-validation-panel strong::after {
  content: ":";
}

.matrix-validation-panel.ok {
  color: #065f46;
  background: #f2fbf7;
}

.matrix-validation-panel.warning {
  color: #92400e;
  background: #fff7ed;
}

.matrix-flow-definition-list {
  display: grid;
  gap: 10px;
}

.matrix-business-flow-card {
  border: 1px solid #c8d6ea;
  border-radius: 8px;
  padding: 10px;
  background: #f8fbff;
}

.matrix-business-flow-card.has-warning {
  border-color: #f59e0b;
  background: #fffbeb;
}

.matrix-business-flow-card.matrix-flow-highlight {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.16);
}

.matrix-business-flow-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.matrix-business-flow-heading div {
  display: grid;
  gap: 4px;
}

.matrix-business-flow-heading span {
  color: #52627a;
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.matrix-business-flow-heading strong {
  color: #142033;
}

.matrix-business-flow-heading small {
  color: #586b89;
}

.matrix-business-flow-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.matrix-business-flow-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.matrix-business-flow-summary span,
.matrix-business-flow-validation {
  border: 1px solid #d4e0f1;
  border-radius: 6px;
  padding: 8px;
  background: #fff;
  color: #334155;
}

.matrix-business-flow-summary strong {
  display: block;
  color: #5c6c83;
  font-size: 0.74rem;
  text-transform: uppercase;
}

.matrix-business-flow-validation {
  display: grid;
  gap: 4px;
  margin-top: 10px;
}

.matrix-business-flow-validation.ok {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #166534;
}

.matrix-business-flow-validation.warning {
  border-color: #facc15;
  background: #fefce8;
  color: #854d0e;
}

.matrix-business-flow-detail {
  margin-top: 10px;
  overflow-x: auto;
}

.matrix-cell-flow-type {
  display: inline-block;
  margin-right: 4px;
  padding: 1px 5px;
  border-radius: 999px;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.matrix-cell-start.inline {
  display: inline-block;
  margin-top: 4px;
}

.matrix-definition-card.process-definition-card {
  gap: 12px;
}

.matrix-definition-heading {
  display: grid;
  grid-template-columns: 120px minmax(190px, .8fr) minmax(320px, 1.4fr) minmax(310px, auto);
  align-items: center;
  gap: 10px;
}

.matrix-definition-heading.process-definition-heading {
  grid-template-columns: 130px 230px 150px minmax(320px, 1fr) minmax(330px, auto);
}

.matrix-definition-heading.bc-definition-heading {
  grid-template-columns: 230px 130px 150px minmax(320px, 1fr) minmax(330px, auto);
}

.matrix-definition-column-header {
  padding: 0 10px 2px;
}

.matrix-definition-column-header span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.matrix-definition-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.matrix-definition-heading p {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-definition-heading .matrix-drill-button {
  justify-self: end;
}

.matrix-definition-card p {
  color: var(--muted);
  line-height: 1.35;
}

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

.matrix-definition-table th,
.matrix-definition-table td {
  padding: 7px 8px;
  border-top: 1px solid #e2e8f0;
  text-align: left;
  vertical-align: top;
}

.matrix-definition-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.matrix-definition-table th:first-child,
.matrix-definition-table td:first-child {
  width: 72px;
  white-space: nowrap;
}

.matrix-definition-table td:nth-child(2) {
  width: 190px;
  font-weight: 700;
}

.matrix-definition-table th:last-child,
.matrix-definition-table td:last-child {
  width: 260px;
}

.matrix-flow-table th:first-child,
.matrix-flow-table td:first-child {
  width: 150px;
}

.matrix-flow-table td:nth-child(2) {
  width: auto;
  font-weight: 400;
}

.matrix-process-connection-table td:first-child {
  width: 80px;
}

.matrix-process-connection-table td:nth-child(2) {
  width: 220px;
}

.matrix-process-connection-table td:nth-child(3) {
  width: 150px;
  font-weight: 400;
}

.matrix-process-step-flows {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.matrix-cell-spec-table {
  min-width: 1100px;
}

.matrix-cell-spec-table th:first-child,
.matrix-cell-spec-table td:first-child {
  width: auto;
  min-width: 320px;
  white-space: normal;
}

.matrix-cell-spec-table td:nth-child(2) {
  width: auto;
}

.matrix-cell-spec-table td:nth-child(2),
.matrix-cell-spec-table td:nth-child(3),
.matrix-cell-spec-table td:nth-child(4) {
  min-width: 220px;
  font-weight: 400;
}

.matrix-cell-spec-table td:nth-child(4) {
  min-width: 190px;
}

.matrix-cell-spec-table small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 400;
}

.matrix-artifact-groups {
  display: grid;
  gap: 8px;
}

.matrix-artifact-group {
  display: grid;
  gap: 5px;
}

.matrix-artifact-group > strong {
  color: #334155;
  font-size: 12px;
}

.matrix-artifact-group ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.matrix-artifact-group li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
  padding: 4px 6px;
  border: 1px solid #d8e3f3;
  border-radius: 5px;
  background: #ffffff;
}

.matrix-artifact-table {
  flex: 0 0 auto;
}

.matrix-artifact-table summary {
  min-width: 54px;
  padding: 4px 8px;
  border: 1px solid #b6c8e5;
  border-radius: 5px;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
  cursor: pointer;
  list-style: none;
}

.matrix-artifact-table summary::-webkit-details-marker {
  display: none;
}

.matrix-artifact-table table {
  margin-top: 6px;
  min-width: 260px;
  border-collapse: collapse;
  background: #ffffff;
}

.matrix-artifact-table th,
.matrix-artifact-table td {
  padding: 5px 7px;
  border: 1px solid #d8e3f3;
  font-size: 12px;
  vertical-align: top;
}

.matrix-artifact-table th {
  width: 92px;
  color: var(--muted);
  text-transform: none;
}

.matrix-row,
.matrix-fact {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #ffffff;
}

.matrix-row span,
.matrix-row small {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.matrix-one-line-list {
  display: grid;
  gap: 6px;
}

.matrix-row.matrix-one-line-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) minmax(130px, .7fr) minmax(110px, .5fr) minmax(260px, 2fr);
  align-items: center;
  gap: 12px;
}

.matrix-row.matrix-business-data-row,
.matrix-row.matrix-attribute-row {
  grid-template-columns: minmax(180px, 1fr) minmax(150px, .7fr) minmax(120px, .55fr) minmax(260px, 1.7fr) auto;
}

.matrix-row.matrix-one-line-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.matrix-fact strong {
  overflow-wrap: anywhere;
}

.matrix-board-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 520px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #d8e3f3;
  border-radius: 6px;
  background: #ffffff;
}

.matrix-backbone-section {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #c8d7ee;
  border-radius: 8px;
  background: #fbfdff;
}

.matrix-backbone-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.matrix-backbone-heading h3,
.matrix-backbone-heading p {
  margin: 0;
}

.matrix-backbone-heading span {
  padding: 6px 10px;
  border: 1px solid #c8d7ee;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.matrix-backbone-board th:first-child {
  min-width: 300px;
}

.matrix-backbone-board thead th:not(:first-child) {
  min-width: 220px;
}

.matrix-empty-cell {
  display: block;
  color: #94a3b8;
  text-align: center;
}

.matrix-backbone-cell-button {
  display: grid;
  width: 100%;
  min-height: 66px;
  align-content: center;
  gap: 4px;
  padding: 8px;
  border-color: #93c5fd;
  background: #eff6ff;
  text-align: left;
}

.matrix-backbone-cell-button strong,
.matrix-backbone-cell-button small {
  display: block;
}

.matrix-backbone-cell-button small {
  color: #1d4ed8;
  font-size: 12px;
}

.matrix-backbone-cell-button .matrix-cell-list {
  gap: 4px;
}

.matrix-backbone-cell-button .matrix-cell-list li {
  font-size: 12px;
}

.matrix-backbone-cell-button .matrix-cell-list div {
  min-width: 0;
}

.matrix-cell-start {
  display: inline-block;
  margin-right: 4px;
  color: #0f766e;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.matrix-backbone-cell-button.selected {
  border-color: #1d4ed8;
  background: #dbeafe;
}

.matrix-backbone-detail {
  border: 1px solid #d9e3f2;
  border-radius: 8px;
  background: #fff;
}

.matrix-backbone-detail-card {
  display: grid;
  gap: 12px;
  padding: 12px;
}

.matrix-backbone-detail-heading {
  display: grid;
  gap: 4px;
}

.matrix-backbone-detail-heading span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.matrix-backbone-detail-heading h3,
.matrix-backbone-detail-heading p {
  margin: 0;
}

.matrix-backbone-ipo {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 10px;
}

.matrix-backbone-ipo article {
  padding: 10px;
  border: 1px solid #d9e3f2;
  border-radius: 8px;
  background: #f8fbff;
}

.matrix-backbone-ipo h4 {
  margin: 0 0 8px;
  font-size: 13px;
}

.matrix-backbone-ipo p {
  margin: 6px 0 0;
  color: var(--muted);
}

.matrix-board {
  min-width: 1180px;
  width: max-content;
  border-collapse: collapse;
  font-size: 13px;
}

.matrix-board th,
.matrix-board td {
  min-width: 150px;
  max-width: 220px;
  padding: 10px;
  border: 1px solid #d8e3f3;
  vertical-align: top;
  text-align: left;
}

.matrix-board thead th,
.matrix-board tbody th {
  position: sticky;
  z-index: 1;
  background: #f1f5fb;
}

.matrix-board thead th {
  top: 0;
  z-index: 2;
}

.matrix-board tbody th {
  left: 0;
  min-width: 240px;
  z-index: 1;
}

.matrix-board thead th:first-child {
  left: 0;
  z-index: 3;
}

.matrix-board th strong,
.matrix-board td strong,
.matrix-board th small,
.matrix-board td small {
  display: block;
}

.matrix-board .matrix-process-group {
  display: block;
  margin-bottom: 5px;
  color: #5f6f8b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.matrix-board .matrix-bc-label {
  display: block;
  margin-bottom: 5px;
  color: #5f6f8b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.matrix-board small {
  margin-top: 4px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.matrix-board td {
  color: var(--muted);
}

.matrix-board td.is-touched {
  color: #12213a;
  background: #eef6ff;
}

.matrix-cell-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.matrix-cell-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  font-weight: 700;
}

.matrix-cell-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  color: #0f3d7a;
  background: #dbeafe;
  font-size: 11px;
}

.muted-text {
  margin: 0 0 10px;
  color: var(--muted);
}

@media (max-width: 980px) {
  .matrix-flow,
  .matrix-checkpoints,
  .matrix-detail-grid,
  .matrix-definition-grid,
  .standard-ui-contract-strip {
    grid-template-columns: 1fr;
  }

  .insight-summary,
  .insight-grid,
  .insight-values {
    grid-template-columns: 1fr;
  }

  .panel-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .panel-heading-actions {
    justify-content: flex-start;
  }
}

body:not(.show-technical-support) .technical-support {
  display: none !important;
}
.incoming-view-updates-table {
  max-height: 32rem;
  overflow-y: auto;
  overflow-x: hidden;
}

.incoming-view-updates-table table {
  table-layout: fixed;
  width: 100%;
}

.incoming-view-updates-table th:nth-child(1) { width: 12rem; }
.incoming-view-updates-table th:nth-child(2) { width: auto; }
.incoming-view-updates-table th:nth-child(3) { width: 6rem; }
.incoming-view-updates-table th:nth-child(4) { width: 13rem; }
.incoming-view-updates-table th:nth-child(5) { width: 10rem; }

.incoming-view-updates-table td {
  overflow-wrap: anywhere;
}

.incoming-view-updates-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.incoming-view-update-detail pre {
  margin: 0;
  max-height: 22rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  text-align: left;
}