/**
 * SaaDhaGaa PWA Responsive Styles
 * Consolidated responsive design, mobile optimizations, and desktop adaptations
 * 
 * This file combines:
 * - Mobile viewport fixes
 * - Desktop responsive styles  
 * - Device-specific optimizations
 * - Touch and gesture support
 * - Cross-platform compatibility
 */

/* =====================================================
   RESPONSIVE BREAKPOINTS
   ===================================================== */

:root {
  --breakpoint-xs: 320px;
  --breakpoint-sm: 375px;
  --breakpoint-md: 414px;
  --breakpoint-lg: 768px;
  --breakpoint-xl: 1024px;
  --breakpoint-2xl: 1200px;
}

/* =====================================================
   BASE MOBILE-FIRST RESPONSIVE STYLES
   ===================================================== */

/* All devices base styles */
.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: var(--spacing-lg);
  box-sizing: border-box;
}

/* =====================================================
   MOBILE DEVICE OPTIMIZATIONS (320px+)
   ===================================================== */

@media screen and (max-width: 480px) {
  body {
    /* Disable zoom on double tap */
    touch-action: manipulation;
    /* Prevent overscroll bounce */
    overscroll-behavior: none;
    /* Improve text rendering on mobile */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .container {
    padding: var(--spacing-md);
    /* Add safe area padding for notched devices */
    padding-left: max(var(--spacing-md), var(--safe-area-left));
    padding-right: max(var(--spacing-md), var(--safe-area-right));
    padding-bottom: max(var(--spacing-md), var(--safe-area-bottom));
    padding-top: max(var(--spacing-md), var(--safe-area-top));
  }

  #app-container {
    width: 100%;
    max-width: 100%;
    left: 0;
    right: 0;
    overflow-x: hidden;
    /* Ensure proper height on mobile */
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100);
  }

  h1 {
    font-size: var(--font-size-3xl);
  }

  .login-form {
    padding: var(--spacing-lg);
    max-width: 100%;
    width: 100%;
    margin: 0 auto var(--spacing-lg) auto;
    border-radius: var(--radius-lg);
  }

  .button {
    margin-bottom: var(--spacing-sm);
    /* Ensure tap target is large enough */
    min-height: 44px;
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-base);
    width: auto;
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
  }

  /* Fix button hover states on mobile */
  .button:hover, 
  .button:active, 
  .button:focus {
    /* Don't use transform on mobile to prevent cut-off */
    transform: none;
    /* Use box-shadow for visual feedback */
    box-shadow: 0 0 0 3px rgba(229, 184, 11, 0.3);
  }

  .button-secondary:hover, 
  .button-secondary:active, 
  .button-secondary:focus {
    box-shadow: 0 0 0 3px rgba(75, 85, 99, 0.3);
  }

  /* PIN input optimizations */
  .pin-container {
    gap: 10px;
    max-width: 100%;
    justify-content: center;
  }

  .pin-box {
    width: 44px;
    height: 50px;
    font-size: 1.5rem;
  }
}

/* =====================================================
   SPECIFIC MOBILE DEVICE SIZES
   ===================================================== */

/* Small mobile devices (320px - iPhone SE, older Android) */
@media screen and (min-width: 320px) and (max-width: 359px) {
  .container {
    padding: var(--spacing-sm);
  }

  h1 {
    font-size: 1.8rem;
  }

  .login-form {
    padding: var(--spacing-md);
  }

  .button {
    padding: 0.7rem 1.2rem;
    font-size: var(--font-size-sm);
  }

  .pin-box {
    width: 40px;
    height: 46px;
    font-size: 1.3rem;
  }
}

/* Medium mobile devices (360px - Most Android phones) */
@media screen and (min-width: 360px) and (max-width: 374px) {
  .container {
    padding: 1.2rem;
  }

  h1 {
    font-size: 1.9rem;
  }

  .login-form {
    padding: 1.35rem;
  }

  .button {
    padding: 0.75rem 1.3rem;
    font-size: 0.95rem;
  }

  .pin-box {
    width: 42px;
    height: 48px;
    font-size: 1.4rem;
  }
}

