/* TeamPulse Mobile Optimizations - PWA Enhancement */
/* This file only loads on mobile devices (max-width: 768px) */

/* ===== iOS Safe Area Support ===== */
:root {
  /* Safe area insets for notched devices */
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --safe-area-inset-left: env(safe-area-inset-left);
  --safe-area-inset-right: env(safe-area-inset-right);
}

/* ===== Body Adjustments for Safe Areas ===== */
body {
  /* Padding for iPhone notch and home indicator */
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
}

/* ===== Touch Target Improvements ===== */
/* All interactive elements should be at least 44x44px for easy tapping */

button,
.btn,
a.btn,
.sidebar-link,
.nav-item,
input[type="submit"],
input[type="button"],
input[type="checkbox"],
input[type="radio"] {
  min-height: 44px;
  min-width: 44px;
  padding: 12px 16px;
}

/* ===== Form Input Improvements ===== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="time"],
select,
textarea {
  min-height: 48px;
  font-size: 16px; /* Prevents iOS zoom on focus */
  padding: 12px 16px;
}

/* ===== Navbar Mobile Optimizations ===== */
.top-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  /* Account for safe area at top */
  padding-top: calc(12px + var(--safe-area-inset-top));
}

/* ===== Sidebar Mobile Optimizations ===== */
.admin-sidebar {
  /* Account for safe area */
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
}

.sidebar-link {
  /* Larger touch targets */
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.sidebar-link i {
  font-size: 20px;
  min-width: 24px;
}

/* ===== Table Responsiveness ===== */
table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
  white-space: nowrap;
}

/* ===== Card Improvements ===== */
.card {
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ===== Modal Improvements ===== */
.modal {
  /* Full screen on mobile */
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  height: 100vh;
}

.modal-content {
  border-radius: 0;
  height: 100%;
}

/* ===== Pull to Refresh Styling ===== */
body {
  overscroll-behavior-y: contain;
}

/* ===== Spacing Adjustments ===== */
.content-wrapper {
  padding: 16px;
}

.page-header {
  padding: 16px;
}

/* ===== Font Size Adjustments ===== */
h1 {
  font-size: 24px;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 18px;
}

body {
  font-size: 14px;
  line-height: 1.6;
}

/* ===== Navigation Improvements ===== */
.navbar-right,
.navbar-left {
  gap: 8px;
}

/* ===== Install Button Styling ===== */
#pwa-install-btn {
  display: none; /* Hidden by default, shown by JS when installable */
  background: #10b981;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

#pwa-install-btn:hover {
  background: #059669;
}

#pwa-install-btn:active {
  background: #047857;
}

/* ===== Responsive Images ===== */
img {
  max-width: 100%;
  height: auto;
}

/* ===== Disable Text Selection on UI Elements ===== */
.btn,
button,
.sidebar-link,
.nav-item {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ===== Active State Feedback ===== */
button:active,
.btn:active,
a:active,
.sidebar-link:active {
  opacity: 0.7;
  transform: scale(0.98);
  transition: all 0.1s;
}

/* ===== Sticky Footer Fix ===== */
.footer {
  padding-bottom: calc(20px + var(--safe-area-inset-bottom));
}

/* ===== Training Calendar Mobile ===== */
.calendar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===== Form Actions Sticky Bottom ===== */
.form-actions {
  position: sticky;
  bottom: 0;
  background: white;
  padding: 16px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  margin: 0 -16px;
  padding-bottom: calc(16px + var(--safe-area-inset-bottom));
}

/* ===== Bottom Navigation (Optional) ===== */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
  padding-bottom: calc(8px + var(--safe-area-inset-bottom));
  z-index: 999;
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 16px;
  text-decoration: none;
  color: #6b7280;
  font-size: 12px;
  min-width: 60px;
}

.bottom-nav-item i {
  font-size: 20px;
  margin-bottom: 4px;
}

.bottom-nav-item.active {
  color: #3b82f6;
}

/* ===== Loading States ===== */
.skeleton {
  background: linear-gradient(
    90deg,
    #f3f4f6 25%,
    #e5e7eb 50%,
    #f3f4f6 75%
  );
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ===== Swipe Gestures Support ===== */
.swipeable {
  touch-action: pan-y;
  user-select: none;
}

/* ===== Improved Dropdown Menus ===== */
.dropdown-content {
  min-width: 200px;
}

.dropdown-item {
  padding: 14px 20px;
  font-size: 16px;
}

/* ===== Hide Desktop-Only Elements ===== */
.desktop-only {
  display: none !important;
}

/* ===== Show Mobile-Only Elements ===== */
.mobile-only {
  display: block !important;
}

/* ===== Accessibility - Larger Font Option ===== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Dark Mode Support (Optional) ===== */
@media (prefers-color-scheme: dark) {
  /* Add dark mode styles if needed */
}

/* ===== Landscape Orientation ===== */
@media (orientation: landscape) and (max-height: 500px) {
  .top-navbar {
    position: static;
  }

  .distancer {
    display: none;
  }
}

/* ===== Small Screens (< 375px) ===== */
@media (max-width: 375px) {
  body {
    font-size: 13px;
  }

  h1 {
    font-size: 22px;
  }

  .btn {
    padding: 10px 14px;
    font-size: 14px;
  }
}

/* ===== Print Styles ===== */
@media print {
  .top-navbar,
  .admin-sidebar,
  .sidebar-toggle,
  #pwa-install-btn,
  .form-actions {
    display: none !important;
  }
}