/*
 * CMC Endocrinology PWA — Frontend CSS v4.0.1
 *
 * VISIBILITY STRATEGY:
 *   Inline <script> in <head> sets html.cmc-pwa-app (standalone) or
 *   html.cmc-pwa-browser (regular visit) BEFORE any paint.
 *
 * SCROLL RULE:
 *   NEVER modify body overflow, height, or padding-bottom.
 *   The /home_mob/ page owns its own scroll containers.
 *   Our nav/splash are position:fixed — they overlay, not push.
 */

/* ── CSS variables ──────────────────────────────────────────── */
:root {
  --cmc-nav-h:      60px;
  --cmc-primary:    #1565C0;
  --cmc-primary-lt: #E3F2FD;
  --cmc-icon-color: #9CA3AF;
  --cmc-vh:         1vh; /* overridden by JS for accurate mobile height */
}


/* ══════════════════════════════════════════════════════════════
   NATIVE APP FEEL — standalone mode only
   Applied to <html> not <body> to avoid breaking page scroll.
══════════════════════════════════════════════════════════════ */
html.cmc-pwa-app {
  /* Prevent Chrome's address-bar-reveal animation from causing layout jump */
  overscroll-behavior-y: none;
}

/* Tap highlight off in app mode */
html.cmc-pwa-app a,
html.cmc-pwa-app button {
  -webkit-tap-highlight-color: transparent;
}

/* Text selection: off for UI chrome, on for content */
html.cmc-pwa-app .cmc-nav-item,
html.cmc-pwa-app #cmc-splash {
  -webkit-user-select: none;
  user-select: none;
}


/* ══════════════════════════════════════════════════════════════
   SPLASH SCREEN
   display:none everywhere.
   Shown ONLY inside installed app (html.cmc-pwa-app).
══════════════════════════════════════════════════════════════ */
/* SPLASH — always hidden by default, shown ONLY by JS after standalone check.
 * Never shown by CSS alone — avoids flash during CSS parse delay.
 * JS in <head> immediately adds html.cmc-pwa-splash-ready when in standalone
 * mode AND this is the first page load (not an in-app navigation). */
#cmc-splash {
  display: none !important; /* overridden by .cmc-splash-show class set by JS */
}

/* JS adds this class only when splash should actually show */
#cmc-splash.cmc-splash-show {
  display: flex !important;
  position: fixed;
  inset: 0;
  z-index: 2147483640;
  align-items: center;
  justify-content: center;
  opacity: 1;
  pointer-events: auto;
}

/* Fade-out transition applied when JS dismisses splash */
#cmc-splash.cmc-splash-hide {
  opacity: 0 !important;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.cmc-splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 32px;
  animation: cmc-splash-in 0.5s ease both;
}
@keyframes cmc-splash-in {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
.cmc-splash-icon {
  width: 96px; height: 96px;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
}
.cmc-splash-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmc-splash-icon svg { width: 56px; height: 56px; }
.cmc-splash-title {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 24px; font-weight: 700;
  color: #fff; margin: 0 0 6px;
}
.cmc-splash-sub {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin: 0 0 28px;
}
.cmc-spin-ring {
  width: 36px; height: 36px;
  border: 3px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.85);
  border-radius: 50%;
  animation: cmc-spin 0.8s linear infinite;
}
@keyframes cmc-spin { to { transform: rotate(360deg); } }


/* ══════════════════════════════════════════════════════════════
   BOTTOM NAVIGATION
   display:none everywhere.
   Shown ONLY in html.cmc-pwa-app (installed/standalone mode).

   position:fixed — overlays page content.
   Does NOT add padding-bottom to body (page owns its own layout).
══════════════════════════════════════════════════════════════ */
#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 accounts for device home indicator (safe area) */
  height: calc(var(--cmc-nav-h) + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,0.97);
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -1px 0 rgba(0,0,0,0.05), 0 -4px 16px rgba(0,0,0,0.06);
  align-items: stretch;
  z-index: 9999;
  /* Padding for home indicator (iPhone X+, modern Android) */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* GPU-composited layer */
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Individual nav items */
.cmc-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--cmc-icon-color);
  padding: 6px 4px;
  min-width: 0;
  position: relative;
  transition: color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.cmc-nav-item:active {
  opacity: 0.7;
}

.cmc-nav-item--active {
  color: var(--cmc-primary);
}

/* Active indicator line at top */
.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 4px 4px;
}

.cmc-nav-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
}

.cmc-nav-icon svg {
  width: 22px; height: 22px;
  fill: currentColor;
  transition: transform 0.18s cubic-bezier(0.34,1.56,0.64,1);
  display: block;
}

.cmc-nav-item--active .cmc-nav-icon svg {
  transform: scale(1.12);
}

.cmc-nav-label {
  font-size: 10px;
  font-weight: 500;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  letter-spacing: 0.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 3px;
  border: 1.5px solid #fff;
}


/* ══════════════════════════════════════════════════════════════
   OFFLINE BANNER
   Shown inside installed app when network is lost.
══════════════════════════════════════════════════════════════ */
#cmc-offline-bar {
  display: none;
  position: fixed;
  top: -56px; left: 12px; right: 12px;
  background: #1F2937;
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  font-family: -apple-system, sans-serif;
  z-index: 99998;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  transition: top 0.3s cubic-bezier(0.34,1.56,0.64,1);
  max-width: 500px;
  margin: 0 auto;
}

html.cmc-pwa-app #cmc-offline-bar {
  display: flex;
}

#cmc-offline-bar.cmc-offline--visible {
  top: 12px;
}

#cmc-offline-bar svg {
  width: 18px; height: 18px;
  fill: #F59E0B;
  flex-shrink: 0;
}

.cmc-pwa-offline-retry {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
  font-family: inherit;
}


/* ══════════════════════════════════════════════════════════════
   UPDATE BAR
══════════════════════════════════════════════════════════════ */
.cmc-pwa-update-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99997;
  background: var(--cmc-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  font-family: -apple-system, sans-serif;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}
.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: 13px;
  font-weight: 700;
  cursor: pointer;
}
.cmc-pwa-update-bar__close {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 20px;
  cursor: pointer;
  margin-left: 4px;
  padding: 0 4px;
}


/* ══════════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════════ */
.cmc-pwa-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: rgba(26,37,64,0.9);
  color: #fff;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 99996;
  font-family: -apple-system, sans-serif;
}
.cmc-pwa-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