/* Standard mobile devices (375px - iPhone standard sizes) */
@media screen and (min-width: 375px) and (max-width: 413px) {
  .container {
    padding: 1.3rem;
  }

  h1 {
    font-size: var(--font-size-3xl);
  }

  .login-form {
    padding: 1.4rem;
  }

  .button {
    padding: 0.8rem 1.4rem;
    font-size: var(--font-size-base);
  }

  .pin-box {
    width: 44px;
    height: 50px;
    font-size: 1.5rem;
  }
}

/* Large mobile devices (414px - iPhone Plus, XR, 11, Pro Max) */
@media screen and (min-width: 414px) and (max-width: 480px) {
  .container {
    padding: var(--spacing-lg);
  }

  h1 {
    font-size: 2.1rem;
  }

  .login-form {
    padding: var(--spacing-lg);
  }

  .button {
    padding: 0.85rem 1.5rem;
    font-size: var(--font-size-lg);
  }

  .pin-box {
    width: 48px;
    height: 54px;
    font-size: 2rem;
  }
}

/* =====================================================
   HEIGHT-BASED MOBILE ADJUSTMENTS
   ===================================================== */

/* Short mobile screens (landscape or compact devices) */
@media screen and (max-height: 640px) {
  .container {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .login-form {
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
  }

  .form-group {
    margin-bottom: var(--spacing-md);
  }

  h1 {
    margin-bottom: var(--spacing-sm);
  }
}

/* Very short screens (landscape phones) */
@media screen and (max-height: 450px) {
  .container {
    padding: var(--spacing-sm);
  }

  h1 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xs);
  }

  .login-form {
    padding: var(--spacing-sm);
  }

  .form-group {
    margin-bottom: var(--spacing-sm);
  }

  .button {
    padding: 0.6rem 1.2rem;
    margin-top: var(--spacing-sm);
  }

  .info {
    margin-top: var(--spacing-md);
  }
}

/* =====================================================
   LANDSCAPE ORIENTATION OPTIMIZATIONS
   ===================================================== */

@media screen and (orientation: landscape) and (max-height: 450px) {
  body {
    overflow-y: auto;
    overflow-x: hidden;
  }

  #app-container {
    height: auto;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
    position: relative;
    overflow-y: auto;
  }

  .container {
    padding: var(--spacing-sm) var(--spacing-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(var(--vh, 1vh) * 100);
  }

  .login-form {
    margin: var(--spacing-sm) auto;
  }
}

/* =====================================================
   TABLET STYLES (768px+)
   ===================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
  .container {
    max-width: 600px;
    padding: var(--spacing-xl);
  }

  #app-container {
    padding: var(--spacing-lg);
  }

  h1 {
    font-size: var(--font-size-4xl);
  }

  .login-form {
    max-width: 500px;
    padding: var(--spacing-xl);
  }

  .button {
    font-size: var(--font-size-lg);
    padding: var(--spacing-md) var(--spacing-xl);
  }

  /* Tablet-specific touch optimizations */
  .pin-box {
    width: 52px;
    height: 58px;
    font-size: 2.2rem;
  }

  .pin-container {
    gap: 16px;
  }
}

/* =====================================================
   DESKTOP STYLES (1024px+)
   ===================================================== */

@media screen and (min-width: 1024px) {
  body {
    background: linear-gradient(135deg, var(--background-dark), var(--background-medium), var(--background-dark));
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  #app-container {
    width: 100%;
    max-width: var(--container-max-width);
    height: 100vh;
    overflow: hidden;
    padding: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }

  .container {
    max-width: 800px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
  }

  .login-form {
    max-width: 500px;
    padding: var(--spacing-2xl);
  }

  /* Desktop hover effects */
  .button:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(229, 184, 11, 0.3);
  }

  .button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(229, 184, 11, 0.2);
  }

  /* Desktop-specific pin input */
  .pin-box {
    width: 56px;
    height: 62px;
    font-size: 2.4rem;
  }

  .pin-container {
    gap: 18px;
    max-width: 300px;
  }
}

/* =====================================================
   LARGE DESKTOP STYLES (1200px+)
   ===================================================== */

@media screen and (min-width: 1200px) {
  .container {
    max-width: 900px;
  }

  .login-form {
    max-width: 550px;
  }

  h1 {
    font-size: 3rem;
  }
}

