:root {
  --navy: #082b5c;
  --blue: #0d4f9c;
  --blue2: #1768c4;
  --pale: #eef5fc;
  --pale2: #f6f9fd;
  --border: #d8e2ee;
  --text: #172331;
  --muted: #6c7a89;
  --white: #ffffff;
  --danger: #a52a2a;
  --shadow: 0 8px 24px rgba(13, 48, 88, 0.08);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background: #eaf0f6;
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  touch-action: manipulation;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--pale2);
  padding-bottom: 82px;
  overflow-x: hidden;
}

.screen {
  display: none;
  min-height: calc(100dvh - 82px);
}

.screen.active {
  display: block;
}

.hero {
  background: linear-gradient(160deg, #062650, #0b4384);
  color: white;
  padding: max(22px, env(safe-area-inset-top)) 20px 20px;
  border-radius: 0 0 26px 26px;
}

.eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.25px;
  opacity: 0.8;
}

.hero h1,
.page-header h1,
.setup-card h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1;
}

.hero-subtitle,
.setup-subtitle {
  margin: 4px 0 0;
  opacity: 0.82;
}

.patient-strip {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 14px;
  margin-top: 22px;
  padding: 14px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 15px;
}

.patient-strip div {
  min-width: 0;
}

.patient-strip small {
  display: block;
  margin-bottom: 3px;
  opacity: 0.72;
}

.patient-strip strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.clock {
  text-align: right;
  flex-shrink: 0;
}

.page-header {
  padding: max(24px, env(safe-area-inset-top)) 20px 20px;
  background: white;
  border-bottom: 1px solid var(--border);
}

.page-header .eyebrow {
  color: var(--blue);
}

.page-header h1 {
  color: var(--navy);
}

.content {
  padding: 20px 16px 28px;
}

.section-title {
  margin-bottom: 14px;
}

.section-title h2,
.panel h2 {
  margin: 0;
  font-size: 19px;
  color: var(--navy);
}

.section-title p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.section-title.compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
}

.activity-btn {
  min-height: 86px;
  padding: 10px 5px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: white;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(8,43,92,0.04);
}

.activity-btn:active {
  transform: scale(0.97);
  background: var(--pale);
}

.activity-btn span {
  display: block;
  margin-bottom: 7px;
  font-size: 23px;
}

.recent-section {
  margin-top: 26px;
}

.text-button {
  border: 0;
  background: transparent;
  color: var(--blue);
  font-weight: 700;
  font-size: 12px;
}

.empty-state,
.record-card,
.panel,
.analysis-card,
.placeholder-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}

.empty-state {
  padding: 22px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

.record-card {
  padding: 13px 14px;
  margin-bottom: 9px;
}

.record-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.record-card h4 {
  margin: 0;
  color: var(--navy);
}

.record-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.record-type {
  color: var(--blue);
  font-size: 11px;
  font-weight: 800;
  text-align: right;
}

.analysis-period {
  margin-top: 18px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--pale);
}

.analysis-period small,
.analysis-period span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.analysis-period strong {
  display: block;
  margin: 3px 0;
  color: var(--navy);
}

.period-selector {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 15px;
}

.period-selector button,
.report-mode button {
  border: 1px solid var(--border);
  background: white;
  color: var(--muted);
  padding: 10px 5px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.period-selector button.selected,
.report-mode button.selected {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}

.summary-grid article {
  padding: 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
}

.summary-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.summary-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--navy);
  font-size: 22px;
}

.analysis-card {
  margin-top: 12px;
  padding: 16px;
}

.analysis-card h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 15px;
}

.large-result {
  font-size: 22px;
  font-weight: 800;
  color: var(--blue);
}

.observation {
  padding: 9px 0;
  border-bottom: 1px solid #edf1f5;
  font-size: 13px;
  line-height: 1.45;
}

.observation:last-child {
  border-bottom: 0;
}

.analysis-row {
  margin-bottom: 12px;
}

.analysis-row:last-child {
  margin-bottom: 0;
}

.analysis-row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
  font-size: 12px;
}

.analysis-bar {
  height: 7px;
  background: #e7eef6;
  border-radius: 99px;
  overflow: hidden;
}

.analysis-bar div {
  height: 100%;
  background: var(--blue2);
  border-radius: inherit;
}

.panel {
  padding: 17px;
  margin-bottom: 13px;
}

.panel h2 {
  margin-bottom: 14px;
}

.info-row {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 0;
  border-bottom: 1px solid #edf1f5;
}

.info-row:last-child {
  border-bottom: 0;
}

.info-row span {
  color: var(--muted);
  font-size: 12px;
}

.info-row strong {
  text-align: right;
  color: var(--navy);
  font-size: 12px;
}

.report-mode {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.custom-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 13px;
}

.custom-dates label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.custom-dates input,
.field-label input {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  color: var(--text);
  outline: none;
}

.report-period-summary {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  margin-top: 16px;
  padding: 13px;
  border-radius: 12px;
  background: var(--pale);
}

.report-period-summary small {
  color: var(--muted);
}

.report-period-summary strong {
  color: var(--navy);
  text-align: right;
  font-size: 12px;
}

.primary-button,
.secondary-button,
.danger-button {
  width: 100%;
  min-height: 50px;
  border-radius: 13px;
  font-weight: 800;
}

.primary-button {
  border: 0;
  background: var(--navy);
  color: white;
}

.secondary-button {
  margin-top: 9px;
  border: 1px solid var(--border);
  background: white;
  color: var(--navy);
}

.danger-button {
  margin-top: 9px;
  border: 1px solid #e5baba;
  background: #fff5f5;
  color: var(--danger);
}

.bottom-nav {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 20;
  width: 100%;
  max-width: 480px;
  height: calc(70px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: white;
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(8,43,92,0.06);
}

.nav-btn {
  border: 0;
  background: white;
  color: #8290a0;
  font-size: 11px;
  font-weight: 700;
}

.nav-btn span {
  display: block;
  margin-bottom: 3px;
  font-size: 21px;
}

.nav-btn.active {
  color: var(--blue);
}

.modal,
.setup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(3, 19, 38, 0.56);
}

.modal {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.modal-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 13px 18px calc(22px + env(safe-area-inset-bottom));
  background: white;
  border-radius: 24px 24px 0 0;
}

.modal-handle {
  width: 42px;
  height: 5px;
  margin: 0 auto 14px;
  border-radius: 99px;
  background: #d5dce5;
}

.close-btn {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--pale);
  color: var(--navy);
  font-size: 22px;
}

.modal-sheet h2 {
  margin: 0 0 18px;
  color: var(--navy);
}

.step-block {
  margin: 18px 0;
}

.step-block h3 {
  margin: 0 0 9px;
  font-size: 14px;
  color: var(--navy);
}

.option-grid {
  display: grid;
  gap: 7px;
}

.option-grid.two {
  grid-template-columns: repeat(2, 1fr);
}

.duration-grid {
  grid-template-columns: repeat(4, 1fr);
}

.option-grid button,
.pain-grid button,
.choice-row button {
  min-height: 45px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  color: var(--navy);
  font-weight: 700;
  font-size: 12px;
}

.option-grid button.selected,
.pain-grid button.selected,
.choice-row button.selected {
  border-color: var(--blue);
  background: var(--blue);
  color: white;
}

.pain-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.pain-grid button {
  min-height: 42px;
}

.pain-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: var(--muted);
  font-size: 10px;
}

.unit-label {
  display: block;
  margin-top: 6px;
  color: var(--muted);
}

.entry-review {
  padding: 12px;
  margin: 14px 0;
  background: var(--pale);
  border-radius: 11px;
  font-size: 12px;
  line-height: 1.6;
}

.setup-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(160deg, #062650, #0d4f9c);
}

.setup-card {
  width: 100%;
  max-width: 420px;
  padding: 26px 20px;
  border-radius: 22px;
  background: white;
  box-shadow: 0 20px 50px rgba(0,0,0,0.18);
}

.setup-card .eyebrow {
  color: var(--blue);
}

.setup-card h1 {
  color: var(--navy);
}

