/* 遮罩默认隐藏(桌面端不参与布局) */
.sidebar-mask { display: none; }
/* 底部 6 tab 导航: 桌面端完全隐藏(仅手机端由媒体查询启用) */
.e2-tabbar { display: none; }

/* ===== 手机端适配 (≤768px) ===== */
@media (max-width: 768px) {
  /* 1) 侧栏: 默认收起, 变抽屉 */
  .layout { flex-direction: column; }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: 240px; max-width: 78vw;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000; overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); box-shadow: 2px 0 16px rgba(0,0,0,.3); }
  /* 遮罩 */
  .sidebar-mask {
    position: fixed; inset: 0; background: rgba(0,0,0,.4);
    z-index: 999; display: none;
  }
  .sidebar-mask.show { display: block; }

  /* 2) 汉堡按钮 */
  .hamburger { display: flex !important; }

  /* 3) 顶栏紧凑 */
  .topbar { height: 48px; padding: 0 12px; }
  .topbar .title { font-size: 14px; }

  /* 4) 表格: 容器内横向滚动, 不撑破页面 */
  .table-wrap, .card > table, .wrap > table {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  table { min-width: 560px; }        /* 表格自己滚, 页面不滚 */
  th, td { white-space: nowrap; padding: 8px 10px; font-size: 13px; }

  /* 5) 点击目标加大 */
  .act, .op-btn, button, .btn { min-height: 36px; display: inline-flex; align-items: center; }
  .act { padding: 4px 8px; }
  input[type=checkbox] { width: 20px; height: 20px; }
  select, input[type=text], input[type=number], input[type=password],
  input[type=datetime-local], input:not([type]), textarea {
    min-height: 40px; font-size: 15px;
  }
  input[type=radio] { width: 20px; height: 20px; }

  /* 6) KPI 卡片: 2 列 */
  .kpis { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .kpi .val { font-size: 20px; }

  /* 7) 大屏三列 -> 单列堆叠 */
  .dash-3col, .dash-grid, .cols { display: block !important; }
  .dash-3col > * + *, .cols > * + * { margin-top: 12px; }

  /* 8) 弹窗: 高度受限 + 内容独立滚动 + 底部按钮常驻
        DOM 结构覆盖三类:
        - cfg/system:  .modal-bg  > .modal > #modalContent(内含 .m-actions)
        - manual/special/quota: .modal-mask > .modal > [.form-grid, .modal-actions]
        - public:      .mask      > .modal > [.m-body, .m-foot] */
  .modal-bg, .modal-mask, .mask { align-items: flex-start; padding: 12px 0; }
  .modal, .modal-content {
    width: 94vw !important; max-width: 94vw !important;
    max-height: 88vh !important;
    display: flex; flex-direction: column;
    overflow: hidden !important;
  }
  /* 内容区独立滚动(操作按钮区不滚) */
  .modal > form,
  .modal > .modal-body,
  .modal > .m-body,
  .modal > .form-grid,
  .modal > #modalContent {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* 操作按钮区常驻弹窗底部(仅限弹窗内, 不影响页面内的 .m-actions) */
  .modal .modal-actions, .modal .m-actions, .modal .m-foot,
  .modal-bg .m-actions, .modal-mask .modal-actions, .mask .m-foot {
    position: sticky; bottom: 0; z-index: 2;
    flex: 0 0 auto; background: #fff;
  }
  .modal .modal-actions, .modal .m-actions {
    margin-top: 0; padding-top: 10px;
    border-top: 1px solid #eef2f7;
  }
  .modal .m-foot { border-top: 1px solid #eef2f8; }

  /* 9) 通用: 长文本换行, 图片自适应 */
  img { max-width: 100%; height: auto; }
  .wrap { padding: 10px !important; }
  h1, h2 { font-size: 18px; }
  .toolbar { flex-wrap: wrap; gap: 8px; }

  /* ===== 补充: 手机端专用(不改桌面端) ===== */
  /* 统计卡改为 2 列网格 */
  .stat-row { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  /* 表格的容器(.card/.panel)承担横向滚动, 覆盖 JS 动态生成的表格 */
  .card, .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* 子页顶栏: 标题单行省略, 不再撑高/撑宽 */
  .topbar .title { letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .topbar .brand { font-size: 15px; letter-spacing: 1px; white-space: nowrap; }
  /* 汉堡按钮外观与点击目标 */
  .hamburger {
    align-items: center; justify-content: center;
    width: 38px; height: 38px; min-height: 38px;
    margin-right: 8px; padding: 0;
    background: rgba(255,255,255,.12); color: #fff;
    border: 1px solid rgba(255,255,255,.3); border-radius: 8px;
    font-size: 18px; line-height: 1; cursor: pointer; flex: 0 0 auto;
  }
  /* 标签页横向滚动, 不撑破页面 */
  .tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tab { flex: 0 0 auto; padding: 9px 14px; }
  /* 顶栏: 窄屏只保留 logo + 页面标题 + 返回; 允许标题省略 */
  .topbar > .logo + .brand { display: none; }
  .brand-name { display: none; }
  .topbar .ec-user { flex: 0 0 auto !important; gap: 6px !important; font-size: 12px !important; }
  .topbar .ec-user > span:first-child { display: none; }
  .topbar .ec-user a { white-space: nowrap; flex: 0 0 auto; }
  .topbar .title, .topbar .top-title {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    text-align: center;
  }
  .topbar .back {
    flex: 0 0 auto; margin-left: 8px; font-size: 12px; white-space: nowrap;
    display: inline-flex; align-items: center; min-height: 36px; padding: 0 4px;
  }
  .topbar .ec-user a { display: inline-flex; align-items: center; min-height: 36px; }
  /* 其余文字链接也保证 36px 点击高度 */
  .tip a, .back-btn, .dhead .back-btn, a.back, a.edit {
    display: inline-flex; align-items: center; min-height: 36px;
  }
  /* 单选框/复选框: 强制 20x20 触控尺寸(用 !important 压过页面的内联 width:auto) */
  input[type=radio], input[type=checkbox] {
    width: 20px !important; height: 20px !important;
    min-height: 20px; max-width: 20px !important; flex: 0 0 auto;
  }
  .topbar .logo, .topbar .logo-badge { flex: 0 0 auto; }

  /* 表单/筛选行在窄屏可换行 */
  .row { flex-wrap: wrap; }

  /* ===== 底部 6 tab 导航 (仅手机端) ===== */
  body { padding-bottom: 62px !important; }
  .e2-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    display: flex; align-items: stretch;
    background: #fff; border-top: 1px solid #e3eaf4;
    box-shadow: 0 -1px 6px rgba(16,42,84,.06);
  }
  .tb-item {
    flex: 1 1 0; min-width: 0; min-height: 48px;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    padding: 5px 2px; text-decoration: none;
    color: #8a99b5; font-size: 11px; line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
  }
  .tb-item.tb-active { color: #2f8fff; }
  .tb-ico { font-size: 18px; line-height: 1; }
  .tb-txt { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .tb-dot {
    position: absolute; top: 3px; left: 50%; margin-left: 4px;
    min-width: 16px; height: 16px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f56c6c; color: #fff; font-size: 10px; font-weight: 700;
    line-height: 1; border-radius: 8px; box-sizing: border-box;
  }

  /* 顶部空间压缩: KPI 改单行横向滚动 */
  .stat-row {
    display: flex !important; flex-wrap: nowrap !important;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    gap: 8px !important; padding-bottom: 4px;
  }
  .stat-card { flex: 0 0 auto !important; min-width: 108px !important; padding: 8px 10px !important; }
  .stat-icon { width: 26px !important; height: 26px !important; font-size: 12px !important; }
  .stat-value { font-size: 18px !important; }
  .stat-label { font-size: 11px !important; white-space: nowrap; }
  /* 顶栏标题: 缩小 + 超长省略 */
  .topbar .title, .topbar-title {
    font-size: 13px !important; max-width: 52vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* 搜索框与筛选 tab 压缩 */
  .mo-search { padding: 6px 10px !important; font-size: 13px !important; margin-top: 4px !important; min-height: 34px !important; }
  .mo-tabs { margin: 4px 0 !important; }
  .mo-tab { padding: 4px 9px !important; font-size: 11.5px !important; min-height: 30px !important; }
  /* 区块标题与卡片间距收紧 */
  .section-head { margin: 6px 0 4px !important; }
  .refresh-line { font-size: 11px !important; }
  .enterprise-card { margin-bottom: 10px !important; }
  .enterprise-head, .outlet-head { padding: 5px 10px !important; }
  .outlet-head { margin-bottom: 8px !important; }
  .outlet-block { padding: 8px 10px !important; }

  /* ===== 顶栏溢出租: 手机端强制单行, 精简为 "☰ | 环 企业环境云 | 退出" ===== */
  .topbar {
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    height: 52px !important;
    min-height: 52px !important;
    gap: 8px !important;
    padding: 0 10px !important;
  }
  .topbar-right {
    flex-wrap: nowrap !important;
    height: auto !important;
    min-height: 0 !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
  }
  .topbar-right .online-dot,
  .topbar-right .online-text,
  .topbar-right > span,
  .topbar-right a[href="/login.html"] { display: none !important; }
  .topbar-right a:last-child {
    display: inline-flex !important; align-items: center;
    min-height: 32px; font-size: 13px !important; white-space: nowrap !important;
  }
  .topbar-title { display: none !important; }
  .topbar .brand, .topbar .brand-name {
    display: flex !important;
    align-items: center;
    font-size: 14px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 50vw !important;
  }
  .topbar .logo-badge {
    width: 26px !important; height: 26px !important;
    font-size: 13px !important; flex: 0 0 auto !important;
  }
  /* 内页顶栏(由 session.js 注入 .ec-user): 同样只留"退出", 不换行 */
  .topbar .ec-user {
    flex-wrap: nowrap !important;
    height: auto !important; min-height: 0 !important;
    margin-left: auto !important;
    white-space: nowrap !important;
  }
  .topbar .ec-user > span,
  .topbar .ec-user a[href="/login.html"] { display: none !important; }
  .topbar .ec-user a:last-child {
    display: inline-flex !important; align-items: center;
    min-height: 32px; font-size: 13px !important; white-space: nowrap !important;
  }
  /* 内页(logo + brand 结构)仍按原设计隐藏短品牌名, 只显示页面标题 */
  .topbar > .logo + .brand { display: none !important; }
}