/* Fixture List -- Phase 1a styles.
 * Scoped to [data-module="fixture-list"]. All colors via CSS tokens.
 * Both themes supported: color tokens resolve per :root / [data-theme="light"].
 */

[data-module="fixture-list"] .fl-root {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 56px);
  background: var(--panel);
  color: var(--text-primary);
  position: relative;  /* anchor the floating dock */
}

/* Legacy top-of-grid bars are replaced by the floating dock. Hide any
 * stragglers so they don't double up during the transition. */
[data-module="fixture-list"] .fl-quickadd,
[data-module="fixture-list"] .fl-filterbar,
[data-module="fixture-list"] .fl-batch-bar { display: none !important; }

/* Full-bleed: dense tabular data needs every pixel. Drop the
 * .strata-content default padding AND zero the .strata-module-container
 * chrome so the grid edges meet the sidebar + viewport edges. Pattern
 * matches dam / ai-renderings / product-catalog (modules-lessons "Module
 * max-width: full-bleed override"). */
.strata-content:has([data-module="fixture-list"]) { padding: 0; }
.strata-module-container[data-module="fixture-list"] {
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

[data-module="fixture-list"] .fl-banner {
  padding: 8px 12px;
  background: var(--panel-2);
  color: var(--text-secondary);
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}

/* Toolbar */
[data-module="fixture-list"] .fl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}
[data-module="fixture-list"] .fl-toolbar-left {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
[data-module="fixture-list"] .fl-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

/* View-switch tabs -- bigger and more prominent than a breadcrumb; the
 * active tab is THE title of the page with a 3px accent underline
 * landing on the toolbar's bottom border. Inactive sibling stays
 * obviously clickable in text-tertiary. */
[data-module="fixture-list"] .fl-viewtabs {
  display: inline-flex;
  align-items: stretch;
  gap: 18px;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  align-self: stretch;
}
[data-module="fixture-list"] .fl-viewtab {
  display: inline-flex; align-items: center;
  padding: 0 2px;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: transparent;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: -0.01em;
  transition: color 0.12s;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
[data-module="fixture-list"] .fl-viewtab:hover {
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-viewtab-active {
  color: var(--text-primary);
  font-weight: 700;
  border-bottom-color: var(--accent);
  cursor: default;
}
[data-module="fixture-list"] .fl-viewtab-active:hover {
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-viewtab-active:hover {
  background: var(--panel);
}
[data-module="fixture-list"] .fl-summary {
  color: var(--text-secondary);
  font-size: 13px;
}
[data-module="fixture-list"] .fl-toolbar-right {
  display: flex; align-items: center; gap: 6px;
}

/* Toolbar tier-1 ghost button (borderless, contextual management).
 * Mirrors .cs-tb-ghost in channel-schedule. Today carries Categories
 * (admin-only). aria-expanded="true" paints the active "open" state
 * while the Configure Categories sheet is up. */
[data-module="fixture-list"] .fl-tb-ghost {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: transparent; border: 1px solid transparent;
  color: var(--text-tertiary);
  font-size: 12px; font-weight: 500;
  border-radius: 6px;
  cursor: pointer; font-family: inherit;
  white-space: nowrap;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
[data-module="fixture-list"] .fl-tb-ghost:hover {
  color: var(--text-secondary);
  background: var(--row-hover);
}
[data-module="fixture-list"] .fl-tb-ghost[aria-expanded="true"] {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}

/* Toggle variant of the ghost button (Spec panel show/hide). The button
 * stays in the toolbar regardless of state; aria-pressed paints the
 * "active / panel open" treatment. The icon sits before a short label. */
[data-module="fixture-list"] .fl-tb-toggle svg { flex-shrink: 0; }
[data-module="fixture-list"] .fl-tb-toggle-active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
[data-module="fixture-list"] .fl-tb-toggle-active:hover {
  color: var(--accent);
  background: var(--accent-soft);
}

/* Vertical divider between toolbar tiers. */
[data-module="fixture-list"] .fl-tb-sep {
  width: 1px; height: 18px;
  background: var(--border);
  flex-shrink: 0;
}

/* Grid scroller: NON-scrolling wrapper around .fl-grid-wrap whose only
 * job is to be the positioning context for the absolute spec divider.
 * The divider must sit OUTSIDE the scrolling container -- an absolute
 * child of an overflow:auto element scrolls with its contents in every
 * browser. The wrapper stays put while .fl-grid-wrap (its child) does
 * the actual scrolling. */
[data-module="fixture-list"] .fl-grid-scroller {
  flex: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
[data-module="fixture-list"] .fl-grid-wrap {
  flex: 1;
  overflow: auto;
  /* Drop horizontal padding -- the sticky-right spec panel anchors to
   * grid-wrap's content-box-right, so any horizontal padding leaves a
   * strip between the panel and grid-wrap's visible right edge where
   * scrolling content peeks through. Bottom padding stays to clear
   * the floating dock. */
  padding: 0 0 96px;
}
/* Single continuous spec-panel divider. Anchored to .fl-grid-scroller
 * (non-scrolling) so it stays pinned to the visible viewport during
 * both vertical and horizontal scroll. Sits at right:340px (= sum of
 * fixture_manufacturer + fixture_specification widths) which lines up
 * with the spec panel's left edge regardless of scroll position
 * (because the panel is also sticky-right of grid-wrap and grid-wrap
 * fills the scroller). z-index sits above body cells (z:2) and below
 * the sticky group-pill bandrow (z:5) so the SPEC pill paints over
 * the divider's top edge. */
[data-module="fixture-list"] .fl-spec-divider {
  position: absolute;
  top: 0;
  bottom: 96px;       /* match grid-wrap's bottom padding so the line
                       * stops at the data, not at the dock-clearance
                       * gap below it. */
  /* The divider lives on the non-scrolling .fl-grid-scroller wrapper
   * (border-box right edge), but the spec panel sticky-rights to the
   * scrolling .fl-grid-wrap CONTENT box (inside the scrollbar). Add
   * the measured scrollbar width (set as --fl-sbw from JS) so the
   * divider lines up with the panel's left edge instead of sitting
   * <scrollbar-width>px to the right of it. */
  right: calc(340px + var(--fl-sbw, 0px));
  width: 2px;
  background: var(--accent);
  z-index: 3;
  pointer-events: none;
}
[data-module="fixture-list"] .fl-root[data-spec-open="false"] .fl-spec-divider {
  display: none;
}
[data-module="fixture-list"] .fl-grid {
  /* Lock the grid to its content width so flex doesn't stretch rows
   * past the last column when the viewport is wider than the columns
   * (otherwise even-row tints + scrolling content show past the spec
   * panel on the right edge). */
  width: max-content;
  min-width: min-content;
  font-size: 13px;
}

/* Platform doesn't ship .btn-ghost; scope our own tertiary button style
 * so category "+ Add fixture" and modal Cancel buttons match the dock. */
[data-module="fixture-list"] .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
[data-module="fixture-list"] .btn-ghost:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Per-category "+ Add fixture" button sits in the group header's right
 * slot; keep it quiet so the section title stays dominant, lift it on
 * hover. */
[data-module="fixture-list"] .fl-group-actions {
  display: flex;
  gap: 6px;
}
[data-module="fixture-list"] .fl-addrow {
  font-weight: 500;
  color: var(--text-tertiary);
  background: transparent;
  border: 1px dashed var(--border);
  opacity: 0.7;
  transition: opacity 120ms ease, color 120ms ease, border-color 120ms ease;
}
[data-module="fixture-list"] .fl-addrow:hover,
[data-module="fixture-list"] .fl-group-header:hover .fl-addrow {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
  border-style: solid;
  background: var(--accent-soft);
}
[data-module="fixture-list"] .fl-grid-header {
  display: flex;
  position: sticky;
  top: 0;
  background: var(--panel-2);
  border-bottom: 2px solid var(--border-strong);
  z-index: 1;
}
[data-module="fixture-list"] .fl-header {
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-right: 1px solid var(--border);
}
[data-module="fixture-list"] .fl-cell {
  box-sizing: border-box;
  padding: 6px;
  border-right: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Match cell sizing so group pill widths line up with column widths. */
[data-module="fixture-list"] .fl-group-cell {
  box-sizing: border-box;
}
/* Cell standouts -- FIXT TYPE is the row's primary identity (anchor
 * cell) and gets the strongest treatment; QTY USED is a contextual
 * rollup so it stays subdued. Header row excluded via :not(.fl-header).
 * Targeted via data-col so column reordering doesn't break the styling. */
[data-module="fixture-list"] .fl-cell[data-col="qty_used"]:not(.fl-header) {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-cell[data-col="code"]:not(.fl-header):not(.fl-cell-computed) {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 700;
  font-size: 14px;
  color: var(--accent);
  background: var(--accent-soft);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
[data-module="fixture-list"] .fl-cell-computed {
  color: var(--text-tertiary);
  background: var(--row-alt);
}

/* Frozen-right (the Spec band): sticky to the right edge during
 * horizontal scroll. Z-index ladder matches the existing FL frozen-left
 * stack (modules-lessons "Grid z-index ordering must be intentional"):
 *   body frozen-left      z:1   |   body frozen-right     z:1   (this)
 *   .fl-grid-header (row) z:3   |   header frozen-right   z:4   (this)
 *   group-pill row        z:4   |   summary group pill    z:5   (below)
 * Pre-fix the body frozen-right sat at z:12 which punched THROUGH the
 * header during vertical scroll, hiding LOCATION / MFR / SPECIFICATION
 * column labels behind body cells. Solid panel base under semi-
 * transparent row tints per modules-lessons "Frozen-cell backgrounds
 * need a solid base." */
/* Compound .fl-cell.fl-cell-frozen-right selector for specificity --
 * a later rule `.fl-cell { position: relative }` matches at the same
 * specificity as plain `.fl-cell-frozen-right`, so source-order would
 * have it winning and erasing the sticky positioning. The two-class
 * form (0,2,1 specificity) beats it.
 *
 * Visual treatment reads as a "side panel" attached to the right of
 * the grid: panel-2 recessed background (darker than the data area
 * for a true panel-vs-content separation), a 2px accent left border
 * that marks the boundary, and 1px border-left dividers between the
 * spec columns inside the panel. No box-shadow -- it created a stray
 * vertical strip in the middle of the grid when no horizontal scroll
 * was active (sticky cells were in their natural DOM position so the
 * shadow had no overlap to imply). */
[data-module="fixture-list"] .fl-cell.fl-cell-frozen-right {
  position: sticky;
  z-index: 2;
  /* Solid panel base + a left inset shadow so the cells visually sit on
   * top of the scrolling data. Without the shadow, the panel-2 swatch
   * blends into the bandrow bg and you can't tell the side panel is a
   * separate surface. */
  background: var(--panel-2);
  border-left: 1px solid var(--border);
}
/* The leftmost frozen-right cell used to paint the panel boundary via
 * its own border-left + box-shadow. That made the line look pieced --
 * one segment per row, plus a shadow per row stacking the seam.
 * Replaced by the single .fl-spec-divider element rendered as an
 * absolute child of .fl-grid-wrap. No per-cell border here so the
 * divider paints uninterrupted. */
[data-module="fixture-list"] .fl-grid-header .fl-cell.fl-cell-frozen-right {
  z-index: 4;
  background: var(--panel-2);
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.05em;
}
/* Zebra + hover compose translucent tints over the row's underlying
 * background -- which is also panel-2 for the frozen-right cell. Layer
 * tints with a two-stop gradient so the cell stays fully opaque on
 * every row state. Without these the row tint shows the scrolling data
 * cells bleeding through the sticky panel during horizontal scroll. */
[data-module="fixture-list"] .fl-row:nth-child(even of .fl-row) .fl-cell.fl-cell-frozen-right {
  background: linear-gradient(var(--row-alt), var(--row-alt)), var(--panel-2);
}
[data-module="fixture-list"] .fl-row:hover .fl-cell.fl-cell-frozen-right {
  background: linear-gradient(var(--row-hover), var(--row-hover)), var(--panel-2);
}
[data-module="fixture-list"] .fl-row:nth-child(even of .fl-row):hover .fl-cell.fl-cell-frozen-right {
  background:
    linear-gradient(var(--row-hover), var(--row-hover)),
    linear-gradient(var(--row-alt), var(--row-alt)),
    var(--panel-2);
}

/* Typographic differentiation inside the side panel -- MANUFACTURER
 * renders as quiet metadata, SPECIFICATION italicizes for the typical
 * "model spec" feel, both at slightly smaller font so the panel reads
 * as supplementary catalog data, not first-class column data. */
[data-module="fixture-list"] .fl-cell[data-col="fixture_manufacturer"]:not(.fl-header) {
  color: var(--text-secondary);
  font-size: 12px;
}
[data-module="fixture-list"] .fl-cell[data-col="fixture_specification"]:not(.fl-header) {
  color: var(--text-primary);
  font-size: 12px;
  font-style: italic;
}
[data-module="fixture-list"] .fl-cell[data-col="fixture_location"]:not(.fl-header) {
  font-size: 12px;
}


/* Spec group pill: sticky-right with the same z-stack and shadow as
 * the cells below it so the SPEC label travels with the column band
 * during horizontal scroll and reads as one continuous panel surface.
 * Matches BOTH .fl-group-pill-pinned (when alwaysVisible: true, the
 * default) AND .fl-group-pill-expanded (in case alwaysVisible flips).
 * align-self: stretch ensures the pill claims the bandrow's full
 * height so its background composes flush with the header below. */
[data-module="fixture-list"] .fl-group-pill[data-group="spec"] {
  position: sticky;
  right: 0;
  z-index: 5;
  align-self: stretch;
  background: var(--panel-2);
  /* No border-left + no shadow here -- the continuous .fl-spec-divider
   * element paints the panel boundary at this same x-offset across the
   * whole grid. Letting the pill carry its own 2px border + shadow
   * stacks two glows + two seams on the same edge. */
  color: var(--accent);
  font-weight: 700;
}
[data-module="fixture-list"] .fl-group-pill[data-group="spec"]:hover {
  background: color-mix(in srgb, var(--accent) 8%, var(--panel-2));
}

/* Identity group pill sticky-left so the column-group label stays
 * anchored to the viewport's left edge during horizontal scroll,
 * matching the frozen Identity body cells (qty_used + code + description)
 * beneath it. Pair with the gutter-spacer rule below so the bandrow
 * stays cohesive at the left edge. */
[data-module="fixture-list"] .fl-group-cell.fl-gutter-spacer {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--panel-2);
}
[data-module="fixture-list"] .fl-group-pill[data-group="id"] {
  position: sticky;
  left: 36px;
  z-index: 5;
  background: var(--panel-2);
}
[data-module="fixture-list"] .fl-cell-catalog {
  cursor: pointer;
  position: relative;
}
[data-module="fixture-list"] .fl-cell-catalog:hover {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
[data-module="fixture-list"] .fl-cell-catalog-empty .fl-cell-catalog-hint {
  color: var(--text-tertiary);
  font-style: italic;
  font-size: 12px;
}
[data-module="fixture-list"] .fl-row {
  display: flex;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background-color 0.1s;
}
[data-module="fixture-list"] .fl-row:hover {
  background: var(--row-hover);
}
[data-module="fixture-list"] .fl-row-add {
  background: var(--row-alt);
  align-items: center;
  padding: 8px;
  gap: 8px;
}
[data-module="fixture-list"] .fl-row-add .fl-addrow-hint {
  color: var(--text-tertiary);
  font-size: 12px;
  padding: 0 6px;
}
[data-module="fixture-list"] .fl-addrow-input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--border-strong);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 4px;
  font-size: 13px;
}

/* Category group header */
[data-module="fixture-list"] .fl-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--panel-2);
  padding: 10px 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--border-strong);
  position: sticky;
  top: 32px;
  /* z-index sits above the frozen-right body cells (z:2) so the
   * banner's panel-2 bg + bottom border paint over any body row that
   * scrolls underneath it -- previously the frozen-right cells at z:2
   * obscured the banner's border-bottom in the spec column area
   * during vertical scroll. Stays below the bandrow (z:5) so the
   * group-pill still wins on the very top edge. */
  z-index: 3;
}
/* Banner-row spec divider was a sticky-right ::after pseudo-element
 * that painted its own 2px accent line through the banner. Replaced
 * by the single .fl-spec-divider absolute element that paints across
 * the banner row from above. Per-banner pseudo removed entirely. */
[data-module="fixture-list"] .fl-group-title {
  color: var(--text-primary);
  /* Stick the category label to the left edge of the scroll viewport
   * so horizontal scrolling keeps the group title visible. */
  position: sticky;
  left: 12px;
  padding-right: 8px;
  background: var(--panel-2);
  z-index: 2;
}
/* Category actions (+ Add fixture) sit sticky-right just left of the
 * spec panel divider. margin-left: auto pushes them away from the
 * title; sticky-right keeps them visible during horizontal scroll. The
 * right offset matches the spec-panel width so the button sits flush
 * with the divider's outside edge. data-spec-open="false" -> right:0
 * (button pins to right edge of viewport). */
[data-module="fixture-list"] .fl-group-actions {
  margin-left: auto;
  position: sticky;
  right: 348px;
  background: var(--panel-2);
  padding-right: 8px;
  z-index: 2;
}
[data-module="fixture-list"] .fl-root[data-spec-open="false"] .fl-group-actions {
  right: 12px;
}
[data-module="fixture-list"] .fl-group-meta {
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 12px;
  margin-left: 8px;
}

/* Loading placeholder (paint 1 before loadAll resolves) */
[data-module="fixture-list"] .fl-loading {
  padding: 80px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-loading p {
  margin: 0;
  font-size: 14px;
}
[data-module="fixture-list"] .fl-loading-spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  animation: fl-spin 720ms linear infinite;
}
@keyframes fl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-module="fixture-list"] .fl-loading-spinner { animation: none; border-top-color: var(--border-strong); }
}

/* Empty */
[data-module="fixture-list"] .fl-empty {
  padding: 48px;
  text-align: center;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-empty p {
  margin-bottom: 16px;
}
[data-module="fixture-list"] .fl-empty-hint {
  color: var(--text-tertiary);
  font-size: 13px;
}

/* Inline project picker shown when no project is selected (ALL PROJECTS). */
[data-module="fixture-list"] .fl-picker {
  padding: 48px 32px;
  max-width: 960px;
  margin: 0 auto;
}
[data-module="fixture-list"] .fl-picker-header {
  text-align: center;
  margin-bottom: 28px;
}
[data-module="fixture-list"] .fl-picker-header h2 {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-picker-header p {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
[data-module="fixture-list"] .fl-picker-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
[data-module="fixture-list"] .fl-picker-card:hover {
  background: var(--panel-2);
  border-color: var(--border-strong);
}
[data-module="fixture-list"] .fl-picker-card:active {
  transform: scale(0.99);
}
[data-module="fixture-list"] .fl-picker-card-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
[data-module="fixture-list"] .fl-picker-card-name {
  flex: 1;
  min-width: 0;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-module="fixture-list"] .fl-picker-card-code {
  color: var(--text-tertiary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
 * Categories sheet (Tier 2: modal-content; classes UNSCOPED
 * because ctx.ui.modal mounts on .strata-overlay outside the
 * data-module wrapper -- see modules-lessons "modal CSS Tier 2").
 *
 * Per-project category overrides editor. Each row is one studio
 * default OR a project-only addition. Hidden rows render dimmed
 * with the eye-toggle in active state.
 * ============================================================ */
body .strata-modal:has(.fl-cat-list) { max-width: 720px; }
body .fl-cat-help {
  margin: 0 0 12px 0;
  font-size: 12px; line-height: 1.4;
  color: var(--text-secondary);
}
body .fl-cat-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
body .fl-cat-row {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  transition: background 0.1s, opacity 0.12s;
}
body .fl-cat-row:last-child { border-bottom: 0; }
body .fl-cat-row:hover { background: var(--row-hover); }
body .fl-cat-row-hidden {
  opacity: 0.45;
  background: var(--panel-2);
}
body .fl-cat-drag {
  color: var(--text-tertiary);
  opacity: 0.5;
  font-size: 14px;
  letter-spacing: -2px;
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
}
body .fl-cat-row[draggable="true"] .fl-cat-drag:active { cursor: grabbing; }
body .fl-cat-row-dragging { opacity: 0.4; }
body .fl-cat-row-drop-before { box-shadow: inset 0 2px 0 0 var(--accent); }
body .fl-cat-row-drop-after { box-shadow: inset 0 -2px 0 0 var(--accent); }
body .fl-cat-prefix {
  width: 64px;
  padding: 4px 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 4px;
  color: var(--accent);
  font-family: ui-monospace, monospace;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  flex-shrink: 0;
}
body .fl-cat-prefix-locked {
  cursor: not-allowed;
  opacity: 0.85;
}
body .fl-cat-label {
  flex: 1; min-width: 0;
  padding: 4px 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 13px; font-family: inherit;
  font-weight: 500;
}
body .fl-cat-label:hover { border-color: var(--border); }
body .fl-cat-label:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--input-bg);
}
body .fl-cat-rule {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
body .fl-cat-rule code {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--accent);
}
body .fl-cat-pill {
  font-size: 10px; color: var(--text-tertiary);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1px 8px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}
body .fl-cat-toggle,
body .fl-cat-del {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-tertiary);
  cursor: pointer; font-family: inherit;
  font-size: 14px;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s;
}
body .fl-cat-toggle:hover,
body .fl-cat-del:hover {
  color: var(--text-primary);
  background: var(--row-hover);
}
body .fl-cat-toggle-hidden {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent-line);
}
body .fl-cat-del-spacer,
body .fl-cat-toggle-spacer {
  display: inline-block; width: 22px; height: 22px;
  background: transparent; border: none;
  flex-shrink: 0;
}
body .fl-cat-add {
  align-self: flex-start; margin-top: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  color: var(--accent);
  font-size: 12px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
body .fl-cat-add:hover {
  border-color: var(--accent-line);
  border-style: solid;
  background: var(--accent-soft);
}
/* iOS-zoom prevention for modal inputs (Tier-2 escape; modules.md). */
body .strata-overlay .fl-cat-prefix,
body .strata-overlay .fl-cat-label { font-size: 16px; }
@media (min-width: 768px) {
  body .strata-overlay .fl-cat-prefix { font-size: 12px; }
  body .strata-overlay .fl-cat-label { font-size: 13px; }
}
@media (max-width: 640px) {
  body .fl-cat-rule { display: none; }
}

/* Mobile: read-only banner + card fallback */
@media (max-width: 1023px) {
  [data-module="fixture-list"] .fl-mobile-banner { display: block; }
  [data-module="fixture-list"] .fl-toolbar-right .btn-primary,
  [data-module="fixture-list"] .fl-group-actions .fl-addrow { display: none; }
}
@media (min-width: 1024px) {
  [data-module="fixture-list"] .fl-mobile-banner[hidden] { display: none; }
}

/* Provenance left-border CSS classes -- schema present, UI lands in Phase 1c */
[data-module="fixture-list"] .fl-cell.fl-prov-override  { border-left: 3px solid var(--strata-provenance-override, #4b9fff); }
[data-module="fixture-list"] .fl-cell.fl-prov-flag      { border-left: 3px solid var(--strata-provenance-flag, #ff4b4b); }
[data-module="fixture-list"] .fl-cell.fl-prov-changed   { border-left: 3px solid var(--strata-provenance-changed, #4bff82); }

/* Grid editor -- inline cell editing states. */
[data-module="fixture-list"] .fl-root { outline: none; }
[data-module="fixture-list"] .fl-cell { position: relative; }
[data-module="fixture-list"] .fl-cell-active {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  z-index: 2;
  background: var(--accent-soft);
}
[data-module="fixture-list"] .fl-cell-selected {
  background: var(--accent-soft);
}
[data-module="fixture-list"] .fl-cell-editing {
  padding: 0 !important;
  background: var(--panel);
  /* Lift overflow clip so combobox dropdowns can extend past the cell. */
  overflow: visible !important;
  position: relative;
  z-index: 10;
}
[data-module="fixture-list"] .fl-cell-editor {
  width: 100%;
  height: 100%;
  min-height: 28px;
  padding: 5px;
  border: 0;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--input-bg);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  box-sizing: border-box;
}
[data-module="fixture-list"] .fl-cell-editor:focus { outline-color: var(--accent); }

/* Row-select gutter + batch action bar ----------------------------- */
[data-module="fixture-list"] .fl-gutter {
  width: 36px;
  min-width: 36px;
  flex: 0 0 36px;
  padding: 4px 0;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border-right: 1px solid var(--border);
  box-sizing: border-box;
}
[data-module="fixture-list"] .fl-gutter-spacer {
  cursor: default;
  background: transparent;
}
[data-module="fixture-list"] .fl-gutter-header { cursor: pointer; }
[data-module="fixture-list"] .fl-gutter:hover .fl-gutter-check {
  border-color: var(--accent);
}
[data-module="fixture-list"] .fl-gutter-check {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border-strong);
  border-radius: 3px;
  background: var(--input-bg);
  vertical-align: middle;
  position: relative;
  box-sizing: border-box;
}
[data-module="fixture-list"] .fl-gutter-check-on {
  background: var(--accent);
  border-color: var(--accent);
}
[data-module="fixture-list"] .fl-gutter-check-on::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
[data-module="fixture-list"] .fl-gutter-check-indeterminate {
  background: var(--accent-soft);
  border-color: var(--accent);
}
[data-module="fixture-list"] .fl-gutter-check-indeterminate::after {
  content: '';
  position: absolute;
  left: 2px;
  right: 2px;
  top: 5px;
  height: 2px;
  background: var(--accent);
}
[data-module="fixture-list"] .fl-row-selected {
  background: var(--accent-soft);
}
[data-module="fixture-list"] .fl-row-selected:hover {
  background: var(--accent-soft);
  filter: brightness(1.05);
}
[data-module="fixture-list"] .fl-batch-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 16px;
  background: var(--accent-soft);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-batch-count {
  font-weight: 600;
  color: var(--accent);
  font-size: 13px;
}
[data-module="fixture-list"] .fl-batch-actions {
  display: flex;
  gap: 6px;
}

/* Combobox cell editor: text input + filtered dropdown for vocab cells. */
[data-module="fixture-list"] .fl-cb-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
[data-module="fixture-list"] .fl-cb-input {
  width: 100%;
  height: 100%;
}
[data-module="fixture-list"] .fl-cb-menu {
  position: absolute;
  top: 100%;
  left: -1px;
  min-width: calc(100% + 2px);
  max-height: 220px;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  box-shadow: var(--shadow);
  /* Must sit above the floating dock (z:80) so comboboxes opened in
   * rows near the bottom of the grid are still reachable. */
  z-index: 90;
  font-size: 12px;
}
[data-module="fixture-list"] .fl-cb-item {
  padding: 4px 10px;
  cursor: pointer;
  color: var(--text-primary);
  white-space: nowrap;
}
[data-module="fixture-list"] .fl-cb-item:hover,
[data-module="fixture-list"] .fl-cb-item-active {
  background: var(--accent-soft);
  color: var(--accent);
}
[data-module="fixture-list"] .fl-cb-empty {
  padding: 6px 10px;
  color: var(--text-tertiary);
  font-size: 11px;
  font-style: italic;
}
/* Saved-pulse: briefly highlight a cell after a successful write. */
@keyframes fl-cell-saved-pulse {
  0%   { background: var(--success-soft, rgba(52,211,153,0.3)); }
  100% { background: transparent; }
}
[data-module="fixture-list"] .fl-cell.fl-cell-saved-pulse {
  animation: fl-cell-saved-pulse 600ms ease-out;
}
@keyframes fl-check-focus-pulse {
  0% { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft); }
  100% { box-shadow: inset 0 0 0 0 transparent; background: transparent; }
}
[data-module="fixture-list"] .fl-cell.fl-check-focus-pulse {
  animation: fl-check-focus-pulse 1200ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  [data-module="fixture-list"] .fl-cell.fl-check-focus-pulse {
    animation: none;
    box-shadow: inset 0 0 0 2px var(--accent);
    background: var(--accent-soft);
  }
}
/* Row should keep visible while a cell inside it is active. */
[data-module="fixture-list"] .fl-row:has(.fl-cell-active) {
  background: var(--row-hover);
}

/* Quick-add bar -- primary stubbing surface. Sits above filter bar. */
[data-module="fixture-list"] .fl-quickadd {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  position: relative;
}
[data-module="fixture-list"] .fl-quickadd-icon {
  font-size: 18px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  width: 20px;
  text-align: center;
}
[data-module="fixture-list"] .fl-quickadd-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid var(--border-strong);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 6px;
}
[data-module="fixture-list"] .fl-quickadd-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
[data-module="fixture-list"] .fl-quickadd-pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--accent-soft);
  border-radius: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-quickadd-pending .fl-quickadd-code {
  font-family: ui-monospace, monospace;
  font-weight: 600;
  color: var(--accent);
}
[data-module="fixture-list"] .fl-quickadd-dropdown {
  position: absolute;
  top: 100%;
  left: 16px;
  right: 16px;
  max-height: 420px;
  overflow-y: auto;
  z-index: 50;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: var(--shadow);
  margin-top: -4px;
}
[data-module="fixture-list"] .fl-quickadd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}
[data-module="fixture-list"] .fl-quickadd-row:last-child { border-bottom: 0; }
[data-module="fixture-list"] .fl-quickadd-row:hover,
[data-module="fixture-list"] .fl-quickadd-row-active {
  background: var(--accent-soft);
}
[data-module="fixture-list"] .fl-quickadd-prefix {
  font-family: ui-monospace, monospace;
  font-weight: 700;
  color: var(--accent);
  min-width: 40px;
  font-size: 13px;
}
[data-module="fixture-list"] .fl-quickadd-label {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-quickadd-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-quickadd-meta > span {
  padding: 2px 6px;
  background: var(--panel-2);
  border-radius: 3px;
  white-space: nowrap;
}
[data-module="fixture-list"] .fl-quickadd-badge {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-weight: 600;
}
[data-module="fixture-list"] .fl-quickadd-empty {
  padding: 14px;
  font-size: 13px;
  color: var(--text-secondary);
  text-align: center;
}
[data-module="fixture-list"] .fl-quickadd-hint {
  padding: 6px 12px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--panel-2);
  border-top: 1px solid var(--border);
}
[data-module="fixture-list"] .fl-quickadd-hint kbd {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  padding: 1px 5px;
  background: var(--panel-2);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  margin: 0 2px;
}

/* NLP quick-add: input row + live preview badges + facet picker. */
[data-module="fixture-list"] .fl-quickadd-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
[data-module="fixture-list"] .fl-qa-preview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 16px 10px 44px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  margin: 0 -16px -10px -16px;
}
[data-module="fixture-list"] .fl-qa-preview-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  letter-spacing: 0.02em;
}
[data-module="fixture-list"] .fl-qa-preview-badge.fl-qa-code {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-soft);
  font-family: ui-monospace, monospace;
}
[data-module="fixture-list"] .fl-qa-preview-badge.fl-qa-desc {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-primary);
  font-weight: 500;
}
[data-module="fixture-list"] .fl-qa-preview-badge.fl-qa-inferred {
  background: transparent;
  border-style: dashed;
  color: var(--text-tertiary);
}

