/* ==========================================================================
   响应式适配层
   --------------------------------------------------------------------------
   设计稿基准 1440×900。桌面端严格 1:1 还原，以下断点只在小屏生效，
   不改动任何桌面样式。

   断点策略：
     ≤1024px  平板 —— 侧边栏收窄，右侧栏移到主区下方
     ≤768px   手机 —— 侧边栏变抽屉（汉堡按钮唤出），表格变卡片，表单单列
     ≤480px   小屏 —— 进一步压缩间距，KPI 两列
   ========================================================================== */

/* ---------- 移动端顶部条（仅小屏显示） ---------- */
.mnav {
  display: none;
  position: sticky;
  top: 0;
  z-index: 120;
  height: 52px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--stroke-subtle);
}
.mnav__btn {
  width: 36px;
  height: 36px;
  flex: none;
  border: 0;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: var(--text-1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mnav__btn:active { background: var(--bg-muted); }
.mnav__title {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mnav__spacer { flex: 1; }

/* 抽屉遮罩 */
.mnav__mask {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(15, 20, 25, .45);
}
.mnav__mask.on { display: block; }

/* ==========================================================================
   1025–1366px 小桌面
   --------------------------------------------------------------------------
   1440 设计稿在 13/14 寸笔记本上放不下全部列。来源与归属是信息里
   最不关键的两列（开发状态、阶段、查重都保留），此档直接隐藏，
   公司列就有 190px 下限的容身之地，不会再被压成竖排。
   ========================================================================== */
@media (max-width: 1366px) and (min-width: 1025px) {
  .trow--head .td--source,
  .trow--body .td--source,
  .trow--head .td--owner,
  .trow--body .td--owner { display: none !important; }
}

/* ==========================================================================
   ≤1024px 平板
   ========================================================================== */
@media (max-width: 1024px) {
  .app { position: relative; }

  /* 侧栏收窄为图标条 */
  .sidebar {
    width: 64px;
    padding: var(--s-5) var(--s-4);
    align-items: center;
  }
  .sidebar__brand-name,
  .sidebar__group-label,
  .sidebar__foot,
  .nav-item span {
    display: none;
  }
  .sidebar__brand { justify-content: center; padding: 0; }
  .nav-item { justify-content: center; padding: 0; width: 44px; }
  .nav-item.is-active { border-radius: var(--r-btn); }

  /* 右侧栏移到主区下方 */
  .main-row { flex-direction: column; }
  .side-col { width: 100% !important; flex-direction: row; flex-wrap: wrap; }
  .side-col > * { flex: 1 1 280px; min-width: 0; }

  /* 内容区允许滚动，不再裁切 */
  .content { overflow-y: auto; }
  .table-card { height: auto !important; }
}

/* ==========================================================================
   ≤768px 手机
   ========================================================================== */
@media (max-width: 768px) {
  /* 隐藏侧栏，改用抽屉 */
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 264px;
    z-index: 140;
    padding: var(--s-8);
    align-items: stretch;
    transform: translateX(-100%);
    transition: transform .24s cubic-bezier(.32, .72, 0, 1);
    box-shadow: 8px 0 24px rgba(15, 20, 25, .12);
    overflow-y: auto;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar__brand-name,
  .sidebar__group-label,
  .sidebar__foot,
  .nav-item span { display: block; }
  .sidebar__brand { justify-content: flex-start; }
  .nav-item { justify-content: flex-start; padding: 0 10px; width: 100%; }

  .mnav { display: flex; }

  .app { height: auto; min-height: 100%; }
  .main { width: 100%; }
  .content { overflow: visible; padding: var(--s-5) var(--s-4) 32px; gap: var(--s-5); }

  /* 顶栏压缩：搜索换行、隐藏部分文字 */
  .topbar {
    height: auto;
    flex-wrap: wrap;
    padding: var(--s-4);
    gap: var(--s-3);
  }
  .topbar__sync { display: none; }
  .topbar__user { display: none; }
  .search { width: 100% !important; order: 5; }

  /* 页头纵向排布，按钮撑满 */
  .page-header { flex-direction: column; align-items: stretch; gap: var(--s-4); }
  .page-header__title { font-size: 20px; line-height: 28px; }
  .page-header__actions { flex-wrap: wrap; }
  .page-header__actions .btn { flex: 1 1 auto; justify-content: center; }

  /* KPI 两列 */
  .kpi-row { flex-wrap: wrap; gap: var(--s-4); }
  .kpi-card { flex: 1 1 calc(50% - var(--s-4)); min-width: 0; padding: var(--s-4); }
  .kpi-card__value { font-size: 24px; line-height: 30px; }

  /* 侧栏卡片单列 */
  .side-col { flex-direction: column; flex-wrap: nowrap; }
  .side-col > * { flex: none; width: 100% !important; }

  /* ---------- 表格转卡片 ---------- */
  .table-card { overflow: visible; }
  .trow--head { display: none !important; }        /* 表头在卡片里没必要 */

  .trow--body {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas: "main action" "meta meta";
    gap: var(--s-2) var(--s-4);
    height: auto !important;
    min-height: 0;
    padding: var(--s-4) !important;
    align-items: start !important;
    border-bottom: 1px solid var(--stroke-subtle);
  }
  .trow--body:last-child { border-bottom: 0; }

  /* 公司名占主区 */
  .trow--body .td--company { grid-area: main; width: auto !important; flex: none !important; }
  /* 操作按钮占右侧 */
  .trow--body .td--action { grid-area: action; width: auto !important; }
  /* 其余字段平铺到第二行 */
  .trow--body .td--country,
  .trow--body .td--country-sm,
  .trow--body .td--source,
  .trow--body .td--dev,
  .trow--body .td--stage,
  .trow--body .td--lock,
  .trow--body .td--owner {
    grid-area: meta;
    display: inline-flex;
    width: auto !important;
    margin-right: var(--s-4);
  }

  /* 用 data-label 做字段前缀 */
  .trow--body .td--country::before   { content: "国家 "; color: var(--text-4); font-size: 12px; }
  .trow--body .td--source::before   { content: "来源 "; color: var(--text-4); font-size: 12px; }
  .trow--body .td--dev::before      { content: "开发状态 "; color: var(--text-4); font-size: 12px; }
  .trow--body .td--stage::before    { content: "阶段 "; color: var(--text-4); font-size: 12px; }
  .trow--body .td--lock::before     { content: "归属 "; color: var(--text-4); font-size: 12px; }
  .trow--body .td--owner::before    { content: "归属 "; color: var(--text-4); font-size: 12px; }

  .cell-info__name { white-space: normal; }
  .cell-info__contact { word-break: break-all; }

  /* ---------- 池子 Tab 可横向滚动 ---------- */
  .pool-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pool-tab { flex: 0 0 auto; white-space: nowrap; }

  /* ---------- 表单单列 ---------- */
  .form-grid { grid-template-columns: 1fr !important; }
  .form-grid .full { grid-column: auto; }

  /* ---------- 弹窗全屏 ---------- */
  /* 必须是 fixed，不是 absolute。
     桌面端 .modal 用 absolute + inset:0 依赖桌面布局，窄屏下页面
     滚动后它会跟着文档流走，覆盖到视口之外 —— 表现就是
     「点了新建线索，屏幕一片空白，再点一下又跳回原界面」。
     弹窗是浮层，必须相对视口定位。 */
  .modal {
    position: fixed !important;
    inset: 0 !important;
    align-items: stretch !important;
  }
  .modal__backdrop { display: none; }
  .modal__panel {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
  }
  /* 关键：内容区自己滚动，footer 常驻底部。
     之前这里写成 max-height:none + overflow:visible（想「让页面整体滚动」），
     结果内容把弹窗撑破视口，position:sticky 的 footer 失去参照、
     飘到表单中间 —— 就是用户看到的「保存按钮消失 / 按钮浮在中间 /
     内容横向溢出到屏幕外」。滚动必须发生在 .modal__list 这一层，
     面板本身要靠 flex 把 header/list/footer 三段固定住。 */
  .modal__panel {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  .modal__header { flex: 0 0 auto !important; }
  .modal__list {
    flex: 1 1 auto !important;
    min-height: 0 !important;              /* flex 子项可收缩的关键 */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    max-height: none !important;
    overscroll-behavior: contain;
  }
  .modal__footer {
    flex: 0 0 auto !important;
    position: static !important;          /* 不用 sticky，面板已固定它 */
    background: var(--bg-surface);
    border-top: 1px solid var(--stroke-default);
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .modal__btns { width: 100%; display: flex; gap: 8px; }
  .modal__btns .btn { flex: 1 1 0; min-width: 0; justify-content: center; }

  /* 表单在窄屏下不允许横向溢出：栅格单列 + 子元素可收缩 */
  .modal__list * { max-width: 100%; }
  .form-grid > div { min-width: 0; }
  .form-grid input,
  .form-grid select,
  .form-grid textarea { min-width: 0; width: 100%; }
  /* 「联系人 / 职位」这行是 display:flex，窄屏改为上下排列 */
  .form-grid > div > div[style*="display:flex"] { flex-wrap: wrap; }
  .form-grid > div > div[style*="display:flex"] > input { flex: 1 1 140px; }

  /* ---------- 详情抽屉全屏 ---------- */
  .drawer {
    width: 100% !important;
    max-width: 100% !important;
  }
  .drawer__body { padding: var(--s-5) var(--s-4) !important; }
  .field-grid { grid-template-columns: 1fr !important; }

  /* ---------- 权限矩阵可横向滚动 ---------- */
  .matrix { font-size: 12px; }
  .matrix th, .matrix td { padding: 7px 6px; }

  /* ---------- 照片墙加大方便点选 ---------- */
  .shot { width: 72px; height: 72px; }

  .user-cell__name { white-space: normal; }
}

/* ==========================================================================
   ≤480px 小屏
   ========================================================================== */
@media (max-width: 480px) {
  :root { --s-8: 12px; --s-9: 14px; --s-10: 16px; }

  .kpi-card { flex: 1 1 100%; }
  .page-header__actions .btn { flex: 1 1 100%; }
  .sidebar { width: 240px; }
  .trow--body .td--source,
  .trow--body .td--owner { display: none !important; }  /* 保留最关键的三项 */
  /* 开发状态比「来源」更重要，窄屏下隐藏来源但保留状态 */
  .trow--body .td--dev { display: inline-flex !important; }
}

/* ---------- 触屏设备：去掉 hover 效果，避免粘滞 ---------- */
@media (hover: none) {
  .nav-item:hover,
  .card-link:hover,
  .btn:hover { background: inherit; }
  .card-link:hover { text-decoration: none; }
}

/* ---------- 打印 ---------- */
@media print {
  .sidebar, .topbar, .mnav, .page-header__actions, .table-card__filters { display: none !important; }
  .content { overflow: visible; padding: 0; }
  .trow--body { break-inside: avoid; }
}

/* =====================================================================
   弹窗高度失控修复（2026-11-03）
   ---------------------------------------------------------------------
   现象：在「用户权限」点编辑，弹窗下半截（含保存按钮）看不到，
        必须用鼠标把页面往下拖才看得见。
   原因：.modal 用的是 position:absolute + inset:0，它的高度取决于最近的
        定位祖先。而 .content 是 overflow:hidden 的普通流容器，页面内容
        一高，弹窗就跟着内容一起被撑出视口 —— 它不是浮层，是「页面里的
        一块区域」，所以只能靠页面滚动才能看全。
   修法：浮层必须相对视口定位（fixed），并给自己一个高度上限；
        内容区在弹窗内滚动，页眉和页脚（保存按钮）永远钉在弹窗两端。
   ===================================================================== */
.modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 90;
}
.modal__panel {
  max-height: calc(100vh - 20px);
  max-height: calc(100dvh - 20px);      /* 移动端带地址栏时更准 */
  overflow: hidden !important;
}
.modal__header,
.modal__footer { flex: 0 0 auto; }
.modal__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.modal__footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--stroke-default);
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
}