/* ============================================================
   Milk Advanced — shared mobile app-shell layer
   Loaded on every logged-in page alongside the page's own Tailwind
   styling. Provides: safe-area aware fixed bottom nav, PWA basics,
   and small global fixes (no iOS input-zoom, bigger tap targets).
   ============================================================ */

:root{
  --nav-h: 72px;
  --p: #4f46e5;
  --p2: #7c3aed;
}

html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }
/* Only reserve space for the bottom nav on pages that actually render it
   (this file is also loaded standalone, just for .btn-back-dash etc., on
   pages that don't have the nav). */
body:has(.appnav) { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)) !important; }

/* Prevent iOS auto-zoom on focus (inputs under 16px trigger it) */
input, select, textarea, button { font-size: 16px; }

/* ---------------- Bottom app nav ---------------- */
.appnav{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: var(--nav-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid #e6e9ef;
  box-shadow: 0 -8px 30px rgba(16,24,40,.06);
}
.appnav a{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: #98a2b3; text-decoration: none;
  font-size: 10px; font-weight: 800; letter-spacing: .02em;
  transition: color .15s ease;
}
.appnav a i{ font-size: 18px; }
.appnav a.active{ color: var(--p); }
.appnav a:active{ transform: scale(.92); }

@media (min-width: 641px){
  /* On wider screens keep the shell centered like a phone frame */
  .appnav{ max-width: 480px; left: 50%; transform: translateX(-50%); border-radius: 24px 24px 0 0; }
}

/* ---------------- Shared "back to dashboard" button ----------------
   Used everywhere instead of each page inventing its own back-link
   style, so it looks the same across the whole app. */
.btn-back-dash{
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e6e9ef; color: #475569;
  font-weight: 800; font-size: 12px; padding: 10px 16px; border-radius: 14px;
  text-decoration: none; box-shadow: 0 4px 14px rgba(16,24,40,.05);
  transition: transform .12s ease, color .12s ease;
}
.btn-back-dash:hover{ color: #4f46e5; }
.btn-back-dash:active{ transform: scale(.95); }
.btn-back-dash i{ font-size: 11px; }