/* 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: 4px 8px;
  margin: 0;
  height: 32px;
  display: flex;
  align-items: center;
}

.tagify--empty .tagify__input::before {
  position: static;
  line-height: 24px;
  font-size: 16px;
}

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

.lexxy-content ul {
  list-style: disc;
  padding-inline-start: 1.5rem;
}

.lexxy-content ol {
  list-style: decimal;
  padding-inline-start: 1.5rem;
}

.lexxy-content ul ul,
.lexxy-content ol ul {
  list-style: circle;
}

.lexxy-content ol ol,
.lexxy-content ul ol {
  list-style: lower-latin;
}

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

/* 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 */
[data-seating-dnd-target="seatList"][data-full="true"] {
  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 {
  transition: none;
}

/* Question card base transition for smooth DnD */
[data-form-builder-dnd-target="question"] {
  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 {
  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;
}

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

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

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

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

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