/**
 * Non-critical CSS — loaded deferred (media="print" then media="all")
 * to reduce unused CSS on initial paint (Lighthouse).
 * Contains: print, reduced-motion, PWA safe areas, scrollbar, enhanced
 * accessibility, chart alternatives, mobile/touch rules.
 */

/* Sparkline animations — deferred, only needed after initial render */
@keyframes sparkline-draw {
  0% {
    stroke-dashoffset: 1000;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes sparkline-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* High contrast mode support — deferred (not needed for landing first paint) */
@media (prefers-contrast: high) {
  * {
    border-color: currentColor !important;
  }
}

/* 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;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}

/* Mobile-specific optimizations */
@media (max-width: 600px) {
  body {
    font-size: 16px;
  }
}

/* PWA safe areas (for notched devices) */
@supports (padding-top: env(safe-area-inset-top)) {
  @media (max-width: 768px) and (display-mode: standalone) {
    body {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }

  @media (max-width: 768px) {
    body.pwa-mode {
      padding-top: env(safe-area-inset-top);
      padding-bottom: env(safe-area-inset-bottom);
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
  }
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Dark mode scrollbar */
@media (prefers-color-scheme: dark) {
  ::-webkit-scrollbar-track {
    background: #2d2d2d;
  }

  ::-webkit-scrollbar-thumb {
    background: #555;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #888;
  }
}

/* Enhanced accessibility mode - opt-in via body.enhanced-accessibility class */
body.enhanced-accessibility button,
body.enhanced-accessibility [role='button'],
body.enhanced-accessibility input[type='checkbox'],
body.enhanced-accessibility input[type='radio'],
body.enhanced-accessibility a {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.enhanced-accessibility a[href] {
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body.enhanced-accessibility a[href]:hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

body.enhanced-accessibility input,
body.enhanced-accessibility select,
body.enhanced-accessibility textarea {
  border: 2px solid #ddd !important;
  padding: 12px !important;
}

body.enhanced-accessibility input:focus,
body.enhanced-accessibility select:focus,
body.enhanced-accessibility textarea:focus {
  border-color: #4caf50 !important;
  outline: 2px solid #4caf50 !important;
  outline-offset: 2px !important;
}

body.enhanced-accessibility input[type='checkbox'],
body.enhanced-accessibility input[type='radio'] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

/* Table alternatives for charts */
html [data-chart-alternative] {
  display: none;
}

html.chart-alternatives [data-chart-alternative] {
  display: block !important;
}

html.chart-alternatives canvas,
html.chart-alternatives svg[role='img'] {
  display: none !important;
}

/* Mobile responsive fixes - prevent horizontal scroll */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  .trip-planner-container,
  .trip-planner-container * {
    max-width: 100%;
  }

  main {
    overflow-x: hidden;
    max-width: 100vw;
  }
}

/* Touch target improvements for mobile and tablet (WCAG 2.1 AAA) */
@media (max-width: 1024px) {
  button,
  a[role='button'],
  [role='button'] {
    min-height: 48px;
    min-width: 48px;
  }

  input[type='text'],
  input[type='email'],
  input[type='password'],
  input[type='search'],
  input[type='tel'],
  input[type='url'] {
    min-height: 48px;
  }

  button:not(.no-min-size),
  a[role='button']:not(.no-min-size) {
    padding: 8px 12px;
  }

  /* Ensure inline text links have minimum touch target area */
  /* Exception: links that already have min-h-[48px] or min-h-[44px] class are excluded */
  a:not([class*='button']):not([class*='btn']):not([class*='min-h-\[48px\]']):not(
      [class*='min-h-\[44px\]']
    ):not([class*='min-h-11']):not([class*='min-h-12']) {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
  }
}