/* Phase 71J.17 — shared phone, tablet, laptop and desktop compatibility layer. */
:root {
  --cdc-touch-target: 44px;
  --cdc-page-gutter: clamp(8px, 2vw, 24px);
}

html {
  width: 100%;
  min-width: 0;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
}

*, *::before, *::after { box-sizing: border-box; }

:where(.flex, .grid, .app-shell, main, section, article, aside, header, footer) > * {
  min-width: 0;
}

:where(img, video, canvas, svg) {
  max-width: 100%;
  height: auto;
}

:where(input, select, textarea, button) {
  max-width: 100%;
  font-family: inherit;
}

:where(button, a, input, select, textarea) {
  touch-action: manipulation;
}

:where(.overflow-auto, .overflow-x-auto, .table-responsive, .table-wrap, .imp-table-scroll) {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scrollbar-gutter: stable;
}

:where(table) {
  max-width: 100%;
}

:where(th, td) {
  overflow-wrap: anywhere;
}

:where(.modal, [role="dialog"]) {
  max-width: 100vw;
  max-height: 100dvh;
}

@media (pointer: coarse) {
  :where(button, .btn, .btn-primary, .btn-danger, .btn-green, a.opm-small-btn, a.supm-small-btn) {
    min-height: var(--cdc-touch-target);
  }
}

@media (max-width: 767px) {
  :where(input, select, textarea) {
    font-size: 16px !important;
  }

  :where(.panel, .panel2, .opm-card, .supm-card) {
    max-width: 100%;
  }

  body[data-admin-module] .app-shell > :not(#sidebar) {
    width: 100%;
    max-width: 100%;
    padding-left: var(--cdc-page-gutter) !important;
    padding-right: var(--cdc-page-gutter) !important;
  }

  body[data-admin-module] #sidebar {
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-admin-module] .admin-module-nav-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-admin-module] :where(.panel, .panel2) {
    padding: 12px !important;
  }

  body[data-admin-module] :where(.overflow-auto, .overflow-x-auto) {
    border-radius: 10px;
  }

  body[data-admin-module] :where(.fixed.inset-0, [role="dialog"]) {
    padding: 8px;
    align-items: flex-start;
    overflow-y: auto;
  }

  body[data-admin-module] :where(.fixed.inset-0, [role="dialog"]) > :where(.panel, .panel2, div) {
    max-width: 100%;
  }

  :where(.opm-top, .supm-topbar, .supm-entry-top) {
    padding-top: max(12px, env(safe-area-inset-top));
  }

  :where(.opm-bottom-nav, .supm-bottom-nav, .opm-sticky-board) {
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 420px) {
  :where(.opm-grid2, .opm-actions) {
    grid-template-columns: 1fr;
  }

  :where(.opm-top, .supm-topbar, .supm-entry-top) {
    align-items: flex-start;
  }
}

@media (min-width: 900px) {
  body.opm-body .opm-shell,
  body.supm-body .supm-shell {
    width: min(1120px, calc(100% - 32px));
    max-width: none;
  }

  body.opm-body .opm-actions {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  body.opm-body .opm-bottom-nav,
  body.supm-body .supm-bottom-nav,
  body.opm-body .opm-sticky-board {
    left: 50%;
    right: auto;
    width: min(1120px, calc(100% - 32px));
    transform: translateX(-50%);
    border-left: 1px solid var(--op-line, var(--line));
    border-right: 1px solid var(--op-line, var(--line));
    border-radius: 18px 18px 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}