.setup-subtitle {
  color: var(--muted);
  margin-bottom: 25px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: var(--navy);
  color: white;
  font-size: 27px;
  font-weight: 900;
}

.field-label {
  display: block;
  margin: 15px 0;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
}

.choice-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-top: 7px;
}

.choice-row button {
  min-height: 40px;
  font-size: 11px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  z-index: 200;
  width: calc(100% - 32px);
  max-width: 448px;
  transform: translateX(-50%);
  padding: 13px 16px;
  border-radius: 13px;
  background: #102b49;
  color: white;
  box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}

.toast strong,
.toast span {
  display: block;
}

.toast span {
  margin-top: 3px;
  font-size: 11px;
  opacity: 0.8;
}

.file-button {
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-button input {
  display: none;
}

.divider {
  height: 1px;
  margin: 22px 0;
  background: var(--border);
}

.hidden {
  display: none !important;
}

body.modal-open {
  overflow: hidden;
}

@media (min-width: 481px) {
  body {
    padding: 20px 0;
  }

  .app-shell {
    min-height: calc(100dvh - 40px);
    border-radius: 26px;
    box-shadow: 0 18px 60px rgba(8,43,92,0.15);
    overflow: hidden;
  }

  .bottom-nav {
    bottom: 20px;
    border-radius: 0 0 26px 26px;
  }
}

.history-sheet {
  max-height: 92dvh;
}

.history-summary {
  margin-bottom: 14px;
  padding: 11px 13px;
  border-radius: 11px;
  background: var(--pale);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.all-records-list {
  padding-bottom: 20px;
}

.clinical-observation {
  padding: 13px 0;
  border-bottom: 1px solid #edf1f5;
}

.clinical-observation:last-child {
  border-bottom: 0;
}

.clinical-observation strong {
  display: block;
  margin-bottom: 5px;
  color: var(--navy);
  font-size: 13px;
}

.clinical-observation p {
  margin: 0;
  color: var(--text);
  font-size: 13px;
  line-height: 1.5;
}

.clinical-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.clinical-metric-grid > div {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 11px;
  background: var(--pale2);
}

.clinical-metric-grid span {
  display: block;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.clinical-metric-grid strong {
  display: block;
  margin-top: 5px;
  color: var(--navy);
  font-size: 16px;
}


/* =========================================
   QUICK REPEAT
========================================= */

.quick-repeat-area {
  margin-bottom: 14px;
}

.quick-repeat-btn {
  width: 100%;
  min-height: 70px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  background: #fff;
  padding: 12px 14px;

  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 10px;

  text-align: left;
  cursor: pointer;
}

.quick-repeat-btn:active {
  transform: scale(0.985);
}

.quick-repeat-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;

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

  background: rgba(0, 0, 0, 0.05);
  font-size: 24px;
}

.quick-repeat-btn strong {
  display: block;
  font-size: 15px;
  line-height: 1.2;
}

.quick-repeat-btn small {
  display: block;
  margin-top: 4px;
  opacity: 0.65;
  line-height: 1.25;
}

.quick-repeat-plus {
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border-radius: 13px;

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

  font-weight: 800;
  font-size: 15px;

  background: rgba(0, 0, 0, 0.06);
}


/* =========================================
   DAILY CLINICAL TOOLS
========================================= */

.daily-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin-bottom: 14px;
}

.daily-tool-btn {
  min-height: 82px;
  padding: 10px 6px;

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 17px;

  background: #fff;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  cursor: pointer;
}

.daily-tool-btn span {
  font-size: 23px;
  line-height: 1;
  margin-bottom: 7px;
}

.daily-tool-btn strong {
  font-size: 13px;
}

.daily-tool-btn small {
  margin-top: 2px;
  font-size: 11px;
  opacity: 0.6;
}

.daily-tool-btn:active {
  transform: scale(0.97);
}

.quick-clinical-sheet {
  max-height: 90vh;
  overflow-y: auto;
}

.option-grid.three {
  grid-template-columns: repeat(3, 1fr);
}

.quick-pain-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.quick-pain-grid button {
  min-height: 44px;
  padding: 6px 2px;
}

.measurement-help {
  margin: 6px 0 18px;
  opacity: 0.7;
  font-size: 13px;
  line-height: 1.4;
}

.measurement-control {
  display: grid;
  grid-template-columns: 62px 1fr 62px;
  gap: 10px;
  align-items: center;
  margin: 20px 0;
}

.measurement-control > button {
  height: 58px;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: #fff;
  font-size: 28px;
  font-weight: 700;
}

.measurement-value {
  min-height: 76px;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.045);

  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}

.measurement-value strong {
  font-size: 38px;
}

.measurement-value span {
  font-size: 15px;
  opacity: 0.65;
}

.measurement-presets {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 20px;
}

.measurement-presets button {
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.09);
  background: #fff;
}

.measurement-presets button.selected,
.quick-pain-grid button.selected {
  font-weight: 700;
  outline: 2px solid currentColor;
}


/* =========================================
   CARE PLAN
========================================= */

.care-plan-card {
  margin-bottom: 14px;
  padding: 14px;

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 19px;

  background: #fff;
}

.care-plan-top {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
}

.care-plan-top small {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  opacity: 0.55;
}

.care-plan-top strong {
  display: block;
  font-size: 15px;
  line-height: 1.25;
}

.care-plan-top span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.62;
}

.care-plan-open,
.mini-action {
  border: 0;
  border-radius: 12px;
  padding: 9px 12px;
  font-weight: 700;
  cursor: pointer;
}

.care-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.care-quick-actions button {
  min-height: 43px;

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 13px;

  background: rgba(0, 0, 0, 0.025);

  font-weight: 700;
}

.care-quick-actions span {
  margin-right: 5px;
}

.care-plan-sheet {
  max-height: 92vh;
  overflow-y: auto;
}

.care-section {
  margin-top: 22px;
}

.care-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.care-heading h3 {
  margin: 0;
}

.care-list {
  display: grid;
  gap: 8px;
}

.care-empty {
  padding: 15px;

  border-radius: 14px;
  background: rgba(0, 0, 0, 0.035);

  text-align: center;
  font-size: 13px;
  opacity: 0.65;
}

.care-item {
  padding: 13px;

  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 15px;

  background: #fff;
}

.care-item-top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.care-item strong {
  font-size: 14px;
}

.care-item small {
  display: block;
  margin-top: 4px;
  opacity: 0.62;
}

.care-item-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-top: 10px;
}

.care-item-actions button {
  min-height: 39px;
  border-radius: 11px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  font-weight: 700;
}

.exercise-response-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 9px;
  margin: 22px 0 8px;
}

.exercise-response-grid button {
  min-height: 88px;
  border-radius: 17px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  font-weight: 700;
}

.exercise-response-grid span {
  display: block;
  margin-bottom: 8px;
  font-size: 25px;
}

.option-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

.calendar-button {
  width: 100%;
  margin-top: 8px;
  min-height: 39px;

  border-radius: 11px;
  border: 1px solid rgba(0, 0, 0, 0.08);

  font-weight: 700;
}

/* =========================================================
   FOUR TAB CARE PLAN
   ========================================================= */

.bottom-nav {
  grid-template-columns: repeat(4, 1fr);
}

.care-screen-intro,
.care-section {
  background: var(--card, #ffffff);
  border-radius: 18px;
  margin: 12px 16px;
  padding: 16px;
}

.care-screen-intro p {
  margin: 6px 0 0;
  opacity: 0.72;
  line-height: 1.45;
}

.care-choice-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 12px;
}

.care-choice {
  width: 100%;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  text-align: left;
  min-height: 68px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.care-choice strong,
.care-choice small {
  display: block;
}

.care-choice small {
  margin-top: 4px;
  opacity: .66;
  line-height: 1.3;
}

.care-choice.selected {
  border-width: 2px;
}

.care-choice.recorded {
  transform: scale(.985);
}

.care-activity-summary {
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.035);
  line-height: 1.4;
}

/* Faster mobile modal controls */

.close-btn,
.modal button,
.popup button,
.sheet button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.close-btn {
  position: relative;
  z-index: 50;
  min-width: 44px;
  min-height: 44px;
}


