/**
 * 移动端适配层（微信小程序风格）
 * 仅在 ≤767px 生效，桌面端样式完全不受影响。
 * 依赖 body.m-app（由 includes/header.php 输出）；
 * 登录页使用 body.m-login 作用域。
 */

/* ===== 顶部导航 / 底部 tabBar：移动端默认隐藏由 Tailwind(md:hidden)控制，
   这里只给出它们在手机上的视觉样式 ===== */

@media (max-width: 767px) {

    /* ---------- 基础 ---------- */
    body.m-app {
        background: #ededed;
        -webkit-text-size-adjust: 100%;
    }
    body.m-app main {
        padding: 10px 0 calc(74px + env(safe-area-inset-bottom)) !important;
    }
    .m-app .max-w-7xl,
    .m-app .max-w-6xl,
    .m-app .max-w-5xl,
    .m-app .max-w-3xl {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* 卡片在灰底上更贴合小程序观感 */
    .m-app main .shadow-sm { box-shadow: 0 1px 3px rgba(0,0,0,.05) !important; }
    #flash { padding-top: 10px !important; }
    #flash > div { border-radius: 10px !important; }

    /* ---------- 顶部导航栏（仿微信小程序 navBar） ---------- */
    .m-navbar {
        position: sticky;
        top: 0;
        z-index: 60;
        height: calc(48px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) 12px 0;
        background: rgba(255,255,255,.96);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
        border-bottom: 1px solid #ebedf0;
        display: flex;
        align-items: center;
    }
    .m-navbar__badge {
        width: 30px; height: 30px;
        border-radius: 8px;
        background: linear-gradient(135deg, #39a1ff, #0368d4);
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        display: flex; align-items: center; justify-content: center;
        flex: none;
        box-shadow: 0 2px 6px rgba(15,133,246,.3);
    }
    .m-navbar__title {
        position: absolute;
        left: 76px; right: 76px;
        text-align: center;
        font-size: 17px;
        font-weight: 600;
        color: #191919;
        pointer-events: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .m-navbar__capsule {
        margin-left: auto;
        width: 32px; height: 32px;
        border-radius: 50%;
        border: 1px solid #e5e5e5;
        background: #fff;
        display: flex; align-items: center; justify-content: center;
        color: #333;
        position: relative;
        flex: none;
    }
    .m-navbar__capsule:active { background: #f2f3f5; }
    .m-menu {
        position: absolute;
        top: calc(52px + env(safe-area-inset-top));
        right: 12px;
        min-width: 176px;
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 8px 30px rgba(0,0,0,.14);
        border: 1px solid #f0f0f0;
        padding: 8px;
        display: none;
        z-index: 70;
        overflow: hidden;
    }
    .m-menu.is-open { display: block; }
    .m-menu__user {
        font-size: 13px;
        color: #8a8f99;
        padding: 8px 12px 10px;
        border-bottom: 1px solid #f2f3f5;
        margin-bottom: 6px;
    }
    .m-menu a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
        border-radius: 9px;
        font-size: 15px;
        color: #191919;
    }
    .m-menu a:active { background: #f2f3f5; }
    .m-menu a.is-danger { color: #ee0a24; }
    .m-menu svg { width: 18px; height: 18px; flex: none; }

    /* ---------- 底部 tabBar（仿微信小程序 tabBar） ---------- */
    .m-tabbar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 60;
        background: rgba(255,255,255,.96);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid #ebedf0;
        display: flex;
        padding: 4px 0 env(safe-area-inset-bottom);
    }
    .m-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px 0 2px;
        font-size: 10px;
        line-height: 1.2;
        color: #7a7e83;
        -webkit-tap-highlight-color: transparent;
    }
    .m-tab svg { width: 23px; height: 23px; }
    .m-tab.is-active { color: #0f85f6; }
    .m-tab.is-active svg { stroke: #0f85f6; }
    /* 中间凸起的新增按钮 */
    .m-tab--plus { position: relative; }
    .m-tab--plus .m-tab__icon {
        width: 46px; height: 46px;
        margin-top: -22px;
        border-radius: 50%;
        background: linear-gradient(135deg, #39a1ff, #0368d4);
        color: #fff;
        display: flex; align-items: center; justify-content: center;
        box-shadow: 0 6px 16px rgba(15,133,246,.42);
        border: 3px solid #f5f6f8;
    }
    .m-tab--plus .m-tab__icon svg { width: 24px; height: 24px; stroke: #fff; }
    .m-tab--plus span { margin-top: 1px; }

    /* ---------- 页面标题区 ---------- */
    .m-page-head {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-bottom: 12px !important;
    }
    .m-page-head h2 { font-size: 19px !important; }
    .m-page-head .m-head-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .m-page-head .m-head-actions > a,
    .m-page-head .m-head-actions > button {
        flex: 1;
        text-align: center;
        justify-content: center;
        min-height: 38px;
        display: inline-flex;
        align-items: center;
    }
    /* 只有一个元素时（如"返回列表"文字链接）保持原样，不撑成按钮 */
    .m-page-head .m-head-actions > *:only-child {
        flex: 0 0 auto;
        min-height: 0;
        text-align: left;
    }

    /* ---------- 通用卡片 ---------- */
    .m-app main .rounded-xl { border-radius: 12px !important; }

    /* ---------- 首页：统计卡片 ---------- */
    .m-stats { gap: 8px !important; }
    .m-stats > * {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }
    .m-stats > *:nth-child(5) { grid-column: span 2; }
    .m-stats .text-2xl { font-size: 19px !important; margin-top: 2px !important; }

    /* ---------- 首页：列表卡片容器拆分为小程序分组卡片 ---------- */
    .m-list-card {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    .m-list-head,
    .m-filter,
    .m-pager {
        background: #fff;
        border: 1px solid #f0f0f0 !important;
        border-radius: 12px;
        margin: 0 0 10px !important;
        box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    .m-list-head { padding: 12px !important; }
    .m-filter { padding: 12px !important; display: block !important; }
    .m-filter > div { width: 100%; margin-bottom: 8px; }
    .m-filter > div:last-child { margin-bottom: 0; }
    .m-filter input,
    .m-filter select { width: 100% !important; min-height: 38px; }
    .m-filter .flex { display: flex !important; gap: 8px; }
    .m-filter .flex > * { flex: 1; text-align: center; }

    /* ---------- 首页：报价表格 → 卡片列表 ---------- */
    .m-card-table,
    .m-card-table tbody,
    .m-card-table tr,
    .m-card-table td { display: block; }
    .m-card-table thead { display: none; }
    .m-card-table,
    .m-card-table th,
    .m-card-table td {
        border: 0 !important;
        background: transparent !important;
    }
    .m-card-table tr {
        background: #fff !important;
        border-radius: 12px;
        margin: 0 0 10px;
        padding: 4px 14px;
        box-shadow: 0 1px 3px rgba(0,0,0,.04);
    }
    .m-card-table td {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 9px 0 !important;
        border-bottom: 1px solid #f2f3f5 !important;
        text-align: left !important;
        white-space: normal !important;
        max-width: none !important;
        font-size: 13.5px;
        line-height: 1.45;
    }
    .m-card-table td::before {
        content: attr(data-label);
        flex: 0 0 56px;
        color: #8a8f99;
        font-size: 12.5px;
    }
    /* 操作行：按钮平铺 */
    .m-card-table td:last-child {
        flex-wrap: wrap;
        gap: 4px 22px;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        border-bottom: 0 !important;
    }
    .m-card-table td:last-child::before { display: none; }
    .m-card-table td:last-child a,
    .m-card-table td:last-child button {
        font-size: 14px;
        padding: 4px 0;
        background: transparent;
    }
    /* 空状态行 */
    .m-card-table td[colspan]::before { display: none; }
    .m-card-table td[colspan] { justify-content: center; padding: 28px 0 !important; }

    /* ---------- 分页 ---------- */
    .m-pager {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px !important;
        justify-content: center !important;
    }
    .m-pager > div:first-child { width: 100%; text-align: center; }
    .m-pager .flex { flex-wrap: wrap; justify-content: center; }

    /* ---------- 表单（新增 / 编辑） ---------- */
    .m-app form.space-y-6 > * + * { margin-top: 10px !important; }
    .m-form-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .m-form-actions > a,
    .m-form-actions > button {
        width: 100%;
        text-align: center;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 明细编辑器：分组头部按钮换行，表格横向滑动 */
    .m-app .group-card .group-head { flex-wrap: wrap; row-gap: 8px; }
    .m-app .group-head > input { flex-basis: 100%; min-width: 0 !important; order: 3; }
    .m-app .group-card table { min-width: 600px; }
    .m-app .group-card .overflow-x-auto { -webkit-overflow-scrolling: touch; }

    /* ---------- 详情页 ---------- */
    /* 审核 / 提交操作条 */
    .m-action-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
        text-align: center;
        border-radius: 12px !important;
    }
    .m-action-bar > span { margin-right: 0 !important; }
    .m-action-bar select,
    .m-action-bar button { width: 100%; min-height: 40px; }
    /* A4 预览卡片 */
    .m-preview { padding: 12px !important; }
    .m-preview .text-2xl { font-size: 18px !important; }
    /* 含 rowspan 的明细表格：整体横向滑动，不转卡片 */
    .m-hscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .m-hscroll > table { min-width: 640px; }
    /* 签字区上下排列 */
    .m-preview .sign-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
    .m-preview .sign-grid > div:last-child { text-align: left !important; }

    /* ---------- 系统设置 ---------- */
    .m-tabs {
        overflow-x: auto;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .m-tabs::-webkit-scrollbar { display: none; }
    .m-tabs > a { white-space: nowrap; flex: none; }
    .m-settings-card { margin-bottom: 10px !important; }
    /* 设置页内表单按钮区（取消/保存）也整行 */
    .m-app .settings-actions { flex-direction: column !important; }
    .m-app .settings-actions > * { width: 100%; text-align: center; min-height: 42px; }
    .m-app .m-user-search { flex-wrap: wrap; }
    .m-app .m-user-search input[type="text"] { flex: 1; min-width: 0; }
    .m-app .m-user-search button { flex: 0 0 auto; }

    /* ---------- 登录页（独立作用域） ---------- */
    body.m-login { padding: 20px 16px !important; }
    .m-login .login-brand { margin-bottom: 18px !important; }
    .m-login .login-brand h1 { font-size: 20px !important; }
    .m-login .login-card {
        padding: 22px 18px !important;
        border-radius: 16px !important;
    }
}