/* Design tokens — status colors align with object/attribute badge semantics. */
:root {
  --app-bg: #f0f2f5;
  --app-surface: #ffffff;
  --app-border: #d8dee6;
  --app-text: #1a2332;
  --app-muted: #5c6b7a;
  --app-primary: #1e5a8a;
  --app-primary-light: #e8f1f8;
  --app-primary-hover: #174a70;
  --app-primary-active: #133d5c;
  --bs-primary: var(--app-primary);
  --bs-primary-rgb: 30, 90, 138;
  --bs-primary-text-emphasis: var(--app-primary-active);
  --bs-primary-bg-subtle: var(--app-primary-light);
  --bs-primary-border-subtle: #b3cfe0;
  --bs-link-color: var(--app-primary);
  --bs-link-hover-color: var(--app-primary-hover);
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb), 0.25);
  --status-equal: #1a7f4b;
  --status-equal-bg: #e6f4ec;
  --status-diff: #b45309;
  --status-diff-bg: #fef3c7;
  --status-partial: #9a6700;
  --status-partial-bg: #fff4d6;
  --status-missing: #c2410c;
  --status-missing-bg: #ffedd5;
  --font-ui: "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Cascadia Code", "Consolas", "Liberation Mono", monospace;
  --app-panel-radius: 0.5rem;
  --app-panel-border: 1px solid var(--app-border);
  --app-panel-shadow: 0 0.125rem 0.35rem rgba(26, 35, 50, 0.075);
  --tool-tabs-sticky-offset: 0px;
  /* Above Bootstrap .dropdown-menu (1000), below .modal (1055). */
  --app-z-sticky-subbar: 1020;
  --app-z-sticky-tool-tabs: 1030;
}

/* Align Bootstrap primary controls with --app-primary (Bootstrap hardcodes #0d6efd in places). */
.btn-primary {
  --bs-btn-bg: var(--app-primary);
  --bs-btn-border-color: var(--app-primary);
  --bs-btn-hover-bg: var(--app-primary-hover);
  --bs-btn-hover-border-color: var(--app-primary-hover);
  --bs-btn-active-bg: var(--app-primary-active);
  --bs-btn-active-border-color: var(--app-primary-active);
  --bs-btn-disabled-bg: var(--app-primary);
  --bs-btn-disabled-border-color: var(--app-primary);
}

.form-check-input:checked {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
}

.form-check-input:focus-visible {
  border-color: rgba(var(--bs-primary-rgb), 0.55);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-check-input:focus:not(:focus-visible) {
  box-shadow: none;
  border-color: var(--bs-border-color);
}

.form-check-input:checked:focus:not(:focus-visible) {
  border-color: var(--app-primary);
}

/* Bootstrap paints switch knobs blue on :focus — reset after mouse click. */
.form-switch .form-check-input {
  --form-switch-bg-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
  --form-switch-bg-off-hover: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%280, 0, 0, 0.38%29'/%3e%3c/svg%3e");
  --form-switch-bg-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  --form-switch-bg-focus: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%235a94c4'/%3e%3c/svg%3e");
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-switch .form-check-input:hover:not(:disabled):not(:focus-visible) {
  border-color: rgba(var(--bs-primary-rgb), 0.45);
}

.form-switch .form-check-input:not(:checked):hover:not(:disabled):not(:focus-visible) {
  --bs-form-switch-bg: var(--form-switch-bg-off-hover);
}

.form-switch .form-check-input:checked:hover:not(:disabled):not(:focus-visible) {
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
}

.form-switch .form-check-input:focus:not(:focus-visible) {
  --bs-form-switch-bg: var(--form-switch-bg-off);
}

.form-switch .form-check-input:checked:focus:not(:focus-visible) {
  --bs-form-switch-bg: var(--form-switch-bg-on);
}

.form-switch .form-check-input:focus-visible {
  --bs-form-switch-bg: var(--form-switch-bg-focus);
}

.form-switch .form-check-input:checked:focus-visible {
  --bs-form-switch-bg: var(--form-switch-bg-on);
}

.form-control:focus-visible,
.form-select:focus-visible {
  border-color: rgba(var(--bs-primary-rgb), 0.55);
  box-shadow: 0 0 0 0.25rem var(--bs-focus-ring-color);
}

.form-control:focus:not(:focus-visible),
.form-select:focus:not(:focus-visible) {
  border-color: var(--bs-border-color);
  box-shadow: none;
  outline: none;
}

/* Hide spinner arrows on number inputs (typing and keyboard still work). */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Focus rings only for keyboard navigation — not after mouse click. */
:where(
  .btn,
  .btn-link,
  .nav-link,
  .form-check-input,
  .multi-select-toggle,
  .settings-toggle,
  .file-remove-btn,
  .file-compare-toggle,
  .file-col-header--settable
):focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}

* {
  box-sizing: border-box;
}

body {
  background: var(--app-bg);
  color: var(--app-text);
  font-family: var(--font-ui);
  min-height: 100vh;
}

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  color: var(--app-primary);
  background: var(--app-primary-light);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}

.app-header {
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  margin-bottom: 1.5rem;
}

.app-footer {
  background: var(--app-surface);
  margin-top: 1rem;
}

.app-version-note {
  white-space: nowrap;
}

.app-footer-reset,
.macro-params-reset {
  font-size: inherit;
  line-height: inherit;
  color: var(--bs-secondary-color);
  text-decoration: none;
  vertical-align: baseline;
}

.app-footer-reset:hover,
.app-footer-reset:focus-visible,
.macro-params-reset:hover,
.macro-params-reset:focus-visible {
  color: var(--bs-body-color);
  text-decoration: underline;
}

.app-title {
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.app-subtitle {
  color: var(--app-muted);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

.section-heading {
  font-size: 1.1rem;
  font-weight: 600;
}

.upload-section.card,
#workspacePanel.card,
#settingsSection.card,
#mappingSettingsSection.card,
#macroParamsSection.card,
#macroPreviewSection.card,
#macroSasSection.card,
.macro-sas-card.card {
  border: var(--app-panel-border) !important;
  border-radius: var(--app-panel-radius);
  box-shadow: var(--app-panel-shadow);
}

.upload-section.card,
#workspacePanel.card {
  overflow: hidden;
}

/* Filter dropdowns use Popper positioning and must not be clipped by the panel. */
#settingsSection.card,
#settingsSection .collapse,
#settingsSection .card-body,
#mappingSettingsSection.card,
#mappingSettingsSection .collapse,
#mappingSettingsSection .card-body {
  overflow: visible;
}

#settingsSection.card,
#mappingSettingsSection.card,
#macroParamsSection.card,
#macroPreviewSection.card,
#macroSasSection.card,
.macro-sas-card.card {
  background: var(--app-surface);
}

#settingsSection.card > .card-header,
#mappingSettingsSection.card > .card-header,
.macro-collapsible-card.card > .card-header {
  border-top-left-radius: var(--app-panel-radius);
  border-top-right-radius: var(--app-panel-radius);
}

#settingsSection:has(#settingsPanel:not(.show)) > .card-header,
#mappingSettingsSection:has(#mappingSettingsPanel:not(.show)) > .card-header,
.macro-collapsible-card:has(> .collapse:not(.show)) > .card-header {
  border-bottom-left-radius: var(--app-panel-radius);
  border-bottom-right-radius: var(--app-panel-radius);
}

#settingsSection .collapse.show > .card-body,
#mappingSettingsSection .collapse.show > .card-body,
.macro-collapsible-card > .collapse.show > .card-body {
  border-bottom-left-radius: var(--app-panel-radius);
  border-bottom-right-radius: var(--app-panel-radius);
}

.upload-section .card-body {
  background: var(--app-surface);
}

.drop-zone {
  border: 2px dashed var(--app-border);
  border-radius: 0.25rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  background: #fafbfc;
}

.drop-zone:hover,
.drop-zone:focus-visible,
.drop-zone.drag-over {
  border-color: var(--app-primary);
  background: var(--app-primary-light);
  outline: none;
}

.drop-zone-title {
  font-size: 1.1rem;
  font-weight: 600;
}

.workspace-panel.card {
  background: var(--app-surface);
}

.workspace-program-label {
  font-size: 1.05rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.workspace-panel-selection {
  line-height: 1.4;
}

.program-picker-dialog {
  max-width: min(98vw, 88rem);
}

.program-picker-body {
  padding-top: 0.75rem;
}

.collection-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.collection-meta-line {
  flex: 1 1 auto;
  min-width: 0;
}

.collection-toolbar #collectionPickerRow {
  flex: 0 0 auto;
}

.program-picker-footer {
  border-top: 1px solid var(--app-border);
}

#programPickerModal .collection-matrix thead th {
  top: 0;
}

#programPickerModal .table-responsive {
  overflow-x: auto;
  overflow-y: visible;
  max-height: none;
}

/* Parsed filename: version primary */
.file-display {
  min-width: 0;
}

