/*
 * Rails 8 Application Stylesheet - Consolidated
 *
 * This file consolidates all essential CSS for the Rails 8 Propshaft pipeline.
 * Propshaft doesn't support @import statements like Sprockets did, so we either
 * consolidate CSS or use multiple stylesheet_link_tag calls.
 *
 * Architecture:
 * - Foundation layer: Design tokens, base styles, utilities
 * - Component layer: Reusable UI components
 * - Domain layer: Business-specific styles
 */

/* ==== Foundation Layer ==== */

/* Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  touch-action: manipulation;
}

/* Hide Turbo progress bar */
.turbo-progress-bar {
  display: none !important;
}

/* 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;
}

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;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-overflow-scrolling: touch;
  /* Improve mobile interactions */
  touch-action: manipulation;
  scrollbar-width: thin;
  overflow-x: hidden;
  width: 100%;
}

/* Critical navigation positioning - must load before navigation.css to prevent flash */
.nav {
  inset: auto 0 0 0;
  z-index: 100;
}

.app-main {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Hardware acceleration for animated elements */
.plan-card,
.profile-photo,
.user-avatar {
  backface-visibility: hidden;
}

/* ==== Essential Components ==== */

/* Forms - Core styles only, detailed styles in forms.css */
input,
textarea,
select {
  font-family: inherit;
  font-size: var(--text-base);
  padding: var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--accent-bg);
  color: var(--text);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  transition: border-color var(--transition-standard);
}

/* Enhanced touch targets and mobile interactions */

/* Active state feedback for touch - disabled to prevent visual artifacts on mobile */

/* Smooth transitions for all interactive elements */
a,
input,
textarea,
select {
  transition: opacity var(--transition-standard), transform var(--transition-standard), border-color var(--transition-standard);
}

/* Enhanced touch targets - mobile-first approach */
button,
[role="button"],
input[type="submit"],
input[type="button"] {
  min-height: 44px;
  /* Apple's minimum recommended touch target */
  min-width: 44px;
}

/* Larger touch areas for form elements - prevent zoom on all devices */
input:not([type="hidden"]),
textarea,
select {
  min-height: 44px;
  font-size: 16px;
  /* Prevents zoom on iOS */
  padding: var(--space-sm) var(--space-md);
}


/* Enhanced focus indicators with :focus-visible */
button:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  border: 2px solid var(--accent);
  outline-offset: 2px;
  transition: outline-offset var(--transition-standard);
}

/* Adaptive hover states - only show on devices that can hover */
@media (any-hover: hover) {

  .btn:hover {
    box-shadow: var(--shadow-lg);
  }

  a:hover {
    color: var(--accent);
  }

  .plan-card:hover {
    box-shadow: var(--shadow-xl);
  }
}


/* ==== 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%;
}

/*
 * Note: This is a consolidated version with essential styles.
 * For full component styles, include individual CSS files:
 * - buttons.css
 * - forms.css
 * - navigation.css
 * - layout.css
 * - modals.css
 * - domains/_players.css
 * - training-sessions.css
 * - users.css
 * - organizations.css
 * - cards.css
 * - utilities.css
 * - pages.css
 * - badges.css
 * - checkout.css
 */