@tailwind base;
@tailwind components;
@tailwind utilities;
/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* Apply the base font family */
@layer base {
  html {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  /* No special JavaScript detection needed */

  /* Safe Area Insets for Native Mobile Apps
   *
   * CSS environment variables that expose device-specific safe areas.
   * These variables are automatically populated by iOS/Android when:
   * 1. viewport-fit=cover is set in the viewport meta tag
   * 2. WebView is constrained to safe area layout guide (native layer)
   *
   * Values represent insets for:
   * - safe-area-inset-top: Status bar, notch, Dynamic Island
   * - safe-area-inset-bottom: Home indicator, navigation bar
   * - safe-area-inset-left/right: Landscape cutouts, rounded corners
   *
   * Fallback to 0 for browsers that don't support env() or desktop web.
   * See SPEC-safe-area-handling.md for complete implementation details.
   */
  :root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
  }

  /* Apply safe area padding to body when running in Turbo Native app
   *
   * The .turbo-native-app class is automatically added by application.html.erb
   * when the user agent matches /Turbo Native/.
   *
   * This ensures web content is never obscured by system UI elements:
   * - iOS: Status bar, notch, Dynamic Island, home indicator
   * - Android: Status bar, navigation bar (gesture or button mode)
   *
   * Safe area values come from native layer:
   * - iOS: safeAreaLayoutGuide provides values to WebKit
   * - Android: WindowInsets values applied as WebView padding + CSS env()
   */
  body.turbo-native-app {
    /* Apply safe area insets as padding to prevent content obstruction */
    padding-top: var(--safe-area-inset-top);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
  }

  /* Legacy iOS 11 fallback using constant() instead of env()
   *
   * iOS 11.0-11.1 used constant() before standardizing on env().
   * This is rarely needed now (iOS 15+ is minimum) but kept for reference.
   * Modern browsers ignore constant() and use env() above.
   */
  @supports(padding: constant(safe-area-inset-top)) {
    body.turbo-native-app {
      padding-top: constant(safe-area-inset-top);
      padding-right: constant(safe-area-inset-right);
      padding-bottom: constant(safe-area-inset-bottom);
      padding-left: constant(safe-area-inset-left);
    }
  }
}

@layer components {
  /* We've removed the custom components in favor of daisyUI components */
  
  /* Custom styles that are still needed */
  .input-error {
    @apply border-error focus:border-error focus:ring-error;
  }
  
  .has-error .label-text {
    @apply text-error;
  }
  
  /* Fade in animation for buttons */
  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: scale(0.95);
    }
    to {
      opacity: 1;
      transform: scale(1);
    }
  }
  
  .animate-fade-in {
    animation: fadeIn 0.3s ease-in-out;
  }

  /* Flash container styles */
  .flash-container {
    @apply fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm;
  }
  
  .flash-container-local {
    @apply flex flex-col gap-2;
  }
  
  /* Accordion animations */
  [data-accordion-target="content"] {
    transition: max-height 0.3s ease-in-out;
  }
}

  /* These button components have been replaced by daisyUI button classes
     Use the following daisyUI classes instead:
     - btn: Basic button
     - btn-primary: Primary button
     - btn-accent: Accent button 
     - btn-outline: Outlined button
     - btn-sm: Small button size
     - btn-xs: Extra small button size
     - For loading state, use loading class or a separate loading component
  */
  /* Card components have been replaced by daisyUI card classes
     Use the following daisyUI classes instead:
     - card: Main card container
     - card-body: Container for card content
     - card-title: Card title element
     - card-actions: Container for action buttons
  */
  /* Spinner components have been replaced by daisyUI loading classes
     Use the following daisyUI classes instead:
     - loading: Basic loading spinner
     - loading-spinner: Default spinner style 
     - loading-dots: Loading dots style
     - loading-ring: Loading ring style
     - loading-sm/md/lg: Different sizes
  */
  /* Flash messages have been replaced by daisyUI alert classes
     Use the following daisyUI classes instead:
     - alert: Base alert component
     - alert-success: Success alert style
     - alert-error: Error alert style
     - alert-info: Informational alert style
     - alert-warning: Warning alert style
     
     Example: <div role="alert" class="alert alert-success">Success message</div>
  */


/* ------ LEAFLET MAP OVERRIDES ------ */
/* These are kept separate as they are specific to Leaflet integration */

.leaflet-touch .leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 1px 5px rgba(0,0,0,0.2) !important;
}

.leaflet-touch .leaflet-control-zoom a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  font-size: 18px !important;
}

/* Make the map container take the full viewport height on mobile */
.h-screen {
  height: 100vh; /* Fallback */
  height: calc(var(--vh, 1vh) * 100); /* Mobile viewport fix */
}

/* Mobile-friendly map container */
.location-map-container {
  width: 100%;
  height: 50vh;
  min-height: 300px;
}

@media (min-width: 768px) {
  .location-map-container {
    height: 70vh;
  }
}