/* ============================================================
   MedVeritas Shared Styles (CANONICAL)
   Purpose:
   1) Single, canonical Inter import + font baseline
   2) Canonical shell layout + shared UI components
   3) Typography hardening to prevent page-to-page drift
   Notes:
   - Removed duplicate @import and duplicate :root --mv-font block
   - Added structure-agnostic header + right-panel title hardening
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* =========================
   ROOT + RESET (CANONICAL)
   ========================= */
:root{
  /* Typography */
  --mv-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
             "Apple Color Emoji","Segoe UI Emoji";

  /* Layout rails */
  --rail: 280px;

  /* Right panel width: let it shrink safely on smaller screens */
  --dash-min: 360px;
  --dash-max: 680px;
  --dash: clamp(var(--dash-min), 38vw, var(--dash-max));

  --gap: var(--gap-wide);
  --gap-wide: clamp(12px, 1.6vw, 22px);
  --gap-tight: clamp(9px, 0.9vw, 14px);

  --sbw: 16px; /* desktop scrollbar width compensation (Windows typical) */
  --mv-dash-gap: 16px;

  /* Bridge: if JS sets --mv-dash-w, use it; otherwise use --dash */
  --mv-dash-width: var(--mv-dash-w, var(--dash));

  /* Content max for centered cards (parse card, etc.) */
  --mv-content-max: 860px;

  /* Brand */
  --mv-green: #095c3b;
  --mv-green-2: #0c734a;
  --mv-bg: #f9f9fb;
  --mv-card: #ffffff;
  --mv-border: rgba(0,0,0,0.12);

  /* Used by shell components below */
  --mv-text: #0f172a;
  --mv-muted: #5b6776;
  --mv-green-soft: #eaf4ef;
  --mv-shadow: 0 10px 30px rgba(15,23,42,0.08);
  --mv-focus: 0 0 0 3px rgba(11,66,51,0.18);
  --mv-danger: #b42318;

  /* Shell geometry */
  --mv-shell-gap: 16px;

  /* Header height baseline (JS can overwrite) */
  --mv-header-h: 96px;
  --mvTopHeaderH: 0px;
}

*{ box-sizing:border-box; }

html{ font-synthesis: none; }

html, body{
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--mv-bg);
  font-family: var(--mv-font);
  overflow: auto; /* IMPORTANT: do not globally hard-lock scrolling */
}

/* Apply font everywhere, including form controls */
button, input, select, textarea{
  font-family: var(--mv-font);
}

/* Generic page heading baseline */
h1{ color: var(--mv-green); }

