/* Mobile Responsiveness CSS Overrides */
/* This file provides CSS-based mobile fixes for inline styles */

/* Prevent iOS zoom and improve touch experience */
* {
  -webkit-tap-highlight-color: transparent;
}

body {
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

input, textarea, select, button {
  font-size: 16px !important;
}

/* Mobile Navigation Fixes */
@media (max-width: 768px) {
  /* Force bottom nav on mobile */
  nav[style*="position: fixed"][style*="left: 0"] {
    width: 100% !important;
    height: auto !important;
    position: fixed !important;
    bottom: 0 !important;
    top: auto !important;
    left: 0 !important;
    flex-direction: row !important;
    padding: 12px !important;
    z-index: 1000 !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
  }
  
  /* Hide logo on mobile nav */
  nav[style*="position: fixed"] > div:first-child {
    display: none !important;
  }
  
  /* Make nav items horizontal */
  nav[style*="position: fixed"] > div:nth-child(2) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    flex: 1 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }
  
  /* Hide settings/logout on mobile */
  nav[style*="position: fixed"] > div:last-child {
    display: none !important;
  }
  
  /* Make buttons vertical and compact */
  nav[style*="position: fixed"] button {
    flex-direction: column !important;
    padding: 8px 4px !important;
    gap: 4px !important;
    min-width: 60px !important;
    max-width: 80px !important;
    border-left: none !important;
    border-top: 3px solid transparent !important;
    font-size: 11px !important;
  }
  
  /* Active state on mobile */
  nav[style*="position: fixed"] button[style*="background"] {
    border-left: none !important;
    border-top: 3px solid #BCD1D2 !important;
  }
  
  /* Icon sizes */
  nav[style*="position: fixed"] button span:first-child {
    font-size: 22px !important;
  }
  
  nav[style*="position: fixed"] button span:last-child {
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  
  /* Content area fixes */
  div[style*="marginLeft: 240px"],
  div[style*="margin-left: 240px"] {
    margin-left: 0 !important;
    padding: 16px !important;
    padding-bottom: 90px !important;
  }
  
  /* Card grid responsiveness */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  
  /* Max widths on mobile */
  div[style*="maxWidth"],
  div[style*="max-width"] {
    max-width: 100% !important;
  }
  
  /* Heading sizes */
  h1 {
    font-size: 24px !important;
  }
  
  h2 {
    font-size: 20px !important;
  }
  
  /* Modal fixes */
  div[style*="position: fixed"][style*="z-index"] > div[style*="background"] {
    border-radius: 16px 16px 0 0 !important;
    max-height: 90vh !important;
    width: 100% !important;
    margin: 0 !important;
    position: fixed !important;
    bottom: 0 !important;
  }
  
  /* Form inputs full width */
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  select,
  textarea {
    width: 100% !important;
    padding: 12px !important;
  }
  
  /* Touch targets minimum size */
  button {
    min-height: 44px !important;
  }
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
  div[style*="marginLeft: 240px"] {
    margin-left: 0 !important;
    padding: 24px !important;
  }
  
  div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}