/* ===== Mobile Touch Optimizations ===== */

/* Touch Device Specific Styles */
@media (hover: none) and (pointer: coarse) {
  
  /* Remove hover effects and add active states */
  .card:hover,
  .nav-links a:hover,
  .styled-table tbody tr:hover,
  .mobile-row:hover,
  .btn:hover,
  .brand:hover {
    transform: none !important;
    box-shadow: none !important;
    background: none !important;
  }
  
  /* Add active states for touch feedback */
  .card:active {
    transform: scale(0.98) !important;
    transition: transform 0.1s ease !important;
  }
  
  .nav-links a:active {
    background: rgba(0, 255, 255, 0.2) !important;
    transform: scale(0.95) !important;
  }
  
  .btn:active,
  .card a:active,
  .card button:active {
    transform: scale(0.95) !important;
    transition: transform 0.1s ease !important;
  }
  
  .brand:active {
    transform: scale(0.98) !important;
  }
  
  /* Touch-friendly table interactions */
  .styled-table tbody tr:active {
    background: rgba(0, 255, 255, 0.15) !important;
    transform: scale(0.99) !important;
  }
  
  .mobile-row:active {
    background: rgba(0, 255, 255, 0.15) !important;
    transform: scale(0.99) !important;
  }
  
  /* Touch-friendly modal interactions */
  .modal-content:active {
    transform: scale(0.99) !important;
  }
  
  /* Touch-friendly form elements */
  .form-control:active,
  .form-select:active {
    transform: scale(0.98) !important;
    border-color: #00ffff !important;
  }
  
  /* Touch-friendly status badges */
  .status-badge:active {
    transform: scale(0.95) !important;
  }
}

/* iOS Specific Optimizations */
@supports (-webkit-touch-callout: none) {
  
  /* Fix iOS viewport issues */
  .modal-content {
    -webkit-overflow-scrolling: touch;
    max-height: 90vh;
    overflow-y: auto;
  }
  
  /* Fix iOS input zoom */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px !important;
    transform: translateZ(0);
  }
  
  /* Fix iOS button styling */
  button,
  .btn {
    -webkit-appearance: none;
    border-radius: 8px;
  }
  
  /* Fix iOS scroll bounce */
  body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: none;
  }
  
  /* Fix iOS modal backdrop */
  .modal-backdrop {
    -webkit-backdrop-filter: blur(5px);
  }
}

/* Android Specific Optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
  
  /* Fix Android input styling */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  select,
  textarea {
    -webkit-appearance: none;
    border-radius: 8px;
  }
  
  /* Fix Android button styling */
  button,
  .btn {
    -webkit-appearance: none;
    border-radius: 8px;
  }
}

/* High DPI Display Optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  
  /* Optimize images for retina displays */
  .logo-img,
  .card img,
  .modal img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
  
  /* Optimize borders for retina */
  .card,
  .modal-content,
  .styled-table {
    border-width: 0.5px;
  }
}

/* Landscape Orientation Optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  
  /* Reduce navbar height in landscape */
  nav {
    height: 50px !important;
  }
  
  .nav-links {
    top: 50px !important;
    height: calc(100vh - 50px) !important;
  }
  
  /* Optimize modal for landscape */
  .modal-dialog {
    max-height: 90vh !important;
  }
  
  .modal-content {
    max-height: 85vh !important;
  }
  
  /* Reduce hero section height */
  .hero {
    padding: 1rem 2rem 3rem !important;
  }
  
  .hero h1 {
    font-size: 1.8rem !important;
  }
  
  .hero p {
    font-size: 0.9rem !important;
  }
  
  /* Optimize cards for landscape */
  .cards-container {
    padding: 1rem !important;
    gap: 0.8rem !important;
  }
  
  .card {
    padding: 1rem !important;
  }
  
  .card h2 {
    font-size: 1.1rem !important;
  }
  
  /* Optimize table for landscape */
  .styled-table {
    font-size: 0.8rem !important;
  }
  
  .styled-table th,
  .styled-table td {
    padding: 0.5rem 0.3rem !important;
  }
}

/* Very Small Screens (320px and below) */
@media (max-width: 320px) {
  
  /* Ultra-compact navbar */
  nav {
    padding: 0 1rem !important;
  }
  
  .brand {
    font-size: 1rem !important;
  }
  
  .nav-links {
    width: 100% !important;
    right: 0 !important;
  }
  
  /* Ultra-compact cards */
  .cards-container {
    padding: 0.8rem !important;
    gap: 0.6rem !important;
  }
  
  .card {
    padding: 1rem 0.8rem !important;
  }
  
  .card h2 {
    font-size: 1rem !important;
  }
  
  .card a,
  .card button {
    padding: 0.8rem 1rem !important;
    font-size: 0.9rem !important;
  }
  
  /* Ultra-compact modal */
  .modal-dialog {
    margin: 0.3rem !important;
  }
  
  .modal-content {
    border-radius: 8px !important;
  }
  
  .modal-header,
  .modal-body,
  .modal-footer {
    padding: 0.8rem !important;
  }
  
  /* Ultra-compact table */
  .styled-table {
    font-size: 0.75rem !important;
  }
  
  .styled-table th,
  .styled-table td {
    padding: 0.4rem 0.2rem !important;
  }
  
  /* Ultra-compact status badges */
  .status-badge {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.7rem !important;
  }
}

/* Performance Optimizations for Low-End Devices */
@media (max-width: 480px) {
  
  /* Disable complex animations on low-end devices */
  .card::before,
  .nav-links a::before,
  .btn::before {
    display: none !important;
  }
  
  /* Simplify loading animations */
  .loading-spinner {
    animation-duration: 1s !important;
  }
  
  .loading-dots {
    animation-duration: 0.8s !important;
  }
  
  /* Reduce particle effects */
  #particles-js {
    display: none !important;
  }
  
  /* Simplify scroll effects */
  .scroll-indicator {
    display: none !important;
  }
  
  /* Disable complex transforms */
  .card:hover,
  .styled-table tbody tr:hover,
  .mobile-row:hover {
    transform: none !important;
  }
}

/* Dark Mode Optimizations */
@media (prefers-color-scheme: dark) {
  
  /* Optimize for dark mode */
  .modal-content {
    background: rgba(0, 0, 0, 0.9) !important;
    color: white !important;
  }
  
  .form-control,
  .form-select {
    background: rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
  }
  
  .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  
  /* Disable all animations for accessibility */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Remove transforms */
  .card,
  .styled-table tbody tr,
  .mobile-row,
  .nav-links a,
  .btn {
    transform: none !important;
  }
  
  /* Remove hover effects */
  .card:hover,
  .styled-table tbody tr:hover,
  .mobile-row:hover,
  .nav-links a:hover,
  .btn:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Print Optimizations */
@media print {
  
  /* Remove all animations and effects for printing */
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
    background: white !important;
    color: black !important;
  }
  
  /* Hide non-essential elements */
  nav,
  .burger,
  .scroll-indicator,
  .scroll-to-top,
  #particles-js {
    display: none !important;
  }
  
  /* Optimize layout for print */
  .card {
    break-inside: avoid;
    border: 1px solid #ccc !important;
  }
  
  .modal-content {
    position: static !important;
    box-shadow: none !important;
  }
}