/* 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).
   Solid brand pink (#d23c77) with white text - same accent used by the events grid checklist
   icon and event title link, so the dialog's primary "exit" action stays in the same visual
   family as the entry point that opened it. Shared across the five fullscreen modals that use
   this class (event checklist, seller resources, consignor profile, inventory analysis,
   team schedule) for consistent CLOSE treatment. */
.eem-checklist-dialog-close-btn--text.rz-button {
  font-weight: 600;
  letter-spacing: 0.04em;
  background-color: #d23c77 !important;
  border-color: #d23c77 !important;
  color: #ffffff !important;
}

.eem-checklist-dialog-close-btn--text.rz-button:hover:not(:disabled),
.eem-checklist-dialog-close-btn--text.rz-button:focus-visible:not(:disabled) {
  background-color: #b8336a !important;
  border-color: #b8336a !important;
  color: #ffffff !important;
}

/* "Preview" button in the event checklist titlebar - painted in the same brand teal as
   the PreviewBanner strip (#76B8B7 background, #5a9b9a border/hover) so the admin sees a
   visual handshake: "this button puts you into the teal preview state". White icon + label
   for AA contrast on the saturated teal. */
.eem-checklist-dialog-preview-btn.rz-button {
  background-color: #76B8B7 !important;
  border-color: #5a9b9a !important;
  color: #ffffff !important;
}

.eem-checklist-dialog-preview-btn.rz-button .rz-button-icon,
.eem-checklist-dialog-preview-btn.rz-button .rzi {
  color: #ffffff !important;
}

.eem-checklist-dialog-preview-btn.rz-button:hover:not(:disabled),
.eem-checklist-dialog-preview-btn.rz-button:focus-visible:not(:disabled) {
  background-color: #5a9b9a !important;
  border-color: #4d8786 !important;
  color: #ffffff !important;
}

.eem-checklist-dialog-preview-btn.rz-button:hover:not(:disabled) .rz-button-icon,
.eem-checklist-dialog-preview-btn.rz-button:hover:not(:disabled) .rzi,
.eem-checklist-dialog-preview-btn.rz-button:focus-visible:not(:disabled) .rz-button-icon,
.eem-checklist-dialog-preview-btn.rz-button:focus-visible:not(:disabled) .rzi {
  color: #ffffff !important;
}

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

/* Toolbar (Add rule) is fixed at the top of the panel; the rules list
   below it is the actual scroll container. Without flex+min-height+overflow
   the <ul> lays out at its natural height and the parent (overflow:hidden)
   clips the bottom rules with no way to reach them. */
.jbf-event-checklist-fullscreen .eem-rules-panel.jbf-rb .eem-rules-toolbar {
  flex: 0 0 auto;
}

.jbf-event-checklist-fullscreen .eem-rules-panel.jbf-rb .jbf-rb-rule-list {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: 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;
}

/* Payout rate Value: compact percent input (not full row width) */
.jbf-rb-panel .jbf-payout-rate-pct-numeric {
  max-width: 5.5rem;
  width: 100%;
  flex: 0 1 auto;
}

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

/*
 * Sticky footer slot inside .eem-section-card. Sits below
 * .eem-section-card-body (which is the flex:1 scroll region) and pins the
 * primary save action to the bottom of the card so it stays visible even when
 * the body content scrolls. Used on tabs whose lists can grow tall (Payout
 * Methods today; future home for any tab whose save button shouldn't scroll
 * away).
 */
.eem-section-card-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--cum-border, #e6e8e9);
  background: var(--cum-card, #fff);
  position: relative;
  z-index: 1;
}

/* 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:
    28px /* drag */
    36px /* on */
    minmax(110px, 1.2fr) /* method */
    minmax(118px, 0.85fr) /* type */
    minmax(78px, 0.5fr) /* % amt */
    minmax(88px, 0.55fr) /* $ amt */
    minmax(120px, 1.3fr); /* description */
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
}

