/* ============================================================

 * responsive-pc.css — 前台 PC 站响应式断点层 (P1)

 * ------------------------------------------------------------

 * 加载顺序: 在 pc.css / responsive.css 之后，只覆盖窄屏。

 * 核心原则: 本文件所有规则都包在 @media (max-width: …) 内，

 *           ≥1200px 视口时完全不生效 → 桌面端逐像素不变。

 *           桌面布局由 pc.css 全权负责，本文件零触碰。

 * ============================================================ */



/* ============================================================

 * 平板及以下 (≤1199px): 开始流式化骨架

 * 仅去除 min-width:1200px 强制宽度，让容器随视口收缩。

 * ============================================================ */

@media (max-width: 1199px) {

  .header,

  .main,

  .main2 {

    min-width: 0;

  }

  .main {

    width: 100%;

    height: auto;        /* 解除首页固定 610px 高度 */

    margin: 20px auto 0;

  }

  .main2 {

    width: 100%;

  }


  /* 列表按钮列（图纸/收藏/操作 8%）在 1024-1199px 窄屏收紧内边距与按钮宽度，
     确保最右“操作”按钮不越出表格右缘 */
  #conTxt th:nth-child(6), #conTxt td:nth-child(6),
  #conTxt th:nth-child(7), #conTxt td:nth-child(7),
  #conTxt th:nth-child(8), #conTxt td:nth-child(8) {
    padding-left: 2px;
    padding-right: 2px;
  }
  #conTxt tbody tr td .btn4, #conTxt tbody tr td .btn13 {
    width: 52px;
  }
}



/* ============================================================

 * 平板 (≤991px): 固定左侧导航 → 静态全宽，堆叠到内容上方

 * 桌面端 .left-box 是 position:fixed 320px 悬浮导航，

 * 窄屏必须改为静态堆叠，否则会遮挡内容。

 * ============================================================ */

@media (max-width: 991px) {

  /* 固定的深色导航改为静态、全宽 */

  .left-box {

    position: static !important;

    width: 100% !important;

    height: auto !important;

    float: none !important;

  }

  .left-con {

    width: 100% !important;

  }

  .menu-ul {

    width: 100% !important;

  }

  .menu-ul li a {

    width: 100% !important;

  }

  /* 内容区占满，不再与侧栏并排 */

  .main-box {

    width: 100% !important;

    float: none !important;

    margin-left: 0 !important;

  }

  /* 首页双栏模块堆叠为单列 */

  .m-con1,

  .m-con2 {

    width: 100% !important;

    float: none !important;

    margin-right: 0 !important;

    height: auto !important;

  }

}



/* ============================================================

 * 手机 (≤767px): 完全单列重排

 * ============================================================ */

@media (max-width: 767px) {

  /* ---------- 头部: 堆叠而非横排 ---------- */

  .header {

    height: auto !important;

    min-width: 0 !important;

    padding: 10px 0;

  }

  .logo {

    width: auto !important;

    float: none !important;

    height: auto !important;

    padding: 8px 12px;

  }

  .logo img {

    height: 48px;

    width: auto;

  }
  .logo .logo-text { font-size: 16px; }

  .h-txt {

    float: none !important;

    padding-left: 12px !important;

    line-height: 1.4 !important;

    height: auto !important;

    font-size: 16px !important;

  }

  .top-box {

    float: none !important;

    height: auto !important;

    line-height: 1.8 !important;

    padding: 6px 12px !important;

    text-align: center;

  }

  .top-box a {

    padding: 0 8px;

  }



  /* ---------- 强制内联固定宽度元素改为 100% ----------

     覆盖模板里 style="width:NNNpx" 的硬编码宽度

     (搜索框、占位块等)，避免手机横向溢出。 */

  .main2 [style*="width:"],

  .main [style*="width:"] {

    width: 100% !important;

    max-width: 100% !important;

  }



  /* ---------- 表格安全网 ----------

     宽数据表(.main-con 内)在手机上可横向滚动，

     既不撑破布局，也不丢内容。 */

  .main-con {

    overflow-x: auto !important;

  }

  table {

    width: 100% !important;

  }



  /* ---------- 首页模块高度解除固定 ---------- */

  .m-tab1,

  .m-li1,

  .m-li2,

  .m-li3,

  .m-li4 {

    height: auto !important;

  }



  /* ---------- 右侧悬浮工具在手机上隐藏，避免遮挡 ---------- */

  .r-main,

  .r-box {

    display: none !important;

  }



  /* ---------- 弹窗宽度自适应 (pc.css 已固定居中) ---------- */

  .tit-main {

    width: 92vw !important;

    max-width: 92vw !important;

  }



  /* ---------- 通用收敛 ---------- */

  body {

    font-size: 14px;

  }

  .main-box {

    padding: 0 8px;

  }

}
/* === Phase 4: PC 端响应式专属规则（自 responsive.css 迁入） === */
@media (max-width: 1024px) {
  .m-tit1 { font-size: var(--text-lg); }
}

@media (max-width: 767px) {
  .m-tit1 { font-size: var(--text-base); }
}