/**
 * 后台子页面 / 内嵌 iframe 移动端自适应（≤768px）
 * 仅布局与滚动，不修改业务逻辑
 */
@media (max-width: 768px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: auto;
  }

  #app {
    padding: 8px !important;
    max-width: 100vw;
    overflow-x: visible;
    box-sizing: border-box;
  }

  .ap-card {
    margin-bottom: 8px;
    border-radius: 6px;
  }

  /* 表格横向滚动（触摸滑动） */
  .ap-card .ant-table-wrapper,
  .ant-table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    overscroll-behavior-x: contain;
  }

  .ap-card .ant-table-container,
  .ap-card .ant-table-content,
  .ap-card .ant-table-body,
  .ant-table-content,
  .ant-table-body {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

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

  /* 工具栏换行 */
  .ant-space {
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100%;
  }

  .ant-space-item {
    max-width: 100%;
  }

  /* Row / Col 单列 */
  .ant-row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    row-gap: 8px;
  }

  .ant-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* 内联 grid 改为纵向堆叠 */
  #app [style*="grid-template-columns"],
  #app [style*="gridTemplateColumns"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 12px !important;
  }

  #app [style*="grid-template-columns"] > *,
  #app [style*="gridTemplateColumns"] > * {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 弹窗（详情等不宜占满屏） */
  .ant-modal {
    max-width: min(400px, calc(100vw - 24px)) !important;
    width: min(400px, calc(100vw - 24px)) !important;
    margin: 12px auto !important;
    top: 24px !important;
    padding-bottom: 0;
  }

  .ant-modal-content {
    border-radius: 10px;
  }

  .ant-modal-header {
    padding: 12px 16px !important;
  }

  .ant-modal-title {
    font-size: 15px !important;
  }

  .ant-modal-body {
    padding: 12px 16px !important;
    max-height: calc(100dvh - 160px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
  }

  .ant-modal-footer {
    padding: 10px 16px !important;
  }

  .ant-modal-footer .ant-btn {
    font-size: 13px;
  }

  /* 详情弹窗内 grid 改单列 */
  .ant-modal-body [style*="grid-template-columns"],
  .ant-modal-body [style*="gridTemplateColumns"] {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 4px !important;
  }

  .ant-modal-body [style*="maxHeight"] {
    max-height: none !important;
  }

  /* 抽屉全宽 */
  .ant-drawer-content-wrapper {
    max-width: 100vw !important;
  }

  /* 表单 */
  .ant-form-item {
    margin-bottom: 12px;
  }

  .ant-input,
  .ant-input-number,
  .ant-select,
  .ant-picker {
    max-width: 100% !important;
  }

  /* Tabs 可横向滑 */
  .ant-tabs-nav {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .ant-tabs-nav-wrap {
    flex-wrap: nowrap !important;
  }

  .ant-tabs-nav-list {
    flex-wrap: nowrap !important;
  }

  /* 描述列表 */
  .ant-descriptions-view {
    overflow-x: auto;
  }

  .ant-descriptions-item-label,
  .ant-descriptions-item-content {
    padding: 8px !important;
  }

  /* 分页 */
  .ant-pagination {
    flex-wrap: wrap;
    justify-content: center;
    padding: 8px 4px !important;
    row-gap: 6px;
  }

  .ant-pagination-options {
    display: none !important;
  }

  /* 搜索区 */
  .ant-input-group-wrapper,
  .ant-input-search {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 统计卡片 */
  .ant-statistic {
    margin-bottom: 4px;
  }

  /* 按钮组 */
  .ant-btn-group {
    flex-wrap: wrap;
  }

  /* Segmented / Radio 组 */
  .ant-segmented,
  .ant-radio-group {
    flex-wrap: wrap;
  }

  /* Dropdown 链接操作 */
  .ant-table-cell .ant-btn-link {
    padding: 0 4px;
    font-size: 12px;
  }

  /* Upload */
  .ant-upload-list {
    max-width: 100%;
  }

  /* Quill / 富文本 */
  .ql-toolbar,
  .ql-container {
    max-width: 100%;
  }

  /* 后台内嵌说明页（无 #app） */
  body > .card {
    margin: 8px !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

@media (max-width: 480px) {
  #app {
    padding: 6px !important;
  }

  .ant-table {
    font-size: 12px;
  }

  .ant-table-thead > tr > th,
  .ant-table-tbody > tr > td {
    padding: 8px 10px !important;
  }

  .ant-modal-title {
    font-size: 15px;
  }
}