/*
 * CMC Endocrinology PWA — Frontend CSS v2.2
 *
 * VISIBILITY STRATEGY (reliable across all Android browsers):
 *
 *   A synchronous inline <script> in <head> sets ONE of these classes on <html>
 *   BEFORE the browser paints anything:
 *
 *     html.cmc-pwa-app     → installed standalone app
 *     html.cmc-pwa-browser → regular browser visit
 *
 *   All PWA chrome (splash, bottom nav, offline banner) → hidden by default,
 *   only shown when html.cmc-pwa-app is present.
 *
 *   Install banner/FAB → shown only when html.cmc-pwa-browser is present,
 *   controlled by JS (starts hidden, JS shows it after beforeinstallprompt).
 *
 *   NO @media (display-mode) queries — unreliable with CDN/LiteSpeed caching.
 */

/* ── CSS variables ─────────────────────────────────────────── */
:root {
  --cmc-nav-height:   60px;
  --cmc-primary:      #1565C0;
  --cmc-primary-lt:   #E3F2FD;
  --cmc-accent:       #42A5F5;
  --cmc-nav-bg:       #fff;
  --cmc-nav-border:   rgba(0,0,0,.08);
  --cmc-nav-icon:     #9CA3AF;
  --cmc-shadow-nav:   0 -2px 16px rgba(0,0,0,.08);
}


/* ════════════════════════════════════════════════════════════
   SPLASH SCREEN
   Hidden everywhere. Only shown inside installed app.
════════════════════════════════════════════════════════════ */
#cmc-pwa-splash {
  display: none;
}

html.cmc-pwa-app #cmc-pwa-splash {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 999999;
  align-items: center;
  justify-content: center;
  transition: opacity .5s ease, transform .5s ease;
  will-change: opacity, transform;
}

/* JS-driven dismiss */
#cmc-pwa-splash.cmc-splash--hide {
  opacity: 0 !important;
  transform: scale(1.04) !important;
  pointer-events: none !important;
}

.cmc-splash-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 40px 32px;
  animation: cmc-splash-in .6s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes cmc-splash-in {
  from { opacity:0; transform:translateY(24px) scale(.95); }
  to   { opacity:1; transform:translateY(0)    scale(1);   }
}
.cmc-splash-icon {
  width:100px; height:100px; border-radius:28px; overflow:hidden;
  margin-bottom:20px; box-shadow:0 8px 32px rgba(0,0,0,.25);
  background:rgba(255,255,255,.15);
  display:flex; align-items:center; justify-content:center;
}
.cmc-splash-icon img { width:100%; height:100%; object-fit:cover; }
.cmc-splash-icon svg { width:60px; height:60px; }
.cmc-splash-title {
  font-family:Roboto,-apple-system,sans-serif;
  font-size:26px; font-weight:700; color:#fff;
  margin:0 0 4px; letter-spacing:-.3px;
}
.cmc-splash-sub   { font-size:14px; color:rgba(255,255,255,.7); margin:0 0 32px; }
.cmc-splash-spinner { width:40px; height:40px; }
.cmc-spinner-ring {
  width:40px; height:40px;
  border:3px solid rgba(255,255,255,.25);
  border-top-color:rgba(255,255,255,.85);
  border-radius:50%;
  animation:cmc-spin .9s linear infinite;
}
@keyframes cmc-spin { to { transform:rotate(360deg); } }


/* ════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION
   Hidden everywhere. Only shown inside installed app.
════════════════════════════════════════════════════════════ */
#cmc-pwa-bottom-nav {
  display: none;
}

html.cmc-pwa-app #cmc-pwa-bottom-nav {
  display: flex;
  position: fixed;
  bottom:0; left:0; right:0;
  height: var(--cmc-nav-height);
  background: var(--cmc-nav-bg);
  border-top: 1px solid var(--cmc-nav-border);
  box-shadow: var(--cmc-shadow-nav);
  align-items: stretch;
  z-index: 9998;
  padding-bottom: env(safe-area-inset-bottom, 0);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Push content above nav only in app mode */
html.cmc-pwa-app body {
  padding-bottom: calc(var(--cmc-nav-height) + env(safe-area-inset-bottom, 0)) !important;
}