/* =========================================
   STEP 5C
   Care Plan quick multiple-choice selector
   ========================================= */

[data-care-key] {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.08s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

[data-care-key]:active {
  transform: scale(0.98);
}

[data-care-key].selected {
  border-width: 2px;
  font-weight: 700;
}

[data-care-key].selected::after {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 14px;
}

.care-plan-save-status {
  position: fixed;
  left: 50%;
  bottom: 88px;
  z-index: 9999;

  transform:
    translate(-50%, 12px);

  opacity: 0;
  pointer-events: none;

  padding: 10px 16px;
  border-radius: 999px;

  background: rgba(20, 20, 20, 0.9);
  color: white;

  font-size: 13px;
  font-weight: 700;

  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.care-plan-save-status.show {
  opacity: 1;
  transform: translate(-50%, 0);
}



/* =========================================
   STEP 5D
   Care Plan actual-use logging
========================================= */

.care-choice-grid {
  position: relative;
}

.care-choice.selected {
  margin-bottom: 0;
}

.care-use-btn {
  min-height: 42px;
  margin-top: -4px;
  margin-bottom: 4px;

  border: 0;
  border-radius: 12px;

  font-weight: 800;
  font-size: 13px;

  touch-action: manipulation;
  -webkit-tap-highlight-color:
    transparent;
}

.care-use-btn span {
  margin-right: 5px;
}

.care-use-btn:active {
  transform: scale(0.98);
}

.care-log-row {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) auto;
  gap: 12px;

  padding: 11px 2px;

  border-bottom:
    1px solid
    rgba(0, 0, 0, 0.06);
}

.care-log-row:last-child {
  border-bottom: 0;
}

.care-log-row strong {
  display: block;
  font-size: 13px;
}

.care-log-row small {
  display: block;

  margin-top: 3px;

  font-size: 11px;
  opacity: 0.62;
}

.care-log-row time {
  font-size: 11px;
  opacity: 0.65;
  text-align: right;
  white-space: nowrap;
}

#careActivitySummary strong {
  font-size: 20px;
}

#careActivitySummary small {
  opacity: 0.65;
}



/* =========================================
   STEP 5E
   Report follow-up and fast modal close
========================================= */

.report-followup-panel {
  margin-top: 14px;
}

.report-followup-help {
  margin: 4px 0 15px;
  font-size: 12px;
  line-height: 1.45;
  opacity: 0.65;
}

.report-calendar-grid {
  display: grid;
  gap: 10px;
}

.report-calendar-grid select,
.report-calendar-grid input {
  width: 100%;
  min-height: 46px;
  box-sizing: border-box;
}

.report-calendar-button {
  margin-top: 14px;
}

.report-last-schedule {
  margin-top: 12px;
  padding: 12px 14px;

  border-radius: 13px;
  background: rgba(0,0,0,.04);
}

.report-last-schedule small,
.report-last-schedule strong,
.report-last-schedule span {
  display: block;
}

.report-last-schedule small {
  margin-bottom: 4px;
  font-size: 9px;
  letter-spacing: .08em;
  opacity: .55;
}

.report-last-schedule strong {
  font-size: 13px;
}

.report-last-schedule span {
  margin-top: 4px;
  font-size: 12px;
  opacity: .68;
}


/* Fast close behavior */

.close-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;

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

  padding: 0;

  touch-action: manipulation;
  -webkit-tap-highlight-color:
    transparent;

  cursor: pointer;

  position: relative;
  z-index: 999;
}

.close-btn::before {
  content: "";
  position: absolute;

  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
}

.modal {
  touch-action: manipulation;
}



/* =========================================
   STEP 5F
   Doctor clinical monitoring
========================================= */

.clinical-section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 12px;
}

.clinical-section-heading small {
  display: block;
  margin-bottom: 3px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  opacity: .55;
}

.clinical-section-heading h2,
.clinical-section-heading h3 {
  margin: 0;
}

.doctor-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.doctor-summary-grid article {
  min-width: 0;
  padding: 12px;

  border-radius: 14px;
  background: rgba(0,0,0,.035);
}

.doctor-summary-grid span {
  display: block;
  margin-bottom: 5px;

  font-size: 10px;
  line-height: 1.25;
  opacity: .6;
}

.doctor-summary-grid strong {
  display: block;

  font-size: 17px;
  line-height: 1.2;

  overflow-wrap: anywhere;
}

.doctor-summary-grid small {
  display: block;
  margin-top: 5px;

  font-size: 10px;
  line-height: 1.35;
  opacity: .65;

  overflow-wrap: anywhere;
}

.doctor-assessment-notes {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.doctor-assessment-notes > div {
  padding: 11px 12px;

  border:
    1px solid
    rgba(0,0,0,.07);

  border-radius: 12px;
}

.doctor-assessment-notes span {
  display: block;

  font-size: 10px;
  opacity: .58;
}

.doctor-assessment-notes strong {
  display: block;

  margin-top: 4px;

  font-size: 12px;
  line-height: 1.35;
}

.doctor-assessment-notes p {
  margin: 2px 0 0;

  font-size: 10px;
  line-height: 1.45;
  opacity: .58;
}

.doctor-report-panel {
  margin-top: 14px;
}

@media (max-width: 390px) {
  .doctor-summary-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================
   STEP 5F REPAIR
   Doctor Clinical Assessment
========================================= */

.clinical-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.clinical-section-heading small {
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  opacity: .55;
}

.clinical-section-heading h2,
.clinical-section-heading h3 {
  margin: 0;
}

.doctor-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 9px;
}

.doctor-summary-grid article {
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  background:
    rgba(0,0,0,.035);
}

.doctor-summary-grid span {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  line-height: 1.25;
  opacity: .6;
}

.doctor-summary-grid strong {
  display: block;
  font-size: 17px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.doctor-summary-grid small {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.35;
  opacity: .65;
  overflow-wrap: anywhere;
}

.doctor-assessment-notes {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.doctor-assessment-notes > div {
  padding: 11px 12px;
  border:
    1px solid
    rgba(0,0,0,.07);
  border-radius: 12px;
}

.doctor-assessment-notes span {
  display: block;
  font-size: 10px;
  opacity: .58;
}

.doctor-assessment-notes strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
}

.doctor-assessment-notes p {
  margin: 2px 0 0;
  font-size: 10px;
  line-height: 1.45;
  opacity: .58;
}

.doctor-report-panel {
  margin-top: 14px;
}

@media (max-width: 390px) {
  .doctor-summary-grid {
    grid-template-columns: 1fr;
  }
}


/* STEP 5F DOCTOR CLINICAL VIEW */

.clinical-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.clinical-section-heading small {
  display: block;
  margin-bottom: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .09em;
  opacity: .55;
}

.clinical-section-heading h2,
.clinical-section-heading h3 {
  margin: 0;
}

.doctor-summary-grid {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.doctor-summary-grid article {
  min-width: 0;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.035);
}

.doctor-summary-grid span {
  display: block;
  margin-bottom: 5px;
  font-size: 10px;
  line-height: 1.25;
  opacity: .6;
}

.doctor-summary-grid strong {
  display: block;
  font-size: 17px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.doctor-summary-grid small {
  display: block;
  margin-top: 5px;
  font-size: 10px;
  line-height: 1.35;
  opacity: .65;
  overflow-wrap: anywhere;
}

.doctor-assessment-notes {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.doctor-assessment-notes > div {
  padding: 11px 12px;
  border:
    1px solid
    rgba(0,0,0,.07);
  border-radius: 12px;
}

.doctor-assessment-notes span {
  display: block;
  font-size: 10px;
  opacity: .58;
}

.doctor-assessment-notes strong {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.35;
}

.doctor-assessment-notes p {
  margin: 2px 0 0;
  font-size: 10px;
  line-height: 1.45;
  opacity: .58;
}

.doctor-report-panel {
  margin-top: 14px;
}

@media (max-width: 390px) {
  .doctor-summary-grid {
    grid-template-columns: 1fr;
  }
}



/* ================================================
   GUIDED CARE PLAN SESSION
================================================ */

.care-session-sheet {
  max-height: 92vh;
  overflow-y: auto;
  padding-bottom:
    calc(24px + env(safe-area-inset-bottom));
}

.care-session-header {
  padding-right: 42px;
  margin-bottom: 18px;
}

.care-session-header small {
  display: block;
  margin-bottom: 4px;
  opacity: .65;
}

.care-session-header h2 {
  margin: 0 0 8px;
}

.care-session-header p {
  margin: 0;
  line-height: 1.45;
}

.care-session-target {
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: rgba(0,0,0,.045);
  line-height: 1.4;
}

.care-session-stage {
  padding-bottom: 8px;
}

.care-session-timer {
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 18px 0;
  font-variant-numeric: tabular-nums;
}

.care-rep-block {
  text-align: center;
  margin: 12px 0 22px;
}

.care-rep-block small {
  display: block;
  margin-bottom: 10px;
  opacity: .65;
}

.care-rep-counter {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.care-rep-counter button {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  font-size: 26px;
  font-weight: 700;
}

.care-rep-counter strong {
  min-width: 50px;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
}

.care-session-stage .step-block {
  margin-bottom: 18px;
}

.care-session-stage .step-block h3 {
  margin-bottom: 10px;
}

.choice-grid.three {
  grid-template-columns:
    repeat(3, minmax(0, 1fr));
}

.choice-grid.four {
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
}

.care-pain-grid button,
[data-care-completion],
[data-care-lock],
[data-care-side],
[data-care-pop],
[data-care-response] {
  min-height: 44px;
}

@media (max-width: 420px) {
  .choice-grid.three {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }

  .care-session-timer {
    font-size: 38px;
  }
}



/* ================================================
   STEP 6C
   Guided Care Plan interaction
================================================ */

.care-start-btn {
  min-height: 46px;
  font-size: 13px;
  font-weight: 800;
}

#careSessionAssessment button.selected {
  border-width: 2px;
  font-weight: 800;
  transform: scale(.98);
}

#careSessionAssessment button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

#careSessionAssessment button:active,
#beginCareSession:active,
#finishCareSession:active,
#stopCareSession:active,
#saveCareSession:active,
.care-rep-counter button:active {
  transform: scale(.97);
}

#careSessionTarget strong {
  font-size: 12px;
}



/* =========================================================
   STEP 6D
   Guided Care Clinical Detail
========================================================= */

.care-clinical-detail {
  margin-top: 16px;
  padding-top: 14px;
  border-top:
    1px solid
    rgba(0, 0, 0, .08);
}

.clinical-detail-title {
  margin-bottom: 10px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
}

.clinical-empty {
  margin: 0;

  font-size: 11px;
  line-height: 1.45;
  opacity: .62;
}

.care-log-detailed {
  align-items: start;
}

.care-log-main {
  min-width: 0;
}

.care-session-history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;

  margin-top: 7px;
}

.care-session-history-meta span {
  display: inline-block;

  padding: 4px 7px;

  border-radius: 999px;

  background:
    rgba(0, 0, 0, .045);

  font-size: 9px;
  line-height: 1.15;
}



/* =========================================================
   STEP 6G-4
   ANDROID REPORT BUTTON TOUCH FIX
========================================================= */

#reportScreen .content {
  padding-bottom:
    calc(
      150px +
      env(safe-area-inset-bottom)
    );
}


#generateReport {
  position: relative;

  z-index: 30;

  width: 100%;

  min-height: 54px;

  margin-top: 14px;

  margin-bottom: 14px;

  pointer-events: auto !important;

  touch-action: manipulation;

  -webkit-user-select: none;

  user-select: none;

  -webkit-tap-highlight-color:
    rgba(0, 0, 0, .08);
}


