/**
 * Builder Responsive v7.6.6
 * Extracted from team-builder.css (Sprint 6)
 *
 * Animation utility classes + all mobile/responsive breakpoints
 * for the builder system. Loaded last to ensure overrides work.
 *
 * Breakpoints: 768px (tablet), 600px (phone), 480px (small),
 *              360px (ultra-small), landscape orientation.
 *
 * Depends on: all builder-*.css files
 */

/* ========================================================
   ANIMATION UTILITY CLASSES
   Applied via JS for state feedback
   ======================================================== */

/* Item added animation - apply to cards when qty increases */
.anim-item-added {
  animation: itemAdded 0.3s ease-out;
}

/* Count bump animation - apply to qty displays when changed */
.anim-count-bump {
  animation: countBump 0.25s ease-out;
}

/* Button pulse when becoming active */
.anim-button-pulse {
  animation: buttonPulse 0.6s ease-out;
}

/* Review button when enabled */
.stats-bar-wrapper button:not(:disabled) {
  transition: all var(--transition-normal);
}

.stats-bar-wrapper button:not(:disabled):hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(184, 154, 87, 0.4);
}

/* Smooth transitions for card state changes */
.builder-card.has-qty {
  animation: itemAdded 0.25s ease-out;
}

/* Stats bar count animations */
.stat-value {
  transition: all var(--transition-fast);
}

/* Focus visible for all interactive elements */
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--gold-600);
  outline-offset: 2px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
/* ========================================================
   MOBILE OPTIMIZATION - GLOBAL
   Comprehensive mobile-first improvements for all builders
   ======================================================== */

/* 768px - Tablet */
@media (max-width: 768px) {
  /* Page padding */
  .team-builder-page {
    padding-bottom: 100px;
  }

  .team-builder-page .container {
    padding: 0 0.85rem;
  }

  /* Step headers */
  .step-header {
    margin-bottom: 1rem;
  }
  
  .step-title {
    font-size: 1.25rem;
  }
  
  .step-subtitle {
    font-size: 0.85rem;
  }

  /* Stage padding */
  .stage-padded {
    padding: var(--space-4);
  }

  /* Size cards */
  .size-card-head {
    padding: var(--space-4) 1rem 1rem;
    gap: var(--space-3);
  }
  
  .size-number {
    font-size: 3rem;
  }
  
  .size-main {
    font-size: 1.2rem;
  }
  
  .size-sub {
    font-size: 0.85rem;
  }
  
  .size-card-body {
    padding: 0 1rem 1rem;
  }
  
  .size-features li {
    font-size: 0.8rem;
  }
  
  .size-card-footer {
    padding: var(--space-3) 1rem;
  }

  .team-name-display {
    font-size: 1rem;
  }

  /* Stats bar - more compact */
  .stats-bar-inner {
    padding: var(--space-2) 0.75rem;
    gap: 0.65rem;
  }
  
  .stat-item {
    gap: var(--space-1);
  }
  
  .stat-label,
  .stat-item .stat-label,
  .price-stat .price-label {
    display: none;
  }
  
  .stat-value {
    font-size: 0.8rem;
  }
  
  .stat-remaining {
    display: none;
  }

  /* Star player cards */
  .star-input-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  
  .star-input-row label {
    min-width: auto;
  }
  
  .star-number-input {
    max-width: 100%;
  }
}

/* 480px - Mobile */
@media (max-width: 480px) {
  /* Size cards - compact */
  .size-cards {
    gap: var(--space-4);
  }
  
  .size-card-head {
    padding: var(--space-3) 0.75rem 0.75rem;
    gap: var(--space-2);
  }
  
  .size-number {
    font-size: 2.5rem;
  }
  
  .size-main {
    font-size: 1rem;
  }
  
  .size-sub {
    font-size: 0.75rem;
  }
  
  .size-card-body {
    padding: 0 0.75rem 0.75rem;
  }
  
  .size-features li {
    font-size: 0.75rem;
    gap: var(--space-2);
  }

  .team-name-display {
    font-size: 0.95rem;
  }

  /* Stats bar - minimal */
  .stats-bar-inner {
    padding: var(--space-2) 0.5rem;
    gap: var(--space-1);
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .stat-item {
    flex-direction: column;
    align-items: center;
    gap: 2px;
  }
  
  .stat-item i {
    font-size: 0.9rem;
  }
  
  .stat-label {
    font-size: 0.6rem;
  }
  
  .stat-value {
    font-size: 0.75rem;
  }
  
  .price-stat .price-value {
    font-size: 0.95rem;
  }
  
  .btn-review-order {
    padding: var(--space-2) 0.75rem;
    font-size: 0.7rem;
  }
  
  #btnReview {
    padding: var(--space-2) var(--space-3);
    font-size: 0.8rem;
  }
  
  #btnReview .btn-text {
    display: none;
  }
  
  #btnReview i {
    margin: 0;
  }

  /* Star player - single column layout */
  #stageStarPlayer .star-player-cards {
    grid-template-columns: 1fr;
  }
  
  .star-add-buttons {
    flex-direction: column;
    gap: var(--space-2);
  }
  
  .btn-star-add {
    flex-direction: row;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2);
  }
  
  .btn-star-add i {
    font-size: 1rem;
  }

  /* Intro screen - compact */
  .intro-background {
    height: 120px;
  }
  
  .intro-body {
    padding: var(--space-4) 1rem var(--space-4);
  }
  
  .intro-title {
    font-size: 1.5rem;
    margin-bottom: var(--space-2);
  }
  
  .intro-subtitle {
    font-size: 0.85rem;
  }
  
  .intro-card-header {
    padding: var(--space-2) 0.75rem;
    min-height: 40px;
  }
  
  .intro-card-title {
    font-size: 1rem;
    letter-spacing: 2px;
  }
}