/* Dropdown: fast-path button + facet picker chip rows. */
[data-module="fixture-list"] .fl-qa-fast {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
}
[data-module="fixture-list"] .fl-qa-fast:hover { filter: brightness(1.05); }
[data-module="fixture-list"] .fl-qa-fast-icon {
  font-size: 16px;
  line-height: 1;
  width: 18px;
  text-align: center;
}
[data-module="fixture-list"] .fl-qa-fast-label { flex: 1; }
[data-module="fixture-list"] .fl-qa-note {
  padding: 6px 14px;
  font-size: 11px;
  color: var(--text-tertiary);
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
  font-style: italic;
}
[data-module="fixture-list"] .fl-qa-divider {
  padding: 8px 14px 4px 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  background: var(--panel);
}
[data-module="fixture-list"] .fl-qa-facets {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0 8px 0;
}
[data-module="fixture-list"] .fl-qa-facet-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 14px;
}
[data-module="fixture-list"] .fl-qa-facet-row:hover { background: var(--row-hover); }
[data-module="fixture-list"] .fl-qa-facet-label {
  flex: 0 0 110px;
  padding-top: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-module="fixture-list"] .fl-qa-facet-chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
[data-module="fixture-list"] .fl-qa-chip {
  padding: 3px 10px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
[data-module="fixture-list"] .fl-qa-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-qa-chip-active {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: var(--accent);
  font-weight: 600;
}
[data-module="fixture-list"] .fl-qa-chip-custom {
  border-style: dashed;
  color: var(--text-tertiary);
}
[data-module="fixture-list"] .fl-qa-source {
  padding: 1px 5px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--panel-2);
  color: var(--text-tertiary);
  border-radius: 3px;
  font-weight: 500;
}
[data-module="fixture-list"] .fl-qa-source-user {
  background: var(--accent-soft);
  color: var(--accent);
}
[data-module="fixture-list"] .fl-qa-number {
  width: 80px;
  padding: 3px 8px;
  font-size: 12px;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
}

