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

/* Saving... state: button keeps its plum fill but at full opacity so the
   spinner is legible, and the busy cursor signals "wait" without making
   the button look "broken". */
.fsc-inline-save-btn--busy:disabled {
  opacity: 1;
  cursor: progress;
}

.fsc-inline-save-spinner {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  animation: fsc-inline-save-spin 0.7s linear infinite;
  flex-shrink: 0;
  display: inline-block;
}

@keyframes fsc-inline-save-spin {
  to { transform: rotate(360deg); }
}

/* Delete-in-progress: same opacity/cursor convention as the Save spinner so
   the busy treatment is consistent across destructive + constructive actions. */
.fsc-faq-delete-btn--busy:disabled {
  opacity: 1;
  cursor: progress;
}

.fsc-faq-delete-spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(196, 30, 30, 0.25);
  border-top-color: #c41e1e;
  animation: fsc-inline-save-spin 0.7s linear infinite;
  flex-shrink: 0;
  display: inline-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);
}

/* Block-level frame for the uploader badge on grid cards. Visual
   concerns (size, color, separator) live on the shared
   .fsc-uploader-meta below; this just controls the paragraph margin so
   the badge sits flush under the size meta. */
.fsc-gallery-card-uploader {
  margin: 0;
}

/* Lock the meta line to exactly one row on grid cards so the card
   height stays constant regardless of uploader/editor name length. The
   name span absorbs the squeeze and truncates with ellipsis; the full
   name remains in the title tooltip. Scoped to the card variant only -
   list rows and the lightbox caption have plenty of horizontal room
   and keep their wrap behaviour.

   Selector compounds both classes (.fsc-uploader-meta.fsc-gallery-card-uploader)
   to outrank the shared `.fsc-uploader-meta { flex-wrap: wrap; }` rule
   defined later in this file - equal specificity would lose to source
   order otherwise. */
.fsc-uploader-meta.fsc-gallery-card-uploader {
  flex-wrap: nowrap;
  overflow: hidden;
  max-width: 100%;
}

.fsc-uploader-meta.fsc-gallery-card-uploader .fsc-uploader-meta-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fsc-uploader-meta.fsc-gallery-card-uploader .fsc-uploader-meta-time,
.fsc-uploader-meta.fsc-gallery-card-uploader .fsc-uploader-meta-icon {
  flex: 0 0 auto;
}

/* When the meta line is reflecting the most recent EDIT (instead of the
   original upload), the name reads in italic so admins can distinguish
   "uploaded by X" from "edited by Y" at a glance. A small pencil icon
   prefix replaces the "edited by" prefix to keep the line single-row at
   typical card widths; the full "Uploaded by X on ... / Edited by Y on ..."
   audit trail is in the tooltip. */
.fsc-uploader-meta--edited .fsc-uploader-meta-name {
  font-style: italic;
}

