/* ============================================================
   Form — surgical overrides only.
   Inputs, Select2, focus rings → handled by common-theme via tokens.
   We only add the PropertyGrid card upgrade + filter bar styles.
   ============================================================ */

/* ── PropertyGrid category card ──────────────────────────────── */
.s-PropertyGrid .category {
  background: var(--s-card-solid-bg);
  border: 1px solid var(--s-card-border);
  border-radius: var(--bs-card-border-radius);
  box-shadow: var(--s-shadow-xs);
  padding: 1.25rem 1.25rem 1rem;
  margin-top: 0.85rem;
}
.s-PropertyGrid .category:first-child { margin-top: 0; }
/* ── Category title ──────────────────────────────────────────── */
.category-title {
  font-family: var(--header-font);
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--s-category-title);
  padding-bottom: 0.6rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--s-category-divider);
}

/* ── Filter bar ──────────────────────────────────────────────── */
.s-FilterDisplayBar { padding: 0.5rem 0; }
.quick-filter-label {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.quick-filter-active > .quick-filter-label {
  color: var(--s-sidebar-icon-active);
  font-weight: 600;
}

/* ── Inline detail grids (master-detail line editors) ────────────
   A grid editor placed in a form Category (e.g. Quotation → Lines)
   renders as a .s-DataGrid inside a .field. Strip the field label and
   the grid's boxed frame, and let it span the full category width — the
   category card already provides the frame. Auto-height (no inner scroll)
   is set via the grid's autoHeight option in DocumentLinesEditorBase. */
.s-PropertyGrid .field:has(.s-DataGrid) {
  padding-left: 0;
  padding-right: 0;
}
.s-PropertyGrid .field:has(.s-DataGrid) > .caption { display: none; }
.s-PropertyGrid .field:has(.s-DataGrid) .s-DataGrid {
  flex: 1 1 100%;
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* ── File / image upload editor — restore the bordered card + framed preview ──
   The themed reset stripped the default uploader's border, leaving the dropzone
   and thumbnail borderless. Re-add a clean bordered card and a framed thumb so it
   reads like an upload control (and matches the rest of the form inputs). */
.s-FileUploadEditor {
  display: block;
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.15));
  border-radius: 8px;
  padding: 10px;
  background: var(--bs-body-bg, #fff);
}
.s-FileUploadEditor .file-items {
  list-style: none; margin: 8px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.s-FileUploadEditor .file-item { text-align: center; }
.s-FileUploadEditor .thumb {
  display: block; width: 104px; height: 104px;
  border: 1px solid var(--bs-border-color, rgba(0,0,0,.15));
  border-radius: 8px; background: var(--bs-tertiary-bg, #f1f1f3);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  cursor: zoom-in; transition: border-color .15s ease, box-shadow .15s ease;
}
.s-FileUploadEditor .file-binary .thumb { cursor: pointer; }
.s-FileUploadEditor .thumb:hover { border-color: var(--bs-primary, #0d6efd); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.s-FileUploadEditor .filename {
  font-size: 12px; color: var(--bs-secondary-color, #6e6e73);
  margin-top: 5px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── In-page image viewer (file-upload preview lightbox) ─────────────── */
.s-img-viewer {
  position: fixed; inset: 0; z-index: 13000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.78); cursor: zoom-out; padding: 4vh 4vw;
}
.s-img-viewer-img {
  max-width: 100%; max-height: 100%;
  border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,.5); background: #fff;
}

/* ── SP6 input editors ──────────────────────────────────────────────── */
.s-color-text { max-width: 120px; display: inline-block; }
.s-color-swatch { width: 34px; height: 32px; vertical-align: middle; margin-left: 6px; padding: 2px; border: 1px solid var(--bs-border-color, rgba(0,0,0,.15)); border-radius: 6px; background: var(--bs-body-bg, #fff); cursor: pointer; }
.s-youtube-preview { margin-top: 8px; }
.s-youtube-thumb { max-width: 240px; border-radius: 8px; border: 1px solid var(--bs-border-color, rgba(0,0,0,.12)); }