.mv-legal-notice {
  background: #fff8e1;
  color: #6b5200;
  border: 1px solid #ffe08a;
  border-radius: 10px;

  padding: 6px 10px;
  margin-bottom: 6px;

  font-size: 0.78rem;
  line-height: 1.25;

  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.mv-legal-notice strong {
  font-weight: 700;
  white-space: nowrap;
}

.mv-help-section h2 { margin-top: 18px; }
.mv-help-section h3 { margin-top: 12px; font-size: 1.0rem; }
.mv-help-section ul { margin: 8px 0 12px 18px; }

/* ============================================================
   TYPOGRAPHY HARDENING (prevents drift when markup varies)
   If a page uses .mvHeader but not .mvH1/.mvSubhead, it still matches.
   ============================================================ */
.mvHeader h1{
  margin:0;
  font-size: 28px;
  letter-spacing: -0.2px;
  color: var(--mv-green, #0b4233);
  font-weight: 800;
}

/* Subhead fallbacks for pages that do not use .mvSubhead */
.mvHeader p,
.mvHeader .subhead,
.mvHeader .subtitle,
.mvHeader .mvSubhead{
  margin-top: 6px;
  color: var(--mv-muted, #5b6776);
  font-size: 14px;
  font-weight: 550;
}

/* ============================================================
   SECTION BOXES + FORMS
   ============================================================ */
.section-box{
  background: rgba(0, 100, 60, 0.04);
  border-radius: 15px;
  padding: 1.5em 1.2em 1.2em;
  margin-bottom: 2.4em;
  border: 1.5px solid rgba(0, 100, 60, 0.18);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.section-head{
  font-size: 1.25em;
  font-weight: 700;
  color: var(--mv-green);
  border-bottom: 2px solid #b7e4c7;
  margin-bottom: 0.8em;
  letter-spacing: 0.01em;
}

label{ display:block; margin-bottom:0.5em; }
.form-field{ margin-bottom:1.5em; }

textarea{
  width:100%;
  min-height:140px;
  resize:vertical;
}

/* Missing fields */
.missing-fields-alert{
  color:#d32f2f;
  font-size:0.98em;
  font-weight:400;
  font-family: var(--mv-font);
  margin-top:3px;
  display:flex;
  align-items:center;
}
.missing-fields-alert i{ margin-right:6px; font-size:1em; }
.missing-fields-list{ font-size:0.75em; letter-spacing:0.5px; margin-left:10px; }

/* =========================================================
   TOOLTIP (interactive, scrollable, viewport-safe)
   ========================================================= */

.tooltip-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
}

.tooltip-i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  border:1px solid rgba(0,0,0,0.25);
  color: var(--mv-green);
  background:#fff;
  line-height:1;
  user-select:none;
  cursor:help;
}

/* The bubble itself */
.tooltip-bubble{
  position:fixed;                 /* CRITICAL: decouples from hover box */
  left:-9999px;
  top:-9999px;

  width:min(360px, calc(100vw - 28px));
  max-height:min(42vh, 320px);
  overflow:auto;
  overscroll-behavior:contain;    /* Prevents scroll from closing tooltip */

  padding:10px 12px;
  border-radius:12px;
  background:#0b1220;
  color:#fff;
  font-size:12.5px;
  line-height:1.35;
  white-space:pre-line;

  box-shadow:0 10px 30px rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.14);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:100000;                 /* Above right panel overlays */
}

/* Visible state (controlled by JS, not hover) */
.tooltip-wrap.is-open .tooltip-bubble{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

/* Optional scrollbar polish (WebKit only) */
.tooltip-bubble::-webkit-scrollbar{
  width:10px;
}
.tooltip-bubble::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.18);
  border-radius:10px;
}
.tooltip-bubble::-webkit-scrollbar-track{
  background: transparent;
}

/* ============================================================
   PARSE CARD + PRIMARY CTA
   ============================================================ */
#parseCard{
  background:#f2f9f5;
  border:1px solid #b8dcc2;
  border-radius:12px;
  padding: 1em 1.2em;
  margin-bottom: 0;
  max-width: var(--mv-content-max);
  margin-left:auto;
  margin-right:auto;
}

#parseBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#0b5a3a;
  color:#fff;
  padding:12px 18px;
  border:0;
  border-radius:10px;
  font-size:1.05em;
  font-weight:600;
  line-height:1;
  margin-top: 12px;
  cursor:pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

#parseBtn:hover{
  background:#094c31;
  box-shadow: 0 4px 14px rgba(0,0,0,0.16);
}

#parseBtn .mv-btn-inner{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

#parseBtn .mv-btn-ico{ width:18px; height:18px; opacity:0.9; }

#parseBtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,99,65,0.25), 0 0 0 6px rgba(0,99,65,0.12);
}

#parseBtn[disabled]{ opacity:0.8; cursor:not-allowed; }
#narrativeInput[disabled]{ opacity:0.6; }

#parseStatus{ margin-top:6px; font-size:0.95em; color:#444; }
#parseError{ color:#b00020; margin-top:6px; font-size:0.95em; }

/* Spinner */
.mv-spinner{
  display:inline-block;
  width:1em;
  height:1em;
  border:2px solid rgba(255,255,255,0.55);
  border-top-color:#fff;
  border-radius:50%;
  animation: mvspin 0.85s linear infinite;
  vertical-align:-0.15em;
  margin-right:0.5em;
}
@keyframes mvspin{ to{ transform: rotate(360deg); } }

/* ============================================================
   DASHBOARD CARD (right panel)
   ============================================================ */