.file-display-version {
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.files-list-measure {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  white-space: nowrap;
}

.file-card-count {
  font-size: 0.75rem;
  color: var(--app-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.file-card-count-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.35rem;
  min-height: 1.1rem;
}

.file-card-count-row .file-card-count {
  margin-top: 0;
  min-width: max-content;
}

.file-card-count-row.text-danger .file-card-count {
  color: var(--status-diff);
}

.tabular-nums {
  font-variant-numeric: tabular-nums;
}

.summary-card {
  background: var(--app-surface);
  border: var(--app-panel-border);
  border-radius: var(--app-panel-radius);
  box-shadow: var(--app-panel-shadow);
  padding: 1rem 1.25rem;
  height: 100%;
}

.summary-card .value {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}

.summary-card .label {
  font-size: 0.8rem;
  color: var(--app-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.summary-card.equal .value { color: var(--status-equal); }
.summary-card.diff .value { color: var(--status-diff); }
.summary-card.partial .value { color: var(--status-partial); }

.compare-results-panel {
  border: var(--app-panel-border);
  border-radius: var(--app-panel-radius);
  box-shadow: var(--app-panel-shadow);
  background: var(--app-surface);
  --result-tabs-offset: 3.5rem;
}

.result-tabs-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0 1rem 0 0.75rem;
  position: sticky;
  top: var(--tool-tabs-sticky-offset, 0px);
  z-index: var(--app-z-sticky-subbar);
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  border-radius: var(--app-panel-radius) var(--app-panel-radius) 0 0;
}

.result-tabs-bar .compare-tabs {
  position: relative;
  z-index: 2;
  border-bottom: none;
  margin-bottom: -1px;
}

#resultTabContent.card {
  border-radius: 0 0 var(--app-panel-radius) var(--app-panel-radius);
}

/* Page scroll: no overflow clip on ancestors (breaks sticky thead). */
#objectsPanel > .table-responsive,
#attributesPanel > .table-responsive,
.mapping-preview-content > .table-responsive {
  overflow: visible;
}

.result-tabs-actions {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
  min-width: 0;
  flex-shrink: 0;
}

.result-tabs-actions-divider {
  width: 1px;
  align-self: stretch;
  min-height: 1.75rem;
  background: var(--app-border);
  flex-shrink: 0;
}

.result-settings-dropdown .result-settings-toggle {
  display: inline-flex;
  align-items: center;
}

.result-tabs-actions .result-settings-dropdown + .result-settings-dropdown {
  margin-left: 0.35rem;
}

.result-settings-menu {
  min-width: 20rem;
  border-color: var(--app-border);
  box-shadow: 0 0.35rem 1rem rgba(26, 35, 50, 0.1);
}

.result-compare-settings-menu {
  min-width: 16rem;
}

/* Filter/options dropdowns: height follows viewport; scroll-fade hints at overflow. */
.viewport-scroll-menu {
  padding: 0 !important;
  background-color: var(--app-surface);
  overflow: hidden;
}

.viewport-scroll-menu-shell {
  position: relative;
  overflow: hidden;
}

.viewport-scroll-menu-inner {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(26, 35, 50, 0.28) transparent;
}

.viewport-scroll-menu .viewport-scroll-menu-inner {
  padding-block: 0.75rem;
  padding-inline: 0.75rem;
}

.result-settings-menu.viewport-scroll-menu .viewport-scroll-menu-inner {
  padding-inline: 0.5rem;
}

.viewport-scroll-menu-inner::-webkit-scrollbar {
  width: 0.5rem;
}

.viewport-scroll-menu-inner::-webkit-scrollbar-track {
  margin-block: 0.3rem;
  background: transparent;
}

.viewport-scroll-menu-inner::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background-color: rgba(26, 35, 50, 0.24);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.viewport-scroll-fade {
  position: absolute;
  left: 0;
  right: 0;
  height: 0.75rem;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.viewport-scroll-fade--top {
  top: 0;
  border-top-left-radius: var(--bs-border-radius);
  border-top-right-radius: var(--bs-border-radius);
  background: linear-gradient(to bottom, var(--app-surface), transparent);
}

.viewport-scroll-fade--bottom {
  bottom: 0;
  border-bottom-left-radius: var(--bs-border-radius);
  border-bottom-right-radius: var(--bs-border-radius);
  background: linear-gradient(to top, var(--app-surface), transparent);
}

.viewport-scroll-menu[data-scroll-fade-top] .viewport-scroll-fade--top {
  opacity: 1;
}

.viewport-scroll-menu[data-scroll-fade-bottom] .viewport-scroll-fade--bottom {
  opacity: 1;
}

.result-settings-tab-hidden {
  display: none !important;
}

.result-settings-group + .result-settings-group {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--app-border);
}

.result-settings-menu > .result-settings-group:first-child,
.result-settings-menu .viewport-scroll-menu-inner > .result-settings-group:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.result-settings-group-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color);
  padding: 0.1rem 0.55rem 0.3rem;
}

.result-settings-hint {
  font-size: 0.78rem;
  line-height: 1.35;
  padding: 0 0.55rem;
}

.result-settings-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0;
  padding: 0.4rem 0.55rem;
  padding-left: 0.55rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.result-settings-option + .result-settings-option {
  margin-top: 0.15rem;
}

.result-settings-radio-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0;
  padding: 0.35rem 0.55rem;
  border-radius: 0.375rem;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

.result-settings-radio-option + .result-settings-radio-option {
  margin-top: 0.1rem;
}

.result-settings-radio-option:hover {
  background: rgba(26, 35, 50, 0.04);
}

.result-settings-radio-option .form-check-input {
  margin-top: 0.15rem;
  margin-left: 0;
  float: none;
  flex-shrink: 0;
}

.result-settings-radio-option .form-check-label {
  cursor: pointer;
  user-select: none;
  padding-left: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  flex: 1;
}

.result-settings-option:hover {
  background: rgba(26, 35, 50, 0.04);
}

.result-settings-option .form-check-input {
  margin-top: 0;
  margin-left: 0;
  float: none;
  flex-shrink: 0;
}

.result-settings-option .form-check-label {
  cursor: pointer;
  user-select: none;
  padding-left: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  flex: 1;
}

.result-settings-field {
  padding: 0.15rem 0.55rem 0.45rem;
}

.result-settings-field + .result-settings-field {
  margin-top: 0.1rem;
}

.result-settings-field .form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
  padding-left: 0;
  color: var(--app-text);
}

.result-settings-field .form-select {
  font-size: 0.8125rem;
}

.result-tabs-search {
  margin-left: 0;
  margin-bottom: 0;
  flex-shrink: 0;
  min-width: 0;
}

.compare-tabs {
  border-bottom-color: var(--app-border);
}

.compare-tabs .nav-link:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}

.compare-tabs .nav-link:focus-visible {
  box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color);
  outline: none;
}

.compare-tabs .nav-link {
  color: var(--app-muted);
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1.25rem;
}

.compare-tabs .nav-link.active {
  color: var(--app-primary);
  border-bottom-color: var(--app-primary);
  background: transparent;
}

.compare-tabs .badge {
  background: var(--app-border);
  color: var(--app-text);
  font-weight: 500;
}

.compare-tabs .nav-link.active .badge {
  background: var(--app-primary);
  color: #fff;
}

.compare-table {
  font-size: 0.875rem;
  --sticky-expand-width: 2rem;
  --uid-indent-step: 1rem;
  --uid-text-base: 0.5rem;
  --uid-tree-elbow-gap: 0.35rem;
  --uid-tree-guide-color: rgba(26, 35, 50, 0.14);
  --uid-tree-guide-width: 1px;
  --compare-row-hover-bg: rgba(26, 35, 50, 0.035);
  --compare-col-hover-bg: rgba(26, 35, 50, 0.04);
  --compare-row-col-hover-bg: rgba(26, 35, 50, 0.06);
  --sticky-uid-edge-shadow: 2px 0 4px -2px rgba(26, 35, 50, 0.1);
}

/* Sticky headers keep file columns visible while scrolling long result sets. */
.compare-table thead th {
  background: #f8f9fb;
  border-bottom-width: 1px;
  font-weight: 600;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 2;
  box-shadow: 0 1px 0 var(--app-border);
}

#objectsPanel > .table-responsive > .compare-table thead th,
#attributesPanel > .table-responsive > .compare-table thead th {
  top: var(--result-tabs-offset, 3.5rem);
  z-index: 3;
}

.mapping-preview-content > .table-responsive > .compare-table thead th {
  top: var(--mapping-preview-offset, 3.5rem);
  z-index: 3;
}

/* Sticky first column(s) on horizontal scroll */
.compare-table .sticky-col-expand {
  position: sticky;
  left: 0;
  z-index: 1;
  width: var(--sticky-expand-width);
  min-width: var(--sticky-expand-width);
  max-width: var(--sticky-expand-width);
  background: inherit;
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 0.25rem;
}

.compare-table .sticky-col-uid {
  position: sticky;
  left: var(--sticky-expand-width, 0);
  z-index: 1;
  background: inherit;
  box-shadow: var(--sticky-uid-edge-shadow);
}

.compare-table thead th.sticky-col-expand,
.compare-table thead th.sticky-col-uid,
.compare-table thead th.sticky-col-export {
  z-index: 4;
  background: #f8f9fb;
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, transparent);
}

.compare-table thead th.sticky-col-uid,
.compare-table thead th.sticky-col-export {
  box-shadow:
    inset 0 0 0 9999px var(--bs-table-bg-state, transparent),
    var(--sticky-uid-edge-shadow);
}

#objectsPanel > .table-responsive > .compare-table thead th.sticky-col-expand,
#objectsPanel > .table-responsive > .compare-table thead th.sticky-col-uid,
#attributesPanel > .table-responsive > .compare-table thead th.sticky-col-expand,
#attributesPanel > .table-responsive > .compare-table thead th.sticky-col-uid {
  z-index: 6;
}

.compare-table tbody tr .sticky-col-expand,
.compare-table tbody tr .sticky-col-uid,
.compare-table tbody tr .sticky-col-export {
  background: var(--app-surface);
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, transparent);
}

.compare-table tbody tr .sticky-col-uid,
.compare-table tbody tr .sticky-col-export {
  box-shadow:
    inset 0 0 0 9999px var(--bs-table-bg-state, transparent),
    var(--sticky-uid-edge-shadow);
}

/* Attributes table has no expand column — UID sticks at left edge */
.compare-table:not(:has(.sticky-col-expand)) {
  --sticky-expand-width: 0;
}

.compare-table:not(:has(.sticky-col-expand)):not(:has(.sticky-col-export)) .sticky-col-uid {
  left: 0;
}

.compare-table tbody tr {
  cursor: default;
}

/* Skip layout/paint for off-screen rows; sticky cells remain on painted rows. */
.compare-table tbody > tr:not(.detail-row) {
  content-visibility: auto;
  contain-intrinsic-size: auto 2.5rem;
}

.table-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--app-border);
  background: var(--app-surface);
  border-radius: 0 0 0.5rem 0.5rem;
}

#resultTabContent .table-pagination .btn {
  border-radius: 0.375rem;
}

/* Scroll sentinel for infinite-style table pagination (IntersectionObserver target). */
.compare-table tr.table-load-sentinel,
.compare-table tr.table-load-sentinel td {
  height: 1px;
  padding: 0;
  margin: 0;
  border: none;
  line-height: 0;
  pointer-events: none;
  visibility: hidden;
  content-visibility: visible;
}

.compare-table tbody tr.expandable {
  cursor: pointer;
}

/* Row + column hover via Bootstrap inset overlay (--bs-table-bg-state). */
.compare-table.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--compare-row-hover-bg);
}

