/* ==========================================================================
   WellPlus EMR — phone & tablet layer
   Loaded ONLY under max-width media queries (see <link media> in emr.html)
   and gated further by body classes (.is-phone / .is-tablet) set by
   mobile.js. Nothing here fires above 1024px, so desktop is untouched.
   ========================================================================== */

:root {
  --mnav-h: 58px;               /* bottom nav bar height */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

/* --------------------------------------------------------------------
   Shared phone+tablet baseline (<=1024px)
   -------------------------------------------------------------------- */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; max-width: 100vw; }
  body.is-phone, body.is-tablet { -webkit-tap-highlight-color: transparent; }

  /* 16px inputs everywhere on touch — prevents iOS auto-zoom on focus */
  body.is-phone input, body.is-phone select, body.is-phone textarea,
  body.is-tablet input, body.is-tablet select, body.is-tablet textarea {
    font-size: 16px !important;
  }

  /* touch targets >= 44px */
  body.is-phone button, body.is-phone .btn-ghost, body.is-phone .btn-primary,
  body.is-phone .iconbtn, body.is-phone .card-add, body.is-phone .card-ico,
  body.is-phone .um-item, body.is-phone .topnav a {
    min-height: 44px;
  }
}

/* ======================================================================
   PHONE  (<= 768px)
   ====================================================================== */
