/* ============================================================
   移动端适配增强样式 (Mobile Responsive Enhancement)
   创建时间: 2026-09-30
   说明: 纯追加覆盖式，不修改任何原有 CSS 和 PHP 逻辑
   断点: 1024px(平板) / 767px(手机) / 480px(小屏)
   ============================================================ */

/* ============================================================
   一、全局基础（小屏 767px 以下）
   ============================================================ */
@media (max-width: 767px) {

    /* ---------- 1.1 防止横向溢出（移动端最常见问题） ---------- */
    html, body {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    /* 所有容器宽度自适应 */
    .wrapper, .wrapper-sm, .wrapper-md, .wrapper-lg,
    .app-content-body, .container, .container-fluid {
        max-width: 100% !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
    }

    /* ---------- 1.2 表格移动端优化 ---------- */
    /* 表格容器可横向滚动而非撑爆页面 */
    .table-responsive,
    .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
    }

    /* 表格字号缩小，单元格紧凑 */
    table.table,
    .data-table,
    .list-table {
        font-size: 12px !important;
    }

    table.table > thead > tr > th,
    table.table > tbody > tr > td {
        padding: 6px 4px !important;
        white-space: nowrap !important;
        font-size: 12px !important;
    }

    /* 表格里的按钮缩小 */
    table.table .btn,
    .data-table .btn {
        padding: 2px 6px !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* 表格内的图片 */
    table.table img {
        max-width: 60px !important;
        height: auto !important;
    }

    /* ---------- 1.3 表单元素移动端优化 ---------- */
    /* 防止 iOS 自动放大：字号 >= 16px */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="search"],
    select,
    textarea,
    .form-control {
        font-size: 16px !important;
        height: auto !important;
        min-height: 40px !important;
        padding: 8px 10px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 输入组（input-group）移动端堆叠 */
    .input-group {
        width: 100% !important;
    }

    .input-group-addon {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    /* 表单按钮全宽 */
    .form-group .btn-block-mobile,
    .search-form .btn {
        width: 100% !important;
        margin-top: 6px !important;
    }

    /* ---------- 1.4 按钮触摸区域优化 ---------- */
    .btn {
        padding: 7px 12px !important;
        font-size: 13px !important;
        min-height: 36px !important;
        box-sizing: border-box !important;
    }

    .btn-xs {
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    .btn-sm {
        min-height: 32px !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    /* ---------- 1.5 卡片/面板移动端优化 ---------- */
    .panel, .card, .box, .group-card {
        margin-bottom: 10px !important;
        border-radius: 8px !important;
    }

    .panel-heading, .panel-body {
        padding: 10px !important;
    }

    /* ---------- 1.6 文字与标题 ---------- */
    h1 { font-size: 20px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
    h4 { font-size: 15px !important; }
    h5, h6 { font-size: 14px !important; }

    /* ---------- 1.7 栅格列移动端堆叠 ---------- */
    /* 小屏时常见 2 列布局变 1 列 */
    .row > [class*="col-"] {
        margin-bottom: 8px;
    }

    /* ---------- 1.8 弹窗移动端适配 ---------- */
    .layui-layer {
        max-width: 96vw !important;
        box-sizing: border-box !important;
    }

    .layui-layer-content {
        max-height: 80vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .layui-layer-title {
        font-size: 14px !important;
        padding: 0 40px 0 12px !important;
        height: 42px !important;
        line-height: 42px !important;
    }

    /* layer 弹窗按钮区 */
    .layui-layer-btn {
        padding: 8px 10px !important;
    }

    .layui-layer-btn a {
        height: 34px !important;
        line-height: 34px !important;
        font-size: 13px !important;
        padding: 0 14px !important;
    }

    /* ---------- 1.9 模态框（Bootstrap modal）移动端 ---------- */
    .modal-dialog {
        margin: 8px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
    }

    .modal-body {
        max-height: 70vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ---------- 1.10 分页移动端 ---------- */
    .pagination {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .pagination > li > a,
    .pagination > li > span {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* ---------- 1.11 图片自适应 ---------- */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ---------- 1.12 长文本/长数字换行 ---------- */
    .text-break, td, .info-value {
        word-break: break-all !important;
        overflow-wrap: break-word !important;
    }

    /* ---------- 1.13 搜索栏移动端堆叠 ---------- */
    .search-bar, .filter-bar, .toolbar {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    .search-bar > *, .filter-bar > *, .toolbar > * {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ============================================================
   二、平板适配（768px - 1024px）
   ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {

    .wrapper, .wrapper-sm, .wrapper-md {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* 平板也允许表格滚动 */
    .table-responsive, .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 输入框字号防 iOS 放大 */
    input[type="text"], input[type="password"], input[type="email"],
    input[type="number"], input[type="tel"], select, textarea, .form-control {
        font-size: 15px !important;
    }

    .layui-layer {
        max-width: 92vw !important;
    }
}

/* ============================================================
   三、小屏手机增强（480px 以下）
   ============================================================ */
@media (max-width: 480px) {

    /* 更小的内边距 */
    .wrapper, .wrapper-sm, .app-content-body {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    /* 更紧凑的表格 */
    table.table > thead > tr > th,
    table.table > tbody > tr > td {
        padding: 5px 3px !important;
        font-size: 11px !important;
    }

    /* 标题进一步缩小 */
    h1 { font-size: 18px !important; }
    h2 { font-size: 16px !important; }
    h3 { font-size: 15px !important; }

    /* 按钮触摸区域适当缩小 */
    .btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* 弹窗几乎全屏 */
    .layui-layer {
        max-width: 98vw !important;
    }

    .layui-layer-content {
        max-height: 85vh !important;
    }

    /* 隐藏非关键装饰元素 */
    .hidden-xs-mobile {
        display: none !important;
    }
}

/* ============================================================
   四、横屏适配
   ============================================================ */
@media (max-width: 900px) and (orientation: landscape) {
    .layui-layer-content {
        max-height: 70vh !important;
    }
}

/* ============================================================
   五、触摸设备优化（悬停效果在触屏上无意义）
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    /* 移除仅依赖 hover 的交互动效 */
    .btn:hover {
        transform: none !important;
    }

    /* 增加可点击元素的触摸反馈 */
    .btn:active, a:active {
        opacity: 0.75 !important;
    }
}
/* ============================================================
   移动端适配 - 页面专项增强
   针对登录/注册/找回密码/用户中心等自定义 class 的适配
   ============================================================ */

/* ============================================================
   一、登录页 (login.php) - .lg-wrapper / .lg-card
   ============================================================ */
@media (max-width: 767px) {

    .lg-wrapper {
        padding: 10px !important;
        min-height: 100vh !important;
        align-items: flex-start !important;
        padding-top: 6vh !important;
        box-sizing: border-box !important;
    }

    .lg-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 22px 18px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }

    /* 登录卡片内标题 */
    .lg-card h1, .lg-card h2, .lg-card .lg-title {
        font-size: 20px !important;
        margin-bottom: 16px !important;
    }

    /* 输入框容器 */
    .input-wrap {
        margin-bottom: 12px !important;
    }

    .input-wrap input {
        font-size: 16px !important;
        height: 44px !important;
        padding: 0 12px !important;
    }

    /* 登录按钮全宽 */
    .lg-card .btn,
    .lg-card button[type="submit"] {
        width: 100% !important;
        height: 44px !important;
        font-size: 15px !important;
        margin-top: 6px !important;
    }

    /* 记住我 / 忘记密码 行 */
    .lg-card .lg-extra,
    .lg-card .remember-row {
        flex-direction: column !important;
        gap: 8px !important;
        align-items: flex-start !important;
    }
}

/* ============================================================
   二、注册页 (reg.php) - .reg-wrapper / .reg-card
   ============================================================ */
@media (max-width: 767px) {

    .reg-wrapper {
        padding: 10px !important;
        min-height: 100vh !important;
        align-items: flex-start !important;
        padding-top: 4vh !important;
        box-sizing: border-box !important;
    }

    .reg-card {
        width: 100% !important;
        max-width: 100% !important;
        padding: 20px 16px !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }

    .reg-header {
        margin-bottom: 16px !important;
    }

    .reg-avatar {
        font-size: 18px !important;
        padding: 8px 12px !important;
    }

    .reg-body {
        padding: 0 !important;
    }

    .reg-field {
        margin-bottom: 12px !important;
    }

    .reg-field input,
    .reg-field select {
        font-size: 16px !important;
        height: 44px !important;
        padding: 0 12px !important;
    }

    /* 邮箱建议下拉 */
    .email-suggest-wrap {
        max-width: 100% !important;
    }

    .reg-card .btn,
    .reg-card button[type="submit"] {
        width: 100% !important;
        height: 44px !important;
        font-size: 15px !important;
    }

    /* 注册页背景图定位 */
    .reg-bg {
        object-fit: cover !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ============================================================
   三、用户中心首页 (user/index.php)
   ============================================================ */
@media (max-width: 767px) {

    /* Hero 区域 */
    .uc-hero {
        padding: 14px 12px !important;
        border-radius: 10px !important;
        margin-bottom: 12px !important;
    }

    /* Hero 统计数字：2列布局 */
    .uc-hero-stats {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 10px !important;
    }

    .uc-hero-stat {
        padding: 10px 8px !important;
        border-radius: 8px !important;
        text-align: center !important;
        min-width: 0 !important;
    }

    .uc-hero-stat .num,
    .uc-hero-stat .value {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    .uc-hero-stat .label,
    .uc-hero-stat .name {
        font-size: 11px !important;
    }

    /* 快捷入口网格：4列 → 2列 */
    .uc-quick-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .uc-quick-item {
        padding: 10px 6px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
    }

    .uc-quick-item i,
    .uc-quick-item .icon {
        font-size: 18px !important;
        margin-bottom: 4px !important;
        display: block !important;
    }

    /* 数据卡片网格：多列 → 2列 */
    .uc-data-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .uc-data-card {
        padding: 12px 10px !important;
        border-radius: 8px !important;
        min-width: 0 !important;
    }

    .uc-data-card .num,
    .uc-data-card .value {
        font-size: 17px !important;
    }

    .uc-data-card .label,
    .uc-data-card .name {
        font-size: 11px !important;
    }

    /* 普通卡片 */
    .uc-card {
        border-radius: 10px !important;
        margin-bottom: 10px !important;
    }

    .uc-card-header {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    .uc-card-body {
        padding: 10px 12px !important;
    }

    /* 站点信息行：标签值堆叠 */
    .uc-site-info-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 3px !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }

    .uc-site-info-row .label,
    .uc-site-info-row .name {
        font-size: 11px !important;
        color: #999 !important;
    }

    .uc-site-info-row .value {
        font-size: 13px !important;
        text-align: left !important;
        word-break: break-all !important;
    }
}

/* ============================================================
   四、小屏增强 (480px 以下)
   ============================================================ */
@media (max-width: 480px) {

    /* 用户中心：数据卡片保持2列但更紧凑 */
    .uc-data-grid {
        gap: 6px !important;
    }

    .uc-data-card {
        padding: 10px 8px !important;
    }

    .uc-data-card .num,
    .uc-data-card .value {
        font-size: 15px !important;
    }

    .uc-data-card .label,
    .uc-data-card .name {
        font-size: 10px !important;
    }

    /* 快捷入口保持2列 */
    .uc-quick-grid {
        gap: 6px !important;
    }

    .uc-quick-item {
        font-size: 11px !important;
        padding: 8px 4px !important;
    }

    /* 登录/注册卡片进一步收窄内边距 */
    .lg-card, .reg-card {
        padding: 18px 14px !important;
    }
}

/* ============================================================
   五、通用：横向滚动表格在移动端可视提示
   ============================================================ */
@media (max-width: 767px) {
    .table-responsive::-webkit-scrollbar,
    .table-wrap::-webkit-scrollbar {
        height: 4px;
    }

    .table-responsive::-webkit-scrollbar-thumb,
    .table-wrap::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 2px;
    }

    /* 常见 Bootstrap 栅格：小屏强制堆叠 */
    .row > .col-sm-6, .row > .col-sm-4, .row > .col-sm-3,
    .row > .col-md-6, .row > .col-md-4, .row > .col-md-3 {
        width: 100% !important;
        float: none !important;
    }

    /* 表单单行：标签在上，输入在下 */
    .form-horizontal .control-label {
        text-align: left !important;
        padding-bottom: 4px !important;
    }
}
/* ============================================================
   移动端适配 - 补充修复
   针对扫描发现的剩余问题
   ============================================================ */

/* ============================================================
   一、通用容器宽度强制自适应（修复所有固定宽度溢出）
   说明：用 max-width 而非 width，避免破坏原有布局意图
   ============================================================ */
@media (max-width: 767px) {

    /* 所有可能溢出的块级元素：限制最大宽度 */
    div, section, main, aside, article, header, footer, nav,
    form, ul, ol, dl, pre, blockquote {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 但排除需要保持尺寸的元素 */
    .fa, [class^="fa-"], [class*=" fa-"],
    .layui-icon, [class^="layui-icon"],
    img, i, span.icon, .badge, .label
    {
        max-width: none !important;
    }

    /* 内联 style 的固定宽度：用 CSS 无法覆盖，
       但对常见选择器做一次兜底 */
    [style*="width: 1200px"], [style*="width:1200px"],
    [style*="width: 1000px"], [style*="width:1000px"],
    [style*="width: 900px"],  [style*="width:900px"],
    [style*="width: 800px"],  [style*="width:800px"],
    [style*="width: 700px"],  [style*="width:700px"],
    [style*="width: 600px"],  [style*="width:600px"],
    [style*="width: 500px"],  [style*="width:500px"],
    [style*="width: 480px"],  [style*="width:480px"],
    [style*="width: 450px"],  [style*="width:450px"],
    [style*="width: 420px"],  [style*="width:420px"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 固定 min-width 会导致溢出的：在小屏重置 */
    [style*="min-width: 400px"], [style*="min-width:400px"],
    [style*="min-width: 500px"], [style*="min-width:500px"],
    [style*="min-width: 600px"], [style*="min-width:600px"] {
        min-width: 0 !important;
    }
}

/* ============================================================
   二、修复未加响应式容器的表格
   （finance.php / regsite.php）
   ============================================================ */
@media (max-width: 767px) {

    /* 让这些页面的表格可横向滚动 */
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 但排除已是 table-layout 的紧凑表格 */
    table.table-striped,
    table.table-bordered {
        display: table !important;
    }

    /* 数据表格用滚动容器包裹的保持 table */
    .data-table, .list-table {
        display: table !important;
    }
}

/* ============================================================
   三、用户中心 index.php 额外适配
   ============================================================ */
@media (max-width: 767px) {

    /* 用户中心顶部问候区 */
    .uc-hero-greeting,
    .uc-hero-title {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    /* 等级标签 */
    .uc-level-badge,
    .uc-hero .label,
    .uc-hero .badge {
        font-size: 11px !important;
        padding: 2px 8px !important;
    }

    /* 用户中心内的表格 */
    .uc-card .table,
    .uc-card-body .table {
        font-size: 12px !important;
    }

    /* 趋势/图表类容器 */
    .uc-chart, .chart-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ============================================================
   四、faq.php 常见问题页适配
   ============================================================ */
@media (max-width: 767px) {

    .faq-item, .faq-list-item {
        padding: 10px !important;
        border-radius: 8px !important;
        margin-bottom: 8px !important;
    }

    .faq-question, .faq-title {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .faq-answer, .faq-content {
        font-size: 12px !important;
        line-height: 1.7 !important;
        word-break: break-word !important;
    }
}

/* ============================================================
   五、api_docs.php 接口文档页适配
   ============================================================ */
@media (max-width: 767px) {

    /* 文档代码块横向滚动而非换行破坏格式 */
    pre, code, .code-block, .api-code {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        font-size: 11px !important;
        white-space: pre !important;
        max-width: 100% !important;
        display: block !important;
    }

    /* 参数表格 */
    .api-table, .param-table {
        font-size: 11px !important;
        display: block !important;
        overflow-x: auto !important;
    }

    /* 接口路径 */
    .api-path, .api-url {
        word-break: break-all !important;
        font-size: 12px !important;
    }
}

/* ============================================================
   六、workorder.php 工单页适配
   ============================================================ */
@media (max-width: 767px) {

    .workorder-item, .ticket-item {
        padding: 10px !important;
        border-radius: 8px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    /* 工单详情聊天区 */
    .chat-message, .message-bubble {
        max-width: 85% !important;
        font-size: 13px !important;
        word-break: break-word !important;
    }

    /* 工单输入框 */
    .chat-input-area, .workorder-reply {
        padding: 8px !important;
    }
}

/* ============================================================
   七、groupchat.php 群聊页适配
   ============================================================ */
@media (max-width: 767px) {

    .chat-container, .groupchat-container {
        height: auto !important;
        min-height: 70vh !important;
    }

    .chat-message-item {
        padding: 8px !important;
        font-size: 13px !important;
    }

    .chat-avatar {
        width: 32px !important;
        height: 32px !important;
    }

    /* 消息输入区固定在底部 */
    .chat-input-bar, .chat-footer {
        position: sticky !important;
        bottom: 0 !important;
        background: #fff !important;
        padding: 8px !important;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.06) !important;
    }

    .chat-input-bar textarea,
    .chat-input-bar input {
        font-size: 16px !important;
    }
}

/* ============================================================
   八、shoplist.php 商品列表页适配（卡片流）
   ============================================================ */
@media (max-width: 767px) {

    /* 商品卡片网格：多列 → 2列 */
    .goods-grid, .shop-grid, .product-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .goods-item, .shop-item, .product-card {
        padding: 8px !important;
        border-radius: 8px !important;
    }

    .goods-item img, .shop-item img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
    }

    .goods-name, .shop-item-title {
        font-size: 12px !important;
        line-height: 1.4 !important;
        max-height: 2.8em !important;
        overflow: hidden !important;
    }

    .goods-price, .shop-item-price {
        font-size: 14px !important;
        font-weight: 600 !important;
    }
}

@media (max-width: 380px) {
    /* 超小屏：商品卡片 1 列 */
    .goods-grid, .shop-grid, .product-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   九、订单列表 list.php 移动端适配
   ============================================================ */
@media (max-width: 767px) {

    /* 筛选/搜索栏 */
    .list-filter, .order-filter {
        flex-direction: column !important;
        gap: 6px !important;
        padding: 8px !important;
    }

    .list-filter > *, .order-filter > * {
        width: 100% !important;
    }

    /* 订单表格横向滚动 */
    .order-table-wrap, .list-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ============================================================
   十、弹窗内容通用适配增强
   ============================================================ */
@media (max-width: 767px) {

    /* layer 弹窗内的表单 */
    .layui-layer-content .form-group,
    .layui-layer-content .input-group {
        margin-bottom: 10px !important;
    }

    .layui-layer-content input,
    .layui-layer-content select,
    .layui-layer-content textarea {
        font-size: 16px !important;
        min-height: 40px !important;
    }

    .layui-layer-content .btn {
        min-height: 38px !important;
        font-size: 14px !important;
    }

    /* 弹窗内的表格 */
    .layui-layer-content table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 弹窗底部按钮组堆叠 */
    .layui-layer-btn {
        display: flex !important;
        gap: 8px !important;
    }

    .layui-layer-btn a {
        flex: 1 !important;
        text-align: center !important;
        margin: 0 !important;
    }
}

/* ============================================================
   十一、iOS 安全区域适配（刘海屏）
   ============================================================ */
@supports (padding: max(0px)) {
    @media (max-width: 767px) {
        body {
            padding-left: env(safe-area-inset-left) !important;
            padding-right: env(safe-area-inset-right) !important;
        }

        /* 底部固定元素避开 Home 指示条 */
        .chat-input-bar, .chat-footer, .fixed-bottom {
            padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
        }
    }
}