/* 
 * iOS/macOS/iPad Responsive Enhancements for VulnX
 * Optimized for Apple devices with touch-friendly interfaces
 * Follows Apple Human Interface Guidelines
 */

/* iOS Viewport and Base Optimizations */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific styles */
  html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  
  body {
    -webkit-overflow-scrolling: touch;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* Enhanced Root Variables for Apple Design System */
:root {
  /* iOS-inspired Colors */
  --ios-blue: #007AFF;
  --ios-red: #FF3B30;
  --ios-orange: #FF9500;
  --ios-yellow: #FFCC00;
  --ios-green: #34C759;
  --ios-teal: #5AC8FA;
  --ios-purple: #AF52DE;
  --ios-pink: #FF2D92;
  
  /* iOS System Colors */
  --ios-background: #F2F2F7;
  --ios-secondary-background: #FFFFFF;
  --ios-tertiary-background: #F2F2F7;
  --ios-grouped-background: #F2F2F7;
  --ios-separator: rgba(60, 60, 67, 0.29);
  --ios-opaque-separator: #C6C6C8;
  
  /* iOS Text Colors */
  --ios-label: #000000;
  --ios-secondary-label: rgba(60, 60, 67, 0.6);
  --ios-tertiary-label: rgba(60, 60, 67, 0.3);
  --ios-quaternary-label: rgba(60, 60, 67, 0.18);
  
  /* Touch Target Sizes (44pt minimum per Apple HIG) */
  --touch-target-min: 44px;
  --touch-target-recommended: 48px;
  --touch-target-large: 56px;
  
  /* iOS Spacing System */
  --ios-spacing-xs: 4px;
  --ios-spacing-sm: 8px;
  --ios-spacing-md: 16px;
  --ios-spacing-lg: 24px;
  --ios-spacing-xl: 32px;
  --ios-spacing-2xl: 48px;
  
  /* iOS Border Radius */
  --ios-radius-sm: 8px;
  --ios-radius-md: 12px;
  --ios-radius-lg: 16px;
  --ios-radius-xl: 20px;
  
  /* iOS Shadows */
  --ios-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --ios-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --ios-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  --ios-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
}

/* Dark Mode Support for iOS */
@media (prefers-color-scheme: dark) {
  :root {
    --ios-background: #000000;
    --ios-secondary-background: #1C1C1E;
    --ios-tertiary-background: #2C2C2E;
    --ios-grouped-background: #000000;
    --ios-separator: rgba(84, 84, 88, 0.6);
    --ios-opaque-separator: #38383A;
    
    --ios-label: #FFFFFF;
    --ios-secondary-label: rgba(235, 235, 245, 0.6);
    --ios-tertiary-label: rgba(235, 235, 245, 0.3);
    --ios-quaternary-label: rgba(235, 235, 245, 0.18);
  }
}

/* iPhone Portrait (320px - 428px) */
@media screen and (max-width: 428px) {
  /* Base Layout Adjustments */
  .vulnapi-dashboard {
    padding: var(--ios-spacing-md);
    margin: 0;
    max-width: 100%;
  }
  
  .vulnapi-navbar-container {
    padding: var(--ios-spacing-sm) var(--ios-spacing-md);
  }
  
  /* Enhanced Card Layout for Mobile */
  .vulnapi-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--ios-spacing-md);
    margin-bottom: var(--ios-spacing-xl);
  }
  
  .vulnapi-card {
    background: var(--ios-secondary-background);
    border-radius: var(--ios-radius-lg);
    padding: var(--ios-spacing-lg) var(--ios-spacing-md);
    box-shadow: var(--ios-shadow-md);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--ios-separator);
    min-height: var(--touch-target-large);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .vulnapi-card:active {
    transform: scale(0.98);
    box-shadow: var(--ios-shadow-sm);
  }
  
  .vulnapi-card-title {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--ios-secondary-label);
    margin-bottom: var(--ios-spacing-xs);
  }
  
  .vulnapi-card-value {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--ios-label);
  }
  
  /* Touch-Friendly Navigation */
  .vulnapi-navbar-menu li a {
    padding: var(--ios-spacing-md) var(--ios-spacing-lg);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ios-radius-md);
    font-weight: 500;
  }
  
  /* Enhanced Mobile Tables */
  .vulnapi-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--ios-radius-md);
    box-shadow: var(--ios-shadow-md);
  }
  
  .vulnapi-table th,
  .vulnapi-table td {
    padding: var(--ios-spacing-md);
    min-width: 120px;
  }
  
  /* Charts Grid Mobile Optimization */
  .vulnapi-charts-grid {
    display: flex;
    flex-direction: column;
    gap: var(--ios-spacing-lg);
  }
  
  .vulnapi-charts-grid > div {
    border-radius: var(--ios-radius-lg);
    padding: var(--ios-spacing-lg);
    box-shadow: var(--ios-shadow-md);
    background: var(--ios-secondary-background);
  }
}