@media (max-width: 768px) {
  body.is-phone { padding-bottom: calc(var(--mnav-h) + var(--safe-b)); }

  /* ---- top bar: brand + avatar row only. The desktop nav is hidden (it
     moves to the bottom nav) and the patient search bar is relocated by
     mobile.js into the Today header, after the date line, so the sticky
     bar never grows taller than its own row and nothing overlaps below
     it. `height` MUST be auto here — the desktop rule is a fixed 58px,
     which is the root cause of the header/avatar overlap bug. ---- */
  body.is-phone .topbar {
    height: auto; min-height: 58px;
    flex-wrap: wrap; row-gap: 4px;
    padding: calc(8px + var(--safe-t)) 10px 8px;
    gap: 8px;
    position: sticky; top: 0; z-index: 80;
  }
  body.is-phone .topnav { display: none; }
  /* safety net: if mobile.js hasn't relocated it yet (or fails), the find
     bar still wraps to its own full-width row instead of overlapping */
  body.is-phone .topbar > .topbar-find { order: 3; flex: 1 1 100%; margin-top: 4px; min-width: 0; max-width: 100%; }
  body.is-phone .findbar input { font-size: 16px; padding: 12px 0; }
  body.is-phone .jobswrap { display: none; }
  body.is-phone .usermenu .who { display: none; }   /* avatar stays, name label drops to save row space */

  /* the find bar once mobile.js has moved it into the Today header */
  body.is-phone .home-head .topbar-find {
    width: 100%; min-width: 0; max-width: 100%; flex: 1 1 100%;
    margin: 10px 0 0; order: 0;
  }

  /* ---- bottom navigation bar (built by mobile.js) ---- */
  .mnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; justify-content: space-around; align-items: stretch;
    height: calc(var(--mnav-h) + var(--safe-b));
    padding-bottom: var(--safe-b);
    background: rgba(251, 252, 255, .96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-top: 1px solid var(--line-2, #e3e8f0);
    box-shadow: 0 -6px 20px rgba(15,25,55,.08);
  }
  .mnav-item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; min-height: 44px;
    font-size: 10.5px; font-weight: 600; color: var(--ink-3, #7a8296);
    background: none; border: none; padding: 6px 2px;
  }
  .mnav-item svg { width: 20px; height: 20px; }
  .mnav-item.active { color: var(--navy, #1E2E60); }
  .mnav-item .mnav-badge {
    position: absolute; transform: translate(10px, -10px);
    background: #e0435b; color: #fff; font-size: 9px; font-weight: 700;
    border-radius: 999px; min-width: 15px; height: 15px; line-height: 15px;
    text-align: center; padding: 0 3px;
  }

  /* ---- Home: stack calendar over queue, full width ---- */
  body.is-phone .home { padding: 12px; overflow-x: hidden; }
  body.is-phone .home-head { flex-direction: column; align-items: stretch; gap: 10px; }
  body.is-phone .home-head > div:first-child { width: 100%; min-width: 0; }
  body.is-phone .ph-grid { grid-template-columns: 1fr !important; }
  body.is-phone .queue { grid-template-columns: 1fr !important; }

  /* Results strip (Lab results / Imaging results / Consults / Other reports…):
     a horizontally scrollable chip row, count inline in each pill, instead
     of a vertical rail whose items force-wrapped their label text. */
  body.is-phone .q-rail {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px;
    -webkit-overflow-scrolling: touch; padding: 8px 6px;
  }
  body.is-phone .q-rail-head { display: none; }
  body.is-phone .q-cat {
    width: auto; flex: 0 0 auto; white-space: nowrap; gap: 6px;
    background: rgba(24,36,96,.05); border-radius: 999px; padding: 8px 12px;
  }
  body.is-phone .q-cat .q-cat-l { flex: none; white-space: nowrap; }

  /* Quick action row (New Chart / Appointment / Messages / Doc…): scrolls
     horizontally instead of being clipped by the fixed-width home-head row */
  body.is-phone .quick {
    width: 100%; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 3px;
  }
  body.is-phone .qtile { flex: 0 0 auto; }

  /* Calendar provider/location filter row (Both / provider A / provider B / office
     chips): scrolls horizontally instead of overflowing the card */
  body.is-phone .cal-toolbar { flex-wrap: wrap; }
  body.is-phone .cal-who {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    max-width: 100%; width: 100%;
  }

  /* ---- Patient chart: single scrolling column with a tab strip ---- */
  body.is-phone .subhead { position: sticky; top: 0; z-index: 60; padding: 8px 10px; }
  body.is-phone .subhead-split { flex-direction: column; }
  body.is-phone .vit-grip { display: none; }
  body.is-phone .vit-panel { display: none; }   /* opened via the "Vitals" tab instead */
  body.is-phone .doctools-row { flex-wrap: wrap; gap: 6px; }
  body.is-phone .sactions { width: 100%; justify-content: flex-start; }
  body.is-phone #tellBtn span, body.is-phone .doctools .lbl { display: none; }

  body.is-phone .chart-tabstrip {
    position: sticky; top: 0; z-index: 55;
    display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 6px 8px; background: var(--surface, #fff);
    border-bottom: 1px solid var(--line-2, #e3e8f0);
  }
  .chart-tabstrip button {
    flex: 0 0 auto; font-size: 12.5px; font-weight: 650; padding: 8px 12px;
    border-radius: 999px; border: 1px solid var(--line-2, #e3e8f0);
    background: #fff; color: var(--ink-2, #444); min-height: 36px;
  }
  .chart-tabstrip button.active { background: var(--navy, #1E2E60); color: #fff; border-color: var(--navy, #1E2E60); }

  body.is-phone .chart { display: block !important; padding: 10px; gap: 10px; }
  body.is-phone .chart .col { display: none; width: 100%; }
  body.is-phone .chart .col.mcol-active { display: flex; }
  body.is-phone .rail-grip, body.is-phone .rail-grip-r { display: none; }

  /* ---- visit note: full column, tabstrip becomes horizontally scrollable ---- */
  body.is-phone .note-tabstrip { overflow-x: auto; flex-wrap: nowrap; padding: 6px 10px; }
  body.is-phone .note-fullview { padding: 0 8px 8px; }
  body.is-phone .note-fullview .nt-card { height: calc(100vh - 120px); }
  body.is-phone .charttabs { top: 0; }

  /* ---- modals become full-screen sheets ---- */
  body.is-phone .modal-overlay {
    padding: 0; align-items: stretch; justify-content: stretch;
  }
  body.is-phone .modal-card {
    width: 100% !important; max-width: 100% !important; height: 100vh !important;
    max-height: 100vh !important; border-radius: 0 !important;
    display: flex; flex-direction: column;
  }
  body.is-phone .modal-card .modal-body { flex: 1 1 auto; overflow-y: auto; }
  body.is-phone .modal-head { padding-top: calc(14px + var(--safe-t)); cursor: default; }
  body.is-phone .modal-foot { padding-bottom: calc(14px + var(--safe-b)); }

  /* ---- Tell WellPlus bar: docks above the bottom nav, full width ---- */
  body.is-phone .wp-session {
    left: 8px; right: 8px; transform: none; bottom: calc(var(--mnav-h) + var(--safe-b) + 8px);
    width: auto; justify-content: space-between;
  }

  /* Orders-to-sign rows (Today "Requiring Action" and the Work queue):
     titles were clipped with an ellipsis in a fixed 4-column grid sized
     for desktop. On phone, wrap the title/chips and drop the age + sign
     buttons to their own full-width row instead of truncating. */
  body.is-phone .os-row { grid-template-columns: 20px 1fr; row-gap: 6px; }
  body.is-phone .os-t {
    white-space: normal; overflow: visible; text-overflow: clip;
    overflow-wrap: anywhere; word-break: break-word;
  }
  body.is-phone .os-desc { white-space: normal; max-width: none; overflow-wrap: anywhere; }
  body.is-phone .os-s { flex-wrap: wrap; }
  body.is-phone .os-age, body.is-phone .os-a {
    grid-column: 2 / -1; justify-self: start;
  }
  body.is-phone .os-a { flex-wrap: wrap; }
  body.is-phone .osq-head, body.is-phone .osq-seg { flex-wrap: wrap; }
  body.is-phone .os-grp-h { flex-wrap: wrap; row-gap: 4px; }

  /* generic overflow guards */
  body.is-phone table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  body.is-phone .home, body.is-phone .chart, body.is-phone #view-generic {
    overflow-x: hidden; max-width: 100vw;
  }
}

/* ======================================================================
   TABLET (769px – 1024px): two-column variant, no bottom nav
   ====================================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  body.is-tablet .topnav a { padding: 8px 10px; font-size: 12.5px; }
  body.is-tablet .home { padding: 16px; }
  body.is-tablet .ph-grid { grid-template-columns: 1fr !important; }

  /* chart: collapse the 3-rail grid to 2 columns (left rail + a merged
     center/right column selected by the same tab strip as phone, but
     shown side-by-side two-up instead of one-up) */
  body.is-tablet .chart { grid-template-columns: 280px 1fr !important; }
  body.is-tablet .chart .rail-right { grid-column: 1 / -1; }
  body.is-tablet .rail-grip-r { display: none; }
  body.is-tablet .vit-panel { flex: 0 0 260px; }

  body.is-tablet .modal-card { max-width: min(680px, 92vw); }
}