/* =====================================================================
   手机端样式（app 图标首页 + 单报表全屏）
   与 mobile.js 配套：JS 只往 <body> 打 is-mobile / m-home / m-detail
   三个状态类，所有布局都由本文件承担。桌面端（app.css）不受影响。
   状态类名必须与外壳元素类名（.mobile-home / .mobile-bar）不同！
   曾经两边都叫 mobile-home，下面那条桌面隐藏规则直接命中了 <body> 本身，
   造成一进首页整页 display:none（看报表正常、点返回就白屏）。
   判定口径：CSS 宽度 <= 768px 或 UA 为手机/平板（见 mobile.js 的 isMobile）。
   ===================================================================== */
:root {
    --mbar-h: 46px;                                   /* 移动端顶栏高度 */
}
/* 刘海/状态栏等安全区一律直接写 env()，不放进自定义属性：
   自定义属性里的 env() 要到替换时才报错，会让整条 calc() 失效（几何直接塌掉）；
   直接写在声明上，不支持 env() 的老内核只会丢弃那一条，前面的普通值照常生效。 */
body { -webkit-tap-highlight-color: transparent; }

/* 移动组件在桌面端一律不出现 */
.mobile-home, .mobile-bar { display: none; }

/* 侧边栏 / 面包屑 / 标签条在手机上全部不呈现：只有「首页网格」与「单报表」两层 */
body.is-mobile .app-wrapper { display: block; height: 100vh; height: 100dvh; }
body.is-mobile .sidebar,
body.is-mobile .navbar,
body.is-mobile .tags-view { display: none; }
body.is-mobile .main { display: block; height: 100%; min-width: 0; }
body.is-mobile .content { position: static; }
body.is-mobile .empty-tip { display: none !important; }   /* 首页本身就是空态引导 */
body.is-mobile .designer-overlay { display: none !important; }   /* 手机不提供设计器 */

/* ---------- 单报表层 ---------- */
/* 内容区下移到移动端顶栏之下；顶栏只留 返回 / 标题 / 刷新（手机不打印、不设计） */
body.is-mobile.m-detail .content {
    position: fixed; left: 0; right: 0; bottom: 0;
    top: var(--mbar-h);
}
body.is-mobile.m-detail .mobile-bar {
    display: flex; align-items: center;
    position: fixed; left: 0; right: 0; z-index: 950;
    top: 0; height: var(--mbar-h);
    padding: 0 8px;
    background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    color: #333; font-size: 15px;
}
.mobile-bar > * + * { margin-left: 6px; }
/* 有安全区的机型：顶栏加高、内容区下移，并把标题撑到状态栏之下 */
@supports (padding-top: env(safe-area-inset-top)) {
    body.is-mobile.m-detail .content {
        top: calc(var(--mbar-h) + env(safe-area-inset-top, 0px));
    }
    body.is-mobile.m-detail .mobile-bar {
        height: calc(var(--mbar-h) + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
    }
}
.mobile-bar .mb-back, .mobile-bar .mb-refresh {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; color: #1890ff; cursor: pointer; user-select: none;
}
.mobile-bar .mb-back { font-size: 26px; }
.mobile-bar .mb-refresh { font-size: 18px; }
.mobile-bar .mb-back:active, .mobile-bar .mb-refresh:active { background: #f0f2f5; }
.mobile-bar .mb-title {
    flex: 1; min-width: 0; text-align: center; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---------- 首页层：app 图标网格 ---------- */
/* 这里是「is-mobile 且不在单报表层」而不是「is-mobile 且 m-home」：
   万一两层状态类因缓存/历史回退等原因丢了，首页仍会兜底显示，
   而不是退化成「侧栏被隐藏 + 内容区高度 0」的全白页。 */
body.is-mobile:not(.m-detail) .mobile-home {
    display: flex; flex-direction: column;
    /* 不用 inset 简写：旧内核（微信/QQ 内置 X5、旧 Android WebView、iOS < 14.5）不认，
       会让 fixed 元素没有偏移而排到 .app-wrapper（100vh）之后，整块被推到屏外 → 首页全白 */
    position: fixed; top: 0; right: 0; bottom: 0; left: 0;
    z-index: 900; background: #f5f6f8;
}
@supports (padding-top: env(safe-area-inset-top)) {
    body.is-mobile:not(.m-detail) .mobile-home {
        padding-top: env(safe-area-inset-top, 0px);
    }
}
.mh-top {
    display: flex; align-items: center; padding: 14px 16px 10px;
    background: linear-gradient(180deg, #2b2f3a 0%, #1f232e 100%); color: #fff;
}
/* 弹性盒子的 gap 要 Chrome 84+：微信/QQ 内置内核常见停在 57/70/86，
   所以手机上的间距一律用 margin 实现，gap 只留给网格（grid-gap 老内核支持）。 */
.mh-top > * + * { margin-left: 10px; }
.mh-top .mh-ico { font-size: 26px; }
.mh-tt { display: flex; flex-direction: column; line-height: 1.3; }
.mh-tt strong { font-size: 17px; }
.mh-tt em { font-style: normal; font-size: 12px; color: #b9bdc7; }
.mh-search { padding: 10px 12px 4px; background: #2b2f3a; }
.mh-search input {
    width: 100%; height: 34px; border: none; border-radius: 17px;
    padding: 0 14px; font-size: 14px; background: rgba(255, 255, 255, .14);
    color: #fff; outline: none; -webkit-appearance: none; appearance: none;
}
.mh-search input::placeholder { color: #cfd3db; }
.mh-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.mh-body {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 6px 10px 14px;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.mh-group { margin-top: 14px; }
.mh-group-title {
    display: flex; align-items: center;
    font-size: 13px; color: #868b95; padding: 0 6px 8px;
}
.mh-group-title > * + * { margin-left: 6px; }
.mh-group-title .cnt { color: #b6bac2; font-size: 12px; }
.mh-cells {
    display: grid; grid-template-columns: repeat(4, 1fr);
    grid-gap: 4px 2px; gap: 4px 2px;      /* grid-gap 给 Chrome 57~65 兜底 */
}
@media (min-width: 420px) { .mh-cells { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 600px) { .mh-cells { grid-template-columns: repeat(6, 1fr); } }
.mh-cell {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 3px; cursor: pointer; border-radius: 12px;
    -webkit-user-select: none; user-select: none;
}
.mh-cell:active { background: #e6e8ec; }
.mh-cell .cell-ico {
    width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 26px; color: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .14);
}
.mh-cell .cell-name {
    font-size: 11px; color: #444; line-height: 1.25; text-align: center;
    margin-top: 6px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; word-break: break-all;
}
.mh-empty { text-align: center; color: #a0a4ab; font-size: 13px; padding: 40px 0; }