/* Loaded after the vendor styles so touch controls keep their intended size. */
.price-chart-frame {
  position: relative;
  width: 100%;
  height: min(65vh, 650px);
  min-height: 300px;
  margin-top: 12px;
}
.price-chart-panel { position: relative; width: 100%; height: 100%; }
.chart-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.chart-controls select { max-width: 100%; min-height: 44px; font-size: 16px; }
.chart-day-link { display: inline-block; padding: 10px 0; }
.chart-orientation-hint { display: none; }

@media (max-width: 767px) {
  html, body { margin: 0; padding: 0; }
  #adminPages { height: auto; min-height: 100%; }
  #dynamicPageDiv.page-container {
    position: relative;
    left: 0;
    width: 100%;
    height: auto;
    padding: 64px 12px 20px;
    box-sizing: border-box;
  }
  .msd-page { margin: 0; padding: 0; min-width: 0; }
  .msd-page h1 { font-size: 1.4rem; padding: 8px 0; overflow-wrap: anywhere; }
  .app-logo { display: none; }
  ul.menu {
    top: 0; left: 0; width: 100%; height: 56px;
    display: flex; align-items: stretch;
    font-size: 14px;
  }
  ul.menu li { flex: 1; font-size: 14px; }
  ul.menu li a {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 56px; line-height: normal;
    text-indent: 0; font: 14px Arial, sans-serif; text-decoration: none;
  }
  ul.menu li a::before { display: none; }
  ul.menu-bar {
    top: 56px; left: 0; bottom: auto;
    width: min(320px, 100%); height: auto; max-height: calc(100dvh - 56px);
    overflow-y: auto; z-index: 20;
  }
  ul.menu-bar li a { height: auto; min-height: 48px; line-height: 1.3; padding: 14px; white-space: normal; }
  ul.menu-bar li:first-child a { height: auto; line-height: 1.3; }
  #dynamicPageDiv input:not([type=checkbox]):not([type=radio]),
  #dynamicPageDiv select, #dynamicPageDiv textarea,
  div.DTE input:not([type=checkbox]):not([type=radio]), div.DTE select, div.DTE textarea {
    box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0;
    min-height: 48px; padding: 10px 12px; font-size: 16px;
  }
  #dynamicPageDiv button, #dynamicPageDiv .dt-button, div.DTE button {
    min-height: 44px; font-size: 16px; padding: 10px 14px;
  }
  .login-div { width: 100%; box-sizing: border-box; }
  .login-div div { flex-direction: column; gap: 6px; }
  .login-div .buttons-div { flex-wrap: wrap; gap: 8px; }
  div.dataTables_wrapper .dt-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  div.dataTables_wrapper .dataTables_filter { float: none; text-align: left; margin-bottom: 12px; }
  div.dataTables_wrapper .dataTables_filter label { display: block; }
  div.dataTables_wrapper .dataTables_filter input { margin-left: 0; }
  table.dataTable tbody td { padding-top: 14px; padding-bottom: 14px; overflow-wrap: anywhere; }
  table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control { padding-left: 32px; }
  table.dataTable > tbody > tr.child ul.dtr-details { display: block; }
  table.dataTable > tbody > tr.child span.dtr-data { overflow-wrap: anywhere; }
  div.DTED_Lightbox_Wrapper { left: 8px; right: 8px; width: auto; margin-left: 0; }
  .ui-dialog {
    position: fixed !important;
    top: 8px !important; left: 8px !important;
    width: calc(100vw - 16px) !important;
    max-height: calc(100dvh - 16px);
    box-sizing: border-box;
  }
  .ui-dialog .ui-dialog-content {
    width: auto !important; height: auto !important;
    max-height: calc(100dvh - 160px) !important;
    overflow: auto;
  }
  .ui-dialog .ui-dialog-titlebar { min-height: 44px; box-sizing: border-box; }
  .ui-dialog .ui-dialog-titlebar-close { width: 44px; height: 44px; margin-top: -22px; right: 0; }
  .ui-dialog .ui-dialog-titlebar-close .ui-icon { display: none; }
  .ui-dialog .ui-dialog-titlebar-close::after { content: '×'; font-size: 26px; line-height: 1; }
  .ui-dialog .ui-dialog-buttonpane { margin-top: 0; }
  .ui-dialog .ui-dialog-buttonset button { min-height: 44px; font-size: 16px; padding: 8px 14px; }
  div.DTE_Body div.DTE_Body_Content div.DTE_Field { padding: 10px 12px; }
  div.DTE_Body div.DTE_Body_Content div.DTE_Field > label,
  div.DTE_Body div.DTE_Body_Content div.DTE_Field > div.DTE_Field_Input {
    float: none; width: 100%; padding: 0;
  }
  div.DTE_Body div.DTE_Body_Content div.DTE_Field > label { margin-bottom: 6px; }
  div.DTE_Field div.DTE_Field_Error { font-size: 14px; line-height: 1.4; }
  div.DTE div.DTE_Form_Buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  div.DTE div.DTE_Form_Buttons button { margin: 0; }
  #errorBox { position: fixed; left: 12px; right: 12px; bottom: 12px; overflow-wrap: anywhere; z-index: 30; }
}

/* Rotate only the graph. Reserve its rotated height in normal document flow. */
@media (max-width: 767px) and (orientation: portrait) {
  .price-chart-frame {
    --landscape-width: max(480px, calc(100svh - 210px));
    height: var(--landscape-width);
    min-height: 0;
  }
  .price-chart-panel {
    position: absolute; top: 0; left: 100%;
    width: var(--landscape-width); height: calc(100vw - 24px);
    transform-origin: top left;
    transform: rotate(90deg);
  }
  .chart-orientation-hint { display: block; font-size: 0.875rem; margin: 8px 0; color: #555; }
}