/* PWA-specific styles */

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

/* Ensure body accounts for safe areas */
body {
  padding-top: var(--safe-area-inset-top);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
}

/* Add padding bottom for mobile nav on mobile devices */
@media (max-width: 768px) {
  body {
    padding-bottom: calc(3rem + var(--safe-area-inset-bottom));
  }
}

/* Smooth scrolling for PWA */
html {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Prevent text selection on buttons in PWA */
button,
.button,
[role='button'] {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Better touch feedback */
.touch-manipulation {
  touch-action: manipulation;
}

/* Landscape mode optimizations */
@media (orientation: landscape) and (max-height: 500px) {
  /* Compact header for landscape mobile */
  header {
    height: 48px;
  }
}

/* Standalone mode specific styles (when app is installed) */
@media (display-mode: standalone) {
  /* Add subtle indication that app is installed */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #3b82f6, #8b5cf6);
    z-index: 9999;
  }
}

/* Prevent pull-to-refresh on non-iOS browsers */
body {
  overscroll-behavior-y: contain;
}

/* Restore native rubber-band bounce on iOS — body is fixed/overflow:hidden there
   so this applies to #root (the actual scroll container). */
@supports (-webkit-touch-callout: none) {
  #root {
    overscroll-behavior-y: auto;
  }
}

/* Improve button touch targets on mobile */
@media (max-width: 768px) {
  button:not([aria-hidden='true']) {
    min-height: 44px;
    min-width: 44px;
  }
  button[role='checkbox'] {
    min-height: 24px;
    min-width: 24px;
  }
}

/* Improve input targets on mobile */
@media (max-width: 768px) {
  input:not([aria-hidden="true"]),
  textarea:not([aria-hidden="true"]),
  select:not([aria-hidden="true"]) {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Ensure focused inputs scroll into view above the keyboard with enough clearance */
@supports (-webkit-touch-callout: none) {
  input:focus,
  textarea:focus,
  select:focus {
    scroll-margin-bottom: 24px;
  }
}

/* iOS specific fixes */
@supports (-webkit-touch-callout: none) {
  /* Fix iOS safari bounce */
  body {
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  #root {
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }

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

  /* Ensure body padding accounts for nav + safe area */
  @media (max-width: 768px) {
    body {
      padding-bottom: 0 !important;
    }

    #root {
      padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px));
    }
  }
}

/* Prevent scroll from leaking through open bottom sheets to the page beneath */
[data-vaul-drawer] {
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* Lift the floating action button above the mobile nav + home indicator */
@supports (-webkit-touch-callout: none) {
  .fab-nav-offset {
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Page transitions via CSS View Transitions API */
@keyframes slideInFromRight {
  from {
    transform: translateX(30px);
    opacity: 0.8;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@supports (view-transition-name: none) {
  ::view-transition-new(root) {
    animation: slideInFromRight 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  }

  ::view-transition-old(root) {
    animation: none;
  }
}