/* 
 * JobHub Mobile Optimization CSS
 * Fixes mobile responsiveness and UI/UX issues
 * Version: 1.0
 * Date: December 2024
 */

/* ============================================================================
 * MOBILE NAVIGATION FIXES
 * ============================================================================ */

/* Enhanced mobile navigation system */
.mobile-menu-toggle,
#mobileMenuToggle,
.mobile-menu-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 8px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border: none;
  background: transparent !important; /* Remove white background */
  cursor: pointer;
  display: none; /* Hide by default */
  align-items: center;
  justify-content: center;
  color: #374151 !important; /* Dark text for visibility */
  transition: all 0.2s ease;
}

/* Show mobile menu button only on mobile devices */
@media (max-width: 767px) {
  .mobile-menu-toggle,
  #mobileMenuToggle,
  .mobile-menu-btn {
    display: flex !important; /* Show on mobile */
  }
}

/* Hide mobile menu button on desktop */
@media (min-width: 768px) {
  .mobile-menu-toggle,
  #mobileMenuToggle,
  .mobile-menu-btn {
    display: none !important; /* Hide on desktop */
  }
}

.mobile-menu-toggle:hover,
#mobileMenuToggle:hover,
.mobile-menu-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-radius: 6px;
  color: #2563eb !important;
}

/* Ensure SVG icons are properly colored */
.mobile-menu-toggle svg,
#mobileMenuToggle svg,
.mobile-menu-btn svg {
  stroke: currentColor !important;
  fill: none !important;
  width: 24px;
  height: 24px;
}

/* Ensure mobile menu is properly positioned */
#mobileMenu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white !important; /* Ensure white background */
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  display: none; /* Hide by default */
}

/* Show mobile menu only on mobile devices when toggled */
@media (max-width: 767px) {
  #mobileMenu {
    display: none; /* Hidden by default on mobile */
  }
  
  #mobileMenu:not(.hidden) {
    display: block; /* Show when not hidden */
  }
}

/* Hide mobile menu on desktop */
@media (min-width: 768px) {
  #mobileMenu {
    display: none !important; /* Always hide on desktop */
  }
}

/* Mobile menu items with proper touch targets */
#mobileMenu a,
#mobileMenu button {
  min-height: 48px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: #374151 !important; /* Dark text for visibility */
  text-decoration: none;
  transition: background-color 0.2s;
  border-bottom: 1px solid #f3f4f6;
  font-size: 16px;
  font-weight: 500;
}

#mobileMenu a:hover,
#mobileMenu button:hover {
  background: #f9fafb !important;
  color: #2563eb !important;
}

#mobileMenu a:last-child,
#mobileMenu button:last-child {
  border-bottom: none;
}

/* Ensure mobile menu text is always visible */
#mobileMenu span {
  color: #374151 !important; /* Dark text for visibility */
  font-size: 16px;
  font-weight: 500;
}

#mobileMenu .header-nav-link {
  color: #374151 !important; /* Override any inherited colors */
}

#mobileMenu .logout-link {
  color: #dc2626 !important; /* Red for logout */
}

#mobileMenu .logout-link:hover {
  color: #b91c1c !important;
}

/* Mobile menu section headers */
.mobile-menu-section {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280 !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

/* Mobile menu icons */
#mobileMenu svg {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;
  stroke: #374151 !important; /* Dark stroke for visibility */
  fill: none !important;
  color: #374151 !important;
}

/* Mobile menu text - ensure visibility */
#mobileMenu span {
  font-size: 16px;
  font-weight: 500;
  color: #374151 !important; /* Dark text for visibility */
}

/* Override any smart navigation colors in mobile menu */
#mobileMenu * {
  color: #374151 !important; /* Force dark text */
}

#mobileMenu .logout-link,
#mobileMenu .logout-link * {
  color: #dc2626 !important; /* Red for logout */
}

/* ============================================================================
 * HEADER POSITIONING FIXES
 * ============================================================================ */

/* Fix header positioning issues */
header.sticky,
header.fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  background: white !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Ensure main content doesn't hide under fixed header */
main,
.main-content,
#mainContent {
  padding-top: 80px !important; /* Adjust based on header height */
}

