/* ============================================================
   全站移动端 UI v3 —— 移动端专属重构（非桌面缩小）
   ------------------------------------------------------------
   v3 相对 v2 的重构：
   - 数据：宽表 → 网格多列卡片（高密度），移除横滑表格（不适合触屏）
   - 按钮：卡片操作 = 等宽规整按钮组；全站按钮统一节奏
   - 密度：收紧 padding/gap，Hub/KPI/筛选更紧凑
   - 性能：移除 backdrop-filter 毛玻璃（重绘杀手 + 截图卡顿源），
           滚动时不重扫表格（见 mobile.js），仅 DOM 变化增量处理
   - 主断点 832px，内部尺寸 clamp() 连续缩放；桌面(>832)零影响
   ============================================================ */

:root {
  /* 流体字号 */
  --ec-fs-xs: clamp(10.5px, 0.28vw + 9.6px, 12.5px);
  --ec-fs-sm: clamp(12px, 0.38vw + 11px, 13.5px);
  --ec-fs-base: clamp(13.5px, 0.5vw + 12px, 15.5px);
  --ec-fs-lg: clamp(15px, 0.8vw + 13.2px, 18px);
  --ec-fs-xl: clamp(18px, 1.3vw + 14px, 24px);
  /* 流体间距（v3 收紧） */
  --ec-sp-2xs: clamp(3px, 0.6vw, 5px);
  --ec-sp-xs: clamp(5px, 1vw, 8px);
  --ec-sp-sm: clamp(7px, 1.4vw, 11px);
  --ec-sp-md: clamp(10px, 2vw, 15px);
  --ec-sp-lg: clamp(14px, 2.8vw, 22px);
  /* token */
  --ec-m-radius: clamp(8px, 1vw, 13px);
  --ec-m-radius-sm: clamp(6px, 0.8vw, 9px);
  --ec-m-touch: clamp(40px, 10vw, 48px);
  --ec-m-tabbar-h: clamp(52px, 13vw, 60px);
  --ec-m-drawer-w: clamp(258px, 78vw, 330px);
  --ec-m-card-shadow: 0 1px 4px rgba(15, 53, 84, 0.07);
}

/* JS 注入节点：桌面隐藏 */
.ec-m-menu-btn,
.ec-m-drawer,
.ec-m-drawer-mask,
.ec-m-tabbar { display: none; }

/* ============================================================
   移动主断点
   ============================================================ */