/* Filter bar -- sits between toolbar and grid. */
[data-module="fixture-list"] .fl-filterbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel-2);
  flex-wrap: wrap;
}
[data-module="fixture-list"] .fl-filterbar-search {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}
[data-module="fixture-list"] .fl-search-input {
  width: 100%;
  padding: 6px 10px;
  padding-right: 28px;
  border: 1px solid var(--border-strong);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 13px;
}
[data-module="fixture-list"] .fl-search-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  padding: 2px 6px;
  line-height: 1;
  font-size: 16px;
}
[data-module="fixture-list"] .fl-filterbar-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
[data-module="fixture-list"] .fl-chip {
  padding: 4px 10px;
  border: 1px solid var(--border-strong);
  background: var(--panel);
  color: var(--text-secondary);
  border-radius: 99px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.1s, border-color 0.1s, color 0.1s;
}
[data-module="fixture-list"] .fl-chip:hover {
  border-color: var(--accent-line);
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-chip-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
[data-module="fixture-list"] .fl-filterbar-spacer { flex: 1; min-width: 12px; }
[data-module="fixture-list"] .fl-filterbar-select {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-filterbar-select select {
  padding: 4px 8px;
  border: 1px solid var(--border-strong);
  background: var(--input-bg);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 13px;
}
[data-module="fixture-list"] .fl-preset-badge {
  padding: 2px 8px;
  background: var(--panel-2);
  color: var(--text-secondary);
  border-radius: 99px;
  font-size: 11px;
}

/* Filter result hint above the grid. */
[data-module="fixture-list"] .fl-filter-hint {
  padding: 6px 12px;
  background: var(--accent-soft);
  color: var(--text-secondary);
  font-size: 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 12px;
}
[data-module="fixture-list"] .fl-filter-hint .btn-ghost {
  font-size: 12px;
  padding: 2px 8px;
}

/* Column picker modal body (scoped to body so modal DOM picks it up). */
body .fl-col-picker {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 16px;
}
body .fl-col-picker li { padding: 4px 0; }
body .fl-col-picker label { font-size: 13px; cursor: pointer; }

/* ------------------------------------------------------------------ */
/* Table polish: frozen columns, density, sort, hover, stickies.      */
/* ------------------------------------------------------------------ */

/* Sticky left columns. The first three columns (QTY USED + CODE +
   DESCRIPTION) stick while the rest scroll horizontally. `left` is
   written inline by the renderer so cumulative widths stay accurate. */
[data-module="fixture-list"] .fl-cell.fl-cell-frozen {
  position: sticky;
  background: var(--panel);
  z-index: 1;
  border-right: 1px solid var(--border-strong);
}
[data-module="fixture-list"] .fl-grid-header .fl-cell-frozen {
  background: var(--panel-2);
  z-index: 3;
}
/* Row-level tints (hover, alt, computed) are intentionally semi-
 * transparent so they compose over the page background. On frozen
 * (sticky) cells that is a bug: during horizontal scroll the non-
 * frozen cells slide under the frozen column and show through the
 * transparent tint, producing "overlapping cell elements" and the
 * hover flash looking like the background disappears. Fix: layer
 * the tint OVER a solid --panel base so the frozen column is fully
 * opaque no matter what is behind it. */
[data-module="fixture-list"] .fl-row:nth-child(even of .fl-row) .fl-cell-frozen {
  background:
    linear-gradient(var(--row-alt), var(--row-alt)),
    var(--panel);
}
[data-module="fixture-list"] .fl-row:hover .fl-cell-frozen,
[data-module="fixture-list"] .fl-row:nth-child(even of .fl-row):hover .fl-cell-frozen {
  background:
    linear-gradient(var(--row-hover), var(--row-hover)),
    var(--panel);
}
[data-module="fixture-list"] .fl-cell.fl-cell-computed.fl-cell-frozen {
  background:
    linear-gradient(var(--row-alt), var(--row-alt)),
    var(--panel);
}

/* Header cells are clickable for sort; indicate it. */
[data-module="fixture-list"] .fl-header {
  cursor: pointer;
  user-select: none;
}
[data-module="fixture-list"] .fl-header:hover {
  color: var(--text-primary);
  background: var(--panel-2);
}
[data-module="fixture-list"] .fl-header-sorted {
  color: var(--accent);
}
[data-module="fixture-list"] .fl-sort-arrow { margin-left: 4px; font-size: 10px; }

/* Density variants. Default (comfortable) uses the existing padding. */
[data-module="fixture-list"] .fl-density-compact .fl-cell {
  padding: 2px 6px;
  font-size: 12px;
}
[data-module="fixture-list"] .fl-density-compact .fl-row { min-height: 22px; }
[data-module="fixture-list"] .fl-density-compact .fl-group-header { padding: 6px 12px; }
[data-module="fixture-list"] .fl-density-compact .fl-area-totals { padding: 4px 12px; }

/* Density toggle in the filter bar. */
[data-module="fixture-list"] .fl-density-toggle {
  display: inline-flex;
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  overflow: hidden;
}
[data-module="fixture-list"] .fl-density-btn {
  background: var(--panel);
  color: var(--text-secondary);
  border: 0;
  padding: 4px 10px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}
[data-module="fixture-list"] .fl-density-btn-active {
  background: var(--accent-soft);
  color: var(--accent);
}
[data-module="fixture-list"] .fl-density-btn:not(:last-child) {
  border-right: 1px solid var(--border-strong);
}

/* Row hover + zebra for scannability. */
[data-module="fixture-list"] .fl-row:nth-child(even of .fl-row) {
  background: var(--row-alt, transparent);
}
[data-module="fixture-list"] .fl-row:hover {
  background: var(--row-hover);
}

/* Sticky group headers above area totals + category bands. */
[data-module="fixture-list"] .fl-group-header {
  position: sticky;
  top: 32px;
  z-index: 2;
}

/* Top-tier column-group row above the column headers. Clickable pills
   collapse/expand the columns below them. */
[data-module="fixture-list"] .fl-grid-groups {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 4;
  background: var(--panel-2);
  border-bottom: 1px solid var(--border);
}
[data-module="fixture-list"] .fl-group-cell {
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  overflow: hidden;
}
[data-module="fixture-list"] .fl-group-pill { cursor: pointer; user-select: none; }
[data-module="fixture-list"] .fl-group-pill-pinned { cursor: default; color: var(--text-tertiary); }
[data-module="fixture-list"] .fl-group-pill-expanded:hover,
[data-module="fixture-list"] .fl-group-pill-collapsed:hover {
  background: var(--row-hover);
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-group-pill-collapsed {
  min-width: 80px;
  max-width: 140px;
  background: var(--accent-soft);
  color: var(--accent);
  border-right: 1px solid var(--border-strong);
}
[data-module="fixture-list"] .fl-group-chevron {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}

/* Group-pill inline action button (redesign #5: lamping catalog link).
 * Renders next to the group label; clicking opens the catalog-link
 * stub. Lives inside the group-pill which is itself the group-toggle
 * target, so the dispatcher calls stopPropagation to keep the click
 * from also toggling the pill. */
[data-module="fixture-list"] .fl-group-pill-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin-left: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 3px;
  color: var(--text-tertiary);
  cursor: pointer;
  font-family: inherit;
  vertical-align: middle;
  transition: color 0.12s, background 0.12s;
}
[data-module="fixture-list"] .fl-group-pill-action:hover {
  color: var(--accent);
  background: var(--accent-soft);
}
[data-module="fixture-list"] .fl-group-pill-action:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

/* "Catalog-linked" cell scaffolding (redesign #5 future state). When a
 * fixture's lamping is set from a Product Catalog spec, the lamp cells
 * render in computed/locked style with a small badge on LAMP SPEC.
 * Classes defined here so the visual shape lives in CSS; render.js
 * will gate them on row.lamp_catalog_id when that column lands. */
[data-module="fixture-list"] .fl-cell-lamp-linked {
  color: var(--text-tertiary);
  background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--panel);
  font-style: italic;
}
[data-module="fixture-list"] .fl-cell-lamp-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 1px 5px;
  background: var(--accent);
  color: var(--bg);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* With the groups row present, column header and category headers sit
   below it. z-index stack: groups (4) > column header (3) > category
   group header (2). */
[data-module="fixture-list"] .fl-grid-header { top: 26px; z-index: 3; }
[data-module="fixture-list"] .fl-group-header { top: 58px; }

/* ============================================================
   Floating dock: bottom-anchored command bar that swaps between
   quick-add / selection / filter modes.
   ============================================================ */
[data-module="fixture-list"] .fl-dock {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 880px;
  background: color-mix(in srgb, var(--panel-2) 92%, transparent);
  backdrop-filter: saturate(1.2) blur(18px);
  -webkit-backdrop-filter: saturate(1.2) blur(18px);
  border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  border-radius: 16px;
  box-shadow:
    0 20px 60px -16px rgba(0, 0, 0, 0.55),
    0 4px 12px -2px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  z-index: 80;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 180ms ease, transform 180ms ease, opacity 180ms ease;
}
[data-module="fixture-list"] .fl-dock-expanded {
  box-shadow:
    0 32px 80px -20px rgba(0, 0, 0, 0.65),
    0 8px 20px -4px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Collapsed state: a small circular FAB in the bottom-right corner. */
[data-module="fixture-list"] .fl-dock-fab {
  position: fixed;
  left: auto;
  right: 24px;
  bottom: 24px;
  transform: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  border: 0;
  box-shadow:
    0 10px 28px -6px rgba(0, 0, 0, 0.55),
    0 3px 8px -2px rgba(0, 0, 0, 0.30);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
}
[data-module="fixture-list"] .fl-dock-fab:hover {
  filter: brightness(1.08);
  transform: scale(1.05);
  transition: transform 120ms ease;
}
[data-module="fixture-list"] .fl-dock-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--panel);
  color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
[data-module="fixture-list"] .fl-dock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  min-height: 48px;
}
[data-module="fixture-list"] .fl-dock-input-row {
  background: var(--input-bg);
  border-top: 1px solid var(--border);
}
[data-module="fixture-list"] .fl-dock:not(.fl-dock-expanded) .fl-dock-input-row {
  border-top: 0;
}
[data-module="fixture-list"] .fl-dock-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}
[data-module="fixture-list"] .fl-dock-input {
  flex: 1;
  min-width: 0;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
[data-module="fixture-list"] .fl-dock-input::placeholder {
  color: var(--text-tertiary);
}
[data-module="fixture-list"] .fl-dock-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
}
[data-module="fixture-list"] .fl-dock-icon-btn:hover {
  background: var(--row-hover);
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-dock-icon-btn-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-soft);
}
[data-module="fixture-list"] .fl-dock-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
[data-module="fixture-list"] .fl-dock-view-badge {
  padding: 3px 8px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent);
  border-radius: 999px;
}

