/* Section-tab geometry shared by the tab families in the UI height audit.
 * The 1px edge INCLUDES the outer border: there is no extra vertical padding.
 * Mobile uses a 48px, horizontally scrollable strip; desktop uses 56px.
 */
:root {
  --section-tabs-desktop-height: 56px;
  --section-tabs-mobile-height: 48px;
  --section-tabs-height: var(--section-tabs-desktop-height);
  --section-tabs-edge: 1px;
}

:root :is(
  .operation-index-tabs,
  .workplace-top-tabs,
  .workplace-setting-tabs,
  .operation-item-outbound-viewtabs,
  .su-detail-tabs,
  .parts-detail-tabs
) {
  box-sizing: border-box;
  border-top: var(--section-tabs-edge) solid #eaecf0;
  border-bottom: var(--section-tabs-edge) solid #eaecf0;
  padding-block: 0;
  align-items: stretch;
  flex-shrink: 0;
  flex-wrap: nowrap;
  height: var(--section-tabs-height);
  min-height: var(--section-tabs-height);
  max-height: var(--section-tabs-height);
}

:root :is(
  .operation-index-tabs,
  .workplace-top-tabs,
  .workplace-setting-tabs,
  .operation-item-outbound-viewtabs,
  .su-detail-tabs,
  .parts-detail-tabs
) > :is(a, strong, span, button) {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  height: calc(var(--section-tabs-height) - 2 * var(--section-tabs-edge));
  min-height: calc(var(--section-tabs-height) - 2 * var(--section-tabs-edge));
  max-height: calc(var(--section-tabs-height) - 2 * var(--section-tabs-edge));
  padding-block: 0;
}

@media (max-width: 760px) {
  :root {
    --section-tabs-height: var(--section-tabs-mobile-height);
  }

  :root :is(
    .operation-index-tabs,
    .workplace-top-tabs,
    .workplace-setting-tabs,
    .operation-item-outbound-viewtabs,
    .su-detail-tabs,
    .parts-detail-tabs
  ) {
    display: flex;
    justify-content: flex-start;
    min-width: 0;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  :root :is(
    .operation-index-tabs,
    .workplace-top-tabs,
    .workplace-setting-tabs,
    .operation-item-outbound-viewtabs,
    .su-detail-tabs,
    .parts-detail-tabs
  ) > :is(a, strong, span, button) {
    flex: 1 0 88px;
    min-width: 88px;
    padding-inline: 8px;
    white-space: normal;
  }

  :root :is(
    .operation-index-tabs,
    .workplace-top-tabs,
    .workplace-setting-tabs,
    .operation-item-outbound-viewtabs,
    .su-detail-tabs,
    .parts-detail-tabs
  )::-webkit-scrollbar {
    display: none;
  }

  /* This older mobile rule has an !important padding shorthand. */
  .layout-contract-shell.trade-project-shell .project-operation-summary.operation-index-tabs {
    padding-block: 0 !important;
  }
}

@media (min-width: 761px) {
  /* These pages formerly switched to a multi-row grid at 840px. Keep the
   * desktop strip in one row; mobile is a horizontal strip too. */
  :root .item-limit-shell .su-detail-tabs {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  :root .item-limit-shell .sku-detail-tabs {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}