/* iPhone Landscape (568px - 926px width) */
@media screen and (min-width: 429px) and (max-width: 926px) and (orientation: landscape) {
  .vulnapi-cards {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--ios-spacing-lg);
  }
  
  .vulnapi-charts-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--ios-spacing-lg);
  }
}

/* iPad Portrait (768px - 834px) */
@media screen and (min-width: 768px) and (max-width: 834px) and (orientation: portrait) {
  .vulnapi-dashboard {
    max-width: 90%;
    margin: 0 auto;
    padding: var(--ios-spacing-xl);
  }
  
  .vulnapi-cards {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ios-spacing-xl);
  }
  
  .vulnapi-card {
    padding: var(--ios-spacing-xl);
    border-radius: var(--ios-radius-xl);
  }
  
  .vulnapi-charts-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--ios-spacing-xl);
  }
  
  /* iPad-specific table improvements */
  .vulnapi-table {
    border-radius: var(--ios-radius-lg);
  }
  
  .vulnapi-table th,
  .vulnapi-table td {
    padding: var(--ios-spacing-lg);
  }
}

/* iPad Landscape (1024px - 1366px) */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .vulnapi-dashboard {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--ios-spacing-2xl);
  }
  
  .vulnapi-cards {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ios-spacing-2xl);
  }
  
  .vulnapi-charts-grid {
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--ios-spacing-2xl);
  }
}

/* macOS Safari Optimizations */
@media screen and (min-width: 1367px) {
  .vulnapi-dashboard {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--ios-spacing-2xl);
  }
  
  .vulnapi-cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--ios-spacing-2xl);
  }
  
  /* Enhanced hover states for desktop */
  .vulnapi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ios-shadow-xl);
  }
}

/* CVE List Mobile Enhancements */
.cve-list-container {
  padding: var(--ios-spacing-md);
}

@media screen and (max-width: 428px) {
  .cve-item {
    background: var(--ios-secondary-background);
    border-radius: var(--ios-radius-lg);
    padding: var(--ios-spacing-lg);
    margin-bottom: var(--ios-spacing-md);
    box-shadow: var(--ios-shadow-md);
    border: 1px solid var(--ios-separator);
  }
  
  .cve-item:active {
    transform: scale(0.99);
    box-shadow: var(--ios-shadow-sm);
  }
  
  .cve-id {
    font-weight: 600;
    color: var(--ios-blue);
    font-size: var(--font-size-lg);
    margin-bottom: var(--ios-spacing-xs);
  }
  
  .cve-description {
    font-size: var(--font-size-sm);
    color: var(--ios-secondary-label);
    line-height: 1.4;
    margin-bottom: var(--ios-spacing-sm);
  }
  
  .cve-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ios-spacing-sm);
    align-items: center;
  }
  
  .cve-score {
    padding: var(--ios-spacing-xs) var(--ios-spacing-sm);
    border-radius: var(--ios-radius-sm);
    font-weight: 600;
    font-size: var(--font-size-xs);
    color: white;
  }
  
  .cve-date {
    font-size: var(--font-size-xs);
    color: var(--ios-tertiary-label);
  }
}