/* =====================================================
   ULTRA-WIDE DESKTOP STYLES (1440px+)
   ===================================================== */

@media screen and (min-width: 1440px) {
  #app-container {
    max-width: 1400px;
  }

  .container {
    max-width: 1000px;
  }

  .login-form {
    max-width: 600px;
  }
}

/* =====================================================
   KEYBOARD OPEN ADJUSTMENTS
   ===================================================== */

.keyboard-open {
  /* Adjustments when virtual keyboard is open */
  transform: translateY(0);
}

.keyboard-open .container {
  padding-bottom: var(--spacing-sm);
}

.keyboard-open .login-form {
  margin-bottom: var(--spacing-sm);
}

/* =====================================================
   DEVICE-SPECIFIC CLASSES (Set by JavaScript)
   ===================================================== */

.small-mobile h1 {
  font-size: 1.8rem;
}

.medium-mobile h1 {
  font-size: 1.9rem;
}

.large-mobile h1 {
  font-size: 2.1rem;
}

.tablet h1 {
  font-size: var(--font-size-4xl);
}

.desktop h1 {
  font-size: var(--font-size-4xl);
}

/* Portrait vs Landscape adjustments */
.portrait .container {
  padding-top: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
}

.landscape .container {
  padding-top: var(--spacing-sm);
  padding-bottom: var(--spacing-sm);
}

/* =====================================================
   TOUCH DEVICE OPTIMIZATIONS
   ===================================================== */

@media (pointer: coarse) {
  /* Styles for touch devices */
  .button {
    min-height: 44px;
    min-width: 44px;
    padding: 0.75rem 1.25rem;
  }

  input, select, textarea {
    min-height: 44px;
    font-size: 16px; /* Prevent zoom on iOS */
  }

  .pin-box {
    min-height: 44px;
    min-width: 44px;
  }
}

/* =====================================================
   HIGH DPI DISPLAY OPTIMIZATIONS
   ===================================================== */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  /* High DPI optimizations */
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .button {
    border: 0.5px solid transparent;
  }

  .pin-box {
    border-width: 0.5px;
  }
}

/* =====================================================
   REDUCED MOTION PREFERENCES
   ===================================================== */

@media (prefers-reduced-motion: reduce) {
  .container,
  .login-form,
  .button,
  .pin-box {
    transition: none;
    animation: none;
  }

  .button:hover {
    transform: none;
  }
}

/* =====================================================
   DARK MODE SUPPORT (System Preference)
   ===================================================== */

@media (prefers-color-scheme: dark) {
  /* Already using dark theme by default */
}

@media (prefers-color-scheme: light) {
  /* Light theme preferences - but we maintain dark theme for brand consistency */
}

/* =====================================================
   PRINT STYLES
   ===================================================== */

@media print {
  #app-container {
    position: static;
    height: auto;
    overflow: visible;
  }

  .container {
    padding: 1rem;
    max-width: none;
  }

  .login-form {
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }

  .button {
    border: 1px solid #000;
    background: #fff;
    color: #000;
  }
}

/* =====================================================
   ACCESSIBILITY ENHANCEMENTS
   ===================================================== */

/* Focus management for keyboard users */
@media (hover: none) {
  .button:hover {
    /* Remove hover effects on touch devices */
    transform: none;
    box-shadow: none;
  }
}

/* Large text support */
@media (prefers-contrast: high) {
  .button {
    border: 2px solid var(--primary-gold);
  }

  .pin-box {
    border-width: 2px;
  }

  input, select, textarea {
    border-width: 2px;
  }
}

/* =====================================================
   BROWSER-SPECIFIC FIXES
   ===================================================== */

/* Safari iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  body {
    /* Fix for Safari iOS viewport height */
    min-height: -webkit-fill-available;
  }

  #app-container {
    height: -webkit-fill-available;
  }

  .pin-box {
    /* Fix for iOS password field styling */
    -webkit-text-security: disc;
  }
}

/* Chrome/WebKit specific fixes */
@supports (-webkit-appearance: none) {
  input, select, textarea, button {
    -webkit-appearance: none;
    appearance: none;
  }
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
  .pin-box {
    /* Firefox doesn't support text-security */
    -moz-appearance: textfield;
    appearance: textfield;
  }
}