/* Lightfield connector styles (lightfield.js). Loaded after wizard.css. */

/* ---- Lightfield field picker (lightfield.js lfPicker*) ----
   Compact on purpose: the page's base input/label rules (padding, margins)
   made every field row ~4rem tall, so they are overridden here. */
.lf-picker { border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; overflow: hidden; margin-top: 0.5rem; }
.lf-picker-toolbar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.5rem 0.65rem; background: var(--gray-50); border-bottom: 1px solid var(--gray-200); }
.lf-picker input.lf-picker-search { flex: 1 1 14rem; max-width: 22rem; margin: 0; padding: 0.35rem 0.65rem; font-size: 0.82rem; border-radius: 8px; }
.lf-picker .lf-picker-toggle { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.8rem; font-weight: 500; color: var(--gray-700); cursor: pointer; white-space: nowrap; }
.lf-picker-count { margin-left: auto; font-size: 0.78rem; color: var(--gray-500); white-space: nowrap; }
.lf-picker-note { padding: 0.4rem 0.7rem; font-size: 0.78rem; color: var(--amber); background: var(--amber-light); }
.lf-picker-list { max-height: 24rem; overflow-y: auto; }
.lf-picker-row { display: grid; grid-template-columns: 1.25rem minmax(0, 1.35fr) minmax(0, 1fr) 6.5rem; align-items: center; gap: 0.6rem; min-height: 2rem; padding: 0.2rem 0.7rem; border-bottom: 1px solid var(--gray-100); font-size: 0.83rem; cursor: pointer; }
.lf-picker-row:hover { background: var(--gray-50); }
.lf-picker-row.selected { background: var(--blue-light); }
.lf-picker-row.lf-picker-head { position: sticky; top: 0; z-index: 1; min-height: 1.9rem; background: #fff; border-bottom: 1px solid var(--gray-200); color: var(--gray-500); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; cursor: default; }
.lf-picker input[type=checkbox] { margin: 0; cursor: pointer; }
.lf-picker-name { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; }
.lf-picker-label { color: var(--gray-900); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-picker-name code { font-size: 0.72rem; color: var(--gray-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-picker-target { display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.lf-picker input.lf-picker-slug { width: 100%; max-width: 13rem; min-width: 0; margin: 0; padding: 0.18rem 0.45rem; border-radius: 6px; font-family: 'SFMono-Regular', Consolas, monospace; font-size: 0.76rem; }
.lf-picker input.lf-picker-slug:disabled { background: transparent; border-color: transparent; color: var(--gray-400); cursor: pointer; }
.lf-chip { padding: 0.08rem 0.42rem; border-radius: 999px; font-size: 0.66rem; font-weight: 700; white-space: nowrap; }
.lf-chip-ok { color: var(--green); background: var(--green-light); }
.lf-chip-new { color: var(--amber); background: var(--amber-light); }
.lf-picker-empty { padding: 1rem; text-align: center; color: var(--gray-500); font-size: 0.82rem; }
.lf-picker-row.pinned { cursor: default; background: var(--gray-50); }
.lf-picker-row.pinned .lf-picker-label { color: var(--gray-700); }

/* "Fields to create in Lightfield" (wizard.js lfShowFieldsToCreate) */
.lf-create { margin-top: 0.85rem; border: 1px solid var(--amber-light); border-left: 3px solid var(--amber); border-radius: 10px; padding: 0.75rem 0.9rem; background: #fffdf5; }
.lf-create-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.lf-create-head .hint { margin: 0; }
.lf-create-steps { margin: 0.55rem 0 0.6rem 1.1rem; padding: 0; font-size: 0.82rem; color: var(--gray-700); }
.lf-create-steps li { margin: 0.25rem 0; }
.lf-create-list { border: 1px solid var(--gray-200); border-radius: 8px; background: #fff; max-height: 16rem; overflow-y: auto; }
.lf-create-row { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto minmax(0, 1.4fr); align-items: center; gap: 0.6rem; padding: 0.3rem 0.65rem; border-bottom: 1px solid var(--gray-100); font-size: 0.82rem; }
.lf-create-row:last-child { border-bottom: none; }
.lf-create-mark { color: var(--gray-400); font-weight: 700; text-align: center; }
.lf-create-row.done .lf-create-mark { color: var(--green); }
.lf-create-row.done .lf-create-label { color: var(--gray-400); text-decoration: line-through; }
.lf-create-label { font-weight: 500; color: var(--gray-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-create-options { color: var(--gray-500); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-create-status { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.8rem; color: var(--gray-700); }
.lf-create textarea.lf-create-text { margin-top: 0.5rem; font-size: 0.76rem; color: var(--gray-700); background: var(--gray-50); resize: vertical; }
@media (max-width: 720px) {
  .lf-picker-row { grid-template-columns: 1.25rem minmax(0, 1fr) minmax(0, 1fr); }
  .lf-picker-row > :last-child { display: none; }
}

/* Test-run record limit beside "Migrate to Lightfield" */
.lf-limit-label { display: flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0.6rem; font-size: 0.82rem; font-weight: 500; }
label.lf-limit-label input.lf-limit-input { width: 5.5rem; margin: 0; padding: 0.3rem 0.5rem; }

/* Lightfield setup instructions: the global pre rule is light text on a dark
   block; these panels had overridden only the background (light grey on
   light grey, unreadable). Dark text on a light panel, explicitly. */
pre.lf-instructions { background: var(--gray-50); color: var(--gray-900); border: 1px solid var(--gray-200); white-space: pre-wrap; word-break: break-word; font-size: 0.8rem; line-height: 1.55; padding: 0.8rem 0.95rem; }
.lf-copy-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin: 0.35rem 0; font-size: 0.85rem; }
.lf-copy-row code { background: var(--gray-100); color: var(--gray-900); padding: 0.15rem 0.4rem; border-radius: 4px; word-break: break-all; }

/* "Enrich records in Lightfield?" toggle */
label.lf-enrich-toggle { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin: 0.6rem 0 0.3rem; font-weight: 600; }
label.lf-enrich-toggle .hint { flex-basis: 100%; margin: 0 0 0 1.5rem; font-weight: 400; }


/* How often Lightfield Sync checks Lightfield for changes */
label.lf-poll-label { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.3rem; font-weight: 600; font-size: 0.85rem; }
label.lf-poll-label select.lf-poll-select { width: auto; margin: 0; padding: 0.25rem 0.5rem; }

/* ---- Lightfield page: the list of objects, then one object's steps ---- */
.lf-view-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.lf-view-head h3 { margin: 0 0 0.2rem; }
.lf-view-head .hint { margin: 0; }
table.lf-objects-table { margin-top: 0.75rem; }
.lf-objects-table code { font-size: 0.78rem; color: var(--gray-700); }
.lf-objects-table td.lf-row-action { text-align: right; }
.lf-optional { margin-left: 0.35rem; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--gray-100); color: var(--gray-500); font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; vertical-align: middle; }
.lf-settings { margin-top: 1.75rem; padding-top: 1.1rem; border-top: 1px solid var(--gray-200); }
.lf-settings h3 { margin: 0 0 0.2rem; }

.lf-object-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0.6rem 0 0.4rem; }
.lf-object-head h3 { margin: 0; }
.lf-step { margin-top: 0.9rem; padding: 0.9rem 1rem 1rem; border: 1px solid var(--gray-200); border-radius: 10px; background: #fff; }
.lf-step h4 { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.25rem; font-size: 0.95rem; color: var(--gray-900); }
.lf-step > .hint:first-of-type { margin-top: 0; }
.lf-step-n { display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 999px; background: var(--blue); color: #fff; font-size: 0.75rem; font-weight: 700; flex: none; }
.lf-step-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; }
.lf-step-locked { opacity: 0.55; }
.lf-step-locked > :not(h4) { pointer-events: none; }
.lf-step-locked h4::after { content: "Save the fields first"; margin-left: auto; color: var(--gray-500); font-size: 0.72rem; font-weight: 600; }
.lf-step-locked .lf-step-n { background: var(--gray-400); }
.lf-target-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.lf-target-row label { flex: 1 1 14rem; max-width: 24rem; }
details.lf-more { margin-top: 0.6rem; font-size: 0.85rem; }
details.lf-more summary { cursor: pointer; color: var(--gray-700); font-weight: 600; }
#lf-readiness-panel { margin-top: 0.7rem; }
table.lf-runs { margin-top: 0.75rem; }
.lf-runs td.lf-runs-error { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* "+ Add a custom object" picker */
.lf-pick-list { margin-top: 0.5rem; max-height: 22rem; overflow-y: auto; border: 1px solid var(--gray-200); border-radius: 8px; }
.lf-pick-list > .hint { padding: 0.8rem; margin: 0; }
button.lf-pick-item { display: flex; align-items: baseline; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border: none; border-bottom: 1px solid var(--gray-100); background: #fff; text-align: left; font: inherit; font-size: 0.85rem; cursor: pointer; }
button.lf-pick-item:hover { background: var(--blue-light); }
button.lf-pick-item code { font-size: 0.75rem; color: var(--gray-500); }
.lf-target-pick { display: flex; gap: 0.4rem; align-items: center; }
.lf-target-pick select { flex: 1; margin: 0; }

/* "See why" -- records that didn't copy */
button.lf-link { margin-left: 0.4rem; padding: 0; border: none; background: none; color: var(--blue); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; text-decoration: underline; }
.lf-failures { max-height: 26rem; overflow-y: auto; }
.lf-failure { padding: 0.6rem 0; border-bottom: 1px solid var(--gray-100); }
.lf-failure-head { display: flex; justify-content: space-between; gap: 0.75rem; font-weight: 600; font-size: 0.88rem; }
.lf-failure-head .hint { margin: 0; font-weight: 400; }
.lf-failure-why { margin-top: 0.25rem; font-size: 0.84rem; color: var(--gray-700); }