/**
 * SaaDhaGaa PWA Fixes
 * Comprehensive fixes for PWA display issues across devices
 */

/* ===== WHITE LINE FIX (SAFE FOR PWA) ===== */
/* Only set background and box model, do NOT set position: fixed or overflow: hidden globally! */
html, body {
  background-color: #111827 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  min-height: 100dvh !important;
  box-sizing: border-box !important;
}

/* Ensure all containers fill viewport and respect safe areas - MOBILE ONLY */
@media screen and (max-width: 767px) {
  html, body, #app-container, .container {
    min-height: 100vh !important;
    box-sizing: border-box !important;
    background-color: #111827 !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    padding-left: env(safe-area-inset-left, 0px) !important;
    padding-right: env(safe-area-inset-right, 0px) !important;
  }
}

/* ===== BUTTON FIXES ===== */
/* Fix for buttons being cut off */
.button {
  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;
  max-width: 100% !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  margin-bottom: 0.5rem !important;
}

/* Register button specific fixes */
.register-button {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.85rem 1.5rem !important;
  font-size: 1.1rem !important;
  margin-top: 10px !important;
  text-align: center !important;
  display: block !important;
}

/* ===== MOBILE FIXES ===== */
@media screen and (max-width: 480px) {
  /* Container fixes */
  .container {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
    padding-bottom: max(1rem, env(safe-area-inset-bottom)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  
  /* Ensure app container fits mobile screen */
  #app-container {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    overflow-x: hidden !important;
  }
  
  /* Ensure body fits mobile screen */
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }
}

@media screen and (max-width: 480px) {
  /* Login form fixes */
  .login-form {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 0.75rem !important;
    box-sizing: border-box !important;
    padding: 1.25rem !important;
  }
  
  /* Button hover/active state fixes */
  .button:hover, .button:active, .button:focus {
    transform: translateY(0) !important;
    box-shadow: 0 0 0 3px rgba(229, 184, 11, 0.3) !important;
  }
  
  .register-button:hover, .register-button:active, .register-button:focus {
    background-color: #4B5563 !important;
    box-shadow: 0 0 0 3px rgba(75, 85, 99, 0.3) !important;
  }
  
  /* Ensure tap targets are large enough */
  .button, input[type="button"], input[type="submit"] {
    min-height: 44px !important;
  }
}

/* ===== APP CONTAINER FIXES - MOBILE ONLY ===== */
@media screen and (max-width: 767px) {
  #app-container {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, #111827, #1F2937, #111827) !important;
    z-index: 1 !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }
}

/* Ensure .container is always centered and properly sized on mobile */
@media screen and (max-width: 767px) {
  .container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
}

/* ===== iOS SPECIFIC FIXES - MOBILE ONLY ===== */
@supports (-webkit-touch-callout: none) {
  @media screen and (max-width: 767px) {
    /* iOS specific fixes */
    html, body {
      position: fixed !important;
      height: 100% !important;
      width: 100% !important;
      overflow: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      max-width: 100% !important;
      left: 0 !important;
      right: 0 !important;
    }
    
    #app-container {
      padding-top: env(safe-area-inset-top) !important;
      padding-bottom: env(safe-area-inset-bottom) !important;
      padding-left: env(safe-area-inset-left) !important;
      padding-right: env(safe-area-inset-right) !important;
      height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
      width: 100% !important;
      max-width: 100% !important;
      left: 0 !important;
      right: 0 !important;
    }
  }
  
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
    box-sizing: border-box !important;
  }
  
  .button {
    padding-left: max(1rem, env(safe-area-inset-left)) !important;
    padding-right: max(1rem, env(safe-area-inset-right)) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ===== ANDROID SPECIFIC FIXES - MOBILE ONLY ===== */
@supports not (-webkit-touch-callout: none) {
  @media screen and (max-width: 767px) {
    /* Android specific fixes */
    html, body {
      position: fixed !important;
      height: 100% !important;
      width: 100% !important;
      max-width: 100% !important;
      overflow: hidden !important;
      left: 0 !important;
      right: 0 !important;
    }
    
    #app-container {
      width: 100% !important;
      max-width: 100% !important;
      left: 0 !important;
      right: 0 !important;
    }
  }
  
  .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }
  
  /* Fix for Android navigation gestures */
  body {
    padding-bottom: 16px !important; /* Add padding for gesture area */
  }
}

