/* Shared responsive safety net for the seller and warehouse portals. */
html,
body,
#app,
.layout-dashboard,
.layout-dashboard > .ant-layout,
.layout-dashboard .ant-layout-content {
  max-width: 100%;
  min-width: 0;
}

img,
svg,
canvas {
  max-width: 100%;
}

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

.ant-table-wrapper,
.table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body {
    min-height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .layout-dashboard,
  .layout-dashboard > .ant-layout,
  .layout-dashboard main,
  .layout-dashboard .layout-content,
  .layout-dashboard .ant-layout-content,
  .layout-dashboard .content-ant,
  .layout-dashboard .content-wrapper {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* Leave a real scrollable clearance for the fixed navigation. Without this,
     the last card and pagination sit under the iOS/Android bottom bar. */
  .layout-dashboard > .ant-layout {
    min-height: 100dvh !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .layout-dashboard .ant-layout-content,
  .layout-dashboard .content-ant {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .layout-dashboard .ant-layout-header {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .layout-dashboard .header-control {
    min-width: 0;
    gap: 6px;
  }

  .layout-dashboard .header-control > * {
    min-width: 0;
  }

  .layout-dashboard .ant-card,
  .layout-dashboard .ant-card-body,
  .layout-dashboard .ant-row,
  .layout-dashboard [class*="col-"],
  .layout-dashboard .ant-tabs,
  .layout-dashboard .ant-tabs-content-holder,
  .layout-dashboard .ant-tabs-content,
  .layout-dashboard .ant-tabs-tabpane,
  .layout-dashboard .table-responsive,
  .layout-dashboard .ant-table-wrapper {
    min-width: 0;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Ant Design gutters use negative inline row margins. They push dashboard
     figures past the left edge on narrow screens, so neutralise them only on
     mobile while retaining the column padding. */
  .layout-dashboard .ant-row {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .layout-dashboard .ant-card-body {
    padding: 12px !important;
  }

  .layout-dashboard .ant-form-inline,
  .layout-dashboard .rightside-top,
  .layout-dashboard .pageheader,
  .layout-dashboard .filter-form {
    flex-wrap: wrap !important;
  }

  .layout-dashboard .ant-form-inline .ant-form-item,
  .layout-dashboard .ant-form-inline .ant-input-affix-wrapper,
  .layout-dashboard .ant-form-inline .ant-select,
  .layout-dashboard .ant-picker {
    max-width: 100% !important;
  }

  .layout-dashboard .ant-form,
  .layout-dashboard .ant-form-item-row,
  .layout-dashboard .ant-form-item-control,
  .layout-dashboard .ant-form-item-control-input,
  .layout-dashboard .ant-form-item-control-input-content {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .layout-dashboard .ant-input,
  .layout-dashboard .ant-input-affix-wrapper,
  .layout-dashboard .ant-input-number,
  .layout-dashboard .ant-picker,
  .layout-dashboard .ant-select,
  .layout-dashboard .ant-cascader-picker {
    max-width: 100% !important;
  }

  .top_search,
  .top_search_btn,
  .goods-action,
  .goods-operate {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  .top_search > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .pagination-box {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px 2px 10px !important;
    -webkit-overflow-scrolling: touch;
  }

  .ant-modal {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    margin: 8px auto !important;
    top: 8px !important;
    padding-bottom: 0 !important;
  }

  .ant-modal-content {
    max-height: calc(100dvh - 16px) !important;
    overflow-y: auto !important;
  }

  .ant-drawer-content-wrapper {
    width: min(92vw, 420px) !important;
    max-width: 100vw !important;
  }

  .ant-table {
    min-width: max-content;
  }

  .ant-table-content,
  .ant-table-body,
  .ant-descriptions-view {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Product management already emits a mobile card per table row. Keep that
     row inside the viewport instead of preserving the desktop table width. */
  .table-responsive:has(.mobile-top) .ant-table {
    width: 100% !important;
    min-width: 100% !important;
  }

  .table-responsive:has(.mobile-top) colgroup {
    display: none !important;
  }

  /* The mobile product row contains a desktop selection cell followed by the
     full product card. Make that relationship explicit so the checkbox can no
     longer consume half of the screen. */
  .table-responsive:has(.mobile-top) .ant-table-thead > tr,
  .table-responsive:has(.mobile-top) .ant-table-tbody > tr {
    display: grid !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    width: 100% !important;
  }

  .table-responsive:has(.mobile-top) .ant-table-thead > tr > th,
  .table-responsive:has(.mobile-top) .ant-table-tbody > tr > td {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .table-responsive:has(.mobile-top) .ant-table-thead > tr > .ant-table-selection-column,
  .table-responsive:has(.mobile-top) .ant-table-tbody > tr > .ant-table-selection-column {
    grid-column: 1 !important;
    width: 36px !important;
    padding: 12px 4px !important;
    text-align: center !important;
  }

  .table-responsive:has(.mobile-top) .ant-table-thead > tr > th:not(.ant-table-selection-column),
  .table-responsive:has(.mobile-top) .ant-table-tbody > tr > td:has(.mobile-top) {
    grid-column: 2 !important;
  }

  .table-responsive:has(.mobile-top) .ant-table-thead > tr > th:not(.ant-table-selection-column) {
    padding: 10px 8px !important;
  }

  .table-responsive:has(.mobile-top) .ant-table-tbody > tr {
    margin: 10px 0 !important;
    overflow: hidden !important;
    border: 1px solid #eee !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: 0 3px 12px rgb(0 0 0 / 5%) !important;
  }

  .table-responsive:has(.mobile-top) .ant-table-tbody > tr > td {
    border-bottom: 0 !important;
  }

  .table-responsive:has(.mobile-top) .ant-table-tbody > tr > td:has(.mobile-top) {
    padding: 12px 10px 14px 4px !important;
  }

  .mobile-top {
    display: grid !important;
    grid-template-columns: minmax(76px, 38%) minmax(0, 1fr) !important;
    gap: 8px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .mobile-top-left,
  .mobile-right {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .mobile-top .goods-image-box {
    width: min(100%, 104px) !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    margin: 0 !important;
  }

  .mobile-top .goods-image-box .ant-image,
  .mobile-top .goods-image-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .mobile-top .mobile-right {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  .mobile-top .mobile-right .grounding-switch-box-item {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: space-between !important;
    gap: 4px !important;
    white-space: nowrap !important;
    font-size: 12px !important;
  }

  .mobile-top .mobile-right .ant-switch {
    flex: 0 0 auto !important;
  }

  .mobile-bottom-line {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 6px !important;
    margin-top: 10px !important;
  }

  .mobile-bottom-line .grounding-switch-box-item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 6px !important;
    justify-content: space-between !important;
    padding: 7px 8px !important;
    border-radius: 6px !important;
    background: #fafafa !important;
    font-size: 12px !important;
  }

  .mobile-bottom-line .grounding-switch-box-item > span {
    min-width: 0 !important;
    max-width: 58% !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
  }

  .mobile-bottom .goods-operate {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 8px !important;
    padding: 10px 0 0 !important;
  }

  .mobile-bottom .goods-operate .goods-operate-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .mobile-bottom .goods-operate .goods-operate-btn:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
  }

  /* iOS safe areas belong inside the fixed bar, not below it. This keeps all
     five destinations visible above Safari's toolbar and home indicator. */
  .bottom-nav-bar {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    min-height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
    margin-bottom: 0 !important;
    padding: 8px max(6px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)) !important;
    box-sizing: border-box !important;
  }

  .bottom-nav-bar .nav-item {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 20% !important;
  }

  .bottom-nav-bar .nav-item-label,
  .bottom-nav-bar .nav-item-label-text {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .layout-signin .signin {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .layout-signin .signin-form-content {
    width: 100% !important;
    max-width: 420px !important;
    padding: 26px 20px !important;
  }

  .ant-pagination {
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding-bottom: 2px !important;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 360px) {
  .layout-dashboard .ant-card-body {
    padding: 9px !important;
  }

  .mobile-top {
    grid-template-columns: minmax(70px, 36%) minmax(0, 1fr) !important;
    gap: 6px !important;
  }

  .mobile-bottom-line {
    grid-template-columns: 1fr !important;
  }

  .mobile-top .mobile-right .grounding-switch-box-item {
    font-size: 11px !important;
  }
}