/* public/styles.css */

/* Make sure root fills entire viewport */
html, body, #root {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* Ensure the React Native web components render properly */
#root > div {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
}

/* Web layout specific styles */
.web-layout {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.web-logo-section {
  flex: 1 !important;
  justify-content: flex-start !important;
  padding-right: 40px !important;
}

.web-buttons-section {
  width: 300px !important;
  align-items: stretch !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .web-layout {
    flex-direction: column !important;
  }
  
  .web-logo-section {
    justify-content: center !important;
    padding-right: 0 !important;
    margin-bottom: 60px !important;
  }
  
  .web-buttons-section {
    width: 100% !important;
    max-width: 300px !important;
    align-items: center !important;
  }
}

/* Fix for React Native flexbox on web */
.flexBox {
  display: flex !important;
}

.flexColumn {
  flex-direction: column !important;
}

.flexRow {
  flex-direction: row !important;
}

/* Make all views fill their containers by default */
.r-flex-1 {
  flex: 1 !important;
}

/* Fix z-index issues with absolute positioned elements */
.r-zIndex-1 {
  z-index: 1 !important;
}

.r-zIndex-10 {
  z-index: 10 !important;
}

/* Ensure scrollable containers work properly */
.scrollView {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Fix for images not rendering properly */
.r-resizeMode-cover {
  object-fit: cover !important;
}

.r-resizeMode-contain {
  object-fit: contain !important;
}

/* Fix for text not wrapping properly */
.r-textWrap-wrap {
  white-space: normal !important;
}

/* Add transitions for smoother UI */
.r-transition {
  transition: all 0.3s ease !important;
}

/* Fix for TouchableOpacity on web */
.r-cursor-pointer {
  cursor: pointer !important;
}

/* Fix for Android ripple effect on web */
.r-touchAction-none {
  touch-action: none !important;
}

/* Better touch support for mobile */
* {
  -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Allow text selection for inputs and text areas */
input, textarea, [contenteditable] {
  -webkit-user-select: text !important;
  -khtml-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* Enable text selection for text content (React Native Text renders as div) */
span, p, h1, h2, h3, h4, h5, h6, label, a, div {
  -webkit-user-select: text !important;
  -khtml-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* React Native Web handles button sizing and accessibility automatically */

/* Safe area support for modern iOS devices */
/* padding-top REMOVED - was creating white border at top that blocked content */
@supports (padding: max(0px)) {
  body {
    /* padding-top: max(0px, env(safe-area-inset-top)); */
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

/* Prevent pull-to-refresh on iOS Safari */
body {
  overscroll-behavior-y: none;
  overscroll-behavior: none;
  /* -webkit-overflow-scrolling: touch; REMOVED - breaks iOS Safari tap-status-bar-to-scroll */
}

/* Additional pull-to-refresh prevention */
html, body {
  overscroll-behavior: none;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
}

/* Note: overscroll-behavior already set on body above - not needed on all elements */

/* Status bar support for mobile */
/* padding-top REMOVED - was creating white border at top */
@media screen and (max-width: 768px) {
  body {
    /* padding-top: max(20px, env(safe-area-inset-top)); */
  }
}

/* Fix for text input on web */
input, textarea {
  outline: none !important;
  box-sizing: border-box !important;
}

/* Make buttons look more native */
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  outline: none;
}

/* Fix for react-navigation drawer */
.drawer-container {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

/* Give border-box sizing to all elements */
* {
  box-sizing: border-box;
}

/* Ensure nested views inherit height/width properly */
.r-flex-1 > * {
  height: 100%;
  width: 100%;
}