/* 20260825 mobile compact peer tabs.
   Rollback boundary: remove this stylesheet link to restore the prior layout.
   Only peer navigation/tab controls are compacted; business action buttons,
   forms, cards and desktop layouts remain unchanged. */
@media (max-width: 760px) {
  .leaderboard-visual .leaderboard-shortcuts,
  .leaderboard-visual .leaderboard-shortcuts.has-workbench-logout,
  .leaderboard-visual .leaderboard-shortcuts.has-admin-entry {
    gap: 6px !important;
    padding: 5px 4px 7px !important;
  }

  .leaderboard-visual .leaderboard-shortcuts > a:not(.quick-logout-action):not([data-home-logout]) {
    flex: 0 0 clamp(88px, 25vw, 104px) !important;
    width: clamp(88px, 25vw, 104px) !important;
    min-width: 88px !important;
    max-width: 104px !important;
    min-height: 56px !important;
    padding: 6px 4px !important;
    gap: 3px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
  }

  .leaderboard-visual .leaderboard-shortcuts > a:not(.quick-logout-action):not([data-home-logout]) .icon {
    width: 25px !important;
    height: 25px !important;
  }

  :is(
    .leaderboard-tabs,
    .tabs,
    .strict-tabs,
    .role-tabs,
    .auth-tabs,
    .online-service-tabs,
    .user-account-tabs,
    .role-management-section-tabs,
    .role-management-tabs,
    .service-management-tabs,
    .site-settings-section-tabs,
    .communications-management-tabs,
    .information-management-tabs,
    .message-publish-tabs,
    .message-manage-tabs,
    .task-record-tabs,
    .task-manage-tabs,
    .task-audit-tabs,
    .product-publish-tabs,
    .physical-product-tabs,
    .physical-product-category-tabs,
    .factory-tabs,
    .freight-primary-tabs,
    .freight-business-tabs,
    .factory-admin-tabs,
    .factory-product-tabs,
    .factory-platform-record-tabs,
    .freight-admin-order-tabs,
    .teacher-work-tabs,
    .finance-stats-tabs,
    .finance-top-tabs,
    .profile-sub-tabs,
    .finance-registration-tabs,
    .finance-reconciliation-tabs,
    .recruitment-enterprise-tabs,
    .recruitment-enterprise-subtabs,
    .recruitment-reviewer-tabs,
    .recruiter-resume-tabs,
    .classroom-board-tabs,
    .course-stage-tabs,
    .career-sub-tabs,
    .point-exchange-tabs,
    .personal-center-tabs,
    .personal-promotion-tabs,
    .business-guide-tabs,
    .ecommerce-category-bar,
    .opportunities-tabs,
    .declaration-tabs,
    .unified-cart-tabs,
    .role-workbench-nav
  ) {
    gap: 6px !important;
    scroll-padding-inline: 3px !important;
    scroll-snap-type: none !important;
  }

  :is(
    .leaderboard-tabs,
    .tabs,
    .strict-tabs,
    .role-tabs,
    .auth-tabs,
    .online-service-tabs,
    .user-account-tabs,
    .role-management-section-tabs,
    .role-management-tabs,
    .service-management-tabs,
    .site-settings-section-tabs,
    .communications-management-tabs,
    .information-management-tabs,
    .message-publish-tabs,
    .message-manage-tabs,
    .task-record-tabs,
    .task-manage-tabs,
    .task-audit-tabs,
    .product-publish-tabs,
    .physical-product-tabs,
    .physical-product-category-tabs,
    .factory-tabs,
    .freight-primary-tabs,
    .freight-business-tabs,
    .factory-admin-tabs,
    .factory-product-tabs,
    .factory-platform-record-tabs,
    .freight-admin-order-tabs,
    .finance-stats-tabs,
    .finance-top-tabs,
    .profile-sub-tabs,
    .finance-registration-tabs,
    .finance-reconciliation-tabs,
    .recruitment-enterprise-tabs,
    .recruitment-enterprise-subtabs,
    .recruitment-reviewer-tabs,
    .classroom-board-tabs,
    .course-stage-tabs,
    .career-sub-tabs,
    .point-exchange-tabs,
    .personal-center-tabs,
    .personal-promotion-tabs,
    .business-guide-tabs,
    .ecommerce-category-bar,
    .opportunities-tabs,
    .declaration-tabs,
    .unified-cart-tabs,
    .role-workbench-nav
  ) > :is(button, a):not(.factory-nav-logout):not(.classroom-logout-button):not([data-home-logout]) {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: clamp(78px, 23vw, 96px) !important;
    max-width: 112px !important;
    height: auto !important;
    min-height: 40px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    scroll-snap-align: none !important;
  }

  :is(
    .teacher-work-tabs,
    .recruiter-resume-tabs,
    .service-management-tabs,
    .message-publish-tabs,
    .message-manage-tabs,
    .task-record-tabs,
    .task-manage-tabs,
    .factory-product-tabs,
    .factory-platform-record-tabs,
    .freight-admin-order-tabs,
    .recruitment-enterprise-tabs,
    .recruitment-enterprise-subtabs,
    .recruitment-reviewer-tabs
  ) > :is(button, a) {
    min-width: clamp(108px, 31vw, 128px) !important;
    max-width: 140px !important;
    min-height: 42px !important;
    white-space: normal !important;
  }

  body.recruit-teach-body[data-work-mode] :is(.teacher-work, .recruiter-work, .finance-work) .teacher-work-tabs > button {
    height: auto !important;
    min-height: 42px !important;
    padding: 6px 9px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
  }

  .classroom-body .classroom-board-tabs > button,
  .classroom-body .classroom-board-tabs.guest-classroom-tabs > button {
    flex-basis: clamp(82px, 24vw, 98px) !important;
    width: clamp(82px, 24vw, 98px) !important;
    min-width: 82px !important;
    max-width: 98px !important;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .role-workbench-nav > a,
  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-work > .teacher-work-tabs:not(.recruiter-resume-tabs) > button {
    flex-basis: clamp(88px, 25vw, 104px) !important;
    width: clamp(88px, 25vw, 104px) !important;
    min-width: 88px !important;
    max-width: 104px !important;
  }

  /* Ecommerce categories stay fixed in the viewport; additional categories
     wrap to a new row instead of shifting the rail or product cards left. */
  .classroom-body .ecommerce-panel .ecommerce-catalog-split,
  .classroom-body .ecommerce-panel .ecommerce-catalog-sidebar,
  .classroom-body .ecommerce-panel .ecommerce-catalog-main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .classroom-body .ecommerce-panel .ecommerce-catalog-sidebar {
    overflow: hidden !important;
  }

  .classroom-body .ecommerce-panel .ecommerce-category-bar {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    gap: 6px !important;
    padding: 0 0 6px !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  .classroom-body .classroom-extra-panel.ecommerce-panel .ecommerce-catalog-split .ecommerce-catalog-sidebar .ecommerce-category-bar > button {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 38px !important;
    padding: 5px 3px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  /* Products form a touch-friendly horizontal rail on learner mobile pages.
     A narrow preview of the next card makes the swipe direction discoverable. */
  .classroom-body .ecommerce-panel .ecommerce-product-table {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 0 0 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-padding-inline: 0 !important;
    overscroll-behavior-inline: contain !important;
    touch-action: pan-x pan-y !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .classroom-body .ecommerce-panel .ecommerce-product-row-head {
    display: none !important;
  }

  .classroom-body .ecommerce-panel .ecommerce-product-row:not(.ecommerce-product-row-head) {
    flex: 0 0 calc(100% - 18px) !important;
    width: calc(100% - 18px) !important;
    min-width: calc(100% - 18px) !important;
    max-width: calc(100% - 18px) !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
  }

  .classroom-body .ecommerce-panel .ecommerce-product-row .ecommerce-row-actions {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .classroom-body .ecommerce-panel .ecommerce-product-row .ecommerce-row-actions > button {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 5px 3px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  /* The freight workbench only has two primary destinations. Keep both visible
     and distribute the full mobile row between them. */
  .freight-forwarder-body .freight-primary-tabs {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  .freight-forwarder-body .factory-tabs.freight-primary-tabs > button:not(.factory-nav-logout):not(.classroom-logout-button):not([data-home-logout]) {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
    white-space: normal !important;
  }

  .freight-forwarder-body .freight-table-wrap {
    overflow-x: hidden !important;
    touch-action: pan-y !important;
  }

  .freight-forwarder-body .freight-order-table {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Recruiter workbench primary destinations stay fully visible as one fixed
     row instead of becoming a horizontally clipped rail. */
  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-work > .teacher-work-tabs:not(.recruiter-resume-tabs) {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  .recruit-teach-body[data-work-mode="recruiter"] .recruiter-work > .teacher-work-tabs:not(.recruiter-resume-tabs) > button:not(.factory-nav-logout):not(.classroom-logout-button):not([data-home-logout]) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-inline: 4px !important;
    font-size: 11px !important;
    white-space: normal !important;
  }

  /* Finance mobile uses fixed compact grids so every destination is visible
     without pushing the page or its cards to the right. */
  .recruit-teach-body[data-work-mode="finance"] .finance-top-tabs {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    width: 100% !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  .recruit-teach-body[data-work-mode="finance"] .finance-stats-tabs {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    width: 100% !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  .recruit-teach-body[data-work-mode="finance"] :is(.finance-registration-tabs, .finance-reconciliation-tabs) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    overflow: visible !important;
    touch-action: pan-y !important;
  }

  .recruit-teach-body[data-work-mode="finance"] :is(.finance-top-tabs, .finance-stats-tabs, .finance-registration-tabs, .finance-reconciliation-tabs) > button:not(.factory-nav-logout):not(.classroom-logout-button):not([data-home-logout]) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 42px !important;
    padding: 5px 3px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }
}