/* ==========================================================================
   响应式适配补丁 — 后台（admin）
   --------------------------------------------------------------------------
   约束：只做布局/尺寸/兼容，不改业务样式与主题色。
   所有规则集中在本文档，按「基础兜底 → 断点 → 组件 → 触控/悬停」排列，
   断点从小到大书写，避免覆盖冲突；加载顺序在所有业务样式之后。
   断点：<360 / 360–767 / 768–1023 / 1024–1279 / 1280–1679 / ≥1680
   ========================================================================== */

/* ==========================================================================
   响应式适配补丁 · 一、基础兜底
   ========================================================================== */
:root {
  /* 动态视口高度：默认 100vh，支持 dvh 的浏览器优先 dvh，JS 兜底写 --app-vh */
  --app-vh: 100vh;
  --adapt-safe-top: env(safe-area-inset-top, 0px);
  --adapt-safe-right: env(safe-area-inset-right, 0px);
  --adapt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --adapt-safe-left: env(safe-area-inset-left, 0px);
  --adapt-tap: 44px; /* 触控最小热区 */
}

@supports (height: 100dvh) {
  :root { --app-vh: 100dvh; }
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* iOS 点击灰色高亮 */
* {
  -webkit-tap-highlight-color: transparent;
}

/* 触控端点击无需等待 300ms（不绑定 touch 事件，避免重复触发） */
a, button, input, select, textarea, label, [role="button"] {
  touch-action: manipulation;
}

/* 媒体元素统一防溢出 */
img, video, canvas {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* 滚动容器 iOS 弹性滚动 */
.table-scroll,
.main,
.modal-body,
.drawer-body,
.nav,
.card-body {
  -webkit-overflow-scrolling: touch;
}

/* 用动态高度替换写死的 100vh */
.app { min-height: var(--app-vh); }
.sidebar { height: var(--app-vh); }
.main { min-height: calc(var(--app-vh) - 56px); }
.login-body { min-height: var(--app-vh); }
.modal { max-height: calc(var(--app-vh) - 48px); }

/* 刘海/挖孔屏安全区（桌面 env() 为 0，不影响原布局） */
.topbar { padding-left: calc(24px + var(--adapt-safe-left)); padding-right: calc(24px + var(--adapt-safe-right)); }
.toast-host { top: calc(16px + var(--adapt-safe-top)); }
.modal-foot { padding-bottom: calc(14px + var(--adapt-safe-bottom)); }
.drawer-body { padding-bottom: calc(20px + var(--adapt-safe-bottom)); }

/* ==========================================================================
   响应式适配补丁 · 二、字体下限（原 10.5–11.5px 提升到 12px）
   ========================================================================== */
.brand-text span,
.nav-desc,
.event-card .ec-code,
.event-card .ec-stat .l,
.funnel-count small,
.kbd,
.login-mobile-brand span,
.image-picker .ip-broken,
.verify-tag,
.hash-row .hk,
.cell-sub {
  font-size: 12px;
}

/* ==========================================================================
   响应式适配补丁 · 三、断点：≤1023px（平板竖屏 / 折叠屏竖屏 / 手机）
   说明：原 admin.css 的 900px 档位只服务活动配置页；这里统一扩展到 1023，
   且用 .has-adapt-js 承载汉堡导航，未执行 JS 时仍退回横向滚动导航。
   ========================================================================== */
@media (max-width: 1023px) {
  body { min-width: 0; overflow-x: hidden; }
  .app { grid-template-columns: 1fr; }

  .sidebar {
    position: static; height: auto; z-index: auto;
    padding: calc(10px + var(--adapt-safe-top)) calc(12px + var(--adapt-safe-right)) 8px
             calc(12px + var(--adapt-safe-left));
    border-right: 0; border-bottom: 1px solid var(--line);
  }
  .brand { padding: 0 2px 8px; }
  .nav {
    flex-direction: row; gap: 6px; padding-bottom: 2px;
    overflow-x: auto; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item { flex: 0 0 auto; padding: 10px 12px; min-height: var(--adapt-tap); justify-content: center; }
  .nav-item::before { display: none; }
  .nav-desc { display: none; }
  .sidebar-foot { display: none; }

  .topbar {
    position: static; height: auto; min-height: 46px;
    padding: 8px calc(12px + var(--adapt-safe-right)) 8px calc(12px + var(--adapt-safe-left));
    flex-wrap: wrap; gap: 6px;
  }
  .crumbs { min-width: 0; flex: 1 1 auto; }
  .crumbs-event { max-width: 42vw; }
  .topbar-actions {
    flex: 1 1 100%;
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    padding-bottom: 2px;
  }
  .topbar-actions::-webkit-scrollbar { display: none; }
  .topbar-actions .btn { flex: 0 0 auto; }

  .main { padding: 12px; min-height: 0; }
  .page-head { flex-direction: column; gap: 10px; }
  .page-head-actions { flex-wrap: wrap; width: 100%; }
  .card-head { flex-wrap: wrap; gap: 8px; }
  .card-body { padding: 14px; }
  .card + .card { margin-top: 12px; }

  /* 表单与栅格：单列/两列 */
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .split-wide { grid-template-columns: 1fr; }
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 步骤条：固定 4 步均分，不横向滚动 */
  .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 14px; }
  .step { padding: 9px 6px; gap: 5px; font-size: 12px; min-width: 0; overflow: hidden; white-space: nowrap; }
  /* span 默认是 inline，overflow 不生效；改成 block 才能省略号截断而不是被视口裁掉 */
  .step > span:last-child { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .step .idx { width: 22px; height: 22px; font-size: 12px; }

  /* 弹窗宽度自适应 */
  .modal, .modal-sm, .modal-lg, .modal-760 { width: calc(100vw - 24px); }
  .modal-body { padding: 14px; }
  .modal-foot { padding: 10px 14px calc(10px + var(--adapt-safe-bottom)); flex-wrap: wrap; }

  /* 抽屉：平板起最多 92vw（保持原有限制） */
  .drawer { max-width: 92vw; }

  /* 图片选择器竖排、按钮拉到触控高度 */
  .image-picker { flex-direction: column; align-items: stretch; gap: 10px; padding: 8px; }
  .image-picker .ip-thumb,
  .image-picker .ip-empty,
  .image-picker.is-logo .ip-thumb,
  .image-picker.is-logo .ip-empty { width: 100%; height: 132px; }
  .image-picker.is-background .ip-thumb,
  .image-picker.is-background .ip-empty { height: auto; aspect-ratio: 16 / 9; }
  .image-picker .ip-empty { flex-direction: row; gap: 8px; }
  .image-picker .ip-edit { opacity: 1; font-size: 12px; padding: 4px 10px; }
  .image-picker .ip-actions .btn { min-height: var(--adapt-tap); padding: 0 14px; }
  .image-picker .ip-actions .btn[hidden] { display: none; }
}

/* ==========================================================================
   响应式适配补丁 · 四、断点：≤767px（手机竖屏）
   ========================================================================== */
@media (max-width: 767px) {
  h1 { font-size: 20px; }
  .page-head .sub { font-size: 12px; }

  /* 卡片：单列 */
  .event-grid { grid-template-columns: 1fr; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .event-card { padding: 14px 16px; }
  .event-card .ec-name { white-space: normal; }

  /* 表格：容器内横向滚动，禁止页面整体横滚 */
  .table-scroll {
    overflow-x: auto; overflow-y: visible;
    max-width: 100%;
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .data-table { min-width: 640px; font-size: 13px; }
  .data-table th { padding: 9px 10px; }
  .data-table td { padding: 10px; }
  .data-table .actions { flex-wrap: nowrap; }

  /* 弹窗：移动端底部弹层 */
  .overlay { place-items: end stretch; padding: 0; }
  .modal, .modal-sm, .modal-lg, .modal-760 {
    width: 100%; max-width: 100%;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
  }
  .overlay.in .modal { transform: none; }
  .modal-head { padding: 14px 16px; }
  .modal-foot .btn { flex: 1 1 auto; }

  /* 抽屉：整宽 */
  .drawer { width: 100%; max-width: 100%; }
  .drawer-head, .drawer-body { padding-left: 16px; padding-right: 16px; }

  /* 漏斗：两列 + 进度条独占一行 */
  .funnel-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .funnel-bar { grid-column: 1 / -1; order: 3; }
  .funnel-count { text-align: right; }
  .funnel-result { flex-wrap: wrap; gap: 6px; }
  .funnel-result .n { font-size: 28px; }

  /* 轮次卡片：操作另起一行 */
  .round-item { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
  .round-item .ops { grid-column: 1 / -1; justify-content: flex-end; }
  .round-item .no { font-size: 17px; }

  /* 分页：换行不挤压 */
  .pager { flex-wrap: wrap; gap: 8px; justify-content: center; }
  .pager-info { width: 100%; text-align: center; }

  /* 键值对：标签列收窄 */
  .kv { grid-template-columns: 96px minmax(0, 1fr); font-size: 13px; }

  /* Toast：贴边，避免超出视口 */
  .toast-host { left: 12px; right: 12px; transform: none; }
  .toast { max-width: none; width: 100%; }

  /* iOS 聚焦 font-size < 16px 的输入框会自动放大页面 */
  .input, select.input, textarea.input, .login-box .input { font-size: 16px; }

  /* 触控端下拉/日期控件的点击区 */
  select.input { min-height: var(--adapt-tap); }
  input[type="date"], input[type="datetime-local"], input[type="time"] { min-height: var(--adapt-tap); }
}

/* ==========================================================================
   响应式适配补丁 · 五、断点：<360px（小屏低配手机）
   ========================================================================== */
@media (max-width: 359px) {
  .main { padding: 10px 8px; }
  .card-body { padding: 12px; }
  .topbar { padding-left: 8px; padding-right: 8px; }
  .crumbs-event { max-width: 34vw; }
  .stat { padding: 12px; }
  .stat .v { font-size: 26px; }
  .kv { grid-template-columns: 84px minmax(0, 1fr); }
  .step { font-size: 12px; padding: 8px 4px; }
  .step > span:last-child { display: none; } /* 极窄屏只留序号，避免文字挤压 */
  .step.active > span:last-child { display: inline; }
}

/* ==========================================================================
   响应式适配补丁 · 六、断点：1024–1279px（平板横屏 / 小笔记本）
   ========================================================================== */
@media (min-width: 1024px) and (max-width: 1279px) {
  body { min-width: 0; }
  .main { padding: 18px; }
  .sidebar { width: 188px; }
  .app { grid-template-columns: 188px minmax(0, 1fr); }
  .event-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* ==========================================================================
   响应式适配补丁 · 七、≥1680px（宽屏 / 2K 及以上）
   仅放宽内容区，不改变桌面视觉比例
   ========================================================================== */
@media (min-width: 1680px) {
  .main { padding: 28px 32px; }
  .event-grid { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
}

/* ==========================================================================
   响应式适配补丁 · 八、触控热区（pointer: coarse）
   PC 不强制 44px，触屏设备统一放大到 44px
   ========================================================================== */
@media (pointer: coarse) {
  .btn, .btn-sm { min-height: var(--adapt-tap); }
  .btn-sm { padding: 0 12px; }
  .icon-btn { width: var(--adapt-tap); height: var(--adapt-tap); }
  .pg { min-width: var(--adapt-tap); height: var(--adapt-tap); }
  .tab { min-height: var(--adapt-tap); padding-top: 10px; padding-bottom: 10px; }
  .nav-item { min-height: var(--adapt-tap); }
  .check { min-height: var(--adapt-tap); }
  .check input { width: 20px; height: 20px; }
  .chip button { min-width: 32px; min-height: 32px; }
  .data-table .actions .btn { min-height: var(--adapt-tap); }
  .input, select.input { min-height: var(--adapt-tap); }
  .login-box .input { min-height: 48px; }
}

/* ==========================================================================
   响应式适配补丁 · 九、悬停效果仅鼠标设备（触屏点击后不再残留 hover 态）
   ========================================================================== */
@media (hover: none) {
  .btn:hover { background: #fff; border-color: var(--line-strong); color: var(--text); }
  .btn-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
  .btn-danger:hover { background: #fff; border-color: #e3b4b0; color: var(--red); }
  .btn-ghost:hover { background: transparent; border-color: transparent; color: var(--text-2); }
  .btn-link:hover { text-decoration: none; }
  .nav-item:hover { background: transparent; color: var(--text-2); }
  .event-card:hover { border-color: var(--line); box-shadow: var(--shadow); }
  .stat.clickable:hover { border-color: var(--line); box-shadow: none; }
  .funnel-row:hover { border-color: var(--line); }
  .radio-card:hover { border-color: var(--line-strong); }
  .dropzone:hover { border-color: var(--line-strong); background: var(--panel-2); }
  .data-table tbody tr:hover { background: transparent; }
  .a:hover, a:hover { text-decoration: none; }
}

/* ==========================================================================
   响应式适配补丁 · 十、汉堡导航（仅在补丁 JS 生效时启用）
   未执行 JS 时保留上方横向滚动导航，保证可点击、可到达所有页面
   ========================================================================== */
.nav-toggle { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 1023px) {
  .has-adapt-js .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    width: var(--adapt-tap); height: var(--adapt-tap);
    margin-right: 2px;
    border: 1px solid var(--line); border-radius: 8px; background: #fff;
    color: var(--text); font-size: 18px; line-height: 1;
    cursor: pointer;
  }
  .has-adapt-js .sidebar {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(84vw, 300px);
    height: var(--app-vh);
    padding-top: calc(14px + var(--adapt-safe-top));
    overflow-y: auto;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    transform: translateX(-102%);
    transition: transform .22s ease;
    z-index: 130;
  }
  .has-adapt-js .nav {
    flex-direction: column; gap: 2px; overflow: visible; padding-bottom: 0;
  }
  .has-adapt-js .nav-item {
    flex: 1 1 auto; align-items: flex-start; padding: 12px 12px 12px 14px;
  }
  .has-adapt-js .nav-desc { display: block; }
  .has-adapt-js .sidebar-foot { display: block; }
  .has-adapt-js.nav-open .sidebar {
    transform: none;
    box-shadow: 0 24px 60px rgba(16, 24, 40, .24);
  }
  .has-adapt-js.nav-open .nav-backdrop {
    display: block; position: fixed; inset: 0;
    background: rgba(16, 24, 40, .45); z-index: 120;
  }
  .has-adapt-js.nav-open,
  .has-adapt-js.nav-open body { overflow: hidden; }
}

/* ==========================================================================
   响应式适配补丁 · 十一、滚动锁定（弹窗/抽屉打开时锁底层页面）
   JS 在 <html> 上打 scroll-locked，这里只负责样式回退
   ========================================================================== */
@media (max-width: 1023px) {
  html.scroll-locked body {
    overflow: hidden;
    touch-action: none;
  }
}

/* ==========================================================================
   响应式适配补丁 · 十二、折叠屏（screen-spanning）
   横向跨越两屏时放宽内容区、卡片按两列；不支持该特性的浏览器整段忽略
   ========================================================================== */
@media (horizontal-viewport-segments: 2) {
  .main { padding-left: calc(24px + env(viewport-segment-left 1 0, 0px)); }
  .event-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (vertical-viewport-segments: 2) {
  .app { min-height: 100vh; }
}

/* ==========================================================================
   响应式适配补丁 · 十三、移动端可读性增强（微信内置浏览器专项）
   --------------------------------------------------------------------------
   背景：手机上真正影响可读性的不是布局，而是字号阶梯与信息密度。
   这里只调"尺寸与间距"，不动任何颜色语义（--text-2 只是把说明文字的
   对比度从 text-3 提到与正文同级的次级灰，不是改主题色）。
   ========================================================================== */
@media (max-width: 767px) {
  /* 1) 字号阶梯：正文 15px；次要信息不低于 12.5px，避免"看得见但看不清" */
  body { font-size: 15px; line-height: 1.65; }
  h1 { font-size: 21px; }
  .page-head .sub { font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
  .card-head .sub { font-size: 13px; }
  .small, .cell-sub, .stat .sub { font-size: 12.5px; }
  .field .hint, .field .field-error { font-size: 12.5px; line-height: 1.55; }
  .event-card .ec-name { font-size: 17px; }
  .event-card .ec-code { font-size: 12px; }
  .event-card .ec-stat .n { font-size: 20px; }
  .event-card .ec-stat .l { font-size: 12px; }

  /* 2) 间距：卡片松一点、按钮之间留够手指宽度，降低误触 */
  .main { padding: 14px 12px calc(20px + var(--adapt-safe-bottom)); }
  .card-body { padding: 16px 14px; }
  .card + .card { margin-top: 14px; }
  .event-card { padding: 16px; gap: 14px; }
  .event-card .ec-stats { gap: 14px; }
  .page-head { gap: 12px; }
  .page-head-actions { gap: 10px; }

  /* 3) 操作区：两列流式排布，搜索框独占一行。
        用 flex 而不是 grid，是为了让"3 个按钮"的页面最后一行自动拉满，不留半格空位。 */
  .page-head-actions { display: flex; flex-wrap: wrap; align-items: stretch; width: 100%; }
  .page-head-actions > .input {
    flex: 1 1 100%; width: 100% !important; min-width: 0;
    height: 42px; font-size: 16px; /* 16px 防 iOS 聚焦放大 */
  }
  .page-head-actions > .btn { flex: 1 1 calc(50% - 5px); min-width: 0; }

  /* 4) 表格：给列更多呼吸空间，表头从浅灰提到可读的深灰 */
  .data-table { min-width: 700px; font-size: 13.5px; }
  .data-table th { font-size: 12.5px; font-weight: 600; color: var(--text-2); padding: 10px 12px; }
  .data-table td { padding: 12px; line-height: 1.55; }
  .data-table .chip, .data-table .badge { white-space: nowrap; }

  /* 5) 顶部栏：面包屑与动作区各占一行，动作降到 13px 不抢视线 */
  .crumbs { font-size: 13.5px; }
  .topbar-actions { gap: 12px; font-size: 13px; }
  .topbar-actions .btn { font-size: 13px; padding: 0 10px; }
}

/* 超窄屏（<360px）再收一档，避免两列按钮被压成两行字 */
@media (max-width: 359px) {
  body { font-size: 14.5px; }
  .page-head-actions > .btn { flex: 1 1 100%; }
  .event-card .ec-stat .n { font-size: 18px; }
}

/* 分页：按钮组允许换行，避免 7 个 44px 按钮在窄屏撑破卡片；
   320px 级再收窄到 38px，让"上一页 + 页码 + 下一页"仍能排成一行 */
@media (max-width: 767px) {
  .pager-btns { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 359px) {
  .pg { min-width: 38px; height: 38px; padding: 0 6px; font-size: 12.5px; }
}

/* 筛选条：搜索框独占一行，下拉两列均分；下拉为奇数个时最后一个自动占满整行，
   避免出现"半格空位"（:nth-child(even) 正好对应"下拉个数为奇数"的情形） */
@media (max-width: 767px) {
  .card-body > .row.between > .row:has(> .input) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px; width: 100%;
  }
  .card-body > .row.between > .row > .input {
    width: 100% !important; min-width: 0; height: 42px; font-size: 16px;
  }
  .card-body > .row.between > .row > .input:first-child { grid-column: 1 / -1; }
  .card-body > .row.between > .row > .input:last-child:nth-child(even) { grid-column: 1 / -1; }
}

/* 登录 / 注册：手机上让表单垂直居中、法务底注贴底，避免内容堆在上半屏、下半屏大片留白 */
@media (max-width: 1024px) {
  .login-main {
    display: flex; flex-direction: column;
    min-height: var(--app-vh);
    padding: 24px 16px calc(16px + var(--adapt-safe-bottom));
  }
  .login-box { margin: auto 0; }
  .login-legal { margin-top: 22px; padding-top: 0; }
}