/* ==================================
   Interactive Features - Milestone 4
   Campaign Wizard, Enhanced Modals, Search/Filter
   ================================== */

/* Only apply these styles in modern mode */
.modern-mode .interactive-features-enabled,
body[data-interface-mode='modern'] {
  /* Enable interactive features */
}

/* ==================================
   CAMPAIGN WIZARD
   ================================== */

.campaign-wizard {
  max-width: 800px;
  margin: 0 auto;
  padding: 0.75rem 1.5rem;        /* tightened from 1.25rem 2rem to reclaim vertical space */
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  /* Flex column so wizard-navigation stays pinned at the bottom */
  display: flex;
  flex-direction: column;
  /* -120px accounts for the page header + "Start a New Campaign" heading +
     stepper above the wizard (~100px observed on default viewport) so the
     Next button always sits inside the viewport at 1280x800 and 390x844. */
  }
}

/* Scrollable step content — wizard-navigation always stays below it */
.wizard-content {
  height: 100%;
  overflow-y: auto;
  min-height: 0;
  padding-right: 4px; /* prevent scrollbar from clipping content */
}

.wizard-navigation {
  flex-shrink: 0;
  margin-top: 0.5rem;             /* tightened from 1rem */
  padding-top: 0.5rem;            /* tightened from 1rem */
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Wizard Progress */
.wizard-progress {
  margin-bottom: 0.75rem;          /* tightened from 2rem */
}

.wizard-progress .progress {
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  overflow: hidden;
}

.wizard-progress .progress-bar {
  background: linear-gradient(45deg, #007bff, #0056b3);
  transition: width 0.3s ease;
}

/* Step Indicators */
.step-indicators {
  margin-top: 0.25rem;             /* tightened from 1rem */
}

.step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.step-circle {
  width: 32px;                     /* tightened from 40px */
  height: 32px;                    /* tightened from 40px */
  border-radius: 50%;
  background: #e9ecef;
  border: 2px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;                 /* tightened from 14px */
  color: #6c757d;
  transition: all 0.3s ease;
  margin-bottom: 0.25rem;          /* tightened from 0.5rem */
}

.step-label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
  text-align: center;
}

.step-indicator.active .step-circle {
  background: #007bff;
  border-color: #007bff;
  color: white;
  transform: scale(1.1);
}

.step-indicator.active .step-label {
  color: #007bff;
  font-weight: 600;
}

.step-indicator.completed .step-circle {
  background: #28a745;
  border-color: #28a745;
  color: white;
}

.step-indicator.completed .step-label {
  color: #28a745;
}

.step-indicator:hover .step-circle {
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(0, 123, 255, 0.3);
}

/* Wizard Steps */
.wizard-step {
  display: none;
  animation: fadeInUp 0.4s ease;
}

.wizard-step.active {
  display: block;
}

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

.step-title {
  color: #2c3e50;
  margin-bottom: 0.25rem;          /* tightened from 0.5rem */
  font-size: 1.35rem;              /* slightly smaller (1.5rem → 1.35rem) */
  font-weight: 600;
}

.step-description {
  color: #6c757d;
  margin-bottom: 0.5rem;           /* tightened from 0.75rem */
  font-size: 0.95rem;              /* slightly smaller (1rem → 0.95rem) */
}

/* Personality Cards */
.personality-card {
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  cursor: pointer;
  height: 100%;
}

.personality-card:hover {
  border-color: #007bff;
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 123, 255, 0.15);
}

.personality-card.selected {
  border-color: #007bff;
  background-color: rgba(0, 123, 255, 0.05);
}

.personality-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.personality-card .card-title {
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

.personality-card .card-text {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Campaign Type Cards */
.campaign-type-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;                    /* tightened from 1rem */
  margin-bottom: 0.75rem;          /* tightened from 1.5rem */
}

.campaign-type-card {
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  background: rgba(255, 255, 255, 0.5);
}

.campaign-type-card:hover {
  border-color: #007bff;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.15);
}

.campaign-type-card.selected {
  border-color: #007bff;
  background: rgba(0, 123, 255, 0.05);
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
}

.campaign-type-card input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.campaign-type-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  cursor: pointer;
  margin: 0;
}

