/**
 * OncoEdge – cross-device responsive foundation
 * Android Chrome, iOS Safari (iPhone/iPad), tablets, and narrow desktops.
 */

:root {
  --oe-safe-left: env(safe-area-inset-left, 0px);
  --oe-safe-right: env(safe-area-inset-right, 0px);
}

/* Prevent automatic text inflation on orientation change (iOS) */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* Legacy iOS Safari viewport height before dvh support */
@supports not (height: 100dvh) {
  html.oe-app-root,
  html.oe-app-root body {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }

  .oe-app {
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

/* Horizontal safe-area on fixed chrome */
.oe-header {
  padding-left: max(var(--oe-content-pad), var(--oe-safe-left));
  padding-right: max(var(--oe-content-pad), var(--oe-safe-right));
}

.oe-footer {
  padding-left: max(var(--oe-content-pad), var(--oe-safe-left));
  padding-right: max(var(--oe-content-pad), var(--oe-safe-right));
}

.oe-subheader {
  padding-left: max(var(--oe-content-pad), var(--oe-safe-left));
  padding-right: max(var(--oe-content-pad), var(--oe-safe-right));
}

/* Momentum scrolling + contain overscroll inside app shell */
.oe-main__scroll,
.oe-questions-panel__scroll,
.modal-content,
.oe-table-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Faster taps, no double-tap zoom delay on controls */
button,
.btn,
.oe-pagination__btn,
.exam-palette__btn,
.exam-option,
.oe-option-btn,
.theme-toggle,
.icon-header-button,
.tab-btn,
.toggle-public-btn {
  touch-action: manipulation;
}

/* iOS Safari: inputs below 16px trigger page zoom on focus */
@media (max-width: 768px) {
  input,
  select,
  textarea,
  .oe-input,
  .oe-select,
  .exam-jump input {
    font-size: 16px;
  }
}

/* Coarse pointers: skip hover lift animations */
@media (hover: none) {
  .exam-item:hover,
  .history-item:hover,
  .exam-option:hover,
  .oe-option-btn--clickable:hover,
  .btn:hover:not(:disabled),
  .oe-pagination__btn:hover:not(:disabled) {
    transform: none;
  }
}

/* Scrollable data tables on narrow screens */
.oe-table-scroll,
#leaderboardDisplay {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.admin-table,
.leaderboard-table {
  min-width: 300px;
}

/* Compact header actions on phones */
@media (max-width: 576px) {
  .oe-header__controls {
    gap: 0.35rem;
  }

  .oe-header__controls .btn-secondary.btn-xs {
    padding: 0.45rem 0.55rem;
    font-size: 0.78rem;
    min-height: 40px;
  }

  .oe-header__controls .btn-secondary.btn-xs .btn-label {
    display: none;
  }

  .oe-header__controls .btn-secondary.btn-xs i {
    margin: 0;
  }

  .oe-header__title {
    font-size: clamp(0.9rem, 4vw, 1.1rem);
    max-width: min(42vw, 10rem);
  }
}

/* Tablet portrait – balanced padding */
@media (min-width: 577px) and (max-width: 1024px) {
  :root {
    --oe-content-pad: clamp(0.75rem, 2.5vw, 1.25rem);
  }

  .oe-surface.oe-card--fill {
    padding: clamp(1rem, 2vw, 1.25rem) !important;
  }
}

/* Image viewer safe areas (MCQ modules) */
#oe-image-viewer.is-open {
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#oe-image-viewer-close {
  top: calc(1rem + env(safe-area-inset-top, 0px));
  right: calc(1rem + env(safe-area-inset-right, 0px));
}

.oe-image-viewer-controls {
  bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}

/* Choices.js dropdown – stay above mobile keyboard / safe area */
@media (max-width: 768px) {
  .choices__list--dropdown {
    max-height: min(50vh, 320px);
  }
}