*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

:root {
  --fr-nav: #1a4f73;
  --fr-nav-deep: #143d5a;
  --fr-panel-header: linear-gradient(180deg, #215a82 0%, #1a4f73 100%);
  --fr-page-bg: #d4d4d4;
  --fr-panel-border: #b0b0b0;
  --fr-accent: #c53030;

  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  color: #1a1a1a;
  background: var(--fr-page-bg);
}

body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--fr-page-bg);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.app {
  width: 100%;
  max-width: min(1920px, calc(100vw - 1.5rem));
  margin: 0 auto;
  padding: 0 clamp(0.75rem, 2.5vw, 2rem);
  padding-top: 0;
  padding-bottom: 0.75rem;
  box-sizing: border-box;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.app__header {
  flex-shrink: 0;
  margin: 0 calc(-1 * clamp(0.75rem, 2.5vw, 2rem)) 0.75rem;
  padding: 0.75rem clamp(0.75rem, 2.5vw, 2rem);
  background: linear-gradient(180deg, #1e5a82 0%, var(--fr-nav-deep) 100%);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  border-bottom: 3px solid rgba(0, 0, 0, 0.12);
}

.app__header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
}

.app__header__title h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.02em;
}

.app__header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.app__header .btn-icon {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.app__header .btn-icon:hover {
  background: rgba(255, 255, 255, 0.22);
}

.app__header button:not(.secondary):not(.btn-icon) {
  background: #fff;
  color: var(--fr-nav-deep);
  border-color: #fff;
  font-weight: 600;
}

.app__header button:not(.secondary):not(.btn-icon):hover {
  background: #f0f4f8;
}

.app__header button.secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.65);
}

.app__header button.secondary:hover {
  background: rgba(255, 255, 255, 0.1);
}

.app__header button.btn-login--connected {
  background: #15803d;
  border-color: #14532d;
  color: #fff;
  cursor: default;
  font-weight: 700;
}

.app__header button.btn-login--connected:hover {
  background: #166534;
}

.app__header button.btn-login--error {
  background: #fff;
  color: #b91c1c;
  border-color: #dc2626;
}

.app__header button.btn-login--error:hover {
  background: #fef2f2;
}

.help-popover {
  margin: 0;
  padding: 0;
  max-width: min(28rem, calc(100vw - 2rem));
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.help-popover::backdrop {
  background: rgba(0, 0, 0, 0.2);
}

.help-popover__title {
  margin: 0;
  padding: 0.65rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--fr-panel-header);
  color: #fff;
}

.help-popover__body {
  padding: 0.75rem 1.25rem 1.25rem;
}

.help-popover__body p {
  margin: 0 0 0.75rem;
}

.help-popover__body p:last-child {
  margin-bottom: 0;
}

.panel--hero .field-mapping-root {
  max-height: min(78vh, 56rem);
}

.app__tabs {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin-top: 0.75rem;
  margin-left: calc(-1 * clamp(0.75rem, 2.5vw, 2rem));
  margin-right: calc(-1 * clamp(0.75rem, 2.5vw, 2rem));
  padding-left: clamp(0.75rem, 2.5vw, 2rem);
  padding-right: clamp(0.75rem, 2.5vw, 2rem);
}

.app__tabs-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 0.5rem;
}

/*
 * Per-tab `display: flex` rules use IDs (#panel-mappings, #panel-schema). Those beat the
 * default [hidden] attribute display in the cascade, so inactive panels could stay visible.
 */
.app__tabs-panel[hidden] {
  display: none !important;
}

/* Mappings: no scroll on the tab shell — only sidebar list & editor body scroll */
#panel-mappings.app__tabs-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#panel-mappings .mappings-layout {
  flex: 1;
  min-height: 0;
  margin-top: 1rem;
  grid-template-rows: minmax(0, 1fr);
}

#panel-mappings .mappings-layout > .panel {
  min-height: 0;
  overflow: hidden;
}

#panel-mappings .mappings-layout__sidebar,
#panel-mappings .mappings-layout__editor {
  min-height: 0;
}

#panel-mappings .mappings-layout > .panel > .panel__head {
  min-height: 2.75rem;
  box-sizing: border-box;
}

#panel-mappings .mappings-layout > .panel > .panel__head h2 {
  line-height: 1.25;
}

#panel-mappings .field-mapping-root {
  max-height: none;
}

/* Sync: fill available tab height and keep list scrollable. */
#panel-sync.app__tabs-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#panel-sync .panel {
  flex: 1;
  min-height: 0;
  margin-top: 0;
  display: flex;
  flex-direction: column;
}

#panel-sync .sync-help-row {
  align-items: flex-start;
  gap: 0.45rem;
}

#panel-sync .sync-help-row__text {
  flex: 1;
  margin: 0;
}

#panel-sync .sync-entity-list-row {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#panel-sync .sync-entity-list {
  flex: 1;
  min-height: 0;
}

@media (max-width: 800px) {
  #panel-mappings.app__tabs-panel {
    overflow-y: auto;
  }

  #panel-sync.app__tabs-panel {
    overflow-y: auto;
  }
}

.app__tabs-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  flex-shrink: 0;
  margin: 0 calc(-1 * clamp(0.75rem, 2.5vw, 2rem));
  padding: 0.2rem clamp(0.75rem, 2.5vw, 2rem) 0;
  border: 1px solid var(--fr-panel-border);
  border-bottom: none;
  background: #e0e0e0;
  border-radius: 0;
}

