/* =============================================================================
   FSC Library - gallery, content workspace, accordion, FAQ editor
   All values reference --cum-* tokens from corporate-user-management.css
   and --jbf-* / --rz-* primitives from site.css.
   ============================================================================= */

/* ── Page chrome - tighter vertical rhythm than generic .jbf-header ───────── */

/* Anchor for the per-tab action toolbars (see .fsc-library-page ...
   .fsc-workspace-toolbar block below). Must be position: relative so the
   absolutely-positioned action buttons resolve their right/top against the
   page shell, not some random stacking-context ancestor higher up. */
.fsc-library-page {
  position: relative;
}

.fsc-library-page .jbf-header.fsc-library-header {
  padding: 12px 24px 10px;
}

.fsc-library-page .jbf-header.fsc-library-header h1 {
  font-size: 20px;
  margin-bottom: 8px;
}

.fsc-library-page .event-admin-tab-toggle {
  padding: 4px;
}

.fsc-library-page .event-admin-tab-btn {
  padding: 8px 14px;
  font-size: 13px;
}

/* Add-Section / Add-FAQ / Upload-Image / Add-Folder outline buttons - match
   CUM plum (not rz violet). One rule for every "header action" button across
   the FSC Library tabs so they're visually identical.
   .fsc-workspace-toolbar is the shared toolbar on every main tab (Content
   workspaces + FAQ editor); .fsc-folders-tab and .fsc-gallery-main-actions
   predate it and are kept because their markup lives in tab-specific
   wrappers - over time everything can migrate to .fsc-workspace-toolbar. */