/* ============================================================================
 * MOBILE BUTTON ALIGNMENT FIXES
 * ============================================================================ */

/* Fix button alignment in mobile forms */
.mobile-form-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.mobile-form-buttons button {
  width: 100%;
  min-height: 44px;
  padding: 12px 16px;
  font-size: 16px; /* Prevent zoom on iOS */
}

/* Ensure buttons are properly sized on mobile */
.mobile-button,
.mobile-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
  touch-action: manipulation;
  font-size: 16px;
}

/* Fix button groups alignment */
.button-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

@media (min-width: 640px) {
  .button-group {
    flex-direction: row;
    gap: 12px;
  }
  
  .mobile-form-buttons button {
    width: auto;
  }
}

/* ============================================================================
 * MOBILE FORM IMPROVEMENTS
 * ============================================================================ */

/* Improve form input sizing on mobile */
.mobile-form input,
.mobile-form select,
.mobile-form textarea {
  font-size: 16px; /* Prevent zoom on iOS */
  min-height: 44px;
  padding: 12px 16px;
}

/* Better form layout on mobile */
.mobile-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .mobile-form .form-row {
    flex-direction: row;
    gap: 24px;
  }
}

/* ============================================================================
 * SCHEDULE MOBILE OPTIMIZATION
 * ============================================================================ */

/* Make schedule calendar mobile-friendly */
.mobile-schedule {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-schedule .timeline-grid {
  min-width: 600px; /* Ensure minimum width for readability */
}

/* Mobile phase calendar improvements */
.mobile-phase-calendar {
  font-size: 12px;
  min-height: 40px;
}

.mobile-phase-calendar .timeline-header,
.mobile-phase-calendar .timeline-row {
  grid-template-columns: repeat(30, 35px);
  gap: 2px;
}

/* ============================================================================
 * PAYMENT DISPLAY FIXES
 * ============================================================================ */

/* Fix payment amount display */
.payment-amount {
  font-weight: 600;
  color: #059669; /* Green for positive amounts */
}

.payment-amount.negative {
  color: #dc2626; /* Red for negative amounts */
}

.payment-amount.pending {
  color: #d97706; /* Orange for pending */
}

/* Remove unwanted minus signs and red text */
.payment-display .unwanted-minus,
.payment-display .unwanted-red {
  display: none !important;
}

/* ============================================================================
 * FILE MANAGEMENT MOBILE OPTIMIZATION
 * ============================================================================ */

/* Enhanced file management mobile interface */
.mobile-file-upload {
  min-height: 80px;
  padding: 20px;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  text-align: center;
  touch-action: manipulation;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  transition: all 0.3s ease;
}

.mobile-file-upload:hover {
  border-color: #3b82f6;
  background: #eff6ff;
}

.mobile-file-upload:active {
  background-color: #dbeafe;
  transform: scale(0.98);
}

.mobile-file-upload.dragover {
  border-color: #10b981;
  background: #ecfdf5;
  transform: scale(1.02);
}

/* Mobile file list improvements */
.mobile-file-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}

.mobile-file-item {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.2s;
}

.mobile-file-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.mobile-file-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 6px;
  flex-shrink: 0;
}

.mobile-file-info {
  flex: 1;
  min-width: 0;
}

.mobile-file-name {
  font-weight: 500;
  font-size: 16px;
  color: #1f2937;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-file-meta {
  font-size: 14px;
  color: #6b7280;
}

.mobile-file-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.mobile-file-action {
  min-height: 36px;
  min-width: 36px;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: white;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-file-action:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

/* Mobile photo gallery improvements */
.mobile-photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 16px;
}

.mobile-photo-item {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s;
}

.mobile-photo-item:hover {
  transform: scale(1.05);
}

/* Mobile file upload progress */
.mobile-upload-progress {
  background: #f3f4f6;
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
}

.mobile-upload-progress-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.mobile-upload-progress-fill {
  height: 100%;
  background: #3b82f6;
  transition: width 0.3s ease;
}