#generateReport:active {
  transform: scale(.98);
}


#generateReport.android-export-running {
  opacity: .72;
}


.bottom-nav {
  z-index: 20;
}




/* =========================================================
   STEP 6G-4
   ANDROID REPORT BUTTON TOUCH FIX
========================================================= */

#reportScreen .content {
  padding-bottom:
    calc(
      150px +
      env(safe-area-inset-bottom)
    );
}


#generateReport {
  position: relative;

  z-index: 30;

  width: 100%;

  min-height: 54px;

  margin-top: 14px;

  margin-bottom: 14px;

  pointer-events: auto !important;

  touch-action: manipulation;

  -webkit-user-select: none;

  user-select: none;

  -webkit-tap-highlight-color:
    rgba(0, 0, 0, .08);
}


#generateReport:active {
  transform: scale(.98);
}


#generateReport.android-export-running {
  opacity: .72;
}


.bottom-nav {
  z-index: 20;
}




/* =========================================
   REPORT EXCEL BUTTON
========================================= */

#reportScreen .content {
  padding-bottom:
    calc(
      140px +
      env(safe-area-inset-bottom)
    );
}

#generateReport {
  position: relative;
  z-index: 30;

  display: block;

  width: 100%;
  min-height: 54px;

  pointer-events: auto;
  touch-action: manipulation;

  -webkit-tap-highlight-color:
    rgba(0,0,0,.08);
}

#generateReport:active {
  transform: scale(.98);
}



/* =========================================
   DIRECT CARE PLAN ACTIVITY START
========================================= */

.care-direct-start {
  cursor: pointer;
  touch-action: manipulation;
}

.care-direct-start:active {
  transform: scale(.985);
}

.care-direct-action-label {
  display: block;

  margin-top: 8px;

  font-size: 13px;
  font-weight: 700;
}



.jmt-mode-badge {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  opacity: .88;
}

.jmt-mode-badge strong {
  color: #173b63;
  font-size: 9px;
  font-weight: 800;
}

.jmt-mode-badge span {
  color: #6d7d8d;
  font-size: 8px;
}

.jmt-side-section {
  margin: 15px 0;
  padding: 13px;
  border: 1px solid #dde5ec;
  border-radius: 12px;
  background: #f7f9fb;
}

.jmt-side-title {
  margin-bottom: 8px;
  color: #173b63;
  font-size: 12px;
  font-weight: 800;
}

.jmt-side-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.jmt-side-button {
  min-height: 42px;
  border: 1px solid #ccd7e1;
  border-radius: 10px;
  background: #fff;
  color: #173b63;
  font-size: 12px;
  font-weight: 700;
}

.jmt-side-button.active {
  border-color: #173b63;
  background: #173b63;
  color: #fff;
}

.jmt-side-status {
  margin-top: 7px;
  color: #6b7c8b;
  font-size: 10px;
  text-align: center;
}

.jmt-admin-footer-actions {
  display: flex;
  gap: 8px;
}

.jmt-admin-footer-actions button {
  min-width: 88px;
}

#jmtAdminSettingsButton,
.jmt-floating-settings {
  display: none !important;
}

#navSettings {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.jmt-admin-modal {
  align-items: center;
}

.jmt-admin-dialog {
  width: min(720px, calc(100% - 24px));
  max-height: 92vh;
  overflow-y: auto;
}

@media (max-width: 600px) {
  .jmt-admin-dialog {
    width: 100%;
    min-height: 100vh;
    max-height: 100vh;
    border-radius: 0;
  }
}


/* ==========================================================
   JMT-TMJ PROFESSIONAL APPLICATION SHELL
   ========================================================== */

/*
   ADMIN MUST NEVER FLOW INSIDE THE NORMAL PAGE
*/
#jmtAdminModal.jmt-admin-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 50000 !important;

  display: none !important;

  width: 100vw !important;
  height: 100dvh !important;

  padding: 24px !important;
  margin: 0 !important;

  overflow-y: auto !important;

  background:
    rgba(12, 30, 49, 0.62) !important;

  backdrop-filter: blur(5px);

  box-sizing: border-box !important;
}

#jmtAdminModal.jmt-admin-modal.open {
  display: flex !important;

  align-items: center !important;
  justify-content: center !important;
}


/*
   ADMIN WINDOW
*/
#jmtAdminModal .jmt-admin-dialog {
  position: relative !important;

  width: min(760px, 100%) !important;
  max-height: calc(100dvh - 48px) !important;

  margin: auto !important;

  overflow: hidden !important;

  border: 1px solid #d9e3ec !important;
  border-radius: 20px !important;

  background: #ffffff !important;

  box-shadow:
    0 24px 70px
    rgba(16, 41, 67, 0.24) !important;
}


