html,
body {
  margin: 0;
  padding: 0;
  overflow: auto !important;
}
.cb-row {
  padding-bottom: 0.3vh;
}
:root {
  --ui-font: "Segoe UI", "Helvetica Neue", sans-serif;

  /* === RESPONSIVE SCALE FOR SMALLER SCREENS === */
  /* Scales fixed px values: 0.65x on 12" laptops, 1x on 24" monitors */
  --px-scale: clamp(0.65, 0.4 + 0.035vw, 1);
}
.logo {
  height: 8.5vh;
}
input[type="radio"] {
  width: clamp(0.8vh, 1.2vh, 1.6vh);
  height: clamp(0.8vh, 1.2vh, 1.6vh);
  vertical-align: middle;
  margin-right: 0.3vw;
}
select.form-select {
  font-size: 1.4vh;
  padding: 0vh 0.5vw;
  line-height: normal;
  min-height: calc(1.5em + 0.5rem + 2px);
  height: auto;
}
.main-row {
  display: flex;
  width: 100%;
  min-height: 100vh;
}
.left-section {
  width: 66.67%;
  padding: 1vh;
  display: flex;
  flex-direction: column;
}
.right-section {
  width: 33.33%;
  padding: 2vh;
  background: #e8e8e8;
  font-family: var(--ui-font);
  font-size: 0.9em;
  white-space: normal;
}
.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1vw;
}
.title-block {
  flex-grow: 1;
  text-align: center;
  white-space: nowrap;
}
.title-block h3 {
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: bold;
  margin-bottom: 0.25rem;
}
.title-block h5 {
  font-size: clamp(1rem, 2vw, 1.5rem);
  font-style: italic;
  margin: 0;
}
.firebrick-text {
  color: firebrick;
  font-style: italic;
  font-weight: bold;
  margin: 0;
  font-size: clamp(0.9rem, 0.804vw, 1.2rem);
}
.question-box {
  display: flex;
  border: 1px solid #999;
  border-radius: 5px;
  overflow: visible;
  width: 100%;
}
.question-box .left-col,
.question-box .middle-col,
.question-box .right-col {
  flex: 1 1 0;
  padding: 1vh;
}
.question-box .left-col,
.question-box .right-col {
  background: #f5f5f5;
}
.question-box .middle-col {
  background: #e8e8e8;
}
.aligned-row {
  display: flex;
  margin-top: 1vh;
  gap: 0.5vw;
}
.tight-row {
  margin-top: 0.4vh !important;
}
.narrow-label {
  width: 25% !important;
  font-weight: normal !important;
}
.aligned-icon {
  width: 5%;
  padding-top: 1vh;
  color: #555;
  font-size: clamp(0.7vh, 1vh, 1.1vh);
  cursor: pointer;
}
.aligned-radio {
  width: 60%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.aligned-radio label {
  font-size: 1.5vh;
  margin-right: 2vw;
}
.small-select {
  width: 100%;
}
.nowrap-row {
  flex-wrap: nowrap !important;
  gap: 0.5vw;
}
.tooltip-inner {
  font-size: clamp(1vh, 1.3vh, 1.6vh);
}
#jsonSent,
#jsonReceived {
  background: #fff;
  padding: 0.5rem;
  border-radius: 5px;
  margin-bottom: 1rem;
}
.age-select {
  font-size: clamp(1vh, 1.3vh, 1.27vh) !important;
}
@media (max-width: 767.98px) {
  :root {
    --fs-base: 0.74;
  }
  .form-check-label {
    font-size: 1.3vh !important;
  }
  .aligned-label-normal {
    width: 100%;
  }
  .narrow-select-row .small-select-wrapper {
    flex: 1 1 auto;
  }
  .narrow-select-row .aligned-label {
    width: 100% !important;
  }
  .narrow-number-row .aligned-label-normal {
    width: 100% !important;
  }
  .narrow-number-row .aligned-radio {
    flex: 0 0 100%;
  }
  .aligned-label {
    width: 100% !important;
    margin-bottom: 0.15rem !important;
  }
  .main-row {
    flex-direction: column;
  }
  .left-section,
  .right-section {
    width: 100%;
  }
  .header-row {
    flex-direction: column;
    align-items: flex-start;
  }
  .title-block {
    white-space: normal;
    text-align: left;
    margin-top: 1vh;
  }
  .question-box {
    flex-direction: column;
  }
  .question-box .left-col,
  .question-box .middle-col,
  .question-box .right-col {
    width: 100%;
  }
  .box-title,
  .aligned-radio label,
  .form-select,
  .age-input,
  .age-select {
    font-size: 1.3vh !important;
  }
  .aligned-label {
    width: 100%;
  }
  .aligned-icon {
    font-size: 0.5vh !important;
  }
  .aligned-radio {
    width: 100%;
  }
  .bootstrap-select .dropdown-menu li a {
    font-size: 1.3vh !important;
  }
  .right-col .narrow-select-row .aligned-label {
    width: 100% !important;
  }
  .right-col .narrow-select-row .aligned-icon {
    margin-left: 0 !important;
  }
  .right-col .narrow-select-row .aligned-radio,
  .right-col .narrow-select-row .small-select-wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .right-col .aligned-label {
    width: 100% !important;
  }
  .right-col .aligned-icon {
    width: auto !important;
    flex: 0 0 auto !important;
  }
  .right-col .small-select-wrapper {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
.bootstrap-select > .dropdown-toggle {
  font-size: 1.4vh;
  padding: 0.25vh 0.5vw;
  line-height: normal;
  height: auto;
  display: flex !important;
  align-items: center !important;
  width: 100%;
}
.bootstrap-select .btn.bs-placeholder {
  color: #000;
  background: #fff;
}
.bootstrap-select .dropdown-menu li a {
  font-size: 1.4vh;
}

.form-check-input {
  width: clamp(1vh, 1.5vh, 2vh);
  height: clamp(1vh, 1.5vh, 2vh);
  vertical-align: middle;
  margin-right: 0.3vw;
}
.form-check.w-100 {
  padding: 0.25rem 0;
}
.form-check .form-check-input {
  margin-left: 0;
  margin-right: 0.5rem;
}
.form-check .form-check-label {
  width: 100%;
}
.form-check.d-flex .form-check-input {
  margin-top: 0 !important;
  align-self: center;
}
.form-check.d-flex .form-check-label {
  line-height: 1.3;
}
.form-check-label {
  font-size: 1.5vh;
}
.aligned-label-normal {
  width: 35%;
  font-weight: normal;
  font-size: 1.5vh;
}
#riskTable th {
  background-color: white !important;
  color: #222;
  font-weight: bold;
  text-align: left;
  padding: 0.75vh 1vw;
  border: none !important;
}
#riskTable td {
  padding: 0.75vh 1vw;
  color: #333;
  border: none !important;
  background-color: white !important;
}
#riskTable tbody tr:nth-child(odd) td {
  background-color: #f0f0f0 !important;
}
#riskTable th,
#riskTable td {
  padding: 0.25rem 0.5rem !important;
  line-height: 1.15 !important;
  vertical-align: middle !important;
}
#riskTable tfoot td {
  background: #fff !important;
  border-top: 1px solid #ddd !important;
  color: #555;
  font-size: 0.95em;
  padding-top: 0.35rem !important;
}
.nav-tabs .nav-link.active {
  background-color: #ffffff;
  border-color: #dee2e6 #dee2e6 #ffffff;
  color: #000;
  font-weight: bold;
}
.chart-wrapper {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}
#chart {
  width: 100%;
  max-width: 100%;
}
#chart svg {
  transition: height 0.4s ease;
}
.mobile-only-header {
  display: none;
}
.double-slider-box {
  background: #fff;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 0.5rem;
  max-width: clamp(120px, 14vw, 200px);
  width: 100%;
  font-size: clamp(0.65rem, 0.65vw, 0.85rem);
  box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.08);
  margin: 0rem;
  position: relative;
  z-index: 1;
}
.range-flex {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.range-presets {
  display: flex;
  flex-direction: column;
  gap: clamp(0.25rem, 0.3vw, 0.4rem);
  width: clamp(50px, 5.5vw, 80px);
}
.range-presets .btn {
  flex: 1 1 0;
  padding-top: clamp(0.2rem, 0.25vw, 0.3rem);
  padding-bottom: clamp(0.2rem, 0.25vw, 0.3rem);
  font-size: clamp(0.6rem, 0.55vw, 0.8rem);
  line-height: 1.1;
}
svg .tick text {
  font-size: clamp(0.65rem, 0.6vw, 0.9rem);
  font-weight: normal;
}
.range-title {
  font-size: 0.8rem;
  text-align: center;
  margin-bottom: 1vh;
  color: #333;
}
.range-slider {
  position: relative;
  height: 0.75rem;
  overflow: visible;
}
.range-slider input[type="range"] {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  pointer-events: none;
  height: 0.3rem;
  background: none;
  z-index: 3;
}
.range-slider input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  height: 0.6rem;
  width: 0.6rem;
  border-radius: 50%;
  background: #fff;
  border: 0.15rem solid #fe696a;
  cursor: pointer;
  pointer-events: auto;
  z-index: 4;
  position: relative;
}
.range-slider input[type="range"]::-moz-range-thumb {
  height: 0.75rem;
  width: 0.75rem;
  border-radius: 50%;
  background: #fff;
  border: 0.15rem solid #fe696a;
  cursor: pointer;
  pointer-events: auto;
}
.slider-track {
  position: absolute;
  height: 0.25rem;
  background: #fe696a;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0.2rem;
  z-index: 2;
}
.range-slider .track-base {
  background: #ccc;
  left: 0;
  right: 0;
  z-index: 1;
}
.input-box {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 0.5rem;
}
.input-wrap {
  flex: 1;
}
.input-wrap input {
  width: 100%;
  padding: 0.5rem;
  font-size: 0.7rem;
  border: 0.06rem solid #ccc;
  border-radius: 0.4rem;
}
.input-wrap input:focus {
  outline: none;
  border-color: #fe696a;
  box-shadow: 0 0 0.25rem rgba(254, 105, 106, 0.45);
}
.axis-label {
  font-size: 1.1rem;
  fill: #555;
  font-weight: bold;
  font-family: var(--ui-font);
}
svg .tick line {
  stroke: #d0d0d0;
  opacity: 0.7;
}
svg .domain {
  stroke: #d0d0d0;
  opacity: 0.7;
}
.tooltip {
  position: absolute;
  padding: 0.4rem;
  background: #fff;
  border: 0.06rem solid #ccc;
  border-radius: 0.25rem;
  pointer-events: none;
  font-size: 0.75rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.1);
}
#toggle-button:hover {
  background: #0056b3;
}
.chart-wrapper,
.double-slider-box {
  font-family: var(--ui-font);
}
.graph-controls {
  display: flex;
  justify-content: flex-end;
  margin: 1rem 0;
  padding-right: 1rem;
}
#toggle-ci {
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  background: #6c757d;
  color: #fff;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  box-shadow: 0 0.125rem 0.3rem rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease;
}
#toggle-ci:hover {
  background: #5a6268;
}
#toggle-button {
  padding: 0.6rem 1.2rem;
  font-size: 0.9rem;
  background: #6495ed;
  color: #fff;
  border: none;
  border-radius: 2rem;
  cursor: pointer;
  box-shadow: 0 0.125rem 0.3rem rgba(0, 0, 0, 0.1);
  transition: background 0.2s ease;
}
#fullScreenshotBtn {
  background: #6495ed;
  color: #fff;
  transition: background 0.2s ease;
}
#clinical-summary {
  font-family: "Segoe UI", sans-serif;
  line-height: 1.6;
  padding: 1rem;
  border-radius: 8px;
  border: 1px solid #ddd;
}
#clinical-summary h5 {
  font-size: 1.8vh;
  font-weight: bold;
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.4rem;
  margin-bottom: 1rem;
  color: #333;
}
#clinical-summary strong {
  color: #222;
  font-weight: 700;
  display: inline-block;
  width: auto;
  padding-right: 0.25rem;
  vertical-align: text-top;
}
#clinical-summary p {
  margin: 0.25rem 0 0.75rem;
}
.summary-section {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 1px dashed #ccc;
}
#clinical-summary p {
  margin-bottom: 1.5vh !important;
  margin-top: 0.5vh !important;
}
#clinical-summary h5 {
  margin-bottom: 2vh !important;
}
.button-group {
  display: flex;
  flex-direction: row;
  gap: 0.25rem;
}
.button-group button {
  width: auto !important;
  white-space: nowrap;
  padding: clamp(0.2rem, 0.25vw, 0.3rem) clamp(0.5rem, 0.6vw, 0.75rem);
  font-size: clamp(0.55rem, 0.55vw, 0.75rem);
  border-radius: 1rem;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.08);
  flex-shrink: 1;
}
.slider-button-row {
  display: flex;
  align-items: flex-start;
  gap: clamp(0.5rem, 0.7vw, 1rem);
  flex-wrap: wrap;
}
.uniform-btn {
  font-family: "Segoe UI", sans-serif;
  font-size: clamp(0.55rem, 0.65vw, 0.85rem) !important;
  min-width: fit-content !important;
  padding: clamp(0.2rem, 0.25vw, 0.3rem) clamp(0.4rem, 0.5vw, 0.6rem) !important;
  height: clamp(1.5rem, 1.6vw, 2.2rem) !important;
  width: auto !important;
  border-radius: 0.25rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}