.cmc-nav-item {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; text-decoration:none; color:var(--cmc-nav-icon); padding:6px 4px;
  position:relative; transition:color .2s ease;
  -webkit-tap-highlight-color:transparent; min-width:0;
}
.cmc-nav-item:hover    { color:var(--cmc-primary); }
.cmc-nav-item--active  { color:var(--cmc-primary); }
.cmc-nav-item--active::before {
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:32px; height:3px; background:var(--cmc-primary);
  border-radius:0 0 3px 3px;
}
.cmc-nav-icon {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:28px; height:28px;
}
.cmc-nav-icon svg {
  width:22px; height:22px; fill:currentColor;
  transition:transform .2s cubic-bezier(.34,1.56,.64,1);
}
.cmc-nav-item--active .cmc-nav-icon svg { transform:scale(1.1); }
.cmc-nav-label {
  font-size:10px; font-weight:500; font-family:Roboto,-apple-system,sans-serif;
  letter-spacing:.2px; line-height:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.cmc-nav-badge {
  position:absolute; top:-4px; right:-6px;
  background:#E53E3E; color:#fff;
  font-size:9px; font-weight:700;
  min-width:16px; height:16px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  padding:0 4px; border:1.5px solid #fff;
}
.cmc-nav-item::after {
  content:''; position:absolute; inset:4px; border-radius:12px;
  background:var(--cmc-primary-lt); opacity:0; transform:scale(.8);
  transition:opacity .2s, transform .2s;
}
.cmc-nav-item:active::after { opacity:1; transform:scale(1); }


/* ════════════════════════════════════════════════════════════
   OFFLINE BANNER
   Hidden everywhere. Only shown inside installed app.
════════════════════════════════════════════════════════════ */
#cmc-pwa-offline-banner {
  display: none;
}

html.cmc-pwa-app #cmc-pwa-offline-banner {
  display: flex;
  position:fixed; top:-60px; left:12px; right:12px;
  background:#1F2937; color:#fff;
  padding:10px 16px; border-radius:12px;
  align-items:center; gap:10px;
  font-size:13px; font-weight:500;
  z-index:99999; box-shadow:0 4px 16px rgba(0,0,0,.3);
  transition:top .35s cubic-bezier(.34,1.56,.64,1);
  max-width:500px; margin:0 auto;
}
html.cmc-pwa-app #cmc-pwa-offline-banner.cmc-offline--visible { top:12px; }
#cmc-pwa-offline-banner svg { width:18px; height:18px; fill:#F59E0B; flex-shrink:0; }
.cmc-pwa-offline-retry {
  background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.3);
  color:#fff; border-radius:8px; padding:4px 12px;
  font-size:12px; font-weight:600; cursor:pointer; margin-left:auto; white-space:nowrap;
}


/* ════════════════════════════════════════════════════════════
   APP-MODE BEHAVIOUR (standalone only)
════════════════════════════════════════════════════════════ */
html.cmc-pwa-app body {
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
/* Re-enable text selection in content areas */
html.cmc-pwa-app p,
html.cmc-pwa-app h1, html.cmc-pwa-app h2, html.cmc-pwa-app h3,
html.cmc-pwa-app input, html.cmc-pwa-app textarea {
  -webkit-user-select: text;
  user-select: text;
}
html.cmc-pwa-app a,
html.cmc-pwa-app button { -webkit-tap-highlight-color:transparent; }


/* ════════════════════════════════════════════════════════════
   INSTALL BANNER
   • Browser mode  (html.cmc-pwa-browser): JS shows it via .cmc-install--visible
   • Standalone mode (html.cmc-pwa-app):   always hidden — user already installed
════════════════════════════════════════════════════════════ */

/* Hide entirely in standalone — user already installed */
html.cmc-pwa-app #cmc-pwa-install-banner,
html.cmc-pwa-app #cmc-pwa-fab-install { display:none !important; }

/* Banner: starts off-screen below viewport. JS slides it up. */
#cmc-pwa-install-banner {
  position:fixed;
  bottom:20px;          /* browser mode: no nav bar, so just 20px from bottom */
  left:12px; right:12px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 4px 24px rgba(0,0,0,.16), 0 1px 4px rgba(0,0,0,.08);
  z-index:2147483640;   /* below iOS sheet (2147483647) but above everything else */
  transform:translateY(calc(100% + 40px));
  opacity:0;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  max-width:480px;
  margin:0 auto;
  pointer-events:none;
  will-change:transform,opacity;
}
/* JS adds this class to make it visible */
#cmc-pwa-install-banner.cmc-install--visible {
  transform:translateY(0) !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