.compare-table th.col-hover,
.compare-table td.col-hover {
  --bs-table-bg-state: var(--compare-col-hover-bg);
}

.compare-table.table-hover > tbody > tr:hover > .col-hover {
  --bs-table-bg-state: var(--compare-row-col-hover-bg);
}

.uid-cell {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.82rem;
  width: 15ch;
  min-width: 15ch;
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.compare-table thead th.uid-header {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.82rem;
  width: 15ch;
  min-width: 15ch;
  max-width: 15ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-align: left;
}

.uid-cell.uid-cell--hierarchy {
  width: auto;
  min-width: 15ch;
  max-width: none;
  padding-left: var(--uid-text-base);
}

.uid-cell.uid-cell--hierarchy:not([data-depth="0"]) {
  padding-left: calc(
    var(--uid-text-base) + var(--uid-indent-step) * var(--uid-depth, 0)
  );
}

/* Stage A: one vertical guide per ancestor level (depth-only, no sibling logic). */
.uid-cell.uid-cell--hierarchy::before {
  content: '';
  position: absolute;
  left: var(--uid-text-base);
  top: 0;
  bottom: 0;
  width: calc(var(--uid-indent-step) * var(--uid-depth, 0));
  background: repeating-linear-gradient(
    to right,
    var(--uid-tree-guide-color) 0,
    var(--uid-tree-guide-color) var(--uid-tree-guide-width),
    transparent var(--uid-tree-guide-width),
    transparent var(--uid-indent-step)
  );
  pointer-events: none;
}

.uid-cell.uid-cell--hierarchy:not([data-depth="0"])::after {
  content: '';
  position: absolute;
  left: calc(var(--uid-text-base) + var(--uid-indent-step) * (var(--uid-depth, 0) - 1));
  top: 50%;
  width: calc(var(--uid-indent-step) - var(--uid-tree-elbow-gap));
  border-top: var(--uid-tree-guide-width) solid var(--uid-tree-guide-color);
  pointer-events: none;
}

.compare-table.compare-table--hierarchy-indent .sticky-col-uid {
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, transparent);
}

.compare-table.compare-table--hierarchy-indent thead th.uid-header {
  width: auto;
  min-width: 15ch;
  max-width: none;
  padding-left: var(--uid-text-base);
}

.compare-table.compare-table--hierarchy-indent tbody tr .uid-cell.uid-cell--hierarchy::before,
.compare-table.compare-table--hierarchy-indent tbody tr .uid-cell.uid-cell--hierarchy::after {
  opacity: 1;
}

.compare-table.compare-table--hierarchy-indent tbody tr:hover .uid-cell.uid-cell--hierarchy::before,
.compare-table.compare-table--hierarchy-indent tbody tr:hover .uid-cell.uid-cell--hierarchy::after {
  --uid-tree-guide-color: rgba(26, 35, 50, 0.18);
}

.component-cell {
  color: var(--app-muted);
  font-size: 0.8rem;
}

.attribute-diff-cell {
  font-size: 0.8rem;
  vertical-align: top;
  max-width: 14rem;
}

.attribute-diff-cell--count {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.attribute-diff-cell--list {
  line-height: 1.45;
}

.attribute-diff-name {
  display: inline-block;
  font-size: 0.72rem;
  margin: 0 0.2rem 0.2rem 0;
  padding: 0.05rem 0.3rem;
  background: var(--bs-secondary-bg);
  border-radius: 0.2rem;
  white-space: nowrap;
}

.label-cell {
  color: var(--app-text);
  font-size: 0.8rem;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-mismatch-icon {
  color: #c99700;
  font-size: 0.75rem;
  margin-left: 0.2rem;
  vertical-align: 0.05em;
  cursor: help;
}

.json-repair-icon {
  color: var(--app-primary);
  font-size: 0.8rem;
  margin-left: 0.25rem;
  vertical-align: 0.05em;
  cursor: help;
  flex-shrink: 0;
  line-height: 1;
}

.status-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25em 0.6em;
  border-radius: 2rem;
  white-space: nowrap;
}

.status-badge.equal {
  background: var(--status-equal-bg);
  color: var(--status-equal);
}

.status-badge.diff {
  background: var(--status-diff-bg);
  color: var(--status-diff);
}

.status-badge.partial {
  background: var(--status-partial-bg);
  color: var(--status-partial);
}

.presence-dot {
  display: inline-block;
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  margin: 0 0.15rem;
}

.presence-dot.yes {
  background: var(--status-equal);
}

.presence-dot.no {
  background: #c5cdd6;
}

.attr-value {
  word-break: break-word;
  display: block;
}

.attr-value.attr-value--code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  white-space: pre-wrap;
}

.attr-value.attr-value--html {
  font-family: inherit;
  font-size: inherit;
  white-space: normal;
}

.attr-value.attr-value--html > :first-child {
  margin-top: 0;
}

.attr-value.attr-value--html > :last-child {
  margin-bottom: 0;
}

/* Main attribute tab only — applied via JS when "Werte kürzen" is on */
.attr-value.attr-value--truncate {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: normal;
}

.attr-value.attr-value--expanded {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Attribute tab: click row to expand truncated values */
.compare-table tbody tr.attr-row-expandable {
  cursor: pointer;
}

.compare-table tbody tr.attr-row-expanded {
  background: rgba(26, 35, 50, 0.03);
}

.compare-table tbody tr.attr-row-expanded .sticky-col-uid {
  background: rgba(26, 35, 50, 0.03);
}

.multi-select-dropdown .multi-select-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.multi-select-dropdown .multi-select-toggle--active {
  border-color: var(--app-primary);
  background-color: var(--app-primary-light);
  color: var(--app-primary);
  box-shadow: inset 0 0 0 1px rgba(30, 90, 138, 0.08);
}

.multi-select-dropdown .multi-select-toggle--active:hover,
.multi-select-dropdown .multi-select-toggle--active:focus-visible {
  border-color: var(--app-primary);
  background-color: #dceaf4;
  color: var(--app-primary-hover);
}

.multi-select-dropdown .multi-select-toggle:focus:not(:focus-visible) {
  box-shadow: none;
}

.multi-select-dropdown .multi-select-toggle--active .multi-select-summary {
  font-weight: 600;
}

.filter-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.filter-selection-count {
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--app-muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-selection-count--active {
  color: var(--app-primary);
  font-weight: 600;
}

.filter-label--active {
  color: var(--app-primary);
}

.multi-select-dropdown .multi-select-toggle::after {
  margin-left: auto;
}

.multi-select-summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}

.multi-select-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.25rem 0.5rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--app-border);
  font-size: 0.8125rem;
}

.multi-select-action {
  text-decoration: none;
  line-height: 1.2;
}

.multi-select-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.25rem 0.35rem;
  border-radius: 0.25rem;
  width: 100%;
  cursor: pointer;
}

.multi-select-option .form-check-input {
  float: none;
  flex-shrink: 0;
  margin-left: 0;
  margin-top: 0.2em;
}

.multi-select-option:hover {
  background: #f8f9fb;
}

.multi-select-option .form-check-label {
  flex: 1;
  min-width: 0;
  width: auto;
  cursor: pointer;
  font-size: 0.875rem;
}

.attr-value.attr-value--pseudo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.attr-compare-cell.changed {
  background: color-mix(in srgb, var(--status-diff-bg) 65%, #ffffff);
}

.attr-compare-cell.missing {
  background: color-mix(in srgb, var(--status-missing-bg) 62%, #ffffff);
}

.attr-compare-cell.added {
  background: color-mix(in srgb, #e0f2fe 70%, #ffffff);
}

.attr-compare-cell.changed .attr-value {
  color: var(--status-diff);
}

.attr-compare-cell.missing .attr-value {
  color: var(--status-missing);
  font-style: italic;
}

.attr-compare-cell.added .attr-value {
  color: #075985;
}

/* Reference diff pills in version columns */
.transition-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-width: 2.35rem;
  padding: 0.1rem 0.35rem;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
  border: 1px solid var(--app-border);
  background: #fff;
  color: var(--app-text);
}

.transition-pill.equal {
  background: var(--status-equal-bg);
  color: var(--status-equal);
  border-color: rgba(26, 127, 75, 0.25);
}

.transition-pill.changed {
  background: var(--status-diff-bg);
  color: var(--status-diff);
  border-color: #fcd34d;
}

.transition-pill.added {
  background: #e0f2fe;
  color: #075985;
  border-color: rgba(7, 89, 133, 0.25);
}

.transition-pill.removed {
  background: var(--status-missing-bg);
  color: var(--status-missing);
  border-color: #fdba74;
}

.detail-row td {
  background: #f8f9fb;
  padding: 0.75rem 1rem;
}

.detail-attr-table-wrap {
  margin-top: 0.25rem;
}

.detail-attr-table thead th {
  position: static;
}

.ignore-diff-btn {
  white-space: nowrap;
}

.ignore-diff-btn-cell {
  width: 1%;
  white-space: nowrap;
}

.detail-raw-table .detail-raw-cell {
  vertical-align: top;
  min-width: 14rem;
}

.detail-raw-table .detail-raw-pre {
  margin: 0;
  font-size: 0.75rem;
  max-height: 320px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 0.25rem;
  padding: 0.5rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.detail-row pre {
  margin: 0;
  font-size: 0.75rem;
  max-height: 200px;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 0.25rem;
  padding: 0.5rem;
}

.ignore-diff-value-pre {
  margin: 0;
  font-size: 0.75rem;
  max-height: 7.5rem;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--app-border);
  border-radius: 0.25rem;
  padding: 0.5rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.ignore-rules-search {
  min-width: 12rem;
}

.ignore-rules-filter {
  width: auto;
  min-width: 10rem;
}

.ignore-rules-effect-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.22);
  border-radius: var(--app-panel-radius);
  background: linear-gradient(180deg, var(--app-primary-light) 0%, #f5f8fb 100%);
  box-shadow: var(--app-panel-shadow);
}

.ignore-rules-effect-banner-text {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
  font-size: 0.875rem;
  color: var(--app-text);
  line-height: 1.4;
}

.ignore-rules-effect-icon {
  margin-top: 0.1rem;
  color: var(--app-primary);
  flex-shrink: 0;
}

.ignore-rules-effect-link {
  flex-shrink: 0;
  font-weight: 600;
  text-decoration: none;
}

.ignore-rules-effect-link:hover {
  text-decoration: underline;
}

.ignore-rules-manage-modal .modal-header {
  align-items: flex-start;
  gap: 1rem;
}

.ignore-rules-manage-modal .modal-header .btn-close {
  margin-top: 0.15rem;
}

.ignore-rules-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.ignore-rules-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.85rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid rgba(var(--bs-primary-rgb), 0.22);
  border-radius: var(--app-panel-radius);
  background: linear-gradient(180deg, var(--app-primary-light) 0%, #f4f8fb 100%);
}

.ignore-rules-bulk-count {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--app-primary-active);
}

.ignore-rules-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ignore-rules-manage-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ignore-rules-manage-empty {
  padding: 1.25rem 0.25rem;
  text-align: center;
}

.ignore-rule-group {
  border: 1px solid var(--app-border);
  border-radius: var(--app-panel-radius);
  background: var(--app-surface);
  box-shadow: var(--app-panel-shadow);
  overflow: hidden;
}

.ignore-rule-group-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--app-border);
  border-left: 3px solid var(--app-border);
  background: #f7f9fb;
}