/* Allow the table itself to scroll horizontally when the dialog gets very
   narrow rather than letting the grid wrap into broken stacked rows. The
   parent wrap is widened to 1100px so the 7-column layout can breathe at
   typical desktop dialog sizes. */
.eec-payout-table {
  overflow-x: auto;
}

.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.
   At true mobile widths the 7-column grid is impractical even with horizontal
   scroll; collapse to a stacked card per row so each method's controls flow
   under the method name instead of wrapping mid-row. */
@media (max-width: 560px) {
  .eec-payout-row,
  .eec-payout-row--head {
    grid-template-columns: 28px 36px 1fr;
    grid-auto-rows: auto;
  }

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

  .eec-payout-row > *:nth-child(n + 4) {
    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-team-shift-radio-row {
  margin-top: 4px;
}

.eem-team-shift-limit-inline {
  align-items: center;
}

.eem-team-shift-limit-numeric {
  max-width: 3.75rem;
  width: 3.75rem;
  min-width: 2.75rem;
}

.eem-team-shift-limit-hint {
  margin-top: 8px;
}

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

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

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

/* Inline strip rendered after the Segments / Profiles filters when the user
   has narrowed the schedule list to the Website segment type. Mirrors the
   visual weight of the surrounding filter controls so it reads as part of the
   toolbar, not a banner. The "Posted schedule is up-to-date" copy is muted;
   "Post Updates to Website" stands out as a link with the same color as the
   rest of the editor's primary action affordances. */
.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters .eem-website-publish-status {
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  gap: 10px;
  margin-left: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--tsb-line-soft, #f4eff8);
  font-size: 0.85rem;
  line-height: 1.2;
  white-space: nowrap;
}

.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters .eem-website-publish-status__current {
  color: var(--tsb-muted, #6f6178);
  font-weight: 500;
}

.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters .eem-website-publish-status__stale {
  color: var(--jbf-primary, #6b2c91);
  font-weight: 600;
  text-decoration: underline;
}

.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters .eem-website-publish-status__stale:hover,
.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters .eem-website-publish-status__stale:focus {
  text-decoration: underline;
  filter: brightness(0.92);
}

/* "View Website Settings" — the always-on jump to /local-website/event-info.
   Rendered side-by-side with the publish-status label / Post Updates link
   so the strip reads "<status> · View Website Settings". Pseudo-element
   separator is bullet-shaped instead of a real character so it doesn't
   confuse screen readers (the leading anchor still announces its own text). */
.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters .eem-website-publish-status__view {
  position: relative;
  padding-left: 10px;
  color: var(--jbf-primary, #6b2c91);
  font-weight: 600;
  text-decoration: underline;
}

.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters .eem-website-publish-status__view::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--tsb-muted, #6f6178);
  transform: translateY(-50%);
}

.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters .eem-website-publish-status__view:hover,
.jbf-event-checklist-fullscreen .eem-ts-toolbar-filters .eem-website-publish-status__view:focus {
  text-decoration: underline;
  filter: brightness(0.92);
}

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

/* ─────────────────────────────────────────────────────────────────────────
   Event Info → Photos sub-tab
   Per-event gallery editor that backs the EventSummary header carousel.
   The list rows themselves use the global wdre-* + lws-ci-* classes from
   local-website.css (which is registered in App.razor) so the visual
   treatment is identical to the Local Website Photo Gallery. The rules
   below only patch in the bits that are specific to this surface. */
.eem-event-photo-section {
  position: relative;
  /* The loading overlay needs a positioned parent to center on. */
}

/* Picker host -- ImageUploadWithCrop renders an empty trigger when
   AutoOpen=true because the ImagePickerDialog is the actual surface. We
   collapse the placeholder to zero footprint so it doesn't push the
   list/Add-button layout around while the dialog is mounted. */
.eem-event-photo-add-form {
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

/* ── Event Setup → Schedule → Calendar view ──────────────────────
   The Calendar tab hosts a RadzenScheduler that previously created
   one chip per (segment × time block) pair, which made the segment
   title visually repeat for every block. The new appointment
   projection emits ONE chip per segment per day with the segment
   title rendered once and the time blocks listed inside the chip
   via the appointment Template.

   Radzen's MonthView sets chip top + height as INLINE styles per
   band (top: (band + 1) * 1.5rem; height: 1.5rem), so overriding
   them requires !important. We force chips to grow to fit content
   (segment title + the block list), allow text to wrap, and use
   z-index by source order so later chips stack visually on top
   when bands overlap on a busy day. With one chip per segment
   (instead of one per block) the typical day rarely has more than
   one or two chips, so the layout stays clean. */
.eem-ts-cal-host .rz-event {
  height: auto !important;
  min-height: 1.5rem;
  white-space: normal;
  align-items: flex-start;
  padding: 0 1px 1px 1px;
  z-index: 2;
}

.eem-ts-cal-host .rz-event:focus,
.eem-ts-cal-host .rz-event:hover {
  z-index: 5;
}

/* Lift chip content out of the strict 1.25rem line-height that
   Radzen's --rz-scheduler-event-line-height normally enforces, so
   our wrapped title + block list aren't clipped to one band. */
.eem-ts-cal-host .rz-event-content {
  height: auto;
  line-height: 1.2;
  padding: 4px 6px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.eem-cal-appt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
  line-height: 1.2;
  font-size: 0.75rem;
  color: inherit;
}

.eem-cal-appt__title {
  font-weight: 600;
  white-space: normal;
  overflow-wrap: anywhere;
}

.eem-cal-appt__blocks {
  list-style: none;
  margin: 2px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.eem-cal-appt__blocks > li {
  font-size: 0.7rem;
  opacity: 0.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────────────────
   Unified Event Rules grid (Event Setup → Rules).
   Top-level grid + section dropdown filter that lists EVERY rule on the event
   across all section_keys, plus the TypePicker step in the right-panel wizard
   and section badges used by both the grid and the type picker.
   ───────────────────────────────────────────────────────────────────── */

/* Grid host wrapper. Inherits .eem-rules-panel + .jbf-rb panel-open behaviour
   from the existing rule-builder rules so when the right editor slides in,
   the grid surface shrinks the same way the card list does. */
.eem-rules-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Toolbar row above the grid: right-aligned [Add rule, Refresh].
   Search and section dropdown live on the filter-bar row below. */
.eem-rules-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.eem-rules-grid-toolbar-end {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eem-rules-grid-search {
  min-width: 220px;
}

/* Filter bar: [Search]  [Section dropdown]
   Two-region row so search anchors on the left and the section filter sits
   beside it. On narrow screens both controls stack and stay full width. */
.eem-rules-filter-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--cum-border, #e6e8e9);
}

.eem-rules-filter-bar-search {
  flex: 0 0 auto;
}

.eem-rules-filter-bar-section {
  flex: 0 0 auto;
}

.eem-rules-section-filter {
  min-width: 220px;
}

@media (max-width: 720px) {
  .eem-rules-filter-bar-search,
  .eem-rules-filter-bar-search .eem-rules-grid-search,
  .eem-rules-filter-bar-section,
  .eem-rules-filter-bar-section .eem-rules-section-filter {
    flex: 1 1 100%;
    width: 100%;
  }
}

/* Section badge used by the grid Section column AND (via .jbf-rb-type-card[data-tone])
   the right-panel type-picker cards. Tones are stable strings emitted by
   RuleSectionRegistry.GetBadgeTone(). Falls back to "global" tone for unknown keys. */
.eem-rules-section-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  background: var(--cum-muted-bg, #f3eef4);
  color: var(--cum-foreground, #1a1a1a);
  border: 1px solid transparent;
  white-space: nowrap;
}

/* Per-tone background hints. Kept subtle so the table remains scannable.
   Tones come from RuleSectionRegistry: tickets, questions, fees, schedule,
   coupons, catalog, tagging, team, payout, waivers, instructions, global. */
.eem-rules-section-badge[data-tone="tickets"]      { background: #fef0e6; color: #8a4a1a; }
.eem-rules-section-badge[data-tone="questions"]    { background: #e8f1fd; color: #1f4a8a; }
.eem-rules-section-badge[data-tone="fees"]         { background: #fdf3e0; color: #8a6a1a; }
.eem-rules-section-badge[data-tone="schedule"]     { background: #e6f5ef; color: #1a6a4a; }
.eem-rules-section-badge[data-tone="coupons"]      { background: #fde8f1; color: #8a1a5a; }
.eem-rules-section-badge[data-tone="catalog"]      { background: #eef0fd; color: #2a3a8a; }
.eem-rules-section-badge[data-tone="tagging"]      { background: #f0e8fd; color: #4a1a8a; }
.eem-rules-section-badge[data-tone="team"]         { background: #e7eef7; color: #1a4a7a; }
.eem-rules-section-badge[data-tone="payout"]       { background: #e6f0e6; color: #1a5a1a; }
.eem-rules-section-badge[data-tone="waivers"]      { background: #f7e6e6; color: #7a1a1a; }
.eem-rules-section-badge[data-tone="instructions"] { background: #e6f7f7; color: #1a6a7a; }
.eem-rules-section-badge[data-tone="global"]       { background: #efeff2; color: #4a4a4a; }

/* Grid table - Name column behaves like a link for the edit affordance. */
.eem-rules-grid-name-link {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: var(--jbf-rb-primary, #7a3d8e);
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}

.eem-rules-grid-name-link:hover {
  text-decoration: underline;
}

.eem-rules-grid-preview {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
  opacity: 0.85;
}

.eem-rules-grid-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

/* ── TypePicker step (Step 1 of the Add wizard) ──────────────────────────
   Card grid shown when the right-panel editor launches without a preselected
   section. Each card reuses the same data-tone palette as the section badge.
   Layout matches .jbf-rb-tpl-grid in spirit but with denser content. */
.jbf-rb-type-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

@media (max-width: 520px) {
  .jbf-rb-type-grid {
    grid-template-columns: 1fr;
  }
}

.jbf-rb-type-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  text-align: left;
  border: 1px solid #e8e8e8;
  border-left: 3px solid #ccc;
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  background: #fff;
  font: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}

.jbf-rb-type-card:hover {
  border-color: var(--jbf-rb-primary, #7a3d8e);
  background: var(--jbf-rb-light-bg, #faf7fb);
}

.jbf-rb-type-card:active {
  transform: translateY(1px);
}

.jbf-rb-type-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
}

.jbf-rb-type-desc {
  display: block;
  font-size: 12px;
  color: #777;
  line-height: 1.45;
}

.jbf-rb-type-card[data-tone="tickets"]      { border-left-color: #e07a30; }
.jbf-rb-type-card[data-tone="questions"]    { border-left-color: #3a72d0; }
.jbf-rb-type-card[data-tone="fees"]         { border-left-color: #d09f30; }
.jbf-rb-type-card[data-tone="schedule"]     { border-left-color: #2da27a; }
.jbf-rb-type-card[data-tone="coupons"]      { border-left-color: #c83a8a; }
.jbf-rb-type-card[data-tone="catalog"]      { border-left-color: #4757c5; }
.jbf-rb-type-card[data-tone="tagging"]      { border-left-color: #7a3dc5; }
.jbf-rb-type-card[data-tone="team"]         { border-left-color: #2f6aaf; }
.jbf-rb-type-card[data-tone="payout"]       { border-left-color: #3a8a3a; }
.jbf-rb-type-card[data-tone="waivers"]      { border-left-color: #b03a3a; }
.jbf-rb-type-card[data-tone="instructions"] { border-left-color: #2da8b8; }
.jbf-rb-type-card[data-tone="global"]       { border-left-color: #888; }