/* Expansion panel (sits above the input row) */
[data-module="fixture-list"] .fl-dock-panel {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
[data-module="fixture-list"] .fl-dock-panel-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
[data-module="fixture-list"] .fl-dock-panel-hint code {
  padding: 1px 5px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-dock-panel-hint kbd {
  padding: 1px 5px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-secondary);
}
/* ============================================================
   Quick-add two-panel editor (Option C refined).
   LEFT  = identity (code, wattage, in-rush, toggles)
   RIGHT = description + location + attribute chips (V/Pwr/Data)
   Footer = big commit button; input row stays below that.
   ============================================================ */

/* On-accent foreground token: toggle thumbs and active attribute chips
 * sit on --accent (a blue in both themes), so the reading color stays
 * white regardless of theme. Declared here so module CSS does not
 * hardcode hex values outside a token block. */
:root { --fl-on-accent: #ffffff; }
[data-theme="light"] { --fl-on-accent: #ffffff; }

@keyframes fl-qa-fade-in {
  from { opacity: 0; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

[data-module="fixture-list"] .fl-exp-panel {
  display: grid;
  grid-template-columns: 216px 1fr;
  animation: fl-qa-fade-in 140ms ease-out;
}

/* Panel-collapse rules:
 *   no data-panel        -> open on >=721px, hidden on <=720px
 *   data-panel="open"    -> force open (user clicked chevron on mobile)
 *   data-panel="closed"  -> force closed (user clicked chevron on desktop) */
@media (max-width: 720px) {
  [data-module="fixture-list"] .fl-dock-quickadd:not([data-panel="open"]) .fl-exp-panel,
  [data-module="fixture-list"] .fl-dock-quickadd:not([data-panel="open"]) .fl-dock-footer {
    display: none;
  }
}
[data-module="fixture-list"] .fl-dock-quickadd[data-panel="closed"] .fl-exp-panel,
[data-module="fixture-list"] .fl-dock-quickadd[data-panel="closed"] .fl-dock-footer {
  display: none;
}

/* LEFT panel -------------------------------------------------- */
[data-module="fixture-list"] .fl-lp {
  padding: 13px 13px 13px 14px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-module="fixture-list"] .fl-lp-eyebrow {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-tertiary);
}
[data-module="fixture-list"] .fl-lp-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-module="fixture-list"] .fl-lp-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
[data-module="fixture-list"] .fl-lp-code-input {
  font-family: var(--font-display, 'Satoshi', sans-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.5px;
  line-height: 1;
  background: transparent;
  border: 0;
  outline: none;
  border-bottom: 2px solid transparent;
  padding: 0 0 1px;
  width: 100%;
  transition: border-color 0.15s;
  caret-color: var(--accent);
}
[data-module="fixture-list"] .fl-lp-code-input:hover { border-bottom-color: var(--border-strong); }
[data-module="fixture-list"] .fl-lp-code-input:focus { border-bottom-color: var(--accent); }
[data-module="fixture-list"] .fl-lp-num-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
[data-module="fixture-list"] .fl-lp-num {
  width: 60px;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  outline: none;
  transition: border-color 0.15s;
}
[data-module="fixture-list"] .fl-lp-num:focus { border-color: var(--accent); }
[data-module="fixture-list"] .fl-lp-num[readonly] {
  background: var(--row-alt);
  color: var(--text-secondary);
  cursor: default;
  border-color: var(--border);
}
[data-module="fixture-list"] .fl-lp-num-unit {
  font-size: 11px;
  color: var(--text-tertiary);
  font-weight: 500;
}
[data-module="fixture-list"] .fl-lp-calc-eq {
  font-size: 10px;
  color: var(--text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
[data-module="fixture-list"] .fl-lp-text {
  width: 100%;
  padding: 4px 7px;
  font-size: 11px;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
[data-module="fixture-list"] .fl-lp-text:focus { border-color: var(--accent); }
[data-module="fixture-list"] .fl-lamp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 8px;
}
[data-module="fixture-list"] .fl-lamp-grid-full { grid-column: 1 / -1; }

/* Compact in-rush multiplier -- a secondary control that sits right
 * under the wattage field. Muted, small, no label eyebrow so it reads
 * as an adjunct rather than a peer field. Prefix-based default (from
 * presets.js) means most users never touch it. */
[data-module="fixture-list"] .fl-lp-inrush {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: -2px;
}
[data-module="fixture-list"] .fl-lp-inrush-label {
  font-size: 10px;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
[data-module="fixture-list"] .fl-lp-inrush-num {
  width: 44px;
  padding: 2px 6px;
  font-size: 11px;
  color: var(--text-secondary);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  outline: none;
  transition: border-color 0.15s, color 0.15s;
}
[data-module="fixture-list"] .fl-lp-inrush-num:focus {
  border-color: var(--accent);
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-lp-inrush-unit {
  font-size: 10px;
  color: var(--text-tertiary);
}

/* LEFT toggles at the bottom of the left panel */
[data-module="fixture-list"] .fl-lp-toggles {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: auto;
}
[data-module="fixture-list"] .fl-lp-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-family: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
}
[data-module="fixture-list"] .fl-lp-toggle:hover .fl-toggle-track { border-color: var(--border-strong); }
[data-module="fixture-list"] .fl-toggle-track {
  width: 28px;
  height: 16px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border-strong);
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.15s, border-color 0.15s;
}
[data-module="fixture-list"] .fl-lp-toggle.is-on .fl-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
[data-module="fixture-list"] .fl-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--text-tertiary);
  transition: transform 0.15s, background-color 0.15s;
}
[data-module="fixture-list"] .fl-lp-toggle.is-on .fl-toggle-thumb {
  transform: translateX(12px);
  background: var(--fl-on-accent);
}
[data-module="fixture-list"] .fl-toggle-label {
  font-size: 11px;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-lp-toggle.is-on .fl-toggle-label { color: var(--text-primary); }

/* PS reveal (nested under + Remote PS toggle) */
[data-module="fixture-list"] .fl-ps-reveal {
  padding-left: 36px;
  animation: fl-qa-fade-in 130ms ease-out;
}
[data-module="fixture-list"] .fl-ps-input-label {
  font-size: 9px;
  color: var(--text-tertiary);
  margin-bottom: 3px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
[data-module="fixture-list"] .fl-ps-input {
  width: 100%;
  padding: 4px 7px;
  font-size: 11px;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: ui-monospace, monospace;
  outline: none;
  transition: border-color 0.15s;
}
[data-module="fixture-list"] .fl-ps-input:focus { border-color: var(--accent); }

/* RIGHT panel ----------------------------------------------- */
[data-module="fixture-list"] .fl-rp {
  display: flex;
  flex-direction: column;
  gap: 0;
}
[data-module="fixture-list"] .fl-rp-desc-block {
  padding: 11px 14px 10px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-module="fixture-list"] .fl-rp-field-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
}
[data-module="fixture-list"] .fl-rp-desc-input {
  width: 100%;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
[data-module="fixture-list"] .fl-rp-desc-input:focus { border-color: var(--accent); }
[data-module="fixture-list"] .fl-rp-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
[data-module="fixture-list"] .fl-rp-sug {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  color: var(--text-tertiary);
  background: var(--panel);
  border: 1px solid var(--border);
  cursor: pointer;
  font-family: inherit;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
  white-space: nowrap;
  line-height: 1.4;
}
[data-module="fixture-list"] .fl-rp-sug:hover {
  color: var(--text-primary);
  border-color: var(--accent);
  background: var(--accent-soft);
}
[data-module="fixture-list"] .fl-rp-loc-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 1px;
}
[data-module="fixture-list"] .fl-rp-loc-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}
[data-module="fixture-list"] .fl-rp-loc-input {
  flex: 1;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
[data-module="fixture-list"] .fl-rp-loc-input:focus { border-color: var(--accent); }

[data-module="fixture-list"] .fl-rp-attrs {
  padding: 5px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
[data-module="fixture-list"] .fl-attr-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
[data-module="fixture-list"] .fl-attr-row:last-child { border-bottom: 0; }
[data-module="fixture-list"] .fl-attr-label {
  flex: 0 0 74px;
  padding-top: 5px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
[data-module="fixture-list"] .fl-attr-src {
  padding: 1px 4px;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 2px;
  font-weight: 700;
  background: var(--panel-2);
  color: var(--text-tertiary);
}
[data-module="fixture-list"] .fl-attr-src-user {
  background: var(--accent-soft);
  color: var(--accent);
}
[data-module="fixture-list"] .fl-attr-chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-top: 2px;
}
[data-module="fixture-list"] .fl-attr-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
  white-space: nowrap;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-attr-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--row-hover);
}
[data-module="fixture-list"] .fl-attr-chip.is-on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--fl-on-accent);
  font-weight: 600;
}
[data-module="fixture-list"] .fl-attr-chip.is-custom {
  border-style: dashed;
  color: var(--text-tertiary);
}

/* Commit footer -------------------------------------------- */
[data-module="fixture-list"] .fl-dock-footer {
  padding: 10px 14px;
  background: var(--panel-2);
  border-top: 1px solid var(--border);
}
[data-module="fixture-list"] .fl-commit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background-color 0.12s;
  text-align: left;
}
[data-module="fixture-list"] .fl-commit-btn:hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}
[data-module="fixture-list"] .fl-commit-label { flex: 1; }
[data-module="fixture-list"] .fl-commit-right {
  font-size: 11px;
  opacity: 0.65;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
[data-module="fixture-list"] .fl-commit-right kbd {
  padding: 2px 6px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  border: 1px solid var(--accent-line);
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  color: var(--accent);
  opacity: 1;
}

/* Responsive: stack panels on narrow dock widths (tablet/phone) */
@media (max-width: 560px) {
  [data-module="fixture-list"] .fl-exp-panel {
    grid-template-columns: 1fr;
  }
  [data-module="fixture-list"] .fl-lp {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }
}

/* Quick-add dropdown inside the dock: override the old absolute
 * positioning from quick-add.js CSS so it flows naturally. */
[data-module="fixture-list"] .fl-dock-panel-quickadd .fl-quickadd-dropdown {
  position: static;
  border: 0;
  background: transparent;
  box-shadow: none;
  max-height: 340px;
  margin: 0;
  border-radius: 0;
}

/* Selection mode */
[data-module="fixture-list"] .fl-dock-selection {
  background: color-mix(in srgb, var(--accent) 15%, var(--panel-2));
  border-color: var(--accent);
}
[data-module="fixture-list"] .fl-dock-selection .fl-dock-row {
  justify-content: space-between;
  padding: 10px 14px;
}
[data-module="fixture-list"] .fl-dock-count {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
[data-module="fixture-list"] .fl-dock-count-num {
  display: inline-block;
  padding: 2px 8px;
  margin-right: 4px;
  background: var(--accent);
  color: white;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  min-width: 20px;
  text-align: center;
}
[data-module="fixture-list"] .fl-dock-actions {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}
[data-module="fixture-list"] .fl-dock-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--panel);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
}
[data-module="fixture-list"] .fl-dock-btn:hover {
  background: var(--row-hover);
  border-color: var(--accent);
}
[data-module="fixture-list"] .fl-dock-btn-danger {
  background: color-mix(in srgb, var(--error) 20%, var(--panel));
  border-color: color-mix(in srgb, var(--error) 40%, var(--border-strong));
  color: var(--error);
}
[data-module="fixture-list"] .fl-dock-btn-danger:hover {
  background: color-mix(in srgb, var(--error) 35%, var(--panel));
  color: white;
}
[data-module="fixture-list"] .fl-dock-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-dock-btn-ghost:hover {
  background: var(--row-hover);
  border-color: transparent;
  color: var(--text-primary);
}

