/* ============================================================
   LifeSync PWA — Supplemental Styles  (styles.css)
   Version : 6.1
   Note    : Core styles are inline in index.html.
             This file holds supplemental / override rules only.
   ============================================================ */

/* ── PWA-specific scrollbar polish ──────────────────────── */
::-webkit-scrollbar              { width: 4px; height: 4px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(0,212,255,0.25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(0,212,255,0.45); }

/* ── Pull-to-refresh prevention on iOS standalone ────────── */
@media (display-mode: standalone) {
  html {
    overscroll-behavior-y: none;
  }
  body {
    overscroll-behavior-y: none;
  }
}

/* ── Safe-area helpers (used by install / update popups) ─── */
.safe-top    { padding-top:    env(safe-area-inset-top,    0px); }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
.safe-left   { padding-left:   env(safe-area-inset-left,   0px); }
.safe-right  { padding-right:  env(safe-area-inset-right,  0px); }

/* ── Offline bar: adjusts for notch on iOS standalone ───── */
@media (display-mode: standalone) {
  #pwa-offline-bar {
    padding-top: max(8px, env(safe-area-inset-top));
  }
}

/* ── Smooth entrance for PWA update popup ────────────────── */
#pwa-update-popup {
  will-change: transform;
}

/* ── Install banner transition fix ──────────────────────── */
#pwa-install-banner {
  will-change: transform;
}

/* ── Focus-visible ring for keyboard navigation ─────────── */
:focus-visible {
  outline: 2px solid rgba(0, 212, 255, 0.7);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Ghost tap highlight removal (belt-and-suspenders) ───── */
* {
  -webkit-tap-highlight-color: transparent;
}

/* ── Loading shimmer for async content ───────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s infinite linear;
  border-radius: 8px;
}

/* ── Utility: visually hidden but accessible ─────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Print: hide interactive chrome ─────────────────────── */
@media print {
  #pwa-splash,
  #pwa-install-banner,
  #pwa-update-popup,
  #pwa-offline-bar { display: none !important; }
}