/* ============================================================
   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 ──────────────────────────────────
   THIS IS `.wgl-panel`, to the value. The eight hand-written screens have had
   one section container since they were built — white, one hairline, the card
   radius, the faintest shadow, 1.15rem/1.25rem of padding — and a dialog is
   the same thing: a stack of titled sections. Every number below is read off
   `components/builder.css`, and the two should be changed together.

   `position: relative` is no longer load-bearing (the caption is back in the
   flow) but stays: validation popovers and the inline child grids position
   against it. */
.s-PropertyGrid .category {
  position: relative;
  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.15rem 1.25rem;
  margin-top: 1.15rem;
}
.s-PropertyGrid .category:first-child { margin-top: 0; }

/* Collapsed, the card is its title and nothing else — so the gap the title
   keeps under itself for the first field has nothing to open onto. */
.s-PropertyGrid .category.collapsed > .category-title { margin-bottom: 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);
}

/* ── Category title = `.wgl-panel-title` ─────────────────────────
   The section caption is a HEADING, in the flow, at the top of its card —
   `Identity`, `Roles`, `Contact`, set exactly like `Items` and `Signed terms`
   on the quotation builder. Sentence case as authored, no tracking, no rule
   under it, body ink.

   It has been two other things and both were louder than what they labelled.
   First the full `.wgl-item-index` livery — a black corner tab with yellow
   10px lettering at .15em — which is right for ONE sticker on ONE item card
   and becomes, three or four deep down a dialog, the highest-contrast objects
   on a screen whose actual content is a column of quiet fields. Then the same
   notch in neutral, which was calm but still a shape nothing else in the app
   uses for a section. The screens had the answer already; this is it.

   Sizes are `.wgl-panel-title` verbatim (builder.css) — 1.05rem, and the
   1rem gap under it is `.wgl-panel-head`'s. Change them together. */
.s-PropertyGrid .category-title {
  /* Back in the flow, and a full line of it. common-theme's own `flex: 0 1
     100%` says the same thing; it is restated because the two years this
     caption spent absolutely positioned are exactly how long the surrounding
     rules assumed it took no line at all.

     grid.css overrides this to `0 0 auto` for a category holding an inline
     child grid, which turns column — and is more specific, so it still wins. */
  position: static;
  flex: 0 1 100%;
  width: 100%;
  margin: 0 0 1rem;
  padding: 0;

  background: none;
  border: none;
  box-shadow: none;
  border-radius: 0;
  color: var(--s-wgl-ink);

  font-family: var(--header-font), 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
}

/* common-theme draws a dashed rule either side of the caption to make it read
   as a legend across the row. The tab is the legend now, and the dashes would
   run out of the card's left edge. */
.s-PropertyGrid .category-title::before,
.s-PropertyGrid .category-title::after { content: none; }

/* ── 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;
}