/* PIONEER Mobile Core Enhancements - Touch-Friendly UI */

:root {
  --mobile-touch-target: 48px; /* Apple HIG standard */
  --mobile-padding: 16px;
  --mobile-header-height: 56px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
}

/* Mobile-first responsive breakpoints */
@media screen and (max-width: 768px) {
  /* Ensure all containers use full width on mobile */
  .container, .content-wrapper {
    padding: var(--mobile-padding);
    margin: 0;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
  }

  /* Touch-friendly button targets */
  button, .btn, .touch-target,
  input[type="button"], input[type="submit"],
  .nav-item, .tab {
    min-height: var(--mobile-touch-target);
    min-width: var(--mobile-touch-target);
    padding: 12px 16px;
    font-size: 16px; /* Prevent iOS auto-zoom */
    touch-action: manipulation; /* Disable double-tap zoom */
  }

  /* Prevent 300ms click delay on mobile */
  a, button, input, select, textarea {
    touch-action: manipulation;
  }

  /* Safe area handling for notch devices */
  .mobile-header, header {
    padding-top: var(--safe-area-top);
    height: calc(var(--mobile-header-height) + var(--safe-area-top));
  }

  .mobile-footer, .bottom-nav {
    padding-bottom: var(--safe-area-bottom);
  }

  /* Prevent horizontal scroll */
  *, *::before, *::after {
    max-width: 100%;
    box-sizing: border-box;
  }

  body {
    overflow-x: hidden;
  }

  /* Improve form input usability */
  input, textarea, select {
    font-size: 16px; /* Prevent iOS zoom on focus */
    min-height: var(--mobile-touch-target);
    padding: 12px;
  }

  /* Stack form layouts vertically */
  form, .form-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  /* Make tables responsive */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Card-based layout for lists */
  .list-item, .card {
    margin-bottom: 12px;
    padding: 16px;
    border-radius: 8px;
  }
}

/* PWA specific styles - standalone mode */
@media screen and (display-mode: standalone) {
  body {
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
  }

  /* Hide browser UI elements */
  .browser-notice, .pwa-install-prompt {
    display: none;
  }
}

/* Landscape orientation adjustments */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .mobile-header {
    height: 48px;
  }

  .bottom-nav {
    height: 48px;
  }
}

/* Improve scrolling performance */
.scrollable, .content-area, .feed {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* Loading states for mobile */
.loading-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Connection status indicator */
.connection-status {
  position: fixed;
  top: calc(var(--safe-area-top) + 8px);
  right: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  z-index: 9999;
}

.connection-status.connected {
  background: rgba(52, 199, 89, 0.2);
  color: #34C759;
  border: 1px solid #34C759;
}

.connection-status.disconnected {
  background: rgba(255, 59, 48, 0.2);
  color: #FF3B30;
  border: 1px solid #FF3B30;
}