/* ============================================
   MOBILE-FIRST RESPONSIVE DESIGN
   Best Practices: Relative units, minimal overrides,
   mobile-first approach, content-based breakpoints
   ============================================ */

/* Mobile-first: These styles apply to ALL screens, then we enhance for larger screens */

/* Touch-friendly targets (minimum 44px / 2.75rem) */
button,
.btn,
input,
select {
  min-height: 2.75rem; /* 44px for touch targets */
  font-size: 1rem; /* 16px - prevents iOS zoom */
}

/* Flexible navigation */
.nav-bar {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.nav-bar a {
  white-space: nowrap;
}

/* Flexible workspace dropdown */
.workspace-menu {
  max-width: calc(100vw - 2.5rem);
}

/* Intervention panel - stack by default */
.intervention-panel {
  flex-wrap: wrap;
}

.intervention-panel select,
.intervention-panel input {
  flex: 1 1 auto;
  min-width: min(100%, 10rem);
}

.intervention-panel button {
  flex: 1 1 auto;
}

/* Graph view - stack on mobile */
.main-layout {
  flex-direction: column;
}

.right-panel {
  max-height: 40vh;
  overflow-y: auto;
}

.interactions-list,
.affected-list {
  max-height: 35vh;
  overflow-y: auto;
}

/* Hide desktop-only features on mobile */
.collapse-toggle {
  display: none;
}

/* ============================================
   TABLET AND ABOVE (min-width: 48rem / 768px)
   Enhance the layout for medium screens
   ============================================ */
@media (min-width: 48rem) {
  /* Slightly larger touch targets */
  button,
  .btn {
    min-height: auto;
  }
  
  /* Allow more compact nav */
  .nav-bar {
    flex-wrap: nowrap;
  }
  
  /* Intervention panel can be horizontal */
  .intervention-panel {
    flex-wrap: nowrap;
  }
  
  .intervention-panel button {
    flex: 0 1 auto;
  }
}

/* ============================================
   DESKTOP (min-width: 64rem / 1024px)
   Full desktop experience
   ============================================ */
@media (min-width: 64rem) {
  /* Side-by-side graph layout */
  .main-layout {
    flex-direction: row;
  }
  
  .right-panel {
    flex: 0 0 21.25rem; /* 340px */
    max-height: none;
  }
  
  .interactions-list,
  .affected-list {
    max-height: none;
  }
  
  /* Show collapse toggle on desktop */
  .collapse-toggle {
    display: flex;
  }
}

/* ============================================
   LARGE DESKTOP (min-width: 90rem / 1440px)
   Optimize for very large screens
   ============================================ */
@media (min-width: 90rem) {
  .container {
    max-width: 87.5rem; /* 1400px */
  }
}