/* Mobile Loading and Display Fixes */

/* Fix for iOS Safari 100vh issue - exclude landing page to prevent nested scrolling */
html, body {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body:not(.landing-page),
body:not(.landing-page) html {
  height: 100%;
}

/* Fix viewport height on mobile browsers */
:root {
  --vh: 1vh;
}

/* Ensure proper mobile rendering */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Fix for mobile loading issues - exclude landing page */
body:not(.landing-page) #__next {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  position: relative;
}

body.landing-page #__next {
  width: 100%;
  position: relative;
}

/* Prevent accidental horizontal scroll on mobile - but not on landing page sections */
body:not(.landing-page) main,
body:not(.landing-page) section {
  max-width: 100vw;
  overflow-x: hidden;
}

/* Fix for mobile navigation bar - exclude landing page nav to preserve fixed positioning */
body:not(.landing-page) nav {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Ensure images load properly on mobile */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Fix for mobile buttons and touch targets */
button, a, .MuiButtonBase-root {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  touch-action: manipulation;
}

/* Improve mobile form inputs */
input, textarea, select {
  font-size: 16px !important; /* Prevents zoom on iOS */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Fix for mobile modals and drawers */
.MuiDrawer-paper, .MuiModal-root {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Ensure proper z-index stacking on mobile */
.MuiAppBar-root {
  z-index: 1100 !important;
}

/* Fix for mobile loading states */
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  z-index: 9999;
}

@media (prefers-color-scheme: dark) {
  .loading-container {
    background: #121212;
  }
}

/* Mobile-specific media queries */
@media (max-width: 768px) {
  /* Fix mobile navigation - use smaller padding on mobile */
  .MuiContainer-root {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Ensure proper spacing on mobile */
  .MuiBox-root {
    word-break: break-word;
  }

  /* Fix mobile typography */
  h1, h2, h3, h4, h5, h6 {
    word-wrap: break-word;
    hyphens: auto;
  }

  /* Fix table horizontal scrolling on mobile */
  .MuiTableContainer-root {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Reduce table padding on mobile */
  .MuiTableCell-root {
    padding: 6px 8px !important;
    font-size: 0.8rem !important;
  }

  .MuiTableCell-head {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
  }

  /* Hide less important table columns on mobile via class */
  .hide-on-mobile,
  [data-hide-mobile="true"] {
    display: none !important;
  }

  /* Make dialogs near-fullscreen on mobile for professional feel */
  .MuiDialog-paper:not(.MuiDialog-paperWidthXs):not(.MuiDialog-paperFullScreen) {
    margin: 8px !important;
    max-width: calc(100% - 16px) !important;
    max-height: calc(100% - 16px) !important;
    border-radius: 12px !important;
  }

  /* Fix card layouts on mobile - tighter spacing */
  .MuiCard-root {
    margin-bottom: 8px;
  }

  /* Improve touch targets */
  .MuiIconButton-root {
    min-width: 40px;
    min-height: 40px;
  }

  /* Ensure images don't overflow */
  .MuiAvatar-root {
    flex-shrink: 0;
  }

  /* Compact chips on mobile */
  .MuiChip-root {
    height: 26px !important;
    font-size: 0.75rem !important;
  }

  .MuiChip-label {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* Better button sizing on mobile */
  .MuiButton-root {
    min-height: 36px;
    font-size: 0.8rem !important;
  }

  /* Snackbar positioning for bottom nav */
  .MuiSnackbar-root {
    bottom: 72px !important;
  }
}

/* Small mobile (< 360px) - extra compact */
@media (max-width: 360px) {
  .MuiContainer-root {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .MuiTableCell-root {
    padding: 4px 6px !important;
    font-size: 0.75rem !important;
  }
}

/* iOS-specific fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS only styles */
  body {
    cursor: pointer;
  }
  
  /* Fix iOS input zoom */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    font-size: 16px !important;
  }
}

/* Android-specific fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  /* Android only styles */
  body {
    -webkit-font-smoothing: antialiased;
  }
}

/* PWA standalone mode fixes */
@media all and (display-mode: standalone) {
  /* Styles specific to PWA mode */
  body {
    overscroll-behavior-y: contain;
  }
}

/* Landscape orientation fixes */
@media (orientation: landscape) and (max-height: 500px) {
  /* Reduce padding and margins in landscape on small devices */
  .MuiContainer-root {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

/* Fix for notch and safe areas */
@supports (padding: env(safe-area-inset-top)) {
  #__next {
    padding-top: env(safe-area-inset-top);
    /* Bottom safe area is handled by the bottom navigation component */
    padding-bottom: 0;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  /* Ensure proper viewport height on iOS Safari */
  html, body {
    height: 100%;
    height: 100dvh;
    min-height: -webkit-fill-available;
  }
}

/* ─── Grid card stagger entrance animation ────────────────────────── */
@keyframes gridFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  @keyframes gridFadeIn {
    from { opacity: 1; transform: none; }
    to   { opacity: 1; transform: none; }
  }
}