/* responsive.css */

/* Base: make scroll areas use native scroll when custom track is hidden */
.win95-scroll-wrapper {
  position: relative;
}

/* Desktop-only Win95 scrollbars */
@media (min-width: 1025px) {
  .win95-scroll-wrapper {
    overflow: hidden;
  }
  
}

/* Tablet & Mobile: hide fake scrollbar, use native scrolling */
@media (max-width: 1024px) {
  .win95-scrollbar-track {
    display: none !important;
  }

  .win95-scroll-wrapper {
    overflow: hidden; /* wrapper itself */
  }

  .win95-scroll-content {
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Screen 4 layout: stack sidebar above results */
  .vision-screen[data-screen="4"] > div[style*="display: flex"] {
    flex-direction: column;
  }

  #vision-sidebar {
    max-width: none !important;
    width: 100%;
  }

  #results-list {
    max-height: 60vh;
  }

  /* Screen 5 layout: diagram on top, lists below */
  .vision-screen5-layout {
    flex-direction: column;
    gap: 1rem;
  }

  .vision-screen5-layout .diagram-column {
    width: 100%;
  }

  #screen-5-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  #screen5-category-list,
  #screen5-type-list,
  .vision-results-column {
    width: 100% !important;
  }

  #screen5-part-results {
    max-height: 60vh;
  }

  /* Part rows: bigger tap targets */
  .part-row {
    flex-wrap: wrap;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .part-info {
    font-size: 0.95rem !important;
  }

  .quantity-input {
    width: 3rem !important;
  }

  .fixed-bottom-bar-inner {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* Tiny screens */
@media (max-width: 480px) {
  .vision-cli {
    padding: 0.5rem;
  }

  .vision-logo-small img,
  .vision-logo-top img {
    max-width: 140px;
  }

  .vision-results-column h3,
  .screen5-category-title {
    font-size: 0.9rem;
  }

  button,
  .cli-input {
    font-size: 0.85rem;
  }
}

/* Tablet layout fix (between mobile and desktop) */
@media (min-width: 1025px) and (max-width: 1350px) {

  /* Stack part info so it doesn't overflow horizontally */
  .part-info-main {
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 0.5rem !important;
  }

  /* Allow row to adapt instead of forcing wide layout */
  .part-row {
      flex-wrap: wrap !important;
  }

  /* Sidebar + results behavior */
  .vision-screen[data-screen="4"] > div {
      flex-direction: column !important;
  }

  #vision-sidebar {
      max-width: 100% !important;
      width: 100% !important;
  }

  .results-column {
      width: 100% !important;
  }
}

@media (min-width: 1025px) and (max-width: 1350px) {

  /* Prevent shrinking of the main content column */
  .results-column,
  .vision-screen[data-screen="4"] .win95-scroll-wrapper {
      width: 100% !important;
      max-width: 100% !important;
      flex-shrink: 0 !important;
  }

  /* Each part row must also NOT be allowed to shrink the parent */
  .part-row {
      flex-shrink: 0 !important;
      width: 100% !important;
  }

  /* Also make scroll-content respect full width */
  .win95-scroll-content {
      width: 100% !important;
  }
}

/* Force iOS/Safari to stop overriding <select> appearance,
   while keeping your white Win95-style fields */
#vision-container select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    background-color: #ffffff !important; /* match your text inputs */
    border: 2px inset #999 !important;     /* Win95 inset border */
    border-radius: 0 !important;           /* remove iOS rounding */
    padding: 4px 28px 4px 6px !important;  /* leave space for arrow */
    font-family: "Courier New", monospace !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
}

/* Add small Win95-style dropdown arrow */
#vision-container select {
    background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12'>\
<polygon points='2,4 10,4 6,9' fill='black'/>\
</svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 12px;
}