/* ============================================================================
   IMPORT UNIFIED DESIGN SYSTEM
   ============================================================================ */

/* ============================================================================
   MOBILE-SPECIFIC STYLES
   ============================================================================ */
.mobile-container {
  padding: var(--spacing-sm);
  max-width: 100%;
  background: var(--color-dark-darker);
  min-height: 100vh;
}

/* Override desktop styles for mobile */
@media (max-width: 768px) {
  .dashboard {
    height: 100vh;
  }
  
  .dashboard-header {
    padding: 0.5rem;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .header-left {
    width: 100%;
    justify-content: center;
  }
  
  .user-info {
    width: 100%;
    justify-content: center;
  }
  
  .dashboard-nav {
    justify-content: center;
    padding: 0.5rem;
  }
  
  .nav-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
  }
  
  .dashboard-content {
    padding: 0.5rem;
  }
  
  /* Mobile-friendly form inputs */
  .form-group {
    margin-bottom: 1rem;
  }
  
  .form-input,
  .form-textarea,
  .form-select {
    padding: 12px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Mobile-friendly buttons */
  .btn {
    padding: 12px 20px;
    font-size: 16px;
    min-height: 44px; /* iOS recommended touch target */
  }
  
  /* Mobile wallet connection */
  .wallet-card {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  /* Mobile tip sender */
  .tip-form {
    padding: 1rem;
  }
  
  .tip-form .form-row {
    flex-direction: column;
    gap: 1rem;
  }
  
  /* Mobile tip history */
  .tips-list {
    padding: 0.5rem;
  }
  
  .tip-item {
    padding: 1rem;
    margin-bottom: 0.5rem;
  }
  
  /* Mobile user profile */
  .profile-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }
  
  .profile-avatar {
    width: 80px;
    height: 80px;
    font-size: 2rem;
  }
  
  /* Hide complex elements on very small screens */
  @media (max-width: 480px) {
    .nav-icon {
      display: none;
    }
    
    .user-avatar {
      width: 24px;
      height: 24px;
    }
    
    .logo h1 {
      font-size: 1rem;
    }
  }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
  .btn:hover {
    transform: none;
  }
  
  .nav-btn:hover {
    background: rgba(145, 70, 255, 0.2);
  }
  
  /* Larger touch targets */
  .overlay-control-btn {
    width: 60px;
    height: 60px;
    font-size: 18px;
  }
}