.mobile-upload-status {
  font-size: 14px;
  color: #6b7280;
  text-align: center;
}

/* ============================================================================
 * GENERAL MOBILE IMPROVEMENTS
 * ============================================================================ */

/* Enhanced touch target system */
.mobile-touch-target {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
}

/* Universal touch target enforcement */
@media (max-width: 767px) {
  /* All interactive elements must meet 44px minimum */
  button, 
  a[href], 
  input[type="button"], 
  input[type="submit"], 
  input[type="reset"],
  select,
  .clickable,
  .interactive {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  }
  
  /* Form inputs need 16px font to prevent iOS zoom */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea,
  select {
    font-size: 16px !important;
    min-height: 44px;
    padding: 12px 16px;
  }
  
  /* File upload areas */
  .file-upload-area,
  .upload-zone {
    min-height: 80px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: manipulation;
  }
  
  /* Mobile menu items */
.mobile-menu-item,
#mobileMenu a,
#mobileMenu button {
  min-height: 48px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  width: 100%;
  color: #374151 !important; /* Ensure dark text */
  background: transparent !important; /* Remove any background */
}
  
  /* Action buttons in cards/lists */
  .action-button,
  .file-action,
  .card-action {
    min-height: 44px;
    min-width: 44px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Better spacing on mobile */
.mobile-spacing {
  padding: 16px;
  margin: 8px 0;
}

/* Improve text readability on mobile */
.mobile-text {
  font-size: 16px;
  line-height: 1.5;
}

.mobile-text-small {
  font-size: 14px;
  line-height: 1.4;
}

/* ============================================================================
 * RESPONSIVE BREAKPOINTS
 * ============================================================================ */

/* Mobile-first approach - Standardized Tailwind breakpoints */
@media (max-width: 639px) {
  .mobile-only {
    display: block;
  }
  
  .desktop-only {
    display: none;
  }
  
  /* Ensure proper spacing on mobile */
  .mobile-container {
    padding: 16px;
    margin: 0;
  }
  
  /* Stack elements vertically on mobile */
  .mobile-stack {
    flex-direction: column;
    gap: 16px;
  }
}

@media (min-width: 640px) {
  .mobile-only {
    display: none;
  }
  
  .desktop-only {
    display: block;
  }
  
  /* Restore horizontal layout on larger screens */
  .mobile-stack {
    flex-direction: row;
    gap: 24px;
  }
}

/* Standardized breakpoint system */
@media (max-width: 639px) {
  /* Small mobile devices */
  .sm-mobile-only { display: block; }
  .sm-mobile-hidden { display: none; }
}

@media (min-width: 640px) and (max-width: 767px) {
  /* Large mobile devices */
  .md-mobile-only { display: block; }
  .md-mobile-hidden { display: none; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet devices */
  .tablet-only { display: block; }
  .tablet-hidden { display: none; }
}

@media (min-width: 1024px) {
  /* Desktop devices */
  .desktop-only { display: block; }
  .desktop-hidden { display: none; }
}

/* ============================================================================
 * ACCESSIBILITY IMPROVEMENTS
 * ============================================================================ */

/* Enhanced mobile accessibility */
.mobile-focus:focus {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

.mobile-focus:focus-visible {
  outline: 3px solid #3b82f6;
  outline-offset: 2px;
}

/* Better contrast for mobile */
.mobile-high-contrast {
  color: #1f2937;
  background: #ffffff;
}

/* Mobile screen reader support */
@media (max-width: 767px) {
  .mobile-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  
  /* Improve touch target visibility for accessibility */
  .mobile-touch-target:focus {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    background: rgba(59, 130, 246, 0.1);
  }
  
  /* Better text contrast */
  .mobile-text {
    color: #1f2937;
    line-height: 1.6;
  }
  
  .mobile-text-small {
    color: #6b7280;
    line-height: 1.5;
  }
  
  /* Improve form accessibility */
  .mobile-form-label {
    display: block;
    font-weight: 500;
    color: #374151;
    margin-bottom: 8px;
    font-size: 16px;
  }
  
  .mobile-form-error {
    color: #dc2626;
    font-size: 14px;
    margin-top: 4px;
  }
  
  .mobile-form-help {
    color: #6b7280;
    font-size: 14px;
    margin-top: 4px;
  }
}

/* Mobile keyboard navigation */
@media (max-width: 767px) {
  .mobile-keyboard-focus:focus {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    background: rgba(59, 130, 246, 0.1);
  }
  
  /* Skip to content link for mobile */
  .mobile-skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #3b82f6;
    color: white;
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 10000;
  }
  
  .mobile-skip-link:focus {
    top: 6px;
  }
}

/* ============================================================================
 * PERFORMANCE OPTIMIZATIONS
 * ============================================================================ */

/* Smooth scrolling for mobile */
.mobile-smooth-scroll {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Mobile performance optimizations */
@media (max-width: 767px) {
  /* Remove the problematic overarching animation speed rule */
  /* Individual animations should be controlled separately */
  
  /* Fix home page animation speeds on mobile */
  .scroll-indicator {
    animation: bounce 3s infinite !important; /* Slow down bounce animation */
  }
  
  .scroll-arrow {
    animation: arrow-bounce 2.5s infinite !important; /* Slow down arrow bounce */
  }
  
  .floating-animation {
    animation: floating 4s ease-in-out infinite !important; /* Slow down floating animation */
  }
  
  /* Fix loading spinner speeds on mobile */
  .loading-spinner,
  .spinner,
  .loading,
  .fa-spinner,
  .spinner-border,
  .animate-spin {
    animation: spin 1s linear infinite !important; /* Normal speed for spinners */
  }
  
  /* Fix other common animations on mobile */
  .pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
  }
  
  .bounce {
    animation: bounce 1s infinite !important;
  }
  
  .fade-in {
    animation: fadeIn 0.5s ease-in-out !important;
  }
  
  .slide-in {
    animation: slideIn 0.3s ease-out !important;
  }
  
  /* Ensure smooth animations on mobile */
  .animate-in {
    animation-duration: 0.8s !important; /* Slower fade in on mobile */
  }
  
  /* Optimize images for mobile */
  img {
    max-width: 100%;
    height: auto;
  }
  
  /* Reduce box shadows on mobile for better performance */
  .mobile-reduced-shadow {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Optimize scrolling */
  .mobile-smooth-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Reduce layout shifts */
  .mobile-stable-layout {
    contain: layout;
  }
}

/* Optimize animations for mobile */
@media (prefers-reduced-motion: reduce) {
  .mobile-animation {
    animation: none;
    transition: none;
  }
}

/* Mobile-specific performance classes */
.mobile-optimized {
  will-change: auto;
  transform: translateZ(0);
}

.mobile-lazy-load {
  loading: lazy;
}

/* Mobile battery optimization */
@media (max-width: 767px) {
  .mobile-battery-optimized {
    /* Reduce background animations */
    animation: none;
    
    /* Use simpler gradients */
    background: #f9fafb;
  }
}

/* ============================================================================
 * MOBILE ANIMATION KEYFRAMES
 * ============================================================================ */

/* Define standard animation keyframes for mobile */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================================================
 * SPECIFIC COMPONENT FIXES
 * ============================================================================ */

/* Fix client list button alignment */
.client-item .button-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
}

@media (min-width: 640px) {
  .client-item .button-group {
    flex-direction: row;
    gap: 12px;
    width: auto;
    margin-top: 0;
  }
}

/* Enhanced mobile modal system */
.mobile-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.mobile-modal-content {
  background: white;
  border-radius: 12px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  position: relative;
}

.mobile-modal-header {
  padding: 20px 20px 0 20px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 20px;
}

.mobile-modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.mobile-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  min-height: 44px;
  min-width: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.mobile-modal-close:hover {
  background: #f3f4f6;
}

.mobile-modal-body {
  padding: 0 20px 20px 20px;
}

.mobile-modal-footer {
  padding: 20px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.mobile-modal-button {
  min-height: 44px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.mobile-modal-button.primary {
  background: #3b82f6;
  color: white;
}

.mobile-modal-button.primary:hover {
  background: #2563eb;
}

.mobile-modal-button.secondary {
  background: white;
  color: #374151;
  border-color: #d1d5db;
}

.mobile-modal-button.secondary:hover {
  background: #f9fafb;
}

/* Fix schedule add phase modal on mobile */
#addPhaseModal .modal-content {
  margin: 16px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}

/* Fix payment form on mobile */
.payment-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 640px) {
  .payment-form .form-row {
    flex-direction: row;
    gap: 24px;
  }
}

/* Enhanced mobile table system */
.mobile-table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.mobile-table {
  min-width: 600px;
  width: 100%;
  border-collapse: collapse;
}

.mobile-table th,
.mobile-table td {
  padding: 12px 8px;
  font-size: 14px;
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
}

.mobile-table th {
  background: #f9fafb;
  font-weight: 600;
  color: #374151;
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-table tr:hover {
  background: #f9fafb;
}

/* Mobile card-based table alternative */
.mobile-table-cards {
  display: none;
}

@media (max-width: 639px) {
  .mobile-table-container {
    display: none;
  }
  
  .mobile-table-cards {
    display: block;
  }
  
  .mobile-table-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  }
  
  .mobile-table-card-header {
    font-weight: 600;
    font-size: 16px;
    color: #1f2937;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f3f4f6;
  }
  
  .mobile-table-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f9fafb;
  }
  
  .mobile-table-card-row:last-child {
    border-bottom: none;
  }
  
  .mobile-table-card-label {
    font-weight: 500;
    color: #6b7280;
    font-size: 14px;
  }
  
  .mobile-table-card-value {
    color: #1f2937;
    font-size: 14px;
    text-align: right;
  }
  
  .mobile-table-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f3f4f6;
  }
  
  .mobile-table-card-action {
    min-height: 36px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .mobile-table-card-action:hover {
    background: #f9fafb;
    border-color: #9ca3af;
  }
}

/* ============================================================================
 * UTILITY CLASSES
 * ============================================================================ */

/* Mobile utility classes */
.mobile-hidden {
  display: none !important;
}

.mobile-visible {
  display: block !important;
}

.mobile-full-width {
  width: 100% !important;
}

.mobile-center {
  text-align: center !important;
}

.mobile-p-4 {
  padding: 16px !important;
}

.mobile-m-4 {
  margin: 16px !important;
}

/* ============================================================================
 * HERO SECTION MOBILE FIXES
 * ============================================================================ */

/* Fix hero section text cutoff on mobile */
@media (max-width: 767px) {
  .hero-section {
    padding-top: 6rem !important; /* Account for fixed header */
    padding-bottom: 3rem !important;
  }
  
  /* Ensure hero text is properly sized and spaced */
  .hero-section h1 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Better mobile hero content spacing */
  .hero-section p {
    font-size: 1.125rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* Mobile hero button improvements */
  .hero-section .btn-primary,
  .hero-section .btn-secondary {
    min-height: 48px !important;
    padding: 12px 24px !important;
    font-size: 16px !important;
    margin-bottom: 0.75rem !important;
  }
  
  /* Mobile hero list improvements */
  .hero-section ul {
    margin-top: 1.5rem !important;
    margin-bottom: 2rem !important;
  }
  
  .hero-section li {
    margin-bottom: 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
  }
}

/* ============================================================================
 * BROWSER-SPECIFIC FIXES
 * ============================================================================ */

/* iOS Safari fixes */
@supports (-webkit-touch-callout: none) {
  .mobile-ios-fix {
    -webkit-appearance: none;
    border-radius: 0;
  }
  
  .mobile-ios-input {
    font-size: 16px;
    transform: translateZ(0);
  }
}

/* Android Chrome fixes */
@supports (-webkit-appearance: none) and (display: grid) {
  .mobile-android-fix {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ============================================================================
 * MOBILE MENU BUTTON FIXES
 * ============================================================================ */

/* Remove white background from mobile menu button on all pages */
#mobileMenuToggle,
.mobile-menu-btn,
.mobile-menu-button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Ensure proper button styling */
#mobileMenuToggle:focus,
.mobile-menu-btn:focus,
.mobile-menu-button:focus {
  outline: 2px solid #3b82f6 !important;
  outline-offset: 2px !important;
  background: transparent !important;
}

/* Remove any inherited background colors */
#mobileMenuToggle *,
.mobile-menu-btn *,
.mobile-menu-button * {
  background: transparent !important;
}

/* ============================================================================
 * CONTRACTOR PROFILE MOBILE FIXES
 * ============================================================================ */

/* Fix client link copy button positioning on mobile */
@media (max-width: 767px) {
  /* Client link container mobile layout */
  .client-link-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  
  /* Client link input and button wrapper */
  .client-link-input-wrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
  }
  
  /* Client link input field */
  #clientLink {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 12px !important;
    font-size: 14px !important;
  }
  
  /* Copy button mobile styling */
  button[onclick="copyClientLink()"] {
    width: 100% !important;
    min-height: 44px !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  
  /* Ensure the button text and icon are properly sized */
  button[onclick="copyClientLink()"] svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }
  
  button[onclick="copyClientLink()"] span {
    font-size: 16px !important;
    font-weight: 500 !important;
  }
  
  /* Client link section container */
  .client-link-section {
    padding: 16px !important;
    margin: 0 !important;
  }
  
  /* Ensure proper spacing in the branding section */
  .branding-section-container {
    padding: 16px !important;
    margin: 0 !important;
  }
}

/* ============================================================================
 * CONTRACTOR FILES PAGE MOBILE HEADER FIX
 * ============================================================================ */

/* Stack client name and current project vertically on mobile */
@media (max-width: 767px) {
  .client-info-header .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  
  .client-info-header .text-right {
    text-align: left !important;
  }
  
  /* Optimize file item layout for mobile */
  .file-item .flex.items-center.justify-between {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }
  
  /* File info section - ensure proper spacing */
  .file-item .flex.items-center.space-x-3 {
    width: 100% !important;
    min-width: 0 !important;
  }
  
  /* File name and metadata - prevent overflow */
  .file-item .flex.items-center.space-x-3 > div:last-child {
    flex: 1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  .file-item .flex.items-center.space-x-3 > div:last-child p {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Action buttons section - ensure all buttons are visible */
  .file-item .flex.items-center.space-x-2 {
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    flex-wrap: wrap !important;
  }
  
  /* Individual action buttons - ensure proper touch targets */
  .file-item .flex.items-center.space-x-2 button {
    min-height: 36px !important;
    min-width: 36px !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    transition: all 0.2s !important;
  }
  
  .file-item .flex.items-center.space-x-2 button:hover {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
  }
  
  /* Ensure SVG icons in buttons are properly sized */
  .file-item .flex.items-center.space-x-2 button svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
  }
  
  /* Reduce file item padding on mobile for better density */
  .file-item {
    padding: 0.75rem 1rem !important;
  }
  
  /* File icon sizing for mobile */
  .file-item .w-8.h-8 {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
  }
  
  /* File icon SVG sizing */
  .file-item .w-8.h-8 svg {
    width: 20px !important;
    height: 20px !important;
  }
}

/* ============================================================================
 * CONTRACTOR SELECTIONS PAGE MOBILE GALLERY FIX
 * ============================================================================ */

/* Change gallery layout to 2 photos wide on mobile instead of 1 */
@media (max-width: 767px) {
  .items-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  
  /* Ensure proper spacing and sizing for gallery items on mobile */
  .items-grid > div {
    min-width: 0 !important;
    overflow: hidden !important;
  }
  
  /* Optimize image sizing within gallery items */
  .items-grid img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 8px !important;
  }
  
  /* Ensure text content in gallery items is properly sized */
  .items-grid p,
  .items-grid h3,
  .items-grid h4 {
    font-size: 14px !important;
    line-height: 1.4 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  
  /* Optimize button sizing in gallery items */
  .items-grid button {
    min-height: 36px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
  }
}