/*
   HEADER
*/
#jmtAdminModal .jmt-admin-header {
  position: sticky !important;
  top: 0 !important;

  z-index: 3 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  padding: 20px 22px !important;

  border-bottom:
    1px solid #e5ebf0 !important;

  background: #ffffff !important;
}

#jmtAdminModal .jmt-admin-eyebrow {
  margin-bottom: 4px !important;

  color: #75879a !important;

  font-size: 10px !important;
  font-weight: 800 !important;

  letter-spacing: .10em !important;
  text-transform: uppercase !important;
}

#jmtAdminModal .jmt-admin-header h2 {
  margin: 0 !important;

  color: #123b70 !important;

  font-size: 21px !important;
  line-height: 1.2 !important;
}

#jmtAdminModal .jmt-admin-close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 40px !important;
  height: 40px !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: #f0f4f7 !important;
  color: #486176 !important;

  font-size: 25px !important;
  line-height: 1 !important;

  cursor: pointer !important;
}


/*
   ADMIN CONTENT
*/
#jmtAdminModal .jmt-admin-body {
  max-height:
    calc(100dvh - 130px) !important;

  padding: 20px 22px 26px !important;

  overflow-y: auto !important;

  background: #f6f9fc !important;
}


#jmtAdminModal .jmt-admin-clinic-name {
  margin-bottom: 15px !important;

  color: #123b70 !important;

  font-size: 13px !important;
  font-weight: 800 !important;
}


/*
   ADMIN TAB BAR
*/
#jmtAdminModal .jmt-admin-tabs {
  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  gap: 6px !important;

  margin: 0 0 18px !important;

  padding: 5px !important;

  border-radius: 13px !important;

  background: #eaf0f5 !important;
}

#jmtAdminModal .jmt-admin-tab {
  min-height: 42px !important;

  padding: 7px 5px !important;

  border: 0 !important;
  border-radius: 9px !important;

  background: transparent !important;
  color: #687b8e !important;

  font-size: 11px !important;
  font-weight: 750 !important;

  cursor: pointer !important;
}

#jmtAdminModal .jmt-admin-tab.active {
  background: #ffffff !important;
  color: #123b70 !important;

  box-shadow:
    0 2px 8px
    rgba(22, 55, 87, .10) !important;
}


/*
   ADMIN CARDS
*/
#jmtAdminModal .jmt-admin-section {
  margin: 0 0 14px !important;

  padding: 17px !important;

  border: 1px solid #dfe7ee !important;
  border-radius: 14px !important;

  background: #ffffff !important;
}

#jmtAdminModal .jmt-admin-section h3,
#jmtAdminModal .jmt-admin-section h4 {
  margin: 0 0 8px !important;

  color: #123b70 !important;

  font-size: 15px !important;
  font-weight: 800 !important;
}

#jmtAdminModal .jmt-admin-help {
  margin: 0 0 14px !important;

  color: #6d7e8e !important;

  font-size: 12px !important;
  line-height: 1.5 !important;
}


/*
   FORM CONTROLS
*/
#jmtAdminModal .jmt-admin-field {
  display: block !important;

  margin: 0 0 14px !important;
}

#jmtAdminModal .jmt-admin-field > span,
#jmtAdminModal .jmt-admin-field label {
  display: block !important;

  margin: 0 0 6px !important;

  color: #405468 !important;

  font-size: 11px !important;
  font-weight: 750 !important;
}

#jmtAdminModal input,
#jmtAdminModal select,
#jmtAdminModal textarea {
  width: 100% !important;

  min-height: 43px !important;

  box-sizing: border-box !important;

  padding: 10px 12px !important;

  border:
    1px solid #ccd8e2 !important;

  border-radius: 9px !important;

  outline: none !important;

  background: #ffffff !important;
  color: #172b3e !important;

  font-size: 14px !important;
}

#jmtAdminModal input:focus,
#jmtAdminModal select:focus,
#jmtAdminModal textarea:focus {
  border-color: #32699d !important;

  box-shadow:
    0 0 0 3px
    rgba(50, 105, 157, .12) !important;
}


/*
   BUTTONS
*/
#jmtAdminModal .jmt-primary-button,
#jmtAdminModal .jmt-admin-action {
  width: 100% !important;

  min-height: 43px !important;

  padding: 10px 14px !important;

  border: 0 !important;
  border-radius: 9px !important;

  background: #123b70 !important;
  color: #ffffff !important;

  font-size: 12px !important;
  font-weight: 800 !important;

  cursor: pointer !important;
}

#jmtAdminModal .jmt-secondary-button {
  min-height: 40px !important;

  padding: 9px 13px !important;

  border:
    1px solid #ccd8e2 !important;

  border-radius: 9px !important;

  background: #ffffff !important;
  color: #123b70 !important;

  font-size: 11px !important;
  font-weight: 750 !important;

  cursor: pointer !important;
}


/*
   PATIENT SEARCH RESULTS
*/
#jmtAdminModal .jmt-patient-results {
  display: grid !important;
  gap: 8px !important;

  margin-top: 12px !important;
}

#jmtAdminModal .jmt-patient-result {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;

  width: 100% !important;

  padding: 12px !important;

  border:
    1px solid #dce5ed !important;

  border-radius: 10px !important;

  background: #ffffff !important;

  text-align: left !important;

  cursor: pointer !important;
}

#jmtAdminModal .jmt-patient-result:hover {
  border-color: #aec2d4 !important;
  background: #f8fbfd !important;
}


/*
   FOOTER
*/
#jmtAdminModal .jmt-admin-footer {
  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  gap: 12px !important;

  margin-top: 18px !important;

  padding-top: 15px !important;

  border-top:
    1px solid #dce5ed !important;

  color: #6c7d8c !important;

  font-size: 11px !important;
}

#jmtAdminModal .jmt-admin-footer-actions {
  display: flex !important;
  gap: 7px !important;
}


/* ==========================================================
   REMOVE OLD FLOATING ADMIN UI
   ========================================================== */

#jmtAdminSettingsButton,
.jmt-floating-settings {
  display: none !important;
}


/* ==========================================================
   MAIN PATIENT MODE NAVIGATION
   ========================================================== */

.bottom-nav,
.app-nav,
nav.bottom-nav {
  display: grid !important;

  grid-template-columns:
    repeat(4, 1fr) !important;

  width: min(560px, 100%) !important;

  box-sizing: border-box !important;
}

#navSettings {
  min-width: 0 !important;

  border: 0 !important;

  background: transparent !important;

  color: #7c8c9c !important;
}

#navSettings.active {
  color: #0f5597 !important;
}

.jmt-nav-icon {
  display: block !important;

  margin-bottom: 4px !important;

  font-size: 19px !important;
  line-height: 1 !important;
}

.jmt-nav-label {
  display: block !important;

  font-size: 11px !important;
  font-weight: 750 !important;
}


/*
   The old Clinic/Admin label must not appear
   in the normal page.
*/
body > .jmt-admin-dialog,
body > .jmt-admin-body,
body > .jmt-admin-section {
  display: none !important;
}


/* ==========================================================
   MOBILE ADMIN
   ========================================================== */

@media (max-width: 640px) {

  #jmtAdminModal.jmt-admin-modal {
    padding: 0 !important;
  }

  #jmtAdminModal .jmt-admin-dialog {
    width: 100% !important;
    height: 100dvh !important;

    max-height: 100dvh !important;

    border: 0 !important;
    border-radius: 0 !important;
  }

  #jmtAdminModal .jmt-admin-body {
    max-height:
      calc(100dvh - 82px) !important;

    padding: 15px !important;
  }

  #jmtAdminModal .jmt-admin-header {
    padding: 15px !important;
  }

  #jmtAdminModal .jmt-admin-tabs {
    grid-template-columns:
      repeat(5, minmax(62px, 1fr)) !important;

    overflow-x: auto !important;
  }

  #jmtAdminModal .jmt-admin-tab {
    font-size: 10px !important;
  }

  #jmtAdminModal .jmt-admin-footer {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  #jmtAdminModal .jmt-admin-footer-actions {
    width: 100% !important;
  }

  #jmtAdminModal .jmt-admin-footer-actions button {
    flex: 1 !important;
  }
}