/* ========================================================
   MOBILE OPTIMIZATION - MODALS
   Full-screen modals on mobile for better usability
   ======================================================== */
@media (max-width: 768px) {
  /* Modal overlay - tighter padding on tablet */
  .modal-overlay {
    padding: var(--space-3);
  }

  /* Modal content - near full width */
  .modal-content {
    max-width: 95vw;
    max-height: 85vh;
  }

  .modal-sm {
    max-width: 95vw;
  }

  .modal-lg {
    max-width: 95vw;
  }

  /* Modal header - compact */
  .modal-header {
    padding: var(--space-3);
  }

  .modal-header h3 {
    font-size: 0.9rem;
  }

  /* Modal body - reduced padding */
  .modal-body {
    padding: var(--space-3);
  }

  /* Modal footer - compact */
  .modal-footer {
    padding: var(--space-3);
    gap: var(--space-2);
    flex-wrap: wrap;
  }

  .modal-footer button {
    flex: 1;
    min-width: 100px;
  }

  /* Skill modal specific */
  .modal-skills-grid {
    max-height: 200px;
  }

  /* Roster skill modal adjustments */
  #rosterSkillModal .modal-body {
    padding: var(--space-2);
  }

  /* JSON debug modal */
  .json-output {
    max-height: 50vh;
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  /* Modal overlay - full screen on mobile */
  .modal-overlay {
    padding: var(--space-2);
    align-items: flex-start;
    padding-top: var(--space-4);
  }

  /* Modal content - full width */
  .modal-content {
    max-width: 100%;
    max-height: 90vh;
    border-radius: var(--radius-md);
  }

  /* Modal header - minimal */
  .modal-header {
    padding: var(--space-2) var(--space-3);
  }

  .modal-header h3 {
    font-size: 0.85rem;
    gap: var(--space-1);
  }

  .modal-header h3 i {
    font-size: 0.9rem;
  }

  .modal-close {
    font-size: 1.5rem;
    padding: var(--space-2);
    margin: calc(-1 * var(--space-2));
  }

  .modal-size-hint {
    display: none;
  }

  /* Modal body - tight padding */
  .modal-body {
    padding: var(--space-2);
  }

  /* Modal footer - stacked buttons */
  .modal-footer {
    padding: var(--space-2);
    flex-direction: column;
  }

  .modal-footer button {
    width: 100%;
  }

  /* Skill grids in modals - 3 columns */
  .modal-skills-grid {
    max-height: 180px;
  }

  .modal-skills-grid .skill-card {
    min-height: 44px;
  }

  /* Big guy skill info - stacked */
  .big-guy-skill-info {
    flex-direction: column;
    gap: var(--space-1);
    text-align: center;
  }
}

/* ========================================================
   MOBILE OPTIMIZATION - TOUCH TARGETS
   Ensure minimum 44x44px touch targets for accessibility
   ======================================================== */