@media (max-width: 832px) {

  html { -webkit-text-size-adjust: 100%; }
  body { font-size: var(--ec-fs-base); }

  /* —— 壳层 —— */
  .ec-shell { flex-direction: column; min-height: 100dvh; }
  .ec-aside { display: none !important; }
  .ec-main { width: 100% !important; flex: 1 1 100% !important; min-width: 0; }
  body.ec-has-mobile-nav .ec-main {
    padding-bottom: calc(var(--ec-m-tabbar-h) + env(safe-area-inset-bottom, 0px));
  }

  /* —— 顶栏（不透明，无毛玻璃）—— */
  .ec-topbar {
    height: auto;
    min-height: clamp(48px, 12vw, 54px);
    padding: var(--ec-sp-xs) var(--ec-sp-md);
    gap: var(--ec-sp-xs);
    flex-wrap: nowrap;
    position: sticky; top: 0; z-index: 40;
    background: #fff;
    border-bottom: 1px solid var(--ec-border, #e2eaf1);
  }
  .ec-topbar .crumbs {
    flex: 1 1 auto; min-width: 0;
    font-size: var(--ec-fs-sm);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ec-topbar .crumbs strong { font-size: var(--ec-fs-base); }
  .ec-topbar .toolbar { margin-left: auto; gap: var(--ec-sp-xs); flex-wrap: nowrap; align-items: center; }
  .ec-top-note, .ec-account-card .sub, .ec-account-card .meta { display: none; }
  .ec-account-card { gap: 0; }
  .ec-account-card .avatar {
    width: clamp(30px, 8vw, 36px); height: clamp(30px, 8vw, 36px);
    font-size: var(--ec-fs-sm);
  }
  .ec-logout-btn {
    min-height: clamp(34px, 9vw, 40px);
    padding: 0 clamp(10px, 3vw, 14px);
    font-size: var(--ec-fs-sm);
  }

  /* 汉堡按钮 */
  body.ec-has-mobile-nav .ec-m-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: var(--ec-m-touch); height: var(--ec-m-touch); min-width: var(--ec-m-touch);
    border: 1px solid var(--ec-border, #d8e3ec);
    border-radius: var(--ec-m-radius-sm);
    background: #fff; color: var(--ec-primary-dark, #0f3554);
    font-size: clamp(18px, 5vw, 22px); line-height: 1; cursor: pointer; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .ec-m-menu-btn:active { background: #eef5fb; }

  /* —— 内容区 —— */
  .ec-content {
    padding: var(--ec-sp-sm) var(--ec-sp-md);
    overflow-x: hidden;
  }

  /* ==========================================================
     Hub / 网格 / KPI —— 高密度
     ========================================================== */
  .ec-grid-2, .ec-grid-3, .ec-grid-4, .ec-chart-grid, .grid-2, .grid-3 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(140px, 42vw, 220px)), 1fr)) !important;
    gap: var(--ec-sp-sm) !important;
  }
  .ec-hub-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(150px, 46vw, 220px)), 1fr)) !important;
    gap: var(--ec-sp-sm) !important;
  }
  .ec-hub-card {
    padding: var(--ec-sp-sm) var(--ec-sp-md) !important;
    min-height: 0 !important;
    border-radius: var(--ec-m-radius) !important;
    gap: var(--ec-sp-2xs) !important;
  }
  .ec-hub-card .name { font-size: var(--ec-fs-base); }
  .ec-hub-card .desc {
    font-size: var(--ec-fs-xs);
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
    min-height: 0 !important;
  }
  .ec-hub-card .num { width: clamp(26px, 7vw, 32px); height: clamp(26px, 7vw, 32px); }

  .ec-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(96px, 28vw, 145px)), 1fr)) !important;
    gap: var(--ec-sp-xs) !important;
  }
  .ec-metric { padding: var(--ec-sp-sm) var(--ec-sp-md) !important; }
  .ec-metric .value { font-size: clamp(19px, 5.6vw, 28px); }
  .ec-metric .label { font-size: var(--ec-fs-xs); }

  /* —— 卡片 / 横幅 —— */
  .ec-card { padding: var(--ec-sp-md); margin-bottom: var(--ec-sp-sm); border-radius: var(--ec-m-radius); }
  .ec-card .ec-card-title { font-size: var(--ec-fs-lg); margin-bottom: var(--ec-sp-sm); }
  .ec-banner-info, .ec-banner-warn, .ec-banner-disclaimer {
    padding: var(--ec-sp-xs) var(--ec-sp-md); font-size: var(--ec-fs-xs); line-height: 1.45;
  }

  /* ==========================================================
     数据卡片引擎 v3 —— 网格多列卡片（高密度，无横滑）
     mobile.js 把表格包进 .ec-table-host 并给 td 写 data-label，
     标记标题列 / 操作列。
     ========================================================== */
  .ec-table-host > table,
  .ec-table-host > table > tbody { display: block; width: 100%; }
  .ec-table-host > table > thead { display: none; }

  /* 一条记录 = 一张网格卡片 */
  .ec-table-host > table > tbody > tr {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(92px, 29vw, 150px), 1fr));
    gap: var(--ec-sp-2xs) var(--ec-sp-md);
    align-items: start;
    background: #fff;
    border: 1px solid var(--ec-border, #e6edf3);
    border-radius: var(--ec-m-radius);
    box-shadow: var(--ec-m-card-shadow);
    padding: var(--ec-sp-sm) var(--ec-sp-md);
    margin-bottom: var(--ec-sp-sm);
  }
  .ec-table-host > table > tbody > tr:last-child { margin-bottom: 0; }

  .ec-table-host > table > tbody > tr > td {
    display: block; min-width: 0;
    border: none !important; padding: 0 !important;
    font-size: var(--ec-fs-sm); line-height: 1.35;
    color: var(--ec-text, #1f2d3d);
    white-space: normal !important; overflow: visible !important;
    text-overflow: clip !important; max-width: none !important;
    align-self: stretch;
  }
  .ec-table-host > table > tbody > tr > td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--ec-fs-xs);
    color: var(--ec-text-soft, #8395a7);
    margin-bottom: 1px;
    font-weight: 500;
  }
  .ec-table-host > table > tbody > tr > td:empty { display: none; }

  /* 标题列（姓名 / 主链接）→ 整行表头，主信息突出 */
  .ec-table-host > table > tbody > tr > td.ec-card-title-cell {
    grid-column: 1 / -1;
    font-size: var(--ec-fs-lg);
    font-weight: 700;
    color: var(--ec-primary-dark, #0f3554);
    padding-bottom: var(--ec-sp-2xs) !important;
    margin-bottom: var(--ec-sp-2xs);
    border-bottom: 1px solid var(--ec-border, #eef2f6) !important;
  }
  .ec-table-host > table > tbody > tr > td.ec-card-title-cell::before { display: none; }
  .ec-table-host > table > tbody > tr > td.ec-card-title-cell a { color: var(--ec-primary-dark, #0f3554); font-weight: 700; text-decoration: none; }

  /* 操作列 → 整行底部，等宽规整按钮组 */
  .ec-table-host > table > tbody > tr > td.ec-card-actions-cell {
    grid-column: 1 / -1;
    display: flex; flex-wrap: wrap;
    gap: var(--ec-sp-xs);
    padding-top: var(--ec-sp-xs) !important;
    margin-top: var(--ec-sp-2xs);
    border-top: 1px solid var(--ec-border, #eef2f6) !important;
  }
  .ec-table-host > table > tbody > tr > td.ec-card-actions-cell::before { display: none; }
  .ec-table-host > table > tbody > tr > td.ec-card-actions-cell a,
  .ec-table-host > table > tbody > tr > td.ec-card-actions-cell button,
  .ec-table-host > table > tbody > tr > td.ec-card-actions-cell .ec-link,
  .ec-table-host > table > tbody > tr > td.ec-card-actions-cell .ec-action {
    flex: 1 1 0;
    min-width: clamp(72px, 26vw, 120px);
    display: inline-flex; align-items: center; justify-content: center;
    min-height: clamp(36px, 9.5vw, 42px);
    padding: 0 clamp(8px, 2.4vw, 12px);
    border: 1px solid var(--ec-primary, #1987b4);
    border-radius: var(--ec-m-radius-sm);
    background: #f2fafd;
    color: var(--ec-primary, #1987b4);
    font-size: var(--ec-fs-sm); font-weight: 600;
    text-decoration: none; white-space: nowrap;
  }

  /* 空状态行整行居中 */
  .ec-table-host > table > tbody > tr > td[colspan] {
    grid-column: 1 / -1; text-align: center;
    color: var(--ec-text-soft, #8395a7);
    padding: var(--ec-sp-md) !important;
  }
  .ec-table-host > table > tbody > tr > td[colspan]::before { display: none; }

  /* 卡片内 pill 紧凑 */
  .ec-table-host .ec-pill { margin: 1px 3px 0 0; font-size: var(--ec-fs-xs); }

  /* ==========================================================
     筛选 / 表单 —— 单列 + 紧凑
     ========================================================== */
  .ec-filter-bar .filter-grid, .ec-form-grid, .form-grid {
    grid-template-columns: 1fr !important; gap: var(--ec-sp-xs) !important;
  }
  .ec-filter-bar { padding: var(--ec-sp-sm) var(--ec-sp-md) !important; }
  .ec-filter-bar input, .ec-filter-bar select, .ec-filter-bar textarea,
  .ec-form-grid input, .ec-form-grid select, .ec-form-grid textarea,
  .ec-content input:not([type=checkbox]):not([type=radio]),
  .ec-content select, .ec-content textarea {
    font-size: max(16px, var(--ec-fs-base)); /* ≥16px 防 iOS 缩放 */
    min-height: var(--ec-m-touch);
    width: 100%; box-sizing: border-box;
  }
  /* 全站按钮统一节奏 */
  .ec-action, .ec-btn, button.ec-action, .ec-filter-bar button {
    min-height: var(--ec-m-touch);
    font-size: var(--ec-fs-sm);
    padding: 0 clamp(12px, 3.4vw, 18px);
    border-radius: var(--ec-m-radius-sm);
  }
  /* 操作按钮组横排紧凑 */
  .ec-actions-row, .ec-btn-row, .ec-card-foot {
    display: flex; flex-wrap: wrap; gap: var(--ec-sp-xs);
  }
  .ec-actions-row > .ec-action, .ec-btn-row > .ec-btn { flex: 1 1 auto; justify-content: center; }
  .ec-filter-collapse .cf-toggle { min-height: var(--ec-m-touch); }

  /* ==========================================================
     Tabs —— 横向滚动吸顶
     ========================================================== */
  .ec-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; gap: var(--ec-sp-2xs);
    position: sticky; top: 0; z-index: 5; background: inherit;
  }
  .ec-tabs::-webkit-scrollbar { display: none; }
  .ec-tabs .tab { flex-shrink: 0; min-height: var(--ec-m-touch); padding: 6px clamp(11px, 3.2vw, 16px); font-size: var(--ec-fs-sm); }

  /* 步骤向导横向滚动 */
  .ec-stepper { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--ec-sp-2xs); }
  .ec-stepper::-webkit-scrollbar { display: none; }
  .ec-stepper .step { flex-shrink: 0; font-size: var(--ec-fs-sm); }

  /* ==========================================================
     图表 —— 一屏一图
     ========================================================== */
  [id$="-chart"], .ec-chart, .chart-host, .echart-box, .iot-mini-chart, .chart-box, .echarts-host {
    min-height: clamp(190px, 54vw, 300px) !important;
    height: auto !important; width: 100% !important;
  }
  .dashboard-screen .ec-grid-4, .dashboard-screen .ec-grid-3, .dashboard-screen .ec-grid-2 { grid-template-columns: 1fr !important; }

  /* ==========================================================
     Drawer / Modal → 全屏 / 底部 Sheet
     ========================================================== */
  .ec-drawer .drawer-panel, .ec-drawer-panel {
    width: 100% !important; max-width: 100% !important;
    height: 100% !important; max-height: 100% !important;
    border-radius: 0 !important; margin: 0 !important;
  }
  .ec-confirm-card, .ec-modal-card { width: min(94vw, 460px) !important; border-radius: var(--ec-m-radius) !important; }

  /* 性能：超长列表惰性渲染（仅很靠后的卡片，避免滚动跳动） */
  .ec-table-host > table > tbody > tr:nth-child(n+24) {
    content-visibility: auto;
    contain-intrinsic-size: auto 140px;
  }
}

/* ============================================================
   抽屉导航（无毛玻璃，纯遮罩）
   ============================================================ */
.ec-m-drawer-mask {
  position: fixed; inset: 0; background: rgba(15, 53, 84, 0.46);
  z-index: 9000; opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.ec-m-drawer-mask.open { display: block; opacity: 1; visibility: visible; }
.ec-m-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--ec-m-drawer-w); max-width: 90vw;
  background: #fff; z-index: 9001;
  transform: translateX(-104%);
  transition: transform .24s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column;
  box-shadow: 6px 0 28px rgba(15, 53, 84, 0.2);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ec-m-drawer.open { display: flex; transform: translateX(0); }
.ec-m-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ec-sp-md); border-bottom: 1px solid var(--ec-border, #e2eaf1); flex-shrink: 0;
}
.ec-m-drawer-head b { font-size: var(--ec-fs-base); color: var(--ec-primary-dark, #0f3554); }
.ec-m-drawer-close {
  width: var(--ec-m-touch); height: var(--ec-m-touch);
  border: none; background: #f2f7fb; border-radius: var(--ec-m-radius-sm);
  font-size: clamp(20px, 6vw, 24px); color: var(--ec-text-soft, #5b7187); cursor: pointer;
}
.ec-m-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: var(--ec-sp-xs) 0; }
.ec-m-drawer-body .ec-menu li { min-height: var(--ec-m-touch); display: flex; align-items: center; }

/* ============================================================
   底部 Tab（角色定制，无毛玻璃）
   ============================================================ */
.ec-m-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 8000;
  height: calc(var(--ec-m-tabbar-h) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: #fff;
  border-top: 1px solid var(--ec-border, #e2eaf1);
  box-shadow: 0 -2px 12px rgba(15, 53, 84, 0.07);
}
@media (max-width: 832px) { body.ec-has-mobile-nav .ec-m-tabbar { display: block; } }
.ec-m-tabbar-inner { display: flex; width: 100%; height: var(--ec-m-tabbar-h); align-items: stretch; justify-content: space-around; }
.ec-m-tab {
  flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px; padding: 4px 2px;
  border: none; background: transparent; color: var(--ec-text-soft, #5b7187);
  font-size: clamp(10px, 2.7vw, 11.5px); text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ec-m-tab .ico { font-size: clamp(18px, 5vw, 22px); line-height: 1; }
.ec-m-tab .lbl { max-width: 100%; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-m-tab.active { color: var(--ec-primary, #1987b4); font-weight: 700; }

/* 老人友好叠加 */
@media (max-width: 832px) {
  body.elder-friendly { font-size: clamp(15.5px, 0.6vw + 14.5px, 19px); }
  body.elder-friendly .ec-action, body.elder-friendly .ec-btn,
  body.elder-friendly .ec-m-tab,
  body.elder-friendly .ec-table-host td.ec-card-actions-cell a {
    min-height: clamp(46px, 12vw, 56px);
    font-size: clamp(14px, 0.7vw + 13px, 18px);
  }
  body.elder-friendly .ec-table-host > table > tbody > tr > td { font-size: var(--ec-fs-base); }
}

/* 登录 / 报告独立布局 */
@media (max-width: 832px) {
  .login-bg { padding: var(--ec-sp-md); min-height: 100dvh; }
  .login-card, .login-card.login-grid { padding: var(--ec-sp-lg); max-width: 100%; grid-template-columns: 1fr !important; }

  .report-layout { grid-template-columns: 1fr !important; }
  .report-sidebar { position: sticky; top: 0; z-index: 30; height: auto !important; max-height: none; }
  .report-sidebar .sidebar-nav { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--ec-sp-2xs); padding: var(--ec-sp-2xs) 0; }
  .report-sidebar .sidebar-nav::-webkit-scrollbar { display: none; }
  .report-sidebar .sidebar-section-title { display: none; }
  .report-sidebar .sidebar-item { flex-shrink: 0; padding: 7px 13px; border-left: none; border-radius: 999px; background: rgba(255, 255, 255, 0.1); font-size: var(--ec-fs-sm); }
  .report-main { padding: var(--ec-sp-md); }
  .report-main .grid-2, .report-main .grid-3 { grid-template-columns: 1fr !important; }
}

/* 超窄屏：字段两列保底 */
@media (max-width: 412px) {
  .ec-table-host > table > tbody > tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
   横滑宽表固定姓名列 —— 未卡片化的宽表（虚拟滚动 / overflow-x 容器内）
   JS（mobile.js setupStickyCols）将「姓名」列及其左侧列标记为
   .ec-m-stick / .ec-m-stick-{n}，并按列宽计算 left 偏移（--ec-sc-{n}）；
   左右滑动查看完整列时，主标识列始终吸附可见。
   （.full-roster-table 等已自带冻结列，JS 自动跳过，不受影响）
   ============================================================ */
@media (max-width: 832px) {
  .ec-content table .ec-m-stick {
    position: sticky;
    z-index: 2;
    background: #fff;
    box-shadow: 1px 0 0 var(--ec-border, #dfe8ee);
  }
  .ec-content table thead .ec-m-stick {
    z-index: 4;
    background: #eef4fa;
  }
  .ec-content table .ec-m-stick-0 { left: var(--ec-sc-0, 0px); }
  .ec-content table .ec-m-stick-1 { left: var(--ec-sc-1, 0px); }
  .ec-content table .ec-m-stick-2 { left: var(--ec-sc-2, 0px); }
}

@media (prefers-reduced-motion: reduce) {
  .ec-m-drawer, .ec-m-drawer-mask { transition: none; }
}