@import './lib/animations.css';

/* Import VOMS Design System */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Dynamic viewport height variables - fixes Android Chrome URL bar issues */
:root {
  --vh: 1vh; /* Fallback for older browsers */
  --dvh: 1dvh; /* Dynamic viewport height (new standard) */
}

/* Use dvh where supported, fallback to vh */
@supports (height: 100dvh) {
  :root {
    --vh: 1dvh;
  }
}

html, body, #root {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
}

/* Safe area support - handled per-component for better control */
/* Removed global body padding to prevent double padding issues */
/* Individual components (BottomNav, Header, FAB, etc.) handle their own safe areas */

/* Global VOMS Styles */
* {
  box-sizing: border-box;
}

/* Touch target minimum size for mobile */
button, input, select, textarea, [role="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* Focus styles for accessibility - WCAG compliant */
*:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Remove focus outline for mouse users (but keep for keyboard) */
*:focus:not(:focus-visible) {
  outline: none;
}

/* Enhanced focus for interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #2563eb;
  outline-offset: 3px;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
}

/* Focus for modals and dialogs */
[role="dialog"]:focus-visible,
[role="alertdialog"]:focus-visible {
  outline: 4px solid #2563eb;
  outline-offset: 4px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  * {
    border-color: currentColor;
  }
}

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

/* Placeholder text contrast - WCAG AA compliant */
input::placeholder,
textarea::placeholder {
  color: #6b7280; /* neutral[500] - 4.6:1 contrast ratio on white */
}

/* Keyboard-aware layouts */
.keyboard-visible {
  /* Adjust padding when keyboard is visible on mobile */
  padding-bottom: env(keyboard-inset-height, 0);
}

/* Auto-scroll behavior for focused inputs */
input:focus,
textarea:focus,
select:focus {
  scroll-margin-top: 100px; /* Offset for auto-scroll */
}

/* Mobile keyboard handling */
@media (max-width: 768px) {
  /* Ensure inputs are visible when keyboard opens */
  input:focus,
  textarea:focus,
  select:focus {
    position: relative;
    z-index: 1;
  }
  
  /* Adjust viewport when keyboard is visible */
  .keyboard-visible {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height */
    overflow: hidden;
  }
  
  /* Prevent body scroll when keyboard is visible */
  body.keyboard-visible {
    position: fixed;
    width: 100%;
  }
}

/* Disabled state contrast */
input:disabled,
textarea:disabled,
select:disabled,
button:disabled {
  color: #4b5563; /* neutral[600] - 7:1 contrast ratio for better visibility */
  opacity: 0.7; /* Slight opacity reduction while maintaining contrast */
}

/* Momentum scrolling for better mobile UX - apply to scrollable containers */
[style*="overflow"], 
[style*="overflow-x"], 
[style*="overflow-y"],
.overflow-auto,
.overflow-x-auto,
.overflow-y-auto,
.overflow-scroll,
.overflow-x-scroll,
.overflow-y-scroll {
  -webkit-overflow-scrolling: touch;
}

/* Custom tap highlights - remove default blue square */
* {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

/* Touch feedback for mobile - Active states */
@media (max-width: 767px) {
  /* Cards and interactive elements */
  .kanban-card:active,
  .module-card:active,
  .data-table-mobile-card:active,
  button:active:not(:disabled),
  [role="button"]:active {
    transform: scale(0.98) !important;
    opacity: 0.9;
  }
  
  /* Remove hover effects on touch devices */
  @media (hover: none) {
    *:hover {
      /* Disable hover-only interactions on touch devices */
    }
  }
}

/* Larger focus indicators on mobile */
@media (max-width: 768px) {
  *:focus-visible {
    outline: 4px solid #2563eb;
    outline-offset: 2px;
  }
  
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [role="button"]:focus-visible,
  [tabindex]:focus-visible {
    outline: 4px solid #2563eb;
    outline-offset: 4px;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
  }
}