.ignore-rule-group--group .ignore-rule-group-header {
  border-left-color: var(--app-primary);
  background: linear-gradient(90deg, rgba(var(--bs-primary-rgb), 0.08) 0%, #f7f9fb 42%);
}

.ignore-rule-group--global .ignore-rule-group-header {
  border-left-color: #5b6b7c;
  background: linear-gradient(90deg, rgba(91, 107, 124, 0.1) 0%, #f7f9fb 42%);
}

.ignore-rule-group--session .ignore-rule-group-header {
  border-left-color: var(--status-partial);
  background: linear-gradient(90deg, rgba(154, 103, 0, 0.1) 0%, #f7f9fb 42%);
}

.ignore-rule-group-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--app-text);
  line-height: 1.3;
}

.ignore-rule-group-hint {
  margin-top: 0.15rem;
  font-size: 0.75rem;
  color: var(--app-muted);
  line-height: 1.35;
}

.ignore-rule-group-count {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--app-muted);
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--app-border);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  line-height: 1.4;
}

.ignore-rule-group-body {
  display: flex;
  flex-direction: column;
}

.ignore-rule-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid rgba(216, 222, 230, 0.7);
  background: #fff;
  transition: background-color 0.12s ease;
}

.ignore-rule-group-body .ignore-rule-item:last-child {
  border-bottom: 0;
}

.ignore-rule-item:hover {
  background: #fafbfd;
}

.ignore-rule-item.is-disabled {
  opacity: 0.62;
}

.ignore-rule-item.is-disabled .ignore-rule-attr code {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.ignore-rule-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.ignore-rule-attr code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--app-text);
  background: transparent;
  padding: 0;
}

.ignore-rule-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.ignore-rule-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--app-muted);
  background: #eef2f6;
  border: 1px solid rgba(26, 35, 50, 0.06);
  border-radius: 0.3rem;
  padding: 0.12rem 0.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ignore-rule-change {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 0.4rem;
  margin-top: 0.1rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid rgba(26, 35, 50, 0.06);
  border-radius: 0.3rem;
  background: #f6f8fa;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.35;
}

.ignore-rule-change-from,
.ignore-rule-change-to {
  min-width: 0;
  max-height: 3.2rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--app-text);
}

.ignore-rule-change-arrow {
  margin-top: 0.1rem;
  color: var(--app-muted);
  font-size: 0.75rem;
}

.ignore-rule-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.1rem;
}

.ignore-rule-actions .ignore-rule-delete {
  padding: 0.2rem 0.4rem;
  line-height: 1;
}

.ignore-rules-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ignore-rule-meta {
  font-size: 0.75rem;
  color: var(--app-muted);
}

.ignore-rule-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.75rem;
  max-height: 4.5rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8f9fb;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0.25rem;
  padding: 0.35rem 0.5rem;
}

#ignoreDiffModal .modal-content,
#ignoreRulesManageModal .modal-content {
  border: 1px solid rgba(15, 23, 42, 0.14);
  box-shadow: 0 1.25rem 2.5rem rgba(15, 23, 42, 0.24), 0 0.25rem 0.75rem rgba(15, 23, 42, 0.14);
}

.modal-backdrop.show {
  background-color: rgba(2, 6, 23, 0.62) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--app-muted);
}

.empty-state i {
  font-size: 2.5rem;
  color: var(--status-equal);
  display: block;
  margin-bottom: 0.75rem;
}

.search-group {
  width: 220px;
}

/* Collection controls: aligned with result-tabs-actions (Anzeige | Typen | Suche). */
.collection-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem;
  min-width: 0;
}

.collection-controls-divider {
  width: 1px;
  align-self: stretch;
  min-height: 1.75rem;
  background: var(--app-border);
  flex-shrink: 0;
}

.collection-types-filter {
  flex: 0 0 auto;
  max-width: 10rem;
}

.collection-types-filter .multi-select-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  max-width: 10rem;
}

.collection-programme-search.search-group {
  width: 220px;
  max-width: 100%;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .collection-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .collection-meta-line,
  .collection-toolbar #collectionPickerRow {
    flex: 1 1 100%;
  }

  .collection-controls {
    justify-content: stretch;
  }

  .collection-controls-divider {
    display: none;
  }

  .collection-types-filter,
  .collection-programme-search.search-group,
  .collection-display-settings-dropdown {
    flex: 1 1 100%;
    width: 100%;
  }
}

.settings-toggle .settings-chevron {
  transition: transform 0.2s;
}

.settings-toggle[aria-expanded="false"] .settings-chevron,
#settingsSection:has(#settingsPanel:not(.show)) .settings-chevron,
#mappingSettingsSection:has(#mappingSettingsPanel:not(.show)) .settings-chevron,
.macro-collapsible-card:has(> .collapse:not(.show)) .settings-chevron,
.macro-input-group--collapsible:has(> .collapse:not(.show)) .settings-chevron {
  transform: rotate(-90deg);
}

.mapping-filter-custom-switch .form-check-label {
  color: var(--app-muted);
  user-select: none;
}

.mapping-filter-coupled .multi-select-toggle {
  opacity: 0.72;
}

#mappingSettingsSection .settings-toggle.mapping-filter-panel-toggle--disabled {
  pointer-events: none;
  opacity: 0.45;
}

.mapping-filter-hint {
  margin: 0;
  padding: 0.55rem 0.75rem;
  border-radius: 0.375rem;
  background: #f8f9fb;
  border: 1px solid var(--app-border);
  line-height: 1.45;
}

/* Horizontal file strip: alphabetical filename order. */
#filesListHome {
  position: relative;
}

.files-list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.35rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

.file-list-item {
  display: flex;
  flex-direction: column;
  background: var(--app-surface);
  border: var(--app-panel-border);
  border-radius: var(--app-panel-radius);
  box-shadow: var(--app-panel-shadow);
  transition: border-color 0.15s, box-shadow 0.15s;
  flex: 0 0 var(--file-card-width, auto);
  width: var(--file-card-width, auto);
  min-width: 120px;
  scroll-snap-align: start;
  overflow: hidden;
}

.file-list-item.disabled .file-list-item-content {
  opacity: 0.55;
}

.file-list-item-error {
  border-color: var(--status-diff-bg);
}

.file-list-item-body {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.file-list-item-header {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  flex: 1;
  min-height: 0;
  padding: 0.5rem 0.45rem 0.35rem 0.45rem;
}

.file-list-item-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
  min-width: 0;
  padding-right: 0.1rem;
}

.file-compare-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  min-height: 2rem;
  margin-top: auto;
  flex-shrink: 0;
  padding: 0.3rem 0.45rem;
  border: none;
  border-top: 1px solid var(--app-border);
  background: var(--app-primary-light);
  color: var(--app-primary);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.1s;
}

.file-compare-toggle:hover {
  background: #dceaf4;
  color: var(--app-primary-hover);
}

.file-compare-toggle--on:hover {
  background: #d0e3f0;
}

.file-list-item.disabled .file-compare-toggle {
  background: #f3f5f7;
  color: var(--app-muted);
}

.file-list-item.disabled .file-compare-toggle:hover {
  background: #e8ecef;
  color: var(--app-text);
}

.file-compare-toggle:active {
  transform: scale(0.96);
}

.file-remove-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--app-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s, transform 0.1s;
}

.file-remove-btn::before {
  content: '';
  position: absolute;
  inset: -0.625rem;
}

.file-remove-btn:hover {
  background: rgba(26, 35, 50, 0.06);
  color: var(--app-text);
}

.file-remove-btn:active {
  transform: scale(0.96);
}

.compare-table .file-col-header {
  vertical-align: bottom;
  min-width: 7rem;
}

.file-col-header-inner {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  line-height: 1.2;
}

.file-col-version {
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
}

.file-col-header-inner--compare {
  gap: 0.1rem;
}

.file-col-compare-from {
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--bs-secondary-color);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.file-col-header--baseline {
  position: relative;
  background: var(--app-primary-light);
}

.file-col-baseline-marker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  font-size: 0.52rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--app-primary);
  background: rgba(30, 90, 138, 0.14);
  border-radius: 0 0 0.2rem 0.2rem;
  padding: 0.08rem 0.35rem;
  white-space: nowrap;
}

.file-col-header--baseline .file-col-baseline-marker {
  pointer-events: none;
}

.file-col-header--settable {
  cursor: pointer;
  transition: background-color 0.15s;
}

.file-col-header--settable:hover,
.file-col-header--settable:focus-visible {
  background: rgba(30, 90, 138, 0.08);
}

.file-col-header--settable .file-col-baseline-set-hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}

.file-col-header--settable:hover .file-col-baseline-set-hint,
.file-col-header--settable:focus-visible .file-col-baseline-set-hint {
  opacity: 1;
}

.file-col-header--settable:focus-visible {
  outline: 2px solid var(--app-primary);
  outline-offset: -2px;
}

.min-w-0 {
  min-width: 0;
}

/* Tool-level tabs after loaded files */
.tools-section {
  scroll-margin-top: 1rem;
  min-width: 0;
  max-width: 100%;
}

.tool-tabs-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--app-border);
  position: sticky;
  top: 0;
  z-index: var(--app-z-sticky-tool-tabs);
  background: var(--app-bg);
  box-shadow: 0 1px 0 rgba(26, 35, 50, 0.04);
}

