/* Mobile-Responsive Overrides for Tray IQ XRPL */
/* This stylesheet adds mobile responsiveness to existing dashboards */

/* Force responsive behavior on all pages */
@media (max-width: 768px) {
  /* Make all containers stack and use full width */
  body {
    font-size: 14px;
  }

  /* Headers - Make them mobile-friendly */
  .header, .vendor-header, .app-header {
    flex-direction: column !important;
    padding: 1rem !important;
    gap: 0.75rem !important;
  }

  .header-content, .header-container {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .logo, .header-logo, .vendor-brand {
    font-size: 1.25rem !important;
    justify-content: center !important;
  }

  .user-info, .header-actions {
    flex-direction: column !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  /* Buttons - Full width on mobile */
  .logout-btn, .btn, button[class*="btn"] {
    width: 100% !important;
    justify-content: center !important;
    min-height: 44px !important;
    padding: 0.75rem 1rem !important;
  }

  /* Menu containers */
  .menu-container {
    width: 100%;
  }

  .menu-button {
    width: 100% !important;
  }

  .dropdown-menu {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: auto !important;
  }

  /* Containers - Reduce padding */
  .container, .vendor-container {
    padding: 0.75rem !important;
  }

  /* Grid layouts - Stack on mobile */
  .stats-grid, .grid, .metric-grid, [class*="grid"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  .inventory-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cards - Better mobile spacing */
  .stat-card, .card, .tray-card, .metric-card {
    padding: 1rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Tables - Make them scrollable */
  .table-container, .tray-table-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .tray-table, .table, .data-table {
    min-width: 600px !important;
    font-size: 0.875rem !important;
  }

  .tray-table th, .table th {
    padding: 0.5rem !important;
    font-size: 0.75rem !important;
  }

  .tray-table td, .table td {
    padding: 0.5rem !important;
    font-size: 0.875rem !important;
  }

  /* Forms - Stack inputs */
  .form-row, .form-group {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .form-group > div,
  .form-group > input,
  .form-group > select {
    width: 100% !important;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="date"],
  input[type="number"],
  select,
  textarea {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  /* Dashboard titles */
  .dashboard-title, h1 {
    font-size: 1.5rem !important;
  }

  .dashboard-subtitle, .subtitle {
    font-size: 0.875rem !important;
  }

  /* Stat values */
  .stat-value {
    font-size: 1.75rem !important;
  }

  .stat-label {
    font-size: 0.875rem !important;
  }

  /* Charts and sparklines */
  .temp-sparkline canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Hide less critical columns on mobile */
  .hidden-mobile-col {
    display: none !important;
  }

  /* Tray cards - Better mobile layout */
  .tray-info-row {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .cycle-summary {
    flex-direction: column !important;
  }

  .summary-stat {
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 0.5rem !important;
  }

  .summary-stat:last-child {
    border-bottom: none !important;
  }

  /* Process flow - Stack on mobile */
  .process-flow {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .process-step {
    width: 100% !important;
  }

  /* Modals - Full screen on mobile */
  .modal, .modal-content {
    width: 100% !important;
    height: 100vh !important;
    max-width: 100% !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Encryption dashboard specific */
  .glass {
    padding: 1rem !important;
  }

  /* Vendor dashboard specific */
  .metric-card {
    min-width: auto !important;
  }

  /* Make sure touch targets are at least 44x44px */
  a, button, input[type="button"], input[type="submit"], .clickable {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Improve spacing for mobile */
  section {
    margin-bottom: 1rem !important;
  }

  .section-title, h2 {
    font-size: 1.25rem !important;
    margin-bottom: 0.75rem !important;
  }

  /* Better mobile navigation */
  .nav-links {
    flex-direction: column !important;
    width: 100% !important;
  }

  .nav-links a {
    width: 100% !important;
    text-align: center !important;
    padding: 0.75rem !important;
  }

  /* Alert messages - Full width */
  .alert, .message, [class*="alert"] {
    width: 100% !important;
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
  }

  /* Loading states */
  .loading, .skeleton {
    font-size: 0.875rem !important;
    padding: 1rem !important;
  }

  /* Badges and labels */
  .badge, .status-badge {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* Filter controls */
  .filter-container, #hospital-filter {
    width: 100% !important;
    margin-bottom: 1rem !important;
  }

  /* Actions row */
  .actions, .card-actions, .tray-actions {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .actions button, .card-actions button {
    width: 100% !important;
  }

  /* Tooltips - Better mobile positioning */
  .tooltip {
    position: fixed !important;
    max-width: 90vw !important;
  }
}

/* Tablet breakpoint */
@media (min-width: 769px) and (max-width: 1024px) {
  .stats-grid, .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .inventory-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Small mobile (iPhone SE, etc) */
@media (max-width: 375px) {
  body {
    font-size: 13px;
  }

  .dashboard-title, h1 {
    font-size: 1.25rem !important;
  }

  .stat-value {
    font-size: 1.5rem !important;
  }

  .card, .stat-card {
    padding: 0.75rem !important;
  }
}

/* Landscape mobile */
@media (max-width: 896px) and (orientation: landscape) {
  .header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
  }

  .container {
    padding-top: 0.5rem !important;
  }
}

/* Print styles */
@media print {
  .header, .logout-btn, .menu-button, .dropdown-menu {
    display: none !important;
  }

  .container {
    padding: 0 !important;
  }

  .card, .stat-card {
    break-inside: avoid !important;
  }
}