.fsc-uploader-meta-icon {
  color: var(--cum-muted-foreground, #8d989f);
  margin-right: 4px;
  align-self: center;
}

/* The shared bullet separator uses an adjacent-sibling selector
   (.fsc-uploader-meta-name + .fsc-uploader-meta-time::before) so it only
   fires when a name precedes the time. In the icon-only edit variant (no
   updater name resolved), the icon sits directly before the time - inject
   a bullet there too so we keep the same "icon * 5 min ago" rhythm. */
.fsc-uploader-meta-icon + .fsc-uploader-meta-time::before {
  content: "·";
  margin: 0 8px;
  color: var(--cum-muted-foreground, #c7cdd0);
  font-weight: 400;
}

.fsc-gallery-card-actions {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  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);
}

/* Drag-over highlight: applied by jbfFileDropZone JS while a file is hovering
   over the zone. Uses transform scale + colored ring so the user gets clear
   "you can drop here" feedback that matches the rest of JBFOne's hover styles. */
.fsc-multi-upload-dropzone.is-drag-over {
  border-color: var(--jbf-primary, #00a8ba);
  background: rgba(0, 168, 186, 0.10);
  box-shadow: 0 0 0 4px rgba(0, 168, 186, 0.18);
  transform: scale(1.01);
}

.fsc-multi-upload-dropzone.is-drag-over .fsc-multi-upload-dropzone-icon {
  background: var(--jbf-primary, #00a8ba);
  color: white;
  border-color: var(--jbf-primary, #00a8ba);
  animation: fsc-dropzone-bounce 0.6s ease-in-out infinite;
}

/* Rejection flash when an unsupported file type is dropped. */
.fsc-multi-upload-dropzone.is-drag-reject {
  border-color: var(--jbf-status-danger-fg, #d80f3d);
  background: rgba(216, 15, 61, 0.08);
  box-shadow: 0 0 0 4px rgba(216, 15, 61, 0.15);
  animation: fsc-dropzone-shake 0.4s ease-in-out;
}

/* "Preparing files…" overlay. Lit by jbfFileDropZone JS the moment the
   browser's input.change fires (i.e. the user clicks Open in the OS
   file picker), and cleared by OnFilesSelected's try/finally once the
   cards are on screen. The overlay bridges the SignalR round-trip
   gap on server deployments where, without it, the dropzone sat
   motionless for up to ~1.5s after picking files - the user's
   "I see a gap before thumbnailing starts" complaint.

   Pointer-events:none on the parent disables the input + label while
   the overlay is up so the user can't kick off a second pick mid-
   processing. position:relative anchors the absolutely-positioned
   overlay child to the dropzone bounds. */
.fsc-multi-upload-dropzone {
  position: relative;
}

.fsc-multi-upload-dropzone-loading {
  display: none;
}

.fsc-multi-upload-dropzone.is-processing {
  pointer-events: none;
}

.fsc-multi-upload-dropzone.is-processing .fsc-multi-upload-dropzone-loading {
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: inherit;
  color: var(--jbf-plum, #7d5b81);
  font-weight: 600;
  font-size: 13px;
  z-index: 4;
}

@keyframes fsc-dropzone-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}

@keyframes fsc-dropzone-shake {
  0%, 100%  { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}

/* Per-card progress bar. Sits below the title row when the card is in the
   uploading state. Colour follows the JBF plum brand so the loader reads
   as part of the product (the legacy cyan we used to ship clashed with
   the rest of the gallery chrome). Smooth indeterminate-friendly
   transition on width changes. */
.fsc-multi-upload-progress {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(125, 91, 129, 0.16);
  overflow: hidden;
  margin-top: 4px;
}

.fsc-multi-upload-progress-bar {
  height: 100%;
  background: var(--jbf-plum, #7d5b81);
  border-radius: 999px;
  transition: width 0.18s ease-out;
}

.fsc-multi-upload-progress-bar.is-indeterminate {
  width: 35% !important;
  animation: fsc-progress-slide 1.4s ease-in-out infinite;
}

/* "Finalising" state: bar is held at 99% while the server uploads to S3
   and writes the row, but we overlay a moving stripe so the user sees the
   upload is still active. The previous "freeze at 99% for 4 seconds" was
   the most-reported UX bug after launch. The diagonal stripe is industry-
   standard for "indeterminate but mostly done" - matches Bootstrap's
   .progress-bar-striped.progress-bar-animated.

   The stripe pattern is the only background-image - the underlying plum
   colour comes from the .fsc-multi-upload-progress-bar base rule's
   background-color (the `background:` shorthand sets background-color
   when given a single colour). Adding background-image here therefore
   overlays stripes on top of the plum fill instead of replacing it. */
.fsc-multi-upload-progress-bar.is-finalising {
  background-image:
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.32) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.32) 50%,
      rgba(255, 255, 255, 0.32) 75%,
      transparent 75%,
      transparent);
  background-size: 1rem 1rem;
  animation: fsc-progress-stripes 0.9s linear infinite;
}

@keyframes fsc-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(285%); }
}

@keyframes fsc-progress-stripes {
  from { background-position: 0 0; }
  to   { background-position: 1rem 0; }
}

.fsc-multi-upload-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--cum-muted-foreground, #808c91);
  margin-top: 2px;
}

/* Second line of progress meta (transfer speed + ETA). Slightly dimmer
   than the primary meta so the eye lands on bytes / percent first. */
.fsc-multi-upload-progress-meta-sub {
  margin-top: 0;
  opacity: 0.85;
  font-size: 10.5px;
}

/* Single-file document upload: rich progress block (file row + bar + ETA). */
.fsc-doc-upload-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 12px;
  padding: 12px;
  border-radius: 8px;
  background: var(--cum-surface-muted, #f5f8fa);
  border: 1px solid var(--cum-border, #d0dadf);
}

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

.fsc-doc-upload-progress-row strong {
  font-size: 13px;
  font-weight: 600;
}

.fsc-doc-upload-progress-row .meta {
  color: var(--cum-muted-foreground, #808c91);
}

.fsc-doc-upload-progress-bar-wrap {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(125, 91, 129, 0.16);
  overflow: hidden;
}

.fsc-doc-upload-progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--jbf-plum, #7d5b81), var(--jbf-mauve, #a282a6));
  border-radius: 999px;
  transition: width 0.18s ease-out;
  box-shadow: 0 0 6px rgba(125, 91, 129, 0.45);
}

/* Indeterminate state used briefly at upload start before the first
   progress callback fires. Mirrors the multi-upload bar's slider so both
   dialogs behave consistently. */
.fsc-doc-upload-progress-bar-fill.is-indeterminate {
  width: 35% !important;
  animation: fsc-progress-slide 1.4s ease-in-out infinite;
}

/* Finalising state: bar holds at 99% while phase 2 (server -> S3 PUT and
   DB row insert) finishes. We layer a moving diagonal stripe over the
   solid fill so the user sees ongoing activity instead of a frozen bar.

   ⚠️  Layer order matters. CSS paints the FIRST listed background-image
   on top - so the stripe pattern must come first, otherwise the opaque
   plum gradient covers it and the bar appears static (which is exactly
   the "doc upload loader is not showing strips" bug we shipped before
   this fix). The plum gradient is the bottom layer that fills the
   uncovered diagonal slots. */
.fsc-doc-upload-progress-bar-fill.is-finalising {
  background-image:
    linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.38) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.38) 50%,
      rgba(255, 255, 255, 0.38) 75%,
      transparent 75%,
      transparent),
    linear-gradient(90deg, var(--jbf-plum, #7d5b81), var(--jbf-mauve, #a282a6));
  background-size: 1rem 1rem, auto;
  animation: fsc-progress-stripes 0.9s linear infinite;
}

.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;
}

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

