/* POCPRO v2 — main stylesheet */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
::placeholder { color: #3a3a3a; }
body { font-family: 'IBM Plex Mono', monospace; display: flex; flex-direction: column; height: 100vh; background: #0d0d0d; color: #e0e0e0; overflow: hidden; }

/* ── Top bar: ICD10 | Diagnoses ─────────────────────────────────────── */
.top-bar  { display: flex; flex-direction: row; height: 200px; min-height: 80px; flex-shrink: 0; padding: 10px 12px 6px; gap: 10px; border-bottom: 2px solid #1e1e1e; position: relative; }
.top-bar-resize { position: absolute; bottom: 0; left: 0; right: 0; height: 5px; cursor: ns-resize; background: transparent; z-index: 10; }
.top-bar-resize:hover { background: rgba(95,200,59,0.2); }
.icd-col  { display: flex; flex-direction: column; gap: 4px; min-width: 80px; }
.diag-col { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 80px; }
.top-divider { width: 4px; background: #1e1e1e; flex-shrink: 0; cursor: col-resize; align-self: stretch; }
.bar-label { font-size: 11px; text-transform: uppercase; color: #666; flex-shrink: 0; }

/* ICD10 textarea + highlight overlay */
.input-wrapper { flex: 1; position: relative; min-height: 0; }
#highlight-overlay, #input {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; line-height: 1.5;
  padding: 8px; border: 1px solid #2a2a2a; border-radius: 4px;
  white-space: pre-wrap; word-wrap: break-word; overflow-y: auto;
}
#highlight-overlay { background: #141414; color: #e0e0e0; z-index: 0; pointer-events: none; }
#input { background: transparent; color: transparent; caret-color: #e0e0e0; z-index: 1; resize: none; outline: none; }
.invalid { background: rgba(220,60,60,0.35); color: #f87171; border-radius: 2px; }
.zcode   { background: rgba(220,180,40,0.25); color: #e8c84a; border-radius: 2px; }

.output { flex: 1; background: #141414; border: 1px solid #2a2a2a; padding: 8px; font-size: 13px; border-radius: 4px; overflow-y: auto; white-space: pre-wrap; min-height: 0; }

/* ── Main row: controls | divider | orders ───────────────────────────── */
.main-row       { display: flex; flex: 1; overflow: hidden; }
.controls-panel { width: 300px; flex-shrink: 0; overflow-y: auto; padding: 10px 4px; display: flex; flex-direction: column; gap: 8px; }
.orders-panel   { flex: 1; display: flex; flex-direction: column; padding: 10px 12px; gap: 6px; overflow: hidden; min-width: 0; }
.divider        { width: 4px; background: #1e1e1e; flex-shrink: 0; cursor: col-resize; user-select: none; }
.divider:hover  { background: #2a2a2a; }
.orders-label   { font-size: 11px; text-transform: uppercase; color: #666; flex-shrink: 0; }

/* ── Output tabs ─────────────────────────────────────────────────────── */
.tab-bar  { display: flex; gap: 4px; flex-shrink: 0; }
.tab-btn  { background: #141414; color: #666; border: 1px solid #2a2a2a; border-radius: 4px 4px 0 0; padding: 3px 14px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; cursor: pointer; user-select: none; }
.tab-btn.active { background: #0d1a0a; color: #5fc83b; border-color: #5fc83b; font-weight: bold; }
.tab-pane { display: none; flex: 1; min-height: 0; }
.tab-pane.active { display: flex; flex-direction: column; }

/* ── Top-level app tabs: POCPRO | MEDS | PSG (MODERN only) ───────────── */
/* The bar starts with [hidden]; JS removes it only on the user's own Mac
   (when the local LEVON/PSG helpers are reachable). Legacy never shows it. */
#app-tabbar { display: flex; gap: 4px; flex-shrink: 0; padding: 6px 12px 0; background: #0d0d0d; }
#app-tabbar[hidden] { display: none; }                 /* id+attr beats the bare id rule */
body.legacy-mode #app-tabbar { display: none !important; }
.app-tab-btn { background: #141414; color: #666; border: 1px solid #2a2a2a; border-radius: 4px 4px 0 0; padding: 4px 18px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: bold; cursor: pointer; user-select: none; }
.app-tab-btn[hidden] { display: none; }
.app-tab-btn.active { background: #0d1a0a; color: #5fc83b; border-color: #5fc83b; }
body.light-theme .app-tab-btn { background: #e8e8e8; color: #888; border-color: #cccccc; }
body.light-theme .app-tab-btn.active { background: #f0fff0; color: #2a8010; border-color: #3a9020; }

.app-pane { display: none; }
.app-pane.active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.app-pane > iframe { flex: 1; width: 100%; border: 0; min-height: 0; background: #0d0d0d; }
/* On a MEDS/IR/SUPPLIES tab the POCPRO toolbar is irrelevant — hide it (switch back via tab bar). */
body.apptab-meds .toolbar, body.apptab-psg .toolbar, body.apptab-ir .toolbar, body.apptab-supplies .toolbar { display: none !important; }

/* ── Excel-style Key Tips (tap ⌥ → letter badges over each button) ─────────── */
#keytips-layer { position: fixed; inset: 0; z-index: 9998; pointer-events: none; }
#keytips-layer::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.35); }
.keytip { position: absolute; transform: translate(-5px, -7px);
  background: #5fc83b; color: #0d0d0d; font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 700; line-height: 1; padding: 3px 6px;
  border-radius: 4px; border: 1px solid #0d0d0d; box-shadow: 0 1px 5px rgba(0,0,0,0.7); }
.keytip-hint { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
  background: #141414; color: #5fc83b; border: 1px solid #5fc83b; border-radius: 6px;
  padding: 6px 16px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 1px; }
body.light-theme .keytip { background: #2a8010; color: #fff; border-color: #fff; }
body.light-theme .keytip-hint { background: #f0fff0; color: #2a8010; border-color: #3a9020; }
/* Legacy must never reveal the embedded helper panes. */
body.legacy-mode #app-meds, body.legacy-mode #app-psg { display: none !important; }

/* ── Help / documentation: circular "?" button + overlay ────────────── */
.tb-help { border-radius: 50% !important; width: 26px; height: 26px; padding: 0 !important;
  font-weight: bold; font-size: 14px; line-height: 1; display: inline-flex;
  align-items: center; justify-content: center; flex: 0 0 auto; }
/* In legacy the toolbar buttons stack vertically beneath LEGACY — keep the help
   button a centered circle instead of stretching to full stack width. */
body.legacy-mode .legacy-icd-toolbar .tb-help { align-self: center; margin-top: 2px; }
#help-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  z-index: 1100; align-items: center; justify-content: center; }
#help-overlay.open { display: flex; }
#help-panel { width: min(760px, 92vw); max-height: 86vh; display: flex; flex-direction: column;
  background: #141414; border: 1px solid #2a2a2a; border-radius: 8px; overflow: hidden; }
#help-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid #2a2a2a; background: #0d0d0d; flex-shrink: 0; }
#help-title { color: #5fc83b; font-weight: bold; font-size: 14px; letter-spacing: 1px;
  font-family: 'IBM Plex Mono', monospace; }
#help-close { margin-left: auto; background: #3a3a3a; color: #bbb; border: 1px solid #555;
  border-radius: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; cursor: pointer;
  padding: 4px 10px; }
#help-close:hover { color: #fff; border-color: #888; }
#help-body { overflow-y: auto; padding: 18px 22px 26px; color: #ddd; font-size: 13px;
  line-height: 1.55; font-family: 'IBM Plex Mono', monospace; }
#help-body h3 { color: #e8e8e8; font-size: 15px; margin: 0 0 14px; }
#help-body h4 { color: #5fc83b; font-size: 13px; text-transform: uppercase; letter-spacing: 1px;
  margin: 20px 0 6px; border-bottom: 1px solid #222; padding-bottom: 4px; }
#help-body ul { margin: 6px 0; padding-left: 20px; }
#help-body li { margin: 4px 0; }
#help-body code { background: #0d0d0d; border: 1px solid #2a2a2a; border-radius: 3px;
  padding: 0 4px; color: #9cdcfe; font-size: 12px; }
#help-body b { color: #fff; }
#help-body p { margin: 6px 0; }
#help-body h5 { color: #cfcfcf; font-size: 12px; margin: 12px 0 4px; }
.help-loading { color: #888; padding: 20px 4px; }
body.light-theme #help-body h5 { color: #444; }
/* Light theme */
body.light-theme #help-panel { background: #ffffff; border-color: #d0d0d0; }
body.light-theme #help-head { background: #f4f4f4; border-color: #d0d0d0; }
body.light-theme #help-title { color: #2a8010; }
body.light-theme #help-close { background: #e8e8e8; color: #333; border-color: #bbb; }
body.light-theme #help-body { color: #222; }
body.light-theme #help-body h3 { color: #111; }
body.light-theme #help-body h4 { color: #2a8010; border-color: #ddd; }
body.light-theme #help-body code { background: #f0f0f0; border-color: #d0d0d0; color: #0451a5; }
body.light-theme #help-body b { color: #000; }

/* ── MEDS native panel (gpt-4o med-list writer) ─────────────────────── */
#app-meds { overflow: auto; background: #0d0d0d; }
.meds-wrap { max-width: 880px; margin: 0 auto; width: 100%; padding: 20px 22px 60px;
  font-family: 'IBM Plex Mono', monospace; color: #e8e8e8; }
.meds-head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; border-bottom: 1px solid #222; padding-bottom: 12px; margin-bottom: 18px; }
.meds-title { font-size: 18px; margin: 0; letter-spacing: 1px; font-weight: bold; }
.meds-tag { color: #5fc83b; font-size: 12px; letter-spacing: 1px; margin-left: 6px; }
.meds-usage { color: #666; font-size: 11px; }
.meds-lbl { display: block; color: #888; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.5px; margin-bottom: 8px; }
.meds-input, .meds-result { width: 100%; background: transparent; color: #e8e8e8;
  border: 1px solid #222; border-radius: 6px; font-family: inherit; font-size: 14px;
  padding: 10px; outline: none; resize: vertical; }
.meds-input { min-height: 120px; }
.meds-result { min-height: 150px; }
.meds-input:focus, .meds-result:focus { border-color: #5fc83b; }
.meds-imgwrap { margin: 12px 0; display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.meds-imgwrap[hidden] { display: none; }  /* author display:flex above would otherwise override the UA hidden rule */
.meds-imgprev { max-width: 220px; max-height: 180px; border: 1px solid #222; border-radius: 6px; display: block; }
/* One thumbnail in the ordered strip: order badge (top-left) + remove × (top-right). */
.meds-thumb { position: relative; }
.meds-thumb-num { position: absolute; top: 4px; left: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center; background: #5fc83b; color: #0d0d0d;
  font-size: 11px; font-weight: bold; border-radius: 8px; }
.meds-thumb-rm { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center; background: rgba(13,13,13,.8); color: #fff;
  border: none; border-radius: 50%; font-size: 14px; cursor: pointer; padding: 0; }
.meds-thumb-rm:hover { background: #e0623f; }
.meds-actions { display: flex; align-items: center; gap: 14px; margin: 14px 0 4px; flex-wrap: wrap; }
.meds-go { background: #5fc83b; color: #0d0d0d; border: none; border-radius: 5px;
  padding: 8px 22px; font-family: inherit; font-size: 13px; font-weight: bold; cursor: pointer; }
.meds-go:hover { background: #6fe048; }
.meds-go:disabled { opacity: .5; cursor: default; }
.meds-btn { background: #141414; color: #ccc; border: 1px solid #2a2a2a; border-radius: 5px;
  padding: 8px 16px; font-family: inherit; font-size: 13px; cursor: pointer; }
.meds-btn:hover { border-color: #5fc83b; }
.meds-link { background: none; border: none; color: #666; font-family: inherit; font-size: 12px;
  text-decoration: underline; cursor: pointer; padding: 0; }
.meds-link:hover { color: #5fc83b; }
.meds-status { color: #666; font-size: 12px; }
.meds-status.err { color: #e0623f; }
.meds-status.live { color: #5fc83b; }
.meds-out { margin-top: 22px; }
.meds-out-head { display: flex; align-items: center; justify-content: space-between;
  color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
.meds-out-btns { display: flex; align-items: center; gap: 8px; }
.meds-copy { background: #5fc83b; color: #0d0d0d; border: none; border-radius: 4px;
  padding: 3px 12px; font-family: inherit; font-size: 11px; font-weight: bold; cursor: pointer;
  text-transform: none; letter-spacing: 0; }
.meds-copy:hover { background: #6fe048; }
.meds-copy.ok { background: #2a8010; color: #fff; }
.meds-send { background: #141414; color: #5fc83b; border: 1px solid #5fc83b; border-radius: 4px;
  padding: 3px 12px; font-family: inherit; font-size: 11px; font-weight: bold; cursor: pointer;
  text-transform: none; letter-spacing: 0; }
.meds-send:hover { background: #0d1a0a; }
.meds-send.ok { background: #2a8010; color: #fff; border-color: #2a8010; }
body.light-theme .meds-send { background: #f0fff0; color: #2a8010; border-color: #3a9020; }
/* Light theme */
body.light-theme #app-meds { background: #ffffff; }
body.light-theme .meds-wrap { color: #1a1a1a; }
body.light-theme .meds-head, body.light-theme .meds-input, body.light-theme .meds-result,
body.light-theme .meds-imgprev { border-color: #d0d0d0; }
body.light-theme .meds-title { color: #1a1a1a; }
body.light-theme .meds-input, body.light-theme .meds-result { color: #1a1a1a; }
body.light-theme .meds-go, body.light-theme .meds-copy { background: #2a8010; color: #fff; }
body.light-theme .meds-btn { background: #f0f0f0; color: #333; border-color: #ccc; }

/* ── IR native panel (Incomplete Report fill-in form) ───────────────── */
#app-ir { overflow: auto; background: #0d0d0d; }
.ir-wrap { max-width: 880px; margin: 0 auto; width: 100%; padding: 20px 22px 60px;
  font-family: 'IBM Plex Mono', monospace; color: #e8e8e8; }
.ir-head { border-bottom: 1px solid #222; padding-bottom: 12px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ir-clear-top { background: #141414; color: #ccc; border: 1px solid #2a2a2a; border-radius: 5px;
  padding: 7px 18px; font-family: inherit; font-size: 12px; font-weight: bold; cursor: pointer;
  text-transform: none; letter-spacing: 0; flex: 0 0 auto; }
.ir-clear-top:hover { border-color: #5fc83b; color: #5fc83b; }
body.light-theme .ir-clear-top { background: #f0f0f0; color: #333; border-color: #ccc; }
body.light-theme .ir-clear-top:hover { border-color: #2a8010; color: #2a8010; }
.ir-title { font-size: 18px; margin: 0; letter-spacing: 1px; font-weight: bold; }
.ir-tag { color: #5fc83b; font-size: 12px; letter-spacing: 1px; margin-left: 6px; }
.ir-toprow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.ir-toprow .ir-field { flex: 1 1 140px; }
.ir-field { display: block; }
.ir-block { margin-bottom: 16px; }
.ir-lbl { display: block; color: #888; font-size: 11px; text-transform: uppercase;
  letter-spacing: 1.2px; margin-bottom: 6px; }
.ir-in, .ir-ta, .ir-result { width: 100%; background: transparent; color: #e8e8e8;
  border: 1px solid #222; border-radius: 6px; font-family: inherit; font-size: 14px;
  padding: 9px 10px; outline: none; resize: vertical; box-sizing: border-box; }
.ir-in:focus, .ir-ta:focus { border-color: #5fc83b; }
.ir-yn-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.ir-yn-row .ir-lbl { margin-bottom: 0; flex: 1 1 auto; }
.ir-yn { background: #141414; color: #ccc; border: 1px solid #2a2a2a; border-radius: 5px;
  padding: 6px 18px; font-family: inherit; font-size: 12px; font-weight: bold; cursor: pointer; }
.ir-yn:hover { border-color: #5fc83b; }
.ir-yn.on { background: #5fc83b; color: #0d0d0d; border-color: #5fc83b; }
.ir-out-head { display: flex; align-items: center; gap: 10px; margin: 24px 0 8px;
  color: #888; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; }
.ir-out-head > span:first-child { flex: 1 1 auto; }
.ir-result { min-height: 220px; white-space: pre-wrap; word-break: break-word;
  overflow: auto; resize: vertical; line-height: 1.45; }
.ir-result b { font-weight: 700; }
.ir-copy { background: #5fc83b; color: #0d0d0d; border: none; border-radius: 4px;
  padding: 4px 14px; font-family: inherit; font-size: 11px; font-weight: bold; cursor: pointer;
  text-transform: none; letter-spacing: 0; }
.ir-copy:hover { background: #6fe048; }
.ir-btn { background: #141414; color: #ccc; border: 1px solid #2a2a2a; border-radius: 4px;
  padding: 4px 12px; font-family: inherit; font-size: 11px; cursor: pointer;
  text-transform: none; letter-spacing: 0; }
.ir-btn:hover { border-color: #5fc83b; }
.ir-status { color: #666; font-size: 12px; text-transform: none; letter-spacing: 0; }
.ir-status.live { color: #5fc83b; }
/* Light theme */
body.light-theme #app-ir { background: #ffffff; }
body.light-theme .ir-wrap { color: #1a1a1a; }
body.light-theme .ir-head, body.light-theme .ir-in, body.light-theme .ir-ta,
body.light-theme .ir-result { border-color: #d0d0d0; }
body.light-theme .ir-title { color: #1a1a1a; }
body.light-theme .ir-in, body.light-theme .ir-ta, body.light-theme .ir-result { color: #1a1a1a; }
body.light-theme .ir-copy, body.light-theme .ir-yn.on { background: #2a8010; color: #fff; border-color: #2a8010; }
body.light-theme .ir-yn, body.light-theme .ir-btn { background: #f0f0f0; color: #333; border-color: #ccc; }

/* ── PSG GEN button + options dropdown ──────────────────────────────── */
.psg-gen { margin-left: 6px; background: #5fc83b; color: #0d0d0d; border: none;
  border-radius: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 10px;
  font-weight: bold; padding: 2px 8px; cursor: pointer; vertical-align: middle; }
.psg-gen:hover { background: #6fe048; }
.psg-gen:disabled { opacity: .5; cursor: default; }
.psg-gen-dd { position: absolute; z-index: 60; left: 0; right: 0; top: 100%;
  margin-top: 3px; background: #141414; border: 1px solid #5fc83b; border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.65); padding: 4px;
  max-height: 168px; overflow-y: auto; overscroll-behavior: contain; }
.psg-gen-dd[hidden] { display: none; }
.psg-gen-item { display: flex; align-items: flex-start; gap: 8px; padding: 5px 6px; border-radius: 4px; }
.psg-gen-item:hover { background: #1d1d1d; }
.psg-gen-txt { flex: 1; color: #e8e8e8; font-size: 12px; line-height: 1.4; cursor: pointer; }
.psg-gen-txt:hover { color: #5fc83b; }
.psg-gen-star { background: none; border: none; color: #666; cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px; flex-shrink: 0; }
.psg-gen-star.on { color: #5fc83b; }
.psg-gen-msg { color: #888; font-size: 12px; padding: 6px; }
.psg-gen-msg.err { color: #e0623f; }
/* MODERN-only: hide the PSG GEN button + its dropdown in legacy. */
body.legacy-mode .psg-gen, body.legacy-mode .psg-gen-dd { display: none !important; }
body.light-theme .psg-gen-dd { background: #fff; border-color: #3a9020; }
body.light-theme .psg-gen-txt { color: #1a1a1a; }
body.light-theme .psg-gen-item:hover { background: #f0f0f0; }

/* ── Services / compound rows ───────────────────────────────────────── */
.svc-row      { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.svc-row:last-child { margin-bottom: 0; }
.svc-lbl      { font-size: 12px; color: #ccc; flex-shrink: 0; }
.svc-lbl.sn   { color: #f0c040; font-weight: bold; }
.svc-short    { width: 90px; }
.svc-text     { flex: 1; background: #141414; color: #e0e0e0; border: 1px solid #2a2a2a; border-radius: 4px; padding: 3px 6px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; outline: none; min-width: 0; }
.svc-text::placeholder { color: #3a3a3a; }
#eent_text { width: 100%; box-sizing: border-box; }
#temp { flex: 0 0 58px; }
#bpm  { flex: 0 0 58px; }
#resp { flex: 0 0 58px; }
.svc-textarea { width: 100%; background: #141414; color: #e0e0e0; border: 1px solid #2a2a2a; border-radius: 4px; padding: 3px 6px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; outline: none; resize: vertical; min-height: 28px; box-sizing: border-box; }
.svc-textarea::placeholder { color: #3a3a3a; }
.section-disabled { opacity: 0.4; pointer-events: none; }
.svc-cb       { width: 14px; height: 14px; cursor: pointer; accent-color: #5fc83b; flex-shrink: 0; }
.ref-btn      { background: #1a1a1a; color: #aaa; border: 1px solid #2a2a2a; border-radius: 4px; padding: 3px 8px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; cursor: pointer; flex-shrink: 0; user-select: none; }
.ref-btn.active { background: #3a1010; color: #f87171; border-color: #5a2020; }
.ref-hidden   { display: none; }

/* Visit buttons */
.visit-row  { display: flex; align-items: center; gap: 6px; }
.visit-btn  { background: #141414; color: #888; border: 1px solid #2a2a2a; border-radius: 4px; padding: 3px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; cursor: pointer; user-select: none; flex-shrink: 0; }
.visit-btn.active { background: #0d1a0a; color: #5fc83b; border-color: #5fc83b; font-weight: bold; }
.visit-btn.unset  { border-color: #f87171; color: #f87171; }
.visit-warn { font-size: 11px; color: #c07030; margin-left: 4px; display: none; }
.visit-warn.show { display: inline; }

/* Yes / No buttons */
.yn-row { display: flex; align-items: center; gap: 6px; }
.yn-btn { background: #141414; color: #888; border: 1px solid #2a2a2a; border-radius: 4px; padding: 3px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; cursor: pointer; user-select: none; flex-shrink: 0; }
.yn-btn.active-yes { background: #0d1a0a; color: #5fc83b; border-color: #5fc83b; font-weight: bold; }
.yn-btn.active-no  { background: #1a0a0a; color: #f87171; border-color: #5a2020; font-weight: bold; }
select.svc-text { cursor: pointer; }

/* ── Config-driven sections ───────────────────────────────────────────── */
.cfg-section            { display: flex; flex-direction: column; gap: 5px; padding: 6px 0 2px 0; border-top: 1px solid #1e1e1e; }
.cfg-section:first-child { border-top: none; }
.cfg-section-title { font-size: 11px; text-transform: uppercase; color: #5fc83b; margin-bottom: 2px; display: flex; align-items: center; gap: 4px; }
.protect-btn { background: none; border: none; cursor: pointer; font-size: 11px; padding: 0 2px; opacity: 0.4; line-height: 1; }
.protect-btn:hover { opacity: 1; }
.protect-btn.protect-active { opacity: 1; }
.protect-locked { color: #e8a040 !important; }
.section-highlight { background: #d4a800 !important; color: #0d0d0d !important; border-radius: 3px; padding: 0 4px; font-weight: bold; }
.recert-review { color: #d4a830; font-style: italic; }
.injby-row         { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.injby-cb-lbl      { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #ccc; cursor: pointer; }
.svc-textarea      { resize: vertical; min-height: 52px; line-height: 1.4; }

/* ── Pain grids ─────────────────────────────────────────────────────── */
.pain-grid { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 2px; }
.pain-cb-lbl { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #ccc; cursor: pointer; }
.pain-site-text { flex: 1; background: #141414; color: #e0e0e0; border: 1px solid #2a2a2a; border-radius: 4px; padding: 3px 6px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; outline: none; min-width: 0; margin-top: 3px; }
.pain-hidden-rows { display: flex; flex-direction: column; gap: 5px; }

/* ── Login overlay ──────────────────────────────────────────────────── */
#login-overlay { position: fixed; inset: 0; background: #0d0d0d; z-index: 9999; display: flex; align-items: center; justify-content: center; }
.login-box { background: #111; border: 1px solid #2a2a2a; border-radius: 6px; padding: 28px 32px; display: flex; flex-direction: column; gap: 12px; min-width: 220px; }
.login-box label { font-size: 12px; color: #666; text-transform: uppercase; }
.login-box input[type="password"] { background: #141414; color: #e0e0e0; border: 1px solid #2a2a2a; border-radius: 4px; padding: 6px 8px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; outline: none; }
.login-box button { background: #0d1a0a; color: #5fc83b; border: 1px solid #5fc83b; border-radius: 4px; padding: 6px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; cursor: pointer; }
.login-err { font-size: 11px; color: #f87171; display: none; }

/* ── Toolbar ─────────────────────────────────────────────────────────── */
.toolbar { display: flex; align-items: center; gap: 6px; padding: 4px 4px; background: #111; border-bottom: 1px solid #1e1e1e; flex-shrink: 0; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.toolbar::-webkit-scrollbar { display: none; }
.tb-btn  { background: #141414; color: #ccc; border: 1px solid #2a2a2a; border-radius: 4px; padding: 2px 10px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; cursor: pointer; user-select: none; flex-shrink: 0; }
.tb-btn:hover { background: #1e1e1e; color: #e0e0e0; }
.tb-sep  { width: 1px; height: 16px; background: #2a2a2a; margin: 0 2px; flex-shrink: 0; }
.tb-status { font-size: 11px; color: #555; margin-left: 4px; flex-shrink: 0; }

/* ── Hide web app toolbar in ext-mode (extension topbar takes over) ─── */
body.ext-mode .toolbar { display: none !important; }

/* ── Protect locked outline ──────────────────────────────────────────── */
.cfg-section.section-locked { outline: 2px solid #e8a040; border-radius: 5px; padding: 4px 6px; background: rgba(232,160,64,0.05); }
.svc-row.row-locked          { outline: 2px solid #e8a040; border-radius: 4px; padding: 2px 4px; background: rgba(232,160,64,0.05); }

/* ── Recert helper green highlight (legacy parity) ───────────────────── */
.recert-helper-highlight { outline: 2px solid #5fc83b; border-radius: 4px; background: rgba(95,200,59,0.08); }

/* ── Wound / Ulcer diagnoses-driven highlight ────────────────────────── */
.wnd-highlight { background: #b8860b; color: #0d0d0d !important; border-radius: 3px; padding: 0 4px; font-weight: bold; }

/* ── ADVDIR / DNR unanswered highlight ───────────────────────────────── */
.yn-unanswered .svc-lbl { background: #d4a800; color: #0d0d0d !important; border-radius: 3px; padding: 0 4px; font-weight: bold; }
.yn-unanswered .yn-btn  { outline: 2px solid #d4a800; }

/* ── PSG empty highlight ─────────────────────────────────────────────── */
.psg-empty .svc-lbl { background: #d4a800; color: #0d0d0d !important; border-radius: 3px; padding: 0 4px; font-weight: bold; }
.psg-empty #psgoal  { outline: 2px solid #d4a800; }

/* ── Required-field empty highlight (config-driven) ──────────────────── */
.req-empty .svc-lbl { background: #d4a800; color: #0d0d0d !important; border-radius: 3px; padding: 0 4px; font-weight: bold; }
.req-empty input    { outline: 2px solid #d4a800; }
.lbl-req-empty      { background: #d4a800; color: #0d0d0d !important; border-radius: 3px; padding: 0 4px; font-weight: bold; }
.input-req-empty    { outline: 2px solid #d4a800; }
.cfg-section-title.req-empty { background: #d4a800; color: #0d0d0d !important; border-radius: 3px; padding: 1px 6px; font-weight: bold; display: inline-flex; }

/* SN row shares a row with WEEKS — when sn_freq is empty, only the SN: label + sn_freq input should highlight (not WEEKS). */
.svc-row.req-empty:has(#sn_freq) .svc-lbl:not(.sn) {
  background: transparent !important; color: inherit !important;
  border: none !important; font-weight: inherit !important; padding: 0 !important;
}
.svc-row.req-empty:has(#sn_freq) #weeks { outline: none !important; }

/* ── Side input panel ────────────────────────────────────────────────── */
body { transition: padding-right 0.25s ease; }
body.panel-mode { padding-right: 320px; }

#side-panel {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: 320px;
  background: #1a1a1a;
  border-left: 2px solid #2a2a2a;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.panel-mode #side-panel { transform: translateX(0); }

#side-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  border-bottom: 1px solid #2a2a2a;
  flex-shrink: 0;
  font-size: 11px;
  text-transform: uppercase;
  color: #5fc83b;
  letter-spacing: 0.05em;
}
#side-panel-close {
  background: none;
  border: none;
  color: #888;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 2px 4px;
}
#side-panel-close:hover { color: #ccc; }

/* Controls panel inside side panel takes full height */
#side-panel .controls-panel {
  width: 100% !important;
  flex: 1;
  overflow-y: auto;
}

/* Pull tab fixed to right edge (shown when panel is closed) */
#panel-tab {
  position: fixed;
  right: 0; top: 50%;
  transform: translateY(-50%) rotate(0deg);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  background: #252525;
  border: 1px solid #3a3a3a;
  border-right: none;
  border-radius: 4px 0 0 4px;
  color: #5fc83b;
  font-size: 11px;
  padding: 10px 5px;
  cursor: pointer;
  z-index: 499;
  user-select: none;
  letter-spacing: 0.05em;
}
#panel-tab:hover { background: #2d2d2d; color: #7fe050; }
body.panel-mode #panel-tab { display: none; }

/* ── Extension iframe mode (inputs only, no outputs) ─────────────────── */
body.ext-mode .diag-col         { display: none !important; }
body.ext-mode .top-divider      { display: none !important; }
body.ext-mode .icd-col          { width: 100% !important; flex: 1; min-width: 0; }
body.ext-mode .orders-panel     { display: none !important; }
body.ext-mode .main-divider     { display: none !important; }
body.ext-mode .main-row         { overflow-y: auto; min-width: 0; }
body.ext-mode .controls-panel   { width: 100% !important; overflow-y: visible; min-width: 0; }
body.ext-mode #panel-tab        { display: none !important; }
body.ext-mode #panel-toggle-btn { display: none !important; }
body.ext-mode                   { min-width: 0; }
body.ext-mode .top-bar          { min-width: 0; }
body.ext-mode .svc-row          { min-width: 0; }

/* ── NSG bar ──────────────────────────────────────────────────────────────── */
.nsg-bar    { display: flex; align-items: baseline; gap: 10px; padding: 5px 12px 6px; border-top: 2px solid #1e1e1e; flex-shrink: 0; }
.nsg-label  { font-size: 0.7em; font-weight: 600; color: #666; white-space: nowrap; }
.nsg-output { flex: 1; font-size: 0.85em; color: #ccc; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.nsg-output::-webkit-scrollbar { display: none; }
.nsg-copy { background: #5fc83b; color: #0d0d0d; border: none; border-radius: 4px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.7em; font-weight: 700; padding: 3px 8px; cursor: pointer; white-space: nowrap;
  flex-shrink: 0; letter-spacing: .5px; }
.nsg-copy:hover { background: #6fe048; }
/* MODERN-only: in legacy, render NSG/CS1 as the old plain labels (not buttons). */
body.legacy-mode .nsg-copy { background: none; color: #666; border: none; padding: 0;
  font-size: 0.7em; font-weight: 600; letter-spacing: 0; cursor: default; pointer-events: none; }
body.ext-mode .nsg-bar { display: none !important; }

/* ── Light theme ──────────────────────────────────────────────────────────── */
body.light-theme { background: #f5f5f5; color: #1a1a1a; }
body.light-theme ::placeholder { color: #aaaaaa; }
body.light-theme .toolbar { background: #f0f0f0; border-bottom-color: #d0d0d0; }
body.light-theme .tb-btn { background: #e8e8e8; color: #333; border-color: #cccccc; }
body.light-theme .tb-btn:hover { background: #ddd; color: #1a1a1a; }
body.light-theme .tb-sep { background: #cccccc; }
body.light-theme .tb-status { color: #999; }
body.light-theme #theme-btn { color: #5fc83b; border-color: #5fc83b; }
body.light-theme .top-bar { border-bottom-color: #d0d0d0; }
body.light-theme .top-divider { background: #d0d0d0; }
body.light-theme .bar-label { color: #999; }
body.light-theme #highlight-overlay { background: #ffffff; color: #1a1a1a; border-color: #cccccc; }
body.light-theme #input { caret-color: #1a1a1a; border-color: #cccccc; }
body.light-theme .output { background: #ffffff; border-color: #cccccc; }
body.light-theme .divider { background: #d0d0d0; }
body.light-theme .divider:hover { background: #bbbbbb; }
body.light-theme .orders-label { color: #999; }
body.light-theme .tab-btn { background: #e8e8e8; color: #888; border-color: #cccccc; }
body.light-theme .tab-btn.active { background: #f0fff0; color: #2a8010; border-color: #3a9020; }
body.light-theme .cfg-section { border-top-color: #e0e0e0; }
body.light-theme .svc-lbl { color: #444; }
body.light-theme .injby-cb-lbl { color: #444; }
body.light-theme .pain-cb-lbl { color: #444; }
body.light-theme .svc-text { background: #ffffff; color: #1a1a1a; border-color: #cccccc; }
body.light-theme .svc-textarea { background: #ffffff; color: #1a1a1a; border-color: #cccccc; }
body.light-theme .pain-site-text { background: #ffffff; color: #1a1a1a; border-color: #cccccc; }
body.light-theme .ref-btn { background: #e8e8e8; color: #555; border-color: #cccccc; }
body.light-theme .ref-btn.active { background: #fee2e2; color: #b91c1c; border-color: #dc2626; }
body.light-theme .visit-btn { background: #e8e8e8; color: #777; border-color: #cccccc; }
body.light-theme .visit-btn.unset { border-color: #dc2626; color: #dc2626; }
body.light-theme .yn-btn { background: #e8e8e8; color: #777; border-color: #cccccc; }
body.light-theme #login-overlay { background: #f5f5f5; }
body.light-theme .login-box { background: #ffffff; border-color: #cccccc; }
body.light-theme .login-box label { color: #888; }
body.light-theme .login-box input[type="password"] { background: #f8f8f8; color: #1a1a1a; border-color: #cccccc; }
body.light-theme .nsg-bar { border-top-color: #d0d0d0; }
body.light-theme .nsg-label { color: #888; }
body.light-theme .nsg-output { color: #333; }
body.light-theme .nsg-copy { background: #2a8010; color: #fff; }
body.legacy-mode.light-theme .nsg-copy { background: none; color: #888; }
body.light-theme #side-panel { background: #f0f0f0; border-left-color: #d0d0d0; }
body.light-theme #side-panel-header { border-bottom-color: #d0d0d0; }
body.light-theme #side-panel-close { color: #888; }
body.light-theme #side-panel-close:hover { color: #333; }
body.light-theme #panel-tab { background: #e0e0e0; border-color: #cccccc; }

/* ── Legacy two-column layout ─────────────────────────────────────────── */
/* In legacy mode, the THEME and LEGACY buttons get the same neutral styling as the others in the stack */
body.legacy-mode #legacy-btn,
body.legacy-mode #theme-btn {
  color: #ccc !important;
  border-color: #2a2a2a !important;
}
body.light-theme.legacy-mode #legacy-btn,
body.light-theme.legacy-mode #theme-btn {
  color: #555 !important;
  border-color: #cccccc !important;
}

body.legacy-mode .controls-panel {
  width: 688px !important;
  flex-direction: row;
  gap: 4px;
  overflow-y: hidden;
  align-items: stretch;
}

/* Phase 3: Calibri (legacy POCPRO font) — applied EVERYWHERE in legacy mode */
body.legacy-mode,
body.legacy-mode * {
  font-family: 'Calibri', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}

.legacy-col {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.legacy-resizer {
  flex: 0 0 6px;
  cursor: col-resize;
  background: linear-gradient(to right, transparent, #2a2a2a 50%, transparent);
  position: relative;
}
.legacy-resizer:hover { background: linear-gradient(to right, transparent, #5fc83b 50%, transparent); }
.legacy-resizer::before {
  content: '⋮';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #5fc83b;
  font-size: 16px;
  line-height: 1;
  pointer-events: none;
}

.legacy-side-pair {
  display: flex;
  gap: 4px;
}
.legacy-side-pair .cfg-section {
  flex: 1;
  min-width: 0;
}

.legacy-side-pair .hosp-risk-item {
  margin-bottom: 5px;
}

/* Phase 1/3: font bump for legacy mode — inputs at 13px, labels at 12px */
body.legacy-mode .controls-panel .svc-text,
body.legacy-mode .controls-panel select.svc-text,
body.legacy-mode .controls-panel .svc-textarea,
body.legacy-mode .controls-panel .pain-site-text { font-size: 13px; }

body.legacy-mode .controls-panel .svc-lbl,
body.legacy-mode .controls-panel .injby-cb-lbl,
body.legacy-mode .controls-panel .pain-cb-lbl { font-size: 12px; }

body.legacy-mode .controls-panel .cfg-section-title,
body.legacy-mode .controls-panel .ref-btn,
body.legacy-mode .controls-panel .yn-btn,
body.legacy-mode .controls-panel .visit-btn,
body.legacy-mode .controls-panel .protect-btn,
body.legacy-mode .controls-panel .hosp-risk-item span { font-size: 12px; }

body.legacy-mode .controls-panel .svc-cb { width: 16px; height: 16px; }

/* Phase 2: LEFT col continuous stack — hide section titles, tighten gaps */
body.legacy-mode #legacy-col1 .cfg-section {
  padding: 2px 0;
  border-top: none;
  gap: 4px;
}
body.legacy-mode #legacy-col1 > .cfg-section > .cfg-section-title,
body.legacy-mode #legacy-col1 .cfg-section .cfg-section-title { display: none; }
body.legacy-mode #legacy-col1 { gap: 4px; }

/* Phase 2: narrow vitals fields so BP/Temp/Pulse/Resp fit on one row, font -1pt, nowrap */
body.legacy-mode .controls-panel #mmhg { flex: 0 0 58px; min-width: 0; }
body.legacy-mode .controls-panel #temp { flex: 0 0 48px; min-width: 0; }
body.legacy-mode .controls-panel #bpm,
body.legacy-mode .controls-panel #resp { flex: 0 0 36px; min-width: 0; }
body.legacy-mode .controls-panel .svc-row:has(#mmhg),
body.legacy-mode .controls-panel .svc-row:has(#temp) { flex-wrap: nowrap; gap: 3px; }
body.legacy-mode .controls-panel .svc-row:has(#mmhg) .svc-lbl,
body.legacy-mode .controls-panel .svc-row:has(#temp) .svc-lbl { font-size: 12px; }
body.legacy-mode .controls-panel #mmhg,
body.legacy-mode .controls-panel #temp,
body.legacy-mode .controls-panel #bpm,
body.legacy-mode .controls-panel #resp { font-size: 12px; }
body.legacy-mode .controls-panel #lbs,
body.legacy-mode .controls-panel #in { flex: 0 0 60px; min-width: 0; }

/* Phase 3: BT + INJ side-by-side, labels stacked above */
body.legacy-mode .legacy-btinj-pair {
  display: flex;
  gap: 8px;
  width: 100%;
}
body.legacy-mode .legacy-btinj-pair .svc-row.legacy-stack {
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  min-width: 0;
}
body.legacy-mode .legacy-btinj-pair .svc-row.legacy-stack .svc-text,
body.legacy-mode .legacy-btinj-pair .svc-row.legacy-stack select.svc-text {
  width: 100%;
  flex: 0 0 auto;
}

/* Phase 3: psych / pain-relief restructure — grid above, label+textarea inline */
body.legacy-mode .legacy-lbl-input-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}
body.legacy-mode .legacy-lbl-input-row .svc-lbl { flex: 0 0 auto; padding-top: 3px; }
body.legacy-mode .legacy-lbl-input-row .svc-textarea,
body.legacy-mode .legacy-lbl-input-row .svc-text { flex: 1; min-height: 28px; }

/* Phase 3: 2D grid layout (arrow-key nav supported via JS) */
body.legacy-mode .legacy-grid-nav {
  display: grid;
  grid-template-columns: repeat(var(--legacy-cols, 2), 1fr);
  gap: 3px 10px;
  width: 100%;
}
body.legacy-mode .legacy-grid-nav .pain-cb-lbl,
body.legacy-mode .legacy-grid-nav .injby-cb-lbl { margin: 0; }
body.legacy-mode .legacy-grid-nav input:focus { outline: 2px solid #5fc83b; outline-offset: 1px; }

/* Phase 3: label-as-protect-button for Skin Conditions + Psychosocial Status */
body.legacy-mode .legacy-label-lock {
  cursor: pointer;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  padding: 1px 6px;
  user-select: none;
}
body.legacy-mode .legacy-label-lock:hover { background: #222; }
body.legacy-mode .legacy-label-lock.legacy-locked { border-color: #e8a040; color: #e8a040; }
body.legacy-mode .controls-panel .protect-btn[data-protect="psych"],
body.legacy-mode .controls-panel .protect-btn[data-protect="integ"],
body.legacy-mode .controls-panel .protect-btn[data-protect="pcode"],
body.legacy-mode .controls-panel .protect-btn[data-protect="lang"],
body.legacy-mode .controls-panel .protect-btn[data-protect="eent_text"],
body.legacy-mode .controls-panel .protect-btn[data-protect="frisk"],
body.legacy-mode .controls-panel .protect-btn[data-protect="home_health"],
body.legacy-mode .controls-panel .protect-btn[data-protect="rn"],
body.legacy-mode .controls-panel .protect-btn[data-protect="m1100"],
body.legacy-mode .controls-panel .protect-btn[data-protect="m1400"],
body.legacy-mode .controls-panel .protect-btn[data-protect="m1610"],
body.legacy-mode .controls-panel .protect-btn[data-protect="hosp_risks"],
body.legacy-mode .controls-panel .protect-btn[data-protect="ep"],
body.legacy-mode .controls-panel .protect-btn[data-protect="inad"],
body.legacy-mode .controls-panel .protect-btn[data-protect="sn"],
body.legacy-mode .controls-panel .protect-btn[data-protect="advdir"],
body.legacy-mode .controls-panel .protect-btn[data-protect="dnr"] { display: none; }

/* Phase 5: keep specific section titles UPPERCASE while everything else is title-case */
body.legacy-mode .cfg-section-title[data-section="Wound"],
body.legacy-mode .cfg-section-title[data-section="Ulcer"],
body.legacy-mode .cfg-section-title[data-section="IV"],
body.legacy-mode .cfg-section-title[data-section="Ostomies"] {
  text-transform: uppercase !important;
}

/* Phase 5: Blood Sugar injby — keep "DM-Injections by:" label, make 2x2 grid */
body.legacy-mode .controls-panel .svc-row:has(#injby_Patient) { flex-direction: column; align-items: flex-start; }
body.legacy-mode .controls-panel .svc-row:has(#injby_Patient) > .svc-lbl {
  align-self: stretch;
  text-align: center;
  width: 100%;
}
body.legacy-mode .controls-panel .svc-row:has(#injby_Patient) .injby-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  width: 100%;
}

/* Phase 5: Uppercase OSTOMY checkbox option labels in legacy */
body.legacy-mode .cfg-section:has(.cfg-section-title[data-section="Ostomies"]) .pain-cb-lbl {
  text-transform: uppercase;
}

/* Phase 5: Hosp Risks + EP — checkbox labels black/white per theme (was grey) */
body.legacy-mode .legacy-side-pair .hosp-risk-item span,
body.legacy-mode .legacy-side-pair .ep-risk-cb-lbl span { color: #f0f0f0 !important; }
body.light-theme.legacy-mode .legacy-side-pair .hosp-risk-item span,
body.light-theme.legacy-mode .legacy-side-pair .ep-risk-cb-lbl span { color: #000 !important; }

/* yn-btn active states — YES = green, NO = red. Applied consistently across both layouts & themes. */
.yn-btn.active-yes,
.yn-btn.active { background: #1a3a1a; color: #5fc83b; border-color: #5fc83b; }
.yn-btn.active-no { background: #3a1a1a; color: #f87171; border-color: #f87171; }
body.light-theme .yn-btn.active-yes,
body.light-theme .yn-btn.active { background: #d8f0d0; color: #2a7020; border-color: #5fc83b; }
body.light-theme .yn-btn.active-no { background: #fbe5e5; color: #b91c1c; border-color: #dc2626; }

/* Light theme: visit-btn (SOC/RECERT/ROC) active state */
body.light-theme .visit-btn.active { background: #d8f0d0; color: #2a7020; border-color: #5fc83b; font-weight: bold; }

/* Phase 5/6: Collapse top-bar; LEFT side = vertical stack of [ICD area, LEFT clinical col] */
body.legacy-mode .top-bar { display: none; }
body.legacy-mode .legacy-leftstack {
  display: flex;
  flex-direction: column;
  flex: 0 0 366px;
  min-width: 0;
  gap: 6px;
  border-right: 1px solid #2a2a2a;
  padding-right: 0;
  margin-right: 2px;
}
body.legacy-mode .legacy-leftstack > #icd-col {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 0;
  padding-bottom: 6px;
  border-bottom: 1px solid #2a2a2a;
}
body.legacy-mode .legacy-leftstack > .legacy-col { flex: 1 1 auto; min-height: 0; }
body.legacy-mode .legacy-leftstack > #icd-col .legacy-icd-row { height: 100%; gap: 4px; }
body.legacy-mode .legacy-leftstack > #icd-col .legacy-icd-row .input-wrapper { flex: 0 0 80px; }
/* ICD text smaller in legacy */
body.legacy-mode #input,
body.legacy-mode #highlight-overlay { font-size: 12px !important; }
/* Invalid ICD code: keep red highlight, but text stays dark */
body.legacy-mode #highlight-overlay .invalid { color: inherit !important; }
body.legacy-mode .legacy-leftstack > #icd-col .legacy-icd-row .legacy-icd-extras { flex: 1 1 auto; min-width: 0; }

/* OASIS / HOME HEALTH / NURSE NAME (+ ROC fields) — grid layout: label auto-width, input fills rest */
body.legacy-mode .legacy-icd-extras { width: 100%; min-width: 0; }
body.legacy-mode .legacy-icd-extras .svc-row {
  display: grid !important;
  grid-template-columns: max-content minmax(110px, 1fr) !important;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 0;
}
body.legacy-mode .legacy-icd-extras .svc-row > .svc-lbl {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 3px;
  padding: 1px 4px;
  user-select: none;
  white-space: nowrap;
  font-size: 11px !important;
  justify-self: start;
}
body.legacy-mode .legacy-icd-extras .svc-row > input.svc-text,
body.legacy-mode .legacy-icd-extras .svc-row > select.svc-text {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: none !important;
  box-sizing: border-box !important;
  display: block !important;
}
body.light-theme.legacy-mode .legacy-icd-extras .svc-row > .svc-lbl {
  background: #e8e8e8;
  border-color: #cccccc;
  color: #222;
}

/* Disable resize bar in legacy mode — leftstack matches Vitals row width (BP→Resp) */
body.legacy-mode .legacy-leftstack { flex: 0 0 366px !important; }

/* Phase 5: ADVDIR/DNR pair — label-lock LEFT, checkbox immediately RIGHT (no margin push) */
body.legacy-mode .legacy-yn-pair { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-start; }
body.legacy-mode .legacy-yn-pair .legacy-label-lock { flex: 0 0 auto; }
body.legacy-mode .legacy-yn-pair .svc-cb { flex: 0 0 auto; margin: 0; }

/* Phase 5: Middle column section title styling — title-case, centered, not green */
body.legacy-mode #legacy-col2 .cfg-section-title,
body.legacy-mode .legacy-side-pair .cfg-section-title {
  text-transform: none !important;
  text-align: center;
  justify-content: center;
  color: #ccc !important;
  font-size: 13px;
}
/* HR + EP titles shrink to content width, LEFT-aligned and stuck so they don't move on resize */
body.legacy-mode .legacy-side-pair .cfg-section-title.legacy-label-lock {
  align-self: flex-start;
  width: max-content;
  margin: 0 0 2px 0;
}
body.light-theme.legacy-mode #legacy-col2 .cfg-section-title,
body.light-theme.legacy-mode .legacy-side-pair .cfg-section-title {
  color: #333 !important;
}
/* HR/EP titles when section is empty: yellow bg + RED text (matches M1100/Fall Risk/Language) */
body.legacy-mode .legacy-side-pair .cfg-section-title.req-empty,
body.legacy-mode .legacy-side-pair .cfg-section-title.legacy-label-lock.req-empty,
body.light-theme.legacy-mode .legacy-side-pair .cfg-section-title.req-empty,
body.light-theme.legacy-mode .legacy-side-pair .cfg-section-title.legacy-label-lock.req-empty {
  background: #ffff00 !important;
  color: #ff0000 !important;
  border-color: #ff0000 !important;
}

/* Phase 5: Hide ROC Info section entirely (its fields moved to icd-extras) */
body.legacy-mode .cfg-section:has(.cfg-section-title[data-section="ROC Info"]) { display: none; }

/* Phase 5: Items 2-col grid (PACE|O2TANK / ADVDIR|DNR / AICD|VAD / CPAP|BIPAP / TPN|—) */
body.legacy-mode .legacy-phantom .pain-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
}

/* Phase 5: Hospital Risks + EP — same internal row rhythm so they read across */
/* Hospital Risks + Emergency Preparedness — flex layout with text-level truncation (not section overflow) */
body.legacy-mode .legacy-side-pair {
  display: flex !important;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}
body.legacy-mode .legacy-side-pair > .cfg-section { min-width: 0; }
body.legacy-mode .legacy-side-pair > .cfg-section:nth-child(1) { flex: 0 0 30% !important; }
body.legacy-mode .legacy-side-pair > .cfg-section:nth-child(2) { flex: 1 1 0 !important; }
/* Truncate long item text so EP can't push out of its column */
body.legacy-mode .legacy-side-pair .ep-risk-cb-lbl span,
body.legacy-mode .legacy-side-pair .hosp-risk-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  display: block;
}
body.legacy-mode .legacy-side-pair .ep-risk-cb-lbl,
body.legacy-mode .legacy-side-pair .hosp-risk-item { min-width: 0; }
/* EP checkbox rows stretch to fill the section width (no empty right side) */
body.legacy-mode .legacy-side-pair .cfg-section:has(.cfg-section-title[data-section="Emergency Preparedness"]) .pain-cb-lbl,
body.legacy-mode .legacy-side-pair .cfg-section:has(.cfg-section-title[data-section="Emergency Preparedness"]) .ep-risk-cb-lbl { width: 100%; }

/* Services section: squeeze row gaps so checks/labels/buttons/inputs sit tighter */
body.legacy-mode .cfg-section:has(.cfg-section-title[data-section="Services"]) .svc-row { gap: 3px !important; }

/* M Codes: M1100 / M1400 = 1/3 of M1610's width. M1610 stays at 38% of its row. */
body.legacy-mode .controls-panel #m1100,
body.legacy-mode .controls-panel #m1400 { flex: 0 0 12.67% !important; width: 12.67% !important; }
body.legacy-mode .controls-panel #m1610 { flex: 0 0 38% !important; width: 38% !important; }

/* M Codes section: tight vertical spacing to match OASIS DATE rows in icd-extras */
body.legacy-mode .cfg-section:has(.cfg-section-title[data-section="M Codes"]) { gap: 1px !important; }
body.legacy-mode .cfg-section:has(.cfg-section-title[data-section="M Codes"]) > .svc-row { padding: 0 !important; }

/* Hide ICD10 top-divider so its column can't be resized in non-legacy */
#top-divider { display: none !important; }
body.legacy-mode .legacy-side-pair .hosp-risk-item,
body.legacy-mode .legacy-side-pair .ep-risk-cb-lbl,
body.legacy-mode .legacy-side-pair .pain-cb-lbl {
  height: 19px;
  align-items: center;
  margin: 0;
  padding: 0 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.legacy-mode .legacy-side-pair .cfg-section > .svc-row { gap: 2px !important; }
body.legacy-mode .legacy-side-pair .hosp-risk-item span,
body.legacy-mode .legacy-side-pair .ep-risk-cb-lbl span {
  font-size: 11px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Match the "Toggle 6-9" / "Toggle Synergy Defaults" labels to the items below them */
body.legacy-mode .legacy-side-pair .pain-cb-lbl { font-size: 11px !important; }
body.legacy-mode .legacy-side-pair .cfg-section > .svc-row { gap: 2px !important; flex-wrap: nowrap; }
body.legacy-mode .legacy-side-pair .ep-grid,
body.legacy-mode .legacy-side-pair .risk-factor-grid { flex-wrap: nowrap; }

/* EP: hide "Rep:" label (label is implied by the placeholder) */
body.legacy-mode .controls-panel .svc-lbl:has(+ #rep) { display: none; }

/* hosp_nine textarea → single-line input style matching EP's Rep input — fixed, slim */
body.legacy-mode #hosp_nine {
  resize: none !important;
  height: 24px !important;
  min-height: 24px !important;
  max-height: 24px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  padding: 3px 6px !important;
  width: 80px !important;
  max-width: 80px !important;
  flex: 0 0 80px !important;
  box-sizing: border-box !important;
  display: block;
}

/* Light theme override for legacy-label-lock + button styles */
body.light-theme.legacy-mode .legacy-label-lock {
  background: #e8e8e8;
  border-color: #cccccc;
  color: #333;
}
body.light-theme.legacy-mode .legacy-label-lock:hover { background: #d8d8d8; }
body.light-theme.legacy-mode .legacy-label-lock.legacy-locked { border-color: #c47020; color: #c47020; }

/* Light-theme indicator for THEME button (matches LEGACY button pattern) */
body.light-theme #theme-btn { color: #5fc83b; border-color: #5fc83b; }

/* Legacy highlight: match original Pango "background=yellow foreground=red" markup */
body.legacy-mode .yn-unanswered .svc-lbl,
body.legacy-mode .psg-empty .svc-lbl,
body.legacy-mode .req-empty .svc-lbl,
body.legacy-mode .lbl-req-empty,
body.legacy-mode .cfg-section-title.req-empty,
body.legacy-mode .legacy-label-lock.req-empty,
body.legacy-mode .cfg-section-title.legacy-label-lock.req-empty {
  background: #ffff00 !important;
  color: #ff0000 !important;
  font-weight: normal !important;
  border: 1px solid #ff0000 !important;
  border-radius: 3px !important;
}

/* Z-code highlight in legacy ICD10 input: yellow bg + black text (readable in both themes) */
body.legacy-mode #highlight-overlay .zcode {
  color: #000000 !important;
  background: #ffff00 !important;
}

/* Legacy: Psychosocial Status (#psych) + Pain Relief (#rrmr) textareas → PSG-style single line */
body.legacy-mode .controls-panel #psych,
body.legacy-mode .controls-panel #rrmr {
  resize: none !important;
  min-height: 24px;
  height: 24px;
  line-height: 1.4;
}

/* Phase 3: ICD10 vertical toolbar stack + extras column (legacy-mode only) */
body.legacy-mode .top-bar { height: 280px; }
body.legacy-mode .icd-col { flex: 0 0 50%; min-width: 0; }
body.legacy-mode .legacy-icd-row {
  display: flex;
  gap: 6px;
  flex: 1;
  min-height: 0;
}
body.legacy-mode .legacy-icd-row .input-wrapper { flex: 1; min-width: 0; }
body.legacy-mode .legacy-icd-row .legacy-icd-extras { flex: 3; min-width: 0; }
body.legacy-mode .icd-col .bar-label { display: none; }
body.legacy-mode .legacy-icd-toolbar {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 0 0 auto;
  width: 50px;
  height: 100%;
}
body.legacy-mode .legacy-icd-toolbar .tb-btn {
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  text-align: center;
  padding: 0 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px !important;
}

body.legacy-mode .legacy-icd-extras {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
body.legacy-mode .legacy-icd-extras .svc-row { padding: 0 !important; }
body.legacy-mode .legacy-icd-visits {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 2px 0;
}
body.legacy-mode .legacy-icd-extras .svc-row { gap: 4px; }
body.legacy-mode .legacy-icd-extras .svc-row .svc-text,
body.legacy-mode .legacy-icd-extras .svc-row select.svc-text { flex: 1; min-width: 0; }

/* Style visit-btn as checkbox + label in legacy mode */
body.legacy-mode .legacy-icd-visits .visit-btn {
  background: transparent !important;
  border: none !important;
  padding: 1px 2px !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #ccc !important;
  cursor: pointer;
  font-weight: normal !important;
}
body.legacy-mode .legacy-icd-visits .visit-btn::before {
  content: '';
  display: inline-block;
  width: 14px; height: 14px;
  border: 1px solid #888;
  border-radius: 2px;
  background: #141414;
  flex-shrink: 0;
  box-sizing: border-box;
}
body.legacy-mode .legacy-icd-visits .visit-btn.active::before {
  content: '✓';
  background: #5fc83b;
  color: #0d0d0d;
  font-size: 11px;
  line-height: 12px;
  text-align: center;
  border-color: #5fc83b;
}
/* Hide the triangle warning icon in legacy; replaced by a red box around the visit checks */
body.legacy-mode .legacy-icd-visits .visit-warn { display: none !important; }
body.legacy-mode .legacy-icd-visits:has(.visit-btn.unset) {
  border: 2px solid #dc2626;
  border-radius: 4px;
  padding: 2px 6px !important;
  width: fit-content;
  box-sizing: border-box;
}

/* Light theme: dark labels on light checkbox box */
body.light-theme.legacy-mode .legacy-icd-visits .visit-btn { color: #222 !important; }
body.light-theme.legacy-mode .legacy-icd-visits .visit-btn::before {
  background: #ffffff;
  border-color: #888;
}
body.light-theme.legacy-mode .legacy-icd-visits .visit-btn.active::before {
  background: #5fc83b;
  color: #0d0d0d;
  border-color: #5fc83b;
}

/* ROC fields: hidden by default, shown when ROC active; yellow highlight when empty */
body.legacy-mode .legacy-roc-fields { display: none; flex-direction: column; gap: 1px; }
body.legacy-mode .legacy-icd-extras.roc-active .legacy-roc-fields { display: flex; }

/* RECERT (legacy only): hide OASIS DATE row + Emergency Preparedness section */
body.legacy-mode.recert-active .legacy-icd-extras .svc-row:has(#odate) { display: none !important; }
body.legacy-mode.recert-active .cfg-section:has(.cfg-section-title[data-section="Emergency Preparedness"]) { display: none !important; }
/* When EP is hidden inside the legacy-side-pair, Hospital Risks fills the row */
body.legacy-mode.recert-active .legacy-side-pair > .cfg-section:nth-child(1) { flex: 1 1 0 !important; }
body.legacy-mode .roc-empty .svc-lbl {
  background: #ffff00 !important;
  color: #ff0000 !important;
  font-weight: normal !important;
  border: 1px solid #ff0000 !important;
  border-radius: 3px !important;
  padding: 1px 4px !important;
}

/* Blood Sugar (and other section-highlight triggers) — match yellow+red+border in legacy */
body.legacy-mode .section-highlight {
  background: #ffff00 !important;
  color: #ff0000 !important;
  border: 1px solid #ff0000 !important;
  border-radius: 3px !important;
  font-weight: normal !important;
}

/* HR/EP/BS titles when empty/triggered — bulletproof, must beat #legacy-col2 specificity */
body.legacy-mode #legacy-col2 .cfg-section-title.req-empty,
body.legacy-mode #legacy-col2 .cfg-section-title.legacy-label-lock.req-empty,
body.legacy-mode #legacy-col2 .cfg-section-title.section-highlight,
body.legacy-mode #legacy-col2 .cfg-section-title.legacy-label-lock.section-highlight,
body.legacy-mode #legacy-col2 .legacy-side-pair .cfg-section-title.req-empty,
body.legacy-mode #legacy-col2 .legacy-side-pair .cfg-section-title.legacy-label-lock.req-empty,
body.legacy-mode #legacy-col2 .legacy-side-pair .cfg-section-title.section-highlight,
body.light-theme.legacy-mode #legacy-col2 .cfg-section-title.req-empty,
body.light-theme.legacy-mode #legacy-col2 .cfg-section-title.legacy-label-lock.req-empty,
body.light-theme.legacy-mode #legacy-col2 .cfg-section-title.section-highlight,
body.light-theme.legacy-mode #legacy-col2 .cfg-section-title.legacy-label-lock.section-highlight,
body.light-theme.legacy-mode #legacy-col2 .legacy-side-pair .cfg-section-title.req-empty,
body.light-theme.legacy-mode #legacy-col2 .legacy-side-pair .cfg-section-title.legacy-label-lock.req-empty,
body.light-theme.legacy-mode #legacy-col2 .legacy-side-pair .cfg-section-title.section-highlight {
  color: #ff0000 !important;
  background: #ffff00 !important;
  border: 1px solid #ff0000 !important;
}

/* LEGACY only: remove yellow input outline; the label highlight is enough */
body.legacy-mode .req-empty input,
body.legacy-mode .input-req-empty,
body.legacy-mode .roc-empty input,
body.legacy-mode .psg-empty #psgoal,
body.legacy-mode .psg-empty input { outline: none !important; }

/* Hide LEFT col scrollbar (still scrollable, just no visible bar) */
body.legacy-mode #legacy-col1 { scrollbar-width: none; }
body.legacy-mode #legacy-col1::-webkit-scrollbar { display: none; }

/* Hide vertical scrollbars across the app (both layouts) — keep scrollability */
.controls-panel, .output, .legacy-col, #side-panel, .main-row, #out-diagnoses { scrollbar-width: none; }
.controls-panel::-webkit-scrollbar,
.output::-webkit-scrollbar,
.legacy-col::-webkit-scrollbar,
#side-panel::-webkit-scrollbar,
.main-row::-webkit-scrollbar,
#out-diagnoses::-webkit-scrollbar { display: none; }

/* Hide entire top toolbar in legacy (its buttons moved into ICD stack) */
body.legacy-mode .toolbar { display: none !important; }

/* Hide the resize divider between controls and orders panels in legacy */
body.legacy-mode .divider { display: none !important; }

/* Hide the now-empty separators that surround the moved buttons */
body.legacy-mode .toolbar .tb-sep { display: none; }

/* Legacy: no bold labels anywhere in the controls panel */
body.legacy-mode .controls-panel .svc-lbl,
body.legacy-mode .controls-panel .svc-lbl.sn,
body.legacy-mode .controls-panel .cfg-section-title,
body.legacy-mode .controls-panel .pain-cb-lbl,
body.legacy-mode .controls-panel .injby-cb-lbl,
body.legacy-mode .controls-panel .legacy-label-lock { font-weight: normal !important; }

/* Non-legacy: hide section titles (SERVICES, ROC INFO, etc.) but keep protect-btn children visible.
   Collapse the title's text via font-size:0 + zero padding/margin; restore size for child elements. */
body:not(.legacy-mode) .cfg-section-title {
  font-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0;
  line-height: 0;
}
body:not(.legacy-mode) .cfg-section-title > * {
  font-size: 11px;
  line-height: 1;
}
/* Sleep/Rest exception — show the title as a plain svc-lbl-style label ("SLEEP/REST:") */
body:not(.legacy-mode) .cfg-section-title[data-section="Sleep/Rest"] {
  font-size: 12px !important;
  color: #ccc !important;
  text-transform: uppercase !important;
  background: transparent;
  border: none;
  padding: 0 !important;
  margin: 0 0 2px !important;
  width: auto;
  align-self: flex-start;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: normal;
  gap: 0 !important;  /* kill the flex-gap that was pushing ":" away from "SLEEP/REST" */
  display: inline-block !important;
}
body:not(.legacy-mode) .cfg-section-title[data-section="Sleep/Rest"]::after { content: ':'; }
body.light-theme:not(.legacy-mode) .cfg-section-title[data-section="Sleep/Rest"] {
  color: #333 !important;
}

/* Modern vitals: reflowable rows of [label+input] pairs that stay together on wrap.
   Row 1: [BP, TEMP]; Row 2: [PULSE, RESP] (set up structurally by _applyModernVitals).
   The .vital-pair span keeps the label adjacent to its input even when the row wraps. */
body:not(.legacy-mode) .controls-panel .svc-row:has(#mmhg),
body:not(.legacy-mode) .controls-panel .svc-row:has(#bpm) {
  flex-wrap: wrap;
  gap: 4px 8px;
}
body:not(.legacy-mode) .controls-panel .vital-pair {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
body:not(.legacy-mode) .controls-panel .vital-pair > .svc-text {
  flex: 0 1 80px;
  min-width: 60px;
  max-width: 120px;
}
body:not(.legacy-mode) .controls-panel #lbs,
body:not(.legacy-mode) .controls-panel #in { flex: 0 0 80px; min-width: 0; }

/* Non-legacy: Blood Sugar layout matches legacy — DM-Injections row column-stack + 2x2 grid */
body:not(.legacy-mode) .controls-panel .svc-row:has(#injby_Patient) {
  flex-direction: column;
  align-items: flex-start;
}
body:not(.legacy-mode) .controls-panel .svc-row:has(#injby_Patient) > .svc-lbl {
  align-self: stretch;
  text-align: center;
  width: 100%;
}
body:not(.legacy-mode) .controls-panel .svc-row:has(#injby_Patient) .injby-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  width: 100%;
}

/* Modern: zero top padding on controls-panel so sticky-header is flush against the top-bar bottom */
body:not(.legacy-mode) .controls-panel { padding-top: 0; }

/* Modern sticky header — pinned to top of controls panel, flush with the top section above */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #0d0d0d;
  border-bottom: 1px solid #5fc83b44;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  padding: 4px 4px 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 -4px 6px;
}
body.light-theme .sticky-header {
  background: #f8f8f8;
  border-bottom-color: #5fc83b88;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.sticky-header-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
}
.sticky-header-row .svc-row {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  gap: 4px;
}
.sticky-header-row .svc-row .svc-lbl { font-size: 12px; white-space: nowrap; }
.sticky-header-row .svc-row .svc-text { font-size: 12px; padding: 2px 4px; }
/* M Codes inside the sticky header — match the legacy proportional widths
   (M1100/M1400 = 1/3 of M1610 — same ratio as legacy's 12.67% / 38%) */
body:not(.legacy-mode) .sticky-header #m1100,
body:not(.legacy-mode) .sticky-header #m1400 { flex: 0 0 40px !important; width: 40px !important; min-width: 0; }
body:not(.legacy-mode) .sticky-header #m1610 { flex: 0 0 120px !important; width: 120px !important; min-width: 0; }
/* Hide sticky header in legacy mode */
body.legacy-mode .sticky-header { display: none !important; }

/* Modern: M Codes section becomes empty (rows moved to sticky header) — hide it */
body:not(.legacy-mode) .cfg-section:has(.cfg-section-title[data-section="M Codes"]) { display: none; }

/* Modern: hide the Blood Sugar section entirely when no diabetes diagnosis
   triggers it (JS toggles .bs-hidden). Same display:none approach as EP-on-RECERT. */
body:not(.legacy-mode) .cfg-section.bs-hidden { display: none !important; }

/* Modern: ROC Info hidden entirely (not just grayed out) when ROC visit type is not selected.
   Existing JS adds .section-disabled to the section when vt !== 'ROC'. */
body:not(.legacy-mode) .cfg-section.section-disabled:has(.cfg-section-title[data-section="ROC Info"]) {
  display: none !important;
}

/* Legacy: TOGGLE DEFAULTS row sits above the BT/INJ pair */
body.legacy-mode .legacy-toggle-defaults-row {
  margin: 2px 0 4px;
}
body.legacy-mode .legacy-toggle-defaults-row .pain-cb-lbl {
  font-size: 11px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ccc;
}
body.light-theme.legacy-mode .legacy-toggle-defaults-row .pain-cb-lbl { color: #333; }

/* Legacy: right-side custom dropdown popup (replaces native datalist drop) */
.legacy-dropdown-popup {
  position: fixed;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  font-family: 'Calibri', 'Segoe UI', sans-serif;
  font-size: 12px;
  color: #e0e0e0;
  max-height: 240px;
  min-width: 180px;
  max-width: 360px;
  overflow-y: auto;
  z-index: 9000;
  box-shadow: 2px 2px 6px rgba(0,0,0,0.5);
  scrollbar-width: thin;
}
.legacy-dropdown-popup::-webkit-scrollbar { width: 6px; }
.legacy-dropdown-popup::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
.legacy-dropdown-item {
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.legacy-dropdown-item:hover,
.legacy-dropdown-item.active { background: #2a2a2a; color: #5fc83b; }
body.light-theme .legacy-dropdown-popup {
  background: #ffffff;
  border-color: #cccccc;
  color: #222;
}
body.light-theme .legacy-dropdown-item:hover,
body.light-theme .legacy-dropdown-item.active { background: #e8f3e0; color: #2a7020; }
/* Hide the native dropdown arrow indicator on inputs that use the custom popup (both modes) */
/* Hide the native dropdown indicator only in MODERN (custom popup is used there).
   Legacy keeps the native browser dropdown, so leave its indicator visible. */
/* Hide the native datalist indicator in BOTH modes — the custom right-side popup
   is the sole dropdown UI, so the native bottom dropdown must never appear. */
input[list]::-webkit-calendar-picker-indicator,
input[data-legacy-list-id]::-webkit-calendar-picker-indicator {
  display: none !important;
}

/* ── LEGACY dark-theme palette: match the old desktop pocpro colors ──────
   Source: /Users/rfy/pocpro/diag4/dark_mode.css
   window #333, main #2b2b2b, sidebar #1e1e1e, border #555, accent #4CAF50, highlight #cc9900.
   Applied only in legacy dark mode — light theme + modern dark stay on the PWA palette. */
body.legacy-mode:not(.light-theme) { background: #333333; color: #e0e0e0; }
body.legacy-mode:not(.light-theme) .controls-panel,
body.legacy-mode:not(.light-theme) .orders-panel,
body.legacy-mode:not(.light-theme) .legacy-col,
body.legacy-mode:not(.light-theme) .main-row { background: #333333; }
body.legacy-mode:not(.light-theme) .svc-text,
body.legacy-mode:not(.light-theme) .svc-textarea,
body.legacy-mode:not(.light-theme) #highlight-overlay,
body.legacy-mode:not(.light-theme) .output {
  background: #2b2b2b !important;
  color: #e0e0e0 !important;
  border-color: #555555 !important;
}
/* #input is the transparent overlay TEXTAREA sitting ON TOP of #highlight-overlay.
   It must stay transparent in both themes so the colored highlight overlay shows through. */
body.legacy-mode:not(.light-theme) #input {
  background: transparent !important;
  color: transparent !important;
  caret-color: #e0e0e0 !important;
  border-color: #555555 !important;
}
body.legacy-mode:not(.light-theme) .svc-text::placeholder,
body.legacy-mode:not(.light-theme) .svc-textarea::placeholder { color: #888 !important; }
body.legacy-mode:not(.light-theme) .legacy-col,
body.legacy-mode:not(.light-theme) .legacy-leftstack,
body.legacy-mode:not(.light-theme) .legacy-side-pair > .cfg-section,
body.legacy-mode:not(.light-theme) .cfg-section { background: transparent; }
body.legacy-mode:not(.light-theme) .cfg-section { border-top-color: #555555; }
body.legacy-mode:not(.light-theme) .legacy-leftstack { border-right-color: #555555; }
body.legacy-mode:not(.light-theme) .legacy-leftstack > #icd-col { border-bottom-color: #555555; }

/* Buttons + label-locks */
body.legacy-mode:not(.light-theme) .tb-btn,
body.legacy-mode:not(.light-theme) .visit-btn,
body.legacy-mode:not(.light-theme) .yn-btn,
body.legacy-mode:not(.light-theme) .ref-btn,
body.legacy-mode:not(.light-theme) .legacy-label-lock,
body.legacy-mode:not(.light-theme) .legacy-icd-extras .svc-row > .svc-lbl {
  background: #3a3a3a !important;
  color: #e0e0e0 !important;
  border-color: #555555 !important;
}
body.legacy-mode:not(.light-theme) .tb-btn:hover,
body.legacy-mode:not(.light-theme) .visit-btn:hover,
body.legacy-mode:not(.light-theme) .legacy-label-lock:hover { background: #4a4a4a !important; }

/* Active states use the desktop's #4CAF50 green */
body.legacy-mode:not(.light-theme) .yn-btn.active-yes,
body.legacy-mode:not(.light-theme) .yn-btn.active,
body.legacy-mode:not(.light-theme) .visit-btn.active,
body.legacy-mode:not(.light-theme) .tab-btn.active {
  background: #4CAF50 !important;
  color: #ffffff !important;
  border-color: #4CAF50 !important;
}
body.legacy-mode:not(.light-theme) .legacy-icd-visits .visit-btn.active::before {
  background: #4CAF50 !important;
  border-color: #4CAF50 !important;
  color: #ffffff !important;
}

/* Active NO stays red (legacy desktop pattern) — keep current red palette */

/* Section titles use the desktop's white labels */
body.legacy-mode:not(.light-theme) .cfg-section-title,
body.legacy-mode:not(.light-theme) #legacy-col2 .cfg-section-title,
body.legacy-mode:not(.light-theme) .legacy-side-pair .cfg-section-title {
  color: #ffffff !important;
}

/* Legacy dark-theme highlight intentionally inherits the light-theme yellow+red+red-border style
   (see the unprefixed `body.legacy-mode` rule earlier). The previous #cc9900 + #000 override has
   been removed at user request — both themes must look identical for highlighted labels. */

/* Z-codes in legacy dark theme: keep pure yellow + black text (more readable than the gold palette) */
body.legacy-mode:not(.light-theme) #highlight-overlay .zcode {
  background: #ffff00 !important;
  color: #000000 !important;
}

/* Invalid ICD code: keep the desktop red */
body.legacy-mode:not(.light-theme) #highlight-overlay .invalid {
  background: #aa3030 !important;
  color: #ffffff !important;
}

/* LEGACY: the right-side popup is the LARGE menu — big font, wide, full option
   text (no truncation), tall. Matches the old desktop combo-box feel. Applies in
   both legacy themes; modern keeps its compact popup. */
body.legacy-mode .legacy-dropdown-popup {
  font-size: 15px !important;
  min-width: 280px !important;
  max-width: 680px !important;
  max-height: 460px !important;
}
body.legacy-mode .legacy-dropdown-item {
  padding: 6px 14px !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Right-side dropdown popup matches the legacy main bg + border */
body.legacy-mode:not(.light-theme) .legacy-dropdown-popup {
  background: #2b2b2b !important;
  color: #e0e0e0 !important;
  border-color: #555555 !important;
}
body.legacy-mode:not(.light-theme) .legacy-dropdown-item:hover,
body.legacy-mode:not(.light-theme) .legacy-dropdown-item.active {
  background: #4CAF50 !important;
  color: #ffffff !important;
}

/* Sticky header in legacy is hidden anyway, but keep safe */
body.legacy-mode:not(.light-theme) .sticky-header { background: #1e1e1e !important; }

/* ─────────────────────────────────────────────────────────────────────
   MODERN: clickable label-locks (replaces 🔓 protect-btn icons)
   Mirrors the legacy label-lock UX in the modern layout.
   ───────────────────────────────────────────────────────────────────── */
body:not(.legacy-mode) .protect-btn { display: none !important; }

body:not(.legacy-mode) .modern-label-lock {
  cursor: pointer;
  user-select: none;
}
body:not(.legacy-mode) .modern-label-lock:hover { color: #e8a040; }
body:not(.legacy-mode) .modern-label-lock.modern-locked {
  color: #e8a040 !important;  /* !important needed to beat .cfg-section-title's color: #ccc !important */
}
body.light-theme:not(.legacy-mode) .modern-label-lock:hover,
body.light-theme:not(.legacy-mode) .modern-label-lock.modern-locked {
  color: #c47020 !important;
}

/* Modern: show specific section titles as plain labels (like SLEEP/REST:) */
body:not(.legacy-mode) .cfg-section-title[data-section="Hospital Risks"],
body:not(.legacy-mode) .cfg-section-title[data-section="Emergency Preparedness"],
body:not(.legacy-mode) .cfg-section-title[data-section="Wound"],
body:not(.legacy-mode) .cfg-section-title[data-section="Ulcer"],
body:not(.legacy-mode) .cfg-section-title[data-section="Blood Sugar"] {
  font-size: 12px !important;
  color: #ccc !important;
  text-transform: uppercase !important;
  padding: 0 !important;
  margin: 0 0 2px !important;
  width: auto;
  align-self: flex-start;
  line-height: 1.4;
  letter-spacing: 0;
  font-weight: normal;
  gap: 0 !important;
  display: inline-block !important;
}
body:not(.legacy-mode) .cfg-section-title[data-section="Hospital Risks"]::after,
body:not(.legacy-mode) .cfg-section-title[data-section="Emergency Preparedness"]::after,
body:not(.legacy-mode) .cfg-section-title[data-section="Wound"]::after,
body:not(.legacy-mode) .cfg-section-title[data-section="Ulcer"]::after,
body:not(.legacy-mode) .cfg-section-title[data-section="Blood Sugar"]::after { content: ':'; }

body.light-theme:not(.legacy-mode) .cfg-section-title[data-section="Hospital Risks"],
body.light-theme:not(.legacy-mode) .cfg-section-title[data-section="Emergency Preparedness"],
body.light-theme:not(.legacy-mode) .cfg-section-title[data-section="Wound"],
body.light-theme:not(.legacy-mode) .cfg-section-title[data-section="Ulcer"],
body.light-theme:not(.legacy-mode) .cfg-section-title[data-section="Blood Sugar"] {
  color: #333 !important;
}

/* Modern: gold diagnosis-driven highlight on the WOUND / ULCER labels
   (wins over the plain-label color/padding above; mirrors the req-empty override) */
body:not(.legacy-mode) .cfg-section-title[data-section="Wound"].wnd-highlight,
body:not(.legacy-mode) .cfg-section-title[data-section="Ulcer"].wnd-highlight {
  color: #0d0d0d !important;
  background: #b8860b !important;
  padding: 1px 6px !important;
  font-weight: bold;
}

/* Highlight (req-empty) overrides for these section titles — dark text on yellow bg */
body:not(.legacy-mode) .cfg-section-title[data-section="Hospital Risks"].req-empty,
body:not(.legacy-mode) .cfg-section-title[data-section="Emergency Preparedness"].req-empty,
body:not(.legacy-mode) .cfg-section-title[data-section="Blood Sugar"].req-empty {
  color: #0d0d0d !important;
  background: #d4a800 !important;
  padding: 1px 6px !important;
  font-weight: bold;
}

/* Modern: EP hidden when RECERT (mirrors legacy display:none + the ROC-Info-hidden pattern) */
body:not(.legacy-mode).recert-active .cfg-section:has(.cfg-section-title[data-section="Emergency Preparedness"]) {
  display: none !important;
}

/* Modern: Psychosocial section hidden when KINNSER is the home health (legacy unaffected) */
body:not(.legacy-mode).kinnser-active #psych-section-row {
  display: none !important;
}

/* Modern: inline Rep input next to its label (was: stacked column) */
body:not(.legacy-mode) .svc-row > div:has(> #rep) {
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 4px !important;
}

/* Modern: Sleep/Rest section becomes inline row (title + checkboxes on one line) */
body:not(.legacy-mode) .cfg-section:has(> .cfg-section-title[data-section="Sleep/Rest"]) {
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px 12px !important;
}
body:not(.legacy-mode) .cfg-section:has(> .cfg-section-title[data-section="Sleep/Rest"]) > .cfg-section-title {
  margin: 0 !important;
}

/* ─────────────────────────────────────────────────────────────────────
   LEGACY final-say highlight: unified yellow+red across BOTH themes.
   Placed at file end so it wins source-order against the dark-palette rules
   (.legacy-label-lock dark bg, .cfg-section-title white text, etc).
   ───────────────────────────────────────────────────────────────────── */
body.legacy-mode .yn-unanswered .svc-lbl,
body.legacy-mode .psg-empty .svc-lbl,
body.legacy-mode .req-empty .svc-lbl,
body.legacy-mode .lbl-req-empty,
body.legacy-mode .roc-empty .svc-lbl,
body.legacy-mode .section-highlight,
body.legacy-mode .cfg-section-title.req-empty,
body.legacy-mode .legacy-label-lock.req-empty,
body.legacy-mode .cfg-section-title.legacy-label-lock.req-empty,
body.legacy-mode .cfg-section-title.legacy-label-lock.section-highlight,
body.legacy-mode #legacy-col2 .cfg-section-title.req-empty,
body.legacy-mode #legacy-col2 .cfg-section-title.legacy-label-lock.req-empty,
body.legacy-mode #legacy-col2 .cfg-section-title.section-highlight,
body.legacy-mode #legacy-col2 .cfg-section-title.legacy-label-lock.section-highlight,
body.legacy-mode #legacy-col2 .legacy-side-pair .cfg-section-title.req-empty,
body.legacy-mode #legacy-col2 .legacy-side-pair .cfg-section-title.legacy-label-lock.req-empty,
body.legacy-mode #legacy-col2 .legacy-side-pair .cfg-section-title.section-highlight {
  background: #ffff00 !important;
  color: #ff0000 !important;
  border: 1px solid #ff0000 !important;
  border-radius: 3px !important;
  font-weight: normal !important;
}

/* Z-codes: yellow bg + BLACK text in BOTH legacy themes (last-say) */
body.legacy-mode #highlight-overlay .zcode {
  background: #ffff00 !important;
  color: #000000 !important;
}