/* Happy Feet — mobile / PWA polish layer.
   Loaded LAST on every page so it can override per-page styles.
   Goal: pages feel like a native app on any phone. */

/* ---------- global rendering ---------- */
html{
  background:#f4f6fb;                       /* rubber-band overscroll shows page bg, not white/black */
  -webkit-text-size-adjust:100%;            /* no font inflation in landscape */
}
body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent;  /* no grey flash on tap */
}
button, a, label, select, .tab, .chip{ touch-action:manipulation; }  /* no double-tap zoom delay */

/* ---------- iOS safe areas (standalone PWA: notch + home indicator) ---------- */
body{
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
  padding-left:env(safe-area-inset-left, 0px);
  padding-right:env(safe-area-inset-right, 0px);
}

/* ---------- inputs: stop the iOS zoom-on-focus (fields must be >=16px) ---------- */
@media (max-width:768px), (pointer:coarse){
  input[type=text], input[type=tel], input[type=email], input[type=url],
  input[type=date], input[type=password], input[type=number],
  select, textarea{ font-size:16px !important; }
}
/* native inner shadows off — fields look identical on every phone */
input[type=text], input[type=tel], input[type=email], input[type=url],
input[type=password], input[type=number], textarea{
  -webkit-appearance:none; appearance:none;
}

/* ---------- required mark: inline BEFORE the label text ----------
   (the old " *" ::after landed under the input when the label wraps it) */
label.req::after, .req::after{ content:none !important; }
label.req::before, .req::before{ content:"* "; color:#c0392b; font-weight:700; }

/* ---------- touch devices: neutralise sticky :hover states ---------- */
@media (hover:none){
  .dz:hover{ border-color:#c9d2e3 !important; background:#fafbfe !important; }
  .dz.has:hover{ border-color:#6aa83c !important; background:#f2faee !important; }
  .tile:hover, .modecard:hover{ border-color:#e6eaf2 !important; }
  .openbtn:hover{ background:#1f3a93 !important; }
  .walkin:hover{ background:#eef6e6 !important; }
  .btn-next:hover{ background:#6aa83c !important; }
  .btn:hover{ filter:none !important; }
  .combo-item:hover{ background:none !important; color:inherit !important; }
  .flatpickr-day:hover{ background:none !important; }
}

/* ---------- app-like press feedback ---------- */
.btn, .btn-save, .btn-next, .btn-back, .btn-go, .btn-ghost,
.openbtn, .walkin, .tab, .tile, .modecard, .again, .paste button{
  -webkit-touch-callout:none; user-select:none;
  transition:transform .08s ease, opacity .08s ease;
}
.btn:active, .btn-save:active, .btn-next:active, .btn-back:active, .btn-go:active,
.btn-ghost:active, .openbtn:active, .walkin:active, .tab:active, .tile:active,
.modecard:active, .again:active, .paste button:active{
  transform:scale(.97); opacity:.9;
}
.chip{ user-select:none; }

/* ---------- sticky submit bar (patient form): a real app bottom bar ---------- */
.save-bar{
  background:#f4f6fb !important;
  box-shadow:0 -8px 18px rgba(20,30,60,.07);
  border-top:1px solid #e6eaf2;
  margin-left:-16px; margin-right:-16px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ---------- breathing room above the iOS bottom bar / home indicator ---------- */
.wrap{ padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px)) !important; }

/* ---------- tiny-screen fit (iPhone SE etc.) ---------- */
@media (max-width:360px){
  .wrap{ padding-left:12px !important; padding-right:12px !important; }
  .tiles{ flex-direction:column; }
  .ptype label{ padding:12px 6px; font-size:14px; }
}