/* Mobile Fix for HydroScan - assets/css/mobile-fix.css */

/* Responsive Design for Mobile Devices */
@media screen and (max-width: 768px) {
  /* General Mobile Adjustments */
  body {
    font-size: 14px;
    overflow-x: hidden;
  }
  
  /* Dashboard Layout Adjustments */
  .dashboard-container {
    flex-direction: column;
  }
  
  /* Sidebar Mobile Styles */
  .sidebar {
    width: 100%;
    position: fixed;
    bottom: 0;
    top: auto;
    z-index: 1000;
    padding: 0.5rem;
    border-top: 2px solid var(--primary-color);
    height: auto;
    overflow-x: auto;
  }
  
  .logo {
    display: none;
  }
  
  .sidebar nav ul {
    display: flex;
    justify-content: space-around;
    padding-bottom: 0;
  }
  
  .sidebar nav ul li {
    padding: 0.5rem;
    text-align: center;
    flex: 1;
  }
  
  .sidebar nav ul li a {
    flex-direction: column;
    font-size: 0.7rem;
    padding: 0.5rem;
  }
  
  .sidebar nav ul li a i {
    margin-right: 0;
    margin-bottom: 0.3rem;
    font-size: 1.2rem;
  }
  
  .sidebar nav ul li span {
    display: none;
  }
  
  /* Main Content Adjustments */
  .main-content {
    padding: 1rem;
    margin-bottom: 70px; /* Space for fixed bottom navbar */
  }
  
  header h1 {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
  }
  
  /* Status Cards Mobile Layout */
  .status-cards {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .status-card {
    padding: 1rem;
  }
  
  .card-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
    margin-right: 1rem;
  }
  
  .card-info .value {
    font-size: 1.5rem;
  }
  
  /* Notification Mobile Styles */
  .notification {
    padding: 1rem;
    margin-bottom: 1.5rem;
  }
  
  /* Export Section Mobile Styles */
  .export-section {
    padding: 1rem;
  }
  
  .export-section h2 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
    justify-content: center;
  }
  
  .export-controls {
    flex-direction: column;
    gap: 1rem;
  }
  
  .date-range {
    width: 100%;
  }
  
  .date-inputs {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .date-inputs span {
    display: none;
  }
  
  .export-btn {
    width: 100%;
    justify-content: center;
    padding: 0.8rem;
  }
  
  /* Table Responsive Styles */
  .sensor-table, .history-table {
    overflow-x: auto;
    display: block;
    padding: 0.5rem;
  }
  
  .sensor-table table, .history-table table {
    min-width: 600px;
  }
  
  /* Chart Responsive Styles */
  .chart-container {
    padding: 1rem;
  }
  
  #monitoringChart {
    height: 300px;
  }
  
  /* Month Filter Mobile Styles */
  .month-filter {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .month-filter label {
    display: block;
    margin-bottom: 0.5rem;
  }
  
  /* Settings Mobile Styles */
  .settings-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.5rem;
  }
  
  .tab-btn {
    white-space: nowrap;
    padding: 0.5rem 1rem;
  }
  
  .setting-card {
    padding: 1rem;
  }
  
  .input-group input {
    width: 100%;
  }
  
  .notification-channel input {
    max-width: 100%;
  }
  
  /* Help Section Mobile Styles */
  .help-section {
    padding: 1rem;
  }
  
  .step {
    flex-direction: column;
  }
  
  .step-image img {
    max-width: 100%;
  }
  
  .contact-info {
    grid-template-columns: 1fr;
  }
  
  /* Profile Mobile Styles */
  .profile-container {
    flex-direction: column;
  }
}

/* Additional adjustments for very small screens */
@media screen and (max-width: 480px) {
  .main-content {
    padding: 0.8rem;
  }
  
  .status-card {
    flex-direction: column;
    text-align: center;
  }
  
  .card-icon {
    margin-right: 0;
    margin-bottom: 0.8rem;
  }
  
  .sidebar nav ul li a {
    font-size: 0.6rem;
    padding: 0.3rem;
  }
  
  .sidebar nav ul li a i {
    font-size: 1rem;
  }
}

/* Fix for horizontal scrolling issues */
@media screen and (max-width: 768px) {
  .dashboard-container, 
  .main-content, 
  .status-cards, 
  .status-card, 
  .export-section,
  .sensor-table,
  .chart-container,
  .month-filter,
  .history-table,
  .setting-card,
  .help-section {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* Improve touch targets for mobile */
@media screen and (max-width: 768px) {}
  .sidebar nav ul li a,
  .export-btn,
  .filter-btn,
  .save-btn,
  .tab-btn,
  .toggle-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  input, select, textarea {
    font-size: 16px; /* Prevents zoom on focus in iOS */
}