/* Make the filter bar fixed at the top */
#filter-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1050;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Add top margin to main content so it doesn't hide behind the filter bar */
#main-content {
  margin-top: 110px; /* Adjust if filter bar height changes */
}

/* Desktop: Top button bar */
#top-button-bar {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 2100;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Card responsive sizing */
@media (min-width: 901px) {
  .card-responsive { width: 18rem !important; min-width: 0 !important; }
}
@media (min-width: 577px) and (max-width: 900px) {
  .card-responsive { width: 48% !important; min-width: 0 !important; }
}
@media (max-width: 576px) {
  .card-responsive { width: 100% !important; min-width: 0 !important; }
}

/* Tablet adjustments (577px - 768px) */
@media (max-width: 768px) {
  #main-content {
    margin-top: 180px;
  }
  
  /* Make warning texts larger */
  .filter-warning-text {
    font-size: 0.75rem !important;
  }
}

/* Mobile adjustments (max-width: 576px) */
@media (max-width: 576px) {
  /* Hide desktop button bar, show mobile menu instead */
  #desktop-button-bar {
    display: none !important;
  }
  
  /* Mobile menu button */
  #mobile-menu-btn {
    display: block !important;
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: 2200;
  }
  
  /* Increase main content margin for mobile filter bar */
  #main-content {
    margin-top: 280px !important;
  }
  
  /* Make filter dropdowns stack better */
  .filter-dropdown-col {
    margin-bottom: 0.75rem !important;
  }
  
  /* Increase warning text size */
  .filter-warning-text {
    font-size: 0.8rem !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Card images - make them fully responsive */
  .card-responsive img {
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
  
  /* Card buttons - increase touch target size */
  .card-add-btn {
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
    min-width: 60px !important;
    min-height: 44px !important;
  }
  
  /* Deck drawer card images */
  .deck-card-image {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Deck drawer remove button */
  .deck-remove-btn {
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
    min-width: 70px !important;
    min-height: 44px !important;
  }
  
  /* Presentation page logos - make responsive */
  .presentation-logo {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
  
  /* Presentation page text */
  .presentation-text {
    font-size: 1rem !important;
    text-align: center !important;
  }
  
  /* Presentation page buttons */
  .presentation-btn {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  /* Alert responsiveness */
  #deck-alert {
    min-width: 0 !important;
    max-width: 90vw !important;
    left: 5vw !important;
    transform: none !important;
    font-size: 0.9rem !important;
    padding: 1rem 1.5rem !important;
  }
  
  /* Modal adjustments */
  .mantine-Modal-root .mantine-Modal-inner {
    padding: 8px !important;
  }
  
  /* Deck stats modal content */
  #deck-stats-modal .mantine-Text-root {
    font-size: 0.9rem !important;
  }
  
  /* Make graphs scrollable horizontally if needed */
  #deck-mana-histogram,
  #deck-condition-effect-matrix {
    max-width: 100% !important;
    overflow-x: auto !important;
  }
}

/* Extra small mobile (max-width: 360px) */
@media (max-width: 360px) {
  #main-content {
    margin-top: 320px !important;
  }
  
  .filter-warning-text {
    font-size: 0.75rem !important;
  }
  
  /* Even larger touch targets for very small screens */
  .card-add-btn,
  .deck-remove-btn {
    min-width: 80px !important;
    min-height: 48px !important;
  }
}

/* Desktop only - hide mobile menu button */
@media (min-width: 577px) {
  #mobile-menu-btn {
    display: none !important;
  }
}