#summary-wrapper th,
#summary-wrapper td {
  border: 1px solid #ccc;
  padding: 0.5rem 1rem;
  text-align: left;
}
#summary-wrapper th {
  background-color: #f0f0f0;
  font-weight: bold;
  color: #333;
}
.offcanvas-start {
  --bs-offcanvas-width: clamp(160px, 15vw, 240px);
}

.narrow-select-row .small-select-wrapper {
  flex: 0 0 clamp(150px, 20vw, 240px);
}
.narrow-select-row .aligned-label {
  width: 38% !important;
}
.narrow-select-row .aligned-icon {
  width: auto;
  margin-left: 0.5rem;
}
#medadpidis-row {
  align-items: center;
}
.narrow-number-row .aligned-label-normal {
  width: 70% !important;
}
.narrow-number-row .aligned-radio {
  flex: 0 0 clamp(90px, 12vw, 120px);
}
#medadpidis {
  max-width: 6rem;
}
.question-box .aligned-row {
  margin-top: 0 !important;
}
.question-box .row {
  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}
.box-title {
  font-size: 1.8vh;
  font-weight: bold;
  margin: 1.45vh 0 0.9vh !important;
}
select.form-select,
.bootstrap-select > .dropdown-toggle,
.age-input,
.age-select,
#hdef,
#medadpidis,
input[type="number"].form-control-sm,
input[type="text"].form-control-sm {
  font-size: clamp(0.85rem, 1.3vw, 0.95rem) !important;
  padding: 0.2rem 0.45rem !important;
  min-height: calc(1.2em + 0.4rem + 2px) !important;
  height: auto !important;
}
.bootstrap-select .dropdown-menu.inner {
  max-height: 40vh !important;
}
.form-check {
  margin: 0 !important;
  padding: 0 !important;
}
.form-check-input {
  width: clamp(0.9rem, 1.4vh, 1rem) !important;
  height: clamp(0.9rem, 1.4vh, 1rem) !important;
  margin-right: 0.4rem !important;
}
.bootstrap-select > .dropdown-toggle {
  width: 100% !important;
}
@media (max-width: 1199.98px) {
  .aligned-label {
    width: 34% !important;
  }
}
@media (max-width: 991.98px) {
  .aligned-label {
    width: 38% !important;
  }
}
#miwhenAlert {
  margin-top: 0.2rem !important;
}

@media (max-width: 424.98px) {
  .bootstrap-select .dropdown-menu {
    min-width: clamp(160px, 50vw, 240px) !important;
  }
}
:root {
  --fs-base: 0.82;
}
@media (max-width: 1399.98px) {
  :root {
    --fs-base: 0.8;
  }
}
@media (max-width: 1199.98px) {
  :root {
    --fs-base: 0.78;
  }
}
@media (max-width: 991.98px) {
  :root {
    --fs-base: 0.76;
  }
}
.form-check-label,
.aligned-icon {
  font-size: clamp(0.78rem, 1.1vw, 0.88rem) !important;
}
.box-title {
  font-size: clamp(0.85rem, 1.4vw, 0.95rem) !important;
}
.bootstrap-select .dropdown-menu li a {
  font-size: clamp(0.78rem, 1.1vw, 0.88rem) !important;
}
.axis-label {
  font-size: clamp(0.9rem, 1.4rem, 1rem) !important;
}
.chart-legend {
  font-size: clamp(0.7rem, 1vw, 0.8rem) !important;
}
.right-section {
  font-size: 0.85em !important;
}
html {
  font-size: 95% !important;
}
body {
  font-size: calc(16px * var(--fs-base, 1) * 0.95) !important;
}
#riskTable {
  width: 100%;
  border-collapse: collapse;
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  font-size: calc(1.5vh * 0.95) !important;
}
.nav-tabs .nav-link {
  font-family: "Segoe UI", "Helvetica Neue", sans-serif;
  color: #333;
  font-size: calc(1.5vh * 0.95) !important;
}
#summary-wrapper table {
  font-size: calc(1.4vh * 0.95) !important;
}
#clinical-summary h5 {
  font-size: calc(1.8vh * 0.95) !important;
}
.bootstrap-select > .dropdown-toggle,
.bootstrap-select .dropdown-menu li a,
select.form-select,
input.form-control,
.form-check-label,
.aligned-label,
.chart-legend,
.uniform-btn,
#toggle-button,
#toggle-ci,
#toggle-alt,
#toggle-summary {
  font-size: inherit !important;
}
.question-box > .left-col,
.question-box > .middle-col,
.question-box > .right-col {
  flex: 0 0 33.3333% !important;
  max-width: 33.3333% !important;
  min-width: 0 !important;
}
.narrow-select-row .small-select-wrapper {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.aligned-radio {
  min-width: 0 !important;
}
.bootstrap-select > .dropdown-toggle {
  width: 100% !important;
  max-width: 100% !important;
}
.age-input,
.age-select {
  width: clamp(60px, 45%, 120px) !important;
}
.question-box .left-col > .d-flex.flex-nowrap {
  flex-wrap: nowrap !important;
}
.d-flex > .bootstrap-select {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.d-flex > .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
}
.inline-radios {
  display: flex;
  align-items: center;
  flex-wrap: nowrap !important;
  white-space: nowrap;
  padding-left: 0.5vw;
}
.inline-radios .form-check {
  margin-right: 0.5rem !important;
}
.inline-radios .form-check:last-child {
  margin-right: 0 !important;
}
.inline-radios .form-check-input {
  margin-right: 0.25rem !important;
}
.inline-radios label {
  margin-right: 0.35rem !important;
  display: inline-block !important;
  white-space: nowrap;
}
.wide-label-row .aligned-label {
  width: 38% !important;
}
.wide-label-row .aligned-icon {
  width: auto;
  margin-left: 0.5rem;
}
.wide-label-row .aligned-radio {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.wide-label-row .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
}

.required-box::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  filter: blur(14px);
  background: radial-gradient(
      140px 90px at 12% 10%,
      rgba(255, 77, 109, 0.25),
      transparent
    ),
    radial-gradient(140px 90px at 88% 18%, rgba(70, 201, 255, 0.2), transparent),
    radial-gradient(
      180px 120px at 50% 100%,
      rgba(255, 183, 3, 0.18),
      transparent
    );
  z-index: -1;
}
.required-box:focus-within {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 18px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(255, 77, 109, 0.18) inset;
}
.required-badge {
  position: absolute;
  top: -10px;
  left: 14px;
  background: #111;
  color: #fff;
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.required-badge i {
  font-size: 0.8em;
}
@keyframes pulseGlow {
  0% {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 6px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
  }
  50% {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset,
      0 16px 28px rgba(0, 0, 0, 0.12), 0 0 0 4px rgba(255, 77, 109, 0.12) inset;
  }
  100% {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 6px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .required-box {
    animation: none;
  }
}
.required-box {
  position: relative;
  border: 2px solid transparent;
  border-radius: 14px;
  padding: 0.65rem 0.8rem;
  background: #bcd9e2;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 6px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
  animation: pulseGlow 1.2s ease-out 2;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.required-box.required-on {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.18);
}
.required-box.required-pulse {
  animation: reqPulse 0.9s ease-in-out 4;
}
@keyframes reqPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0.55);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(220, 53, 69, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(220, 53, 69, 0);
  }
}
.risk-required-alert {
  --risk-required-font-size: 1.1rem;
  font-family: var(--bs-body-font-family, inherit);
}
.risk-required-alert .risk-required-title {
  font-weight: 600;
  font-size: var(--risk-required-font-size);
  margin-bottom: 0.25rem;
}
.risk-required-alert #risk-missing-list,
.risk-required-alert #risk-missing-list li {
  font-size: var(--risk-required-font-size);
}
button,
.btn,
.uniform-btn,
#toggle-button,
#toggle-ci,
#toggle-alt,
#toggle-summary,
#toggle-risk-rows,
.sidebar-toggle,
#preset-0-1,
#preset-0-5,
#preset-0-10,
#preset-0-15 {
  font-family: var(--ui-font) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2px !important;
  text-transform: none !important;
}

.question-box > .left-col,
.question-box > .middle-col,
.question-box > .right-col {
  padding: 0.75rem 1rem;
  box-sizing: border-box;
}

#required-box + .aligned-row {
  margin-top: 1rem !important;
}
#required-box {
  margin-bottom: 1rem !important;
}
.middle-col {
  margin: 0 !important;
  padding: 0 !important;
}
.middle-col > .middle-pad {
  padding: 10px 12px;
}