.tool-tabs {
  border-bottom: none;
}

.tool-tabs .nav-link {
  color: var(--app-muted);
  font-weight: 650;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  padding: 0.75rem 1rem;
}

.tool-tabs .nav-link:hover {
  color: var(--app-primary);
  border-bottom-color: rgba(var(--bs-primary-rgb), 0.25);
}

.tool-tabs .nav-link.active {
  color: var(--app-primary);
  background: transparent;
  border-bottom-color: var(--app-primary);
}

.tool-tab-content > .tab-pane {
  outline: none;
  min-width: 0;
  max-width: 100%;
}

#mappingToolPanel {
  min-width: 0;
  max-width: 100%;
}

/* getModelldaten mapping */
.mapping-results-panel {
  border: var(--app-panel-border);
  border-radius: var(--app-panel-radius);
  box-shadow: var(--app-panel-shadow);
  background: var(--app-surface);
  --mapping-preview-offset: 3.5rem;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.mapping-preview-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1rem;
  position: sticky;
  top: var(--tool-tabs-sticky-offset, 0px);
  z-index: var(--app-z-sticky-subbar);
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  border-radius: var(--app-panel-radius) var(--app-panel-radius) 0 0;
}

.mapping-search-hint {
  flex: 1 1 100%;
  font-size: 0.78rem;
  line-height: 1.35;
  padding-top: 0.1rem;
}

.mapping-preview-bar-title {
  min-width: 0;
}

.mapping-export-actions {
  flex-shrink: 0;
}

.mapping-export-actions .mapping-export-more-toggle {
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

.mapping-export-actions .mapping-export-more-toggle::after {
  margin-left: 0;
}

.mapping-export-more-menu {
  min-width: 11rem;
}

.mapping-export-more-menu .dropdown-item {
  display: flex;
  align-items: center;
}

.mapping-preview-content {
  border-radius: 0 0 var(--app-panel-radius) var(--app-panel-radius);
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

.mapping-preview-wrap {
  max-height: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  max-width: 100%;
  min-width: 0;
}

.mapping-table {
  min-width: 1280px;
  margin-bottom: 0;
}

.mapping-table thead th {
  vertical-align: middle;
}

.mapping-table tbody > tr:not(.detail-row) {
  content-visibility: auto;
  contain-intrinsic-size: auto 2.5rem;
}

.mapping-table.mapping-table--hide-component .mapping-col-component,
.mapping-table.mapping-table--hide-status .mapping-col-status,
.mapping-table.mapping-table--hide-note .mapping-col-note,
.mapping-table.mapping-table--hide-col-name .mapping-col-col-name,
.mapping-table.mapping-table--hide-col-label .mapping-col-col-label,
.mapping-table.mapping-table--hide-col-length .mapping-col-col-length,
.mapping-table.mapping-table--hide-rep-count .mapping-col-rep-count,
.mapping-table.mapping-table--hide-col-type .mapping-col-col-type,
.mapping-table.mapping-table--hide-col-format .mapping-col-col-format,
.mapping-table.mapping-table--hide-side-table .mapping-col-side-table {
  display: none !important;
}

#mappingSettingsPanel.collapsing {
  will-change: height;
}

.mapping-config-card {
  border: 1px solid var(--app-border);
  border-radius: var(--app-panel-radius);
  background: #fafbfc;
  padding: 1rem;
}

.mapping-config-card {
  min-width: 0;
}

.mapping-config-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
}

.mapping-config-subtitle {
  color: var(--app-muted);
  font-size: 0.78rem;
}

.mapping-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.mapping-switch-list {
  display: grid;
  gap: 0.45rem;
  margin-top: 0.9rem;
}

.mapping-preview-card {
  overflow: visible;
}

.mapping-version-list {
  display: grid;
  gap: 0.4rem;
  max-height: 11rem;
  overflow: auto;
  margin-top: 0.75rem;
  padding: 0.55rem;
  border: 1px solid var(--app-border);
  border-radius: 0.375rem;
  background: var(--app-surface);
}

.mapping-version-list--dropdown {
  margin: 0.15rem 0.55rem 0.45rem;
  margin-left: 1.65rem;
  max-height: 10rem;
}

.mapping-version-option {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.25rem 0.35rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.mapping-version-option .form-check-input {
  float: none;
  flex-shrink: 0;
  margin-left: 0;
  margin-top: 0.2em;
}

.mapping-version-option .form-check-label {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  padding-left: 0;
  font-size: 0.8125rem;
  line-height: 1.35;
  cursor: pointer;
  user-select: none;
}

.mapping-version-label {
  font-weight: inherit;
}

.mapping-conflict-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.mapping-repeat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0.5rem;
}

.mapping-repeat-group {
  border: 1px solid var(--app-border);
  border-radius: 0.375rem;
  background: #fafbfc;
  padding: 0.55rem 0.65rem;
}

.mapping-table {
  --sticky-expand-width: 2.5rem;
  --sticky-export-width: 4rem;
}

.mapping-table .sticky-col-expand {
  position: sticky;
  left: 0;
  z-index: 1;
  width: var(--sticky-expand-width);
  min-width: var(--sticky-expand-width);
  max-width: var(--sticky-expand-width);
  background: inherit;
  text-align: center;
  padding-left: 0.5rem;
  padding-right: 0.25rem;
}

.mapping-table .sticky-col-export {
  position: sticky;
  left: var(--sticky-expand-width, 0);
  z-index: 1;
  width: var(--sticky-export-width);
  min-width: var(--sticky-export-width);
  max-width: var(--sticky-export-width);
  background: inherit;
  box-shadow: var(--sticky-uid-edge-shadow);
}

.mapping-table .sticky-col-uid {
  left: calc(var(--sticky-expand-width, 0) + var(--sticky-export-width, 0));
  z-index: 1;
}

.compare-table.mapping-table tbody tr .sticky-col-expand,
.compare-table.mapping-table tbody tr .sticky-col-export,
.compare-table.mapping-table tbody tr .sticky-col-uid {
  background: var(--app-surface);
}

.compare-table.mapping-table tbody tr.mapping-row-conflict > td.sticky-col-expand,
.compare-table.mapping-table tbody tr.mapping-row-conflict > td.sticky-col-export,
.compare-table.mapping-table tbody tr.mapping-row-conflict > td.sticky-col-uid {
  background: #fff4f4;
}

.compare-table.mapping-table tbody tr.mapping-row-attention > td.sticky-col-expand,
.compare-table.mapping-table tbody tr.mapping-row-attention > td.sticky-col-export,
.compare-table.mapping-table tbody tr.mapping-row-attention > td.sticky-col-uid {
  background: #fff8eb;
}

.mapping-table tbody tr.mapping-expandable {
  cursor: pointer;
}

.mapping-preview-content > .table-responsive > .compare-table thead th.sticky-col-expand,
.mapping-preview-content > .table-responsive > .compare-table.mapping-table thead th.sticky-col-export,
.mapping-preview-content > .table-responsive > .compare-table thead th.sticky-col-uid,
.mapping-preview-content > .table-responsive > .compare-table.mapping-table thead th.sticky-col-export {
  z-index: 6;
}

.mapping-table thead th.uid-header,
.mapping-table tbody td.uid-cell.sticky-col-uid {
  padding-left: 1rem;
}

.mapping-table .uid-cell {
  min-width: 11rem;
  vertical-align: middle;
}

.mapping-table .component-cell,
.mapping-table thead th.component-header {
  vertical-align: middle;
}

.mapping-table thead th.uid-header {
  vertical-align: middle;
}

.mapping-table .mapping-status-cell,
.mapping-table thead th.mapping-status-header {
  width: 5.75rem;
  min-width: 5.75rem;
  max-width: 5.75rem;
  vertical-align: middle;
  white-space: nowrap;
  text-align: center;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
  box-sizing: border-box;
}

.mapping-table .mapping-cell-input:not(.mapping-icon-toggle-btn) {
  min-width: 7rem;
}

.mapping-table input[data-column="col_label"] {
  min-width: 16rem;
}

.mapping-table input[data-column="note"] {
  min-width: 12rem;
}

.mapping-table .mapping-cell-number {
  min-width: 0;
  width: 100%;
}

.mapping-table th.mapping-col-num,
.mapping-table td.mapping-col-num {
  width: 4.75rem;
  min-width: 4.75rem;
  max-width: 4.75rem;
  white-space: nowrap;
  text-align: left;
  vertical-align: middle;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.mapping-table td.mapping-col-num .mapping-cell-input {
  min-width: 0;
  width: 100%;
  text-align: left;
}

.mapping-table td.mapping-col-num .form-select {
  padding-left: 0.3rem;
  padding-right: 1.35rem;
  text-align: left;
  text-align-last: left;
}

.mapping-table .mapping-cell-input.form-select:focus:not(:focus-visible) {
  border-color: var(--bs-border-color);
  box-shadow: none;
  outline: none;
}

.mapping-table th.mapping-col-type,
.mapping-table td.mapping-col-type {
  width: 7.125rem;
  min-width: 7.125rem;
  max-width: 7.125rem;
}

.mapping-table th.mapping-col-format,
.mapping-table td.mapping-col-format {
  width: 8.75rem;
  min-width: 8.75rem;
  max-width: 8.75rem;
}

.mapping-table thead th:last-child,
.mapping-table tbody td:last-child {
  padding-right: 1rem;
}

.mapping-table tfoot td.mapping-export-footer-cell {
  padding: 0.75rem 1rem;
  background: #f8f9fb;
  border-top: 1px solid var(--app-border);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--app-muted);
  white-space: normal;
}

.mapping-export-footer-text {
  font-weight: 600;
  color: var(--bs-body-color);
}

.mapping-export-footer-hint {
  color: var(--app-muted);
}

.mapping-toggle-col,
.mapping-toggle-cell {
  width: 4rem;
  min-width: 4rem;
  max-width: 4rem;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  padding: 0.2rem;
}

