/* ═══════════════════════════════════════════════════════════════
   TurfArena PWA CSS — v13
   Covers:
     • Safe-area / notch handling (iOS + Android)
     • Standalone mode layout adjustments
     • Android install banner
     • iOS install instructions (with Share arrow)
     • Update banner
     • Network status bar
     • Bottom navigation (standalone only)
     • Toast notifications
═══════════════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties ────────────────────────────────────────────────── */
:root {
  --pwa-green:      #0d2b1f;
  --pwa-lime:       #b5f04a;
  --pwa-lime-dark:  #8fc234;
  --pwa-white:      #ffffff;
  --pwa-muted:      rgba(255,255,255,0.55);
  --pwa-border:     rgba(181,240,74,0.25);
  --pwa-shadow:     0 8px 40px rgba(0,0,0,0.5);
  --pwa-radius:     20px;
  --pwa-bottom-h:   64px;  /* height of bottom nav */

  /* Safe areas — all calculations reference these */
  --sat: env(safe-area-inset-top,    0px);
  --sar: env(safe-area-inset-right,  0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left,   0px);
}

/* ─── Standalone mode: global layout fixes ─────────────────────────────────── */
@media (display-mode: standalone) {
  /* Prevent rubber-band scroll at page edges */
  html, body { overscroll-behavior: none; }

  /* Lift sticky navbar above status bar (Dynamic Island / notch) */
  .navbar {
    padding-top: max(16px, var(--sat));
  }

  /* Admin topbar */
  .admin-topbar {
    padding-top: var(--sat);
    height: calc(60px + var(--sat));
  }
  .admin-sidebar { padding-top: var(--sat); }

  /* Push page content above bottom nav */
  main, .admin-main > .admin-content {
    padding-bottom: calc(var(--pwa-bottom-h) + var(--sab) + 16px);
  }

  /* Landscape: respect left/right notch on iPhone */

  /* ── Hide Login / Join Now from the navbar — the bottom nav already has them ── */
  .btn-nav-ghost[href*="/Account/Login"],
  .btn-nav-primary[href*="/Account/Register"] {
    display: none !important;
  }

  /* ── Hide Admin, My Bookings, and Logout from the navbar — bottom nav covers them ── */
  .btn-nav-admin,
  .btn-nav-ghost[href*="MyBookings"],
  .btn-nav-ghost[type="submit"] {
    display: none !important;
  }
  body {
    padding-left:  var(--sal);
    padding-right: var(--sar);
  }
}