/* Enhanced Filter Panel for Mobile */
.filter-panel {
  background: var(--ios-secondary-background);
  border-radius: var(--ios-radius-lg);
  padding: var(--ios-spacing-lg);
  margin-bottom: var(--ios-spacing-lg);
  box-shadow: var(--ios-shadow-md);
  border: 1px solid var(--ios-separator);
}

@media screen and (max-width: 428px) {
  .filter-panel {
    position: sticky;
    top: 80px;
    z-index: 10;
  }
  
  .filter-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ios-spacing-md);
  }
  
  .filter-input {
    padding: var(--ios-spacing-md);
    border: 1px solid var(--ios-separator);
    border-radius: var(--ios-radius-md);
    font-size: var(--font-size-base);
    background: var(--ios-background);
    color: var(--ios-label);
    min-height: var(--touch-target-min);
  }
  
  .filter-input:focus {
    outline: none;
    border-color: var(--ios-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
  }
  
  .filter-button {
    background: var(--ios-blue);
    color: white;
    border: none;
    border-radius: var(--ios-radius-md);
    padding: var(--ios-spacing-md);
    font-weight: 600;
    font-size: var(--font-size-base);
    min-height: var(--touch-target-min);
    cursor: pointer;
    transition: background-color 0.2s ease;
  }
  
  .filter-button:active {
    background: #0056CC;
    transform: scale(0.98);
  }
}

/* Pagination Mobile Enhancements */
@media screen and (max-width: 428px) {
  .pagination {
    display: flex;
    justify-content: center;
    gap: var(--ios-spacing-sm);
    margin: var(--ios-spacing-xl) 0;
  }
  
  .pagination a,
  .pagination span {
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--ios-radius-md);
    text-decoration: none;
    font-weight: 500;
    color: var(--ios-blue);
    background: var(--ios-secondary-background);
    border: 1px solid var(--ios-separator);
  }
  
  .pagination .current {
    background: var(--ios-blue);
    color: white;
    border-color: var(--ios-blue);
  }
  
  .pagination a:active {
    transform: scale(0.95);
  }
}

/* Loading States and Animations */
.loading-spinner {
  width: 24px;
  height: 24px;
  border: 2px solid var(--ios-separator);
  border-top: 2px solid var(--ios-blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Pull-to-refresh indicator (Safari) */
@supports (-webkit-overflow-scrolling: touch) {
  .refresh-indicator {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ios-secondary-background);
    padding: var(--ios-spacing-sm) var(--ios-spacing-md);
    border-radius: var(--ios-radius-lg);
    box-shadow: var(--ios-shadow-lg);
    font-size: var(--font-size-sm);
    color: var(--ios-secondary-label);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
  }
  
  .refresh-indicator.show {
    opacity: 1;
  }
}

/* Safe Area Support for iPhone X and newer */
@supports (padding: max(0px)) {
  .vulnapi-navbar {
    padding-top: max(var(--ios-spacing-sm), env(safe-area-inset-top));
  }
  
  .vulnapi-dashboard {
    padding-left: max(var(--ios-spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--ios-spacing-md), env(safe-area-inset-right));
    padding-bottom: max(var(--ios-spacing-md), env(safe-area-inset-bottom));
  }
}

/* Accessibility Enhancements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .vulnapi-card {
    border: 2px solid var(--ios-label);
  }
  
  .filter-input {
    border: 2px solid var(--ios-label);
  }
  
  .filter-button {
    border: 2px solid var(--ios-label);
  }
}

/* Focus management for keyboard navigation on iPad */
@media (pointer: coarse) and (hover: none) {
  .focusable:focus {
    outline: 3px solid var(--ios-blue);
    outline-offset: 2px;
  }
}