/* ============================================================
   Lipslay PWA / Mobile polish
   - iOS 100vh fix (dvh / -webkit-fill-available)
   - 44px touch targets
   - fluid typography (clamp)
   - skeleton loaders
   ============================================================ */

/* iOS Safari 100vh scrolling bug + safe-area viewport */
html { height: -webkit-fill-available; }
body { min-height: 100vh; min-height: 100dvh; }

/* Minimum 44x44px touch targets */
button,
.btn,
a.nav-link,
input,
select,
textarea,
.dropdown-item,
.form-check-input {
  min-height: 44px;
}
.form-check { min-height: 44px; display: flex; align-items: center; }

@media (pointer: coarse) {
  .btn-sm, .btn-xs { min-height: 44px; }
  .nav-link { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  input.form-control-sm, select.form-control-sm { min-height: 44px; }
}

/* Fluid typography */
:root { font-size: clamp(14px, 0.9rem + 0.4vw, 17px); }
h1, .h1 { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.4rem); }
h2, .h2 { font-size: clamp(1.25rem, 1rem + 1.5vw, 1.9rem); }
h3, .h3 { font-size: clamp(1.1rem, 0.95rem + 1vw, 1.5rem); }
h4, .h4 { font-size: clamp(1rem, 0.9rem + 0.6vw, 1.25rem); }
p, .text-body { font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1rem); }

/* Skeleton loaders (no layout shift) */
.ls-skeleton {
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
  border-radius: 6px;
}
.ls-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: ls-shimmer 1.4s infinite;
}
@keyframes ls-shimmer {
  100% { transform: translateX(100%); }
}
.ls-skeleton-text { height: 1em; margin-bottom: 0.55em; }
.ls-skeleton-card { height: 120px; margin-bottom: 0.75rem; }
.ls-skeleton-avatar { width: 44px; height: 44px; border-radius: 50%; }

@media (prefers-reduced-motion: reduce) {
  .ls-skeleton::after { animation: none; }
}