/* ===== PWA MODE SPECIFIC FIXES - MOBILE ONLY ===== */
@media (display-mode: standalone) and (max-width: 767px) {
  /* PWA specific fixes */
  html, body {
    background-color: #111827 !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  #app-container {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  
  .container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Fix for buttons in PWA mode */
  .button {
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }
}

/* ===== SPLASH SCREEN STYLES ===== */
.splash-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #111827, #1F2937, #111827);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

.splash-content {
  text-align: center;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== SCROLLBAR HIDING UTILITY ===== */
.hide-scrollbar {
  overflow-y: auto !important;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE and Edge */
}
.hide-scrollbar::-webkit-scrollbar {
  display: none !important; /* Chrome, Safari, Opera */
}

/* Remove or override global overflow: hidden for html, body, #app-container - MOBILE ONLY */
@media screen and (max-width: 767px) {
  html, body, #app-container {
    overflow-y: auto !important;
    position: static !important;
    height: auto !important;
    min-height: 100vh !important;
  }
}

/* ===== LOGIN/REGISTRATION PAGE SCROLL DISABLE ===== */
body.login-no-scroll, html.login-no-scroll, #app-container.login-no-scroll {
  overflow: hidden !important;
  height: 100vh !important;
  min-height: 100vh !important;
  position: fixed !important;
  width: 100vw !important;
}

/* ===== FIX: Only lock scroll for login/registration, never globally or in PWA/device-specific rules ===== */
@media (display-mode: standalone) {
  html:not(.login-no-scroll):not(.registration-no-scroll),
  body:not(.login-no-scroll):not(.registration-no-scroll) {
    position: static !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
}

@supports (-webkit-touch-callout: none) {
  html:not(.login-no-scroll):not(.registration-no-scroll),
  body:not(.login-no-scroll):not(.registration-no-scroll) {
    position: static !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
}

@supports not (-webkit-touch-callout: none) {
  html:not(.login-no-scroll):not(.registration-no-scroll),
  body:not(.login-no-scroll):not(.registration-no-scroll) {
    position: static !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
}

/* ===== FINAL FIX: Remove all global/device/PWA scroll lock except for login/registration - MOBILE ONLY ===== */
/* Remove scroll lock for all except login/registration pages */
@media screen and (max-width: 767px) {
  html:not(.login-no-scroll):not(.registration-no-scroll),
  body:not(.login-no-scroll):not(.registration-no-scroll) {
    position: static !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Remove device/PWA-specific scroll lock for all except login/registration */
@media (display-mode: standalone) {
  html:not(.login-no-scroll):not(.registration-no-scroll),
  body:not(.login-no-scroll):not(.registration-no-scroll) {
    position: static !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@supports (-webkit-touch-callout: none) {
  html:not(.login-no-scroll):not(.registration-no-scroll),
  body:not(.login-no-scroll):not(.registration-no-scroll) {
    position: static !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
@supports not (-webkit-touch-callout: none) {
  html:not(.login-no-scroll):not(.registration-no-scroll),
  body:not(.login-no-scroll):not(.registration-no-scroll) {
    position: static !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ===== ADDRESS BAR ALWAYS VISIBLE FIX FOR MOBILE BROWSERS ===== */
/* Prevent address bar from vanishing on scroll up by removing 100vh/fixed/overflow hidden from html, body, #app-container - MOBILE ONLY */
@media screen and (max-width: 767px) {
  html:not(.login-no-scroll):not(.registration-no-scroll),
  body:not(.login-no-scroll):not(.registration-no-scroll),
  #app-container:not(.login-no-scroll):not(.registration-no-scroll) {
    position: relative !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    /* Let browser manage viewport and address bar */
  }
}

/* Remove any 100vh/fixed/overflow hidden from .container and .subscription-container on mobile */
@media screen and (max-width: 600px) {
  .container,
  .subscription-container {
    min-height: unset !important;
    height: auto !important;
    max-height: none !important;
    position: static !important;
    overflow-y: visible !important;
  }
}

/* ===== HEADER STICKY FIX ===== */
.app-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: #1F2937;
  /* Add a subtle shadow for separation */
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}