#jmtAdminModal .jmt-admin-tabs {
  grid-template-columns:
    repeat(6, minmax(0, 1fr)) !important;
}

@media (max-width: 640px) {
  #jmtAdminModal .jmt-admin-tabs {
    grid-template-columns:
      repeat(6, minmax(74px, 1fr)) !important;
  }
}



/* ==========================================================
   JMT-TMJ FIVE ITEM PATIENT NAVIGATION
   ========================================================== */

.jmt-five-item-nav {
  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  align-items: stretch !important;

  width: 100% !important;

  padding: 0 !important;
  margin: 0 !important;

  gap: 0 !important;

  overflow: hidden !important;

  background: #ffffff !important;

  border-top:
    1px solid #dce5ed !important;
}


.jmt-five-item-nav > button {
  position: relative !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  min-width: 0 !important;
  min-height: 76px !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 9px 2px 8px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background: #ffffff !important;

  color: #8190a0 !important;

  text-align: center !important;

  box-sizing: border-box !important;
}


.jmt-five-item-nav > button.active {
  color: #09549a !important;
}


.jmt-five-item-nav > button.active::before {
  content: "" !important;

  position: absolute !important;

  top: 0 !important;
  left: 18% !important;
  right: 18% !important;

  height: 3px !important;

  border-radius: 0 0 3px 3px !important;

  background: #09549a !important;
}


.jmt-five-item-nav .nav-icon,
.jmt-five-item-nav .jmt-nav-icon,
.jmt-five-item-nav button > span:first-child {
  display: block !important;

  margin: 0 0 5px !important;

  font-size: 20px !important;
  line-height: 1 !important;

  color: inherit !important;
}


.jmt-five-item-nav .nav-label,
.jmt-five-item-nav .jmt-nav-label,
.jmt-five-item-nav button > span:last-child {
  display: block !important;

  max-width: 100% !important;

  overflow: hidden !important;

  font-size: 10px !important;
  font-weight: 750 !important;

  line-height: 1.1 !important;

  white-space: nowrap !important;
  text-overflow: ellipsis !important;

  color: inherit !important;
}


#navSettings.jmt-settings-nav-button {
  position: relative !important;

  display: flex !important;

  margin: 0 !important;

  width: 100% !important;

  min-height: 76px !important;

  border: 0 !important;

  background: #ffffff !important;

  color: #8190a0 !important;
}


#navSettings .jmt-settings-icon {
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
}


/*
   Never allow Settings to remain outside
   the main navigation.
*/
body > #navSettings {
  display: flex !important;
}


@media (max-width: 500px) {

  .jmt-five-item-nav > button {
    min-height: 70px !important;

    padding-left: 1px !important;
    padding-right: 1px !important;
  }

  .jmt-five-item-nav .nav-label,
  .jmt-five-item-nav .jmt-nav-label,
  .jmt-five-item-nav button > span:last-child {
    font-size: 9px !important;
  }

}


/* ==========================================================
   FINAL MAIN NAVIGATION
   ========================================================== */

.jmt-main-five-nav {
  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  width: 100% !important;

  gap: 0 !important;
}


.jmt-main-five-nav > button {
  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  width: 100% !important;

  min-width: 0 !important;

  min-height: 76px !important;

  margin: 0 !important;

  padding: 8px 2px !important;

  border: 0 !important;

  background: #ffffff !important;

  box-sizing: border-box !important;
}


#navSettings {
  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  width: 100% !important;

  min-height: 76px !important;

  color: #8090a0 !important;

  background: #ffffff !important;

  border: 0 !important;

  margin: 0 !important;

  padding: 8px 2px !important;
}


.jmt-settings-nav-icon {
  display: block;

  margin-bottom: 6px;

  font-size: 21px;

  line-height: 1;
}


.jmt-settings-nav-label {
  display: block;

  font-size: 11px;

  font-weight: 750;

  line-height: 1;
}


#navSettings:hover,
#navSettings:focus {
  color: #10589b !important;
}



/* ==========================================================
   JMT-TMJ FINAL FIVE-TAB NAVIGATION
   Episode | Analysis | Care Plan | Report | Settings
   ========================================================== */

.bottom-nav.jmt-final-five-nav {
  display: grid !important;
  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  align-items: stretch !important;

  width: 100% !important;
  max-width: 560px !important;

  margin: 0 auto !important;
  padding: 0 !important;

  gap: 0 !important;

  overflow: hidden !important;

  background: #ffffff !important;

  border-top:
    1px solid #dce5ed !important;
}


.bottom-nav.jmt-final-five-nav
> button {

  position: relative !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  min-width: 0 !important;
  width: 100% !important;

  min-height: 76px !important;

  margin: 0 !important;

  padding:
    8px 2px 7px !important;

  border: 0 !important;

  border-radius: 0 !important;

  background:
    #ffffff !important;

  color:
    #8190a0 !important;

  box-sizing:
    border-box !important;

  text-align:
    center !important;

  cursor: pointer !important;
}


.bottom-nav.jmt-final-five-nav
> button.active {

  color:
    #09549a !important;
}


.bottom-nav.jmt-final-five-nav
> button.active::before {

  content: "";

  position: absolute;

  top: 0;

  left: 18%;
  right: 18%;

  height: 3px;

  background:
    #09549a;

  border-radius:
    0 0 3px 3px;
}


.bottom-nav.jmt-final-five-nav
> button > span:first-child {

  display: block !important;

  margin:
    0 0 5px !important;

  font-size:
    20px !important;

  line-height:
    1 !important;

  color:
    inherit !important;
}


.bottom-nav.jmt-final-five-nav
> button {

  font-size:
    10px !important;

  font-weight:
    700 !important;

  line-height:
    1.1 !important;
}


.bottom-nav.jmt-final-five-nav
.nav-btn {

  color:
    #8190a0 !important;
}


.bottom-nav.jmt-final-five-nav
.nav-btn.active {

  color:
    #09549a !important;
}


#navSettings.jmt-settings-final {

  display: flex !important;

  position: relative !important;

  width: 100% !important;

  min-width: 0 !important;

  min-height: 76px !important;

  margin: 0 !important;

  padding:
    8px 2px 7px !important;

  border: 0 !important;

  border-radius: 0 !important;

  background:
    #ffffff !important;

  color:
    #8190a0 !important;
}


#navSettings
.nav-icon {

  display: block !important;

  margin:
    0 0 5px !important;

  font-size:
    20px !important;

  line-height:
    1 !important;
}


#navSettings
.nav-text {

  display: block !important;

  margin: 0 !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  line-height:
    1.1 !important;

  white-space:
    nowrap !important;
}


body > #navSettings {
  display:
    none !important;
}


@media
(max-width: 500px) {

  .bottom-nav.jmt-final-five-nav
  > button {

    min-height:
      70px !important;

    padding:
      7px 1px 6px !important;

    font-size:
      9px !important;
  }


  #navSettings
  .nav-text {

    font-size:
      9px !important;
  }

}



/* ==========================================================
   JMT-TMJ FINAL PROFESSIONAL MAIN NAV
   ========================================================== */

.bottom-nav.jmt-final-main-nav {
  position: fixed !important;

  left: 50% !important;
  bottom: 0 !important;

  transform:
    translateX(-50%) !important;

  z-index: 9000 !important;

  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  width:
    min(610px, calc(100vw - 24px)) !important;

  max-width:
    610px !important;

  min-height:
    78px !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: 0 !important;

  overflow: hidden !important;

  border:
    1px solid #dce5ed !important;

  border-bottom:
    0 !important;

  border-radius:
    18px 18px 0 0 !important;

  background:
    #ffffff !important;

  box-shadow:
    0 -8px 30px
    rgba(25, 54, 82, .10) !important;
}


.bottom-nav.jmt-final-main-nav
> .nav-btn {

  position: relative !important;

  display: flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    78px !important;

  margin:
    0 !important;

  padding:
    9px 2px 8px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    #ffffff !important;

  color:
    #8493a3 !important;

  box-sizing:
    border-box !important;

  text-align:
    center !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  line-height:
    1.1 !important;
}