.cmc-install-banner__inner {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
}
.cmc-install-banner__icon { width:44px; height:44px; flex-shrink:0; }
.cmc-install-banner__icon img,
.cmc-install-banner__icon svg { width:44px; height:44px; border-radius:10px; object-fit:cover; }
.cmc-install-banner__text { flex:1; min-width:0; }
.cmc-install-banner__text strong {
  display:block; font-size:14px; font-weight:600; color:#1a1a2e;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cmc-install-banner__text span { display:block; font-size:12px; color:#666; margin-top:2px; }
.cmc-install-banner__btn {
  color:#fff; border:none; border-radius:20px; padding:8px 18px;
  font-size:13px; font-weight:600; cursor:pointer; flex-shrink:0;
  transition:filter .2s; white-space:nowrap;
  background:#1565C0; /* fallback; overridden by inline style from PHP */
}
.cmc-install-banner__btn:hover  { filter:brightness(1.1); }
.cmc-install-banner__btn:active { filter:brightness(.95); }
.cmc-install-banner__dismiss {
  background:none; border:none; cursor:pointer;
  padding:6px; color:#bbb; flex-shrink:0;
  display:flex; align-items:center; border-radius:50%;
  transition:background .15s;
}
.cmc-install-banner__dismiss:hover { background:#f5f5f5; color:#666; }
.cmc-install-banner__dismiss svg { width:18px; height:18px; }


/* ════════════════════════════════════════════════════════════
   INSTALL FAB
   Small floating button — shown after banner is dismissed.
   Hidden by default; JS adds .cmc-fab--visible to show it.
════════════════════════════════════════════════════════════ */
#cmc-pwa-fab-install {
  position:fixed;
  bottom:20px; right:16px;
  width:52px; height:52px;
  border-radius:50%;
  color:#fff; border:none; cursor:pointer;
  background:#1565C0;
  box-shadow:0 4px 16px rgba(21,101,192,.4);
  display:none;         /* shown only when JS adds .cmc-fab--visible */
  align-items:center; justify-content:center;
  z-index:2147483639;
  transition:transform .2s, box-shadow .2s;
  will-change:transform;
}
#cmc-pwa-fab-install.cmc-fab--visible { display:flex !important; }
#cmc-pwa-fab-install:hover  { transform:scale(1.08); box-shadow:0 6px 24px rgba(21,101,192,.5); }
#cmc-pwa-fab-install:active { transform:scale(.94); }
#cmc-pwa-fab-install svg    { width:24px; height:24px; }


/* ════════════════════════════════════════════════════════════
   UPDATE BAR (both modes)
════════════════════════════════════════════════════════════ */
.cmc-pwa-update-bar {
  position:fixed; top:0; left:0; right:0; z-index:99998;
  background:var(--cmc-primary); color:#fff;
  display:flex; align-items:center; justify-content:center; gap:12px;
  padding:10px 16px; font-size:.875rem; font-weight:500;
  transform:translateY(-100%); transition:transform .3s cubic-bezier(.22,.68,0,1.2);
}
.cmc-pwa-update-bar--visible { transform:translateY(0); }
.cmc-pwa-update-bar__btn {
  background:#fff; color:var(--cmc-primary);
  border:none; border-radius:6px; padding:5px 14px;
  font-size:.8rem; font-weight:700; cursor:pointer;
}
.cmc-pwa-update-bar__close {
  background:transparent; border:none;
  color:rgba(255,255,255,.7); font-size:1.2rem; cursor:pointer; margin-left:4px;
}


/* ════════════════════════════════════════════════════════════
   TOAST (both modes)
════════════════════════════════════════════════════════════ */
.cmc-pwa-toast {
  position:fixed;
  bottom:calc(72px + env(safe-area-inset-bottom,0) + 12px);
  left:50%; transform:translateX(-50%) translateY(20px);
  background:rgba(26,37,64,.92); color:#fff;
  padding:10px 20px; border-radius:24px;
  font-size:.85rem; font-weight:500; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s; z-index:99997;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.cmc-pwa-toast--visible { opacity:1; transform:translateX(-50%) translateY(0); }


/* ════════════════════════════════════════════════════════════
   PULL-TO-REFRESH DISABLE
════════════════════════════════════════════════════════════ */
body.cmc-no-pull,
html.cmc-no-pull { overscroll-behavior-y:contain; }
