/**
 * MealPilot Shared Styles
 *
 * Centralized CSS for utility styles used across all base templates.
 * This file consolidates styles that were previously duplicated in
 * base.html, base_auth.html, and base_public.html.
 */

/* ==========================================================================
   Alpine.js Support
   ========================================================================== */

/* Hide elements with x-cloak until Alpine.js initializes */
[x-cloak] {
  display: none !important;
}

/* ==========================================================================
   HTMX Loading Indicators
   ========================================================================== */

/* Default: hide indicators */
.htmx-indicator {
  display: none;
}

/* Show indicator when HTMX request is in progress */
.htmx-request .htmx-indicator {
  display: inline-block;
}

/* Support for indicator as the request element itself */
.htmx-request.htmx-indicator {
  display: inline-block;
}

/* Hide elements during HTMX requests */
.htmx-request .htmx-indicator-hide {
  display: none;
}

/* ==========================================================================
   Layout Fixes
   ========================================================================== */

/* Safari Grid Fix: prevent grid items from expanding beyond container */
.grid > * {
  min-width: 0;
}

/* ==========================================================================
   Smooth Scrolling
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

/* ==========================================================================
   Mobile Support
   ========================================================================== */

/* Notch/safe area support for sticky navigation on mobile */
@media (max-width: 640px) {
  nav.sticky {
    padding-top: env(safe-area-inset-top, 0px);
  }
}