.fsc-multi-upload-summary-done {
  color: var(--jbf-status-success-fg, #2f9e44);
  font-weight: 500;
}

/* "Loading N previews..." inline spinner shown right next to the
   "selected" count while jbfFileDropZone.capturePreviews is resolving
   blob URLs for freshly-picked files. Sits inline with the count so the
   user sees explicit "still working" feedback at the summary level too,
   not just on the per-card thumbnail skeleton. */
.fsc-multi-upload-summary-loading {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--jbf-plum, #7d5b81);
  font-weight: 500;
  font-size: 12px;
}

.fsc-multi-upload-summary-loading-spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(125, 91, 129, 0.22);
  border-top-color: var(--jbf-plum, #7d5b81);
  animation: fsc-thumb-spin 0.7s linear infinite;
}

.fsc-multi-upload-summary-failed {
  color: var(--jbf-status-danger-fg, #d80f3d);
  font-weight: 500;
}

/* Per-folder upload cap hint shown above the file list (e.g. JBF in the
   Wild! per-location 10-image limit). Sits between the dropzone and the
   summary so the user sees the remaining capacity before picking files. */
.fsc-multi-upload-cap-hint {
  font-size: 12.5px;
  color: var(--cum-foreground, #021922);
  background: rgba(0, 168, 186, 0.08);
  border: 1px solid rgba(0, 168, 186, 0.18);
  border-radius: 6px;
  padding: 6px 10px;
}

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

/* Thumbnail loading skeleton: shown while jbfFileDropZone.capturePreviews
   is still resolving the blob:// URL for a freshly-picked file. The
   shimmer keeps the user oriented even though that pass usually finishes
   in < 200 ms, and prevents the "blank grey square" look that made users
   think nothing had happened after picking files. */
.fsc-multi-upload-item-thumb-placeholder.is-loading {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      var(--cum-surface-muted, #f5f8fa) 0%,
      rgba(255, 255, 255, 0.65) 50%,
      var(--cum-surface-muted, #f5f8fa) 100%);
  background-size: 200% 100%;
  animation: fsc-thumb-shimmer 1.2s ease-in-out infinite;
}

.fsc-multi-upload-item-thumb-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(125, 91, 129, 0.18);
  border-top-color: var(--jbf-plum, #7d5b81);
  animation: fsc-thumb-spin 0.7s linear infinite;
}

@keyframes fsc-thumb-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes fsc-thumb-spin {
  to { transform: rotate(360deg); }
}

.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: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  flex: 1;
  min-width: 220px;
}

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

.fsc-folder-field--full {
  grid-column: 1 / -1;
}

.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;
}

/* Real-time slug validation feedback. Shows below the slug input as the
   admin types - "Checking availability..." while the debounced check is
   in flight, then either clears (slug is free) or surfaces a red
   conflict error so they can fix it before clicking Save. */
.fsc-folder-slug-status {
  font-size: 12px;
  line-height: 1.3;
  margin-top: 2px;
}

.fsc-folder-slug-status--checking {
  color: var(--cum-muted-foreground, #808c91);
  font-style: italic;
}

.fsc-folder-slug-status--error {
  color: #dc2626;
  font-weight: 500;
}

/* Field-level invalid wrapper - paints the slug input red so the eye
   tracks "what's wrong" before reading the inline message. */
.fsc-folder-field--invalid :global(.rz-textbox),
.fsc-folder-field--invalid input.rz-textbox {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 1px #dc2626 !important;
}

.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;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Inline count badge inside each sub-tab pill ("Images 12 / Links 3 /
   Documents 5"). Inactive: subtle plum-tinted chip. Active: white-on-
   translucent so it reads against the filled plum background of the
   selected tab. Number-only content is centred in a min-width pill so
   "1" and "999" don't make tab widths jiggle. */
.fsc-gallery-subtab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(125, 91, 129, 0.12);
  color: var(--jbf-plum, #6b5870);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

.fsc-gallery-subtabs .event-admin-tab-btn.active .fsc-gallery-subtab-count {
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.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);
}

/* Standalone uploader line for link rows - they don't have a "row-meta"
   line because the URL + optional description take that space. Sits below
   the description; the actual visual styling (font, color, separator)
   comes from the shared .fsc-uploader-meta rules. */
.fsc-gallery-row-uploader-line {
  margin: 4px 0 0;
}

.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;
}

/* =============================================================================
   Shared uploader meta - "by Jane Doe · 2 days ago"
   Used by image grid cards, image list rows, link rows, document rows, and
   the lightbox caption. Two visible parts plus a CSS-driven separator:

     - .fsc-uploader-meta-name : the "by First Last" portion. Stronger color
       and weight than the time so the eye lands on *who* first.
     - .fsc-uploader-meta-time : the relative timestamp. Muted so it reads as
       secondary metadata.
     - The separator is a CSS pseudo-element on the time, only rendered when
       a name precedes it - avoids stray "·" prefixes when the row predates
       the column. Pseudo + margin is used instead of an inline literal so
       browsers can't collapse the surrounding whitespace (which was making
       the bullet visually squashed against the time on Vimeo / image rows).
   ============================================================================= */
.fsc-uploader-meta {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 11.5px;
  line-height: 1.4;
}

.fsc-uploader-meta-name {
  color: var(--cum-foreground-soft, #5a6a73);
  font-weight: 500;
  white-space: nowrap;
}

.fsc-uploader-meta-time {
  color: var(--cum-muted-foreground, #9aa3a8);
  font-weight: 400;
  white-space: nowrap;
}

.fsc-uploader-meta-name + .fsc-uploader-meta-time::before {
  content: "·";
  margin: 0 8px;
  color: var(--cum-muted-foreground, #c7cdd0);
  font-weight: 400;
}

/* Row-meta flow - filename / size / uploader-meta laid out as flex items
   with bullet separators inserted via ::before on each non-leading child.
   Same trick as the inner uploader separator, applied at the parent level
   so adding a fourth piece (e.g. dimensions) is just one more selector. */
.fsc-row-meta-flow {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 0;
}

/* Document rows use this to put a styled separator between the
   filename and the uploader meta. Size used to live between them but
   was dropped to reduce row noise. The selector list is left explicit
   (not a generic "* + *") so future siblings have to opt in. */
.fsc-row-meta-name + .fsc-uploader-meta::before {
  content: "·";
  margin: 0 8px;
  color: var(--cum-muted-foreground, #c7cdd0);
  font-weight: 400;
}

/* 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-image-title-field--invalid > .fsc-link-field-label {
  color: var(--rz-danger);
}

.fsc-image-title-field--invalid .rz-textbox {
  border-color: var(--rz-danger) !important;
  box-shadow: 0 0 0 3px var(--rz-danger-lighter);
}

.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;
}

/* =============================================================================
   Mobile collapsible-dropdown tab pattern (FSC Library)

   Used by both the main FSC Library top tabs and the Gallery sub-tab strip
   (Images / Links / Documents). Pattern:

     1. A `.jbf-mobile-tab-toggle` button shows the current tab + chevron.
     2. Clicking toggles a `--mobile-open` class on the dropdown wrapper.
     3. The list reveals as a compact dropdown menu — NOT a giant pill grid.
        Each row is a flat list item with a left-aligned label, a subtle
        active state (left-border accent + tinted bg), and a 44px touch
        target. No full-bleed purple blocks (that was the previous bug).

   Desktop (>=lg) hides every `.jbf-mobile-tab-toggle` and the dropdown
   wrapper passes through to its child layout untouched.
   ============================================================================= */

/* xs/sm/md tier (max-width 1023.98px mirrors --bp-lg). */
@media (max-width: 1023.98px) {

  /* ── Trigger button (closed-state) ───────────────────────────────────── */
  .jbf-mobile-tab-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 8px 0;
    padding: 12px 16px;
    background: var(--jbf-segment-bg, var(--cum-card, #ffffff));
    border: 1px solid var(--jbf-segment-border, var(--cum-border, #e6e8e9));
    border-radius: var(--jbf-segment-radius-outer, 12px);
    color: var(--jbf-plum, #7d5b81);
    font-family: var(--cum-font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--jbf-segment-shadow, 0 1px 3px rgba(0, 0, 0, 0.06));
    min-height: 44px;
    gap: 12px;
  }

  .jbf-mobile-tab-toggle:hover {
    background: var(--cum-primary-soft, rgba(125, 91, 129, 0.06));
  }

  .jbf-mobile-tab-toggle-label {
    flex: 1 1 auto;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .jbf-mobile-tab-toggle i {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--cum-foreground-muted, #5b84a2);
    transition: transform 0.2s ease;
  }

  /* ── Main FSC Library top tabs ──────────────────────────────────────── */

  .fsc-library-page .fsc-library-tab-strip {
    display: none;
    margin-top: 6px;
  }

  .fsc-library-page--tabs-open .fsc-library-tab-strip {
    display: block;
  }

  /* Dropdown list shell. We OVERRIDE the inherited `.event-admin-tab-toggle`
     base (which is a horizontal pill on desktop) into a clean compact
     vertical menu. Notable overrides:
       - width:auto / no fixed pill width
       - display:block (NOT flex) so each child is a normal block — flex
         column kept resizing the active button to ~140px tall on tall
         screens, which the user flagged as "looks bad"
       - subtle 1px border + rounded corners, no shadow padding
       - clip-y to keep things tidy */
  .fsc-library-page--tabs-open .event-admin-tab-toggle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 4px !important;
    background: var(--cum-card, #ffffff) !important;
    border: 1px solid var(--cum-border, #e6e8e9) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(2, 25, 34, 0.06) !important;
    overflow: hidden;
  }

  /* Each tab row: flat, left-aligned, compact. The previous code centered
     the text + min-height:44px which produced the giant blocks. */
  .fsc-library-page--tabs-open .event-admin-tab-btn {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-left: 3px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--cum-foreground, #021922) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-align: left !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    box-shadow: none !important;
    min-height: 0 !important;
    flex: none !important;
  }

  .fsc-library-page--tabs-open .event-admin-tab-btn + .event-admin-tab-btn {
    margin-top: 2px !important;
  }

  .fsc-library-page--tabs-open .event-admin-tab-btn:hover {
    background: var(--cum-primary-soft, rgba(125, 91, 129, 0.08)) !important;
  }

  /* Active row: subtle tinted bg + plum left border + plum text — keeps
     the row at content height instead of stretching into a 140px block. */
  .fsc-library-page--tabs-open .event-admin-tab-btn.active {
    background: rgba(125, 91, 129, 0.10) !important;
    color: var(--jbf-plum, #7d5b81) !important;
    border-left-color: var(--jbf-plum, #7d5b81) !important;
  }

  /* ── Gallery sub-tabs (Images / Links / Documents) ──────────────────── */

  /* The sub-tabs strip uses the same `.event-admin-tab-toggle` markup,
     so we re-use the dropdown styling under a `.fsc-gallery-subtabs--mobile-open`
     scope. By default on mobile we hide the inline strip and surface
     a single trigger button. */
  .fsc-gallery-subtabs {
    display: block !important;
    width: 100% !important;
    align-items: initial !important;
  }

  .fsc-gallery-subtabs .event-admin-tab-toggle {
    display: none !important;
  }

  .fsc-gallery-subtabs--mobile-open .event-admin-tab-toggle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 4px !important;
    margin-top: 6px;
    background: var(--cum-card, #ffffff) !important;
    border: 1px solid var(--cum-border, #e6e8e9) !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(2, 25, 34, 0.06) !important;
  }

  .fsc-gallery-subtabs--mobile-open .event-admin-tab-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-left: 3px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--cum-foreground, #021922) !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    text-align: left !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
  }

  .fsc-gallery-subtabs--mobile-open .event-admin-tab-btn + .event-admin-tab-btn {
    margin-top: 2px !important;
  }

  .fsc-gallery-subtabs--mobile-open .event-admin-tab-btn.active {
    background: rgba(125, 91, 129, 0.10) !important;
    color: var(--jbf-plum, #7d5b81) !important;
    border-left-color: var(--jbf-plum, #7d5b81) !important;
  }

  /* Count badge ride-along — sits at the right side of each row in the
     expanded menu so the user can see "Images 5" without truncation. */
  .fsc-gallery-subtabs--mobile-open .fsc-gallery-subtab-count {
    margin-left: auto;
    background: rgba(125, 91, 129, 0.18);
    color: var(--jbf-plum, #7d5b81);
  }

  .fsc-gallery-subtabs--mobile-open .event-admin-tab-btn.active .fsc-gallery-subtab-count {
    background: var(--jbf-plum, #7d5b81);
    color: #fff;
  }
}

/* Desktop / large tablet: hide every mobile toggle, dropdown stays passive. */
@media (min-width: 1024px) {
  .jbf-mobile-tab-toggle {
    display: none !important;
  }
}

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

  /* Stack Name + Slug on small screens — 2-col grid only fits cleanly on
     wider edit rows. xs/sm tier (max-width 767.98px mirrors --bp-md). */
  .fsc-library-page .fsc-folder-edit-fields {
    grid-template-columns: 1fr;
  }

  .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;
  }

  /* Document type filter chips (All / PDF / Word / Excel / PowerPoint / Other)
     overflow off-screen on phones because the pill is `inline-flex` with no
     wrap. Convert it to a horizontally-scrollable strip that occupies the full
     toolbar row — preserves the pill look while making every filter reachable
     by swipe. */
  .fsc-gallery-toolbar-chips {
    display: flex;
    flex: 1 1 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .fsc-gallery-toolbar-chips::-webkit-scrollbar {
    display: none;
  }

  .fsc-gallery-toolbar-chip {
    flex: 0 0 auto;
    scroll-snap-align: start;
    /* Smaller padding on mobile so more chips fit before the scroll kicks in. */
    padding: 0 10px;
    font-size: 12px;
  }
}

@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 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  max-width: 100%;
}

.fsc-image-lightbox-caption-title {
  font-size: 14px;
  font-weight: 500;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fsc-image-lightbox-caption-uploader {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  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);
    }
}


/* Footer layout for upload dialog - aligns button with batch status text. */
.fsc-multi-upload-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.fsc-multi-upload-batch-status {
  font-size: 13px;
  color: var(--cum-muted-foreground, #808c91);
  font-style: italic;
}

/* xs/sm/md tier (max-width 1023.98px mirrors --bp-lg). Media queries cannot deref CSS vars. */
@media (max-width: 1023.98px) {
  .fsc-multi-upload-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


/* Gallery sub-tabs wrapper and count badges. */
.fsc-gallery-subtabs {
  margin-top: 8px;
}

.fsc-gallery-subtab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  margin-left: 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  background: rgba(125, 91, 129, 0.12);
  border-radius: 999px;
}

.event-admin-tab-btn.active .fsc-gallery-subtab-count {
  background: rgba(255, 255, 255, 0.25);
  color: white;
}

/* Mobile gallery sub-tab styling is owned by the dropdown pattern earlier
   in this file (see "Mobile collapsible-dropdown tab pattern"). The old
   wrap-as-pill rules were replaced because they re-overflowed once we had
   3+ chips with count badges.

   xs/sm/md tier (max-width 1023.98px mirrors --bp-lg). The gallery main
   header is a wrap-enabled flex row; on mobile we force the sub-tabs nav
   onto its own row so the dropdown trigger sits cleanly below the folder
   name and above the upload action. */
@media (max-width: 1023.98px) {
  .fsc-gallery-main-header .fsc-gallery-subtabs {
    width: 100%;
    flex: 1 1 100%;
    order: 2;
  }

  .fsc-gallery-main-header .fsc-gallery-main-actions {
    width: 100%;
    flex: 1 1 100%;
    order: 3;
    margin-left: 0;
  }
}


/* -- Content Workspace mobile improvements --------------------------------
   Seller Resources and Waivers sections list needs larger touch targets,
   visible action buttons, AND full-width nav rail on mobile devices.
   The .fsc-ecm-root override above pins .ecm-nav to 220px which works on
   desktop but truncates section titles to "What t..." on phones — override
   that here so the rail fills the viewport when it's in drilldown list-mode.
   --------------------------------------------------------------------------- */

/* xs/sm/md tier (max-width 1023.98px mirrors --bp-lg). Media queries cannot deref CSS vars. */
@media (max-width: 1023.98px) {
  /* Full-width rail on mobile: undo the 220px fixed width applied by the
     FSC-specific .fsc-ecm-root .ecm-nav rule. Without this, titles like
     "What to bring" or "Creating a great experience" get truncated to ~3
     characters because the actions column eats the remaining space.
     !important is needed to beat the (.fsc-ecm-root .ecm-nav) selector. */
  .fsc-ecm-root .ecm-nav {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Larger touch targets for section rows */
  .ecm-nav-item {
    min-height: 44px;
    /* Reduce side padding so the title gets more horizontal real estate. */
    padding: 6px 4px 6px 2px;
  }

  /* Wider per-row margin so the row pill doesn't hug the screen edge. */
  .fsc-ecm-root .ecm-nav-item-wrap {
    margin: 4px 12px;
  }

  /* The title flex item must claim ALL leftover space - the actions and
     drag handle should not steal more than they need. */
  .ecm-nav-item-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 6px;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Always show hover actions on mobile (no hover on touch devices), but
     keep them compact so they don't eat the title space. */
  .ecm-nav-hover-actions {
    display: flex !important;
    opacity: 1 !important;
    position: static;
    transform: none;
    margin-left: 4px;
    gap: 2px;
    flex: 0 0 auto;
  }

  /* Tighter action buttons - 36px is still WCAG-compliant for adjacent
     buttons because the touch target is the whole row pill, the icons are
     visual affordances within it. */
  .ecm-nav-hover-actions .ecm-icon-btn {
    width: 32px;
    height: 32px;
    padding: 4px;
  }

  /* Drag handle: keep the 32px touch zone but trim horizontal padding so
     the title has room. */
  .ecm-drag-handle {
    min-width: 22px;
    padding: 8px 2px;
    font-size: 14px;
    flex: 0 0 auto;
  }

  /* Add Section and Trash buttons need larger touch targets */
  .ecm-nav-footer-link {
    min-height: 44px;
    padding: 10px 12px;
  }
}

/* xs tier (< --bp-sm = 480px). Extra compact adjustments — on very narrow
   phones we shrink the icon buttons further to claw back every pixel for
   the section title. */
@media (max-width: 479.98px) {
  .ecm-nav-hover-actions {
    gap: 1px;
    margin-left: 2px;
  }

  .ecm-nav-hover-actions .ecm-icon-btn {
    width: 28px;
    height: 28px;
    padding: 3px;
  }

  .ecm-drag-handle {
    min-width: 18px;
    padding: 6px 0 6px 2px;
  }

  .ecm-nav-item-main {
    font-size: 13.5px;
    padding: 10px 4px;
  }
}