/**
 * Browser Compatibility CSS
 * Fallbacks and fixes for older browsers
 */

/* ============================================
   CSS Variables Fallbacks (for IE11)
   ============================================ */

/* Fallback values for browsers that don't support CSS variables */
.legacy-browser {
  /* Primary Colors */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-900: #1e3a8a;
  
  /* Accent Colors */
  --accent-purple: #8b5cf6;
  --accent-teal: #14b8a6;
  --accent-emerald: #10b981;
  
  /* Neutral Colors */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  
  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
}

/* ============================================
   Flexbox Fallbacks (for IE10)
   ============================================ */

/* Use -ms-flexbox for IE10 */
.flex,
.welcome-bar,
.header-actions,
.nav-actions {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.flex-column {
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}

.flex-row {
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}

.justify-center {
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

.justify-between {
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.align-center {
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

/* ============================================
   Grid Fallbacks (for IE11 and older)
   ============================================ */

/* Use flexbox fallback for grid */
.upload-section,
.features-grid,
.trust-grid {
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
}

/* Grid fallback using flexbox */
@supports (display: grid) {
  .upload-section,
  .features-grid,
  .trust-grid {
    display: grid;
  }
}

/* ============================================
   Viewport & safe area utilities
   ============================================ */

/* Use dynamic viewport height when supported */
.app-viewport-min {
  min-height: 100vh;
  min-height: var(--viewport-height, 100vh);
}

/* Safe area padding for fixed/full-bleed elements */
.safe-area-padding {
  padding-top: max(0px, env(safe-area-inset-top));
  padding-right: max(0px, env(safe-area-inset-right));
  padding-bottom: max(0px, env(safe-area-inset-bottom));
  padding-left: max(0px, env(safe-area-inset-left));
}

/* ============================================
   Mobile Responsiveness Improvements
   ============================================ */

/* Base mobile styles */
@media (max-width: 768px) {
  /* Touch-friendly tap targets for primary actions (avoid min-width on all buttons) */
  .primary-btn,
  .logout-btn,
  .danger-btn,
  .nav-btn,
  .btn-primary,
  button.primary-btn,
  a.logout-btn,
  input[type="submit"]:not([style*="min-width"]) {
    min-height: 44px;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  
  /* Improve table scrolling on mobile */
  .table-scroll-container {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
  
  /* Stack elements vertically on mobile */
  .welcome-bar,
  .header-actions,
  .nav-actions {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }
  
  /* Full width buttons on mobile */
  .primary-btn,
  .danger-btn,
  .logout-btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  /* Improve card spacing on mobile */
  .card {
    margin-bottom: 1rem;
    padding: 1rem;
  }
  
  /* Better form input sizing on mobile */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="file"],
  select,
  textarea {
    font-size: 16px; /* Prevents zoom on iOS */
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Hide less important elements on mobile */
  .desktop-only {
    display: none !important;
  }
  
  /* Show mobile-specific elements */
  .mobile-only {
    display: block !important;
  }
  
  /* Improve modal sizing on mobile and respect safe areas */
  .modal-content,
  .config-modal {
    width: 95%;
    max-width: 95%;
    margin: 1rem auto;
    max-height: 90vh;
    max-height: min(90vh, var(--viewport-height, 90vh));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: max(1rem, env(safe-area-inset-left));
    margin-right: max(1rem, env(safe-area-inset-right));
  }
  
  .overlay,
  .modal {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  
  /* Better table display on mobile */
  table {
    font-size: 0.75rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  th, td {
    padding: 0.5rem;
    white-space: nowrap;
  }
  
  /* Stack KPI cards on mobile */
  .kpi-row {
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  
  .kpi-card {
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575px) {
  .container {
    padding: 0.5rem;
  }
  
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.125rem; }
  h4 { font-size: 1rem; }
  
  /* Smaller buttons */
  .primary-btn,
  .danger-btn {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
  }
  
  /* Compact cards */
  .card {
    padding: 0.75rem;
  }
  
  /* Hide icons in tight spaces */
  .icon-text {
    display: none;
  }
  
  .icon-only {
    display: inline-block;
  }
}

/* ============================================
   Touch Device Optimizations
   ============================================ */

@media (hover: none) and (pointer: coarse) {
  /* Touch device optimizations */
  button:hover,
  a:hover {
    /* Reduce hover effects on touch to avoid sticky states */
    transform: none;
  }
  
  /* Larger tap targets for interactive elements (padding, not min-width to avoid layout breaks) */
  .primary-btn,
  .logout-btn,
  .danger-btn,
  .nav-btn,
  .btn-primary,
  .clickable {
    min-height: 48px;
    padding: 0.75rem 1rem;
  }
  
  /* Smooth momentum scrolling on iOS */
  .table-scroll-container,
  .modal-content,
  .config-modal,
  .overlay,
  [style*="overflow: auto"],
  [style*="overflow: scroll"] {
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================
   Print Styles
   ============================================ */

@media print {
  .no-print,
  button,
  .header-actions,
  .nav-actions,
  #configTab,
  #columnSettingsTab {
    display: none !important;
  }
  
  .card {
    page-break-inside: avoid;
    border: 1px solid #000;
  }
  
  table {
    page-break-inside: auto;
  }
  
  tr {
    page-break-inside: avoid;
    page-break-after: auto;
  }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */

@media (prefers-contrast: high) {
  .card {
    border: 2px solid;
  }
  
  button {
    border: 2px solid;
  }
  
  a {
    text-decoration: underline;
  }
}

/* ============================================
   Reduced Motion Support
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================
   IE11 Specific Fixes
   ============================================ */

/* IE11 doesn't support backdrop-filter */
.legacy-browser .overlay {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* IE11 flexbox fixes */
.legacy-browser .flex {
  display: -ms-flexbox;
}

.legacy-browser .flex-column {
  -ms-flex-direction: column;
}

.legacy-browser .flex-row {
  -ms-flex-direction: row;
}

/* IE11 grid fallback */
.legacy-browser .upload-section {
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
}

.legacy-browser .upload-box {
  -ms-flex: 1 1 300px;
  flex: 1 1 300px;
}

/* ============================================
   Safari Specific Fixes
   ============================================ */

/* Fix Safari flexbox bugs */
@supports (-webkit-appearance: none) {
  .safari-fix {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* Fix Safari sticky positioning */
@supports (-webkit-appearance: none) {
  .sticky-header {
    position: -webkit-sticky;
    position: sticky;
  }
}

/* ============================================
   Accessibility Improvements
   ============================================ */

/* Focus styles for keyboard navigation */
*:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000;
  color: #fff;
  padding: 8px;
  text-decoration: none;
  z-index: 10000;
}

.skip-link:focus {
  top: 0;
}

/* ============================================
   Loading States
   ============================================ */

.loading {
  position: relative;
  pointer-events: none;
  opacity: 0.6;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #3b82f6;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Fallback for browsers without animation support */
@supports not (animation: spin 0.6s linear infinite) {
  .loading::after {
    display: none;
  }
}