.fsc-workspace-toolbar .lws-faq-add-btn,
.fsc-folders-tab .lws-faq-add-btn,
.fsc-gallery-main-actions .lws-faq-add-btn {
  border-color: var(--cum-primary, #7d5b81);
  color: var(--cum-primary, #7d5b81);
}

.fsc-workspace-toolbar .lws-faq-add-btn:hover:not(:disabled),
.fsc-folders-tab .lws-faq-add-btn:hover:not(:disabled),
.fsc-gallery-main-actions .lws-faq-add-btn:hover:not(:disabled) {
  background: var(--cum-primary, #7d5b81);
  color: #fff;
}

.fsc-workspace-toolbar .lws-faq-add-btn:disabled,
.fsc-folders-tab .lws-faq-add-btn:disabled,
.fsc-gallery-main-actions .lws-faq-add-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Top-right action bar used by the Content workspaces (Seller Resources /
   Waivers) and the Website FAQs editor. Same visual slot that Folders /
   Gallery put their action button in - flex + space-between keeps the
   button aligned right while leaving room for a future left-side widget
   (e.g. a section filter) without restructuring the markup. */
.fsc-workspace-toolbar {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
}

/* ── Per-tab action button pulled into the tab-strip row ────────────────────
   Each tab (Gallery, Seller Resources, Waivers, Website FAQs, Folders)
   renders its own action toolbar inside its own component so the disabled
   logic stays encapsulated (e.g. Gallery only enables "Upload Image" when
   a folder is selected, Content disables "Add Section" while an edit is
   in flight). This override pulls those per-component toolbars visually
   up into the header's tab row - "tabs on the left, action on the right"
   - without hoisting state into the parent or reintroducing the @ref /
   pending-flag workaround we just removed.

   Anchor is .fsc-library-page (see position: relative declaration above).
   The `top` value aligns the ~30px-tall action button vertically with
   the tab row, computed as:
     header padding-top (12px) + h1 line-box (~24px) + h1 margin-bottom
     (8px) + tab-toggle padding (4px) + tab-btn height (~29px) / 2
     − action-btn height (~30px) / 2 ≈ 48px.
   Everything after top/right neutralises the block-level styling each
   toolbar had when it was a full-width row of its own (width, background,
   border, own padding) so here it renders as a compact, inline button
   cluster floating above the tab strip. */
.fsc-library-page .fsc-workspace-toolbar,
.fsc-library-page .fsc-folders-toolbar,
.fsc-library-page .fsc-gallery-main-actions {
  position: absolute;
  top: 48px;
  right: 24px;
  width: auto;
  padding: 0;
  margin: 0;
  background: transparent;
  border: none;
  z-index: 5;
}

/* xs/sm/md tier (max-width 1023.98px mirrors --bp-lg). The 6 top-tab strip
   wraps to 2-3 rows on phones and tablets; the absolutely-positioned toolbars
   above (anchored at top:48px) collide with the wrapped tab row. Demote them
   to inline flow on mobile so they stack neatly under the tabs.
   Media queries can't deref CSS vars - the literal mirrors --bp-lg. */
@media (max-width: 1023.98px) {
  .fsc-library-page .fsc-workspace-toolbar,
  .fsc-library-page .fsc-folders-toolbar,
  .fsc-library-page .fsc-gallery-main-actions {
    position: static;
    top: auto;
    right: auto;
    margin: 12px 16px 0;
    z-index: auto;
  }

  /* When the gallery main-actions sit inside the gallery main header, drop
     the inline margin (the header already pads). */
  .fsc-library-page .fsc-gallery-main-header .fsc-gallery-main-actions {
    margin: 0;
  }
}

/* ── Shared inline Save / Cancel buttons ─────────────────────────────────────
   Replaces RadzenButton text-only save/cancel pairs everywhere across the
   FSC Library + Folders so spacing, height, padding and icon sizing are
   identical (rule #11 in generic-component-reuse.mdc). */
.fsc-inline-save-btn,
.fsc-inline-cancel-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-family: var(--cum-font, var(--font-overpass, sans-serif));
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.fsc-inline-save-btn {
  background: var(--cum-primary, #7d5b81);
  color: #fff;
  border-color: var(--cum-primary, #7d5b81);
}

/* Inverted hover: white background + primary text/border. The prior
   darker-purple hover (#6a4d6e) was retired app-wide - see the matching
   rule in event-landing.css. */
.fsc-inline-save-btn:hover:not(:disabled) {
  background: #ffffff;
  color: var(--cum-primary, #7d5b81);
  border-color: var(--cum-primary, #7d5b81);
}

.fsc-inline-save-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(125, 91, 129, 0.25);
}

.fsc-inline-cancel-btn {
  background: #fff;
  color: var(--cum-foreground, #021922);
  border-color: var(--cum-border, #e6e8e9);
}

.fsc-inline-cancel-btn:hover:not(:disabled) {
  background: var(--cum-secondary, #f6f5f8);
  border-color: #c4ced3;
  color: var(--cum-foreground, #021922);
}

.fsc-inline-cancel-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(125, 91, 129, 0.18);
}

.fsc-inline-save-btn:disabled,
.fsc-inline-cancel-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.fsc-inline-save-btn svg,
.fsc-inline-cancel-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  display: block;
}

/* Tight cluster of inline buttons (e.g. Save + Cancel in an action zone). */
.fsc-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Invisible focus target - scroll parent shows bottom after "Add" actions */
.fsc-scroll-anchor {
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  outline: none;
}

/* ── Page body (area below the tab strip) ────────────────────────────────── */

.fsc-library-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ── Gallery tab shell (sidebar + main, reuses ecm-split/ecm-nav) ─────────── */

.fsc-gallery-tab {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fsc-gallery-layout {
  border-top: none; /* ecm-split adds border-top; suppress here since tabs already separate */
}

/* Folder sidebar overrides on top of ecm-nav */
.fsc-gallery-nav {
  padding: 0;
}

.fsc-gallery-folders-header {
  display: flex;
  align-items: center;
  padding: 10px 16px 8px;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
}

.fsc-gallery-folders-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-gallery-folder-list {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.fsc-gallery-folder-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--cum-foreground, #021922);
  border-left: 3px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}

.fsc-gallery-folder-item:hover {
  background: rgba(125, 91, 129, 0.08);
}

.fsc-gallery-folder-item.active {
  background: var(--rz-primary-lighter, #f2ebf3);
  border-left-color: var(--jbf-plum, #7d5b81);
  color: var(--cum-primary, #7d5b81);
  font-weight: 600;
}

.fsc-gallery-folder-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Small "Location" pill rendered next to a folder name in the picker
   when the folder belongs to the current location's library (vs FSC).
   Helps the franchisee distinguish corporate-shared folders from their
   own without having to switch tabs. Same visual language as the
   "Location" badge used elsewhere in the FSC Library admin. */
.fsc-gallery-folder-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 8px;
  background: rgba(125, 91, 129, 0.12);
  color: var(--cum-primary, #7d5b81);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.fsc-gallery-folder-item.active .fsc-gallery-folder-pill {
  background: rgba(125, 91, 129, 0.22);
}

.fsc-gallery-folder-count {
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--cum-border, #e6e8e9);
  color: var(--cum-muted-foreground, #808c91);
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fsc-gallery-folder-item.active .fsc-gallery-folder-count {
  background: var(--cum-primary-soft, rgba(125,91,129,0.14));
  color: var(--cum-primary, #7d5b81);
}

/* ── Gallery main pane ──────────────────────────────────────────────────────── */

.fsc-gallery-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fsc-gallery-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-card, #ffffff);
  flex-shrink: 0;
}

.fsc-gallery-folder-heading {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  font-family: var(--cum-font, var(--font-overpass, sans-serif));
}

.fsc-gallery-main-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Scrollable area - wraps upload panel + image grid together so both scroll */
.fsc-gallery-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Title prompt (shown before uploading, asking for the image title) */
.fsc-gallery-title-prompt {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--rz-primary-lighter, #f2ebf3);
  border: 1px solid var(--rz-primary-light, #cdb4d3);
  border-radius: var(--cum-radius, 8px);
}

.fsc-gallery-title-prompt-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 440px;
}

.fsc-gallery-title-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
}

.fsc-gallery-title-label small {
  font-weight: 400;
  color: var(--cum-muted-foreground, #808c91);
  margin-left: 4px;
}

.required-star {
  color: var(--jbf-red, #d80f3d);
}

.fsc-gallery-title-actions {
  display: flex;
  gap: 8px;
}

/* Empty state */
.fsc-gallery-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--cum-muted-foreground, #808c91);
  font-size: 14px;
}

/* ── Image grid ───────────────────────────────────────────────────────────── */

.fsc-gallery-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

.fsc-gallery-grid-item {
  min-width: 0;
}

.fsc-gallery-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: var(--cum-radius, 8px);
  background: var(--cum-card, #ffffff);
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.fsc-gallery-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--rz-primary-light, #cdb4d3);
}

.fsc-gallery-card-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--cum-secondary, #f6f5f8);
  overflow: hidden;
}

/* ── Delete in progress - card dims, loader overlays the image ──────── */
.fsc-gallery-card--deleting {
  pointer-events: none;
  opacity: .85;
}

.fsc-gallery-card-deleting-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(2px);
  z-index: 3;
}

.fsc-gallery-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s;
}

.fsc-gallery-card:hover .fsc-gallery-card-img {
  transform: scale(1.03);
}

.fsc-gallery-card-img-placeholder {
  width: 100%;
  height: 100%;
  background: var(--cum-secondary, #f6f5f8);
}

.fsc-gallery-card-body {
  padding: 8px 10px 4px;
  flex: 1;
}

.fsc-gallery-card-title {
  margin: 0 0 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fsc-gallery-card-meta {
  margin: 0;
  font-size: 11px;
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-gallery-card-actions {
  display: flex;
  justify-content: flex-end;
  padding: 4px 8px 8px;
}

/* Copy-to-local (Locations Library FSC view) - FAB appears on card hover */
.fsc-gallery-card--copyable .fsc-gallery-card-copy-fab {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--cum-primary, #7d5b81);
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}

.fsc-gallery-card--copyable:hover .fsc-gallery-card-copy-fab {
  opacity: 1;
  pointer-events: auto;
}

.fsc-gallery-card--copyable .fsc-gallery-card-copy-fab:hover {
  border-color: var(--cum-primary, #7d5b81);
  background: #fff;
}

.fsc-gallery-card--copyable .fsc-gallery-card-copy-fab:focus-visible {
  opacity: 1;
  pointer-events: auto;
  outline: 2px solid var(--cum-primary, #7d5b81);
  outline-offset: 2px;
}

.fsc-gallery-row-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 6px;
  background: transparent;
  color: var(--cum-primary, #7d5b81);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.fsc-gallery-row-copy-btn:hover {
  border-color: var(--cum-primary, #7d5b81);
  background: var(--cum-primary-soft, rgba(125, 91, 129, 0.1));
}

.fsc-gallery-local-empty {
  margin: 24px;
  max-width: 520px;
}

.fsc-folder-fsc-only {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--cum-foreground, #021922);
  cursor: pointer;
}

.fsc-folder-fsc-only small {
  display: block;
  font-weight: 400;
  color: var(--cum-muted-foreground, #808c91);
  margin-top: 2px;
}

.fsc-copy-to-local-hint {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-copy-to-local-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fsc-copy-to-local-item {
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 8px;
  background: var(--cum-card, #fff);
  font-size: 14px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}

.fsc-copy-to-local-item:hover {
  border-color: var(--cum-primary, #7d5b81);
  background: var(--cum-secondary, #f6f5f8);
}

.fsc-copy-to-local-empty-text {
  margin: 0;
  font-size: 14px;
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-gallery-card-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 6px;
  background: transparent;
  color: var(--cum-muted-foreground, #808c91);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.fsc-gallery-card-delete-btn:hover {
  border-color: #fca5a5;
  color: #dc2626;
  background: #fef2f2;
}

/* Gallery upload now happens through the unified ImagePickerDialog popup,
   so the inline .fsc-gallery-upload-panel/.fsc-gallery-upload-iuwc styles
   were removed. See FscLibraryGalleryTab.OpenUploadDialogAsync. */

/* ── Gallery picker modal ─────────────────────────────────────────────────── */

/* Folder rail must stay pinned while the image grid scrolls.
   The JbfDialogShell body normally owns the scroll (max-height: 70vh,
   overflow-y: auto in image-picker.css). When the picker is the body
   content we suppress that outer scroll and let each pane manage its own,
   so the user can browse a long folder list and a long image grid
   independently without the sidebar drifting off-screen. */
.rz-dialog-content:has(.jbf-dialog-shell-body > .fsc-gallery-picker),
.rz-dialog-content:has(.jbf-dialog-shell-body > .jbf-library-insert) {
  min-height: 0;
}

.jbf-dialog-shell-body:has(> .fsc-gallery-picker),
.jbf-dialog-shell-body:has(> .jbf-library-insert) {
  /* Reserve a tall, predictable viewport for the picker so the panes have
     a definite height to scroll inside. min-height keeps short folders
     from collapsing the dialog. */
  height: 70vh;
  max-height: 70vh;
  min-height: 420px;
  overflow: hidden;
  padding: 0;
}

.fsc-gallery-picker {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  font-family: var(--cum-font, var(--font-overpass, sans-serif));
}

.fsc-gallery-picker-layout {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.fsc-gallery-picker-folders {
  flex: 0 0 200px;
  width: 200px;
  border-right: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-secondary, #f6f5f8);
  padding: 8px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.fsc-gallery-picker-images {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
}

.fsc-gallery-picker-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.fsc-gallery-picker-item {
  position: relative;
  border: 2px solid var(--cum-border, #e6e8e9);
  border-radius: var(--cum-radius, 8px);
  background: var(--cum-card, #ffffff);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.fsc-gallery-picker-item:hover {
  border-color: var(--rz-primary-light, #cdb4d3);
}

.fsc-gallery-picker-item.selected {
  border-color: var(--jbf-plum, #7d5b81);
  box-shadow: 0 0 0 2px rgba(125, 91, 129, 0.2);
}

.fsc-gallery-picker-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.fsc-gallery-picker-img-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--cum-secondary, #f6f5f8);
}

.fsc-gallery-picker-label {
  margin: 0;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--cum-foreground, #021922);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fsc-gallery-picker-check {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--jbf-plum, #7d5b81);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fsc-gallery-picker-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-card, #ffffff);
  flex-shrink: 0;
}

/* ── Content workspace (Seller Resources / Waivers) ─────────────────────────
   The workspace mirrors event-management's EventLocationContentWorkspace
   (left sidebar with drag-reorder + "+ Add Section", main pane with content
   blocks + Content/Image/Video add row) and reuses the structural ecm-*
   classes from event-location-content.css verbatim. The .fsc-ecm-root
   scope below adds polish-only overrides (no layout changes) so the
   event-management page is untouched.

   History note: the previous fsc-content-workspace / fsc-content-section /
   fsc-content-block / fsc-content-chevron rules and the fsc-content-block-add-form
   inline-form chrome were removed when the workspace was rebuilt to match
   event-management. Search history for those names if you need their styling.
   .fsc-dialog-body / .fsc-dialog-actions also went away with FscContentBlockDialog
   and FscSectionTitleDialog, both replaced by the inline ecm-panel editor. */

/* "optional" hint text next to field labels - kept because other FSC forms
   (block image upload helper, etc.) still reference it. */
.cum-field-optional {
  font-weight: 400;
  color: var(--cum-muted-foreground, #808c91);
  margin-left: 4px;
  font-size: 11px;
}

/* ── .fsc-ecm-root - polish overrides for the FSC content workspace ────────
   Scope is .fsc-ecm-root .ecm-* so the event-management surface inherits
   nothing from this block. Spacing, drag-handle, pill, and empty-state
   tweaks only - never structure. */

/* Busy overlay - delete / save / reorder until server + reload complete */
.fsc-ecm-root .fsc-ecm-workspace-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.fsc-ecm-root .fsc-ecm-busy-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  pointer-events: all;
}

.fsc-ecm-root .fsc-ecm-split--dimmed {
  opacity: 0.92;
  pointer-events: none;
  user-select: none;
}

/* Inline editors (same structure as event-management): softer card treatment in FSC tab. */
.fsc-ecm-root .ecm-main > .ecm-content-editor {
  margin: 10px 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid var(--cum-border, #e6e8e9);
  box-shadow: 0 4px 20px rgba(2, 25, 34, 0.06);
  background: var(--cum-card, #fff);
  overflow: hidden;
}

.fsc-ecm-root .ecm-main > .ecm-main-inner + .ecm-panel {
  margin: 10px 14px 14px 0;
  border-radius: 12px;
  border: 1px solid var(--cum-border, #e6e8e9);
  box-shadow: 0 4px 20px rgba(2, 25, 34, 0.06);
  background: var(--cum-secondary, #fafafa);
  overflow: hidden;
}

/* Icon buttons: centre PencilIcon / TrashIcon inside .ecm-icon-btn hit area. */
.fsc-ecm-root .fsc-ecm-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Sidebar - tighter padding so it reads as a compact menu inside the
   smaller FSC tab body, and the active row picks up the cum-primary tint
   used everywhere else in the FSC Library. */
.fsc-ecm-root .ecm-nav {
  flex: 0 0 220px;
  width: 220px;
  background: var(--cum-secondary, #f6f5f8);
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fsc-ecm-root .ecm-nav-scroll {
  padding: 14px 0 8px;
}

.fsc-ecm-root .ecm-nav-footer {
  padding: 8px 0 14px;
  border-top: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-secondary, #f6f5f8);
}

.fsc-ecm-root .ecm-nav-footer-link {
  margin: 0 10px;
  width: calc(100% - 20px);
  padding: 8px 10px;
  font-size: 12.5px;
  border: 1px dashed var(--cum-border, #e6e8e9);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.fsc-ecm-root .ecm-nav-footer-link:hover:not(:disabled) {
  border-color: var(--cum-primary, #7d5b81);
}

.fsc-ecm-root .lws-nav-label {
  padding: 0 18px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-ecm-root .ecm-nav-item-wrap {
  margin: 2px 10px;
}

.fsc-ecm-root .ecm-nav-item {
  border-radius: 8px;
  padding: 4px 4px 4px 2px;
}

.fsc-ecm-root .ecm-nav-item:hover {
  background: var(--cum-primary-soft, rgba(125, 91, 129, 0.10));
}

.fsc-ecm-root .ecm-nav-item--active,
.fsc-ecm-root .ecm-nav-item--active:hover {
  background: var(--cum-primary-soft, rgba(125, 91, 129, 0.16));
  border-color: rgba(125, 91, 129, 0.20);
}

.fsc-ecm-root .ecm-nav-item--active .ecm-nav-item-main {
  color: var(--cum-primary, #7d5b81);
}

.fsc-ecm-root .ecm-nav-item-main {
  font-size: 13.5px;
  font-weight: 600;
  padding: 6px 6px;
}

/* Drag-handle: swap the literal ⋮⋮ glyph for a centred 6-dot grid that
   matches the .fsc-folder-drag-handle pattern used on the Folders tab. */
.fsc-ecm-root .ecm-drag-handle {
  position: relative;
  width: 14px;
  height: 18px;
  color: transparent;       /* hide the ⋮⋮ characters */
  font-size: 0;
  line-height: 0;
}

.fsc-ecm-root .ecm-drag-handle::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 12px;
  background-image:
    radial-gradient(circle, var(--cum-muted-foreground, #808c91) 1px, transparent 1.4px);
  background-size: 4px 4px;
  background-position: 0 0;
  opacity: 0.7;
}

.fsc-ecm-root .ecm-nav-item:hover .ecm-drag-handle::before,
.fsc-ecm-root .ecm-block:hover    .ecm-drag-handle::before {
  opacity: 1;
}

/* Main pane - rebalance heading + Add row with the rest of FSC Library. */
.fsc-ecm-root .ecm-main-inner {
  padding: 18px 20px 20px;
}

.fsc-ecm-root .ecm-blocks-toolbar {
  margin-bottom: 10px;
}

.fsc-ecm-root .ecm-blocks-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
}

.fsc-ecm-root .ecm-empty-blocks {
  margin: 24px 0 28px;
  padding: 36px 16px;
  text-align: center;
  font-size: 13.5px;
  color: var(--cum-muted-foreground, #808c91);
  background: var(--cum-secondary, #f6f5f8);
  border: 1px dashed var(--cum-border, #e6e8e9);
  border-radius: 10px;
}

/* Empty-state for the sidebar (no sections at all). */
.fsc-ecm-root .fsc-ecm-empty-sections {
  margin: 4px 18px 0;
  font-size: 12.5px;
  color: var(--cum-muted-foreground, #808c91);
  line-height: 1.45;
}

/* Block-type pill - neutralise EM's purple and adopt the FSC plum tone. */
.fsc-ecm-root .ecm-block-type-pill {
  background: var(--cum-primary-soft, rgba(125, 91, 129, 0.14));
  color: var(--cum-primary, #7d5b81);
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Waivers tab - expanded text block: acknowledgement preview (not full-width gray slab). */
.fsc-ecm-root .fsc-waiver-ack-preview {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  max-width: 100%;
}

.fsc-ecm-root .fsc-waiver-ack-preview-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-ecm-root .fsc-waiver-ack-preview-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 6px 14px 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(125, 91, 129, 0.28);
  background: rgba(125, 91, 129, 0.07);
  box-sizing: border-box;
}

.fsc-ecm-root .fsc-waiver-ack-preview-chip .rz-chkbox {
  flex-shrink: 0;
}

.fsc-ecm-root .fsc-waiver-ack-preview-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  line-height: 1.3;
}

/* When acknowledgement is off - softer chip so checked state reads clearly when on */
.fsc-ecm-root .fsc-waiver-ack-preview--off .fsc-waiver-ack-preview-chip {
  border-color: var(--cum-border, #e6e8e9);
  background: var(--cum-secondary, #f6f5f8);
  opacity: 0.92;
}

/* Add-block row - turn the Radzen Light buttons into chip-style pills that
   match the FSC Library's existing .lws-faq-add-btn aesthetic. */
.fsc-ecm-root .ecm-add-block-row {
  margin-top: 8px;
  padding-top: 14px;
}

.fsc-ecm-root .ecm-add-block-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cum-muted-foreground, #808c91);
  margin-right: 4px;
}

.fsc-ecm-root .ecm-add-type-btns .rz-button.rz-button-sm {
  border: 1px solid var(--cum-primary, #7d5b81);
  background: transparent;
  color: var(--cum-primary, #7d5b81);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 4px 14px;
}

.fsc-ecm-root .ecm-add-type-btns .rz-button.rz-button-sm:hover {
  background: var(--cum-primary, #7d5b81);
  color: #fff;
}

/* ── FSC FAQ editor (admin-side, distinct from lws-faq-* on LocalWebsite) ─── */

.fsc-faq-editor {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Body sits beneath the editor's .fsc-workspace-toolbar (which hosts the
   "Add FAQ" button) and owns the scroll so long FAQ lists don't push the
   toolbar off-screen. */
.fsc-faq-editor-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.fsc-faq-editor-body .lws-faq-list {
  gap: 14px;
}

.fsc-faq-empty {
  padding: 32px;
  text-align: center;
  color: var(--cum-muted-foreground, #808c91);
  font-size: 14px;
}

/* FSC admin FAQ editor uses lws-faq-* for the item cards (same visual style),
   plus these editor-specific overrides */
.fsc-faq-num {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cum-muted-foreground, #808c91);
  flex-shrink: 0;
}

.fsc-faq-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--cum-foreground, #021922);
  cursor: pointer;
}

.fsc-faq-title:hover {
  color: var(--cum-primary, #7d5b81);
  text-decoration: underline;
}

.fsc-faq-title-input {
  flex: 1;
  min-width: 0;
}

.fsc-faq-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.fsc-faq-edit-btn,
.fsc-faq-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.fsc-faq-edit-btn {
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-faq-edit-btn:hover {
  background: var(--rz-primary-lighter, #f2ebf3);
  border-color: var(--rz-primary-light, #cdb4d3);
  color: var(--cum-primary, #7d5b81);
}

.fsc-faq-delete-btn {
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-faq-delete-btn:hover {
  background: #fef2f2;
  border-color: #fca5a5;
  color: #dc2626;
}

.fsc-faq-body-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* New-FAQ inline form card - matches .fsc-content-section--new highlight */
.lws-faq-item--new {
  border-color: var(--rz-primary, #7d5b81) !important;
  box-shadow: 0 0 0 3px rgba(125, 91, 129, 0.08);
}

.fsc-faq-body-preview {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-faq-body-preview p { margin: 0 0 6px; }

/* ── Local Website: Use Default / Customize FAQ mode toggle ──────────────── */
/* Piggy-backed here since it only appears when fsc-library feature is active */

.lws-faq-mode-toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: stretch;
  gap: 4px;
  padding: var(--jbf-segment-padding, 5px);
  border-radius: var(--jbf-segment-radius-outer, 12px);
  border: 1px solid var(--jbf-segment-border, var(--cum-border));
  background: var(--jbf-segment-bg, var(--cum-card));
  box-shadow: var(--jbf-segment-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
  margin-bottom: 20px;
}

.lws-faq-mode-btn {
  flex: 0 0 auto;
  padding: 8px 18px;
  border: none;
  border-radius: var(--jbf-segment-radius-inner, 8px);
  background: transparent;
  font-family: var(--cum-font, var(--font-overpass, sans-serif));
  font-size: var(--jbf-segment-font-size, 13px);
  font-weight: 600;
  color: var(--jbf-segment-inactive-fg, #5b84a2);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}

.lws-faq-mode-btn:hover:not(.active) {
  color: var(--jbf-segment-inactive-hover-fg, #4a6d88);
}

.lws-faq-mode-btn.active {
  background: var(--jbf-segment-active-bg, var(--jbf-plum, #7d5b81));
  color: var(--jbf-segment-active-fg, #ffffff);
}

/* Corporate default FAQ read-only view */
.lws-faq-list--readonly .lws-faq-item {
  border-color: var(--cum-border, #e6e8e9);
  background: var(--cum-secondary, #f6f5f8);
}

.lws-faq-item--readonly .lws-faq-item-header {
  justify-content: flex-start;
  gap: 12px;
}

.lws-faq-readonly-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--jbf-status-info-bg, rgba(0,168,186,0.12));
  color: var(--jbf-status-info-fg, #008696);
}

.lws-faq-readonly-text {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--cum-foreground, #021922);
}

.lws-faq-readonly-html {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cum-foreground, #021922);
}

.lws-faq-readonly-html p { margin: 0 0 8px; }

.lws-faq-customize-hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--cum-muted-foreground, #808c91);
}

.lws-faq-customize-hint p { margin: 0; }

/* ── Inline error banner ─────────────────────────────────────────────────── */

.lws-inline-error {
  margin: 0 20px 12px;
  padding: 10px 14px;
  background: var(--jbf-status-danger-bg, rgba(216,15,61,0.08));
  color: var(--jbf-status-danger-fg, #d80f3d);
  border: 1px solid rgba(216, 15, 61, 0.2);
  border-radius: var(--cum-radius, 8px);
  font-size: 13px;
  font-weight: 500;
}

/* ─────────────────────────────────────────────────────────────────────────────
   FSC Library - Multi-image upload dialog
   Used by: FscGalleryMultiUploadDialog
   Layout: drop zone on top, then a 2-column responsive grid of item cards.
   Tokens: re-uses --cum-* / --jbf-* CSS variables from corporate-user-management
   so the dialog matches the rest of the FSC Library UI.
   ───────────────────────────────────────────────────────────────────────────── */

.fsc-multi-upload {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--cum-font, var(--font-overpass, sans-serif));
}

.fsc-multi-upload-input {
  display: none;
}

.fsc-multi-upload-dropzone {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 1.5px dashed var(--cum-border, #d0dadf);
  border-radius: var(--cum-radius, 10px);
  background: var(--cum-surface-muted, #f5f8fa);
  color: var(--cum-foreground, #021922);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.fsc-multi-upload-dropzone:hover {
  border-color: var(--jbf-primary, #00a8ba);
  background: rgba(0, 168, 186, 0.04);
}

.fsc-multi-upload-dropzone-icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 8px;
  color: var(--jbf-primary, #00a8ba);
  border: 1px solid var(--cum-border, #d0dadf);
}

.fsc-multi-upload-dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fsc-multi-upload-dropzone-text strong {
  font-size: 14px;
  font-weight: 600;
}

.fsc-multi-upload-dropzone-text span {
  font-size: 12px;
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-multi-upload-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  color: var(--cum-foreground, #021922);
}

.fsc-multi-upload-summary-hint {
  color: var(--cum-muted-foreground, #808c91);
  font-size: 12px;
}

/* Item grid - 2 cols on wider dialogs, 1 col on narrow. */
.fsc-multi-upload-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
}

.fsc-multi-upload-item {
  display: flex;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--cum-border, #d0dadf);
  border-radius: var(--cum-radius, 10px);
  background: white;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.fsc-multi-upload-item.is-uploading {
  border-color: var(--jbf-primary, #00a8ba);
  box-shadow: 0 0 0 2px rgba(0, 168, 186, 0.12);
}

.fsc-multi-upload-item.is-done {
  border-color: var(--jbf-status-success-fg, #2f9e44);
  background: rgba(47, 158, 68, 0.04);
}

.fsc-multi-upload-item.is-failed {
  border-color: var(--jbf-status-danger-fg, #d80f3d);
  background: rgba(216, 15, 61, 0.04);
}

.fsc-multi-upload-item-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--cum-surface-muted, #f5f8fa);
  border: 1px solid var(--cum-border, #d0dadf);
}

.fsc-multi-upload-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fsc-multi-upload-item-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-multi-upload-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: 0.02em;
}

.fsc-multi-upload-badge-cropped {
  background: var(--jbf-primary, #00a8ba);
  color: white;
}

.fsc-multi-upload-item-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.fsc-multi-upload-item-row {
  display: flex;
}

.fsc-multi-upload-title {
  width: 100%;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--cum-border, #d0dadf);
  border-radius: 6px;
  background: white;
  color: var(--cum-foreground, #021922);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fsc-multi-upload-title:focus {
  border-color: var(--jbf-primary, #00a8ba);
  box-shadow: 0 0 0 3px rgba(0, 168, 186, 0.15);
}

.fsc-multi-upload-title.has-error {
  border-color: var(--jbf-status-danger-fg, #d80f3d);
  box-shadow: 0 0 0 3px rgba(216, 15, 61, 0.12);
}

.fsc-multi-upload-title:disabled {
  background: var(--cum-surface-muted, #f5f8fa);
  color: var(--cum-muted-foreground, #808c91);
  cursor: not-allowed;
}

.fsc-multi-upload-item-error {
  font-size: 12px;
  color: var(--jbf-status-danger-fg, #d80f3d);
  word-break: break-word;
}

.fsc-multi-upload-item-meta {
  font-size: 11px;
  color: var(--cum-muted-foreground, #808c91);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fsc-multi-upload-item-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.fsc-multi-upload-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  background: white;
  color: var(--cum-foreground, #021922);
  border: 1px solid var(--cum-border, #d0dadf);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.fsc-multi-upload-action:hover:not(:disabled) {
  background: var(--cum-surface-muted, #f5f8fa);
  border-color: var(--jbf-primary, #00a8ba);
  color: var(--jbf-primary, #00a8ba);
}

.fsc-multi-upload-action:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.fsc-multi-upload-state {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--cum-muted-foreground, #808c91);
  margin-left: auto;
}

.fsc-multi-upload-state .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.fsc-multi-upload-state .dot-pending   { background: #c4ced3; }
.fsc-multi-upload-state .dot-uploading { background: var(--jbf-primary, #00a8ba); animation: fsc-multi-upload-pulse 1.1s ease-in-out infinite; }
.fsc-multi-upload-state .dot-done      { background: var(--jbf-status-success-fg, #2f9e44); }
.fsc-multi-upload-state .dot-failed    { background: var(--jbf-status-danger-fg, #d80f3d); }

@keyframes fsc-multi-upload-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.85); }
}

.fsc-multi-upload-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: transparent;
  color: var(--cum-muted-foreground, #808c91);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fsc-multi-upload-remove:hover:not(:disabled) {
  background: rgba(216, 15, 61, 0.08);
  color: var(--jbf-status-danger-fg, #d80f3d);
  border-color: rgba(216, 15, 61, 0.2);
}

.fsc-multi-upload-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


/* ── Folders tab (admin) ──────────────────────────────────────────────────────
   Reuses .fsc-faq-editor / .fsc-faq-editor-body for page-shell scrolling and
   .lws-faq-list / .lws-faq-item for cards. The action bar (sized to match
   the Content sub-tab strip height) holds the "+ Add Folder" button on the
   right - no redundant "Gallery Folders" heading since the main tab already
   says "Folders". */

.fsc-folders-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-shrink: 0;
  padding: 0.5rem;
  background: var(--cum-card, #ffffff);
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
  box-sizing: border-box;
  width: 100%;
}

.fsc-folders-toolbar .lws-faq-add-btn {
  flex-shrink: 0;
}

.fsc-folders-tab .fsc-faq-editor-body {
  padding: 16px 20px 20px;
}

.fsc-folders-tab .fsc-faq-editor-body .lws-faq-list {
  gap: 10px;
}

.fsc-folders-tab .lws-faq-item {
  padding: 12px 14px;
  gap: 8px;
}

.fsc-folder-item--inactive {
  opacity: 0.65;
  background: var(--rz-base-100, #f7f8f9);
}

.fsc-folder-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

/* Drag-to-reorder - matches the .wdre-drag-handle pattern from
   WebsiteDetailsRepeaterEditor (rule #12 in generic-component-reuse.mdc). */
.fsc-folder-card {
  cursor: default;
  transition: opacity 0.15s, box-shadow 0.15s, transform 0.15s;
}

.fsc-folder-dragging {
  opacity: 0.55;
  background: var(--rz-primary-lighter, #f2ebf3) !important;
  box-shadow: 0 4px 16px rgba(125, 91, 129, 0.18);
}

.fsc-folder-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  flex-shrink: 0;
  padding: 4px 2px;
  color: #a0aec0;
  cursor: grab;
  user-select: none;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s;
}

.fsc-folder-drag-handle:hover {
  color: var(--cum-foreground, #021922);
  background: var(--rz-primary-lighter, #f2ebf3);
}

.fsc-folder-drag-handle:active {
  cursor: grabbing;
}

.fsc-folder-drag-handle--disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.fsc-folder-drag-handle--disabled:hover {
  background: transparent;
  color: #a0aec0;
}

.fsc-folder-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 200px;
}

.fsc-folder-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  cursor: pointer;
  line-height: 1.3;
}

.fsc-folder-name:hover {
  color: var(--cum-primary, #7d5b81);
  text-decoration: underline;
}

.fsc-folder-slug {
  font-size: 12px;
  font-family: var(--jbf-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-folder-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 220px;
}

.fsc-folder-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fsc-folder-field-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--cum-muted-foreground, #808c91);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.fsc-folder-field-label small {
  margin-left: 6px;
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
}

.fsc-folder-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.fsc-folder-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: var(--cum-border, #e6e8e9);
  color: var(--cum-muted-foreground, #808c91);
  font-size: 11px;
  font-weight: 600;
}

.fsc-folder-status {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fsc-folder-status--active {
  background: rgba(34, 139, 34, 0.12);
  color: #1f7a1f;
}

.fsc-folder-status--inactive {
  background: rgba(128, 140, 145, 0.15);
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-folder-active-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  cursor: pointer;
}

.fsc-folder-active-label {
  min-width: 56px;
}

.fsc-folder-error {
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(216, 15, 61, 0.08);
  border: 1px solid rgba(216, 15, 61, 0.25);
  color: var(--jbf-status-danger-fg, #d80f3d);
  font-size: 12px;
}

.fsc-folder-add-form {
  border-color: var(--rz-primary-light, #cdb4d3);
  background: var(--rz-primary-lighter, #f2ebf3);
}

/* =============================================================================
   Gallery sub-tab strip (Images / Links / Documents)
   ============================================================================= */

.fsc-gallery-subtabs {
  display: inline-flex;
  align-items: center;
}

.fsc-gallery-subtabs .event-admin-tab-toggle {
  padding: 3px;
}

.fsc-gallery-subtabs .event-admin-tab-btn {
  padding: 6px 12px;
  font-size: 12.5px;
}

.fsc-gallery-main-header {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.fsc-gallery-main-header .fsc-gallery-folder-heading {
  flex: 0 0 auto;
}

.fsc-gallery-main-header .fsc-gallery-subtabs {
  flex: 1 1 auto;
}

.fsc-gallery-main-header .fsc-gallery-main-actions {
  margin-left: auto;
}

/* =============================================================================
   Generic gallery list row - used for both Links and Documents sub-tabs
   ============================================================================= */

.fsc-gallery-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fsc-gallery-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cum-card, #fff);
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.fsc-gallery-row:hover {
  border-color: var(--cum-primary, #7d5b81);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.fsc-gallery-row--deleting {
  opacity: 0.55;
  pointer-events: none;
}

.fsc-gallery-row-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--rz-primary-lighter, #f2ebf3);
  color: var(--cum-primary, #7d5b81);
  flex-shrink: 0;
}

.fsc-gallery-row-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.fsc-gallery-row-title-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fsc-gallery-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.fsc-gallery-row-chip {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 10px;
  background: var(--cum-border, #e6e8e9);
  color: var(--cum-muted-foreground, #808c91);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.fsc-gallery-row-chip--video {
  background: rgba(125, 91, 129, 0.12);
  color: var(--cum-primary, #7d5b81);
}

.fsc-gallery-row-url {
  font-size: 12px;
  color: var(--cum-primary, #7d5b81);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.fsc-gallery-row-url:hover {
  text-decoration: underline;
}

.fsc-gallery-row-meta {
  margin: 0;
  font-size: 12px;
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-gallery-row-desc {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--cum-muted-foreground, #4a565b);
  line-height: 1.4;
}

.fsc-gallery-row-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Document title rendered as an anchor - keeps the same typography as the
   plain-text title but adopts the link colour and hover underline. */
.fsc-gallery-row-title--link {
  color: var(--cum-primary, #7d5b81);
  text-decoration: none;
  cursor: pointer;
}

.fsc-gallery-row-title--link:hover,
.fsc-gallery-row-title--link:focus-visible {
  text-decoration: underline;
}

/* Generic icon-button used for row-level actions (e.g. Download). Visually
   matches .fsc-gallery-card-delete-btn so the row keeps a consistent
   action-bar feel. */
.fsc-gallery-row-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--cum-muted-foreground, #4a565b);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.fsc-gallery-row-action-btn:hover,
.fsc-gallery-row-action-btn:focus-visible {
  background: var(--cum-muted, #f3f4f6);
  color: var(--cum-primary, #7d5b81);
  border-color: var(--cum-border, #e6e8e9);
  outline: none;
}

/* =============================================================================
   Link / Document dialogs - shared field styling
   ============================================================================= */

.fsc-link-dialog,
.fsc-doc-upload {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fsc-link-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fsc-link-field-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
}

.fsc-link-field-label small {
  font-size: 11px;
  font-weight: 400;
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-link-required {
  color: var(--jbf-status-danger-fg, #d80f3d);
  font-weight: 700;
}

.fsc-link-provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(125, 91, 129, 0.08);
  color: var(--cum-primary, #7d5b81);
  font-size: 12px;
}

.fsc-link-provider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cum-primary, #7d5b81);
}

/* =============================================================================
   Seller Resources - Video URL row with "Choose from Gallery" button
   ============================================================================= */

.fsc-video-url-row {
  display: flex;
  /* center, not stretch - the picker button shouldn't grow to match the
     RadzenTextBox's vertical box; stretching produced a tall button with
     awkwardly wrapped two-line text ("Choose from / Gallery"). */
  align-items: center;
  gap: 8px;
  width: 100%;
}

.fsc-video-url-row .fsc-video-url-input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Picker button: keep label on a single line and never let flex squeeze
   it. Without these, narrow viewports (or any sibling claiming flex) will
   collapse the button into a vertical icon-over-stacked-text mess. */
.fsc-video-url-row > .rz-button {
  flex: 0 0 auto;
  white-space: nowrap;
  height: 38px;
}

/* =============================================================================
   Video picker dialog (FscGalleryVideoPickerDialog)
   ============================================================================= */

.fsc-video-picker {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fsc-video-picker-search {
  display: flex;
}

.fsc-video-picker-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fsc-video-picker-row {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: start;
  gap: 12px;
  padding: 10px 12px;
  background: var(--cum-card, #fff);
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.fsc-video-picker-row:hover {
  border-color: var(--cum-primary, #7d5b81);
}

.fsc-video-picker-row--selected {
  border-color: var(--cum-primary, #7d5b81);
  background: var(--rz-primary-lighter, #f2ebf3);
}

.fsc-video-picker-row-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(125, 91, 129, 0.12);
  color: var(--cum-primary, #7d5b81);
  flex-shrink: 0;
}

.fsc-video-picker-row-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.fsc-video-picker-row-title-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.fsc-video-picker-row-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.fsc-video-picker-row-url {
  font-size: 12px;
  color: var(--cum-muted-foreground, #4a565b);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.fsc-video-picker-row-desc {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--cum-muted-foreground, #4a565b);
  line-height: 1.4;
}

.fsc-video-picker-empty {
  padding: 12px 0;
  margin: 0;
  font-size: 12.5px;
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-video-picker-hint {
  font-size: 12px;
  color: var(--cum-muted-foreground, #808c91);
  margin-top: 6px;
}

/* Locations Library - main heading "- {location}" suffix */
.locations-library-context {
  font-weight: 400;
  color: var(--cum-muted-foreground, #4a565b);
  font-size: 0.85em;
}

body[data-tier="xs"] .locations-library-page--compact .jbf-header.fsc-library-header,
body[data-tier="sm"] .locations-library-page--compact .jbf-header.fsc-library-header,
body[data-tier="md"] .locations-library-page--compact .jbf-header.fsc-library-header {
  padding-left: 16px;
  padding-right: 16px;
}

body[data-tier="xs"] .locations-library-page--compact .event-admin-tab-toggle,
body[data-tier="sm"] .locations-library-page--compact .event-admin-tab-toggle,
body[data-tier="md"] .locations-library-page--compact .event-admin-tab-toggle {
  width: 100%;
  gap: 8px;
  flex-wrap: wrap;
}

body[data-tier="xs"] .locations-library-page--compact .event-admin-tab-btn,
body[data-tier="sm"] .locations-library-page--compact .event-admin-tab-btn,
body[data-tier="md"] .locations-library-page--compact .event-admin-tab-btn {
  flex: 1 1 160px;
  justify-content: center;
}

body[data-tier="xs"] .locations-library-page--compact .fsc-library-body,
body[data-tier="sm"] .locations-library-page--compact .fsc-library-body,
body[data-tier="md"] .locations-library-page--compact .fsc-library-body {
  overflow-y: auto;
}

/* xs/sm/md tier (max-width 1023.98px mirrors --bp-lg). Tab strip wraps so 6 tabs
   don't overflow on phones or tablets. Mirrors --bp-lg; media queries can't deref vars. */
@media (max-width: 1023.98px) {
  .fsc-library-page .event-admin-tab-toggle {
    flex-wrap: wrap;
    gap: 6px;
  }

  .fsc-library-page .event-admin-tab-btn {
    flex: 1 1 auto;
    justify-content: center;
    font-size: 0.85rem;
    padding: 6px 10px;
  }
}

/* xs/sm tier (max-width 767.98px mirrors --bp-md). Header and context text adjustments.
   Mirrors --bp-md; media queries can't deref vars. */
@media (max-width: 767.98px) {
  .fsc-library-page .jbf-header.fsc-library-header h1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .fsc-library-page .jbf-header.fsc-library-header {
    padding: 12px 16px 0;
  }

  .locations-library-context {
    margin-left: 0;
    font-size: 0.95rem;
  }
}

/* xs/sm/md tier (max-width 1023.98px mirrors --bp-lg). Folders + FAQ tabs use
   a card list (no rail) - make the card header wrap, the drag handle touch-
   friendly (≥36px hit target), and the action buttons size up so taps don't
   fat-finger neighbours. The fsc-faq-editor-body padding shrinks so cards get
   the full width on phones. Media queries can't deref CSS vars. */
@media (max-width: 1023.98px) {
  .fsc-library-page .lws-faq-item-header {
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
  }

  .fsc-library-page .fsc-folder-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .fsc-library-page .fsc-folder-info,
  .fsc-library-page .fsc-folder-edit-fields {
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
  }

  .fsc-library-page .fsc-folder-meta {
    flex-wrap: wrap;
    width: 100%;
    margin-left: 0;
  }

  .fsc-library-page .fsc-folder-drag-handle {
    width: 32px;
    height: 32px;
    padding: 8px 6px;
  }

  .fsc-library-page .fsc-folder-drag-handle svg {
    width: 12px;
    height: 18px;
  }

  .fsc-library-page .fsc-faq-actions {
    flex-wrap: wrap;
    gap: 6px;
  }

  .fsc-library-page .fsc-faq-edit-btn,
  .fsc-library-page .fsc-inline-save-btn,
  .fsc-library-page .fsc-inline-cancel-btn {
    min-height: 36px;
  }

  .fsc-library-page .fsc-faq-editor-body,
  .fsc-library-page .fsc-folders-tab .fsc-faq-editor-body {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* =============================================================================
   JbfHtmlEditor - Library toolbar button + JbfLibraryInsertDialog
   ============================================================================= */

.jbf-rte-library-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.jbf-rte-library-btn-label {
  font-size: 11px;
  font-weight: 600;
  color: inherit;
  letter-spacing: 0.02em;
}

.jbf-library-insert {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  /* The dialog shell body sets padding to 0 when it hosts a picker (see the
     :has() override above) so the picker can use the full viewport. Restore
     the comfortable inset here on the picker itself. */
  padding: 12px 16px 0;
  box-sizing: border-box;
}

.jbf-library-insert-source-tabs,
.jbf-library-insert-type-tabs {
  display: inline-flex;
  flex-shrink: 0;
}

.jbf-library-insert-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px;
  flex: 1 1 auto;
  /* min-height:0 is essential - without it, the grid row inherits
     auto-sizing and refuses to shrink, which would make both panes grow
     to fit their content and re-introduce the outer scroll bug. */
  min-height: 0;
  /* Bottom padding lives on the body row instead of the parent so the
     scrollbars sit flush against the dialog edge rather than floating
     inside a gutter. */
  padding-bottom: 12px;
}

/* xs/sm/md tier (max-width 1023.98px mirrors --bp-lg). At ≤1023.98px the
   220px folder rail + main pane no longer fits comfortably inside the dialog
   surface - stack to a single column with a capped folder list height so the
   main picker still gets viewport height. Media queries can't deref vars.
   
   Mobile optimization: reduced folder list to 22vh (from 35vh) to maximize
   image scrolling area; tightened folder item padding to 6px (from 8px) for
   compactness; bottom padding removed from insert body so images extend to
   dialog edge. */
@media (max-width: 1023.98px) {
  .jbf-library-insert-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(100px, 22vh) minmax(0, 1fr);
    padding-bottom: 0;
  }

  .jbf-library-insert-folders {
    max-height: 22vh;
  }

  /* Tighter folder item padding on mobile */
  .jbf-library-insert-folders .fsc-gallery-folder-item {
    padding: 6px 14px;
  }

  /* Give image pane full height */
  .jbf-library-insert-pane {
    padding: 4px 4px 12px 4px;
  }
}

.jbf-library-insert-folders {
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 8px;
  background: var(--cum-card, #fff);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Folder list owns the scroll - keeps the rail's border + radius intact
   while letting a long folder list scroll inside the rail. */
.jbf-library-insert-folders .fsc-gallery-folder-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.jbf-library-insert-main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  min-height: 0;
}

.jbf-library-insert-pane {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px;
  min-height: 0;
}

.jbf-library-insert-pickable {
  cursor: pointer;
  border: 1px solid var(--cum-border, #e6e8e9);
}

.jbf-library-insert-pickable:hover {
  border-color: var(--cum-primary, #7d5b81);
}

.jbf-library-insert-pickable--selected {
  border-color: var(--cum-primary, #7d5b81);
  box-shadow: 0 0 0 2px rgba(125, 91, 129, 0.18);
}

.jbf-library-insert .fsc-gallery-card.jbf-library-insert-pickable {
  /* The card-as-button needs button-reset because RadzenButton style + native
     <button> defaults would otherwise draw a focus ring inside the card. */
  background: var(--cum-card, #fff);
  text-align: left;
  padding: 0;
  font: inherit;
  color: inherit;
  width: 100%;
}

/* ── Gallery toolbar (search / sort / filters / view / count) ───────────────
   Sits between .fsc-gallery-main-header and .fsc-gallery-scroll. Single
   sticky row on desktop; wraps to two rows below 920px. The whole bar
   shares one border-bottom with the header above so the visual grouping
   reads as "header chrome", not "another card". */
.fsc-gallery-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--cum-card, #ffffff);
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
  flex-shrink: 0;
  flex-wrap: wrap;
  font-family: var(--cum-font, var(--font-overpass, sans-serif));
  font-size: 13px;
  color: var(--cum-foreground, #021922);
}

/* Search input - leading icon, optional trailing × button. Uses an inset
   shadow on focus instead of the default OS outline to match Radzen's
   focus treatment elsewhere in the page. */
.fsc-gallery-toolbar-search {
  position: relative;
  /* Tightened so the toolbar fits on one row at typical desktop widths.
     This avoids spending vertical space when a narrower search box would do.
     flex: 0 1 lets it shrink but not grow
     past the cap, which keeps the chip group on the same row. */
  flex: 0 1 240px;
  min-width: 160px;
  max-width: 240px;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 8px;
  height: 36px;
  padding: 0 8px 0 32px;
  transition: border-color 140ms ease-out, box-shadow 140ms ease-out;
}

.fsc-gallery-toolbar-search:focus-within {
  border-color: var(--cum-primary, #7d5b81);
  box-shadow: 0 0 0 3px rgba(125, 91, 129, 0.18);
}

.fsc-gallery-toolbar-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--cum-muted-foreground, #808c91);
  pointer-events: none;
}

.fsc-gallery-toolbar-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
}

.fsc-gallery-toolbar-search-input::placeholder {
  color: var(--cum-muted-foreground, #9aa3a7);
}

.fsc-gallery-toolbar-search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--cum-muted-foreground, #808c91);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.fsc-gallery-toolbar-search-clear:hover {
  background: var(--cum-secondary, #f6f5f8);
  color: var(--cum-foreground, #021922);
}

/* Toggle pill: "All folders" cross-folder mode. */
.fsc-gallery-toolbar-allfolders {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 8px;
  background: #fff;
  color: var(--cum-foreground, #021922);
  font: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms, box-shadow 120ms;
  white-space: nowrap;
}

.fsc-gallery-toolbar-allfolders:hover {
  border-color: var(--cum-primary, #7d5b81);
  color: var(--cum-primary, #7d5b81);
}

.fsc-gallery-toolbar-allfolders.active {
  background: var(--cum-primary, #7d5b81);
  border-color: var(--cum-primary, #7d5b81);
  color: #fff;
  box-shadow: 0 1px 3px rgba(125, 91, 129, 0.35);
}

.fsc-gallery-toolbar-divider {
  width: 1px;
  height: 22px;
  background: var(--cum-border, #e6e8e9);
}

/* Sort dropdown - native <select> for keyboard accessibility, dressed
   to match the rest of the toolbar. */
.fsc-gallery-toolbar-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fsc-gallery-toolbar-label {
  color: var(--cum-muted-foreground, #808c91);
  font-size: 12px;
}

.fsc-gallery-toolbar-select {
  height: 36px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  color: var(--cum-foreground, #021922);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23808c91' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.fsc-gallery-toolbar-select:focus-visible {
  outline: 0;
  border-color: var(--cum-primary, #7d5b81);
  box-shadow: 0 0 0 3px rgba(125, 91, 129, 0.18);
}

/* Filter chips group (per-tab). Pill-style, single-select, brand-mauve
   active state. Mirrors the .event-admin-tab-toggle rhythm so the page
   feels visually unified. */
.fsc-gallery-toolbar-chips {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--cum-secondary, #f6f5f8);
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 999px;
  padding: 3px;
}

.fsc-gallery-toolbar-chip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--cum-muted-foreground, #4a565b);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.fsc-gallery-toolbar-chip:hover {
  background: rgba(125, 91, 129, 0.08);
  color: var(--cum-foreground, #021922);
}

.fsc-gallery-toolbar-chip.active {
  background: var(--cum-primary, #7d5b81);
  color: #fff;
  box-shadow: 0 1px 2px rgba(125, 91, 129, 0.35);
}

.fsc-gallery-toolbar-chip:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(125, 91, 129, 0.25);
}

/* Pushes the view toggle + count chip to the far right when the toolbar
   has room. Below 920px the wrap takes over and the spacer collapses. */
.fsc-gallery-toolbar-spacer {
  flex: 1 1 auto;
  min-width: 0;
}

/* Grid / List view toggle - segmented icon-button group. */
.fsc-gallery-toolbar-view {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 8px;
  overflow: hidden;
}

.fsc-gallery-toolbar-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  background: #fff;
  color: var(--cum-muted-foreground, #4a565b);
  cursor: pointer;
  transition: background 120ms, color 120ms;
}

.fsc-gallery-toolbar-view-btn + .fsc-gallery-toolbar-view-btn {
  border-left: 1px solid var(--cum-border, #e6e8e9);
}

.fsc-gallery-toolbar-view-btn:hover {
  background: var(--cum-secondary, #f6f5f8);
  color: var(--cum-foreground, #021922);
}

.fsc-gallery-toolbar-view-btn.active {
  background: var(--cum-primary, #7d5b81);
  color: #fff;
}

.fsc-gallery-toolbar-view-btn:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 2px rgba(125, 91, 129, 0.55);
}

.fsc-gallery-toolbar-count {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--cum-secondary, #f6f5f8);
  color: var(--cum-muted-foreground, #4a565b);
  font-size: 12px;
  white-space: nowrap;
}

.fsc-gallery-toolbar-count.active {
  background: rgba(125, 91, 129, 0.12);
  color: var(--cum-primary, #7d5b81);
  font-weight: 600;
}

/* "Searching across folders, showing first N - refine your search to narrow
   further." Keeps the truncation honest without alarming the user. */
.fsc-gallery-truncated-hint {
  margin: -4px 0 8px;
  padding: 8px 12px;
  border: 1px solid rgba(125, 91, 129, 0.25);
  background: rgba(125, 91, 129, 0.06);
  color: var(--cum-foreground, #021922);
  border-radius: 8px;
  font-size: 12.5px;
}

/* Empty-state action row - sits below the empty message, holds the
   Clear / Search-all CTAs. */
.fsc-gallery-empty-actions {
  display: inline-flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Ghost variant used for the secondary CTA in the empty state. Reuses
   .lws-faq-add-btn's geometry (padding, height, font) so the two buttons
   line up; only the colour treatment changes. */
.lws-faq-add-btn--ghost {
  background: transparent !important;
  color: var(--cum-primary, #7d5b81) !important;
  border: 1px solid var(--cum-primary, #7d5b81) !important;
}

.lws-faq-add-btn--ghost:hover {
  background: rgba(125, 91, 129, 0.08) !important;
}

/* Folder sidebar muted state - when "All folders" is on, the sidebar is
   not the source of truth so we dim it (still clickable; clicking a
   folder drops back into in-folder mode - see SelectFolderAsync). */
.fsc-gallery-nav--muted {
  opacity: 0.55;
  filter: saturate(0.7);
}

.fsc-gallery-nav--muted:hover {
  opacity: 0.8;
}

/* "From <folder>" pill on cross-folder result rows - small, muted, tucked
   in at the end of the row's title line. */
.fsc-gallery-row-from-pill {
  display: inline-flex;
  align-items: center;
  height: 18px;
  margin-left: 6px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--cum-secondary, #f6f5f8);
  color: var(--cum-muted-foreground, #4a565b);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.fsc-gallery-row-from {
  color: var(--cum-muted-foreground, #4a565b);
}

/* ── Image list-row variant ────────────────────────────────────────────────
   Used when the user toggles the Images tab to "List". Shares the
   .fsc-gallery-row baseline (icon + body + actions) but swaps the icon
   slot for an actual thumbnail. Switching Grid → List is a pure CSS-class
   swap on the wrapper <ul> and its children - _imageUrls is reused, so
   no re-fetch and no thumbnail flicker. */
.fsc-gallery-list--images {
  /* Tighter row spacing than the default link/document list so a folder
     with hundreds of images stays scannable. */
  gap: 6px;
}

.fsc-gallery-row--image {
  align-items: center;
  padding: 6px 10px;
}

.fsc-gallery-row-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 42px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--cum-secondary, #f6f5f8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fsc-gallery-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fsc-gallery-row-thumb-placeholder {
  width: 100%;
  height: 100%;
  background: var(--cum-secondary, #f6f5f8);
}

/* xs/sm/md tiers (<= --bp-lg = 1024). 1023.98 mirrors --bp-lg; @media can't deref vars. */
@media (max-width: 1023.98px) {
  .fsc-gallery-toolbar {
    padding: 10px 12px;
  }

  .fsc-gallery-toolbar-search {
    flex: 1 1 100%;
    max-width: none;
  }

  .fsc-gallery-toolbar-spacer {
    display: none;
  }

  .fsc-gallery-toolbar-divider {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fsc-gallery-toolbar-search,
  .fsc-gallery-toolbar-allfolders,
  .fsc-gallery-toolbar-chip,
  .fsc-gallery-toolbar-view-btn {
    transition: none;
  }
}

/* =============================================================================
   Search input - kill the browser-native clear button. Chrome/Edge layer
   their own × on input[type="search"], which collided with our custom ×.
   We switched the input to type="text" but keep this rule as a belt-and-
   suspenders guard against a future regression.
   ========================================================================== */
.fsc-gallery-toolbar-search-input::-webkit-search-cancel-button,
.fsc-gallery-toolbar-search-input::-webkit-search-decoration,
.fsc-gallery-toolbar-search-input::-ms-clear,
.fsc-gallery-toolbar-search-input::-ms-reveal {
  -webkit-appearance: none;
          appearance: none;
  display: none;
}

/* =============================================================================
   Sort dropdown - wraps a RadzenDropDown so the whole input picks up the
   same chrome (border, focus ring) as every other Radzen dropdown in the
   app. The wrapper just lays out the "Sort" label + control on one line.
   ========================================================================== */
.fsc-gallery-toolbar-sort > .rz-dropdown {
  height: 36px;
  border-radius: 8px;
  border-color: var(--cum-border, #e6e8e9);
  background: #fff;
}

.fsc-gallery-toolbar-sort > .rz-dropdown:hover {
  border-color: var(--cum-primary, #7d5b81);
}

.fsc-gallery-toolbar-sort > .rz-dropdown.rz-state-focused,
.fsc-gallery-toolbar-sort > .rz-dropdown:focus-within {
  border-color: var(--cum-primary, #7d5b81);
  box-shadow: 0 0 0 3px rgba(125, 91, 129, 0.18);
}

/* Vertically centre the chevron + selected text inside the 36px row. */
.fsc-gallery-toolbar-sort > .rz-dropdown .rz-dropdown-trigger,
.fsc-gallery-toolbar-sort > .rz-dropdown .rz-inputtext {
  height: 34px;
  line-height: 34px;
}

/* =============================================================================
   Image list-row layout fix.

   Base .fsc-gallery-row is a 3-column grid: [36px icon | 1fr body | auto
   actions]. The image variant uses a 56px thumbnail instead of an icon,
   which used to overflow the 36px column and visually collided with the
   title text. Override the template + bump the gap so the thumb gets its
   own breathing room, then centre everything on the cross axis.
   ========================================================================== */
.fsc-gallery-row--image {
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 8px 12px;
}

/* Clickable thumb in list view - looks identical to the static thumb but
   gives the user a real button affordance (cursor + focus ring). */
.fsc-gallery-row-thumb--btn {
  border: 0;
  padding: 0;
  cursor: zoom-in;
  position: relative;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.fsc-gallery-row-thumb--btn:hover {
  transform: scale(1.04);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.fsc-gallery-row-thumb--btn:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(125, 91, 129, 0.4);
}

.fsc-gallery-row-thumb--btn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* Title rendered as a button when the row is openable. Strips all button
   chrome and falls back to the same typography as the span variant. */
.fsc-gallery-row-title--btn {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.fsc-gallery-row-title--btn:hover {
  color: var(--cum-primary, #7d5b81);
  text-decoration: underline;
}

.fsc-gallery-row-title--btn:focus-visible {
  outline: 0;
  color: var(--cum-primary, #7d5b81);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

/* =============================================================================
   Grid card - image area is now a button (lightbox trigger). Strip default
   button chrome, keep the existing aspect-ratio + overflow rules from
   .fsc-gallery-card-img-wrap.
   ========================================================================== */
.fsc-gallery-card-img-btn {
  display: block;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  text-align: left;
}

.fsc-gallery-card-img-btn:disabled {
  cursor: default;
}

.fsc-gallery-card-img-btn:focus-visible {
  outline: 0;
  box-shadow: inset 0 0 0 3px rgba(125, 91, 129, 0.6);
}

/* Subtle zoom on the image itself when the card is hovered. Lets the
   user feel the card is interactive without a heavy elevation change. */
.fsc-gallery-card-img-btn .fsc-gallery-card-img {
  transition: transform 220ms ease;
}

.fsc-gallery-card:hover .fsc-gallery-card-img-btn:not(:disabled) .fsc-gallery-card-img {
  transform: scale(1.04);
}

/* "Expand" affordance - fades in on hover/focus in the corner. Same idiom
   as Google Photos / Slack file previews. */
.fsc-gallery-card-expand {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: rgba(2, 25, 34, 0.55);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transition: opacity 140ms ease, transform 140ms ease;
  transform: translateY(-2px);
  backdrop-filter: blur(2px);
}

.fsc-gallery-card:hover .fsc-gallery-card-expand,
.fsc-gallery-card-img-btn:focus-visible .fsc-gallery-card-expand {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fsc-gallery-card-img-btn .fsc-gallery-card-img,
  .fsc-gallery-card-expand,
  .fsc-gallery-row-thumb--btn {
    transition: none;
  }
}

/* =============================================================================
   Image lightbox - full-screen modal preview.

   - Fixed-position overlay above everything (z-index 9999 chosen to sit
     above Radzen dialogs at 1050 and our 404 page artwork at 100).
   - Backdrop click closes (handled in C#); the inner <figure> stops
     propagation so clicks on the image do nothing.
   - Image is sized to fit within the viewport with breathing room - never
     overflows, never zooms past natural size.
   ========================================================================== */
.fsc-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(2, 25, 34, 0.88);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  cursor: zoom-out;
  animation: fsc-lightbox-fade 140ms ease-out;
}

@keyframes fsc-lightbox-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.fsc-image-lightbox:focus {
  outline: none;
}

.fsc-image-lightbox-stage {
  margin: 0;
  max-width: min(1400px, 92vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: default;
}

.fsc-image-lightbox-img {
  max-width: 100%;
  max-height: calc(88vh - 48px);
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  background: #000;
}

.fsc-image-lightbox-caption {
  color: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fsc-image-lightbox-close,
.fsc-image-lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
  backdrop-filter: blur(4px);
}

.fsc-image-lightbox-close {
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
}

.fsc-image-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
}

.fsc-image-lightbox-nav--prev { left: 22px; }
.fsc-image-lightbox-nav--next { right: 22px; }

.fsc-image-lightbox-close:hover,
.fsc-image-lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.22);
}

.fsc-image-lightbox-nav:hover {
  transform: translateY(-50%) scale(1.05);
}

.fsc-image-lightbox-close:focus-visible,
.fsc-image-lightbox-nav:focus-visible {
  outline: 0;
  background: rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

/* xs/sm tier (<= --bp-md = 768). 767.98 mirrors --bp-md; @media can't deref vars. */
@media (max-width: 767.98px) {
  .fsc-image-lightbox {
    padding: 12px;
  }

  .fsc-image-lightbox-stage {
    max-width: 100vw;
    max-height: 92vh;
  }

  .fsc-image-lightbox-nav {
    width: 40px;
    height: 40px;
  }

  .fsc-image-lightbox-nav--prev { left: 8px; }
  .fsc-image-lightbox-nav--next { right: 8px; }
  .fsc-image-lightbox-close     { top: 10px; right: 10px; width: 36px; height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .fsc-image-lightbox { animation: none; }
  .fsc-image-lightbox-close,
  .fsc-image-lightbox-nav { transition: none; }
}

/* ============================================================================
 * FSC Library - Emails tab (transactional email templates)
 * ============================================================================
 * Scoped to .fsc-emails-workspace and the email preview / merge popover so we
 * do not collide with other rich-text editors elsewhere in the app.
 * Mobile responsive via standard tier breakpoints (--bp-md).
 * ============================================================================ */

.fsc-emails-workspace {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* ── Emails tab: primary action sits in shared .fsc-workspace-toolbar slot (FAQ
    pattern - absolutely positioned beside the tab row in .fsc-library-page). ─ */

.fsc-emails-workspace > .fsc-workspace-toolbar {
    gap: 12px;
    align-items: center;
}

.fsc-emails-toolbar-hint {
    color: var(--cum-muted-foreground, #808c91);
    font-size: 13px;
    line-height: 1.4;
    flex: 1 1 auto;
    text-align: right;
    max-width: 42rem;
}

.fsc-email-edit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Empty state (when no templates exist yet) */
.fsc-emails-empty-state {
    padding: 48px 24px;
    text-align: center;
    color: var(--cum-muted-foreground, #808c91);
}

.fsc-emails-empty-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--cum-foreground, #021922);
    margin-bottom: 8px;
}

.fsc-emails-empty-hint {
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* ── Status + trigger badges (used in grid cells, preview panel, dropdowns) ── */

.fsc-email-status-badge,
.fsc-email-trigger-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.fsc-email-status-draft {
    background: #f0f1f3;
    color: #4e5e65;
}

.fsc-email-status-published {
    background: #e6f4ea;
    color: #1e7e34;
}

.fsc-email-trigger-badge {
    background: #f3edf5;
    color: #7d5b81;
}

/* ── Preview panel (read-only side panel content) ──────────────────────────── */

.fsc-email-preview {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fsc-email-preview-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.fsc-email-preview-subject {
    font-size: 15px;
    font-weight: 600;
    color: #35474e;
    padding: 8px 12px;
    background: #fafafa;
    border-radius: 6px;
    border: 1px solid #ececec;
}

.fsc-email-preview-html {
    padding: 16px;
    border: 1px solid #ececec;
    border-radius: 8px;
    background: #ffffff;
    font-size: 14px;
    line-height: 1.6;
    color: #35474e;
    max-height: 400px;
    overflow-y: auto;
}

.fsc-email-preview-html img { max-width: 100%; height: auto; }

.fsc-email-preview-text {
    margin: 0;
    padding: 12px;
    background: #fafafa;
    border-radius: 6px;
    border: 1px solid #ececec;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: #4e5e65;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 300px;
    overflow-y: auto;
}

.fsc-email-preview-audit {
    font-size: 12px;
    color: #808c91;
}

.fsc-email-preview-audit-sep {
    margin: 0 4px;
}

/* ── Edit form (side panel add/edit content) ───────────────────────────────── */

.fsc-email-trigger-locked {
    background: #f7f7f7 !important;
    color: #4e5e65 !important;
    cursor: not-allowed;
}

.fsc-email-status-row {
    border-top: 1px solid #ececec;
    padding-top: 16px;
}

.fsc-email-status-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.fsc-email-status-toggle-label {
    font-size: 13px;
    color: #4e5e65;
    line-height: 1.4;
}

.fsc-email-text-area {
    width: 100% !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

/* ── Merge field autocomplete popover (jbf-rte-merge-autocomplete.js) ──────── */

.jbf-rte-merge-fields-wrap {
    position: relative;
}

.jbf-rte-merge-popover {
    position: fixed; /* Viewport-relative positioning - portaled to body */
    z-index: 9999;
    min-width: 300px;
    max-width: 380px;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    border: 1px solid #d1d5d7;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
    padding: 6px 0;
    display: none;
    visibility: hidden; /* Hidden until JS positions it */
    /* Position (top/left) set dynamically by JS using viewport coordinates */
}

.jbf-rte-merge-popover.is-open {
    display: block;
    animation: popoverSlideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes popoverSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ── Empty states ─────────────────────────────────────────────────────────── */

.jbf-rte-merge-popover-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    text-align: center;
    gap: 8px;
}

.jbf-rte-merge-empty-icon {
    font-size: 36px;
    color: #c4ced3;
    margin-bottom: 4px;
}

.jbf-rte-merge-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: #35474e;
    line-height: 1.3;
}

.jbf-rte-merge-empty-hint {
    font-size: 12.5px;
    color: #808c91;
    line-height: 1.4;
}

/* ── Category groups ─────────────────────────────────────────────────────── */

.jbf-rte-merge-popover-group + .jbf-rte-merge-popover-group {
    border-top: 1px solid #f0f1f3;
    margin-top: 4px;
    padding-top: 4px;
}

.jbf-rte-merge-popover-group-title {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #808c91;
}

.jbf-rte-merge-popover-group-title .rzi {
    font-size: 13px;
    opacity: 0.7;
}

/* ── Merge field items ───────────────────────────────────────────────────── */

.jbf-rte-merge-popover-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 13.5px;
    color: #35474e;
    transition: background-color 120ms ease, transform 80ms ease;
    position: relative;
}

.jbf-rte-merge-popover-item:hover,
.jbf-rte-merge-popover-item:focus {
    background: rgba(125, 91, 129, 0.08);
    transform: translateX(2px);
    outline: none;
}

.jbf-rte-merge-popover-item.is-focused {
    background: rgba(125, 91, 129, 0.18) !important;
    box-shadow: inset 5px 0 0 0 #7d5b81 !important;
    border-left: none;
    transform: translateX(0) !important;
}

.jbf-rte-merge-popover-item-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.jbf-rte-merge-icon {
    font-size: 16px;
    color: #7d5b81;
    flex-shrink: 0;
    opacity: 0.85;
    transition: opacity 80ms ease;
}

.jbf-rte-merge-popover-item:hover .jbf-rte-merge-icon,
.jbf-rte-merge-popover-item.is-focused .jbf-rte-merge-icon {
    opacity: 1;
}

.jbf-rte-merge-popover-item.is-focused .jbf-rte-merge-icon {
    color: #7d5b81;
    opacity: 1;
    transform: scale(1.1);
}

.jbf-rte-merge-popover-item-label {
    font-weight: 500;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jbf-rte-merge-popover-item.is-focused .jbf-rte-merge-popover-item-label {
    font-weight: 600;
    color: #7d5b81;
}

.jbf-rte-merge-popover-item-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: #7d5b81;
    background: #f8f9fa;
    padding: 2px 7px;
    border-radius: 4px;
    border: 1px solid #e8e9ec;
    flex-shrink: 0;
    font-weight: 500;
    transition: background-color 100ms ease, border-color 100ms ease;
}

.jbf-rte-merge-popover-item:hover .jbf-rte-merge-popover-item-code,
.jbf-rte-merge-popover-item.is-focused .jbf-rte-merge-popover-item-code {
    background: #ffffff;
    border-color: #7d5b81;
    color: #7d5b81;
    font-weight: 600;
}

/* ── Hover preview tooltip ───────────────────────────────────────────────── */

.jbf-rte-merge-popover-item[data-sample]:hover::before {
    content: attr(data-sample);
    position: absolute;
    right: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 10px;
    background: rgba(2, 25, 34, 0.92);
    color: white;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    z-index: 10;
    animation: tooltipFadeIn 140ms ease-out;
}

.jbf-rte-merge-popover-item[data-sample]:hover::after {
    content: "";
    position: absolute;
    right: calc(100% + 2px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 6px;
    border-color: transparent transparent transparent rgba(2, 25, 34, 0.92);
    pointer-events: none;
    z-index: 10;
    animation: tooltipFadeIn 140ms ease-out;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ── Footer with keyboard shortcuts ──────────────────────────────────────── */

.jbf-rte-merge-popover-footer {
    border-top: 1px solid #f0f1f3;
    padding: 8px 14px;
    margin-top: 4px;
    background: #fafbfc;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jbf-rte-merge-footer-hint {
    font-size: 11px;
    color: #808c91;
    text-align: center;
    line-height: 1.4;
}

.jbf-rte-merge-footer-hint strong {
    color: #7d5b81;
    font-weight: 600;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}

.jbf-rte-merge-kbd-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 11px;
    color: #808c91;
    flex-wrap: wrap;
}

.jbf-rte-merge-kbd-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    background: #ffffff;
    border: 1px solid #d1d5d7;
    border-radius: 4px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: #4e5e65;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* ── xs/sm tier responsive adjustments ───────────────────────────────────── */
/* xs/sm tier (max-width 767.98px mirrors --bp-md). Media queries cannot deref CSS vars. */
@media (max-width: 767.98px) {
    .jbf-rte-merge-popover {
        min-width: 260px;
        max-width: calc(100vw - 32px);
    }
    
    .jbf-rte-merge-popover-item[data-sample]:hover::before,
    .jbf-rte-merge-popover-item[data-sample]:hover::after {
        display: none;
    }
    
    .jbf-rte-merge-kbd-hint {
        font-size: 10px;
        gap: 8px;
    }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .jbf-rte-merge-popover.is-open {
        animation: none;
    }
    
    .jbf-rte-merge-popover-item {
        transition: none;
    }
    
    .jbf-rte-merge-popover-item[data-sample]:hover::before,
    .jbf-rte-merge-popover-item[data-sample]:hover::after {
        animation: none;
    }
}

/* ── Preview dialog (EmailTemplatePreviewDialog.razor) ─────────────────────── */

.email-preview-dialog {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
}

.email-preview-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #d1d5d7;
}

.email-preview-tab {
    padding: 8px 16px;
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #808c91;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 120ms ease, border-color 120ms ease;
}

.email-preview-tab:hover {
    color: #35474e;
}

.email-preview-tab.is-active {
    color: #7d5b81;
    border-bottom-color: #7d5b81;
}

.email-preview-tab i {
    margin-right: 6px;
}

.email-preview-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    background: #fafafa;
    border-radius: 6px;
    border: 1px solid #ececec;
    font-size: 13px;
    color: #4e5e65;
}

.email-preview-meta-label {
    display: inline-block;
    width: 70px;
    font-weight: 600;
    color: #808c91;
}

.email-preview-body-frame {
    border: 1px solid #d1d5d7;
    border-radius: 8px;
    background: #ffffff;
    overflow: hidden;
    transition: max-width 200ms ease;
    margin: 0 auto;
    width: 100%;
}

.email-preview-body-frame--desktop { max-width: 720px; }
.email-preview-body-frame--mobile  { max-width: 380px; }
.email-preview-body-frame--source  { max-width: 100%; }

.email-preview-body {
    padding: 24px;
    line-height: 1.6;
    color: #35474e;
}

.email-preview-body img { max-width: 100%; height: auto; }

.email-preview-source {
    margin: 0;
    padding: 16px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: #4e5e65;
    white-space: pre-wrap;
    word-break: break-word;
    background: #fafafa;
    max-height: 60vh;
    overflow-y: auto;
}

.email-preview-text-fallback {
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 6px;
    padding: 8px 12px;
}

.email-preview-text-fallback summary {
    cursor: pointer;
    font-size: 13px;
    color: #4e5e65;
    font-weight: 500;
}

.email-preview-text-fallback pre {
    margin: 8px 0 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    white-space: pre-wrap;
}

.email-preview-empty {
    padding: 32px;
    text-align: center;
    color: #808c91;
    font-style: italic;
}

/* xs/sm tier (max-width 767.98px mirrors --bp-md). Media queries cannot deref CSS vars. */
@media (max-width: 767.98px) {
    .fsc-emails-workspace > .fsc-workspace-toolbar {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    .fsc-emails-toolbar-hint {
        flex: 1 1 100%;
        text-align: left;
        max-width: none;
    }
    .fsc-email-status-toggle {
        flex-direction: column;
        align-items: flex-start;
    }
    .email-preview-body-frame--desktop { max-width: 100%; }
    .email-preview-meta-label { width: 60px; }
    .jbf-rte-merge-popover {
        min-width: 220px;
        max-width: calc(100vw - 32px);
    }
}