/* 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{
  z-index:20;                               /* stays above the height/weight wheels */
  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; }
}

/* ---------- list cards: the name on its own line, the actions under it ----------
   Every list card is `.card > .info` + `.card > .acts`. The cards carry one to
   five actions depending on the patient (⚠ / Demography / Media / No show /
   Open form, + Walk-in / View patients, Attended / No show), and these pages
   are 560-680px wide even on a laptop — letting the buttons compete with the
   name for that width squeezed long names into three lines and wrapped
   differently on every card. So the name always gets the first line and the
   actions sit underneath as one group: on a phone two per row, wider than that
   at their natural size. */
.card{ flex-wrap:wrap; align-items:stretch; row-gap:10px; column-gap:8px; }
.card > .info{ flex:1 1 100%; min-width:0; }
.card > .acts{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; flex:1 1 100%;
  justify-content:flex-start !important;    /* under the name, not away from it */
  margin-left:0 !important;
}
.card > .acts > *{ white-space:nowrap; }
/* a chip that sits straight in the card, outside the action group, must keep
   its own height: the card stretches its children, and a stretched pill is a
   tall lozenge with the label floating in the middle of it. */
.card > .chip{ align-self:center; flex:0 0 auto; }

@media (max-width:560px){
  .card > .acts > *{
    flex:1 1 calc(50% - 4px); min-width:0; text-align:center;
    display:flex; align-items:center; justify-content:center;
    padding-left:10px; padding-right:10px;
  }
  .card > .acts > .chip{ flex:0 0 auto; }
  /* the session page's top bar: the two buttons keep the row, the count drops
     underneath instead of being squeezed between them */
  .bar{ flex-wrap:wrap; row-gap:8px; }
  .bar > .count{ flex:1 1 100%; order:3; text-align:center; }
}

/* ---------- in-page viewer (hf-viewer.js) ----------
   Documents, photos and video open over the page instead of in another tab:
   inside an installed PWA a new tab is a one-way trip out of the app. */
.hfv{ position:fixed; inset:0; z-index:9990; display:none; }
.hfv.on{ display:block; }
.hfv-back{ position:absolute; inset:0; background:rgba(20,26,45,.55); }
.hfv-card{
  position:absolute; inset:auto 0 0 0; height:92%; background:#fff;
  border-radius:16px 16px 0 0; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 -10px 30px rgba(20,30,60,.25);
  animation:hfv-up .18s ease-out;
}
@keyframes hfv-up{ from{ transform:translateY(14px); opacity:.6; } to{ transform:none; opacity:1; } }
@media (min-width:700px){
  .hfv-card{ inset:4vh 50% 4vh auto; transform:translateX(50%); width:min(860px,92vw); height:92vh; border-radius:16px; }
}
.hfv-head{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  border-bottom:1px solid #e6eaf2; background:#f7f9fd; flex:none;
}
.hfv-title{ flex:1; min-width:0; font-weight:800; color:#1f3a93; font-size:15px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hfv-open{ font-size:13px; font-weight:700; color:#1f3a93; text-decoration:none;
  background:#eef2fb; border:1px solid #d6def5; border-radius:9px; padding:7px 11px; }
.hfv-x{ font-size:26px; line-height:1; width:38px; height:38px; border-radius:50%;
  border:1px solid #e6eaf2; background:#fff; color:#2b2b2b; cursor:pointer; flex:none; }
.hfv-body{ flex:1; min-height:0; overflow:auto; background:#f4f6fb;
  display:flex; align-items:center; justify-content:center; }
.hfv-body iframe{ width:100%; height:100%; border:0; background:#fff; }
.hfv-body img{ max-width:100%; max-height:100%; display:block; }
.hfv-body video{ max-width:100%; max-height:100%; background:#000; }
.hfv-body.kind-image, .hfv-body.kind-video{ padding:10px; }
body.hfv-open{ overflow:hidden; }

/* a page rendered inside the viewer: its own chrome would repeat the viewer's */
.hfv-embedded .brandhead, .hfv-embedded .rule, .hfv-embedded .back{ display:none !important; }
.hfv-embedded .wrap{ padding-top:8px !important; padding-bottom:24px !important; }