/* ============================================================
   EHR mock — shared styling ("chrome" + components)
   Self-contained: no external fonts, images, or CDNs.
   Designed for a 1440x900 viewport.
   ============================================================ */

:root {
  --ehr-navy:        #12233f;  /* dark navy top app bar + rail */
  --ehr-navy-2:      #16294a;
  --ehr-navy-3:      #1b3159;
  --ehr-subhdr:      #2f5b93;  /* medium-blue sub-header bar */
  --ehr-subhdr-2:    #3a6aa8;
  --ehr-link:        #1c5fa8;  /* blue links / active tabs */
  --ehr-link-hover:  #103e73;
  --ehr-teal:        #317190;  /* selected-row highlight (saturated blue-teal) */
  --ehr-teal-border: #235469;
  --ehr-panelhdr:    #dfe7ee;  /* light panel header */
  --ehr-panelhdr-b:  #b7c4d2;
  --ehr-line:        #cfd6de;
  --ehr-line-2:      #e3e8ee;
  --ehr-row-alt:     #f4f7fa;
  --ehr-text:        #1b1b1b;
  --ehr-text-mut:    #5a6472;
  --ehr-btn-green:   #4b9b3f;
  --ehr-btn-green-b: #3d7f33;
  --ehr-warn-red:    #b02a2a;
  --ehr-folder:      #f4c945;  /* yellow folder glyph */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: #6f7d8c;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 12px;
  color: var(--ehr-text);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------
   The application window (centered card, 1440-ish canvas)
   ------------------------------------------------------------ */
.ehr-window {
  width: 1440px;
  height: 900px;
  margin: 0 auto;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #33415a;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
}

/* ------------------------------------------------------------
   OS titlebar (thin light-gray bar)
   ------------------------------------------------------------ */
.os-titlebar {
  height: 26px;
  background: linear-gradient(#f3f3f3, #e6e6e6);
  border-bottom: 1px solid #c9c9c9;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  user-select: none;
}
.os-titlebar .os-appicon {
  width: 22px; text-align: center;
  color: #2f5b93; font-weight: 700; font-size: 11px;
}
.os-titlebar .os-title {
  font-size: 12px; color: #3a3a3a; padding-left: 2px;
}
.os-titlebar .os-winbtns {
  margin-left: auto; display: flex; height: 100%;
}
.os-titlebar .os-winbtn {
  width: 44px; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #4a4a4a;
}
.os-titlebar .os-winbtn.close:hover { background: #e81123; color: #fff; }
.os-titlebar .os-winbtn:hover { background: #d8d8d8; }

/* ------------------------------------------------------------
   Dark navy top app bar
   ------------------------------------------------------------ */
.ehr-appbar {
  height: 40px;
  background: var(--ehr-navy);
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 0 8px 0 0;
  color: #dfe6ef;
}
.ehr-appbar .expander {
  width: 30px; text-align: center; color: #9fb0c6; font-size: 15px;
  cursor: pointer;
}
.ehr-search {
  display: flex; align-items: center;
  background: #fff; border-radius: 2px; height: 24px;
  width: 210px; margin-left: 2px;
  border: 1px solid #b9c3d0;
}
.ehr-search input {
  border: 0; outline: 0; height: 100%; flex: 1; min-width: 0;
  padding: 0 6px; font-style: italic; color: #6a7480; font-size: 12px;
  background: transparent;
}
.ehr-search .caret {
  color: #8a94a2; padding: 0 6px; border-left: 1px solid #dbe0e6; cursor: pointer;
}
.ehr-search .mag {
  background: #12233f; color: #fff; width: 26px; height: 24px;
  margin: -1px -1px -1px 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0 2px 2px 0; cursor: pointer; font-size: 12px;
}
.ehr-appbar .facility {
  margin-left: auto;
  display: flex; align-items: center; gap: 6px;
  color: #cdd7e3; font-size: 12px;
  padding-right: 4px;
}
/* Divider-separated utility cells (gear, help) — vertical rules like the reference. */
.ehr-appbar .appbar-cell {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding: 0 10px; cursor: pointer;
  border-left: 1px solid rgba(255,255,255,.15);
}
.ehr-appbar .appbar-cell:last-of-type { border-right: 1px solid rgba(255,255,255,.15); }
.ehr-appbar .appbar-cell:hover { background: rgba(255,255,255,.06); }
.ehr-appbar .gear-svg { display: inline-flex; align-items: center; }
.ehr-appbar .gear-svg svg { display: block; }
.ehr-appbar .help-circle {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1px solid #cdd7e3; color: #cdd7e3;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; font-weight: 700;
}
.ehr-appbar .user {
  color: #fff; font-weight: 600; font-size: 12px; letter-spacing: .3px;
  display: flex; align-items: center; gap: 4px;
}
.ehr-appbar .signout {
  color: #cdd7e3; font-size: 12px; margin-left: 12px; cursor: pointer;
  letter-spacing: .3px; display: inline-flex; align-items: center; gap: 4px;
}
.ehr-appbar .signout:hover { color: #fff; }
.ehr-appbar .signout .so-ico {
  width: 15px; height: 15px; display: inline-block;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><path d='M6 2H2v11h4' fill='none' stroke='%23cdd7e3' stroke-width='1.2'/><path d='M9 4l4 3.5-4 3.5M5 7.5h8' fill='none' stroke='%23cdd7e3' stroke-width='1.2'/></svg>");
}
/* standalone navy square magnifier button after the search box */
.ehr-appbar .mag-btn {
  background: #12233f; width: 26px; height: 24px; margin-left: 2px;
  border: 1px solid #0b1626; border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.ehr-appbar .mag-btn .mag-ico, .ehr-search .mag-ico {
  width: 14px; height: 14px; display: inline-block;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><circle cx='6' cy='6' r='4.2' fill='none' stroke='%23ffffff' stroke-width='1.2'/><path d='M9.2 9.2L13 13' stroke='%23ffffff' stroke-width='1.4'/></svg>");
}
/* gray-stroke magnifier for panel search rows */
.mag-ico.gray {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'><circle cx='6' cy='6' r='4.2' fill='none' stroke='%235a6472' stroke-width='1.2'/><path d='M9.2 9.2L13 13' stroke='%235a6472' stroke-width='1.4'/></svg>");
}

/* ------------------------------------------------------------
   Reusable patient banner (populated by chrome.js into #ehr-banner)
   Dark-navy band, white text, ~48px tall (+ sub-strip when present).
   ------------------------------------------------------------ */
.ehr-banner {
  flex: 0 0 auto;
  background: var(--ehr-navy);
  color: #fff;
  border-bottom: 1px solid #0b1626;
  font-size: 12px;
}
.ehr-banner-main {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 12px;
  gap: 14px;
}
/* LEFT: photo + name block */
.ehr-bnr-photo {
  flex: 0 0 44px; width: 44px; height: 44px;
  border: 1px solid #0b1626; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: #c3c8ce;
}
.ehr-bnr-photo svg { display: block; }
.ehr-bnr-idblock { flex: 0 0 auto; line-height: 1.3; }
.ehr-bnr-name { font-weight: 700; font-size: 13px; color: #fff; }
.ehr-bnr-dob {
  display: flex; align-items: center; gap: 5px;
  color: #e6ecf3; font-size: 11.5px;
}
.ehr-bnr-glyph { display: inline-flex; align-items: center; }
.ehr-bnr-glyph svg { display: block; }
/* CENTER: contact columns */
.ehr-bnr-contact {
  display: flex; align-items: center; gap: 40px;
  margin-left: 24px;
}
.ehr-bnr-col { display: flex; flex-direction: column; gap: 1px; }
.ehr-bnr-line { color: #eef2f7; white-space: nowrap; line-height: 1.35; }
.ehr-bnr-line i {
  font-style: italic; color: #aeb9c8; font-size: 10.5px; margin-right: 3px;
}
/* RIGHT: allergy pill + teal badge cluster */
.ehr-bnr-right {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
}
.ehr-bnr-allergy {
  background: #fff; color: #1b1b1b; font-weight: 700; font-size: 11px;
  border: 1px solid #b9c3d0; border-radius: 2px;
  padding: 2px 14px; min-width: 66px; text-align: center;
}
.ehr-bnr-badges { display: flex; align-items: center; gap: 3px; }
.ehr-bnr-badge {
  width: 22px; height: 20px;
  background: #2f7d8c; color: #fff;
  font-size: 10px; font-weight: 700;
  border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ehr-bnr-badge svg { display: block; }
/* OPTIONAL red sub-strip (pinkish band, red text) */
.ehr-banner-substrip {
  background: #f6dede;
  color: var(--ehr-warn-red);
  font-weight: 700; font-size: 11.5px;
  padding: 2px 12px;
  display: flex; align-items: center; gap: 40px;
  border-top: 1px solid #d9b4b4;
  white-space: pre;
}
/* Thin bottom line: right-aligned italic teal encounter status */
.ehr-banner-encounter {
  background: #fff;
  color: #2f7d8c;
  font-style: italic;
  text-align: right;
  padding: 2px 14px;
  border-top: 1px solid var(--ehr-line);
}

/* ------------------------------------------------------------
   Body layout = left rail + main content
   ------------------------------------------------------------ */
.ehr-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}

/* Left icon rail */
.ehr-rail {
  width: 56px;
  background: var(--ehr-navy);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 2px;
  border-right: 1px solid #0b1626;
}
/* Top expand chevron (»), for the rail. */
.ehr-rail .rail-expand {
  color: #9fb0c6;
  text-align: center;
  font-size: 15px;
  line-height: 1;
  padding: 6px 2px 7px;
  cursor: pointer;
  border-bottom: 1px solid #0e1d34;
  user-select: none;
}
.ehr-rail .rail-expand:hover { background: var(--ehr-navy-3); color: #fff; }
.rail-btn {
  color: #b9c6d8;
  text-align: center;
  padding: 7px 2px 6px;
  cursor: pointer;
  position: relative;
  border-bottom: 1px solid #0e1d34;
}
.rail-btn:hover { background: var(--ehr-navy-3); color: #fff; }
/* Active rail item: teal filled box with lighter text (Worklist-active state). */
.rail-btn.active { background: #2f7d8c; }
.rail-btn.active,
.rail-btn.active:hover { color: #eafafe; }
.rail-btn.active .lbl { color: #eafafe; }
.rail-btn .glyph { font-size: 17px; line-height: 1; display: block; }
.rail-btn .glyph.railico { display: flex; justify-content: center; align-items: center; height: 20px; }
.rail-btn .glyph.railico svg { display: block; }
.rail-btn .lbl { font-size: 9px; margin-top: 3px; display: block; letter-spacing: .2px; }
.rail-btn .badge {
  position: absolute; top: 3px; right: 9px;
  background: #e08a1e; color: #fff; font-size: 9px; font-weight: 700;
  min-width: 13px; height: 13px; line-height: 13px; text-align: center;
  border-radius: 2px; padding: 0 2px;
}
.ehr-rail .rail-spacer { flex: 1; }
.rail-btn.bottom { border-top: 1px solid #0e1d34; border-bottom: none; }

/* Main content column */
.ehr-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
}

/* ------------------------------------------------------------
   Sub-header (medium-blue view name bar)
   ------------------------------------------------------------ */
.ehr-subheader {
  height: 26px;
  background: linear-gradient(var(--ehr-subhdr-2), var(--ehr-subhdr));
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 10px;
  flex: 0 0 auto;
  font-weight: 600;
  font-size: 12.5px;
  border-bottom: 1px solid #21467a;
}
.ehr-subheader .sub-tools {
  margin-left: 10px; display: flex; align-items: center; gap: 9px;
  font-weight: 400; color: #d7e3f2; font-size: 13px;
}
.ehr-subheader .sub-right {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-weight: 400; font-size: 12px; color: #e8eef6;
}
.ehr-subheader .navbtn {
  cursor: pointer; color: #dbe7f5; display: inline-flex; align-items: center; gap: 3px;
}
.ehr-subheader .navbtn.disabled { color: #9fb6d4; cursor: default; }
/* sub-header utility icon cluster (right side) */
.ehr-subheader .util-icons { display: inline-flex; align-items: center; gap: 8px; }
.ehr-subheader .util-icons .divider { width: 1px; height: 14px; background: #6f92c0; }
.uic {
  width: 15px; height: 15px; display: inline-block; cursor: pointer;
  background-repeat: no-repeat; background-position: center;
}
.uic.popout  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><path d='M6 2H2v11h11V9' fill='none' stroke='%23dbe7f5' stroke-width='1.1'/><path d='M9 2h4v4M13 2L7 8' fill='none' stroke='%23dbe7f5' stroke-width='1.1'/></svg>"); }
.uic.calclock { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><rect x='1.5' y='2.5' width='11' height='10' rx='1' fill='none' stroke='%23dbe7f5' stroke-width='1.1'/><path d='M1.5 5h11M4 1v2M10 1v2' stroke='%23dbe7f5' stroke-width='1.1'/><path d='M7 7.5v2l1.5 1' stroke='%23dbe7f5' stroke-width='1'/></svg>"); }
.uic.grid    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><rect x='1.5' y='1.5' width='12' height='12' fill='none' stroke='%23dbe7f5' stroke-width='1.1'/><path d='M1.5 5.5h12M1.5 9.5h12M5.5 1.5v12M9.5 1.5v12' stroke='%23dbe7f5' stroke-width='.9'/></svg>"); }
.uic.info    { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><circle cx='7.5' cy='7.5' r='6' fill='%23dbe7f5'/><path d='M7.5 6.2v4.3' stroke='%232f5b93' stroke-width='1.6'/><circle cx='7.5' cy='4.2' r='.9' fill='%232f5b93'/></svg>"); }
/* filter-row funnel + checklist icons (dark strokes for the light filter bar) */
.fic { width: 15px; height: 15px; display: inline-block; cursor: pointer;
  background-repeat: no-repeat; background-position: center; }
.fic.refresh { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><path d='M12 4a5 5 0 1 0 1 4' fill='none' stroke='%2334404f' stroke-width='1.2'/><path d='M12 1v3.5H8.5' fill='none' stroke='%2334404f' stroke-width='1.2'/></svg>"); }
.fic.additem { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><rect x='1.5' y='2.5' width='8' height='10' fill='none' stroke='%2334404f' stroke-width='1.1'/><path d='M11.5 7v6M8.5 10h6' stroke='%2334404f' stroke-width='1.2'/></svg>"); }
.fic.pencil  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><path d='M2 13l1-3 7-7 2 2-7 7z' fill='none' stroke='%2334404f' stroke-width='1.1'/><path d='M9 3l2 2' stroke='%2334404f' stroke-width='1.1'/></svg>"); }
.fic.magnifier { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><circle cx='6' cy='6' r='4.2' fill='none' stroke='%2334404f' stroke-width='1.2'/><path d='M9.2 9.2L13 13' stroke='%2334404f' stroke-width='1.4'/></svg>"); }
.fic.funnel  { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><path d='M1.5 2.5h12L9 8v4l-3 1.5V8z' fill='none' stroke='%2334404f' stroke-width='1.1'/></svg>"); }
.fic.checklist { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><rect x='1.5' y='1.5' width='12' height='12' rx='1' fill='none' stroke='%2334404f' stroke-width='1.1'/><path d='M3.5 5l1.2 1.2L7 4M3.5 9.5l1.2 1.2L7 8.5M8.5 5h4M8.5 9.7h4' stroke='%2334404f' stroke-width='1'/></svg>"); }
.fic.overflow { width: 8px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='15' viewBox='0 0 8 15'><circle cx='4' cy='3' r='1.2' fill='%2334404f'/><circle cx='4' cy='7.5' r='1.2' fill='%2334404f'/><circle cx='4' cy='12' r='1.2' fill='%2334404f'/></svg>"); }
.fic.caret { width: 9px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15'><path d='M2 6l2.5 2.5L7 6' fill='none' stroke='%2334404f' stroke-width='1.2'/></svg>"); }
/* sub-header app-icon set (light strokes) with optional caret */
.sic { width: 15px; height: 15px; display: inline-block; cursor: pointer;
  background-repeat: no-repeat; background-position: center; }
.sic.heart { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><path d='M7.5 12.5C3 9 1.5 6.5 3 4.2 4.2 2.5 6.5 3 7.5 4.7 8.5 3 10.8 2.5 12 4.2c1.5 2.3 0 4.8-4.5 8.3z' fill='none' stroke='%23d7e3f2' stroke-width='1.1'/></svg>"); }
.sic.flask { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><path d='M6 1.5h3M6.5 1.5v4L3 12a1 1 0 0 0 1 1.4h7A1 1 0 0 0 12 12L8.5 5.5v-4' fill='none' stroke='%23d7e3f2' stroke-width='1.1'/></svg>"); }
.sic.rx { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><text x='2' y='12' font-size='12' font-family='Arial' font-weight='700' fill='%23d7e3f2'>R</text><path d='M8 8l5 5M13 8l-5 5' stroke='%23d7e3f2' stroke-width='1.1'/></svg>"); }
.sic.docchk { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><path d='M3 1h6l3 3v10H3z' fill='none' stroke='%23d7e3f2' stroke-width='1'/><path d='M5 8l1.5 1.5L10 6' fill='none' stroke='%23d7e3f2' stroke-width='1'/></svg>"); }
.sic.note { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><path d='M3 1h9v9l-3 3H3z' fill='none' stroke='%23d7e3f2' stroke-width='1'/><path d='M12 10H9v3' fill='none' stroke='%23d7e3f2' stroke-width='1'/></svg>"); }
.sic.pboxed { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'><rect x='1.5' y='1.5' width='9' height='12' fill='none' stroke='%23d7e3f2' stroke-width='1'/><text x='3' y='11' font-size='9' font-family='Arial' font-weight='700' fill='%23d7e3f2'>P</text><path d='M12 5v6M9 8h6' stroke='%23d7e3f2' stroke-width='1'/></svg>"); }
.sub-caret { color: #d7e3f2; font-size: 8px; margin-left: -4px; }
.ehr-subheader .sub-tools .letter { color: #d7e3f2; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; }

/* Panel-style header (light gray, e.g. Patient Search) */
.panel-header {
  height: 24px;
  background: linear-gradient(#eef2f6, #dde5ee);
  border-bottom: 1px solid var(--ehr-panelhdr-b);
  display: flex; align-items: center;
  padding: 0 8px;
  color: #23507f; font-weight: 700; font-size: 12.5px;
  flex: 0 0 auto;
}
.panel-header .x {
  margin-left: auto; color: #5a6472; cursor: pointer; font-size: 14px;
  width: 18px; text-align: center;
}
.panel-header .x:hover { color: #b02a2a; }

/* ------------------------------------------------------------
   Tabs (chart tabs / order-detail tabs)
   ------------------------------------------------------------ */
.ehr-tabs {
  display: flex; align-items: stretch;
  background: linear-gradient(#f4f7fa, #e7edf3);
  border-bottom: 1px solid var(--ehr-line);
  flex: 0 0 auto;
  height: 26px;
  padding-left: 2px;
}
.ehr-tab {
  padding: 0 12px;
  margin: 2px 1px 0;
  display: flex; align-items: center;
  color: #565b60;
  cursor: pointer;
  font-size: 12px;
  border: 1px solid var(--ehr-line);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#f4f7fa,#e3e9ef);
}
.ehr-tab:hover { text-decoration: underline; }
.ehr-tab.active {
  color: #fff; font-weight: 600;
  background: #3d7f96;              /* teal active tab (not navy) */
  border-color: #2a5d70;
  border-radius: 4px 4px 0 0;
  text-decoration: none;
}

/* Order-viewer style tab row (wider, spaced, underline active) */
.ov-tabs {
  display: flex; align-items: stretch;
  background: #f0f4f8;
  border-bottom: 1px solid var(--ehr-line);
  flex: 0 0 auto; height: 28px;
}
.ov-tab {
  flex: 1; text-align: center;
  display: flex; align-items: center; justify-content: center;
  color: var(--ehr-link); cursor: pointer; font-size: 12.5px;
  border-right: 1px solid #dde3ea;
  text-decoration: underline; text-underline-offset: 3px;
}
.ov-tab:hover { text-decoration: underline; }
.ov-tab.active {
  background: #317190; color: #fff; font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */
.btn {
  font-family: inherit; font-size: 12px;
  border: 1px solid #a9b3bf; background: linear-gradient(#fdfdfd,#e9edf1);
  padding: 3px 12px; border-radius: 2px; cursor: pointer; color: #23303f;
}
.btn:hover { background: linear-gradient(#ffffff,#dfe5eb); }
.btn.primary {
  background: linear-gradient(#f7f9fb,#e4eaf0); border-color: #97a3b1; font-weight: 600;
}
.btn.green {
  background: linear-gradient(#5bb14d,#3d7f33); border-color: var(--ehr-btn-green-b);
  color: #fff; font-weight: 600; min-width: 58px;
}
.btn.green:hover { background: linear-gradient(#63bd54,#41883a); }
.btn.small { padding: 2px 8px; font-size: 11px; }

.linkbtn {
  color: var(--ehr-link); cursor: pointer; text-decoration: none;
}
.linkbtn:hover { text-decoration: underline; }

/* ------------------------------------------------------------
   Data grid / results table
   ------------------------------------------------------------ */
.ehr-grid {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.ehr-grid thead th {
  background: rgb(229,230,228);
  border-bottom: 1px solid var(--ehr-line);
  border-right: 1px solid var(--ehr-line-2);
  text-align: left; padding: 5px 8px; font-weight: 700; color: #2a3644;
  white-space: nowrap;
}
.ehr-grid tbody td {
  padding: 5px 8px; border-bottom: 1px solid var(--ehr-line-2);
  border-right: 1px solid var(--ehr-line-2);
  white-space: nowrap;
}
.ehr-grid tbody tr:nth-child(even) { background: var(--ehr-row-alt); }
.ehr-grid tbody tr.selected {
  background: var(--ehr-teal) !important;
  outline: 1px solid var(--ehr-teal-border);
}
.ehr-grid tbody tr.selected td { border-bottom-color: var(--ehr-teal-border); color: #fff; }
.ehr-grid tbody tr.selected .patient-link { color: #fff; }
.ehr-grid tbody tr.selected .rowcaret { color: #fff; }
.ehr-grid .patient-link {
  color: var(--ehr-link); font-weight: 600; text-decoration: underline; cursor: pointer;
}
.ehr-grid .rowcaret { color: #5a6472; }
.ehr-grid thead th.col-sep { border-right: 1px solid var(--ehr-line); }
.ehr-grid .rowcaret .chevron {
  width: 9px; height: 9px; display: inline-block;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'><path d='M2 3l2.5 2.5L7 3' fill='none' stroke='%235a6472' stroke-width='1.1'/></svg>");
}
.ehr-grid tbody tr.selected .rowcaret .chevron {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 9 9'><path d='M2 3l2.5 2.5L7 3' fill='none' stroke='%23ffffff' stroke-width='1.1'/></svg>");
}

/* Hidden until search runs */
.hidden { display: none !important; }

/* Patient-search page: the search input pill and Search button are rounded
   (stadium) shapes. Scoped to the page so the shared chrome search box on
   other pages is unaffected. */
body[data-page="patient-search"] .ehr-main .ehr-search {
  border-radius: 13px; overflow: hidden;
}
body[data-page="patient-search"] #btn-search {
  border-radius: 13px;
}

/* ------------------------------------------------------------
   Footer bar (pager + OK / Cancel)
   ------------------------------------------------------------ */
.ehr-footer {
  flex: 0 0 auto;
  height: 40px;
  border-top: 1px solid var(--ehr-line);
  background: linear-gradient(#f6f8fa,#e9edf1);
  display: flex; align-items: center;
  padding: 0 10px; gap: 8px;
}
.ehr-footer .pager {
  display: flex; align-items: center; gap: 6px; color: #3a4656; font-size: 12px;
}
.ehr-footer .pager .pg {
  border: 1px solid #b7c1cd; background: #fff; min-width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 2px;
  cursor: pointer;
}
.ehr-footer .pager .pg.cur { background: var(--ehr-subhdr); color: #fff; border-color: var(--ehr-subhdr); }
.ehr-footer .spacer { flex: 1; }

/* footer for the toolbar-style pages (order details / office note) */
.ehr-toolbar-footer {
  flex: 0 0 auto; min-height: 34px;
  border-top: 1px solid var(--ehr-line);
  background: linear-gradient(#f4f7fa,#e5eaf0);
  display: flex; align-items: center; gap: 6px; padding: 4px 10px;
}
.ehr-toolbar-footer .spacer { flex: 1; }

/* ============================================================
   CHART VIEW specifics
   ============================================================ */
.chart-filterbar {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 8px;
  background: #eef2f6;
  border-bottom: 1px solid var(--ehr-line-2);
  flex: 0 0 auto;
  font-size: 11.5px; color: #34404f;
  flex-wrap: nowrap;
}
.chart-filterbar.row2 { gap: 6px; }
.chart-filterbar.row3 {
  border-bottom: 1px solid var(--ehr-line);
  padding-top: 2px; padding-bottom: 3px;
}
.chart-filterbar .fb-icons {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 8px;
}
.chart-filterbar .fb-spacer { flex: 1; }
.chart-filterbar select, .mini-select {
  font-family: inherit; font-size: 11.5px; height: 20px;
  border: 1px solid #b7c1cd; border-radius: 2px; background: #fff; color: #23303f;
}
.pill {
  border: 1px solid #b7c1cd; background: #fff; border-radius: 2px;
  padding: 1px 7px; font-size: 11px; cursor: pointer; color: #34404f;
}
.pill.active { background: #d7e6f5; border-color: #8fb4dd; color: #14243c; font-weight: 600; }
/* Default = black button, Filtering = orange button */
.btn-default {
  background: #1b1b1b; color: #fff; border: 1px solid #000; border-radius: 2px;
  padding: 1px 8px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.btn-filtering {
  background: #d9822b; color: #fff; border: 1px solid #b96c1e; border-radius: 2px;
  padding: 1px 8px; font-size: 11px; font-weight: 700; cursor: pointer;
}
.year-toggle { display: inline-flex; }
.year-toggle .yr {
  border: 1px solid #b7c1cd; border-right: none; padding: 1px 6px; cursor: pointer;
  background: #fff; font-size: 11px; color: #34404f;
}
.year-toggle .yr:last-child { border-right: 1px solid #b7c1cd; }
.year-toggle .yr.active { background: #cfe0f2; color: #14243c; font-weight: 600; }
.chart-count { color: var(--ehr-warn-red); font-weight: 600; }

/* split: left folder tree | right orders panel */
.chart-split { flex: 1 1 auto; display: flex; min-height: 0; }
.chart-tree {
  width: 830px; flex: 0 0 auto; overflow: auto;
  border-right: 2px solid #b7c1cd; background: #fff; padding: 4px 0;
}
.chart-orders {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  background: #fff;
}

/* Folder tree */
.tree { font-size: 12px; user-select: none; }
.tree-node { }
.tree-row {
  display: flex; align-items: center; gap: 3px;
  padding: 2px 6px; cursor: pointer; white-space: nowrap;
}
.tree-row:hover { background: #eef4fb; }
/* Chart-tree selection is a PALE light blue-gray band with DARK text
   (distinct from the saturated grid/order selection teal). */
.tree-row.selected { background: #dbe9ec; outline: 1px solid #b9ccd0; }
.tree-tw {
  width: 12px; text-align: center; color: #5a6472; font-size: 9px; flex: 0 0 12px;
}
/* Manila-yellow folder icons rendered as inline SVG data-URIs (deterministic in headless). */
.tree-folder {
  width: 15px; height: 13px; flex: 0 0 15px; display: inline-block;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13'><path d='M1 2.5a1 1 0 0 1 1-1h3.4l1.2 1.3H13a1 1 0 0 1 1 1V11a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1z' fill='%23f4c945' stroke='%23c99a1a' stroke-width='.7'/></svg>");
}
.tree-node.open > .tree-row > .tree-folder,
.tree-folder.open {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='15' height='13' viewBox='0 0 15 13'><path d='M1 2.5a1 1 0 0 1 1-1h3.4l1.2 1.3H13a1 1 0 0 1 1 1V5H4L2 11H1z' fill='%23f4c945' stroke='%23c99a1a' stroke-width='.7'/><path d='M3.4 5H14l-1.8 6.4a1 1 0 0 1-1 .6H2z' fill='%23fbe08a' stroke='%23c99a1a' stroke-width='.7'/></svg>");
}
.tree-label { color: #1b1b1b; }
.tree-children { display: none; }
.tree-node.open > .tree-children { display: block; }
.tree-leaf:hover .leaf-name, .tree-leaf:hover .leaf-enc { text-decoration: underline; }
.leaf-name { color: #1b1b1b; font-weight: 600; }
.leaf-enc { color: #6b7280; font-weight: 400; }
/* Selected chart-tree leaf keeps its normal dark text on the pale band. */
/* Page/document leaf icon (light page with folded corner) as inline SVG. */
.tree-doc {
  width: 11px; height: 13px; flex: 0 0 11px; display: inline-block;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='13' viewBox='0 0 11 13'><path d='M1 1h6l3 3v8H1z' fill='%23ffffff' stroke='%237a828d' stroke-width='.8'/><path d='M7 1v3h3' fill='none' stroke='%237a828d' stroke-width='.8'/><path d='M3 6h5M3 8h5M3 10h4' stroke='%23aab2bd' stroke-width='.7'/></svg>");
}
/* Selected tree-doc keeps the normal dark-stroked document icon (no light recolor). */

/* indent levels */
.lvl1 { padding-left: 8px; }
.lvl2 { padding-left: 26px; }
.lvl3 { padding-left: 44px; }
.lvl4 { padding-left: 62px; }

/* Orders panel */
.orders-headrow {
  background: linear-gradient(#f4f7fa,#e7edf3);
  border-bottom: 1px solid var(--ehr-line);
  padding: 3px 6px 0; flex: 0 0 auto;
  display: flex; align-items: flex-end;
}
.orders-header {
  background: linear-gradient(#3d7f96, #317190);   /* teal (not navy) */
  color: #fff; font-weight: 700; padding: 3px 14px; font-size: 12.5px;
  display: inline-flex; align-items: center;
  width: fit-content; min-width: 120px;
  border: 1px solid #2a5d70; border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.orders-filterbar {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 8px; background: #eef2f6;
  border-bottom: 1px solid var(--ehr-line); flex: 0 0 auto;
}
.orders-actionbar {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; background: #f6f8fa;
  border-bottom: 1px solid var(--ehr-line-2); flex: 0 0 auto;
}
.orders-list { flex: 1 1 auto; overflow: auto; padding: 2px 0; }
.order-group-hdr {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 8px; font-weight: 700; color: #23303f; cursor: pointer;
  background: transparent; border-bottom: 1px solid var(--ehr-line-2);
}
.order-group-hdr .grp-caret { color: #5a6472; font-size: 9px; }
/* "Need Information" group header inherits the default dark header color
   (#23303f) like "Complete" — the reference has no red group headers. */
.order-item {
  display: flex; gap: 5px; padding: 4px 8px 4px 22px;
  border-bottom: 1px solid var(--ehr-line-2); align-items: flex-start;
}
.order-item .bullet { color: #5a6472; font-size: 8px; margin-top: 4px; }
.order-item .otext { color: #23303f; line-height: 1.35; }
.order-item.clickable { cursor: pointer; }
.order-item.clickable:hover { background: #eef4fb; }
.order-item.clickable .olink { color: var(--ehr-link); }
.order-item.clickable:hover .olink { text-decoration: underline; }
/* expanded / selected order-comment block (Need Information focal content) —
   light powder-blue panel with dark text (matches the reference). */
.order-detail-block {
  background: #c5dee3; color: #23303f;
  outline: 1px solid #9dbfc9;
  padding: 5px 10px 6px 22px; line-height: 1.4;
  border-bottom: 1px solid var(--ehr-line-2);
}
.order-detail-block b { color: #23303f; }

/* ============================================================
   ORDER DETAILS (Order Viewer)
   ============================================================ */
/* The Order Details modal titlebar is a light-gray WINDOW titlebar
   (dark text, bottom border, restore + close glyphs) — not the navy
   app sub-header. Scoped to this page via the body data-page attribute. */
body[data-page="order-details"] .ehr-subheader {
  height: 26px;
  background: linear-gradient(#f7f8fa, #f2f4f3);
  color: #333; font-weight: 600;
  border-bottom: 1px solid #c9d0d8;
}
body[data-page="order-details"] .ehr-subheader .win-glyphs {
  margin-left: auto; display: flex; align-items: center; gap: 12px;
  color: #4a4a4a; font-size: 12px;
}
body[data-page="order-details"] .ehr-subheader .win-glyphs span { cursor: pointer; }
body[data-page="order-details"] .ehr-subheader .win-glyphs .close:hover { color: #b02a2a; }

/* Edit-form field block: For / Status / To Be Done rendered as bordered
   editable inputs beneath the title and ABOVE the outer "Order" tab
   (shown only in the ?dropdown=for edit state). */
.ov-editform {
  padding: 8px 14px 4px; background: #fff; flex: 0 0 auto;
  border-bottom: 1px solid var(--ehr-line-2);
}
.ov-editform .ef-row {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  position: relative;
}
.ov-editform .ef-label {
  width: 90px; flex: 0 0 90px; text-align: right;
  color: #34404f; font-size: 12px;
}
.ov-editform .ef-label .req { color: var(--ehr-warn-red); font-weight: 700; }
/* bordered full-width combobox (For:) */
.ef-combo {
  flex: 1 1 auto; min-width: 0; position: relative;
  display: flex; align-items: center;
  border: 1px solid #b7c1cd; background: #fff; border-radius: 2px;
  height: 22px; padding: 0 6px; color: #1b1b1b; cursor: pointer;
}
.ef-combo .ef-chev {
  margin-left: auto; flex: 0 0 16px; width: 16px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-left: 1px solid #cfd6de; color: #4a5560; font-size: 10px; line-height: .7;
}
/* plain bordered text field (Status / To Be Done) */
.ef-input {
  flex: 1 1 auto; min-width: 0;
  border: 1px solid #b7c1cd; background: #fff; border-radius: 2px;
  height: 22px; padding: 0 6px; color: #1b1b1b; font-family: inherit; font-size: 12px;
  display: flex; align-items: center;
}
/* the For dropdown, when anchored inside the edit-form combo, drops below it */
.ef-combo .for-dropdown { top: 23px; }

/* Edit-mode (?dropdown=for) reorders the panel chrome so the title and the
   For/Status/To Be Done fields sit ABOVE the outer "Order" tab, matching the
   reference edit-form order. The default (read-only) view keeps source order. */
.ehr-main.ov-editmode-layout > .ehr-subheader     { order: 0; }
.ehr-main.ov-editmode-layout > .ov-patient-banner{ order: 1; }
.ehr-main.ov-editmode-layout > .ov-appt-strip    { order: 2; }
.ehr-main.ov-editmode-layout > .ov-title         { order: 3; }
.ehr-main.ov-editmode-layout > #ov-editform      { order: 4; }
.ehr-main.ov-editmode-layout > .ov-outer-tabs    { order: 5; }
.ehr-main.ov-editmode-layout > .ov-tabs          { order: 6; }
.ehr-main.ov-editmode-layout > .ov-scroll        { order: 7; }
.ehr-main.ov-editmode-layout > .ehr-toolbar-footer{ order: 8; }
/* dark-gray patient demographics banner */
.ov-patient-banner {
  display: flex; align-items: center; gap: 12px;
  min-height: 22px; padding: 2px 12px;
  background: #5b6570; color: #fff; font-size: 12px; font-weight: 600;
  border-bottom: 1px solid var(--ehr-line); flex: 0 0 auto;
}
.ov-patient-banner .pb-x { margin-left: auto; cursor: pointer; font-weight: 400; }
/* dark charcoal appointment strip */
.ov-appt-strip {
  display: flex; align-items: center; justify-content: flex-end;
  background: #4d4f4c; color: #e8eaea; font-size: 12px;
  padding: 2px 12px; flex: 0 0 auto;
}
/* outer single "Order" tab level */
.ov-outer-tabs {
  display: flex; align-items: flex-end;
  background: linear-gradient(#f4f7fa,#e7edf3);
  border-bottom: 1px solid var(--ehr-line); flex: 0 0 auto;
  padding: 3px 6px 0;
}
.ov-outer-tab {
  background: #317190; color: #fff; font-weight: 700; font-size: 12.5px;
  padding: 3px 20px; border: 1px solid #235469; border-bottom: none;
  border-radius: 4px 4px 0 0;
}
.ov-title {
  padding: 6px 12px; font-size: 15px; font-weight: 700; color: #14243c;
  border-bottom: 1px solid var(--ehr-line); flex: 0 0 auto; background: #fff;
  display: flex; align-items: center; gap: 8px;
}
.ov-title .ov-title-right {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 400;
}
/* circular nav arrow buttons */
.nav-circle {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: #34404f;
}
.nav-circle .circ {
  width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--ehr-link);
  color: var(--ehr-link); display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px; line-height: 1;
}
.nav-circle.disabled { color: #9aa3ac; cursor: default; }
.nav-circle.disabled .circ { border-color: #b7c1cd; color: #b7c1cd; }
.ov-title .panel-glyph { color: #34404f; }
/* edit-mode bordered textarea boxes + char-count captions */
.edit-box {
  border: 1px solid #b7c1cd; background: #fff; border-radius: 2px;
  min-height: 52px; padding: 4px 6px; color: #1b1b1b; line-height: 1.35;
}
.edit-box.disabled { background: #eef1f4; color: #6b7280; }
.char-caption { color: #6b7280; font-size: 10.5px; margin-top: 1px; }
.cc-btn-row { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; }
.cc-label { font-weight: 600; color: #34404f; }
.mini-lookup {
  width: 20px; height: 20px; border: 1px solid #b7c1cd; background: linear-gradient(#fff,#eef2f6);
  border-radius: 2px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; vertical-align: middle;
}
.managed-select {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid #b7c1cd; background: #fff; border-radius: 2px;
  padding: 1px 6px; color: #23303f;
}
.managed-select .caret { color: #8a94a2; }
.ov-scroll { flex: 1 1 auto; overflow: auto; padding: 6px 14px 20px; background: #fff; }
.ov-section-hdr {
  font-weight: 700; color: #1c5fa8; font-size: 13px;   /* saturated blue section header */
  margin: 8px 0 4px; border-bottom: 1px solid var(--ehr-line-2); padding-bottom: 2px;
}
.dl-rows { display: table; width: 100%; }
.dl-row { display: table-row; }
.dl-row > div { display: table-cell; padding: 2px 6px; vertical-align: top; }
/* zebra striping on the details table (~#f3f4f2 faint gray band) */
.dl-row:nth-child(even) > div { background: #f3f4f2; }
.dl-label {
  width: 165px; color: #34404f; font-weight: 400; white-space: nowrap;
}
.dl-value { color: #1b1b1b; }
/* Detail values are a single dark color (reference has no red values). */
.dl-value.warn { color: #1b1b1b; font-weight: 400; }
.dl-value .for-plain { color: #1b1b1b; }
.q-block { margin: 8px 0; }
.q-label { font-weight: 700; color: #1c5fa8; }   /* saturated blue like the section header */
.q-answer { color: #1b1b1b; margin-top: 1px; }

/* "For" dropdown */
.for-dropdown {
  position: absolute; top: 20px; left: 0; z-index: 40;
  width: 480px; background: #fff;
  border: 1px solid #7f93ad; box-shadow: 0 6px 18px rgba(0,0,0,.28);
  font-size: 12px;
}
.for-dropdown .fdd-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px; border-bottom: 1px solid var(--ehr-line-2); background: #f3f6f9;
}
.for-dropdown .fdd-add { color: var(--ehr-link); cursor: pointer; }
.for-dropdown .fdd-showall { color: var(--ehr-link); cursor: pointer; }
.for-dropdown .fdd-group {
  padding: 3px 8px; font-weight: 700; color: #4a5665; background: #eef2f6;
  border-top: 1px solid var(--ehr-line-2); font-size: 11px; letter-spacing: .3px;
}
.for-dropdown .fdd-item {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px; cursor: pointer;
}
.for-dropdown .fdd-item:hover { background: #eef4fb; }
.for-dropdown .fdd-check { width: 12px; color: var(--ehr-btn-green); font-weight: 700; }
.for-dropdown .fdd-dot {
  width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%;
  border: 1px solid #9aa8b6; background: #eef2f6; display: inline-block;
}
.for-dropdown .fdd-item.checked { background: #eaf4ea; }
.for-dropdown .fdd-item.checked .fdd-dot { background: #4b9b3f; border-color: #3d7f33; }

/* flat / borderless toolbar footer buttons (order-viewer + office-note) */
.btn-flat {
  font-family: inherit; font-size: 12px;
  background: transparent; border: none; padding: 3px 8px; cursor: pointer;
  color: var(--ehr-link);
}
.btn-flat:hover { text-decoration: underline; }
.btn-flat[disabled], .btn-flat.disabled {
  color: #9aa3ac; cursor: default; text-decoration: none; pointer-events: none;
}
.btn.disabled, .btn[disabled] {
  color: #9aa3ac; opacity: .6; cursor: default; pointer-events: none;
}
.for-dropdown .fdd-foot {
  display: flex; justify-content: flex-end; padding: 6px 8px;
  border-top: 1px solid var(--ehr-line-2); background: #f3f6f9;
}

/* ============================================================
   SCAN DOCUMENT VIEWER
   ============================================================ */
/* Metadata: two stacked rows (Type on row 1; Owner + Status on row 2). */
.scan-meta {
  display: flex; flex-direction: column; gap: 2px;
  padding: 4px 12px; background: #eef2f6; border-bottom: 1px solid var(--ehr-line);
  flex: 0 0 auto; font-size: 12px; color: #34404f;
}
.scan-meta .scan-meta-row { display: flex; align-items: center; gap: 18px; }
.scan-meta b { color: #23303f; }
.scan-meta .scan-right { margin-left: auto; display:flex; align-items:center; gap:12px; }
.scan-toolbar {
  display: flex; align-items: center; gap: 4px;
  padding: 3px 10px; background: #dfe6ee; border-bottom: 1px solid var(--ehr-panelhdr-b);
  flex: 0 0 auto;
}
/* borderless flat icon buttons (no border / gradient) matching the reference */
.scan-toolbar .tbbtn {
  width: 24px; height: 22px; border: none; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 2px; cursor: pointer; color: #34404f;
}
.scan-toolbar .tbbtn:hover { background: rgba(52,64,79,.10); }
/* toolbar icon glyphs (inline SVG data-URIs, thin outlines) */
.scan-toolbar .tbico {
  width: 16px; height: 16px; display: inline-block;
  background-repeat: no-repeat; background-position: center;
}
.tbico.save { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M8 2v8' stroke='%2334404f' stroke-width='1.3' fill='none'/><path d='M5 7l3 3 3-3' stroke='%2334404f' stroke-width='1.3' fill='none'/><path d='M3 12v2h10v-2' stroke='%2334404f' stroke-width='1.3' fill='none'/></svg>"); }
.tbico.page { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path d='M4 1.5h5l3 3v10H4z' fill='none' stroke='%2334404f' stroke-width='1.1'/><path d='M9 1.5v3h3' fill='none' stroke='%2334404f' stroke-width='1.1'/></svg>"); }
.tbico.zoomin { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='6.5' cy='6.5' r='4.4' fill='none' stroke='%2334404f' stroke-width='1.3'/><path d='M10 10l4 4' stroke='%2334404f' stroke-width='1.5'/><path d='M6.5 4.3v4.4M4.3 6.5h4.4' stroke='%2334404f' stroke-width='1.2'/></svg>"); }
.tbico.zoomout { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><circle cx='6.5' cy='6.5' r='4.4' fill='none' stroke='%2334404f' stroke-width='1.3'/><path d='M10 10l4 4' stroke='%2334404f' stroke-width='1.5'/><path d='M4.3 6.5h4.4' stroke='%2334404f' stroke-width='1.2'/></svg>"); }
.tbico.fitwidth { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><rect x='2.5' y='3.5' width='11' height='9' fill='none' stroke='%2334404f' stroke-width='1.1'/><path d='M5 8h6M5 8l1.6-1.6M5 8l1.6 1.6M11 8l-1.6-1.6M11 8l-1.6 1.6' stroke='%2334404f' stroke-width='1.1' fill='none'/></svg>"); }
.tbico.fitpage { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><rect x='3.5' y='2.5' width='9' height='11' fill='none' stroke='%2334404f' stroke-width='1.1'/><path d='M8 5v6M8 5L6.6 6.4M8 5l1.4 1.4M8 11l-1.4-1.4M8 11l1.4-1.4' stroke='%2334404f' stroke-width='1.1' fill='none'/></svg>"); }
.scan-toolbar .tbsep { width: 1px; height: 18px; background: #b7c1cd; margin: 0 4px; }
.scan-toolbar .pagectl { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.scan-toolbar .pg-input {
  width: 34px; height: 20px; text-align: center; font-family: inherit; font-size: 12px;
  border: 1px solid #b7c1cd; border-radius: 2px;
}
.scan-stage {
  flex: 1 1 auto; overflow: auto;
  background: #f2f3f5; display: flex; align-items: flex-start; justify-content: center;
  padding: 10px;
}
.scan-page {
  width: 100%; max-width: 1040px; min-height: 560px; background: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.18);
  padding: 0; position: relative;
}
/* Scan viewer 3-row sub-header */
.scan-titlebar {
  display: flex; align-items: center;
  background: linear-gradient(#f7f8fa,#e9edf1); color: #23303f;
  font-weight: 600; font-size: 12.5px; padding: 0 10px; height: 24px;
  border-bottom: 1px solid var(--ehr-line); flex: 0 0 auto;
}
.scan-titlebar .win-glyphs { margin-left: auto; display: flex; align-items: center; gap: 10px; color: #4a4a4a; }
.scan-titlebar .win-glyphs span { cursor: pointer; }
.scan-apptband {
  display: flex; align-items: center; justify-content: flex-end;
  background: #5b6570; color: #e8eaea; font-size: 12px;
  padding: 2px 12px; flex: 0 0 auto;
}
.scan-navrow {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  background: #fff; padding: 3px 12px; flex: 0 0 auto;
  border-bottom: 1px solid var(--ehr-line-2);
}
.scan-page.placeholder { padding: 36px 44px; color: #55606d; }
.scan-page .ph-title { font-size: 16px; font-weight: 700; color: #3a4350; margin-bottom: 14px; }
.scan-page .ph-line { height: 11px; background: #e2e6ea; border-radius: 2px; margin: 9px 0; }
.scan-page .ph-line.s { width: 55%; }
.scan-page .ph-line.m { width: 78%; }
.scan-page .ph-block { height: 90px; background: #eef1f4; border: 1px dashed #c6ccd3; border-radius: 3px; margin: 16px 0; }

/* Medicare insurance card */
.med-card {
  width: 100%; padding: 0; background: #fff; font-family: Arial, "Segoe UI", sans-serif;
}
.med-banner {
  background: linear-gradient(#1b3b6e,#122a52); color: #fff;
  display: flex; align-items: center; gap: 14px; padding: 16px 22px;
}
.med-banner .eagle { flex: 0 0 auto; }
.med-banner .med-title {
  font-size: 30px; font-weight: 800; letter-spacing: .5px; line-height: 1.05;
  text-transform: uppercase; white-space: nowrap;
}
.med-body { padding: 24px 30px 30px; }
.med-field { margin-bottom: 20px; }
.med-field .med-lbl { color: #1b3b6e; font-weight: 700; font-size: 15px; }
.med-field .med-val {
  font-size: 22px; font-weight: 700; color: #14243c; letter-spacing: 1px; margin-top: 4px;
}
.med-cols { display: flex; gap: 40px; }
.med-cols .med-field { flex: 1; }

/* ============================================================
   OFFICE NOTE (Read Only Quick Chart)
   ============================================================ */
/* office-note top navigation strip */
.note-navstrip {
  display: flex; align-items: center; gap: 12px;
  padding: 3px 0 3px 12px; background: #f4f7fa;
  border-bottom: 1px solid var(--ehr-line-2); flex: 0 0 auto;
}
.note-navstrip .ns-spacer { flex: 1; }
.note-navstrip .expand-col {
  width: 30px; align-self: stretch; margin-left: 4px;
  background: #e3e9ef; border-left: 1px solid var(--ehr-line);
  display: flex; align-items: center; justify-content: center;
  color: var(--ehr-link); cursor: pointer;
}
.note-header {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 12px; border-bottom: 1px solid var(--ehr-line);
  background: #f4f7fa; flex: 0 0 auto; font-size: 12px; color: #34404f;
}
.note-header .pt-name { font-weight: 700; color: #14243c; font-size: 13px; }
.note-header .pt-doc-icon {
  width: 13px; height: 15px; display: inline-block; vertical-align: -2px;
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='15' viewBox='0 0 13 15'><path d='M1 1h7l4 4v9H1z' fill='%23f4c945' stroke='%23c99a1a' stroke-width='.8'/><path d='M8 1v4h4' fill='none' stroke='%23c99a1a' stroke-width='.8'/><path d='M3 7h6M3 9h6M3 11h4' stroke='%23b98f18' stroke-width='.7'/></svg>");
}
.note-header .note-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.note-header .find-box {
  display: flex; align-items: center; border: 1px solid #b7c1cd; border-radius: 2px;
  background: #fff; height: 22px; width: 160px;
}
.note-header .find-box input { border: 0; outline: 0; flex: 1; padding: 0 6px; font-size: 12px; min-width: 0; }
.note-header .fontsize-btn {
  border: 1px solid #b7c1cd; background: linear-gradient(#fff,#eef2f6);
  border-radius: 2px; padding: 1px 5px; font-size: 11px; color: #34404f; cursor: pointer;
}
.note-header .kebab { color: #5a6472; font-size: 14px; cursor: pointer; padding: 0 4px; }
/* black Final status pill */
.status-pill {
  background: #1b1b1b; color: #fff; font-weight: 700; font-size: 11px;
  border-radius: 3px; padding: 1px 8px;
}
.note-tabrow {
  padding: 4px 12px 0; background: #eef2f6; border-bottom: 1px solid var(--ehr-line);
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
}
.note-pill {
  background: #317194; border: 1px solid #2a6180;   /* steel-teal folder tab */
  padding: 3px 16px; border-radius: 4px 4px 0 0; font-weight: 700; color: #fff; font-size: 12px;
}
.note-scroll { flex: 1 1 auto; overflow: auto; padding: 10px 20px 24px; background: #fff; }
.note-sec-hdr {
  font-weight: 700; color: #1b1b1b; font-size: 13.5px; margin: 14px 0 4px;
}
.note-sec-hdr:first-child { margin-top: 0; }
/* nested outline: indented bold sub-labels ending in a colon, with their
   body paragraphs indented to match (two-level note outline). */
.note-sublabel {
  font-weight: 700; color: #1b1b1b; font-size: 12.5px;
  margin: 8px 0 2px 22px;
}
.note-body p.note-subbody { margin-left: 22px; }
/* Annotate collapsible bar */
.annotate-bar {
  display: flex; align-items: center;
  background: linear-gradient(#eef2f6,#e0e6ec); border-top: 1px solid var(--ehr-line);
  border-bottom: 1px solid var(--ehr-line); padding: 3px 12px;
  font-weight: 600; color: #34404f; flex: 0 0 auto;
}
.annotate-bar .caret { margin-left: auto; color: #5a6472; }
.note-body { color: #1b1b1b; line-height: 1.5; max-width: 1100px; }
.note-body p { margin: 4px 0; }
.exam-line { margin: 3px 0; }
.exam-line b { color: #2a3644; }
.sig-line { color: #1b1b1b; margin: 3px 0; }

/* generic muted / small helpers */
.muted { color: var(--ehr-text-mut); }
.nowrap { white-space: nowrap; }

/* ============================================================
   Launcher (index.html)
   ============================================================ */
.launcher {
  max-width: 900px; margin: 40px auto; background: #fff; border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,.25); overflow: hidden;
}
.launcher .lh-head {
  background: var(--ehr-navy); color: #fff; padding: 18px 24px;
}
.launcher .lh-head h1 { margin: 0; font-size: 20px; }
.launcher .lh-head p { margin: 6px 0 0; color: #b9c6d8; font-size: 13px; }
.launcher .lh-body { padding: 18px 24px 26px; }
.launcher ol { margin: 0; padding-left: 22px; }
.launcher li { margin: 10px 0; line-height: 1.45; }
.launcher a { color: var(--ehr-link); font-weight: 600; text-decoration: none; }
.launcher a:hover { text-decoration: underline; }
.launcher .desc { color: #4a5665; display: block; font-size: 12.5px; margin-top: 1px; }
.launcher .state-links { margin-top: 3px; font-size: 12px; }
.launcher .state-links a { font-weight: 500; margin-right: 12px; }
.launcher .note {
  margin-top: 20px; padding: 12px 14px; background: #f3f6f9; border: 1px solid var(--ehr-line);
  border-radius: 4px; color: #4a5665; font-size: 12.5px;
}