/* Filter mode */
[data-module="fixture-list"] .fl-dock-panel-filter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-module="fixture-list"] .fl-dock-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
[data-module="fixture-list"] .fl-dock-chip {
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
[data-module="fixture-list"] .fl-dock-chip:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-dock-chip-active {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}
[data-module="fixture-list"] .fl-dock-filter-view {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
[data-module="fixture-list"] .fl-dock-view-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-dock-view-select select {
  padding: 4px 8px;
  background: var(--input-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  font-size: 12px;
  font-family: inherit;
}
[data-module="fixture-list"] .fl-dock-density {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
[data-module="fixture-list"] .fl-dock-density-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  color: var(--text-secondary);
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
[data-module="fixture-list"] .fl-dock-density-btn.is-on {
  background: var(--accent-soft);
  color: var(--accent);
}

@media (max-width: 720px) {
  [data-module="fixture-list"] .fl-dock {
    width: calc(100% - 16px);
    bottom: 12px;
    border-radius: 12px;
  }
  [data-module="fixture-list"] .fl-dock-selection .fl-dock-row {
    flex-wrap: wrap;
  }
  [data-module="fixture-list"] .fl-dock-actions {
    order: 3;
    width: 100%;
    justify-content: flex-start;
  }
}

/* ================================================================
   Excel Importer modal (fixture-list + channel-schedule)
   Renders inside the platform's global modal overlay, so styles
   are NOT scoped to [data-module]. Prefix every rule with .strata-excel-importer.
   ================================================================ */

.strata-excel-importer {
  font-size: 13px;
  color: var(--text);
  max-width: 900px;
}
.strata-excel-importer .sxi-file {
  margin: 0 0 12px 0;
  font-size: 13px;
  color: var(--text-muted);
}
.strata-excel-importer .sxi-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 12px 0;
}
.strata-excel-importer .sxi-card {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
}
.strata-excel-importer .sxi-card-count {
  font-size: 20px;
  font-weight: 600;
  color: var(--accent);
  line-height: 1.2;
}
.strata-excel-importer .sxi-card-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  margin-top: 2px;
}
.strata-excel-importer .sxi-card-detail {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.strata-excel-importer .sxi-section {
  margin: 12px 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
}
.strata-excel-importer .sxi-section > summary {
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 500;
  user-select: none;
  border-radius: 6px;
}
.strata-excel-importer .sxi-section[open] > summary {
  border-bottom: 1px solid var(--border);
  border-radius: 6px 6px 0 0;
}
.strata-excel-importer .sxi-section ul {
  margin: 0;
  padding: 8px 12px 10px 28px;
  font-size: 12px;
  color: var(--text-muted);
  max-height: 180px;
  overflow: auto;
}
.strata-excel-importer .sxi-section li {
  margin: 2px 0;
}
.strata-excel-importer .sxi-errors {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--panel));
}
.strata-excel-importer .sxi-errors h4 {
  margin: 10px 12px 4px;
  color: var(--danger);
  font-size: 13px;
}
.strata-excel-importer .sxi-warnings > summary { color: var(--warning); }
.strata-excel-importer .sxi-collisions > summary { color: var(--warning); }
.strata-excel-importer .sxi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.strata-excel-importer .sxi-table thead th {
  position: sticky; top: 0;
  background: var(--panel-2);
  text-align: left;
  padding: 6px 8px;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.strata-excel-importer .sxi-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.strata-excel-importer .sxi-table tbody tr:hover td {
  background: var(--row-hover);
}
.strata-excel-importer .sxi-table code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11px;
  background: var(--panel-2);
  padding: 1px 4px;
  border-radius: 3px;
}
.strata-excel-importer .sxi-more {
  text-align: center;
  font-style: italic;
  color: var(--text-muted);
  padding: 6px;
}
.strata-excel-importer .sxi-pill {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.strata-excel-importer .sxi-pill-new {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}
.strata-excel-importer .sxi-pill-skip {
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-muted);
}
.strata-excel-importer details[open] .sxi-table {
  max-height: 320px;
  display: block;
  overflow: auto;
}

/* Mode selector (fb_1780347257 sub-C) -- Add vs Replace at the top of
   the importer preview modal. */
.strata-excel-importer .sxi-mode {
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 12px;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--button-radius);
}
.strata-excel-importer .sxi-mode-opt {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12px; color: var(--text-secondary);
  cursor: pointer;
}
.strata-excel-importer .sxi-mode-opt input { margin-top: 2px; }
.strata-excel-importer .sxi-mode-opt strong { color: var(--text-primary); }
.strata-excel-importer .sxi-mode-opt-danger strong { color: var(--error); }
.strata-excel-importer .sxi-replace-warning {
  margin-top: 4px;
  padding: 8px 10px;
  background: var(--error-soft);
  border: 1px solid var(--error);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  font-size: 12px;
}
.strata-excel-importer .sxi-replace-warning-head { margin: 0 0 4px; }
.strata-excel-importer .sxi-replace-warning-list { margin: 4px 0; padding-left: 20px; }
.strata-excel-importer .sxi-replace-warning-list li { margin: 2px 0; }
.strata-excel-importer .sxi-replace-warning-foot {
  margin: 4px 0 0; color: var(--text-secondary);
}