.bottom-nav.jmt-final-main-nav
> .nav-btn.active {

  color:
    #07579e !important;
}


.bottom-nav.jmt-final-main-nav
> .nav-btn.active::before {

  content: "";

  position: absolute;

  top: 0;

  left: 21%;
  right: 21%;

  height: 3px;

  border-radius:
    0 0 3px 3px;

  background:
    #07579e;
}


.bottom-nav.jmt-final-main-nav
> .nav-btn
> span:first-child {

  display:
    block !important;

  margin:
    0 0 6px !important;

  color:
    inherit !important;

  font-size:
    21px !important;

  line-height:
    1 !important;
}


.jmt-final-nav-icon {

  display:
    block !important;

  margin:
    0 0 6px !important;

  font-size:
    20px !important;

  line-height:
    1 !important;
}


.jmt-final-nav-label {

  display:
    block !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;
}


#navSettings.jmt-final-settings {

  display:
    flex !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    78px !important;

  margin:
    0 !important;

  padding:
    9px 2px 8px !important;

  border:
    0 !important;

  background:
    #ffffff !important;

  color:
    #8493a3 !important;
}


/*
   Keep page content visible above
   the fixed navigation.
*/

body {
  padding-bottom:
    100px !important;
}


@media
(max-width: 640px) {

  .bottom-nav.jmt-final-main-nav {

    width:
      calc(100vw - 12px) !important;

    max-width:
      none !important;

    border-radius:
      15px 15px 0 0 !important;
  }

  .bottom-nav.jmt-final-main-nav
  > .nav-btn {

    min-height:
      70px !important;

    font-size:
      9px !important;
  }

  .jmt-final-nav-label {
    font-size:
      9px !important;
  }
}



/* ==========================================================
   JMT-TMJ CLEAN MAIN NAVIGATION
   ========================================================== */

.bottom-nav.jmt-clean-main-nav {

  position: fixed !important;

  bottom: 0 !important;

  z-index: 9000 !important;

  display: grid !important;

  grid-template-columns:
    repeat(5, minmax(0, 1fr)) !important;

  gap: 0 !important;

  padding: 0 !important;

  margin: 0 !important;

  overflow: hidden !important;

  border:
    1px solid #d9e3ec !important;

  border-bottom:
    0 !important;

  border-radius:
    18px 18px 0 0 !important;

  background:
    #ffffff !important;

  box-shadow:
    0 -7px 25px
    rgba(23, 59, 99, .10) !important;
}


.bottom-nav.jmt-clean-main-nav
> button {

  position: relative !important;

  display: flex !important;

  flex-direction:
    column !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  min-width:
    0 !important;

  width:
    100% !important;

  height:
    78px !important;

  min-height:
    78px !important;

  margin:
    0 !important;

  padding:
    8px 2px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    #ffffff !important;

  color:
    #8493a3 !important;

  box-sizing:
    border-box !important;

  text-align:
    center !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  cursor:
    pointer !important;
}


.bottom-nav.jmt-clean-main-nav
> button.active {

  color:
    #09589f !important;
}


.bottom-nav.jmt-clean-main-nav
> button.active::before {

  content: "";

  position: absolute;

  top: 0;

  left: 20%;
  right: 20%;

  height: 3px;

  background:
    #09589f;

  border-radius:
    0 0 3px 3px;
}


.bottom-nav.jmt-clean-main-nav
> button
> span:first-child {

  display:
    block !important;

  margin:
    0 0 6px !important;

  font-size:
    21px !important;

  line-height:
    1 !important;

  color:
    inherit !important;
}


#navSettings {

  display:
    flex !important;

  position:
    relative !important;

  width:
    100% !important;

  height:
    78px !important;

  min-height:
    78px !important;

  margin:
    0 !important;

  padding:
    8px 2px !important;

  border:
    0 !important;

  border-radius:
    0 !important;

  background:
    #ffffff !important;

  color:
    #8493a3 !important;
}


.jmt-settings-text {

  display:
    block !important;

  font-size:
    10px !important;

  font-weight:
    700 !important;

  line-height:
    1 !important;
}


/*
   Prevent content from sitting
   underneath the navigation.
*/
body {

  padding-bottom:
    96px !important;
}


@media
(max-width: 600px) {

  .bottom-nav.jmt-clean-main-nav
  > button {

    height:
      70px !important;

    min-height:
      70px !important;

    font-size:
      9px !important;
  }


  #navSettings {

    height:
      70px !important;

    min-height:
      70px !important;
  }


  .jmt-settings-text {

    font-size:
      9px !important;
  }
}



/* =========================================================
   JMT MOBILE SAFE BOTTOM AREA
   Prevent fixed navigation from covering Episode controls
   ========================================================= */

:root {
  --jmt-bottom-nav-height: 96px;
  --jmt-bottom-safe-space: calc(
    var(--jmt-bottom-nav-height) +
    env(safe-area-inset-bottom, 0px) +
    32px
  );
}

/* Give every main screen enough room above fixed navigation */
.page,
.screen,
.view,
main,
#episodePage,
#analysisPage,
#carePlanPage,
#reportPage {
  padding-bottom: var(--jmt-bottom-safe-space) !important;
}

/* Episode needs additional space for its final action */
#episodePage {
  padding-bottom: calc(
    var(--jmt-bottom-safe-space) + 36px
  ) !important;
}

/* Keep Save Episode in normal document flow */
#saveEpisode,
#saveEpisodeBtn,
.save-episode,
.save-episode-button {
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: 24px !important;
}

/* Bottom navigation stays above page content */
.bottom-nav,
#bottomNav,
.app-bottom-nav,
.jmt-bottom-nav {
  z-index: 1000 !important;
}

/* Extra protection for phones */
@media (max-width: 768px) {

  body {
    padding-bottom:
      env(safe-area-inset-bottom, 0px);
  }

  #episodePage {
    padding-bottom: calc(
      var(--jmt-bottom-nav-height) +
      env(safe-area-inset-bottom, 0px) +
      72px
    ) !important;
  }
}


/* =========================================================
   JMT-TMJ EPISODE SAVE ACTION AREA
   Keep Save Episode and confirmation label fully visible
   ========================================================= */

:root {
  --jmt-nav-height: 92px;
  --jmt-save-area-gap: 26px;
}


/* Give the Episode page enough space above the fixed nav */
#episodePage,
[data-page="episode"],
.page-episode,
.episode-page {
  padding-bottom: calc(
    var(--jmt-nav-height) +
    env(safe-area-inset-bottom, 0px) +
    150px
  ) !important;
}


/* Save Episode button */
#saveEpisode {
  position: relative !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  min-height: 58px !important;

  margin-top: 26px !important;
  margin-bottom: 10px !important;

  padding: 14px 18px !important;

  z-index: 5 !important;

  box-sizing: border-box !important;
}


/* Confirmation label directly below Save Episode */
#saveEpisode + .save-status,
#saveEpisode + .save-note,
#saveEpisode + .episode-save-note,
.jmt-save-confirmation {
  position: relative !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  min-height: 28px !important;

  margin: 0 0 30px !important;

  padding: 4px 12px !important;

  color: #65778a !important;

  font-size: 12px !important;
  line-height: 1.35 !important;

  text-align: center !important;

  z-index: 5 !important;
}


/* Prevent fixed navigation from covering the save area */
.bottom-nav,
.jmt-clean-main-nav {
  position: fixed !important;

  bottom: 0 !important;

  z-index: 1000 !important;
}


/* Mobile spacing */
@media (max-width: 768px) {

  #episodePage,
  [data-page="episode"],
  .page-episode,
  .episode-page {
    padding-bottom: calc(
      var(--jmt-nav-height) +
      env(safe-area-inset-bottom, 0px) +
      175px
    ) !important;
  }

  #saveEpisode {
    min-height: 60px !important;

    margin-top: 24px !important;
    margin-bottom: 10px !important;
  }

  .jmt-save-confirmation {
    margin-bottom: 36px !important;

    font-size: 11px !important;
  }

}