.mapping-toggle-col {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.mapping-toggle-cell {
  font-size: 0.875rem;
}

.mapping-icon-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: calc(1.5em + 0.5rem + 2 * var(--bs-border-width, 1px));
  margin: 0;
  padding: 0.35rem;
  border: none;
  border-radius: 0.375rem;
  background: transparent;
  color: rgba(26, 35, 50, 0.14);
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.mapping-icon-toggle-btn .fa-solid {
  font-size: 1.15rem;
  pointer-events: none;
}

.mapping-icon-toggle-btn[aria-pressed="true"] {
  color: var(--app-primary);
}

.mapping-toggle-cell:hover .mapping-icon-toggle-btn[aria-pressed="false"],
.mapping-icon-toggle-btn[aria-pressed="false"]:hover {
  color: rgba(26, 35, 50, 0.42);
  background: rgba(26, 35, 50, 0.03);
}

.mapping-icon-toggle-btn[aria-pressed="true"]:hover {
  color: var(--app-primary-hover);
  background: rgba(30, 90, 138, 0.06);
}

.mapping-icon-toggle-btn.mapping-export-header-toggle[aria-pressed="mixed"] {
  color: rgba(30, 90, 138, 0.55);
}

.mapping-icon-toggle-btn.mapping-export-header-toggle[aria-pressed="mixed"] .fa-solid {
  opacity: 0.85;
}

.mapping-icon-toggle-btn:focus-visible {
  outline: 2px solid rgba(var(--bs-primary-rgb), 0.45);
  outline-offset: -2px;
}

.mapping-table tbody tr.mapping-row-not-exported > td {
  color: var(--app-muted);
}

.mapping-table tbody tr.mapping-row-not-exported > td .form-control,
.mapping-table tbody tr.mapping-row-not-exported > td .form-select {
  color: var(--app-muted);
  background-color: #f8f9fb;
  border-color: #e3e8ef;
}

.mapping-table tbody tr.mapping-row-not-exported > td .uid-cell {
  color: rgba(92, 107, 122, 0.88);
}

.mapping-table tbody tr.mapping-row-not-exported .mapping-icon-toggle-btn[aria-pressed="true"] {
  color: rgba(30, 90, 138, 0.55);
}

.mapping-row-not-exported {
  opacity: 0.58;
}

.mapping-row-conflict > td {
  background: #fff4f4;
}

.mapping-row-attention > td {
  background: #fff8eb;
}

.mapping-status-attention {
  cursor: help;
}

/* Collection matrix (programme rows x typ columns) — used in program picker modal */
.collection-matrix {
  border: var(--app-panel-border);
  border-radius: var(--app-panel-radius);
  /* Keep default compare-table sticky behavior intact. */
  overflow: visible;
}

.collection-clear-link:hover,
.collection-clear-link:focus-visible {
  color: var(--status-diff) !important;
}

/* Spacing between filters and matrix */
#collectionPickerRow > .d-flex {
  margin-bottom: 0.85rem !important;
}

.collection-matrix thead th {
  background: #f8f9fb;
  font-weight: 700;
  font-size: 0.82rem;
  white-space: nowrap;
  border-bottom: 1px solid var(--app-border);
}

.collection-matrix td,
.collection-matrix th {
  padding: 0.6rem 0.65rem;
  vertical-align: middle;
}

.collection-matrix .collection-matrix-programme {
  font-weight: 650;
  color: var(--app-text);
  white-space: nowrap;
  min-width: 28ch;
  max-width: none;
}

.collection-matrix-programme {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
}

.collection-cell-filtered-empty {
  color: var(--app-muted);
  font-size: 0.78rem;
  font-style: italic;
  text-align: center;
  vertical-align: middle;
  background: rgba(26, 35, 50, 0.025);
  white-space: normal;
}

.collection-matrix-row--types-hidden:hover .collection-cell-filtered-empty {
  background: rgba(26, 35, 50, 0.04);
}

.collection-programme-favorite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: 0.25rem;
  background: transparent;
  color: var(--app-muted);
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

.collection-programme-favorite:hover,
.collection-programme-favorite:focus-visible {
  color: var(--app-primary);
  background: var(--app-primary-light);
}

.collection-programme-favorite.is-favorite {
  color: var(--app-primary);
}

.collection-programme-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.collection-matrix-programme--favorite .collection-programme-label {
  font-weight: 650;
}

/* Programme header should match width too */
.collection-matrix thead th.uid-header.sticky-col-uid {
  min-width: 28ch;
  max-width: none;
}

.collection-matrix .collection-cell {
  cursor: pointer;
  text-align: center;
}

.collection-matrix .collection-cell.is-selected {
  background: var(--app-primary-light);
  box-shadow: inset 0 0 0 1px rgba(30, 90, 138, 0.25);
}

.collection-matrix .collection-cell .badge {
  font-variant-numeric: tabular-nums;
}

.collection-matrix .collection-cell-empty {
  color: var(--app-muted);
  text-align: center;
}

/* Sticky header + first column (programme) */
.collection-matrix thead th {
  position: sticky;
  top: 0;
  z-index: 6;
  box-shadow: 0 1px 0 var(--app-border);
}

.collection-matrix thead th:first-child {
  left: 0;
  z-index: 7;
  box-shadow:
    inset 0 0 0 9999px var(--bs-table-bg-state, transparent),
    0 1px 0 var(--app-border);
}

.collection-matrix tbody th {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--app-surface);
  box-shadow:
    inset 0 0 0 9999px var(--bs-table-bg-state, transparent),
    2px 0 4px -2px rgba(26, 35, 50, 0.1);
}

/* Match compare-table hover behavior (row + full column highlight) */
.collection-matrix.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: var(--compare-row-hover-bg);
}

.collection-matrix th.col-hover,
.collection-matrix td.col-hover {
  --bs-table-bg-state: var(--compare-col-hover-bg);
}

.collection-matrix.table-hover > tbody > tr:hover > .col-hover {
  --bs-table-bg-state: var(--compare-row-col-hover-bg);
}

@media (max-width: 768px) {
  .result-tabs-actions {
    width: 100%;
    margin-left: 0;
    flex-wrap: wrap;
  }

  .result-tabs-search.search-group {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* getModelldaten configuration tab */
.macro-group-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.macro-group-title:not(:first-child) {
  margin-top: 0.25rem;
}

.macro-group-divider {
  margin: 1.35rem 0 1.1rem;
  border: 0;
  border-top: 1px solid var(--app-border);
  opacity: 1;
}

.macro-section-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.5rem;
}

.macro-params-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.macro-input-group {
  background: #f3f5f7;
  border: 1px solid var(--app-border);
  border-radius: 0.65rem;
  padding: 0.9rem 1rem;
}

.macro-input-group > .macro-group-title,
.macro-input-group > .macro-section-header {
  margin-bottom: 0;
}

.macro-input-group .macro-section-body {
  padding-top: 0.75rem;
}

.macro-input-group--nested {
  background: var(--app-surface);
  margin-top: 0.95rem;
  padding: 0.8rem 0.9rem 0.9rem;
  border-radius: 0.5rem;
}

.macro-input-group--nested > .macro-section-header,
.macro-input-group--nested > .macro-group-title {
  margin-bottom: 0.55rem;
}

.macro-input-group--nested > .macro-group-title {
  font-size: 0.875rem;
  font-weight: 650;
}

.macro-group-toggle {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  width: 100%;
  min-height: 1.55rem;
  text-align: left;
}

.macro-group-toggle-heading {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  min-width: 0;
}

.macro-group-toggle .macro-group-title {
  margin-bottom: 0;
  flex: 0 0 auto;
}

.macro-group-toggle .settings-chevron {
  font-size: 0.8rem;
  width: 0.7rem;
  color: var(--app-muted);
  line-height: 1;
}

.macro-group-trace {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
  flex: 1 1 auto;
}

.macro-input-group--collapsible:has(> .collapse:not(.show):not(.collapsing)) .macro-group-trace:not([hidden]) {
  display: flex;
}

.macro-group-trace-chip {
  display: inline-block;
  max-width: 18rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--app-primary);
  background: var(--app-primary-light);
  border: 1px solid var(--bs-primary-border-subtle);
}

.macro-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.macro-field {
  --macro-label-width: 18rem;
  --macro-label-offset: 0.15rem;
  display: grid;
  grid-template-columns: minmax(10rem, var(--macro-label-width)) minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.3rem;
  align-items: start;
}

/* Classic fields have inner padding; offset the label to the text baseline. */
.macro-field:has(> .macro-field-control > :is(.form-control, .form-select, .input-group, textarea, select):first-child),
.macro-field:has(> .macro-field-control > .macro-gated-body:not(.d-none) > :is(.form-control, .form-select, .input-group, textarea, select):first-child) {
  --macro-label-offset: 0.5rem;
}

.macro-field-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  min-width: 0;
  padding-top: var(--macro-label-offset, 0.15rem);
  line-height: 1.3;
  text-align: right;
}

.macro-field-label .form-label {
  display: inline;
  margin: 0;
}

.macro-field-label .macro-help-btn {
  flex-shrink: 0;
}

.macro-field-control {
  min-width: 0;
}

.macro-field-control--xs {
  max-width: 6.5rem;
}

.macro-field-control--sm {
  max-width: 10.5rem;
}

.macro-field-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.55rem;
}

.macro-field-stack .form-check {
  min-height: 1.5rem;
  display: flex;
  align-items: center;
}

.macro-field-stack .form-check-input {
  margin-top: 0;
}

.macro-field-stack .form-check-label {
  margin-left: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
}

.macro-field-control--pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem 1rem;
  align-items: start;
}

.macro-control-slot {
  min-width: 0;
}

.macro-control-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 1.35rem;
  margin-bottom: 0.35rem;
}

.macro-control-caption {
  display: inline;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--app-muted);
  line-height: 1.3;
}

.macro-control-head .macro-help-btn {
  margin-left: 0.35rem;
}

.macro-field--switch {
  --macro-label-offset: 0px;
  align-items: center;
}

.macro-field--switch .macro-field-label {
  padding-top: 0;
}