/* ─── Android / Chrome install banner ─────────────────────────────────────── */
#pwa-install-banner {
  position:   fixed;
  bottom:     calc(16px + var(--sab));
  left:       16px;
  right:      16px;
  max-width:  520px;
  margin:     0 auto;
  background: var(--pwa-green);
  border:     1.5px solid var(--pwa-border);
  border-radius: var(--pwa-radius);
  box-shadow: var(--pwa-shadow);
  z-index:    10000;
  animation:  pwaBannerUp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes pwaBannerUp {
  from { transform: translateY(120%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.pwa-banner-inner {
  display:     flex;
  align-items: center;
  gap:         12px;
  padding:     14px 14px 14px 16px;
}

.pwa-banner-icon {
  width:         52px;
  height:        52px;
  border-radius: 14px;
  flex-shrink:   0;
  object-fit:    cover;
  /* Subtle shadow so the icon pops on the dark bg */
  box-shadow:    0 2px 8px rgba(0,0,0,0.4);
}

.pwa-banner-text {
  flex:      1;
  min-width: 0;
}
.pwa-banner-text strong {
  display:     block;
  color:       var(--pwa-white);
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size:   0.92rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.pwa-banner-text span {
  display:    block;
  color:      var(--pwa-muted);
  font-size:  0.76rem;
  margin-top: 2px;
  white-space: nowrap;
  overflow:   hidden;
  text-overflow: ellipsis;
}

.pwa-banner-install {
  background:  var(--pwa-lime);
  color:       var(--pwa-green);
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size:   0.84rem;
  padding:     10px 18px;
  border:      none;
  border-radius: 100px;
  cursor:      pointer;
  white-space: nowrap;
  flex-shrink: 0;
  min-height:  42px;
  transition:  background 0.2s, transform 0.15s;
}
.pwa-banner-install:hover  { background: #c8ff5a; }
.pwa-banner-install:active { transform: scale(0.95); }

.pwa-banner-close {
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       rgba(255,255,255,0.3);
  flex-shrink: 0;
  width:       36px;
  height:      36px;
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  color 0.2s, background 0.2s;
}
.pwa-banner-close:hover {
  color:       var(--pwa-white);
  background:  rgba(255,255,255,0.1);
}

/* Very small screens: stack text and button */
@media (max-width: 360px) {
  .pwa-banner-inner   { flex-wrap: wrap; }
  .pwa-banner-install { width: 100%; text-align: center; }
}

/* ─── iOS Safari install instructions ─────────────────────────────────────── */
#pwa-ios-hint {
  position:  fixed;
  bottom:    calc(8px + var(--sab));
  left:      16px;
  right:     16px;
  max-width: 440px;
  margin:    0 auto;
  background: var(--pwa-green);
  border:    1.5px solid var(--pwa-border);
  border-radius: 18px;
  padding:   18px 18px 20px;
  z-index:   10000;
  box-shadow: var(--pwa-shadow);
  animation: pwaBannerUp 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Triangle pointing down to iOS Safari's bottom toolbar */
#pwa-ios-hint::after {
  content:      '';
  position:     absolute;
  bottom:       -10px;
  left:         50%;
  transform:    translateX(-50%);
  border:       10px solid transparent;
  border-top-color: var(--pwa-green);
  border-bottom: none;
}

.pwa-ios-close {
  position:    absolute;
  top:         10px;
  right:       10px;
  background:  none;
  border:      none;
  cursor:      pointer;
  color:       rgba(255,255,255,0.3);
  width:       32px;
  height:      32px;
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  color 0.2s, background 0.2s;
}
.pwa-ios-close:hover {
  color:       var(--pwa-white);
  background:  rgba(255,255,255,0.1);
}

.pwa-ios-steps {
  display:       flex;
  flex-direction: column;
  gap:           12px;
  padding-right: 28px;  /* leave space for close button */
}

.pwa-ios-step {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  color:       rgba(255,255,255,0.85);
  font-size:   0.84rem;
  line-height: 1.5;
}

.pwa-ios-num {
  width:         22px;
  height:        22px;
  min-width:     22px;
  border-radius: 50%;
  background:    var(--pwa-lime);
  color:         var(--pwa-green);
  font-family:   'Syne', sans-serif;
  font-weight:   800;
  font-size:     0.72rem;
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-top:    2px;
}

.pwa-ios-step strong { color: var(--pwa-white); }
.pwa-ios-step em     { color: var(--pwa-lime); font-style: normal; }

.pwa-ios-share {
  display:       inline-flex;
  align-items:   center;
  gap:           3px;
  background:    rgba(181,240,74,0.15);
  border:        1px solid var(--pwa-border);
  border-radius: 6px;
  padding:       1px 6px;
  color:         var(--pwa-lime);
  font-weight:   700;
  font-size:     0.82rem;
  vertical-align: middle;
}

/* ─── Update Banner ─────────────────────────────────────────────────────────── */
#pwa-update-banner {
  position:  fixed;
  top:       0;
  left:      0;
  right:     0;
  padding:   calc(10px + var(--sat)) 20px 10px;
  background: #1a4a2e;
  color:     var(--pwa-white);
  display:   flex;
  align-items: center;
  justify-content: center;
  gap:       12px;
  font-size: 0.84rem;
  font-weight: 600;
  z-index:   99999;
  box-shadow: 0 2px 20px rgba(0,0,0,0.3);
  animation: pwaSlideDown 0.3s ease forwards;
}
@keyframes pwaSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
#pwa-update-btn {
  background:  var(--pwa-lime);
  color:       var(--pwa-green);
  border:      none;
  border-radius: 100px;
  padding:     7px 18px;
  font-family: 'Syne', sans-serif;
  font-weight: 800;
  font-size:   0.8rem;
  cursor:      pointer;
  white-space: nowrap;
  transition:  background 0.2s;
}
#pwa-update-btn:hover { background: #c8ff5a; }
#pwa-update-dismiss {
  background:  rgba(255,255,255,0.12);
  border:      none;
  cursor:      pointer;
  color:       var(--pwa-white);
  width:       30px;
  height:      30px;
  border-radius: 50%;
  display:     flex;
  align-items: center;
  justify-content: center;
  transition:  background 0.2s;
}
#pwa-update-dismiss:hover { background: rgba(255,255,255,0.22); }

/* ─── Network Status Bar ───────────────────────────────────────────────────── */
.pwa-network-bar {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  display:    flex;
  align-items: center;
  justify-content: center;
  gap:        8px;
  padding:    calc(8px + var(--sat)) 16px 8px;
  font-size:  0.8rem;
  font-weight: 600;
  z-index:    99990;
  transform:  translateY(-100%);
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity:    0;
}
.pwa-network-bar-visible {
  transform:  translateY(0);
  opacity:    1;
}
.pwa-network-offline {
  background: #2a0a0a;
  color:      #f08080;
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.pwa-network-online {
  background: #0d3a1f;
  color:      var(--pwa-lime);
  box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}

/* ─── Bottom Navigation (standalone only) ──────────────────────────────────── */
.pwa-bottom-nav {
  display:         none;  /* hidden by default; shown in standalone via media query */
  position:        fixed;
  bottom:          0;
  left:            0;
  right:           0;
  height:          calc(var(--pwa-bottom-h) + var(--sab));
  padding-bottom:  var(--sab);
  background:      #0d2b1f;
  border-top:      1px solid rgba(255,255,255,0.08);
  z-index:         1000;
  align-items:     stretch;
  box-shadow:      0 -4px 24px rgba(0,0,0,0.35);
}

@media (display-mode: standalone) {
  .pwa-bottom-nav { display: flex; }
}

.pwa-nav-item {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             3px;
  text-decoration: none;
  color:           rgba(255,255,255,0.45);
  font-size:       0.62rem;
  font-weight:     600;
  letter-spacing:  0.02em;
  padding:         8px 4px;
  transition:      color 0.2s;
  border:          none;
  background:      none;
  cursor:          pointer;
  font-family:     inherit;   /* <button> doesn't inherit font by default */
  -webkit-tap-highlight-color: transparent;
}
.pwa-nav-item:hover,
.pwa-nav-item.active {
  color: var(--pwa-lime);
}
.pwa-nav-item .nav-icon {
  font-size: 1.35rem;
  line-height: 1;
  /* Replace emoji icons with SVG ones added below via ::before on .nav-icon-svg */
}
/* SVG icons for bottom nav — cleaner than emoji at small sizes */
.nav-icon svg {
  width:  24px;
  height: 24px;
  stroke: currentColor;
  fill:   none;
  stroke-width: 1.8;
}

/* ─── Toast Notifications ──────────────────────────────────────────────────── */
.pwa-toast {
  position:     fixed;
  bottom:       calc(calc(var(--pwa-bottom-h) + var(--sab)) + 16px);
  left:         50%;
  transform:    translateX(-50%) translateY(0);
  background:   #0d2b1f;
  color:        var(--pwa-white);
  padding:      11px 22px;
  border-radius: 100px;
  font-size:    0.84rem;
  font-weight:  500;
  white-space:  nowrap;
  max-width:    calc(100vw - 32px);
  overflow:     hidden;
  text-overflow: ellipsis;
  box-shadow:   0 4px 24px rgba(0,0,0,0.35);
  z-index:      99997;
  border:       1px solid rgba(255,255,255,0.1);
  transition:   opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
.pwa-toast-success { border-color: rgba(181,240,74,0.35); }
.pwa-toast-error   { background: #3d1212; border-color: rgba(240,80,80,0.35); }
.pwa-toast-info    { border-color: rgba(74,144,217,0.35); }

/* ─── Sortable drag ghost ──────────────────────────────────────────────────── */
.sortable-ghost { opacity: 0.3; }