/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ── Flash message animations ── */
@keyframes flashSlideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.flash-animate {
  animation: flashSlideIn 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}

.flash-animate.hiding {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* ── Micro interactions ── */

/* Card lift on hover */
.mkt-card {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mkt-card:hover {
  transform: translateY(-1px);
}

/* List item highlight animation (for new items added via Turbo) */
@keyframes highlightNew {
  from { background-color: rgb(247 250 247 / 0.85); }
  to { background-color: transparent; }
}

.highlight-new {
  animation: highlightNew 1.5s ease-out;
}

/* Skeleton pulse for lazy-loaded content */
@keyframes skeletonPulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

.skeleton-pulse {
  animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* Smooth tab content transitions */
.tab-content-enter {
  animation: fadeIn 0.15s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dropdown smooth open */
@keyframes dropdownOpen {
  from { opacity: 0; transform: scale(0.95) translateY(-4px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.dropdown-enter {
  animation: dropdownOpen 0.15s ease-out;
}

/* ── Trix Editor Fixes ── */
.trix-button-group button svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

/* ── Global Resets ── */
*:focus {
  outline: none;
}

html, body {
  height: 100%;
}

/* ── Inline Option Code ── */
.inline-option-code {
  background-color: var(--color-code-bg);
  border: 1px solid var(--color-code-border);
  color: var(--color-code-text);
  border-radius: 0.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 0.9em;
  padding: 0.05em 0.35em;
}

/* ── Multi-column Rule ── */
.column-rule {
  column-rule: 1px solid var(--color-code-border);
}

/* ── Sortable Styles ── */
.sortable-question {
  transition: background-color 0.15s, transform 0.1s, box-shadow 0.15s;
}

.sortable-question.sortable-drag {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

.sortable-handle {
  transition: opacity 0.15s, color 0.15s;
}

.position-jump-input::-webkit-outer-spin-button,
.position-jump-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ── Compact Question Rows ── */
.compact-question-row {
  padding-top: 0.05rem !important;
  padding-bottom: 0.05rem !important;
}

.compact-question-row .question-text {
  font-size: 0.75rem;
  line-height: 1.2;
  margin: 0;
}

.compact-question-row .position-badge {
  height: 1.25rem;
  width: 1.25rem;
  font-size: 0.68rem;
}