.campaign-type-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.campaign-type-content h5 {
  margin: 0 0 0.25rem 0;
  color: #2c3e50;
  font-weight: 600;
}

.campaign-type-content p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.4;
}

/* Option Cards */
.option-card {
  border: 1px solid #e9ecef;
  transition: all 0.3s ease;
  height: 100%;
}

.option-card:hover {
  border-color: #007bff;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
}

.option-icon {
  font-size: 2rem;
  color: #007bff;
}

.option-card .card-title {
  color: #2c3e50;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}

.option-card .card-text {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Campaign Preview */
.campaign-preview {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border: none;
  margin-bottom: 0.75rem;
}

.campaign-preview .card-title {
  color: #2c3e50;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.preview-item {
  margin-bottom: 0.25rem;
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.preview-item:last-child {
  border-bottom: none;
}

.preview-item strong {
  color: #495057;
  margin-right: 0.5rem;
}

/* Editable Preview Items */
.editable-preview {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 6px;
  transition: background-color 0.2s ease;
}

.editable-preview:hover {
  background-color: rgba(0, 123, 255, 0.05);
}

.editable-preview .preview-value {
  flex: 1;
  word-break: break-word;
}

.editable-preview .edit-btn {
  opacity: 0;
  padding: 0.25rem 0.5rem;
  color: #6c757d;
  transition: opacity 0.2s ease;
}

.editable-preview:hover .edit-btn {
  opacity: 1;
}

.editable-preview .edit-btn:hover {
  color: #007bff;
}

.editable-preview .edit-input {
  flex: 1;
  min-width: 0;
}

.editable-preview .edit-checkboxes {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.editable-preview.editing {
  background-color: rgba(0, 123, 255, 0.1);
  border: 1px solid rgba(0, 123, 255, 0.3);
}

.editable-preview.editing .preview-value,
.editable-preview.editing .edit-btn {
  display: none;
}

/* Launch Actions */
.launch-actions .btn {
  padding: 0.75rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
  transition: all 0.3s ease;
}

.launch-actions .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

/* Wizard Navigation (flex-shrink: 0, margin-top, padding-top, and border-top
   are all set above in the unified .wizard-navigation block at the top of
   this file. The duplicate rule that lived here before commit
   195cb7c7c1bb1176c2e8819aa9f912b29746c9d3 is intentionally deleted — it
   shadowed the unified rule due to source-order cascade and re-introduced
   padding-top:1rem + border-top:#e9ecef that were no longer wanted.) */
.step-counter {
  color: #6c757d;
  font-weight: 500;
  font-size: 0.9rem;
}

.wizard-navigation .btn {
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.wizard-navigation .btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

/* ==================================
   ENHANCED MODALS
   ================================== */

.modern-mode .modal-dialog {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.modern-mode .modal-content {
  border: none;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}

.modern-mode .modal-header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

.modern-mode .modal-title {
  font-weight: 600;
  color: #2c3e50;
}

.modern-mode .modal-body {
  padding: 2rem;
}

.modern-mode .modal-footer {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
}

/* Enhanced Modal Animations */
.modern-mode .modal.fade .modal-dialog {
  transform: scale(0.8) translateY(-50px);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modern-mode .modal.show .modal-dialog {
  transform: scale(1) translateY(0);
}

/* ==================================
   SEARCH AND FILTER
   ================================== */

.search-filter-container {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.search-box {
  position: relative;
  margin-bottom: 1rem;
}

.search-box .form-control {
  border-radius: 25px;
  padding: 0.75rem 1rem 0.75rem 2.5rem;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
  font-size: 1rem;
}

.search-box .form-control:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
  transform: scale(1.02);
}

.search-box .search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  z-index: 5;
}

.filter-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-group label {
  font-weight: 500;
  color: #495057;
  margin-bottom: 0;
  font-size: 0.9rem;
}

.filter-select {
  border-radius: 6px;
  border: 1px solid #e9ecef;
  padding: 0.5rem 0.75rem;
  transition: all 0.3s ease;
  min-width: 120px;
}

.filter-select:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.15);
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.filter-tag {
  background: #007bff;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 15px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.filter-tag .remove-tag {
  cursor: pointer;
  font-weight: bold;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.filter-tag .remove-tag:hover {
  opacity: 1;
}

/* Campaign List Enhancements */
.modern-mode .campaign-item {
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  margin-bottom: 0.75rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
}

.modern-mode .campaign-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
  border-color: #007bff;
}

/* Mobile campaign title improvements */
.campaign-title-link {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
  .list-group-item .campaign-title-link {
    font-size: 1.1rem;
    line-height: 1.3;
  }
}

.campaign-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  color: #6c757d;
}

.campaign-tags {
  display: flex;
  gap: 0.25rem;
}

.campaign-tag {
  background: #e9ecef;
  color: #495057;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: 500;
}

/* ==================================
   CHECKBOX AND FORM ALIGNMENT
   ================================== */

/* Fix checkbox alignment issues */
input[type='checkbox'] {
  vertical-align: middle;
  margin-right: 0.5rem;
  margin-top: -2px; /* Fine-tune vertical alignment */
}

.form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.form-check-input {
  margin-top: 0;
  margin-right: 0.5rem;
  vertical-align: baseline;
  position: static;
}

.form-check-label {
  margin-bottom: 0;
  line-height: 1.5;
  vertical-align: middle;
}

/* Ensure checkboxes in wizard are properly aligned */
.wizard-step input[type='checkbox'] {
  width: 1.2em;
  height: 1.2em;
  vertical-align: middle;
  margin-top: 0;
  margin-right: 0.75rem;
}

/* Bootstrap form-check overrides for better alignment */
.personality-card .form-check,
.option-card .form-check {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
}

.personality-card .form-check-input,
.option-card .form-check-input {
  margin-top: 0;
  margin-right: 0.5rem;
}

/* ==================================
   RESPONSIVE DESIGN
   ================================== */

@media (max-width: 768px) {
  .campaign-wizard {
    padding: 1rem;
    /* Reserve the browser's maximum chrome and safe-area headroom without
       relying on toolbar collapse or changing global page spacing. */
    padding-bottom: calc(
      1rem + max(0px, 100lvh - 100svh) + env(safe-area-inset-bottom, 0px)
    );
    margin: 1rem;
    max-height: none;
  }

  .wizard-content {
    overflow-y: visible;
  }

  .step-indicators {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .step-indicator .step-label {
    display: none;
  }

  .wizard-navigation {
    flex-direction: column;
    gap: 1rem;
  }

  .filter-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-group {
    flex-direction: column;
    align-items: stretch;
  }

  .campaign-type-cards {
    grid-template-columns: 1fr;
  }

  .campaign-type-label {
    flex-direction: column;
    text-align: center;
  }

  .campaign-type-icon {
    font-size: 2rem;
  }
}

/* ==================================
   GH-8015: Mobile scroll affordance + single-scroll-context
   Lives outside the @media block so the .wizard-scroll-indicator base
   styles (display:none on desktop) apply universally. The mobile-only
   visibility + sticky Next bar live inside the @media (max-width: 768px)
   block below.
   ================================== */

/* Hidden by default on all viewports. updateScrollIndicator() flips
   .is-visible on while content remains below the fold; CSS handles the
   transition. On desktop, even if a stray .is-visible class were added,
   the @media block below re-hides it. */
.wizard-scroll-indicator {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  /* Fade-out gradient masks content scrolling underneath the chevron so
     the affordance reads as a hint rather than a hard cut. The gradient
     color matches the wizard card background so the chevron visually
     dissolves into the sticky Next bar below. */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--secondary-bg, #fff) 0%, transparent) 0%,
    color-mix(in srgb, var(--secondary-bg, #fff) 85%, transparent) 50%,
    var(--secondary-bg, #fff) 100%
  );
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.wizard-scroll-indicator.is-visible {
  display: none;
  opacity: 1;
  transform: translateY(0);
}

.wizard-scroll-indicator__chevron {
  display: block;
  width: 14px;
  height: 14px;
  border-right: 2.5px solid var(--text-secondary, #495057);
  border-bottom: 2.5px solid var(--text-secondary, #495057);
  transform: rotate(45deg);
  /* Subtle vertical bounce animation signals "scroll down" without being
     noisy. Respects prefers-reduced-motion via the media query below. */
  animation: wizard-scroll-indicator-bounce 1.6s ease-in-out infinite;
}

.wizard-scroll-indicator__label {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--text-secondary, #495057);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

@keyframes wizard-scroll-indicator-bounce {
  0%, 100% {
    transform: rotate(45deg) translate(0, 0);
    opacity: 0.85;
  }
  50% {
    transform: rotate(45deg) translate(3px, 3px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-scroll-indicator__chevron {
    animation: none;
  }
  .wizard-scroll-indicator {
    transition: none;
  }
}

@media (max-width: 768px) {
  /* GH-8015: Make .wizard-content the scroll container AND the positioning
     anchor for .wizard-scroll-indicator. Without `position: relative` here,
     the absolute-positioned chevron positions relative to the page (or
     nearest positioned ancestor), not the scroll container — which is why
     the chevron was invisible on the AFTER screenshot even when JS
     correctly added .is-visible. The wizard-content-shell branch was
     removed; wizContent is again a direct child of .campaign-wizard, so
     the scroll container itself is the correct anchor.

     Inline styles set by applyMobileScrollLock() also enforce this — the
     CSS rule here is the static fallback for browsers where the JS helper
     hasn't run yet (e.g. raw HTML preview, Lighthouse pre-paint). */
  .wizard-content {
    position: relative;
    /* No internal scrollbar — let the page scroll handle below-the-fold
       content (matches the regression test's "single scroll context"
       contract for #8015/#8017). position:relative still anchors the
       .wizard-scroll-indicator chevron to the wizard content box. */
  }

  .wizard-scroll-indicator {
    position: fixed;
    bottom: 0;
    bottom: calc(0px + env(safe-area-inset-bottom, 0px));
    left: 0;
    right: 0;
    z-index: 40;
  }


  .wizard-scroll-indicator.is-visible {
    display: flex;
  }

  /* GH-8015: Navigation stays in normal flow on mobile so it scrolls with
     the page (regression test contract). The blur/border styles from the
     original PR are kept but the sticky positioning is dropped to avoid
     covering form fields at the bottom of the wizard. */
  .wizard-navigation {
    background: color-mix(in srgb, var(--secondary-bg, #fff) 96%, transparent);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0.75rem 0;
  }

  /* Compensate the wizard card's height so the navigation never crowds
     the last form field on short viewports. */
  .campaign-wizard {
    padding-bottom: 0.5rem;
  }
}

/* TV Show & Fictional IP Campaign Wizard Styling */
.wizard-universe-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
  margin-bottom: 0.75rem;
}

.wizard-universe-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.75rem;
  font-size: 0.825rem;
  border-radius: 20px;
  background: rgba(108, 117, 125, 0.15);
  border: 1px solid rgba(108, 117, 125, 0.3);
  color: #e2e8f0;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.wizard-universe-pill:hover {
  background: rgba(147, 51, 234, 0.25);
  border-color: rgba(168, 85, 247, 0.6);
  color: #ffffff;
  transform: translateY(-1px);
}

.wizard-universe-pill.active {
  background: rgba(147, 51, 234, 0.45);
  border-color: #a855f7;
  color: #ffffff;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.35);
}

.wizard-what-if-box {
  background: rgba(168, 85, 247, 0.08);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 8px;
  padding: 0.85rem;
  margin-bottom: 0.75rem;
}

.wizard-what-if-box .form-label {
  color: #c084fc;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.wizard-recommend-badge {
  font-size: 0.75rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  background: rgba(234, 179, 8, 0.2);
  color: #fde047;
  border: 1px solid rgba(234, 179, 8, 0.4);
  font-weight: 500;
}