/* Mobile Web Responsive Styles */

/* Base container adjustments for web */
body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
}

/* Force full height on larger screens */
@media (min-width: 768px) {
  body {
    height: 100vh;
    overflow: hidden;
  }
}

/* Main content wrapper - NO bottom padding on mobile to prevent white space */
#root > div {
  padding-bottom: 0 !important;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Add bottom padding only for screens with bottom navigation */
@media (max-width: 767px) {
  /* Only add padding on pages with bottom nav, not on Welcome/Login screens */
  #root > div[style*="flex"] {
    padding-bottom: 80px !important;
  }
}

/* ScrollView adjustments to prevent navbar overlap */
div[style*="overflow"] {
  padding-bottom: 20px;
}

/* Responsive breakpoints */
@media (min-width: 768px) {
  /* Tablet and Desktop - Full screen mobile app experience */

  /* Remove background gradient and centering */
  #root {
    background: #f3f4f6;
    min-height: 100vh;
    height: 100vh;
    width: 100%;
    overflow: hidden;
  }

  #root > div {
    max-width: 100% !important;
    width: 100%;
    height: 100vh;
    background: #f3f4f6;
    position: relative;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* Improve leaderboard card layout on larger screens */
  div[style*="flexDirection: row"][style*="backgroundColor: rgb(255, 255, 255)"] {
    padding: 20px !important;
    margin-bottom: 12px !important;
    border-radius: 16px !important;
  }

  /* Better spacing for stats cards */
  div[style*="backgroundColor: rgb(16, 185, 129)"],
  div[style*="backgroundColor: rgb(239, 68, 68)"],
  div[style*="backgroundColor: rgb(245, 158, 11)"] {
    padding: 24px !important;
    border-radius: 16px !important;
  }
}

/* Remove the large desktop override */

/* Bottom Navigation Bar - Fix z-index and overlap issues */
div[style*="position: absolute"][style*="bottom: 0"],
div[style*="position: fixed"][style*="bottom: 0"] {
  z-index: 999 !important;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure content doesn't hide behind bottom nav */
div[style*="flex: 1"] > div:first-child {
  margin-bottom: -18px;
}

/* Icon improvements for web */
span[style*="fontFamily: MaterialCommunityIcons"],
span[style*="fontFamily: MaterialIcons"],
span[style*="fontFamily: Ionicons"] {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal !important;
  font-weight: normal !important;
  text-rendering: optimizeLegibility;
  vertical-align: middle;
}

/* Leaderboard specific improvements */
/* Leaderboard rank number */
div[style*="width: 40"] > span {
  min-width: 40px;
  text-align: left;
}

/* Scrollable content areas */
div[style*="overflow: scroll"],
div[style*="overflow-y: scroll"] {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
}

div[style*="overflow: scroll"]::-webkit-scrollbar,
div[style*="overflow-y: scroll"]::-webkit-scrollbar {
  width: 6px;
}

div[style*="overflow: scroll"]::-webkit-scrollbar-track,
div[style*="overflow-y: scroll"]::-webkit-scrollbar-track {
  background: transparent;
}

div[style*="overflow: scroll"]::-webkit-scrollbar-thumb,
div[style*="overflow-y: scroll"]::-webkit-scrollbar-thumb {
  background-color: rgba(156, 163, 175, 0.5);
  border-radius: 3px;
}

/* Safe area handling for mobile devices */
@supports (padding: env(safe-area-inset-bottom)) {
  div[style*="position: absolute"][style*="bottom: 0"],
  div[style*="position: fixed"][style*="bottom: 0"] {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Hero section improvements for larger screens */
@media (min-width: 768px) {
  div[style*="borderBottomLeftRadius: 30px"] {
    border-radius: 0 !important;
  }
}

/* Touch target improvements */
button,
div[role="button"],
a {
  min-height: 44px;
  min-width: 44px;
}

/* Prevent text selection on interactive elements */
button,
div[role="button"] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Card hover effects on desktop */
@media (hover: hover) and (pointer: fine) {
  div[style*="backgroundColor: rgb(255, 255, 255)"]:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

/* Performance improvements */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent rubber banding on iOS-style devices */
html,
body {
  position: fixed;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for better mobile support */
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0;
}

#root {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height for better mobile support */
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #f3f4f6;
}

/* Force full height on all child divs */
#root > div {
  min-height: 100vh;
  min-height: 100dvh;
}

/* Ensure safe area insets are respected on mobile web */
@supports (padding: env(safe-area-inset-bottom)) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }
}