/* Shared workspace primitives v1. Business templates and permissions stay separate. */
:root {
  --zx-action: #3457ef;
  --zx-action-hover: #2948d2;
  --zx-on-action: #ffffff;
  --zx-text: #24314d;
  --zx-muted: #606e83;
  --zx-border: #dce3ee;
  --zx-surface: #ffffff;
  --zx-table-heading: #f5f7fc;
  --zx-radius-control: 8px;
  --zx-radius-panel: 16px;
  --zx-control-height: 40px;
  --zx-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
/* Explicit existing component adapters; do not target all buttons or status badges. */
:is(.list-primary-action, .feature-primary, .list-query-actions button[type=submit]) {
  background: var(--zx-action);
  color: var(--zx-on-action);
  border: 1px solid transparent;
  border-radius: var(--zx-radius-control);
  min-height: var(--zx-control-height);
  padding: 9px 16px;
  font-family: var(--zx-font);
  font-weight: 650;
  box-shadow: none;
}
:is(.list-primary-action, .feature-primary, .list-query-actions button[type=submit]):hover {
  background: var(--zx-action-hover);
  color: var(--zx-on-action);
}
:is(.list-query, .feature-controls) :is(input, select),
:is(.feature-controls, .feature-pager, .list-query-actions) button {
  min-height: var(--zx-control-height);
  border: 1px solid var(--zx-border);
  border-radius: var(--zx-radius-control);
  background: var(--zx-surface);
  color: var(--zx-text);
  font-family: var(--zx-font);
}
:is(.record-panel, .feature-card) {
  background: var(--zx-surface);
  border: 1px solid var(--zx-border);
  border-radius: var(--zx-radius-panel);
}
:is(.record-table, #featureTable) th {
  background: var(--zx-table-heading);
  color: var(--zx-muted);
  font-weight: 650;
}
:is(.record-table, #featureTable) :is(th, td) {
  border-bottom-color: var(--zx-border);
}
:is(.list-primary-action, .feature-primary, .list-query input, .list-query select,
.feature-controls input, .feature-controls select, .feature-controls button,
.feature-pager button, .list-query-actions button):focus-visible {
  outline: 2px solid var(--zx-action);
  outline-offset: 3px;
}

/* Form and detail adapters. Preserve model-defined grids and control semantics. */
:root {
  --zx-readonly-surface: #f5f7fc;
  --zx-error: #b42318;
  --zx-field-gap: 6px;
}
:is(.customer-editor, .pf-editor, #featureForm, .feature-edit-form) label {
  color: var(--zx-text);
  font-family: var(--zx-font);
  font-size: 14px;
  gap: var(--zx-field-gap);
}
:is(.customer-editor, .pf-editor, #featureForm, .feature-edit-form)
:is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select, textarea) {
  width: 100%;
  min-width: 0;
  min-height: var(--zx-control-height);
  border: 1px solid var(--zx-border);
  border-radius: var(--zx-radius-control);
  padding: 9px 12px;
  background: var(--zx-surface);
  color: var(--zx-text);
  font: 14px/1.5 var(--zx-font);
}
:is(.customer-editor, .pf-editor, #featureForm, .feature-edit-form) textarea {
  min-height: 96px;
  resize: vertical;
}
:is(.customer-editor, .pf-editor, #featureForm, .feature-edit-form)
:is(input, select, textarea):is(:disabled, [readonly]) {
  background: var(--zx-readonly-surface);
  color: var(--zx-muted);
}
:is(.customer-editor, .pf-editor, #featureForm, .feature-edit-form)
:is(input, select, textarea):focus-visible {
  outline: 2px solid var(--zx-action);
  outline-offset: 3px;
}
.customer-editor button[type=submit], .pf-editor[data-form-command=amend_facts] button[type=submit],
.pf-editor[data-customer-application-edit] button[type=submit] {
  min-height: var(--zx-control-height);
  padding: 9px 16px;
  background: var(--zx-action);
  color: var(--zx-on-action);
  border: 1px solid transparent;
  border-radius: var(--zx-radius-control);
  font-weight: 650;
}
.customer-editor button[type=submit]:hover, .pf-editor[data-form-command=amend_facts] button[type=submit]:hover,
.pf-editor[data-customer-application-edit] button[type=submit]:hover {
  background: var(--zx-action-hover);
}
:is(.customer-summary, .pf-properties, .feature-detail-grid) dt {
  color: var(--zx-muted);
  font-size: 14px;
}
:is(.customer-summary, .pf-properties, .feature-detail-grid) dd {
  color: var(--zx-text);
  overflow-wrap: anywhere;
}
#featureState[data-kind=error] { color: var(--zx-error); }

:is(.customer-editor, .pf-editor[data-form-command=amend_facts], .pf-editor[data-customer-application-edit]) button[type=submit]:focus-visible {
  outline: 2px solid var(--zx-action);
  outline-offset: 3px;
}

/* Feature hierarchy: parent location and current child have different emphasis. */
#applicationNav .nav-feature-heading { display:flex; align-items:center; gap:4px; }
#applicationNav .nav-feature-heading .nav-link { flex:1; min-width:0; }
#applicationNav .nav-feature-toggle { width:32px; min-width:32px; min-height:36px; padding:4px; border:0; background:transparent; color:var(--zx-muted); }
#applicationNav .nav-feature-toggle[aria-expanded=true] span { display:inline-block; transform:rotate(180deg); }
#applicationNav .nav-link[aria-current=location] { color:var(--zx-action); font-weight:650; }
#applicationNav .nav-feature-children { border-left-color:var(--zx-border); }
#applicationNav .nav-feature-children[hidden] { display:none; }
#applicationNav .nav-feature-children a[aria-current=page] { color:var(--zx-action); font-weight:650; }
#applicationNav .nav-feature-toggle:focus-visible { outline:2px solid var(--zx-action); outline-offset:2px; }

/* Shared navigation primitives; authorization and grouping remain host-owned. */
:root {
  --zx-nav-active-surface: #e8edff;
  --zx-nav-hover-surface: #f0f3ff;
  --zx-nav-font-size: 13px;
}
:is(#managementNavigation, #applicationNav) { font-family:var(--zx-font); }
#managementNavigation .menu-children button,
#applicationNav :is(.nav-link, .nav-feature-children a, button[data-section]) {
  min-height:var(--zx-control-height);
  border-radius:var(--zx-radius-control);
  padding:9px 12px;
  font-size:var(--zx-nav-font-size);
  line-height:22px;
  color:var(--zx-text);
  box-shadow:none;
}
#managementNavigation .menu-children button[aria-current=page],
#applicationNav :is(.nav-link, .nav-feature-children a, button[data-section])[aria-current=page] {
  color:var(--zx-action);
  background:var(--zx-nav-active-surface);
  font-weight:650;
}
#managementNavigation .menu-children button:hover,
#applicationNav :is(.nav-link, .nav-feature-children a, button[data-section]):hover {
  background:var(--zx-nav-hover-surface);
  color:var(--zx-action);
}
#managementNavigation .menu-parent, #applicationNav .nav-domain-toggle {
  min-height:var(--zx-control-height);
  border-radius:var(--zx-radius-control);
  color:var(--zx-muted);
}
#managementNavigation .menu-parent-copy>span { font-size:var(--zx-nav-font-size); }
#managementNavigation .menu-children, #applicationNav :is(.nav-domain-items,.nav-feature-children) { border-left-color:var(--zx-border); }
#managementNavigation .menu-children button.active .menu-child-marker { background:var(--zx-action); border-color:var(--zx-action); box-shadow:none; }
:is(#managementNavigation,#applicationNav) :is(a,button):focus-visible { outline:2px solid var(--zx-action); outline-offset:2px; }

/* Versioned layout presets: same brand, different record density. */
[data-workspace-layout=standard], [data-layout-preview=standard] { --zx-row-padding:12px; }
[data-workspace-layout=compact], [data-layout-preview=compact] { --zx-row-padding:8px 12px; }
html[data-workspace-layout] #featureTable :is(th,td), [data-layout-preview] :is(th,td) { padding:var(--zx-row-padding); }
html[data-workspace-layout=compact] .feature-card { padding:16px; }
#layoutSettings { margin-top:20px; }
#layoutSettings label { display:grid; gap:8px; margin:16px 0 8px; }
#layoutSettings .feature-actions { flex-wrap:wrap; margin-bottom:20px; }
#layoutSettings button { min-height:40px; margin:4px 4px 4px 0; }
#layoutPreview { border:1px solid var(--zx-border); border-radius:var(--zx-radius-panel); padding:16px; margin-top:16px; }
#layoutPreview p { font-size:12px; color:var(--zx-muted); }
#layoutPreview table { width:100%; }

#layoutSettings button { border:1px solid var(--zx-border); border-radius:var(--zx-radius-control); background:var(--zx-surface); color:var(--zx-action); padding:9px 12px; font:600 13px var(--zx-font); cursor:pointer; }
#layoutSettings #layoutPublish { background:var(--zx-action); color:var(--zx-on-action); border-color:var(--zx-action); }
#layoutSettings button:disabled { background:var(--zx-readonly-surface); color:var(--zx-muted); border-color:var(--zx-border); cursor:not-allowed; }
#layoutSettings :is(button,select):focus-visible { outline:2px solid var(--zx-action); outline-offset:3px; }
#layoutDraft { color:var(--zx-muted); font-size:13px; }