/* =========================================================
   FINAL EPISODE SAVE AREA
   Keep button and confirmation fully above bottom navigation
   ========================================================= */

#saveEpisode {
  position: relative !important;

  display: flex;

  width: 100% !important;

  min-height: 60px !important;

  align-items: center !important;
  justify-content: center !important;

  margin-top: 24px !important;
  margin-bottom: 8px !important;

  padding: 14px 18px !important;

  box-sizing: border-box !important;

  z-index: 10 !important;
}


/* Preserve the app's normal hidden state */
#saveEpisode.hidden {
  display: none !important;
}


/* Confirmation under Save Episode */
.jmt-save-confirmation {
  position: relative !important;

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;

  min-height: 28px !important;

  padding: 4px 12px !important;

  /*
     Critical:
     reserve space between confirmation
     and fixed navigation.
  */
  margin:
    0 0
    calc(
      110px +
      env(safe-area-inset-bottom, 0px)
    )
    0 !important;

  box-sizing: border-box !important;

  color: #66788a !important;

  font-size: 12px !important;
  font-weight: 500 !important;

  line-height: 1.35 !important;

  text-align: center !important;

  z-index: 10 !important;
}


/* Do not show confirmation before Save Episode is available */
#saveEpisode.hidden + .jmt-save-confirmation {
  display: none !important;
}


/* When Save Episode appears, confirmation appears with it */
#saveEpisode:not(.hidden) + .jmt-save-confirmation {
  display: flex !important;
}


/*
   Make sure the episode entry sheet itself
   has enough scrollable space at the bottom.
*/
#entryModal .modal-sheet,
#entryModal .entry-sheet,
#entryModal .modal-content,
.episode-entry-sheet {
  padding-bottom:
    calc(
      120px +
      env(safe-area-inset-bottom, 0px)
    ) !important;
}


/* Mobile */
@media (max-width: 768px) {

  #saveEpisode {
    min-height: 60px !important;

    margin-top: 22px !important;
  }

  .jmt-save-confirmation {
    min-height: 30px !important;

    margin-bottom:
      calc(
        120px +
        env(safe-area-inset-bottom, 0px)
      ) !important;

    font-size: 11px !important;
  }

}



/* =========================================================
   JMT-TMJ CARE PLAN SAFE BOTTOM AREA
   Prevent Care Plan action controls from being hidden
   behind the fixed bottom navigation
   ========================================================= */

:root {
  --jmt-care-nav-height: 108px;
  --jmt-care-bottom-gap: 40px;
}


/* Care Plan modal / panel content */
.care-plan-modal,
.care-plan-sheet,
.care-plan-panel,
.care-plan-detail,
.care-plan-content,
.care-modal-content,
#carePlanModal,
#carePlanDetailModal {
  padding-bottom: calc(
    var(--jmt-care-nav-height) +
    var(--jmt-care-bottom-gap) +
    env(safe-area-inset-bottom, 0px)
  ) !important;

  scroll-padding-bottom: calc(
    var(--jmt-care-nav-height) +
    var(--jmt-care-bottom-gap) +
    env(safe-area-inset-bottom, 0px)
  ) !important;
}


/* Log Today / Save Today action areas */
.care-plan-action,
.care-plan-actions,
.care-plan-log,
.care-plan-save,
.care-log-action,
.care-save-action,
.log-today,
.save-today,
[id*="LogToday"],
[id*="SaveToday"],
[id*="logToday"],
[id*="saveToday"] {
  position: relative !important;
  z-index: 20 !important;
  margin-bottom: 24px !important;
}


/* Blue action buttons */
.care-plan-action button,
.care-plan-actions button,
.care-plan-log button,
.care-plan-save button,
.log-today button,
.save-today button,
[id*="LogToday"],
[id*="SaveToday"],
[id*="logToday"],
[id*="saveToday"] {
  min-height: 56px !important;
  width: 100% !important;
}


/* Keep final action completely above navigation */
.care-plan-content > :last-child,
.care-plan-detail > :last-child,
.care-plan-panel > :last-child,
#carePlanModal .modal-content > :last-child,
#carePlanDetailModal .modal-content > :last-child {
  margin-bottom: calc(
    var(--jmt-care-nav-height) +
    24px +
    env(safe-area-inset-bottom, 0px)
  ) !important;
}


/* Mobile correction */
@media (max-width: 768px) {

  :root {
    --jmt-care-nav-height: 112px;
    --jmt-care-bottom-gap: 48px;
  }

  .care-plan-modal,
  .care-plan-sheet,
  .care-plan-panel,
  .care-plan-detail,
  .care-plan-content,
  .care-modal-content,
  #carePlanModal,
  #carePlanDetailModal {
    padding-bottom: calc(
      var(--jmt-care-nav-height) +
      var(--jmt-care-bottom-gap) +
      env(safe-area-inset-bottom, 0px)
    ) !important;
  }
}


/* ==========================================================
   JMT-TMJ CARE SESSION MODAL FIX
   Keep Record Today / Start Activity above bottom navigation
   ========================================================== */

#careSessionModal {
  position: fixed !important;
  inset: 0 !important;

  z-index: 12000 !important;

  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;

  overflow: hidden !important;

  padding: 0 !important;

  background: rgba(25, 43, 61, 0.58) !important;
}


/* Respect normal hidden state */

#careSessionModal.hidden {
  display: none !important;
}


/* Actual white Care Plan session sheet */

#careSessionModal .modal-sheet,
#careSessionModal .care-session-sheet {

  position: relative !important;

  width: min(100%, 610px) !important;

  height: auto !important;

  max-height: calc(
    100dvh - 24px
  ) !important;

  margin: 0 auto !important;

  padding:
    14px
    18px
    calc(
      130px +
      env(safe-area-inset-bottom, 0px)
    )
    !important;

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

  overscroll-behavior: contain !important;

  -webkit-overflow-scrolling: touch !important;

  box-sizing: border-box !important;

  border-radius: 28px 28px 0 0 !important;

  background: #ffffff !important;
}


/* The READY stage contains Record Today / Start Activity */

#careSessionReady {
  display: block;
  position: relative !important;

  padding-bottom: 18px !important;
}

#careSessionReady.hidden {
  display: none !important;
}


/* Main blue action button */

#beginCareSession {

  display: flex !important;

  align-items: center !important;
  justify-content: center !important;

  position: relative !important;

  width: 100% !important;

  min-height: 58px !important;

  margin:
    18px
    0
    18px
    0 !important;

  padding: 14px 18px !important;

  box-sizing: border-box !important;

  z-index: 20 !important;

  border-radius: 16px !important;

  cursor: pointer !important;
}


/* Running stage */

#careSessionRunning {
  position: relative !important;

  padding-bottom: 24px !important;
}

#careSessionRunning.hidden {
  display: none !important;
}


/* Assessment/save stage */

#careSessionAssessment {
  position: relative !important;

  padding-bottom: 30px !important;
}

#careSessionAssessment.hidden {
  display: none !important;
}


/*
   Bottom navigation stays below the Care Session popup.
   This is important because the previous nav used z-index 9000.
*/

body.modal-open .bottom-nav,
body.modal-open .jmt-clean-main-nav,
body.modal-open .jmt-final-main-nav {

  z-index: 8000 !important;
}


/*
   Care Session must remain above navigation.
*/

#careSessionModal {
  z-index: 12000 !important;
}


/* Desktop and tablet */

@media (min-width: 769px) {

  #careSessionModal {

    padding-top: 20px !important;

  }

  #careSessionModal .modal-sheet,
  #careSessionModal .care-session-sheet {

    max-height: calc(
      100dvh - 20px
    ) !important;

    padding-bottom:
      130px !important;

  }

}


/* Phone */

@media (max-width: 768px) {

  #careSessionModal .modal-sheet,
  #careSessionModal .care-session-sheet {

    width: 100% !important;

    max-height: calc(
      100dvh - 8px
    ) !important;

    padding-bottom: calc(
      138px +
      env(safe-area-inset-bottom, 0px)
    ) !important;

  }

  #beginCareSession {

    min-height: 60px !important;

    margin-top: 20px !important;
    margin-bottom: 20px !important;

  }

}