/* ═══════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE RESPONSIVENESS
   All pages optimized for mobile devices
   ═══════════════════════════════════════════════════════════════ */

/* Base Mobile Breakpoints */
@media (max-width: 768px) {
  /* Container adjustments */
  .container {
    padding: 12px !important;
    max-width: 100% !important;
  }
  
  /* Typography scaling */
  h1 { font-size: 18px !important; }
  h2 { font-size: 16px !important; }
  h3 { font-size: 14px !important; }
  p, div { font-size: 12px !important; }
  
  /* Navigation */
  #nav-container {
    padding: 8px !important;
  }
  
  nav a, nav button {
    padding: 8px 12px !important;
    font-size: 11px !important;
  }
  
  /* Forms */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  textarea,
  select {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 14px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }
  
  /* Buttons */
  button {
    padding: 12px 16px !important;
    font-size: 13px !important;
    width: 100%;
    margin-bottom: 8px;
  }
  
  /* Cards and Sections */
  .settings-section,
  .earnings-card,
  .dashboard-widget {
    padding: 16px !important;
    margin-bottom: 12px !important;
  }
  
  /* Profile Page Mobile */
  .profile-hero {
    height: 300px !important;
  }
  
  .profile-hero-name {
    font-size: 32px !important;
  }
  
  .profile-nav {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  
  .profile-nav-item {
    white-space: nowrap;
    padding: 10px 16px !important;
    font-size: 11px !important;
  }
  
  /* Dashboard Mobile */
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  
  .widget {
    padding: 16px !important;
  }
  
  /* Marketplace Mobile */
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  
  .product-card {
    padding: 12px !important;
  }
  
  .product-image {
    height: 150px !important;
  }
  
  /* Settings Tabs Mobile */
  .settings-tabs {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch;
  }
  
  .settings-tab-btn {
    padding: 10px 14px !important;
    font-size: 10px !important;
    white-space: nowrap;
  }
  
  .settings-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  
  .settings-row input,
  .settings-row select {
    width: 100% !important;
  }
  
  /* Earnings Page Mobile */
  .earnings-grid {
    grid-template-columns: 1fr !important;
  }
  
  .earnings-card-value {
    font-size: 22px !important;
  }
  
  .earnings-table {
    font-size: 10px !important;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .earnings-table th,
  .earnings-table td {
    padding: 8px 4px !important;
    white-space: nowrap;
  }
  
  /* Admin Panel Mobile */
  .admin-stats-grid {
    grid-template-columns: 1fr !important;
  }
  
  .user-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .user-table {
    font-size: 10px !important;
  }
  
  /* Modal/Popup Mobile */
  .modal,
  .popup {
    padding: 12px !important;
  }
  
  .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    padding: 16px !important;
  }
  
  /* Feed/Posts Mobile */
  .post-card {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  
  .post-image {
    max-height: 400px !important;
  }
  
  /* Chat/Messages Mobile */
  .message-list {
    font-size: 12px !important;
  }
  
  .message-bubble {
    max-width: 85% !important;
    padding: 10px !important;
  }
  
  /* Sidebar Mobile */
  .sidebar {
    position: fixed !important;
    top: 0;
    left: -100%;
    width: 80% !important;
    height: 100vh;
    z-index: 9999;
    transition: left 0.3s ease;
  }
  
  .sidebar.open {
    left: 0;
  }
  
  /* Touch-friendly tap targets */
  a, button, input[type="checkbox"], input[type="radio"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }
  
  /* Show mobile-only elements */
  .mobile-only {
    display: block !important;
  }
  
  /* Flex direction changes */
  .flex-row-desktop {
    flex-direction: column !important;
  }
  
  /* Spacing adjustments */
  .mb-24 { margin-bottom: 16px !important; }
  .mt-24 { margin-top: 16px !important; }
  .p-24 { padding: 16px !important; }
  
  /* Image responsiveness */
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Video responsiveness */
  video {
    max-width: 100% !important;
    height: auto !important;
  }
  
  /* Chart responsiveness */
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* Extra small devices (phones in portrait) */
@media (max-width: 480px) {
  h1 { font-size: 16px !important; }
  
  .product-grid {
    grid-template-columns: 1fr !important;
  }
  
  .profile-hero-name {
    font-size: 24px !important;
  }
  
  button {
    font-size: 12px !important;
    padding: 10px 12px !important;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .container {
    max-width: 90% !important;
  }
  
  .product-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Landscape phone adjustments */
@media (max-width: 768px) and (orientation: landscape) {
  .profile-hero {
    height: 250px !important;
  }
  
  .modal-content {
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase tap target size */
  button, a, input, select {
    padding: 14px !important;
  }
  
  /* Remove hover effects on touch devices */
  *:hover {
    background-color: inherit !important;
  }
  
  /* Add active state for touch feedback */
  button:active,
  a:active {
    opacity: 0.7;
  }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
  body {
    padding-top: max(0px, env(safe-area-inset-top));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}