@media (max-width: 768px) {
  /* Info buttons on cards - larger touch target */
  .card-info-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }

  .card-info-btn i {
    font-size: 0.7rem;
  }

  /* Quantity controls - larger */
  .card-qty-btn {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  /* Filter buttons - touch friendly */
  .filter-btn {
    min-height: 36px;
  }

  /* Close buttons - larger */
  .modal-close {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Toggle/checkbox touches */
  .roster-toggle,
  .star-checkbox {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-width: 480px) {
  /* Even larger touch targets on small screens */
  .card-info-btn {
    width: 36px;
    height: 36px;
  }

  .card-qty-btn {
    width: 32px;
    height: 32px;
  }

  /* Skill cards - taller for touch */
  .builder-card.skill-card {
    min-height: 48px;
  }

  /* Tab buttons */
  .tab-btn {
    min-height: 44px;
    padding: var(--space-2) var(--space-3);
  }
}

/* ========================================================
   MOBILE OPTIMIZATION - FILTER BARS
   Horizontal scrolling filter bars on mobile
   ======================================================== */
@media (max-width: 768px) {
  /* Skill filter bar - scrollable */
  .skill-filter-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-2);
    gap: var(--space-2);
  }

  .skill-filter-bar::-webkit-scrollbar {
    display: none;
  }

  .skill-filter-bar .filter-btn {
    flex-shrink: 0;
  }

  /* Search box - full width */
  .skill-search-box {
    width: 100%;
    margin-bottom: var(--space-2);
  }

  /* Roster skill modal filters */
  #rosterSkillModal .skill-filter-bar {
    margin: 0 calc(-1 * var(--space-2));
    padding: 0 var(--space-2) var(--space-2);
    width: calc(100% + var(--space-4));
  }
}

@media (max-width: 480px) {
  /* Filter buttons - smaller on very small screens */
  .skill-filter-bar .filter-btn {
    min-height: 36px;
  }
}

/* ========================================================
   MOBILE OPTIMIZATION - APP HEADER
   Compact header for mobile/tablet screens
   ======================================================== */
@media (max-width: 768px) {
  /* Card frame: simplified shadow for tablets */
  .app-card {
    box-shadow:
      inset 0 0 6px 2px rgba(0, 0, 0, 0.4),
      0 2px 4px 4px rgba(18, 15, 23, 0.8),
      0 0 0 4px var(--purple-900),
      0 0 0 6px var(--gold-700),
      0 6px 16px rgba(0, 0, 0, 0.5);
  }

  /* Stats bar shadow to match tablet frame */
  .stats-bar-wrapper {
    box-shadow:
      inset 0 0 6px 2px rgba(0, 0, 0, 0.4),
      0 2px 4px 4px rgba(18, 15, 23, 0.8),
      0 0 0 4px var(--purple-900),
      0 0 0 6px var(--gold-700),
      0 6px 16px rgba(0, 0, 0, 0.5);
    border-left: 3px solid var(--gold-700);
    border-right: 3px solid var(--gold-700);
    border-bottom: 3px solid var(--gold-700);
  }

  .stats-bar-wrapper.settled {
    border-top: none;
    box-shadow:
      inset 0 0 6px 2px rgba(0, 0, 0, 0.4),
      0 2px 4px 4px rgba(18, 15, 23, 0.8),
      0 0 0 4px var(--purple-900),
      0 0 0 6px var(--gold-700),
      0 6px 16px rgba(0, 0, 0, 0.5);
    /* 4px purple + 6px gold = 10px (card border-bottom removed) */
    margin: -10px auto 0;
    padding-top: 10px;
  }

  .stats-bar-wrapper.settled::after {
    top: 10px;
  }

  .app-header {
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
  }

  /* Header title: switch from absolute to flow layout on mobile */
  .app-header .header-center {
    position: static;
    transform: none;
    flex: 1;
    min-width: 0;
  }

  .app-header .header-title {
    font-size: 1.25rem;
    letter-spacing: 1.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Decorative lines - hide on mobile to save space */
  .app-header .header-center::before,
  .app-header .header-center::after {
    display: none;
  }

  .app-header .header-back-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
  }

  .header-badges {
    gap: var(--space-1);
  }

  .header-badge {
    padding: 2px 6px;
    font-size: 0.55rem;
  }
}

/* ========================================================
   APP MODE - FULL-BLEED (phones only, ≤600px)
   Card fills viewport edge-to-edge like a native app.
   Tablets (601-768px) keep the ornamental card frame.
   ======================================================== */
@media (max-width: 600px) {
  /* Container: zero padding so card is flush */
  .team-builder-page .container,
  .home-builder-takeover .container {
    padding: 0;
  }

  .builder-app {
    padding: 0;
  }

  /* Card: strip frame decoration (builder only, not homepage hero) */
  .builder-app .app-card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
  }

  /* Builder & roster stages also go flat */
  .builder-app.stage-builder .app-card,
  .builder-app.stage-roster .app-card {
    border-radius: 0;
    border-bottom: none;
  }

  /* Stats bar: flush full-width, no frame */
  .stats-bar-wrapper {
    border: none;
    border-radius: 0;
    box-shadow: none;
    width: 100% !important; /* Override JS inline width */
    left: 0;
    transform: none;
  }

  .stats-bar-wrapper.settled {
    border: none;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0 auto;
    padding-top: 0;
  }

  .stats-bar-wrapper.settled::after {
    top: 0;
    left: 0;
    right: 0;
  }
}

