/* PWA Specific Styles */

/* Standalone mode (installed PWA) */
@media (display-mode: standalone) {
  .header {
    padding-top: env(safe-area-inset-top);
    height: calc(64px + env(safe-area-inset-top));
  }

  .header-container {
    height: 64px;
  }

  .main {
    padding-top: calc(var(--space-16) + env(safe-area-inset-top) + var(--space-4));
  }

  /* Mobile menu also accounts for safe area */
  @media (max-width: 768px) {
    .header {
      height: calc(56px + env(safe-area-inset-top));
    }

    .header-container {
      height: 56px;
    }

    .header-nav {
      top: calc(56px + env(safe-area-inset-top));
      padding-top: calc(var(--space-4) + env(safe-area-inset-top));
    }
  }
}

/* iOS specific */
@supports (-webkit-touch-callout: none) {
  .btn {
    -webkit-tap-highlight-color: transparent;
  }

  .form-input,
  .form-textarea,
  .form-select {
    -webkit-appearance: none;
  }

  /* Prevent zoom on input focus */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Android specific */
@media (hover: none) and (pointer: coarse) {
  .task-actions {
    opacity: 1;
  }
}

/* Offline indicator */
.offline-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--space-2);
  background-color: var(--color-warning);
  color: white;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 200;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.offline-indicator.visible {
  transform: translateY(0);
}

/* Prevent horizontal scroll on mobile */
@media (max-width: 768px) {
  body {
    overflow-x: hidden;
  }

  /* Improve touch targets */
  a, button {
    min-height: 44px;
    min-width: 44px;
  }
}