/* =====================================================================
 * mobile-adaptive.css  ——  移动端响应式适配（独立新增文件）
 * ---------------------------------------------------------------------
 * 设计原则：
 *   1. PC 端(>768px) 零影响：仅 .nav-drawer 用 display:contents 透明包裹，
 *      原有 .header-middle/.header-bottom 仍按原布局参与排版，视觉完全不变；
 *   2. 所有响应式规则集中在 @media (max-width:768px) 内，大屏不生效；
 *   3. 本文件加载在 style.css 之后，同优先级下可覆盖旧规则，且只做增量，
 *      不删除/不冲突原有业务样式；
 *   4. 兼容微信内置浏览器(X5/Chromium)、iOS Safari、安卓 Chrome。
 * ===================================================================== */

/* ======================= PC 端默认状态(>768px) ======================= */
/* 抽屉容器透明化：子元素 .header-middle/.header-bottom 视同 .main-header 直接子项，PC 布局完全不变 */
.nav-drawer {
    display: contents;
}
/* 汉堡按钮与遮罩：PC 端隐藏 */
.nav-toggle,
.nav-drawer-overlay {
    display: none;
}

/* ======================= 移动端 (≤768px) ======================= */
@media (max-width: 768px) {

    /* ---------- 0. 全局：禁用横向滚动、锁定宽度、文字不自动放大 ---------- */
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
        -webkit-tap-highlight-color: transparent;
    }
    body {
        padding: 8px !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* ---------- 1. 顶部栏：变成贴顶横向条(Logo 左 + 操作右 + 汉堡) ---------- */
    .main-header {
        position: sticky;
        top: 0;
        z-index: 1050;
        padding: 10px 12px !important;
        gap: 8px !important;
        border-radius: 14px !important;
        margin-bottom: 8px;
    }
    .header-top {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: left !important;
        gap: 8px !important;
    }
    .header-left {
        width: auto !important;
        justify-content: flex-start !important;
        flex: 1 1 auto;
        min-width: 0;
    }
    .logo-section {
        justify-content: flex-start !important;
    }
    .logo-icon {
        width: 34px !important;
        height: 34px !important;
        font-size: 18px !important;
        flex-shrink: 0;
    }
    .logo-text {
        min-width: 0;
        overflow: hidden;
    }
    .logo-text h1 {
        font-size: 16px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* 副标题在手机顶栏隐藏，节省空间 */
    .header-subtitle {
        display: none !important;
    }
    .header-right-actions {
        justify-content: flex-end !important;
        gap: 8px !important;
        flex-shrink: 0;
    }

    /* ---------- 2. 汉堡按钮 ---------- */
    .nav-toggle {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px;
        width: 44px;
        height: 44px;
        padding: 0 10px;
        background: transparent;
        border: 1px solid rgba(172, 135, 255, 0.3);
        border-radius: var(--border-radius-md, 16px);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        flex-shrink: 0;
    }
    .nav-toggle-bar {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--text-primary, #e6e0ff);
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    /* 打开时变 × */
    body.nav-drawer-open .nav-toggle-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    body.nav-drawer-open .nav-toggle-bar:nth-child(2) {
        opacity: 0;
    }
    body.nav-drawer-open .nav-toggle-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    /* ---------- 3. 侧边抽屉 ---------- */
    .nav-drawer {
        display: flex;
        flex-direction: column;
        gap: 0;
        position: fixed;
        top: 0;
        right: 0;
        width: 286px;
        max-width: 82vw;
        height: 100vh;
        height: 100dvh; /* 兼容移动端地址栏伸缩 */
        background: var(--cosmos-bg, #03000b);
        z-index: 1100;
        transform: translateX(100%);
        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        padding: 16px 14px;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.45);
        box-sizing: border-box;
    }
    body.nav-drawer-open .nav-drawer {
        transform: translateX(0);
    }
    /* 抽屉内两段纵向排列、全宽 */
    .nav-drawer .header-middle,
    .nav-drawer .header-bottom {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px 0 !important;
        border-bottom: 1px solid var(--border-color, rgba(172, 135, 255, 0.15));
    }
    .nav-drawer .header-bottom:last-child {
        border-bottom: none;
    }
    .nav-drawer .script-select-btn,
    .nav-drawer .header-buttons,
    .nav-drawer .auth-buttons {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
    .nav-drawer .btn,
    .nav-drawer .script-select-btn {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ---------- 4. 遮罩层 ---------- */
    .nav-drawer-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1099;
        -webkit-tap-highlight-color: transparent;
    }
    body.nav-drawer-open .nav-drawer-overlay {
        display: block;
    }
    body.nav-drawer-open {
        overflow: hidden !important;
    }

    /* ---------- 5. 主体容器最大宽度 + 自适应，防止大屏手机过度拉伸 ---------- */
    .dashboard,
    .container,
    .main-content,
    .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    /* ---------- 6. 卡片/面板宽度自适应 ---------- */
    .stats-section,
    .log-panel,
    .panel,
    .card,
    .stat-card,
    .section-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ---------- 7. 数据表格：横向滑动 + 单元格换行 + 次要列隐藏钩子 ---------- */
    .table-container,
    .admin-table-wrap,
    .table-responsive,
    .table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    table.admin-table,
    .admin-table {
        min-width: 560px; /* 保证列宽不被过度挤压，超出部分可横向滑动查看 */
        width: 100%;
        box-sizing: border-box;
    }
    .admin-table th,
    .admin-table td {
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: break-word;
        padding: 8px 10px !important;
    }
    /* 次要列隐藏钩子：给 <th>/<td> 加 class="hide-mobile" 即在手机端隐藏该列 */
    .admin-table .hide-mobile {
        display: none !important;
    }

    /* ---------- 8. 弹窗：铺满屏幕 + 可滚动 + 顶部对齐 ---------- */
    .modal {
        padding: 0 !important;
        align-items: flex-start !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .modal-content {
        width: 94% !important;
        max-width: 94% !important;
        margin: 16px auto !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        box-sizing: border-box !important;
    }

    /* ---------- 9. 表单控件：加大触控尺寸，输入框 ≥16px 防 iOS 自动放大 ---------- */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="url"],
    input[type="search"],
    input[type="tel"],
    textarea,
    select {
        max-width: 100% !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
    .form-group input,
    .form-group select,
    .form-group textarea,
    .modal-body input,
    .modal-body select,
    .modal-body textarea {
        width: 100% !important;
        padding: 12px 14px !important;
        min-height: 44px;
    }

    /* ---------- 10. 按钮：移动端触控优化（精准，不误伤表格行内按钮） ---------- */
    /* 仅标准 .btn 类：解除固定 height:40px / min-width:100px，防止并排溢出 */
    .btn {
        height: auto !important;
        min-width: auto !important;
        min-height: 44px;
        padding: 10px 16px !important;
        font-size: 14px !important;
        white-space: nowrap;
        flex-shrink: 1;
        justify-content: center;
    }
    /* 图标 + 文字：文字不换行 */
    .btn i + span,
    .btn > span {
        white-space: nowrap;
    }
    /* 单按钮铺满类 */
    .btn-full {
        width: 100% !important;
    }

    /* 按钮组：网格 2 列换行，铺满容器（覆盖到 768px，补齐原有仅 ≤540px 的缺口） */
    .header-buttons,
    .auth-buttons,
    .account-controls,
    .account-actions,
    .schedule-actions,
    .modal-footer {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
    }
    .header-buttons .btn,
    .auth-buttons .btn,
    .account-controls .btn,
    .account-actions .btn,
    .schedule-actions .btn {
        width: 100% !important;
        min-width: 0 !important;
        justify-content: center !important;
    }
    /* 弹窗底部按钮：自适应，去掉 120px 最小宽，3 个按钮也能排 */
    .modal-footer .btn {
        flex: none;
        min-width: 0;
        width: 100%;
    }
    .modal-footer .btn:only-child {
        grid-column: 1 / -1;
    }

    /* 表格行内操作按钮：保持紧凑，不强制 44px，避免撑爆行 */
    .admin-table .btn,
    .admin-table button,
    .table-container .btn,
    .table-container button {
        min-height: 32px;
        height: auto;
        min-width: auto;
        padding: 4px 10px !important;
        font-size: 12px !important;
        white-space: nowrap;
    }

    /* 账号管理操作行 5 个按钮：移动端 2 列网格 */
    .account-controls {
        flex-wrap: wrap !important;
    }
    .account-controls .btn {
        flex: 1 1 calc(50% - 4px) !important;
        min-width: 0 !important;
    }

    /* ---------- 10-2. 按钮容器：移动端换行，防止按钮被截断 ---------- */
    /* 面板标题行（标题 + 操作按钮并排）：允许换行，按钮下沉整行 */
    .panel-header,
    .section-header,
    .card-header,
    .list-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }
    .panel-header > h3,
    .section-header > h2,
    .section-header > h3,
    .card-header > h3 {
        flex: 1 1 100%;
        min-width: 0;
        font-size: 1rem !important;
        white-space: normal;
        word-break: break-word;
    }
    /* 标题行内的按钮组/按钮：换行后整行铺满或自适应 */
    .panel-header > .btn,
    .panel-header > div > .btn,
    .panel-header > div,
    .section-header > .btn,
    .section-header > div {
        flex: 0 0 auto;
        max-width: 100%;
    }

    /* 标签页按钮栏（多 tab 并排）：横向滚动，不截断不换行错位 */
    .tab-bar,
    .tabs,
    .tab-container,
    .nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 8px !important;
        padding-bottom: 4px;
    }
    .tab-btn,
    .tab,
    .nav-tabs > * {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }

    /* 按钮行内容器（多个按钮 flex 并排）：换行，每个自适应 */
    .button-group,
    .btn-group,
    .action-bar,
    .toolbar,
    .filter-bar,
    .form-actions {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .button-group .btn,
    .btn-group .btn,
    .action-bar .btn,
    .toolbar .btn,
    .filter-bar .btn,
    .form-actions .btn {
        flex: 1 1 auto;
        min-width: 0 !important;
    }

    /* 解除按钮 overflow:hidden / flex-shrink:0（s9f3 后台页根因） */
    .btn {
        overflow: visible !important;
        text-overflow: clip !important;
        flex-shrink: 1 !important;
        white-space: nowrap;
    }

    /* ---------- 10-3. s9f3 后台管理页专用适配 ---------- */
    .main-content {
        margin-left: 0 !important;
        padding: 10px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .panel {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .panel-body {
        padding: 14px !important;
    }
    /* 顶部栏：紧凑，标题不截断 */
    .header {
        padding: 10px 12px !important;
        gap: 8px !important;
    }
    .header h2 {
        font-size: 0.9rem !important;
        white-space: normal;
        word-break: break-word;
    }

    /* ---------- 11. 网格布局移动端单列 ---------- */
    .stats-overview,
    .settings-grid,
    .monitor-grid,
    .stats-detail {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* ---------- 12. 修复常见横向溢出元凶 ---------- */
    img,
    video,
    canvas,
    iframe,
    svg {
        max-width: 100% !important;
        height: auto !important;
    }
    pre,
    code,
    .log-content,
    .log-body {
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        white-space: pre-wrap;
        word-break: break-word;
    }
}

/* ======================= 超窄屏 (≤480px) 微调 ======================= */
@media (max-width: 480px) {
    .nav-drawer {
        width: 260px;
        max-width: 88vw;
    }
    /* 两列按钮网格，更易点击 */
    .nav-drawer .header-buttons,
    .nav-drawer .auth-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }
}

/* ======================= 微信内置浏览器 & iOS Safari 兼容 ======================= */
/* 微信 X5 内核：禁用默认下拉露出黑底 */
body::-webkit-scrollbar {
    width: 0;
    height: 0;
}
/* iOS Safari 100vh 抖动修复：抽屉使用 dvh，回退 vh(见上) */
@supports (height: 100dvh) {
    @media (max-width: 768px) {
        .nav-drawer {
            height: 100dvh;
        }
    }
}
/* 触摸设备：取消 300ms 点击延迟感(浏览器已基本解决，这里确保 active 态) */
@media (pointer: coarse) {
    .nav-toggle,
    .btn,
    button {
        -webkit-touch-callout: none;
    }
}