/* Native landscape button sizing contract.
   Keeps tight screens from turning action buttons into tall wrapped columns. */

html.native-runtime.native-orientation-short-landscape{
  --metryx-native-button-height:38px;
  --metryx-native-button-min:82px;
  --metryx-native-button-pad-x:10px;
}

html.native-runtime.native-orientation-short-landscape .btn,
html.native-runtime.native-orientation-short-landscape button.btn{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-width:0;
  max-width:100%;
  min-height:var(--metryx-native-button-height);
  padding:7px var(--metryx-native-button-pad-x);
  line-height:1.05;
  text-align:center;
  vertical-align:middle;
}

html.native-runtime.native-orientation-short-landscape .btn:not(.tiny):not(.small-btn):not(.full),
html.native-runtime.native-orientation-short-landscape button.btn:not(.tiny):not(.small-btn):not(.full){
  min-width:min(100%, var(--metryx-native-button-min));
}

html.native-runtime.native-orientation-short-landscape .btn .lean-inner,
html.native-runtime.native-orientation-short-landscape button.btn .lean-inner{
  min-width:0;
  max-width:100%;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html.native-runtime.native-orientation-short-landscape .btn.full,
html.native-runtime.native-orientation-short-landscape button.btn.full{
  width:100%;
}

html.native-runtime.native-orientation-short-landscape .btn.tiny,
html.native-runtime.native-orientation-short-landscape button.btn.tiny,
html.native-runtime.native-orientation-short-landscape .dash-service-head .btn,
html.native-runtime.native-orientation-short-landscape button.dash-month-arrow{
  --metryx-native-button-height:34px;
  --metryx-native-button-min:54px;
  --metryx-native-button-pad-x:9px;
}

html.native-runtime.native-orientation-short-landscape .run-actions .btn,
html.native-runtime.native-orientation-short-landscape .inline-btns .btn,
html.native-runtime.native-orientation-short-landscape .trip-detail-actions .btn,
html.native-runtime.native-orientation-short-landscape .trip-detail-bar .btn,
html.native-runtime.native-orientation-short-landscape .route-load-footer-actions > .btn,
html.native-runtime.native-orientation-short-landscape .route-load-footer-left-actions > .btn,
html.native-runtime.native-orientation-short-landscape .dash-active-actions .btn,
html.native-runtime.native-orientation-short-landscape .dash-active-dvir-actions .btn,
html.native-runtime.native-orientation-short-landscape .dash-action-actions .btn,
html.native-runtime.native-orientation-short-landscape .garage-modal-actions .btn,
html.native-runtime.native-orientation-short-landscape .rcptActionRow .btn{
  width:100%;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html.native-runtime.native-orientation-short-landscape .route-toolbar-actions > .btn,
html.native-runtime.native-orientation-short-landscape .header-actions > .btn,
html.native-runtime.native-orientation-short-landscape .dash-section-head .btn,
html.native-runtime.native-orientation-short-landscape .dash-service-head .btn{
  flex:0 1 auto;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

html.native-runtime.native-orientation-short-landscape #historyList .run-actions .btn,
html.native-runtime.native-orientation-short-landscape #historyList .run-actions.run-actions--saved-card .btn{
  min-height:38px;
  padding:7px 10px;
  white-space:nowrap;
  overflow:hidden;
  overflow-wrap:normal;
  text-overflow:ellipsis;
}

html.native-runtime.native-orientation-short-landscape #historyList .run-actions [data-action="view"],
html.native-runtime.native-orientation-short-landscape #historyList .run-actions [data-action="paid"],
html.native-runtime.native-orientation-short-landscape #historyList .run-actions [data-action="toggleArtifacts"],
html.native-runtime.native-orientation-short-landscape #historyList .run-actions.run-actions--status-draft [data-action="editpickup"]{
  grid-column:auto;
}

html.native-runtime.native-orientation-short-landscape #historyList .run-actions.run-actions--saved-card{
  grid-template-columns:repeat(auto-fit, minmax(96px, 1fr));
}