/*
 * 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.
 */

/* Pricing Toggle Styles */
.pricing-toggle {
  color: #6b7280;
}

.pricing-toggle.active {
  background-color: #3b82f6;
  color: white;
}

.pricing-toggle:not(.active):hover {
  background-color: #f3f4f6;
  color: #374151;
}

/* Hotwire Native App Optimizations */

/* Ensure html/body background extends into safe areas for proper theming */
/* Note: 'dark' class is on html, 'turbo-native-app' class is on body */

/* Set background on html element so it extends into all safe areas */
html:has(.turbo-native-app) {
  background-color: #f9fafb; /* gray-50 - light theme */
}

html.dark:has(.turbo-native-app) {
  background-color: #0f172a; /* dark-bg - dark theme */
}

.turbo-native-app {
  /* Light mode background */
  background-color: #f9fafb; /* gray-50 */
}

html.dark .turbo-native-app {
  /* Dark mode background */
  background-color: #0f172a; /* dark-bg */
}

/* Bottom safe area "chin" cover - fills the home indicator area with theme color */
/* Uses a real element for better WKWebView compatibility */
.native-bottom-safe-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: env(safe-area-inset-bottom);
  background-color: #f9fafb; /* gray-50 - light theme */
  z-index: 9999;
  pointer-events: none;
}

html.dark .native-bottom-safe-area {
  background-color: #0f172a; /* dark-bg - dark theme */
}

/* Safe area insets for iOS notch/dynamic island */
.turbo-native-app nav {
  padding-top: env(safe-area-inset-top);
}

/* Top padding to account for taller navbar with safe area */
.turbo-native-app .flex.flex-1.pt-16 {
  padding-top: calc(4rem + env(safe-area-inset-top));
}

/* Bottom padding for native tab bar (typically 49-83px + safe area) */
.turbo-native-app main {
  padding-bottom: calc(80px + env(safe-area-inset-bottom));
}

/* Sidebar bottom padding for native tab bar */
.turbo-native-app [data-controller="sidebar"] > div,
.turbo-native-app [data-controller="mobile-sidebar"] .overflow-y-auto {
  padding-bottom: calc(80px + env(safe-area-inset-bottom)) !important;
}

/* Move toasts to top of screen for native apps (avoids bottom tab bar) */
.turbo-native-app #toast-container {
  bottom: auto;
  top: calc(4rem + env(safe-area-inset-top) + 0.5rem);
  right: 1rem;
  left: 1rem;
}

/* Mobile menu scrolling and safe area handling */
.turbo-native-app [data-mobile-menu-target="menu"] {
  max-height: calc(100vh - 4rem - env(safe-area-inset-top) - 80px - env(safe-area-inset-bottom));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Hide admin/dev tools in native app for cleaner UX */
.turbo-native-app [data-mobile-menu-target="menu"] [href*="platform_admin"],
.turbo-native-app [data-mobile-menu-target="menu"] [href*="mission_control"],
.turbo-native-app [data-mobile-menu-target="menu"] [action*="impersonate"] {
  display: none !important;
}

/* Hide web-only elements in native apps */
.turbo-native-app .web-only {
  display: none !important;
}

/* Ensure touch targets meet minimum 44px for accessibility */
.turbo-native-app button,
.turbo-native-app a.btn,
.turbo-native-app input[type="submit"],
.turbo-native-app input[type="button"],
.turbo-native-app [role="button"] {
  min-height: 44px;
}

/* Remove hover states on touch devices in native apps */
.turbo-native-app *:hover {
  transition: none;
}

/* Improve form input sizing for touch */
.turbo-native-app input[type="text"],
.turbo-native-app input[type="email"],
.turbo-native-app input[type="password"],
.turbo-native-app input[type="number"],
.turbo-native-app input[type="tel"],
.turbo-native-app input[type="date"],
.turbo-native-app input[type="time"],
.turbo-native-app input[type="datetime-local"],
.turbo-native-app select,
.turbo-native-app textarea {
  min-height: 44px;
  font-size: 16px; /* Prevents iOS zoom on focus */
}