#floatingRegister{
  background:#ffffff;
  border: 1px solid var(--mv-border);
  border-top: 3px solid var(--mv-green);
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(15,23,42,0.10);
  padding:1.3em 1.2em;
  font-size:1.07em;

  height:auto;
  display:flex;
  flex-direction:column;

  overflow-y:auto;
  overflow-x:hidden;

  max-width:100%;
}

#floatingRegisterMain{
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* ============================================================
   RIGHT PANEL PRISTINE STATE (CANONICAL)
   - Consistent lead, labeled skeleton rows, hint text
   ============================================================ */
.mvDashLead{
  color: var(--mv-muted, #5b6776);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 6px;
}

.mvDashHint{
  color: var(--mv-muted, #5b6776);
  font-size: 0.96rem;
  font-weight: 550;
  line-height: 1.35;
  margin-top: 14px;
}

/* Labeled skeleton rows (used in Determination pristine state) */
.mv-ghost{ margin-top: 14px; }

.mv-ghost-row{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin: 18px 0;
}

.mv-ghost-label{
  font-size: 0.98rem;
  font-weight: 650;
  color: #4b5563;
}

/* Optional system status block in the right panel */
.mvDashMeta{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.mvDashMetaRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--mv-muted, #5b6776);
  margin: 6px 0;
}

.mvDashMetaRow b{ color: var(--mv-text, #0f172a); }

#floatingRegisterMain .mv-dash-placeholder{
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
  color: var(--mv-muted);
}

/* Right panel title hardening:
   apply regardless of whether the page uses .mv-dash-title, h2, etc. */
#floatingRegister .mv-dash-title,
#floatingRegister h2,
#floatingRegister .dash-title{
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--mv-green);
  margin: 0 0 18px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(9,92,59,0.18);
  line-height: 1.15;
}

/* ============================================================
   GHOST PILL / SKELETON LOADING (RESTORED)
   ============================================================ */
.mv-ghost-block{ display:flex; flex-direction:column; gap:10px; margin-top: 8px; }

.mv-ghost-line{
  height: 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f6 0%, #f6f8fb 45%, #eef2f6 80%);
  background-size: 240% 100%;
  animation: mv-shimmer 1.2s ease-in-out infinite;
}
.mv-ghost-pill{
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f6 0%, #f6f8fb 45%, #eef2f6 80%);
  background-size: 240% 100%;
  animation: mv-shimmer 1.2s ease-in-out infinite;
}
.mv-ghost-pill.mv-w-70{ width:70%; }
.mv-ghost-pill.mv-w-55{ width:55%; }
.mv-ghost-pill.mv-w-40{ width:40%; }
.mv-ghost-pill.mv-w-85{ width:85%; }

@keyframes mv-shimmer{
  0%{ background-position: 120% 0; }
  100%{ background-position: -120% 0; }
}

/* ============================================================
   RIGHT PANEL PROCESSING OVERLAY (kept)
   ============================================================ */
.mv-processing-overlay{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(248, 250, 251, 0.88);
  backdrop-filter: blur(2px);
  z-index: 300;
}
.mv-processing-overlay.is-on{ display:flex; }

.mv-processing-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border:1px solid rgba(9,92,59,0.20);
  border-radius:12px;
  background:#ffffff;
  box-shadow:0 8px 22px rgba(0,0,0,0.10);
  max-width: 420px;
  text-align: center;
}

.mv-processing-text{
  font-weight:650;
  color:#095c3b;
  font-size:0.98rem;
  line-height: 1.25;
}

.mv-gears{ display:inline-flex; align-items:center; gap:6px; }

.mv-gear{
  width:18px; height:18px;
  border-radius:50%;
  border:3px solid #095c3b;
  border-top-color: transparent;
  animation: mv-spin 0.8s linear infinite;
}
.mv-gear-secondary{
  width:14px; height:14px;
  border-width:2px;
  animation-duration:1.1s;
  animation-direction: reverse;
}
@keyframes mv-spin{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

/* ============================================================
   RIGHT DASH ICON CONSTRAINTS ONLY
   ============================================================ */
#floatingRegister .reg-status-icon,
#floatingRegister img.mv-determination-icon,
#floatingRegister img[alt*="Determination"],
#floatingRegister img[alt*="inpatient"],
#floatingRegister img[alt*="Inpatient"]{
  width: 110px !important;
  max-width: 110px !important;
  height: auto !important;
  display: block;
  margin: 10px 0 10px 0;
}

