/* ==========================================================================
   mobile.css —— 移动端（≤768px）专用样式表        2026-10-10
   --------------------------------------------------------------------------
   设计原则：**PC 端零影响**
     · 本文件所有规则都包在 @media (max-width: 768px) 内。
       桌面浏览器即使加载本文件，也不会有任何一条规则命中，
       因此 PC 端看到的渲染与之前完全一致。
     · 引入位置都在各页原有样式「之后」：
         后台 —— dh.php（body 内，晚于页面 <style>）
         前台 —— 各页 </head> 前（晚于页面内联 <style>）
       所以可以安全地覆盖页面既有样式，无需改动 PC 端任何规则。
     · 页面自身若用了 !important，本文件同样用 !important 覆盖。

   覆盖重点（客户指定）：客服（管理端 paomian_kf.php / 访客端 kf.php）、
   工单（gongdan/*）、订单·机器管理（server_manage.php），
   其次为后台其余列表/表单页与前台列表页的通用适配。
   ========================================================================== */

@media (max-width: 768px) {

/* ==========================================================================
   0. 全局：容器、间距、触控友好
   ========================================================================== */

/* 后台页面 body 自带 padding:24px，这里收紧到 10px（!important 压过各页自身规则） */
body { padding: 10px !important; }

/* 后台页：顶部被 dh.php 固定导航压住，高度由 dh.php 的 JS 实测写入 --dh-h
   （2026-10-10 起手机端导航改折叠式，头部只有一行，约 52px） */
body.has-dh-nav {
    padding-top: var(--dh-h, 52px) !important;
}

/* 内容容器：小屏内边距收紧；宽表格可横向滑动 */
.wrap, .page {
    padding: 12px 12px 16px !important;
    border-radius: 10px;
    max-width: 100%;
}
.wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 头部标题行：可换行 */
.top { flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; }
h1, h1.page-title { font-size: 17px; line-height: 1.4; }
.top a { font-size: 13px; }

/* 提示条 */
.msg, .err { font-size: 12.5px; }

/* 表单输入统一 16px —— 防 iOS 聚焦时自动放大整页（不影响按钮外观） */
input[type="text"], input[type="password"], input[type="search"],
input[type="tel"], input[type="email"], input[type="number"], textarea {
    font-size: 16px !important;
}

/* 触控目标放大：主要按钮/链接高度 ≥36px */
.btn, .btn-img, .kf-btn-set, .kf-end-btn, .kf-name-btn,
.search button, .pager .p-nav a, .tabs a, .tab,
.status-group label, .modal-footer button {
    min-height: 36px;
}

/* 页签：改为「横向滚动」而不是折行，避免多行占满屏幕 */
.tabs, .kf-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.tabs::-webkit-scrollbar, .kf-tabs::-webkit-scrollbar { display: none; }
.tabs a, .tab, .kf-tab { flex: none; white-space: nowrap; }

/* 搜索条：输入框占满剩余宽度 */
.search { flex-wrap: wrap; gap: 8px; }
.search input { min-width: 0; }
.search button { flex: none; padding: 0 18px; }

/* 分页条 */
.pager { gap: 8px; }
.pager .p-nav { gap: 4px; }
.pager .p-nav a, .pager .p-nav .cur, .pager .p-nav .off { padding: 6px 10px; }

/* 弹窗统一样式 */
.modal {
    width: 94% !important;
    max-width: none !important;
    max-height: 88vh;
    padding: 16px 16px 18px !important;
    margin: 10px auto !important;
}
.modal h3 { font-size: 16px; }
.modal .month-grid { gap: 6px; }
.modal-footer { flex-wrap: wrap; }
.modal-footer button { flex: 1 1 auto; padding: 11px 14px; }

/* ==========================================================================
   1. 客服管理端（paomian/kf/paomian_kf.php）
      两栏 → 单栏：默认显示会话列表；点了某个会话进入「聊天态」，
      聊天区头部出现「返回」按钮，点它回到列表。
      （chat 态由页面 JS 给 body 加 .kf-m-chat）
   ========================================================================== */
.kf-admin {
    flex-direction: column;
    width: auto;
    max-width: none;
    /* 高度跟随「导航实测高度 --dh-h」自适应（折叠态头部仅一行，可用高度最大化）。
       注意：不要写 100dvh —— 部分浏览器语法接受但计算无效，且会
       覆盖前一条 vh 声明导致高度彻底失效（实测踩坑）。 */
    height: calc(100vh - var(--dh-h, 52px) - 24px);
    min-height: 0;
    margin: 10px auto !important;
    border-radius: 12px;
}
/* 列表态 */
.kf-side {
    width: 100%;
    height: 100%;
    border-right: 0;
}
.kf-main { display: none; width: 100%; height: 100%; }

/* 聊天态 */
body.kf-m-chat .kf-side { display: none; }
body.kf-m-chat .kf-main { display: flex; }

/* 会话条目更好点按 */
.kf-item { padding: 13px 14px; }
.kf-item .sub, .kf-item .preview { max-width: none; }

/* 聊天区 */
.kf-main-head { flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; }
.kf-main-head .right { flex-wrap: wrap; gap: 8px; }
.kf-idbar { padding: 8px 14px; gap: 4px 14px; }
.kf-box { padding: 14px; }
.kf-bubble { max-width: 78%; }
.kf-input { padding: 10px; gap: 6px; }
.kf-input textarea { height: 52px; font-size: 16px; }
.kf-btn-img { height: 52px; width: 44px; font-size: 18px; }
.kf-btn-send { height: 52px; padding: 0 16px; }
.kf-quick { padding: 8px 10px; }
.kf-quick .chip { max-width: none; }

/* 移动端「返回会话列表」按钮：PC 端隐藏（页面样式里默认 display:none） */
.kf-back-btn { display: inline-flex !important; }

/* ==========================================================================
   2. 访客 / 会员客服（paomian/kf/kf.php）
   ========================================================================== */
.kf-wrap {
    max-width: none;
    width: auto;
    margin: 10px !important;
    /* 同上：不用 100dvh，只用 100vh + 导航实测高度 */
    height: calc(100vh - var(--dh-h, 52px) - 34px);
    min-height: 0;
    border-radius: 12px;
}
.kf-head { flex-wrap: wrap; gap: 6px 10px; padding: 10px 14px; }
.kf-head .right { flex-wrap: wrap; gap: 8px 10px; }
.kf-head .kf-hours { display: none; }   /* 小屏隐藏「服务时间」，省空间 */
.kf-box { padding: 14px; }
.kf-bubble { max-width: 80%; }
.kf-bubble img { max-width: 180px; max-height: 180px; }
.kf-input { padding: 10px; gap: 6px; }
.kf-input textarea { height: 52px; font-size: 16px; }
.kf-btn-img { height: 52px; width: 44px; }
.kf-btn-send { height: 52px; padding: 0 16px; }
.kf-offbar, .kf-guestbar { padding: 10px 14px; font-size: 12.5px; }
.kf-guestbar { flex-wrap: wrap; gap: 8px; }

/* ==========================================================================
   3. 工单（paomian/gongdan/tickets.php、my_tickets.php、new_ticket.php）
   ========================================================================== */
/* 工单卡片头：三块（类型标题 / 元信息 / 操作）在手机上改为竖向堆叠 */
.ticket-head {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px;
}
.th-left { gap: 6px; }
.th-left .title { font-size: 14px; line-height: 1.4; }
.th-meta {
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 6px 10px;
    justify-content: flex-start;
}
.th-ops { flex-wrap: wrap; gap: 8px; }
.th-ops .btn { padding: 8px 16px; margin-right: 0; }
.th-ops form { display: inline-flex; }

.ticket-body { padding: 12px; }
.rel-box { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-box, .reply-box { font-size: 13px; word-break: break-word; }
.tk-img img { max-width: 150px; max-height: 110px; }

/* 状态选择：按钮撑满整行 */
.status-group { display: flex; width: 100%; }
.status-group label { flex: 1; text-align: center; padding: 9px 6px; }

/* ==========================================================================
   4. 订单 / 机器管理（paomian/server_manage.php 及 inc/*）
   ========================================================================== */
/* 展开的编辑面板：两列 → 单列 */
.edit-col { flex: 1 1 100% !important; min-width: 0 !important; padding: 12px 2px; }
.edit-col + .edit-col { border-left: 0; border-top: 1px dashed #e1e4e8; }

/* 自定义价格：两列输入 → 单列 */
.custom-price-box .input-2col { flex-direction: column; gap: 8px; }

/* 记录弹窗：去掉固定 min-width，避免小屏溢出 */
#renewLogsMask .modal {
    width: auto !important;
    min-width: 0 !important;
    max-width: 96vw !important;
    margin: 10px auto 24px !important;
}
.logs-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.logs-table { min-width: 0; }
.logs-sum { gap: 12px; }
.logs-head { flex-wrap: wrap; gap: 6px; }

/* 机器配置文本框 */
.cfg-box { font-size: 12px; padding: 10px 12px; }

/* 订单大表保持横向滑动（min-width 由页面自身给定，不动它） */

/* ==========================================================================
   5. 其余后台页通用（会员/财务/日志/服务器列表/充值/会员中心…）
   ========================================================================== */
/* 会员详情：两列信息块 → 单列 */
.mv-grid, .info-grid { flex-direction: column !important; }

/* 通用卡片/信息块内边距 */
.block, .card { border-radius: 8px; }

/* 表格容器 */
.table-wrap, .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 表单里的两列布局 */
.form-2col, .row-2col { flex-direction: column !important; gap: 8px !important; }

/* ==========================================================================
   6. 前台列表页（index.php / lanmu/index.php / lanmu/buy.php）
   （common.css 已有 768px 基础断点，这里做移动端专项补强）
   ========================================================================== */
/* 横幅降低高度 */
.server-banner { height: 170px; }

/* 面包屑 + 搜索：搜索独占整行，更好输入 */
.crumb-row { gap: 10px; margin-bottom: 12px; }
.crumb-row .crumb { font-size: 12.5px; }
.crumb-row .srv-search { width: 100% !important; }

/* 分类/小分类导航 */
.nav { gap: 8px; }
.nav a { padding: 7px 14px; font-size: 12.5px; }
.subnav { padding: 8px 12px; }

/* 前台表格：横向滑动 */
.block { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { min-width: 0; }

/* 区块标题 */
.block-head { padding: 10px 12px; }
.block-head h2 { font-size: 13px; }
.more { padding: 5px 11px; }

/* 底部固定条：文字小一点、按钮整行 */
.server-bar__title { font-size: 14px; }
.server-bar__desc { font-size: 11px; }

/* ==========================================================================
   7. 前台顶部导航（.topbar）—— 折叠式（与后台 dh.php 一致）  2026-10-10
   header.php 新增 .tb-toggle 按钮（PC 端靠 inline display:none 隐藏），
   仅移动端显示；点击后 .topbar-nav 变成全宽浮层。
   头部高度移动端放宽为 68px（common.css 的 60px 太挤，logo 图 65px 会顶满），
   body padding-top 60px 亦由 common.css 提供并在下方覆盖为 68px。

   放宽调整（2026-10-10）：
   · .topbar 高度 60 → 68px，左右内边距加大
   · .topbar img 限高 46px（common.css 里是 65px，比 60px 的条还高，导致顶满发挤）
   · 导航浮层 top / max-height 同步 68px
   ========================================================================== */
.topbar{ height: 68px !important; }
.nav-in{ padding: 0 18px !important; }
.topbar img{ height: 46px !important; width: auto; }
body{ padding-top: 68px !important; }
.tb-toggle{
    display: flex !important;      /* !important 覆盖按钮上的 inline display:none */
    align-items: center;
    justify-content: center;
    margin-left: auto;
    width: 42px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(56,189,248,.4);
    border-radius: 8px;
    background: rgba(56,189,248,.15);
    color: #38bdf8;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.tb-toggle:active{ background: rgba(56,189,248,.26); }

/* 导航浮层：默认收起，body.tb-nav-open 时展开 */
.topbar-nav{
    display: none;
    position: fixed;
    top: 68px; left: 0; right: 0;
    z-index: 9997;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0 !important;
    padding: 4px 14px 12px;
    background: #0f172a;
    border-bottom: 1px solid rgba(148,163,184,.15);
    box-shadow: 0 12px 28px rgba(0,0,0,.55);
    max-height: calc(100vh - 68px);
    overflow-y: auto;
}
body.tb-nav-open .topbar-nav{ display: flex; }

/* 浮层内的菜单项：整行可点 */
.topbar-nav a{
    padding: 13px 8px !important;
    font-size: 15px !important;
    border-bottom: 1px solid rgba(148,163,184,.08);
}
.topbar-nav a.btn-login,
.topbar-nav a.btn-member{
    text-align: center;
    margin: 10px 6px 2px;
    padding: 10px 16px !important;
    border-bottom: none;
}
.topbar-user{
    padding: 11px 8px;
    border-bottom: 1px solid rgba(148,163,184,.08);
}

} /* /@media (max-width: 768px) */

/* ==========================================================================
   超窄屏（≤400px）细节微调
   ========================================================================== */
@media (max-width: 400px) {
    body { padding: 8px !important; }
    body.has-dh-nav { padding-left: 8px !important; padding-right: 8px !important; }
    .wrap, .page { padding: 10px 10px 14px !important; }
    h1, h1.page-title { font-size: 16px; }
    .kf-bubble { max-width: 84%; }
    .th-meta { font-size: 11.5px; }
}