@media (max-width: 480px) {
  .app-header {
    min-height: 44px;
    padding: var(--space-2);
  }

  .app-header .header-back-btn {
    width: 32px;
    height: 32px;
  }

  .app-header .header-title {
    font-size: 1.1rem;
    letter-spacing: 1px;
  }

  /* Hide badges on very small screens */
  .header-badges {
    display: none;
  }
}

/* ========================================================
   MOBILE OPTIMIZATION - GRIDS
   Ensure proper column counts at all breakpoints
   ======================================================== */
@media (max-width: 480px) {
  /* Preset grid - 3 columns minimum */
  .preset-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }

  /* Positionals - 2 columns */
  .positionals-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  /* Skills grid - 2 columns (category-skills also set at base section) */
  .skills-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  /* Big guy numbers - 3 columns */
  .big-guy-numbers-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
  }
}

/* ========================================================
   MOBILE OPTIMIZATION - TOAST NOTIFICATIONS
   Position above stats bar on mobile
   ======================================================== */
@media (max-width: 768px) {
  .toast-container {
    bottom: 80px;
    left: var(--space-3);
    right: var(--space-3);
    max-width: none;
  }

  .toast {
    font-size: 0.85rem;
    padding: var(--space-3);
  }
}

@media (max-width: 480px) {
  .toast-container {
    bottom: 70px;
    left: var(--space-2);
    right: var(--space-2);
  }

  .toast {
    font-size: 0.8rem;
    padding: var(--space-2) var(--space-3);
  }
}

/* ========================================================
   MOBILE OPTIMIZATION - STATS BAR
   Better wrapping for very small screens
   ======================================================== */
@media (max-width: 380px) {
  .stats-bar-inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2);
  }

  .stat-item {
    flex: 0 0 auto;
    min-width: 50px;
  }

  .stat-item i {
    font-size: 0.8rem;
  }

  .stat-label {
    display: none;
  }

  .stat-value {
    font-size: 0.7rem;
  }

  .price-stat .price-value {
    font-size: 0.9rem;
  }

  #btnReview {
    flex: 0 0 100%;
    margin-top: var(--space-1);
    order: 10;
  }
}

/* ========================================================
   MOBILE OPTIMIZATION - ULTRA SMALL SCREENS (<360px)
   For older/smaller mobile devices
   ======================================================== */
@media (max-width: 360px) {
  /* App header - ultra compact */
  .app-header {
    min-height: 40px;
    padding: var(--space-1) var(--space-2);
    gap: var(--space-2);
  }

  .app-header .header-back-btn {
    width: 28px;
    height: 28px;
    font-size: 0.8rem;
  }

  .app-header .header-title {
    font-size: 1rem;
  }

  /* Builder cards - smaller */
  .builder-card {
    min-height: 55px;
    padding: var(--space-2);
  }

  .card-name {
    font-size: 0.65rem;
  }

  /* Step headers */
  .step-title {
    font-size: 0.9rem;
  }

  .step-subtitle {
    font-size: 0.75rem;
  }

  /* Grids - 2 columns max */
  .preset-grid,
  .positionals-grid,
  .skills-grid,
  .category-skills {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-1);
  }

  /* Modals - true full screen */
  .modal-overlay {
    padding: 0;
  }

  .modal-content {
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
  }

  .modal-header {
    border-radius: 0;
  }

  /* Review modal */
  .review-section {
    padding: var(--space-2);
  }

  .review-item {
    padding: var(--space-2);
    font-size: 0.75rem;
  }
}

/* ========================================================
   MOBILE OPTIMIZATION - LANDSCAPE MODE
   Better use of horizontal space on mobile landscape
   ======================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  /* Reduce vertical spacing */
  .step-header {
    margin-bottom: var(--space-2);
  }

  .step-title {
    font-size: 1rem;
  }

  .step-subtitle {
    display: none;
  }

  /* Stats bar - thinner */
  .stats-bar-inner {
    padding: var(--space-1) var(--space-3);
    min-height: 40px;
  }

  /* Modal - reduced max height */
  .modal-content {
    max-height: 80vh;
  }

  .modal-body {
    max-height: 50vh;
  }
}