/* ============================================================
   ENTERPRISE APP SHELL (CANONICAL)
   Key fixes:
   1) Shell grid applies to your real IDs: #mvTopHeader, #leftFixedPanel, #mvMain, #floatingRegister
   2) Center column scroll is on #mvMain (and also #mainScrollPanel if present)
   3) Right column uses minmax so it cannot push off-screen
   ============================================================ */
.mvShell{
  display:grid;
  grid-template-columns: var(--rail) minmax(0, 1fr) minmax(var(--dash-min), var(--mv-dash-width));
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "sidebar header header"
    "sidebar main   register";

  height:100vh;
  min-height:100vh;
  overflow:hidden;
  background: var(--mv-bg);
  column-gap: var(--gap);

  /* balances right-side whitespace to match inter-column gap */
  padding-right: calc(var(--gap-wide) + var(--sbw));
}

.mvShell #mvTopHeader{
  grid-area: header;
  position: sticky;
  top: 0;
  z-index: 99999;
  overflow: visible;
}

.mvShell #leftFixedPanel{
  grid-area: sidebar;
  height: 100%;
  min-height: 0;

  /* IMPORTANT: make the sidebar itself the flex column, not a scroller */
  display: flex;
  flex-direction: column;

  /* Prevent a second scroll container */
  overflow: hidden;
}

.mvShell #mvMain{
  grid-area: main;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--mv-shell-gap) 0 calc(var(--mv-shell-gap) + 96px) 0;
  scrollbar-gutter: stable;
}

/* Back-compat: if you still have #mainScrollPanel on some pages */
.mvShell #mainScrollPanel{
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--mv-shell-gap) 0 calc(var(--mv-shell-gap) + 96px) 0;
}

.mvShell #floatingRegister{
  grid-area: register;
  align-self: start;

  width: 100%;
  max-width: 100%;

  position: sticky;
  top: calc(max(var(--mv-header-h), 96px) + var(--mv-shell-gap));

  height: calc(100vh - var(--mv-header-h) - (var(--mv-shell-gap) * 2));
  min-height: calc(100vh - var(--mv-header-h) - (var(--mv-shell-gap) * 2));
  max-height: calc(100vh - var(--mv-header-h) - (var(--mv-shell-gap) * 2));

  overflow-y: auto;
  overflow-x: hidden;

  display: flex;
  flex-direction: column;
  scrollbar-gutter: stable;
}

.mvShell #floatingRegisterMain{
  min-height: 0;
  overflow: visible; /* ensure inner wrapper does not become the scroll container */
}

/* Ensure dropdown menu always stacks above right panel */
.mvShell .mvUserArea{ position: relative; z-index: 100000; }
.mvShell .mvUserMenu{ z-index: 100001 !important; }

@media (min-width: 1181px){
  .mvShell{ column-gap: var(--gap-tight); }
}

/* Responsive shell */
@media (max-width: 1180px){
  .mvShell{
    grid-template-columns: var(--rail) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "sidebar header"
      "sidebar main"
      "sidebar register";
    overflow:auto;
  }
  .mvShell #floatingRegister{
    position: relative;
    top: 0;
    max-height: none;
  }
}

@media (max-width: 900px){
  .mvShell{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "register";
    height:auto;
    min-height:0;
    overflow:visible;
  }
  .mvShell #leftFixedPanel{ height:auto; }
  .mvShell #mvMain,
  .mvShell #mainScrollPanel{
    height:auto;
    min-height:0;
    overflow: visible;
    padding: 14px 12px 22px 12px;
  }
  .mvShell #floatingRegister{
    position: relative;
    top: 0;
    max-height: none;
  }
}

/* ============================================================
   Shell component styles
   ============================================================ */