/* S7 reconcile ("Update existing") diff detail. Scrollable within the
   modal; both themes via tokens. */
.strata-excel-importer .sxi-reconcile {
  margin-top: 4px;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  font-size: 12px;
}
.strata-excel-importer .sxi-rc-group { margin-bottom: 10px; }
.strata-excel-importer .sxi-rc-group h5 {
  margin: 0 0 6px; font-size: 12px; color: var(--text-primary);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.strata-excel-importer .sxi-rc-entity {
  padding: 5px 0; border-top: 1px solid var(--border);
}
.strata-excel-importer .sxi-rc-title { color: var(--text-secondary); margin-bottom: 2px; }
.strata-excel-importer .sxi-rc-title code {
  background: var(--panel-2); padding: 1px 5px; border-radius: 4px;
  color: var(--text-primary);
}
.strata-excel-importer .sxi-rc-fields { margin: 0; padding-left: 14px; list-style: none; }
.strata-excel-importer .sxi-rc-fields li { margin: 1px 0; color: var(--text-secondary); }
.strata-excel-importer .sxi-rc-field { color: var(--text-tertiary); margin-right: 4px; }
.strata-excel-importer .sxi-rc-old { color: var(--text-secondary); text-decoration: line-through; }
.strata-excel-importer .sxi-rc-arrow { color: var(--text-tertiary); }
.strata-excel-importer .sxi-rc-new { color: var(--text-primary); font-weight: 500; }
.strata-excel-importer .sxi-rc-empty { color: var(--text-tertiary); }
.strata-excel-importer .sxi-rc-foot {
  margin: 6px 0 0; padding-top: 6px; border-top: 1px solid var(--border);
  color: var(--text-secondary);
}

/* Type-the-project-name confirmation modal body. Unscoped (modal mounts
   on body), uses sxi- prefix as the leak guard like the importer body. */
.sxi-replace-confirm {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px;
}
.sxi-replace-confirm-head { margin: 0; color: var(--text-primary); }
.sxi-replace-confirm-list {
  margin: 0; padding-left: 20px; color: var(--text-secondary);
}
.sxi-replace-confirm-list li { margin: 2px 0; }
.sxi-replace-confirm-foot { margin: 6px 0 0; color: var(--text-primary); font-weight: 500; }
.sxi-replace-confirm-input {
  padding: 8px 10px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--button-radius);
  color: var(--text-primary);
  font-size: 13px;
}
.sxi-replace-confirm-input:focus {
  outline: none;
  border-color: var(--error);
  box-shadow: 0 0 0 2px var(--error-soft);
}
.sxi-replace-confirm-hint { margin: 6px 0 0; color: var(--text-tertiary); font-size: 11px; }