.macro-field--switch .form-check {
  min-height: 1.5rem;
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.macro-field--switch .form-check-input {
  margin-top: 0;
}

.macro-form .macro-field .form-control,
.macro-form .macro-field .form-select,
.macro-form .macro-field .input-group,
.macro-form .macro-field .macro-uid-props,
.macro-form .macro-field .macro-clob-chunks,
.macro-form .macro-field .macro-uid-source,
.macro-form .macro-field .macro-rep-mode,
.macro-form .macro-field-control--pair .form-control {
  margin-top: 0;
}

.macro-field .macro-gated-note {
  margin-top: 0;
  padding-top: 0.45rem;
}

@media (max-width: 991.98px) {
  .macro-field {
    --macro-label-width: 14.5rem;
  }
}

@media (max-width: 767.98px) {
  .macro-field {
    grid-template-columns: minmax(0, 1fr);
  }

  .macro-field-label {
    padding-top: 0;
    justify-content: flex-start;
    text-align: left;
  }

  .macro-field-label .macro-rep-mode-toolbar {
    justify-content: flex-start;
  }

  .macro-field-control--pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .macro-field-control--xs,
  .macro-field-control--sm {
    max-width: none;
  }

  .macro-form .macro-field .form-control,
  .macro-form .macro-field .form-select,
  .macro-form .macro-field .input-group,
  .macro-form .macro-field .macro-uid-props,
  .macro-form .macro-field .macro-clob-chunks {
    margin-top: 0.35rem;
  }

  .macro-field--switch .form-check,
  .macro-field .macro-clob-chunks {
    margin-top: 0.15rem;
  }
}

.macro-section-header--sub {
  margin-top: 0.15rem;
}

.macro-section-header--sub .macro-group-title {
  font-size: 0.875rem;
  font-weight: 650;
}

.macro-section-header .macro-group-title {
  margin-bottom: 0;
}

.macro-section-header .form-check {
  padding-left: 2.2em;
  min-height: 1.25rem;
  display: flex;
  align-items: center;
}

.macro-section-header .form-check-input {
  margin-top: 0;
  cursor: pointer;
}

.macro-gated-block.is-compact-disabled {
  opacity: 0.72;
}

.macro-gated-block.is-compact-disabled .macro-gated-body {
  display: none;
}

.macro-gated-note {
  font-size: 0.8125rem;
  color: var(--app-muted);
  margin-top: 0.35rem;
}

.macro-subgroup-label {
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--app-muted);
  margin: 0.15rem 0 0;
  letter-spacing: 0.01em;
}

.macro-form .form-label,
.macro-form [data-macro-help-title].fw-semibold {
  display: inline;
  margin-bottom: 0;
}

.macro-form .form-control,
.macro-form .form-select,
.macro-form .macro-uid-props {
  margin-top: 0.35rem;
}

.macro-form .input-group {
  margin-top: 0.35rem;
}

.macro-form .input-group .form-control {
  margin-top: 0;
}

.macro-form .form-control::placeholder {
  color: var(--app-muted);
  opacity: 0.42;
}

.macro-form textarea.macro-id-list {
  min-height: 6.75rem;
  max-height: 14rem;
  overflow-y: auto;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.4;
  white-space: pre;
}

.macro-clob-chunks {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.35rem;
}

.macro-clob-chunks .form-range {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

.macro-clob-chunks-value {
  flex: 0 0 auto;
  min-width: 2.75rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--app-muted);
}

.macro-form .macro-field-feedback {
  margin-top: 0.25rem;
  margin-bottom: 0;
  font-size: 0.8125rem;
}

.macro-form .macro-field-warn {
  color: var(--bs-warning-text-emphasis, #997404);
}

.macro-form .is-macro-warn {
  border-color: var(--bs-warning, #ffc107);
}

.macro-form .macro-uid-source.is-invalid,
.macro-form .macro-uid-props.is-invalid {
  outline: 1px solid var(--bs-form-invalid-border-color, #dc3545);
  border-radius: 0.3rem;
  padding: 0.35rem 0.5rem;
}

.macro-form .macro-uid-source.is-macro-warn,
.macro-form .macro-uid-props.is-macro-warn {
  outline: 1px solid var(--bs-warning, #ffc107);
  border-radius: 0.3rem;
  padding: 0.35rem 0.5rem;
}

.macro-panel-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
}

.macro-panel-toggle .macro-group-title {
  margin: 0;
  flex: 1 1 auto;
}

.macro-collapsible-card.card {
  overflow: hidden;
}

.macro-collapsible-card .card-header .macro-group-title {
  margin: 0;
}

.macro-group-lead {
  color: var(--app-muted);
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.macro-sas-name {
  display: inline-block;
  margin-left: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--app-muted);
}

.macro-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0.45rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--app-muted);
  line-height: 1;
  vertical-align: -0.05em;
}

.macro-help-btn:hover,
.macro-help-btn:focus-visible {
  color: var(--app-primary);
}

.macro-help-btn:focus-visible {
  outline: 2px solid rgba(var(--bs-primary-rgb), 0.35);
  outline-offset: 2px;
  border-radius: 0.2rem;
}

.macro-field-disabled {
  opacity: 0.55;
}

.macro-field-disabled .form-label,
.macro-field-disabled .form-check-label {
  color: var(--app-muted);
}

.macro-form .form-check-input:disabled + .form-check-label {
  color: var(--app-muted);
}

.macro-form .form-control:disabled,
.macro-form .form-select:disabled {
  background-color: #f3f5f7;
  opacity: 1;
}

.macro-help-popover {
  --bs-popover-max-width: 26rem;
  font-size: 0.82rem;
}

.macro-help-popover .popover-body {
  color: var(--app-text);
}

.macro-help-popover .popover-body p:last-child {
  margin-bottom: 0;
}

.macro-help-section + .macro-help-section,
.macro-help-section + p {
  margin-top: 0.7rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--app-border);
}

.macro-help-section-title {
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--app-muted);
}

.macro-help-modes {
  margin: 0;
}

.macro-help-mode {
  margin: 0 0 0.45rem;
}

.macro-help-mode:last-child {
  margin-bottom: 0;
}

.macro-help-mode dt {
  margin: 0;
  font-weight: 650;
  color: var(--app-text);
  line-height: 1.3;
}

.macro-help-mode-code {
  margin-left: 0.25rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--app-muted);
}

.macro-help-mode dd {
  margin: 0.12rem 0 0;
  color: color-mix(in srgb, var(--app-text) 82%, var(--app-muted));
  line-height: 1.35;
}

.macro-help-points {
  margin: 0;
  padding-left: 1.05rem;
}

.macro-help-points li {
  margin-bottom: 0.3rem;
  line-height: 1.35;
}

.macro-help-points li:last-child {
  margin-bottom: 0;
}

.macro-form .form-text {
  color: var(--app-muted);
}

.macro-filter-matches {
  color: var(--app-muted);
  line-height: 1.45;
}

.macro-filter-matches-status {
  display: block;
  font-weight: 600;
  color: var(--app-text);
}

.macro-filter-matches.is-complete .macro-filter-matches-status {
  color: var(--status-equal);
}

.macro-filter-matches.is-partial .macro-filter-matches-status,
.macro-filter-matches.is-none .macro-filter-matches-status {
  color: var(--status-partial);
}

.macro-filter-matches-hits,
.macro-filter-matches-missed,
.macro-filter-matches-extra {
  display: block;
}

.macro-filter-matches-label {
  margin-right: 0.15rem;
}

.macro-filter-matches-missed .macro-filter-matches-label,
.macro-filter-matches-extra .macro-filter-matches-label {
  color: #7a5c00;
}

.macro-filter-match {
  display: inline-block;
  margin: 0.15rem 0.25rem 0 0;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--app-border);
  border-radius: 0.25rem;
  background: #f8f9fb;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--app-text);
}

.macro-filter-match.is-warn {
  border-color: #c9a027;
  background: #fff8e1;
  color: #7a5c00;
}

.macro-uid-source {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.75rem;
}

.macro-uid-source-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0.85rem 0.95rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-panel-radius);
  background: var(--app-surface);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.macro-uid-source-card:hover {
  border-color: color-mix(in srgb, var(--app-primary) 45%, var(--app-border));
}

.macro-uid-source-card:has(.macro-uid-source-input:checked) {
  border-color: var(--app-primary);
  box-shadow: inset 0 0 0 1px var(--app-primary);
  background: var(--app-primary-light);
}

.macro-uid-source-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.macro-uid-source-card-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
  font-size: 0.95rem;
  line-height: 1.25;
  color: var(--app-text);
}

.macro-uid-source-card-title::before {
  content: "";
  flex: 0 0 0.9rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 1.5px solid #adb5bd;
  background: var(--app-surface);
  box-shadow: inset 0 0 0 0 var(--app-primary);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.macro-uid-source-card:has(.macro-uid-source-input:checked) .macro-uid-source-card-title::before {
  border-color: var(--app-primary);
  box-shadow: inset 0 0 0 0.28rem var(--app-primary);
}

.macro-uid-source-card-text {
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--app-muted);
  padding-left: 1.4rem;
}

.macro-uid-output:not(.is-viz-off) {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.macro-uid-output.is-viz-off .macro-rep-mode-diagrams {
  display: none;
}

.macro-uid-source-card .macro-rep-mode-diagrams {
  margin-top: 0.45rem;
}

.macro-rep-mode-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex: 1 0 100%;
  margin: 0.4rem 0 0;
}

.macro-gated-block.is-compact-disabled .macro-rep-mode-toolbar {
  display: none;
}

.macro-rep-mode-viz-switch {
  display: flex;
  align-items: center;
  padding-left: 2.7em;
  min-height: 1.25rem;
}

.macro-rep-mode-viz-switch .form-check-input {
  margin-top: 0;
  cursor: pointer;
}

.macro-rep-mode-viz-switch .form-check-label {
  margin-left: 0.2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--app-muted);
  cursor: pointer;
}

.macro-gated-block.is-compact-disabled .macro-rep-mode-viz-switch {
  display: none;
}

.macro-rep-mode.is-viz-off .macro-rep-mode-diagrams {
  display: none;
}

.macro-rep-mode-scroller:has(.macro-rep-mode.is-viz-off) {
  overflow-x: hidden;
}

.macro-rep-mode.is-viz-off {
  width: 100%;
  flex-wrap: wrap;
}

.macro-rep-mode.is-viz-off .macro-rep-mode-card {
  flex: 1 1 0;
  min-width: 9.5rem;
  max-width: none;
}

.macro-rep-mode.is-viz-off .macro-rep-mode-card-note {
  display: block;
}

.macro-rep-mode-scroller {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 0.35rem;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.macro-rep-mode {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0.55rem;
  margin-top: 0.35rem;
  box-sizing: border-box;
  width: max-content;
  min-width: 100%;
}

.macro-rep-mode-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0;
  padding: 0.7rem 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-panel-radius);
  background: var(--app-surface);
  cursor: pointer;
  flex: 1 0 auto;
  min-width: max-content;
  scroll-snap-align: start;
  transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.macro-rep-mode-card:hover {
  border-color: color-mix(in srgb, var(--app-primary) 45%, var(--app-border));
}