.mvSidebar{
  background:#fff;
  border-right: 1px solid var(--mv-border, #d7e3dd);
  padding: 18px 14px;

  /* Canonical sidebar behavior */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0; /* allows inner scroll containers to work correctly */
}

.mvBrand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 10px;
  padding: 10px 8px 14px 8px;
  border-bottom: 1px solid var(--mv-border, #d7e3dd);
  margin-bottom: 12px;
  text-align:center;
}

.mvBrandLogo{
  width: 210px;
  max-width: 100%;
  height: auto;
  display:block;
  margin: 0 auto;
}

.mvBrandMeta{ margin-top: -2px; }

.mvBrandTagline{
  color: var(--mv-green, #0b4233);
  font-style: italic;
  font-size: 12px;
  line-height: 1.25;
  margin: 0;
}

.mvBrandPatent{
  font-size: 12px;
  color: var(--mv-muted, #5b6776);
  margin-top: 6px;
}

.mvNav{
  display:flex;
  flex-direction:column;
  gap: 8px;
  padding: 8px 6px;

  /* Ensure footer is stable and nav scrolls if needed */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
}

.mvNavItem{
  display:flex;
  align-items:center;
  gap: 10px;
  text-decoration:none;
  color: var(--mv-text, #0f172a);
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 650;
}

.mvNavIcon{
  width: 30px; height: 30px;
  border-radius: 10px;
  background: #f3f6f4;
  border: 1px solid var(--mv-border, #d7e3dd);
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--mv-green, #0b4233);
  font-weight: 700;
  font-size: 12px;
}

.mvNavItem:hover{ background:#f6fbf8; border-color:#e3eee8; }
.mvNavItem.isActive{ background: var(--mv-green-soft, #eaf4ef); border-color:#cfe4db; color: var(--mv-green, #0b4233); }

.mvHeader{
  background:#fff;
  border-bottom: 1px solid var(--mv-border, #d7e3dd);
  padding: 18px 22px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 16px;
}

/* If pages use mvH1/mvSubhead directly, keep them aligned to the hardened defaults */
.mvH1{
  margin:0;
  font-size: 28px;
  letter-spacing: -0.2px;
  color: var(--mv-green, #0b4233);
  font-weight: 800;
}

.mvSubhead{
  margin-top: 6px;
  color: var(--mv-muted, #5b6776);
  font-size: 14px;
  font-weight: 550;
}

.mvUserArea{ position:relative; display:flex; align-items:center; gap:10px; }

.mvAvatar{
  width: 38px; height: 38px;
  border-radius: 14px;
  background: var(--mv-green, #0b4233);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.mvUserBtn{
  border: 1px solid var(--mv-border, #d7e3dd);
  background:#fff;
  border-radius: 14px;
  padding: 8px 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 320px;
  max-width: 420px;
  width: clamp(320px, 24vw, 420px);
  justify-content:space-between;
}

.mvUserBtn:focus{
  outline:none;
  box-shadow: var(--mv-focus, 0 0 0 3px rgba(11,66,51,0.18));
}

.mvUserMeta{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
  min-width: 0; /* enables ellipsis in flex layouts */
}

.mvUserName{
  font-weight: 750;
  font-size: 14px;
  color: var(--mv-text, #0f172a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.mvUserRole{
  font-size: 12px;
  color: var(--mv-muted, #5b6776);
  margin-top: 4px;
}

.mvUserChev{
  color: var(--mv-muted, #5b6776);
  font-weight: 700;
  font-size: 12px;
  padding-left: 10px;
}

/* User menu */
.mvUserMenu{
  position:absolute;
  right:0;
  top: 50px;
  width: 320px;
  background:#fff;
  border: 1px solid var(--mv-border, #d7e3dd);
  border-radius: 14px;
  box-shadow: var(--mv-shadow);
  padding: 8px;
  display:none;
  z-index: 7000;
  font-family: var(--mv-font);
}

.mvUserMenu.open{ display:block; }

.mvUserMenu a,
.mvUserMenu button{
  width:100%;
  border:0;
  background:transparent;
  text-align:left;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  padding: 10px 12px;
  border-radius: 12px;

  font-family: inherit;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.2;

  cursor:pointer;
  color: var(--mv-text, #0f172a);
  text-decoration:none;
}

.mvUserMenu a:hover,
.mvUserMenu button:hover{ background:#f6fbf8; }

.mvMenuSep{ height:1px; background: var(--mv-border, #d7e3dd); margin: 6px 0; }

.mvToolbarRow{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 14px;
}

.mvBtn{
  border-radius: 14px;
  border: 1px solid var(--mv-border, #d7e3dd);
  background:#fff;
  padding: 10px 14px;
  font-weight: 750;
  cursor:pointer;
}

.mvBtn:hover{ background:#f6fbf8; }
.mvBtn:focus{ outline:none; box-shadow: var(--mv-focus); }

.mvBtnDanger{
  /* Match readmissions.php "Clear Form" appearance */
  background: rgba(180,35,24,0.10);
  color: var(--mv-danger, #b42318);
  border: 1px solid rgba(180,35,24,0.25);
}

.mvBtnDanger:hover{ background: rgba(180,35,24,0.14); }

.mvPillRow{
  background: #fff;
  border: 1px solid var(--mv-border, #d7e3dd);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  color: var(--mv-muted, #5b6776);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.mvPillRow strong{ color: var(--mv-text, #0f172a); }
.mvPillRow a{ color: var(--mv-green, #0b4233); text-decoration:none; font-weight: 750; }
.mvPillRow a:hover{ text-decoration:underline; }

.mvVisuallyHidden{
  position:absolute !important;
  height:1px; width:1px;
  overflow:hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space:nowrap;
}

/* ============================================================
   HARDENING: legacy fixed rules should NOT push right panel off-screen
   ============================================================ */
.mvShell #floatingRegister{
  right: auto !important;
  left: auto !important;
}

/* Placeholder layout spacing inside Determination */
#registerStatus .mv-ghost{
  margin-top: 14px;
}

#registerStatus .mv-ghost-row{
  display:flex;
  flex-direction:column;
  gap: 8px;
  margin: 18px 0;
}

#registerStatus .mv-ghost-label{
  font-size: 0.98rem;
  font-weight: 600;
  color: #4b5563;
}

/* Make the placeholder pills look a touch more intentional */
#registerStatus .mv-ghost-pill{
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, #eef2f6 0%, #f6f8fb 45%, #eef2f6 80%);
  background-size: 240% 100%;
  animation: mv-shimmer 1.2s ease-in-out infinite;
}

/* =========================
   Criteria Set Mode (segmented control + Clear Form)
   Canonical, consolidated, and non-overlapping.
   ========================= */
#criteriaModeRow.mvCriteriaModeRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

#criteriaModeRow .mvCriteriaModeLeft{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1 1 520px;
  min-width:0;
}

#criteriaModeRow .mvCriteriaModeTitle{
  font-weight:800;
  color:#0b4233;
  white-space:nowrap;
  flex:0 0 auto;
}

#criteriaModeRow .mvSegment{
  display:flex;
  flex:1 1 auto;
  min-width:260px;
  max-width:100%;
  border:1px solid #d7dde2;
  border-radius:999px;
  overflow:hidden;
  background:#ffffff;
}

#criteriaModeRow .mvSegBtn{
  appearance:none;
  border:0;
  background:#f3f5f7;
  color:#0b4233;

  flex:1 1 0;
  min-width:0;
  text-align:center;

  padding:7px 10px;
  font-weight:700;
  font-size:0.92rem;
  line-height:1.1;
  white-space:nowrap;
  cursor:pointer;
}

#criteriaModeRow .mvSegBtn.isActive{
  background:#0b4233;
  color:#ffffff;
}

#criteriaModeRow .mvSegBtn:focus{
  outline:2px solid rgba(0,99,60,0.35);
  outline-offset:2px;
}

#criteriaModeRow #clearFormBtn{
  flex:0 0 auto;
  /* Let .mvBtn define size so it matches other pages (readmissions.php) */
  min-width: 160px;
}

@media (max-width: 1180px){
  #criteriaModeRow #clearFormBtn{
    flex-basis:100%;
    align-self:flex-end;
  }
}

/* =========================
   Sidebar footer: Help (canonical)
   ========================= */

.mvNavFooter{
  margin-top: auto;
  padding: 14px 6px 6px;
  border-top: 1px solid var(--mv-border, #d7e3dd);
}

/* The clickable row: keep it clean, not a full-width green pill */
.mvNavFooter .mvHelpNavLink{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;

  text-decoration: none;
  color: var(--mv-green, #0b4233);
  font-weight: 650;
  line-height: 1.15;
}

.mvNavFooter .mvHelpNavLink:visited{
  color: var(--mv-green, #0b4233);
}

.mvNavFooter .mvHelpNavLink:hover{
  text-decoration: underline;
}

/* Do not let isActive turn it into a pill row */
.mvNavFooter .mvHelpNavLink.isActive{
  background: transparent;
  border: 0;
}

/* The pill ? icon (this is what you want back) */
.mvNavFooter .mvHelpIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px;
  height: 28px;

  border-radius: 10px;
  border: 1px solid var(--mv-border, #d7e3dd);
  background: #f3f6f4;

  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  color: var(--mv-green, #0b4233);

  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
  flex: 0 0 auto;
}

.mvNavFooter .mvHelpNavText{
  display: inline;
  white-space: nowrap;
}

/* =========================
   HARDEN: Help footer must look identical on every page
   (prevents default purple/visited rendering)
   ========================= */
.mvNavFooter .mvHelpNavLink,
.mvNavFooter .mvHelpNavLink:visited{
  color: var(--mv-green, #0b4233) !important;
  text-decoration: none !important;
  font-family: var(--mv-font, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial) !important;
  font-weight: 650 !important;
}

.mvNavFooter .mvHelpNavLink:hover{
  text-decoration: underline !important;
}

.mvNavFooter .mvHelpIcon{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  border: 1px solid var(--mv-border, rgba(0,0,0,0.12)) !important;
  background: rgba(0,100,60,0.06) !important;
  color: var(--mv-green, #0b4233) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

.password-help{
  margin-top: 8px;
  margin-bottom: 14px;
}

.password-help a,
.password-help a:visited{
  font-size: 13px;
  font-weight: 600; /* or 500 */
  color: rgba(9,92,59,0.92); /* slightly softened */
  text-decoration: none;
}

.password-help a:hover {
  text-decoration: underline;
}

/* ============================================================
   RIGHT PANEL TYPOGRAPHY NORMALIZATION
   Goal: eliminate page-to-page font drift between #floatingRegister
   and #floatingRegisterMain for an enterprise-consistent UI.
   ============================================================ */

/* Ensure the SAME base typography no matter which container ID a tool uses */
#floatingRegister,
#floatingRegisterMain{
  font-family: var(--mv-font);
  font-size: 1.07em;            /* Match your existing #floatingRegister baseline */
  line-height: 1.35;
  color: var(--mv-text, #0f172a);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Reassert canonical pristine-state hierarchy with higher specificity */
#floatingRegister .mvDashLead,
#floatingRegisterMain .mvDashLead{
  color: var(--mv-muted, #5b6776);
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 6px;
}

#floatingRegister .mvDashHint,
#floatingRegisterMain .mvDashHint{
  color: var(--mv-muted, #5b6776);
  font-size: 0.96rem;
  font-weight: 550;
  line-height: 1.35;
  margin-top: 14px;
}

/* Labeled skeleton rows should look identical across tools */
#floatingRegister .mv-ghost-label,
#floatingRegisterMain .mv-ghost-label{
  font-size: 0.98rem;
  font-weight: 650;
  color: #4b5563;
}

/* Optional system status block: consistent typography */
#floatingRegister .mvDashMeta,
#floatingRegisterMain .mvDashMeta{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

#floatingRegister .mvDashMetaRow,
#floatingRegisterMain .mvDashMetaRow{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 12px;
  font-size: 0.95rem;
  color: var(--mv-muted, #5b6776);
  margin: 6px 0;
}

#floatingRegister .mvDashMetaRow b,
#floatingRegisterMain .mvDashMetaRow b{
  color: var(--mv-text, #0f172a);
}