/* ---------------------------------------------------------------------- *
 * Subview tab strip + visibility-toggle dropdown (Stage 5 Track B).
 * Mirrors Channel Schedule's pattern (cs-subviewbar / cs-subview-menu).
 * ---------------------------------------------------------------------- */
[data-module="fixture-list"] .fl-subviewbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px 8px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
  background: var(--panel);
}
[data-module="fixture-list"] .fl-subviewtabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}
[data-module="fixture-list"] .fl-subviewtab {
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
[data-module="fixture-list"] .fl-subviewtab:hover {
  color: var(--text-primary);
  background: var(--row-hover);
}
[data-module="fixture-list"] .fl-subviewtab-active {
  color: var(--text-primary);
  background: var(--accent-soft);
  border-color: var(--accent-line);
  cursor: default;
}
[data-module="fixture-list"] .fl-subviewtab-active:hover {
  background: var(--accent-soft);
}
[data-module="fixture-list"] .fl-subview-settings {
  position: relative;
}
[data-module="fixture-list"] .fl-subview-settings-btn {
  font-size: 16px;
  line-height: 1;
  padding: 2px 10px;
  min-height: 24px;
}
[data-module="fixture-list"] .fl-subview-settings-btn-active {
  background: var(--row-hover);
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-subview-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 90;
  min-width: 220px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-module="fixture-list"] .fl-subview-menu-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  padding: 4px 6px;
}
[data-module="fixture-list"] .fl-subview-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-subview-toggle:hover {
  background: var(--row-hover);
}
[data-module="fixture-list"] .fl-subview-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
[data-module="fixture-list"] .fl-subview-toggle-mandatory {
  color: var(--text-tertiary);
  cursor: not-allowed;
}
[data-module="fixture-list"] .fl-subview-toggle-mandatory input[type="checkbox"] {
  cursor: not-allowed;
}

/* ---------------------------------------------------------------------- *
 * Decorative Lamping Guide subview (Stage 5 Track B, family spec 3.7).
 * Card grid: one card per decorative fixture with two photo slots,
 * inline-edit lamp description / fixture link / lamp link / notes.
 * ---------------------------------------------------------------------- */
