/* GLENMUN VIII — QR scanner (/sb) phone layout fixes. Loaded after style.css on /sb only.
   1. The viewfinder fills everything above the bottom panel (no overlap, adapts to the panel's height).
   2. The camera library wraps the <video> in its own divs; every layer now fills the viewfinder.
   3. Recent scans: name and details get the room, status tag is compact.
   4. Phone held sideways: camera on the left, panel on the right. */

/* ---- layout: viewfinder on top, panel below, nothing overlapping ---- */
body.sb-page .cam { display: flex; flex-direction: column; }
.cam-view { position: relative; left: auto; right: auto; top: auto; height: auto; flex: 1 1 auto; min-height: 200px; }
.cam-dock { position: relative; left: auto; right: auto; bottom: auto; flex: 0 0 auto; width: calc(100% - 2 * var(--s3)); max-width: 620px;
  margin: var(--s3) auto max(var(--s3), env(safe-area-inset-bottom)); max-height: min(42dvh, 360px); }
.guide { width: min(66vw, 40dvh, 320px); }

/* ---- the camera feed fills the viewfinder ---- */
#reader, #reader > div, #reader__scan_region { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; overflow: hidden; background: none !important; }
#reader video { position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
#reader__dashboard, #reader__header_message, #reader__scan_region > img { display: none !important; }

/* ---- recent scans ---- */
.recent li { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who time" "who pill"; align-items: center; column-gap: var(--s3); row-gap: 4px; }
.recent li > span:nth-child(2) { grid-area: who; min-width: 0; }
.recent li > .t { grid-area: time; text-align: right; }
.recent li > .pill { grid-area: pill; justify-self: end; padding: 2px 9px; font-size: .74rem; }
.recent br { display: none; }
.recent .who { display: block; overflow-wrap: anywhere; }
.recent .sub { display: block; }
.recent li:only-child { display: block; }

/* ---- phone held sideways: camera left, panel right ---- */
@media (orientation: landscape) and (max-height: 540px) {
  body.sb-page .cam { flex-direction: row; }
  .cam-view { flex: 1 1 58%; min-height: 0; border-radius: 0 var(--r4) var(--r4) 0; }
  .cam-dock { flex: 0 0 min(40%, 400px); width: auto; max-width: none; max-height: none; align-self: stretch; margin: var(--s3); }
  .cam-top { right: calc(min(40%, 400px) + var(--s5)); }
  .count { flex: 0 1 auto; max-width: 190px; padding: var(--s2) var(--s4) var(--s3); }
  .count .clbl { display: none; }
  .guide { width: min(40vw, 52dvh); top: 56%; }
}