/**
 * Lyfestash — PWA & Mobile UX stylesheet
 *
 * Covers:
 *  - CSS variable design token system (light + dark via prefers-color-scheme)
 *  - Safe-area insets (iPhone notch / Dynamic Island)
 *  - Full-height layout (100dvh)
 *  - Scroll behaviour & overscroll prevention
 *  - Tap highlight & touch callout suppression
 *  - Minimum touch targets (WCAG 2.5.5)
 *  - Input zoom prevention on iOS
 *  - Horizontal overflow prevention
 *  - Staggered entry animations
 *  - Bottom-sheet modal pattern
 *  - Powered-by badge position above bottom tab bar
 */

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS — HSL values, used as hsl(var(--token))
   Default = light mode; dark mode overrides via prefers-color-scheme.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Backgrounds */
  --app-bg:            220 20% 97%;   /* #f5f7fa — page tint so cards lift */
  --app-surface:       0 0% 100%;     /* #ffffff — card / modal surfaces    */
  --app-surface-2:     220 13% 95%;   /* slightly darker surface            */

  /* Text */
  --app-text:          222 47% 6%;    /* iron-ore-950 */
  --app-text-muted:    220 9% 46%;    /* iron-ore-500 */
  --app-text-subtle:   220 9% 64%;    /* iron-ore-400 */

  /* Accent — Lyfestash blue */
  --app-accent:        220 100% 50%;  /* #0066ff */
  --app-accent-hover:  220 100% 44%;  /* slightly darker */
  --app-accent-subtle: 220 100% 97%;  /* bits-blue-50 */

  /* Border */
  --app-border:        220 13% 91%;   /* iron-ore-200 */
  --app-border-subtle: 220 13% 95%;   /* iron-ore-100 */

  /* Status */
  --app-danger:        0 72% 51%;
  --app-success:       142 71% 45%;

  /* Elevation shadows */
  --shadow-card:       0 1px 3px 0 rgb(0 0 0 / 0.07), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --shadow-modal:      0 20px 60px -8px rgb(0 0 0 / 0.18);

  /* Safe-area insets */
  --sat: env(safe-area-inset-top,    0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
  --sar: env(safe-area-inset-right,  0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --app-bg:            222 25% 9%;
    --app-surface:       225 20% 13%;
    --app-surface-2:     225 20% 17%;
    --app-text:          220 20% 94%;
    --app-text-muted:    220 9% 58%;
    --app-text-subtle:   220 9% 44%;
    --app-accent:        220 100% 65%;
    --app-accent-hover:  220 100% 72%;
    --app-accent-subtle: 220 40% 16%;
    --app-border:        222 20% 20%;
    --app-border-subtle: 222 20% 16%;
    --shadow-card:       0 1px 3px 0 rgb(0 0 0 / 0.3),  0 1px 2px -1px rgb(0 0 0 / 0.2);
    --shadow-modal:      0 20px 60px -8px rgb(0 0 0 / 0.5);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   BODY BACKGROUND — applies the subtle tint so white cards lift off it
   ═══════════════════════════════════════════════════════════════════════════ */
body {
  background-color: hsl(var(--app-bg));
}


/* ═══════════════════════════════════════════════════════════════════════════
   FULL-HEIGHT LAYOUT — use dvh so mobile browser bars don't cut content
   ═══════════════════════════════════════════════════════════════════════════ */
@supports (height: 100dvh) {
  .min-h-screen { min-height: 100dvh; }
  .h-screen      { height: 100dvh; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   OVERFLOW PREVENTION — stops horizontal bleed on narrow phones
   ═══════════════════════════════════════════════════════════════════════════ */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SAFE-AREA — standalone / installed app shell
   ═══════════════════════════════════════════════════════════════════════════ */
@media (display-mode: standalone) {
  body {
    padding-top: var(--sat);
  }

  .main-content,
  main {
    padding-bottom: calc(var(--sab) + 16px);
  }

  .fixed-bottom-nav {
    padding-bottom: var(--sab);
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL BEHAVIOUR
   ═══════════════════════════════════════════════════════════════════════════ */
html {
  scroll-behavior: smooth;
  overscroll-behavior-y: none;
}

.overflow-y-auto,
.overflow-auto {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TAP HIGHLIGHT & CALLOUT SUPPRESSION
   Applies to html root so all tappable elements (including onclick divs) are covered.
   ═══════════════════════════════════════════════════════════════════════════ */
html {
  -webkit-tap-highlight-color: transparent;
}

img {
  -webkit-touch-callout: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
   MINIMUM TOUCH TARGETS (WCAG 2.5.5 — 44×44px minimum)
   ═══════════════════════════════════════════════════════════════════════════ */
button,
[role="button"],
a,
label[for] {
  min-height: 44px;
  min-width: 44px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   INPUT ZOOM PREVENTION — font-size ≥ 16px stops iOS Safari auto-zoom
   Excludes #searchInput which uses inline styles for precise control.
   ═══════════════════════════════════════════════════════════════════════════ */
input[type="text"]:not(#searchInput),
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="url"],
select,
textarea {
  font-size: max(16px, 1rem);
}

/* Search input on mobile — precise sizing via inline styles, no override */
#searchInput {
  font-size: 15px !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TYPOGRAPHY — Sora for display headings (h1 only)
   Add to the Google Fonts link in app.html:
     &family=Sora:wght@600;700
   ═══════════════════════════════════════════════════════════════════════════ */
h1 {
  font-family: 'Sora', 'Inter', sans-serif;
}


/* ═══════════════════════════════════════════════════════════════════════════
   STAGGERED ENTRY ANIMATIONS
   Apply .ls-enter to a parent, then .ls-enter-1 / -2 / -3 to children.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes ls-appear {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ls-enter {
  animation: ls-appear 0.3s ease forwards;
}

.ls-enter-1 {
  animation: ls-appear 0.3s ease forwards;
  animation-delay: 0.05s;
  opacity: 0;
}

.ls-enter-2 {
  animation: ls-appear 0.3s ease forwards;
  animation-delay: 0.1s;
  opacity: 0;
}

.ls-enter-3 {
  animation: ls-appear 0.3s ease forwards;
  animation-delay: 0.15s;
  opacity: 0;
}

.ls-enter-4 {
  animation: ls-appear 0.3s ease forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

/* Slide-up used for bottom sheets and install nudge */
@keyframes slideUpFadeIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-slide-up {
  animation: slideUpFadeIn 0.3s ease-out forwards;
}


/* ═══════════════════════════════════════════════════════════════════════════
   BOTTOM SHEET MODAL PATTERN (playbook §10)
   Wrapper:  .ls-sheet-backdrop
   Panel:    .ls-sheet-panel
   Handle:   .ls-sheet-handle
   ═══════════════════════════════════════════════════════════════════════════ */
.ls-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ls-sheet-panel {
  background: hsl(var(--app-surface));
  border-radius: 1.5rem 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  padding-bottom: calc(2.5rem + var(--sab));
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  animation: slideUpFadeIn 0.28s cubic-bezier(0.32, 0.72, 0, 1) forwards;
}

.ls-sheet-handle {
  width: 2.5rem;
  height: 0.25rem;
  border-radius: 9999px;
  background: hsl(var(--app-border));
  margin: 0 auto 1.25rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   IOS INSTALL NUDGE
   ═══════════════════════════════════════════════════════════════════════════ */
#iosInstallNudge {
  padding-bottom: calc(env(safe-area-inset-bottom, 16px) + 8px);
}


/* ═══════════════════════════════════════════════════════════════════════════
   POWERED-BY BADGE — sits above bottom tab bar on mobile
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #poweredByBadge {
    bottom: calc(4rem + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   FLOATING ACTION BUTTON — desktop overrides the inline mobile style
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  #addRecordBtn {
    bottom: 2rem !important;
    right: 2rem;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   MAIN CONTENT TOP PADDING
   Mobile: flat 48px header. Desktop: pill nav ~7rem.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  #mainContent {
    padding-top: 7rem !important;
  }
}
@media (max-width: 767px) {
  #mainContent {
    padding-top: 3rem !important; /* 48px nav bar */
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL PADDING — main content must clear bottom tab bar + FAB
   Tab bar = ~64px, FAB = ~60px, safe area, breathing room = ~32px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  main {
    padding-bottom: calc(10rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   RECORD CARDS — mobile: single grouped list (iOS Settings style)
   Desktop: grid tiles (unchanged, controlled by Tailwind md: classes)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  div#recordsContainer {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  div#recordsContainer > div {
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #efefef !important;
    box-shadow: none !important;
    background: #ffffff !important;
    height: auto !important;
    min-height: unset !important;
    flex-shrink: 0 !important;
  }

  div#recordsContainer > div:last-child {
    border-bottom: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SCROLLBAR HIDE — used on filter chip row
   ═══════════════════════════════════════════════════════════════════════════ */
.scrollbar-hide {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}