/*
 * Foundation: Base Styles
 *
 * Global reset, typography, and base element styling following Rails conventions.
 * Includes progressive enhancement and accessibility features.
 */

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /* Remove 300ms tap delay on mobile */
  touch-action: manipulation;
}

/* HTML element - solid background */
html {
  /* Inform browser of color scheme - Powell's recommendation */
  color-scheme: dark;
  /* Solid background color */
  background: var(--bg);
  /* Use stable vh instead of dvh - iOS PWA has bugs with dvh recalculation */
  height: 100vh;
  overscroll-behavior: none;
  /* Prevent horizontal overflow at root level */
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  /* Body inherits background from html, ensuring consistency */
  background: transparent;
  color: var(--text);
  line-height: 1.6;
  font-size: var(--text-base);
  /* Flexbox layout for proper viewport filling */
  display: flex;
  flex-direction: column;
  /* Use stable vh instead of dvh - iOS PWA has bugs with dvh recalculation */
  height: 100vh;
  /* iOS-specific optimizations */
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  /* Better scrolling on iOS */
  -webkit-overflow-scrolling: touch;
  /* Improve mobile interactions */
  touch-action: manipulation;
  /* Prevent horizontal overflow */
  overflow-x: hidden;
  width: 100%;
}

/* Main content area - grows to fill available space and scrolls independently */
.app-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  /* Smooth scrolling */
  -webkit-overflow-scrolling: touch;
  /* Thin scrollbar for Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* Smooth zoom transition when modals/panels open */
  transition: transform var(--transition-standard);
  transform-origin: center center;
  padding: var(--space-sm);
  /* Center content vertically when smaller than viewport, snap to top when larger */
  display: flex;
  flex-direction: column;
}

/* Welcome page - full screen, no padding, no view transition */
.app-main.organizations-welcome {
  padding: 0;
  overflow: hidden;
  view-transition-name: none;
  /* Disable view transition for welcome page */
}

/* Inner content wrapper - handles width constraints without affecting transitions */
.app-main>* {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  margin-block: auto;
  position: relative;
}

/* Welcome page - no max-width constraint */
.app-main.organizations-welcome>* {
  max-width: none;
  margin-inline: 0;
}

/* Player show page - align to top instead of center */
.app-main.players-show>*,
.app-main.players-index>*,
.app-main.training_sessions-index>* {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* Zoom out main content when modal or panel has content */
body:has(#panel .panel-content) .app-main,
body:has(#modal .modal-content) .app-main {
  transform: scale(var(--scale-zoom));
}

/* Custom thin scrollbar for Webkit browsers (Chrome, Safari, Edge) */
.app-main::-webkit-scrollbar {
  width: 6px;
}

.app-main::-webkit-scrollbar-track {
  background: transparent;
}

.app-main::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}

.app-main::-webkit-scrollbar-thumb:hover {
  background: var(--text-lighter);
}

/* Page-specific width constraints - applied to inner content wrapper */
/* Narrow pages - forms and organization */
.app-main.feedback-new>*,
.app-main.organizations-show>*,
.app-main.checkouts-show>*,
.app-main.checkouts-success>*,
.app-main.players-new>*,
.app-main.players-edit>*,
.app-main.training_sessions-new>*,
.app-main.training_sessions-edit>* {
  max-width: 36rem;
}

/* Extra narrow - authentication pages, user profile, and organization forms */
.app-main.users-show>*,
.app-main.users-new>*,
.app-main.users-expired_join>*,
.app-main.sessions-new>*,
.app-main.passwords-new>*,
.app-main.passwords-edit>*,
.app-main.organizations-new>*,
.app-main.organizations-edit>* {
  max-width: 28rem;
}

/* Progressive Enhancement - CSS Feature Support */
@supports (container-type: inline-size) {

  /* Enhanced container query support */
  .nav-container,
  .main-container {
    container-type: inline-size;
  }
}

/* Removed dvh fallback - using vh everywhere for iOS PWA stability */

/* Reduced motion preference support */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Responsive Media - Powell's Essential CSS */
img,
video,
svg {
  max-width: 100%;
  height: auto;
  display: block;
}

picture {
  display: contents;
}

/* Maintain aspect ratio for embedded content */
iframe,
embed,
object {
  max-width: 100%;
}

/* Disable iOS long-press context menu on all links */
a {
  -webkit-touch-callout: none;
  user-select: none;
}

/* Horizontal dividers */
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-lg) 0 var(--space-lg);
}