.app__tabs-tab {
  margin: 0 0.15rem 0 0;
  background: transparent;
  color: #3f3f46;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 3px 3px 0 0;
  padding: 0.5rem 1.15rem;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.app__tabs-tab:hover {
  color: var(--fr-nav-deep);
  background: rgba(255, 255, 255, 0.45);
}

.app__tabs-tab[aria-selected="true"] {
  color: var(--fr-nav-deep);
  border-bottom-color: var(--fr-nav);
  background: #fff;
  box-shadow: 0 -1px 0 #fff;
}

.app__tabs-panel > .panel:first-child {
  margin-top: 0;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 1rem;
  background: var(--fr-panel-header);
  color: #fff;
  border-radius: 3px 3px 0 0;
}

.panel .panel__head h2 {
  margin: 0;
  flex: 1;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
}

.panel .panel__head .btn-icon {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.panel .panel__head .btn-icon:hover {
  background: rgba(255, 255, 255, 0.22);
}

.btn-icon--info {
  font-size: 0.7rem;
  font-weight: 800;
  font-style: italic;
  letter-spacing: -0.02em;
}

.muted {
  color: #52525b;
}

.small {
  font-size: 0.875rem;
}

.panel {
  background: #fff;
  border: 1px solid var(--fr-panel-border);
  border-radius: 4px;
  padding: 0;
  margin-top: 1rem;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.panel > h2 {
  margin: 0;
  padding: 0.55rem 1rem;
  background: var(--fr-panel-header);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.panel > h2 ~ *,
.panel > .panel__head ~ * {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.panel > h2 + *,
.panel > .panel__head + * {
  margin-top: 1rem;
}

.panel > *:last-child {
  margin-bottom: 1.15rem;
}

.panel > pre.output:last-child,
.panel > .output:last-child {
  margin-bottom: 1.25rem;
}

.row {
  margin-bottom: 0.75rem;
}

.row:last-child {
  margin-bottom: 0;
}

.row label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.row input,
.row select {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  font: inherit;
}

.row select {
  background: #fff;
}

.catalog-status {
  align-self: center;
}

.catalog-status-detail {
  width: 100%;
  margin-top: 0.3rem;
  color: #7f1d1d;
}

.catalog-status-detail summary {
  cursor: pointer;
  font-size: 0.75rem;
}

.catalog-status-detail__pre {
  margin: 0.3rem 0 0;
  padding: 0.45rem;
  border: 1px solid #fecaca;
  border-radius: 4px;
  background: #fef2f2;
  color: #111827;
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 10rem;
  overflow: auto;
}

.app-toast-host {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  pointer-events: none;
}

.app-toast {
  min-width: 18rem;
  max-width: min(30rem, calc(100vw - 2rem));
  border-radius: 8px;
  border: 1px solid #fecaca;
  background: #fff7ed;
  color: #7f1d1d;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  pointer-events: auto;
}

.app-toast--success {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #14532d;
}

.app-toast__text {
  flex: 1;
  font-size: 0.86rem;
  line-height: 1.35;
}

.app-toast__close {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0 0.1rem;
  font-size: 1rem;
  line-height: 1;
}

.registry-endpoint-pick-wrap {
  width: 100%;
}

.registry-endpoint-pick__label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.registry-endpoint-pick__lead {
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

.registry-endpoint-pick__toolbar {
  margin-bottom: 0.5rem;
  gap: 0.5rem;
}

.registry-endpoint-pick__list {
  width: 100%;
  max-width: 100%;
  min-height: 6.5rem;
  max-height: min(22rem, 55vh);
  overflow: auto;
  padding: 0.5rem;
  border: 1px solid #c5ccd6;
  border-radius: 8px;
  background: #eef1f5;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.5rem;
  align-content: start;
}

.registry-endpoint-pick__list > .registry-endpoint-pick__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 0.5rem 0;
}

.registry-endpoint-pick__item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid #c5ccd6;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  cursor: pointer;
  line-height: 1.3;
  transition:
    background 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.registry-endpoint-pick__item:hover {
  border-color: #8a96a8;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.registry-endpoint-pick__item:has(input:checked) {
  background: #e8f2fa;
  border-color: #6b9cc9;
  box-shadow: 0 0 0 1px rgba(107, 156, 201, 0.35);
}

.registry-endpoint-pick__item input {
  margin-top: 0.2rem;
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #2563eb;
}

.registry-endpoint-pick__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.registry-endpoint-pick__name {
  font-weight: 600;
  font-size: 0.875rem;
  color: #111827;
  word-break: break-word;
}

.registry-endpoint-pick__ver {
  font-size: 0.75rem;
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", monospace;
  color: #4b5563;
  letter-spacing: 0.02em;
}

.registry-endpoint-pick__empty {
  margin: 0;
}

.endpoint-entity-pick__list {
  width: 100%;
  max-width: 100%;
  min-height: 8rem;
  max-height: min(22rem, 50vh);
  overflow: auto;
  padding: 0.5rem;
  border: 1px solid #c5ccd6;
  border-radius: 8px;
  background: #eef1f5;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  align-content: start;
}

.endpoint-entity-pick__list.is-disabled {
  opacity: 0.65;
}

.endpoint-entity-pick__item {
  display: grid;
  grid-template-columns: 1.25rem minmax(10rem, 2.1fr) minmax(10rem, 2fr) minmax(4rem, 0.9fr) minmax(9rem, 1.4fr);
  grid-template-areas: "check entity endpoint count sync";
  align-items: center;
  column-gap: 0.55rem;
  width: 100%;
  margin: 0;
  padding: 0.45rem 0.6rem;
  border: 1px solid #c5ccd6;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  line-height: 1.3;
  overflow: hidden;
}

.endpoint-entity-pick__item:hover {
  border-color: #8a96a8;
  background: #f8fafc;
}

.endpoint-entity-pick__item:has(input:checked) {
  background: #e8f2fa;
  border-color: #6b9cc9;
  box-shadow: 0 0 0 1px rgba(107, 156, 201, 0.35);
}

.endpoint-entity-pick__item input {
  grid-area: check;
  margin-top: 0;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  accent-color: #2563eb;
}

.endpoint-entity-pick__text {
  grid-area: entity;
  min-width: 0;
  justify-self: stretch;
  display: block;
  font-size: 0.82rem;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.endpoint-entity-pick__endpoint {
  grid-area: endpoint;
  min-width: 0;
  justify-self: stretch;
  display: block;
  padding-left: 0.45rem;
  border-left: 1px solid #e5e7eb;
  font-size: 0.8rem;
  color: #334155;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.endpoint-entity-pick__head {
  display: grid;
  grid-template-columns: 1.25rem minmax(10rem, 2.1fr) minmax(10rem, 2fr) minmax(4rem, 0.9fr) minmax(9rem, 1.4fr);
  grid-template-areas: "check entity endpoint count sync";
  align-items: center;
  column-gap: 0.55rem;
  margin: 0 -0.5rem 0.2rem;
  padding: 0.2rem 1.1rem 0.3rem 0.6rem;
  position: sticky;
  top: -0.5rem;
  z-index: 4;
  background: #eef1f5;
  border-bottom: 1px solid #d6dde7;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}

.endpoint-entity-pick__head-cell {
  font-size: 0.72rem;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.endpoint-entity-pick__head-cell--check { grid-area: check; }
.endpoint-entity-pick__head-cell--entity { grid-area: entity; }
.endpoint-entity-pick__head-cell--endpoint { grid-area: endpoint; }
.endpoint-entity-pick__head-cell--count,
.endpoint-entity-pick__head-cell--sync {
  text-align: right;
}
.endpoint-entity-pick__head-cell--count { grid-area: count; }
.endpoint-entity-pick__head-cell--sync { grid-area: sync; }

.endpoint-entity-pick__count {
  grid-area: count;
  justify-self: end;
  display: block;
  padding-left: 0.45rem;
  border-left: 1px solid #e5e7eb;
  font-size: 0.78rem;
  color: #475569;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.endpoint-entity-pick__sync {
  grid-area: sync;
  justify-self: end;
  display: block;
  padding-left: 0.45rem;
  border-left: 1px solid #e5e7eb;
  font-size: 0.78rem;
  color: #475569;
  white-space: nowrap;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.endpoint-entity-pick__empty {
  margin: 0;
}

.sync-entity-list .sync-entity-pick__actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
}

.sync-entity-list .btn-sm {
  padding: 0.2rem 0.5rem;
  min-height: 1.6rem;
}

.sample-request__actions {
  margin-bottom: 0.5rem;
}

.panel-nested {
  margin: 0.75rem 0 1rem;
  padding: 0.85rem 1rem 1rem;
  background: #f4f6f8;
  border: 1px solid #d8dee6;
  border-radius: 6px;
}

.panel-nested__title {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fr-nav-deep);
}

.panel-nested__lead {
  margin: 0 0 0.75rem;
}

.panel-nested .row:last-of-type {
  margin-bottom: 0.35rem;
}

.endpoint-fields-details {
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.endpoint-fields-details summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--fr-nav-deep);
}

.endpoint-fields-list {
  max-height: min(280px, 40vh);
  overflow: auto;
  margin: 0.5rem 0 0;
  padding-left: 1.35rem;
  font-size: 0.8125rem;
  font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace;
  line-height: 1.45;
  color: #27272a;
}

.endpoint-fields-list li {
  margin-bottom: 0.2rem;
}

.row--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

button {
  font: inherit;
  padding: 0.45rem 0.95rem;
  border-radius: 4px;
  border: 1px solid var(--fr-nav-deep);
  background: var(--fr-nav);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

button:hover:not(:disabled) {
  background: var(--fr-nav-deep);
}

button.secondary {
  background: #fff;
  color: var(--fr-nav-deep);
  border-color: var(--fr-panel-border);
}

button.secondary:hover:not(:disabled) {
  background: #f4f4f5;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.output {
  margin: 0.75rem 0 0;
  padding: 0.75rem;
  max-height: min(48vh, 36rem);
  overflow: auto;
  font-size: 0.75rem;
  line-height: 1.4;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}

code {
  font-size: 0.85em;
  background: #f4f4f5;
  padding: 0.1em 0.35em;
  border-radius: 4px;
}

.base-url-readout {
  display: inline-block;
  margin-left: 0.35rem;
  word-break: break-all;
  font-size: 0.8125rem;
}

.textarea {
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  font: inherit;
  resize: vertical;
  min-height: 4rem;
}

.field-mapping-root {
  /* Sticky stack: column header row (top 0) → filter bar → nested group bands */
  --map-sticky-filter: 3.5rem;
  /* Match .map-row--head row height (~42–44px) so the filter bar doesn’t stick under the blue header */
  --map-sticky-head: 2.8rem;
  /* One horizontal group header band; keep in sync with .map-row--group .map-cell padding */
  --map-sticky-group-band: 2.15rem;
  margin-top: 0.75rem;
  max-height: min(78vh, 56rem);
  overflow: auto;
  border: 1px solid #e4e4e7;
  border-radius: 8px;
  background: #fff;
}

.map-filter-bar {
  position: sticky;
  top: var(--map-sticky-head);
  /* Below .map-grid--head (500), above group rows (~10+N) */
  z-index: 480;
  padding: 0.55rem 0.65rem;
  background: #f4f4f5;
  border-bottom: 1px solid #e4e4e7;
}

.map-filter-bar__row.row.row--inline {
  margin-bottom: 0;
}

.map-filter-bar__row .map-filter-bar__input {
  flex: 1 1 12rem;
  min-width: 8rem;
  width: auto;
  padding: 0.45rem 0.6rem;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  font: inherit;
  font-size: 0.875rem;
  background: #fff;
}

.map-filter-bar__input:focus {
  outline: 2px solid rgba(26, 79, 115, 0.35);
  outline-offset: 1px;
  border-color: var(--fr-nav);
}

.map-filter-bar__count {
  flex: 0 0 auto;
  white-space: nowrap;
}

.map-grid {
  width: 100%;
  font-size: 0.8125rem;
}

.map-grid--head {
  position: sticky;
  top: 0;
  z-index: 500;
  border-bottom: none;
  background: #fff;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.12);
}

/* Sticky on the table wrapper keeps “Acumatica / FileMaker” aligned; cell-level sticky + group z-index could hide it. */
.map-grid--head .map-row--head .map-cell {
  position: relative;
  z-index: 0;
}

.map-row {
  display: grid;
  grid-template-columns: 52% 1fr;
  align-items: center;
}

.map-grid .map-row[hidden] {
  display: none !important;
}

.map-row:nth-child(even):not(.map-row--head):not(.map-row--group) .map-cell {
  background: #fafafa;
}

.map-row--head .map-cell {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #2a6a94 0%, #1a4f73 100%);
  color: #fff;
  border-bottom-color: #143d5a;
}

.map-row--head .btn-icon {
  border-color: rgba(255, 255, 255, 0.45);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.map-row--head .btn-icon:hover {
  background: rgba(255, 255, 255, 0.28);
}

.map-cell--head--sortable {
  padding: 0;
}

.map-head-sort-btn {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0.4rem 0.5rem;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.map-row--head .map-head-sort-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.map-row--head .map-head-sort-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

.map-head-sort-ind {
  flex-shrink: 0;
  margin-left: 0.2rem;
  font-size: 0.65em;
  opacity: 0.95;
}

.map-cell {
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid #e4e4e7;
}

.map-cell--narrow {
  width: 2.25rem;
  text-align: center;
}

.map-cell--path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
  max-width: min(40rem, 42vw);
}

.map-path-tree-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-width: 0;
}

.map-path-tree-row--leaf {
  width: 100%;
}

.map-path-tree-row--leaf .map-tree-segment--leaf {
  min-width: 0;
  flex: 1 1 auto;
}

.map-path-tree-row--leaf .btn-icon {
  flex-shrink: 0;
  margin-left: auto;
}

.map-path-tree-row--leaf .map-cell__lookup-cfg {
  margin-left: 0.25rem;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.55;
}
.map-path-tree-row--leaf .map-cell__lookup-cfg:hover {
  opacity: 1;
}
.map-path-tree-row--leaf .map-cell__lookup-cfg--active {
  opacity: 1;
  color: var(--fr-nav-deep, #2563eb);
}

.map-path-tree-row--leaf .map-cell__match-cfg {
  margin-left: 0.25rem;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.55;
}
.map-path-tree-row--leaf .map-cell__match-cfg:hover {
  opacity: 1;
}
.map-path-tree-row--leaf .map-cell__match-cfg--active {
  opacity: 1;
  color: var(--fr-nav-deep, #2563eb);
}

.map-lookup-cfg-popover {
  position: absolute;
  z-index: 1000;
  min-width: 280px;
  max-width: 360px;
  padding: 0.65rem 0.75rem 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.map-lookup-cfg-popover__title {
  font-weight: 600;
  color: #18181b;
  margin-bottom: 0.15rem;
}
.map-lookup-cfg-popover__row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  align-items: center;
  gap: 0.5rem;
}
.map-lookup-cfg-popover__label {
  color: #52525b;
  font-size: 0.8rem;
}
.map-lookup-cfg-popover__input {
  padding: 0.25rem 0.4rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  font: inherit;
  width: 100%;
  box-sizing: border-box;
}
.map-lookup-cfg-popover__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.35rem;
}
.map-lookup-cfg-popover__actions .btn {
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: #fff;
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.map-lookup-cfg-popover__actions .btn--small {
  font-size: 0.8rem;
}
.map-lookup-cfg-popover__actions .btn--ghost {
  background: transparent;
}
.map-lookup-cfg-popover__actions .btn--primary {
  background: var(--fr-nav-deep, #2563eb);
  border-color: var(--fr-nav-deep, #2563eb);
  color: #fff;
}

.fm-picker__option-lookup {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
}
.fm-picker__option-lookup-controls {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
}
.fm-picker__option-lookup-select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.2rem 0.35rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  font: inherit;
  background: #fff;
}
.fm-picker__option-lookup-refresh {
  flex-shrink: 0;
  padding: 0 0.35rem;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.fm-picker__option-lookup-refresh:hover {
  background: rgba(0, 0, 0, 0.04);
}
.fm-picker__option-lookup-error {
  display: block;
  padding: 0.3rem 0.4rem;
  border: 1px solid #fecaca;
  border-radius: 4px;
  background: #fef2f2;
  color: #991b1b;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}
.fm-picker__option-lookup-error-detail {
  margin-top: 0.25rem;
}
.fm-picker__option-lookup-error-detail summary {
  cursor: pointer;
  font-size: 0.75rem;
  color: #7f1d1d;
}
.fm-picker__option-lookup-error-detail pre {
  margin: 0.25rem 0 0;
  padding: 0.35rem 0.4rem;
  background: #fff;
  border: 1px solid #fecaca;
  border-radius: 3px;
  font-size: 0.7rem;
  color: #1f2937;
  max-height: 12rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.map-tree-toggle {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}

.map-row:not(.map-row--head) .map-tree-toggle {
  color: #52525b;
}

.map-row:not(.map-row--head) .map-tree-toggle:hover {
  color: #18181b;
  background: rgba(0, 0, 0, 0.06);
}

.map-tree-segment {
  font-weight: 600;
  color: #3f3f46;
}

.map-group-array-cfg {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.map-group-array-cfg__strategy,
.map-group-array-cfg__table,
.map-group-array-cfg__count {
  height: 1.6rem;
  font-size: 0.72rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  color: #0f172a;
}

.map-group-array-cfg__strategy,
.map-group-array-cfg__table {
  padding: 0 0.35rem;
  max-width: 12rem;
}

.map-group-array-cfg__count {
  width: 4.5rem;
  padding: 0 0.3rem;
}

.map-row--group .map-tree-segment {
  color: var(--fr-nav-deep);
}

.map-tree-segment--leaf {
  font-weight: 500;
}

/*
 * Each group and its descendants are wrapped in a .map-group-section.
 * Sticky group rows are constrained to their section, so the next
 * sibling section's header naturally pushes the previous one up.
 */
.map-group-section {
  width: 100%;
}

.map-row--group {
  position: sticky;
  top: var(--map-group-sticky-top, calc(var(--map-sticky-filter) + var(--map-sticky-head)));
  z-index: calc(10 + var(--map-group-stack-z, 0));
  background: #f0f4f8;
  box-shadow: 0 1px 0 rgba(228, 228, 231, 0.9);
}

.map-row--group .map-cell--path-group {
  grid-column: 1 / -1;
  background: #f0f4f8;
  box-shadow: 0 1px 0 rgba(228, 228, 231, 0.9);
}

.map-row--group .map-cell--fm {
  display: none;
}

.map-head-sort-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.map-row--head .map-head-sort-btn--disabled:hover {
  background: transparent;
}

.btn-icon {
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid #a1a1aa;
  background: #fff;
  color: #18181b;
  font-weight: 700;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
}

.btn-icon:hover {
  background: #f4f4f5;
}

.map-cell--fm {
  min-width: min(18rem, 28vw);
}

.map-fm-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.map-fm-row .fm-picker {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}

.map-fm-row .fm-picker .fm-picker__trigger {
  min-width: 0;
  max-width: 100%;
}

.map-fm-literal-wrap {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Match FM picker trigger column widths (same template as .fm-picker--with-table-filter) */
.map-fm-row:has(> .fm-picker.fm-picker--with-table-filter) .map-fm-literal-wrap {
  display: grid;
  column-gap: var(--fm-picker-col-gap-fm, 0.75rem);
  grid-template-columns: minmax(5.5rem, 30%) minmax(0, 1fr);
  width: 100%;
  box-sizing: border-box;
}

.map-fm-row:has(> .fm-picker.fm-picker--with-table-filter.fm-picker--with-value) .map-fm-literal-wrap,
.map-fm-row:has(> .fm-picker.fm-picker--with-table-filter.fm-picker--with-values) .map-fm-literal-wrap,
.map-fm-row:has(> .fm-picker.fm-picker--with-table-filter:has(.fm-picker__toolbar--3col)) .map-fm-literal-wrap {
  grid-template-columns: minmax(13rem, 36%) minmax(6rem, 1fr) minmax(7rem, 1fr);
}

.map-fm-row:has(> .fm-picker.fm-picker--with-table-filter) .map-fm-literal-wrap > .map-fm-literal-control,
.map-fm-row:has(> .fm-picker.fm-picker--with-table-filter) .map-fm-literal-wrap > .map-fm-literal-bool {
  grid-column: 1;
  width: 100%;
  min-width: 0;
}

.map-fm-row:has(> .fm-picker.fm-picker--with-table-filter) .map-fm-literal-wrap > .map-fm-literal-calc {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.map-fm-literal-control,
.map-fm-literal-calc {
  width: 100%;
  box-sizing: border-box;
  padding: 0.3rem 0.45rem;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fafafa;
  font: inherit;
  font-size: 0.8125rem;
}

.map-fm-literal-calc {
  resize: vertical;
  min-height: 2.5rem;
}

.map-fm-literal-bool {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  min-width: 0;
  box-sizing: border-box;
  padding: 0.25rem 0.45rem;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fafafa;
  font: inherit;
  font-size: 0.8125rem;
}

.map-fm-literal-bool__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  color: #3f3f46;
  user-select: none;
}

.map-fm-literal-bool__choice input[type="radio"] {
  margin: 0;
  accent-color: var(--fr-nav, #2563eb);
}

.btn-icon--fm {
  flex-shrink: 0;
}

/* Filterable popover select */
.fm-picker {
  position: relative;
}

.fm-picker--multi .fm-picker__option--multi {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  white-space: normal;
}

.fm-picker--multi .fm-picker__option--multi input[type="checkbox"] {
  flex-shrink: 0;
  margin: 0;
}

.row .fm-picker--multi .fm-picker__option--multi input[type="checkbox"] {
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.fm-picker__multi-label {
  flex: 1;
  min-width: 0;
}

/*
 * One grid for the whole list so checkbox / Field / Type / PK columns align
 * across the header row and every option row. Each option row uses
 * `display: contents` so its <label>/<input> children become direct grid
 * items of the parent grid track, picking up the shared column widths.
 */
.fm-picker--table .fm-picker__list {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr) minmax(6rem, max-content) auto;
  align-items: stretch;
  column-gap: 0;
  padding: 0 0.35rem;
}

.fm-picker--table .fm-picker__option--table {
  display: contents;
}

.fm-picker--table .fm-picker__option--table > .fm-picker__cell {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  padding: 0.3rem 0.25rem;
  font-size: 0.8rem;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fm-picker--table .fm-picker__option--table > .fm-picker__cell--check {
  justify-content: flex-start;
  padding-left: 0.7rem;
}

.fm-picker--table .fm-picker__option--table > .fm-picker__cell--type {
  color: #475569;
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 0.74rem;
}

.fm-picker--table .fm-picker__option--table > .fm-picker__cell--pk {
  justify-content: center;
  padding-right: 0.5rem;
  cursor: pointer;
}

.fm-picker--table .fm-picker__option--table > .fm-picker__cell--label,
.fm-picker--table .fm-picker__option--table > .fm-picker__cell--type {
  cursor: pointer;
}

.fm-picker--table .fm-picker__option--table:not(.fm-picker__table-header):hover > .fm-picker__cell {
  background: #f1f5f9;
}

.fm-picker--table .fm-picker__table-header > .fm-picker__cell {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ececee;
  border-bottom: 1px solid #d4d4d8;
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #475569;
  cursor: default;
}

.fm-picker--table .fm-picker__table-header > .fm-picker__cell + .fm-picker__cell {
  border-left: 1px solid #e4e4e7;
}

/*
 * Helper rows (No matches / Type to narrow / No options) span the whole grid
 * so they don't get squashed into the first column track.
 */
.fm-picker--table .fm-picker__list > .fm-picker__more {
  grid-column: 1 / -1;
  padding: 0.4rem 0.6rem;
}

.fm-picker__pk-auto {
  display: inline-block;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: #dcfce7;
  color: #166534;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fm-picker__trigger {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 8rem;
  padding: 0.35rem 0.5rem;
  color: #18181b;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}

.fm-picker__trigger:hover {
  border-color: #a1a1aa;
}

.fm-picker__trigger:focus-visible {
  outline: 2px solid rgba(26, 79, 115, 0.35);
  outline-offset: 1px;
  border-color: var(--fr-nav);
}

.fm-picker__trigger--empty .fm-picker__trigger-label {
  color: #71717a;
}

.fm-picker__trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-picker__trigger-label--badges {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.fm-picker__summary-badge {
  display: inline-flex;
  align-items: center;
  max-width: 15rem;
  padding: 0.12rem 0.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #334155;
  font-size: 0.75rem;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-picker__summary-more {
  flex-shrink: 0;
  color: #64748b;
  font-size: 0.75rem;
  font-weight: 600;
}

.fm-picker__trigger--cols-fm .fm-picker__trigger-label {
  display: grid;
  grid-template-columns: var(--fm-picker-cols-fm);
  column-gap: var(--fm-picker-col-gap-fm);
  align-items: center;
  white-space: normal;
  width: 100%;
  min-width: 0;
}

.fm-picker__trigger-col--table {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #71717a;
  font-weight: 500;
}

.fm-picker__trigger-col--field {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.fm-picker__trigger-arrow {
  flex-shrink: 0;
  margin-left: 0.4rem;
  font-size: 1.125rem;
  line-height: 1;
  color: #71717a;
}

.fm-picker__popup {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  min-width: 14rem;
  margin-top: 2px;
  background: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
  z-index: 600;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fm-picker--with-table-filter {
  --fm-picker-cols-fm: minmax(5.5rem, 30%) minmax(0, 1fr);
  --fm-picker-col-gap-fm: 0.75rem;
}

.fm-picker--with-table-filter.fm-picker--with-values,
.fm-picker--with-table-filter.fm-picker--with-value,
.fm-picker--with-table-filter:has(.fm-picker__toolbar--3col) {
  --fm-picker-cols-fm: minmax(13rem, 36%) minmax(6rem, 1fr) minmax(7rem, 1fr);
}

.fm-picker--with-table-filter .fm-picker__popup {
  min-width: min(22rem, 94vw);
}

/* Rich picker popup: force wider than trigger (base popup uses left+right:0) */
.fm-picker__popup.fm-picker__popup--wide {
  right: auto;
}

.fm-picker__popup-col-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #d4d4d8;
  pointer-events: none;
  z-index: 4;
}

.fm-picker__popup-col-divider[hidden] {
  display: none;
}

/* Fallback for markup that predates --wide class */
.fm-picker--with-values .fm-picker__popup,
.fm-picker--with-value .fm-picker__popup {
  right: auto;
  width: max(100%, min(48rem, 94vw));
  min-width: min(48rem, 94vw);
  max-width: 94vw;
}

.fm-picker__toolbar--cols-fm {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.5rem;
  row-gap: 0.35rem;
  margin: 0.5rem 0.65rem 0.3rem;
  align-items: center;
}

.fm-picker__toolbar--cols-fm .fm-picker__table-filter-row {
  display: contents;
}

.fm-picker--with-values .fm-picker__toolbar--cols-fm .fm-picker__table-filter {
  grid-column: 2 / -1;
}

.fm-picker--with-values .fm-picker__toolbar--cols-fm .fm-picker__search {
  grid-column: 2 / -1;
}

.fm-picker__toolbar--3col {
  display: grid;
  grid-template-columns: var(--fm-picker-cols-fm);
  column-gap: var(--fm-picker-col-gap-fm, 0.4rem);
  row-gap: 0.3rem;
  margin: 0.5rem 0.4rem 0.3rem;
  align-items: center;
}

.fm-picker__toolbar--3col .fm-picker__table-filter {
  min-width: 0;
  width: 100%;
}

.fm-picker__toolbar--3col .fm-picker__search {
  margin: 0;
  margin-left: 0.35rem;
  width: calc(100% - 0.35rem);
  min-width: 0;
  padding-left: 0.75rem;
}

/* Vertical rules between Table | Field | Value (toolbar + list share the same column template) */
.fm-picker__toolbar--3col > :nth-child(3n + 2),
.fm-picker__toolbar--3col > :nth-child(3n + 3) {
  box-shadow: inset 1px 0 0 #d4d4d8;
  padding-left: 0.45rem;
  box-sizing: border-box;
}

/* Use full-height popup divider lines for continuous separators in wide picker */
.fm-picker__popup--wide .fm-picker__toolbar--3col > :nth-child(3n + 2),
.fm-picker__popup--wide .fm-picker__toolbar--3col > :nth-child(3n + 3) {
  box-shadow: none;
}

.fm-picker__record-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.fm-picker .fm-picker__record-nav button.fm-picker__record-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  margin: 0;
  border: 1px solid #c4c4c8;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 400;
  line-height: 1;
  color: #52525b;
  background: #f4f4f5;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  box-sizing: border-box;
}

.fm-picker .fm-picker__record-nav button.fm-picker__record-nav-btn:hover:not(:disabled) {
  background: #e4e4e7;
  border-color: #a1a1aa;
  color: #18181b;
}

.fm-picker .fm-picker__record-nav button.fm-picker__record-nav-btn:disabled {
  opacity: 0.35;
  cursor: default;
  background: #f4f4f5;
}

.fm-picker__record-nav-label {
  font-size: 0.72rem;
  color: #71717a;
  white-space: nowrap;
}

.fm-picker__record-nav-status {
  font-size: 0.72rem;
  color: #71717a;
  flex: 1 1 6rem;
  min-width: 0;
}

.fm-picker__record-nav-jump {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  flex: 1 1 auto;
  min-width: 0;
}

.fm-picker__record-nav-jump-label {
  font-size: 0.7rem;
  color: #71717a;
  white-space: nowrap;
}

.fm-picker__record-nav-input {
  width: 4.5rem;
  max-width: 40%;
  min-width: 2.75rem;
  box-sizing: border-box;
  padding: 0.1rem 0.3rem;
  font: inherit;
  font-size: 0.72rem;
  border: 1px solid #d4d4d8;
  border-radius: 4px;
  text-align: center;
  background: #fff;
  appearance: textfield;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
}

.fm-picker__record-nav-input:focus {
  border-color: var(--fr-nav);
  outline: none;
}

.fm-picker__record-nav-input::-webkit-outer-spin-button,
.fm-picker__record-nav-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fm-picker__record-nav-total {
  font-size: 0.72rem;
  color: #71717a;
  white-space: nowrap;
}

.fm-picker__toolbar-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: #52525b;
}

.fm-picker__table-filter {
  flex: 1;
  min-width: 0;
  padding: 0.3rem 0.4rem;
  border: 1px solid #d4d4d8;
  border-radius: 5px;
  font: inherit;
  font-size: 0.8125rem;
  background: #fafafa;
  outline: none;
}

.fm-picker__table-filter:focus {
  border-color: var(--fr-nav);
  background: #fff;
}

.fm-picker__popup[hidden] {
  display: none;
}

.fm-picker__search {
  margin: 0.4rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #d4d4d8;
  border-radius: 5px;
  font: inherit;
  font-size: 0.8125rem;
  background: #fafafa;
  outline: none;
  box-sizing: border-box;
}

.fm-picker--with-table-filter .fm-picker__toolbar--cols-fm .fm-picker__search {
  margin: 0;
  width: 100%;
  min-width: 0;
}

.fm-picker__search:focus {
  border-color: var(--fr-nav);
  background: #fff;
}

.fm-picker__list {
  max-height: 15rem;
  overflow-y: auto;
  padding: 0.15rem 0;
}

.fm-picker__popup--wide .fm-picker__list {
  max-height: var(--fm-picker-list-max-height, min(62vh, 44rem));
}

.fm-picker__card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.fm-picker__card-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
}

.fm-picker__card-close {
  width: 1.45rem;
  height: 1.45rem;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #ffffff;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}

.fm-picker__card-close:hover {
  background: #f1f5f9;
  border-color: #94a3b8;
}

.fm-picker__literal-panel {
  border-top: 1px solid #e4e4e7;
  padding: 0.5rem 0.65rem 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  background: #fafafa;
}

.fm-picker__literal-panel-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: #3f3f46;
}

.fm-picker__literal-panel-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.35rem 0.45rem;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fff;
  font: inherit;
  font-size: 0.8125rem;
}

.fm-picker__literal-panel-done {
  align-self: flex-end;
  margin-top: 0.15rem;
  padding: 0.25rem 0.65rem;
  font-size: 0.8125rem;
  border-radius: 6px;
  border: 1px solid #d4d4d8;
  background: #fff;
  cursor: pointer;
}

.fm-picker__literal-panel-done:hover {
  border-color: #a1a1aa;
  background: #f4f4f5;
}

.fm-picker__option {
  padding: 0.3rem 0.65rem;
  font-size: 0.8125rem;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fm-picker__option:hover {
  background: #f0f4f8;
}

.fm-picker__option--section,
.fm-picker__option--section:hover {
  background: #f8fafc;
  cursor: default;
  user-select: none;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 2;
}

.fm-picker__option--section .fm-picker__option-col--secondary {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #475569;
}

.fm-picker__section-toggle {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.fm-picker__section-toggle:focus-visible {
  outline: 2px solid rgba(26, 79, 115, 0.35);
  outline-offset: 1px;
  border-radius: 2px;
}

.fm-picker__option--active {
  background: #e8eef4;
  font-weight: 600;
}

.fm-picker__option--active.fm-picker__option--cols-val {
  overflow: visible;
}

.fm-picker__option--none {
  color: #71717a;
  font-style: italic;
}

.fm-picker__option--adhoc {
  color: #3f3f46;
  font-weight: 500;
}

.row .mp-filemaker-database-mount {
  width: 100%;
}

.row .mp-picker-fm-database .fm-picker__trigger {
  min-height: 2.5rem;
}

.row .mp-picker-fm-primary .fm-picker__trigger {
  min-height: 2.5rem;
}

.row .mp-picker-fm-primary-fields .fm-picker__trigger {
  min-height: 2.5rem;
}

.fm-picker__option--cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem 1rem;
  align-items: baseline;
  white-space: normal;
}

.fm-picker__option--cols-fm {
  grid-template-columns: var(--fm-picker-cols-fm);
  column-gap: var(--fm-picker-col-gap-fm);
  align-items: center;
}

.fm-picker__option--cols-val {
  column-gap: 0.4rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}

.fm-picker__option--cols-fm .fm-picker__option-col--secondary {
  justify-self: start;
  text-align: left;
}

.fm-picker__option--cols-fm:not(.fm-picker__option--cols-val) .fm-picker__option-col--primary {
  box-shadow: inset 1px 0 0 #d4d4d8;
  padding-left: 0.45rem;
  box-sizing: border-box;
}

.fm-picker__option--cols-fm.fm-picker__option--cols-val .fm-picker__option-col--primary,
.fm-picker__option--cols-fm.fm-picker__option--cols-val .fm-picker__option-col--value {
  box-shadow: inset 1px 0 0 #d4d4d8;
  padding-left: 0.7rem;
  box-sizing: border-box;
}

.fm-picker__popup--wide .fm-picker__option--cols-fm:not(.fm-picker__option--cols-val) .fm-picker__option-col--primary,
.fm-picker__popup--wide .fm-picker__option--cols-fm.fm-picker__option--cols-val .fm-picker__option-col--primary,
.fm-picker__popup--wide .fm-picker__option--cols-fm.fm-picker__option--cols-val .fm-picker__option-col--value {
  box-shadow: none;
}

.fm-picker__option-col--literal {
  position: relative;
  min-width: 0;
  white-space: normal;
  overflow: visible;
  align-self: stretch;
  padding-left: 0.45rem;
  padding-right: 0.45rem;
  box-sizing: border-box;
}

.fm-picker__option-literal-input,
.fm-picker__option-literal-textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0.25rem 0.4rem;
  border: 1px solid #d4d4d8;
  border-radius: 5px;
  background: #fff;
  font: inherit;
  font-size: 0.8125rem;
  color: #18181b;
}

.fm-picker__option-literal-textarea {
  resize: vertical;
  min-height: 3.5rem;
  line-height: 1.35;
}

.fm-picker__calc-inline-host {
  position: relative;
}

.fm-picker__calc-inline-overlay {
  position: absolute;
  inset: 1px;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  padding: 0.25rem 0.36rem;
  border-radius: 4px;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: #18181b;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
}

.fm-picker__option-literal-textarea--inline-badges {
  position: relative;
  z-index: 2;
  background: transparent;
  color: transparent;
  caret-color: #18181b;
}

.fm-picker__option-literal-textarea--inline-badges::selection {
  color: transparent;
  background: rgba(147, 197, 253, 0.35);
}

.fm-picker__option-literal-bool {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
}

.fm-picker__option-literal-bool__choice {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.8125rem;
  color: #3f3f46;
  user-select: none;
}

.fm-picker__option-literal-bool__choice input[type="radio"] {
  margin: 0;
  accent-color: var(--fr-nav, #2563eb);
}

.fm-picker__option--cols-val .fm-picker__option-col--secondary {
  font-size: 0.7rem;
}

.fm-picker__option-col--primary {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-picker__option-col--secondary {
  justify-self: end;
  text-align: right;
  white-space: nowrap;
  color: #71717a;
  font-variant-numeric: tabular-nums;
}

.fm-picker__option-col--value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #6b7280;
  font-size: 0.72rem;
  font-style: italic;
  border-left: 1px solid #e5e7eb;
  padding-left: 0.35rem;
  padding-right: 0.45rem;
  box-sizing: border-box;
}

.fm-picker__popup--wide .fm-picker__option-col--value {
  border-left: 0;
}

.fm-picker__option-col--commit {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.35rem;
  white-space: normal;
  overflow: visible;
  font-style: normal;
}

.fm-picker__option-value-editor {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: visible;
}

.fm-picker__option-col--commit .fm-picker__option-literal-input,
.fm-picker__option-col--commit .fm-picker__option-literal-textarea {
  width: 100%;
}

.fm-picker__calc-mentions {
  position: fixed;
  left: 0;
  top: 0;
  min-width: 20rem;
  max-width: min(38rem, 96vw);
  max-height: min(52vh, 26rem);
  overflow-y: auto;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
  z-index: 1200;
}

.fm-picker__calc-mention-item {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.5rem;
  border: 0;
  background: #fff;
  padding: 0.35rem 0.45rem;
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
}

.fm-picker__calc-mention-item:hover,
.fm-picker__calc-mention-item--active {
  background: #eef4fb;
}

.fm-picker__calc-mention-name {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #111827;
}

.fm-picker__calc-mention-table {
  color: #6b7280;
  font-size: 0.72rem;
}

.fm-picker__option-commit-btn {
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 999px;
  border: 1px solid #a1a1aa;
  background: #ffffff;
  color: #0f766e;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

.fm-picker__option-commit-btn:hover {
  background: #f4f4f5;
  border-color: #71717a;
}

.fm-picker__option-commit-btn:focus-visible {
  outline: 2px solid rgba(26, 79, 115, 0.35);
  outline-offset: 1px;
}

.fm-picker__option-ai-btn {
  min-width: 2.1rem;
  height: 1.45rem;
  border-radius: 999px;
  border: 1px solid #a1a1aa;
  background: #ffffff;
  color: #1d4ed8;
  font: inherit;
  font-size: 0.72rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 0.45rem;
}

.fm-picker__option-ai-btn:hover {
  background: #eff6ff;
  border-color: #60a5fa;
}

.fm-picker__option-ai-btn--js {
  color: #065f46;
  border-color: #86efac;
}

.fm-picker__option-ai-btn--js:hover {
  background: #ecfdf5;
  border-color: #34d399;
}

.fm-picker__option-ai-btn:focus-visible {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 1px;
}

.fm-picker__option-ai-status {
  display: block;
  margin-top: 0.22rem;
  font-size: 0.7rem;
  color: #4b5563;
  white-space: normal;
  line-height: 1.25;
}

.fm-picker__calc-function-preview {
  margin: 0.25rem 0 0.2rem;
  padding: 0.35rem 0.45rem;
  border: 1px solid #dbeafe;
  background: #f8fbff;
  border-radius: 6px;
  color: #1f2937;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.7rem;
  line-height: 1.25;
  white-space: pre-wrap;
}

.fm-picker__calc-badges {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.18rem;
  max-width: 100%;
  vertical-align: top;
}

.fm-picker__calc-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  border: 1px solid #93c5fd;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fm-picker__calc-badge--inline {
  display: inline;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 4px;
  /* Layout-neutral styling so caret/text stay aligned with textarea metrics. */
  box-shadow: inset 0 0 0 1px #93c5fd, 0 0 0 3px #eff6ff;
  background: #eff6ff;
  color: #1e3a8a;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  vertical-align: baseline;
}

.fm-picker__list-header {
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  cursor: default;
  position: sticky;
  top: 0;
  z-index: 1;
}

.fm-picker__list-header:hover {
  background: #f1f5f9;
}

.fm-picker__list-header .fm-picker__option-col {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #475569;
  font-style: normal;
}

.fm-picker__list-header .fm-picker__option-col--secondary {
  text-align: left;
  justify-self: start;
}

.fm-picker__list-header .fm-picker__option-col--value {
  border-left-color: #cbd5e1;
}

.fm-picker__more {
  padding: 0.3rem 0.65rem;
  font-size: 0.75rem;
  color: #a1a1aa;
  font-style: italic;
}

.fm-picker__more.fm-picker__option--cols-fm {
  font-style: normal;
}

.fm-picker__more.fm-picker__option--cols-fm .fm-picker__option-col--primary {
  font-style: italic;
  color: #a1a1aa;
}

.output--mapping {
  max-height: min(28vh, 18rem);
}

.dialog {
  max-width: min(32rem, 92vw);
  padding: 0;
  border: 1px solid #e4e4e7;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

.dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

.dialog__form {
  padding: 1rem 1.25rem;
}

.dialog__title {
  margin: -1rem -1.25rem 0.75rem;
  padding: 0.55rem 1.25rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--fr-panel-header);
  color: #fff;
  word-break: break-all;
}

.dialog__body {
  margin: 0 0 1rem;
  padding: 0.75rem;
  max-height: 40vh;
  overflow: auto;
  font-size: 0.8125rem;
  line-height: 1.45;
  white-space: pre-wrap;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
}

.dialog__actions {
  display: flex;
  justify-content: flex-end;
}

.sync-log-dialog {
  max-width: min(64rem, 96vw);
  width: min(64rem, 96vw);
}

.sync-log-dialog__body {
  max-height: min(74vh, 48rem);
  line-height: 1.35;
  white-space: normal;
  padding: 0.85rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.sync-log-card {
  padding: 0.55rem 0.7rem;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #f8fafc;
}

.sync-log-card__dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 0.85rem;
  row-gap: 0.2rem;
  margin: 0;
  font-size: 0.8rem;
}

.sync-log-card__dl dt {
  color: #475569;
  font-weight: 600;
  white-space: nowrap;
}

.sync-log-card__dl dd {
  margin: 0;
  color: #111827;
  word-break: break-word;
}

.sync-log-card__error {
  color: #b91c1c !important;
  font-weight: 600;
}

.sync-log-section__title {
  margin: 0 0 0.35rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #1f2937;
}

.sync-log-section__empty {
  margin: 0;
  padding: 0.45rem 0.55rem;
  border: 1px dashed #cbd5e1;
  border-radius: 5px;
  background: #f8fafc;
  color: #6b7280;
}

.sync-log-section__scroll {
  max-height: 18rem;
  overflow: auto;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fff;
}

.sync-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.sync-log-table thead th {
  position: sticky;
  top: 0;
  background: #e6ecf3;
  color: #334155;
  text-align: left;
  font-weight: 700;
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid #c5ccd6;
  z-index: 1;
}

.sync-log-table tbody td {
  padding: 0.3rem 0.55rem;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: top;
  color: #111827;
}

.sync-log-table tbody tr:hover {
  background: #f8fafc;
}

.sync-log-table__col--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sync-log-table__col--empty {
  color: #9ca3af;
}

.sync-log-pill {
  display: inline-block;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.sync-log-pill--ok {
  color: #14532d;
  background: #dcfce7;
  border-color: #86efac;
}

.sync-log-pill--err {
  color: #7f1d1d;
  background: #fee2e2;
  border-color: #fca5a5;
}

.sync-log-pill--warn {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}

.sync-log-pill--info {
  color: #1e3a8a;
  background: #dbeafe;
  border-color: #93c5fd;
}

.sync-log-pill--neutral {
  color: #1f2937;
  background: #e5e7eb;
  border-color: #d1d5db;
}

.sync-log-raw {
  font-size: 0.78rem;
  color: #475569;
}

.sync-log-raw summary {
  cursor: pointer;
  font-weight: 600;
}

.sync-log-raw__pre {
  margin: 0.4rem 0 0;
  padding: 0.55rem 0.7rem;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 6px;
  max-height: 18rem;
  overflow: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.35;
  white-space: pre-wrap;
}

.match-config-dialog {
  max-width: min(60rem, 96vw);
  width: min(60rem, 96vw);
}

.match-config-dialog__body {
  max-height: min(72vh, 44rem);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  white-space: normal;
}

.match-config-dialog__lead {
  margin: 0;
}

.match-config-dialog__body select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font: inherit;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
}

.match-config-dialog__actions {
  align-items: center;
}

.match-config-dialog__pairs {
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  /* Tall enough to show several pairs but bounded so a long list doesn't
     push Save off-screen. The dialog body still scrolls on top of this if
     viewport gets very small. */
  max-height: min(50vh, 28rem);
}

.match-config-dialog__table thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e6ecf3;
}

.match-config-dialog__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.82rem;
}

.match-config-dialog__table thead th {
  position: sticky;
  top: 0;
  background: #e6ecf3;
  color: #334155;
  text-align: left;
  font-weight: 700;
  padding: 0.35rem 0.55rem;
  border-bottom: 1px solid #c5ccd6;
}

.match-config-dialog__table thead th:nth-child(1) { width: 42%; }
.match-config-dialog__table thead th:nth-child(2) { width: 48%; }
.match-config-dialog__table thead th:nth-child(3) { width: 10%; }

.match-config-dialog__table tbody td {
  padding: 0.3rem 0.45rem;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

.match-config-dialog__table tbody td input[type="text"],
.match-config-dialog__table tbody td select {
  width: 100%;
  padding: 0.3rem 0.45rem;
  font: inherit;
  border: 1px solid #d4d4d8;
  border-radius: 5px;
  box-sizing: border-box;
  background: #fff;
}

.match-config-dialog__remove {
  text-align: right;
}

.match-config-dialog__empty {
  padding: 0.55rem;
  text-align: center;
}

.match-config-dialog__footer {
  align-items: center;
}

.sync-setup-dialog {
  max-width: min(46rem, 96vw);
}

.sync-setup-dialog__body {
  max-height: min(70vh, 44rem);
  white-space: normal;
}

.sync-setup-dialog__body p {
  margin: 0.2rem 0 0.55rem;
}

.sync-setup-dialog__body ol,
.sync-setup-dialog__body ul {
  margin: 0.2rem 0 0.8rem 1.2rem;
  padding: 0;
}

.sync-setup-dialog__body li {
  margin: 0.2rem 0;
}

.sync-setup-dialog__pre {
  margin: 0.4rem 0 0.8rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid #d4d4d8;
  background: #f4f4f5;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.78rem;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-x: auto;
}

.mp-dashboard__rename-dialog {
  width: min(28rem, 92vw);
}

.mp-dashboard__rename-dialog-hint {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  color: #52525b;
}

.mp-dashboard__rename-dialog-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #f4f4f5;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  padding: 0.05rem 0.35rem;
  font-size: 0.78rem;
  color: #18181b;
  word-break: break-all;
}

.mp-dashboard__rename-dialog-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #3f3f46;
  margin-bottom: 0.95rem;
}

.mp-dashboard__rename-dialog-input {
  display: block;
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.45rem 0.6rem;
  font-size: 0.95rem;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fff;
  color: #18181b;
  box-sizing: border-box;
}

.mp-dashboard__rename-dialog-input:focus {
  outline: none;
  border-color: var(--fr-nav, #1f4f8b);
  box-shadow: 0 0 0 3px rgba(31, 79, 139, 0.18);
}

.mp-dashboard__rename-dialog-help {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  color: #71717a;
}

.mp-dashboard__rename-dialog-actions {
  gap: 0.5rem;
}

.mp-dashboard__rename-dialog-actions button {
  min-width: 5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.mp-dashboard__rename-dialog-actions button.secondary {
  background: #fff;
  color: #3f3f46;
  border-color: #d4d4d8;
}

.mp-dashboard__rename-dialog-actions button.secondary:hover {
  background: #f4f4f5;
}

.mp-dashboard__rename-dialog-actions button.primary {
  background: var(--fr-nav, #1f4f8b);
  color: #fff;
  border-color: var(--fr-nav, #1f4f8b);
}

.mp-dashboard__rename-dialog-actions button.primary:hover {
  filter: brightness(1.06);
}

/* --- Mapping profiles --- */

.mappings-layout {
  display: grid;
  grid-template-columns: minmax(300px, 480px) minmax(0, 1fr);
  gap: 1rem;
  align-items: stretch;
  margin-top: 1rem;
}

@media (max-width: 800px) {
  .mappings-layout {
    grid-template-columns: 1fr;
  }
}

.mappings-layout > .panel {
  margin-top: 0;
}

.mappings-layout__sidebar,
.mappings-layout__editor {
  display: flex;
  flex-direction: column;
  min-height: min(72vh, 820px);
  min-width: 0;
  position: relative;
}

.mapping-editor__loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Full-bleed over the editor panel: undo .panel > .panel__head ~ * side margins + :last-child bottom margin */
.panel.mappings-layout__editor > .mapping-editor__loading-overlay {
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.mapping-editor__loading-overlay[hidden] {
  display: none !important;
}

.mapping-editor__loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #d4d4d8;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  font-size: 0.9rem;
  font-weight: 600;
  color: #3f3f46;
}

.mapping-editor__loading-spinner {
  width: 2rem;
  height: 2rem;
  box-sizing: border-box;
  border: 3px solid #e4e4e7;
  border-top-color: var(--fr-nav);
  border-radius: 50%;
  animation: mapping-editor-loading-spin 0.75s linear infinite;
}

@keyframes mapping-editor-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.mappings-layout__sidebar .mapping-list {
  flex: 1;
  overflow: auto;
  min-height: 0;
}

.mappings-layout__empty {
  flex: 1;
  padding: 1.25rem 1.25rem 1.5rem;
}

.mappings-layout__editor .mapping-editor__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  /* Extra bottom padding shifts the centered block up slightly */
  padding: 1.75rem 2rem 5rem;
  max-width: 26rem;
  margin-inline: auto;
  width: 100%;
  box-sizing: border-box;
}

.mappings-layout__editor .mapping-editor__empty strong {
  font-weight: 700;
  color: #3f3f46;
}

.mappings-layout__editor .mapping-editor__empty[hidden] {
  display: none !important;
}

.mappings-layout__editor-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
}

/* `display: flex` beats UA [hidden]; keep editor closed until a profile is opened or + New. */
.mappings-layout__editor-body[hidden] {
  display: none !important;
}

.mappings-layout__editor-body .mapping-editor {
  flex: 1;
  min-height: 0;
}

.mappings-layout__editor-body .mapping-editor__panel > .row:first-child {
  margin-top: 0;
}

.btn-sm {
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.btn-sm--light {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.btn-sm--light:hover {
  background: rgba(255, 255, 255, 0.38);
}

.mapping-list {
  padding: 0 0.5rem 1rem;
}

.mapping-list__empty {
  padding: 1rem 0 0.25rem;
}

/* ── Mapping table ─────────────────────────────────── */
.mapping-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.8rem;
}

.mapping-table__hcell {
  padding: 0.3rem 0.5rem;
  font-size: 0.65rem;
  font-weight: 600;
  color: #a1a1aa;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  border-bottom: 1px solid #e4e4e7;
}

.mapping-table__row {
  cursor: pointer;
  transition: background 0.12s;
}

.mapping-table__row--dragging {
  opacity: 0.55;
}

.mapping-table__row:hover {
  background: rgba(37, 99, 235, 0.06);
}

.mapping-table__cell {
  padding: 0.45rem 0.5rem;
  vertical-align: middle;
  border-bottom: 1px solid #e4e4e7;
  color: #3f3f46;
  white-space: nowrap;
}

.mapping-table__cell--method,
.mapping-table__hcell:nth-child(1) {
  width: 1.5rem;
  text-align: center;
  position: sticky;
  left: 0;
  z-index: 2;
  cursor: grab;
  user-select: none;
}

.mapping-table__row:active .mapping-table__cell--method {
  cursor: grabbing;
}

.mapping-table__cell--name,
.mapping-table__hcell:nth-child(2) {
  font-weight: 600;
  color: #18181b;
  position: sticky;
  left: 1.5rem;
  z-index: 2;
}

.mapping-table__hcell:nth-child(1),
.mapping-table__hcell:nth-child(2) {
  background: var(--fr-panel-bg, #fff);
}

.mapping-table__row .mapping-table__cell--method,
.mapping-table__row .mapping-table__cell--name {
  background: #fff;
}

.mapping-table__row:hover .mapping-table__cell--method,
.mapping-table__row:hover .mapping-table__cell--name {
  background: rgba(237, 242, 248, 1);
}

.mapping-table__cell--database {
  color: #71717a;
  font-size: 0.75rem;
}

.mapping-table__cell--route {
  color: #71717a;
  font-size: 0.75rem;
}

.mapping-table__cell--fields {
  width: 2.5rem;
  text-align: center;
  color: #a1a1aa;
  font-size: 0.7rem;
}

.mapping-table__cell--actions {
  width: 2.2rem;
  text-align: center;
}

/* method dot indicators */
.mapping-card__method {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #52525b;
  font-size: 0;
  line-height: 0;
  overflow: hidden;
  text-indent: -9999px;
}

.mapping-card__method--get { background: #2563eb; }
.mapping-card__method--post { background: #15803d; }
.mapping-card__method--put { background: #b45309; }
.mapping-card__method--patch { background: #a16207; }
.mapping-card__method--delete { background: #b91c1c; }

/* delete button in table */
.mapping-card__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  border: none;
  background: transparent;
  color: #a1a1aa;
  border-radius: 4px;
  cursor: pointer;
  line-height: 0;
  transition: color 0.12s;
}

.mapping-card__delete:hover {
  color: var(--fr-accent, #b91c1c);
}

.mapping-card__delete svg {
  display: block;
}

.mapping-editor {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0 1.25rem 1.15rem;
}

.mapping-editor__developer {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fr-panel-border);
}

.mapping-editor__developer-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.75rem;
  margin: 0;
  padding: 0.2rem 0 0.35rem;
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.mapping-editor__developer-summary::-webkit-details-marker {
  display: none;
}

.mapping-editor__developer-summary::marker {
  content: "";
}

.mapping-editor__developer-summary::before {
  content: "▸";
  display: inline-block;
  flex: 0 0 auto;
  margin-right: 0.35rem;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--fr-nav-deep);
  transform: translateY(0.02em);
  transition: transform 0.15s ease;
}

.mapping-editor__developer[open] > .mapping-editor__developer-summary::before {
  transform: translateY(0.02em) rotate(90deg);
}

.mapping-editor__developer-heading {
  margin: 0;
  padding: 0;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fr-nav-deep);
}

.mapping-editor__developer-summary-hint {
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.mapping-editor__developer-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 0.5rem;
}

.mapping-editor__developer-inner > .row:first-of-type {
  margin-top: 0;
}

.mapping-editor__name-row {
  flex-shrink: 0;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.mapping-editor__tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  flex-shrink: 0;
  margin-top: 0;
  margin-bottom: 0;
  border: 1px solid var(--fr-panel-border);
  border-bottom: none;
  padding: 0.2rem 0.2rem 0;
  background: #e8e8e8;
  border-radius: 4px 4px 0 0;
}

.mapping-editor__tab {
  margin: 0 0.1rem 0 0;
  padding: 0.4rem 0.95rem;
  border: none;
  border-bottom: 3px solid transparent;
  border-radius: 3px 3px 0 0;
  background: transparent;
  color: #3f3f46;
  font: inherit;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

.mapping-editor__tab:hover {
  color: var(--fr-nav-deep);
  background: rgba(255, 255, 255, 0.5);
}

.mapping-editor__tab[aria-selected="true"] {
  color: var(--fr-nav-deep);
  border-bottom-color: var(--fr-nav);
  background: #fff;
  box-shadow: 0 -1px 0 #fff;
}

.mapping-editor__panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--fr-panel-border);
  border-top: none;
  margin-top: 0;
  padding: 0.75rem 0.85rem 1rem;
  background: #fff;
  border-radius: 0 0 4px 4px;
}

/* `display: flex` above beats the UA [hidden] rule (same specificity); keep inactive panels out of layout. */
.mapping-editor__panel[hidden],
.mapping-editor__panel.mapping-editor__panel--inactive {
  display: none !important;
}

.mapping-editor__panel > .row:first-child {
  margin-top: 0;
}

.mapping-editor__panel--fields {
  padding-top: 0.5rem;
}

.mapping-editor__panel--filemaker .mapping-editor__fm-heading {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--fr-nav-deep);
}

.mapping-editor__panel--filemaker .mapping-editor__fm-lead {
  margin: 0 0 0.75rem;
  line-height: 1.45;
}

.mapping-editor__panel--dashboard .mapping-editor__dashboard-heading {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: #1f2937;
}

.mapping-editor__panel--dashboard .mapping-editor__dashboard-lead {
  margin: 0 0 0.65rem;
}

.mapping-editor__panel--dashboard {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mp-dashboard__toolbar {
  align-items: center;
  gap: 0.5rem;
}

.mp-dashboard__toolbar label {
  margin: 0;
  font-size: 0.8rem;
}

.mp-dashboard__toolbar select {
  width: auto;
  min-width: 5.5rem;
  height: 2rem;
  padding: 0.2rem 0.4rem;
}

.mp-dashboard__table-wrap {
  margin-bottom: 0;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  background: #fff;
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow: auto;
}

.mp-dashboard__table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.mp-dashboard__table th,
.mp-dashboard__table td {
  padding: 0.35rem 0.45rem;
  border-right: 1px solid #e4e4e7;
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-dashboard__table thead th {
  border-bottom: 1px solid #e4e4e7;
}

.mp-dashboard__table tbody tr:nth-child(odd) td {
  background: #ffffff;
}

.mp-dashboard__table tbody tr:nth-child(even) td {
  background: #f5f7fa;
}

.mp-dashboard__table tbody tr:hover td {
  background: #eef2f7;
}

.mp-dashboard__table th:last-child,
.mp-dashboard__table td:last-child {
  border-right: none;
}

.mp-dashboard__table thead tr:first-child th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ececee;
  font-size: 0.76rem;
  font-weight: 600;
}

.mp-dashboard__sort-th {
  position: sticky;
  top: 0;
  padding-right: 1.95rem;
}

.mp-dashboard__resize-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 7px;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 4;
  background: transparent;
}

.mp-dashboard__resize-handle:hover,
.mp-dashboard__th--resizing .mp-dashboard__resize-handle {
  background: rgba(31, 79, 139, 0.45);
}

.mp-dashboard__th--resizing {
  background: #e2e8f0 !important;
}

body.mp-dashboard--col-resizing,
body.mp-dashboard--col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

.mp-dashboard__sort-th > .mp-dashboard__sort-btn {
  width: calc(100% - 1.3rem);
}

.mp-dashboard__drag-grip {
  display: inline-block;
  width: 1.1rem;
  margin-right: 0.2rem;
  color: #64748b;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: -0.2rem;
  cursor: grab;
  user-select: none;
  vertical-align: middle;
}

.mp-dashboard__drag-grip:hover {
  color: var(--fr-nav, #1f4f8b);
}

.mp-dashboard__drag-grip:active {
  cursor: grabbing;
}

.mp-dashboard__th--dragging {
  opacity: 0.5;
}

.mp-dashboard__rename-btn {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #94a3b8;
  line-height: 1;
  cursor: pointer;
  border-radius: 3px;
  flex-shrink: 0;
  z-index: 3;
}

.mp-dashboard__rename-btn:hover {
  color: var(--fr-nav, #1f4f8b);
  background: rgba(31, 79, 139, 0.1);
}

.mp-dashboard__rename-icon {
  width: 0.85rem;
  height: 0.85rem;
  fill: currentColor;
  display: block;
  pointer-events: none;
}

.mp-dashboard__rename-input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0.15rem 0.3rem;
  font: inherit;
  font-weight: 600;
  font-size: 0.8rem;
  color: #1f2937;
  background: #ffffff;
  border: 1px solid var(--fr-nav, #1f4f8b);
  border-radius: 3px;
  outline: none;
}

.mp-dashboard__sort-label--custom {
  font-style: italic;
}

.mp-dashboard__th--drop-before {
  box-shadow: inset 3px 0 0 0 var(--fr-nav, #1f4f8b);
}

.mp-dashboard__th--drop-after {
  box-shadow: inset -3px 0 0 0 var(--fr-nav, #1f4f8b);
}

.mp-dashboard__sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: left;
  cursor: pointer;
}

.mp-dashboard__sort-mark {
  font-size: 0.7rem;
  color: #475569;
}

.mp-dashboard__filter-row th {
  position: sticky;
  top: 1.9rem;
  z-index: 1;
  background: #f8fafc;
  padding: 0.25rem 0.35rem;
}

.mp-dashboard__filter-input {
  width: 100%;
  min-width: 0;
  padding: 0.25rem 0.35rem;
  border: 1px solid #d4d4d8;
  border-radius: 4px;
  font-size: 0.74rem;
}

.mp-dashboard__filter-input:focus {
  border-color: var(--fr-nav);
  outline: none;
}

.mp-dashboard__filter-date-btn {
  text-align: left;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  color: #71717a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mp-dashboard__filter-date-btn:hover {
  border-color: var(--fr-nav);
}

.mp-dashboard__filter-date-btn--active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
  font-weight: 600;
}

.mp-dashboard__date-pop {
  background: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  padding: 0.6rem;
  width: 16rem;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp-dashboard__date-pop-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

.mp-dashboard__date-pop-preset {
  text-align: left;
  padding: 0.3rem 0.5rem;
  border: 1px solid #e4e4e7;
  background: #fafafa;
  border-radius: 4px;
  font-size: 0.74rem;
  cursor: pointer;
  font-family: inherit;
  color: #27272a;
}

.mp-dashboard__date-pop-preset:hover {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}

.mp-dashboard__date-pop-section-label {
  font-size: 0.72rem;
  color: #71717a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.1rem;
}

.mp-dashboard__date-pop-custom {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.mp-dashboard__date-pop-input {
  flex: 1;
  min-width: 0;
  padding: 0.25rem 0.35rem;
  border: 1px solid #d4d4d8;
  border-radius: 4px;
  font-size: 0.74rem;
  font-family: inherit;
}

.mp-dashboard__date-pop-input:focus {
  border-color: var(--fr-nav);
  outline: none;
}

.mp-dashboard__date-pop-arrow {
  color: #71717a;
  font-weight: 600;
}

.mp-dashboard__date-pop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.mp-dashboard__date-pop-btn {
  padding: 0.3rem 0.7rem;
  border-radius: 4px;
  font-size: 0.74rem;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
}

.mp-dashboard__date-pop-btn--clear {
  background: #fff;
  border-color: #d4d4d8;
  color: #52525b;
}

.mp-dashboard__date-pop-btn--clear:hover {
  background: #f4f4f5;
}

.mp-dashboard__date-pop-btn--apply {
  background: var(--fr-nav, #1f2937);
  color: #fff;
}

.mp-dashboard__date-pop-btn--apply:hover {
  filter: brightness(1.08);
}

.mp-dashboard__action-col {
  width: 3.6rem;
  min-width: 3.6rem;
  max-width: 3.6rem;
  text-align: center;
  padding: 0.2rem 0.35rem;
  background: inherit;
}

thead .mp-dashboard__action-col {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #ececee;
}

thead tr.mp-dashboard__filter-row .mp-dashboard__action-col {
  top: 1.9rem;
  background: #f8fafc;
  z-index: 1;
}

tbody .mp-dashboard__action-col {
  background: inherit;
}

.mp-dashboard__action-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
}

.mp-dashboard__add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  margin: 0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  line-height: 1;
}

.mp-dashboard__add-btn:hover {
  background: var(--fr-nav, #1f4f8b);
  color: #fff;
  border-color: var(--fr-nav, #1f4f8b);
}

.mp-dashboard__add-btn:focus {
  outline: none;
  border-color: var(--fr-nav, #1f4f8b);
  box-shadow: 0 0 0 2px rgba(31, 79, 139, 0.25);
}

.mp-dashboard__add-icon {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.mp-dashboard__add-btn--linked {
  background: #ecfdf5;
  border-color: #10b981;
  color: #047857;
  position: relative;
}

.mp-dashboard__add-btn--linked::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  border: 1px solid #fff;
}

.mp-dashboard__add-btn--linked:hover {
  background: #10b981;
  color: #fff;
  border-color: #10b981;
}

.mp-dashboard__open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  margin: 0;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
  color: #334155;
  cursor: pointer;
  line-height: 1;
}

.mp-dashboard__open-btn:hover:not(:disabled) {
  background: var(--fr-nav, #1f4f8b);
  color: #fff;
  border-color: var(--fr-nav, #1f4f8b);
}

.mp-dashboard__open-btn:focus {
  outline: none;
  border-color: var(--fr-nav, #1f4f8b);
  box-shadow: 0 0 0 2px rgba(31, 79, 139, 0.25);
}

.mp-dashboard__open-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.mp-dashboard__open-icon {
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1;
}

.mp-dashboard__push-dialog {
  width: min(46rem, 96vw);
  max-width: 46rem;
}

.mp-dashboard__push-dialog .dialog__form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 80vh;
}

.mp-dashboard__push-subtitle {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  color: #52525b;
}

.mp-dashboard__push-links {
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  padding: 0.45rem 0.65rem;
  background: #fafafa;
}

.mp-dashboard__push-links-title {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #3f3f46;
  margin-bottom: 0.3rem;
}

.mp-dashboard__push-links-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  font-size: 0.78rem;
  color: #18181b;
}

.mp-dashboard__push-links-list code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #fff;
  border: 1px solid #e4e4e7;
  border-radius: 3px;
  padding: 0 0.3rem;
  font-size: 0.74rem;
}

.mp-dashboard__push-steps {
  flex: 1;
  min-height: 4rem;
  max-height: 50vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.1rem 0.05rem;
}

.mp-dashboard__push-step {
  border: 1px solid #e4e4e7;
  border-left: 4px solid #cbd5e1;
  border-radius: 6px;
  padding: 0.4rem 0.55rem;
  background: #fff;
  font-size: 0.78rem;
}

.mp-dashboard__push-step-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mp-dashboard__push-step-pill {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.08rem 0.4rem;
  border-radius: 3px;
  background: #e2e8f0;
  color: #334155;
  text-transform: uppercase;
  flex-shrink: 0;
}

.mp-dashboard__push-step-label {
  font-weight: 600;
  color: #18181b;
  flex: 1;
  min-width: 0;
}

.mp-dashboard__push-step-duration {
  font-size: 0.7rem;
  color: #71717a;
  font-variant-numeric: tabular-nums;
}

.mp-dashboard__push-step-sig {
  margin-top: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: #475569;
  word-break: break-all;
}

.mp-dashboard__push-step-error,
.mp-dashboard__push-step-info {
  margin-top: 0.3rem;
  padding: 0.3rem 0.45rem;
  border-radius: 4px;
  font-size: 0.74rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.mp-dashboard__push-step-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.mp-dashboard__push-step-info {
  background: #fff7ed;
  color: #9a3412;
  border: 1px solid #fed7aa;
}

.mp-dashboard__push-step-details {
  margin-top: 0.35rem;
}

.mp-dashboard__push-step-details > summary {
  font-size: 0.72rem;
  color: #52525b;
  cursor: pointer;
  user-select: none;
}

.mp-dashboard__push-step-body {
  margin-top: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mp-dashboard__push-step-body-heading {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #71717a;
}

.mp-dashboard__push-step-body-pre {
  margin: 0;
  padding: 0.4rem 0.55rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  max-height: 14rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.mp-dashboard__push-step-mapping {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
}

.mp-dashboard__push-step-mapping th,
.mp-dashboard__push-step-mapping td {
  text-align: left;
  vertical-align: top;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid #f1f1f4;
  word-break: break-word;
}

.mp-dashboard__push-step-mapping thead th {
  background: #f4f4f5;
  font-weight: 600;
  color: #3f3f46;
  border-bottom: 1px solid #e4e4e7;
  position: sticky;
  top: 0;
}

.mp-dashboard__push-step-mapping tbody tr:last-child td {
  border-bottom: none;
}

.mp-dashboard__push-step-mapping-row--missing {
  background: #fef2f2;
}

.mp-dashboard__push-step-mapping-missing {
  color: #b91c1c;
  font-style: italic;
}

.mp-dashboard__push-step-mapping-muted {
  color: #71717a;
  font-style: italic;
}

.mp-dashboard__push-step-mapping-warn {
  color: #b45309;
  font-style: italic;
}

.mp-dashboard__push-step-mapping-stat {
  margin: 0.25rem 0 0;
  font-size: 0.7rem;
  color: #52525b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Field-mapper required-field indicator + toggle. Renders as a small
 * asterisk-style icon button at the very LEFT of each leaf row. Muted grey
 * when not required, red when required (auto-captured from a 4xx, manually
 * toggled, or both). Clicking toggles only the manual portion; auto hints
 * persist server-side until the next clean push. */
.map-required-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  margin-right: 0.25rem;
  padding: 0;
  border: none;
  background: transparent;
  color: #a1a1aa;
  cursor: pointer;
  border-radius: 4px;
  transition: color 90ms ease, background-color 90ms ease;
}
.map-required-pill svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
  display: block;
}
.map-required-pill:hover {
  color: #71717a;
  background: rgba(0, 0, 0, 0.04);
}
.map-required-pill--on {
  color: #dc2626;
}
.map-required-pill--on:hover {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
}
.map-required-pill:focus-visible {
  outline: 2px solid #93c5fd;
  outline-offset: 1px;
}
.map-row--required > .map-cell--path-leaf { box-shadow: inset 3px 0 0 0 #ef4444; }

.mp-dashboard__push-step-mapping-stat--empty {
  color: #b91c1c;
  font-weight: 600;
}

.mp-dashboard__push-step-empty-mapping {
  margin: 0.5rem 0;
  padding: 0.6rem 0.75rem;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-left: 4px solid #ea580c;
  border-radius: 4px;
  font-size: 0.78rem;
  color: #7c2d12;
  line-height: 1.4;
}

.mp-dashboard__push-step-empty-mapping strong {
  display: block;
  margin-bottom: 0.25rem;
  color: #7c2d12;
  font-size: 0.82rem;
}

.mp-dashboard__push-step--running {
  border-left-color: #2563eb;
  background: #eff6ff;
}

.mp-dashboard__push-step--running .mp-dashboard__push-step-pill {
  background: #2563eb;
  color: #fff;
}

.mp-dashboard__push-step--ok {
  border-left-color: #10b981;
}

.mp-dashboard__push-step--ok .mp-dashboard__push-step-pill {
  background: #10b981;
  color: #fff;
}

.mp-dashboard__push-step--err {
  border-left-color: #ef4444;
}

.mp-dashboard__push-step--err .mp-dashboard__push-step-pill {
  background: #ef4444;
  color: #fff;
}

.mp-dashboard__push-step--info {
  border-left-color: #f97316;
}

.mp-dashboard__push-step--info .mp-dashboard__push-step-pill {
  background: #f97316;
  color: #fff;
}

.mp-dashboard__push-step--skip {
  border-left-color: #94a3b8;
  opacity: 0.7;
}

.mp-dashboard__push-step--skip .mp-dashboard__push-step-pill {
  background: #94a3b8;
  color: #fff;
}

.mp-dashboard__warn-dialog { max-width: 560px; }
.mp-dashboard__warn-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.mp-dashboard__warn-list li {
  padding: 0.5rem 0.6rem;
  border: 1px solid #fde68a;
  background: #fffbeb;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.mp-dashboard__warn-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.mp-dashboard__warn-hint {
  font-size: 0.78rem;
  margin: 0.1rem 0 0.4rem;
}
.mp-dashboard__warn-tag {
  font-size: 0.78rem;
  padding: 0.1rem 0.2rem 0.1rem 0.5rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1.2;
}
.mp-dashboard__warn-tag-label { display: inline-block; }
.mp-dashboard__warn-tag-clear {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.95rem;
  line-height: 1;
  width: 1.1rem;
  height: 1.1rem;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.65;
  transition: background 0.12s ease, opacity 0.12s ease, color 0.12s ease;
}
.mp-dashboard__warn-tag-clear:hover,
.mp-dashboard__warn-tag-clear:focus-visible {
  background: #fcd34d;
  color: #7c2d12;
  opacity: 1;
  outline: none;
}
.mp-dashboard__warn-tag-clear:disabled {
  cursor: default;
  opacity: 0.35;
}

.mp-dashboard__push-infoline {
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  font-size: 0.78rem;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.mp-dashboard__push-summary {
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  background: #f4f4f5;
  color: #18181b;
  text-align: center;
}

.mp-dashboard__push-summary--ok {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #10b981;
}

.mp-dashboard__push-summary--err {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #ef4444;
}

.mp-dashboard__push-dialog-actions {
  gap: 0.5rem;
}

.mp-dashboard__push-dialog-actions button {
  min-width: 5rem;
  padding: 0.4rem 0.9rem;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  border: 1px solid transparent;
}

.mp-dashboard__push-dialog-actions button.secondary {
  background: #fff;
  color: #3f3f46;
  border-color: #d4d4d8;
}

.mp-dashboard__push-dialog-actions button.secondary:hover {
  background: #f4f4f5;
}

.mp-dashboard__push-dialog-actions button.primary {
  background: var(--fr-nav, #1f4f8b);
  color: #fff;
  border-color: var(--fr-nav, #1f4f8b);
}

.mp-dashboard__push-dialog-actions button.primary:hover {
  filter: brightness(1.06);
}

.mp-dashboard__empty {
  color: #71717a;
  text-align: center;
  font-style: italic;
}

.mp-dashboard__pager {
  align-items: center;
  gap: 0.45rem;
}


.mapping-editor__fm-proxy {
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid #d4d4d8;
  border-radius: 4px;
  background: #fafafa;
}

.mapping-editor__fm-proxy-title {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fr-nav-deep);
}

.mapping-editor__fm-proxy-lead {
  margin: 0 0 0.5rem;
  line-height: 1.45;
}

.mapping-editor__fm-proxy-actions {
  margin-top: 0;
  margin-bottom: 0.25rem;
}

.mapping-editor__run-request {
  margin-bottom: 0.35rem;
  align-items: center;
  gap: 0.75rem;
}

.mapping-editor__fm-proxy-secret-wrap {
  margin-bottom: 0.35rem;
}

.mapping-editor__fm-proxy-secret-row {
  margin: 0;
}

.mapping-editor__fm-xml-block {
  margin-top: 0.85rem;
}

/* Insert-from-URL XML lives only on the FileMaker tab */
.mapping-editor__fm-xml-block--filemaker-tab {
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 0.75rem 0.85rem 1rem;
  border: 1px solid var(--fr-panel-border);
  border-radius: 4px;
  background: #fff;
  flex-shrink: 0;
}

.mapping-editor__fm-xml-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.mapping-editor__fm-xml-buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.mapping-editor__fm-xml-head label {
  margin: 0;
  font-weight: 600;
}

.mapping-editor__fm-xml-hint {
  margin: 0 0 0.5rem;
  line-height: 1.45;
}

.textarea.textarea--code,
.mapping-editor__fm-xml {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.7rem;
  line-height: 1.35;
  white-space: pre;
  overflow-x: auto;
  resize: vertical;
  min-height: 8rem;
}

.mapping-editor__fm-xml-hint kbd {
  display: inline-block;
  padding: 0.05rem 0.28rem;
  margin: 0 0.05rem;
  font-size: 0.68rem;
  font-family: inherit;
  background: #e4e4e7;
  border: 1px solid #d4d4d8;
  border-radius: 3px;
}

.mapping-editor__fields-toolbar {
  position: sticky;
  top: 0;
  z-index: 6;
  flex-shrink: 0;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.5rem;
  padding: 0.35rem 0 0.6rem;
  background: #fff;
  border-bottom: 1px solid #e4e4e7;
}

.mapping-editor__refresh-fields {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.mapping-editor__refresh-fields svg {
  display: block;
  flex-shrink: 0;
}

.mapping-editor__schema-sync-status {
  margin-left: 0.2rem;
  white-space: nowrap;
}

.mapping-editor__panel--fields .field-mapping-root {
  flex: 1;
  min-height: 0;
  margin-top: 0;
  overflow: auto;
}

.row--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.row--two-col label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.35rem;
}

.row--two-col input,
.row--two-col select {
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  font: inherit;
  box-sizing: border-box;
}

.row--two-col select {
  background: #fff;
}

.mapping-editor__triple-select {
  display: table;
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 0.35rem;
  border: 1px solid var(--fr-panel-border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.mapping-editor__triple-select-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mapping-editor__triple-select thead {
  background: #ececee;
}

.mapping-editor__triple-select thead th {
  font-weight: 500;
  font-size: 0.875rem;
  text-align: left;
  vertical-align: bottom;
  padding: 0.45rem 0.65rem 0.4rem;
  border-bottom: 1px solid var(--fr-panel-border);
  border-right: 1px solid #d4d4d8;
}

.mapping-editor__triple-select thead th:last-child {
  border-right: none;
}

.mapping-editor__triple-select tbody td {
  vertical-align: top;
  padding: 0.55rem 0.65rem;
  border-right: 1px solid #e4e4e7;
  background: #fff;
}

.mapping-editor__triple-select tbody td:last-child {
  border-right: none;
}

.mapping-editor__triple-select th:nth-child(1),
.mapping-editor__triple-select td:nth-child(1) {
  width: 22%;
}

.mapping-editor__triple-select th:nth-child(2),
.mapping-editor__triple-select td:nth-child(2) {
  width: 39%;
}

.mapping-editor__triple-select th:nth-child(3),
.mapping-editor__triple-select td:nth-child(3) {
  width: 39%;
}

.mapping-editor__triple-select select {
  width: 100%;
  height: 2.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  font: inherit;
  box-sizing: border-box;
  background: #fff;
}

.mapping-editor__processes {
  display: table;
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 0 0 0.35rem;
  border: 1px solid var(--fr-panel-border);
  border-radius: 6px;
  overflow: visible;
  background: #fff;
}

.mapping-editor__processes thead {
  background: #ececee;
}

.mapping-editor__processes thead th {
  font-weight: 500;
  font-size: 0.8125rem;
  text-align: left;
  vertical-align: bottom;
  padding: 0.45rem 0.5rem 0.4rem;
  border-bottom: 1px solid var(--fr-panel-border);
  border-right: 1px solid #d4d4d8;
}

.mapping-editor__processes thead th:last-child {
  border-right: none;
}

.mapping-editor__processes tbody td {
  vertical-align: middle;
  padding: 0.4rem 0.5rem;
  border-right: 1px solid #e4e4e7;
  border-bottom: 1px solid #e4e4e7;
  background: #fff;
  overflow: visible;
}

.mapping-editor__processes .fm-picker {
  width: 100%;
  min-width: 0;
}

.mapping-editor__processes .fm-picker__trigger {
  min-height: 2.25rem;
}

.mp-process-fm-wrap {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
}

.mp-process-fm-wrap .fm-picker {
  flex: 1;
  min-width: 0;
}

.mp-process-fields-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  padding: 0.35rem;
  width: 2.25rem;
  min-width: 2.25rem;
  min-height: 2.25rem;
  height: 2.25rem;
  box-sizing: border-box;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  color: #3f3f46;
  background: #e8e8ec;
  border: 1px solid #cccdd1;
  border-radius: 6px;
  box-shadow: none;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.mp-process-fields-btn:hover {
  color: #27272a;
  background: #dcdcdf;
  border-color: #b8b9c0;
}

.mp-process-fields-btn:active {
  background: #d0d0d5;
}

.mp-process-fields-btn:focus-visible {
  outline: 2px solid rgba(100, 116, 139, 0.45);
  outline-offset: 2px;
}

.mp-process-fields-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.mp-process-fields-btn__icon svg {
  display: block;
}

.mp-process-fields-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  color: #71717a;
  background: #ececee;
  border-color: #d4d4d8;
}

.mp-process-fields-btn:disabled:hover {
  color: #71717a;
  background: #ececee;
  border-color: #d4d4d8;
}

.mapping-editor__processes tbody tr {
  position: relative;
}

.mapping-editor__processes tbody tr:has(.fm-picker__popup:not([hidden])) {
  z-index: 8;
}

.mapping-editor__processes .fm-picker__popup {
  z-index: 20;
}

.mapping-editor__processes .mp-picker-entity .fm-picker__popup {
  min-width: min(22rem, 94vw);
}

.mapping-editor__processes tbody tr:last-child td {
  border-bottom: none;
}

.mapping-editor__processes thead th.mapping-editor__processes-drag {
  text-align: center;
  vertical-align: middle;
}

.mapping-editor__processes-step-heading {
  display: block;
  font-weight: 600;
  line-height: 1.2;
}

.mapping-editor__processes-drag {
  width: 3.25rem;
  min-width: 3.25rem;
  box-sizing: border-box;
}

.mapping-editor__processes tbody td.mapping-editor__processes-drag-cell {
  text-align: center;
  vertical-align: middle;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.mapping-editor__processes tbody td.mapping-editor__processes-drag-cell:active {
  cursor: grabbing;
}

.mapping-editor__processes tbody.mp-process-rows--drag-active {
  cursor: grabbing;
}

.mapping-editor__processes tbody.mp-process-rows--drag-active td.mapping-editor__processes-drag-cell {
  cursor: grabbing;
}

.mapping-editor__processes tbody#mpProcessRowsRoot.mp-process-rows--drop-at-end {
  box-shadow: inset 0 -4px 0 0 rgba(26, 79, 115, 0.55);
}

.mp-process-step-cell {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  pointer-events: none;
}

.mp-process-step-num {
  font-weight: 700;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  color: #3f3f46;
}

.mapping-editor__processes-actions,
.mapping-editor__processes tbody td:last-child {
  width: 3.75rem;
  min-width: 3.75rem;
  box-sizing: border-box;
  text-align: center;
  vertical-align: middle;
  border-right: none;
}

.mapping-editor__processes .mp-process-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  padding: 0;
  line-height: 1;
}

.mapping-editor__processes .mp-process-remove svg {
  display: block;
  flex-shrink: 0;
}

.mapping-editor__processes .mp-process-drag {
  cursor: grab;
  user-select: none;
  color: #71717a;
  font-size: 0.75rem;
  display: inline-block;
  padding: 0.2rem;
  letter-spacing: -0.05em;
}

.mapping-editor__processes .mp-process-drag:active {
  cursor: grabbing;
}

.mp-process-row--selected td {
  background: #eff6ff;
}

.mapping-editor__processes tbody tr.mp-process-row--drop-before {
  position: relative;
}

.mapping-editor__processes tbody tr.mp-process-row--drop-before::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--fr-nav);
  z-index: 4;
  pointer-events: none;
}

.mp-process-row--dragging {
  position: relative;
  z-index: 12;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.24));
}

.mp-process-row--dragging td {
  background: #f0f6fb !important;
  opacity: 1;
}

.mp-process-row--dragging td.mapping-editor__processes-drag-cell {
  background: #cfe2ef !important;
}

.mapping-editor__processes select,
.mapping-editor__processes input[type="text"] {
  width: 100%;
  height: 2.25rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid #d4d4d8;
  border-radius: 6px;
  font: inherit;
  box-sizing: border-box;
  background: #fff;
}

.mp-process-cell--method {
  vertical-align: top;
}

.mp-process-method-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.mp-process-action-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.mp-process-action-status {
  min-height: 1rem;
  font-size: 0.72rem;
  color: #5b5b68;
}

.mapping-editor__processes th:nth-child(2),
.mapping-editor__processes td:nth-child(2) {
  width: 6.5rem;
}

.mapping-editor__processes th:nth-child(3),
.mapping-editor__processes td:nth-child(3) {
  width: 28%;
}

.mapping-editor__processes th:nth-child(4),
.mapping-editor__processes td:nth-child(4) {
  width: 22%;
}

.mapping-editor__processes th:nth-child(5),
.mapping-editor__processes td:nth-child(5) {
  width: auto;
}

.mp-processes__add {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0;
  margin: 0.25rem auto 0.4rem;
  border: none;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.mp-processes__add:hover {
  background: #15803d;
  box-shadow: 0 2px 6px rgba(22, 101, 52, 0.35);
}

.mp-processes__add:active {
  transform: scale(0.96);
}

.mp-processes__add:focus-visible {
  outline: 2px solid rgba(22, 163, 74, 0.45);
  outline-offset: 2px;
}

.mp-processes__add svg {
  flex-shrink: 0;
  pointer-events: none;
}

.mapping-editor__fields-hint {
  margin: 0 0 0.5rem;
}

.mapping-editor__status:empty {
  display: none;
}

.mapping-editor__status:not(:empty) {
  margin: 0.35rem 0 0;
}

/* OData schema tab */
#panel-schema.app__tabs-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}

.schema-tab-inner {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.schema-panel-intro {
  flex-shrink: 0;
  margin-bottom: 0;
}

.schema-panel-intro h2 {
  margin-top: 0;
}

.schema-toolbar {
  margin-bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.schema-load-status {
  display: block;
  flex: 1 1 100%;
  white-space: pre-line;
  max-width: 100%;
  max-height: 14rem;
  overflow-y: auto;
  line-height: 1.4;
}

.schema-entity-sets-actions-col {
  white-space: nowrap;
  width: 1%;
  vertical-align: middle;
}

.schema-sample-note {
  margin: 0.45rem 0;
  padding: 0.35rem 0.5rem;
  border-radius: 4px;
  background: #fafafa;
  border: 1px solid #e4e4e7;
}

.schema-fm-structure-body {
  margin-top: 0.35rem;
}

.schema-fm-structure-status {
  margin: 0.25rem 0 0;
}

.schema-fm-structure-dbh3 {
  margin: 0.75rem 0 0.35rem;
  font-size: 1rem;
}

.schema-fm-structure-subh {
  margin: 0.65rem 0 0.25rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.schema-fm-structure-table-wrap {
  max-height: 280px;
  overflow: auto;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  margin: 0.35rem 0;
}

.schema-table--fm-system {
  font-size: 0.75rem;
  margin-top: 0;
}

.schema-fm-structure-pre {
  margin: 0.35rem 0 0;
  padding: 0.5rem;
  max-height: 240px;
  overflow: auto;
  font-size: 0.75rem;
  line-height: 1.35;
  background: #fafafa;
  border: 1px solid #e4e4e7;
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-word;
}

.schema-summary {
  margin: 0.25rem 0 0;
  line-height: 1.45;
}

.schema-tab-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.25rem;
}

.schema-section {
  border: 1px solid var(--fr-panel-border);
  border-radius: 6px;
  background: #fff;
  margin-bottom: 0.65rem;
  padding: 0.35rem 0.75rem 0.65rem;
}

.schema-section > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--fr-nav-deep);
  padding: 0.35rem 0;
}

.schema-section-hint {
  font-weight: 500;
  color: #71717a;
  font-size: 0.8rem;
}

.schema-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  margin-top: 0.35rem;
}

.schema-table th,
.schema-table td {
  text-align: left;
  padding: 0.35rem 0.5rem;
  border-bottom: 1px solid #e4e4e7;
  vertical-align: top;
}

.schema-table th {
  background: #f4f4f5;
  font-weight: 600;
}

.schema-table code {
  font-size: 0.8rem;
  word-break: break-word;
}

.schema-th-hint {
  font-weight: 400;
  color: #71717a;
  font-size: 0.75rem;
}

.schema-fm-tables {
  min-height: 1rem;
}

.schema-fm-table-types code {
  margin-right: 0.35rem;
}

.schema-empty {
  margin: 0.5rem 0;
}

.schema-enum-block {
  margin: 0.65rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e4e4e7;
}

.schema-enum-block:last-child {
  border-bottom: none;
}

.schema-enum-name {
  margin-bottom: 0.35rem;
}

.schema-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.schema-chip {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  background: #f4f4f5;
  border: 1px solid #d4d4d8;
  border-radius: 4px;
  font-size: 0.75rem;
  max-width: 100%;
  word-break: break-word;
}

.schema-entity-split {
  display: grid;
  grid-template-columns: minmax(11rem, 22%) 1fr;
  gap: 0.75rem;
  margin-top: 0.5rem;
  min-height: 12rem;
}

@media (max-width: 720px) {
  .schema-entity-split {
    grid-template-columns: 1fr;
  }
}

.schema-entity-split__list {
  max-height: min(50vh, 28rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.35rem 0.4rem 0.35rem 0;
  margin-right: 0.15rem;
  background: #ececee;
  border-radius: 6px;
  border: 1px solid #d4d4d8;
}

.schema-type-pill {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.55rem;
  border: 1px solid #a1a1aa;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
  color: #18181b;
  -webkit-font-smoothing: antialiased;
}

/* UA `button` text is often gray; nested `code` inherited that + pale chip bg. */
.schema-type-pill code {
  color: #0f172a;
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.schema-type-pill:hover {
  background: #f4f4f5;
  border-color: #71717a;
  color: #0f172a;
}

.schema-type-pill:hover code {
  color: #020617;
}

.schema-type-pill--active {
  background: #e0f2fe;
  border-color: var(--fr-nav);
  color: var(--fr-nav-deep);
  box-shadow: inset 0 0 0 1px rgba(26, 79, 115, 0.2);
}

.schema-type-pill--active code {
  color: #0c4a6e;
}

.schema-entity-split__detail {
  max-height: min(50vh, 28rem);
  overflow-x: auto;
  overflow-y: auto;
  padding: 0.5rem 0.65rem;
  border: 1px solid #e4e4e7;
  border-radius: 6px;
  background: #fafafa;
}

.schema-detail-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.schema-detail-heading {
  margin: 1rem 0 0.35rem;
  font-size: 0.875rem;
  color: var(--fr-nav-deep);
}

.schema-prop-cap-note {
  margin: 0.25rem 0 0.5rem;
  line-height: 1.45;
}

.schema-prop-more-row td {
  padding: 0.5rem 0.35rem !important;
  background: #f4f4f5;
  border-bottom: none !important;
}

.schema-type-meta {
  margin: 0.25rem 0;
}

/* FileMaker OData annotations on properties (Calculation, Global, FieldID, …) */
.schema-table--props .schema-fm-col {
  min-width: 9rem;
  max-width: 22rem;
  font-size: 0.75rem;
  vertical-align: top;
}

.schema-table--props .schema-field-spec-col,
.schema-table--props .schema-access-col {
  min-width: 6.5rem;
  max-width: 14rem;
  font-size: 0.72rem;
  vertical-align: top;
}

.schema-prop-name {
  white-space: nowrap;
}

.schema-key-badge {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.08rem 0.35rem;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: 4px;
  background: #fef9c3;
  border: 1px solid #eab308;
  color: #713f12;
  vertical-align: middle;
}

.schema-field-spec {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.schema-field-spec__row {
  line-height: 1.35;
}

.schema-field-spec__label {
  display: inline-block;
  min-width: 4.5rem;
  color: #71717a;
  font-size: 0.68rem;
  font-weight: 600;
}

.schema-access-badge {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  border: 1px solid #d4d4d8;
  background: #f4f4f5;
  color: #3f3f46;
}

.schema-access-badge--ro {
  background: #fff7ed;
  border-color: #fdba74;
  color: #9a3412;
}

.schema-fm-annos {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.schema-fm-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.schema-fm-badge {
  display: inline-block;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  border: 1px solid #d4d4d8;
  background: #f4f4f5;
  color: #27272a;
}

.schema-fm-badge--calc {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #78350f;
}

.schema-fm-badge--global {
  background: #dbeafe;
  border-color: #3b82f6;
  color: #1e3a8a;
}

.schema-fm-badge--index {
  background: #ecfccb;
  border-color: #84cc16;
  color: #365314;
}

.schema-fm-badge--auto {
  background: #f3e8ff;
  border-color: #a855f7;
  color: #581c87;
}

.schema-fm-badge--version {
  background: #ffe4e6;
  border-color: #fb7185;
  color: #9f1239;
}

.schema-fm-fieldid code {
  font-size: 0.7rem;
  word-break: break-all;
  color: #3f3f46;
}

.schema-fm-extras {
  font-size: 0.68rem;
  color: #52525b;
  line-height: 1.35;
}

.schema-entity-name-note {
  margin: 0.5rem 0 0.75rem;
  padding: 0.5rem 0.65rem;
  border-left: 4px solid var(--fr-nav);
  background: #f0f9ff;
  border-radius: 0 6px 6px 0;
}

.schema-entity-name-note p {
  margin: 0 0 0.5rem;
}

.schema-entity-name-note p:last-child {
  margin-bottom: 0;
}

@media (max-width: 800px) {
  #panel-schema.app__tabs-panel {
    overflow-y: auto;
  }

  .schema-tab-inner {
    min-height: min(70vh, 40rem);
  }
}

/* Sync tab: table-grid rendering with consistent row heights. */
#panel-sync .sync-entity-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  /* Override .endpoint-entity-pick__list constraints — the Sync tab uses
     the full available panel height instead of the API tab's compact
     22rem cap. */
  min-height: 0;
  max-height: none;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
}

/*
 * The Sync table is intentionally NOT a flex item — letting it grow stretches
 * each <td> when there are few rows (filter shows 4 → giant rows). Keeping
 * the table at its natural height makes every row exactly `height: 2.4rem`
 * regardless of row count; empty space below is just empty scroll-container.
 */
#panel-sync .sync-grid-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 0.82rem;
  background: #fff;
  flex: 0 0 auto;
}

#panel-sync .sync-grid-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #e6ecf3;
  color: #334155;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid #c5ccd6;
  padding: 0.4rem 0.55rem;
}

#panel-sync .sync-grid-table tbody tr {
  /* Pin row height so filtered (4 rows) and unfiltered (100+ rows) look
     identical. Without this the table tries to fill remaining flex space. */
  height: 2.4rem;
}

#panel-sync .sync-grid-table tbody td {
  border-bottom: 1px solid #d7dee7;
  padding: 0.35rem 0.55rem;
  height: 2.4rem;
  line-height: 1.3;
  vertical-align: middle;
  box-sizing: border-box;
}

#panel-sync .sync-grid-row:hover {
  background: #f8fafc;
}

#panel-sync .sync-grid-row--enabled {
  background: #e8f2fa;
}

#panel-sync .sync-grid-table__check { width: 2.25rem; }
#panel-sync .sync-grid-table__entity {
  width: 28%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#panel-sync .sync-grid-table__endpoint {
  width: 28%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#panel-sync .sync-grid-table__webhook { width: 10%; }
#panel-sync .sync-grid-table__actions { width: 24%; }

#panel-sync .sync-entity-pick__actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
}

#panel-sync .sync-entity-pick__actions .btn-sm {
  padding: 0.2rem 0.55rem;
  min-height: 1.6rem;
}

.sync-webhook-badge {
  display: inline-block;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.sync-webhook-badge--on {
  color: #14532d;
  background: #dcfce7;
  border-color: #86efac;
}

.sync-webhook-badge--off {
  color: #92400e;
  background: #fef3c7;
  border-color: #fcd34d;
}

/* Sync tab: mode toggle */
#panel-sync .sync-mode-row {
  align-items: center;
  gap: 0.85rem;
  margin-top: -0.25rem;
}

#panel-sync .sync-mode-row__label {
  white-space: nowrap;
}

#panel-sync .sync-mode-radio {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  color: #1f2937;
  cursor: pointer;
}

#panel-sync .sync-mode-radio input {
  width: 1rem;
  height: 1rem;
  accent-color: #2563eb;
}