html,
body,
#root {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

.po-root .section-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  flex-wrap: wrap !important;
  margin-bottom: 0.65rem !important;
}

.po-root .section-head .section-title {
  margin-bottom: 0 !important;
}

.po-root .date-filter {
  display: inline-grid !important;
  grid-template-columns: minmax(9.25rem, 1fr) auto minmax(9.25rem, 1fr) !important;
  align-items: center !important;
  gap: 0.45rem !important;
  max-width: 100% !important;
}

.po-root .date-filter span {
  color: var(--text-secondary) !important;
  opacity: 1 !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

.po-root .date-filter input[type="date"] {
  width: 100% !important;
  min-width: 0 !important;
  height: 2.3rem !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  background: var(--secondary-input, var(--surface)) !important;
  color: var(--text-primary) !important;
  color-scheme: light !important;
  font: inherit !important;
  font-size: 0.92rem !important;
  line-height: 1.2 !important;
  padding: 0.35rem 0.5rem !important;
  outline: none !important;
  box-shadow: none !important;
}

.po-root .date-filter input[type="date"]:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent) !important;
}

html[data-theme="dark"] .po-root .date-filter input[type="date"] {
  color-scheme: dark !important;
}

html[data-theme="dark"] .po-root .date-filter input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.35) !important;
  opacity: 0.85 !important;
}

.po-root .apexcharts-text,
.po-root .apexcharts-xaxis-label,
.po-root .apexcharts-yaxis-label,
.po-root .apexcharts-legend-text {
  fill: var(--text-secondary) !important;
  color: var(--text-secondary) !important;
}

.po-root .apexcharts-gridline {
  stroke: var(--border) !important;
  opacity: 0.85 !important;
}

.po-root .apexcharts-tooltip,
.po-root .apexcharts-xaxistooltip,
.po-root .apexcharts-yaxistooltip {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--text-primary) !important;
}

#question-stem-container img,
.explanation-main-text img,
.choices-breakdown img,
.answer-content-body img,
.option-content img,
.question-media img {
  max-width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  transition: none !important;
  animation: none !important;
  backface-visibility: hidden !important;
  transform: translateZ(0) !important;
  content-visibility: visible !important;
}

@media (max-width: 1024px) {
  .medical-test-interface,
  .medical-layout,
  .medical-test-content,
  .test-main-body,
  .content-area,
  .exhibit-text,
  .question-content,
  .medical-options {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .content-split-columns,
  .split-view-columns {
    flex-direction: column !important;
  }

  .question-pane,
  .explanation-pane {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
  }

  .moveable-line {
    display: none !important;
  }

  .medical-option-row,
  .answer-reveal-summary,
  .ars-right {
    max-width: 100% !important;
  }

  .option-value,
  .question-stem-text,
  .explanation-content-body {
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }

  #question-stem-container img,
  .explanation-main-text img,
  .choices-breakdown img,
  .answer-content-body img,
  .option-content img,
  .question-media img {
    min-height: 0 !important;
    object-fit: contain !important;
  }
}

@media (max-width: 768px) {
  .po-root {
    padding-inline: 0.75rem !important;
  }

  .po-root .po-header,
  .po-root .section-head {
    align-items: stretch !important;
  }

  .po-root .date-filter {
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  }

  .po-root .date-filter input[type="date"] {
    font-size: 0.86rem !important;
    padding-inline: 0.42rem !important;
  }

  .po-root .chart-wrap {
    width: 100% !important;
    overflow: hidden !important;
  }

  .medical-footer {
    max-width: 100vw !important;
  }

  .medical-library-drawer-overlay .medical-library-container {
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .po-root .date-filter {
    grid-template-columns: 1fr !important;
    gap: 0.35rem !important;
  }

  .po-root .date-filter span {
    text-align: center !important;
  }
}