.right-col .aligned-label,
.right-col .aligned-icon,
.right-col .small-select-wrapper,
.right-col .aligned-row .bootstrap-select {
  margin: 0 !important;
  padding: 0 !important;
}

.middle-col .narrow-select-row .aligned-label,
.middle-col .narrow-select-row .aligned-icon,
.middle-col .narrow-select-row .small-select-wrapper,
.middle-col .narrow-select-row .bootstrap-select {
  padding-bottom: 0.06vh !important;
  padding-top: 0.06vh !important;
}

/* Make the "Previous cardiac intervention" rows match exactly */
#prvalveproc-row .aligned-row,
#pocpci-row .aligned-row,
#pocint-row .aligned-row {
  gap: 0 !important;
}

#prvalveproc-row .aligned-label,
#pocpci-row .aligned-label,
#pocint-row .aligned-label {
  width: var(--rc-label-w) !important;
}

#prvalveproc-row .aligned-icon,
#pocpci-row .aligned-icon,
#pocint-row .aligned-icon {
  flex: 0 0 var(--rc-icon-w) !important;
  width: var(--rc-icon-w) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
}

#prvalveproc-row .small-select-wrapper,
#pocpci-row .small-select-wrapper,
#pocint-row .small-select-wrapper {
  flex: 0 0 var(--rc-select-w) !important;
  width: var(--rc-select-w) !important;
  min-width: var(--rc-select-w) !important;
  max-width: var(--rc-select-w) !important;
}

#prvalveproc-row .bootstrap-select > .dropdown-toggle,
#pocpci-row .bootstrap-select > .dropdown-toggle,
#pocint-row .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
}

/* === RIGHT COLUMN: strict horizontal alignment === */
.right-col {
  /* Label column */
  --rc-label-base: 42%;
  --rc-shift: 1cm;
  --rc-label-w: calc(var(--rc-label-base) + var(--rc-shift));

  /* Icon column */
  --rc-icon: clamp(16px, 1.5vw, 24px);
  --rc-icon-w: var(--rc-icon);

  /* Select/dropdown column */
  --rc-select: clamp(140px, 13vw, 210px);
  --rc-select-w: var(--rc-select);
}

.right-col .aligned-row {
  gap: 0 !important;
  align-items: center !important;
}

/* label | icon | select */
.right-col .aligned-label {
  width: calc(var(--rc-label-base) + var(--rc-shift)) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.right-col .aligned-icon {
  flex: 0 0 var(--rc-icon) !important;
  width: var(--rc-icon) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Unify dropdown container width (covers both native <select> and bootstrap-select) */
.right-col .small-select-wrapper,
.right-col .narrow-select-row .small-select-wrapper,
#prvalveproc-row .small-select-wrapper,
#pocpci-row .small-select-wrapper,
#pocint-row .small-select-wrapper,
#prvalveproc-row .aligned-radio,
#pocpci-row .aligned-radio,
#pocint-row .aligned-radio {
  flex: 0 0 var(--rc-select) !important;
  width: var(--rc-select) !important;
  min-width: var(--rc-select) !important;
  max-width: var(--rc-select) !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make the actual controls fill their wrapper exactly */
.right-col select.form-select,
#prvalveproc-row select.form-select,
#pocpci-row select.form-select,
#pocint-row select.form-select {
  width: 100% !important;
  box-sizing: border-box !important;
}

.right-col .bootstrap-select,
#prvalveproc-row .bootstrap-select,
#pocpci-row .bootstrap-select,
#pocint-row .bootstrap-select {
  width: 100% !important;
}

.right-col .bootstrap-select > .dropdown-toggle,
#prvalveproc-row .bootstrap-select > .dropdown-toggle,
#pocpci-row .bootstrap-select > .dropdown-toggle,
#pocint-row .bootstrap-select > .dropdown-toggle {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Remove stray spacing that was offsetting those three rows */
#prvalveproc-row .aligned-row > *,
#pocpci-row .aligned-row > *,
#pocint-row .aligned-row > * {
  margin: 0 !important;
  padding: 0 !important;
}

/* Collapse rows instantly (no height animation) */
#riskTable .outcome-collapse {
  transition: none !important;
}
#riskTable .outcome-collapse.collapsing {
  height: auto !important;
  transition: none !important;
}

/* ===== Calculations-only alignment ===== */

/* Turn each Calculations row into a 3-column grid:
   [label] [info icon] [input] */
#calc-section .aligned-row.narrow-number-row {
  display: grid;
  grid-template-columns:
    var(--calc-label-col, clamp(170px, 16vw, 260px)) clamp(16px, 1.5vw, 24px)
    1fr; /* label | icon | control */
  align-items: center;
  column-gap: 0.5rem;
}

/* Make the Calculations labels behave like the narrow labels above */
#calc-section .aligned-label-normal {
  margin: 0;
  /* grid column width is controlled by the template above */
}

/* Keep the icon flush in its column (no stray offsets) */
#calc-section .aligned-icon {
  margin-left: 0 !important;
}

/* Make the input stretch naturally */
#calc-section .aligned-radio {
  width: 100%;
}

/* If any padding was pushing these rows, neutralize it here */
#calc-section .narrow-number-row[style*="padding-left"] {
  padding-left: 0 !important;
}

/* === Make columns 1 & 2 as tight as column 3 (no vertical spacing) === */
.question-box :is(.left-col, .middle-col) .aligned-row {
  gap: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  align-items: center !important;
}

/* kill the 1vh icon top padding that inflates row height */
.question-box :is(.left-col, .middle-col) .aligned-icon {
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* keep width as-is; we aren't changing layout widths */
}

/* prevent helper wrappers from reintroducing vertical space */
.question-box :is(.left-col, .middle-col) :is(.w-100, .form-check) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* dropdowns: no extra top/bottom margin */
.question-box
  :is(.left-col, .middle-col)
  :is(
    .bootstrap-select,
    .bootstrap-select > .dropdown-toggle,
    select.form-select
  ) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* neutralize any spacing utilities that may be present in markup */
.question-box
  :is(.left-col, .middle-col)
  :is(
    .aligned-row.section-gap,
    [class*="mb-"],
    [class*="mt-"],
    [class*="py-"],
    [class*="pt-"],
    [class*="pb-"]
  ) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Summary table column widths */
#summary-table table {
  table-layout: fixed;
  width: 100%;
}
#summary-table th:first-child,
#summary-table td:first-child {
  width: clamp(60px, 6vw, 90px); /* responsive smaller first column */
}

/* Make all other columns wider and keep their content on one line */
#summary-table th:not(:first-child),
#summary-table td:not(:first-child) {
  min-width: clamp(90px, 9vw, 140px); /* responsive year columns */
  white-space: nowrap; /* keep 95% CI on one line */
}

/* Preset bar sits inside .double-slider-box so it inherits the same responsive width as the slider */
.double-slider-box .range-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0; /* no gaps between buttons */
  width: 100%; /* exactly the width of the slider area */
  margin: 0; /* no extra vertical space above/below */
}

/* Make each button fill its grid cell and look like a unified bar */
.double-slider-box .range-presets .btn {
  width: 100%;
  border-radius: 0; /* squared edges so buttons “abut” cleanly */
}

/* Remove any vertical spacing between this bar and the slider below */
.double-slider-box .range-slider {
  margin-top: 1vh; /* ensure the slider hugs the buttons */
}

/* Highlight state for a selected preset (Bootstrap 5 honors .active on outline buttons) */
.double-slider-box .range-presets .btn.active {
  /* Bootstrap already provides styles for .btn-outline-*.active;
     these lines only strengthen contrast if your theme is custom */
  color: #fff;
}

/* Align the moved "Surv/Mort" button with the chart's Y-axis.
   Keep this in sync with the D3 left margin (margin.left = 80 in your JS). */
.align-y-axis {
  margin-left: clamp(50px, 5vw, 80px);
}
@media (max-width: 576px) {
  .align-y-axis {
    margin-left: 0;
  } /* don't indent on small screens */
}

/* Make "Comp. Effectiveness" a bit wider so the full text fits */
.uniform-btn.btn-wide {
  min-width: clamp(6rem, 7vw, 10rem);
  white-space: nowrap;
}

/* Normalize font size across key chart buttons */
:root {
  --action-btn-fs: clamp(0.65rem, 0.8vw, 0.85rem);
}

#toggle-button,          /* Surv/Mort */
#toggle-summary,         /* Show All */
#toggle-ci,              /* Add 95% CI */
#toggle-alt,             /* Comp. Effectiveness */
.uniform-btn {
  /* covers any that use this class */
  font-size: var(--action-btn-fs) !important;
  line-height: 1 !important;
  height: clamp(1.3rem, 1.4vw, 1.8rem) !important;
  padding: clamp(0.15rem, 0.2vw, 0.25rem) clamp(0.35rem, 0.45vw, 0.55rem) !important;
}

/* Gray text for BMI, BSA, MELD (works even when inputs are disabled) */
#BMI,
#BSA,
#meldscr {
  color: #6c757d !important; /* Bootstrap secondary gray */
  -webkit-text-fill-color: #6c757d; /* Safari */
}

/* Gray the labels inside the Calculations section */
#calc-section .aligned-label-normal {
  color: #6c757d;
}

/* Comp. Effectiveness panel */
.ce-panel {
  min-width: clamp(120px, 12vw, 180px);
  align-self: start;
}
.ce-panel .form-label {
  margin-bottom: 0.25rem;
}

/* Pin each control to a named area so positions never change */
#toggle-alt {
  grid-area: alt;
}
#toggle-ci {
  grid-area: ci;
}
#ce-panel {
  grid-area: ce;
  margin-top: 0 !important;
} /* ensure no offset */
#toggle-summary {
  grid-area: hide;
}

/* Make the CE dropdown fill its cell and match button sizing */
#ce-panel .dropdown,
#ce-panel .dropdown-toggle {
  width: 100%;
}

/* Normalize button heights so the dropdown matches Hide Table */
.controls-grid .uniform-btn,
.controls-grid .dropdown-toggle.uniform-btn {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  line-height: 1.25;
  white-space: nowrap;
}

/* Optional: give the dropdown caret a bit of breathing room */
.controls-grid .dropdown-toggle.uniform-btn::after {
  margin-left: 0.5rem;
}

#ce-charts {
  position: relative;
}
/* --- CE split charts --- */
.chart-split .chart-block {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding-top: 0vh;
  margin-top: 0;
}
.chart-split .chart {
  width: 100%;
  height: clamp(180px, 22vh, 280px); /* responsive chart height */
}

/* legends */
.chart-legend {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.25rem;
}
.chart-legend {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
  cursor: pointer;
  user-select: none;
}
.chart-legend .legend-item.disabled {
  opacity: 0.5;
}
.chart-legend {
  width: clamp(8px, 0.8vw, 12px);
  height: clamp(8px, 0.8vw, 12px);
  border-radius: 50%;
  display: inline-block;
}

/* gridlines look faint */
.ce-grid .tick line {
  opacity: 0.25;
}
/* Row that holds Surv/Mort + CE buttons */
#ce-top-controls {
  display: flex;
  flex-wrap: wrap; /* allows wrap on very small screens */
  align-items: center;
  gap: 0.5rem; /* space between buttons */
}

