/* Pagination rounded corners for first/last items */
nav[aria-label="pagination"] > *:first-child {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

nav[aria-label="pagination"] > *:last-child {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

/* Component imports */
[data-slot="toggle-field"] {
  align-items: center !important;
}

/* Missing Tailwind grid column span classes */
.col-span-5 {
  grid-column: span 5 / span 5;
}

.col-span-7 {
  grid-column: span 7 / span 7;
}

.col-span-8 {
  grid-column: span 8 / span 8;
}

/* Custom text size for 10px (smaller than text-xs) */
.text-2xs {
  font-size: 10px;
  line-height: 14px;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

body:has(remote-modal-container div[aria-modal="true"]) [drawer-backdrop] {
  z-index: 32;
}

tags.tagify {
  border-radius: 5px;
  outline-style: var(--tw-outline-style);
  outline-width: 1px;
  outline-color: var(--color-gray-300);
  border: none !important;
}

tags.tagify .tagify__input {
  padding: 0;
  margin: 0;
}

.tagify--empty .tagify__input::before {
  position: static;
}

/* Keep typeahead dropdowns from resizing or scroll-anchoring the session modal. */
.session-form-modal-body {
  overflow-anchor: none;
}

.session-form-modal-body .tagify__dropdown__wrapper {
  max-height: 18rem !important;
  overscroll-behavior: contain;
}

/* app/assets/stylesheets/application.css */
.badge-container {
}

.badge-preview {
  width: 100%;
  aspect-ratio: attr(data-aspect-ratio);
  max-width: 100%;
  height: auto;
}

.badge-preview.flipped {
  transform: scaleX(-1) scaleY(-1);
}

@media (max-width: 768px) {
  .badge-container {
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .badge-container {
    max-width: 250px;
  }
}

[class*="[&>input]:mt-[0.15em]"] > input {
  margin-top: 0 !important;
}

/* Override Tailwind form styles so Lexxy's language picker keeps its inline size */
.lexxy-code-language-picker {
  display: inline-flex;
  width: auto;
}

/* Keep comment mention lookup anchored inside the compact comment editor.
   Lexxy positions prompt menus at the typed caret by default, which can place
   the menu far below the small comment box after scrolling through long
   comment threads. Docking the menu below the toolbar makes @mentions easier
   to discover and keeps the lookup visually attached to the comment field. */
lexxy-editor.comment-editor {
  position: relative;
}

lexxy-editor.comment-editor .lexxy-prompt-menu {
  top: 2.75rem !important;
  left: 0.5rem !important;
  right: 0.5rem !important;
  z-index: 20;
  width: auto !important;
  max-height: calc(100% - 3.25rem);
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  list-style: none;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

lexxy-editor.comment-editor .lexxy-prompt-menu__item {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0.5rem 0.625rem;
  list-style: none;
  border-radius: 0.5rem;
}

lexxy-editor.comment-editor .lexxy-prompt-menu__item::marker {
  content: "";
}

lexxy-editor.comment-editor .lexxy-prompt-menu__item [class*="truncate"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* YouTube embeds inserted by the global Lexxy YouTube extension */
lexxy-editor .lexxy-youtube-embed {
  display: block;
  margin: 0.75rem 0;
  padding: 0.875rem 1rem 0.875rem 2.75rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #f9fafb;
  color: #111827;
  text-decoration: none;
  position: relative;
}

lexxy-editor .lexxy-youtube-embed a {
  color: inherit;
  text-decoration: none;
}

lexxy-editor .lexxy-youtube-embed::before {
  content: "▶";
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #dc2626;
}

.youtube-embed-dropdown__content {
  width: min(360px, calc(100vw - 2rem));
  padding: 0 !important;
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 0.875rem;
  background: #fff;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.16), 0 4px 12px rgba(15, 23, 42, 0.08);
}

.youtube-embed-dropdown__form {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem;
}

.youtube-embed-dropdown__header {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.youtube-embed-dropdown__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: #fee2e2;
  color: #dc2626;
}

.youtube-embed-dropdown__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.25rem;
  color: #111827;
}

.youtube-embed-dropdown__hint {
  margin: 0.125rem 0 0;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #6b7280;
}

.youtube-embed-dropdown__input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  border: 1px solid #cbd5e1;
  border-radius: 0.625rem;
  padding: 0.625rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
  background: #fff;
}

.youtube-embed-dropdown__input:focus {
  border-color: #2563eb;
  outline: 3px solid rgba(37, 99, 235, 0.18);
  outline-offset: 0;
}

.youtube-embed-dropdown__error {
  margin: -0.375rem 0 0;
  font-size: 0.75rem;
  line-height: 1rem;
  color: #dc2626;
}

.youtube-embed-dropdown__button {
  width: 100%;
  border-radius: 0.625rem;
  background: #2563eb;
  color: #fff;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-align: center;
}

.youtube-embed-dropdown__button:hover {
  background: #1d4ed8;
}

.lexxy-content .lexxy-youtube-embed {
  margin: 1rem 0;
}

.lexxy-content .lexxy-youtube-embed__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0.75rem;
  background: #000;
}

.lexxy-content .lexxy-youtube-embed__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Keep Lexxy editor rhythm aligned with public rich-text rendering. */
lexxy-editor p,
.lexxy-content p {
  line-height: 1.55;
  margin: 0 0 0.5rem;
}

/* Notification email Lexxy editors should match real sent email body text (14px). */
lexxy-editor.confirmation-email-editor,
lexxy-editor.notification-email-editor,
lexxy-editor[preset="email"],
lexxy-editor.confirmation-email-editor .lexxy-editor__content,
lexxy-editor.notification-email-editor .lexxy-editor__content,
lexxy-editor[preset="email"] .lexxy-editor__content,
lexxy-editor.confirmation-email-editor .lexxy-editor__content p,
lexxy-editor.notification-email-editor .lexxy-editor__content p,
lexxy-editor[preset="email"] .lexxy-editor__content p,
lexxy-editor.confirmation-email-editor .lexxy-editor__content li,
lexxy-editor.notification-email-editor .lexxy-editor__content li,
lexxy-editor[preset="email"] .lexxy-editor__content li {
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #374151;
}

lexxy-editor p:last-child,
.lexxy-content p:last-child {
  margin-bottom: 0;
}

lexxy-editor ul,
.lexxy-content ul,
lexxy-editor ol,
.lexxy-content ol {
  margin-bottom: 0.5rem;
}


body::-webkit-scrollbar {
  width: 5px;
  background: transparent;
}

body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.overflow-y-auto::-webkit-scrollbar {
  width: 5px;
  background: transparent;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

/* Hide the scrollbar entirely. Used by horizontal chip rows
   (speakers filter pills, agenda day pills) where the scrollbar
   sat on top of the cards below. Webkit pseudo-element + Firefox
   property cover both engines. */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Portal Dark Theme - Form Styling */
.portal-theme-dark label,
.portal-theme-dark .text-gray-700,
.portal-theme-dark .text-gray-900 {
  color: rgba(226, 232, 240, 1) !important; /* slate-200 */
}

.portal-theme-dark .text-gray-500,
.portal-theme-dark .text-gray-600 {
  color: rgba(148, 163, 184, 1) !important; /* slate-400 */
}

.portal-theme-dark h2,
.portal-theme-dark h3 {
  color: white !important;
}

/* Portal Swiss Theme - Form Styling */
.portal-theme-swiss label,
.portal-theme-swiss .text-gray-700 {
  color: black !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  text-transform: uppercase;
  font-size: 0.75rem;
}

/* Portal Modern Theme (Teal/Neon) - Form Styling */
.portal-theme-modern label,
.portal-theme-modern .text-gray-700,
.portal-theme-modern .text-gray-900 {
  color: rgba(45, 212, 191, 1) !important; /* teal-400 */
}

.portal-theme-modern .text-gray-500,
.portal-theme-modern .text-gray-600 {
  color: rgba(148, 163, 184, 1) !important; /* slate-400 */
}

.portal-theme-modern h2,
.portal-theme-modern h3 {
  color: white !important;
}

.portal-theme-modern input:not([type="checkbox"]):not([type="radio"]),
.portal-theme-modern select,
.portal-theme-modern textarea {
  background-color: rgba(51, 65, 85, 0.5) !important; /* slate-700/50 */
  border-color: rgba(71, 85, 105, 0.5) !important; /* slate-600/50 */
  color: white !important;
}

.portal-theme-modern input::placeholder,
.portal-theme-modern textarea::placeholder {
  color: rgba(100, 116, 139, 1) !important; /* slate-500 */
}

.portal-theme-modern input:focus,
.portal-theme-modern select:focus,
.portal-theme-modern textarea:focus {
  border-color: rgba(20, 184, 166, 0.5) !important; /* teal-500/50 */
  --tw-ring-color: rgba(20, 184, 166, 0.3) !important;
}

/* RSVP Radio Button Styling for Modern Theme */
.rsvp-radio-confirm:checked + .rsvp-option-confirm {
  background-color: rgb(20, 184, 166) !important; /* teal-500 */
  color: white !important;
  border-color: transparent !important;
  box-shadow: 0 0 20px rgba(20, 184, 166, 0.4) !important;
}

.rsvp-radio-decline:checked + .rsvp-option-decline {
  background-color: rgb(244, 63, 94) !important; /* rose-500 */
  color: white !important;
  border-color: rgb(244, 63, 94) !important;
  box-shadow: 0 0 20px rgba(244, 63, 94, 0.4) !important;
}

/* ========================================
   Seating Drag and Drop Styles
   ======================================== */

/* Drop indicator - shows where item will be dropped */
.seating-drop-indicator {
  pointer-events: none;
  flex-shrink: 0;
}

/* Horizontal indicator for seat lists - card-sized drop zone */
.seating-drop-indicator--horizontal {
  height: 52px;
  width: 100%;
  margin: 4px 0;
  background-color: rgb(239, 246, 255) !important; /* blue-50 */
  border: 2px dashed rgb(59, 130, 246) !important; /* blue-500 */
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Vertical indicator for table reordering */
.seating-drop-indicator--vertical {
  width: 4px;
  height: 100%;
  margin: 0 4px;
  align-self: stretch;
  background-color: rgb(59, 130, 246); /* blue-500 */
  border-radius: 2px;
}

/* Dragging state - element being dragged */
.seating-dragging {
  opacity: 0.4;
  transform: scale(0.98);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Drop zone active highlight */
.seating-drop-active {
  background-color: rgb(239, 246, 255) !important; /* blue-50 */
  border-color: rgb(147, 197, 253) !important; /* blue-300 */
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Smooth transitions for reordering - prevents blink */
[data-seating-dnd-target="seat"],
[data-seating-dnd-target="table"] {
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease;
}

/* Remove transition during active drag to prevent lag */
[data-seating-dnd-target="seat"].seating-dragging,
[data-seating-dnd-target="table"].seating-dragging {
  transition: none;
}

/* Item hover during drag */
[data-seating-dnd-target="seat"].seating-drag-over,
[data-seating-dnd-target="table"].seating-drag-over {
  transform: scale(1.01);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Guest item during drag */
[data-seating-dnd-target="guest"].seating-dragging {
  opacity: 0.4;
  background-color: rgb(239, 246, 255);
}

/* Empty table placeholder enhancement */
.seating-empty-placeholder {
  transition: all 0.2s ease;
}

.seating-empty-placeholder.seating-drop-active {
  border-color: rgb(59, 130, 246) !important;
  background-color: rgb(239, 246, 255) !important;
  transform: scale(1.02);
}

/* Prevent layout shift during drag */
.seating-drop-spacer {
  transition: height 0.15s ease;
}

/* Full table disabled state - prevent drop.
   Only the kanban card (static) needs position:relative for the ::after overlay;
   the floor-plan table is already `absolute`, so don't override its placement. */
[data-seating-dnd-target="seatList"][data-full="true"]:not(.absolute) {
  position: relative;
}

[data-seating-dnd-target="seatList"][data-full="true"].seating-full-drag-over::after {
  content: attr(data-full-message);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(254, 243, 199, 0.95);
  border: 2px dashed rgb(245, 158, 11);
  border-radius: 0.5rem;
  color: rgb(180, 83, 9);
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 10;
  pointer-events: none;
}

/* ===========================================
   Form Builder DnD Styles
   =========================================== */

/* Drop indicator - shows where question will be dropped */
.form-builder-drop-indicator {
  height: 4px;
  width: 100%;
  margin: 6px 0;
  background-color: rgb(59, 130, 246); /* blue-500 */
  border-radius: 2px;
  pointer-events: none;
  position: relative;
}

.form-builder-drop-indicator::before,
.form-builder-drop-indicator::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: rgb(59, 130, 246);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.form-builder-drop-indicator::before {
  left: -4px;
}

.form-builder-drop-indicator::after {
  right: -4px;
}

/* Dragging state - question being dragged */
.form-builder-dragging {
  opacity: 0.4;
  transform: scale(0.98);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Remove transition during active drag to prevent lag */
[data-form-builder-dnd-target="question"].form-builder-dragging,
[data-survey-builder-dnd-target="item"].form-builder-dragging {
  transition: none;
}

/* Question card base transition for smooth DnD */
[data-form-builder-dnd-target="question"],
[data-survey-builder-dnd-target="item"] {
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Question card hover during drag - subtle lift effect */
[data-form-builder-dnd-target="question"].form-builder-drag-over,
[data-survey-builder-dnd-target="item"].form-builder-drag-over {
  transform: scale(1.005);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  border-color: rgb(147, 197, 253) !important; /* blue-300 */
}

/* List container active state when dragging over empty area */
.form-builder-list-active {
  background-color: rgb(239, 246, 255); /* blue-50 */
  border-radius: 0.75rem;
}

/* Event Info sortable list: match Form Builder field-order drag feedback */
.event-info-sortable-list .sortable-ghost {
  opacity: 0.4;
  transform: scale(0.98);
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0;
}

.event-info-sortable-list .sortable-chosen {
  box-shadow: none;
  transform: scale(0.98);
  z-index: auto;
}

.event-info-sortable-list .sortable-drag {
  background-color: white !important;
  border-radius: 0.5rem;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
}

/* ===========================================
   Section Mover DnD Styles (Email Sections)
   =========================================== */

.section-mover-drop-indicator {
  height: 4px;
  width: 100%;
  margin: 4px 0;
  background-color: rgb(59, 130, 246); /* blue-500 */
  border-radius: 2px;
  pointer-events: none;
  position: relative;
}

.section-mover-drop-indicator::before,
.section-mover-drop-indicator::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: rgb(59, 130, 246);
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.section-mover-drop-indicator::before {
  left: -4px;
}

.section-mover-drop-indicator::after {
  right: -4px;
}

.section-mover-dragging {
  opacity: 0.4;
  transform: scale(0.98);
}

[data-section-mover-target="section"].section-mover-dragging {
  transition: none;
}

/* Section List Sorter (left sidebar drag-sort) */

.section-list-drop-indicator {
  height: 2px;
  width: 100%;
  background-color: var(--color-primary-500);
}

.section-list-dragging {
  opacity: 0.4;
}

/* ===========================================
   SortableJS Drag and Drop Styles
   =========================================== */

/* Ghost element - placeholder where item will be dropped */
.sortable-ghost {
  opacity: 0.4;
  background-color: rgb(239, 246, 255) !important; /* blue-50 */
  border: 2px dashed rgb(59, 130, 246) !important; /* blue-500 */
  border-radius: 0.5rem;
}

/* Chosen element - the item being picked up */
.sortable-chosen {
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
  z-index: 50;
}

/* Drag element - the floating item being moved */
.sortable-drag {
  opacity: 1 !important;
  background-color: white !important;
  border-radius: 0.5rem;
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2), 0 10px 20px -5px rgba(0, 0, 0, 0.1);
}

/* Section rows contain a fixed edit drawer. SortableJS clones the entire row
   for its drag preview, so exclude that hidden editor chrome from the clone. */
.sortable-ghost [data-section-editor-chrome],
.sortable-chosen [data-section-editor-chrome],
.sortable-drag [data-section-editor-chrome],
.is-dragging [data-section-editor-chrome] {
  display: none !important;
}

/* Active dragging item */
.is-dragging {
  cursor: grabbing !important;
}

/* Body state while sorting - prevents text selection */
body.is-sorting {
  user-select: none;
  cursor: grabbing;
}

body.is-sorting * {
  cursor: grabbing !important;
}

/* Keep SortableJS from losing the mouseup/drop event to embedded or fixed widgets. */
body.is-sorting iframe,
body.is-sorting [data-controller~="feedback"],
body.is-sorting [data-controller~="frill-widget"] {
  pointer-events: none !important;
}

/* Frill injects its launcher/notifications at runtime. If its remote CSS misses
   during Turbo navigation, keep the injected DOM out of normal page flow. */
[data-controller~="frill-widget"] {
  position: fixed !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.Frill_Trigger_Floating,
.Frill_Trigger_Tab,
.Frill_Survey,
.Frill_View_Modal,
.Frill_View_Sidebar,
.Frill_Notification_Banner,
.Frill_Notification_Modal,
.Frill_Notification_Snippet {
  position: fixed !important;
  z-index: 99999;
}

.Frill_View_Modal:not(.Frill_View_Modal--open),
.Frill_View_Sidebar:not(.Frill_View_Sidebar--open),
.Frill_Notification_Banner:not(.Frill_Notification_Banner--open),
.Frill_Notification_Modal:not(.Frill_Notification_Modal--open),
.Frill_Notification_Snippet:not(.Frill_Notification_Snippet--open),
.Frill_Survey:not(.Frill_Survey--open) {
  display: none !important;
}

/* Children drop zone - min height when empty so items can be dropped in */
.children-drop-zone {
  min-height: 4px;
  padding-left: 1.25rem;
  transition: min-height 0.15s ease, background-color 0.15s ease;
}

.children-drop-zone:empty {
  min-height: 0;
  padding-left: 0;
}

body.is-sorting .children-drop-zone {
  min-height: 2.5rem;
  border: 1px dashed transparent;
  border-radius: 0.375rem;
  margin: 0.125rem 0.5rem 0.125rem 2rem;
}

body.is-sorting .children-drop-zone:empty {
  min-height: 2.5rem;
  padding-left: 1.25rem;
  border-color: rgb(209, 213, 219);
  background-color: rgb(249, 250, 251);
}

/* Sortable items base transition */
[data-sortable-list-target="item"] {
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

body.is-sorting [data-sortable-list-target="item"] {
  will-change: transform;
}

/* Drag handle cursor */
[data-sortable-list-target="handle"] {
  cursor: grab;
  touch-action: none;
}

[data-sortable-list-target="handle"]:active {
  cursor: grabbing;
}

.tagify--sortable .tagify__tag {
  cursor: grab;
  touch-action: none;
}

.tagify--sortable .tagify__tag:active {
  cursor: grabbing;
}

.tagify--sortable .tagify__tag__removeBtn,
.tagify--sortable .tagify__input {
  cursor: auto;
}