/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Pull-to-Refresh Indicator */
.pull-to-refresh-indicator {
  position: fixed;
  top: env(safe-area-inset-top, 0);
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  transform: translateY(-100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 9999;
  pointer-events: none;
}

.pull-to-refresh-spinner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(30, 41, 59, 0.95);
  border: 1px solid rgba(100, 116, 139, 0.3);
  border-radius: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  color: #e2e8f0;
  font-size: 14px;
}

.spinner-icon {
  width: 20px;
  height: 20px;
  color: #22c55e;
  transition: transform 0.3s ease;
}

/* Text visibility states */
.pull-text,
.release-text,
.loading-text {
  display: none;
}

.pull-to-refresh-indicator .pull-text {
  display: inline;
}

.pull-to-refresh-indicator.ready .pull-text {
  display: none;
}

.pull-to-refresh-indicator.ready .release-text {
  display: inline;
}

.pull-to-refresh-indicator.loading .pull-text,
.pull-to-refresh-indicator.loading .release-text {
  display: none;
}

.pull-to-refresh-indicator.loading .loading-text {
  display: inline;
}

/* Spinner animation when loading */
.pull-to-refresh-indicator.loading .spinner-icon {
  animation: ptr-spin 1s linear infinite;
}

@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Icon rotation on ready state */
.pull-to-refresh-indicator.ready .spinner-icon {
  transform: rotate(180deg);
}

/* Body states during pull */
[data-controller~="pull-to-refresh"].pulling {
  overflow: hidden;
}

[data-controller~="pull-to-refresh"].refreshing {
  pointer-events: none;
}

/* ==========================================================================
   Mobile Bottom Navigation (PWA Standalone Mode)
   ========================================================================== */

/* Bottom navigation - hidden by default */
.bottom-nav {
  display: none;
}

/* Focus states for bottom nav links */
.bottom-nav a:focus-visible {
  outline: 2px solid var(--color-tactical-accent, #f59e0b);
  outline-offset: -2px;
  border-radius: 0.375rem;
}

/* PWA Standalone Mode - Show bottom nav, hide top nav on mobile */
@media (display-mode: standalone) {
  @media (max-width: 640px) {
    .bottom-nav {
      display: flex;
    }

    .top-nav {
      display: none;
    }

    /* Add padding to body to account for bottom nav height + safe area */
    body {
      padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
  }
}

/* JavaScript fallback for iOS Safari PWA detection */
@media (max-width: 640px) {
  html.pwa-standalone .bottom-nav {
    display: flex;
  }

  html.pwa-standalone .top-nav {
    display: none;
  }

  html.pwa-standalone body {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}