/* Make sure button text never breaks to a new line */
#ce-top-controls .btn {
  white-space: nowrap;
}

/* Give the Grafting button enough minimum width so the label fits */
#btn-graft-toggle {
  width: 7.5vw !important;
} /* tweak if you want more/less */

/* CE-only UI: hidden by default; shown only when body has .ce-on */
[data-ce-only="1"] {
  display: none !important;
}
.ce-on [data-ce-only="1"] {
  display: inline-flex !important;
}
@media (max-width: 576px) {
  .ce-on [data-ce-only="1"] {
    display: block !important;
  }
}

/* When Comparative Effectiveness is on, completely remove the CI button */
body.ce-on #toggle-ci {
  display: none !important;
}
/* Ensure the CE toggle behaves like a button when it replaces CI */
#ce-menu {
  display: inline-flex;
}

/* --- Range hover tips (CE mode, both graphs) --- */
.range-hover-tip {
  position: absolute;
  top: clamp(-20px, -2vw, -28px); /* sits above the slider */
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: 1;
  padding: clamp(2px, 0.3vw, 4px) clamp(4px, 0.5vw, 6px);
  border-radius: clamp(4px, 0.4vw, 6px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  pointer-events: none; /* purely informational */
  z-index: 2;
  white-space: nowrap;
}
.range-hover-tip::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: clamp(-3px, -0.4vw, -5px);
  transform: translateX(-50%);
  border: clamp(4px, 0.4vw, 6px) solid transparent;
  border-top-color: #111; /* little arrow */
}
.range-hover-tip.hidden {
  display: none;
}

/* Bootstrap-select: normal weight for both selected values and placeholders */
.bootstrap-select > .dropdown-toggle,
.bootstrap-select > .dropdown-toggle .filter-option-inner-inner,
.bootstrap-select > .dropdown-toggle.bs-placeholder,
.bootstrap-select > .dropdown-toggle.bs-placeholder .filter-option-inner-inner {
  font-weight: 400 !important;
}

/* CE layout tweaks */
.ce-on #toggle-summary {
  display: none !important;
} /* get rid of 'Hide Table' in CE */
.ce-header .push-right {
  margin-left: auto;
}
/* keep CE top controls from stretching */
#ce-top-controls > * {
  flex: 0 0 auto;
}

/* --- CE menu alignment --- */
.ce-menu-stack {
  display: inline-flex; /* sit inline next to the button */
  flex-direction: column; /* label above the button */
  align-items: flex-start; /* left-align inside the mini-column */
  align-self: flex-start; /* TOP-align within the outer flex row */
  vertical-align: top; /* if the parent isn't flex, still top-align */
  margin-top: -1.5vh !important;
}
.ce-menu-stack .ce-label {
  margin: 0 0 0.2rem 0; /* tighten the gap above the dropdown */
  line-height: 1; /* prevents the label from “sinking” */
  font-size: 0.875rem; /* optional: keep label compact */
}

/* CE summary tables: make them a fixed/scrollable block */
#chart-top-summary,
#chart-bottom-summary {
  max-height: 15vh; /* change to the height you want */
  overflow-y: auto; /* scroll if content exceeds height */
  overflow-x: hidden;
}

/* Optional: tighten row height if you want the tables shorter */
#chart-top-summary table td,
#chart-top-summary table th,
#chart-bottom-summary table td,
#chart-bottom-summary table th {
  padding: clamp(2px, 0.3vw, 4px) clamp(4px, 0.6vw, 8px); /* responsive padding */
  line-height: 0.7; /* makes rows more compact */
}

/* CE header zones */
#ce-top-left {
  flex: 0 0 auto;
}
#ce-top-center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
#ce-top-right {
  flex: 0 0 auto;
}

/* inline label next to dropdown */
#ce-inline-label {
  white-space: nowrap;
  font-weight: 600;
}

/* CE label size */
#ce-inline-label {
  /*font-size: clamp(16px, 1.8vw, 22px); /* scales nicely */
  font-size: 1vw;
  font-weight: 600;
  line-height: 1.1;
  margin-right: 0.5rem;
}

/* === CE controls: auto-size to content === */
#ce-top-controls .btn,
#chart-top-head .btn,
#chart-bottom-head .btn,
#ce-top-controls .dropdown-toggle,
#chart-top-head .dropdown-toggle,
#chart-bottom-head .dropdown-toggle {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

#ce-top-controls .dropdown,
#ce-top-controls .btn-group,
#chart-top-head .dropdown,
#chart-top-head .btn-group,
#chart-bottom-head .dropdown,
#chart-bottom-head .btn-group {
  width: auto !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
}

/* If you previously set any equal widths for CE, neutralize them here */
#btn-graft-toggle,
#btn-cor-toggle,
#ce-menu {
  min-width: 0 !important;
}

/* Make sure CE chart containers don’t add unexpected left padding */
#chart-top,
#chart-bottom {
  padding-left: 0;
}

/* (Optional) If you ever want to drive this via a CSS var */
.ce-on #chart-top-summary,
.ce-on #chart-bottom-summary {
  margin-left: var(--ce-left, clamp(40px, 4vw, 60px));
  max-width: calc(100% - var(--ce-left, clamp(40px, 4vw, 60px)));
}

/* CE-only: shrink the inline "Select:" label a touch */
.ce-on #ce-inline-label,
.ce-on .ce-select-label {
  font-size: 0.8vw;
  line-height: 1.1;
  opacity: 1;
  margin-right: 0.35rem;
}
/* CE-only: move caret to the LEFT for the CE comparison dropdown */
.ce-on #ce-menu.dropdown-toggle::after {
  content: none !important; /* hide Bootstrap’s right-side caret */
}

.ce-on #ce-menu.dropdown-toggle::before {
  content: "";
  display: inline-block;
  vertical-align: 0.255em;
  border-top: 0.3em solid currentColor; /* the little triangle */
  border-right: 0.3em solid transparent;
  border-left: 0.3em solid transparent;
  margin-right: 0.45rem; /* space between caret and text */
}

/* Optional: a touch of left padding so the text doesn't hug the caret */
.ce-on #ce-menu.btn {
  padding-left: 0.6rem;
}

#summary-wrapper {
  transition: opacity 0.3s ease-in-out;
  overflow: hidden;
}

#summary-wrapper:not(.show) {
  display: none;
  opacity: 0;
}

#summary-wrapper.show {
  display: block;
  opacity: 1;
}

.minor-outcomes {
  font-size: 1.3vh;
}

.responsive-svg {
  width: 100%;
}

/* Center ALL chart SVGs */
#chart > svg,
#chart-top > svg,
#chart-bottom > svg,
#ce-charts svg {
  display: block; /* make them block-level */
  margin-left: auto; /* center */
  margin-right: auto; /* center */
  max-width: 100%; /* safety */
}

/* Make axis tick labels a bit smaller across all SVG charts */
#chart svg .x-axis text,
#chart svg .y-axis text,
#ce-charts svg .x-axis text,
#ce-charts svg .y-axis text {
  font-size: 1vh; /* ticks */
  line-height: 1; /* keeps labels tight */
}

/* Make axis titles slightly smaller too */
#chart svg .axis-label,
#ce-charts svg .axis-label {
  font-size: 1.4vh !important; /* axis titles */
  font-weight: 600; /* optional: keep them readable */
}

/* CE summary headers: match non-CE gray header styling */
#chart-top-summary thead th,
#chart-bottom-summary thead th {
  background-color: #f0f0f0 !important;
  border: 1px solid #ccc;
  padding: clamp(3px, 0.4vw, 6px) clamp(4px, 0.6vw, 8px);
  text-align: center;
  vertical-align: middle;
}

/* ===== CE summary tables (width managed by JS) ===== */
.ce-summary {
  margin-top: clamp(
    3px,
    0.4vw,
    6px
  ); /* a little breathing room below each chart */
  overflow: hidden; /* guards against 1px rounding overflow */
}

.ce-summary table {
  table-layout: fixed; /* enforces identical column widths */
  width: 100%; /* fill the container we’ll size in JS */
}
/* Desktop: show desktop text, hide mobile text */
.mobile-text {
  display: none;
}

.desktop-text {
  display: inline;
}
/* --- CE chart headers (title + right-side button) --- */
.ce-chart-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* empty left | title | button on right */
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.25rem 0;
}
.ce-chart-header .header-right {
  grid-column: 3;
  justify-self: end;
}
#chart-bottom .inline-legend .legend-title {
  /* hide the old in-plot title for COR only */
  display: none !important;
}

/* CE header rows: 3 cells (left | center | right) on one line */

#ce-top-center,
#ce-bottom-center {
  justify-self: center;
}
#ce-top-right,
#ce-bottom-right {
  justify-self: end;
  display: inline-flex;
  gap: 0.5rem;
}
#ce-top-left,
#ce-bottom-left {
  justify-self: start;
  display: inline-flex;
  gap: 0.5rem;
}
.ce-header h5,
.ce-chart-title {
  margin: 0;
}

.ce-center-row {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}
#ce-menu-slot > * {
  margin: 0;
}

/* Y-axis range buttons */
.y-range-controls {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  z-index: 10;
  pointer-events: auto;
}
#y-range-buttons-ce {
  margin-right: clamp(12px, 1.3vw, 20px);
}
#hdef {
  width: clamp(80px, 8vw, 120px) !important;
  margin-left: 0.4vw !important;
  padding-left: 0.5vw !important;
  box-sizing: border-box !important;
}
#ageN {
  margin-left: 0.4vw !important;
  padding-left: 0.5vw !important;
  box-sizing: border-box !important;
}
/* Align Race/Ethnicity and Payor/Insurance info buttons with Height/Weight */
.left-col .aligned-row:has(#racemulti) .aligned-label,
.left-col .aligned-row:has(#payordata) .aligned-label {
  width: 27% !important;
}

.left-col .aligned-row:has(#racemulti) .aligned-icon,
.left-col .aligned-row:has(#payordata) .aligned-icon {
  width: 1% !important;
}

.left-col .aligned-row:has(#racemulti) .small-select-wrapper,
.left-col .aligned-row:has(#payordata) .small-select-wrapper {
  width: 70% !important;
  flex: 0 0 70% !important;
}
.middle-col .narrow-select-row:has(#hdef) .small-select-wrapper {
  padding-left: 0 !important;
  margin-left: 0 !important;
  flex: 0 0 var(--rc-select) !important;
  width: var(--rc-select) !important;
  min-width: var(--rc-select) !important;
  max-width: var(--rc-select) !important;
}
.y-range-controls .y-range-title {
  font-size: 1.5vh; /*Scale(%) font size*/
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5vh;
  color: #333;
}
.y-range-controls .btn-y-range {
  font-family: var(--ui-font);
  font-size: 0.85rem;
  padding: 0;
  min-width: 0px;
  white-space: nowrap;
  border: 1px solid #6c757d;
  background: #fff;
  color: #333;
  cursor: pointer;
  border-radius: 0.25rem;
  transition: all 0.2s;
}
.y-range-controls .btn-y-range:hover {
  background: #f8f9fa;
}
.y-range-controls .btn-y-range.active {
  background: #6495ed;
  color: #fff;
  border-color: #6495ed;
}
@media (max-width: 992px) {
  .ce-chart-title {
    font-size: 0.9rem !important;
  }
}
@media (max-width: 576px) {
  .ce-chart-title {
    font-size: 0.85rem !important;
  }
}

#chart-top-summary,
#chart-bottom-summary {
  margin-top: -5vh !important;
  margin-left: 7.25vw !important;
}

.ce-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 0.25rem;
  gap: 0.5rem;
}
.ce-separator.shortened {
  margin-left: clamp(60px, 6.5vw, 100px) !important;
}
.ce-separator-bottom.shortened {
  margin-left: clamp(60px, 6.5vw, 100px) !important;
}
.ce-chart-title {
  text-align: center;
  margin: 0;
  font-size: clamp(0.75rem, 0.7vw, 0.95rem) !important;
  font-weight: 600;
}
#ce-menu-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

#summary-wrapper {
  margin-top: 0px !important;
  margin-left: 7.75vw !important;
  max-width: calc(75% - clamp(50px, 5vw, 80px)); /* Match graph width */
  margin-bottom: 1rem;
}

