/* 茶小智 网页版 v0.1 · mobile.css
   移动端适配层 —— 必须在 app.css 之后加载。
   作用：把原 H5 demo 的「桌面假手机壳」改成真正的移动端 App 外壳。
   覆盖对象：body / .phone / .notch / .statusbar / .screen / .tabs（其余组件样式沿用 app.css） */

/* ---------- 0. 基础：取消桌面演示用的居中与留白 ---------- */
html{ -webkit-text-size-adjust:100%; }
html,body{ height:100%; }

body{
  display:block;                /* 原：flex 居中（桌面画手机用） */
  padding:0;                    /* 原：24px 12px */
  background:var(--bg);         /* 原：#e9e4dc / #E8E4DA 灰底 */
  min-height:100vh;
  min-height:100dvh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* 假外壳：HTML 中已移除，这里兜底（防旧缓存/误加） */
.notch,.statusbar{ display:none !important; }

/* ---------- 1. .phone 由「假手机框」变为「真 App 外壳」 ---------- */
.phone{
  width:100%;
  max-width:480px;              /* 桌面端居中列宽 */
  margin:0 auto;
  height:100vh;
  height:100dvh;                /* iOS 地址栏收起/展开不再跳动 */
  display:flex;
  flex-direction:column;
  position:relative;            /* 弹层 .modal/.cs/.ledger-view 的定位参照，必须保留 */
  border:0;                     /* 原：10px / 8px 黑色边框 */
  border-radius:0;              /* 原：36px / 32px */
  box-shadow:none;              /* 原：0 30px 70px */
  background:var(--bg);
  overflow:hidden;
}

/* 顶栏：固定不随内容滚动 */
.apphead{ flex:0 0 auto; }

/* ---------- 2. .screen 成为唯一滚动容器 ---------- */
.screen{
  flex:1 1 auto;
  height:auto;                  /* 关键：干掉原 560px 死高度 */
  min-height:0;                 /* 关键：flex 子项能正确收缩 */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;  /* 滚动到边界不带动整页回弹 */
  background:var(--bg);
}

/* ---------- 3. 底部 tab：贴底 + 刘海屏安全区 ---------- */
.tabs{
  position:relative;            /* 原：sticky（在 flex 布局下已无意义） */
  flex:0 0 auto;
  padding-bottom:calc(6px + env(safe-area-inset-bottom,0px));  /* iPhone Home 指示条 */
  background:rgba(255,255,255,.98);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .tabs{
    background:rgba(255,255,255,.86);
    -webkit-backdrop-filter:saturate(180%) blur(14px);
    backdrop-filter:saturate(180%) blur(14px);
  }
}
.tab{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.tab:active{ background:var(--tea-50); }

/* ---------- 4. 触摸与 iOS 专项 ---------- */
button,.btn,.seg button,.qcard,.chip{ touch-action:manipulation; -webkit-tap-highlight-color:transparent; }

/* iOS：字号 <16px 的输入框聚焦时会把整页放大 */
input,textarea,select{ font-size:16px; }
.composer input{ font-size:16px; }

/* 软键盘弹起时，输入框滚到可视区中部 */
input,textarea{ scroll-margin-bottom:120px; }

/* 触屏没有 hover，用 :active 承担反馈 */
@media (hover:none){
  .card:hover,.kpi:hover,.qcard:hover{ box-shadow:var(--shadow-sm); }
}

/* ---------- 5. 长表格 / 数字不撑破屏幕 ---------- */
.paper table{ font-size:9.5px; }
.kpi .v,.kpi .l,.cs-foot b{ font-variant-numeric:tabular-nums; }

/* ---------- 6. 桌面端（≥768px）：居中列 + 浅灰底 + 恢复卡片阴影 ---------- */
@media (min-width:768px){
  body{
    background:#e9e4dc;
    padding:24px 12px;
    display:flex;
    justify-content:center;
    align-items:flex-start;
  }
  .phone{
    height:calc(100dvh - 48px);
    max-height:920px;
    border-radius:18px;
    border:1px solid rgba(10,46,45,.09);
    box-shadow:0 18px 48px rgba(10,46,45,.16);
  }
  .tabs{ border-radius:0 0 18px 18px; }
}

/* ---------- 7. 打印：只出纸质台账 ---------- */
@media print{
  .phone>.apphead,.tabs{ display:none !important; }
  .ledger-view{ position:static !important; background:#fff !important; display:block !important; }
  .ledger-scroll{ overflow:visible !important; padding:0 !important; }
  .ledger-bar{ display:none !important; }
  .paper{ box-shadow:none !important; }
}