/**
 * Desktop Responsive Design for SaaDhaGaa
 * 
 * This CSS file provides desktop-specific styling to make the PWA 
 * more suitable for larger screens while maintaining mobile compatibility.
 */

/* Desktop and Tablet Responsive Design */
@media screen and (min-width: 768px) {
  
  /* Make body and html allow scrolling on desktop */
  html, body {
    overflow: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    min-height: 100vh !important;
  }
  
  /* Center the application container on desktop */
  body {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    min-height: 100vh !important;
    overflow-y: auto !important;
  }
  
  /* App container with max width and centered */
  #app-container {
    max-width: 420px !important; /* Mobile app width */
    width: 100% !important;
    margin: 0 auto !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    background: rgba(31, 41, 55, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
    position: relative !important;
    padding: 1.5rem !important;
  }
  
  /* Container styling for desktop */
  .container {
    max-width: 420px !important;
    width: 100% !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    overflow: hidden !important;
    min-height: calc(100vh - 40px) !important;
  }
  
  /* Login container specific styling */
  .login-container {
    max-width: 420px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 20px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    background: linear-gradient(135deg, #111827, #1F2937, #111827) !important;
  }
  
  /* Player container for desktop */
  .player-container,
  #app-container {
    max-width: 420px !important;
    width: 100% !important;
    margin: 0 auto !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
    background: rgba(31, 41, 55, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
    min-height: calc(100vh - 40px) !important;
    padding: 1.5rem !important;
  }
  
  /* Override mobile-first styles for desktop */
  html {
    overflow: auto !important;
  }
  
  /* Force desktop layout for body */
  body {
    width: auto !important;
    height: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 20px !important;
    min-height: 100vh !important;
    overflow: auto !important;
    overflow-x: hidden !important;
  }
  
  /* Add a subtle background to the page */
  body {
    background: linear-gradient(135deg, #0F172A, #1E293B, #0F172A) !important;
  }
  

  
  /* Header adjustments for desktop */
  .header {
    border-radius: 12px 12px 0 0 !important;
  }
  
  /* Footer adjustments for desktop */
  .footer {
    border-radius: 0 0 12px 12px !important;
  }
}

/* Large Desktop Responsive Design */
@media screen and (min-width: 1024px) {
  
  /* Slightly larger container for bigger screens */
  #app-container,
  .container,
  .login-container,
  .player-container {
    max-width: 450px !important;
  }
  
  /* More padding on very large screens */
  body {
    padding: 40px !important;
  }
  
  /* Larger shadow for bigger screens */
  #app-container,
  .container,
  .login-container,
  .player-container {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5) !important;
  }
}

/* Extra Large Desktop */
@media screen and (min-width: 1440px) {
  
  /* Even more padding on very large screens */
  body {
    padding: 60px !important;
  }
  
  /* Maximum container size */
  #app-container,
  .container,
  .login-container,
  .player-container {
    max-width: 480px !important;
  }
}

/* Ensure mobile behavior is preserved */
@media screen and (max-width: 767px) {
  
  /* Keep original mobile behavior */
  html, body {
    overflow: hidden !important;
    height: 100vh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
  }
  
  body {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #app-container,
  .container,
  .login-container,
  .player-container {
    max-width: 100% !important;
    width: 100% !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    min-height: 100vh !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
  }
}

/* Desktop-specific improvements */
@media screen and (min-width: 768px) {
  
  /* Make buttons and inputs slightly larger on desktop */
  .login-button,
  .submit-button,
  .button {
    padding: 12px 24px !important;
    font-size: 16px !important;
  }
  
  /* Improve text input sizing */
  .text-input,
  .pin-input {
    padding: 12px 16px !important;
    font-size: 16px !important;
  }
  
  /* Make the app feel more like a desktop app */
  .app-header {
    padding: 20px !important;
  }
  
  /* Adjust modal sizes for desktop */
  .modal-content {
    max-width: 380px !important;
    margin: 0 auto !important;
  }
  
  /* Desktop-specific hover effects */
  .button:hover,
  .login-button:hover,
  .submit-button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.2s ease !important;
  }
}

/* Ensure proper scrolling behavior on desktop */
@media screen and (min-width: 768px) {
  
  /* Allow vertical scrolling but hide scrollbars */
  html, body {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(156, 163, 175, 0.3) transparent !important;
  }
  
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width: 8px !important;
    display: block !important;
  }
  
  html::-webkit-scrollbar-track,
  body::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.1) !important;
  }
  
  html::-webkit-scrollbar-thumb,
  body::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.3) !important;
    border-radius: 4px !important;
  }
  
  html::-webkit-scrollbar-thumb:hover,
  body::-webkit-scrollbar-thumb:hover {
    background: rgba(156, 163, 175, 0.5) !important;
  }
}