#summary-table table {
  font-size: 0.65vw !important;
  border-collapse: collapse;
  width: 100%;
}

#summary-table th,
#summary-table td {
  border: 1px solid #ccc;
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}

#summary-table thead th {
  background-color: #f0f0f0;
}

#risk {
  padding-top: 2vh;
}

/* Style for the CE toggle button */
#toggle-alt {
  background-color: #f28080 !important;
  border-color: #f28080 !important;
  color: #ffffff !important;
}

#toggle-alt:hover {
  background-color: #e06060 !important;
  border-color: #e06060 !important;
}

#toggle-alt:focus {
  box-shadow: 0 0 0 0.25rem rgba(242, 128, 128, 0.5) !important;
}

#toggle-alt:disabled {
  background-color: #cccccc !important;
  border-color: #cccccc !important;
  color: #666666 !important;
  opacity: 0.65;
}

.controls-grid {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}

.controls-grid #toggle-summary {
  order: 1;
}

.controls-grid #toggle-alt,
.controls-grid .tooltip-wrapper:has(#toggle-alt) {
  order: 2;
}

.controls-grid #ce-panel {
  order: 3;
}

.field-warning {
  display: none;
  color: #a94442;
  font-size: 1.3vh;
  margin-left: 25%;
}
.tooltip-wrapper {
  display: inline-block;
}

/* ----- ANIMATED NUMBER TRANSITIONS ----- */
.estimate-cell {
  display: inline-block;
}

/* ============================================================
   MOBILE & TABLET LAYOUT - CONSOLIDATED
   Targets screens up to 1024px
   ============================================================ */

@media (max-width: 1024px) {
  /* Swipe indicator hint - positioned in tab area */
.swipe-hint {
  text-align: center;
  font-size: 10px;
  color: #999;
  padding: 4px 0;
  margin-top: -5px;
  margin-bottom: 5px;
}

.swipe-hint.hidden {
  display: none;
}
  /* Prevent horizontal scrolling on mobile */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .left-section,
  .left-col,
  .middle-col,
  .right-col,
  .question-box {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  .mobile-only-header {
    display: block !important;
  }
  /* Hide the Hide Table button in CE mode on mobile */
  body.ce-on #mobileChartContainer #toggle-summary,
  body.ce-on #toggle-summary {
    display: none !important;
  }
  /* Hide CE-only buttons when not in CE mode */
  #mobileChartContainer #btn-graft-toggle,
  #mobileChartContainer #btn-cor-toggle {
    display: none !important;
  }

  /* Show CE-only buttons only when in CE mode */
  body.ce-on #mobileChartContainer #btn-graft-toggle,
  body.ce-on #mobileChartContainer #btn-cor-toggle {
    display: inline-flex !important;
  }
  /* ----- SHOW MOBILE HEADER, HIDE DESKTOP ELEMENTS ----- */
  .mobile-frozen-header {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  /* Hide desktop header */
  .header-row {
    display: none !important;
  }

  /* Hide desktop right section */
  .right-section {
    display: none !important;
  }

  /* Hide firebrick text */
  .firebrick-text {
    display: none !important;
  }

  /* ----- BODY SPACING FOR FROZEN HEADER ----- */
  body {
    padding-top: 150px;
    overflow-x: hidden;
    background: #f5f5f5 !important;
  }

  /* ----- MOBILE TOP BAR ----- */
  .mobile-top-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    padding: 8px 12px;
    gap: 10px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(180deg, #fff 0%, #f8f9fa 100%);
  }

  .mobile-logo {
    height: 48px;
    width: auto;
  }

  .mobile-title {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
  }

  .mobile-title .highlight {
    color: #6495ed;
    font-style: italic;
  }

  .mobile-nav-btn {
    background: #f0f0f0;
    border: 1px solid #ddd;
    font-size: 18px;
    color: #555;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s;
  }

  .mobile-nav-btn:active {
    background: #e0e0e0;
    transform: scale(0.95);
  }

  /* ----- MOBILE VALIDATION MESSAGE STYLING ----- */
  .mobile-validation-msg {
    background: #fff3cd;
    color: #856404;
    padding: 10px 15px;
    font-size: 13px;
    line-height: 1.4;
    border-bottom: 1px solid #ffc107;
  }

  .mobile-validation-msg.error {
    background: #f8d7da;
    color: #721c24;
    border-bottom: 1px solid #f5c6cb;
  }

  #mobile-validation-text {
    text-align: center;
  }

  /* ----- MINI RESULTS TABLE ----- */
  .mobile-mini-results {
    padding: 8px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }

  .mobile-mini-results table {
    width: 100%;
    font-size: 12px;
    border-collapse: collapse;
    table-layout: fixed;
  }

  .mobile-mini-results th,
  .mobile-mini-results td {
    padding: 6px 8px;
    text-align: center;
    border: 1px solid #ddd;
  }

  .mobile-mini-results th {
    background: #e8e8e8;
    font-weight: 600;
    color: #333;
    font-size: 11px;
  }

  .mobile-mini-results td {
    background: #fff;
    font-weight: 500;
  }

  .mobile-mini-results .outcome-name {
    text-align: left;
    font-weight: 600;
  }

  /* ----- DRAWER TOGGLE BUTTON ----- */
  .mobile-drawer-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px;
    background: linear-gradient(180deg, #e9ecef 0%, #dee2e6 100%);
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s;
  }

  /* Style the mobile firebrick warning text */
  .firebrick-text.mobile-text {
    display: block !important;
    text-align: center;
    padding: 10px 16px;
    margin: 0;
  }

  .mobile-drawer-toggle:active {
    background: linear-gradient(180deg, #dee2e6 0%, #ced4da 100%);
  }

  .mobile-drawer-toggle .drawer-toggle-text {
    font-size: 13px;
    color: #6495ed;
    font-weight: 500;
  }

  /* ----- DRAWER PANEL ----- */
  .mobile-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background: #fff;
  }

  .mobile-drawer.open {
    max-height: 71vh;
    overflow-y: auto;
    border-top: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
  }

  .mobile-drawer-content {
    padding: 12px;
  }

  /* Drawer tabs */
  .mobile-drawer .nav-tabs {
    border-bottom: 2px solid #dee2e6;
    margin-bottom: 12px;
    display: flex;
    justify-content: space-around;
  }

  .mobile-drawer .nav-tabs .nav-item {
    flex: 1;
  }

  .mobile-drawer .nav-tabs .nav-link {
    font-size: 13px;
    padding: 10px 8px;
    color: #666;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    text-align: center;
    width: 100%;
    background: transparent;
  }

  .mobile-drawer .nav-tabs .nav-link.active {
    color: #6495ed;
    border-bottom-color: #6495ed;
    font-weight: 600;
    background: transparent;
  }

  /* Tab panes */
  .mobile-drawer .tab-pane {
    display: none;
  }

  .mobile-drawer .tab-pane.show.active {
    display: block !important;
  }

  .mobile-drawer .tab-content {
    background: #fff;
  }

  /* Drawer validation alerts */
  .mobile-drawer-alert {
    font-size: 13px !important;
    padding: 12px !important;
    margin: 10px !important;
    border-radius: 6px !important;
  }

  .mobile-drawer-alert-title {
    font-weight: 600;
    margin-bottom: 8px;
  }

  .mobile-drawer-alert ul {
    margin: 0 !important;
    padding-left: 20px !important;
  }

  .mobile-drawer-alert li {
    margin-bottom: 4px;
  }

  /* ----- RISK TABLE CONTAINER (Outcomes Tab) ----- */
  #mobileRiskTableContainer {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
  }

  #mobileRiskTableContainer #riskTable {
    width: 100%;
    font-size: 13px;
  }

  #mobileRiskTableContainer #riskTable th,
  #mobileRiskTableContainer #riskTable td {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }

  /* ----- CHART CONTAINER (Long Term Tab) - UNIFIED FONT SIZE ----- */
  #mobileChartContainer {
    overflow-y: auto;
    overflow-x: visible;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
    padding-left: 0 !important;
    font-size: 13px;
  }

  /* Base font size for all elements in chart container */
  #mobileChartContainer,
  #mobileChartContainer p,
  #mobileChartContainer span,
  #mobileChartContainer label,
  #mobileChartContainer div {
    font-size: 13px !important;
  }

  /* Toggle buttons row */
  #mobileChartContainer .d-flex {
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }

  /* All buttons in chart container - uniform size */
  #mobileChartContainer .uniform-btn,
  #mobileChartContainer .btn,
  #mobileChartContainer button {
    font-size: 12px !important;
    padding: 8px 12px !important;
    white-space: nowrap;
    line-height: 1.4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Chart wrapper */
  #mobileChartContainer .chart-wrapper {
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  /* Legend */
  #mobileChartContainer #legend-wrapper,
  #mobileChartContainer .chart-legend {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
  }

  #mobileChartContainer .legend-item {
    display: flex !important;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    background: #f0f0f0;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px !important;
  }

  #mobileChartContainer .legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }

  /* Y-range controls (Scale) - moved below time range on mobile */
  #mobileChartContainer .y-range-controls {
    position: static !important;
    display: flex;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    padding: 0 15px !important;
    align-items: center;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    z-index: auto !important;
  }
  #mobileChartContainer .mobile-buttons-wrapper {
    margin-top: 0px !important;
  }
  #mobileChartContainer .y-range-title {
    font-size: 13px !important; /*Scale (%) Font in mobile */
    font-weight: 600;
    width: auto !important;
    flex: 0 0 auto !important;
    margin-bottom: 0 !important;
    margin-right: 8px !important;
    text-align: left;
  }

  #mobileChartContainer .y-range-controls .btn-y-range {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-size: 10px !important;
    padding: 6px 4px !important;
    text-align: center !important;
  }

  #mobileChartContainer .btn-y-range {
    font-size: 10px !important;
    padding: 6px 6px !important;
  }

  /* Chart SVG */
  #mobileChartContainer #chart {
    width: 100%;
    min-height: 250px;
  }

  /* CE chart containers */
  #mobileChartContainer #chart-top,
  #mobileChartContainer #chart-bottom {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Standard chart container - allow it to expand */
  #mobileChartContainer #chart {
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }
  /* Standard chart SVG - let JavaScript control width */
  #mobileChartContainer #chart svg {
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    min-height: 250px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
  }

  /* CE chart SVGs - fill container */
  #mobileChartContainer #chart-top svg,
  #mobileChartContainer #chart-bottom svg {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 250px;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
  }

  /* SVG text elements (axis labels) - slightly smaller for charts */
  #mobileChartContainer svg text {
    font-size: 11px !important;
  }

  #mobileChartContainer .chart-block {
    margin-bottom: 15px;
  }

  #mobileChartContainer .chart-block .chart {
    width: 100%;
    min-height: 200px;
  }

  /* Graph instructions */
  #mobileChartContainer #graphInstructions {
    font-size: 13px !important;
    color: #666;
    margin: 10px 0;
  }

  /* ALL tables in chart container - unified font size */
  #mobileChartContainer table,
  #mobileChartContainer #summary-wrapper table,
  #mobileChartContainer #summary-table,
  #mobileChartContainer .ce-summary-table,
  #mobileChartContainer #chart-top-summary table,
  #mobileChartContainer #chart-bottom-summary table {
    font-size: 11px !important;
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: collapse;
    table-layout: auto;
  }

  #mobileChartContainer table th,
  #mobileChartContainer table td,
  #mobileChartContainer #summary-table th,
  #mobileChartContainer #summary-table td,
  #mobileChartContainer .ce-summary-table th,
  #mobileChartContainer .ce-summary-table td,
  #mobileChartContainer #chart-top-summary th,
  #mobileChartContainer #chart-top-summary td,
  #mobileChartContainer #chart-bottom-summary th,
  #mobileChartContainer #chart-bottom-summary td {
    font-size: 11px !important;
    padding: 6px 8px !important;
    line-height: 1.3 !important;
  }

  /* Mobile tooltip for disabled CE button */
