/* Responsive enhancements for Healthcare App */

/* Base responsive viewport */
@media (max-width: 1200px) {
  .container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Tablet devices */
@media (max-width: 992px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  }
  
  .prescription-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .clinic-info {
    text-align: left;
    margin-top: 10px;
  }
}

/* Mobile devices */
@media (max-width: 768px) {
  /* Ensure text doesn't overflow */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Adjust form elements */
  input, select, textarea {
    max-width: 100%;
  }
  
  /* Ensure buttons don't overflow */
  .btn {
    white-space: normal;
  }
  
  /* Adjust card layouts */
  .card {
    width: 100%;
  }
  
  /* Ensure images are responsive */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Adjust patient info section */
  .patient-info {
    flex-direction: column;
  }
  
  .patient-info > div {
    width: 100%;
    margin-bottom: 10px;
  }
  
  /* Adjust prescription items */
  .prescription-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .prescription-item > div {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* Small mobile devices */
@media (max-width: 576px) {
  body {
    font-size: 14px;
  }
  
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.25rem;
  }
  
  .navbar-brand {
    font-size: 1.25rem;
  }
  
  /* Adjust padding for smaller screens */
  .p-6 {
    padding: 1rem !important;
  }
  
  .m-6 {
    margin: 1rem !important;
  }
  
  /* Ensure bottom nav is usable on small screens */
  .bottom-nav .nav-item span {
    font-size: 10px;
  }
}

/* Print styles remain unchanged */
@media print {
  /* Keep existing print styles */
}