/* Event checklist modal - Local Website–style split inside Radzen dialog */

.eem-checklist-dialog {
  --eem-checklist-titlebar-h: 52px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  margin: -12px -16px;
  margin-top: 0;
  overflow: hidden;
  font-family: var(--cum-font, var(--font-overpass, 'Overpass', sans-serif));
}

/* Custom title row (Radzen title bar hidden - location + close live here) */
.eem-checklist-dialog-titlebar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--eem-checklist-titlebar-h);
  padding: 10px 16px 10px 20px;
  background: var(--cum-card, #fff);
  border-bottom: 3px solid var(--jbf-plum, #7d5b81);
  box-sizing: border-box;
}

.eem-checklist-dialog-titlebar-start {
  min-width: 0;
  flex: 1;
}

.eem-checklist-dialog-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  line-height: 1.3;
}

.eem-checklist-dialog-titlebar-end {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.eem-checklist-dialog-location {
  font-size: 15px;
  font-weight: 600;
  color: #5c3d6e;
  max-width: min(40vw, 320px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eem-checklist-dialog-close-btn.rz-button {
  flex-shrink: 0;
}

/* Text "CLOSE" variant in checklist titlebar (icon-only buttons use same base class elsewhere) */
.eem-checklist-dialog-close-btn--text.rz-button {
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Optional leading icon in titlebar (same treatment as Team Schedule fullscreen modals). */
.eem-checklist-dialog .team-sched-dialog-title-with-icon {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.eem-checklist-dialog .team-sched-dialog-title-calendar {
  flex-shrink: 0;
  font-size: 26px;
  line-height: 1;
  color: var(--jbf-magenta);
}

.eem-checklist-section-heading {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
}

.eem-checklist-nav-loading {
  margin: 8px 12px;
  font-size: 12px;
  color: #5c3d6e;
}

.eem-checklist-dialog button.lws-nav-item.eem-checklist-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: calc(100% - 24px);
  text-align: left;
}

.eem-checklist-nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid var(--cum-primary, #7d5b81);
  border-radius: 4px;
  box-sizing: border-box;
}

.eem-checklist-nav-icon--done {
  background: var(--cum-primary, #7d5b81);
  border-color: var(--cum-primary, #7d5b81);
  position: relative;
}

.eem-checklist-nav-icon--done::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.eem-checklist-nav-label {
  flex: 1;
  min-width: 0;
}

.eem-checklist-section-toolbar.lws-section-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.eem-checklist-done-col {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.eem-checklist-done-btn.rz-button {
  font-weight: 600;
}

/* Secondary / helper copy: brand purple (not pale gray) */
.eem-checklist-dialog .eem-card-meta,
.eem-checklist-dialog .lws-placeholder,
.eem-checklist-dialog .eec-timezone-label,
.eem-checklist-dialog .eec-time-hint,
.eem-checklist-dialog .eec-schedule-meta {
  color: #5c3d6e;
}

.eem-checklist-dialog .cum-muted-inline {
  color: #5c3d6e !important;
}

.eem-checklist-dialog .eem-checklist-split {
  display: flex;
  flex: 1;
  min-height: 0;
  min-width: 0;
  align-items: stretch;
  overflow: hidden;
}

.eem-checklist-dialog .lws-interior-nav {
  flex: 0 0 248px;
  align-self: stretch;
  max-height: 100%;
  background: var(--jbf-sidebar-shell-bg, #F6F5F8);
  border-right: 1px solid var(--cum-border, #e6e8e9);
}

/* Nav uses <button> for in-dialog switching - active/hover aligned with Event Management seller resources (.ecm-nav-item). */
.eem-checklist-dialog button.lws-nav-item {
  display: block;
  width: calc(100% - 24px);
  box-sizing: border-box;
  padding: 10px 16px 10px 20px;
  margin: 2px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  color: var(--cum-foreground, #021922);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.eem-checklist-dialog button.lws-nav-item:hover {
  background: rgba(125, 91, 129, 0.12);
}

.eem-checklist-dialog button.lws-nav-item.active {
  background: rgba(125, 91, 129, 0.18);
  border-color: rgba(125, 91, 129, 0.25);
  color: var(--cum-foreground, #021922);
}

.eem-checklist-dialog .lws-main-column {
  border-left: 1px solid var(--cum-border, #e6e8e9);
}

.eem-checklist-dialog .lws-section-toolbar {
  padding-top: 20px;
}

.eem-checklist-dialog .lws-section-body {
  padding-top: 8px;
}

/* Block pointer events to content behind slide-in panels (click does not dismiss panel). */
.jbf-event-checklist-fullscreen .lws-section-body.eem-checklist-section-body--panel-open {
  position: relative;
}

.jbf-event-checklist-fullscreen .eem-checklist-side-panel-scrim {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(2, 25, 34, 0.06);
  pointer-events: auto;
}

/* Plain / wide panels sit above scrim; rule-builder already uses z-index 100. */
.jbf-event-checklist-fullscreen .eem-side-panel:not(.eem-side-panel--rule-builder) {
  z-index: 50;
}

/* Event Info - Local Website form fields + footer aligned with checklist panels */
.eem-checklist-dialog .eem-event-edit-form .w-100 {
  width: 100%;
  box-sizing: border-box;
}

.eem-checklist-dialog .eem-event-edit-alert {
  margin: 0;
}

.eem-checklist-dialog .eem-event-edit-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid var(--cum-border, #e6e8e9);
}

.eem-tab-stack {
  position: relative;
  min-height: 200px;
}

.eem-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
  padding-bottom: 2px;
}

.eem-checklist-dialog button.eem-subtab {
  border: none;
  background: transparent;
  padding: 8px 14px;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: #666;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
}

.eem-checklist-dialog button.eem-subtab:hover {
  color: var(--cum-primary, #7d5b81);
  background: rgba(125, 91, 129, 0.08);
}

.eem-checklist-dialog button.eem-subtab.active {
  color: var(--cum-primary, #7d5b81);
  border: 1px solid var(--cum-border, #e6e8e9);
  border-bottom-color: #fff;
  background: #fff;
}

.eem-rules-panel {
  position: relative;
  min-height: 120px;
}

/* Fullscreen checklist: main column + rules area fill height; avoid double scroll with dialog chrome */
.jbf-event-checklist-fullscreen .eem-tab-stack {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.jbf-event-checklist-fullscreen .eem-rules-panel.jbf-rb {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.eem-rules-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.eem-rules-toolbar--rules-only {
  justify-content: flex-end;
}

.eem-rules-hint {
  flex: 1 1 220px;
  margin: 0 !important;
  font-size: 12px;
  line-height: 1.45;
}

/* Radzen: site.css sets .rz-dropdown-panel { width: 180px } - too narrow for long question/ticket labels */
.eem-checklist-dialog .rz-dropdown-panel,
.jbf-event-checklist-fullscreen .rz-dropdown-panel {
  width: min(calc(100vw - 32px), 560px);
  min-width: 260px;
}

.eem-rule-card {
  align-items: flex-start;
}

.eec-pill--ok {
  background: #e4f5f3;
  color: #007a68;
}

.eem-card-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.eem-link-add {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  color: var(--cum-primary, #7d5b81);
  cursor: pointer;
  text-decoration: underline;
}

.eem-link-add:hover {
  color: #5c3d6e;
}

.eem-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eem-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 10px;
  background: #fff;
}

.eem-card-main {
  flex: 1;
  min-width: 0;
}

.eem-card-title {
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  margin-bottom: 4px;
}

.eem-card-meta {
  font-size: 13px;
  color: var(--cum-muted, #5c6a70);
}

.eem-card-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.eec-schedule-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-size: 13px;
  color: var(--cum-muted, #5c6a70);
}

.eec-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(125, 91, 129, 0.12);
  color: #5c3d6e;
  font-weight: 600;
  font-size: 12px;
}

.eec-schedule-card.eem-card {
  padding: 20px 22px;
}

.eem-schedule-scroll .eem-card-list {
  gap: 16px;
}

.eec-schedule-card .eem-card-title {
  margin-bottom: 8px;
  font-size: 15px;
}

.eec-block-chips {
  margin: 12px 0 0 0;
  padding-left: 18px;
  font-size: 13px;
  color: var(--cum-foreground, #021922);
}

.eem-side-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(100%, 420px);
  max-height: min(72vh, 640px);
  overflow: auto;
  background: #fff;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(2, 25, 34, 0.12);
  z-index: 2;
}

.eem-side-panel--wide {
  width: min(100%, 520px);
}

/* Fee add/edit: extra width and height for dates + profile */
.eem-fee-edit-panel.eem-side-panel--wide {
  width: min(100%, min(96vw, 600px));
  max-height: min(82vh, 760px);
}

/* Full registration rule builder (v4.1 groups + action palette); see Web/Docs/event-admin/07-rule-builder-wireframe */
.eem-side-panel--rule-builder {
  width: min(100%, min(98vw, 1080px));
  max-height: min(88vh, 900px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Schedule add/edit: ~2x width so Title/Date/Profile and Time blocks fit side-by-side */
.eem-side-panel--rule-builder.eem-side-panel--schedule-edit {
  width: min(100%, min(98vw, 1400px));
}

/*
 * Fullscreen: fixed panel hugging the right edge (max-width) so it does not span the full main column.
 * Body scrolls; Cancel/Back/Save sit in a bottom footer (left-aligned) away from Help overlay.
 */
.jbf-event-checklist-fullscreen .eem-side-panel.eem-side-panel--rule-builder {
  position: fixed !important;
  top: 52px;
  right: 0;
  bottom: 0;
  left: auto;
  /* ~40.333vw cap, aligned with Event Management side panels; stay within main area */
  width: min(1080px, 40.333vw, calc(100vw - 248px)) !important;
  max-width: min(1080px, 40.333vw, calc(100vw - 248px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin-left: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
  box-shadow: -8px 0 32px rgba(2, 25, 34, 0.14);
}

/*
 * Add schedule: panel spans from right edge up to the in-dialog checklist listing (248px - see
 * .eem-checklist-dialog .lws-interior-nav). Gives the 2-row time-block cards plenty of room.
 */
.jbf-event-checklist-fullscreen
  .eem-side-panel.eem-side-panel--rule-builder.eem-side-panel--schedule-edit {
  width: calc(100vw - 248px) !important;
  max-width: calc(100vw - 248px) !important;
}

.jbf-event-checklist-fullscreen .eem-side-panel--rule-builder .eem-side-panel-header {
  flex-shrink: 0;
}

/* Scroll area only; panel footer (save row) stays pinned below */
.eem-side-panel--rule-builder .eem-rule-builder-body {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Ticket add/edit: scroll form fields; keep Save/Cancel pinned at panel bottom */
.eem-checklist-dialog .eem-ticket-edit-panel .eem-rule-builder-body,
.jbf-event-checklist-fullscreen .eem-ticket-edit-panel .eem-rule-builder-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.eem-ticket-edit-panel .eem-ticket-form-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.eem-ticket-edit-panel .eem-side-panel-footer {
  flex-shrink: 0;
  margin-top: 0;
  background: #fff;
}

.eem-ticket-edit-panel .cum-preview-grid-2 .cum-preview-field,
.eem-ticket-edit-panel .cum-preview-grid-3 .cum-preview-field {
  margin-bottom: 0;
}

.eem-ticket-edit-panel .cum-preview-grid-2,
.eem-ticket-edit-panel .cum-preview-grid-3 {
  margin-bottom: 12px;
}

/* Ensure 3-column rows work even if corporate-user-management.css load order varies */
.eem-ticket-edit-panel .cum-preview-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.eem-ticket-edit-panel .cum-preview-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.eem-ticket-edit-panel .cum-preview-field {
  margin-bottom: 12px;
}

.eem-ticket-edit-panel .eem-ticket-credits-hint {
  font-size: 12px;
  margin-top: -4px;
  margin-bottom: 12px;
}

/* TODO(responsive): off-tier literal -- revisit during phase4 governance. */
@media (max-width: 720px) {
  .eem-ticket-edit-panel .cum-preview-grid-3 {
    grid-template-columns: 1fr;
  }
}

.eem-rule-builder-row2 {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
  align-items: start;
}

/* TODO(responsive): off-tier literal -- revisit during phase4 governance. */
@media (max-width: 640px) {
  .eem-rule-builder-row2 {
    grid-template-columns: 1fr;
  }
}

.eem-rule-builder-section {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--cum-border, #e6e8e9);
}

.eem-rule-builder-heading {
  margin: 0 0 8px 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--cum-foreground, #021922);
}

.eem-rule-group-card {
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
  background: rgba(125, 91, 129, 0.04);
}

.eem-rule-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.eem-rule-group-title {
  font-weight: 700;
  font-size: 13px;
  color: #5c3d6e;
}

.eem-condition-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.eem-condition-row:last-of-type {
  border-bottom: none;
  margin-bottom: 6px;
  padding-bottom: 0;
}

.eem-condition-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 10px;
  align-items: end;
}

.eem-condition-actions,
.eem-action-actions {
  flex-shrink: 0;
  padding-top: 22px;
}

.eem-action-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 8px;
  background: #fff;
}

.eem-action-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 10px;
  align-items: end;
}

.eem-side-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
}

.eem-side-panel-header h4 {
  margin: 0;
  font-size: 16px;
}

.eem-side-panel-body {
  padding: 14px;
}

.eem-side-panel-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--cum-border, #e6e8e9);
}

.eem-answer-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.eem-add-answer-btn {
  margin-top: 4px;
}

.eec-timeblock-section {
  margin-top: 12px;
}

/* Inner 2-col form row: rely on Bootstrap for columns; refine spacing */
.eec-schedule-form-row {
  align-items: flex-start;
  /* Allow Bootstrap columns to shrink below intrinsic min-content (avoids clipping overflow:hidden children) */
  min-width: 0;
}

.eec-schedule-form-col--right .eec-timeblock-section {
  margin-top: 0;
  max-width: 100%;
}

.eec-schedule-form-col--right {
  min-width: 0;
}

.eec-timeblock-include-title label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  cursor: pointer;
  user-select: none;
}

/*
 * Shared column-header row above the time-block cards (desktop/tablet only).
 * Column widths mirror each card's top row so labels line up over the inputs.
 */
.eec-timeblock-column-header {
  margin: 8px 0 10px;
  padding: 0 4px;
}

.eec-timeblock-column-header .cum-preview-label {
  margin: 0;
  padding-left: 2px;
}

/* Card-based time-block layout - 2-row structure per block, scales to 8–10+ entries */
.eec-timeblock-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eec-timeblock-card {
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(2, 25, 34, 0.04);
}

.eec-timeblock-card-body {
  padding: 10px 12px;
}

.eec-timeblock-card-body .cum-preview-field {
  margin-bottom: 0;
}

.eec-timeblock-card-row + .eec-timeblock-card-row {
  margin-top: 10px;
}

/* Capacity column: narrow input so Start/End/Delete get more room on one line */
.eec-timeblock-card .eec-timeblock-capacity-col {
  max-width: 8rem;
}

.eec-timeblock-card .eec-timeblock-capacity,
.eec-timeblock-card .eec-timeblock-capacity.rz-numeric,
.eec-timeblock-card .eec-timeblock-capacity .rz-numeric {
  width: 100%;
  max-width: 6rem;
}

/* Delete sits on the same row as Start/End/Capacity; pin to the right, aligned to input baseline */
.eec-timeblock-card .eec-timeblock-delete-col {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: 2px;
}

.eec-timeblock-card .eec-timeblock-desc.rz-textarea,
.eec-timeblock-card .eec-timeblock-desc textarea {
  min-height: 3.25rem;
}

/* Time inputs inside the card: fill column, no 9.25rem global floor */
.eec-timeblock-card .eec-time-input {
  min-width: 0;
}

/*
 * Persistent "Add time block" button row - always rendered below the card list
 * (including empty state) so the primary add-action sits where the user just
 * finished typing the last card.
 */
.eec-timeblock-add-row {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.eec-timeblock-add-btn {
  width: 100%;
  max-width: 280px;
  border: 1px dashed var(--cum-border, #cfd4d6);
  background: transparent;
}

.eec-timeblock-add-btn:hover {
  background: var(--rz-base-200, #f5f7f8);
}

/* Add schedule: two-column panel layout - visual separator on wide screens */
/* TODO(responsive): off-tier literal -- closest standard is --bp-lg = 1024. Revisit during phase4 governance. */
@media (min-width: 992px) {
  .eec-schedule-form-col--right {
    border-left: 1px solid var(--cum-border, #e6e8e9);
    padding-left: 24px;
  }
}

.eec-timeblock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* Scroll target after “Add time block” so new rows stay in view inside the panel body */
.eec-timeblock-scroll-anchor {
  height: 1px;
  scroll-margin-bottom: 20px;
}

.eec-timeblock-grid {
  display: grid;
  grid-template-columns:
    minmax(88px, 1fr)
    minmax(8.25rem, 10rem)
    minmax(8.25rem, 10rem)
    minmax(4.25rem, 5.5rem)
    minmax(100px, 11rem)
    auto;
  gap: 10px;
  align-items: start;
  margin-bottom: 8px;
}

.eec-timeblock-capacity {
  width: 100%;
  max-width: 5.25rem;
}

.eec-timeblock-capacity .rz-numeric,
.eec-timeblock-capacity.rz-numeric {
  width: 100%;
  max-width: 100%;
}

.eec-timeblock-desc.rz-textarea,
.eec-timeblock-desc textarea {
  min-height: 4.5rem;
  resize: vertical;
}

.eec-timeblock-grid-head {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cum-foreground, #021922);
  margin-bottom: 4px;
  align-items: end;
  padding-bottom: 2px;
}

/* TODO(responsive): off-tier literal -- revisit during phase4 governance. */
@media (max-width: 720px) {
  .eec-timeblock-grid,
  .eec-timeblock-grid-head {
    grid-template-columns: 1fr;
  }
}

.eec-timezone-label {
  margin: 0 0 12px 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--cum-muted, #5c6a70);
}

.eec-timezone-label--compact {
  margin-bottom: 8px;
}

.eec-time-hint {
  margin: 0 0 8px 0;
  font-size: 12px;
}

/* Event checklist opened as full viewport (Radzen DialogOptions.CssClass) */
.jbf-event-checklist-fullscreen.rz-dialog-wrapper {
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
}

.jbf-event-checklist-fullscreen .rz-dialog {
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.jbf-event-checklist-fullscreen .rz-dialog-titlebar {
  flex-shrink: 0;
}

.jbf-event-checklist-fullscreen .rz-dialog-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0 !important;
}

/* Radzen/Blazor siblings must not share flex-grow with the checklist root */
.jbf-event-checklist-fullscreen .rz-dialog-content > *:not(.eem-checklist-dialog) {
  flex: 0 0 auto;
}

/* Dialog root fills .rz-dialog-content whether it is a direct child or nested under a wrapper */
.jbf-event-checklist-fullscreen .rz-dialog-content .eem-checklist-dialog {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  height: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.jbf-event-checklist-fullscreen .eem-checklist-dialog .eem-checklist-split {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

/* Let main column consume full split height (nested flex min-height chain) */
.jbf-event-checklist-fullscreen .eem-checklist-dialog .lws-main-column {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
}

/* Schedule + Setup: grid gives section body a real 1fr row so inner scroll reaches the bottom */
.jbf-event-checklist-fullscreen .eem-checklist-dialog .lws-main-column.eem-main-column--schedule-fill {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  align-content: stretch;
}

.jbf-event-checklist-fullscreen .eem-checklist-dialog .lws-main-column.eem-main-column--schedule-fill > .lws-section-toolbar {
  grid-row: 1;
  grid-column: 1;
}

.jbf-event-checklist-fullscreen .eem-checklist-dialog .lws-main-column.eem-main-column--schedule-fill > .lws-section-body {
  grid-row: 2;
  grid-column: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Match seller resources + schedule builder fullscreen titlebar rhythm */
.jbf-event-checklist-fullscreen .eem-checklist-dialog-titlebar {
  padding: 10px 24px;
}

/* Seller resources fullscreen - same content flex as event checklist */
.jbf-seller-resources-profile-fullscreen .eem-checklist-dialog {
  flex: 1;
  min-height: 0;
}

/* Single scroll: main section body lists content; dialog chrome does not scroll.
   Must be a flex column so .eem-tab-stack / rules area can use flex:1 and fill height
   (otherwise the Edit rule panel’s position:absolute top/bottom collapses). */
.jbf-event-checklist-fullscreen .lws-main-column .lws-section-body:not(.eem-section-body--schedule-fill) {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Schedule + Setup: outer section body does not scroll - only .eem-schedule-scroll does.
   Remove default .lws-section-body bottom padding so flex children can reach the dialog bottom. */
.jbf-event-checklist-fullscreen .lws-main-column .lws-section-body.eem-section-body--schedule-fill {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  overflow-y: hidden;
  overflow-x: hidden;
  padding-bottom: 0;
}

.jbf-event-checklist-fullscreen .lws-section-body.eem-section-body--schedule-fill > .eem-tab-stack {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* While the rule builder overlay is open, only the rule panel body scrolls (not the checklist behind it). */
.jbf-event-checklist-fullscreen .lws-main-column .lws-section-body:has(.jbf-rb-panel-open) {
  overflow: hidden;
}

.jbf-event-checklist-fullscreen .eem-tab-stack > .eem-subtabs {
  flex-shrink: 0;
}

/* Schedule tab: grid row 2 is minmax(0,1fr) so the list area always fills to the bottom (flex-only was unreliable). */
.jbf-event-checklist-fullscreen .eem-tab-stack > .eem-schedule-layout {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  min-height: 0;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.jbf-event-checklist-fullscreen .eem-schedule-toolbar-row {
  grid-row: 1;
  grid-column: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding-bottom: 10px;
}

.jbf-event-checklist-fullscreen .eem-schedule-toolbar-row .eem-schedule-type-filter {
  flex: 1 1 200px;
  min-width: 0;
  max-width: 320px;
}

.jbf-event-checklist-fullscreen .eem-schedule-toolbar-row .eem-card-toolbar {
  flex: 0 0 auto;
  margin-bottom: 0;
  margin-left: auto;
}

.jbf-event-checklist-fullscreen .eem-schedule-scroll {
  grid-row: 2;
  grid-column: 1;
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* Modal checklist: column layout + bounded scroll area */
.rz-dialog-wrapper:not(.jbf-event-checklist-fullscreen) .eem-schedule-layout {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: min(72vh, 820px);
}

.eem-schedule-type-filter {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Toolbar row: same vertical rhythm for ALL controls in the row.
   Targets the row context, not individual classes, so the View, Segments,
   Profiles dropdowns and the Add-schedule button share one baseline.
   Previously each control had its own opt-in min-height (or no rule at all,
   in the case of .eem-ts-view-dropdown) and the toolbar visibly stair-
   stepped — see the size-mismatch screenshot from 2026-05-04. */
.eem-schedule-toolbar-row {
  --eem-schedule-toolbar-control-h: 2.375rem;
  align-items: center;
}

.eem-schedule-toolbar-row .rz-dropdown,
.eem-schedule-toolbar-row .rz-button {
  min-height: var(--eem-schedule-toolbar-control-h);
  box-sizing: border-box;
}

.eem-schedule-toolbar-row .rz-button {
  display: inline-flex;
  align-items: center;
}

/* Label inherits 100% of wrapper height from site.css; this guarantees the
   wrapper actually owns that height even when Radzen Material's intrinsic
   sizing would have made it taller. */
.eem-schedule-toolbar-row .rz-dropdown .rz-dropdown-label.rz-inputtext {
  min-height: var(--eem-schedule-toolbar-control-h);
}

.eem-schedule-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 56px 28px 40px;
  gap: 20px;
  box-sizing: border-box;
}

.eem-schedule-empty .cum-muted-inline {
  max-width: 38rem;
}

.rz-dialog-wrapper:not(.jbf-event-checklist-fullscreen) .eem-schedule-toolbar-row {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
}

.rz-dialog-wrapper:not(.jbf-event-checklist-fullscreen) .eem-schedule-toolbar-row .eem-card-toolbar {
  margin-left: auto;
}

.rz-dialog-wrapper:not(.jbf-event-checklist-fullscreen) .eem-schedule-scroll {
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(58vh, 640px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* Rule builder - aligned with Web/Docs/event-admin/07-rule-builder-wireframe */
.jbf-rb {
  --jbf-rb-dark: #7d5b81;
  --jbf-rb-primary: #a282a6;
  --jbf-rb-light-bg: #f0eaf2;
  --jbf-rb-teal: #00a8ba;
  --jbf-rb-teal-bg: #e3f5f7;
  --jbf-rb-amber: #fdb526;
  --jbf-rb-amber-bg: #fff9ee;
}

.jbf-rb-sec-sub {
  font-size: 12px;
  color: #5c3d6e;
  line-height: 1.45;
  margin: 0;
  max-width: 52ch;
}

.jbf-rb-rule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.jbf-rb-rule-card {
  position: relative;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 13px 15px 13px 15px;
  background: #fff;
}

.jbf-rb-rule-card:hover {
  border-color: var(--jbf-rb-primary);
  box-shadow: 0 2px 10px rgba(162, 130, 166, 0.12);
}

.jbf-rb-rc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.jbf-rb-rc-head-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jbf-rb-rc-name {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
}

.jbf-rb-rc-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.jbf-rb-t-badge {
  font-size: 10px;
  border-radius: 99px;
  padding: 2px 9px;
  background: var(--jbf-rb-teal-bg);
  color: #006d78;
  font-weight: 600;
}

.jbf-rb-s-on {
  font-size: 10px;
  border-radius: 99px;
  padding: 2px 9px;
  background: #e4f5f3;
  color: #006d5a;
  font-weight: 600;
}

.jbf-rb-s-off {
  font-size: 10px;
  border-radius: 99px;
  padding: 2px 9px;
  background: #f0f0f0;
  color: #666;
  font-weight: 600;
}

.jbf-rb-chip-row {
  font-size: 11px;
  color: #555;
  line-height: 1.45;
}

.jbf-rb-rc-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  align-self: flex-start;
}

.jbf-rb-panel .jbf-rb-panel-head {
  background: #faf9fb;
}

.jbf-rb-bc {
  font-size: 11px;
  color: #bbb;
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}

.jbf-rb-bc-link {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--jbf-rb-primary);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
}

.jbf-rb-bc-sep {
  color: #ccc;
}

.jbf-rb-bc-current {
  color: #666;
  font-weight: 600;
}

.jbf-rb-picker-title {
  font-size: 15px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.jbf-rb-picker-sub {
  font-size: 12px;
  color: #aaa;
  margin-bottom: 14px;
  line-height: 1.5;
}

.jbf-rb-tpl-label {
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 14px 0 8px;
}

.jbf-rb-tpl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-bottom: 4px;
}

.jbf-rb-tpl-grid--2 {
  grid-template-columns: 1fr 1fr;
}

/* TODO(responsive): off-tier literal -- revisit during phase4 governance. */
@media (max-width: 520px) {
  .jbf-rb-tpl-grid,
  .jbf-rb-tpl-grid--2 {
    grid-template-columns: 1fr;
  }
}

.jbf-rb-tpl-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 13px;
  cursor: pointer;
  background: #fff;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.jbf-rb-tpl-card:hover {
  border-color: var(--jbf-rb-primary);
  background: #faf7fb;
}

.jbf-rb-tpl-trigger {
  font-size: 10px;
  color: #006d78;
  background: var(--jbf-rb-teal-bg);
  border-radius: 99px;
  padding: 2px 9px;
  display: inline-block;
  margin-bottom: 7px;
  font-weight: 600;
}

.jbf-rb-tpl-title {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 3px;
}

.jbf-rb-tpl-desc {
  display: block;
  font-size: 11px;
  color: #999;
  line-height: 1.4;
}

.jbf-rb-from-scratch {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
  padding: 11px 14px;
  border: 1px dashed #d5c8d8;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  color: #999;
  cursor: pointer;
  font: inherit;
}

.jbf-rb-from-scratch:hover {
  background: var(--jbf-rb-light-bg);
}

.jbf-rb-fs-plus {
  color: #bbb;
  font-size: 20px;
  line-height: 1;
}

.jbf-rb-trigger-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 13px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  background: var(--jbf-rb-teal-bg);
  color: #006d78;
  margin-bottom: 10px;
}

.jbf-rb-rule-preview {
  background: #faf7fb;
  padding: 12px 15px;
  font-size: 12px;
  line-height: 1.6;
  color: #555;
  margin-bottom: 15px;
  border-left: 3px solid var(--jbf-rb-primary);
  border-radius: 0 6px 6px 0;
}

/* Compact natural-language preview shown under each rule row in the rules list. */
.jbf-rb-list-preview {
  font-style: italic;
  opacity: 0.75;
  font-size: 0.875rem;
  margin-top: 4px;
}

/* Inline link-style toggle (e.g. "use custom value instead") inside a builder field. */
.jbf-rb-link-toggle {
  background: none;
  border: none;
  padding: 2px 0 0;
  margin: 0;
  color: var(--jbf-rb-primary, inherit);
  font-size: 0.8125rem;
  cursor: pointer;
  text-decoration: underline;
}

.jbf-rb-link-toggle:hover {
  opacity: 0.8;
}

.jbf-rb-logic-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.jbf-rb-match-lbl {
  font-size: 11px;
  color: #bbb;
}

.jbf-rb-logic-toggle {
  display: inline-flex;
  border: 1px solid #cdb4d3;
  border-radius: 6px;
  overflow: hidden;
}

.jbf-rb-logic-opt {
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  background: transparent;
  color: #aaa;
}

.jbf-rb-logic-opt--and {
  background: var(--jbf-rb-dark);
  color: #fff;
}

.jbf-rb-logic-opt--or {
  background: #fff3cc;
  color: #b87800;
}

.jbf-rb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 10px;
  font-size: 11px;
  color: #999;
}

.jbf-rb-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

.jbf-rb-dot--and {
  background: var(--jbf-rb-primary);
}

.jbf-rb-dot--or {
  background: var(--jbf-rb-amber);
}

.jbf-rb-add-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.jbf-rb-add-g {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  background: transparent;
}

.jbf-rb-add-g--and {
  border: 1px dashed var(--jbf-rb-primary);
  color: var(--jbf-rb-dark);
}

.jbf-rb-add-g--and:hover {
  background: var(--jbf-rb-light-bg);
}

.jbf-rb-add-g--or {
  border: 1px dashed var(--jbf-rb-amber);
  color: #b87800;
}

.jbf-rb-add-g--or:hover {
  background: var(--jbf-rb-amber-bg);
}

.eem-rule-group-card--and {
  border-color: #cdb4d3;
  background: rgba(240, 234, 242, 0.5);
}

.eem-rule-group-card--or {
  border-color: rgba(253, 181, 38, 0.45);
  background: var(--jbf-rb-amber-bg);
}

.jbf-rb-palette-info {
  background: var(--jbf-rb-teal-bg);
  border-radius: 8px;
  padding: 11px 14px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #005a65;
  line-height: 1.5;
  border-left: 3px solid var(--jbf-rb-teal);
}

.jbf-rb-act-block {
  border: 1px solid var(--jbf-rb-teal);
  border-radius: 8px;
  padding: 10px 13px;
  background: var(--jbf-rb-teal-bg);
  margin-bottom: 8px;
}

.jbf-rb-add-act {
  border: none;
  background: none;
  padding: 0;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--jbf-rb-teal);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
}

.jbf-rb-save-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

/* Pinned below scrollable rule body; Save left, Cancel right, group at start of panel */
.jbf-rb-save-row--panel-footer {
  flex-shrink: 0;
  margin-top: 0;
  padding: 12px 14px;
  padding-bottom: max(12px, env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--cum-border, #e6e8e9);
  background: #fff;
  justify-content: flex-start;
  position: relative;
  z-index: 3;
  width: 100%;
  box-sizing: border-box;
}

/* Primary save in panel footers - match any Radzen size/variant combo */
.jbf-rb-save-row .rz-button.rz-primary {
  background: var(--jbf-rb-dark, #7d5b81) !important;
  border-color: var(--jbf-rb-dark, #7d5b81) !important;
  color: #fff !important;
}

.eem-event-info-tabs {
  margin-bottom: 12px;
}

.eem-landing-faq-card {
  padding: 12px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
}

.eem-add-faq-btn {
  margin-top: 8px;
}

.eem-landing-save-row {
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--cum-border, #e6e8e9);
}

/* Event Info + Landing + Tagging: full-width cards, scroll body, fixed footer bar (add/edit panel style) */
.eem-checklist-dialog .eem-event-info-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Local Website caps .lws-form-card at 920px - use full main column in checklist */
.eem-checklist-dialog .lws-form-card.eem-checklist-wide-card {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

.eem-checklist-dialog .eem-landing-editor-shell,
.eem-checklist-dialog .eem-event-info-details-shell,
.eem-checklist-dialog .eem-tagging-setup-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  min-height: 240px;
}

.eem-checklist-dialog .eem-landing-editor-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  max-height: min(70vh, 900px);
}

.jbf-event-checklist-fullscreen .eem-landing-editor-scroll {
  max-height: none;
}

/* Landing-page editor on the on-page Event Management tab (NOT the dialog).
   Admin / desktop only - Event Management is a desktop admin tool. The
   .jbf-page outer element is height-clamped to the viewport, .jbf-header
   takes its natural height, and .event-admin-content-shell fills the rest
   as a bounded flex column. The shell below makes the inner -scroll the
   single scroll container and pins the Save / Cancel footer to the bottom
   of the viewport (sticky + flex-shrink:0 belt-and-suspenders so the
   footer stays visible no matter how tall the cards / FAQ list grows).
   Height: 100% on the shell is defensive - the parent already provides a
   bounded height through flex:1 + min-height:0, but spelling it out keeps
   us safe from any future flex-chain regression on this page. */
.event-admin-content-shell .eem-landing-editor-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  width: 100%;
  box-sizing: border-box;
}

.event-admin-content-shell .eem-landing-editor-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
  /* Without an explicit max-height the inner content can occasionally
     out-grow the bounded shell on first paint (Radzen html editors lazily
     measure themselves). Capping at 100% keeps overflow-y:auto in charge. */
  max-height: 100%;
}

/* Save Landing Page / Reset bar: pinned to the bottom of the editor. The
   shell is a bounded flex column so flex-shrink:0 already keeps the footer
   visible after the -scroll runs out of space; position:sticky bottom:0 is
   layered on top so the bar reads as a true viewport-anchored action bar
   and survives any browser quirk where flex-children overflow their
   bounded parent. z-index keeps the bar above sticky table headers /
   Radzen pop-overs that float inside the scroll area. */
.event-admin-content-shell .eem-landing-editor-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 5;
  padding: 14px 0 8px;
  margin-top: 8px;
  border-top: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-card, #fff);
  box-shadow: 0 -4px 8px -6px rgba(0, 0, 0, 0.18);
}

.event-admin-content-shell .eem-checklist-fixed-footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.event-admin-content-shell .eem-landing-section-gap {
  margin-top: 28px;
}

.event-admin-content-shell .lws-form-card.eem-checklist-wide-card {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}

.event-admin-content-shell .eem-landing-card-section .lws-form-fields {
  gap: 14px;
}

.event-admin-content-shell .lws-input-error .rz-textbox,
.event-admin-content-shell .lws-input-error.rz-textbox,
.event-admin-content-shell .lws-input-error input.rz-textbox {
  border-color: #d12c4f;
  box-shadow: 0 0 0 1px #d12c4f;
}

.event-admin-content-shell .eem-landing-title-error {
  display: block;
  margin-top: 6px;
  color: #d12c4f;
  font-size: 12.5px;
  font-weight: 500;
}

.event-admin-content-shell .eem-checklist-wide-card .rz-html-editor {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.event-admin-content-shell .eem-landing-editor-scroll .lws-form-card .rz-html-editor {
  min-height: 400px;
}

/* ── Slim toolbar at the top of the redesigned landing-page tab ──────────
   Mode dropdown on the left, plain "Preview" anchor on the right, hint
   text underneath. Sits above the card sections - no panel / card chrome,
   intentionally lightweight so the editor reads "settings strip then
   content" instead of "another card". */
.eem-landing-toolbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 12px;
}

.eem-landing-toolbar__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.eem-landing-toolbar__mode {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 240px;
}

.eem-landing-toolbar__mode-input {
  width: 240px;
  max-width: 100%;
}

.eem-landing-toolbar__preview {
  align-self: center;
  font-weight: 600;
  color: var(--cum-primary, #6c4f8a);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 8px;
  background: #fff;
  transition: background 120ms ease, color 120ms ease;
  white-space: nowrap;
}

.eem-landing-toolbar__preview:hover,
.eem-landing-toolbar__preview:focus-visible {
  background: var(--cum-primary, #6c4f8a);
  color: #fff;
}

.eem-landing-toolbar__hint {
  display: block;
  margin: 0;
}

/* Single Event Card 1 row: dropdown on the left, "Edit Content" link on the
   right. The link is a plain button (no chrome) styled as a text link so it
   looks lightweight next to the heavyweight Radzen dropdown. flex-direction
   is explicit (rather than relying on the row default) because the parent
   .lws-form-fields chain in this page sometimes forces flex-direction:column
   on its children, which would collapse the row into a vertical stack. */
.eem-landing-card1-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.eem-landing-card1-row__picker {
  flex: 1 1 320px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.eem-landing-card1-row__edit {
  flex: 0 0 auto;
  align-self: center;
}

.eem-landing-edit-content-link {
  background: transparent;
  border: none;
  color: var(--cum-primary, #6c4f8a);
  font-weight: 600;
  cursor: pointer;
  padding: 8px 4px;
  text-decoration: underline;
}

.eem-landing-edit-content-link:disabled {
  color: var(--cum-muted-foreground, #9aa0a6);
  cursor: not-allowed;
  text-decoration: none;
}

.eem-landing-edit-content-link:not(:disabled):hover,
.eem-landing-edit-content-link:not(:disabled):focus-visible {
  text-decoration: none;
  color: var(--cum-primary-hover, #5a3f73);
}

/* Single-mode preview wrapper: pads the read-only preview off the picker
   above and gives the (potentially large) FAQ list its own vertical rhythm
   below the 4-card grid. */
.eem-landing-single-preview {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.eem-landing-single-preview__faqs {
  margin-top: 4px;
}

/* The Single-event preview reuses the .evl-card / .evl-card__title family
   from event-landing.css so the editor matches the public page 1:1. Those
   rules reference --pl-card-border / --pl-card-bg / --pl-text-default,
   which are scoped to .public-page on the public site. The editor lives
   outside .public-page, so without this scope-port the var() lookups fall
   back to the property's initial value -- which silently kills the title
   bar's border-bottom (no divider underneath the pink title) and would
   eventually drop the card border + body color too if the public-page CSS
   ever stops accidentally painting them via inherited browser defaults.
   Defining the same tokens on the preview wrappers keeps the cascade
   identical to the public surface without forking the .evl-* rules. */
.eem-landing-card-preview,
.eem-landing-single-preview {
  --pl-card-bg: #ffffff;
  --pl-card-border: #e6e8e9;
  --pl-text-default: #021922;
  --pl-text-muted: #4e5e65;
  --pl-text-subtle: #808c91;
  --pl-primary: #7d5b81;
}

/* Scroll wrapper for Setup-tab list sections (Questions, Fees, Tickets, Coupons, Payout Rates)
   whose content is rendered directly inside .eem-tab-stack. The tab stack uses
   overflow: hidden (so absolutely-positioned side panels don't cause scrolling),
   so the list content needs its own scrollable container to avoid being clipped. */
.jbf-event-checklist-fullscreen .eem-checklist-setup-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* ---------- Section card shell (sticky toolbar + scrollable body) ----------
 * Applied to each Setup-tab list section: Questions, Fees, Tickets, Coupons,
 * Payout Rates, Team Members, Payout Methods, Catalog. Provides a consistent
 * card visual (white surface, soft border, rounded corners) with a sticky
 * header row (description + primary action button) and a scrollable body
 * beneath it. The header doesn't scroll with the body, so the "Add X" button
 * stays visible no matter how long the list is.
 */
.eem-section-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-height: 0;
  background: var(--cum-card, #fff);
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

/* Cap height in normal (non-fullscreen) dialog so it doesn't push the dialog past 70vh. */
.eem-checklist-dialog .eem-section-card {
  max-height: min(70vh, 900px);
}

.eem-section-card-header {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-card, #fff);
  position: relative;
  z-index: 1;
}

.eem-section-card-header--actions-only {
  justify-content: flex-end;
}

.eem-section-card-header-text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  min-width: 0;
}

.eem-section-card-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.eem-section-card-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px;
}

/* TODO(responsive): off-tier literal -- revisit during phase4 governance. */
@media (max-width: 720px) {
  .eem-section-card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .eem-section-card-header--actions-only {
    align-items: stretch;
  }
}

.eem-checklist-dialog .eem-landing-editor-footer {
  flex-shrink: 0;
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-card, #fff);
}

.eem-checklist-dialog .eem-checklist-fixed-footer-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.eem-checklist-dialog .eem-landing-section-gap {
  margin-top: 28px;
}

/* Inner body for Registration Landing + Instructions section cards: pads the
   body away from the gray title strip and the card edges, and stacks rows
   (FAQ entries, the resources sub-blocks) with a consistent vertical rhythm.
   Without this wrapper the form-grid / faq cards / toolbar sit flush against
   the title and against each other, which reads as cramped. */
.eem-checklist-dialog .eem-landing-section-body {
  padding: 22px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Per-card panels in the Registration Landing editor ─────────────────
   The Registration Landing tab now lays out four card panels (Card 1 = auto
   Event Info preview, Cards 2-4 = title + body). Each panel uses the same
   .lws-form-card chrome the rest of the dialog uses, so this rule just
   tightens the inner form rhythm a touch (the title input is short and
   shouldn't have the same gap below it the html editors get above them). */
.eem-checklist-dialog .eem-landing-card-section .lws-form-fields {
  gap: 14px;
}

/* Card 1 preview wrapper. Renders the same EventInfoCard component the
   public Event Landing page uses, so the editor and the public output
   stay 1:1. The shell crops the preview to a comfortable max width so
   admins editing on a 1440+ monitor don't see a stretched info card. */
.eem-checklist-dialog .eem-landing-card-preview__hint {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--cum-foreground-muted, #4b5660);
}
.eem-checklist-dialog .eem-landing-card-preview__shell {
  max-width: 480px;
}

/* Validation chrome - title input picks up .lws-input-error when its card
   has body content but the title was left blank. The helper-text below
   the input echoes the error so the toast isn't the only signal. */
.eem-checklist-dialog .lws-input-error .rz-textbox,
.eem-checklist-dialog .lws-input-error.rz-textbox,
.eem-checklist-dialog .lws-input-error input.rz-textbox {
  border-color: #d12c4f;
  box-shadow: 0 0 0 1px #d12c4f;
}
.eem-checklist-dialog .eem-landing-title-error {
  display: block;
  margin-top: 6px;
  color: #d12c4f;
  font-size: 12.5px;
  font-weight: 500;
}

/* Two equal columns (~half width each) that use the full card width */
.eem-checklist-dialog .eem-landing-rte-row.lws-form-grid-2,
.eem-checklist-dialog .eem-tagging-rte-row.lws-form-grid-2 {
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}

.eem-checklist-dialog .eem-checklist-wide-card .rz-html-editor {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.eem-checklist-dialog .eem-landing-editor-scroll .lws-form-card .rz-html-editor {
  min-height: 400px;
}

.eem-checklist-dialog .eem-landing-faq-card .rz-html-editor {
  min-height: 260px;
}

/* FAQ card = one Question/Answer pair. flex-column + gap separates the two
   .lws-field stacks, padding gives breathing room between consecutive pairs,
   and the bottom border keeps the visual divider between rows. */
.eem-checklist-dialog .eem-landing-faq-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 6px 0 22px;
  margin-bottom: 0;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
}

.eem-checklist-dialog .eem-landing-faq-card:first-of-type {
  padding-top: 0;
}

.eem-checklist-dialog .eem-landing-faq-card:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

/* Wider gap between field label and the input/editor below it inside the
   landing + instructions editor scroll (default .lws-field gap is 6px which
   sits the toolbar visually flush against the label). */
.eem-checklist-dialog .eem-landing-editor-scroll .lws-field {
  gap: 10px;
}

/* Breathing room between the editor toolbar row and the typing area below.
   Scoped to the landing/instructions editors so other JbfHtmlEditor consumers
   are unchanged. */
.eem-checklist-dialog .eem-landing-section-body .rz-html-editor-content {
  padding: 10px 0;
}

/* Resources & Documentation: intro text + "Add link" button on the same row,
   text-left / button-right. Wraps to two rows on narrow widths so the button
   stays reachable. */
.eem-checklist-dialog .eem-instruction-resources-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.eem-checklist-dialog .eem-instruction-resources-intro {
  flex: 1 1 auto;
  min-width: 0;
}

/* Empty state for the link list - centered under the header row so it doesn't
   read as a stray left-aligned hint. */
.eem-checklist-dialog .eem-instruction-empty {
  text-align: center;
}

/* Default <p> top/bottom margins (~1em) double up with the section body's
   flex gap (flexbox does not margin-collapse). Normalize so paragraphs follow
   the 20px stack rhythm exactly. */
.eem-checklist-dialog .eem-landing-section-body > p,
.eem-checklist-dialog .eem-instruction-resources-header > p {
  margin: 0;
}

/* Tagging setup - tall/wide editors (full-width card + equal columns) */
.eem-checklist-dialog .eem-tagging-setup-shell .lws-field .rz-html-editor {
  min-height: 400px;
}

.eem-checklist-dialog .eem-tagging-setup-shell .eem-tagging-rte-row .lws-field .rz-html-editor {
  min-height: 380px;
}

.jbf-event-checklist-fullscreen .eem-event-info-body {
  flex: 1;
  min-height: 0;
}

.jbf-event-checklist-fullscreen .eem-landing-editor-shell,
.jbf-event-checklist-fullscreen .eem-event-info-details-shell,
.jbf-event-checklist-fullscreen .eem-tagging-setup-shell {
  flex: 1;
  min-height: 0;
}

/* Payout methods checklist */
.eec-payout-table {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 8px;
  overflow: hidden;
  background: var(--cum-card, #fff);
}

.eec-payout-row {
  display: grid;
  grid-template-columns: 36px 52px minmax(140px, 1.2fr) minmax(88px, 0.5fr) minmax(160px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
}

.eec-payout-row--draggable {
  cursor: grab;
}

.eec-payout-row--draggable:active {
  cursor: grabbing;
}

.eec-payout-col-drag {
  width: 36px;
}

.eec-payout-cell--drag {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.eec-payout-drag-handle.eem-question-drag-handle {
  margin: 0 auto;
}

.eec-payout-row:last-child {
  border-bottom: none;
}

.eec-payout-row--head {
  font-size: 12px;
  font-weight: 600;
  color: var(--cum-foreground, #021922);
  background: #f6f7f8;
}

.eec-payout-cell .rz-numeric,
.eec-payout-cell .rz-textbox {
  width: 100%;
}

.eec-payout-method-name {
  font-size: 14px;
  font-weight: 500;
}

/* TODO(responsive): off-tier literal -- revisit during phase4 governance. */
@media (max-width: 720px) {
  .eec-payout-row {
    grid-template-columns: 32px 44px 1fr;
    grid-template-rows: auto auto;
  }

  .eec-payout-row--head {
    display: none;
  }

  .eec-payout-row .eec-payout-cell:nth-child(4),
  .eec-payout-row .eec-payout-cell:nth-child(5) {
    grid-column: 1 / -1;
  }
}

/* Event Snapshot tab: intro above first card */
.eem-event-snapshot-intro {
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--cum-foreground, #021922);
}

/* Event Info: constrain embedded edit form width */
.eem-event-info-form-wrap {
  max-width: 720px;
  margin: 0 auto;
}

.eem-event-info-form-wrap .lws-form-card-title {
  text-align: left;
}

/* Narrow standalone forms (team, payout methods) */
.eem-narrow-form-card {
  max-width: 520px;
  box-sizing: border-box;
}

.eem-team-form-card.lws-form-card {
  padding: 14px 16px 16px;
}

.eem-team-form-card .cum-preview-field {
  margin-bottom: 10px;
}

.eem-team-form-card .cum-preview-field:last-of-type {
  margin-bottom: 0;
}

.eem-payout-methods-wrap {
  max-width: 920px;
}

/* Question cards: drag handle */
.eem-card--draggable {
  align-items: center;
}

.eem-question-drag-handle {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--cum-muted, #5c6a70);
  cursor: grab;
  user-select: none;
}

.eem-question-drag-handle svg {
  display: block;
  width: 20px;
  height: 20px;
}

.eem-card--draggable:active .eem-question-drag-handle {
  cursor: grabbing;
}

/* Schedule time pickers in grid - wide enough for value + native clock control */
.eec-time-input {
  width: 100%;
  min-width: 9.25rem;
  max-width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 6px 10px;
  border: 1px solid var(--cum-border, #e6e8e9);
  border-radius: 6px;
  font: inherit;
  color: var(--cum-foreground, #021922);
  background: #fff;
}

/* Instructions link rows - one horizontal row per card (not a stacked “side panel” column) */
.eem-instruction-link-list .eem-instruction-link-card {
  align-items: stretch;
  gap: 12px;
}

.eem-instruction-link-drag.eem-question-drag-handle {
  align-self: center;
  margin-top: 0;
  padding-top: 0;
}

.eem-instruction-link-fields {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(108px, 140px) minmax(0, 2fr) auto;
  gap: 12px 14px;
  align-items: end;
}

.eem-instruction-link-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.eem-instruction-link-label.lws-field-label {
  color: var(--cum-foreground, #021922);
  font-size: 12px;
  font-weight: 600;
}

.eem-instruction-link-cell--actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.eem-instruction-link-actions-spacer {
  display: block;
  min-height: 18px;
}

.eem-instruction-file-name {
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eem-instruction-file-input {
  font-size: 13px;
  max-width: 100%;
}

/* TODO(responsive): off-tier literal -- revisit during phase4 governance. */
@media (max-width: 900px) {
  .eem-instruction-link-fields {
    grid-template-columns: 1fr 1fr;
  }

  .eem-instruction-link-cell--target {
    grid-column: 1 / -1;
  }

  .eem-instruction-link-cell--actions {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }

  .eem-instruction-link-actions-spacer {
    display: none;
  }
}

/* ── Schedule tab: Team Shifts toggle ─────────────────────────────────────── */
.eem-schedule-mode-toggle-row {
  display: flex;
  align-items: center;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--rz-border-color, #e0e0e0);
  margin-bottom: 12px;
}

.eem-schedule-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.eem-schedule-toggle-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rz-text-color, #333);
}

.eem-schedule-toggle-label .rz-switch {
  border-radius: 9999px !important;
  background-color: #e5e7eb !important;
  min-width: 44px !important;
  height: 24px !important;
}

.eem-schedule-toggle-label .rz-switch .rz-switch-handle {
  background-color: var(--rz-white) !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
}

.eem-schedule-toggle-label .rz-switch.rz-state-active {
  background-color: #7d5b81 !important;
}

.eem-schedule-toggle-label .rz-switch.rz-switch-checked .rz-switch-circle {
  background-color: #7d5581 !important;
}

.eem-schedule-toggle-label .rz-switch.rz-switch-checked .rz-switch-circle:before {
  background-color: var(--rz-white) !important;
  left: 3px;
}

/* Make the team-sched builder body fill the available height inside the dialog */
.jbf-event-checklist-fullscreen .team-sched-builder-body {
  min-height: 0;
  flex: 1 1 auto;
}

.rz-dialog-wrapper:not(.jbf-event-checklist-fullscreen) .team-sched-builder-body {
  max-height: min(60vh, 680px);
  overflow: hidden;
}

/* ── Team Shifts builder: toolbar alignment fixes for dialog width ──────────── */

/*
 * Zero out the lws-section-body L+R padding (28px each side) when the schedule
 * section is in its fill/builder layout. This gives the team-shifts builder the
 * full main-column width instead of a 56px narrower content box.
 * Side-effects are contained: only the schedule "fill" section body is affected,
 * and we restore the padding on the toggle row + regular schedule layout below.
 */

/* Restore side padding for the toggle row so "Team Shifts" switch stays inset */
.jbf-event-checklist-fullscreen .eem-section-body--schedule-fill .eem-schedule-mode-toggle-row {
  padding-left: 28px;
  padding-right: 28px;
}

/* Override grid column sizes to fit the dialog's available width - 2 columns
 * (public column removed): main content + aside panel only. */
.jbf-event-checklist-fullscreen .team-sched-builder-shell
  .team-sched-builder-body--3col.team-sched-builder-body--grid-figma {
  grid-template-columns:
    minmax(0, 1fr)
    minmax(240px, 300px);
  grid-template-areas:
    "date aside"
    "main aside";
}

/* Toolbar: use auto sizing so left/right sections don't overflow */
.jbf-event-checklist-fullscreen .team-sched-toolbar-layout {
  grid-template-columns: auto 1fr auto;
}

/* Below 1300px the center filter chips row needs its own line to prevent overflow */
/* TODO(responsive): off-tier literal at lg/xl boundary -- revisit during phase4 governance. Keep value to avoid xl regressions. */
@media (max-width: 1300px) {
  .jbf-event-checklist-fullscreen .team-sched-toolbar-layout {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }

  .jbf-event-checklist-fullscreen .team-sched-toolbar-layout-center {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

/* Keep View dropdown + schedule picker on one row - no wrapping */
.jbf-event-checklist-fullscreen .team-sched-toolbar-layout-left {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
}

/* Prevent "View" label from breaking onto its own line */
.jbf-event-checklist-fullscreen .team-sched-view-toolbar-group {
  flex-wrap: nowrap;
}

/* Give the 3-column builder body proper height and gap to fill available dialog space */
.jbf-event-checklist-fullscreen .team-sched-builder-body--3col.team-sched-builder-body--grid-figma {
  flex: 1;
  min-height: 0;
  gap: 12px;
  padding: 0;
  border: none;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent;
}

/* Make the builder shell flex-column so toolbar + body stack correctly */
.jbf-event-checklist-fullscreen .team-sched-builder-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* ── Toggle-ON toolbar: row layout ───────────────────────────────────────── */
.jbf-event-checklist-fullscreen .team-sched-builder-shell .eem-ts-toolbar-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--tsb-surface, #fff);
  border-bottom: 1px solid var(--tsb-line, #e3dce8);
  padding: 12px 20px 16px;
  border-radius: var(--tsb-radius-sm, 10px) var(--tsb-radius-sm, 10px) 0 0;
}

/* ── Filter group inside toggle-ON toolbar: horizontal, no stretch ───────── */
.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  min-width: 0;
}

.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters .eem-schedule-type-filter {
  flex: 0 0 auto;
  min-width: 160px;
  max-width: 260px;
}

/* Narrow modifier for the Segments dropdown — labels are short ("All Segments",
   "Drop-Off", etc.) so the wider default reads as wasted space next to the
   view-mode dropdown. */
.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters .eem-schedule-type-filter--narrow {
  min-width: 140px;
  max-width: 170px;
}

.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters .eem-ts-view-group {
  flex: 0 0 auto;
}

/* Section header used by Day view (date label) and the grouped views
   (segment-type / profile group titles). Sits flush with cards beneath it. */
.jbf-event-checklist-fullscreen .team-sched-builder-shell .eem-ts-section-header {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tsb-text, #2f2434);
  padding: 4px 2px 8px;
  margin-top: 6px;
  border-bottom: 1px solid var(--tsb-line, #e3dce8);
  margin-bottom: 12px;
}

.jbf-event-checklist-fullscreen .team-sched-builder-shell .eem-ts-section-header:first-child {
  margin-top: 0;
}

/* ── Canvas / scroll area ─────────────────────────────────────────────────── */
.jbf-event-checklist-fullscreen .team-sched-builder-shell .eem-schedule-scroll {
  background: transparent;
  padding: 20px 20px 24px;
  border-radius: 0 0 var(--tsb-radius-sm, 10px) var(--tsb-radius-sm, 10px);
}

/* ── Toggle-OFF toolbar uses same visual style ────────────────────────────── */
.jbf-event-checklist-fullscreen .team-sched-builder-shell .eem-schedule-toolbar-row {
  background: var(--tsb-surface, #fff);
  border-bottom: 1px solid var(--tsb-line, #e3dce8);
  padding: 12px 20px 16px;
  border-radius: var(--tsb-radius-sm, 10px) var(--tsb-radius-sm, 10px) 0 0;
}

/* ── Toggle switch styling ────────────────────────────────────────────────── */
.eem-schedule-toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: default;
  user-select: none;
  padding-right: 12px;
  border-right: 1px solid var(--cum-border, #e6e8e9);
  margin-right: 4px;
}

.eem-schedule-toggle-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--rz-text-color, #333);
  white-space: nowrap;
}

/* Section card: main center column (Day / List / Calendar) */
.jbf-event-checklist-fullscreen .team-sched-builder-shell .team-sched-builder-body--grid-figma .team-sched-middle-col {
  height: 100%;
  min-height: 0;
  border: 1px solid var(--tsb-line, #e3dce8);
  border-radius: var(--tsb-radius, 12px);
  box-shadow: var(--tsb-shadow, 0 2px 12px rgba(26, 20, 40, 0.06));
  overflow: hidden;
}

/* Section card: aside shift detail / add-shift panel */
.jbf-event-checklist-fullscreen .team-sched-builder-shell .team-sched-builder-body--grid-figma .team-sched-builder-aside {
  border: 1px solid var(--tsb-line, #e3dce8);
  border-radius: var(--tsb-radius, 12px);
  box-shadow: var(--tsb-shadow, 0 2px 12px rgba(26, 20, 40, 0.06));
  overflow: hidden;
}

/* Aside inner card: no duplicate corner radius inside the card */
.jbf-event-checklist-fullscreen .team-sched-builder-shell .team-sched-builder-body--grid-figma .cum-preview-root.team-sched-builder-aside-inner {
  border-radius: 0;
}

/* Canvas list: no left/right border - card border already provides containment */
.jbf-event-checklist-fullscreen .team-sched-builder-shell .team-sched-builder-body--grid-figma .team-sched-builder-canvas {
  border-left: none;
  border-right: none;
}

/* ── Responsive: collapse 2-col grid and toolbar earlier for the narrower dialog ── */
/* TODO(responsive): off-tier literal at lg/xl boundary -- revisit during phase4 governance. Keep value to avoid xl regressions. */
@media (max-width: 1100px) {
  .jbf-event-checklist-fullscreen .team-sched-builder-body--3col.team-sched-builder-body--grid-figma {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "date"
      "main"
      "aside";
  }

  /* At this width the toolbar left section (View + dropdowns) and right section
     (Add Shift) should each take a full row */
  .jbf-event-checklist-fullscreen .team-sched-toolbar-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }

  .jbf-event-checklist-fullscreen .team-sched-toolbar-layout-center {
    justify-content: flex-start;
  }

  .jbf-event-checklist-fullscreen .team-sched-toolbar-layout-right {
    justify-content: flex-start;
  }
}

/* ── Responsive fixes for event-checklist team shifts builder ────────────── */

/* Fix 1: Nav sidebar - collapse to horizontal top bar at ≤900px
   (overrides the always-248px rule with higher specificity + media query) */
/* TODO(responsive): off-tier literal -- revisit during phase4 governance. */
@media (max-width: 900px) {
  .jbf-event-checklist-fullscreen .eem-checklist-dialog .eem-checklist-split {
    flex-direction: column;
  }

  .jbf-event-checklist-fullscreen .eem-checklist-dialog .lws-interior-nav {
    flex: none;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--cum-border, #e6e8e9);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 10px 12px 14px;
    box-sizing: border-box;
  }
}

/* Fix 2: "+ Add Shift" button - prevent stretching to full row width
   when toolbar collapses to single column at ≤1100px */
/* TODO(responsive): off-tier literal at lg/xl boundary -- revisit during phase4 governance. Keep value to avoid xl regressions. */
@media (max-width: 1100px) {
  .jbf-event-checklist-fullscreen .team-sched-toolbar-layout-right {
    width: fit-content;
  }
}

/* Fix 3: Date strip label - remove hard min-width so ">" arrow stays visible
   on phones where the label "Monday, Apr 13, 2026" would overflow */
/* xs tier (< --bp-sm = 480). */
@media (max-width: 479.98px) {
  .jbf-event-checklist-fullscreen .team-sched-date-strip-label {
    min-width: 0;
    font-size: 13px;
  }
}

/* Fix 4: Calendar week grid - collapse from 2 columns to 1 column on small phones */
/* TODO(responsive): off-tier literal -- revisit during phase4 governance. */
@media (max-width: 540px) {
  .jbf-event-checklist-fullscreen .team-sched-week-grid {
    grid-template-columns: 1fr;
  }
}

/* Fix 5: View dropdown - allow shrinking below 130px inline min-width on very
   small screens so the toolbar left section doesn't overflow */
/* TODO(responsive): off-tier literal -- revisit during phase4 governance. */
@media (max-width: 400px) {
  .jbf-event-checklist-fullscreen .team-sched-view-dropdown-layout.rz-dropdown {
    min-width: 100px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────
   Landing page versioning redesign (20260504): grid + status pills + new
   editor "Version Name + Status" meta section.

   The grid view replaces the previous single-form layout on the Landing
   Page tab with a PaginatedTable of every saved version for the current
   location. Authoring still happens in the existing single-form editor;
   the "Add Version" button + Edit icon swap into that editor with a new
   Version Name + Status row pinned to the top.
   ───────────────────────────────────────────────────────────────────── */

/* Two-icon action cell in the version grid (Preview + Edit). Centered and
   tight so the column can stay narrow (120px) without wrapping. */
.eem-landing-version-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Editor meta strip -- a single-row header at the top of the editor view.
     [Version name | Display Mode | Status | (spacer) | Preview]
   Replaces the previous heavy `.lws-form-card` wrapper so the strip reads as
   a slim form bar instead of a card-around-card. Padding is intentionally
   tight (12px / 14px) so the editor feels like one continuous surface from
   header to per-mode cards below.
   align-items:flex-end keeps the inputs visually baselined despite the
   stacked labels, and the Preview button picks up margin-left:auto so it
   anchors to the right edge regardless of how wide the inputs land. */
.eem-landing-version-meta {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 14px;
  background: var(--cum-card, #fff);
  border: 1px solid var(--cum-border, #e6e9ec);
  border-radius: var(--cum-radius, 8px);
  margin: 0;
}

/* Per-field cells. Each carries its own width budget so a too-long version
   name can't push Mode/Status off-row, and the dropdowns stay aligned. */
.eem-landing-version-meta__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.eem-landing-version-meta__field--name {
  flex: 1 1 280px;
  min-width: 220px;
  max-width: 360px;
}

.eem-landing-version-meta__field--mode,
.eem-landing-version-meta__field--status {
  flex: 0 1 200px;
  min-width: 180px;
  max-width: 220px;
}

.eem-landing-version-meta__input {
  width: 100%;
}

/* Preview button sits at the right edge of the strip, vertically baselined
   with the inputs (not the labels) so it lines up with the dropdown / textbox
   rows. */
.eem-landing-version-meta__preview {
  margin-left: auto;
  display: flex;
  align-items: flex-end;
}