/* Mobile-specific styles and overrides */
/* Optimized for mobile browsers (Edge on Android) */

/* Touch-friendly interactions */
@media (max-width: 767px) {
  /* Increase touch targets */
  .nav-item {
    min-height: 60px;
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .workpack-item {
    min-height: 80px;
    padding: var(--spacing-lg);
  }

  .login-button {
    min-height: 48px;
    font-size: var(--font-size-lg);
  }

  .form-input {
    min-height: 48px;
    font-size: var(--font-size-lg);
  }

  /* Better scrolling */
  .main-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Prevent zoom on input focus (iOS) */
  .form-input,
  .search-input {
    font-size: 16px !important;
  }

  /* Camera optimizations */
  .camera-modal {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
  }

  #camera-stream {
    /* Prevent iOS from showing controls */
    playsinline: true;
    webkit-playsinline: true;
  }

  /* Android-specific fixes */
  @supports (-webkit-appearance: none) {
    /* Webkit-specific styles for older Android browsers */
    .workpack-item {
      -webkit-tap-highlight-color: rgba(0, 123, 255, 0.1);
    }

    .nav-item {
      -webkit-tap-highlight-color: rgba(0, 123, 255, 0.1);
    }
  }
}

/* Landscape orientation adjustments */
@media (orientation: landscape) and (max-height: 500px) {
  .app-header {
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .header-content h1 {
    font-size: var(--font-size-md);
  }

  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .fab-camera {
    bottom: 70px;
  }

  .main-content {
    padding: var(--spacing-sm);
  }
}

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
  .app-header {
    padding-top: max(var(--spacing-md), env(safe-area-inset-top));
    padding-left: max(var(--spacing-md), env(safe-area-inset-left));
    padding-right: max(var(--spacing-md), env(safe-area-inset-right));
  }

  .main-content {
    padding-bottom: max(var(--spacing-md), env(safe-area-inset-bottom));
  }

  .bottom-nav {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Viewport height fix for mobile browsers */
@media (max-width: 767px) {
  .app-container {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }

  .main-content {
    min-height: calc(100vh - 140px);
    min-height: -webkit-fill-available;
  }
}

/* Android Chrome specific optimizations */
@media screen and (max-width: 767px) {
  /* Hide address bar on load */
  html {
    height: 100%;
  }

  body {
    height: 100%;
  }

  /* Improve text rendering */
  body {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Better font rendering */
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  .camera-modal {
    /* Prevent bounce scrolling in camera */
    overscroll-behavior: none;
  }

  /* Fix for iOS input zoom */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  textarea {
    font-size: 16px !important;
  }
}

/* Performance optimizations for low-end devices */
@media (max-width: 767px) {
  /* Reduce animations on slower devices */
  .workpack-item,
  .nav-item,
  .fab-camera {
    transition: none;
  }

  /* Use transform3d for hardware acceleration */
  .view {
    transform: translate3d(0, 0, 0);
  }

  .workpack-item {
    transform: translate3d(0, 0, 0);
  }
}

/* Edge browser specific optimizations */
@supports (-ms-ime-align: auto) {
  /* Microsoft Edge specific styles */
  .form-input {
    /* Better input rendering in Edge */
    border: 2px solid #ced4da;
  }

  .form-input:focus {
    border-width: 2px;
  }
}

/* Chrome on Android specific */
@media screen and (max-width: 767px) and (min-resolution: 1.5dppx) {
  /* High DPI optimizations */
  .nav-icon {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Samsung Internet specific fixes */
@media screen and (max-width: 767px) {
  /* Samsung browser quirks */
  .camera-container {
    /* Fix for Samsung camera issues */
    position: relative;
    overflow: hidden;
  }
}

/* Huawei/Honor specific */
@media screen and (max-width: 767px) {
  /* Huawei browser optimizations */
  .main-content {
    /* Better scrolling performance */
    will-change: scroll-position;
  }
}

/* Xiaomi/MIUI specific */
@media screen and (max-width: 767px) {
  /* MIUI browser fixes */
  .fab-camera {
    /* Better floating button positioning */
    z-index: 999;
  }
}

/* Oppo/Realme specific */
@media screen and (max-width: 767px) {
  /* ColorOS browser optimizations */
  .toast {
    /* Better toast positioning */
    margin-top: env(safe-area-inset-top, 0px);
  }
}

/* Vivo specific */
@media screen and (max-width: 767px) {
  /* Funtouch OS browser fixes */
  .search-input {
    /* Better search input on Vivo devices */
    -webkit-appearance: none;
    appearance: none;
  }
}