.mobile-ce-btn-wrapper .tooltip-wrapper,
.mobile-buttons-wrapper .tooltip-wrapper {
  display: inline-block;
}

.mobile-ce-btn-wrapper .tooltip,
.mobile-buttons-wrapper .tooltip {
  font-size: 12px !important;
}

/* Ensure tooltips appear above the mobile drawer */
.mobile-frozen-header ~ .tooltip,
body > .tooltip {
  z-index: 99999 !important;
}

  /* CE table column widths on mobile */
  #mobileChartContainer .ce-summary-table colgroup col:first-child {
    width: 35% !important;
  }

  #mobileChartContainer .ce-summary-table colgroup col:not(:first-child) {
    width: auto !important;
  }

  #mobileChartContainer #summary-wrapper {
    margin: 10px 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  #mobileChartContainer #chart-top-summary,
  #mobileChartContainer #chart-bottom-summary {
    margin-top: 10px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  #mobileChartContainer .row {
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0px 0 !important;
  }

  #mobileChartContainer .range-flex {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  #mobileChartContainer .double-slider-box {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 15px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 5px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    border: none !important;
  }

  #mobileChartContainer .range-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    margin-right: 8px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  #mobileChartContainer .range-presets {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    box-sizing: border-box !important;
  }

  #mobileChartContainer .range-presets .btn,
  #mobileChartContainer .range-presets .preset-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-size: 10px !important;
    padding: 6px 4px !important;
    text-align: center !important;
  }

  #mobileChartContainer .preset-btn {
    font-size: 10px !important;
    padding: 6px 4px !important;
    line-height: 1 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  /* Hide the slider and input boxes on mobile */
  #mobileChartContainer .range-slider,
  #mobileChartContainer .input-box {
    display: none !important;
  }
  /* CE chart headers/titles */
  #mobileChartContainer .ce-chart-header,
  #mobileChartContainer .ce-chart-title,
  #mobileChartContainer h5 {
    font-size: 14px !important;
    font-weight: 600;
  }

  /* Dropdown menus */
  #mobileChartContainer .dropdown-menu,
  #mobileChartContainer .dropdown-item {
    font-size: 13px !important;
  }
  /* Fix CE Hide buttons - proper line height and alignment */
  #mobileChartContainer #btn-graft-toggle,
  #mobileChartContainer #btn-cor-toggle {
    font-size: 12px !important;
    padding: 6px 10px !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
  }

  /* Allow line breaks in summary table cells for 95% CI */
  #mobileChartContainer #summary-table td,
  #mobileChartContainer #summary-wrapper td {
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  /* Reduce white space above Grafting Strategy in CE view */
  #mobileChartContainer .ce-header,
  #mobileChartContainer #chart-top-head,
  #mobileChartContainer #chart-bottom-head {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
    padding: 0 !important;
  }

  #mobileChartContainer .chart-block {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }

  #mobileChartContainer #ce-charts {
    padding-top: 0 !important;
    margin-top: 5px !important;
  }

  #mobileChartContainer .ce-chart-title {
    font-size: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
  }

  #mobileChartContainer #y-range-buttons-ce {
    margin-top: 0px !important;
  }

  #mobileChartContainer .chart-block:first-child {
    margin-top: 0 !important;
  }

  #mobileChartContainer #ce-charts {
    padding-top: 0 !important;
    margin-top: 10px !important;
  }

  /* ----- SUMMARY CONTAINER (Summary Tab) ----- */
  #mobileSummaryContainer {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 10px;
  }

  #mobileSummaryContainer #clinical-summary {
    font-size: 13px;
  }

  /* ----- MAIN CONTENT LAYOUT ----- */
  .main-row {
    flex-direction: column !important;
    min-height: auto !important;
  }

  .left-section {
    width: 100% !important;
    padding: 0 !important;
    background: #f5f5f5 !important;
  }

  /* ----- QUESTION BOX - STACKED LAYOUT ----- */
  .question-box {
    flex-direction: column !important;
    border: none !important;
    border-radius: 0 !important;
  }

  .question-box .left-col,
  .question-box .middle-col,
  .question-box .right-col {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    background: #f5f5f5 !important;
  }

  /* ----- ALTERNATING SECTION BACKGROUNDS ----- */
  /* Required box content area */
  #required-box {
    background: #bcd9e2 !important;
    border-radius: 0 !important;
    padding: 10px 0px !important;
    margin: 0 !important;
    border: 2px solid transparent !important;
    border-top: none !important;
    box-shadow: none !important;
    transition: none !important;
  }

  #required-box.required-on {
    border-color: #dc3545 !important;
    border-top: none !important;
  }

  #required-box.required-pulse {
    animation: reqPulse 0.9s ease-in-out 4 !important;
  }

  /* Style the Required header text with light blue background */
  .left-col .box-title.mobile-only-header {
    background: #bcd9e2 !important;
    color: #fa0505 !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 2px solid transparent !important;
    border-bottom: none !important;
    transition: none !important;
  }

  /* Red border on header when required fields are missing */
  .left-col:has(#required-box.required-on) .box-title.mobile-only-header {
    border-color: #dc3545 !important;
    border-bottom: none !important;
  }

  /* Make header pulse along with content */
  .left-col:has(#required-box.required-pulse) .box-title.mobile-only-header {
    animation: reqPulse 0.9s ease-in-out 4 !important;
  }

  /* Ensure both elements pulse together on page load */
  #required-box.required-pulse,
  .left-col:has(#required-box.required-pulse) .box-title.mobile-only-header {
    animation: reqPulse 0.9s ease-in-out 4 !important;
    animation-delay: 0s !important;
  }

  #required-box::after {
    display: none !important;
  }

  .required-badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-bottom: 12px !important;
  }

  /* Section titles */
  .box-title {
    background: transparent !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
  }

  /* Content areas */
  .left-col,
  .middle-col > .middle-pad,
  .right-col {
    padding: 12px 16px !important;
  }

  /* Form rows */
  .aligned-row {
    background: transparent;
    padding: 2px 16px !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .aligned-row:last-child {
    border-bottom: none !important;
  }

  /* ----- LABELS ----- */
  .aligned-label,
  .aligned-label-normal,
  .narrow-label {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 35% !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    padding-right: 4px !important;
    order: 1 !important;
  }

  /* ----- INFO ICONS ----- */
  .aligned-icon {
    order: 3 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: auto !important;
    font-size: 14px !important;
    color: #6495ed !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(100, 149, 237, 0.1) !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
  }

  /* ----- FORM CONTROLS ----- */
  .aligned-radio,
  .small-select-wrapper {
    order: 2 !important;
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin-top: 0 !important;
    min-width: 120px !important;
  }

  .bootstrap-select,
  .bootstrap-select > .dropdown-toggle,
  select.form-select {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 14px !important;
    font-size: 14px !important;
  }

  .bootstrap-select > .dropdown-toggle {
    padding: 10px 14px !important;
    border-radius: 8px !important;
  }

  /* ----- CHECKBOXES/RADIOS ----- */
  .inline-radios {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  .inline-radios .form-check,
  .form-check.form-check-inline {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 8px 16px !important;
    margin: 0 !important;
    margin-bottom: 6px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  /* Unified checkbox rows - mobile */
  .cb-row {
    min-height: 44px !important;
    padding: 2px 16px !important;
    margin: 0 !important;
  }

  .cb-row input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin-right: 12px !important;
  }

  .cb-row label {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }

  .form-check-input {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    margin-right: 12px !important;
    margin-top: 0 !important;
    flex-shrink: 0 !important;
  }

  .form-check-label {
    font-size: 15px !important;
    line-height: 1.4 !important;
    flex: 1 !important;
  }

  /* ----- NUMERIC FIELDS ----- */
  .nowrap-row {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 160px !important;
    margin-top: 0 !important;
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .age-input,
  input[type="number"].form-control-sm {
    width: 80px !important;
    min-height: 14px !important;
    font-size: 14px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
  }

  .age-select,
  select.form-select-sm.age-select {
    min-width: 155px !important;
    width: auto !important;
    min-height: 14px !important;
    font-size: 14px !important;
    padding: 8px 28px 8px 10px !important;
    border-radius: 8px !important;
  }

  .narrow-number-row {
    flex-wrap: nowrap !important;
  }

  .narrow-number-row .aligned-label-normal {
    flex: 1 1 auto !important;
    order: 1 !important;
  }

  .narrow-number-row .aligned-icon {
    order: 3 !important;
  }

  .narrow-number-row .aligned-radio {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 140px !important;
    margin-top: 0 !important;
    order: 2 !important;
  }

  /* ----- DROPDOWN MENU IMPROVEMENTS ----- */
  .bootstrap-select .dropdown-menu {
    max-height: 50vh !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
  }

  .bootstrap-select .dropdown-menu li a {
    padding: 14px 16px !important;
    font-size: 14px !important;
  }

  .bootstrap-select .dropdown-menu li a:active {
    background: #6495ed !important;
    color: #fff !important;
  }

  .aligned-row:active {
    background: rgba(100, 149, 237, 0.08) !important;
  }

  .middle-col > .middle-pad {
    padding: 0 !important;
  }

  .middle-col,
  .right-col {
    display: block !important;
  }

  /* Hide CE-only buttons when NOT in CE mode */
  #btn-graft-toggle,
  #btn-cor-toggle {
    display: none !important;
  }

  /* Show CE-only buttons only when in CE mode */
  body.ce-on #btn-graft-toggle,
  body.ce-on #btn-cor-toggle {
    display: inline-flex !important;
  }

  /* Reduce white space in CE view */
  #mobileChartContainer #ce-charts {
    padding-top: 0 !important;
    margin-top: 5px !important;
  }

  #mobileChartContainer .ce-header,
  #mobileChartContainer #chart-top-head,
  #mobileChartContainer #chart-bottom-head {
    margin-top: 0 !important;
    margin-bottom: 3px !important;
    padding: 0 !important;
  }

  #mobileChartContainer .chart-block {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
  }

  /* Allow line breaks in summary table cells for 95% CI */
  #mobileChartContainer #summary-table td,
  #mobileChartContainer #summary-wrapper td {
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  /* Remove white space at top of CE view on mobile */
  body.ce-on #mobileChartContainer {
    padding-top: 0 !important;
  }

  body.ce-on #mobileChartContainer > .d-flex.justify-content-between {
    display: none !important;
  }

  body.ce-on #mobileChartContainer #ce-charts {
    margin-top: 0 !important;
  }

  body.ce-on #mobileChartContainer .chart-block:first-child {
    margin-top: 0 !important;
  }

  /* Keep drawer toggle button at bottom even when drawer is open */
  .mobile-drawer {
    order: 1;
  }

  .mobile-drawer-toggle {
    order: 2;
  }

  /* Push sidebar down below frozen header on mobile */
  #sidebar.offcanvas {
    top: 150px !important; /*18vh*/
    height: calc(100% - 150px) !important; /*18vh*/
  }

  /* ----- RIGHT-COL FIXES FOR MOBILE ----- */
  /* Remove padding from right-col container so rows control their own padding */
  .right-col {
    padding: 0 !important;
  }

  /* Style the CAD checkbox rows to look like aligned-rows */
  .right-col #cad-lesions-row {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  .right-col #cad-lesions-row .col-12 {
    padding: 0 !important;
  }

  .right-col #cad-lesions-row .cb-row {
    background: transparent !important;
    padding: 2px 16px !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    margin-bottom: 6px !important;
    width: 100% !important;
  }

  /* Ensure right-col aligned-icon goes to far right */
  .right-col .aligned-icon {
    order: 3 !important;
    margin-left: auto !important;
  }

  .right-col .aligned-radio,
  .right-col .small-select-wrapper {
    order: 2 !important;
  }

  /* Keep radio buttons inline for Coronary Artery Disease and Redo CABG */
  #numdisv-group,
  #redo-cabg-group {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
  }

  #numdisv-group .form-check.form-check-inline,
  #redo-cabg-group .form-check.form-check-inline {
    width: auto !important;
    min-height: auto !important;
    padding: 4px 1px !important;
    flex: 0 0 auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
  }

  #numdisv-group .form-check-input,
  #redo-cabg-group .form-check-input {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin-right: 0px !important;
  }

  #numdisv-group .form-check-label,
  #redo-cabg-group .form-check-label {
    font-size: 13px !important;
  }

  /* Remove all left spacing from chart elements on mobile */
  #mobileChartContainer,
  #mobileChartContainer .chart-wrapper,
  #mobileChartContainer #chart,
  #mobileChartContainer #chart svg {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* Remove white space above buttons in Standard Estimate view */
  #mobileChartContainer > .d-flex.justify-content-between {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #mobileChartContainer .align-y-axis {
    margin-left: 0 !important;
  }

  #mobileChartContainer .chart-wrapper {
    margin-top: 5px !important;
  }

  /* Remove white space in CE view */
  #mobileChartContainer #ce-charts {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #mobileChartContainer #ce-charts .chart-block {
    margin-top: 5px !important;
    padding-top: 0 !important;
  }

  #mobileChartContainer #ce-charts .chart-block:first-child {
    margin-top: 0 !important;
  }

  /* Remove margin from row containing time range slider */
  #mobileChartContainer .row.mt-3 {
    margin-top: 5px !important;
  }

  /* Remove all white space above content in drawer tabs */
  .mobile-drawer .nav-tabs {
    margin-bottom: 0 !important;
  }

  .mobile-drawer-content {
    padding: 0 !important;
  }

  .mobile-drawer .tab-content {
    padding: 0 !important;
  }

  #mobileChartContainer {
    padding-top: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;
  }

  #mobileRiskTableContainer {
    padding-top: 5px !important;
  }

  #mobileSummaryContainer {
    padding-top: 5px !important;
  }

  .row.mt-3:has(.double-slider-box) {
    display: flex;
    flex-direction: column;
  }

  .row.mt-3:has(.double-slider-box) > .col-md-8 {
    order: 2;
    width: 100%;
  }

  .row.mt-3:has(.double-slider-box) > .col-md-4 {
    order: 1;
    width: 100%;
    margin-bottom: 10px;
  }

  /* Add spacing between Survival % and 95% CI in summary table */
  #mobileChartContainer #summary-table td {
    line-height: 1.8;
  }
  /* Add spacing between % and 95% CI rows in summary table */
  #mobileChartContainer #summary-table td,
  #mobileChartContainer #summary-table th {
    line-height: 1.7 !important;
  }

  /* ============================================================
     MOBILE SECTION BACKGROUNDS - #e8e8e8
     ============================================================ */

  #demographics-section,
  #meds-section,
  #pulm-section,
  #cardiac-section,
  #valve-section,
  #prev-cardiac-section {
    background-color: #e8e8e8 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 10px 0 !important;
    margin-bottom: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ============================================================
   PREOPERATIVE MEDICATIONS - MOBILE REORDER
   ============================================================ */

  /* Make the row a flex column container on mobile */
  #meds-section .row.g-2 {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Flatten the column divs so cb-rows become direct flex children */
  #meds-section .row.g-2 > .col-12 {
    display: contents !important;
  }

  /* Set the order for each checkbox to place ADP at the end */
  #meds-section .cb-row:has(#medacei48) {
    order: 1 !important;
  }
  #meds-section .cb-row:has(#medgp) {
    order: 2 !important;
  }
  #meds-section .cb-row:has(#medinotr) {
    order: 3 !important;
  }
  #meds-section .cb-row:has(#medster) {
    order: 4 !important;
  }
  #meds-section .cb-row:has(#medcoum5days) {
    order: 5 !important;
  }
  #meds-section .cb-row:has(#medadp5days) {
    order: 6 !important;
  }

  /* Hide ADP Discontinued row when d-none class is present */
  #medadpidis-row.d-none {
    display: none !important;
  }

  /* Hide Atrial Fib Type row when it has inline display:none */
  #af-type-row[style*="display: none"] {
    display: none !important;
  }

  /* Style the ADP Discontinued row for mobile */
  #medadpidis-row:not(.d-none) {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    padding: 8px 12px !important;
    background-color: #e8e8e8 !important;
  }

  #medadpidis-row .aligned-label {
    flex: 1 1 auto !important;
    width: auto !important;
    white-space: nowrap !important;
    font-size: 14px !important;
  }

  #medadpidis-row .aligned-radio {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
  }

  #medadpidis-row #medadpidis {
    width: 80px !important;
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
  }

  /* ============================================================
   DEMOGRAPHICS SECTION - MOBILE ALIGNMENT FIX
   ============================================================ */

  /* Make Race/Ethnicity and Payor/Insurance dropdowns expand fully */
  #demographics-section .aligned-row .small-select-wrapper.nowrap-row {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
  }

  /* Push Height and Weight numeric fields to the right */
  #demographics-section .aligned-row .nowrap-row:not(.small-select-wrapper) {
    margin-left: auto !important;
    max-width: none !important;
    width: auto !important;
  }

  /* Make numeric inputs smaller to fit the formula:
   Input width = Dropdown space - Unit width - gap */
  #demographics-section .age-input,
  #demographics-section input[type="number"].form-control-sm {
    width: 70px !important;
    flex-shrink: 0 !important;
  }

  /* Ensure the nowrap-row container has proper width calculation */
  #demographics-section .aligned-radio.nowrap-row:not(.small-select-wrapper) {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }

  /* ============================================================
   LAB VALUES SECTION - MOBILE ALIGNMENT (match Height/Weight)
   ============================================================ */

  /* Push Lab Values numeric fields to the right */
  #lab-section .aligned-row .nowrap-row {
    margin-left: auto !important;
    max-width: none !important;
    width: auto !important;
  }

  /* Make Lab Values numeric inputs same width as Demographics */
  #lab-section .age-input,
  #lab-section input[type="number"].form-control-sm {
    width: 70px !important;
    flex-shrink: 0 !important;
  }

  /* Ensure Lab Values nowrap-row aligns to the right */
  #lab-section .aligned-radio.nowrap-row {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }

  /* INR field - add padding on right to simulate dropdown space */
  #lab-section .aligned-row:has(#inr) .nowrap-row::after {
    content: "";
    display: inline-block;
    width: 155px !important;
    flex-shrink: 0 !important;
  }
  /* Hide desktop text, show mobile text */
  .desktop-text {
    display: none !important;
  }

  .mobile-text {
    display: inline !important;
  }

  /* ============================================================
   EJECTION FRACTION - MOBILE ALIGNMENT FIX
   ============================================================ */

  /* Make the Ejection Fraction row align like other fields */
  .aligned-row:has(#hdef) {
    flex-wrap: nowrap !important;
  }

  /* Make label expand to push input and icon to the right */
  .aligned-row:has(#hdef) .aligned-label {
    flex: 1 1 auto !important;
    max-width: none !important;
  }

  /* Push input wrapper to the right */
  .aligned-row:has(#hdef) .small-select-wrapper {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
  }

  /* Keep icon close to input (remove auto margin) */
  .aligned-row:has(#hdef) .aligned-icon {
    margin-left: 8px !important;
  }

  /* Make Ejection Fraction input match other numeric fields */
  #hdef {
    width: 167px !important;
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
  }

  /* ============================================================
   ALL DROPDOWNS - MOBILE ALIGNMENT FIX
   Push dropdowns and info buttons to the right in middle/right columns
   ============================================================ */

  /* Target all narrow-select-row in cardiac, valve, arrhythmia, and prev-cardiac sections */
  #cardiac-section .narrow-select-row,
  #valve-section .narrow-select-row,
  #arrh-section .narrow-select-row,
  #prev-cardiac-section .narrow-select-row,
  #pocpci-row,
  #miwhenAlert + .narrow-select-row,
  .middle-col .narrow-select-row:has(#cardsymptimeofadm),
  .middle-col .narrow-select-row:has(#miwhen) {
    flex-wrap: nowrap !important;
  }

  /* Make labels expand to push dropdowns and icons to the right */
  #cardiac-section .narrow-select-row .aligned-label,
  #valve-section .narrow-select-row .aligned-label,
  #arrh-section .narrow-select-row .aligned-label,
  #prev-cardiac-section .narrow-select-row .aligned-label,
  #pocpci-row .aligned-label,
  .middle-col .narrow-select-row:has(#cardsymptimeofadm) .aligned-label,
  .middle-col .narrow-select-row:has(#miwhen) .aligned-label {
    flex: 1 1 auto !important;
    max-width: none !important;
  }

  /* Push dropdown wrappers to the right */
  #cardiac-section .narrow-select-row .small-select-wrapper,
  #valve-section .narrow-select-row .small-select-wrapper,
  #arrh-section .narrow-select-row .small-select-wrapper,
  #prev-cardiac-section .narrow-select-row .small-select-wrapper,
  #pocpci-row .small-select-wrapper,
  .middle-col .narrow-select-row:has(#cardsymptimeofadm) .small-select-wrapper,
  .middle-col .narrow-select-row:has(#miwhen) .small-select-wrapper {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
  }

  /* Keep icons close to dropdowns (remove auto margin) */
  #cardiac-section .narrow-select-row .aligned-icon,
  #valve-section .narrow-select-row .aligned-icon,
  #arrh-section .narrow-select-row .aligned-icon,
  #prev-cardiac-section .narrow-select-row .aligned-icon,
  #pocpci-row .aligned-icon,
  .middle-col .narrow-select-row:has(#cardsymptimeofadm) .aligned-icon,
  .middle-col .narrow-select-row:has(#miwhen) .aligned-icon {
    margin-left: 8px !important;
  }

  /* ============================================================
   PRIMARY SYMPTOM & MI-WHEN - MOBILE ALIGNMENT FIX
   ============================================================ */

  /* Target rows by their select element IDs */
  .narrow-select-row:has(#cardsymptimeofadm),
  .narrow-select-row:has(#miwhen) {
    flex-wrap: nowrap !important;
  }

  /* Make labels expand */
  .narrow-select-row:has(#cardsymptimeofadm) .aligned-label,
  .narrow-select-row:has(#miwhen) .aligned-label {
    flex: 1 1 auto !important;
    max-width: none !important;
  }

  /* Push dropdown wrappers to the right */
  .narrow-select-row:has(#cardsymptimeofadm) .small-select-wrapper,
  .narrow-select-row:has(#miwhen) .small-select-wrapper {
    flex: 0 0 auto !important;
    width: auto !important;
    margin-left: auto !important;
  }

  /* Keep icons close to dropdowns */
  .narrow-select-row:has(#cardsymptimeofadm) .aligned-icon,
  .narrow-select-row:has(#miwhen) .aligned-icon {
    margin-left: 8px !important;
  }

  /* ============================================================
     CALCULATIONS SECTION - MOBILE ALIGNMENT FIX
     ============================================================ */

  /* Add proper padding to calculation rows */
  #calc-section .aligned-row.narrow-number-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 2px 16px !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* Make label expand to push input and icon to the right */
  #calc-section .aligned-label-normal {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    order: 1 !important;
  }

  /* Style the numeric input - fixed width, aligned right */
  #calc-section .aligned-radio.nowrap-row {
    flex: 0 0 auto !important;
    width: 80px !important;
    max-width: 80px !important;
    order: 2 !important;
    margin-left: auto !important;
  }

  #calc-section input[type="number"].form-control-sm {
    width: 100% !important;
    text-align: right !important;
  }

  /* Move info icon to the right, after the input */
  #calc-section .aligned-icon {
    order: 3 !important;
    margin-left: 8px !important;
  }

  /* ============================================================
     FOOTER SECTION - MOBILE LAYOUT FIX
     ============================================================ */

  /* Make the footer container stack vertically */
  .left-section > .d-flex.align-items-start.mt-1 {
    flex-direction: column !important;
    padding: 12px 16px !important;
    gap: 12px !important;
  }

  /* Text section - full width */
  .left-section > .d-flex.align-items-start.mt-1 > div:first-child {
    flex: 1 1 100% !important;
    width: 100% !important;
  }

  /* Buttons section - full width, horizontal layout */
  .left-section > .d-flex.align-items-start.mt-1 > div.text-end {
    flex: 1 1 100% !important;
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    text-align: left !important;
  }

  /* Remove right margin from Full Screenshot button */
  .left-section > .d-flex.align-items-start.mt-1 #fullScreenshotBtn {
    margin-right: 0 !important;
  }
  /* ============================================================
     FIXED WIDTH DROPDOWNS - MOBILE
     All these dropdowns match the width of Mech Circ Support
     ============================================================ */

  /* Target the small-select-wrapper containing these dropdowns */
  .aligned-row:has(#chrlungd) .small-select-wrapper,
  .aligned-row:has(#cvd) .small-select-wrapper,
  .aligned-row:has(#heartfailtmg) .small-select-wrapper,
  .aligned-row:has(#classnyh) .small-select-wrapper,
  .aligned-row:has(#mcs) .small-select-wrapper,
  .aligned-row:has(#cardsymptimeofadm) .small-select-wrapper,
  .aligned-row:has(#miwhen) .small-select-wrapper,
  .aligned-row:has(#pocpci) .small-select-wrapper,
  .aligned-row:has(#vdinsufa) .small-select-wrapper,
  .aligned-row:has(#vdinsufm) .small-select-wrapper,
  .aligned-row:has(#vdinsuft) .small-select-wrapper,
  .aligned-row:has(#arrhythatrfib) .small-select-wrapper,
  .aligned-row:has(#arrhythafib) .small-select-wrapper,
  .aligned-row:has(#arrhythaflutter) .small-select-wrapper,
  .aligned-row:has(#arrhythvv) .small-select-wrapper,
  .aligned-row:has(#arrhythsss) .small-select-wrapper,
  .aligned-row:has(#arrhyththird) .small-select-wrapper,
  .aligned-row:has(#arrhythsecond) .small-select-wrapper,
  .aligned-row:has(#incidenc) .small-select-wrapper,
  .aligned-row:has(#prvalveproc) .small-select-wrapper,
  .aligned-row:has(#pocint) .small-select-wrapper {
    flex: 0 0 175px !important;
    width: 175px !important;
    min-width: 175px !important;
    max-width: 175px !important;
  }

  /* Ensure the bootstrap-select inside also respects the width */
  .aligned-row:has(#chrlungd) .bootstrap-select,
  .aligned-row:has(#cvd) .bootstrap-select,
  .aligned-row:has(#heartfailtmg) .bootstrap-select,
  .aligned-row:has(#classnyh) .bootstrap-select,
  .aligned-row:has(#mcs) .bootstrap-select,
  .aligned-row:has(#cardsymptimeofadm) .bootstrap-select,
  .aligned-row:has(#miwhen) .bootstrap-select,
  .aligned-row:has(#pocpci) .bootstrap-select,
  .aligned-row:has(#vdinsufa) .bootstrap-select,
  .aligned-row:has(#vdinsufm) .bootstrap-select,
  .aligned-row:has(#vdinsuft) .bootstrap-select,
  .aligned-row:has(#arrhythatrfib) .bootstrap-select,
  .aligned-row:has(#arrhythafib) .bootstrap-select,
  .aligned-row:has(#arrhythaflutter) .bootstrap-select,
  .aligned-row:has(#arrhythvv) .bootstrap-select,
  .aligned-row:has(#arrhythsss) .bootstrap-select,
  .aligned-row:has(#arrhythsecond) .bootstrap-select,
  .aligned-row:has(#arrhyththird) .bootstrap-select,
  .aligned-row:has(#incidenc) .bootstrap-select,
  .aligned-row:has(#prvalveproc) .bootstrap-select,
  .aligned-row:has(#pocint) .bootstrap-select {
    width: 100% !important;
  }

  /* Chronic Lung Disease and Cerebrovascular Disease - align dropdowns to the right */
  .aligned-row:has(#chrlungd),
  .aligned-row:has(#cvd) {
    flex-wrap: nowrap !important;
  }

  .aligned-row:has(#chrlungd) .aligned-label,
  .aligned-row:has(#cvd) .aligned-label {
    flex: 1 1 auto !important;
    max-width: none !important;
  }

  .aligned-row:has(#chrlungd) .small-select-wrapper,
  .aligned-row:has(#cvd) .small-select-wrapper {
    margin-left: auto !important;
  }

  .aligned-row:has(#chrlungd) .aligned-icon,
  .aligned-row:has(#cvd) .aligned-icon {
    margin-left: 8px !important;
  }

  /* Reorder carotid checkboxes - put Left Carotid before Prior Carotid Surgery */
  .row.g-2:has(#cvdpcarsurg) {
    display: flex !important;
    flex-direction: column !important;
  }

  .row.g-2 > .col-12:has(#cvdpcarsurg) {
    order: 2 !important;
  }

  .row.g-2 > .col-12:has(#cvdstenlft) {
    order: 1 !important;
  }

  
}

/* ============================================================
   PHONE-SPECIFIC (smaller screens)
   ============================================================ */

@media (max-width: 576px) {
  body {
    padding-top: 150 px;
  }

  .mobile-top-bar {
    padding: 6px 10px;
  }

  .mobile-logo {
    height: 48px;
  }

  .mobile-title {
    font-size: 18px;
  }

  .mobile-mini-results th,
  .mobile-mini-results td {
    padding: 5px 6px !important;
    font-size: 11px !important;
  }

  .mobile-mini-results th {
    font-size: 10px !important;
  }

  .aligned-label,
  .aligned-label-normal,
  .narrow-label {
    font-size: 14px !important;
  }

  .form-check-label {
    font-size: 14px !important;
  }

  .cb-row label {
    font-size: 14px !important;
  }

  .cb-row {
    padding: 2px 12px !important;
  }

  .aligned-row {
    padding: 2px 12px !important;
  }
}

/* ============================================================
   DESKTOP - HIDE MOBILE HEADER
   ============================================================ */

@media (min-width: 1025px) {
  .mobile-frozen-header {
    display: none !important;
  }
}

/* Sidebar section styling */
.sidebar-section {
  border-bottom: 1px solid #dee2e6;
}

.sidebar-section:last-child {
  border-bottom: none;
}

.sidebar-section-title {
  background: #f8f9fa;
  margin: 0;
  padding: 12px 16px;
  font-weight: 600;
  color: #495057;
  border-bottom: 1px solid #dee2e6;
}

.sidebar-section .list-group-item {
  border-left: none;
  border-right: none;
}

.sidebar-section .nav-link {
  color: #0d6efd;
  padding: 8px 0;
}

.sidebar-section .nav-link:hover {
  color: #0a58ca;
  text-decoration: underline;
}