/* ==========================================================================
   KYBLL 响应式补丁 · responsive.css
   适配 idcsmart 现有的 rem 缩放架构：
     >750px  : rem = clamp(1200,1920,视口宽) / 19.2   （桌面缩放模式）
     <=750px : rem = 视口宽 / 7.5                    （移动模式，common.js 既有）
   本文件只补 common.css 没覆盖的缺口：表格 / 弹窗 / 表单 / 分页 / 平板区
   全部规则包在 @media 内，桌面端零影响。
   关键覆盖带 !important，用于压过页面级 CSS（页面级样式在 header 之后加载）
   ========================================================================== */

/* ---------- 平板：751~991px，桌面缩放模式下侧边栏占 25% 屏宽，太挤 ---------- */
@media screen and (max-width: 991px) and (min-width: 751px) {
  .el-aside {
    /* V4 overrides: navigation has become a full-width top bar, the left
       sidebar no longer exists. The width rules from the 72px / 120px
       column era must be reverted to 100%, otherwise the whole top bar
       gets squeezed into a 72px stub. */
    width: 100% !important;
  }
  .el-aside .aside-menu-text {
    font-size: 13.5px;
  }
  .el-aside .el-menu-item,
  .el-aside .el-submenu__title {
    padding-left: 10px !important;
  }
  .el-main {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* ---------- 移动主断点：沿用 common.js 的 750 阈值，保持 rem 换算一致 ---------- */
@media screen and (max-width: 750px) {

  /* 1) 表格：Element 的 el-table 在窄屏会撑破容器，这里给可横向滚动 + 最小宽度 */
  .el-table {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .el-table__body-wrapper,
  .el-table__header-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* 表格保留可读列宽，靠横向滚动查看，不硬压成一团 */
  .el-table .cell {
    word-break: break-word;
  }
  .el-table__empty-text {
    white-space: normal !important;
  }

  /* 2) 弹窗 / 消息框：固定 px 宽在手机上必溢出，改成流体 */
  .el-dialog {
    width: 92vw !important;
    max-width: 92vw !important;
    margin: 6vh auto !important;
  }
  .el-dialog__body {
    padding: 12px 14px !important;
    max-height: 70vh;
    overflow-y: auto;
  }
  .el-dialog__header {
    padding: 14px 14px 10px !important;
  }
  .el-dialog__footer {
    padding: 10px 14px 14px !important;
  }
  .el-message-box {
    width: 88vw !important;
    max-width: 88vw !important;
  }
  .el-message-box__btns {
    display: flex;
    flex-wrap: wrap;
  }
  .el-message-box__btns .el-button {
    flex: 1 1 40%;
    margin: 0 4px !important;
  }

  /* 3) 抽屉：默认宽度在手机上贴边过窄 */
  .el-drawer {
    width: 80% !important;
  }

  /* 4) 表单：标签与内容堆叠，避免 label-width 挤压输入框 */
  .el-form-item {
    display: block !important;
    margin-bottom: 14px !important;
  }
  .el-form-item__label,
  .el-form-item__label::before,
  .el-form-item__label::after {
    float: none !important;
    display: block !important;
    width: auto !important;
    height: auto;
    line-height: 1.5;
    padding: 0 0 4px !important;
    text-align: left !important;
    color: #787168;
  }
  .el-form-item__content {
    margin-left: 0 !important;
    line-height: 1.5;
  }
  /* 密码强度条 / 验证码等附属块别跟着 label 跑偏 */
  .el-form-item__content > div {
    max-width: 100%;
  }

  /* 5) 按钮组：多个按钮换行铺满，避免挤成一条 */
  .el-form .button-box,
  .el-dialog__footer .button-box {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .el-form .button-box .el-button,
  .el-dialog__footer .el-button {
    flex: 1 1 auto;
    min-width: 30%;
    margin: 0 !important;
  }

  /* 6) 分页：窄屏换行显示，避免溢出 */
  .el-pagination {
    white-space: normal !important;
    text-align: center;
    padding: 8px 0;
  }
  .el-pagination__total,
  .el-pagination__sizes,
  .el-pagination__jump {
    display: none;
  }

  /* 7) 长内容：URL / 订单号 / 卡号必须能断行 */
  .main-card,
  .el-table .cell,
  .copy-text,
  .order-no,
  .text-break {
    word-break: break-all !important;
    overflow-wrap: anywhere;
  }

  /* 8) 通用溢出兜底：任何块都不许撑破视口 */
  .main-card,
  .el-main,
  .el-card {
    max-width: 100% !important;
    overflow-x: hidden;
  }
  img,
  video,
  canvas,
  iframe {
    max-width: 100% !important;
    height: auto;
  }

  /* 9) 触摸目标：手机上按钮/菜单项至少 40px，避免误触 */
  .el-button {
    min-height: 36px;
  }
  .el-aside .el-menu-item,
  .el-aside .el-submenu__title {
    min-height: 44px;
    line-height: 44px;
  }
  .top-menu .right-item,
  .el-header a {
    padding: 0 6px !important;
  }

  /* 10) 首页/购物车：两栏网格塌成一栏 */
  .left-box,
  .right-box,
  .goods-item,
  .main-content {
    width: 100% !important;
    float: none !important;
  }
  .left-box {
    margin-bottom: 12px;
  }
}

/* ---------- 小屏手机：<=414px 再收一档 ---------- */
@media screen and (max-width: 414px) {
  .el-dialog {
    width: 95vw !important;
    max-width: 95vw !important;
  }
  .el-form .button-box .el-button,
  .el-dialog__footer .el-button {
    flex: 1 1 100%;
  }
  .el-tabs__item {
    padding: 0 10px !important;
    font-size: 13px;
  }
  .el-tab-pane {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ---------- 打印：顺手去掉导航，避免打出黑块 ---------- */
@media print {
  .el-aside,
  .el-header,
  .no-print {
    display: none !important;
  }
}