.macro-rep-mode-card:has(.macro-rep-mode-input:checked) {
  border-color: var(--app-primary);
  box-shadow: inset 0 0 0 1px var(--app-primary);
  background: var(--app-primary-light);
}

.macro-rep-mode-card.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.macro-rep-mode-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.macro-rep-mode-card-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 650;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--app-text);
}

.macro-rep-mode-card-title::before {
  content: "";
  flex: 0 0 0.85rem;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  border: 1.5px solid #adb5bd;
  background: var(--app-surface);
  box-shadow: inset 0 0 0 0 var(--app-primary);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.macro-rep-mode-card:has(.macro-rep-mode-input:checked) .macro-rep-mode-card-title::before {
  border-color: var(--app-primary);
  box-shadow: inset 0 0 0 0.26rem var(--app-primary);
}

.macro-rep-mode-card-code {
  display: block;
  padding: 0 0 0.05rem 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--app-muted);
  background: none;
  border-radius: 0;
}

.macro-rep-mode-card:has(.macro-rep-mode-input:checked) .macro-rep-mode-card-code {
  color: var(--app-primary);
}

.macro-rep-mode-card-note {
  display: none;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--app-muted);
  padding-left: 1.3rem;
  white-space: normal;
}

.macro-rep-mode-diagrams {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.macro-rep-mode-table-title {
  font-size: 0.7rem;
  font-weight: 650;
  color: var(--app-text);
  margin-bottom: 0.2rem;
}

.macro-rep-mode-table.is-accent .macro-rep-mode-table-title {
  color: var(--app-primary);
}

.macro-rep-mode-table-scroll {
  position: relative;
  overflow: visible;
}

.macro-rep-mode-table table {
  --macro-demo-0: #0f6b5c;
  --macro-demo-1: #9a4a16;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  line-height: 1.2;
  border: 1px solid #b7c2cd;
  border-radius: 3px;
  overflow: hidden;
  background: var(--app-surface);
}

.macro-rep-mode-table th,
.macro-rep-mode-table td {
  border-right: 1px solid #d5dde5;
  border-bottom: 1px solid #d5dde5;
  padding: 0.16rem 0.28rem;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.macro-rep-mode-table th:last-child,
.macro-rep-mode-table td:last-child {
  border-right: 0;
}

.macro-rep-mode-table tbody tr:last-child td {
  border-bottom: 0;
}

.macro-rep-mode-table th {
  background: linear-gradient(#eef2f6, #e2e8ee);
  border-bottom: 2px solid #8fa0b0;
  color: #334554;
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.macro-rep-mode-table th.is-omitted {
  width: 0.85rem;
  min-width: 0.85rem;
  max-width: 0.95rem;
  padding-left: 0.08rem;
  padding-right: 0.08rem;
  text-align: center;
  letter-spacing: 0;
  color: #7b8b9a;
  background:
    linear-gradient(90deg, #d7dee6 0%, #eef2f6 55%, #e2e8ee 100%);
  box-shadow: inset 3px 0 0 #c2ccd6;
}

.macro-rep-mode-table td.is-omitted {
  width: 0.85rem;
  min-width: 0.85rem;
  max-width: 0.95rem;
  padding-left: 0.08rem;
  padding-right: 0.08rem;
  text-align: center;
  font-weight: 650;
  color: #9aa8b5 !important;
  opacity: 1;
  background:
    linear-gradient(90deg, #e4e9ee 0%, color-mix(in srgb, var(--app-surface) 70%, #eef2f6) 100%);
  box-shadow: inset 3px 0 0 #d0d8e0;
}

.macro-rep-mode-table th.is-context {
  color: #5c6b7a;
  background: linear-gradient(#f3f5f7, #e8ecf0);
  font-weight: 650;
}

.macro-rep-mode-table th.is-context.is-omitted {
  background:
    linear-gradient(90deg, #d7dee6 0%, #f3f5f7 55%, #e8ecf0 100%);
}

.macro-rep-mode-table th.is-focus {
  background: linear-gradient(#e4eef6, #d3e2ef);
  color: var(--app-primary-active);
  border-bottom-color: var(--app-primary);
}

.macro-rep-mode-table td.is-context {
  font-weight: 500;
  opacity: 0.78;
}

.macro-rep-mode-table td.is-focus {
  font-weight: 650;
}

.macro-rep-mode-table tr.is-demo-0 td {
  color: var(--macro-demo-0);
}

.macro-rep-mode-table tr.is-demo-1 td {
  color: var(--macro-demo-1);
}

.macro-rep-mode-table td.is-empty {
  color: transparent;
  background-color: color-mix(in srgb, var(--app-muted) 8%, var(--app-surface));
}

@media (max-width: 767.98px) {
  .macro-uid-source {
    grid-template-columns: 1fr;
  }
}

.macro-uid-props {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.macro-validation .alert {
  margin-bottom: 0.5rem;
}

.macro-sas-call-wrap {
  position: relative;
  border: 1px solid var(--app-border);
  border-radius: 0.35rem;
  background: var(--app-primary-light);
  overflow: hidden;
}

.macro-sas-copy {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.35rem 0.65rem;
  border: 0;
  border-left: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
  border-radius: 0 0 0 0.3rem;
  background: transparent;
  color: var(--app-primary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.2;
  appearance: none;
  cursor: pointer;
}

.macro-sas-copy:hover,
.macro-sas-copy:focus-visible {
  color: var(--app-primary-hover);
  background: color-mix(in srgb, var(--app-primary) 8%, var(--app-primary-light));
}

.macro-sas-copy:focus-visible {
  outline: 2px solid rgba(var(--bs-primary-rgb), 0.35);
  outline-offset: -2px;
}

.macro-sas-copy:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.macro-sas-copy.is-copied {
  color: var(--status-equal);
  background: var(--status-equal-bg);
}

.macro-sas-call {
  background: transparent;
  border: 0;
  border-radius: 0.35rem;
  padding: 0.75rem 5.25rem 0.75rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--app-text);
}

.macro-sas-call.is-blocked {
  opacity: 0.7;
}

.macro-preview-stale-hint {
  font-size: 0.84rem;
}

#macroPreviewSection.is-stale .macro-preview-stale-body {
  opacity: 0.42;
  filter: grayscale(0.2);
  transition: opacity 0.18s ease, filter 0.18s ease;
}

#macroPreviewSection:not(.is-stale) .macro-preview-stale-body {
  opacity: 1;
  filter: none;
  transition: opacity 0.18s ease, filter 0.18s ease;
}

.macro-preview-table-block + .macro-preview-table-block {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--app-border);
}

.macro-preview-table-title {
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
}

.macro-preview-meta {
  color: var(--app-muted);
  font-size: 0.8rem;
  margin: 0 0 0.65rem;
}

.macro-preview-wrap {
  overflow-x: auto;
  border: 1px solid var(--app-border);
  border-radius: 0.35rem;
}

.macro-preview-table {
  font-size: 0.78rem;
  margin-bottom: 0;
}

.macro-preview-table thead th {
  vertical-align: middle;
  background: var(--app-primary-light);
  border-bottom: 1px solid var(--app-border);
  min-width: 6.5rem;
  white-space: nowrap;
  font-weight: 600;
}

.macro-preview-table:not(.macro-preview-table--labels) thead th {
  font-family: var(--font-mono);
}

.macro-preview-table:not(.macro-preview-table--labels) thead tr:not(.macro-preview-group-row) th {
  text-transform: uppercase;
}

.macro-preview-table thead .macro-preview-group-row th {
  padding: 0.2rem 0.45rem 0.15rem;
  border-bottom: none;
  vertical-align: bottom;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--font-sans, inherit);
}

.macro-preview-group-gap {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  min-width: 0 !important;
}

.macro-preview-group-bar {
  background: color-mix(in srgb, var(--app-primary-light) 70%, var(--app-primary) 30%) !important;
  border: 1px solid color-mix(in srgb, var(--app-primary) 35%, var(--app-border)) !important;
  border-bottom: 2px solid var(--app-primary) !important;
  border-radius: 0.3rem 0.3rem 0 0;
  text-align: center;
  color: var(--app-primary);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.macro-preview-group-bar-label {
  display: inline-block;
  margin-right: 0.35rem;
}

.macro-preview-group-bar-meta {
  display: inline-block;
  font-weight: 600;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.macro-preview-table thead th.macro-col-indexed {
  background: color-mix(in srgb, var(--app-primary-light) 82%, var(--app-primary) 18%);
  border-top: none;
}

.macro-preview-table td.macro-col-indexed {
  background: color-mix(in srgb, var(--app-primary-light) 55%, transparent);
}

.macro-preview-table thead th.macro-col-indexed--start,
.macro-preview-table td.macro-col-indexed--start {
  border-left: 1px solid color-mix(in srgb, var(--app-primary) 28%, var(--app-border));
}

.macro-preview-table thead th.macro-col-indexed--end,
.macro-preview-table td.macro-col-indexed--end {
  border-right: 1px solid color-mix(in srgb, var(--app-primary) 28%, var(--app-border));
}

.macro-preview-table td {
  font-variant-numeric: tabular-nums;
  color: var(--app-muted);
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

.macro-preview-table td.macro-dummy-custom {
  outline: 1px dashed var(--status-partial);
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 6px,
    rgba(154, 103, 0, 0.06) 6px,
    rgba(154, 103, 0, 0.06) 12px
  );
}

.macro-preview-table .macro-col-ellipsis {
  color: var(--app-muted);
  font-style: italic;
  min-width: 5rem;
  background: #f6f7f9;
}

.macro-preview-table thead th.macro-col-ellipsis.macro-col-indexed {
  background: color-mix(in srgb, #f6f7f9 70%, var(--app-primary-light));
}

.macro-origin-badge {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--app-muted);
  text-transform: uppercase;
}

.macro-custom-badge {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--status-partial);
}

.macro-col-overview {
  padding: 0.5rem 0 0;
}

.macro-col-overview-table {
  font-size: 0.75rem;
}

.macro-col-overview-table code {
  font-size: 0.72rem;
}