[data-module="fixture-list"] .fl-dlg {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1400px;
}
[data-module="fixture-list"] .fl-dlg-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
[data-module="fixture-list"] .fl-dlg-header-text {
  flex: 1;
  min-width: 240px;
}
[data-module="fixture-list"] .fl-dlg-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
[data-module="fixture-list"] .fl-dlg-header h2 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}
[data-module="fixture-list"] .fl-dlg-help {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-dlg-loading {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-dlg-empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--text-secondary);
  background: var(--panel);
  border: 1px dashed var(--border);
  border-radius: 10px;
}
[data-module="fixture-list"] .fl-dlg-empty h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-dlg-empty p {
  margin: 0 0 16px;
}
[data-module="fixture-list"] .fl-dlg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px;
}
[data-module="fixture-list"] .fl-dlg-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[data-module="fixture-list"] .fl-dlg-card-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
[data-module="fixture-list"] .fl-dlg-card-id {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
[data-module="fixture-list"] .fl-dlg-card-code {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-dlg-card-desc {
  font-size: 13px;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-dlg-card-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 4px 12px;
  margin: 0;
}
[data-module="fixture-list"] .fl-dlg-card-stats div {
  margin: 0;
}
[data-module="fixture-list"] .fl-dlg-card-stats dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
[data-module="fixture-list"] .fl-dlg-card-stats dd {
  margin: 1px 0 0;
  font-size: 13px;
  color: var(--text-primary);
}
[data-module="fixture-list"] .fl-dlg-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}
[data-module="fixture-list"] .fl-dlg-photo-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-module="fixture-list"] .fl-dlg-photo-block-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
[data-module="fixture-list"] .fl-dlg-photo-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-module="fixture-list"] .fl-dlg-photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
[data-module="fixture-list"] .fl-dlg-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  color: var(--text-tertiary);
  text-align: center;
}
[data-module="fixture-list"] .fl-dlg-photo-initials {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
[data-module="fixture-list"] .fl-dlg-photo-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
[data-module="fixture-list"] .fl-dlg-photo-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--row-hover), transparent);
  background-size: 200% 100%;
  animation: fl-dlg-shimmer 1.4s linear infinite;
  pointer-events: none;
}
@keyframes fl-dlg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
[data-module="fixture-list"] .fl-dlg-photo-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
[data-module="fixture-list"] .fl-dlg-photo-remove {
  color: var(--text-tertiary);
}
[data-module="fixture-list"] .fl-dlg-fields {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
[data-module="fixture-list"] .fl-dlg-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
[data-module="fixture-list"] .fl-dlg-field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
[data-module="fixture-list"] .fl-dlg-field-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-module="fixture-list"] .fl-dlg-field-row-twin {
  flex-direction: row;
  gap: 12px;
  flex-wrap: wrap;
}
[data-module="fixture-list"] .fl-dlg-field-cell {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
[data-module="fixture-list"] .fl-dlg-input,
[data-module="fixture-list"] .fl-dlg-input-text {
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  resize: vertical;
}
[data-module="fixture-list"] .fl-dlg-input:focus,
[data-module="fixture-list"] .fl-dlg-input-text:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft);
}
[data-module="fixture-list"] .fl-dlg-input-saving {
  border-color: var(--accent-line);
}
[data-module="fixture-list"] .fl-dlg-input-saved {
  border-color: var(--accent-line);
  box-shadow: 0 0 0 2px var(--accent-soft);
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
[data-module="fixture-list"] .fl-dlg-input-error {
  border-color: var(--error);
}
[data-module="fixture-list"] .fl-dlg-url-open {
  align-self: flex-start;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
}
[data-module="fixture-list"] .fl-dlg-url-open:hover {
  text-decoration: underline;
}

@media (max-width: 720px) {
  [data-module="fixture-list"] .fl-dlg-card-body {
    grid-template-columns: 1fr;
  }
  [data-module="fixture-list"] .fl-dlg-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
 * Catalog Assembly subview (docs/fixture-type-multi-catalog-plan.md
 * Phase 2). Scoped under the module container; platform tokens flip
 * for light theme automatically. Modal classes below are unscoped
 * (.strata-overlay) because ctx.ui.modal mounts on document.body.
 * ================================================================ */
/* In the assembly subview the grid-wrap should NOT scroll -- each of the
 * three panes scrolls internally instead. Kill grid-wrap's scroll + the
 * dock-clearance bottom padding so .fl-asm can fill the bounded height. */
[data-module="fixture-list"] .fl-root[data-subview="assembly"] .fl-grid-wrap {
  overflow: hidden;
  padding: 0;
}
[data-module="fixture-list"] .fl-asm {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 320px;
  height: 100%;
  min-height: 0;
  border-top: 1px solid var(--border);
}
[data-module="fixture-list"] .fl-asm-rail,
[data-module="fixture-list"] .fl-asm-editor,
[data-module="fixture-list"] .fl-asm-ref {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
}
[data-module="fixture-list"] .fl-asm-rail { border-right: 1px solid var(--border); }
[data-module="fixture-list"] .fl-asm-ref { border-left: 1px solid var(--border); }
[data-module="fixture-list"] .fl-asm-pane-head {
  padding: 12px 14px 10px; border-bottom: 1px solid var(--border);
}
[data-module="fixture-list"] .fl-asm-eyebrow {
  font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-tertiary); font-weight: 600;
}
[data-module="fixture-list"] .fl-asm-pane-head h2 { font-size: 13.5px; margin: 3px 0 0; font-weight: 600; }

/* rail */
[data-module="fixture-list"] .fl-asm-rail-list { overflow-y: auto; flex: 1; }
[data-module="fixture-list"] .fl-asm-rail-item {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 9px;
  width: 100%; text-align: left; padding: 9px 14px; background: transparent;
  border: none; border-bottom: 1px solid var(--border); cursor: pointer; position: relative;
}
[data-module="fixture-list"] .fl-asm-rail-item:hover { background: var(--row-hover); }
[data-module="fixture-list"] .fl-asm-rail-item.active { background: var(--accent-soft); }
[data-module="fixture-list"] .fl-asm-rail-item.active::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--accent);
}
[data-module="fixture-list"] .fl-asm-code {
  font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; color: var(--text-primary);
}
[data-module="fixture-list"] .fl-asm-railmeta { min-width: 0; }
[data-module="fixture-list"] .fl-asm-desc {
  display: block; font-size: 12px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
[data-module="fixture-list"] .fl-asm-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; }
[data-module="fixture-list"] .fl-asm-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-tertiary); flex-shrink: 0; }
[data-module="fixture-list"] .fl-asm-dot.ok { background: var(--success); }
[data-module="fixture-list"] .fl-asm-dot.partial { background: var(--warning); }
[data-module="fixture-list"] .fl-asm-dot.none { background: var(--text-tertiary); }
[data-module="fixture-list"] .fl-asm-count { font-size: 10.5px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
[data-module="fixture-list"] .fl-asm-count.warn { color: var(--warning); }

/* editor */
[data-module="fixture-list"] .fl-asm-editor-head {
  padding: 15px 18px 13px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--panel-2), transparent);
}
[data-module="fixture-list"] .fl-asm-editor-row1 { display: flex; align-items: baseline; gap: 12px; }
[data-module="fixture-list"] .fl-asm-bigcode { font-family: var(--font-mono); font-size: 19px; font-weight: 700; color: var(--text-primary); }
[data-module="fixture-list"] .fl-asm-editor-desc { color: var(--text-secondary); font-size: 13px; }
[data-module="fixture-list"] .fl-asm-specline {
  margin-top: 7px; display: flex; flex-wrap: wrap; gap: 5px 16px; font-size: 11.5px; color: var(--text-tertiary);
}
[data-module="fixture-list"] .fl-asm-specline b { color: var(--text-secondary); font-weight: 600; }
[data-module="fixture-list"] .fl-asm-editor-body { padding: 16px 18px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 12px; }
[data-module="fixture-list"] .fl-asm-section-label {
  font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--text-tertiary); font-weight: 600;
}
[data-module="fixture-list"] .fl-asm-components { display: flex; flex-direction: column; gap: 10px; }
[data-module="fixture-list"] .fl-asm-comp {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
}
[data-module="fixture-list"] .fl-asm-comp.primary { border-color: var(--accent-line); }
[data-module="fixture-list"] .fl-asm-comp-main { min-width: 0; }
[data-module="fixture-list"] .fl-asm-role {
  display: inline-block; font-size: 10px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; color: var(--text-secondary); background: var(--panel-2);
  border: 1px solid var(--border);
}
[data-module="fixture-list"] .fl-asm-role.role-primary { color: var(--accent); background: var(--accent-soft); border-color: var(--accent-line); }
[data-module="fixture-list"] .fl-asm-role.role-lamp { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
[data-module="fixture-list"] .fl-asm-role.role-tape { color: var(--success); background: var(--success-soft); border-color: transparent; }
[data-module="fixture-list"] .fl-asm-role.role-driver { color: var(--box-blue); background: var(--box-blue-soft); border-color: transparent; }
[data-module="fixture-list"] .fl-asm-prod { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
[data-module="fixture-list"] .fl-asm-mfr { font-size: 12px; color: var(--text-secondary); margin-top: 1px; }
[data-module="fixture-list"] .fl-asm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 7px; }
[data-module="fixture-list"] .fl-asm-chip {
  font-size: 10.5px; color: var(--text-secondary); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 6px; padding: 2px 7px; font-variant-numeric: tabular-nums;
}
[data-module="fixture-list"] .fl-asm-cut { font-size: 11px; font-weight: 500; display: inline-flex; align-items: center; gap: 4px; }
[data-module="fixture-list"] .fl-asm-cut.have { color: var(--success); }
[data-module="fixture-list"] .fl-asm-cut.missing { color: var(--error); }
[data-module="fixture-list"] .fl-asm-comp-tools { display: flex; gap: 4px; align-items: flex-start; }
[data-module="fixture-list"] .fl-asm-iconbtn {
  width: 26px; height: 26px; display: grid; place-items: center; background: transparent;
  border: 1px solid transparent; border-radius: 6px; color: var(--text-tertiary); cursor: pointer; font-size: 14px;
}
[data-module="fixture-list"] .fl-asm-iconbtn:hover { border-color: var(--border); color: var(--text-primary); background: var(--panel-2); }
[data-module="fixture-list"] .fl-asm-add {
  align-self: flex-start; margin-top: 2px; padding: 9px 14px; border: 1px dashed var(--border-strong);
  border-radius: 9px; background: transparent; color: var(--text-secondary); font-size: 12.5px; font-weight: 500; cursor: pointer;
}
[data-module="fixture-list"] .fl-asm-add:hover { border-color: var(--accent-line); color: var(--accent); background: var(--accent-soft); }

/* reference */
[data-module="fixture-list"] .fl-asm-ref-body { padding: 14px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 10px; }
[data-module="fixture-list"] .fl-asm-refcard { border: 1px solid var(--border); border-radius: 9px; padding: 11px 13px; background: var(--panel); }
[data-module="fixture-list"] .fl-asm-refcard.missing { border-color: color-mix(in srgb, var(--error) 30%, var(--border)); }
[data-module="fixture-list"] .fl-asm-refcard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
[data-module="fixture-list"] .fl-asm-refcard-name { font-size: 12.5px; font-weight: 600; color: var(--text-primary); margin-top: 6px; }

/* shared empty / loading */
[data-module="fixture-list"] .fl-asm-loading,
[data-module="fixture-list"] .fl-asm-empty { display: grid; place-items: center; min-height: 60vh; grid-column: 1 / -1; }
[data-module="fixture-list"] .fl-asm-empty-card { text-align: center; color: var(--text-secondary); max-width: 360px; }
[data-module="fixture-list"] .fl-asm-empty-card h3 { margin: 0 0 6px; color: var(--text-primary); }
[data-module="fixture-list"] .fl-asm-comp-loading,
[data-module="fixture-list"] .fl-asm-comp-empty { font-size: 12.5px; color: var(--text-tertiary); padding: 8px 2px; }

/* add-item role modal (mounts on document.body -> unscoped) */
.strata-overlay .fl-asm-rolemodal { display: flex; flex-direction: column; gap: 8px; }
.strata-overlay .fl-asm-rolemodal-label { font-size: 13px; color: var(--text-secondary); }
.strata-overlay .fl-asm-rolemodal-select {
  height: var(--input-height); padding: 0 10px; background: var(--input-bg); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--button-radius); font-size: 14px; font-family: inherit;
}
@media (max-width: 640px) {
  [data-module="fixture-list"] .fl-asm { grid-template-columns: 1fr; }
  .strata-overlay .fl-asm-rolemodal-select { font-size: 16px; }
}

/* Assembly rail: current catalog selection label (Phase 2 iteration) */
[data-module="fixture-list"] .fl-asm-status { display: inline-flex; align-items: center; gap: 5px; margin-top: 3px; min-width: 0; max-width: 100%; }
[data-module="fixture-list"] .fl-asm-sel {
  font-size: 10.5px; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
[data-module="fixture-list"] .fl-asm-sel.unlinked { color: var(--text-tertiary); font-style: italic; }
[data-module="fixture-list"] .fl-asm-sel.warn { color: var(--warning); }

/* Assembly rail search (Phase 2 iteration) */
[data-module="fixture-list"] .fl-asm-search {
  width: 100%; height: 32px; margin-top: 9px; padding: 0 10px;
  background: var(--input-bg); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 7px; font-size: 12.5px; font-family: inherit;
}
[data-module="fixture-list"] .fl-asm-search::placeholder { color: var(--text-tertiary); }
[data-module="fixture-list"] .fl-asm-search:focus { outline: none; border-color: var(--accent-line); }
@media (max-width: 640px) { [data-module="fixture-list"] .fl-asm-search { font-size: 16px; } }

/* Assembly rail batch-select (Phase 2 iteration) */
[data-module="fixture-list"] .fl-asm-rail-headrow {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
[data-module="fixture-list"] .fl-asm-selectmode {
  font-size: 11.5px; font-weight: 600; color: var(--accent);
  background: transparent; border: 1px solid var(--accent-line); border-radius: 6px;
  padding: 3px 10px; cursor: pointer;
}
[data-module="fixture-list"] .fl-asm-selectmode:hover { background: var(--accent-soft); }
[data-module="fixture-list"] .fl-asm-batchbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 14px; border-bottom: 1px solid var(--border);
  background: var(--accent-soft);
}
[data-module="fixture-list"] .fl-asm-batchcount { font-size: 12px; font-weight: 600; color: var(--text-primary); margin-right: auto; }
[data-module="fixture-list"] .fl-asm-batch-assign[disabled] { opacity: 0.5; cursor: default; }
/* checkbox cell -- hidden until select mode, then a leading column */
[data-module="fixture-list"] .fl-asm-check { display: none; }
[data-module="fixture-list"] .fl-asm-rail-item.selectmode {
  grid-template-columns: 22px 42px minmax(0, 1fr);
}
[data-module="fixture-list"] .fl-asm-rail-item.selectmode .fl-asm-check {
  display: grid; place-items: center; width: 18px; height: 18px;
  border: 1px solid var(--border-strong); border-radius: 5px;
  font-size: 12px; color: var(--accent); font-weight: 700;
}
[data-module="fixture-list"] .fl-asm-rail-item.selectmode.checked .fl-asm-check {
  background: var(--accent-soft); border-color: var(--accent);
}
[data-module="fixture-list"] .fl-asm-rail-item.checked { background: var(--accent-soft); }

/* Assembly component quantity stepper (Phase 2 iteration / Codex PR #4) */
[data-module="fixture-list"] .fl-asm-qty {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--border); border-radius: 6px; background: var(--panel-2);
}
[data-module="fixture-list"] .fl-asm-qty-btn {
  width: 20px; height: 20px; display: grid; place-items: center;
  background: transparent; border: none; color: var(--text-secondary);
  cursor: pointer; font-size: 13px; line-height: 1; border-radius: 5px;
}
[data-module="fixture-list"] .fl-asm-qty-btn:hover:not([disabled]) { background: var(--accent-soft); color: var(--accent); }
[data-module="fixture-list"] .fl-asm-qty-btn[disabled] { opacity: 0.35; cursor: default; }
[data-module="fixture-list"] .fl-asm-qty-val {
  font-size: 10.5px; color: var(--text-secondary); padding: 0 4px;
  min-width: 34px; text-align: center; font-variant-numeric: tabular-nums;
}